diff --git a/web/packages/design/src/utils/testing.tsx b/web/packages/design/src/utils/testing.tsx
index 7312f4eb1a5af..b68eecff79cfe 100644
--- a/web/packages/design/src/utils/testing.tsx
+++ b/web/packages/design/src/utils/testing.tsx
@@ -25,6 +25,7 @@ import {
   render as testingRender,
   waitFor,
   waitForElementToBeRemoved,
+  within,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ReactNode } from 'react';
@@ -78,8 +79,8 @@ screen.debug = () => {
 };
 
 type RenderOptions = {
-  wrapper: React.FC;
-  container: HTMLElement;
+  wrapper?: React.FC;
+  container?: HTMLElement;
 };
 
 export {
@@ -95,4 +96,5 @@ export {
   Router,
   userEvent,
   waitForElementToBeRemoved,
+  within,
 };
diff --git a/web/packages/shared/utils/collectKeys.test.ts b/web/packages/shared/utils/collectKeys.test.ts
new file mode 100644
index 0000000000000..9b7b736af7842
--- /dev/null
+++ b/web/packages/shared/utils/collectKeys.test.ts
@@ -0,0 +1,97 @@
+/**
+ * Teleport
+ * Copyright (C) 2025 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { collectKeys } from './collectKeys';
+
+describe('collectKeys', () => {
+  it.each`
+    value
+    ${undefined}
+    ${null}
+    ${1}
+    ${true}
+    ${() => {}}
+  `('supports non object values ($value)', ({ value }) => {
+    const actual = collectKeys(value);
+    expect(actual).toBeNull();
+  });
+
+  it('supports empty object values', () => {
+    const actual = collectKeys({});
+    expect(actual).toEqual([]);
+  });
+
+  it('supports empty array values', () => {
+    const actual = collectKeys([]);
+    expect(actual).toEqual([]);
+  });
+
+  it('supports simple object values', () => {
+    const actual = collectKeys({
+      number: 1,
+      boolean: true,
+      string: 'string',
+      function: () => {},
+      null: null,
+      undefined: undefined,
+    });
+    expect(actual).toEqual([
+      '.number',
+      '.boolean',
+      '.string',
+      '.function',
+      '.null',
+      '.undefined',
+    ]);
+  });
+
+  it('supports simple array values', () => {
+    const actual = collectKeys([
+      { alpha: true },
+      { alpha: true },
+      { beta: true },
+    ]);
+    expect(actual).toEqual(['.alpha', '.alpha', '.beta']);
+  });
+
+  it('supports nested object values', () => {
+    const actual = collectKeys([
+      {
+        inner: {
+          foo: 'bar',
+        },
+      },
+    ]);
+    expect(actual).toEqual(['.inner.foo']);
+  });
+
+  it('supports nested array values', () => {
+    const actual = collectKeys([[{ foo: 'bar' }], { bar: 'foo' }]);
+    expect(actual).toEqual(['.foo', '.bar']);
+  });
+
+  it('allows a custom key prefix', () => {
+    const actual = collectKeys(
+      {
+        foo: 1,
+      },
+      'root'
+    );
+    expect(actual).toEqual(['root.foo']);
+  });
+});
diff --git a/web/packages/shared/utils/collectKeys.ts b/web/packages/shared/utils/collectKeys.ts
new file mode 100644
index 0000000000000..cb96b4358dba7
--- /dev/null
+++ b/web/packages/shared/utils/collectKeys.ts
@@ -0,0 +1,42 @@
+/**
+ * Teleport
+ * Copyright (C) 2025 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/**
+ * `collectKeys` gathers object keys recursively and returns them. Arrays are
+ * traversed, but are transparent. Returns null if the value is not an object
+ * or array of objects, and an empty array of no keys are present.
+ *
+ * @param value Value from which keys will be collected
+ * @param prefix An optional value to be prepended to all keys returned
+ * @returns An array of the keys collected (if any) or null
+ */
+export const collectKeys = (value: unknown, prefix: string = '') => {
+  if (typeof value !== 'object' || value === null) {
+    return prefix ? [prefix] : null;
+  }
+
+  if (Array.isArray(value)) {
+    return value.flatMap(val => {
+      return collectKeys(val, prefix);
+    });
+  }
+
+  return Object.entries(value).flatMap(([k, v]) => {
+    return collectKeys(v, `${prefix}.${k}`);
+  });
+};
diff --git a/web/packages/teleport/src/JoinTokens/JoinTokenForms.tsx b/web/packages/teleport/src/JoinTokens/JoinTokenForms.tsx
index 5c9b7a4f5a806..dc6604e8db544 100644
--- a/web/packages/teleport/src/JoinTokens/JoinTokenForms.tsx
+++ b/web/packages/teleport/src/JoinTokens/JoinTokenForms.tsx
@@ -31,9 +31,11 @@ import {
 export const JoinTokenIAMForm = ({
   tokenState,
   onUpdateState,
+  readonly,
 }: {
   tokenState: NewJoinTokenState;
   onUpdateState: (newToken: NewJoinTokenState) => void;
+  readonly: boolean;
 }) => {
   const rules = tokenState.iam;
 
@@ -104,6 +106,7 @@ export const JoinTokenIAMForm = ({
             onChange={e =>
               setTokenRulesField(index, 'aws_account', e.target.value)
             }
+            readonly={readonly}
           />
           <FieldInput
             label="ARN"
@@ -111,6 +114,7 @@ export const JoinTokenIAMForm = ({
             placeholder="arn:aws:iam::account-id:role/*"
             value={rule.aws_arn}
             onChange={e => setTokenRulesField(index, 'aws_arn', e.target.value)}
+            readonly={readonly}
           />
         </RuleBox>
       ))}
@@ -125,9 +129,11 @@ export const JoinTokenIAMForm = ({
 export const JoinTokenGCPForm = ({
   tokenState,
   onUpdateState,
+  readonly,
 }: {
   tokenState: NewJoinTokenState;
   onUpdateState: (newToken: NewJoinTokenState) => void;
+  readonly: boolean;
 }) => {
   const rules = tokenState.gcp;
   function removeRule(index: number) {
@@ -198,6 +204,7 @@ export const JoinTokenGCPForm = ({
             value={rule.project_ids}
             label="Add Project ID(s)"
             rule={requiredField('At least 1 Project ID required')}
+            isDisabled={readonly}
           />
           <FieldSelectCreatable
             placeholder="us-west1, us-east1-a"
@@ -210,6 +217,7 @@ export const JoinTokenGCPForm = ({
             value={rule.locations}
             label="Add Locations"
             helperText="Allows regions and/or zones."
+            isDisabled={readonly}
           />
           <FieldSelectCreatable
             placeholder="PROJECT_compute@developer.gserviceaccount.com"
@@ -221,6 +229,7 @@ export const JoinTokenGCPForm = ({
             }
             value={rule.service_accounts}
             label="Add Service Account Emails"
+            isDisabled={readonly}
           />
         </RuleBox>
       ))}
@@ -235,9 +244,11 @@ export const JoinTokenGCPForm = ({
 export const JoinTokenOracleForm = ({
   tokenState,
   onUpdateState,
+  readonly,
 }: {
   tokenState: NewJoinTokenState;
   onUpdateState: (newToken: NewJoinTokenState) => void;
+  readonly: boolean;
 }) => {
   const rules = tokenState.oracle;
   function removeRule(index: number) {
@@ -301,6 +312,7 @@ export const JoinTokenOracleForm = ({
             placeholder="ocid1.tenancy.oc1..<unique ID>"
             value={rule.tenancy}
             onChange={e => updateRuleField(index, 'tenancy', e.target.value)}
+            readonly={readonly}
           />
           <FieldSelectCreatable
             placeholder="ocid1.compartment.oc1..<unique ID>"
@@ -317,6 +329,7 @@ export const JoinTokenOracleForm = ({
             value={rule.parent_compartments}
             label="Add Compartments"
             helperText="Direct parent compartments only, no nested compartments."
+            isDisabled={readonly}
           />
           <FieldSelectCreatable
             placeholder="us-ashburn-1, phx"
@@ -328,6 +341,7 @@ export const JoinTokenOracleForm = ({
             }
             value={rule.regions}
             label="Add Regions"
+            isDisabled={readonly}
           />
         </RuleBox>
       ))}
diff --git a/web/packages/teleport/src/JoinTokens/JoinTokenGithubForm.test.tsx b/web/packages/teleport/src/JoinTokens/JoinTokenGithubForm.test.tsx
new file mode 100644
index 0000000000000..b9c9e817a35a3
--- /dev/null
+++ b/web/packages/teleport/src/JoinTokens/JoinTokenGithubForm.test.tsx
@@ -0,0 +1,390 @@
+/**
+ * Teleport
+ * Copyright (C) 2025 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import userEvent from '@testing-library/user-event';
+import { PropsWithChildren } from 'react';
+
+import { fireEvent, render, screen, within } from 'design/utils/testing';
+import Validation, { useValidation } from 'shared/components/Validation';
+
+import { ThemeProvider } from 'teleport/ThemeProvider';
+
+import { JoinTokenGithubForm } from './JoinTokenGithubForm';
+import { NewJoinTokenState } from './UpsertJoinTokenDialog';
+
+const populateRuleFieldTest =
+  (
+    field: keyof NewJoinTokenState['github']['rules'][number],
+    placeholer: string,
+    value: string
+  ) =>
+  async () => {
+    const state = baseState();
+    const onUpdate = jest.fn();
+
+    render(
+      <JoinTokenGithubForm
+        tokenState={state}
+        onUpdateState={onUpdate}
+        readonly={false}
+      />,
+      { wrapper: Wrapper }
+    );
+
+    fireEvent.change(screen.getByPlaceholderText(placeholer), {
+      target: { value },
+    });
+
+    expect(onUpdate).toHaveBeenCalledTimes(1);
+    expect(onUpdate).toHaveBeenLastCalledWith(
+      baseState({
+        rules: [
+          {
+            ...state.github.rules[0],
+            [field]: value,
+          },
+        ],
+      })
+    );
+  };
+
+const populateFieldTest =
+  ({
+    field,
+    placeholer,
+    value,
+  }: {
+    field: keyof NewJoinTokenState['github'];
+    placeholer: string;
+    value: string;
+  }) =>
+  async () => {
+    const state = baseState();
+    const onUpdate = jest.fn();
+
+    render(
+      <JoinTokenGithubForm
+        tokenState={state}
+        onUpdateState={onUpdate}
+        readonly={false}
+      />,
+      { wrapper: Wrapper }
+    );
+
+    fireEvent.change(screen.getByPlaceholderText(placeholer), {
+      target: { value },
+    });
+
+    expect(onUpdate).toHaveBeenCalledTimes(1);
+    expect(onUpdate).toHaveBeenLastCalledWith(
+      baseState({
+        [field]: value,
+      })
+    );
+  };
+
+describe('GithubJoinTokenForm', () => {
+  it('a rule can be added', async () => {
+    const state = baseState();
+    const onUpdate = jest.fn();
+
+    render(
+      <JoinTokenGithubForm
+        tokenState={state}
+        onUpdateState={onUpdate}
+        readonly={false}
+      />,
+      { wrapper: Wrapper }
+    );
+
+    await userEvent.click(
+      screen.getByRole('button', { name: /Add another GitHub rule/i })
+    );
+
+    expect(onUpdate).toHaveBeenCalledTimes(1);
+    expect(onUpdate).toHaveBeenLastCalledWith(
+      baseState({
+        rules: [
+          ...state.github.rules,
+          {
+            ref_type: 'any',
+          },
+        ],
+      })
+    );
+  });
+
+  it('delete button is hidden when only one rule exists', async () => {
+    const state = baseState();
+
+    render(
+      <JoinTokenGithubForm
+        tokenState={state}
+        onUpdateState={jest.fn()}
+        readonly={false}
+      />,
+      { wrapper: Wrapper }
+    );
+
+    expect(screen.queryByTestId('delete_rule')).not.toBeInTheDocument();
+  });
+
+  it('delete button is visible when more than one rule exists', async () => {
+    const state = baseState({
+      rules: [{}, {}],
+    });
+
+    render(
+      <JoinTokenGithubForm
+        tokenState={state}
+        onUpdateState={jest.fn()}
+        readonly={false}
+      />,
+      { wrapper: Wrapper }
+    );
+
+    expect(screen.queryAllByTestId('delete_rule').length).toBe(2);
+  });
+
+  it('a rule can be deleted', async () => {
+    const state = baseState({
+      rules: [{}, {}],
+    });
+    const onUpdate = jest.fn();
+
+    render(
+      <JoinTokenGithubForm
+        tokenState={state}
+        onUpdateState={onUpdate}
+        readonly={false}
+      />,
+      { wrapper: Wrapper }
+    );
+
+    const rule0 = screen.getByTestId('rule_0');
+    const deleteButton0 = within(rule0).getByTestId('delete_rule');
+
+    await userEvent.click(deleteButton0);
+
+    expect(onUpdate).toHaveBeenCalledTimes(1);
+    expect(onUpdate).toHaveBeenLastCalledWith(
+      baseState({
+        rules: [state.github.rules[0]],
+      })
+    );
+  });
+
+  // eslint-disable-next-line jest/expect-expect
+  it(
+    'repository field can be populated',
+    populateRuleFieldTest(
+      'repository',
+      'gravitational/teleport',
+      'gravitational/teleport'
+    )
+  );
+
+  it('repository field shows a validation message', async () => {
+    const state = baseState();
+
+    render(
+      <JoinTokenGithubForm
+        tokenState={state}
+        onUpdateState={jest.fn()}
+        readonly={false}
+      />,
+      { wrapper: Wrapper }
+    );
+
+    await userEvent.click(screen.getByTestId('submit'));
+
+    expect(
+      screen.getByText('Either repository name or owner is required')
+    ).toBeInTheDocument();
+  });
+
+  // eslint-disable-next-line jest/expect-expect
+  it(
+    'repository owner field can be populated',
+    populateRuleFieldTest('repository_owner', 'gravitational', 'gravitational')
+  );
+
+  it('repository owner field shows a validation message', async () => {
+    const state = baseState();
+
+    render(
+      <JoinTokenGithubForm
+        tokenState={state}
+        onUpdateState={jest.fn()}
+        readonly={false}
+      />,
+      { wrapper: Wrapper }
+    );
+
+    await userEvent.click(screen.getByTestId('submit'));
+
+    expect(
+      screen.getByText('Either repository owner or name is required')
+    ).toBeInTheDocument();
+  });
+
+  // eslint-disable-next-line jest/expect-expect
+  it(
+    'workflow field can be populated',
+    populateRuleFieldTest('workflow', 'my-workflow', 'my-workflow')
+  );
+
+  // eslint-disable-next-line jest/expect-expect
+  it(
+    'environment field can be populated',
+    populateRuleFieldTest('environment', 'production', 'production')
+  );
+
+  // eslint-disable-next-line jest/expect-expect
+  it(
+    'ref field can be populated',
+    populateRuleFieldTest('ref', 'ref/heads/main', 'ref/heads/main')
+  );
+
+  it('ref type is disabled when ref is not populated', async () => {
+    const state = baseState();
+
+    render(
+      <JoinTokenGithubForm
+        tokenState={state}
+        onUpdateState={jest.fn()}
+        readonly={false}
+      />,
+      { wrapper: Wrapper }
+    );
+
+    expect(screen.getByLabelText('Ref type')).toBeDisabled();
+  });
+
+  it('ref type can be selected', async () => {
+    const state = baseState({
+      rules: [
+        {
+          ref: 'ref/heads/main',
+          ref_type: 'any',
+        },
+      ],
+    });
+    const onUpdate = jest.fn();
+
+    render(
+      <JoinTokenGithubForm
+        tokenState={state}
+        onUpdateState={onUpdate}
+        readonly={false}
+      />,
+      { wrapper: Wrapper }
+    );
+
+    const selectElement = screen.getByLabelText('Ref type');
+    expect(selectElement).toBeEnabled();
+
+    // Seems to be the only way to interact with react-select component
+    fireEvent.keyDown(selectElement, { key: 'ArrowDown' });
+    const existingItem = await screen.findByText('Branch');
+    fireEvent.click(existingItem);
+
+    expect(onUpdate).toHaveBeenCalledTimes(1);
+    expect(onUpdate).toHaveBeenLastCalledWith(
+      baseState({
+        rules: [
+          {
+            ...state.github.rules[0],
+            ref_type: 'branch',
+          },
+        ],
+      })
+    );
+  });
+
+  // eslint-disable-next-line jest/expect-expect
+  it(
+    'server host field can be populated',
+    populateFieldTest({
+      field: 'server_host',
+      placeholer: 'github.example.com',
+      value: 'github.example.com',
+    })
+  );
+
+  // eslint-disable-next-line jest/expect-expect
+  it(
+    'slug field can be populated',
+    populateFieldTest({
+      field: 'enterprise_slug',
+      placeholer: 'octo-enterprise',
+      value: 'octo-enterprise',
+    })
+  );
+
+  // eslint-disable-next-line jest/expect-expect
+  it(
+    'jwks field can be populated',
+    populateFieldTest({
+      field: 'static_jwks',
+      placeholer: '{"keys":[--snip--]}',
+      value: '{"keys":[]}',
+    })
+  );
+});
+
+const Wrapper = ({ children }: PropsWithChildren) => {
+  return (
+    <ThemeProvider>
+      <Validation>
+        <SubmitWrapper>{children}</SubmitWrapper>
+      </Validation>
+    </ThemeProvider>
+  );
+};
+
+const SubmitWrapper = ({ children }: PropsWithChildren) => {
+  const validation = useValidation();
+
+  return (
+    <>
+      {children}
+      <button data-testid="submit" onClick={() => validation.validate()} />
+    </>
+  );
+};
+
+const baseState = (
+  github: Partial<NewJoinTokenState['github']> = {}
+): NewJoinTokenState => ({
+  name: 'test-name',
+  method: { label: 'github', value: 'github' },
+  roles: [{ label: 'Bot', value: 'Bot' }],
+  bot_name: 'test-bot-name',
+  github: {
+    ...github,
+    rules: github.rules ?? [
+      {
+        ref_type: 'any',
+      },
+    ],
+  },
+  iam: [],
+  gcp: [],
+  oracle: [],
+});
diff --git a/web/packages/teleport/src/JoinTokens/JoinTokenGithubForm.tsx b/web/packages/teleport/src/JoinTokens/JoinTokenGithubForm.tsx
new file mode 100644
index 0000000000000..8ae281c6f4c33
--- /dev/null
+++ b/web/packages/teleport/src/JoinTokens/JoinTokenGithubForm.tsx
@@ -0,0 +1,291 @@
+/**
+ * Teleport
+ * Copyright (C) 2025 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import styled from 'styled-components';
+
+import { Info } from 'design/Alert/Alert';
+import Box from 'design/Box/Box';
+import { ButtonText } from 'design/Button/Button';
+import ButtonIcon from 'design/ButtonIcon/ButtonIcon';
+import Flex from 'design/Flex/Flex';
+import { Plus } from 'design/Icon/Icons/Plus';
+import { Trash } from 'design/Icon/Icons/Trash';
+import Link from 'design/Link/Link';
+import Text from 'design/Text/Text';
+import FieldInput from 'shared/components/FieldInput/FieldInput';
+import FieldSelect from 'shared/components/FieldSelect';
+import { requiredField } from 'shared/components/Validation/rules';
+
+import cfg from 'teleport/config';
+import { SectionBox } from 'teleport/Roles/RoleEditor/StandardEditor/sections';
+
+import { NewJoinTokenState } from './UpsertJoinTokenDialog';
+
+export const JoinTokenGithubForm = ({
+  tokenState,
+  onUpdateState,
+  readonly,
+}: {
+  tokenState: NewJoinTokenState;
+  onUpdateState: (newToken: NewJoinTokenState) => void;
+  readonly: boolean;
+}) => {
+  const { github } = tokenState;
+  const { rules } = github;
+
+  function removeRule(index: number) {
+    const newRules = rules.filter((_, i) => index !== i);
+    const newState = {
+      ...tokenState,
+      github: {
+        ...tokenState.github,
+        rules: newRules,
+      },
+    };
+    onUpdateState(newState);
+  }
+
+  function addNewRule() {
+    const newState = {
+      ...tokenState,
+      github: {
+        ...tokenState.github,
+        rules: [
+          ...rules,
+          {
+            ref_type: 'any' as const,
+          },
+        ],
+      },
+    };
+    onUpdateState(newState);
+  }
+
+  function updateRuleField(index: number, fieldName: string, opts: unknown) {
+    const newState = {
+      ...tokenState,
+      github: {
+        ...tokenState.github,
+        rules: rules.map((rule, i) => {
+          if (i === index) {
+            return { ...rule, [fieldName]: opts };
+          }
+          return rule;
+        }),
+      },
+    };
+    onUpdateState(newState);
+  }
+
+  return (
+    <>
+      {rules.map((rule, index) => (
+        <RuleBox
+          data-testid={`rule_${index}`}
+          key={index} // order doesn't change without updating the referrenced array
+        >
+          <Flex alignItems="center" justifyContent="space-between">
+            <Text fontWeight={700} mb={2}>
+              GitHub Rule
+            </Text>
+
+            {rules.length > 1 && ( // at least one rule is required, so lets not allow the user to remove it
+              <ButtonIcon
+                data-testid="delete_rule"
+                onClick={() => removeRule(index)}
+              >
+                <Trash size={16} color="text.muted" />
+              </ButtonIcon>
+            )}
+          </Flex>
+
+          <FieldInput
+            label="Repository"
+            placeholder="gravitational/teleport"
+            toolTipContent="Fully qualified name of a GitHub repository (i.e. including the owner)"
+            value={rule.repository}
+            onChange={e => updateRuleField(index, 'repository', e.target.value)}
+            rule={
+              rule.repository_owner
+                ? undefined
+                : requiredField('Either repository name or owner is required')
+            }
+            readonly={readonly}
+          />
+
+          <FieldInput
+            label="Repository owner"
+            placeholder="gravitational"
+            toolTipContent="Name of an organization or user that a repository belongs to"
+            value={rule.repository_owner}
+            onChange={e =>
+              updateRuleField(index, 'repository_owner', e.target.value)
+            }
+            rule={
+              rule.repository
+                ? undefined
+                : requiredField('Either repository owner or name is required')
+            }
+            readonly={readonly}
+          />
+
+          <FieldInput
+            label="Workflow name"
+            placeholder="my-workflow"
+            value={rule.workflow}
+            onChange={e => updateRuleField(index, 'workflow', e.target.value)}
+            readonly={readonly}
+          />
+
+          <FieldInput
+            label="Environment"
+            placeholder="production"
+            value={rule.environment}
+            onChange={e =>
+              updateRuleField(index, 'environment', e.target.value)
+            }
+            readonly={readonly}
+          />
+
+          <Flex fullWidth gap={2}>
+            <FieldInput
+              flex={2}
+              label="Git ref"
+              placeholder="ref/heads/main"
+              value={rule.ref}
+              onChange={e => updateRuleField(index, 'ref', e.target.value)}
+              readonly={readonly}
+            />
+
+            <FieldSelect
+              flex={1}
+              label="Ref type"
+              options={refTypeOptions}
+              value={refTypeOptions.find(o => o.value === rule.ref_type)}
+              onChange={opts => updateRuleField(index, 'ref_type', opts.value)}
+              isDisabled={!rule.ref || readonly}
+              data-testid="ref-type-select"
+            />
+          </Flex>
+        </RuleBox>
+      ))}
+
+      <ButtonText onClick={addNewRule} compact mb={4}>
+        <Plus size={16} mr={2} />
+        Add another GitHub rule
+      </ButtonText>
+
+      {/* TODO(nickmarais): Make SectionBox a component instead of reusing it from Roles */}
+      <SectionBox
+        titleSegments={['GitHub Enterprise Server']}
+        initiallyCollapsed={[
+          'server_host',
+          'enterprise_slug',
+          'static_jwks',
+        ].every(k => !github[k])}
+        validation={{
+          valid: true,
+        }}
+      >
+        <Text fontWeight="regular" mb={3}>
+          Additional settings for configuring GHES.
+        </Text>
+
+        {cfg.edition !== 'ent' ? (
+          <Info alignItems="flex-start">
+            GitHub Enterprise Server configuration requires Teleport Enterprise.
+            Please use a repository hosted at github.com or{' '}
+            <Link
+              target="_blank"
+              href="https://goteleport.com/signup/enterprise/"
+            >
+              contact us
+            </Link>
+            .
+          </Info>
+        ) : undefined}
+
+        <FieldInput
+          label="Server host"
+          placeholder="github.example.com"
+          value={github.server_host}
+          onChange={e =>
+            onUpdateState({
+              ...tokenState,
+              github: {
+                ...tokenState.github,
+                server_host: e.target.value,
+              },
+            })
+          }
+          readonly={readonly || cfg.edition !== 'ent'}
+        />
+
+        <FieldInput
+          label="Slug"
+          placeholder="octo-enterprise"
+          value={github.enterprise_slug}
+          onChange={e =>
+            onUpdateState({
+              ...tokenState,
+              github: {
+                ...tokenState.github,
+                enterprise_slug: e.target.value,
+              },
+            })
+          }
+          readonly={readonly || cfg.edition !== 'ent'}
+        />
+
+        <FieldInput
+          label="Static JWKS"
+          placeholder='{"keys":[--snip--]}'
+          toolTipContent="JSON Web Key Set used to verify the token issued by GitHub Actions"
+          value={github.static_jwks}
+          onChange={e =>
+            onUpdateState({
+              ...tokenState,
+              github: {
+                ...tokenState.github,
+                static_jwks: e.target.value,
+              },
+            })
+          }
+          readonly={readonly || cfg.edition !== 'ent'}
+        />
+      </SectionBox>
+    </>
+  );
+};
+
+const refTypeOptions = [
+  { value: 'any' as const, label: 'Any' },
+  { value: 'branch' as const, label: 'Branch' },
+  { value: 'tag' as const, label: 'Tag' },
+];
+
+const RuleBox = styled(Box)`
+  border-color: ${props => props.theme.colors.interactive.tonal.neutral[0]};
+  border-width: 2px;
+  border-style: solid;
+  border-radius: ${props => props.theme.radii[2]}px;
+
+  margin-bottom: ${props => props.theme.space[3]}px;
+
+  padding: ${props => props.theme.space[3]}px;
+`;
diff --git a/web/packages/teleport/src/JoinTokens/JoinTokens.test.tsx b/web/packages/teleport/src/JoinTokens/JoinTokens.test.tsx
index 977dbd01867a9..e03ed2d522ca7 100644
--- a/web/packages/teleport/src/JoinTokens/JoinTokens.test.tsx
+++ b/web/packages/teleport/src/JoinTokens/JoinTokens.test.tsx
@@ -57,6 +57,12 @@ describe('JoinTokens', () => {
     expect(
       screen.getByDisplayValue(token.allow[0].aws_account)
     ).toBeInTheDocument();
+
+    expect(
+      screen.queryByText(
+        'This token has configuration that is not visible. To edit this token please use the YAML editor.'
+      )
+    ).not.toBeInTheDocument();
   });
 
   test('create form fails if roles arent selected', async () => {
@@ -126,14 +132,122 @@ describe('JoinTokens', () => {
     const buttons = screen.queryAllByTestId('delete_rule');
     expect(buttons).toHaveLength(2);
   });
+
+  describe('when editing', () => {
+    describe("when the join method is 'iam'", () => {
+      test('shows a warning when a resource field is not supported', async () => {
+        const mockedYamlObject = {
+          spec: {
+            join_method: 'iam',
+            allow: [
+              {
+                unsupported_field: true,
+              },
+            ],
+          },
+        };
+
+        render(<Component parseYamlMock={mockedYamlObject} />);
+
+        // wait for re-render
+        await act(tick);
+
+        const optionButtons = await screen.findAllByText(/options/i);
+        await userEvent.click(optionButtons[0]);
+        const editButtons = await screen.findAllByText(/view\/edit/i);
+        await userEvent.click(editButtons[0]);
+        expect(screen.getByText(/edit token/i)).toBeInTheDocument();
+
+        expect(
+          screen.getByText(
+            'This token has configuration that is not visible. To edit this token please use the YAML editor.'
+          )
+        ).toBeInTheDocument();
+      });
+    });
+
+    describe("when the join method is 'gcp'", () => {
+      test('shows a warning when a resource field is not supported', async () => {
+        const mockedYamlObject = {
+          spec: {
+            join_method: 'gcp',
+            gcp: {
+              allow: [
+                {
+                  unsupported_field: true,
+                },
+              ],
+            },
+          },
+        };
+
+        render(<Component parseYamlMock={mockedYamlObject} />);
+
+        // wait for re-render
+        await act(tick);
+
+        const optionButtons = await screen.findAllByText(/options/i);
+        await userEvent.click(optionButtons[0]);
+        const editButtons = await screen.findAllByText(/view\/edit/i);
+        await userEvent.click(editButtons[0]);
+        expect(screen.getByText(/edit token/i)).toBeInTheDocument();
+
+        expect(
+          screen.getByText(
+            'This token has configuration that is not visible. To edit this token please use the YAML editor.'
+          )
+        ).toBeInTheDocument();
+      });
+    });
+
+    describe("when the join method is 'github'", () => {
+      test('shows a warning when a resource field is not supported', async () => {
+        const mockedYamlObject = {
+          spec: {
+            join_method: 'github',
+            github: {
+              unsupported_field: true,
+            },
+          },
+        };
+
+        render(<Component parseYamlMock={mockedYamlObject} />);
+
+        // wait for re-render
+        await act(tick);
+
+        const optionButtons = await screen.findAllByText(/options/i);
+        await userEvent.click(optionButtons[0]);
+        const editButtons = await screen.findAllByText(/view\/edit/i);
+        await userEvent.click(editButtons[0]);
+        expect(screen.getByText(/edit token/i)).toBeInTheDocument();
+
+        expect(
+          screen.getByText(
+            'This token has configuration that is not visible. To edit this token please use the YAML editor.'
+          )
+        ).toBeInTheDocument();
+      });
+    });
+  });
 });
 
-const Component = () => {
+const Component = ({ parseYamlMock }: { parseYamlMock?: object }) => {
   const ctx = createTeleportContext();
+
   jest
     .spyOn(ctx.joinTokenService, 'fetchJoinTokens')
     .mockResolvedValue({ items: tokens.map(makeJoinToken) });
 
+  jest.spyOn(ctx.yamlService, 'parse').mockResolvedValue(
+    parseYamlMock ?? {
+      spec: {
+        join_method: 'iam',
+        allow: [],
+      },
+    }
+  );
+
   jest.spyOn(ctx.joinTokenService, 'createJoinToken').mockResolvedValue(
     makeJoinToken({
       id: 'the_token',
diff --git a/web/packages/teleport/src/JoinTokens/JoinTokens.tsx b/web/packages/teleport/src/JoinTokens/JoinTokens.tsx
index 1e92c92d4b8a0..94ece31cd1831 100644
--- a/web/packages/teleport/src/JoinTokens/JoinTokens.tsx
+++ b/web/packages/teleport/src/JoinTokens/JoinTokens.tsx
@@ -134,6 +134,9 @@ export const JoinTokens = () => {
 
   useEffect(() => {
     runJoinTokensAttempt();
+
+    // runJoinTokensAttempt is not stable and causes a render loop
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
@@ -161,7 +164,7 @@ export const JoinTokens = () => {
           </InfoGuideButton>
         )}
       </FeatureHeader>
-      <Flex>
+      <Flex gap={24}>
         <Box
           css={`
             flex-grow: 1;
@@ -231,7 +234,8 @@ export const JoinTokens = () => {
                         if (
                           token.method === 'iam' ||
                           token.method === 'gcp' ||
-                          token.method === 'token'
+                          token.method === 'token' ||
+                          (token.method === 'github' && token.github)
                         ) {
                           setEditingToken(token);
                           return;
@@ -395,7 +399,7 @@ function TokenDelete({
         <DialogTitle>Delete Join Token?</DialogTitle>
       </DialogHeader>
       <DialogContent>
-        {attempt.status === 'error' && <Alert children={attempt.statusText} />}
+        {attempt.status === 'error' && <Alert>{attempt.statusText}</Alert>}
         <Text mb={4}>
           You are about to delete join token
           <Text bold as="span">
diff --git a/web/packages/teleport/src/JoinTokens/UpsertJoinTokenDialog.tsx b/web/packages/teleport/src/JoinTokens/UpsertJoinTokenDialog.tsx
index fe9a56f1b9065..62ccf938d46cc 100644
--- a/web/packages/teleport/src/JoinTokens/UpsertJoinTokenDialog.tsx
+++ b/web/packages/teleport/src/JoinTokens/UpsertJoinTokenDialog.tsx
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 import {
@@ -27,6 +27,7 @@ import {
   ButtonSecondary,
   ButtonText,
   Flex,
+  Indicator,
   Text,
 } from 'design';
 import { Cross } from 'design/Icon';
@@ -34,7 +35,7 @@ import { HoverTooltip } from 'design/Tooltip';
 import FieldInput from 'shared/components/FieldInput';
 import { FieldSelect } from 'shared/components/FieldSelect';
 import { Option } from 'shared/components/Select';
-import Validation from 'shared/components/Validation';
+import Validation, { Validator } from 'shared/components/Validation';
 import { requiredField } from 'shared/components/Validation/rules';
 import { useAsync } from 'shared/hooks/useAsync';
 
@@ -47,11 +48,19 @@ import {
   JoinToken,
 } from 'teleport/services/joinToken';
 
+import 'teleport/services/resources';
+
+import { Info } from 'design/Alert/Alert';
+import { collectKeys } from 'shared/utils/collectKeys';
+
+import { YamlSupportedResourceKind } from 'teleport/services/yaml/types';
+
 import {
   JoinTokenGCPForm,
   JoinTokenIAMForm,
   JoinTokenOracleForm,
 } from './JoinTokenForms';
+import { JoinTokenGithubForm } from './JoinTokenGithubForm';
 
 const maxWidth = '550px';
 
@@ -65,12 +74,15 @@ const joinRoleOptions: OptionJoinRole[] = [
   'Discovery',
 ].map(role => ({ value: role as JoinRole, label: role as JoinRole }));
 
-const availableJoinMethods: OptionJoinMethod[] = ['iam', 'gcp', 'oracle'].map(
-  method => ({
-    value: method as JoinMethod,
-    label: method as JoinMethod,
-  })
-);
+const availableJoinMethods: OptionJoinMethod[] = [
+  'iam',
+  'gcp',
+  'oracle',
+  'github',
+].map(method => ({
+  value: method as JoinMethod,
+  label: method as JoinMethod,
+}));
 
 export type AllowOption = Option<string, string>;
 type OptionJoinMethod = Option<JoinMethod, JoinMethod>;
@@ -86,6 +98,20 @@ type NewJoinTokenOracleState = {
   regions: AllowOption[];
 };
 
+type NewJoinTokenGithubState = {
+  server_host?: string;
+  static_jwks?: string | undefined;
+  enterprise_slug?: string | undefined;
+  rules: {
+    repository?: string;
+    repository_owner?: string | undefined;
+    workflow?: string | undefined;
+    environment?: string | undefined;
+    ref?: string;
+    ref_type?: 'any' | 'branch' | 'tag';
+  }[];
+};
+
 export type NewJoinTokenState = {
   name: string;
   // bot_name is only required when Bot is selected in the roles
@@ -95,6 +121,7 @@ export type NewJoinTokenState = {
   iam: AWSRules[];
   gcp: NewJoinTokenGCPState[];
   oracle: NewJoinTokenOracleState[];
+  github: NewJoinTokenGithubState;
 };
 
 export const defaultNewTokenState: NewJoinTokenState = {
@@ -105,6 +132,13 @@ export const defaultNewTokenState: NewJoinTokenState = {
   iam: [{ aws_account: '', aws_arn: '' }],
   gcp: [{ project_ids: [], service_accounts: [], locations: [] }],
   oracle: [{ tenancy: '', parent_compartments: [], regions: [] }],
+  github: {
+    rules: [
+      {
+        ref_type: 'any',
+      },
+    ],
+  },
 };
 
 function makeDefaultEditState(token: JoinToken): NewJoinTokenState {
@@ -130,9 +164,35 @@ function makeDefaultEditState(token: JoinToken): NewJoinTokenState {
       })),
       regions: r.regions?.map(i => ({ value: i, label: i })),
     })),
+    github: token.github
+      ? {
+          server_host: token.github.enterprise_server_host,
+          enterprise_slug: token.github.enterprise_slug,
+          static_jwks: token.github.static_jwks,
+          rules: token.github.allow.map(r => ({
+            repository: r.repository,
+            actor: r.actor,
+            environment: r.environment,
+            ref: r.ref,
+            ref_type: parseGithubRefType(r.ref_type),
+            repository_owner: r.repository_owner,
+            workflow: r.workflow,
+          })),
+        }
+      : undefined,
   };
 }
 
+function parseGithubRefType(refType: string) {
+  if (refType == 'branch') {
+    return 'branch';
+  } else if (refType == 'tag') {
+    return 'tag';
+  } else {
+    return 'any';
+  }
+}
+
 export const UpsertJoinTokenDialog = ({
   onClose,
   updateTokenList,
@@ -150,19 +210,76 @@ export const UpsertJoinTokenDialog = ({
   );
 
   const [createTokenAttempt, runCreateTokenAttempt] = useAsync(
-    async (req: CreateJoinTokenRequest) => {
-      const token = await ctx.joinTokenService.createJoinToken(req);
+    async (req: CreateJoinTokenRequest, isEdit: boolean) => {
+      const token = isEdit
+        ? await ctx.joinTokenService.editJoinToken(req)
+        : await ctx.joinTokenService.createJoinToken(req);
       updateTokenList(token);
       onClose();
     }
   );
 
-  function reset(validator) {
+  const [parseYAMLAttempt, parseYAML] = useAsync(
+    async (yaml: string): Promise<unknown | null> => {
+      return {
+        yaml,
+        object: await ctx.yamlService.parse<unknown>(
+          YamlSupportedResourceKind.ProvisionToken,
+          {
+            yaml,
+          }
+        ),
+      };
+    }
+  );
+
+  // Convert the resource YAML to an object for compatibility checking
+  useEffect(() => {
+    if (editToken) {
+      parseYAML(editToken.content);
+    }
+    // parseYAML is not stable
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editToken]);
+
+  const hasUnsupportedFields = useMemo(() => {
+    if (!editToken) {
+      return false;
+    }
+
+    const { data } = parseYAMLAttempt;
+
+    if (!checkYAMLData(data)) {
+      return true;
+    }
+
+    switch (data.object.spec.join_method) {
+      case 'iam':
+        return !checkYamlData(
+          data.object.spec.allow,
+          data.object.spec.join_method
+        );
+      case 'gcp':
+        return !checkYamlData(
+          data.object.spec.gcp,
+          data.object.spec.join_method
+        );
+      case 'github':
+        return !checkYamlData(
+          data.object.spec.github,
+          data.object.spec.join_method
+        );
+    }
+
+    return false;
+  }, [editToken, parseYAMLAttempt]);
+
+  function reset(validator: Validator) {
     validator.reset();
     setNewTokenState(defaultNewTokenState);
   }
 
-  async function save(validator) {
+  async function save(validator: Validator) {
     if (!validator.validate()) {
       return;
     }
@@ -207,7 +324,28 @@ export const UpsertJoinTokenDialog = ({
       request.oracle = oracle;
     }
 
-    runCreateTokenAttempt(request);
+    if (newTokenState.method.value === 'github') {
+      const github: (typeof request)['github'] = {
+        allow: newTokenState.github.rules.map(rule => ({
+          environment: rule.environment,
+          ref: rule.ref,
+          ref_type: rule.ref ? rule.ref_type : undefined,
+          repository: rule.repository,
+          repository_owner: rule.repository_owner,
+          workflow: rule.workflow,
+
+          actor: null, // Unsupported field
+          sub: null, // Unsupported field
+        })),
+        enterprise_server_host: newTokenState.github.server_host,
+        enterprise_slug: newTokenState.github.enterprise_slug,
+        static_jwks: newTokenState.github.static_jwks,
+      };
+
+      request.github = github;
+    }
+
+    runCreateTokenAttempt(request, !!editToken);
   }
 
   function setTokenRoles(roles: OptionJoinRole[]) {
@@ -234,160 +372,254 @@ export const UpsertJoinTokenDialog = ({
   }
 
   return (
-    <Flex width="500px">
-      <Box
-        pr={4}
-        pl={4}
-        css={`
-          overflow: auto;
-          width: 100%;
-          min-height: 50vh;
-          padding-bottom: 0;
-        `}
-      >
-        <Flex
-          alignItems="center"
-          mb={3}
-          justifyContent="space-between"
-          maxWidth={maxWidth}
-        >
-          <Flex alignItems="center" mr={3}>
-            <HoverTooltip tipContent="Back to Join Tokens">
-              <ButtonIcon onClick={onClose} mr={2} ml={'-8px'}>
-                <Cross size="medium" />
-              </ButtonIcon>
-            </HoverTooltip>
-            <Text typography="h3" fontWeight={400}>
-              {editToken ? `Edit Token` : 'Create a New Join Token'}
-            </Text>
-          </Flex>
-          {editToken && (
-            <ButtonText
-              p={2}
-              onClick={() => {
-                onClose();
-                editTokenWithYAML(editToken.id);
-              }}
-            >
-              <Text color="buttons.link.default">Use YAML editor</Text>
-            </ButtonText>
-          )}
+    <>
+      {parseYAMLAttempt.status === 'processing' && (
+        <Flex justifyContent="center">
+          <Indicator />
         </Flex>
-        <Validation>
-          {({ validator }) => (
-            <Box maxWidth={maxWidth}>
-              {createTokenAttempt.status === 'error' && (
-                <Alert kind="danger">{createTokenAttempt.statusText}</Alert>
-              )}
-              {!editToken && ( // We only want to change the method when creating a new token
-                <FieldSelect
-                  label="Method"
-                  rule={requiredField<Option>('Select a join method')}
-                  isSearchable
-                  isClearable={false}
-                  value={newTokenState.method}
-                  onChange={setTokenMethod}
-                  options={availableJoinMethods}
-                />
-              )}
-              {newTokenState.method.value !== 'token' && ( // if the method is token, we generate the name for them on the backend
-                <FieldInput
-                  label="Token name"
-                  data-testid="name_field"
-                  toolTipContent={
-                    editToken ? 'Editing token names is not supported.' : ''
-                  }
-                  rule={requiredField('Token name is required')}
-                  placeholder={`${newTokenState.method.value}-token-name`}
-                  autoFocus
-                  value={newTokenState.name}
-                  onChange={e => setTokenField('name', e.target.value)}
-                  readonly={!!editToken}
-                />
-              )}
-              <FieldSelect
-                label="Join Roles"
-                inputId="role_select"
-                rule={requiredField('At least one role is required')}
-                placeholder="Click to select roles"
-                isSearchable
-                isMulti
-                mb={5}
-                isClearable={false}
-                value={newTokenState.roles}
-                onChange={setTokenRoles}
-                options={joinRoleOptions}
-              />
-              {newTokenState.roles.some(i => i.value === 'Bot') && ( // if Bot is included, we must get a bot name as well
-                <FieldInput
-                  label="Bot name"
-                  toolTipContent="Bot names are required when the Bot role is selected"
-                  rule={requiredField('Bot name is required')}
-                  placeholder="Enter bot name"
-                  value={newTokenState.bot_name}
-                  onChange={e => setTokenField('bot_name', e.target.value)}
-                />
-              )}
-              {newTokenState.method.value === 'iam' && (
-                <JoinTokenIAMForm
-                  tokenState={newTokenState}
-                  onUpdateState={newState => setNewTokenState(newState)}
-                />
-              )}
-              {newTokenState.method.value === 'gcp' && (
-                <JoinTokenGCPForm
-                  tokenState={newTokenState}
-                  onUpdateState={newState => setNewTokenState(newState)}
-                />
-              )}
-              {newTokenState.method.value === 'oracle' && (
-                <JoinTokenOracleForm
-                  tokenState={newTokenState}
-                  onUpdateState={newState => setNewTokenState(newState)}
-                />
-              )}
-              <Flex
-                mt={4}
-                py={4}
-                gap={2}
-                css={`
-                  position: sticky;
-                  bottom: 0;
-                  background: ${({ theme }) => theme.colors.levels.sunken};
-                  border-top: 1px solid
-                    ${props => props.theme.colors.spotBackground[1]};
-                `}
-              >
-                <ButtonPrimary
-                  width="100%"
-                  size="large"
-                  textTransform="none"
-                  onClick={() => save(validator)}
-                  disabled={createTokenAttempt.status === 'processing'}
+      )}
+
+      {parseYAMLAttempt.status === 'error' && (
+        <Alert kind="danger">{parseYAMLAttempt.statusText}</Alert>
+      )}
+
+      {parseYAMLAttempt.status !== 'error' ? (
+        <Flex width="500px">
+          <Box
+            css={`
+              overflow: auto;
+              width: 100%;
+              min-height: 50vh;
+              padding-bottom: 0;
+            `}
+          >
+            <Flex
+              alignItems="center"
+              mb={3}
+              justifyContent="space-between"
+              maxWidth={maxWidth}
+            >
+              <Flex alignItems="center" mr={3}>
+                <HoverTooltip tipContent="Back to Join Tokens">
+                  <ButtonIcon onClick={onClose} mr={2}>
+                    <Cross size="medium" />
+                  </ButtonIcon>
+                </HoverTooltip>
+                <Text typography="h3" fontWeight={400}>
+                  {editToken ? `Edit Token` : 'Create a New Join Token'}
+                </Text>
+              </Flex>
+
+              {editToken && !hasUnsupportedFields && (
+                <ButtonText
+                  p={2}
+                  onClick={() => {
+                    onClose();
+                    editTokenWithYAML(editToken.id);
+                  }}
                 >
-                  {editToken ? 'Edit' : 'Create'} Join Token
-                </ButtonPrimary>
+                  <Text color="buttons.link.default">Use YAML editor</Text>
+                </ButtonText>
+              )}
+            </Flex>
+
+            {hasUnsupportedFields ? (
+              <Info alignItems="flex-start">
+                <Text>
+                  This token has configuration that is not visible. To edit this
+                  token please use the YAML editor.
+                </Text>
                 <ButtonSecondary
-                  width="100%"
-                  textTransform="none"
                   size="large"
+                  my={2}
                   onClick={() => {
-                    reset(validator);
                     onClose();
+                    editTokenWithYAML(editToken.id);
                   }}
-                  disabled={false}
                 >
-                  Cancel
+                  Use YAML editor
                 </ButtonSecondary>
-              </Flex>
-            </Box>
-          )}
-        </Validation>
-      </Box>
-    </Flex>
+              </Info>
+            ) : undefined}
+
+            <Validation>
+              {({ validator }) => (
+                <Box maxWidth={maxWidth}>
+                  {createTokenAttempt.status === 'error' && (
+                    <Alert kind="danger">{createTokenAttempt.statusText}</Alert>
+                  )}
+                  {!editToken && ( // We only want to change the method when creating a new token
+                    <FieldSelect
+                      label="Method"
+                      rule={requiredField<Option>('Select a join method')}
+                      isSearchable
+                      isClearable={false}
+                      value={newTokenState.method}
+                      onChange={setTokenMethod}
+                      options={availableJoinMethods}
+                    />
+                  )}
+                  {newTokenState.method.value !== 'token' && ( // if the method is token, we generate the name for them on the backend
+                    <FieldInput
+                      label="Token name"
+                      data-testid="name_field"
+                      toolTipContent={
+                        editToken ? 'Editing token names is not supported.' : ''
+                      }
+                      rule={requiredField('Token name is required')}
+                      placeholder={`${newTokenState.method.value}-token-name`}
+                      autoFocus
+                      value={newTokenState.name}
+                      onChange={e => setTokenField('name', e.target.value)}
+                      readonly={!!editToken}
+                    />
+                  )}
+                  <FieldSelect
+                    label="Join Roles"
+                    inputId="role_select"
+                    rule={requiredField('At least one role is required')}
+                    placeholder="Click to select roles"
+                    isSearchable
+                    isMulti
+                    mb={5}
+                    isClearable={false}
+                    value={newTokenState.roles}
+                    onChange={setTokenRoles}
+                    options={joinRoleOptions}
+                    isDisabled={hasUnsupportedFields}
+                  />
+                  {newTokenState.roles.some(i => i.value === 'Bot') && ( // if Bot is included, we must get a bot name as well
+                    <FieldInput
+                      label="Bot name"
+                      toolTipContent="Bot names are required when the Bot role is selected"
+                      rule={requiredField('Bot name is required')}
+                      placeholder="Enter bot name"
+                      value={newTokenState.bot_name}
+                      onChange={e => setTokenField('bot_name', e.target.value)}
+                      readonly={hasUnsupportedFields}
+                    />
+                  )}
+                  {newTokenState.method.value === 'iam' && (
+                    <JoinTokenIAMForm
+                      tokenState={newTokenState}
+                      onUpdateState={newState => setNewTokenState(newState)}
+                      readonly={hasUnsupportedFields}
+                    />
+                  )}
+                  {newTokenState.method.value === 'gcp' && (
+                    <JoinTokenGCPForm
+                      tokenState={newTokenState}
+                      onUpdateState={newState => setNewTokenState(newState)}
+                      readonly={hasUnsupportedFields}
+                    />
+                  )}
+                  {newTokenState.method.value === 'oracle' && (
+                    <JoinTokenOracleForm
+                      tokenState={newTokenState}
+                      onUpdateState={newState => setNewTokenState(newState)}
+                      readonly={hasUnsupportedFields}
+                    />
+                  )}
+                  {newTokenState.method.value === 'github' && (
+                    <JoinTokenGithubForm
+                      tokenState={newTokenState}
+                      onUpdateState={setNewTokenState}
+                      readonly={hasUnsupportedFields}
+                    />
+                  )}
+                  <Flex
+                    mt={4}
+                    py={4}
+                    gap={2}
+                    css={`
+                      position: sticky;
+                      bottom: 0;
+                      background: ${({ theme }) => theme.colors.levels.sunken};
+                      border-top: 1px solid
+                        ${({ theme }) => theme.colors.spotBackground[1]};
+                    `}
+                  >
+                    <ButtonPrimary
+                      width="100%"
+                      size="large"
+                      textTransform="none"
+                      onClick={() => save(validator)}
+                      disabled={
+                        createTokenAttempt.status === 'processing' ||
+                        hasUnsupportedFields
+                      }
+                    >
+                      {editToken ? 'Edit' : 'Create'} Join Token
+                    </ButtonPrimary>
+                    <ButtonSecondary
+                      width="100%"
+                      textTransform="none"
+                      size="large"
+                      onClick={() => {
+                        reset(validator);
+                        onClose();
+                      }}
+                      disabled={false}
+                    >
+                      Cancel
+                    </ButtonSecondary>
+                  </Flex>
+                </Box>
+              )}
+            </Validation>
+          </Box>
+        </Flex>
+      ) : undefined}
+    </>
   );
 };
 
+const checkYAMLData = (
+  data: unknown
+): data is {
+  object: {
+    spec: {
+      join_method: string;
+      allow: unknown;
+      gcp: unknown;
+      github: unknown;
+    };
+  };
+} => {
+  if (
+    !data ||
+    typeof data !== 'object' ||
+    data === null ||
+    !('object' in data)
+  ) {
+    return false;
+  }
+
+  const { object } = data;
+
+  if (
+    !object ||
+    typeof object !== 'object' ||
+    object === null ||
+    !('spec' in object)
+  ) {
+    return false;
+  }
+
+  const { spec } = object;
+
+  if (
+    !spec ||
+    typeof spec !== 'object' ||
+    spec === null ||
+    !('join_method' in spec)
+  ) {
+    return false;
+  }
+
+  return typeof spec.join_method === 'string';
+};
+
 export const RuleBox = styled(Box)`
   border-color: ${props => props.theme.colors.interactive.tonal.neutral[0]};
   border-width: 2px;
@@ -398,3 +630,32 @@ export const RuleBox = styled(Box)`
 
   padding: ${props => props.theme.space[3]}px;
 `;
+
+const checkYamlData = (data: unknown, joinMethod: JoinMethod) => {
+  const supportedFields = supportedFieldsMap[joinMethod];
+  if (!supportedFields) {
+    return true;
+  }
+  const keys = collectKeys(data);
+  return !keys || new Set(keys).isSubsetOf(supportedFields);
+};
+
+const supportedFieldsMap: Partial<Record<JoinMethod, Set<string>>> = {
+  iam: new Set(['.aws_account', '.aws_arn']),
+  gcp: new Set([
+    '.allow.project_ids',
+    '.allow.locations',
+    '.allow.service_accounts',
+  ]),
+  github: new Set([
+    '.enterprise_server_host',
+    '.static_jwks',
+    '.enterprise_slug',
+    '.allow.repository',
+    '.allow.repository_owner',
+    '.allow.workflow',
+    '.allow.environment',
+    '.allow.ref',
+    '.allow.ref_type',
+  ]),
+};
diff --git a/web/packages/teleport/src/Roles/RoleEditor/StandardEditor/sections.tsx b/web/packages/teleport/src/Roles/RoleEditor/StandardEditor/sections.tsx
index 627310251beba..45088e50089ff 100644
--- a/web/packages/teleport/src/Roles/RoleEditor/StandardEditor/sections.tsx
+++ b/web/packages/teleport/src/Roles/RoleEditor/StandardEditor/sections.tsx
@@ -81,19 +81,23 @@ export const SectionBox = ({
   tooltip,
   children,
   removable,
-  isProcessing,
+  isProcessing = false,
   validation,
   onRemove,
+  initiallyCollapsed = false,
 }: React.PropsWithChildren<{
   titleSegments: string[];
   tooltip?: string;
   removable?: boolean;
-  isProcessing: boolean;
+  isProcessing?: boolean;
   validation?: ValidationResult;
   onRemove?(): void;
+  initiallyCollapsed?: boolean;
 }>) => {
   const theme = useTheme();
-  const [expansionState, setExpansionState] = useState(ExpansionState.Expanded);
+  const [expansionState, setExpansionState] = useState(
+    initiallyCollapsed ? ExpansionState.Collapsed : ExpansionState.Expanded
+  );
   const expandTooltip =
     expansionState === ExpansionState.Collapsed ? 'Collapse' : 'Expand';
   const validator = useValidation();
diff --git a/web/packages/teleport/src/services/joinToken/joinToken.ts b/web/packages/teleport/src/services/joinToken/joinToken.ts
index 5043569ee4b27..a841553dd6117 100644
--- a/web/packages/teleport/src/services/joinToken/joinToken.ts
+++ b/web/packages/teleport/src/services/joinToken/joinToken.ts
@@ -22,7 +22,12 @@ import api from 'teleport/services/api';
 import { makeLabelMapOfStrArrs } from '../agents/make';
 import { withUnsupportedLabelFeatureErrorConversion } from '../version/unsupported';
 import makeJoinToken from './makeJoinToken';
-import { JoinRule, JoinToken, JoinTokenRequest } from './types';
+import {
+  CreateJoinTokenRequest,
+  JoinRule,
+  JoinToken,
+  JoinTokenRequest,
+} from './types';
 
 const TeleportTokenNameHeader = 'X-Teleport-TokenName';
 
@@ -93,10 +98,15 @@ class JoinTokenService {
       .then(makeJoinToken);
   }
 
-  createJoinToken(req: JoinTokenRequest): Promise<JoinToken> {
+  async createJoinToken(req: CreateJoinTokenRequest) {
     return api.post(cfg.getJoinTokensUrl(), req).then(makeJoinToken);
   }
 
+  async editJoinToken(req: CreateJoinTokenRequest) {
+    const json = await api.put(cfg.getJoinTokensUrl(), req);
+    return makeJoinToken(json);
+  }
+
   fetchJoinTokens(signal: AbortSignal = null): Promise<{ items: JoinToken[] }> {
     return api.get(cfg.getJoinTokensUrl(), signal).then(resp => {
       return {
diff --git a/web/packages/teleport/src/services/joinToken/makeJoinToken.ts b/web/packages/teleport/src/services/joinToken/makeJoinToken.ts
index 92ab74bc6f53f..a4da7b2a47a62 100644
--- a/web/packages/teleport/src/services/joinToken/makeJoinToken.ts
+++ b/web/packages/teleport/src/services/joinToken/makeJoinToken.ts
@@ -22,7 +22,7 @@ import type { JoinToken } from './types';
 
 export const INTERNAL_RESOURCE_ID_LABEL_KEY = 'teleport.internal/resource-id';
 
-export default function makeToken(json): JoinToken {
+export default function makeToken(json: any): JoinToken {
   json = json || {};
   const {
     id,
@@ -30,6 +30,7 @@ export default function makeToken(json): JoinToken {
     isStatic,
     allow,
     gcp,
+    github,
     bot_name,
     expiry,
     method,
@@ -48,6 +49,7 @@ export default function makeToken(json): JoinToken {
     method,
     allow,
     gcp,
+    github,
     roles: roles?.sort((a, b) => a.localeCompare(b)) || [],
     suggestedLabels: labels,
     internalResourceId: extractInternalResourceId(labels),
diff --git a/web/packages/teleport/src/services/joinToken/types.ts b/web/packages/teleport/src/services/joinToken/types.ts
index c934f798f2c12..3ddb86200f82c 100644
--- a/web/packages/teleport/src/services/joinToken/types.ts
+++ b/web/packages/teleport/src/services/joinToken/types.ts
@@ -50,6 +50,7 @@ export type JoinToken = {
   oracle?: {
     allow: OracleRules[];
   };
+  github?: GithubConfig;
 };
 
 // JoinRole defines built-in system roles and are roles associated with
@@ -114,6 +115,36 @@ export type OracleRules = {
   regions: string[];
 };
 
+type GithubConfig = {
+  /** enterprise_server_host allows joining from GitHub Actions workflows in a GitHub Enterprise Server instance. For normal situations, where you are using github.com, this option should be omitted. If you are using GHES, this value should be configured to the hostname of your GHES instance. */
+  enterprise_server_host: string | null;
+  /** static_jwks allows the JSON Web Key Set (JWKS) used to verify the token issued by GitHub Actions to be overridden. This can be used in scenarios where the Teleport Auth Service is unable to reach a GHES server. */
+  static_jwks: string | null;
+  /** enterprise_slug allows the slug of a GitHub Enterprise organisation to be included in the expected issuer of the OIDC tokens. This is for compatibility with the include_enterprise_slug option in GHE. */
+  enterprise_slug: string | null;
+  /** allow is an array of rule configurations for which GitHub Actions workflows should be allowed to join */
+  allow: GithubRules[];
+};
+
+export type GithubRules = {
+  /** repository is a fully qualified (e.g. including the owner) name of a GitHub repository. */
+  repository: string | null;
+  /** repository_owner is the name of an organization or user that a repository belongs to. */
+  repository_owner: string | null;
+  /** workflow is the exact name of a workflow as configured in the GitHub Action workflow YAML file. */
+  workflow: string | null;
+  /** environment is the environment associated with the GitHub Actions run. If no environment is configured for the GitHub Actions run, this will be empty. */
+  environment: string | null;
+  /** actor is the GitHub username that caused the GitHub Actions run, whether by committing or by directly despatching the workflow. */
+  actor: string | null;
+  /** ref is the git ref that triggered the action run. */
+  ref: string | null;
+  /** ref_type is the type of the git ref that triggered the action run. */
+  ref_type: string | null;
+  /** sub is a concatenated string of various attributes of the workflow run. GitHub explains the format of this string at: https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect#example-subject-claims */
+  sub: string | null;
+};
+
 export type JoinTokenRulesObject = AWSRules | GCPRules;
 
 export type CreateJoinTokenRequest = {
@@ -134,6 +165,7 @@ export type CreateJoinTokenRequest = {
   oracle?: {
     allow: OracleRules[];
   };
+  github?: GithubConfig;
 };
 
 export type JoinTokenRequest = {
diff --git a/web/packages/teleport/src/services/yaml/types.ts b/web/packages/teleport/src/services/yaml/types.ts
index 8e006ba8aa272..bea3d3ff35d2c 100644
--- a/web/packages/teleport/src/services/yaml/types.ts
+++ b/web/packages/teleport/src/services/yaml/types.ts
@@ -27,4 +27,5 @@ export type YamlStringifyRequest<T> = {
 export enum YamlSupportedResourceKind {
   AccessMonitoringRule = 'access_monitoring_rule',
   Role = 'role',
+  ProvisionToken = 'token',
 }
diff --git a/web/packages/teleport/src/teleportContext.tsx b/web/packages/teleport/src/teleportContext.tsx
index e8da5e2d2b2c0..5d16955733ff6 100644
--- a/web/packages/teleport/src/teleportContext.tsx
+++ b/web/packages/teleport/src/teleportContext.tsx
@@ -38,6 +38,7 @@ import sessionService from './services/session';
 import { storageService } from './services/storageService';
 import userService from './services/user';
 import userGroupService from './services/userGroups';
+import { yamlService } from './services/yaml/yaml';
 import { StoreNav, StoreUserContext } from './stores';
 import * as types from './types';
 
@@ -62,6 +63,7 @@ class TeleportContext implements types.Context {
   userGroupService = userGroupService;
   mfaService = new MfaService();
   notificationService = new NotificationService();
+  yamlService = yamlService;
 
   notificationContentFactory = notificationContentFactory;