diff --git a/lib/web/integrations.go b/lib/web/integrations.go
index 89a550b91b515..2bc3af9ea2e04 100644
--- a/lib/web/integrations.go
+++ b/lib/web/integrations.go
@@ -133,7 +133,7 @@ func (h *Handler) integrationsDelete(w http.ResponseWriter, r *http.Request, p h
 		return nil, trace.Wrap(err)
 	}
 
-	return nil, nil
+	return OK(), nil
 }
 
 // integrationsGet returns an Integration based on its name
diff --git a/web/packages/design/src/SVGIcon/AWS.tsx b/web/packages/design/src/SVGIcon/AWS.tsx
new file mode 100644
index 0000000000000..4a175a96bc682
--- /dev/null
+++ b/web/packages/design/src/SVGIcon/AWS.tsx
@@ -0,0 +1,48 @@
+/*
+Copyright 2023 Gravitational, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import type { SVGIconProps } from './common';
+
+export function AWSIcon({ size = 24, fill = 'white' }: SVGIconProps) {
+  return (
+    <svg
+      viewBox="0 0 304 182"
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill={fill}
+    >
+      <path
+        fill="white"
+        d="M86.4 66.4c0 3.7.4 6.7 1.1 8.9.8 2.2 1.8 4.6 3.2 7.2.5.8.7 1.6.7 2.3 0 1-.6 2-1.9 3L83.2 92c-.9.6-1.8.9-2.6.9-1 0-2-.5-3-1.4-1.4-1.5-2.6-3.1-3.6-4.7-1-1.7-2-3.6-3.1-5.9-7.8 9.2-17.6 13.8-29.4 13.8-8.4 0-15.1-2.4-20-7.2-4.9-4.8-7.4-11.2-7.4-19.2 0-8.5 3-15.4 9.1-20.6 6.1-5.2 14.2-7.8 24.5-7.8 3.4 0 6.9.3 10.6.8 3.7.5 7.5 1.3 11.5 2.2v-7.3c0-7.6-1.6-12.9-4.7-16-3.2-3.1-8.6-4.6-16.3-4.6-3.5 0-7.1.4-10.8 1.3-3.7.9-7.3 2-10.8 3.4-1.6.7-2.8 1.1-3.5 1.3-.7.2-1.2.3-1.6.3-1.4 0-2.1-1-2.1-3.1v-4.9c0-1.6.2-2.8.7-3.5.5-.7 1.4-1.4 2.8-2.1 3.5-1.8 7.7-3.3 12.6-4.5C41 1.9 46.2 1.3 51.7 1.3c11.9 0 20.6 2.7 26.2 8.1 5.5 5.4 8.3 13.6 8.3 24.6v32.4zM45.8 81.6c3.3 0 6.7-.6 10.3-1.8 3.6-1.2 6.8-3.4 9.5-6.4 1.6-1.9 2.8-4 3.4-6.4.6-2.4 1-5.3 1-8.7v-4.2c-2.9-.7-6-1.3-9.2-1.7-3.2-.4-6.3-.6-9.4-.6-6.7 0-11.6 1.3-14.9 4-3.3 2.7-4.9 6.5-4.9 11.5 0 4.7 1.2 8.2 3.7 10.6 2.4 2.5 5.9 3.7 10.5 3.7zm80.3 10.8c-1.8 0-3-.3-3.8-1-.8-.6-1.5-2-2.1-3.9L96.7 10.2c-.6-2-.9-3.3-.9-4 0-1.6.8-2.5 2.4-2.5h9.8c1.9 0 3.2.3 3.9 1 .8.6 1.4 2 2 3.9l16.8 66.2 15.6-66.2c.5-2 1.1-3.3 1.9-3.9.8-.6 2.2-1 4-1h8c1.9 0 3.2.3 4 1 .8.6 1.5 2 1.9 3.9l15.8 67 17.3-67c.6-2 1.3-3.3 2-3.9.8-.6 2.1-1 3.9-1h9.3c1.6 0 2.5.8 2.5 2.5 0 .5-.1 1-.2 1.6-.1.6-.3 1.4-.7 2.5l-24.1 77.3c-.6 2-1.3 3.3-2.1 3.9-.8.6-2.1 1-3.8 1h-8.6c-1.9 0-3.2-.3-4-1-.8-.7-1.5-2-1.9-4L156 23l-15.4 64.4c-.5 2-1.1 3.3-1.9 4-.8.7-2.2 1-4 1h-8.6zm128.5 2.7c-5.2 0-10.4-.6-15.4-1.8-5-1.2-8.9-2.5-11.5-4-1.6-.9-2.7-1.9-3.1-2.8-.4-.9-.6-1.9-.6-2.8v-5.1c0-2.1.8-3.1 2.3-3.1.6 0 1.2.1 1.8.3.6.2 1.5.6 2.5 1 3.4 1.5 7.1 2.7 11 3.5 4 .8 7.9 1.2 11.9 1.2 6.3 0 11.2-1.1 14.6-3.3 3.4-2.2 5.2-5.4 5.2-9.5 0-2.8-.9-5.1-2.7-7-1.8-1.9-5.2-3.6-10.1-5.2L246 52c-7.3-2.3-12.7-5.7-16-10.2-3.3-4.4-5-9.3-5-14.5 0-4.2.9-7.9 2.7-11.1 1.8-3.2 4.2-6 7.2-8.2 3-2.3 6.4-4 10.4-5.2 4-1.2 8.2-1.7 12.6-1.7 2.2 0 4.5.1 6.7.4 2.3.3 4.4.7 6.5 1.1 2 .5 3.9 1 5.7 1.6 1.8.6 3.2 1.2 4.2 1.8 1.4.8 2.4 1.6 3 2.5.6.8.9 1.9.9 3.3v4.7c0 2.1-.8 3.2-2.3 3.2-.8 0-2.1-.4-3.8-1.2-5.7-2.6-12.1-3.9-19.2-3.9-5.7 0-10.2.9-13.3 2.8-3.1 1.9-4.7 4.8-4.7 8.9 0 2.8 1 5.2 3 7.1 2 1.9 5.7 3.8 11 5.5l14.2 4.5c7.2 2.3 12.4 5.5 15.5 9.6 3.1 4.1 4.6 8.8 4.6 14 0 4.3-.9 8.2-2.6 11.6-1.8 3.4-4.2 6.4-7.3 8.8-3.1 2.5-6.8 4.3-11.1 5.6-4.5 1.4-9.2 2.1-14.3 2.1z"
+      />
+      <path
+        d="M273.5 143.7c-32.9 24.3-80.7 37.2-121.8 37.2-57.6 0-109.5-21.3-148.7-56.7-3.1-2.8-.3-6.6 3.4-4.4 42.4 24.6 94.7 39.5 148.8 39.5 36.5 0 76.6-7.6 113.5-23.2 5.5-2.5 10.2 3.6 4.8 7.6z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        fill="#f90"
+      />
+      <path
+        d="M287.2 128.1c-4.2-5.4-27.8-2.6-38.5-1.3-3.2.4-3.7-2.4-.8-4.5 18.8-13.2 49.7-9.4 53.3-5 3.6 4.5-1 35.4-18.6 50.2-2.7 2.3-5.3 1.1-4.1-1.9 4-9.9 12.9-32.2 8.7-37.5z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        fill="#f90"
+      />
+    </svg>
+  );
+}
diff --git a/web/packages/design/src/SVGIcon/Lock.tsx b/web/packages/design/src/SVGIcon/Lock.tsx
new file mode 100644
index 0000000000000..6ea5a00789c7c
--- /dev/null
+++ b/web/packages/design/src/SVGIcon/Lock.tsx
@@ -0,0 +1,30 @@
+/*
+Copyright 2023 Gravitational, Inc.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import type { SVGIconProps } from './common';
+
+export function LockIcon({ size = 13, fill = 'white' }: SVGIconProps) {
+  return (
+    <svg
+      viewBox="0 0 10 13"
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill={fill}
+    >
+      <path d="M8.1501 4.60002H7.8001V3.55002C7.8001 1.81315 6.38697 0.400024 4.6501 0.400024C2.91322 0.400024 1.5001 1.81315 1.5001 3.55002V4.60002H1.1501C0.571285 4.60002 0.100098 5.07121 0.100098 5.65002V11.25C0.100098 11.8288 0.571285 12.3 1.1501 12.3H8.1501C8.72891 12.3 9.2001 11.8288 9.2001 11.25V5.65002C9.2001 5.07121 8.72891 4.60002 8.1501 4.60002ZM2.2001 3.55002C2.2001 2.19902 3.2991 1.10002 4.6501 1.10002C6.0011 1.10002 7.1001 2.19902 7.1001 3.55002V4.60002H2.2001V3.55002ZM8.5001 11.25C8.5001 11.4434 8.34347 11.6 8.1501 11.6H1.1501C0.956722 11.6 0.800098 11.4434 0.800098 11.25V5.65002C0.800098 5.45665 0.956722 5.30002 1.1501 5.30002H8.1501C8.34347 5.30002 8.5001 5.45665 8.5001 5.65002V11.25Z" />
+    </svg>
+  );
+}
diff --git a/web/packages/design/src/SVGIcon/index.ts b/web/packages/design/src/SVGIcon/index.ts
index c5dfded9b3a7a..f648d0d1ffc46 100644
--- a/web/packages/design/src/SVGIcon/index.ts
+++ b/web/packages/design/src/SVGIcon/index.ts
@@ -20,6 +20,8 @@ export { AddIcon } from './Add';
 export { ApplicationsIcon } from './Applications';
 export { AuditLogIcon } from './AuditLog';
 export { AuthConnectorsIcon } from './AuthConnectors';
+export { AWSIcon } from './AWS';
+export { LockIcon } from './Lock';
 export { ChevronRightIcon } from './ChevronRight';
 export { DatabasesIcon } from './Databases';
 export { DesktopsIcon } from './Desktops';
diff --git a/web/packages/teleport/src/Discover/Database/ConnectAwsAccount/ConnectAwsAccount.tsx b/web/packages/teleport/src/Discover/Database/ConnectAwsAccount/ConnectAwsAccount.tsx
new file mode 100644
index 0000000000000..1964a2e464482
--- /dev/null
+++ b/web/packages/teleport/src/Discover/Database/ConnectAwsAccount/ConnectAwsAccount.tsx
@@ -0,0 +1,217 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import {
+  Box,
+  ButtonLink,
+  Text,
+  ButtonPrimary,
+  Indicator,
+  Alert,
+  Flex,
+} from 'design';
+import theme from 'design/theme';
+import FieldSelect from 'shared/components/FieldSelect';
+import useAttempt from 'shared/hooks/useAttemptNext';
+import { Option } from 'shared/components/Select';
+import Validation, { Validator } from 'shared/components/Validation';
+import { requiredField } from 'shared/components/Validation/rules';
+import TextEditor from 'shared/components/TextEditor';
+
+import cfg from 'teleport/config';
+import {
+  IntegrationKind,
+  integrationService,
+} from 'teleport/services/integrations';
+import { integrationRWE } from 'teleport/Discover/yamlTemplates';
+import useTeleport from 'teleport/useTeleport';
+
+import { ActionButtons, HeaderSubtitle, HeaderWithBackBtn } from '../../Shared';
+
+import { DbMeta, useDiscover } from '../../useDiscover';
+
+export function ConnectAwsAccount() {
+  const { storeUser } = useTeleport();
+  const { prevStep, nextStep, agentMeta, updateAgentMeta, eventState } =
+    useDiscover();
+
+  // TODO(lisa): also need to check for verb `use` which is pending
+  // work.
+  const access = storeUser.getIntegrationsAccess();
+  const hasAccess = access.create && access.list;
+  const { attempt, run } = useAttempt(hasAccess ? 'processing' : '');
+
+  const [awsIntegrations, setAwsIntegrations] = useState<Option[]>([]);
+  const [selectedAwsIntegration, setSelectedAwsIntegration] =
+    useState<Option>();
+
+  useEffect(() => {
+    if (hasAccess) {
+      fetchAwsIntegrations();
+    }
+  }, []);
+
+  function fetchAwsIntegrations() {
+    run(() =>
+      integrationService.fetchIntegrations().then(res => {
+        const options = res.items.map(i => {
+          if (i.kind === 'aws-oidc') {
+            return {
+              value: i.name,
+              label: i.name,
+            };
+          }
+        });
+        setAwsIntegrations(options);
+      })
+    );
+  }
+
+  if (!hasAccess) {
+    return (
+      <Box maxWidth="700px">
+        <Header prevStep={prevStep} />
+        <Box maxWidth="700px">
+          <Text mt={4} width="100px">
+            You don’t have the required permissions for integrating.
+            <br />
+            Ask your Teleport administrator to update your role with the
+            following:
+          </Text>
+          <Flex minHeight="215px" mt={3}>
+            <TextEditor
+              readOnly={true}
+              data={[{ content: integrationRWE, type: 'yaml' }]}
+            />
+          </Flex>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (attempt.status === 'processing') {
+    return (
+      <Box maxWidth="700px">
+        <Header prevStep={prevStep} />
+        <Box textAlign="center" m={10}>
+          <Indicator />
+        </Box>
+      </Box>
+    );
+  }
+
+  if (attempt.status === 'failed') {
+    return (
+      <Box maxWidth="700px">
+        <Header prevStep={prevStep} />
+        <Alert kind="danger" children={attempt.statusText} />
+        <ButtonPrimary mt={2} onClick={fetchAwsIntegrations}>
+          Retry
+        </ButtonPrimary>
+      </Box>
+    );
+  }
+
+  function proceedWithExistingIntegration(validator: Validator) {
+    if (!validator.validate()) {
+      return;
+    }
+
+    updateAgentMeta({
+      ...(agentMeta as DbMeta),
+      awsIntegrationName: selectedAwsIntegration.value,
+    });
+
+    // TODO(lisa): Need to add a new event to emit for this screen.
+    nextStep();
+  }
+
+  const hasAwsIntegrations = awsIntegrations.length > 0;
+  const locationState = {
+    pathname: cfg.getIntegrationEnrollRoute(IntegrationKind.AwsOidc),
+    state: { discoverEventId: eventState?.id },
+  };
+  return (
+    <Box maxWidth="700px">
+      <Header prevStep={prevStep} />
+      <Box mb={3}>
+        <Validation>
+          {({ validator }) => (
+            <>
+              {hasAwsIntegrations ? (
+                <>
+                  <Text mb={2}>
+                    Select the name of the AWS integration to use:
+                  </Text>
+                  <Box width="300px" mb={6}>
+                    <FieldSelect
+                      disabled
+                      label="AWS Integrations"
+                      rule={requiredField('Region is required')}
+                      placeholder="Select the AWS Integration to Use"
+                      isSearchable
+                      isSimpleValue
+                      value={selectedAwsIntegration}
+                      onChange={i => setSelectedAwsIntegration(i as Option)}
+                      options={awsIntegrations}
+                    />
+                  </Box>
+                  <ButtonLink
+                    as={Link}
+                    to={locationState}
+                    pl={0}
+                    css={{ color: theme.colors.link }}
+                  >
+                    Or click here to set up a different AWS account
+                  </ButtonLink>
+                </>
+              ) : (
+                <ButtonPrimary
+                  mt={2}
+                  mb={2}
+                  size="large"
+                  as={Link}
+                  to={locationState}
+                >
+                  Set up AWS Account
+                </ButtonPrimary>
+              )}
+
+              <ActionButtons
+                onProceed={() => proceedWithExistingIntegration(validator)}
+                disableProceed={!hasAwsIntegrations || !selectedAwsIntegration}
+              />
+            </>
+          )}
+        </Validation>
+      </Box>
+    </Box>
+  );
+}
+
+const Header = ({ prevStep }: { prevStep(): void }) => (
+  <>
+    <HeaderWithBackBtn onPrev={prevStep}>
+      Connect to your AWS Account
+    </HeaderWithBackBtn>
+    <HeaderSubtitle>
+      Instead of storing long-lived static credentials, Teleport will request
+      short-lived credentials from AWS to perform operations automatically.
+    </HeaderSubtitle>
+  </>
+);
diff --git a/web/packages/teleport/src/Discover/Database/ConnectAwsAccount/index.ts b/web/packages/teleport/src/Discover/Database/ConnectAwsAccount/index.ts
new file mode 100644
index 0000000000000..238cb305ffe6d
--- /dev/null
+++ b/web/packages/teleport/src/Discover/Database/ConnectAwsAccount/index.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { ConnectAwsAccount } from './ConnectAwsAccount';
diff --git a/web/packages/teleport/src/Discover/Database/SetupAccess/SetupAccess.story.tsx b/web/packages/teleport/src/Discover/Database/SetupAccess/SetupAccess.story.tsx
index 00de37186ff9a..1e8e161cd6e9c 100644
--- a/web/packages/teleport/src/Discover/Database/SetupAccess/SetupAccess.story.tsx
+++ b/web/packages/teleport/src/Discover/Database/SetupAccess/SetupAccess.story.tsx
@@ -124,7 +124,7 @@ const dynamicTraits = {
 function getDbMeta(dbEngine: DatabaseEngine, dbLocation?: DatabaseLocation) {
   return {
     // Only these fields are relevant.
-    meta: {
+    dbMeta: {
       dbEngine,
       dbLocation,
     },
diff --git a/web/packages/teleport/src/Discover/useDiscover.tsx b/web/packages/teleport/src/Discover/useDiscover.tsx
index 47c292acf5e9b..81467c6b9bc6c 100644
--- a/web/packages/teleport/src/Discover/useDiscover.tsx
+++ b/web/packages/teleport/src/Discover/useDiscover.tsx
@@ -336,6 +336,7 @@ export type NodeMeta = BaseMeta & {
 // that needs to be preserved throughout the flow.
 export type DbMeta = BaseMeta & {
   db: Database;
+  awsIntegrationName?: string;
 };
 
 // KubeMeta describes the fields for a kube resource
diff --git a/web/packages/teleport/src/Discover/yamlTemplates/index.ts b/web/packages/teleport/src/Discover/yamlTemplates/index.ts
index 1f1fc8b132fc2..27f008c740451 100644
--- a/web/packages/teleport/src/Discover/yamlTemplates/index.ts
+++ b/web/packages/teleport/src/Discover/yamlTemplates/index.ts
@@ -22,6 +22,7 @@ import kubeAccessRO from './kubeAccessRO.yaml?raw';
 import dbAccessRW from './dbAccessRW.yaml?raw';
 import dbAccessRO from './dbAccessRO.yaml?raw';
 import dbCU from './dbCU.yaml?raw';
+import integrationRWE from './integrationRWE.yaml?raw';
 
 export {
   nodeAccessRO,
@@ -32,4 +33,5 @@ export {
   dbAccessRO,
   dbAccessRW,
   dbCU,
+  integrationRWE,
 };
diff --git a/web/packages/teleport/src/Discover/yamlTemplates/integrationRWE.yaml b/web/packages/teleport/src/Discover/yamlTemplates/integrationRWE.yaml
new file mode 100644
index 0000000000000..2868a0b959e98
--- /dev/null
+++ b/web/packages/teleport/src/Discover/yamlTemplates/integrationRWE.yaml
@@ -0,0 +1,10 @@
+kind: role
+spec:
+  allow:
+    rules:
+    - resources:
+      - integration
+      verbs:
+      - list
+      - create
+      - use
diff --git a/web/packages/teleport/src/Integrations/DeleteIntegrationDialog.tsx b/web/packages/teleport/src/Integrations/DeleteIntegrationDialog.tsx
new file mode 100644
index 0000000000000..8376e13d6da72
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/DeleteIntegrationDialog.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { ButtonSecondary, ButtonWarning, Text, Alert } from 'design';
+import Dialog, {
+  DialogHeader,
+  DialogTitle,
+  DialogContent,
+  DialogFooter,
+} from 'design/DialogConfirmation';
+import useAttempt from 'shared/hooks/useAttemptNext';
+
+type Props = {
+  onClose(): void;
+  onDelete(): Promise<void>;
+  name: string;
+};
+
+export function DeleteIntegrationDialog(props: Props) {
+  const { onClose, onDelete } = props;
+  const { attempt, run } = useAttempt();
+  const isDisabled = attempt.status === 'processing';
+
+  function onOk() {
+    run(() => onDelete());
+  }
+
+  return (
+    <Dialog disableEscapeKeyDown={false} onClose={onClose} open={true}>
+      <DialogHeader>
+        <DialogTitle>Delete Integration?</DialogTitle>
+      </DialogHeader>
+      <DialogContent width="450px">
+        {attempt.status === 'failed' && <Alert children={attempt.statusText} />}
+        <Text typography="paragraph" mb="6">
+          Are you sure you want to delete integration{' '}
+          <Text as="span" bold color="text.contrast">
+            {props.name}
+          </Text>{' '}
+          ?
+        </Text>
+      </DialogContent>
+      <DialogFooter>
+        <ButtonWarning mr="3" disabled={isDisabled} onClick={onOk}>
+          Yes, Remove Integration
+        </ButtonWarning>
+        <ButtonSecondary disabled={isDisabled} onClick={onClose}>
+          Cancel
+        </ButtonSecondary>
+      </DialogFooter>
+    </Dialog>
+  );
+}
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/AwsOidc.story.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/AwsOidc.story.tsx
new file mode 100644
index 0000000000000..6061b23c53f30
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/AwsOidc.story.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+
+import { createTeleportContext } from 'teleport/mocks/contexts';
+import { ContextProvider } from 'teleport';
+
+import { AwsOidc } from './AwsOidc';
+
+export default {
+  title: 'Teleport/Integrations/Enroll/AwsOidc',
+};
+
+export const Flow = () => (
+  <Provider>
+    <AwsOidc />
+  </Provider>
+);
+
+const Provider = props => {
+  const ctx = createTeleportContext({ customAcl: props.customAcl });
+
+  return (
+    <MemoryRouter>
+      <ContextProvider ctx={ctx}>{props.children}</ContextProvider>
+    </MemoryRouter>
+  );
+};
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/AwsOidc.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/AwsOidc.tsx
new file mode 100644
index 0000000000000..ae33d0a6ddcc2
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/AwsOidc.tsx
@@ -0,0 +1,361 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useCallback, useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+import { SwitchTransition, Transition } from 'react-transition-group';
+
+import { Header, HeaderSubtitle } from 'teleport/Discover/Shared';
+import { Browser } from 'teleport/Integrations/Enroll/AwsOidc/browser/Browser';
+import { IAMHomeScreen } from 'teleport/Integrations/Enroll/AwsOidc/IAM/IAMHomeScreen';
+import { Cursor } from 'teleport/Integrations/Enroll/AwsOidc/browser/Cursor';
+import { IAMIdentityProvidersScreen } from 'teleport/Integrations/Enroll/AwsOidc/IAM/IAMIdentityProvidersScreen';
+import { IAMNewProviderScreen } from 'teleport/Integrations/Enroll/AwsOidc/IAM/IAMNewProviderScreen';
+import { FirstStageInstructions } from 'teleport/Integrations/Enroll/AwsOidc/instructions/FirstStageInstructions';
+import { SecondStageInstructions } from 'teleport/Integrations/Enroll/AwsOidc/instructions/SecondStageInstructions';
+
+import { ThirdStageInstructions } from 'teleport/Integrations/Enroll/AwsOidc/instructions/ThirdStageInstructions';
+import { IAMProvider } from 'teleport/Integrations/Enroll/AwsOidc/IAM/IAMProvider';
+
+import { IAMCreateNewRole } from 'teleport/Integrations/Enroll/AwsOidc/IAM/IAMCreateNewRole';
+import { FourthStageInstructions } from 'teleport/Integrations/Enroll/AwsOidc/instructions/FourthStageInstructions';
+import { IAMCreateNewRolePermissions } from 'teleport/Integrations/Enroll/AwsOidc/IAM/IAMCreateNewRolePermissions';
+import { FifthStageInstructions } from 'teleport/Integrations/Enroll/AwsOidc/instructions/FifthStageInstructions';
+import { IAMCreateNewPolicy } from 'teleport/Integrations/Enroll/AwsOidc/IAM/IAMCreateNewPolicy';
+import { SixthStageInstructions } from 'teleport/Integrations/Enroll/AwsOidc/instructions/SixthStageInstructions';
+
+import { SeventhStageInstructions } from 'teleport/Integrations/Enroll/AwsOidc/instructions/SeventhStageInstructions';
+import { IAMRoles } from 'teleport/Integrations/Enroll/AwsOidc/IAM/IAMRoles';
+import useTeleport from 'teleport/useTeleport';
+
+import { Stage, STAGES } from './stages';
+
+const Container = styled.div`
+  padding-right: 40px;
+  padding-top: 16px;
+`;
+
+const InstructionsContainer = styled.div`
+  display: flex;
+  margin-top: 50px;
+`;
+
+const BrowserContainer = styled.div`
+  position: relative;
+`;
+
+const RestartAnimation = styled.div`
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  opacity: ${p => (p.visible ? 1 : 0)};
+  transition: 0.2s ease-in-out opacity;
+  justify-content: center;
+  position: absolute;
+  bottom: 10px;
+  background: rgba(0, 0, 0, 0.8);
+  border-radius: 5px;
+  padding: 5px 10px;
+  cursor: pointer;
+  left: 50%;
+  transform: translate(-50%, 0);
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
+
+  &:hover {
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+  }
+`;
+
+const defaultStyle = {
+  transition: 'opacity 250ms, transform 250ms',
+  opacity: 0,
+  width: '100%',
+};
+
+const horizontalTransitionStyles = {
+  entering: { opacity: 0, transform: 'translateX(50px)' },
+  entered: { opacity: 1, transform: 'translateX(0%)' },
+  exiting: { opacity: 0, transform: 'translateX(-50px)' },
+  exited: { opacity: 0, transform: 'translateX(-50px)' },
+};
+
+enum InstructionStep {
+  First,
+  Second,
+  Third,
+  Fourth,
+  Fifth,
+  Sixth,
+  Seventh,
+}
+
+export function AwsOidc() {
+  const ctx = useTeleport();
+  let clusterPublicUri = ctx.storeUser.state.cluster.publicURL;
+
+  const [stage, setStage] = useState(Stage.Initial);
+  const [showRestartAnimation, setShowRestartAnimation] = useState(false);
+
+  const currentStageIndex = STAGES.findIndex(s => s.kind === stage);
+  const currentStage = STAGES[currentStageIndex];
+  const currentStageConfig = getStageConfig(stage);
+
+  const restartAnimation = useCallback(() => {
+    setStage(currentStageConfig.restartStage);
+    setShowRestartAnimation(false);
+  }, [currentStageConfig]);
+
+  useEffect(() => {
+    if (currentStage.end) {
+      setShowRestartAnimation(true);
+
+      return;
+    }
+
+    if (showRestartAnimation) {
+      setShowRestartAnimation(false);
+    }
+
+    if (currentStage.duration && STAGES[currentStageIndex + 1]) {
+      const id = window.setTimeout(
+        () => setStage(STAGES[currentStageIndex + 1].kind),
+        currentStage.duration
+      );
+
+      return () => window.clearTimeout(id);
+    }
+  }, [currentStage, currentStageIndex, showRestartAnimation]);
+
+  return (
+    <Container>
+      <Header>Set up your AWS account</Header>
+
+      <HeaderSubtitle>
+        Instead of storing long-lived static credentials, Teleport will become a
+        trusted OIDC provider with AWS to be able to request short lived
+        credentials when performing operations automatically.
+      </HeaderSubtitle>
+
+      <InstructionsContainer>
+        <SwitchTransition mode="out-in">
+          <Transition
+            key={currentStageConfig.instructionStep}
+            timeout={250}
+            mountOnEnter
+            unmountOnExit
+          >
+            {state => (
+              <div
+                style={{
+                  ...defaultStyle,
+                  ...horizontalTransitionStyles[state],
+                }}
+              >
+                {currentStageConfig.instructionStep ===
+                  InstructionStep.First && (
+                  <FirstStageInstructions
+                    onNext={() => {
+                      setStage(Stage.NewProviderFullScreen);
+                    }}
+                    clusterPublicUri={clusterPublicUri}
+                  />
+                )}
+                {currentStageConfig.instructionStep ===
+                  InstructionStep.Second && (
+                  <SecondStageInstructions
+                    onNext={() => {
+                      setStage(Stage.AddProvider);
+                    }}
+                    clusterPublicUri={clusterPublicUri}
+                  />
+                )}
+                {currentStageConfig.instructionStep ===
+                  InstructionStep.Third && (
+                  <ThirdStageInstructions
+                    onNext={() => {
+                      setStage(Stage.CreateNewRole);
+                    }}
+                    clusterPublicUri={clusterPublicUri}
+                  />
+                )}
+                {currentStageConfig.instructionStep ===
+                  InstructionStep.Fourth && (
+                  <FourthStageInstructions
+                    onNext={() => {
+                      setStage(Stage.CreatePolicy);
+                    }}
+                    clusterPublicUri={clusterPublicUri}
+                  />
+                )}
+                {currentStageConfig.instructionStep ===
+                  InstructionStep.Fifth && (
+                  <FifthStageInstructions
+                    onNext={() => {
+                      setStage(Stage.AssignPolicyToRole);
+                    }}
+                    clusterPublicUri={clusterPublicUri}
+                  />
+                )}
+                {currentStageConfig.instructionStep ===
+                  InstructionStep.Sixth && (
+                  <SixthStageInstructions
+                    onNext={() => {
+                      setStage(Stage.ListRoles);
+                    }}
+                    clusterPublicUri={clusterPublicUri}
+                  />
+                )}
+                {currentStageConfig.instructionStep ===
+                  InstructionStep.Seventh && <SeventhStageInstructions />}
+              </div>
+            )}
+          </Transition>
+        </SwitchTransition>
+
+        <BrowserContainer>
+          <Browser stage={stage}>
+            <Cursor
+              top={currentStage.cursor.top}
+              left={currentStage.cursor.left}
+              click={currentStage.cursor.click}
+            />
+            {getStageComponent(stage, clusterPublicUri)}
+          </Browser>
+
+          <RestartAnimation
+            visible={showRestartAnimation}
+            onClick={() => restartAnimation()}
+          >
+            Restart animation
+          </RestartAnimation>
+        </BrowserContainer>
+      </InstructionsContainer>
+    </Container>
+  );
+}
+
+function getStageComponent(stage: Stage, uri: string) {
+  let clusterPublicUri = uri;
+  // Truncate long URI's so it doesn't mess up the animation screens.
+  if (clusterPublicUri.length > 30) {
+    clusterPublicUri = `${clusterPublicUri.substring(0, 30)}...`;
+  }
+  const props = { stage, clusterPublicUri };
+
+  if (stage >= Stage.Initial && stage <= Stage.ClickIdentityProviders) {
+    return <IAMHomeScreen />;
+  }
+
+  if (stage >= Stage.IdentityProviders && stage <= Stage.ClickAddProvider) {
+    return <IAMIdentityProvidersScreen {...props} />;
+  }
+
+  if (stage >= Stage.NewProvider && stage <= Stage.AddProvider) {
+    return <IAMNewProviderScreen {...props} />;
+  }
+
+  if (stage >= Stage.ProviderAdded && stage <= Stage.SelectProvider) {
+    return <IAMIdentityProvidersScreen {...props} />;
+  }
+
+  if (stage >= Stage.ProviderView && stage <= Stage.ClickCreateNewRole) {
+    return <IAMProvider {...props} />;
+  }
+
+  if (stage >= Stage.CreateNewRole && stage <= Stage.ClickNextPermissions) {
+    return <IAMCreateNewRole {...props} />;
+  }
+
+  if (
+    stage >= Stage.ConfigureRolePermissions &&
+    stage <= Stage.ClickCreatePolicy
+  ) {
+    return <IAMCreateNewRolePermissions {...props} />;
+  }
+
+  if (stage >= Stage.CreatePolicy && stage <= Stage.ClickCreatePolicyButton) {
+    return <IAMCreateNewPolicy {...props} />;
+  }
+
+  if (
+    stage >= Stage.AssignPolicyToRole &&
+    stage <= Stage.ClickCreateRoleButton
+  ) {
+    return <IAMCreateNewRolePermissions {...props} />;
+  }
+
+  if (stage >= Stage.ListRoles) {
+    return <IAMRoles {...props} />;
+  }
+}
+
+function getStageConfig(stage: Stage) {
+  if (stage >= Stage.Initial && stage <= Stage.NewProvider) {
+    return {
+      instructionStep: InstructionStep.First,
+      restartStage: Stage.Initial,
+    };
+  }
+
+  if (
+    stage >= Stage.NewProviderFullScreen &&
+    stage <= Stage.ThumbprintSelected
+  ) {
+    return {
+      instructionStep: InstructionStep.Second,
+      restartStage: Stage.NewProviderFullScreen,
+    };
+  }
+
+  if (stage >= Stage.AddProvider && stage <= Stage.ClickCreateNewRole) {
+    return {
+      instructionStep: InstructionStep.Third,
+      restartStage: Stage.AddProvider,
+    };
+  }
+
+  if (stage >= Stage.CreateNewRole && stage <= Stage.ClickCreatePolicy) {
+    return {
+      instructionStep: InstructionStep.Fourth,
+      restartStage: Stage.CreateNewRole,
+    };
+  }
+
+  if (stage >= Stage.CreatePolicy && stage <= Stage.ClickCreatePolicyButton) {
+    return {
+      instructionStep: InstructionStep.Fifth,
+      restartStage: Stage.CreatePolicy,
+    };
+  }
+
+  if (
+    stage >= Stage.AssignPolicyToRole &&
+    stage <= Stage.ClickCreateRoleButton
+  ) {
+    return {
+      instructionStep: InstructionStep.Sixth,
+      restartStage: Stage.AssignPolicyToRole,
+    };
+  }
+
+  if (stage >= Stage.ListRoles) {
+    return {
+      instructionStep: InstructionStep.Seventh,
+      restartStage: Stage.ListRoles,
+    };
+  }
+}
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/AssignRoleModal.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/AssignRoleModal.tsx
new file mode 100644
index 0000000000000..2a34953847fea
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/AssignRoleModal.tsx
@@ -0,0 +1,171 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import styled from 'styled-components';
+
+import { AddIcon } from 'design/SVGIcon';
+
+import { NextButton } from './common';
+
+const Modal = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 9;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const AssignRole = styled.div<{ active: boolean }>`
+  border-radius: 4px;
+  border: 1px solid #bdbdbd;
+  overflow: hidden;
+  width: 500px;
+`;
+
+const AssignRoleClose = styled.div`
+  transform: rotate(45deg);
+  position: relative;
+  top: 2px;
+`;
+
+const AssignRoleHeader = styled.div`
+  background: #eee;
+  display: flex;
+  justify-content: space-between;
+  font-size: 16px;
+  padding: 10px 20px;
+  border-bottom: 1px solid #dddddd;
+`;
+
+const AssignRoleFooter = styled.div`
+  background: #eee;
+  display: flex;
+  justify-content: flex-end;
+  font-size: 16px;
+  padding: 10px 20px;
+  border-top: 1px solid #dddddd;
+`;
+
+const AssignRoleContent = styled.div`
+  background: white;
+  padding: 10px 20px;
+  display: flex;
+  justify-content: space-between;
+`;
+
+const AssignRoleOption = styled.div<{ active: boolean }>`
+  display: flex;
+  background: ${p => (p.active ? '#f0f9ff' : 'white')};
+  border: 1px solid ${p => (p.active ? '#99c2ee' : '#e6e6e6')};
+  border-radius: 4px;
+  flex: 0 0 200px;
+  padding: 8px 12px 10px;
+`;
+
+const AssignRoleOptionBulletContainer = styled.div`
+  flex: 0 0 25px;
+  padding: 4px 0;
+`;
+
+const AssignRoleOptionBullet = styled.div<{ active: boolean }>`
+  width: 14px;
+  height: 14px;
+  background: ${p => (p.active ? '#1066bb' : '#cccccc')};
+  border-radius: 50%;
+  position: relative;
+  &:after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: ${p => (p.active ? 6 : 11)}px;
+    height: ${p => (p.active ? 6 : 11)}px;
+    content: '';
+    background: white;
+    border-radius: 50%;
+  }
+`;
+
+const CancelButton = styled.div`
+  color: #1869bb;
+  padding: 5px 15px;
+  font-size: 14px;
+  font-weight: 700;
+  margin-right: 10px;
+`;
+
+const AssignRoleOptionDescription = styled.div`
+  font-size: 12px;
+  line-height: 1.2;
+  color: #999;
+`;
+
+export function AssignRoleModal({
+  clusterPublicUri,
+}: {
+  clusterPublicUri: string;
+}) {
+  return (
+    <Modal>
+      <div>
+        <AssignRole>
+          <AssignRoleHeader>
+            Assign role for {clusterPublicUri}
+            <AssignRoleClose>
+              <AddIcon fill="#444444" size={16} />
+            </AssignRoleClose>
+          </AssignRoleHeader>
+          <AssignRoleContent>
+            <AssignRoleOption active={true}>
+              <AssignRoleOptionBulletContainer>
+                <AssignRoleOptionBullet active={true} />
+              </AssignRoleOptionBulletContainer>
+              <div>
+                <div>Create a new role</div>
+                <AssignRoleOptionDescription>
+                  Create a new role for this identity provider and add
+                  permissions to the new role.
+                </AssignRoleOptionDescription>
+              </div>
+            </AssignRoleOption>
+            <AssignRoleOption>
+              <AssignRoleOptionBulletContainer>
+                <AssignRoleOptionBullet active={false} />
+              </AssignRoleOptionBulletContainer>
+              <div>
+                <div>Use an existing role</div>
+                <AssignRoleOptionDescription>
+                  Associate an existing role by adding this IdP to the trusted
+                  entities of the role.
+                </AssignRoleOptionDescription>
+              </div>
+            </AssignRoleOption>
+          </AssignRoleContent>
+          <AssignRoleFooter>
+            <CancelButton>Cancel</CancelButton>
+            <NextButton>Next</NextButton>
+          </AssignRoleFooter>
+        </AssignRole>
+      </div>
+    </Modal>
+  );
+}
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/IAMCreateNewPolicy.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/IAMCreateNewPolicy.tsx
new file mode 100644
index 0000000000000..a5f30b90e3838
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/IAMCreateNewPolicy.tsx
@@ -0,0 +1,206 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import styled from 'styled-components';
+
+import Flex from 'design/Flex';
+import Text from 'design/Text';
+
+import { Stage } from '../stages';
+
+import { AWSWrapper } from './SharedComponents';
+
+import {
+  Content,
+  Footer,
+  Header,
+  NextButton,
+  Page,
+  RoleButton,
+  Section,
+  SectionContent,
+  SectionDropdown,
+  SectionDropdownSelected,
+  SectionTitle,
+} from './common';
+
+import type { CommonIAMProps } from './common';
+
+const Tabs = styled.div`
+  display: flex;
+  border-bottom: 1px solid #ccc;
+`;
+
+const Tab = styled.div<{ active: boolean }>`
+  background: ${p => (p.active ? 'white' : '#eeeeee')};
+  font-weight: bold;
+  border: 1px solid #cccccc;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  padding: 5px 15px;
+  margin-right: 10px;
+  position: relative;
+  overflow: hidden;
+  border-top-width: ${p => (p.active ? 0 : '1px')};
+  border-bottom-color: ${p => (p.active ? 'white' : '#cccccc')};
+  margin-bottom: -1px;
+
+  &:after {
+    height: 3px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    background: #e07701;
+    content: '';
+    display: ${p => (p.active ? 'block' : 'none')};
+  }
+`;
+
+const JSONEditor = styled.div<{ selected: boolean }>`
+  border: 1px solid #ccc;
+  margin-top: 20px;
+  padding: 0 25px;
+  font-size: 14px;
+  position: relative;
+
+  &:after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    content: '';
+    background: #b5d5ff;
+    z-index: 0;
+    display: ${p => (p.selected ? 'block' : 'none')};
+  }
+
+  pre {
+    position: relative;
+    z-index: 1;
+  }
+`;
+
+export function IAMCreateNewPolicy(props: CommonIAMProps) {
+  let jsonEditor;
+  if (props.stage >= Stage.ShowJSONEditor) {
+    let content = `{
+    "Version": "2012-10-17",
+    "Statement": []
+}`;
+    if (props.stage >= Stage.PolicyJSONPasted) {
+      content = `{
+    "Version": "2012-10-17",
+    "Statement": [
+        {
+            "Effect": "Allow",
+            "Action": "rds:DescribeDBInstances",
+            "Resource": "*"
+        }
+    ]
+}`;
+    }
+
+    jsonEditor = (
+      <JSONEditor selected={props.stage === Stage.JSONContentsSelected}>
+        <pre>{content}</pre>
+      </JSONEditor>
+    );
+  }
+
+  let content;
+  if (props.stage <= Stage.PolicyClickNextTags) {
+    content = (
+      <>
+        <Tabs>
+          <Tab active={props.stage <= Stage.ClickJSONTab}>Visual Editor</Tab>
+          <Tab active={props.stage >= Stage.ShowJSONEditor}>JSON</Tab>
+        </Tabs>
+
+        {jsonEditor}
+
+        <Footer>
+          <NextButton>Next: Tags</NextButton>
+        </Footer>
+      </>
+    );
+  }
+
+  if (
+    props.stage >= Stage.PolicyTags &&
+    props.stage <= Stage.PolicyClickNextReview
+  ) {
+    content = (
+      <>
+        <Text fontSize={4} bold>
+          Add tags - <em>optional</em>
+        </Text>
+
+        <Flex mt={4}>
+          <RoleButton>Add tag</RoleButton>
+        </Flex>
+
+        <Footer>
+          <NextButton>Next: Review</NextButton>
+        </Footer>
+      </>
+    );
+  }
+
+  if (props.stage >= Stage.PolicyReview) {
+    content = (
+      <>
+        <Text fontSize={4} mb={4}>
+          Review policy
+        </Text>
+
+        <Section>
+          <SectionTitle>Name*</SectionTitle>
+
+          <SectionContent>
+            <SectionDropdown>
+              <SectionDropdownSelected>
+                {props.stage >= Stage.PolicyHasName ? (
+                  'SomePolicyName'
+                ) : (
+                  <>&nbsp;</>
+                )}
+              </SectionDropdownSelected>
+            </SectionDropdown>
+          </SectionContent>
+        </Section>
+
+        <Footer>
+          <NextButton>Create policy</NextButton>
+        </Footer>
+      </>
+    );
+  }
+
+  return (
+    <AWSWrapper>
+      <Page>
+        <Content>
+          <Header>Create policy</Header>
+
+          {content}
+        </Content>
+      </Page>
+    </AWSWrapper>
+  );
+}
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/IAMCreateNewRole.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/IAMCreateNewRole.tsx
new file mode 100644
index 0000000000000..387b25caf183a
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/IAMCreateNewRole.tsx
@@ -0,0 +1,168 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import styled from 'styled-components';
+
+import { Stage } from '../stages';
+
+import { AWSWrapper } from './SharedComponents';
+
+import {
+  Content,
+  Footer,
+  Header,
+  NextButton,
+  Page,
+  Section,
+  SectionContent,
+  SectionDropdown,
+  SectionDropdownSelected,
+  SectionTitle,
+  SubHeader,
+} from './common';
+
+import type { CommonIAMProps } from './common';
+
+const TrustedEntities = styled.div`
+  display: flex;
+  margin-bottom: 30px;
+`;
+
+const TrustedEntity = styled.div<{ active: boolean }>`
+  background: ${p => (p.active ? '#e6f3ff' : 'white')};
+  border: 2px solid ${p => (p.active ? '#1066bb' : '#cccccc')};
+  flex: 0 0 180px;
+  margin-right: 10px;
+  display: flex;
+`;
+
+const TrustedEntityContent = styled.div`
+  padding: 10px 15px;
+`;
+
+const TrustedEntityTitle = styled.div`
+  font-weight: bold;
+`;
+
+const TrustedEntityDescription = styled.div`
+  font-size: 12px;
+  color: #666;
+  line-height: 1.2;
+`;
+
+const SectionDropdownItems = styled.div`
+  background: #222222;
+  position: absolute;
+  top: 34px;
+  color: white;
+  width: 300px;
+  border-radius: 4px;
+`;
+
+const SectionDropdownItem = styled.div<{ hovered: boolean }>`
+  padding: 5px 15px;
+  color: ${p => (p.hovered ? '#d27106' : 'white')};
+`;
+
+export function IAMCreateNewRole(props: CommonIAMProps) {
+  return (
+    <AWSWrapper>
+      <Page>
+        <Content>
+          <Header>Create role</Header>
+
+          <SubHeader>Select type of trusted entity</SubHeader>
+
+          <TrustedEntities>
+            <TrustedEntity>
+              <TrustedEntityContent>
+                <TrustedEntityTitle>AWS service</TrustedEntityTitle>
+
+                <TrustedEntityDescription>
+                  EC2, Lambda and others
+                </TrustedEntityDescription>
+              </TrustedEntityContent>
+            </TrustedEntity>
+
+            <TrustedEntity active={true}>
+              <TrustedEntityContent>
+                <TrustedEntityTitle>Web identity</TrustedEntityTitle>
+
+                <TrustedEntityDescription>
+                  Cognito or any OpenID provider
+                </TrustedEntityDescription>
+              </TrustedEntityContent>
+            </TrustedEntity>
+
+            <TrustedEntity>
+              <TrustedEntityContent>
+                <TrustedEntityTitle>SAML 2.0 federation</TrustedEntityTitle>
+
+                <TrustedEntityDescription>
+                  Your corporate directory
+                </TrustedEntityDescription>
+              </TrustedEntityContent>
+            </TrustedEntity>
+          </TrustedEntities>
+
+          <SubHeader>Choose a web identity provider</SubHeader>
+
+          <Section>
+            <SectionTitle>Identity Provider</SectionTitle>
+
+            <SectionContent>
+              <SectionDropdown>
+                <SectionDropdownSelected>
+                  {props.clusterPublicUri}:aud
+                </SectionDropdownSelected>
+              </SectionDropdown>
+            </SectionContent>
+          </Section>
+
+          <Section>
+            <SectionTitle>Audience*</SectionTitle>
+
+            <SectionContent>
+              <SectionDropdown>
+                <SectionDropdownSelected>
+                  {props.stage >= Stage.DiscoverAudienceSelected ? (
+                    'discover.teleport'
+                  ) : (
+                    <>&nbsp;</>
+                  )}
+                </SectionDropdownSelected>
+
+                {props.stage >= Stage.ShowAudienceDropdown &&
+                  props.stage < Stage.DiscoverAudienceSelected && (
+                    <SectionDropdownItems>
+                      <SectionDropdownItem>
+                        discover.teleport
+                      </SectionDropdownItem>
+                    </SectionDropdownItems>
+                  )}
+              </SectionDropdown>
+            </SectionContent>
+          </Section>
+
+          <Footer>
+            <NextButton>Next: Permissions</NextButton>
+          </Footer>
+        </Content>
+      </Page>
+    </AWSWrapper>
+  );
+}
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/IAMCreateNewRolePermissions.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/IAMCreateNewRolePermissions.tsx
new file mode 100644
index 0000000000000..69f67c1aec9d1
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/IAMCreateNewRolePermissions.tsx
@@ -0,0 +1,195 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import styled from 'styled-components';
+
+import Text from 'design/Text';
+import Flex from 'design/Flex';
+
+import { Stage } from '../stages';
+
+import { AWSWrapper } from './SharedComponents';
+
+import {
+  Content,
+  Footer,
+  Header,
+  NextButton,
+  Page,
+  RoleButton,
+  Section,
+  SectionContent,
+  SectionDropdown,
+  SectionDropdownSelected,
+  SectionTitle,
+  SubHeader,
+  TableCheckBox,
+  TableHeader,
+  TableItem,
+  TableSearch,
+  TableTitle,
+} from './common';
+
+import type { CommonIAMProps } from './common';
+
+const CreatePolicyButton = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+const Policies = styled.div`
+  margin-top: 20px;
+`;
+
+export function IAMCreateNewRolePermissions(props: CommonIAMProps) {
+  let content = (
+    <>
+      <SubHeader>Attach permissions policies</SubHeader>
+
+      <CreatePolicyButton>
+        <RoleButton>Create policy</RoleButton>
+      </CreatePolicyButton>
+
+      <Footer>
+        <NextButton>Next: Tags</NextButton>
+      </Footer>
+    </>
+  );
+
+  if (props.stage >= Stage.RoleReview) {
+    content = (
+      <>
+        <Text fontSize={4} mb={4}>
+          Review
+        </Text>
+
+        <Section>
+          <SectionTitle>Role Name*</SectionTitle>
+
+          <SectionContent>
+            <SectionDropdown>
+              <SectionDropdownSelected>
+                {props.stage >= Stage.RoleHasName ? (
+                  'SomeRoleName'
+                ) : (
+                  <>&nbsp;</>
+                )}
+              </SectionDropdownSelected>
+            </SectionDropdown>
+          </SectionContent>
+        </Section>
+
+        <Footer>
+          <NextButton>Create role</NextButton>
+        </Footer>
+      </>
+    );
+  }
+
+  if (
+    props.stage >= Stage.RoleTags &&
+    props.stage <= Stage.RoleClickNextReview
+  ) {
+    content = (
+      <>
+        <Text fontSize={4} bold>
+          Add tags - <em>optional</em>
+        </Text>
+
+        <Flex mt={4}>
+          <RoleButton>Add tag</RoleButton>
+        </Flex>
+
+        <Footer>
+          <NextButton>Next: Review</NextButton>
+        </Footer>
+      </>
+    );
+  }
+
+  if (
+    props.stage >= Stage.AssignPolicyToRole &&
+    props.stage <= Stage.RoleClickNextTags
+  ) {
+    content = (
+      <>
+        <SubHeader>Attach permissions policies</SubHeader>
+
+        <CreatePolicyButton>
+          <RoleButton>Create policy</RoleButton>
+
+          <RoleButton>Refresh</RoleButton>
+        </CreatePolicyButton>
+
+        <Policies>
+          <TableTitle>
+            <TableSearch>
+              {props.stage >= Stage.SearchForPolicy
+                ? 'SomePolicyName'
+                : 'Search'}
+            </TableSearch>
+          </TableTitle>
+          {props.stage >= Stage.SearchForPolicy ? (
+            <div>
+              <TableHeader>Policy Name</TableHeader>
+              <TableItem selected={props.stage >= Stage.PolicySelected}>
+                <TableCheckBox />
+                SomePolicyName
+              </TableItem>
+            </div>
+          ) : (
+            <div>
+              <TableHeader>Policy Name</TableHeader>
+              <TableItem>
+                <TableCheckBox />
+                AWSDefaultPolicy
+              </TableItem>
+              <TableItem>
+                <TableCheckBox />
+                AWSDefaultPolicy2
+              </TableItem>
+              <TableItem>
+                <TableCheckBox />
+                AWSDefaultPolicy3
+              </TableItem>
+              <TableItem>
+                <TableCheckBox />
+                AWSDefaultPolicy4
+              </TableItem>
+            </div>
+          )}
+        </Policies>
+
+        <Footer>
+          <NextButton>Next: Tags</NextButton>
+        </Footer>
+      </>
+    );
+  }
+
+  return (
+    <AWSWrapper>
+      <Page>
+        <Content>
+          <Header>Create role</Header>
+
+          {content}
+        </Content>
+      </Page>
+    </AWSWrapper>
+  );
+}
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/IAMHomeScreen.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/IAMHomeScreen.tsx
new file mode 100644
index 0000000000000..d270fd3e16996
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/IAMHomeScreen.tsx
@@ -0,0 +1,94 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import Text from 'design/Text';
+import Flex from 'design/Flex';
+import Box from 'design/Box';
+
+import { AWSWrapper } from './SharedComponents';
+
+import {
+  Blur,
+  Content,
+  Page,
+  Sidebar,
+  SidebarLink,
+  SidebarLinkActive,
+  SidebarSectionTitle,
+  SidebarTitle,
+  Title,
+} from './common';
+
+export function IAMHomeScreen() {
+  return (
+    <AWSWrapper>
+      <Page>
+        <Sidebar>
+          <SidebarTitle>Identity and Access Management (IAM)</SidebarTitle>
+
+          <SidebarLinkActive>Dashboard</SidebarLinkActive>
+
+          <SidebarSectionTitle>Access Management</SidebarSectionTitle>
+
+          <SidebarLink>User groups</SidebarLink>
+          <SidebarLink>Users</SidebarLink>
+          <SidebarLink>Roles</SidebarLink>
+          <SidebarLink style={{ background: 'white' }}>
+            Identity providers
+          </SidebarLink>
+          <SidebarLink>Account settings</SidebarLink>
+
+          <SidebarSectionTitle>Access reports</SidebarSectionTitle>
+
+          <SidebarLink>Access analyzer</SidebarLink>
+          <SidebarLink>Credential report</SidebarLink>
+          <SidebarLink>Organization activity</SidebarLink>
+        </Sidebar>
+        <Content>
+          <Title>IAM Dashboard</Title>
+
+          <Blur>
+            <Text mb={3}>Some blurred text here. Some other text here.</Text>
+            <Text mb={5}>Some blurred text here</Text>
+            <Text>IAM Resources</Text>
+            <Flex justifyContent="space-between" mt={3}>
+              <Box>
+                User groups
+                <div style={{ marginTop: 10, fontSize: 28, color: '#1166bb' }}>
+                  10
+                </div>
+              </Box>
+              <Box>
+                Users
+                <div style={{ marginTop: 10, fontSize: 28, color: '#1166bb' }}>
+                  145
+                </div>
+              </Box>
+              <Box>
+                Identity providers
+                <div style={{ marginTop: 10, fontSize: 28, color: '#1166bb' }}>
+                  0
+                </div>
+              </Box>
+            </Flex>
+          </Blur>
+        </Content>
+      </Page>
+    </AWSWrapper>
+  );
+}
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/IAMIdentityProvidersScreen.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/IAMIdentityProvidersScreen.tsx
new file mode 100644
index 0000000000000..31901992b5f6e
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/IAMIdentityProvidersScreen.tsx
@@ -0,0 +1,145 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import styled from 'styled-components';
+
+import Flex from 'design/Flex';
+
+import { Stage } from '../stages';
+
+import { AWSWrapper, BreadcrumbArrow } from './SharedComponents';
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbItemActive,
+  Content,
+  NextButton,
+  Page,
+  Sidebar,
+  SidebarLink,
+  SidebarLinkActive,
+  SidebarSectionTitle,
+  SidebarTitle,
+  Title,
+} from './common';
+
+import type { CommonIAMProps } from './common';
+
+const Providers = styled.div`
+  display: flex;
+  margin-top: 20px;
+  width: calc(100% - 60px);
+`;
+
+const ProviderSection = styled.div`
+  flex: 1;
+`;
+
+const ProviderSectionTitle = styled.div`
+  background: linear-gradient(#eee, #e0e0e0);
+  padding: 5px 10px;
+  font-weight: 700;
+`;
+
+const ProviderTitle = styled.div`
+  padding: 5px 10px;
+  color: #16b;
+`;
+
+const ProviderSectionContent = styled.div`
+  padding: 5px 10px;
+`;
+
+export function IAMIdentityProvidersScreen(props: CommonIAMProps) {
+  if (props.stage >= Stage.ProviderAdded) {
+    return (
+      <AWSWrapper>
+        <Page>
+          <Content>
+            <Breadcrumb>
+              <BreadcrumbItem>IAM</BreadcrumbItem>
+              <BreadcrumbArrow />
+              <BreadcrumbItemActive>Identity providers</BreadcrumbItemActive>
+            </Breadcrumb>
+
+            <Flex mt={5} alignItems="center">
+              <Title style={{ marginBottom: 0 }}>Identity Providers (1)</Title>
+            </Flex>
+
+            <Providers>
+              <ProviderSection>
+                <ProviderSectionTitle>Provider</ProviderSectionTitle>
+
+                <ProviderTitle>{props.clusterPublicUri}</ProviderTitle>
+              </ProviderSection>
+              <ProviderSection>
+                <ProviderSectionTitle>Type</ProviderSectionTitle>
+
+                <ProviderSectionContent>OpenID Connect</ProviderSectionContent>
+              </ProviderSection>
+              <ProviderSection>
+                <ProviderSectionTitle>Creation time</ProviderSectionTitle>
+
+                <ProviderSectionContent>1 minute ago</ProviderSectionContent>
+              </ProviderSection>
+            </Providers>
+          </Content>
+        </Page>
+      </AWSWrapper>
+    );
+  }
+
+  return (
+    <AWSWrapper>
+      <Page>
+        <Sidebar>
+          <SidebarTitle>Identity and Access Management (IAM)</SidebarTitle>
+
+          <SidebarLink>Dashboard</SidebarLink>
+
+          <SidebarSectionTitle>Access Management</SidebarSectionTitle>
+
+          <SidebarLink>User groups</SidebarLink>
+          <SidebarLink>Users</SidebarLink>
+          <SidebarLink>Roles</SidebarLink>
+          <SidebarLinkActive>Identity providers</SidebarLinkActive>
+          <SidebarLink>Account settings</SidebarLink>
+
+          <SidebarSectionTitle>Access reports</SidebarSectionTitle>
+
+          <SidebarLink>Access analyzer</SidebarLink>
+          <SidebarLink>Credential report</SidebarLink>
+          <SidebarLink>Organization activity</SidebarLink>
+        </Sidebar>
+        <Content>
+          <Breadcrumb>
+            <BreadcrumbItem>IAM</BreadcrumbItem>
+            <BreadcrumbArrow />
+            <BreadcrumbItemActive>Identity providers</BreadcrumbItemActive>
+          </Breadcrumb>
+
+          <Flex mt={5} alignItems="center">
+            <Title style={{ marginBottom: 0 }}>Identity Providers (0)</Title>
+
+            <NextButton>Add provider</NextButton>
+          </Flex>
+        </Content>
+      </Page>
+    </AWSWrapper>
+  );
+}
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/IAMNewProviderScreen.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/IAMNewProviderScreen.tsx
new file mode 100644
index 0000000000000..558517783482d
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/IAMNewProviderScreen.tsx
@@ -0,0 +1,178 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import styled from 'styled-components';
+
+import Box from 'design/Box';
+import Flex from 'design/Flex';
+
+import { Stage } from '../stages';
+
+import { AWSWrapper, BreadcrumbArrow } from './SharedComponents';
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbItemActive,
+  Content,
+  Page,
+  Sidebar,
+  SidebarLink,
+  SidebarLinkActive,
+  SidebarSectionTitle,
+  SidebarTitle,
+  Title,
+} from './common';
+
+import { OpenIDForm } from './OpenIDForm';
+
+import type { CommonIAMProps } from './common';
+
+const ProviderType = styled.div<{ active: boolean }>`
+  flex: 0 0 220px;
+  border: 1px solid ${p => (p.active ? '#3388dd' : '#cccccc')};
+  background: ${p => (p.active ? '#f0f9ff' : 'white')};
+  border-radius: 5px;
+  display: flex;
+  margin-right: 10px;
+`;
+
+const ProviderTypeIconContainer = styled.div`
+  flex: 0 0 30px;
+  display: flex;
+  justify-content: center;
+  padding-top: 12px;
+`;
+
+const ProviderTypeIcon = styled.div`
+  width: 10px;
+  height: 10px;
+  background: ${p => (p.active ? '#1066bb' : 'white')};
+  border: 1px solid ${p => (p.active ? '#1066bb' : '#cccccc')};
+  border-radius: 50%;
+  position: relative;
+
+  &:after {
+    content: '';
+    visibility: ${p => (p.active ? 'visible' : 'hidden')};
+    position: absolute;
+    width: 5px;
+    height: 5px;
+    background: white;
+    border-radius: 50%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+`;
+
+const ProviderTypeInfo = styled.div`
+  padding: 10px 0;
+  font-size: 10px;
+  color: #999;
+  line-height: 12px;
+`;
+
+const ProviderTypeTitle = styled.div`
+  font-size: 14px;
+  line-height: 16px;
+  margin-bottom: 10px;
+  color: #444;
+`;
+
+const SlideOutPage = styled(Page)`
+  transition: 1s transform cubic-bezier(0.4, 0, 0.2, 1);
+  transform: translate3d(${p => (p.hidden ? -251 : 0)}px, 0, 0);
+`;
+
+export function IAMNewProviderScreen(props: CommonIAMProps) {
+  const sidebarHidden = props.stage !== Stage.NewProvider;
+  const openIDSelected = props.stage >= Stage.OpenIDConnectSelected;
+
+  return (
+    <AWSWrapper>
+      <SlideOutPage hidden={sidebarHidden}>
+        <Sidebar>
+          <SidebarTitle>Identity and Access Management (IAM)</SidebarTitle>
+
+          <SidebarLink>Dashboard</SidebarLink>
+
+          <SidebarSectionTitle>Access Management</SidebarSectionTitle>
+
+          <SidebarLink>User groups</SidebarLink>
+          <SidebarLink>Users</SidebarLink>
+          <SidebarLink>Roles</SidebarLink>
+          <SidebarLinkActive>Identity providers</SidebarLinkActive>
+          <SidebarLink>Account settings</SidebarLink>
+
+          <SidebarSectionTitle>Access reports</SidebarSectionTitle>
+
+          <SidebarLink>Access analyzer</SidebarLink>
+          <SidebarLink>Credential report</SidebarLink>
+          <SidebarLink>Organization activity</SidebarLink>
+        </Sidebar>
+        <Content>
+          <Breadcrumb>
+            <BreadcrumbItem>IAM</BreadcrumbItem>
+            <BreadcrumbArrow />
+            <BreadcrumbItem>Identity providers</BreadcrumbItem>
+            <BreadcrumbArrow />
+            <BreadcrumbItemActive>Create</BreadcrumbItemActive>
+          </Breadcrumb>
+
+          <Box mt={5}>
+            <Title>Add an Identity Provider </Title>
+          </Box>
+
+          <Flex>
+            <ProviderType active={!openIDSelected}>
+              <ProviderTypeIconContainer>
+                <ProviderTypeIcon active={!openIDSelected} />
+              </ProviderTypeIconContainer>
+
+              <ProviderTypeInfo>
+                <ProviderTypeTitle>SAML</ProviderTypeTitle>
+                Establish trust between your AWS account and a SAML 2.0
+                compatible Identity Provider such as Shibboleth or Active
+                Directory Federation Services.
+              </ProviderTypeInfo>
+            </ProviderType>
+
+            <ProviderType active={openIDSelected}>
+              <ProviderTypeIconContainer>
+                <ProviderTypeIcon active={openIDSelected} />
+              </ProviderTypeIconContainer>
+
+              <ProviderTypeInfo>
+                <ProviderTypeTitle>OpenID Connect</ProviderTypeTitle>
+                Establish trust between your AWS account and Identity Provider
+                services, such as Google or Salesforce.
+              </ProviderTypeInfo>
+            </ProviderType>
+          </Flex>
+
+          {openIDSelected && (
+            <OpenIDForm
+              stage={props.stage}
+              clusterPublicUri={props.clusterPublicUri}
+            />
+          )}
+        </Content>
+      </SlideOutPage>
+    </AWSWrapper>
+  );
+}
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/IAMProvider.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/IAMProvider.tsx
new file mode 100644
index 0000000000000..8af2b99067a97
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/IAMProvider.tsx
@@ -0,0 +1,143 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import styled from 'styled-components';
+
+import Flex from 'design/Flex';
+import Box from 'design/Box';
+
+import { Stage } from '../stages';
+
+import { AWSWrapper, BreadcrumbArrow } from './SharedComponents';
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbItemActive,
+  Content,
+  Page,
+  RoleButton,
+  Title,
+} from './common';
+
+import { AssignRoleModal } from './AssignRoleModal';
+
+import type { CommonIAMProps } from './common';
+
+const AWSHeader = styled.div`
+  font-weight: bold;
+  font-size: 18px;
+  margin-bottom: 10px;
+  display: flex;
+`;
+
+const AWSHeaderCount = styled.div`
+  font-weight: 400;
+  opacity: 0.5;
+  margin-left: 10px;
+`;
+
+const SummaryContent = styled.div`
+  display: flex;
+  border-top: 1px solid #cccccc;
+  padding-top: 10px;
+  margin-bottom: 40px;
+`;
+
+const SummaryItem = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-width: 200px;
+  border-right: 1px solid #ccc;
+  padding-left: 10px;
+
+  &:first-of-type {
+    padding: 0;
+  }
+
+  &:last-of-type {
+    border-right: none;
+  }
+`;
+
+export function IAMProvider(props: CommonIAMProps) {
+  const showAssignRoleModal = props.stage >= Stage.ShowAssignRoleModal;
+
+  return (
+    <AWSWrapper>
+      <Page>
+        {showAssignRoleModal && (
+          <AssignRoleModal clusterPublicUri={props.clusterPublicUri} />
+        )}
+
+        <Content>
+          <Breadcrumb>
+            <BreadcrumbItem>IAM</BreadcrumbItem>
+            <BreadcrumbArrow />
+            <BreadcrumbItem>Identity providers</BreadcrumbItem>
+            <BreadcrumbArrow />
+            <BreadcrumbItemActive>
+              {props.clusterPublicUri}
+            </BreadcrumbItemActive>
+          </Breadcrumb>
+
+          <Flex
+            mt={5}
+            alignItems="center"
+            justifyContent="space-between"
+            mb={5}
+          >
+            <Title style={{ marginBottom: 0 }}>{props.clusterPublicUri}</Title>
+
+            <RoleButton>Assign role</RoleButton>
+          </Flex>
+
+          <AWSHeader>Summary</AWSHeader>
+
+          <SummaryContent>
+            <SummaryItem>
+              Provider
+              <div style={{ marginTop: 10 }}>{props.clusterPublicUri}</div>
+            </SummaryItem>
+            <SummaryItem>
+              Provider Type
+              <div style={{ marginTop: 10 }}>OpenID Connect</div>
+            </SummaryItem>
+            <SummaryItem>
+              Creation Time
+              <div style={{ marginTop: 10 }}>1 minute ago</div>
+            </SummaryItem>
+          </SummaryContent>
+
+          <Flex justifyContent="space-between">
+            <Box width="48%">
+              <AWSHeader>
+                Audiences <AWSHeaderCount>(1)</AWSHeaderCount>
+              </AWSHeader>
+            </Box>
+
+            <Box width="48%">
+              <AWSHeader>
+                Thumbprints <AWSHeaderCount>(1)</AWSHeaderCount>
+              </AWSHeader>
+            </Box>
+          </Flex>
+        </Content>
+      </Page>
+    </AWSWrapper>
+  );
+}
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/IAMRoles.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/IAMRoles.tsx
new file mode 100644
index 0000000000000..0dd667b5b45af
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/IAMRoles.tsx
@@ -0,0 +1,176 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import styled from 'styled-components';
+
+import { Stage } from '../stages';
+
+import { AWSWrapper } from './SharedComponents';
+
+import { Content, Page } from './common';
+
+import type { CommonIAMProps } from './common';
+
+const RolesSuccess = styled.div`
+  background: #019934;
+  color: white;
+  padding: 10px 15px;
+  font-size: 16px;
+`;
+
+const RolesSuccessLink = styled.span`
+  text-decoration: underline;
+`;
+
+const RolesHeader = styled.div`
+  background-image: linear-gradient(#fff, #eee);
+  padding: 20px 20px;
+  border-top: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+  font-weight: bold;
+  font-size: 22px;
+`;
+
+const PoliciesTableHeader = styled.div`
+  background-image: linear-gradient(#eee, #e0e0e0);
+  padding: 10px 45px;
+  font-weight: bold;
+  border: 1px solid #ccc;
+  border-top: none;
+`;
+
+const PoliciesCheckBox = styled.div`
+  width: 10px;
+  height: 10px;
+  margin-right: 20px;
+  border-radius: 3px;
+`;
+
+const PoliciesTableItem = styled.div<{ selected?: boolean }>`
+  display: flex;
+  align-items: center;
+  padding: 10px 15px;
+  border-bottom: 1px solid #cccccc;
+  background: ${p => (p.selected ? '#e6f3ff' : 'white')};
+
+  ${PoliciesCheckBox} {
+    background: ${p => (p.selected ? '#1066bb' : 'white')};
+    border: 1px solid ${p => (p.selected ? '#1066bb' : '#cccccc')};
+  }
+`;
+
+const RoleName = styled.div`
+  font-size: 24px;
+`;
+
+const SummaryTitle = styled.div`
+  font-weight: bold;
+  font-size: 18px;
+  margin-top: 30px;
+`;
+
+const Summary = styled.div`
+  margin-top: 20px;
+  border-top: 1px solid #ccc;
+  display: flex;
+`;
+
+const SummarySection = styled.div`
+  margin-top: 5px;
+  flex: 1;
+  padding-top: 10px;
+`;
+
+const SectionLabel = styled.div`
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.6);
+`;
+
+const SectionValue = styled.div`
+  font-size: 16px;
+`;
+
+export function IAMRoles(props: CommonIAMProps) {
+  let content;
+  if (props.stage >= Stage.ListRoles && props.stage <= Stage.ClickRole) {
+    content = (
+      <div>
+        <RolesSuccess>
+          The role <RolesSuccessLink>SomeRoleName</RolesSuccessLink> has been
+          created
+        </RolesSuccess>
+        <Content>
+          <div>
+            <RolesHeader>Roles</RolesHeader>
+
+            <div>
+              <PoliciesTableHeader>Role Name</PoliciesTableHeader>
+              <PoliciesTableItem>
+                <PoliciesCheckBox />
+                AWSDefaultRole
+              </PoliciesTableItem>
+              <PoliciesTableItem>
+                <PoliciesCheckBox />
+                AWSDefaultRole2
+              </PoliciesTableItem>
+              <PoliciesTableItem>
+                <PoliciesCheckBox />
+                AWSDefaultRole3
+              </PoliciesTableItem>
+              <PoliciesTableItem>
+                <PoliciesCheckBox />
+                AWSDefaultRole4
+              </PoliciesTableItem>
+            </div>
+          </div>
+        </Content>
+      </div>
+    );
+  }
+
+  if (props.stage >= Stage.ViewRole) {
+    content = (
+      <Content>
+        <RoleName>SomeRoleName</RoleName>
+
+        <SummaryTitle>Summary</SummaryTitle>
+
+        <Summary>
+          <SummarySection style={{ borderRight: '1px solid #ccc' }}>
+            <SectionLabel>Creation Date</SectionLabel>
+            <SectionValue>Just now</SectionValue>
+
+            <SectionLabel>Lst activity</SectionLabel>
+            <SectionValue>None</SectionValue>
+          </SummarySection>
+          <SummarySection style={{ paddingLeft: '20px' }}>
+            <SectionLabel>ARN</SectionLabel>
+            <SectionValue>
+              arn:aws:iam::123456789:role/SomeRoleName
+            </SectionValue>
+          </SummarySection>
+        </Summary>
+      </Content>
+    );
+  }
+
+  return (
+    <AWSWrapper>
+      <Page>{content}</Page>
+    </AWSWrapper>
+  );
+}
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/OpenIDForm.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/OpenIDForm.tsx
new file mode 100644
index 0000000000000..d76130b9c7aba
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/OpenIDForm.tsx
@@ -0,0 +1,148 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import styled from 'styled-components';
+
+import { Stage } from '../stages';
+
+import { NextButton } from './common';
+
+import type { CommonIAMProps } from './common';
+
+const Form = styled.div`
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+`;
+
+const InputContainer = styled.div`
+  display: flex;
+  margin-bottom: 20px;
+`;
+
+const Button = styled.div`
+  background: linear-gradient(#fff, #dedede);
+  border: 1px solid #b8b8b8;
+  color: #444;
+  padding: 3px 7px;
+  border-radius: 5px;
+  font-weight: 700;
+  height: 32px;
+  box-sizing: border-box;
+`;
+
+const Input = styled.div`
+  font-size: 14px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  padding: 3px 7px;
+  height: 32px;
+  box-sizing: border-box;
+  width: 300px;
+  margin-right: 15px;
+  background: ${p => (p.disabled ? '#eeeeee' : 'white')};
+`;
+
+const ThumbprintContainer = styled.div`
+  background: #eeeeee;
+  border: 1px solid #cccccc;
+  padding: 7px 10px;
+  display: flex;
+  width: 400px;
+  margin-bottom: 20px;
+`;
+
+const ThumbprintSection = styled.div`
+  margin-right: 60px;
+`;
+
+const Thumbprint = styled.span`
+  background: ${p => (p.selected ? '#add0f7' : 'none')};
+`;
+
+const Buttons = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  width: calc(100% - 120px);
+  margin-top: 20px;
+`;
+
+export function OpenIDForm(props: CommonIAMProps) {
+  const providerURL =
+    props.stage >= Stage.PastedProviderURL
+      ? `https://${props.clusterPublicUri}`
+      : 'https://';
+  const audience =
+    props.stage >= Stage.PastedAudience ? 'discover.teleport' : '';
+
+  let providerDisabled = false;
+  let buttonText = 'Get thumbprint';
+  if (props.stage >= Stage.ThumbprintLoading) {
+    buttonText = 'Loading...';
+  }
+  if (props.stage >= Stage.ThumbprintResult) {
+    buttonText = 'Edit URL';
+    providerDisabled = true;
+  }
+
+  let fingerprintResult;
+  if (props.stage >= Stage.ThumbprintResult) {
+    fingerprintResult = (
+      <div>
+        <strong>Verify thumbprint</strong>
+
+        <ThumbprintContainer>
+          <ThumbprintSection>
+            <div>Thumbprint</div>
+
+            <Thumbprint selected={props.stage === Stage.ThumbprintSelected}>
+              examplevaluehere
+            </Thumbprint>
+          </ThumbprintSection>
+          <ThumbprintSection>
+            <div>Issued By</div>
+            Example Inc
+          </ThumbprintSection>
+        </ThumbprintContainer>
+      </div>
+    );
+  }
+
+  return (
+    <Form>
+      <div>Provider URL</div>
+
+      <InputContainer>
+        <Input disabled={providerDisabled}>{providerURL}</Input>
+
+        <Button>{buttonText}</Button>
+      </InputContainer>
+
+      {fingerprintResult}
+
+      <div>Audience</div>
+
+      <InputContainer>
+        <Input>{audience}</Input>
+      </InputContainer>
+
+      <Buttons>
+        <NextButton>Add provider</NextButton>
+      </Buttons>
+    </Form>
+  );
+}
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/SharedComponents.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/SharedComponents.tsx
new file mode 100644
index 0000000000000..14551a14145ce
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/SharedComponents.tsx
@@ -0,0 +1,76 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import styled from 'styled-components';
+
+import { AWSIcon, ChevronRightIcon } from 'design/SVGIcon';
+
+import useTeleport from 'teleport/useTeleport';
+
+import { BreadcrumbIconContainer } from './common';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 630px;
+  overflow: hidden;
+`;
+
+const Header = styled.div`
+  background: #232e3e;
+  height: 32px;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const HeaderLogo = styled.div`
+  height: 25px;
+`;
+
+const HeaderUsername = styled.div`
+  color: white;
+  font-size: 12px;
+`;
+
+export function BreadcrumbArrow() {
+  return (
+    <BreadcrumbIconContainer>
+      <ChevronRightIcon fill={'rgba(0, 0, 0, 0.8)'} size={10} />
+    </BreadcrumbIconContainer>
+  );
+}
+
+export function AWSWrapper(props: React.PropsWithChildren<unknown>) {
+  const ctx = useTeleport();
+
+  return (
+    <Container>
+      <Header>
+        <HeaderLogo>
+          <AWSIcon size={24} />
+        </HeaderLogo>
+
+        <HeaderUsername>{ctx.storeUser.state.username}</HeaderUsername>
+      </Header>
+
+      {props.children}
+    </Container>
+  );
+}
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/common.ts b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/common.ts
new file mode 100644
index 0000000000000..710e3fe644a08
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/common.ts
@@ -0,0 +1,222 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import styled from 'styled-components';
+
+import { Stage } from '../stages';
+
+export interface CommonIAMProps {
+  stage: Stage;
+  clusterPublicUri: string;
+}
+
+export const Header = styled.div`
+  font-size: 22px;
+  margin-bottom: 20px;
+  display: flex;
+`;
+
+export const Footer = styled.div`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 46px;
+  border-top: 1px solid #dcdcdc;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding-right: 30px;
+`;
+
+export const Page = styled.div`
+  display: flex;
+  flex: 1;
+`;
+
+export const Sidebar = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  flex: 0 0 250px;
+  width: 250px;
+  height: inherit;
+`;
+
+export const SidebarSectionTitle = styled.div`
+  font-weight: 700;
+  color: rgba(0, 0, 0, 0.5);
+  padding: 0 20px;
+  margin-top: 15px;
+  margin-bottom: 5px;
+`;
+
+export const SidebarTitle = styled.div`
+  font-size: 18px;
+  padding: 20px 20px;
+  font-weight: bold;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+  margin-bottom: 20px;
+`;
+
+export const SidebarLink = styled.div`
+  padding: 0 20px;
+  margin-bottom: 5px;
+  position: relative;
+  z-index: 2;
+`;
+
+export const SidebarLinkActive = styled(SidebarLink)`
+  color: #0073bb;
+  font-weight: 500;
+`;
+
+export const Content = styled.div`
+  padding: 30px;
+  box-sizing: border-box;
+  flex: 0 0 630px;
+  width: 630px;
+`;
+
+export const Title = styled.div`
+  font-size: 18px;
+  margin-bottom: 30px;
+`;
+
+export const Blur = styled.div`
+  filter: blur(5px);
+  width: 100%;
+`;
+
+export const Breadcrumb = styled.div`
+  display: flex;
+`;
+
+export const BreadcrumbItem = styled.div`
+  color: #0073bb;
+`;
+
+export const BreadcrumbItemActive = styled(BreadcrumbItem)`
+  font-weight: 700;
+  color: #687078;
+`;
+
+export const BreadcrumbIconContainer = styled.div`
+  margin: 0 10px;
+`;
+
+export const NextButton = styled.div`
+  background: linear-gradient(#2c8bea, #1267bc);
+  color: white;
+  padding: 5px 15px;
+  font-size: 14px;
+  font-weight: 700;
+  border-radius: 4px;
+  border: 1px solid #1d67b3;
+  margin-left: 12px;
+`;
+
+export const RoleButton = styled.div`
+  background: linear-gradient(#fff, #dedede);
+  color: #444;
+  padding: 5px 10px;
+  font-weight: 700;
+  border-radius: 4px;
+  border: 1px solid #b8b8b8;
+  width: 100px;
+  text-align: center;
+`;
+
+export const Section = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+`;
+
+export const SectionTitle = styled.div`
+  font-weight: bold;
+  width: 100px;
+  text-align: right;
+  padding-right: 15px;
+`;
+
+export const SectionContent = styled.div`
+  display: flex;
+  align-items: center;
+  width: 300px;
+  position: relative;
+`;
+
+export const SectionDropdown = styled.div`
+  position: relative;
+  width: 300px;
+`;
+
+export const SectionDropdownSelected = styled.div`
+  border: 1px solid #ccc;
+  padding: 5px 10px;
+  border-radius: 4px;
+`;
+
+export const SubHeader = styled.div`
+  font-size: 20px;
+  margin-bottom: 15px;
+  display: flex;
+  border-bottom: 1px solid #ccc;
+  padding-bottom: 5px;
+`;
+
+export const TableTitle = styled.div`
+  background: #e3e3e3;
+  border: 1px solid #cccccc;
+  padding: 13px 10px;
+`;
+
+export const TableSearch = styled.div`
+  background: white;
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  width: 200px;
+  padding: 3px 10px;
+`;
+
+export const TableHeader = styled.div`
+  background-image: linear-gradient(#eee, #e0e0e0);
+  padding: 10px 45px;
+  font-weight: bold;
+  border: 1px solid #ccc;
+  border-top: none;
+`;
+
+export const TableCheckBox = styled.div`
+  width: 10px;
+  height: 10px;
+  margin-right: 20px;
+  border-radius: 3px;
+`;
+
+export const TableItem = styled.div<{ selected?: boolean }>`
+  display: flex;
+  align-items: center;
+  padding: 10px 15px;
+  border-bottom: 1px solid #cccccc;
+  background: ${p => (p.selected ? '#e6f3ff' : 'white')};
+
+  ${TableCheckBox} {
+    background: ${p => (p.selected ? '#1066bb' : 'white')};
+    border: 1px solid ${p => (p.selected ? '#1066bb' : '#ccc')};
+  }
+`;
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/browser/Browser.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/browser/Browser.tsx
new file mode 100644
index 0000000000000..2ee9c28f3d306
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/browser/Browser.tsx
@@ -0,0 +1,121 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import { AddIcon, LockIcon } from 'design/SVGIcon';
+
+import {
+  BrowserContainer,
+  BrowserContentContainer,
+  BrowserTab,
+  BrowserTabClose,
+  BrowserTabFavicon,
+  BrowserTabs,
+  BrowserTabTitle,
+  BrowserTitleBarButton,
+  BrowserTitleBarButtons,
+  BrowserTitleBarContainer,
+  BrowserURL,
+  BrowserURLContainer,
+  BrowserURLIcon,
+} from 'teleport/Integrations/Enroll/AwsOidc/browser/BrowserComponents';
+
+import { Stage } from 'teleport/Integrations/Enroll/AwsOidc/stages';
+
+interface BrowserProps {
+  stage: Stage;
+}
+
+export function Browser(props: React.PropsWithChildren<BrowserProps>) {
+  const tabs = [];
+  if (props.stage >= Stage.CreateNewRole) {
+    tabs.push(
+      <BrowserTab
+        active={
+          props.stage <= Stage.ClickCreatePolicy ||
+          props.stage >= Stage.AssignPolicyToRole
+        }
+        key="create-role"
+      >
+        <BrowserTabFavicon />
+        <BrowserTabTitle>
+          {props.stage >= Stage.ListRoles ? 'Roles' : 'Create role'}
+        </BrowserTabTitle>
+        <BrowserTabClose>
+          <AddIcon size={14} />
+        </BrowserTabClose>
+      </BrowserTab>
+    );
+  }
+
+  if (
+    props.stage >= Stage.CreatePolicy &&
+    props.stage <= Stage.ClickCreatePolicyButton
+  ) {
+    tabs.push(
+      <BrowserTab active={true} key="create-policy">
+        <BrowserTabFavicon />
+        <BrowserTabTitle>Create policy</BrowserTabTitle>
+        <BrowserTabClose>
+          <AddIcon size={14} />
+        </BrowserTabClose>
+      </BrowserTab>
+    );
+  }
+
+  //<BrowserTab active={true}>
+  //       <BrowserTabFavicon />
+  //       <BrowserTabTitle>Create policy</BrowserTabTitle>
+  //       <BrowserTabClose>
+  //         <AddIcon size={14} />
+  //       </BrowserTabClose>
+  //     </BrowserTab>
+
+  return (
+    <BrowserContainer>
+      <BrowserTitleBarContainer>
+        <BrowserTitleBarButtons>
+          <BrowserTitleBarButton style={{ backgroundColor: '#f95e57' }} />
+          <BrowserTitleBarButton style={{ backgroundColor: '#fbbe2e' }} />
+          <BrowserTitleBarButton style={{ backgroundColor: '#31c842' }} />
+        </BrowserTitleBarButtons>
+
+        <BrowserURLContainer>
+          <BrowserURL>
+            <BrowserURLIcon>
+              <LockIcon size={12} />
+            </BrowserURLIcon>
+            console.aws.amazon.com
+          </BrowserURL>
+        </BrowserURLContainer>
+      </BrowserTitleBarContainer>
+
+      <BrowserTabs>
+        <BrowserTab>
+          <BrowserTabFavicon />
+          <BrowserTabTitle>IAM Management Console</BrowserTabTitle>
+          <BrowserTabClose>
+            <AddIcon size={14} />
+          </BrowserTabClose>
+        </BrowserTab>
+        {tabs}
+      </BrowserTabs>
+
+      <BrowserContentContainer>{props.children}</BrowserContentContainer>
+    </BrowserContainer>
+  );
+}
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/browser/BrowserComponents.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/browser/BrowserComponents.tsx
new file mode 100644
index 0000000000000..484424df9cd99
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/browser/BrowserComponents.tsx
@@ -0,0 +1,129 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import styled from 'styled-components';
+
+import favicon from './favicon.png';
+
+export const BrowserContainer = styled.div`
+  position: relative;
+  border-radius: 5px;
+  width: 100%;
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.43);
+`;
+
+export const BrowserTitleBarContainer = styled.div`
+  background: #040b1d;
+  height: 60px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+`;
+
+export const BrowserTitleBarButtons = styled.div`
+  display: flex;
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  transform: translate(0, -50%);
+`;
+
+export const BrowserTitleBarButton = styled.div`
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin-right: 5px;
+`;
+
+export const BrowserContentContainer = styled.div`
+  background: white;
+  color: black;
+  height: var(--content-height, 660px);
+  overflow-y: auto;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+`;
+
+export const BrowserCode = styled.div`
+  font-size: 12px;
+  font-family: Menlo, DejaVu Sans Mono, Consolas, Lucida Console, monospace;
+  line-height: 20px;
+  white-space: pre-wrap;
+`;
+
+export const BrowserURLContainer = styled.div`
+  padding: 4px 10px;
+  width: 300px;
+  text-align: center;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const BrowserURL = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const BrowserURLIcon = styled.div`
+  margin-right: 5px;
+  top: 2px;
+  position: relative;
+`;
+
+export const BrowserTabs = styled.div`
+  display: flex;
+  background: #060b1d;
+  height: 36px;
+`;
+
+export const BrowserTabFavicon = styled.div`
+  margin-right: 10px;
+  width: 16px;
+  height: 16px;
+  background: url(${favicon}) no-repeat;
+`;
+
+export const BrowserTabClose = styled.div`
+  margin-left: 10px;
+  svg {
+    position: relative;
+    top: 2px;
+    transform: rotate(45deg);
+  }
+`;
+
+export const BrowserTab = styled.div<{ active: boolean }>`
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  background: ${p => (p.active ? 'rgba(255, 255, 255, 0.1)' : 'none')};
+  border-top-left-radius: ${p => (p.active ? '7px' : '0')};
+  border-top-right-radius: ${p => (p.active ? '7px' : '0')};
+  margin-right: 10px;
+
+  ${BrowserTabClose} {
+    display: ${p => (p.active ? 'block' : 'none')};
+  }
+`;
+export const BrowserTabTitle = styled.div`
+  font-size: 13px;
+`;
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/browser/Cursor.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/browser/Cursor.tsx
new file mode 100644
index 0000000000000..e658d67de5d19
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/browser/Cursor.tsx
@@ -0,0 +1,146 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useEffect, useState } from 'react';
+import styled, { keyframes } from 'styled-components';
+
+import { SVGIconProps } from 'design/SVGIcon/common';
+
+const Container = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  pointer-events: none;
+`;
+
+const CursorContainer = styled.div`
+  position: absolute;
+  transition: 0.3s linear;
+`;
+
+interface CursorProps {
+  top: number;
+  left: number;
+  click: boolean;
+}
+
+const pulse = keyframes`
+  0% {
+    transform: scale(0.1, 0.1);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.6, 1.6);
+    opacity: 0;
+  }
+`;
+
+const fadeIn = keyframes`
+  0% {
+    opacity: 0;
+  }
+  
+  20% {
+    opacity: 1;
+  }
+  
+  80% {
+    opacity: 1;
+  }
+  
+  100% { 
+    opacity: 0;
+  }
+`;
+
+export const Pulse = styled.div`
+  background: #abc6e4;
+  opacity: 0.5;
+  border-radius: 50%;
+  height: 14px;
+  width: 14px;
+  position: absolute;
+  left: 8px;
+  top: 3px;
+  z-index: 2;
+  animation: ${fadeIn} 2s ease-in forwards;
+
+  &:after {
+    content: '';
+    border-radius: 50%;
+    height: 40px;
+    width: 40px;
+    opacity: 0;
+    box-shadow: 0 0 1px 2px #abc6e4;
+    position: absolute;
+    margin: -13px 0 0 -13px;
+    animation: ${pulse} 2s ease-out infinite;
+  }
+`;
+
+export function Cursor(props: CursorProps) {
+  const [showPulse, setShowPulse] = useState(false);
+
+  useEffect(() => {
+    if (!props.click) {
+      return;
+    }
+
+    const id = window.setTimeout(() => setShowPulse(true), 1000);
+    const id2 = window.setTimeout(() => setShowPulse(false), 3000);
+
+    return () => {
+      clearTimeout(id);
+      clearTimeout(id2);
+    };
+  }, [props.top, props.left, props.click]);
+
+  return (
+    <Container>
+      <CursorContainer style={{ top: props.top, left: props.left }}>
+        <div style={{ position: 'relative', zIndex: 3 }}>
+          <CursorIcon />
+        </div>
+
+        {showPulse && props.click && <Pulse />}
+      </CursorContainer>
+    </Container>
+  );
+}
+
+function CursorIcon({ size = 40, fill = 'white' }: SVGIconProps) {
+  return (
+    <svg
+      viewBox="0 0 48 48"
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill={fill}
+    >
+      <path d="M27.8,39.7c-0.1,0-0.2,0-0.4-0.1c-0.2-0.1-0.4-0.3-0.6-0.5l-3.7-8.6l-4.5,4.2C18.5,34.9,18.3,35,18,35c-0.1,0-0.3,0-0.4-0.1C17.3,34.8,17,34.4,17,34l0-22c0-0.4,0.2-0.8,0.6-0.9C17.7,11,17.9,11,18,11c0.2,0,0.5,0.1,0.7,0.3l16,15c0.3,0.3,0.4,0.7,0.3,1.1c-0.1,0.4-0.5,0.6-0.9,0.7l-6.3,0.6l3.9,8.5c0.1,0.2,0.1,0.5,0,0.8c-0.1,0.2-0.3,0.5-0.5,0.6l-2.9,1.3C28.1,39.7,27.9,39.7,27.8,39.7z" />
+      <path
+        fill="#212121"
+        d="M18,12l16,15l-7.7,0.7l4.5,9.8l-2.9,1.3l-4.3-9.9L18,34L18,12 M18,10c-0.3,0-0.5,0.1-0.8,0.2c-0.7,0.3-1.2,1-1.2,1.8l0,22c0,0.8,0.5,1.5,1.2,1.8C17.5,36,17.8,36,18,36c0.5,0,1-0.2,1.4-0.5l3.4-3.2l3.1,7.3c0.2,0.5,0.6,0.9,1.1,1.1c0.2,0.1,0.5,0.1,0.7,0.1c0.3,0,0.5-0.1,0.8-0.2l2.9-1.3c0.5-0.2,0.9-0.6,1.1-1.1c0.2-0.5,0.2-1.1,0-1.5l-3.3-7.2l4.9-0.4c0.8-0.1,1.5-0.6,1.7-1.3c0.3-0.7,0.1-1.6-0.5-2.1l-16-15C19,10.2,18.5,10,18,10L18,10z"
+      />
+    </svg>
+  );
+}
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/browser/favicon.png b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/browser/favicon.png
new file mode 100644
index 0000000000000..18151df75eb74
Binary files /dev/null and b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/browser/favicon.png differ
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/index.ts b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/index.ts
new file mode 100644
index 0000000000000..fc9f91c3f8273
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/index.ts
@@ -0,0 +1,18 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// export as default for use with React.lazy
+export { AwsOidc as default } from './AwsOidc';
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/FifthStageInstructions.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/FifthStageInstructions.tsx
new file mode 100644
index 0000000000000..35966bb6ba8b4
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/FifthStageInstructions.tsx
@@ -0,0 +1,65 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import Text from 'design/Text';
+import { ButtonPrimary } from 'design';
+import Box from 'design/Box';
+
+import { TextSelectCopyMulti } from 'teleport/components/TextSelectCopy';
+
+import { InstructionsContainer } from './common';
+
+import type { CommonInstructionsProps } from './common';
+
+export function FifthStageInstructions(props: CommonInstructionsProps) {
+  const policy = `{
+    "Version": "2012-10-17",
+    "Statement": [
+        {
+            "Effect": "Allow",
+            "Action": "rds:DescribeDBInstances",
+            "Resource": "*"
+        }
+    ]
+}`;
+
+  return (
+    <InstructionsContainer>
+      <Text>
+        Select the <strong>JSON</strong> tab
+      </Text>
+
+      <Text mt={5}>
+        Replace the JSON with the following
+        <TextSelectCopyMulti lines={[{ text: policy }]} bash={false} />
+      </Text>
+
+      <Text mt={5}>
+        Click <strong>Next: Tags</strong> and then <strong>Next: Review</strong>
+      </Text>
+
+      <Text mt={5}>
+        Give the policy a name and then click <strong>Create policy</strong>
+      </Text>
+
+      <Box mt={5}>
+        <ButtonPrimary onClick={() => props.onNext()}>Next</ButtonPrimary>
+      </Box>
+    </InstructionsContainer>
+  );
+}
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/FirstStageInstructions.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/FirstStageInstructions.tsx
new file mode 100644
index 0000000000000..376fbbd1b985d
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/FirstStageInstructions.tsx
@@ -0,0 +1,52 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import styled from 'styled-components';
+
+import Box from 'design/Box';
+
+import { ButtonPrimary } from 'design';
+
+import { InstructionsContainer } from './common';
+
+import type { CommonInstructionsProps } from './common';
+
+const InstructionBlock = styled.div`
+  margin-bottom: 30px;
+`;
+
+export function FirstStageInstructions(props: CommonInstructionsProps) {
+  return (
+    <InstructionsContainer>
+      <InstructionBlock>
+        To connect Teleport to AWS as an identity provider, go to the{' '}
+        <strong>AWS Management Console</strong>
+      </InstructionBlock>
+      <InstructionBlock>
+        Search for <strong>IAM</strong>, and then click on{' '}
+        <strong>Identity providers</strong>
+      </InstructionBlock>
+      <InstructionBlock>
+        After that, click on <strong>Add Provider</strong>
+      </InstructionBlock>
+
+      <Box mt={5}>
+        <ButtonPrimary onClick={() => props.onNext()}>Next</ButtonPrimary>
+      </Box>
+    </InstructionsContainer>
+  );
+}
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/FourthStageInstructions.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/FourthStageInstructions.tsx
new file mode 100644
index 0000000000000..5846e1f8b2e3d
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/FourthStageInstructions.tsx
@@ -0,0 +1,48 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import Text from 'design/Text';
+import Box from 'design/Box';
+
+import { ButtonPrimary } from 'design';
+
+import { InstructionsContainer } from './common';
+
+import type { CommonInstructionsProps } from './common';
+
+export function FourthStageInstructions(props: CommonInstructionsProps) {
+  return (
+    <InstructionsContainer>
+      <Text>
+        Select <strong>discover.teleport</strong> as the audience for the role
+      </Text>
+
+      <Text mt={5}>
+        Then click on <strong>Next: Permissions</strong>
+      </Text>
+
+      <Text mt={5}>
+        From the permissions page, click on <strong>Create policy</strong>
+      </Text>
+
+      <Box mt={5}>
+        <ButtonPrimary onClick={() => props.onNext()}>Next</ButtonPrimary>
+      </Box>
+    </InstructionsContainer>
+  );
+}
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/Instructions.story.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/Instructions.story.tsx
new file mode 100644
index 0000000000000..4125dae4d58c1
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/Instructions.story.tsx
@@ -0,0 +1,68 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+
+import { FirstStageInstructions } from './FirstStageInstructions';
+import { SecondStageInstructions } from './SecondStageInstructions';
+import { ThirdStageInstructions } from './ThirdStageInstructions';
+import { FourthStageInstructions } from './FourthStageInstructions';
+import { FifthStageInstructions } from './FifthStageInstructions';
+import { SixthStageInstructions } from './SixthStageInstructions';
+import {
+  SeventhStageInstructions,
+  SuccessfullyAddedIntegrationDialog,
+} from './SeventhStageInstructions';
+
+export default {
+  title: 'Teleport/Integrations/Enroll/AwsOidc/Instructions',
+};
+
+export const Step1 = () => <FirstStageInstructions {...props} />;
+export const Step2 = () => <SecondStageInstructions {...props} />;
+export const Step3 = () => <ThirdStageInstructions {...props} />;
+export const Step4 = () => <FourthStageInstructions {...props} />;
+export const Step5 = () => <FifthStageInstructions {...props} />;
+export const Step6 = () => <SixthStageInstructions {...props} />;
+export const Step7 = () => (
+  <MemoryRouter>
+    <SeventhStageInstructions />
+  </MemoryRouter>
+);
+
+export const ConfirmDialog = () => (
+  <MemoryRouter>
+    <SuccessfullyAddedIntegrationDialog
+      discoverEventId=""
+      integrationName="some-integration-name"
+    />
+  </MemoryRouter>
+);
+
+export const ConfirmDialogFromDiscover = () => (
+  <MemoryRouter>
+    <SuccessfullyAddedIntegrationDialog
+      discoverEventId="some-event-id"
+      integrationName="some-integration-name"
+    />
+  </MemoryRouter>
+);
+
+const props = {
+  onNext: () => null,
+  clusterPublicUri: 'gravitationalwashington.cloud.gravitional.io:4444',
+};
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/SecondStageInstructions.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/SecondStageInstructions.tsx
new file mode 100644
index 0000000000000..324fdfdac500f
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/SecondStageInstructions.tsx
@@ -0,0 +1,112 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState } from 'react';
+
+import Text from 'design/Text';
+import Box from 'design/Box';
+
+import { ButtonPrimary } from 'design';
+
+import FieldInput from 'shared/components/FieldInput';
+import Validation, { Validator } from 'shared/components/Validation';
+
+import { requiredField } from 'shared/components/Validation/rules';
+
+import { TextSelectCopyMulti } from 'teleport/components/TextSelectCopy';
+
+import { InstructionsContainer } from './common';
+
+import type { CommonInstructionsProps } from './common';
+
+export function SecondStageInstructions(props: CommonInstructionsProps) {
+  const [thumbprint, setThumbprint] = useState('');
+
+  function handleSubmit(validator: Validator) {
+    if (!validator.validate()) {
+      return;
+    }
+
+    // TODO(lisa): validate thumbprint with the back.
+    // This is a nice to have, so not a blocker.
+    props.onNext();
+  }
+
+  return (
+    <InstructionsContainer>
+      <Text>
+        Now select <strong>OpenID Connect</strong>
+      </Text>
+
+      <Text mt={5}>
+        Copy the following into <strong>Provider URL</strong>
+      </Text>
+
+      <Box mt={5}>
+        <TextSelectCopyMulti
+          bash={false}
+          lines={[
+            {
+              text: `https://${props.clusterPublicUri}`,
+            },
+          ]}
+        />
+      </Box>
+
+      <Text mt={5}>
+        Copy the following into <strong>Audience</strong>
+      </Text>
+
+      <Box mt={5}>
+        <TextSelectCopyMulti
+          bash={false}
+          lines={[
+            {
+              text: 'discover.teleport',
+            },
+          ]}
+        />
+      </Box>
+
+      <Text mt={5}>
+        Then, click <strong>Get thumbprint</strong>
+      </Text>
+
+      <Text mt={5}>Paste the thumbprint below for verification</Text>
+
+      <Validation>
+        {({ validator }) => (
+          <>
+            <Box mt={2}>
+              <FieldInput
+                label="thumbprint"
+                onChange={e => setThumbprint(e.target.value)}
+                value={thumbprint}
+                placeholder="Paste the thumbprint here"
+                rule={requiredField('Thumbprint is required')}
+              />
+            </Box>
+            <Box mt={5}>
+              <ButtonPrimary onClick={() => handleSubmit(validator)}>
+                Next
+              </ButtonPrimary>
+            </Box>
+          </>
+        )}
+      </Validation>
+    </InstructionsContainer>
+  );
+}
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/SeventhStageInstructions.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/SeventhStageInstructions.tsx
new file mode 100644
index 0000000000000..db9c2ec456f0a
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/SeventhStageInstructions.tsx
@@ -0,0 +1,175 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState } from 'react';
+import { useLocation } from 'react-router';
+import { Link } from 'react-router-dom';
+import { Danger } from 'design/Alert';
+import { CircleCheck } from 'design/Icon';
+import { ButtonPrimary, ButtonSecondary, Text, Flex, Box } from 'design';
+import Dialog, {
+  DialogHeader,
+  DialogContent,
+  DialogFooter,
+} from 'design/Dialog';
+
+import FieldInput from 'shared/components/FieldInput';
+import Validation, { Validator } from 'shared/components/Validation';
+import useAttempt from 'shared/hooks/useAttemptNext';
+
+import { requiredField } from 'shared/components/Validation/rules';
+
+import {
+  IntegrationKind,
+  integrationService,
+} from 'teleport/services/integrations';
+import cfg from 'teleport/config';
+
+import { InstructionsContainer } from './common';
+
+export function SeventhStageInstructions() {
+  const location = useLocation<{ discoverEventId: string }>();
+
+  const { attempt, setAttempt } = useAttempt('');
+  const [showConfirmBox, setShowConfirmBox] = useState(false);
+  const [roleArn, setRoleArn] = useState('');
+  const [name, setName] = useState('');
+
+  function handleSubmit(validator: Validator) {
+    if (!validator.validate()) {
+      return;
+    }
+
+    setAttempt({ status: 'processing' });
+    integrationService
+      .createIntegration({
+        name,
+        subKind: IntegrationKind.AwsOidc,
+        awsoidc: { roleArn },
+      })
+      .then(() => setShowConfirmBox(true))
+      .catch((err: Error) =>
+        setAttempt({ status: 'failed', statusText: err.message })
+      );
+  }
+
+  return (
+    <InstructionsContainer>
+      {attempt.status === 'failed' && (
+        <Danger mb={5}>{attempt.statusText}</Danger>
+      )}
+      <Text>From the list of roles, select the role you just created</Text>
+
+      <Validation>
+        {({ validator }) => (
+          <>
+            <Text mt={5}>Copy the role ARN and paste it below</Text>
+            <Box mt={2}>
+              <FieldInput
+                label="Role ARN"
+                onChange={e => setRoleArn(e.target.value)}
+                value={roleArn}
+                placeholder="Role ARN"
+                rule={requiredField('Role ARN is required')}
+              />
+            </Box>
+            <Text mt={5}>Give this AWS integration a name</Text>
+            <Box mt={2}>
+              <FieldInput
+                label="Name"
+                onChange={e => setName(e.target.value)}
+                value={name}
+                placeholder="Integration name"
+                rule={requiredField('Name is required')}
+              />
+            </Box>
+            <Box mt={5}>
+              <ButtonPrimary
+                onClick={() => handleSubmit(validator)}
+                disabled={attempt.status === 'processing'}
+              >
+                Next
+              </ButtonPrimary>
+            </Box>
+          </>
+        )}
+      </Validation>
+      {showConfirmBox && (
+        <SuccessfullyAddedIntegrationDialog
+          discoverEventId={location.state?.discoverEventId}
+          integrationName={name}
+        />
+      )}
+    </InstructionsContainer>
+  );
+}
+
+export function SuccessfullyAddedIntegrationDialog({
+  discoverEventId,
+  integrationName,
+}: {
+  discoverEventId: string;
+  integrationName: string;
+}) {
+  return (
+    <Dialog
+      dialogCss={() => ({ maxWidth: '500px', width: '100%' })}
+      disableEscapeKeyDown={true}
+      onClose={close}
+      open={true}
+    >
+      <DialogHeader css={{ margin: '0 auto' }}>
+        <CircleCheck mb={4} fontSize={60} color="success" />
+      </DialogHeader>
+      <DialogContent>
+        <Text textAlign="center">
+          AWS integration "{integrationName}" successfully added
+        </Text>
+      </DialogContent>
+      <DialogFooter css={{ margin: '0 auto' }}>
+        {discoverEventId ? (
+          <ButtonPrimary
+            size="large"
+            as={Link}
+            to={{
+              pathname: cfg.routes.discover,
+              state: {
+                integrationSubKind: IntegrationKind.AwsOidc,
+                integrationName,
+                discoverEventId,
+              },
+            }}
+          >
+            Begin RDS Enrollment
+          </ButtonPrimary>
+        ) : (
+          <Flex gap="3">
+            <ButtonPrimary as={Link} to={cfg.routes.integrations} size="large">
+              Go to Integration List
+            </ButtonPrimary>
+            <ButtonSecondary
+              as={Link}
+              to={cfg.getIntegrationEnrollRoute(null)}
+              size="large"
+            >
+              Add Another Integration
+            </ButtonSecondary>
+          </Flex>
+        )}
+      </DialogFooter>
+    </Dialog>
+  );
+}
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/SixthStageInstructions.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/SixthStageInstructions.tsx
new file mode 100644
index 0000000000000..240dca368be3a
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/SixthStageInstructions.tsx
@@ -0,0 +1,52 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import Box from 'design/Box';
+import Text from 'design/Text';
+
+import { ButtonPrimary } from 'design';
+
+import { InstructionsContainer } from './common';
+
+import type { CommonInstructionsProps } from './common';
+
+export function SixthStageInstructions(props: CommonInstructionsProps) {
+  return (
+    <InstructionsContainer>
+      <Text>Close the "Create policy tab"</Text>
+
+      <Text mt={5}>
+        Refresh the list of policies and select the policy you just created
+      </Text>
+
+      <Text mt={5}>Search for the policy you just created and select it</Text>
+
+      <Text mt={5}>
+        Click <strong>Next: Tags</strong> and then <strong>Next: Review</strong>
+      </Text>
+
+      <Text mt={5}>
+        Give the role a name and then click <strong>Create role</strong>
+      </Text>
+
+      <Box mt={5}>
+        <ButtonPrimary onClick={() => props.onNext()}>Next</ButtonPrimary>
+      </Box>
+    </InstructionsContainer>
+  );
+}
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/ThirdStageInstructions.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/ThirdStageInstructions.tsx
new file mode 100644
index 0000000000000..d96c76576907c
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/ThirdStageInstructions.tsx
@@ -0,0 +1,49 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import Text from 'design/Text';
+import Box from 'design/Box';
+
+import { ButtonPrimary } from 'design';
+
+import { InstructionsContainer } from './common';
+
+import type { CommonInstructionsProps } from './common';
+
+export function ThirdStageInstructions(props: CommonInstructionsProps) {
+  return (
+    <InstructionsContainer>
+      <Text>
+        Now click <strong>Add Provider</strong>
+      </Text>
+
+      <Text mt={5}>
+        Select the Identity provider that you just created{' '}
+        <strong>({props.clusterPublicUri})</strong>
+      </Text>
+
+      <Text mt={5}>
+        Select <strong>Assign role</strong> and create a new role
+      </Text>
+
+      <Box mt={5}>
+        <ButtonPrimary onClick={() => props.onNext()}>Next</ButtonPrimary>
+      </Box>
+    </InstructionsContainer>
+  );
+}
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/common.ts b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/common.ts
new file mode 100644
index 0000000000000..007672122aa1d
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/common.ts
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import styled from 'styled-components';
+
+export interface CommonInstructionsProps {
+  onNext: () => void;
+  clusterPublicUri: string;
+}
+
+export const InstructionsContainer = styled.div`
+  flex: 0 0 600px;
+  padding-right: 100px;
+`;
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/stages.ts b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/stages.ts
new file mode 100644
index 0000000000000..c8e290064b826
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/stages.ts
@@ -0,0 +1,621 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export enum Stage {
+  Initial,
+  ClickIdentityProviders,
+  IdentityProviders,
+  ClickAddProvider,
+  NewProvider,
+  NewProviderFullScreen,
+  SelectOpenIDConnect,
+  OpenIDConnectSelected,
+  ClickProviderURL,
+  PastedProviderURL,
+  ClickAudience,
+  PastedAudience,
+  ClickGetThumbprint,
+  ThumbprintLoading,
+  ThumbprintResult,
+  SelectThumbprint,
+  ThumbprintSelected,
+  AddProvider,
+  ProviderAdded,
+  SelectProvider,
+  ProviderView,
+  ClickAssignRole,
+  ShowAssignRoleModal,
+  ClickCreateNewRole,
+  CreateNewRole,
+  SelectAudienceDropdown,
+  ShowAudienceDropdown,
+  ClickDiscoverAudience,
+  DiscoverAudienceSelected,
+  ClickNextPermissions,
+  ConfigureRolePermissions,
+  ClickCreatePolicy,
+  CreatePolicy,
+  ClickJSONTab,
+  ShowJSONEditor,
+  SelectJSONContents,
+  JSONContentsSelected,
+  PolicyJSONPasted,
+  PolicyClickNextTags,
+  PolicyTags,
+  PolicyClickNextReview,
+  PolicyReview,
+  ClickPolicyName,
+  PolicyHasName,
+  ClickCreatePolicyButton,
+  AssignPolicyToRole,
+  ClickRefreshButton,
+  PoliciesLoaded,
+  ClickSearchBox,
+  SearchForPolicy,
+  SelectPolicy,
+  PolicySelected,
+  RoleClickNextTags,
+  RoleTags,
+  RoleClickNextReview,
+  RoleReview,
+  ClickRoleName,
+  RoleHasName,
+  ClickCreateRoleButton,
+  ListRoles,
+  ClickRole,
+  ViewRole,
+}
+
+interface StageItem {
+  kind: Stage;
+  cursor: {
+    top: number;
+    left: number;
+    click?: boolean;
+  };
+  duration?: number;
+  end?: boolean;
+}
+
+export const STAGES: StageItem[] = [
+  {
+    kind: Stage.Initial,
+    cursor: {
+      top: 236,
+      left: 200,
+      click: false,
+    },
+    duration: 2000,
+  },
+  {
+    kind: Stage.ClickIdentityProviders,
+    cursor: {
+      top: 401,
+      left: 60,
+      click: true,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.IdentityProviders,
+    cursor: {
+      top: 401,
+      left: 200,
+    },
+    duration: 2000,
+  },
+  {
+    kind: Stage.ClickAddProvider,
+    cursor: {
+      top: 221,
+      left: 530,
+      click: true,
+    },
+    duration: 1500,
+  },
+  {
+    kind: Stage.NewProvider,
+    cursor: {
+      top: 221,
+      left: 530,
+    },
+    end: true,
+  },
+  {
+    kind: Stage.NewProviderFullScreen,
+    cursor: {
+      top: 221,
+      left: 530,
+    },
+    duration: 1500,
+  },
+  {
+    kind: Stage.SelectOpenIDConnect,
+    cursor: {
+      top: 281,
+      left: 350,
+      click: true,
+    },
+    duration: 2000,
+  },
+  {
+    kind: Stage.OpenIDConnectSelected,
+    cursor: {
+      top: 281,
+      left: 350,
+    },
+    duration: 2000,
+  },
+  {
+    kind: Stage.ClickProviderURL,
+    cursor: {
+      top: 416,
+      left: 160,
+      click: true,
+    },
+    duration: 1500,
+  },
+  {
+    kind: Stage.PastedProviderURL,
+    cursor: {
+      top: 416,
+      left: 160,
+    },
+    duration: 1500,
+  },
+  {
+    kind: Stage.ClickAudience,
+    cursor: {
+      top: 491,
+      left: 160,
+      click: true,
+    },
+    duration: 1500,
+  },
+  {
+    kind: Stage.PastedAudience,
+    cursor: {
+      top: 491,
+      left: 160,
+      click: true,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.ClickGetThumbprint,
+    cursor: {
+      top: 416,
+      left: 400,
+      click: true,
+    },
+    duration: 1000,
+  },
+  {
+    kind: Stage.ThumbprintLoading,
+    cursor: {
+      top: 416,
+      left: 400,
+    },
+    duration: 1000,
+  },
+  {
+    kind: Stage.ThumbprintResult,
+    cursor: {
+      top: 416,
+      left: 400,
+    },
+    duration: 1500,
+  },
+  {
+    kind: Stage.SelectThumbprint,
+    cursor: {
+      top: 516,
+      left: 100,
+      click: true,
+    },
+    duration: 1500,
+  },
+  {
+    kind: Stage.ThumbprintSelected,
+    cursor: {
+      top: 516,
+      left: 100,
+    },
+    end: true,
+  },
+  {
+    kind: Stage.AddProvider,
+    cursor: {
+      top: 666,
+      left: 420,
+      click: true,
+    },
+    duration: 2000,
+  },
+  {
+    kind: Stage.ProviderAdded,
+    cursor: {
+      top: 516,
+      left: 300,
+    },
+    duration: 2000,
+  },
+  {
+    kind: Stage.SelectProvider,
+    cursor: {
+      top: 301,
+      left: 70,
+      click: true,
+    },
+    duration: 1500,
+  },
+  {
+    kind: Stage.ProviderView,
+    cursor: {
+      top: 301,
+      left: 70,
+    },
+    duration: 1500,
+  },
+  {
+    kind: Stage.ClickAssignRole,
+    cursor: {
+      top: 221,
+      left: 535,
+      click: true,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.ShowAssignRoleModal,
+    cursor: {
+      top: 221,
+      left: 535,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.ClickCreateNewRole,
+    cursor: {
+      top: 446,
+      left: 500,
+      click: true,
+    },
+    end: true,
+  },
+  {
+    kind: Stage.CreateNewRole,
+    cursor: {
+      top: 446,
+      left: 500,
+    },
+    duration: 2000,
+  },
+  {
+    kind: Stage.SelectAudienceDropdown,
+    cursor: {
+      top: 477,
+      left: 300,
+      click: true,
+    },
+    duration: 2000,
+  },
+  {
+    kind: Stage.ShowAudienceDropdown,
+    cursor: {
+      top: 477,
+      left: 300,
+    },
+    duration: 1000,
+  },
+  {
+    kind: Stage.ClickDiscoverAudience,
+    cursor: {
+      top: 512,
+      left: 300,
+      click: true,
+    },
+    duration: 2000,
+  },
+  {
+    kind: Stage.DiscoverAudienceSelected,
+    cursor: {
+      top: 512,
+      left: 300,
+    },
+    duration: 1000,
+  },
+  {
+    kind: Stage.ClickNextPermissions,
+    cursor: {
+      top: 722,
+      left: 500,
+      click: true,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.ConfigureRolePermissions,
+    cursor: {
+      top: 422,
+      left: 500,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.ClickCreatePolicy,
+    cursor: {
+      top: 256,
+      left: 75,
+      click: true,
+    },
+    end: true,
+  },
+  {
+    kind: Stage.CreatePolicy,
+    cursor: {
+      top: 256,
+      left: 75,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.ClickJSONTab,
+    cursor: {
+      top: 210,
+      left: 180,
+      click: true,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.ShowJSONEditor,
+    cursor: {
+      top: 210,
+      left: 180,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.SelectJSONContents,
+    cursor: {
+      top: 320,
+      left: 140,
+      click: true,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.JSONContentsSelected,
+    cursor: {
+      top: 320,
+      left: 140,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.PolicyJSONPasted,
+    cursor: {
+      top: 320,
+      left: 140,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.PolicyClickNextTags,
+    cursor: {
+      top: 722,
+      left: 530,
+      click: true,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.PolicyTags,
+    cursor: {
+      top: 722,
+      left: 530,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.PolicyClickNextReview,
+    cursor: {
+      top: 722,
+      left: 530,
+      click: true,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.PolicyReview,
+    cursor: {
+      top: 722,
+      left: 530,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.ClickPolicyName,
+    cursor: {
+      top: 262,
+      left: 230,
+      click: true,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.PolicyHasName,
+    cursor: {
+      top: 262,
+      left: 230,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.ClickCreatePolicyButton,
+    cursor: {
+      top: 722,
+      left: 530,
+      click: true,
+    },
+    end: true,
+  },
+  {
+    kind: Stage.AssignPolicyToRole,
+    cursor: {
+      top: 260,
+      left: 550,
+    },
+    duration: 1000,
+  },
+  {
+    kind: Stage.ClickRefreshButton,
+    cursor: {
+      top: 260,
+      left: 550,
+      click: true,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.PoliciesLoaded,
+    cursor: {
+      top: 260,
+      left: 550,
+    },
+    duration: 1500,
+  },
+  {
+    kind: Stage.ClickSearchBox,
+    cursor: {
+      top: 325,
+      left: 120,
+      click: true,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.SearchForPolicy,
+    cursor: {
+      top: 325,
+      left: 120,
+    },
+    duration: 1500,
+  },
+  {
+    kind: Stage.SelectPolicy,
+    cursor: {
+      top: 420,
+      left: 36,
+      click: true,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.PolicySelected,
+    cursor: {
+      top: 440,
+      left: 50,
+    },
+    duration: 1500,
+  },
+  {
+    kind: Stage.RoleClickNextTags,
+    cursor: {
+      top: 722,
+      left: 530,
+      click: true,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.RoleTags,
+    cursor: {
+      top: 722,
+      left: 530,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.RoleClickNextReview,
+    cursor: {
+      top: 722,
+      left: 530,
+      click: true,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.RoleReview,
+    cursor: {
+      top: 722,
+      left: 530,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.ClickRoleName,
+    cursor: {
+      top: 262,
+      left: 230,
+      click: true,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.RoleHasName,
+    cursor: {
+      top: 262,
+      left: 230,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.ClickCreateRoleButton,
+    cursor: {
+      top: 722,
+      left: 530,
+      click: true,
+    },
+    end: true,
+  },
+  {
+    kind: Stage.ListRoles,
+    cursor: {
+      top: 722,
+      left: 530,
+    },
+    duration: 2000,
+  },
+  {
+    kind: Stage.ClickRole,
+    cursor: {
+      top: 142,
+      left: 120,
+      click: true,
+    },
+    duration: 2500,
+  },
+  {
+    kind: Stage.ViewRole,
+    cursor: {
+      top: 182,
+      left: 150,
+    },
+    end: true,
+  },
+];
diff --git a/web/packages/teleport/src/IntegrationEnroll/IntegrationEnroll.story.tsx b/web/packages/teleport/src/Integrations/Enroll/IntegrationEnroll.story.tsx
similarity index 82%
rename from web/packages/teleport/src/IntegrationEnroll/IntegrationEnroll.story.tsx
rename to web/packages/teleport/src/Integrations/Enroll/IntegrationEnroll.story.tsx
index 3400e616deee7..a0eeeb07f3c47 100644
--- a/web/packages/teleport/src/IntegrationEnroll/IntegrationEnroll.story.tsx
+++ b/web/packages/teleport/src/Integrations/Enroll/IntegrationEnroll.story.tsx
@@ -17,14 +17,16 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router';
 
+import cfg from 'teleport/config';
+
 import { IntegrationEnroll } from './IntegrationEnroll';
 
 export default {
-  title: 'Teleport/Integrations',
+  title: 'Teleport/Integrations/Enroll',
 };
 
-export const Enroll = () => (
-  <MemoryRouter>
+export const Picker = () => (
+  <MemoryRouter initialEntries={[cfg.routes.integrationEnroll]}>
     <IntegrationEnroll />
   </MemoryRouter>
 );
diff --git a/web/packages/teleport/src/IntegrationEnroll/IntegrationEnroll.tsx b/web/packages/teleport/src/Integrations/Enroll/IntegrationEnroll.tsx
similarity index 73%
rename from web/packages/teleport/src/IntegrationEnroll/IntegrationEnroll.tsx
rename to web/packages/teleport/src/Integrations/Enroll/IntegrationEnroll.tsx
index d176a1a30efb8..fd7af30b4f391 100644
--- a/web/packages/teleport/src/IntegrationEnroll/IntegrationEnroll.tsx
+++ b/web/packages/teleport/src/Integrations/Enroll/IntegrationEnroll.tsx
@@ -22,13 +22,30 @@ import {
   FeatureHeader,
   FeatureHeaderTitle,
 } from 'teleport/components/Layout';
+import cfg from 'teleport/config';
+import { Route, Switch } from 'teleport/components/Router';
 
 import { IntegrationTiles } from './IntegrationTiles';
 import { NoCodeIntegrationDescription } from './common';
+import { getRoutesToEnrollIntegrations } from './IntegrationRoute';
 
 export function IntegrationEnroll() {
   return (
     <FeatureBox>
+      <Switch>
+        {getRoutesToEnrollIntegrations()}
+        <Route
+          path={cfg.routes.integrationEnroll}
+          component={IntegrationPicker}
+        />
+      </Switch>
+    </FeatureBox>
+  );
+}
+
+export function IntegrationPicker() {
+  return (
+    <>
       <FeatureHeader>
         <FeatureHeaderTitle>Select Integration Type</FeatureHeaderTitle>
       </FeatureHeader>
@@ -36,6 +53,6 @@ export function IntegrationEnroll() {
         <NoCodeIntegrationDescription />
         <IntegrationTiles />
       </Box>
-    </FeatureBox>
+    </>
   );
 }
diff --git a/web/packages/teleport/src/Integrations/Enroll/IntegrationRoute.tsx b/web/packages/teleport/src/Integrations/Enroll/IntegrationRoute.tsx
new file mode 100644
index 0000000000000..f7d64d12819a1
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/Enroll/IntegrationRoute.tsx
@@ -0,0 +1,36 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { lazy } from 'react';
+
+import cfg from 'teleport/config';
+import { Route } from 'teleport/components/Router';
+import { IntegrationKind } from 'teleport/services/integrations';
+
+const EnrollAwsOidc = lazy(
+  () => import(/* webpackChunkName: "enroll-aws-oidc" */ './AwsOidc')
+);
+
+export function getRoutesToEnrollIntegrations() {
+  return [
+    <Route
+      key={IntegrationKind.AwsOidc}
+      exact
+      path={cfg.getIntegrationEnrollRoute(IntegrationKind.AwsOidc)}
+      component={EnrollAwsOidc}
+    />,
+  ];
+}
diff --git a/web/packages/teleport/src/IntegrationEnroll/IntegrationTiles.test.tsx b/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.test.tsx
similarity index 100%
rename from web/packages/teleport/src/IntegrationEnroll/IntegrationTiles.test.tsx
rename to web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.test.tsx
diff --git a/web/packages/teleport/src/IntegrationEnroll/IntegrationTiles.tsx b/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.tsx
similarity index 89%
rename from web/packages/teleport/src/IntegrationEnroll/IntegrationTiles.tsx
rename to web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.tsx
index 69fde068658dd..c3baeb019c989 100644
--- a/web/packages/teleport/src/IntegrationEnroll/IntegrationTiles.tsx
+++ b/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.tsx
@@ -21,6 +21,7 @@ import awsIcon from 'design/assets/images/icons/aws.svg';
 
 import cfg from 'teleport/config';
 import { ToolTipNoPermBadge } from 'teleport/components/ToolTipNoPermBadge';
