diff --git a/web/packages/design/src/DataTable/Table.tsx b/web/packages/design/src/DataTable/Table.tsx
index 8f3b9bc8bcaa5..d028e1b18a844 100644
--- a/web/packages/design/src/DataTable/Table.tsx
+++ b/web/packages/design/src/DataTable/Table.tsx
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { ReactNode } from 'react';
+import React, { ReactNode, PropsWithChildren } from 'react';
 
 import { Box, Flex, Indicator, P1, Text } from 'design';
 import * as Icons from 'design/Icon';
@@ -108,6 +108,22 @@ export default function Table<T>(props: TableProps<T>) {
       return <LoadingIndicator colSpan={columns.length} />;
     }
     data.map((item, rowIdx) => {
+      const TableRow: React.FC<PropsWithChildren> = ({ children }) => (
+        <tr
+          key={rowIdx}
+          onClick={() => row?.onClick?.(item)}
+          style={row?.getStyle?.(item)}
+        >
+          {children}
+        </tr>
+      );
+
+      const customRow = row?.customRow?.(item);
+      if (customRow) {
+        rows.push(<TableRow key={rowIdx}>{customRow}</TableRow>);
+        return;
+      }
+
       const cells = columns.flatMap((column, columnIdx) => {
         if (column.isNonRender) {
           return []; // does not include this column.
@@ -125,15 +141,7 @@ export default function Table<T>(props: TableProps<T>) {
           </React.Fragment>
         );
       });
-      rows.push(
-        <tr
-          key={rowIdx}
-          onClick={() => row?.onClick?.(item)}
-          style={row?.getStyle?.(item)}
-        >
-          {cells}
-        </tr>
-      );
+      rows.push(<TableRow key={rowIdx}>{cells}</TableRow>);
     });
 
     if (rows.length) {
diff --git a/web/packages/design/src/DataTable/types.ts b/web/packages/design/src/DataTable/types.ts
index afe803116613a..9f5ec0490653c 100644
--- a/web/packages/design/src/DataTable/types.ts
+++ b/web/packages/design/src/DataTable/types.ts
@@ -79,6 +79,14 @@ export type TableProps<T> = {
      * conditionally style a row (eg: cursor: pointer, disabled)
      */
     getStyle?(row: T): React.CSSProperties;
+    /**
+     * conditionally render a custom row
+     * use case: by default all columns are represented by cells
+     * but certain rows you need all the columns to be merged
+     * into one cell to render other related elements like a
+     * dropdown selector.
+     */
+    customRow?(row: T): JSX.Element;
   };
 };
 
diff --git a/web/packages/design/src/Link/Link.jsx b/web/packages/design/src/Link/Link.jsx
index 957be80a5f7be..260c31f85094b 100644
--- a/web/packages/design/src/Link/Link.jsx
+++ b/web/packages/design/src/Link/Link.jsx
@@ -31,7 +31,6 @@ const StyledButtonLink = styled.a.attrs({
   rel: 'noreferrer',
 })`
   color: ${({ theme }) => theme.colors.buttons.link.default};
-  font-weight: normal;
   background: none;
   text-decoration: underline;
   text-transform: none;
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/CheckableOption.tsx b/web/packages/shared/components/AccessRequests/NewRequest/CheckableOption.tsx
new file mode 100644
index 0000000000000..f10b940050628
--- /dev/null
+++ b/web/packages/shared/components/AccessRequests/NewRequest/CheckableOption.tsx
@@ -0,0 +1,48 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 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 from 'react';
+import { Flex, Text } from 'design';
+import { components, OptionProps } from 'react-select';
+
+import { Option as BaseOption } from 'shared/components/Select';
+
+export type Option = BaseOption & {
+  isAdded?: boolean;
+  kind: 'app' | 'user_group' | 'namespace';
+};
+
+export const CheckableOptionComponent = (
+  props: OptionProps<Option> & { data: Option }
+) => {
+  const { data } = props;
+  return (
+    <components.Option {...props}>
+      <Flex alignItems="center" py="8px" px="12px">
+        <input
+          type="checkbox"
+          checked={data.isAdded || props.isSelected}
+          readOnly
+          name={data.value}
+          id={data.value}
+        />{' '}
+        <Text ml={1}>{data.label}</Text>
+      </Flex>
+    </components.Option>
+  );
+};
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/CrossIcon.tsx b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/CrossIcon.tsx
new file mode 100644
index 0000000000000..c65c54bf5d2d9
--- /dev/null
+++ b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/CrossIcon.tsx
@@ -0,0 +1,58 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 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 { Cross } from 'design/Icon';
+
+import { Attempt } from 'shared/hooks/useAttemptNext';
+
+export function CrossIcon<T>({
+  clearAttempt,
+  toggleResource,
+  item,
+  createAttempt,
+}: {
+  clearAttempt: () => void;
+  toggleResource: (resource: T) => void;
+  item: T;
+  createAttempt: Attempt;
+}) {
+  return (
+    <Cross
+      size="small"
+      borderRadius={2}
+      p={2}
+      onClick={() => {
+        clearAttempt();
+        toggleResource(item);
+      }}
+      disabled={createAttempt.status === 'processing'}
+      css={`
+        cursor: pointer;
+
+        background-color: ${({ theme }) =>
+          theme.colors.buttons.trashButton.default};
+        border-radius: 2px;
+
+        &:hover {
+          background-color: ${({ theme }) =>
+            theme.colors.buttons.trashButton.hover};
+        }
+      `}
+    />
+  );
+}
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/KubeNamespaceSelector.tsx b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/KubeNamespaceSelector.tsx
new file mode 100644
index 0000000000000..116ac3765b898
--- /dev/null
+++ b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/KubeNamespaceSelector.tsx
@@ -0,0 +1,207 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 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 { useState } from 'react';
+import styled from 'styled-components';
+import { Box } from 'design';
+import { ActionMeta } from 'react-select';
+
+import { Option } from 'shared/components/Select';
+import { FieldSelectAsync } from 'shared/components/FieldSelect';
+
+import { requiredField } from 'shared/components/Validation/rules';
+
+import { CheckableOptionComponent } from '../CheckableOption';
+
+import { PendingListItem, PendingKubeResourceItem } from './RequestCheckout';
+
+import type { KubeNamespaceRequest } from '../kube';
+
+export function KubeNamespaceSelector({
+  kubeClusterItem,
+  fetchKubeNamespaces,
+  savedResourceItems,
+  toggleResource,
+  bulkToggleKubeResources,
+  namespaceRequired,
+}: {
+  kubeClusterItem: PendingListItem;
+  fetchKubeNamespaces(p: KubeNamespaceRequest): Promise<string[]>;
+  savedResourceItems: PendingListItem[];
+  toggleResource: (resource: PendingListItem) => void;
+  bulkToggleKubeResources: (
+    resources: PendingKubeResourceItem[],
+    resource: PendingListItem
+  ) => void;
+  namespaceRequired: boolean;
+}) {
+  // Flag is used to determine if we need to perform batch action
+  // eg: When menu is open, we want to apply changes only after
+  // user closes the menu. Actions performed when menu is closed
+  // requires immediate changes such as clicking on delete or clear
+  // all button.
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  // This is required to support loading options after a user has
+  // clicked open a dropdown, and supports saving this initial
+  // options for future (clicking the dropdown again).
+  const [initOptions, setInitOptions] = useState<Option[]>([]);
+
+  const currKubeClustersNamespaceItems = savedResourceItems.filter(
+    resource =>
+      resource.kind === 'namespace' && resource.id === kubeClusterItem.id
+  ) as PendingKubeResourceItem[];
+
+  const [selectedOpts, setSelectedOpts] = useState<Option[]>(() =>
+    currKubeClustersNamespaceItems.map(namespace => ({
+      label: namespace.subResourceName,
+      value: namespace.subResourceName,
+    }))
+  );
+
+  function handleChange(options: Option[], actionMeta: ActionMeta<Option>) {
+    if (isMenuOpen) {
+      setSelectedOpts(options);
+      return;
+    }
+
+    switch (actionMeta.action) {
+      case 'clear':
+        bulkToggleKubeResources(
+          currKubeClustersNamespaceItems,
+          kubeClusterItem
+        );
+        return;
+      case 'remove-value':
+        toggleResource({
+          kind: 'namespace',
+          id: kubeClusterItem.id,
+          subResourceName: actionMeta.removedValue.value,
+          clusterName: kubeClusterItem.clusterName,
+          name: actionMeta.removedValue.value,
+        });
+        return;
+    }
+  }
+
+  const handleMenuClose = () => {
+    setIsMenuOpen(false);
+
+    const currNamespaces = currKubeClustersNamespaceItems.map(
+      n => n.subResourceName
+    );
+    const selectedNamespaceIds = selectedOpts.map(o => o.value);
+    const toKeep = selectedNamespaceIds.filter(id =>
+      currNamespaces.includes(id)
+    );
+
+    const toInsert = selectedNamespaceIds.filter(o => !toKeep.includes(o));
+    const toRemove = currNamespaces.filter(n => !toKeep.includes(n));
+
+    if (!toInsert.length && !toRemove.length) {
+      return;
+    }
+
+    bulkToggleKubeResources(
+      [...toRemove, ...toInsert].map(namespace => ({
+        kind: 'namespace',
+        id: kubeClusterItem.id,
+        subResourceName: namespace,
+        clusterName: kubeClusterItem.clusterName,
+        name: namespace,
+      })),
+      kubeClusterItem
+    );
+  };
+
+  async function handleLoadOptions(input: string) {
+    const options = await fetchKubeNamespaces({
+      kubeCluster: kubeClusterItem.id,
+      search: input,
+    });
+
+    return options;
+  }
+
+  return (
+    <Box width="100%" mb={-3}>
+      <StyledSelect
+        label={`Namespaces${namespaceRequired ? ' (required)' : ''}:`}
+        inputId={kubeClusterItem.id}
+        width="100%"
+        placeholder="Start typing a namespace and press enter"
+        isMulti
+        isClearable={false}
+        isSearchable
+        closeMenuOnSelect={false}
+        hideSelectedOptions={false}
+        onMenuClose={handleMenuClose}
+        onMenuOpen={() => setIsMenuOpen(true)}
+        components={{
+          Option: CheckableOptionComponent,
+        }}
+        loadOptions={handleLoadOptions}
+        onChange={handleChange}
+        value={selectedOpts}
+        menuPosition="fixed" /* required to render dropdown out of its row */
+        rule={
+          namespaceRequired
+            ? requiredField('namespace selection required')
+            : undefined
+        }
+        initOptionsOnMenuOpen={(opts: Option[]) => setInitOptions(opts)}
+        defaultOptions={initOptions}
+      />
+    </Box>
+  );
+}
+
+const StyledSelect = styled(FieldSelectAsync)`
+  input[type='checkbox'] {
+    cursor: pointer;
+  }
+
+  .react-select__control {
+    font-size: ${p => p.theme.fontSizes[1]}px;
+    width: 350px;
+    background: ${p => p.theme.colors.levels.elevated};
+
+    &:hover {
+      background: ${p => p.theme.colors.levels.elevated};
+    }
+  }
+
+  .react-select__menu {
+    font-size: ${p => p.theme.fontSizes[1]}px;
+    width: 350px;
+    right: 0;
+    margin-bottom: 0;
+  }
+
+  .react-select__option {
+    padding: 0;
+    font-size: ${p => p.theme.fontSizes[1]}px;
+  }
+
+  .react-select__value-container {
+    position: static;
+  }
+
+  .react-select__placeholder {
+    color: ${p => p.theme.colors.text.main};
+  }
+`;
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.story.tsx b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.story.tsx
index 865ed0a98a025..693b08ace5409 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.story.tsx
+++ b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.story.tsx
@@ -152,6 +152,20 @@ export const FailedResourceRequest = () => (
   </MemoryRouter>
 );
 
+export const FailedUnsupportedKubeResourceKind = () => (
+  <MemoryRouter>
+    <RequestCheckoutWithSlider
+      {...baseProps}
+      isResourceRequest={true}
+      fetchResourceRequestRolesAttempt={{
+        status: 'failed',
+        statusText:
+          'Your Teleport roles request_mode field restricts you from requesting kinds [kube_cluster] for Kubernetes cluster "pumpkin-kube-cluster". Allowed kinds: [pod secret]',
+      }}
+    />
+  </MemoryRouter>
+);
+
 export const Success = () => (
   <MemoryRouter initialEntries={['']}>
     <RequestCheckoutWithSlider
@@ -164,6 +178,13 @@ export const Success = () => (
 );
 
 const baseProps: RequestCheckoutWithSliderProps = {
+  fetchKubeNamespaces: async () => [
+    'namespace1',
+    'namespace2',
+    'namespace3',
+    'namespace4',
+  ],
+  bulkToggleKubeResources: () => null,
   createAttempt: { status: '' },
   fetchResourceRequestRolesAttempt: { status: '' },
   isResourceRequest: false,
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.test.tsx b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.test.tsx
index 974a2498b92ad..21a4dcccc23eb 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.test.tsx
+++ b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.test.tsx
@@ -174,4 +174,6 @@ const props: RequestCheckoutWithSliderProps = {
   dryRunResponse: null,
   startTime: null,
   onStartTimeChange: () => null,
+  fetchKubeNamespaces: () => null,
+  bulkToggleKubeResources: () => null,
 };
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx
index ee1dc315d360a..34253a22854d6 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx
+++ b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx
@@ -30,39 +30,43 @@ import {
   Image,
   Indicator,
   LabelInput,
+  Link as ExternalLink,
   P3,
   Subtitle2,
   Text,
+  Mark,
 } from 'design';
-import {
-  ArrowBack,
-  ChevronDown,
-  ChevronRight,
-  Warning,
-  Cross,
-} from 'design/Icon';
+import { ArrowBack, ChevronDown, ChevronRight, Warning } from 'design/Icon';
 import Table, { Cell } from 'design/DataTable';
 import { Danger } from 'design/Alert';
 
 import Validation, { useRule, Validator } from 'shared/components/Validation';
 import { Attempt } from 'shared/hooks/useAttemptNext';
-import { pluralize } from 'shared/utils/text';
+import { listToSentence, pluralize } from 'shared/utils/text';
 import { Option } from 'shared/components/Select';
 import { FieldCheckbox } from 'shared/components/FieldCheckbox';
 import { mergeRefs } from 'shared/libs/mergeRefs';
+import { TextSelectCopyMulti } from 'shared/components/TextSelectCopy';
+import { RequestableResourceKind } from 'shared/components/AccessRequests/NewRequest/resource';
 
 import { CreateRequest } from '../../Shared/types';
 import { AssumeStartTime } from '../../AssumeStartTime/AssumeStartTime';
 import { AccessDurationRequest } from '../../AccessDuration';
+import {
+  checkForUnsupportedKubeRequestModes,
+  isKubeClusterWithNamespaces,
+  type KubeNamespaceRequest,
+} from '../kube';
 
 import { ReviewerOption } from './types';
 import shieldCheck from './shield-check.png';
 import { SelectReviewers } from './SelectReviewers';
 import { AdditionalOptions } from './AdditionalOptions';
+import { KubeNamespaceSelector } from './KubeNamespaceSelector';
+import { CrossIcon } from './CrossIcon';
 
 import type { TransitionStatus } from 'react-transition-group';
 import type { AccessRequest } from 'shared/services/accessRequests';
-import type { ResourceKind } from '../resource';
 
 export const RequestCheckoutWithSlider = forwardRef<
   HTMLDivElement,
@@ -164,8 +168,11 @@ export function RequestCheckout<T extends PendingListItem>({
   Header,
   startTime,
   onStartTimeChange,
+  fetchKubeNamespaces,
+  bulkToggleKubeResources,
 }: RequestCheckoutProps<T>) {
   const [reason, setReason] = useState('');
+
   function updateReason(reason: string) {
     setReason(reason);
   }
@@ -184,6 +191,16 @@ export function RequestCheckout<T extends PendingListItem>({
     });
   }
 
+  const {
+    affectedKubeClusterName,
+    unsupportedKubeRequestModes,
+    requiresNamespaceSelect,
+  } = checkForUnsupportedKubeRequestModes(fetchResourceRequestRolesAttempt);
+
+  const hasUnsupportedKubeRequestModes = !!unsupportedKubeRequestModes;
+  const showRequestRoleErrBanner =
+    !hasUnsupportedKubeRequestModes && !requiresNamespaceSelect;
+
   const isInvalidRoleSelection =
     resourceRequestRoles.length > 0 &&
     isResourceRequest &&
@@ -193,10 +210,18 @@ export function RequestCheckout<T extends PendingListItem>({
     pendingAccessRequests.length === 0 ||
     createAttempt.status === 'processing' ||
     isInvalidRoleSelection ||
-    fetchResourceRequestRolesAttempt.status === 'failed' ||
+    (fetchResourceRequestRolesAttempt.status === 'failed' &&
+      hasUnsupportedKubeRequestModes) ||
+    requiresNamespaceSelect ||
+    fetchResourceRequestRolesAttempt.status === 'processing';
+
+  const cancelBtnDisabled =
+    createAttempt.status === 'processing' ||
     fetchResourceRequestRolesAttempt.status === 'processing';
 
-  const numPendingAccessRequests = pendingAccessRequests.length;
+  const numPendingAccessRequests = pendingAccessRequests.filter(
+    item => !isKubeClusterWithNamespaces(item, pendingAccessRequests)
+  ).length;
 
   const DefaultHeader = () => {
     return (
@@ -218,124 +243,192 @@ export function RequestCheckout<T extends PendingListItem>({
     );
   };
 
-  return (
-    <>
-      {fetchResourceRequestRolesAttempt.status === 'failed' && (
-        <Alert
-          kind="danger"
-          children={fetchResourceRequestRolesAttempt.statusText}
-        />
-      )}
-      {fetchStatus === 'loading' && (
-        <Box mt={5} textAlign="center">
-          <Indicator />
-        </Box>
-      )}
-
-      {fetchStatus === 'loaded' && (
-        <div>
-          {createAttempt.status === 'success' ? (
-            <>
-              <Box>
-                <Box as="header" mt={2} mb={7} textAlign="center">
-                  <H2 mb={1}>Resources Requested Successfully</H2>
-                  <Subtitle2 color="text.slightlyMuted">
-                    You've successfully requested {numRequestedResources}{' '}
-                    {pluralize(numRequestedResources, 'resource')}
-                  </Subtitle2>
-                </Box>
-                <Flex justifyContent="center" mb={3}>
-                  <Image src={shieldCheck} width="250px" height="179px" />
-                </Flex>
-              </Box>
-              <SuccessComponent onClose={onClose} reset={reset} />
-            </>
-          ) : (
-            <>
-              {Header?.() || DefaultHeader()}
-              {createAttempt.status === 'failed' && (
-                <Alert kind="danger" children={createAttempt.statusText} />
-              )}
-              <StyledTable
-                data={pendingAccessRequests}
-                columns={[
-                  {
-                    key: 'clusterName',
-                    headerText: 'Cluster Name',
-                    isNonRender: !showClusterNameColumn,
-                  },
-                  {
-                    key: 'kind',
-                    headerText: 'Type',
-                    render: item => (
-                      <Cell>{getPrettyResourceKind(item.kind)}</Cell>
-                    ),
-                  },
-                  {
-                    key: 'name',
-                    headerText: 'Name',
-                  },
-                  {
-                    altKey: 'delete-btn',
-                    render: resource => (
-                      <Cell align="right">
-                        <Cross
-                          size="small"
-                          borderRadius={2}
-                          p={2}
-                          onClick={() => {
-                            clearAttempt();
-                            toggleResource(resource);
-                          }}
-                          disabled={createAttempt.status === 'processing'}
-                          css={`
-                            cursor: pointer;
-
-                            background-color: ${({ theme }) =>
-                              theme.colors.buttons.trashButton.default};
-                            border-radius: 2px;
-
-                            &:hover {
-                              background-color: ${({ theme }) =>
-                                theme.colors.buttons.trashButton.hover};
-                            }
-                          `}
-                        />
-                      </Cell>
-                    ),
-                  },
-                ]}
-                emptyText="No resources are selected"
-              />
-              {userGroupFetchAttempt?.status === 'processing' && (
-                <Flex mt={4} alignItems="center" justifyContent="center">
-                  <Indicator size="small" />
+  function customRow(item: T) {
+    if (item.kind === 'kube_cluster') {
+      return (
+        <td colSpan={3}>
+          <Flex>
+            <Flex flexWrap="wrap">
+              <Flex
+                gap={2}
+                justifyContent="space-between"
+                width="100%"
+                alignItems="center"
+              >
+                <Flex gap={5}>
+                  <Box>{getPrettyResourceKind(item.kind)}</Box>
+                  <Box>{item.name}</Box>
                 </Flex>
-              )}
-              {userGroupFetchAttempt?.status === 'failed' && (
-                <Danger mt={4}>{userGroupFetchAttempt.statusText}</Danger>
-              )}
-              {userGroupFetchAttempt?.status === 'success' &&
-                appsGrantedByUserGroup.length > 0 && (
-                  <AppsGrantedAccess apps={appsGrantedByUserGroup} />
-                )}
-              {isResourceRequest && (
-                <ResourceRequestRoles
-                  roles={resourceRequestRoles}
-                  selectedRoles={selectedResourceRequestRoles}
-                  setSelectedRoles={setSelectedResourceRequestRoles}
-                  fetchAttempt={fetchResourceRequestRolesAttempt}
+                <CrossIcon
+                  clearAttempt={clearAttempt}
+                  item={item}
+                  toggleResource={toggleResource}
+                  createAttempt={createAttempt}
                 />
-              )}
-              <Box mt={6} mb={1}>
-                <SelectReviewers
-                  reviewers={dryRunResponse?.reviewers.map(r => r.name) ?? []}
-                  selectedReviewers={selectedReviewers}
-                  setSelectedReviewers={setSelectedReviewers}
+              </Flex>
+              <KubeNamespaceSelector
+                kubeClusterItem={item}
+                savedResourceItems={pendingAccessRequests}
+                toggleResource={toggleResource}
+                fetchKubeNamespaces={fetchKubeNamespaces}
+                bulkToggleKubeResources={bulkToggleKubeResources}
+                namespaceRequired={
+                  requiresNamespaceSelect &&
+                  affectedKubeClusterName.includes(item.id)
+                }
+              />
+            </Flex>
+          </Flex>
+        </td>
+      );
+    }
+  }
+
+  return (
+    <Validation>
+      {({ validator }) => (
+        <>
+          {showRequestRoleErrBanner &&
+            fetchResourceRequestRolesAttempt.status === 'failed' && (
+              <Alert
+                kind="danger"
+                children={fetchResourceRequestRolesAttempt.statusText}
+              />
+            )}
+          {hasUnsupportedKubeRequestModes && (
+            <Alert kind="danger">
+              <Text mb={2}>
+                You can only request Kubernetes resource{' '}
+                {pluralize(unsupportedKubeRequestModes.length, 'kind')}{' '}
+                <Mark>{listToSentence(unsupportedKubeRequestModes)}</Mark> for
+                cluster <Mark>{affectedKubeClusterName}</Mark>. Requesting those
+                resource kinds is currently only supported through the{' '}
+                <ExternalLink
+                  target="_blank"
+                  href="https://goteleport.com/docs/connect-your-client/tsh/#installing-tsh"
+                >
+                  tsh CLI tool
+                </ExternalLink>
+                . Use the{' '}
+                <ExternalLink
+                  target="_blank"
+                  href="https://goteleport.com/docs/admin-guides/access-controls/access-requests/resource-requests/#search-for-kubernetes-resources"
+                >
+                  tsh request search
+                </ExternalLink>{' '}
+                command that will help you construct the request.
+              </Text>
+              <Box width="360px">
+                Example:
+                <TextSelectCopyMulti
+                  lines={[
+                    {
+                      text: `tsh request search --kind=${unsupportedKubeRequestModes[0]} --kube-cluster=${affectedKubeClusterName} --all-kube-namespaces`,
+                    },
+                  ]}
                 />
               </Box>
-              <Validation>
-                {({ validator }) => (
+            </Alert>
+          )}
+          {fetchStatus === 'loading' && (
+            <Box mt={5} textAlign="center">
+              <Indicator />
+            </Box>
+          )}
+
+          {fetchStatus === 'loaded' && (
+            <div>
+              {createAttempt.status === 'success' ? (
+                <>
+                  <Box>
+                    <Box as="header" mt={2} mb={7} textAlign="center">
+                      <H2 mb={1}>Resources Requested Successfully</H2>
+                      <Subtitle2 color="text.slightlyMuted">
+                        You've successfully requested {numRequestedResources}{' '}
+                        {pluralize(numRequestedResources, 'resource')}
+                      </Subtitle2>
+                    </Box>
+                    <Flex justifyContent="center" mb={3}>
+                      <Image src={shieldCheck} width="250px" height="179px" />
+                    </Flex>
+                  </Box>
+                  <SuccessComponent onClose={onClose} reset={reset} />
+                </>
+              ) : (
+                <>
+                  {Header?.() || DefaultHeader()}
+                  {createAttempt.status === 'failed' && (
+                    <Alert kind="danger" children={createAttempt.statusText} />
+                  )}
+                  <StyledTable
+                    data={pendingAccessRequests.filter(
+                      d => d.kind !== 'namespace'
+                    )}
+                    row={{
+                      customRow,
+                    }}
+                    columns={[
+                      {
+                        key: 'clusterName',
+                        headerText: 'Cluster Name',
+                        isNonRender: !showClusterNameColumn,
+                      },
+                      {
+                        key: 'kind',
+                        headerText: 'Type',
+                        render: item => (
+                          <Cell>{getPrettyResourceKind(item.kind)}</Cell>
+                        ),
+                      },
+                      {
+                        key: 'name',
+                        headerText: 'Name',
+                      },
+                      {
+                        altKey: 'delete-btn',
+                        render: resource => (
+                          <Cell align="right">
+                            <CrossIcon
+                              clearAttempt={clearAttempt}
+                              item={resource}
+                              toggleResource={toggleResource}
+                              createAttempt={createAttempt}
+                            />
+                          </Cell>
+                        ),
+                      },
+                    ]}
+                    emptyText="No resources are selected"
+                  />
+                  {userGroupFetchAttempt?.status === 'processing' && (
+                    <Flex mt={4} alignItems="center" justifyContent="center">
+                      <Indicator size="small" />
+                    </Flex>
+                  )}
+                  {userGroupFetchAttempt?.status === 'failed' && (
+                    <Danger mt={4}>{userGroupFetchAttempt.statusText}</Danger>
+                  )}
+                  {userGroupFetchAttempt?.status === 'success' &&
+                    appsGrantedByUserGroup.length > 0 && (
+                      <AppsGrantedAccess apps={appsGrantedByUserGroup} />
+                    )}
+                  {isResourceRequest && (
+                    <ResourceRequestRoles
+                      roles={resourceRequestRoles}
+                      selectedRoles={selectedResourceRequestRoles}
+                      setSelectedRoles={setSelectedResourceRequestRoles}
+                      fetchAttempt={fetchResourceRequestRolesAttempt}
+                    />
+                  )}
+                  <Box mt={6} mb={1}>
+                    <SelectReviewers
+                      reviewers={
+                        dryRunResponse?.reviewers.map(r => r.name) ?? []
+                      }
+                      selectedReviewers={selectedReviewers}
+                      setSelectedReviewers={setSelectedReviewers}
+                    />
+                  </Box>
                   <Flex mt={6} flexDirection="column" gap={1}>
                     {dryRunResponse && (
                       <Box mb={1}>
@@ -394,19 +487,19 @@ export function RequestCheckout<T extends PendingListItem>({
                           reset();
                           onClose();
                         }}
-                        disabled={submitBtnDisabled}
+                        disabled={cancelBtnDisabled}
                       >
                         Cancel
                       </ButtonSecondary>
                     </Flex>
                   </Flex>
-                )}
-              </Validation>
-            </>
+                </>
+              )}
+            </div>
           )}
-        </div>
+        </>
       )}
-    </>
+    </Validation>
   );
 }
 
@@ -549,7 +642,7 @@ function ResourceRequestRoles({
           {roles.map((roleName, index) => {
             const checked = selectedRoles.includes(roleName);
             return (
-              <RoleRowContainer checked={checked}>
+              <RoleRowContainer checked={checked} key={index}>
                 <StyledFieldCheckbox
                   key={index}
                   name={roleName}
@@ -678,7 +771,7 @@ function TextBox({
   );
 }
 
-function getPrettyResourceKind(kind: ResourceKind): string {
+function getPrettyResourceKind(kind: RequestableResourceKind): string {
   switch (kind) {
     case 'role':
       return 'Role';
@@ -698,6 +791,8 @@ function getPrettyResourceKind(kind: ResourceKind): string {
       return 'Desktop';
     case 'saml_idp_service_provider':
       return 'SAML Application';
+    case 'namespace':
+      return 'Namespace';
     default:
       kind satisfies never;
       return kind;
@@ -775,14 +870,31 @@ export type RequestCheckoutWithSliderProps<
 } & RequestCheckoutProps<T>;
 
 export interface PendingListItem {
-  kind: ResourceKind;
+  kind: RequestableResourceKind;
   /** Name of the resource, for presentation purposes only. */
   name: string;
   /** Identifier of the resource. Should be sent in requests. */
   id: string;
   clusterName?: string;
+  /**
+   * This field must be defined if a user is requesting subresources.
+   *
+   * Example:
+   * "kube_cluster" resource can have subresources such as "namespace".
+   * Example PendingListItem values if user is requesting a kubes namespace:
+   *   - kind: const "namespace"
+   *   - id: name of the kube_cluster
+   *   - subResourceName: name of the kube_cluster's namespace
+   *   - clusterName: name of teleport cluster where kube_cluster is located
+   *   - name: same as subResourceName as this is what we want to display to user
+   * */
+  subResourceName?: string;
 }
 
+export type PendingKubeResourceItem = Omit<PendingListItem, 'kind'> & {
+  kind: Extract<RequestableResourceKind, 'namespace'>;
+};
+
 export type RequestCheckoutProps<T extends PendingListItem = PendingListItem> =
   {
     onClose(): void;
@@ -816,6 +928,11 @@ export type RequestCheckoutProps<T extends PendingListItem = PendingListItem> =
     Header?: () => JSX.Element;
     startTime: Date;
     onStartTimeChange(t?: Date): void;
+    fetchKubeNamespaces(p: KubeNamespaceRequest): Promise<string[]>;
+    bulkToggleKubeResources(
+      kubeResources: PendingKubeResourceItem[],
+      kubeCluster: T
+    ): void;
   };
 
 type SuccessComponentParams = {
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/Apps.tsx b/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/Apps.tsx
index 33e01c9fa7675..5488ceeedaefd 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/Apps.tsx
+++ b/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/Apps.tsx
@@ -30,7 +30,7 @@ import Select, {
 } from 'shared/components/Select';
 import { ToolTipInfo } from 'shared/components/ToolTip';
 
-import { ResourceMap, ResourceKind } from '../resource';
+import { ResourceMap, RequestableResourceKind } from '../resource';
 
 import { ListProps, StyledTable } from './ResourceList';
 
@@ -125,7 +125,7 @@ function ActionCell({
   agent: App;
   addedResources: ResourceMap;
   addOrRemoveResource: (
-    kind: ResourceKind,
+    kind: RequestableResourceKind,
     resourceId: string,
     resourceName?: string
   ) => void;
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/ResourceList.tsx b/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/ResourceList.tsx
index 1828fce8d7298..2981f1175ebd3 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/ResourceList.tsx
+++ b/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/ResourceList.tsx
@@ -30,7 +30,7 @@ import { CustomSort } from 'design/DataTable/types';
 
 import { ResourceLabel, UnifiedResource } from 'teleport/services/agents';
 
-import { ResourceMap, ResourceKind } from '../resource';
+import { ResourceMap, RequestableResourceKind } from '../resource';
 
 import { Apps } from './Apps';
 import { Databases } from './Databases';
@@ -126,7 +126,7 @@ export type ListProps = {
   onLabelClick: (label: ResourceLabel) => void;
   addedResources: ResourceMap;
   addOrRemoveResource: (
-    kind: ResourceKind,
+    kind: RequestableResourceKind,
     resourceId: string,
     resourceName?: string
   ) => void;
@@ -135,7 +135,7 @@ export type ListProps = {
 
 export type ResourceListProps = {
   agents: UnifiedResource[];
-  selectedResource: ResourceKind;
+  selectedResource: RequestableResourceKind;
   // disableRows disable clicking on any buttons (when fetching).
   disableRows: boolean;
 } & ListProps;
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/index.ts b/web/packages/shared/components/AccessRequests/NewRequest/index.ts
index 46181260d19f7..44057733335fa 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/index.ts
+++ b/web/packages/shared/components/AccessRequests/NewRequest/index.ts
@@ -18,5 +18,5 @@
 
 export * from './RequestCheckout';
 export * from './ResourceList';
-export type { ResourceMap, ResourceKind } from './resource';
+export type { ResourceMap, RequestableResourceKind } from './resource';
 export { getEmptyResourceState } from './resource';
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/kube.test.ts b/web/packages/shared/components/AccessRequests/NewRequest/kube.test.ts
new file mode 100644
index 0000000000000..33e136e0dc038
--- /dev/null
+++ b/web/packages/shared/components/AccessRequests/NewRequest/kube.test.ts
@@ -0,0 +1,61 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 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 { checkForUnsupportedKubeRequestModes } from './kube';
+
+test('checkForUnsupportedKubeRequestModes: non failed status', () => {
+  const {
+    affectedKubeClusterName,
+    unsupportedKubeRequestModes,
+    requiresNamespaceSelect,
+  } = checkForUnsupportedKubeRequestModes({ status: '' });
+
+  expect(affectedKubeClusterName).toBeFalsy();
+  expect(unsupportedKubeRequestModes).toBeFalsy();
+  expect(requiresNamespaceSelect).toBeFalsy();
+});
+
+test('checkForUnsupportedKubeRequestModes: failed status with unsupported kinds', () => {
+  const {
+    affectedKubeClusterName,
+    unsupportedKubeRequestModes,
+    requiresNamespaceSelect,
+  } = checkForUnsupportedKubeRequestModes({
+    status: 'failed',
+    statusText: `Your Teleport roles request_mode field restricts you from requesting kinds [kube_cluster] for Kubernetes cluster "pumpkin-kube-cluster". Allowed kinds: [pod secret]`,
+  });
+
+  expect(affectedKubeClusterName).toEqual(`pumpkin-kube-cluster`);
+  expect(unsupportedKubeRequestModes).toEqual(['pod', 'secret']);
+  expect(requiresNamespaceSelect).toBeFalsy();
+});
+
+test('checkForUnsupportedKubeRequestModes: failed status with supported namespace', () => {
+  const {
+    affectedKubeClusterName,
+    unsupportedKubeRequestModes,
+    requiresNamespaceSelect,
+  } = checkForUnsupportedKubeRequestModes({
+    status: 'failed',
+    statusText: `Your Teleport roles request_mode field restricts you from requesting kinds [kube_cluster] for Kubernetes cluster "pumpkin-kube-cluster". Allowed kinds: [pod secret namespace]`,
+  });
+
+  expect(affectedKubeClusterName).toEqual(`pumpkin-kube-cluster`);
+  expect(unsupportedKubeRequestModes).toBeFalsy();
+  expect(requiresNamespaceSelect).toBeTruthy();
+});
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/kube.ts b/web/packages/shared/components/AccessRequests/NewRequest/kube.ts
new file mode 100644
index 0000000000000..e84ed46c972b4
--- /dev/null
+++ b/web/packages/shared/components/AccessRequests/NewRequest/kube.ts
@@ -0,0 +1,94 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 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 { Attempt } from 'shared/hooks/useAttemptNext';
+
+import { PendingListItem } from './RequestCheckout';
+
+export type KubeNamespaceRequest = {
+  kubeCluster: string;
+  search: string;
+};
+
+/**
+ * Returns true if the item is a kube cluster or is a namespace
+ * of the item.
+ *
+ * Technically you can request for both a kube_cluster and its subresources
+ * but it's probably not what a user would expect from the web UI because
+ * requesting for subresources means narrowing access versus requesting
+ * access to the whole kube_cluster.
+ */
+export function isKubeClusterWithNamespaces(
+  item: PendingListItem,
+  allItems: PendingListItem[]
+) {
+  return (
+    item.kind === 'kube_cluster' &&
+    allItems.find(a => a.kind === 'namespace' && a.id == item.id)
+  );
+}
+
+/**
+ * Checks each data for kube_cluster or namespace
+ */
+export function checkForUnsupportedKubeRequestModes(
+  requestRoleAttempt: Attempt
+) {
+  let unsupportedKubeRequestModes: string[];
+  let affectedKubeClusterName = '';
+  let requiresNamespaceSelect = false;
+
+  if (requestRoleAttempt.status === 'failed') {
+    const errMsg = requestRoleAttempt.statusText.toLowerCase();
+
+    if (errMsg.includes('request_mode') && errMsg.includes('allowed kinds: ')) {
+      let allowedKinds = errMsg.split('allowed kinds: ')[1];
+
+      // Web UI supports selecting namespace and wildcard
+      // which basically means requiring namespace.
+      if (allowedKinds.includes('*') || allowedKinds.includes('namespace')) {
+        requiresNamespaceSelect = true;
+      } else {
+        if (allowedKinds.startsWith('[')) {
+          allowedKinds = allowedKinds.slice(1, -1);
+        }
+        unsupportedKubeRequestModes = allowedKinds.split(' ');
+      }
+
+      const initialSplit = errMsg.split('for kubernetes cluster "');
+      if (initialSplit.length > 1) {
+        affectedKubeClusterName = initialSplit[1]
+          .split('". allowed kinds')[0]
+          .trim();
+      }
+
+      return {
+        affectedKubeClusterName,
+        requiresNamespaceSelect,
+        unsupportedKubeRequestModes,
+      };
+    }
+  }
+
+  return {
+    affectedKubeClusterName,
+    unsupportedKubeRequestModes,
+    requiresNamespaceSelect,
+  };
+}
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/resource.ts b/web/packages/shared/components/AccessRequests/NewRequest/resource.ts
index 42070e9448283..f56ad58110d25 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/resource.ts
+++ b/web/packages/shared/components/AccessRequests/NewRequest/resource.ts
@@ -17,16 +17,21 @@
  */
 
 import { ResourceIdKind } from 'teleport/services/agents';
+import { KubeResourceKind } from 'teleport/services/kube';
 
 /** Available request kinds for resource-based and role-based access requests. */
-export type ResourceKind = ResourceIdKind | 'role' | 'resource';
+export type RequestableResourceKind =
+  | ResourceIdKind
+  | 'role'
+  | 'resource'
+  | Exclude<KubeResourceKind, '*'>;
 
 /**
  * Maps a resource ID (usually agent name) to resource description (usually the
  * same, but not necessarily).
  */
 export type ResourceMap = {
-  [K in ResourceIdKind | 'role']: Record<string, string>;
+  [K in Exclude<RequestableResourceKind, 'resource'>]: Record<string, string>;
 };
 
 export function getEmptyResourceState(): ResourceMap {
@@ -39,5 +44,6 @@ export function getEmptyResourceState(): ResourceMap {
     windows_desktop: {},
     role: {},
     saml_idp_service_provider: {},
+    namespace: {},
   };
 }
diff --git a/web/packages/shared/components/AccessRequests/Shared/utils.ts b/web/packages/shared/components/AccessRequests/Shared/utils.ts
index 1ac9a291328bf..6185e568c4c21 100644
--- a/web/packages/shared/components/AccessRequests/Shared/utils.ts
+++ b/web/packages/shared/components/AccessRequests/Shared/utils.ts
@@ -40,6 +40,7 @@ export function getNumAddedResources(addedResources: ResourceMap) {
     Object.keys(addedResources.kube_cluster).length +
     Object.keys(addedResources.user_group).length +
     Object.keys(addedResources.windows_desktop).length +
-    Object.keys(addedResources.saml_idp_service_provider).length
+    Object.keys(addedResources.saml_idp_service_provider).length +
+    Object.keys(addedResources.namespace).length
   );
 }
diff --git a/web/packages/shared/components/FieldSelect/FieldSelect.tsx b/web/packages/shared/components/FieldSelect/FieldSelect.tsx
index 90e875ee9868c..66007b24f18fc 100644
--- a/web/packages/shared/components/FieldSelect/FieldSelect.tsx
+++ b/web/packages/shared/components/FieldSelect/FieldSelect.tsx
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { GroupBase } from 'react-select';
+import { GroupBase, OptionsOrGroups } from 'react-select';
 
 import { useAsync } from 'shared/hooks/useAsync';
 
@@ -69,7 +69,28 @@ export function FieldSelectAsync<
   Opt = Option,
   IsMulti extends boolean = false,
   Group extends GroupBase<Opt> = GroupBase<Opt>,
->(props: AsyncSelectProps<Opt, IsMulti, Group> & FieldProps<Opt, IsMulti>) {
+>(
+  props: AsyncSelectProps<Opt, IsMulti, Group> &
+    FieldProps<Opt, IsMulti> & {
+      /**
+       * A function that sets the initial options, after the initial options are
+       * finished fetching (triggered by when user clicks on the select component
+       * that renders the dropdown menu).
+       *
+       * Select async doesn't provide an option for "on menu open, load options".
+       * There is only "on render load, or provide default array of options".
+       * There are some cases where there can be many select async components rendered
+       * (eg: bulk adding kube clusters to an access request) and users may not be
+       * required to select anything from the select async dropdown, so this provides
+       * a way to load options only on need (menu open) and save wasteful api calls.
+       *
+       * Requires:
+       *   - base.onMenuOpen to be defined
+       *   - defaultOptions to be an array
+       */
+      initOptionsOnMenuOpen?(options: OptionsOrGroups<Opt, Group>): void;
+    }
+) {
   const { base, wrapper, others } = splitSelectProps<
     Opt,
     IsMulti,
@@ -78,15 +99,35 @@ export function FieldSelectAsync<
   >(props, {
     defaultOptions: true,
   });
-  const { defaultOptions, loadOptions, ...styles } = others;
+  const { defaultOptions, loadOptions, initOptionsOnMenuOpen, ...styles } =
+    others;
   const [attempt, runAttempt] = useAsync(resolveUndefinedOptions(loadOptions));
+
+  async function onMenuOpen() {
+    if (!base.onMenuOpen) return;
+
+    base.onMenuOpen();
+
+    if (
+      initOptionsOnMenuOpen &&
+      defaultOptions &&
+      Array.isArray(defaultOptions) &&
+      defaultOptions.length == 0
+    ) {
+      const [options, error] = await runAttempt('', null);
+      if (!error) {
+        return others.initOptionsOnMenuOpen(options);
+      }
+    }
+  }
+
   return (
     <FieldSelectWrapper {...wrapper} {...styles}>
       <SelectAsync<Opt, IsMulti, Group>
         {...base}
+        onMenuOpen={onMenuOpen}
         defaultOptions={defaultOptions}
         loadOptions={async (value, callback) => {
-          console.log('loading');
           const [options, error] = await runAttempt(value, callback);
           if (error) {
             return [];
@@ -97,6 +138,9 @@ export function FieldSelectAsync<
           if (attempt.status === 'error') {
             return `Could not load options: ${attempt.statusText}`;
           }
+          if (attempt.status === 'processing') {
+            return 'Loading...';
+          }
           return base.noOptionsMessage?.(obj) ?? 'No options';
         }}
       />
diff --git a/web/packages/shared/components/FieldSelect/shared.tsx b/web/packages/shared/components/FieldSelect/shared.tsx
index a25768f5c2df1..03857ea3ac2ee 100644
--- a/web/packages/shared/components/FieldSelect/shared.tsx
+++ b/web/packages/shared/components/FieldSelect/shared.tsx
@@ -191,6 +191,10 @@ export function splitSelectProps<
     markAsError,
     maxMenuHeight,
     menuIsOpen,
+    onMenuOpen,
+    onMenuClose,
+    closeMenuOnSelect,
+    hideSelectedOptions,
     menuPosition,
     name,
     noOptionsMessage,
@@ -222,8 +226,12 @@ export function splitSelectProps<
       isMulti,
       isSearchable,
       maxMenuHeight,
-      menuIsOpen,
       menuPosition,
+      menuIsOpen,
+      onMenuOpen,
+      onMenuClose,
+      closeMenuOnSelect,
+      hideSelectedOptions,
       name,
       noOptionsMessage,
       onBlur,
@@ -267,6 +275,10 @@ type KeysRemovedFromOthers =
   | 'maxMenuHeight'
   | 'menuIsOpen'
   | 'menuPosition'
+  | 'onMenuOpen'
+  | 'onMenuClose'
+  | 'closeMenuOnSelect'
+  | 'hideSelectedOptions'
   | 'name'
   | 'noOptionsMessage'
   | 'onBlur'
diff --git a/web/packages/shared/services/accessRequests/accessRequests.ts b/web/packages/shared/services/accessRequests/accessRequests.ts
index 3b5517c393b4b..855e71e777ca3 100644
--- a/web/packages/shared/services/accessRequests/accessRequests.ts
+++ b/web/packages/shared/services/accessRequests/accessRequests.ts
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ResourceIdKind } from 'teleport/services/agents';
+import { RequestableResourceKind } from 'shared/components/AccessRequests/NewRequest/resource';
 
 export type RequestState =
   | 'NONE'
@@ -76,7 +76,7 @@ export type Resource = {
 // ResourceID is a unique identifier for a teleport resource.
 export type ResourceId = {
   // kind is the resource (agent) kind.
-  kind: ResourceIdKind;
+  kind: RequestableResourceKind;
   // name is the name of the specific resource.
   name: string;
   // clusterName is the name of cluster.
diff --git a/web/packages/shared/utils/text.test.ts b/web/packages/shared/utils/text.test.ts
index 0cd297f7b20d5..a76bb90fbb594 100644
--- a/web/packages/shared/utils/text.test.ts
+++ b/web/packages/shared/utils/text.test.ts
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { pluralize, capitalizeFirstLetter } from './text';
+import { pluralize, capitalizeFirstLetter, listToSentence } from './text';
 
 test('pluralize', () => {
   expect(pluralize(0, 'apple')).toBe('apples');
@@ -30,3 +30,39 @@ test('capitalizeFirstLetter', () => {
   expect(capitalizeFirstLetter('hello')).toBe('Hello');
   expect(capitalizeFirstLetter('')).toBe('');
 });
+
+describe('listToSentence()', () => {
+  const testCases = [
+    {
+      name: 'no words',
+      list: [],
+      expected: '',
+    },
+    {
+      name: 'one word',
+      list: ['a'],
+      expected: 'a',
+    },
+    {
+      name: 'two words',
+      list: ['a', 'b'],
+      expected: 'a and b',
+    },
+    {
+      name: 'three words',
+      list: ['a', 'b', 'c'],
+      expected: 'a, b and c',
+    },
+    {
+      name: 'lost of words',
+      list: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
+      expected: 'a, b, c, d, e, f and g',
+    },
+  ];
+
+  test.each(testCases)('$name', ({ list, expected }) => {
+    const originalList = [...list];
+    expect(listToSentence(list)).toEqual(expected);
+    expect(list).toEqual(originalList);
+  });
+});
diff --git a/web/packages/shared/utils/text.ts b/web/packages/shared/utils/text.ts
index a424ea5bd9b14..37635c4c0bad2 100644
--- a/web/packages/shared/utils/text.ts
+++ b/web/packages/shared/utils/text.ts
@@ -39,3 +39,28 @@ export function capitalizeFirstLetter(str: string) {
   }
   return str[0].toUpperCase() + str.slice(1);
 }
+
+/**
+ * Takes a list of words and converts it into a sentence.
+ * eg: given list ["apple", "banana", "carrot"], converts
+ * to string "apple, banana and carrot"
+ *
+ * Does not modify original list.
+ */
+export function listToSentence(listOfWords: string[]) {
+  if (!listOfWords || !listOfWords.length) {
+    return '';
+  }
+
+  if (listOfWords.length == 1) {
+    return listOfWords[0];
+  }
+
+  if (listOfWords.length == 2) {
+    return `${listOfWords[0]} and ${listOfWords[1]}`;
+  }
+
+  const copiedList = [...listOfWords];
+  const lastWord = copiedList.pop();
+  return `${copiedList.join(', ')} and ${lastWord}`;
+}
diff --git a/web/packages/teleport/src/AccessRequests/service.ts b/web/packages/teleport/src/AccessRequests/service.ts
index 20637193ef24a..03b7e158d3f3b 100644
--- a/web/packages/teleport/src/AccessRequests/service.ts
+++ b/web/packages/teleport/src/AccessRequests/service.ts
@@ -18,7 +18,8 @@
 
 import { formatDuration } from 'date-fns';
 
-import { ResourceIdKind } from 'teleport/services/agents';
+import { RequestableResourceKind } from 'shared/components/AccessRequests/NewRequest/resource';
+
 import api from 'teleport/services/api';
 import cfg from 'teleport/config';
 import {
@@ -41,7 +42,7 @@ export async function createAccessRequest(
     reason,
     roles,
     resourceIds: resources.map(item => ({
-      kind: item.type as ResourceIdKind,
+      kind: item.type as RequestableResourceKind,
       name: item.id,
       clusterName: clusterId,
     })),
diff --git a/web/packages/teleport/src/AccessRequests/types.ts b/web/packages/teleport/src/AccessRequests/types.ts
index 38fa71386729e..de08d61605961 100644
--- a/web/packages/teleport/src/AccessRequests/types.ts
+++ b/web/packages/teleport/src/AccessRequests/types.ts
@@ -16,15 +16,15 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import type { Option } from 'shared/components/Select';
+import { RequestableResourceKind } from 'shared/components/AccessRequests/NewRequest/resource';
 
-import type { ResourceIdKind } from 'teleport/services/agents';
+import type { Option } from 'shared/components/Select';
 
 export type DurationOption = Option<number>;
 
 export interface Resource {
   id: {
-    kind: ResourceIdKind;
+    kind: RequestableResourceKind;
     name: string;
     clusterName: string;
     subResourceName?: string;
@@ -38,7 +38,7 @@ export interface Resource {
 type RequestState = 'NONE' | 'PENDING' | 'APPROVED' | 'DENIED' | 'APPLIED' | '';
 
 export interface ResourceId {
-  kind: ResourceIdKind;
+  kind: RequestableResourceKind;
   name: string;
   clusterName: string;
   subResourceName?: string;
diff --git a/web/packages/teleport/src/config.ts b/web/packages/teleport/src/config.ts
index b1e184d7d821d..a429bc7f60ef0 100644
--- a/web/packages/teleport/src/config.ts
+++ b/web/packages/teleport/src/config.ts
@@ -1270,7 +1270,7 @@ export interface UrlKubeResourcesParams {
   searchAsRoles?: 'yes' | '';
   kubeNamespace?: string;
   kubeCluster: string;
-  kind: KubeResourceKind;
+  kind: Omit<KubeResourceKind, '*'>;
 }
 
 export interface UrlDeployServiceIamConfigureScriptParams {
diff --git a/web/packages/teleterm/src/ui/AccessRequestCheckout/AccessRequestCheckout.tsx b/web/packages/teleterm/src/ui/AccessRequestCheckout/AccessRequestCheckout.tsx
index 44e81b59b3822..8e0904efbeee2 100644
--- a/web/packages/teleterm/src/ui/AccessRequestCheckout/AccessRequestCheckout.tsx
+++ b/web/packages/teleterm/src/ui/AccessRequestCheckout/AccessRequestCheckout.tsx
@@ -270,6 +270,11 @@ export function AccessRequestCheckout() {
             setPendingRequestTtl={setPendingRequestTtl}
             startTime={startTime}
             onStartTimeChange={onStartTimeChange}
+            // TODO: these are placeholders to satisy linters.
+            // There is a split PR that handles teleterm support
+            // that will be merged right after this one (once both are approved)
+            bulkToggleKubeResources={() => null}
+            fetchKubeNamespaces={() => null}
           />
         )}
       </Transition>
diff --git a/web/packages/teleterm/src/ui/DocumentAccessRequests/NewRequest/NewRequest.tsx b/web/packages/teleterm/src/ui/DocumentAccessRequests/NewRequest/NewRequest.tsx
index ba0b18fe7ad42..64bf86013b3b7 100644
--- a/web/packages/teleterm/src/ui/DocumentAccessRequests/NewRequest/NewRequest.tsx
+++ b/web/packages/teleterm/src/ui/DocumentAccessRequests/NewRequest/NewRequest.tsx
@@ -258,6 +258,7 @@ function toResourceMap(request: PendingAccessRequest): ResourceMap {
     db: {},
     app: {},
     saml_idp_service_provider: {},
+    namespace: {},
   };
   if (request.kind === 'role') {
     request.roles.forEach(role => {