diff --git a/web/packages/teleterm/src/ui/DocumentAccessRequests/NewRequest/NewRequest.tsx b/web/packages/teleterm/src/ui/DocumentAccessRequests/NewRequest/NewRequest.tsx
index 8cecd1388319a..39653a32f0b03 100644
--- a/web/packages/teleterm/src/ui/DocumentAccessRequests/NewRequest/NewRequest.tsx
+++ b/web/packages/teleterm/src/ui/DocumentAccessRequests/NewRequest/NewRequest.tsx
@@ -16,16 +16,13 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import styled from 'styled-components';
-import { Alert, Box, Link } from 'design';
+import { Link, Flex, Box } from 'design';
+import { Info } from 'design/Alert';
 
 import { ShowResources } from 'gen-proto-ts/teleport/lib/teleterm/v1/cluster_pb';
-import {
-  ResourceList,
-  ResourceMap,
-} from 'shared/components/AccessRequests/NewRequest';
 
-import { PendingAccessRequest } from 'teleterm/ui/services/workspacesService/accessRequestsService';
+import { useAsync } from 'shared/hooks/useAsync';
+import { Roles } from 'shared/components/AccessRequests/NewRequest';
 
 import { useWorkspaceContext } from 'teleterm/ui/Documents';
 import { useAppContext } from 'teleterm/ui/appContextProvider';
@@ -51,7 +48,6 @@ export function NewRequest() {
   const loggedInUser = rootCluster?.loggedInUser;
   const requestableRoles = loggedInUser?.requestableRoles || [];
   const addedResources = accessRequestsService.getPendingAccessRequest();
-  const requestStarted = accessRequestsService.getAddedItemsCount() > 0;
 
   function openClusterDocument() {
     const doc = documentsService.createClusterDocument({
@@ -64,27 +60,31 @@ export function NewRequest() {
   const doesUnifiedResourcesShowBothAccessibleAndRequestableResources =
     rootCluster?.showResources === ShowResources.REQUESTABLE;
 
+  const [addOrRemoveRoleAttempt, addOrRemoveRole] = useAsync((role: string) =>
+    accessRequestsService.addOrRemoveRole(role)
+  );
+
   return (
-    <Layout mx="auto" px={5} pt={3} height="100%">
-      <StyledMain>
-        <ResourceList
-          agents={[]}
-          selectedResource={'role'}
-          requestStarted={requestStarted}
-          customSort={undefined}
-          onLabelClick={() => {}}
-          addedResources={toResourceMap(addedResources)}
-          addOrRemoveResource={(kind, resourceId) => {
-            // We can only have roles here.
-            if (kind === 'role') {
-              accessRequestsService.addOrRemoveRole(resourceId);
-            }
-          }}
-          requestableRoles={requestableRoles}
-          disableRows={false}
+    <Flex
+      mx="auto"
+      flexDirection="column"
+      justifyContent="space-between"
+      p={3}
+      gap={3}
+      width="100%"
+      maxWidth="1248px"
+    >
+      <Box>
+        <Roles
+          requestable={requestableRoles}
+          requested={
+            addedResources.kind === 'role' ? addedResources.roles : new Set()
+          }
+          onToggleRole={role => void addOrRemoveRole(role)}
+          disabled={addOrRemoveRoleAttempt.status === 'processing'}
         />
-      </StyledMain>
-      <Alert kind="outline-info" mb={2}>
+      </Box>
+      <Info mb={0}>
         To request access to a resource, go to the{' '}
         {/*TODO: Improve ButtonLink to look more like a text, then use it instead of the Link. */}
         <Link
@@ -99,46 +99,7 @@ export function NewRequest() {
         {doesUnifiedResourcesShowBothAccessibleAndRequestableResources
           ? 'or find it in the search bar.'
           : 'and select Access Requests > Show requestable resources.'}
-      </Alert>
-    </Layout>
+      </Info>
+    </Flex>
   );
 }
-
-const Layout = styled(Box)`
-  flex-direction: column;
-  display: flex;
-  flex: 1;
-  max-width: 1248px;
-
-  &::after {
-    content: ' ';
-    padding-bottom: 24px;
-  }
-`;
-
-const StyledMain = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-`;
-
-function toResourceMap(request: PendingAccessRequest): ResourceMap {
-  const resourceMap: ResourceMap = {
-    user_group: {},
-    windows_desktop: {},
-    role: {},
-    kube_cluster: {},
-    node: {},
-    db: {},
-    app: {},
-    saml_idp_service_provider: {},
-    namespace: {},
-  };
-  if (request.kind === 'role') {
-    request.roles.forEach(role => {
-      resourceMap.role[role] = role;
-    });
-  }
-
-  return resourceMap;
-}