+import { IntegrationKind } from 'teleport/services/integrations';
 
 import { IntegrationTile } from './common';
 
@@ -35,7 +36,11 @@ export function IntegrationTiles({
     <IntegrationTile
       disabled={!hasAccess}
       as={hasAccess ? Link : null}
-      to={hasAccess ? cfg.getIntegrationEnrollRoute('aws-oidc') : null}
+      to={
+        hasAccess
+          ? cfg.getIntegrationEnrollRoute(IntegrationKind.AwsOidc)
+          : null
+      }
     >
       <Image mt={3} mb={2} src={awsIcon} width="80px" height="80px" />
       <Text>
diff --git a/web/packages/teleport/src/IntegrationEnroll/common.tsx b/web/packages/teleport/src/Integrations/Enroll/common.tsx
similarity index 97%
rename from web/packages/teleport/src/IntegrationEnroll/common.tsx
rename to web/packages/teleport/src/Integrations/Enroll/common.tsx
index 150d244161916..8586cffb693ca 100644
--- a/web/packages/teleport/src/IntegrationEnroll/common.tsx
+++ b/web/packages/teleport/src/Integrations/Enroll/common.tsx
@@ -18,8 +18,6 @@ import React from 'react';
 import { Flex, Text, Box } from 'design';
 import styled from 'styled-components';
 
-export type IntegrationTypes = 'aws-oidc';
-
 export const IntegrationTile = styled(Flex).attrs({
   'data-testid': 'tile',
 })`
diff --git a/web/packages/teleport/src/IntegrationEnroll/index.ts b/web/packages/teleport/src/Integrations/Enroll/index.ts
similarity index 92%
rename from web/packages/teleport/src/IntegrationEnroll/index.ts
rename to web/packages/teleport/src/Integrations/Enroll/index.ts
index dc480dcb10b22..b7e869e25174d 100644
--- a/web/packages/teleport/src/IntegrationEnroll/index.ts
+++ b/web/packages/teleport/src/Integrations/Enroll/index.ts
@@ -16,6 +16,7 @@
 
 // export as default for use with React.lazy
 export { IntegrationEnroll as default } from './IntegrationEnroll';
-export { IntegrationTiles } from './IntegrationTiles';
 
+export { IntegrationTiles } from './IntegrationTiles';
+export { getRoutesToEnrollIntegrations } from './IntegrationRoute';
 export * from './common';
diff --git a/web/packages/teleport/src/Integrations/IntegrationList.tsx b/web/packages/teleport/src/Integrations/IntegrationList.tsx
index 0e414c1d73b80..db28ab36b9a26 100644
--- a/web/packages/teleport/src/Integrations/IntegrationList.tsx
+++ b/web/packages/teleport/src/Integrations/IntegrationList.tsx
@@ -29,12 +29,14 @@ import {
   getStatusCodeTitle,
   Integration,
   IntegrationStatusCode,
+  IntegrationKind,
   Plugin,
 } from 'teleport/services/integrations';
 
 type Props<IntegrationLike> = {
   list: IntegrationLike[];
-  onDelete(i: IntegrationLike): void;
+  onDeletePlugin?(p: Plugin): void;
+  onDeleteIntegration?(i: Integration): void;
 };
 
 type IntegrationLike = Integration | Plugin;
@@ -68,11 +70,29 @@ export function IntegrationList(props: Props<IntegrationLike>) {
         },
         {
           altKey: 'options-btn',
-          render: item => (
-            <ActionCell
-              onDelete={props.onDelete ? () => props.onDelete(item) : null}
-            />
-          ),
+          render: item => {
+            if (item.resourceType === 'plugin') {
+              return (
+                <Cell align="right">
+                  <MenuButton>
+                    <MenuItem onClick={() => props.onDeletePlugin(item)}>
+                      Delete...
+                    </MenuItem>
+                  </MenuButton>
+                </Cell>
+              );
+            }
+
+            return (
+              <Cell align="right">
+                <MenuButton>
+                  <MenuItem onClick={() => props.onDeleteIntegration(item)}>
+                    Delete...
+                  </MenuItem>
+                </MenuButton>
+              </Cell>
+            );
+          },
         },
       ]}
       emptyText="No Results Found"
@@ -99,20 +119,6 @@ const StatusCell = ({ item }: { item: IntegrationLike }) => {
   );
 };
 
-const ActionCell = ({ onDelete }: { onDelete: () => void }) => {
-  if (!onDelete) {
-    return null;
-  }
-
-  return (
-    <Cell align="right">
-      <MenuButton>
-        <MenuItem onClick={onDelete}>Delete...</MenuItem>
-      </MenuButton>
-    </Cell>
-  );
-};
-
 enum Status {
   Success,
   Warning,
@@ -168,8 +174,8 @@ const IconCell = ({ item }: { item: IntegrationLike }) => {
   } else {
     // Default is integration.
     switch (item.kind) {
-      case 'aws-oidc':
-        formattedText = 'Amazon Web Services (OIDC)';
+      case IntegrationKind.AwsOidc:
+        formattedText = item.name;
         icon = <IconContainer src={awsIcon} />;
         break;
     }
diff --git a/web/packages/teleport/src/Integrations/Integrations.story.tsx b/web/packages/teleport/src/Integrations/Integrations.story.tsx
index a20117b5448e7..b63a10d71d740 100644
--- a/web/packages/teleport/src/Integrations/Integrations.story.tsx
+++ b/web/packages/teleport/src/Integrations/Integrations.story.tsx
@@ -17,6 +17,7 @@
 import React from 'react';
 
 import { IntegrationList } from './IntegrationList';
+import { DeleteIntegrationDialog } from './DeleteIntegrationDialog';
 import { plugins, integrations } from './fixtures';
 
 export default {
@@ -24,10 +25,15 @@ export default {
 };
 
 export function List() {
+  return <IntegrationList list={[...plugins, ...integrations]} />;
+}
+
+export function DeleteDialog() {
   return (
-    <IntegrationList
-      list={[...plugins, ...integrations]}
+    <DeleteIntegrationDialog
+      onClose={() => null}
       onDelete={() => null}
+      name="some-integration-name"
     />
   );
 }
diff --git a/web/packages/teleport/src/Integrations/Integrations.tsx b/web/packages/teleport/src/Integrations/Integrations.tsx
index 8f1d05f0307e0..fb4b605fba0ec 100644
--- a/web/packages/teleport/src/Integrations/Integrations.tsx
+++ b/web/packages/teleport/src/Integrations/Integrations.tsx
@@ -25,14 +25,16 @@ import {
 } from 'teleport/components/Layout';
 import useTeleport from 'teleport/useTeleport';
 import { integrationService } from 'teleport/services/integrations';
-import cfg from 'teleport/config';
 
 import { IntegrationsAddButton } from './IntegrationsAddButton';
 import { IntegrationList } from './IntegrationList';
+import { DeleteIntegrationDialog } from './DeleteIntegrationDialog';
+import { useIntegrationOperation } from './useIntegrationOperation';
 
 import type { Integration } from 'teleport/services/integrations';
 
 export function Integrations() {
+  const integrationOps = useIntegrationOperation();
   const [items, setItems] = useState<Integration[]>([]);
   const { attempt, run } = useAttempt('processing');
 
@@ -40,27 +42,50 @@ export function Integrations() {
   const canCreateIntegrations = ctx.storeUser.getIntegrationsAccess().create;
 
   useEffect(() => {
+    // TODO(lisa): handle paginating as a follow up polish.
+    // Default fetch is 1k of integrations, which is plenty for beginning.
     run(() =>
-      integrationService.fetchIntegrations(cfg.proxyCluster).then(setItems)
+      integrationService.fetchIntegrations().then(resp => setItems(resp.items))
     );
   }, []);
 
+  function deleteIntegration() {
+    return integrationOps.remove().then(() => {
+      const updatedItems = items.filter(
+        i => i.name !== integrationOps.item.name
+      );
+      setItems(updatedItems);
+      integrationOps.clear();
+    });
+  }
+
   return (
-    <FeatureBox>
-      <FeatureHeader>
-        <FeatureHeaderTitle>Integrations</FeatureHeaderTitle>
-        <IntegrationsAddButton canCreate={canCreateIntegrations} />
-      </FeatureHeader>
-      {attempt.status === 'failed' && <Alert children={attempt.statusText} />}
-      {attempt.status === 'processing' && (
-        <Box textAlign="center" m={10}>
-          <Indicator />
-        </Box>
-      )}
-      {attempt.status === 'success' && (
-        /* TODO(lisa): deletion is stubbed until backend is implemented*/
-        <IntegrationList list={items} onDelete={null} />
+    <>
+      <FeatureBox>
+        <FeatureHeader>
+          <FeatureHeaderTitle>Integrations</FeatureHeaderTitle>
+          <IntegrationsAddButton canCreate={canCreateIntegrations} />
+        </FeatureHeader>
+        {attempt.status === 'failed' && <Alert children={attempt.statusText} />}
+        {attempt.status === 'processing' && (
+          <Box textAlign="center" m={10}>
+            <Indicator />
+          </Box>
+        )}
+        {attempt.status === 'success' && (
+          <IntegrationList
+            list={items}
+            onDeleteIntegration={integrationOps.onRemove}
+          />
+        )}
+      </FeatureBox>
+      {integrationOps.type === 'delete' && (
+        <DeleteIntegrationDialog
+          name={integrationOps.item.name}
+          onClose={integrationOps.clear}
+          onDelete={deleteIntegration}
+        />
       )}
-    </FeatureBox>
+    </>
   );
 }
diff --git a/web/packages/teleport/src/Integrations/useIntegrationOperation.ts b/web/packages/teleport/src/Integrations/useIntegrationOperation.ts
new file mode 100644
index 0000000000000..b96b80336e594
--- /dev/null
+++ b/web/packages/teleport/src/Integrations/useIntegrationOperation.ts
@@ -0,0 +1,50 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useState } from 'react';
+
+import { integrationService } from 'teleport/services/integrations';
+
+import type { Integration, Plugin } from 'teleport/services/integrations';
+
+export function useIntegrationOperation() {
+  const [operation, setOperation] = useState({
+    type: 'none',
+  } as Operation);
+
+  function clear() {
+    setOperation({ type: 'none' });
+  }
+
+  function remove() {
+    return integrationService.deleteIntegration(operation.item.name);
+  }
+
+  function onRemove(item: Integration) {
+    setOperation({ type: 'delete', item });
+  }
+
+  return {
+    ...operation,
+    clear,
+    remove,
+    onRemove,
+  };
+}
+
+export type Operation = {
+  type: 'create' | 'edit' | 'delete' | 'reset' | 'none';
+  item?: Plugin | Integration;
+};
diff --git a/web/packages/teleport/src/config.ts b/web/packages/teleport/src/config.ts
index 565656ae783f7..79eb15bebfb6a 100644
--- a/web/packages/teleport/src/config.ts
+++ b/web/packages/teleport/src/config.ts
@@ -602,10 +602,12 @@ const cfg = {
     });
   },
 
-  getIntegrationsUrl(clusterId: string, name?: string) {
-    return generateResourcePath(cfg.api.integrationsPath, {
+  getIntegrationsUrl(integrationName?: string) {
+    // Currently you can only create integrations at the root cluster.
+    const clusterId = cfg.proxyCluster;
+    return generatePath(cfg.api.integrationsPath, {
       clusterId,
-      name,
+      name: integrationName,
     });
   },
 
diff --git a/web/packages/teleport/src/features.tsx b/web/packages/teleport/src/features.tsx
index fa77b1a0b7602..9d2339a79a066 100644
--- a/web/packages/teleport/src/features.tsx
+++ b/web/packages/teleport/src/features.tsx
@@ -98,7 +98,9 @@ const Integrations = React.lazy(
 );
 const IntegrationEnroll = React.lazy(
   () =>
-    import(/* webpackChunkName: "integration-enroll" */ './IntegrationEnroll')
+    import(
+      /* webpackChunkName: "integration-enroll" */ '@gravitational/teleport/src/Integrations/Enroll'
+    )
 );
 
 // ****************************
diff --git a/web/packages/teleport/src/mocks/contexts.ts b/web/packages/teleport/src/mocks/contexts.ts
index c05b8c1b7c062..34bb06efca0e8 100644
--- a/web/packages/teleport/src/mocks/contexts.ts
+++ b/web/packages/teleport/src/mocks/contexts.ts
@@ -83,7 +83,8 @@ const baseContext = {
     lastConnected: '2020-09-26T17:30:23.512876876Z',
     status: 'online',
     nodeCount: 1,
-    publicURL: 'localhost',
+    publicURL:
+      'some-long-cluster-public-url-name.cloud.teleport.gravitational.io:1234',
     authVersion: '4.4.0-dev',
     proxyVersion: '4.4.0-dev',
   },
diff --git a/web/packages/teleport/src/services/integrations/integrations.ts b/web/packages/teleport/src/services/integrations/integrations.ts
index 9e5e8fc8675d7..b94111b43e425 100644
--- a/web/packages/teleport/src/services/integrations/integrations.ts
+++ b/web/packages/teleport/src/services/integrations/integrations.ts
@@ -17,17 +17,38 @@
 import api from 'teleport/services/api';
 import cfg from 'teleport/config';
 
-import { Integration, IntegrationStatusCode } from './types';
+import {
+  Integration,
+  IntegrationCreateRequest,
+  IntegrationStatusCode,
+  IntegrationListResponse,
+} from './types';
 
 export const integrationService = {
-  fetchIntegration(clusterId: string, name: string): Promise<Integration> {
-    return api
-      .get(cfg.getIntegrationsUrl(clusterId, name))
-      .then(makeIntegration);
+  fetchIntegration(name: string): Promise<Integration> {
+    return api.get(cfg.getIntegrationsUrl(name)).then(makeIntegration);
   },
 
-  fetchIntegrations(clusterId: string): Promise<Integration[]> {
-    return api.get(cfg.getIntegrationsUrl(clusterId)).then(makeIntegrations);
+  fetchIntegrations(): Promise<IntegrationListResponse> {
+    return api.get(cfg.getIntegrationsUrl()).then(resp => {
+      const integrations = resp?.items ?? [];
+      return {
+        items: integrations.map(makeIntegration),
+        nextKey: resp?.nextKey,
+      };
+    });
+  },
+
+  createIntegration(req: IntegrationCreateRequest): Promise<void> {
+    return api.post(cfg.getIntegrationsUrl(), req);
+  },
+
+  updateIntegration(name: string): Promise<void> {
+    return api.put(cfg.getIntegrationsUrl(name));
+  },
+
+  deleteIntegration(name: string): Promise<void> {
+    return api.delete(cfg.getIntegrationsUrl(name));
   },
 };
 
diff --git a/web/packages/teleport/src/services/integrations/types.ts b/web/packages/teleport/src/services/integrations/types.ts
index 4973ea206f1c7..9a6bb57e4ce06 100644
--- a/web/packages/teleport/src/services/integrations/types.ts
+++ b/web/packages/teleport/src/services/integrations/types.ts
@@ -40,7 +40,12 @@ export type Integration<
   details?: string;
   statusCode: IntegrationStatusCode;
 };
-export type IntegrationKind = 'aws-oidc';
+// IntegrationKind string values should be in sync
+// with the backend value for defining the integration
+// resource's subKind field.
+export enum IntegrationKind {
+  AwsOidc = 'aws-oidc',
+}
 export type IntegrationSpecAwsOidc = {
   roleArn: string;
 };
@@ -86,3 +91,14 @@ export function getStatusCodeDescription(
 export type Plugin = Integration<'plugin', PluginKind, PluginSpec>;
 export type PluginSpec = Record<string, never>; // currently no 'spec' fields exposed to the frontend
 export type PluginKind = 'slack';
+
+export type IntegrationCreateRequest = {
+  name: string;
+  subKind: IntegrationKind;
+  awsoidc?: IntegrationSpecAwsOidc;
+};
+
+export type IntegrationListResponse = {
+  items: Integration[];
+  nextKey?: string;
+};