diff --git a/js/apps/account-ui/src/groups/Groups.tsx b/js/apps/account-ui/src/groups/Groups.tsx
index 151c2bdbfe..30d809ffba 100644
--- a/js/apps/account-ui/src/groups/Groups.tsx
+++ b/js/apps/account-ui/src/groups/Groups.tsx
@@ -24,7 +24,7 @@ export const Groups = () => {
   usePromise(
     (signal) => getGroups({ signal, context }),
     (groups) => {
-      if (directMembership) {
+      if (!directMembership) {
         groups.forEach((el) =>
           getParents(
             el,
@@ -66,6 +66,7 @@ export const Groups = () => {
                   <Checkbox
                     label={t("directMembership")}
                     id="directMembership-checkbox"
+                    data-testid="directMembership-checkbox"
                     isChecked={directMembership}
                     onChange={(checked) => setDirectMembership(checked)}
                   />
diff --git a/js/apps/account-ui/test/groups.spec.ts b/js/apps/account-ui/test/groups.spec.ts
index 8d7a445733..6de9ae9602 100644
--- a/js/apps/account-ui/test/groups.spec.ts
+++ b/js/apps/account-ui/test/groups.spec.ts
@@ -5,6 +5,35 @@ test.describe("Groups page", () => {
   test("List my groups", async ({ page }) => {
     await login(page, "jdoe", "jdoe", "groups");
     await page.getByTestId("groups").click();
-    await expect(page.getByTestId("group[0].name")).toHaveText("one");
+    await expect(page.getByTestId("group[1].name")).toHaveText("three");
+  });
+
+  test("List my direct and indirect groups", async ({ page }) => {
+    await login(page, "alice", "alice", "groups");
+    await page.getByTestId("groups").click();
+
+    await expect(
+      page.getByTestId("directMembership-checkbox"),
+    ).not.toBeChecked();
+    await expect(page.getByTestId("group[3].name")).toHaveText("one");
+    await expect(
+      page.locator("#groups-list li").filter({ hasText: /\/\S+$/ }),
+    ).toHaveCount(4);
+
+    await page.getByTestId("directMembership-checkbox").click();
+    await expect(page.getByTestId("directMembership-checkbox")).toBeChecked();
+    await expect(
+      page.locator("#groups-list li").filter({ hasText: /\/\S+$/ }),
+    ).toHaveCount(3);
+    await expect(page.getByTestId("group[2].name")).toHaveText("subgroup");
+
+    await page.getByTestId("directMembership-checkbox").click();
+    await expect(
+      page.getByTestId("directMembership-checkbox"),
+    ).not.toBeChecked();
+    await expect(page.getByTestId("group[3].name")).toHaveText("one");
+    await expect(
+      page.locator("#groups-list li").filter({ hasText: /\/\S+$/ }),
+    ).toHaveCount(4);
   });
 });
diff --git a/js/apps/account-ui/test/realms/groups-realm.json b/js/apps/account-ui/test/realms/groups-realm.json
index 8f34028acd..2217fe5034 100644
--- a/js/apps/account-ui/test/realms/groups-realm.json
+++ b/js/apps/account-ui/test/realms/groups-realm.json
@@ -30,6 +30,9 @@
     },
     {
       "username": "alice",
+      "firstName": "Alice",
+      "lastName": "Alison",
+      "email": "alice@keycloak.org",
       "enabled": true,
       "realmRoles": [],
       "clientRoles": {