diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 2db1a20485..912fc60fcd 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -85,7 +85,6 @@
   onMount(async () => {
     await initialise()
     await authStore.actions.fetchUser()
-    await roleStore.actions.fetchAccessibleRoles()
     dataLoaded = true
     if (get(builderStore).inBuilder) {
       builderStore.actions.notifyLoaded()
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 5a0acd25be..e482e6b336 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -60,8 +60,7 @@
   })
   setContext("layout", store)
 
-  $: accessibleRoles = $roleStore
-  $: validLinks = getValidLinks(links)
+  $: validLinks = getValidLinks(links, $roleStore)
   $: typeClass = NavigationClasses[navigation] || NavigationClasses.None
   $: navWidthClass = WidthClasses[navWidth || width] || WidthClasses.Large
   $: pageWidthClass = WidthClasses[pageWidth || width] || WidthClasses.Large
@@ -99,12 +98,12 @@
     }
   }
 
-  const getValidLinks = allLinks => {
+  const getValidLinks = (allLinks, userRoleHierarchy) => {
     // Strip links missing required info
     let validLinks = (allLinks || []).filter(link => link.text && link.url)
     // Filter to only links allowed by the current role
     return validLinks.filter(link => {
-      return accessibleRoles?.find(roleId => roleId === link.roleId)
+      return userRoleHierarchy?.find(roleId => roleId === link.roleId)
     })
   }
 
diff --git a/packages/client/src/components/devtools/DevToolsHeader.svelte b/packages/client/src/components/devtools/DevToolsHeader.svelte
index a60cec8ce1..a15e8351a5 100644
--- a/packages/client/src/components/devtools/DevToolsHeader.svelte
+++ b/packages/client/src/components/devtools/DevToolsHeader.svelte
@@ -1,32 +1,39 @@
 <script>
   import { Heading, Select, ActionButton } from "@budibase/bbui"
-  import { devToolsStore, appStore } from "../../stores"
-  import { getContext } from "svelte"
+  import { devToolsStore, appStore, roleStore } from "../../stores"
+  import { getContext, onMount } from "svelte"
 
   const context = getContext("context")
+  const SELF_ROLE = "self"
 
-  $: previewOptions = [
-    {
+  let staticRoleList
+
+  $: previewOptions = buildRoleList(staticRoleList)
+
+  function buildRoleList(roleIds) {
+    const list = []
+    list.push({
       label: "View as yourself",
-      value: "self",
-    },
-    {
-      label: "View as public user",
-      value: "PUBLIC",
-    },
-    {
-      label: "View as basic user",
-      value: "BASIC",
-    },
-    {
-      label: "View as power user",
-      value: "POWER",
-    },
-    {
-      label: "View as admin user",
-      value: "ADMIN",
-    },
-  ]
+      value: SELF_ROLE,
+    })
+    if (!roleIds) {
+      return list
+    }
+    for (let roleId of roleIds) {
+      list.push({
+        label: `View as ${roleId.toLowerCase()} user`,
+        value: roleId,
+      })
+    }
+    devToolsStore.actions.changeRole(SELF_ROLE)
+    return list
+  }
+
+  onMount(async () => {
+    // make sure correct before starting
+    await devToolsStore.actions.changeRole(SELF_ROLE)
+    staticRoleList = await roleStore.actions.fetchAccessibleRoles()
+  })
 </script>
 
 <div class="dev-preview-header" class:mobile={$context.device.mobile}>
@@ -34,7 +41,7 @@
   <Select
     quiet
     options={previewOptions}
-    value={$devToolsStore.role || "self"}
+    value={$devToolsStore.role || SELF_ROLE}
     placeholder={null}
     autoWidth
     on:change={e => devToolsStore.actions.changeRole(e.detail)}
diff --git a/packages/client/src/stores/roles.js b/packages/client/src/stores/roles.js
index afb194969d..693082d80b 100644
--- a/packages/client/src/stores/roles.js
+++ b/packages/client/src/stores/roles.js
@@ -1,5 +1,6 @@
 import { API } from "api"
 import { writable } from "svelte/store"
+import { currentRole } from "./derived"
 
 const createRoleStore = () => {
   const store = writable([])
@@ -9,6 +10,7 @@ const createRoleStore = () => {
     const accessible = await API.getAccessibleRoles()
     // Use the app self if present, otherwise fallback to the global self
     store.set(accessible || [])
+    return accessible
   }
 
   return {
@@ -18,3 +20,5 @@ const createRoleStore = () => {
 }
 
 export const roleStore = createRoleStore()
+
+currentRole.subscribe(roleStore.actions.fetchAccessibleRoles)
diff --git a/packages/server/src/middleware/authorized.ts b/packages/server/src/middleware/authorized.ts
index 8d148b04bf..06d7da9055 100644
--- a/packages/server/src/middleware/authorized.ts
+++ b/packages/server/src/middleware/authorized.ts
@@ -55,7 +55,7 @@ const checkAuthorizedResource = async (
 ) => {
   // get the user's roles
   const roleId = ctx.roleId || roles.BUILTIN_ROLE_IDS.PUBLIC
-  const userRoles = await roles.getUserRoleIdHierarchy(roleId)
+  const userRoles = await roles.getUserRoleHierarchy(roleId)
   const permError = "User does not have permission"
   // check if the user has the required role
   if (resourceRoles.length > 0) {