diff --git a/web/packages/teleport/src/Roles/RoleEditor/EditorHeader.tsx b/web/packages/teleport/src/Roles/RoleEditor/EditorHeader.tsx
index 2ee25880cedad..4eaaea9bc9e27 100644
--- a/web/packages/teleport/src/Roles/RoleEditor/EditorHeader.tsx
+++ b/web/packages/teleport/src/Roles/RoleEditor/EditorHeader.tsx
@@ -17,9 +17,10 @@
  */
 
 import React from 'react';
-import { Flex, ButtonText, H2, Indicator, Box } from 'design';
+import { Flex, H2, Indicator, Box, ButtonIcon } from 'design';
 import { HoverTooltip } from 'design/Tooltip';
-import { Trash } from 'design/Icon';
+
+import { Cross, Trash } from 'design/Icon';
 
 import useTeleport from 'teleport/useTeleport';
 import { Role } from 'teleport/services/resources';
@@ -35,6 +36,7 @@ export const EditorHeader = ({
   isProcessing,
   standardEditorId,
   yamlEditorId,
+  onClose,
 }: {
   role?: Role;
   onDelete(): void;
@@ -43,6 +45,7 @@ export const EditorHeader = ({
   isProcessing: boolean;
   standardEditorId: string;
   yamlEditorId: string;
+  onClose(): void;
 }) => {
   const ctx = useTeleport();
   const isCreating = !role;
@@ -51,6 +54,9 @@ export const EditorHeader = ({
 
   return (
     <Flex alignItems="center" mb={3} gap={2}>
+      <ButtonIcon aria-label="Close" onClick={onClose}>
+        <Cross size="small" />
+      </ButtonIcon>
       <Box flex="1">
         <H2>
           {isCreating
@@ -77,14 +83,14 @@ export const EditorHeader = ({
               : 'You do not have access to delete a role'
           }
         >
-          <ButtonText
+          <ButtonIcon
             onClick={onDelete}
             disabled={!hasDeleteAccess}
             data-testid="delete"
             p={1}
           >
             <Trash size="medium" />
-          </ButtonText>
+          </ButtonIcon>
         </HoverTooltip>
       )}
     </Flex>
diff --git a/web/packages/teleport/src/Roles/RoleEditor/RoleEditor.story.tsx b/web/packages/teleport/src/Roles/RoleEditor/RoleEditor.story.tsx
index abd6ed5393f69..f90bf567450aa 100644
--- a/web/packages/teleport/src/Roles/RoleEditor/RoleEditor.story.tsx
+++ b/web/packages/teleport/src/Roles/RoleEditor/RoleEditor.story.tsx
@@ -16,21 +16,23 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { StoryObj } from '@storybook/react';
 import { delay, http, HttpResponse } from 'msw';
 import { Info } from 'design/Alert';
 import Flex from 'design/Flex';
+import { ButtonPrimary } from 'design/Button';
 
 import { createTeleportContext } from 'teleport/mocks/contexts';
 import TeleportContextProvider from 'teleport/TeleportContextProvider';
 import cfg from 'teleport/config';
 import { YamlSupportedResourceKind } from 'teleport/services/yaml/types';
-
 import { Access } from 'teleport/services/user';
+import useResources from 'teleport/components/useResources';
 
 import { withDefaults } from './withDefaults';
 import { RoleEditor } from './RoleEditor';
+import { RoleEditorDialog } from './RoleEditorDialog';
 
 export default {
   title: 'Teleport/Roles/Role Editor',
@@ -264,6 +266,30 @@ export const noAccess: StoryObj = {
   },
 };
 
+export const Dialog: StoryObj = {
+  render() {
+    const [open, setOpen] = useState(false);
+    const resources = useResources([], {});
+    return (
+      <>
+        <ButtonPrimary onClick={() => setOpen(true)}>Open</ButtonPrimary>
+        <RoleEditorDialog
+          resources={resources}
+          open={open}
+          onClose={() => setOpen(false)}
+          onSave={async () => setOpen(false)}
+          onDelete={async () => setOpen(false)}
+        />
+      </>
+    );
+  },
+  parameters: {
+    msw: {
+      handlers: [yamlifyHandler, parseHandler],
+    },
+  },
+};
+
 const dummyRoleYaml = `kind: role
 metadata:
   name: dummy-role
diff --git a/web/packages/teleport/src/Roles/RoleEditor/RoleEditor.tsx b/web/packages/teleport/src/Roles/RoleEditor/RoleEditor.tsx
index b109c82e8b87d..77945701e8c47 100644
--- a/web/packages/teleport/src/Roles/RoleEditor/RoleEditor.tsx
+++ b/web/packages/teleport/src/Roles/RoleEditor/RoleEditor.tsx
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Alert, Flex } from 'design';
+import { Alert, Box, Flex } from 'design';
 import React, { useId, useState } from 'react';
 import { useAsync } from 'shared/hooks/useAsync';
 
@@ -27,6 +27,8 @@ import { yamlService } from 'teleport/services/yaml';
 import { YamlSupportedResourceKind } from 'teleport/services/yaml/types';
 import { CaptureEvent, userEventService } from 'teleport/services/userEvent';
 
+import DeleteRole from '../DeleteRole';
+
 import {
   roleEditorModelToRole,
   newRole,
@@ -47,7 +49,7 @@ export type RoleEditorProps = {
   originalRole?: RoleWithYaml;
   onCancel?(): void;
   onSave?(r: Partial<RoleWithYaml>): Promise<void>;
-  onDelete?(): void;
+  onDelete?(): Promise<void>;
 };
 
 /**
@@ -88,6 +90,8 @@ export const RoleEditor = ({
     standardModel.roleModel.requiresReset ? EditorTab.Yaml : EditorTab.Standard
   );
 
+  const [deleting, setDeleting] = useState(false);
+
   // Converts YAML representation to a standard editor model.
   const [parseAttempt, parseYaml] = useAsync(async () => {
     const parsedRole = await yamlService.parse<Role>(
@@ -181,32 +185,35 @@ export const RoleEditor = ({
     <Validation>
       {({ validator }) => (
         <Flex flexDirection="column" flex="1">
-          <EditorHeader
-            role={originalRole?.object}
-            onDelete={onDelete}
-            selectedEditorTab={selectedEditorTab}
-            onEditorTabChange={index => onTabChange(index, validator)}
-            isProcessing={isProcessing}
-            standardEditorId={standardEditorId}
-            yamlEditorId={yamlEditorId}
-          />
-          {saveAttempt.status === 'error' && (
-            <Alert mt={3} dismissible>
-              {saveAttempt.statusText}
-            </Alert>
-          )}
-          {parseAttempt.status === 'error' && (
-            <Alert mt={3} dismissible>
-              {parseAttempt.statusText}
-            </Alert>
-          )}
-          {yamlifyAttempt.status === 'error' && (
-            <Alert mt={3} dismissible>
-              {yamlifyAttempt.statusText}
-            </Alert>
-          )}
+          <Box mt={3} mx={3}>
+            <EditorHeader
+              role={originalRole?.object}
+              onDelete={() => setDeleting(true)}
+              selectedEditorTab={selectedEditorTab}
+              onEditorTabChange={index => onTabChange(index, validator)}
+              isProcessing={isProcessing}
+              standardEditorId={standardEditorId}
+              yamlEditorId={yamlEditorId}
+              onClose={onCancel}
+            />
+            {saveAttempt.status === 'error' && (
+              <Alert mt={3} dismissible>
+                {saveAttempt.statusText}
+              </Alert>
+            )}
+            {parseAttempt.status === 'error' && (
+              <Alert mt={3} dismissible>
+                {parseAttempt.statusText}
+              </Alert>
+            )}
+            {yamlifyAttempt.status === 'error' && (
+              <Alert mt={3} dismissible>
+                {yamlifyAttempt.statusText}
+              </Alert>
+            )}
+          </Box>
           {selectedEditorTab === EditorTab.Standard && (
-            <div id={standardEditorId}>
+            <Flex flexDirection="column" flex="1" id={standardEditorId}>
               <StandardEditor
                 originalRole={originalRole}
                 onSave={object => handleSave({ object })}
@@ -215,7 +222,7 @@ export const RoleEditor = ({
                 isProcessing={isProcessing}
                 onChange={setStandardModel}
               />
-            </div>
+            </Flex>
           )}
           {selectedEditorTab === EditorTab.Yaml && (
             <Flex flexDirection="column" flex="1" id={yamlEditorId}>
@@ -229,6 +236,13 @@ export const RoleEditor = ({
               />
             </Flex>
           )}
+          {deleting && (
+            <DeleteRole
+              name={originalRole.object.metadata.name}
+              onClose={() => setDeleting(false)}
+              onDelete={onDelete}
+            />
+          )}
         </Flex>
       )}
     </Validation>
diff --git a/web/packages/teleport/src/Roles/RoleEditor/RoleEditorAdapter.tsx b/web/packages/teleport/src/Roles/RoleEditor/RoleEditorAdapter.tsx
new file mode 100644
index 0000000000000..5951066f0355e
--- /dev/null
+++ b/web/packages/teleport/src/Roles/RoleEditor/RoleEditorAdapter.tsx
@@ -0,0 +1,229 @@
+/**
+ * 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 { Danger } from 'design/Alert';
+import Flex from 'design/Flex';
+import { Indicator } from 'design/Indicator';
+import React, { useEffect } from 'react';
+import { useAsync } from 'shared/hooks/useAsync';
+import { useTheme } from 'styled-components';
+import { H1 } from 'design/Text';
+import Box from 'design/Box';
+import { H3, P, P3 } from 'design/Text/Text';
+import { ButtonSecondary } from 'design/Button';
+import Image from 'design/Image';
+
+import { StepComponentProps, StepSlider } from 'design/StepSlider';
+
+import { ChevronLeft, ChevronRight } from 'design/Icon';
+
+import { State as ResourcesState } from 'teleport/components/useResources';
+import { Role, RoleWithYaml } from 'teleport/services/resources';
+import { yamlService } from 'teleport/services/yaml';
+import { YamlSupportedResourceKind } from 'teleport/services/yaml/types';
+import { ButtonLockedFeature } from 'teleport/components/ButtonLockedFeature';
+
+import { RoleEditor } from './RoleEditor';
+import tagpromo from './tagpromo.png';
+
+/**
+ * This component is responsible for converting from the `Resource`
+ * representation of a role to a more accurate `RoleWithYaml` structure. The
+ * conversion is asynchronous and it's performed on the server side.
+ */
+export function RoleEditorAdapter({
+  resources,
+  onSave,
+  onDelete,
+  onCancel,
+}: {
+  resources: ResourcesState;
+  onSave: (role: Partial<RoleWithYaml>) => Promise<void>;
+  onDelete: () => Promise<void>;
+  onCancel: () => void;
+}) {
+  const theme = useTheme();
+  const [convertAttempt, convertToRole] = useAsync(
+    async (yaml: string): Promise<RoleWithYaml | null> => {
+      if (resources.status === 'creating' || !resources.item) {
+        return null;
+      }
+      return {
+        yaml,
+        object: await yamlService.parse<Role>(YamlSupportedResourceKind.Role, {
+          yaml,
+        }),
+      };
+    }
+  );
+
+  const originalContent = resources.item?.content ?? '';
+  useEffect(() => {
+    convertToRole(originalContent);
+  }, [originalContent]);
+
+  return (
+    <Flex flex="1">
+      <Flex
+        flexDirection="column"
+        borderLeft={1}
+        borderColor={theme.colors.interactive.tonal.neutral[0]}
+        backgroundColor={theme.colors.levels.surface}
+        width="700px"
+      >
+        {convertAttempt.status === 'processing' && (
+          <Flex
+            flexDirection="column"
+            alignItems="center"
+            justifyContent="center"
+            flex="1"
+          >
+            <Indicator />
+          </Flex>
+        )}
+        {convertAttempt.status === 'error' && (
+          <Danger>{convertAttempt.statusText}</Danger>
+        )}
+        {convertAttempt.status === 'success' && (
+          <RoleEditor
+            originalRole={convertAttempt.data}
+            onCancel={onCancel}
+            onSave={onSave}
+            onDelete={onDelete}
+          />
+        )}
+      </Flex>
+      <Flex flex="1" alignItems="center" justifyContent="center" m={3}>
+        {/* Same width as promo image + border */}
+        <Box maxWidth={promoImageWidth + 2 * 2} minWidth={300}>
+          <H1 mb={2}>Teleport Policy</H1>
+          <Flex mb={4} gap={4} flexWrap="wrap" justifyContent="space-between">
+            <Box flex="1" minWidth="30ch">
+              <P>
+                Teleport Policy will visualize resource access paths as you
+                create and edit roles so you can always see what you are
+                granting before you push a role into production.
+              </P>
+            </Box>
+            <Flex flex="0 0 auto" alignItems="start">
+              <ButtonLockedFeature noIcon py={0} width={undefined}>
+                Contact Sales
+              </ButtonLockedFeature>
+              <ButtonSecondary
+                as="a"
+                href="https://goteleport.com/platform/policy/"
+                target="_blank"
+                ml={2}
+              >
+                Learn More
+              </ButtonSecondary>
+            </Flex>
+          </Flex>
+          <Flex
+            flexDirection="column"
+            bg={theme.colors.levels.surface}
+            borderRadius={3}
+          >
+            <Box
+              border={2}
+              borderRadius={3}
+              borderColor={theme.colors.interactive.tonal.neutral[0]}
+            >
+              <Image src={tagpromo} width="100%" />
+            </Box>
+            <StepSlider flows={promoFlows} currFlow="default" />
+          </Flex>
+        </Box>
+      </Flex>
+    </Flex>
+  );
+}
+
+const promoImageWidth = 782;
+
+const promoFlows = {
+  default: [PromoPanel1, PromoPanel2],
+};
+
+function PromoPanel1(props: StepComponentProps) {
+  return (
+    <PromoPanel
+      {...props}
+      heading="Visualize access paths granted by your roles"
+      content={
+        <>
+          See what you’re granting before pushing to prod. Teleport Policy will
+          show resource access paths granted by your role before you save
+          changes.
+        </>
+      }
+    />
+  );
+}
+
+function PromoPanel2(props: StepComponentProps) {
+  return (
+    <PromoPanel
+      {...props}
+      heading="Visualize the diff in permissions as you edit roles"
+      content={
+        <>
+          Prevent mistakes. Teleport Policy shows you what access is removed and
+          what is added as you make edits to a role—all before you save your
+          changes.
+        </>
+      }
+    />
+  );
+}
+
+function PromoPanel({
+  prev,
+  next,
+  refCallback,
+  stepIndex,
+  flowLength,
+  heading,
+  content,
+}: StepComponentProps & {
+  heading: React.ReactNode;
+  content: React.ReactNode;
+}) {
+  return (
+    <Flex m={4} gap={4} ref={refCallback}>
+      <Box flex="1">
+        <H3>{heading}</H3>
+        <Box flex="1">
+          <P3>{content}</P3>
+        </Box>
+      </Box>
+      <Flex gap={2} alignItems="center">
+        <ButtonSecondary size="small" width="24px" disabled={stepIndex <= 0}>
+          <ChevronLeft size="small" onClick={prev} />
+        </ButtonSecondary>
+        <ButtonSecondary
+          size="small"
+          width="24px"
+          disabled={stepIndex >= flowLength - 1}
+        >
+          <ChevronRight size="small" onClick={next} />
+        </ButtonSecondary>
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/web/packages/teleport/src/Roles/RoleEditor/RoleEditorDialog.tsx b/web/packages/teleport/src/Roles/RoleEditor/RoleEditorDialog.tsx
new file mode 100644
index 0000000000000..f5c6370820363
--- /dev/null
+++ b/web/packages/teleport/src/Roles/RoleEditor/RoleEditorDialog.tsx
@@ -0,0 +1,128 @@
+/**
+ * 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 Dialog from 'design/Dialog';
+import { forwardRef, useRef } from 'react';
+import { Transition, TransitionStatus } from 'react-transition-group';
+import { css } from 'styled-components';
+
+import { State as ResourcesState } from 'teleport/components/useResources';
+import { RoleWithYaml } from 'teleport/services/resources';
+
+import { RoleEditorAdapter } from './RoleEditorAdapter';
+
+/**
+ * Renders a full-screen dialog with a slide-in effect.
+ *
+ * TODO(bl-nero): This component has been copied from `ReviewRequests` and
+ * `NotificationRoutingRulesDialog`. It probably should become reusable.
+ */
+export function RoleEditorDialog({
+  open,
+  onClose,
+  resources,
+  onSave,
+  onDelete,
+}: {
+  open: boolean;
+  onClose(): void;
+  resources: ResourcesState;
+  onSave(role: Partial<RoleWithYaml>): Promise<void>;
+  onDelete(): Promise<void>;
+}) {
+  const transitionRef = useRef<HTMLDivElement>();
+  return (
+    <Transition
+      in={open}
+      nodeRef={transitionRef}
+      timeout={300}
+      mountOnEnter
+      unmountOnExit
+    >
+      {transitionState => (
+        <DialogInternal
+          ref={transitionRef}
+          onClose={onClose}
+          transitionState={transitionState}
+          resources={resources}
+          onSave={onSave}
+          onDelete={onDelete}
+        />
+      )}
+    </Transition>
+  );
+}
+
+const DialogInternal = forwardRef<
+  HTMLDivElement,
+  {
+    onClose(): void;
+    transitionState: TransitionStatus;
+    resources: ResourcesState;
+    onSave(role: Partial<RoleWithYaml>): Promise<void>;
+    onDelete(): Promise<void>;
+  }
+>(({ onClose, transitionState, resources, onSave, onDelete }, ref) => {
+  return (
+    <Dialog
+      dialogCss={() => fullScreenDialogCss()}
+      disableEscapeKeyDown={false}
+      open={true}
+      ref={ref}
+      className={transitionState}
+    >
+      <RoleEditorAdapter
+        resources={resources}
+        onSave={onSave}
+        onDelete={onDelete}
+        onCancel={onClose}
+      />
+    </Dialog>
+  );
+});
+
+const fullScreenDialogCss = () => css`
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  right: 0;
+  border-radius: 0;
+  overflow-y: hidden;
+  flex-direction: row;
+  background: ${props => props.theme.colors.levels.sunken};
+  transition: width 300ms ease-out;
+
+  &.entering {
+    right: -100%;
+  }
+
+  &.entered {
+    right: 0px;
+    transition: right 300ms ease-out;
+  }
+
+  &.exiting {
+    right: -100%;
+    transition: right 300ms ease-out;
+  }
+
+  &.exited {
+    right: -100%;
+  }
+`;
diff --git a/web/packages/teleport/src/Roles/RoleEditor/Shared.tsx b/web/packages/teleport/src/Roles/RoleEditor/Shared.tsx
index 3652e87a537ca..88899621defb8 100644
--- a/web/packages/teleport/src/Roles/RoleEditor/Shared.tsx
+++ b/web/packages/teleport/src/Roles/RoleEditor/Shared.tsx
@@ -18,6 +18,7 @@
 
 import { Box, ButtonPrimary, ButtonSecondary, Flex } from 'design';
 import { HoverTooltip } from 'design/Tooltip';
+import { useTheme } from 'styled-components';
 
 import useTeleport from 'teleport/useTeleport';
 
@@ -34,6 +35,7 @@ export const EditorSaveCancelButton = ({
 }) => {
   const ctx = useTeleport();
   const roleAccess = ctx.storeUser.getRoleAccess();
+  const theme = useTheme();
 
   let hoverTooltipContent = '';
   if (isEditing && !roleAccess.edit) {
@@ -43,7 +45,12 @@ export const EditorSaveCancelButton = ({
   }
 
   return (
-    <Flex gap={2} mt={3}>
+    <Flex
+      gap={2}
+      p={3}
+      borderTop={1}
+      borderColor={theme.colors.interactive.tonal.neutral[0]}
+    >
       <Box width="50%">
         <HoverTooltip tipContent={hoverTooltipContent}>
           <ButtonPrimary
diff --git a/web/packages/teleport/src/Roles/RoleEditor/StandardEditor.tsx b/web/packages/teleport/src/Roles/RoleEditor/StandardEditor.tsx
index 332283e0a57d4..46888d141fc7a 100644
--- a/web/packages/teleport/src/Roles/RoleEditor/StandardEditor.tsx
+++ b/web/packages/teleport/src/Roles/RoleEditor/StandardEditor.tsx
@@ -218,13 +218,15 @@ export const StandardEditor = ({
   return (
     <>
       {roleModel.requiresReset && (
-        <RequiresResetToStandard reset={resetForStandardEditor} />
+        <Box mx={3}>
+          <RequiresResetToStandard reset={resetForStandardEditor} />
+        </Box>
       )}
       <EditorWrapper
         mute={standardEditorModel.roleModel.requiresReset}
         data-testid="standard-editor"
       >
-        <Box mb={3}>
+        <Box mb={3} mx={3}>
           <SlideTabs
             appearance="round"
             hideStatusIconOnActiveTab
@@ -268,97 +270,108 @@ export const StandardEditor = ({
             onChange={setCurrentTab}
           />
         </Box>
-        <Box
-          id={overviewTabId}
-          style={{
-            display: currentTab === StandardEditorTab.Overview ? '' : 'none',
-          }}
-        >
-          <MetadataSection
-            value={roleModel.metadata}
-            isProcessing={isProcessing}
-            validation={validation.metadata}
-            onChange={metadata => handleChange({ ...roleModel, metadata })}
-          />
-        </Box>
-        <Box
-          id={resourcesTabId}
-          style={{
-            display: currentTab === StandardEditorTab.Resources ? '' : 'none',
-          }}
+        <Flex
+          flex="1 1 0"
+          flexDirection="column"
+          px={3}
+          pb={3}
+          css={`
+            overflow-y: auto;
+          `}
         >
-          <Flex flexDirection="column" gap={3} my={2}>
-            {roleModel.accessSpecs.map((spec, i) => {
-              const validationResult = validation.accessSpecs[i];
-              return (
-                <AccessSpecSection
-                  key={spec.kind}
-                  value={spec}
-                  isProcessing={isProcessing}
-                  validation={validationResult}
-                  onChange={value => setAccessSpec(value)}
-                  onRemove={() => removeAccessSpec(spec.kind)}
-                />
-              );
-            })}
-            <Box>
-              <MenuButton
-                menuProps={{
-                  transformOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'right',
-                  },
-                  anchorOrigin: {
-                    vertical: 'top',
-                    horizontal: 'right',
-                  },
-                }}
-                buttonText={
-                  <>
-                    <Icon.Plus size="small" mr={2} />
-                    Add New Specifications
-                  </>
-                }
-                buttonProps={{
-                  size: 'medium',
-                  fill: 'filled',
-                  disabled: isProcessing || allowedSpecKinds.length === 0,
-                }}
-              >
-                {allowedSpecKinds.map(kind => (
-                  <MenuItem key={kind} onClick={() => addAccessSpec(kind)}>
-                    {specSections[kind].title}
-                  </MenuItem>
-                ))}
-              </MenuButton>
-            </Box>
-          </Flex>
-        </Box>
-        <Box
-          id={accessRulesTabId}
-          style={{
-            display: currentTab === StandardEditorTab.AccessRules ? '' : 'none',
-          }}
-        >
-          <AccessRules
-            isProcessing={isProcessing}
-            value={roleModel.rules}
-            onChange={setRules}
-            validation={validation.rules}
-          />
-        </Box>
-        <Box
-          id={optionsTabId}
-          style={{
-            display: currentTab === StandardEditorTab.Options ? '' : 'none',
-          }}
-        >
-          <Options
-            isProcessing={isProcessing}
-            value={roleModel.options}
-            onChange={setOptions}
-          />
-        </Box>
+          <Box
+            id={overviewTabId}
+            style={{
+              display: currentTab === StandardEditorTab.Overview ? '' : 'none',
+            }}
+          >
+            <MetadataSection
+              value={roleModel.metadata}
+              isProcessing={isProcessing}
+              validation={validation.metadata}
+              onChange={metadata => handleChange({ ...roleModel, metadata })}
+            />
+          </Box>
+          <Box
+            id={resourcesTabId}
+            style={{
+              display: currentTab === StandardEditorTab.Resources ? '' : 'none',
+            }}
+          >
+            <Flex flexDirection="column" gap={3} my={2}>
+              {roleModel.accessSpecs.map((spec, i) => {
+                const validationResult = validation.accessSpecs[i];
+                return (
+                  <AccessSpecSection
+                    key={spec.kind}
+                    value={spec}
+                    isProcessing={isProcessing}
+                    validation={validationResult}
+                    onChange={value => setAccessSpec(value)}
+                    onRemove={() => removeAccessSpec(spec.kind)}
+                  />
+                );
+              })}
+              <Box>
+                <MenuButton
+                  menuProps={{
+                    transformOrigin: {
+                      vertical: 'bottom',
+                      horizontal: 'right',
+                    },
+                    anchorOrigin: {
+                      vertical: 'top',
+                      horizontal: 'right',
+                    },
+                  }}
+                  buttonText={
+                    <>
+                      <Icon.Plus size="small" mr={2} />
+                      Add New Specifications
+                    </>
+                  }
+                  buttonProps={{
+                    size: 'medium',
+                    fill: 'filled',
+                    disabled: isProcessing || allowedSpecKinds.length === 0,
+                  }}
+                >
+                  {allowedSpecKinds.map(kind => (
+                    <MenuItem key={kind} onClick={() => addAccessSpec(kind)}>
+                      {specSections[kind].title}
+                    </MenuItem>
+                  ))}
+                </MenuButton>
+              </Box>
+            </Flex>
+          </Box>
+          <Box
+            id={accessRulesTabId}
+            style={{
+              display:
+                currentTab === StandardEditorTab.AccessRules ? '' : 'none',
+            }}
+          >
+            <AccessRules
+              isProcessing={isProcessing}
+              value={roleModel.rules}
+              onChange={setRules}
+              validation={validation.rules}
+            />
+          </Box>
+          <Box
+            id={optionsTabId}
+            style={{
+              display: currentTab === StandardEditorTab.Options ? '' : 'none',
+            }}
+          >
+            <Options
+              isProcessing={isProcessing}
+              value={roleModel.options}
+              onChange={setOptions}
+            />
+          </Box>
+        </Flex>
       </EditorWrapper>
       <EditorSaveCancelButton
         onSave={() => handleSave()}
@@ -1175,7 +1188,9 @@ const OptionLabel = styled(LabelInput)`
   ${props => props.theme.typography.body2}
 `;
 
-export const EditorWrapper = styled(Box)<{ mute?: boolean }>`
+export const EditorWrapper = styled(Flex)<{ mute?: boolean }>`
+  flex-direction: column;
+  flex: 1;
   opacity: ${p => (p.mute ? 0.4 : 1)};
   pointer-events: ${p => (p.mute ? 'none' : '')};
 `;
diff --git a/web/packages/teleport/src/Roles/RoleEditor/YamlEditor.tsx b/web/packages/teleport/src/Roles/RoleEditor/YamlEditor.tsx
index df8be5b3925db..5f58d7826f2bb 100644
--- a/web/packages/teleport/src/Roles/RoleEditor/YamlEditor.tsx
+++ b/web/packages/teleport/src/Roles/RoleEditor/YamlEditor.tsx
@@ -55,7 +55,7 @@ export const YamlEditor = ({
 
   return (
     <Flex flexDirection="column" flex="1" data-testid="yaml-editor">
-      <Flex flex="1" data-testid="text-editor-container">
+      <Flex flex="1" px={3} data-testid="text-editor-container">
         <TextEditor
           readOnly={isProcessing}
           data={[{ content: yamlEditorModel.content, type: 'yaml' }]}
diff --git a/web/packages/teleport/src/Roles/RoleEditor/tagpromo.png b/web/packages/teleport/src/Roles/RoleEditor/tagpromo.png
new file mode 100644
index 0000000000000..0436ab9112692
Binary files /dev/null and b/web/packages/teleport/src/Roles/RoleEditor/tagpromo.png differ
diff --git a/web/packages/teleport/src/Roles/Roles.tsx b/web/packages/teleport/src/Roles/Roles.tsx
index 9f98116131706..db545667d4321 100644
--- a/web/packages/teleport/src/Roles/Roles.tsx
+++ b/web/packages/teleport/src/Roles/Roles.tsx
@@ -17,11 +17,8 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import { Alert, Box, Button, Flex, H3, Indicator, Link } from 'design';
+import { Alert, Box, Button, Flex, H3, Link } from 'design';
 import { P } from 'design/Text/Text';
-import { useAsync } from 'shared/hooks/useAsync';
-import { Danger } from 'design/Alert';
-import { useTheme } from 'styled-components';
 import { MissingPermissionsTooltip } from 'shared/components/MissingPermissionsTooltip';
 import { HoverTooltip } from 'design/Tooltip';
 
@@ -35,18 +32,14 @@ import useTeleport from 'teleport/useTeleport';
 import { CaptureEvent, userEventService } from 'teleport/services/userEvent';
 import { useServerSidePagination } from 'teleport/components/hooks';
 import { storageService } from 'teleport/services/storageService';
-import { RoleWithYaml, Role, RoleResource } from 'teleport/services/resources';
-import useResources, {
-  State as ResourcesState,
-} from 'teleport/components/useResources';
-import { yamlService } from 'teleport/services/yaml';
-import { YamlSupportedResourceKind } from 'teleport/services/yaml/types';
+import { RoleWithYaml, RoleResource } from 'teleport/services/resources';
+import useResources from 'teleport/components/useResources';
 
 import { RoleList } from './RoleList';
 import DeleteRole from './DeleteRole';
 import { useRoles, State } from './useRoles';
-import { RoleEditor } from './RoleEditor';
 import templates from './templates';
+import { RoleEditorDialog } from './RoleEditor/RoleEditorDialog';
 
 export function RolesContainer() {
   const ctx = useTeleport();
@@ -135,13 +128,9 @@ export function Roles(props: State) {
       ...p,
       agents: p.agents.filter(r => r.id !== resources.item.id),
     }));
-  }
-
-  function handleRoleEditorDelete() {
-    const id = resources.item?.id;
-    if (id) {
-      resources.remove(id);
-    }
+    // The new editor doesn't use `resources` to delete, so we need to close it
+    // by resetting the state here.
+    resources.disregard();
   }
 
   const canCreate = rolesAcl.create;
@@ -195,41 +184,43 @@ export function Roles(props: State) {
           />
         </Box>
 
-        {/* New editor or descriptive text, depending on state. */}
-        {useNewRoleEditor &&
-        (resources.status === 'creating' || resources.status === 'editing') ? (
-          <RoleEditorAdapter
+        {/* New editor. */}
+        {useNewRoleEditor && (
+          <RoleEditorDialog
+            open={
+              resources.status === 'creating' || resources.status === 'editing'
+            }
+            onClose={resources.disregard}
             resources={resources}
             onSave={handleSave}
-            onDelete={handleRoleEditorDelete}
+            onDelete={handleDelete}
           />
-        ) : (
-          <Box
-            ml="auto"
-            width="240px"
-            color="text.main"
-            style={{ flexShrink: 0 }}
-          >
-            <H3 mb={3}>Role-based access control</H3>
-            <P mb={3}>
-              Teleport Role-based access control (RBAC) provides fine-grained
-              control over who can access resources and in which contexts. A
-              Teleport role can be assigned automatically based on user identity
-              when used with single sign-on (SSO).
-            </P>
-            <P>
-              Learn more in{' '}
-              <Link
-                color="text.main"
-                target="_blank"
-                href="https://goteleport.com/docs/access-controls/guides/role-templates/"
-              >
-                the cluster management (RBAC)
-              </Link>{' '}
-              section of online documentation.
-            </P>
-          </Box>
         )}
+        <Box
+          ml="auto"
+          width="240px"
+          color="text.main"
+          style={{ flexShrink: 0 }}
+        >
+          <H3 mb={3}>Role-based access control</H3>
+          <P mb={3}>
+            Teleport Role-based access control (RBAC) provides fine-grained
+            control over who can access resources and in which contexts. A
+            Teleport role can be assigned automatically based on user identity
+            when used with single sign-on (SSO).
+          </P>
+          <P>
+            Learn more in{' '}
+            <Link
+              color="text.main"
+              target="_blank"
+              href="https://goteleport.com/docs/access-controls/guides/role-templates/"
+            >
+              the cluster management (RBAC)
+            </Link>{' '}
+            section of online documentation.
+          </P>
+        </Box>
       </Flex>
 
       {/* Old editor. */}
@@ -259,73 +250,6 @@ export function Roles(props: State) {
   );
 }
 
-/**
- * This component is responsible for converting from the `Resource`
- * representation of a role to a more accurate `RoleWithYaml` structure. The
- * conversion is asynchronous and it's performed on the server side.
- */
-function RoleEditorAdapter({
-  resources,
-  onSave,
-  onDelete,
-}: {
-  resources: ResourcesState;
-  onSave: (role: Partial<RoleWithYaml>) => Promise<void>;
-  onDelete: () => void;
-}) {
-  const theme = useTheme();
-  const [convertAttempt, convertToRole] = useAsync(
-    async (yaml: string): Promise<RoleWithYaml | null> => {
-      if (resources.status === 'creating' || !resources.item) {
-        return null;
-      }
-      return {
-        yaml,
-        object: await yamlService.parse<Role>(YamlSupportedResourceKind.Role, {
-          yaml,
-        }),
-      };
-    }
-  );
-
-  const originalContent = resources.item?.content ?? '';
-  useEffect(() => {
-    convertToRole(originalContent);
-  }, [originalContent]);
-
-  return (
-    <Flex
-      flexDirection="column"
-      p={4}
-      borderLeft={1}
-      borderColor={theme.colors.interactive.tonal.neutral[0]}
-      width="700px"
-    >
-      {convertAttempt.status === 'processing' && (
-        <Flex
-          flexDirection="column"
-          alignItems="center"
-          justifyContent="center"
-          flex="1"
-        >
-          <Indicator />
-        </Flex>
-      )}
-      {convertAttempt.status === 'error' && (
-        <Danger>{convertAttempt.statusText}</Danger>
-      )}
-      {convertAttempt.status === 'success' && (
-        <RoleEditor
-          originalRole={convertAttempt.data}
-          onCancel={resources.disregard}
-          onSave={onSave}
-          onDelete={onDelete}
-        />
-      )}
-    </Flex>
-  );
-}
-
 function Directions() {
   return (
     <>