diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
index feb2f754ff..40d9ab273d 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
@@ -45,6 +45,12 @@
       placeholder={null}
       getOptionLabel={role => role.name}
       getOptionValue={role => role._id}
+      getOptionColour={role => {
+        if (role?._id === "all") {
+          return null
+        }
+        return RoleUtils.getRoleColour(role._id)
+      }}
       options={[{ name: "All screens", _id: "all" }, ...$roles]}
     />
   </Layout>