diff --git a/packages/cpt-ui/src/components/EpsRoleSelectionPage.tsx b/packages/cpt-ui/src/components/EpsRoleSelectionPage.tsx
index d75576ccfe..c7607c4e6d 100644
--- a/packages/cpt-ui/src/components/EpsRoleSelectionPage.tsx
+++ b/packages/cpt-ui/src/components/EpsRoleSelectionPage.tsx
@@ -11,6 +11,8 @@ import {
   Card
 } from "nhsuk-react-components"
 
+import "../styles/roleselectionpage.scss"
+
 import {useAuth} from "@/context/AuthProvider"
 import {RoleDetails} from "@cpt-ui-common/common-types"
 import {Button} from "./ReactRouterButton"
@@ -96,6 +98,8 @@ export default function RoleSelectionPage({
 
   const navigate = useNavigate()
   const redirecting = useRef(false)
+  const [isSelectingRole, setIsSelectingRole] = useState(false)
+  const [selectedCardId, setSelectedCardId] = useState<string | null>(null)
 
   const [roleComponentProps, setRoleComponentProps] = useState<RoleComponentProps>({
     rolesWithAccess: [],
@@ -111,6 +115,15 @@ export default function RoleSelectionPage({
     roleCardProps: RolesWithAccessProps
   ) => {
     e.preventDefault()
+
+    // Prevent multiple submissions
+    if (isSelectingRole) {
+      return
+    }
+
+    setIsSelectingRole(true)
+    setSelectedCardId(roleCardProps.uuid)
+
     try {
       await auth.updateSelectedRole(roleCardProps.role)
       navigate(roleCardProps.link)
@@ -121,6 +134,8 @@ export default function RoleSelectionPage({
         return
       }
       logger.error("Error selecting role:", err)
+      setIsSelectingRole(false) // Reset loading state on error
+      setSelectedCardId(null)
     }
   }
 
@@ -330,6 +345,7 @@ export default function RoleSelectionPage({
                     <Button
                       to={confirmButton.link}
                       data-testid="confirm-and-continue"
+                      disabled={isSelectingRole}
                     >
                       {confirmButton.text}
                     </Button>
@@ -342,44 +358,85 @@ export default function RoleSelectionPage({
                 <Col width="two-thirds">
                   <div className="section">
                     {roleComponentProps.rolesWithAccess
-                      .map((roleCardProps: RolesWithAccessProps) => (
-                        <Card
-                          key={roleCardProps.uuid}
-                          data-testid="eps-card"
-                          className="nhsuk-card nhsuk-card--primary nhsuk-u-margin-bottom-4"
-                          tabIndex={0}
-                          onKeyDown={(e) => handleCardKeyDown(e, roleCardProps)}
-                          onClick={(e) => handleCardClick(e, roleCardProps)}
-                          style={{cursor: "pointer"}}
-                        >
-                          <Card.Content>
-                            <div className="eps-card__layout">
-                              <div>
-                                <Card.Heading className="nhsuk-heading-s eps-card__org-name">
-                                  {roleCardProps.role.org_name || noOrgName}
-                                  <br />
-                                  (ODS: {roleCardProps.role.org_code || noODSCode})
-                                </Card.Heading>
-                                <Card.Description className="nhsuk-u-margin-top-2">
-                                  {roleCardProps.role.role_name || noRoleName}
-                                </Card.Description>
-                              </div>
-                              <div className="eps-card__address">
-                                <Card.Description>
-                                  {(roleCardProps.role.site_address || contentText.noAddress)
-                                    .split("\n")
-                                    .map((line: string, index: number) => (
-                                      <span key={index}>
-                                        {line}
-                                        <br />
-                                      </span>
-                                    ))}
-                                </Card.Description>
+                      .map((roleCardProps: RolesWithAccessProps) => {
+                        const isThisCardSelected = selectedCardId === roleCardProps.uuid
+                        const isOtherCardDisabled = isSelectingRole && !isThisCardSelected
+
+                        return (
+                          <Card
+                            key={roleCardProps.uuid}
+                            data-testid="eps-card"
+                            className={`nhsuk-card nhsuk-card--primary nhsuk-u-margin-bottom-4 ${
+                              isOtherCardDisabled ? "nhsuk-card--disabled" : ""
+                            } ${
+                              isThisCardSelected ? "nhsuk-card--selected" : ""
+                            }`}
+                            tabIndex={isOtherCardDisabled ? -1 : 0}
+                            onKeyDown={isOtherCardDisabled ? undefined : (e) => handleCardKeyDown(e, roleCardProps)}
+                            onClick={isOtherCardDisabled ? undefined : (e) => handleCardClick(e, roleCardProps)}
+                            style={{
+                              cursor: isOtherCardDisabled ? "not-allowed" : "pointer",
+                              opacity: isOtherCardDisabled ? 0.5 : 1,
+                              pointerEvents: isOtherCardDisabled ? "none" : "auto"
+                            }}
+                            role="button"
+                            aria-disabled={isOtherCardDisabled}
+                          >
+                            <Card.Content>
+                              <div className="eps-card__layout">
+                                <div>
+                                  <Card.Heading className="nhsuk-heading-s eps-card__org-name">
+                                    <a
+                                      href="#"
+                                      onClick={isOtherCardDisabled ?
+                                        (e) => e.preventDefault() :
+                                        (e) => handleCardClick(e, roleCardProps)
+                                      }
+                                      onKeyDown={isOtherCardDisabled ?
+                                        undefined :
+                                        (e) => handleCardKeyDown(e, roleCardProps)
+                                      }
+                                      style={{
+                                        textDecoration: "none",
+                                        color: "inherit",
+                                        pointerEvents: isOtherCardDisabled ? "none" : "auto",
+                                        cursor: isOtherCardDisabled ? "not-allowed" : "pointer"
+                                      }}
+                                      tabIndex={isOtherCardDisabled ? -1 : 0}
+                                      aria-disabled={isOtherCardDisabled}
+                                      role="button"
+                                      className={`${
+                                        isOtherCardDisabled ? "disabled-card-link" : ""
+                                      } ${
+                                        isThisCardSelected ? "selected-card-link" : ""
+                                      }`}
+                                    >
+                                      {roleCardProps.role.org_name || noOrgName}
+                                      <br />
+                                    (ODS: {roleCardProps.role.org_code || noODSCode})
+                                    </a>
+                                  </Card.Heading>
+                                  <Card.Description className="nhsuk-u-margin-top-2">
+                                    {roleCardProps.role.role_name || noRoleName}
+                                  </Card.Description>
+                                </div>
+                                <div className="eps-card__address">
+                                  <Card.Description>
+                                    {(roleCardProps.role.site_address || contentText.noAddress)
+                                      .split("\n")
+                                      .map((line: string, index: number) => (
+                                        <span key={index}>
+                                          {line}
+                                          <br />
+                                        </span>
+                                      ))}
+                                  </Card.Description>
+                                </div>
                               </div>
-                            </div>
-                          </Card.Content>
-                        </Card>
-                      ))}
+                            </Card.Content>
+                          </Card>
+                        )
+                      })}
                   </div>
                 </Col>
               )}
diff --git a/packages/cpt-ui/src/components/ReactRouterButton.tsx b/packages/cpt-ui/src/components/ReactRouterButton.tsx
index 8e19ef4983..b44d0e5534 100644
--- a/packages/cpt-ui/src/components/ReactRouterButton.tsx
+++ b/packages/cpt-ui/src/components/ReactRouterButton.tsx
@@ -18,7 +18,6 @@ interface ReactRouterButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
 export const Button: React.FC<ReactRouterButtonProps> = ({
   children,
   to,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   disabled = false,
   onClick,
   className = "",
@@ -28,6 +27,11 @@ export const Button: React.FC<ReactRouterButtonProps> = ({
   const navigate = useNavigate()
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {
+    if (disabled) {
+      event.preventDefault()
+      return
+    }
+
     if (to) {
       event.preventDefault()
       const absolutePath = to.startsWith("/") ? to : `/${to}`
@@ -40,6 +44,7 @@ export const Button: React.FC<ReactRouterButtonProps> = ({
 
   return (
     <NHSButton
+      disabled={disabled}
       onClick={handleClick}
       className={`${className}`}
       data-testid={testId}
diff --git a/packages/cpt-ui/src/styles/roleselectionpage.scss b/packages/cpt-ui/src/styles/roleselectionpage.scss
new file mode 100644
index 0000000000..71151566d7
--- /dev/null
+++ b/packages/cpt-ui/src/styles/roleselectionpage.scss
@@ -0,0 +1,32 @@
+.nhsuk-card--disabled:not(.nhsuk-card--selected),
+.nhsuk-card--disabled:not(.nhsuk-card--selected):hover,
+.nhsuk-card--disabled:not(.nhsuk-card--selected):focus {
+  pointer-events: none !important;
+  cursor: not-allowed !important;
+}
+
+.disabled-card-link:not(.selected-card-link),
+.disabled-card-link:not(.selected-card-link):hover,
+.disabled-card-link:not(.selected-card-link):focus {
+  color: inherit !important;
+  text-decoration: none !important;
+  pointer-events: none !important;
+  cursor: not-allowed !important;
+}
+
+// Maintain selected card styling
+.nhsuk-card--selected .selected-card-link,
+.nhsuk-card--selected .selected-card-link:hover,
+.nhsuk-card--selected .selected-card-link:focus,
+.nhsuk-card--selected .selected-card-link:active {
+  color: #7c2d12 !important;
+  text-decoration: underline !important;
+  text-underline-offset: .1578947368em;
+  text-decoration-thickness: max(.08em, 1px);
+}
+
+.nhsuk-card--selected .selected-card-link:focus {
+  background: #fd0 !important;
+  box-shadow: 0 -2px #fd0, 0 4px #212b32 !important;
+  outline: 4px solid transparent;
+}