diff --git a/packages/builder/src/pages/builder/portal/users/users/_components/AppRoleTableRenderer.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/AppRoleTableRenderer.svelte
index 7ed36eb3a4..03a3e626a4 100644
--- a/packages/builder/src/pages/builder/portal/users/users/_components/AppRoleTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/_components/AppRoleTableRenderer.svelte
@@ -20,7 +20,8 @@
 {:else}
   <StatusLight
     square
-    color={role?.color || "var(--spectrum-global-color-static-magenta-400)"}
+    color={role?.uiMetadata.color ||
+      "var(--spectrum-global-color-static-magenta-400)"}
   >
     Can use as {getRoleLabel(value)}
   </StatusLight>