diff --git a/js/apps/account-ui/src/account-security/SigningIn.tsx b/js/apps/account-ui/src/account-security/SigningIn.tsx
index 6e927e0dac..b49e75ddec 100644
--- a/js/apps/account-ui/src/account-security/SigningIn.tsx
+++ b/js/apps/account-ui/src/account-security/SigningIn.tsx
@@ -86,8 +86,8 @@ export const SigningIn = () => {
     const maxWidth = { "--pf-u-max-width--MaxWidth": "300px" } as CSSProperties;
     const items = [
       <DataListCell
-        id={`cred-${credMetadata.credential.id}`}
         key="title"
+        data-testrole="label"
         className="pf-u-max-width"
         style={maxWidth}
       >
@@ -97,7 +97,10 @@ export const SigningIn = () => {
 
     if (credential.createdDate) {
       items.push(
-        <DataListCell key={"created" + credential.id}>
+        <DataListCell
+          key={"created" + credential.id}
+          data-testrole="created-at"
+        >
           <Trans i18nKey="credentialCreatedAt">
             <strong className="pf-u-mr-md"></strong>
             {{ date: formatDate(new Date(credential.createdDate)) }}
@@ -115,124 +118,145 @@ export const SigningIn = () => {
     return <Spinner />;
   }
 
+  const credentialUniqueCategories = [
+    ...new Set(credentials.map((c) => c.category)),
+  ];
+
   return (
     <Page title={t("signingIn")} description={t("signingInDescription")}>
-      {credentials.map((container) => (
-        <PageSection
-          key={container.category + container.type}
-          variant="light"
-          className="pf-u-px-0"
-        >
-          <Title headingLevel="h2" size="xl">
-            {t(container.category as TFuncKey)}
+      {credentialUniqueCategories.map((category) => (
+        <PageSection key={category} variant="light" className="pf-u-px-0">
+          <Title headingLevel="h2" size="xl" id={`${category}-categ-title`}>
+            {t(category as TFuncKey)}
           </Title>
-          <Split className="pf-u-mt-lg pf-u-mb-lg">
-            <SplitItem>
-              <Title headingLevel="h3" size="md" className="pf-u-mb-md">
-                <span className="cred-title pf-u-display-block">
-                  {t(container.displayName as TFuncKey)}
-                </span>
-              </Title>
-              {t(container.helptext as TFuncKey)}
-            </SplitItem>
-            {container.createAction && (
-              <SplitItem isFilled>
-                <div className="pf-u-float-right">
-                  <MobileLink
-                    onClick={() =>
-                      login({
-                        action: container.createAction,
-                      })
-                    }
-                    title={t("setUpNew", {
-                      name: t(container.displayName as TFuncKey),
-                    })}
-                    testid={`${container.category}/create`}
-                  />
-                </div>
-              </SplitItem>
-            )}
-          </Split>
-
-          <DataList
-            aria-label="credential list"
-            className="pf-u-mb-xl"
-            data-testid={`${container.category}/credential-list`}
-          >
-            {container.userCredentialMetadatas.length === 0 && (
-              <EmptyRow
-                message={t("notSetUp", {
-                  name: t(container.displayName as TFuncKey),
-                })}
-              />
-            )}
-
-            {container.userCredentialMetadatas.map((meta) => (
-              <DataListItem key={meta.credential.id}>
-                <DataListItemRow>
-                  <DataListItemCells
-                    className="pf-u-py-0"
-                    dataListCells={[
-                      ...credentialRowCells(meta),
-                      <DataListAction
-                        key="action"
-                        id={`action-${meta.credential.id}`}
-                        aria-label={t("updateCredAriaLabel")}
-                        aria-labelledby={`cred-${meta.credential.id}`}
+          {credentials
+            .filter((cred) => cred.category == category)
+            .map((container) => (
+              <>
+                <Split className="pf-u-mt-lg pf-u-mb-lg">
+                  <SplitItem>
+                    <Title
+                      headingLevel="h3"
+                      size="md"
+                      className="pf-u-mb-md"
+                      data-testid={`${container.type}/help`}
+                    >
+                      <span
+                        className="cred-title pf-u-display-block"
+                        data-testid={`${container.type}/title`}
                       >
-                        {container.removeable ? (
-                          <ContinueCancelModal
-                            buttonTitle={t("delete")}
-                            modalTitle={t("removeCred", {
-                              name: label(meta.credential),
-                            })}
-                            continueLabel={t("confirm")}
-                            cancelLabel={t("cancel")}
-                            buttonVariant="danger"
-                            onContinue={async () => {
-                              try {
-                                await deleteCredentials(
-                                  context,
-                                  meta.credential,
-                                );
-                                addAlert(
-                                  t("successRemovedMessage", {
-                                    userLabel: label(meta.credential),
-                                  }),
-                                );
-                                refresh();
-                              } catch (error) {
-                                addError(
-                                  t("errorRemovedMessage", {
-                                    userLabel: label(meta.credential),
-                                    error,
-                                  }).toString(),
-                                );
-                              }
-                            }}
-                          >
-                            {t("stopUsingCred", {
-                              name: label(meta.credential),
-                            })}
-                          </ContinueCancelModal>
-                        ) : (
-                          <Button
-                            variant="secondary"
-                            onClick={() => {
-                              if (container.updateAction)
-                                login({ action: container.updateAction });
-                            }}
-                          >
-                            {t("update")}
-                          </Button>
-                        )}
-                      </DataListAction>,
-                    ]}
-                  />
-                </DataListItemRow>
-              </DataListItem>
+                        {t(container.displayName as TFuncKey)}
+                      </span>
+                    </Title>
+                    <span data-testid={`${container.type}/help-text`}>
+                      {t(container.helptext as TFuncKey)}
+                    </span>
+                  </SplitItem>
+                  {container.createAction && (
+                    <SplitItem isFilled>
+                      <div className="pf-u-float-right">
+                        <MobileLink
+                          onClick={() =>
+                            login({
+                              action: container.createAction,
+                            })
+                          }
+                          title={t("setUpNew", {
+                            name: t(
+                              `${container.type}-display-name` as TFuncKey,
+                            ),
+                          })}
+                          testid={`${container.type}/create`}
+                        />
+                      </div>
+                    </SplitItem>
+                  )}
+                </Split>
+
+                <DataList
+                  aria-label="credential list"
+                  className="pf-u-mb-xl"
+                  data-testid={`${container.type}/credential-list`}
+                >
+                  {container.userCredentialMetadatas.length === 0 && (
+                    <EmptyRow
+                      message={t("notSetUp", {
+                        name: t(container.displayName as TFuncKey),
+                      })}
+                      data-testid={`${container.type}/not-set-up`}
+                    />
+                  )}
+
+                  {container.userCredentialMetadatas.map((meta) => (
+                    <DataListItem key={meta.credential.id}>
+                      <DataListItemRow id={`cred-${meta.credential.id}`}>
+                        <DataListItemCells
+                          className="pf-u-py-0"
+                          dataListCells={[
+                            ...credentialRowCells(meta),
+                            <DataListAction
+                              key="action"
+                              id={`action-${meta.credential.id}`}
+                              aria-label={t("updateCredAriaLabel")}
+                              aria-labelledby={`cred-${meta.credential.id}`}
+                            >
+                              {container.removeable ? (
+                                <ContinueCancelModal
+                                  buttonTitle={t("delete")}
+                                  buttonTestRole="remove"
+                                  modalTitle={t("removeCred", {
+                                    name: label(meta.credential),
+                                  })}
+                                  continueLabel={t("confirm")}
+                                  cancelLabel={t("cancel")}
+                                  buttonVariant="danger"
+                                  onContinue={async () => {
+                                    try {
+                                      await deleteCredentials(
+                                        context,
+                                        meta.credential,
+                                      );
+                                      addAlert(
+                                        t("successRemovedMessage", {
+                                          userLabel: label(meta.credential),
+                                        }),
+                                      );
+                                      refresh();
+                                    } catch (error) {
+                                      addError(
+                                        t("errorRemovedMessage", {
+                                          userLabel: label(meta.credential),
+                                          error,
+                                        }).toString(),
+                                      );
+                                    }
+                                  }}
+                                >
+                                  {t("stopUsingCred", {
+                                    name: label(meta.credential),
+                                  })}
+                                </ContinueCancelModal>
+                              ) : (
+                                <Button
+                                  variant="secondary"
+                                  onClick={() => {
+                                    if (container.updateAction)
+                                      login({ action: container.updateAction });
+                                  }}
+                                  data-testrole="update"
+                                >
+                                  {t("update")}
+                                </Button>
+                              )}
+                            </DataListAction>,
+                          ]}
+                        />
+                      </DataListItemRow>
+                    </DataListItem>
+                  ))}
+                </DataList>
+              </>
             ))}
-          </DataList>
         </PageSection>
       ))}
     </Page>
diff --git a/js/apps/account-ui/src/components/datalist/EmptyRow.tsx b/js/apps/account-ui/src/components/datalist/EmptyRow.tsx
index 2a4a73d1d5..550767ae96 100644
--- a/js/apps/account-ui/src/components/datalist/EmptyRow.tsx
+++ b/js/apps/account-ui/src/components/datalist/EmptyRow.tsx
@@ -9,12 +9,16 @@ type EmptyRowProps = {
   message: string;
 };
 
-export const EmptyRow = ({ message }: EmptyRowProps) => {
+export const EmptyRow = ({ message, ...props }: EmptyRowProps) => {
   return (
     <DataListItem className="pf-u-align-items-center pf-p-b-0">
       <DataListItemRow>
         <DataListItemCells
-          dataListCells={[<DataListCell key="0">{message}</DataListCell>]}
+          dataListCells={[
+            <DataListCell key="0" {...props}>
+              {message}
+            </DataListCell>,
+          ]}
         />
       </DataListItemRow>
     </DataListItem>
diff --git a/js/apps/account-ui/test/account-security/signing-in.spec.ts b/js/apps/account-ui/test/account-security/signing-in.spec.ts
index 1a6af4c9ed..81ce20adf3 100644
--- a/js/apps/account-ui/test/account-security/signing-in.spec.ts
+++ b/js/apps/account-ui/test/account-security/signing-in.spec.ts
@@ -21,26 +21,22 @@ test.describe("Signing in", () => {
     page.getByTestId("account-security/signing-in").click();
 
     await expect(
-      page
-        .getByTestId("basic-authentication/credential-list")
-        .getByRole("listitem"),
+      page.getByTestId("password/credential-list").getByRole("listitem"),
     ).toHaveCount(1);
     await expect(
-      page
-        .getByTestId("basic-authentication/credential-list")
-        .getByRole("listitem"),
+      page.getByTestId("password/credential-list").getByRole("listitem"),
     ).toContainText("My password");
-    await expect(page.getByTestId("basic-authentication/create")).toBeHidden();
+    await expect(page.getByTestId("password/create")).toBeHidden();
 
     await expect(
-      page.getByTestId("two-factor/credential-list").getByRole("listitem"),
+      page.getByTestId("otp/credential-list").getByRole("listitem"),
     ).toHaveCount(1);
     await expect(
-      page.getByTestId("two-factor/credential-list").getByRole("listitem"),
+      page.getByTestId("otp/credential-list").getByRole("listitem"),
     ).toContainText("not set up");
-    await expect(page.getByTestId("two-factor/create")).toBeVisible();
+    await expect(page.getByTestId("otp/create")).toBeVisible();
 
-    await page.getByTestId("two-factor/create").click();
+    await page.getByTestId("otp/create").click();
     await expect(page.locator("#kc-page-title")).toContainText(
       "Mobile Authenticator Setup",
     );
@@ -65,26 +61,22 @@ test.describe("Signing in 2", () => {
     page.getByTestId("account-security/signing-in").click();
 
     await expect(
-      page
-        .getByTestId("basic-authentication/credential-list")
-        .getByRole("listitem"),
+      page.getByTestId("password/credential-list").getByRole("listitem"),
     ).toHaveCount(1);
     await expect(
-      page
-        .getByTestId("basic-authentication/credential-list")
-        .getByRole("listitem"),
+      page.getByTestId("password/credential-list").getByRole("listitem"),
     ).toContainText("not set up");
-    await expect(page.getByTestId("basic-authentication/create")).toBeVisible();
+    await expect(page.getByTestId("password/create")).toBeVisible();
 
     await expect(
-      page.getByTestId("two-factor/credential-list").getByRole("listitem"),
+      page.getByTestId("otp/credential-list").getByRole("listitem"),
     ).toHaveCount(1);
     await expect(
-      page.getByTestId("two-factor/credential-list").getByRole("listitem"),
+      page.getByTestId("otp/credential-list").getByRole("listitem"),
     ).toContainText("not set up");
-    await expect(page.getByTestId("two-factor/create")).toBeVisible();
+    await expect(page.getByTestId("otp/create")).toBeVisible();
 
-    await page.getByTestId("basic-authentication/create").click();
+    await page.getByTestId("password/create").click();
     await expect(page.locator("#kc-page-title")).toContainText(
       "Update password",
     );
diff --git a/js/libs/ui-shared/src/continue-cancel/ContinueCancelModal.tsx b/js/libs/ui-shared/src/continue-cancel/ContinueCancelModal.tsx
index 5ff5c4f8ec..1ac3790dc0 100644
--- a/js/libs/ui-shared/src/continue-cancel/ContinueCancelModal.tsx
+++ b/js/libs/ui-shared/src/continue-cancel/ContinueCancelModal.tsx
@@ -7,6 +7,7 @@ export type ContinueCancelModalProps = Omit<ModalProps, "ref" | "children"> & {
   cancelLabel: string;
   buttonTitle: string | ReactNode;
   buttonVariant?: ButtonProps["variant"];
+  buttonTestRole?: string;
   isDisabled?: boolean;
   onContinue: () => void;
   component?: React.ElementType<any> | React.ComponentType<any>;
@@ -20,6 +21,7 @@ export const ContinueCancelModal = ({
   buttonTitle,
   isDisabled,
   buttonVariant,
+  buttonTestRole,
   onContinue,
   component = Button,
   children,
@@ -34,6 +36,7 @@ export const ContinueCancelModal = ({
         variant={buttonVariant}
         onClick={() => setOpen(true)}
         isDisabled={isDisabled}
+        data-testrole={buttonTestRole}
       >
         {buttonTitle}
       </Component>