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>
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,
 }) => {
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/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/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>
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',
   },
 ]