From 8b0847ebaf64587ea36e18ddf3cae6942531ccb0 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Mon, 17 Aug 2026 14:35:56 -0300
Subject: [PATCH 1/4] refactor(forms): Let Switch and FieldLabel take an id

A FieldLabel can only point at a control that has an id, and Switch did not
accept one, so its label could not be associated; rc-switch already spreads
unknown props onto its <button>, which is labelable. FieldLabel takes an id
so an aria-labelledby elsewhere can name a group of controls from it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 frontend/web/components/Switch.tsx                | 1 +
 frontend/web/components/base/forms/FieldLabel.tsx | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/web/components/Switch.tsx b/frontend/web/components/Switch.tsx
index b6b60f20206c..9d19b913d368 100644
--- a/frontend/web/components/Switch.tsx
+++ b/frontend/web/components/Switch.tsx
@@ -3,6 +3,7 @@ import RCSwitch, { Props as RCSwitchProps } from 'rc-switch'
 import Icon from './icons/Icon'
 
 export type SwitchProps = RCSwitchProps & {
+  id?: string
   checked?: boolean
   darkMode?: boolean
   offMarkup?: React.ReactNode
diff --git a/frontend/web/components/base/forms/FieldLabel.tsx b/frontend/web/components/base/forms/FieldLabel.tsx
index ab0e70686aa1..bd4f748a32ce 100644
--- a/frontend/web/components/base/forms/FieldLabel.tsx
+++ b/frontend/web/components/base/forms/FieldLabel.tsx
@@ -6,6 +6,7 @@ import Tooltip, { TooltipProps } from 'components/Tooltip'
 interface FieldLabelProps {
   // Associates the label with its control; required for accessibility.
   htmlFor?: string
+  id?: string
   children: ReactNode
   // Shows a danger asterisk after the label.
   required?: boolean
@@ -22,11 +23,12 @@ const FieldLabel: FC<FieldLabelProps> = ({
   children,
   className,
   htmlFor,
+  id,
   required,
   tooltip,
   tooltipPlace = 'top',
 }) => (
-  <label htmlFor={htmlFor} className={cn('control-label', className)}>
+  <label id={id} htmlFor={htmlFor} className={cn('control-label', className)}>
     {children}
     {required && (
       <span className='text-danger ml-1' aria-hidden>

From e7255633ad6c50df64d935153934c475ab395a09 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Mon, 17 Aug 2026 14:35:58 -0300
Subject: [PATCH 2/4] fix(icons): Make the GitHub mark visible in dark mode

It defaulted to #000000, so it disappeared on dark surfaces. Defaults to
currentColor now, following the text colour in both themes. The one caller
that wants white passes it explicitly.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 frontend/web/components/icons/GithubIcon.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/web/components/icons/GithubIcon.tsx b/frontend/web/components/icons/GithubIcon.tsx
index 080961e9aae4..2dd03f587c60 100644
--- a/frontend/web/components/icons/GithubIcon.tsx
+++ b/frontend/web/components/icons/GithubIcon.tsx
@@ -9,7 +9,7 @@ interface GithubIconProps {
 
 export const GithubIcon: React.FC<GithubIconProps> = ({
   className = '',
-  fill = '#000000',
+  fill = 'currentColor',
   height = 14,
   width = 14,
 }) => {

From a3fa54211ad29d6aeed2542fa22fe805eae8dd56 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Tue, 18 Aug 2026 13:10:50 -0300
Subject: [PATCH 3/4] refactor(OIDC): Use design system components and name
 every control

Swaps hand-rolled markup for the components that cover it, and fixes the
accessible names those controls were missing:

- Role chips become Chip, so removal sits on its own button rather than the
  whole chip being a delete target, and both ionicons imports go.
- Labels become FieldLabel, with htmlFor wiring "Is admin" to its switch.
  The role chips and claim rules sit in groups named by their label, since a
  label cannot point at a set of controls.
- The read-only InputGroups drop `component`, which bypassed the default
  Input and the label and error wiring with it. The Select keeps it.
- Claim rule rows remove with a trash in the resting-grey square the other
  removable rows use; close stays for chips and dismissible banners. Each
  row's inputs and remove button carry its number, rather than three
  identical placeholders and three buttons reading "Remove rule".
- The wildcard hint is referenced with aria-describedby, so it is announced
  on reaching a values field.
- The list's delete button had no accessible name at all; it gains one and
  drops a data-test nothing referenced.
- Both save buttons use isLoading instead of folding the mutation flags into
  disabled, so they show a spinner.
- The integration link becomes Link rather than a Button with an href.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../GithubTrustRelationshipForm.tsx           |  27 ++---
 .../TrustRelationshipModal.tsx                | 104 ++++++++++--------
 .../TrustRelationshipPermissionsFields.tsx    |  55 ++++-----
 .../TrustRelationships/TrustRelationships.tsx |   8 +-
 4 files changed, 97 insertions(+), 97 deletions(-)

diff --git a/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/GithubTrustRelationshipForm/GithubTrustRelationshipForm.tsx b/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/GithubTrustRelationshipForm/GithubTrustRelationshipForm.tsx
index b389bdf98eb2..a2a589f42576 100644
--- a/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/GithubTrustRelationshipForm/GithubTrustRelationshipForm.tsx
+++ b/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/GithubTrustRelationshipForm/GithubTrustRelationshipForm.tsx
@@ -1,8 +1,8 @@
 import React, { FC, useEffect, useMemo, useState } from 'react'
 import Button from 'components/base/forms/Button'
 import ErrorMessage from 'components/ErrorMessage'
-import Input from 'components/base/forms/Input'
 import InputGroup from 'components/base/forms/InputGroup'
+import Link from 'components/base/link'
 import Utils from 'common/utils/utils'
 import {
   Repository,
@@ -211,14 +211,12 @@ const GithubTrustRelationshipForm: FC<GithubTrustRelationshipFormProps> = ({
       />
       <div className='text-muted mb-3'>
         Install the{' '}
-        <Button
-          theme='text'
-          className='fw-normal'
+        <Link
           href={`/organisation/${organisationId}/integrations`}
           target='_blank'
         >
           Flagsmith GitHub integration
-        </Button>{' '}
+        </Link>{' '}
         to pick repositories from a list.
       </div>
     </>
@@ -227,13 +225,8 @@ const GithubTrustRelationshipForm: FC<GithubTrustRelationshipFormProps> = ({
     repositoryFields = (
       <InputGroup
         title='Repository'
-        component={
-          <Input
-            className='full-width'
-            value={`Pinned by repository ID ${pinnedRepoId}`}
-            readOnly
-          />
-        }
+        value={`Pinned by repository ID ${pinnedRepoId}`}
+        inputProps={{ className: 'full-width', readOnly: true }}
       />
     )
   } else if (installationId) {
@@ -281,9 +274,8 @@ const GithubTrustRelationshipForm: FC<GithubTrustRelationshipFormProps> = ({
         <>
           <InputGroup
             title='Audience'
-            component={
-              <Input className='full-width' value={audience} readOnly />
-            }
+            value={audience}
+            inputProps={{ className: 'full-width', readOnly: true }}
           />
           <WorkflowSetupSnippet
             audience={audience}
@@ -308,9 +300,8 @@ const GithubTrustRelationshipForm: FC<GithubTrustRelationshipFormProps> = ({
       <div className='text-right mt-4'>
         <Button
           onClick={save}
-          disabled={
-            (!repoFullName && !isUnresolvedPin) || isCreating || isUpdating
-          }
+          disabled={!repoFullName && !isUnresolvedPin}
+          isLoading={isCreating || isUpdating}
         >
           {isEdit ? 'Save trust relationship' : 'Create trust relationship'}
         </Button>
diff --git a/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/TrustRelationshipModal/TrustRelationshipModal.tsx b/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/TrustRelationshipModal/TrustRelationshipModal.tsx
index 26376920edb9..1410d94b456c 100644
--- a/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/TrustRelationshipModal/TrustRelationshipModal.tsx
+++ b/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/TrustRelationshipModal/TrustRelationshipModal.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo, useState } from 'react'
+import React, { FC, useId, useMemo, useState } from 'react'
 import Button from 'components/base/forms/Button'
 import ErrorMessage from 'components/ErrorMessage'
 import FieldLabel from 'components/base/forms/FieldLabel'
@@ -32,6 +32,8 @@ const TrustRelationshipModal: FC<TrustRelationshipModalProps> = ({
   trustRelationship,
 }) => {
   const isEdit = !!trustRelationship
+  const claimRulesLabelId = useId()
+  const valuesHintId = useId()
   const [name, setName] = useState(trustRelationship?.name || '')
   const [issuer, setIssuer] = useState(trustRelationship?.issuer || '')
   const [audience, setAudience] = useState(trustRelationship?.audience || '')
@@ -148,53 +150,58 @@ const TrustRelationshipModal: FC<TrustRelationshipModalProps> = ({
         onChange={(e: InputEvent) => setAudience(Utils.safeParseEventValue(e))}
         placeholder='e.g. https://github.com/YourOrg'
       />
-      <FieldLabel>Claim matching rules</FieldLabel>
-      {claimRules.map((rule, index) => (
-        <Row key={index} className='mb-2 gap-2'>
-          <Flex>
-            <Input
-              value={rule.claim}
-              className='full-width'
-              onChange={(e: InputEvent) =>
-                setClaimRules((rules) =>
-                  rules.map((r, i) =>
-                    i === index
-                      ? { ...r, claim: Utils.safeParseEventValue(e) }
-                      : r,
-                  ),
-                )
+      <FieldLabel id={claimRulesLabelId}>Claim matching rules</FieldLabel>
+      <div role='group' aria-labelledby={claimRulesLabelId}>
+        {claimRules.map((rule, index) => (
+          <Row key={index} className='mb-2 gap-2'>
+            <Flex>
+              <Input
+                aria-label={`Claim for rule ${index + 1}`}
+                value={rule.claim}
+                className='full-width'
+                onChange={(e: InputEvent) =>
+                  setClaimRules((rules) =>
+                    rules.map((r, i) =>
+                      i === index
+                        ? { ...r, claim: Utils.safeParseEventValue(e) }
+                        : r,
+                    ),
+                  )
+                }
+                placeholder='Claim, e.g. repository'
+              />
+            </Flex>
+            <Flex>
+              <Input
+                aria-label={`Values for rule ${index + 1}`}
+                value={rule.values}
+                className='full-width'
+                onChange={(e: InputEvent) =>
+                  setClaimRules((rules) =>
+                    rules.map((r, i) =>
+                      i === index
+                        ? { ...r, values: Utils.safeParseEventValue(e) }
+                        : r,
+                    ),
+                  )
+                }
+                placeholder='Values, e.g. YourOrg/your-repo'
+                aria-describedby={valuesHintId}
+              />
+            </Flex>
+            <Button
+              className='btn btn-with-icon'
+              onClick={() =>
+                setClaimRules((rules) => rules.filter((_, i) => i !== index))
               }
-              placeholder='Claim, e.g. repository'
-            />
-          </Flex>
-          <Flex>
-            <Input
-              value={rule.values}
-              className='full-width'
-              onChange={(e: InputEvent) =>
-                setClaimRules((rules) =>
-                  rules.map((r, i) =>
-                    i === index
-                      ? { ...r, values: Utils.safeParseEventValue(e) }
-                      : r,
-                  ),
-                )
-              }
-              placeholder='Values, e.g. YourOrg/your-repo'
-            />
-          </Flex>
-          <Button
-            theme='text'
-            onClick={() =>
-              setClaimRules((rules) => rules.filter((_, i) => i !== index))
-            }
-            aria-label='Remove rule'
-          >
-            <Icon name='close' width={16} />
-          </Button>
-        </Row>
-      ))}
-      <div className='text-muted mb-2'>
+              aria-label={`Remove rule ${index + 1}`}
+            >
+              <Icon name='trash-2' width={20} />
+            </Button>
+          </Row>
+        ))}
+      </div>
+      <div id={valuesHintId} className='text-muted mb-2'>
         Values support * wildcards; separate alternatives with commas.
       </div>
       <Button
@@ -228,7 +235,8 @@ const TrustRelationshipModal: FC<TrustRelationshipModalProps> = ({
       <div className='text-right mt-4'>
         <Button
           onClick={save}
-          disabled={!name || !issuer || !audience || isCreating || isUpdating}
+          disabled={!name || !issuer || !audience}
+          isLoading={isCreating || isUpdating}
         >
           {isEdit ? 'Save trust relationship' : 'Create trust relationship'}
         </Button>
diff --git a/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/TrustRelationshipPermissionsFields/TrustRelationshipPermissionsFields.tsx b/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/TrustRelationshipPermissionsFields/TrustRelationshipPermissionsFields.tsx
index e074ec4168a8..cfd357f30278 100644
--- a/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/TrustRelationshipPermissionsFields/TrustRelationshipPermissionsFields.tsx
+++ b/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/TrustRelationshipPermissionsFields/TrustRelationshipPermissionsFields.tsx
@@ -1,7 +1,7 @@
-import React, { FC, useState } from 'react'
-import { IonIcon } from '@ionic/react'
-import { close as closeIcon } from 'ionicons/icons'
+import { FC, useId, useState } from 'react'
 import Button from 'components/base/forms/Button'
+import Chip from 'components/base/Chip'
+import FieldLabel from 'components/base/forms/FieldLabel'
 import PlanBasedBanner from 'components/PlanBasedAccess'
 import Switch from 'components/Switch'
 import MyRoleSelect from 'components/MyRoleSelect'
@@ -29,12 +29,17 @@ const TrustRelationshipPermissionsFields: FC<
   roles,
 }) => {
   const [showRoles, setShowRoles] = useState(false)
+  const isAdminId = useId()
+  const rolesLabelId = useId()
 
   return (
     <>
       <Row className='mb-3 mt-4 gap-2'>
-        <label className='mb-0'>Is admin</label>
+        <FieldLabel htmlFor={isAdminId} className='mb-0'>
+          Is admin
+        </FieldLabel>
         <Switch
+          id={isAdminId}
           onChange={onIsAdminChange}
           checked={isAdmin}
           disabled={!Utils.getPlansPermission('RBAC') && isAdmin}
@@ -44,29 +49,25 @@ const TrustRelationshipPermissionsFields: FC<
       <PlanBasedBanner feature='RBAC' theme='description' className='mb-4' />
       {!isAdmin && (
         <>
-          <Row className='mb-3'>
-            <label className='mr-2'>Roles:</label>
-            {roles.map((role) => (
-              <Row
-                key={role.id}
-                role='button'
-                tabIndex={0}
-                aria-label={`Remove role ${role.name}`}
-                onClick={() => onRemoveRole(role.id)}
-                onKeyDown={(e: React.KeyboardEvent) => {
-                  if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault()
-                    onRemoveRole(role.id)
-                  }
-                }}
-                className='chip'
-              >
-                <span className='font-weight-bold'>{role.name}</span>
-                <span className='chip-icon ion'>
-                  <IonIcon icon={closeIcon} style={{ fontSize: '13px' }} />
-                </span>
-              </Row>
-            ))}
+          <Row className='mb-3 gap-2'>
+            <FieldLabel id={rolesLabelId} className='mb-0'>
+              Roles
+            </FieldLabel>
+            <div
+              role='group'
+              aria-labelledby={rolesLabelId}
+              className='d-flex flex-wrap gap-2'
+            >
+              {roles.map((role) => (
+                <Chip
+                  key={role.id}
+                  variant='accent'
+                  onRemove={() => onRemoveRole(role.id)}
+                >
+                  {role.name}
+                </Chip>
+              ))}
+            </div>
           </Row>
           <Row className='mb-3'>
             <Button theme='text' onClick={() => setShowRoles(!showRoles)}>
diff --git a/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/TrustRelationships/TrustRelationships.tsx b/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/TrustRelationships/TrustRelationships.tsx
index 497e135390b4..7a9e08ee9073 100644
--- a/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/TrustRelationships/TrustRelationships.tsx
+++ b/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/TrustRelationships/TrustRelationships.tsx
@@ -25,7 +25,7 @@ const IssuerCell: FC<{ issuer: string }> = ({ issuer }) => {
     <Row className='gap-1 align-items-center'>
       {!!provider && (
         <span className='d-flex' aria-hidden>
-          {provider.icon}
+          {provider.icon(16)}
         </span>
       )}
       <span className='font-monospace'>{issuer}</span>
@@ -176,14 +176,14 @@ const TrustRelationships: FC<TrustRelationshipsProps> = ({
               </div>
               <div className='table-column' style={{ width: 80 }}>
                 <Button
-                  theme='text'
+                  className='btn btn-with-icon'
                   onClick={(e) => {
                     e.stopPropagation()
                     remove(trustRelationship)
                   }}
-                  data-test={`remove-trust-relationship-${trustRelationship.id}`}
+                  aria-label={`Delete ${trustRelationship.name}`}
                 >
-                  <Icon name='trash-2' width={20} fill='#656D7B' />
+                  <Icon name='trash-2' width={20} />
                 </Button>
               </div>
             </Row>

From 41f5321759dc22f9d6115608fbff05de4099f9d8 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Tue, 18 Aug 2026 13:10:53 -0300
Subject: [PATCH 4/4] feat(OIDC): Rebuild the provider chooser and show the
 chosen provider

The chooser cards become ProviderCard: leading icon tile, an inline
Recommended chip, and a trailing chevron. Its own component rather than an
extension of SelectableCard, which stacks its icon above the title and has
four consumers, two of which would move.

Step two used to give no sign of which provider was picked and no way to
change it, since the modal title reads the same on both steps. It now opens
with a Provider summary naming the choice, with Change to go back, and focus
lands on the first editable field.

The provider registry carries the chooser's copy too, so a preset is one
entry rather than a label and icon in the registry and the same pair again in
the chooser. Its icon became a function of size, since the list badge and the
card want different ones, and the GitHub label moved next to GITHUB_ISSUER.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../NewTrustRelationshipModal.scss            |   3 +
 .../NewTrustRelationshipModal.tsx             | 106 +++++++++++-------
 .../ProviderCard/ProviderCard.scss            |  19 ++++
 .../ProviderCard/ProviderCard.tsx             |  50 +++++++++
 .../trust-relationships/ProviderCard/index.ts |   2 +
 .../tabs/trust-relationships/github.ts        |   1 +
 .../tabs/trust-relationships/providers.tsx    |  38 +++++--
 7 files changed, 170 insertions(+), 49 deletions(-)
 create mode 100644 frontend/web/components/pages/organisation-settings/tabs/trust-relationships/NewTrustRelationshipModal/NewTrustRelationshipModal.scss
 create mode 100644 frontend/web/components/pages/organisation-settings/tabs/trust-relationships/ProviderCard/ProviderCard.scss
 create mode 100644 frontend/web/components/pages/organisation-settings/tabs/trust-relationships/ProviderCard/ProviderCard.tsx
 create mode 100644 frontend/web/components/pages/organisation-settings/tabs/trust-relationships/ProviderCard/index.ts

diff --git a/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/NewTrustRelationshipModal/NewTrustRelationshipModal.scss b/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/NewTrustRelationshipModal/NewTrustRelationshipModal.scss
new file mode 100644
index 000000000000..8daf2f6a7c92
--- /dev/null
+++ b/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/NewTrustRelationshipModal/NewTrustRelationshipModal.scss
@@ -0,0 +1,3 @@
+.new-trust-relationship__provider {
+  border: 1px solid var(--color-border-default);
+}
diff --git a/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/NewTrustRelationshipModal/NewTrustRelationshipModal.tsx b/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/NewTrustRelationshipModal/NewTrustRelationshipModal.tsx
index fa474a2cc5f3..eee24d03f65a 100644
--- a/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/NewTrustRelationshipModal/NewTrustRelationshipModal.tsx
+++ b/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/NewTrustRelationshipModal/NewTrustRelationshipModal.tsx
@@ -1,8 +1,15 @@
-import React, { FC, useState } from 'react'
+import { FC, useEffect, useRef, useState } from 'react'
+import Button from 'components/base/forms/Button'
+import ProviderCard from 'components/pages/organisation-settings/tabs/trust-relationships/ProviderCard'
+import {
+  TRUST_RELATIONSHIP_PROVIDERS,
+  TrustRelationshipProvider,
+} from 'components/pages/organisation-settings/tabs/trust-relationships/providers'
 import GithubTrustRelationshipForm from 'components/pages/organisation-settings/tabs/trust-relationships/GithubTrustRelationshipForm'
 import TrustRelationshipModal from 'components/pages/organisation-settings/tabs/trust-relationships/TrustRelationshipModal'
+import './NewTrustRelationshipModal.scss'
 
-type Provider = 'github' | 'other'
+const ICON_SIZE = 40
 
 type NewTrustRelationshipModalProps = {
   organisationId: number
@@ -13,55 +20,70 @@ const NewTrustRelationshipModal: FC<NewTrustRelationshipModalProps> = ({
   existingAudiences,
   organisationId,
 }) => {
-  const [provider, setProvider] = useState<Provider | null>(null)
+  const [provider, setProvider] = useState<TrustRelationshipProvider | null>(
+    null,
+  )
+  const formRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    // Land on the first field, which depends on the provider and, for GitHub, on
+    // whether the integration is installed.
+    formRef.current
+      ?.querySelector<HTMLElement>(
+        'input:not([readonly]):not([type=hidden]), textarea',
+      )
+      ?.focus()
+  }, [provider])
 
-  if (provider === 'github') {
+  if (!provider) {
     return (
-      <GithubTrustRelationshipForm
-        organisationId={organisationId}
-        existingAudiences={existingAudiences}
-      />
+      <div className='p-4'>
+        <p className='text-secondary mb-3'>
+          Choose how your CI will authenticate.
+        </p>
+        <div className='d-flex flex-column gap-3'>
+          {TRUST_RELATIONSHIP_PROVIDERS.map((option) => (
+            <ProviderCard
+              key={option.key}
+              onClick={() => setProvider(option)}
+              icon={option.icon(ICON_SIZE)}
+              title={option.label}
+              description={option.description}
+              badge={option.badge}
+            />
+          ))}
+        </div>
+      </div>
     )
   }
-  if (provider === 'other') {
-    return <TrustRelationshipModal organisationId={organisationId} />
-  }
 
   return (
-    <div className='p-4'>
-      <div
-        className='panel--grey p-3 mb-3 clickable'
-        data-test='provider-github'
-        role='button'
-        tabIndex={0}
-        onClick={() => setProvider('github')}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') setProvider('github')
-        }}
-      >
-        <h6 className='mb-1'>GitHub Actions</h6>
-        <div className='text-muted fs-small'>
-          Let workflows in a GitHub repository authenticate with their OIDC job
-          token. Recommended if your CI runs on GitHub Actions.
+    <>
+      <div className='px-4 pt-4'>
+        <div className='fs-small text-secondary text-uppercase mb-2'>
+          Provider
         </div>
-      </div>
-      <div
-        className='panel--grey p-3 clickable'
-        data-test='provider-other'
-        role='button'
-        tabIndex={0}
-        onClick={() => setProvider('other')}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') setProvider('other')
-        }}
-      >
-        <h6 className='mb-1'>Other OIDC provider</h6>
-        <div className='text-muted fs-small'>
-          Configure a custom issuer, audience and claim matching rules for any
-          OIDC identity provider, such as GitLab CI or Kubernetes.
+        <div className='new-trust-relationship__provider d-flex align-items-center gap-3 p-3 rounded-lg bg-surface-subtle'>
+          <span className='d-flex' aria-hidden>
+            {provider.icon(ICON_SIZE - 12)}
+          </span>
+          <div className='flex-fill fw-semibold'>{provider.label}</div>
+          <Button theme='text' onClick={() => setProvider(null)}>
+            Change
+          </Button>
         </div>
       </div>
-    </div>
+      <div ref={formRef}>
+        {provider.key === 'github' ? (
+          <GithubTrustRelationshipForm
+            organisationId={organisationId}
+            existingAudiences={existingAudiences}
+          />
+        ) : (
+          <TrustRelationshipModal organisationId={organisationId} />
+        )}
+      </div>
+    </>
   )
 }
 
diff --git a/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/ProviderCard/ProviderCard.scss b/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/ProviderCard/ProviderCard.scss
new file mode 100644
index 000000000000..3c9d39dc7bb8
--- /dev/null
+++ b/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/ProviderCard/ProviderCard.scss
@@ -0,0 +1,19 @@
+// Layout, spacing and radius come from utilities; this is what they cannot
+// express. `border-1` is not an option here: it uses a black alpha, so it all
+// but disappears in dark mode.
+.provider-card {
+  border: 1px solid var(--color-border-default);
+
+  &:hover {
+    border-color: var(--color-border-strong);
+    background: var(--color-surface-subtle);
+  }
+
+  &__body {
+    min-width: 0;
+  }
+
+  &__title {
+    font-weight: var(--font-weight-medium);
+  }
+}
diff --git a/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/ProviderCard/ProviderCard.tsx b/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/ProviderCard/ProviderCard.tsx
new file mode 100644
index 000000000000..ac407f290cf6
--- /dev/null
+++ b/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/ProviderCard/ProviderCard.tsx
@@ -0,0 +1,50 @@
+import { FC, ReactNode } from 'react'
+import { colorIconSecondary } from 'common/theme/tokens'
+import BareButton from 'components/base/forms/BareButton'
+import Chip from 'components/base/Chip'
+import Icon from 'components/icons/Icon'
+import './ProviderCard.scss'
+
+export type ProviderCardProps = {
+  icon: ReactNode
+  title: string
+  description: string
+  badge?: string
+  onClick: () => void
+}
+
+const ProviderCard: FC<ProviderCardProps> = ({
+  badge,
+  description,
+  icon,
+  onClick,
+  title,
+}) => (
+  <BareButton
+    className='provider-card d-flex align-items-center gap-3 w-100 p-3 text-start rounded-xl transition-fast'
+    onClick={onClick}
+  >
+    <span
+      className='d-flex align-items-center justify-content-center flex-shrink-0 p-2 rounded-lg bg-surface-muted'
+      aria-hidden
+    >
+      {icon}
+    </span>
+    <span className='provider-card__body d-flex flex-column gap-1 flex-fill'>
+      <span className='d-flex align-items-center gap-2 flex-wrap'>
+        <span className='provider-card__title'>{title}</span>
+        {!!badge && (
+          <Chip size='xs' variant='accent'>
+            {badge}
+          </Chip>
+        )}
+      </span>
+      <span className='fs-small text-secondary'>{description}</span>
+    </span>
+    <span className='d-flex align-items-center flex-shrink-0' aria-hidden>
+      <Icon name='chevron-right' width={20} fill={colorIconSecondary} />
+    </span>
+  </BareButton>
+)
+
+export default ProviderCard
diff --git a/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/ProviderCard/index.ts b/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/ProviderCard/index.ts
new file mode 100644
index 000000000000..2723dde7790c
--- /dev/null
+++ b/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/ProviderCard/index.ts
@@ -0,0 +1,2 @@
+export { default } from './ProviderCard'
+export type { ProviderCardProps } from './ProviderCard'
diff --git a/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/github.ts b/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/github.ts
index e5d1e20d1647..277b0d6a0f7e 100644
--- a/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/github.ts
+++ b/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/github.ts
@@ -1,6 +1,7 @@
 import { TrustRelationship } from 'common/types/responses'
 
 export const GITHUB_ISSUER = 'https://token.actions.githubusercontent.com'
+export const GITHUB_LABEL = 'GitHub Actions'
 
 // Claims the GitHub form can round-trip; anything else edits as freeform.
 const GITHUB_FORM_CLAIMS = ['repository', 'repository_id', 'environment']
diff --git a/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/providers.tsx b/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/providers.tsx
index 5fe06015f93f..95a6ec192303 100644
--- a/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/providers.tsx
+++ b/frontend/web/components/pages/organisation-settings/tabs/trust-relationships/providers.tsx
@@ -1,20 +1,44 @@
 import React, { ReactNode } from 'react'
+import { colorIconDefault } from 'common/theme/tokens'
 import { GithubIcon } from 'components/icons/GithubIcon'
-import { GITHUB_ISSUER } from './github'
+import Icon from 'components/icons/Icon'
+import { GITHUB_ISSUER, GITHUB_LABEL } from './github'
 
-// Known OIDC providers, keyed by issuer. Add an entry here to give a future
-// preset (GitLab CI, Kubernetes, ...) its own badge in the list view.
+export type TrustRelationshipProviderKey = 'github' | 'other'
+
+// The providers the create flow offers, and the badges the list view shows.
+// Add an entry here to introduce a preset (GitLab CI, Kubernetes, ...).
 export type TrustRelationshipProvider = {
-  issuer: string
+  key: TrustRelationshipProviderKey
   label: string
-  icon: ReactNode
+  description: string
+  // The list view badges an issuer it recognises; a freeform provider has none.
+  issuer?: string
+  badge?: string
+  // Sized by the caller: the list badge is small, the create flow's card is not.
+  icon: (size: number) => ReactNode
 }
 
 export const TRUST_RELATIONSHIP_PROVIDERS: TrustRelationshipProvider[] = [
   {
-    icon: <GithubIcon width={16} height={16} />,
+    badge: 'Recommended',
+    description:
+      'Let workflows in a GitHub repository authenticate with their OIDC job token. Recommended if your CI runs on GitHub Actions.',
+    icon: (size) => (
+      <GithubIcon width={size} height={size} fill={colorIconDefault} />
+    ),
     issuer: GITHUB_ISSUER,
-    label: 'GitHub Actions',
+    key: 'github',
+    label: GITHUB_LABEL,
+  },
+  {
+    description:
+      'Configure a custom issuer, audience and claim matching rules for any OIDC identity provider, such as GitLab CI or Kubernetes.',
+    icon: (size) => (
+      <Icon name='shield' width={size} height={size} fill={colorIconDefault} />
+    ),
+    key: 'other',
+    label: 'Other OIDC provider',
   },
 ]