diff --git a/web/packages/shared/components/ClusterDropdown/ClusterDropdown.tsx b/web/packages/shared/components/ClusterDropdown/ClusterDropdown.tsx
new file mode 100644
index 0000000000000..7e73a61ee1f21
--- /dev/null
+++ b/web/packages/shared/components/ClusterDropdown/ClusterDropdown.tsx
@@ -0,0 +1,179 @@
+/**
+ * Teleport
+ * Copyright (C) 2023  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React, { useState, useEffect } from 'react';
+import { useHistory } from 'react-router';
+import { ButtonSecondary, Flex, Menu, MenuItem, Text } from 'design';
+import { ChevronDown } from 'design/Icon';
+import cfg from 'teleport/config';
+import { Cluster } from 'teleport/services/clusters';
+
+import { HoverTooltip } from 'shared/components/ToolTip';
+
+export interface ClusterDropdownProps {
+  clusterLoader: ClusterLoader;
+  clusterId: string;
+  /*
+   * onChange is an optional prop. If onChange is not passed, it will use the built in "changeCluster" function
+   */
+  onChange?: (newValue: string) => void;
+  /*
+   * onError is required because this dropdown can be placed on any page, it does not display its own error
+   * messages. Even if using the internal "loadClusters", we will pass the error back to be consumed by the parent.
+   */
+  onError: (errorMessage: string) => void;
+}
+
+interface ClusterLoader {
+  fetchClusters: (
+    signal?: AbortSignal,
+    fromCache?: boolean
+  ) => Promise<Cluster[]>;
+  clusters: Cluster[];
+}
+
+function createOptions(clusters: Cluster[]) {
+  return clusters.map(cluster => ({
+    value: cluster.clusterId,
+    label: cluster.clusterId,
+  }));
+}
+
+export function ClusterDropdown({
+  clusterLoader,
+  clusterId,
+  onChange,
+  onError,
+}: ClusterDropdownProps) {
+  const initialClusters = clusterLoader.clusters;
+  const [options, setOptions] = React.useState<Option[]>(
+    createOptions(initialClusters)
+  );
+  const history = useHistory();
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  const selectedOption = {
+    value: clusterId,
+    label: clusterId,
+  };
+
+  function loadClusters(signal: AbortSignal) {
+    onError('');
+    try {
+      return clusterLoader.fetchClusters(signal);
+    } catch (err) {
+      onError(err.message);
+    }
+  }
+
+  function changeCluster(clusterId: string) {
+    const newPathName = cfg.getClusterRoute(clusterId);
+
+    const oldPathName = cfg.getClusterRoute(selectedOption.value);
+
+    const newPath = history.location.pathname.replace(oldPathName, newPathName);
+
+    // keep current view just change the clusterId
+    history.push(newPath);
+  }
+
+  function onChangeOption(clusterId: string) {
+    if (onChange) {
+      onChange(clusterId);
+    } else {
+      changeCluster(clusterId);
+    }
+    handleClose();
+  }
+
+  useEffect(() => {
+    const signal = new AbortController();
+    async function getOptions() {
+      try {
+        const res = await loadClusters(signal.signal);
+        setOptions(createOptions(res));
+      } catch (err) {
+        onError(err.message);
+      }
+    }
+
+    getOptions();
+    return () => {
+      signal.abort();
+    };
+  }, []);
+
+  const handleOpen = event => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  if (options.length < 1) {
+    return null;
+  }
+
+  return (
+    <Flex textAlign="center" alignItems="center">
+      <HoverTooltip tipContent={'Select cluster'}>
+        <ButtonSecondary
+          px={2}
+          css={`
+            border-color: ${props => props.theme.colors.spotBackground[0]};
+          `}
+          textTransform="none"
+          size="small"
+          onClick={handleOpen}
+        >
+          {selectedOption.label}
+          <ChevronDown ml={2} size="small" color="text.slightlyMuted" />
+        </ButtonSecondary>
+      </HoverTooltip>
+      <Menu
+        popoverCss={() => `margin-top: 36px;`}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
+        {options.map(cluster => (
+          <MenuItem
+            px={2}
+            key={cluster.value}
+            onClick={() => onChangeOption(cluster.value)}
+          >
+            <Text ml={2} fontWeight={300} fontSize={2}>
+              {cluster.label}
+            </Text>
+          </MenuItem>
+        ))}
+      </Menu>
+    </Flex>
+  );
+}
+
+type Option = { value: string; label: string };
diff --git a/web/packages/shared/components/UnifiedResources/FilterPanel.tsx b/web/packages/shared/components/UnifiedResources/FilterPanel.tsx
index afba5cbba8290..3733dd90441ff 100644
--- a/web/packages/shared/components/UnifiedResources/FilterPanel.tsx
+++ b/web/packages/shared/components/UnifiedResources/FilterPanel.tsx
@@ -65,6 +65,11 @@ interface FilterPanelProps {
   expandAllLabels: boolean;
   setExpandAllLabels: (expandAllLabels: boolean) => void;
   hideViewModeOptions: boolean;
+  /*
+   * ClusterDropdown is an optional prop to add a ClusterDropdown to the
+   * FilterPanel component. This is useful to turn off in Connect and use on web only
+   */
+  ClusterDropdown?: JSX.Element;
 }
 
 export function FilterPanel({
@@ -79,6 +84,7 @@ export function FilterPanel({
   expandAllLabels,
   setExpandAllLabels,
   hideViewModeOptions,
+  ClusterDropdown = null,
 }: FilterPanelProps) {
   const { sort, kinds } = params;
 
@@ -120,6 +126,7 @@ export function FilterPanel({
           availableKinds={availableKinds}
           kindsFromParams={kinds || []}
         />
+        {ClusterDropdown}
       </Flex>
       <Flex gap={2} alignItems="center">
         <Flex mr={1}>{BulkActions}</Flex>
diff --git a/web/packages/shared/components/UnifiedResources/UnifiedResources.tsx b/web/packages/shared/components/UnifiedResources/UnifiedResources.tsx
index 60ae77a2c12d8..c361fdcc637bd 100644
--- a/web/packages/shared/components/UnifiedResources/UnifiedResources.tsx
+++ b/web/packages/shared/components/UnifiedResources/UnifiedResources.tsx
@@ -147,6 +147,11 @@ export interface UnifiedResourcesProps {
    */
   pinning: UnifiedResourcesPinning;
   availableKinds: FilterKind[];
+  /*
+   * ClusterDropdown is an optional prop to add a ClusterDropdown to the
+   * FilterPanel component. This is useful to turn off in Connect and use on web only
+   */
+  ClusterDropdown?: JSX.Element;
   setParams(params: UnifiedResourcesQueryParams): void;
   /** A list of actions that can be performed on the selected items. */
   bulkActions?: BulkAction[];
@@ -175,6 +180,7 @@ export function UnifiedResources(props: UnifiedResourcesProps) {
     unifiedResourcePreferencesAttempt,
     updateUnifiedResourcesPreferences,
     unifiedResourcePreferences,
+    ClusterDropdown,
     bulkActions = [],
   } = props;
 
@@ -439,6 +445,7 @@ export function UnifiedResources(props: UnifiedResourcesProps) {
         currentViewMode={unifiedResourcePreferences.viewMode}
         setCurrentViewMode={selectViewMode}
         expandAllLabels={expandAllLabels}
+        ClusterDropdown={ClusterDropdown}
         setExpandAllLabels={expandAllLabels => {
           setLabelsViewMode(
             expandAllLabels
diff --git a/web/packages/teleport/src/Audit/Audit.tsx b/web/packages/teleport/src/Audit/Audit.tsx
index e2818de2732b8..85e86900701ab 100644
--- a/web/packages/teleport/src/Audit/Audit.tsx
+++ b/web/packages/teleport/src/Audit/Audit.tsx
@@ -16,10 +16,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 
 import { Danger } from 'design/Alert';
 import { Indicator, Box } from 'design';
+import { ClusterDropdown } from 'shared/components/ClusterDropdown/ClusterDropdown';
 
 import RangePicker from 'teleport/components/EventRangePicker';
 import {
@@ -53,7 +54,9 @@ export function Audit(props: State) {
     clusterId,
     fetchMore,
     fetchStatus,
+    ctx,
   } = props;
+  const [errorMessage, setErrorMessage] = useState('');
 
   return (
     <FeatureBox>
@@ -68,6 +71,16 @@ export function Audit(props: State) {
       </FeatureHeader>
       <ExternalAuditStorageCta />
       {attempt.status === 'failed' && <Danger> {attempt.statusText} </Danger>}
+      {!errorMessage && (
+        <Box mb={4}>
+          <ClusterDropdown
+            clusterLoader={ctx.clusterService}
+            clusterId={clusterId}
+            onError={setErrorMessage}
+          />
+        </Box>
+      )}
+      {errorMessage && <Danger>{errorMessage}</Danger>}
       {attempt.status === 'processing' && (
         <Box textAlign="center" m={10}>
           <Indicator />
diff --git a/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap b/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap
index 65ba878cf6eb6..c7a60a4a80f04 100644
--- a/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap
+++ b/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap
@@ -12852,6 +12852,9 @@ exports[`loaded audit log screen 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="c3"
+  />
   <div
     class="c10"
   >
diff --git a/web/packages/teleport/src/Audit/useAuditEvents.ts b/web/packages/teleport/src/Audit/useAuditEvents.ts
index cccf1a4f6150a..0dba36b065ef1 100644
--- a/web/packages/teleport/src/Audit/useAuditEvents.ts
+++ b/web/packages/teleport/src/Audit/useAuditEvents.ts
@@ -98,6 +98,7 @@ export default function useAuditEvents(
     range,
     setRange,
     rangeOptions,
+    ctx,
   };
 }
 
diff --git a/web/packages/teleport/src/Console/DocumentNodes/DocumentNodes.story.test.tsx b/web/packages/teleport/src/Console/DocumentNodes/DocumentNodes.story.test.tsx
index 89e8bf03b2b5d..b07b045eca09d 100644
--- a/web/packages/teleport/src/Console/DocumentNodes/DocumentNodes.story.test.tsx
+++ b/web/packages/teleport/src/Console/DocumentNodes/DocumentNodes.story.test.tsx
@@ -24,11 +24,13 @@ import { Document, createContext } from './DocumentNodes.story';
 
 test('render DocumentNodes', async () => {
   const ctx = createContext();
-  jest.spyOn(ctx, 'fetchClusters');
+  jest.spyOn(ctx.clustersService, 'fetchClusters');
   jest.spyOn(ctx.nodesService, 'fetchNodes');
 
   const { container } = render(<Document value={ctx} />);
-  await waitFor(() => expect(ctx.fetchClusters).toHaveBeenCalledTimes(1));
+  await waitFor(() =>
+    expect(ctx.clustersService.fetchClusters).toHaveBeenCalledTimes(1)
+  );
   await waitFor(() =>
     expect(ctx.nodesService.fetchNodes).toHaveBeenCalledTimes(1)
   );
diff --git a/web/packages/teleport/src/Console/DocumentNodes/DocumentNodes.tsx b/web/packages/teleport/src/Console/DocumentNodes/DocumentNodes.tsx
index 3eec3d5e9a3aa..624553bde7a74 100644
--- a/web/packages/teleport/src/Console/DocumentNodes/DocumentNodes.tsx
+++ b/web/packages/teleport/src/Console/DocumentNodes/DocumentNodes.tsx
@@ -16,9 +16,12 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
-import { Indicator, Flex, Box } from 'design';
+import { Indicator, Box, Text } from 'design';
+import { Danger } from 'design/Alert';
+
+import { ClusterDropdown } from 'shared/components/ClusterDropdown/ClusterDropdown';
 
 import NodeList from 'teleport/components/NodeList';
 import ErrorMessage from 'teleport/components/AgentErrorMessage';
@@ -26,7 +29,6 @@ import Document from 'teleport/Console/Document';
 
 import * as stores from 'teleport/Console/stores/types';
 
-import ClusterSelector from './ClusterSelector';
 import useNodes from './useNodes';
 
 type Props = {
@@ -36,6 +38,7 @@ type Props = {
 
 export default function DocumentNodes(props: Props) {
   const { doc, visible } = props;
+  const [clusterDropdownError, setClusterDropdownError] = useState('');
   const {
     fetchedData,
     fetchNext,
@@ -53,6 +56,7 @@ export default function DocumentNodes(props: Props) {
     getNodeSshLogins,
     onLabelClick,
     pageIndicators,
+    consoleCtx,
   } = useNodes(doc);
 
   function onLoginMenuSelect(
@@ -79,15 +83,16 @@ export default function DocumentNodes(props: Props) {
   return (
     <Document visible={visible}>
       <Container mx="auto" mt="4" px="5">
-        <Flex justifyContent="space-between" mb="4" alignItems="end">
-          <ClusterSelector
-            value={doc.clusterId}
-            width="336px"
-            maxMenuHeight={200}
-            mr="20px"
+        <Box justifyContent="space-between" mb="2" alignItems="end">
+          <Text fontSize={1}>Clusters:</Text>
+          <ClusterDropdown
+            clusterLoader={consoleCtx.clustersService}
             onChange={onChangeCluster}
+            clusterId={doc.clusterId}
+            onError={setClusterDropdownError}
           />
-        </Flex>
+        </Box>
+        {clusterDropdownError && <Danger>{clusterDropdownError}</Danger>}
         {attempt.status === 'processing' && (
           <Box textAlign="center" m={10}>
             <Indicator />
diff --git a/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap b/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap
index f1c8e3a8b2bfe..313dd19a3d77c 100644
--- a/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap
+++ b/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap
@@ -24,37 +24,31 @@ exports[`render DocumentNodes 1`] = `
 
 .c5 {
   box-sizing: border-box;
-  margin-bottom: 24px;
+  margin-bottom: 8px;
 }
 
-.c7 {
-  box-sizing: border-box;
-  margin-right: 20px;
-  width: 336px;
-}
-
-.c12 {
+.c9 {
   box-sizing: border-box;
   width: 100%;
 }
 
-.c14 {
+.c11 {
   box-sizing: border-box;
 }
 
-.c16 {
+.c13 {
   box-sizing: border-box;
   margin-right: 16px;
   width: 100%;
 }
 
-.c22 {
+.c19 {
   box-sizing: border-box;
   padding-left: 24px;
   padding-right: 24px;
 }
 
-.c37 {
+.c34 {
   line-height: 1.5;
   margin: 0;
   display: inline-flex;
@@ -82,22 +76,22 @@ exports[`render DocumentNodes 1`] = `
   height: 24px;
 }
 
-.c37:hover,
-.c37:focus {
+.c34:hover,
+.c34:focus {
   background: rgba(255,255,255,0.07);
 }
 
-.c37:active {
+.c34:active {
   background: rgba(255,255,255,0.13);
 }
 
-.c37:disabled {
+.c34:disabled {
   background: rgba(255,255,255,0.12);
   color: rgba(255,255,255,0.3);
   cursor: auto;
 }
 
-.c41 {
+.c38 {
   align-items: center;
   border: none;
   cursor: pointer;
@@ -119,25 +113,25 @@ exports[`render DocumentNodes 1`] = `
   margin-right: 0px;
 }
 
-.c41:disabled {
+.c38:disabled {
   color: rgba(255,255,255,0.36);
 }
 
-.c41:disabled {
+.c38:disabled {
   color: rgba(255,255,255,0.36);
   cursor: default;
 }
 
-.c41:hover:enabled,
-.c41:focus:enabled {
+.c38:hover:enabled,
+.c38:focus:enabled {
   background: rgba(255,255,255,0.13);
 }
 
-.c41:active:enabled {
+.c38:active:enabled {
   background: rgba(255,255,255,0.18);
 }
 
-.c43 {
+.c40 {
   align-items: center;
   border: none;
   cursor: pointer;
@@ -158,25 +152,32 @@ exports[`render DocumentNodes 1`] = `
   margin-left: 0px;
 }
 
-.c43:disabled {
+.c40:disabled {
   color: rgba(255,255,255,0.36);
 }
 
-.c43:disabled {
+.c40:disabled {
   color: rgba(255,255,255,0.36);
   cursor: default;
 }
 
-.c43:hover:enabled,
-.c43:focus:enabled {
+.c40:hover:enabled,
+.c40:focus:enabled {
   background: rgba(255,255,255,0.13);
 }
 
-.c43:active:enabled {
+.c40:active:enabled {
   background: rgba(255,255,255,0.18);
 }
 
-.c28 {
+.c6 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  margin: 0px;
+}
+
+.c25 {
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: 400;
@@ -185,7 +186,7 @@ exports[`render DocumentNodes 1`] = `
   margin: 0px;
 }
 
-.c32 {
+.c29 {
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: 400;
@@ -196,13 +197,13 @@ exports[`render DocumentNodes 1`] = `
   color: #FFFFFF;
 }
 
-.c30 {
+.c27 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
-.c38 {
+.c35 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -211,7 +212,7 @@ exports[`render DocumentNodes 1`] = `
   margin-right: -8px;
 }
 
-.c35 {
+.c32 {
   box-sizing: border-box;
   border-radius: 10px;
   display: inline-block;
@@ -226,63 +227,49 @@ exports[`render DocumentNodes 1`] = `
   margin-right: 4px;
 }
 
-.c8 {
-  color: #FFFFFF;
-  display: block;
-  font-size: 12px;
-  width: 100%;
-  margin-bottom: 4px;
-}
-
 .c1 {
   display: flex;
 }
 
-.c6 {
-  display: flex;
-  align-items: end;
-  justify-content: space-between;
-}
-
-.c13 {
+.c10 {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-.c15 {
+.c12 {
   display: flex;
   align-items: center;
 }
 
-.c23 {
+.c20 {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
-.c34 {
+.c31 {
   display: flex;
   flex-wrap: wrap;
 }
 
-.c40 {
+.c37 {
   display: flex;
   justify-content: flex-end;
 }
 
-.c24 {
+.c21 {
   position: relative;
   display: flex;
   align-items: center;
   cursor: pointer;
 }
 
-.c24[disabled] {
+.c21[disabled] {
   cursor: default;
 }
 
-.c27 {
+.c24 {
   width: 32px;
   height: 12px;
   border-radius: 12px;
@@ -291,7 +278,7 @@ exports[`render DocumentNodes 1`] = `
   flex-shrink: 0;
 }
 
-.c27:before {
+.c24:before {
   content: '';
   position: absolute;
   top: 50%;
@@ -302,29 +289,45 @@ exports[`render DocumentNodes 1`] = `
   background: #9F85FF;
 }
 
-.c25 {
+.c22 {
   opacity: 0;
   position: absolute;
   cursor: inherit;
 }
 
-.c25:checked + .c26 {
+.c22:checked + .c23 {
   background: rgba(255,255,255,0.13);
 }
 
-.c25:checked + .c26:before {
+.c22:checked + .c23:before {
   transform: translate(16px,-50%);
 }
 
-.c25:disabled + .c26 {
+.c22:disabled + .c23 {
   background: #222C59;
 }
 
-.c25:disabled + .c26:before {
+.c22:disabled + .c23:before {
   background: #455a64;
 }
 
-.c33 {
+.c28 {
+  height: 18px;
+  width: 18px;
+  color: inherit;
+}
+
+.c26 {
+  vertical-align: middle;
+  display: inline-block;
+  height: 18px;
+}
+
+.c26:hover {
+  cursor: pointer;
+}
+
+.c30 {
   background: #222C59;
   border-collapse: collapse;
   border-spacing: 0;
@@ -333,39 +336,39 @@ exports[`render DocumentNodes 1`] = `
   width: 100%;
 }
 
-.c33 > thead > tr > th,
-.c33 > tbody > tr > th,
-.c33 > tfoot > tr > th,
-.c33 > thead > tr > td,
-.c33 > tbody > tr > td,
-.c33 > tfoot > tr > td {
+.c30 > thead > tr > th,
+.c30 > tbody > tr > th,
+.c30 > tfoot > tr > th,
+.c30 > thead > tr > td,
+.c30 > tbody > tr > td,
+.c30 > tfoot > tr > td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c33 > thead > tr > th:first-child,
-.c33 > tbody > tr > th:first-child,
-.c33 > tfoot > tr > th:first-child,
-.c33 > thead > tr > td:first-child,
-.c33 > tbody > tr > td:first-child,
-.c33 > tfoot > tr > td:first-child {
+.c30 > thead > tr > th:first-child,
+.c30 > tbody > tr > th:first-child,
+.c30 > tfoot > tr > th:first-child,
+.c30 > thead > tr > td:first-child,
+.c30 > tbody > tr > td:first-child,
+.c30 > tfoot > tr > td:first-child {
   padding-left: 24px;
 }
 
-.c33 > thead > tr > th:last-child,
-.c33 > tbody > tr > th:last-child,
-.c33 > tfoot > tr > th:last-child,
-.c33 > thead > tr > td:last-child,
-.c33 > tbody > tr > td:last-child,
-.c33 > tfoot > tr > td:last-child {
+.c30 > thead > tr > th:last-child,
+.c30 > tbody > tr > th:last-child,
+.c30 > tfoot > tr > th:last-child,
+.c30 > thead > tr > td:last-child,
+.c30 > tbody > tr > td:last-child,
+.c30 > tfoot > tr > td:last-child {
   padding-right: 24px;
 }
 
-.c33 > tbody > tr > td {
+.c30 > tbody > tr > td {
   vertical-align: middle;
 }
 
-.c33 > thead > tr > th {
+.c30 > thead > tr > th {
   background: rgba(255,255,255,0.07);
   color: #FFFFFF;
   cursor: pointer;
@@ -379,24 +382,24 @@ exports[`render DocumentNodes 1`] = `
   white-space: nowrap;
 }
 
-.c33 > thead > tr > th svg {
+.c30 > thead > tr > th svg {
   height: 12px;
 }
 
-.c33 > tbody > tr > td {
+.c30 > tbody > tr > td {
   color: #FFFFFF;
   line-height: 16px;
 }
 
-.c33 tbody tr {
+.c30 tbody tr {
   border-bottom: 1px solid rgb(49,58,100);
 }
 
-.c33 tbody tr:hover {
+.c30 tbody tr:hover {
   background-color: rgba(255,255,255,0.07);
 }
 
-.c11 {
+.c8 {
   padding: 16px 24px;
   display: flex;
   height: 24px;
@@ -408,7 +411,7 @@ exports[`render DocumentNodes 1`] = `
   border-top-right-radius: 8px;
 }
 
-.c39 {
+.c36 {
   padding: 16px 24px;
   display: flex;
   height: 24px;
@@ -419,29 +422,29 @@ exports[`render DocumentNodes 1`] = `
   border-top: 1px solid rgba(255,255,255,0.07);
 }
 
-.c10 {
+.c7 {
   box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12);
   overflow: hidden;
   border-radius: 8px;
 }
 
-.c36 {
+.c33 {
   cursor: pointer;
 }
 
-.c36:hover {
+.c33:hover {
   background-color: rgba(255,255,255,0.13);
 }
 
-.c42 svg {
+.c39 svg {
   font-size: 20px;
 }
 
-.c42 svg:before {
+.c39 svg:before {
   padding-left: 1px;
 }
 
-.c21 {
+.c18 {
   position: relative;
   height: 100%;
   right: 0;
@@ -452,7 +455,7 @@ exports[`render DocumentNodes 1`] = `
   border-radius: 200px;
 }
 
-.c20 {
+.c17 {
   position: absolute;
   height: 100%;
   right: 0;
@@ -463,7 +466,7 @@ exports[`render DocumentNodes 1`] = `
   border-radius: 200px;
 }
 
-.c18 {
+.c15 {
   position: relative;
   display: flex;
   overflow: hidden;
@@ -473,14 +476,14 @@ exports[`render DocumentNodes 1`] = `
   background: transparent;
 }
 
-.c17 {
+.c14 {
   background: #0C143D;
   border-radius: 200px;
   width: 100%;
   height: 32px;
 }
 
-.c19 {
+.c16 {
   border: none;
   outline: none;
   box-sizing: border-box;
@@ -495,198 +498,18 @@ exports[`render DocumentNodes 1`] = `
   padding-right: 184px;
 }
 
-.c19:hover,
-.c19:focus,
-.c19:active {
+.c16:hover,
+.c16:focus,
+.c16:active {
   color: #FFFFFF;
   background: rgba(255,255,255,0.07);
 }
 
-.c19::placeholder {
+.c16::placeholder {
   color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
-.c31 {
-  height: 18px;
-  width: 18px;
-  color: inherit;
-}
-
-.c29 {
-  vertical-align: middle;
-  display: inline-block;
-  height: 18px;
-}
-
-.c29:hover {
-  cursor: pointer;
-}
-
-.c9 .react-select-container {
-  box-sizing: border-box;
-  display: block;
-  font-size: 14px;
-  outline: none;
-  width: 100%;
-  color: #FFFFFF;
-  background-color: transparent;
-  margin-bottom: 0px;
-  border-radius: 4px;
-}
-
-.c9 .react-select__control {
-  outline: none;
-  min-height: 40px;
-  height: fit-content;
-  border: 1px solid rgba(255,255,255,0.54);
-  border-radius: 4px;
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.c9 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.54);
-}
-
-.c9 .react-select__control:hover,
-.c9 .react-select__control:focus,
-.c9 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.72);
-  background-color: rgba(255,255,255,0.07);
-  cursor: pointer;
-}
-
-.c9 .react-select__control:hover .react-select__dropdown-indicator,
-.c9 .react-select__control:focus .react-select__dropdown-indicator,
-.c9 .react-select__control:active .react-select__dropdown-indicator {
-  color: #FFFFFF;
-}
-
-.c9 .react-select__control .react-select__indicator:hover,
-.c9 .react-select__control .react-select__dropdown-indicator:hover,
-.c9 .react-select__control .react-select__indicator:focus,
-.c9 .react-select__control .react-select__dropdown-indicator:focus,
-.c9 .react-select__control .react-select__indicator:active,
-.c9 .react-select__control .react-select__dropdown-indicator:active {
-  color: #FFFFFF;
-}
-
-.c9 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.72);
-  background-color: rgba(255,255,255,0.07);
-  cursor: pointer;
-}
-
-.c9 .react-select__control--is-focused .react-select__dropdown-indicator {
-  color: #FFFFFF;
-}
-
-.c9 .react-select__single-value {
-  color: #FFFFFF;
-}
-
-.c9 .react-select__placeholder {
-  color: rgba(255,255,255,0.54);
-}
-
-.c9 .react-select__multi-value {
-  background-color: rgba(255,255,255,0.13);
-}
-
-.c9 .react-select__multi-value .react-select__multi-value__label {
-  color: #FFFFFF;
-  padding: 0 6px;
-}
-
-.c9 .react-select__multi-value .react-select__multi-value__remove {
-  color: #FFFFFF;
-}
-
-.c9 .react-select__multi-value .react-select__multi-value__remove:hover {
-  background-color: rgba(255,255,255,0.07);
-  color: #FF6257;
-}
-
-.c9 .react-select__option:hover {
-  cursor: pointer;
-  background-color: rgba(255,255,255,0.07);
-}
-
-.c9 .react-select__option--is-focused {
-  background-color: rgba(255,255,255,0.07);
-}
-
-.c9 .react-select__option--is-focused:hover {
-  cursor: pointer;
-  background-color: rgba(255,255,255,0.07);
-}
-
-.c9 .react-select__option--is-selected {
-  background-color: rgba(255,255,255,0.13);
-  color: inherit;
-  font-weight: 500;
-}
-
-.c9 .react-select__option--is-selected:hover {
-  background-color: rgba(255,255,255,0.13);
-}
-
-.c9 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.72);
-}
-
-.c9 .react-select__clear-indicator:hover,
-.c9 .react-select__clear-indicator:focus {
-  background-color: rgba(255,255,255,0.07);
-}
-
-.c9 .react-select__clear-indicator:hover svg,
-.c9 .react-select__clear-indicator:focus svg {
-  color: #FF6257;
-}
-
-.c9 .react-select__menu {
-  margin-top: 0px;
-  background-color: #344179;
-  box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
-}
-
-.c9 .react-select__menu .react-select__menu-list::-webkit-scrollbar-thumb {
-  background: rgba(255,255,255,0.13);
-  border-radius: 4px;
-}
-
-.c9 .react-select__indicator-separator {
-  display: none;
-}
-
-.c9 .react-select__loading-indicator {
-  display: none;
-}
-
-.c9 .react-select--is-disabled,
-.c9 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.36);
-  border: 1px solid rgba(255,255,255,0.36);
-}
-
-.c9 .react-select--is-disabled .react-select__single-value,
-.c9 .react-select__control--is-disabled .react-select__single-value,
-.c9 .react-select--is-disabled .react-select__placeholder,
-.c9 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.36);
-}
-
-.c9 .react-select--is-disabled .react-select__indicator,
-.c9 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.36);
-}
-
-.c9 .react-select__input {
-  color: #FFFFFF;
-}
-
 .c4 {
   flex-direction: column;
   display: flex;
@@ -714,149 +537,75 @@ exports[`render DocumentNodes 1`] = `
       class="c3 c4"
     >
       <div
-        class="c5 c6"
+        class="c5"
       >
         <div
-          class="c7"
-          width="336px"
+          class="c6"
+          font-size="1"
         >
-          <label
-            class="c8"
-            font-size="0"
-          >
-             Clusters 
-          </label>
-          <div
-            class="c9"
-          >
-            <div
-              class="react-select-container css-2b097c-container"
-            >
-              <div
-                class="react-select__control css-yk16xz-control"
-              >
-                <div
-                  class="react-select__value-container react-select__value-container--has-value css-g1d714-ValueContainer"
-                >
-                  <div
-                    class="react-select__single-value css-1uccc91-singleValue"
-                  >
-                    cluseter-1
-                  </div>
-                  <div
-                    class="css-b8ldur-Input"
-                  >
-                    <div
-                      class="react-select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="react-select-2-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="react-select__indicators css-1hb7zxy-IndicatorsContainer"
-                >
-                  <span
-                    class="react-select__indicator-separator css-1okebmr-indicatorSeparator"
-                  />
-                  <div
-                    aria-hidden="true"
-                    class="react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="css-6q0nyr-Svg"
-                      focusable="false"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      width="20"
-                    >
-                      <path
-                        d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                      />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
+          Clusters:
         </div>
       </div>
       <div
-        class="c10"
+        class="c7"
       >
         <form
-          class="c11"
+          class="c8"
         >
           <div
-            class="c12 c13"
+            class="c9 c10"
             width="100%"
           >
             <div
-              class="c14 c15"
+              class="c11 c12"
               style="width: 70%;"
             >
               <div
-                class="c16"
+                class="c13"
                 width="100%"
               >
                 <div
-                  class="c17"
+                  class="c14"
                 >
                   <div
-                    class="c18"
+                    class="c15"
                   >
                     <input
-                      class="c19"
+                      class="c16"
                       placeholder="SEARCH..."
                       value=""
                     />
                     <div
-                      class="c20"
+                      class="c17"
                     >
                       <div
-                        class="c21"
+                        class="c18"
                       >
                         <div
-                          class="c22 c23"
+                          class="c19 c20"
                         >
                           <label
-                            class="c24"
+                            class="c21"
                           >
                             <input
-                              class="c25"
+                              class="c22"
                               type="checkbox"
                             />
                             <div
-                              class="c26 c27"
+                              class="c23 c24"
                             />
                           </label>
                           <div
-                            class="c28"
+                            class="c25"
                           >
                             Advanced
                           </div>
                           <span
-                            class="c29"
+                            class="c26"
                             role="icon"
                           >
                             <span
-                              class="c30 c31"
+                              class="c27 c28"
                             >
                               <svg
                                 fill="currentColor"
@@ -886,10 +635,10 @@ exports[`render DocumentNodes 1`] = `
               </div>
             </div>
             <div
-              class="c14 c1"
+              class="c11 c1"
             >
               <div
-                class="c32"
+                class="c29"
                 color="text.main"
                 style="text-transform: uppercase;"
               >
@@ -911,7 +660,7 @@ exports[`render DocumentNodes 1`] = `
           </div>
         </form>
         <table
-          class="c33"
+          class="c30"
         >
           <thead>
             <tr>
@@ -921,7 +670,7 @@ exports[`render DocumentNodes 1`] = `
                 >
                   Hostname
                   <span
-                    class="c30 icon icon-chevronup"
+                    class="c27 icon icon-chevronup"
                     title="sort items asc"
                   >
                     <svg
@@ -964,16 +713,16 @@ exports[`render DocumentNodes 1`] = `
               </td>
               <td>
                 <div
-                  class="c14 c34"
+                  class="c11 c31"
                 >
                   <div
-                    class="c35 c36"
+                    class="c32 c33"
                     kind="secondary"
                   >
                     cluster: one
                   </div>
                   <div
-                    class="c35 c36"
+                    class="c32 c33"
                     kind="secondary"
                   >
                     kernel: 4.15.0-51-generic
@@ -984,13 +733,13 @@ exports[`render DocumentNodes 1`] = `
                 align="right"
               >
                 <button
-                  class="c37"
+                  class="c34"
                   height="24px"
                   kind="border"
                 >
                   Connect
                   <span
-                    class="c38 icon icon-chevrondown"
+                    class="c35 icon icon-chevrondown"
                     color="text.slightlyMuted"
                   >
                     <svg
@@ -1018,16 +767,16 @@ exports[`render DocumentNodes 1`] = `
               </td>
               <td>
                 <div
-                  class="c14 c34"
+                  class="c11 c31"
                 >
                   <div
-                    class="c35 c36"
+                    class="c32 c33"
                     kind="secondary"
                   >
                     cluster: one
                   </div>
                   <div
-                    class="c35 c36"
+                    class="c32 c33"
                     kind="secondary"
                   >
                     kernel: 4.15.0-51-generic
@@ -1038,13 +787,13 @@ exports[`render DocumentNodes 1`] = `
                 align="right"
               >
                 <button
-                  class="c37"
+                  class="c34"
                   height="24px"
                   kind="border"
                 >
                   Connect
                   <span
-                    class="c38 icon icon-chevrondown"
+                    class="c35 icon icon-chevrondown"
                     color="text.slightlyMuted"
                   >
                     <svg
@@ -1077,16 +826,16 @@ exports[`render DocumentNodes 1`] = `
               </td>
               <td>
                 <div
-                  class="c14 c34"
+                  class="c11 c31"
                 >
                   <div
-                    class="c35 c36"
+                    class="c32 c33"
                     kind="secondary"
                   >
                     cluster: one
                   </div>
                   <div
-                    class="c35 c36"
+                    class="c32 c33"
                     kind="secondary"
                   >
                     kernel: 4.15.0-51-generic
@@ -1097,13 +846,13 @@ exports[`render DocumentNodes 1`] = `
                 align="right"
               >
                 <button
-                  class="c37"
+                  class="c34"
                   height="24px"
                   kind="border"
                 >
                   Connect
                   <span
-                    class="c38 icon icon-chevrondown"
+                    class="c35 icon icon-chevrondown"
                     color="text.slightlyMuted"
                   >
                     <svg
@@ -1136,16 +885,16 @@ exports[`render DocumentNodes 1`] = `
               </td>
               <td>
                 <div
-                  class="c14 c34"
+                  class="c11 c31"
                 >
                   <div
-                    class="c35 c36"
+                    class="c32 c33"
                     kind="secondary"
                   >
                     cluster: one
                   </div>
                   <div
-                    class="c35 c36"
+                    class="c32 c33"
                     kind="secondary"
                   >
                     kernel: 4.15.0-51-generic
@@ -1156,13 +905,13 @@ exports[`render DocumentNodes 1`] = `
                 align="right"
               >
                 <button
-                  class="c37"
+                  class="c34"
                   height="24px"
                   kind="border"
                 >
                   Connect
                   <span
-                    class="c38 icon icon-chevrondown"
+                    class="c35 icon icon-chevrondown"
                     color="text.slightlyMuted"
                   >
                     <svg
@@ -1190,40 +939,40 @@ exports[`render DocumentNodes 1`] = `
               </td>
               <td>
                 <div
-                  class="c14 c34"
+                  class="c11 c31"
                 >
                   <div
-                    class="c35 c36"
+                    class="c32 c33"
                     kind="secondary"
                   >
                     cluster: one
                   </div>
                   <div
-                    class="c35 c36"
+                    class="c32 c33"
                     kind="secondary"
                   >
                     kernel: 4.15.0-51-generic
                   </div>
                   <div
-                    class="c35 c36"
+                    class="c32 c33"
                     kind="secondary"
                   >
                     lortavma: one
                   </div>
                   <div
-                    class="c35 c36"
+                    class="c32 c33"
                     kind="secondary"
                   >
                     lenisret: 4.15.0-51-generic
                   </div>
                   <div
-                    class="c35 c36"
+                    class="c32 c33"
                     kind="secondary"
                   >
                     lofdevod: one
                   </div>
                   <div
-                    class="c35 c36"
+                    class="c32 c33"
                     kind="secondary"
                   >
                     llhurlaz: 4.15.0-51-generic
@@ -1234,13 +983,13 @@ exports[`render DocumentNodes 1`] = `
                 align="right"
               >
                 <button
-                  class="c37"
+                  class="c34"
                   height="24px"
                   kind="border"
                 >
                   Connect
                   <span
-                    class="c38 icon icon-chevrondown"
+                    class="c35 icon icon-chevrondown"
                     color="text.slightlyMuted"
                   >
                     <svg
@@ -1262,22 +1011,22 @@ exports[`render DocumentNodes 1`] = `
           </tbody>
         </table>
         <nav
-          class="c39"
+          class="c36"
         >
           <div
-            class="c12 c40"
+            class="c9 c37"
             width="100%"
           >
             <div
-              class="c14 c1"
+              class="c11 c1"
             >
               <button
-                class="c41 c42"
+                class="c38 c39"
                 disabled=""
                 title="Previous page"
               >
                 <span
-                  class="c30 icon icon-circlearrowleft"
+                  class="c27 icon icon-circlearrowleft"
                 >
                   <svg
                     fill="currentColor"
@@ -1297,12 +1046,12 @@ exports[`render DocumentNodes 1`] = `
                 </span>
               </button>
               <button
-                class="c43 c42"
+                class="c40 c39"
                 disabled=""
                 title="Next page"
               >
                 <span
-                  class="c30 icon icon-circlearrowright"
+                  class="c27 icon icon-circlearrowright"
                 >
                   <svg
                     fill="currentColor"
diff --git a/web/packages/teleport/src/Console/DocumentNodes/useNodes.ts b/web/packages/teleport/src/Console/DocumentNodes/useNodes.ts
index 655c1a7a36235..96715b486ebc8 100644
--- a/web/packages/teleport/src/Console/DocumentNodes/useNodes.ts
+++ b/web/packages/teleport/src/Console/DocumentNodes/useNodes.ts
@@ -93,6 +93,7 @@ export default function useNodes({ clusterId, id }: stores.DocumentNodes) {
     });
   }
   return {
+    consoleCtx,
     fetchedData,
     createSshSession,
     changeCluster,
diff --git a/web/packages/teleport/src/Console/consoleContext.tsx b/web/packages/teleport/src/Console/consoleContext.tsx
index c5d981adc5811..e696f18602e0e 100644
--- a/web/packages/teleport/src/Console/consoleContext.tsx
+++ b/web/packages/teleport/src/Console/consoleContext.tsx
@@ -33,7 +33,7 @@ import serviceSession, {
   ParticipantMode,
 } from 'teleport/services/session';
 import ServiceNodes from 'teleport/services/nodes';
-import serviceClusters from 'teleport/services/clusters';
+import ClustersService from 'teleport/services/clusters';
 import { StoreUserContext } from 'teleport/stores';
 import usersService from 'teleport/services/user';
 
@@ -51,6 +51,7 @@ export default class ConsoleContext {
   storeDocs = new StoreDocs();
   storeParties = new StoreParties();
   nodesService = new ServiceNodes();
+  clustersService = new ClustersService();
   storeUser = new StoreUserContext();
 
   constructor() {
@@ -177,7 +178,7 @@ export default class ConsoleContext {
   }
 
   fetchClusters() {
-    return serviceClusters.fetchClusters();
+    return this.clustersService.fetchClusters();
   }
 
   logout() {
diff --git a/web/packages/teleport/src/Recordings/Recordings.tsx b/web/packages/teleport/src/Recordings/Recordings.tsx
index 77faadf8ccc68..254a38c33e657 100644
--- a/web/packages/teleport/src/Recordings/Recordings.tsx
+++ b/web/packages/teleport/src/Recordings/Recordings.tsx
@@ -16,10 +16,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 
 import { Danger } from 'design/Alert';
 import { Indicator, Box } from 'design';
+import { ClusterDropdown } from 'shared/components/ClusterDropdown/ClusterDropdown';
 
 import RangePicker from 'teleport/components/EventRangePicker';
 import {
@@ -50,7 +51,9 @@ export function Recordings({
   rangeOptions,
   attempt,
   clusterId,
+  ctx,
 }: State) {
+  const [errorMessage, setErrorMessage] = useState('');
   return (
     <FeatureBox>
       <FeatureHeader alignItems="center">
@@ -63,6 +66,16 @@ export function Recordings({
         />
       </FeatureHeader>
       <ExternalAuditStorageCta />
+      {!errorMessage && (
+        <Box mb={4}>
+          <ClusterDropdown
+            clusterLoader={ctx.clusterService}
+            clusterId={clusterId}
+            onError={setErrorMessage}
+          />
+        </Box>
+      )}
+      {errorMessage && <Danger>{errorMessage}</Danger>}
       {attempt.status === 'failed' && <Danger> {attempt.statusText} </Danger>}
       {attempt.status === 'processing' && (
         <Box textAlign="center" m={10}>
diff --git a/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap b/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap
index d0e35d6403e72..0c7da8408180c 100644
--- a/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap
+++ b/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap
@@ -628,6 +628,9 @@ exports[`rendering of Session Recordings 1`] = `
         </div>
       </div>
     </div>
+    <div
+      class="c3"
+    />
     <div
       class="c10"
     >
diff --git a/web/packages/teleport/src/Recordings/useRecordings.ts b/web/packages/teleport/src/Recordings/useRecordings.ts
index 747e758450bfe..687781e88bf3f 100644
--- a/web/packages/teleport/src/Recordings/useRecordings.ts
+++ b/web/packages/teleport/src/Recordings/useRecordings.ts
@@ -82,6 +82,7 @@ export default function useRecordings(ctx: Ctx) {
 
   return {
     ...results,
+    ctx,
     attempt,
     range,
     rangeOptions,
diff --git a/web/packages/teleport/src/Sessions/Sessions.story.tsx b/web/packages/teleport/src/Sessions/Sessions.story.tsx
index 538516ffb3fe7..23c4bc3d0053d 100644
--- a/web/packages/teleport/src/Sessions/Sessions.story.tsx
+++ b/web/packages/teleport/src/Sessions/Sessions.story.tsx
@@ -17,6 +17,7 @@
  */
 
 import React from 'react';
+import { MemoryRouter } from 'react-router';
 
 import { ContextProvider } from 'teleport';
 
@@ -34,9 +35,11 @@ export function Loaded() {
   const props = makeSessionProps({ attempt: { isSuccess: true } });
 
   return (
-    <ContextProvider ctx={ctx}>
-      <Sessions {...props} />
-    </ContextProvider>
+    <MemoryRouter>
+      <ContextProvider ctx={ctx}>
+        <Sessions {...props} />
+      </ContextProvider>
+    </MemoryRouter>
   );
 }
 
@@ -47,9 +50,11 @@ export function ActiveSessionsCTA() {
   });
 
   return (
-    <ContextProvider ctx={ctx}>
-      <Sessions {...props} />
-    </ContextProvider>
+    <MemoryRouter>
+      <ContextProvider ctx={ctx}>
+        <Sessions {...props} />
+      </ContextProvider>
+    </MemoryRouter>
   );
 }
 
@@ -60,9 +65,11 @@ export function ModeratedSessionsCTA() {
   });
 
   return (
-    <ContextProvider ctx={ctx}>
-      <Sessions {...props} />
-    </ContextProvider>
+    <MemoryRouter>
+      <ContextProvider ctx={ctx}>
+        <Sessions {...props} />
+      </ContextProvider>
+    </MemoryRouter>
   );
 }
 
@@ -73,6 +80,8 @@ const makeSessionProps = (
 ): ReturnType<typeof useSessions> => {
   return Object.assign(
     {
+      ctx,
+      clusterId: 'teleport.example.sh',
       sessions,
       attempt: {
         isSuccess: false,
diff --git a/web/packages/teleport/src/Sessions/Sessions.tsx b/web/packages/teleport/src/Sessions/Sessions.tsx
index 16d70db48aad2..9660305f40d15 100644
--- a/web/packages/teleport/src/Sessions/Sessions.tsx
+++ b/web/packages/teleport/src/Sessions/Sessions.tsx
@@ -16,9 +16,10 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { Box, Indicator } from 'design';
 import { Danger } from 'design/Alert';
+import { ClusterDropdown } from 'shared/components/ClusterDropdown/ClusterDropdown';
 
 import {
   FeatureBox,
@@ -26,11 +27,8 @@ import {
   FeatureHeaderTitle,
 } from 'teleport/components/Layout';
 import useTeleport from 'teleport/useTeleport';
-
 import useStickerClusterId from 'teleport/useStickyClusterId';
-
 import { ButtonLockedFeature } from 'teleport/components/ButtonLockedFeature';
-
 import { CtaEvent } from 'teleport/services/userEvent';
 
 import SessionList from './SessionList';
@@ -44,8 +42,16 @@ export default function Container() {
 }
 
 export function Sessions(props: ReturnType<typeof useSessions>) {
-  const { attempt, sessions, showActiveSessionsCTA, showModeratedSessionsCTA } =
-    props;
+  const {
+    ctx,
+    attempt,
+    sessions,
+    showActiveSessionsCTA,
+    showModeratedSessionsCTA,
+    clusterId,
+  } = props;
+  const [errorMessage, setErrorMessage] = useState('');
+
   return (
     <FeatureBox>
       <FeatureHeader
@@ -74,6 +80,16 @@ export function Sessions(props: ReturnType<typeof useSessions>) {
           </Box>
         )}
       </FeatureHeader>
+      {!errorMessage && (
+        <Box mb={4}>
+          <ClusterDropdown
+            clusterLoader={ctx.clusterService}
+            clusterId={clusterId}
+            onError={setErrorMessage}
+          />
+        </Box>
+      )}
+      {errorMessage && <Danger>{errorMessage}</Danger>}
       {attempt.isFailed && <Danger>{attempt.message} </Danger>}
       {attempt.isProcessing && (
         <Box textAlign="center" m={10}>
diff --git a/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap b/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap
index 1ae8532a0360a..61b517942018d 100644
--- a/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap
+++ b/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap
@@ -528,6 +528,9 @@ exports[`active sessions CTA 1`] = `
       </a>
     </div>
   </div>
+  <div
+    class="c3"
+  />
   <div
     class="c15"
   >
@@ -1539,6 +1542,9 @@ exports[`loaded 1`] = `
       Active Sessions
     </div>
   </div>
+  <div
+    class="c3"
+  />
   <div
     class="c9"
   >
@@ -2550,6 +2556,9 @@ exports[`moderated sessions CTA for non-enterprise 1`] = `
       Active Sessions
     </div>
   </div>
+  <div
+    class="c3"
+  />
   <div
     class="c9"
   >
diff --git a/web/packages/teleport/src/Sessions/useSessions.ts b/web/packages/teleport/src/Sessions/useSessions.ts
index 16650ca3a421a..3b8e1d3d095d7 100644
--- a/web/packages/teleport/src/Sessions/useSessions.ts
+++ b/web/packages/teleport/src/Sessions/useSessions.ts
@@ -51,6 +51,8 @@ export default function useSessions(ctx: Ctx, clusterId: string) {
   }, [clusterId]);
 
   return {
+    ctx,
+    clusterId,
     attempt,
     sessions,
     // moderated is available with any enterprise editions
diff --git a/web/packages/teleport/src/UnifiedResources/UnifiedResources.tsx b/web/packages/teleport/src/UnifiedResources/UnifiedResources.tsx
index 29a472c2f114f..d73ff5401eb2f 100644
--- a/web/packages/teleport/src/UnifiedResources/UnifiedResources.tsx
+++ b/web/packages/teleport/src/UnifiedResources/UnifiedResources.tsx
@@ -19,6 +19,7 @@
 import React, { useCallback, useState, useEffect } from 'react';
 
 import { Flex } from 'design';
+import { Danger } from 'design/Alert';
 
 import {
   FilterKind,
@@ -27,6 +28,7 @@ import {
   UnifiedResourcesPinning,
 } from 'shared/components/UnifiedResources';
 import { DefaultTab } from 'shared/services/unifiedResourcePreferences';
+import { ClusterDropdown } from 'shared/components/ClusterDropdown/ClusterDropdown';
 
 import useStickyClusterId from 'teleport/useStickyClusterId';
 import { storageService } from 'teleport/services/storageService';
@@ -120,6 +122,7 @@ function ClusterResources({
     updateClusterPinnedResources,
   } = useUser();
   const canCreate = teleCtx.storeUser.getTokenAccess().create;
+  const [loadClusterError, setLoadClusterError] = useState('');
 
   const { params, setParams, replaceHistory, pathname } = useUrlFiltering({
     sort: {
@@ -212,6 +215,7 @@ function ClusterResources({
 
   return (
     <FeatureBox px={4}>
+      {loadClusterError && <Danger>{loadClusterError}</Danger>}
       <SharedUnifiedResources
         params={params}
         fetchResources={fetch}
@@ -222,6 +226,13 @@ function ClusterResources({
         }}
         availableKinds={getAvailableKindsWithAccess(flags)}
         pinning={pinning}
+        ClusterDropdown={
+          <ClusterDropdown
+            clusterLoader={teleCtx.clusterService}
+            clusterId={clusterId}
+            onError={setLoadClusterError}
+          />
+        }
         NoResources={
           <Empty
             clusterId={clusterId}
diff --git a/web/packages/teleport/src/services/clusters/clusters.test.ts b/web/packages/teleport/src/services/clusters/clusters.test.ts
index 831df1d12a6b4..81237c634d380 100644
--- a/web/packages/teleport/src/services/clusters/clusters.test.ts
+++ b/web/packages/teleport/src/services/clusters/clusters.test.ts
@@ -18,12 +18,13 @@
 
 import api from 'teleport/services/api';
 
-import clusterService from './clusters';
+import ClustersService from './clusters';
 
 test('correct formatting of clusters fetch response', async () => {
   jest.spyOn(api, 'get').mockResolvedValue(mockResponse);
+  const clustersService = new ClustersService();
 
-  const response = await clusterService.fetchClusters();
+  const response = await clustersService.fetchClusters();
 
   expect(response).toEqual([
     {
diff --git a/web/packages/teleport/src/services/clusters/clusters.ts b/web/packages/teleport/src/services/clusters/clusters.ts
index 17a6415bf0e73..9aa15cf7c81fb 100644
--- a/web/packages/teleport/src/services/clusters/clusters.ts
+++ b/web/packages/teleport/src/services/clusters/clusters.ts
@@ -21,10 +21,22 @@ import cfg from 'teleport/config';
 
 import { makeClusterList } from './makeCluster';
 
-const service = {
-  fetchClusters() {
-    return api.get(cfg.api.clustersPath).then(makeClusterList);
-  },
-};
+import { Cluster } from '.';
 
-export default service;
+export default class ClustersService {
+  clusters: Cluster[] = [];
+
+  fetchClusters(abortSignal?: AbortSignal, fromCache = true) {
+    if (!fromCache) {
+      return api.get(cfg.api.clustersPath, abortSignal).then(makeClusterList);
+    }
+    if (this.clusters.length < 1) {
+      return api.get(cfg.api.clustersPath, abortSignal).then(res => {
+        // cache the result of clusters response
+        this.clusters = makeClusterList(res);
+        return this.clusters;
+      });
+    }
+    return Promise.resolve(this.clusters);
+  }
+}
diff --git a/web/packages/teleport/src/teleportContext.tsx b/web/packages/teleport/src/teleportContext.tsx
index ed598ed0ec357..182035549cb23 100644
--- a/web/packages/teleport/src/teleportContext.tsx
+++ b/web/packages/teleport/src/teleportContext.tsx
@@ -23,7 +23,6 @@ import * as types from './types';
 import AuditService from './services/audit';
 import RecordingsService from './services/recordings';
 import NodeService from './services/nodes';
-import clusterService from './services/clusters';
 import sessionService from './services/session';
 import ResourceService from './services/resources';
 import userService from './services/user';
@@ -36,6 +35,7 @@ import userGroupService from './services/userGroups';
 import MfaService from './services/mfa';
 import { agentService } from './services/agents';
 import { storageService } from './services/storageService';
+import ClustersService from './services/clusters/clusters';
 
 class TeleportContext implements types.Context {
   // stores
@@ -47,7 +47,7 @@ class TeleportContext implements types.Context {
   auditService = new AuditService();
   recordingsService = new RecordingsService();
   nodeService = new NodeService();
-  clusterService = clusterService;
+  clusterService = new ClustersService();
   sshService = sessionService;
   resourceService = new ResourceService();
   userService = userService;