diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index d7cc857483..0eb5aaaf7a 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/packages/builder/src/builderStore/store/backend.js
@@ -1,12 +1,10 @@
 import { writable, get } from "svelte/store"
 import { cloneDeep } from "lodash/fp"
 import api from "../api"
-import { permissions } from './backend/permissions'
 
 const INITIAL_BACKEND_UI_STATE = {
   tables: [],
   views: [],
-  roles: [],
   datasources: [],
   queries: [],
   integrations: {},
@@ -50,11 +48,6 @@ export const getBackendUiStore = () => {
           state.selectedView = state.selectedView
           return state
         }),
-      select: row =>
-        store.update(state => {
-          state.selectedRow = row
-          return state
-        }),
     },
     datasources: {
       fetch: async () => {
@@ -301,26 +294,6 @@ export const getBackendUiStore = () => {
         })
       },
     },
-    roles: {
-      fetch: async () => {
-        const response = await api.get("/api/roles")
-        const roles = await response.json()
-        store.update(state => {
-          state.roles = roles
-          return state
-        })
-      },
-      delete: async role => {
-        const response = await api.delete(`/api/roles/${role._id}/${role._rev}`)
-        await store.actions.roles.fetch()
-        return response
-      },
-      save: async role => {
-        const response = await api.post("/api/roles", role)
-        await store.actions.roles.fetch()
-        return response
-      },
-    },
     permissions: {
       fetchLevels: async () => {
         const response = await api.get("/api/permission/levels")
diff --git a/packages/builder/src/builderStore/store/backend/roles.js b/packages/builder/src/builderStore/store/backend/roles.js
new file mode 100644
index 0000000000..fc8bf57b23
--- /dev/null
+++ b/packages/builder/src/builderStore/store/backend/roles.js
@@ -0,0 +1,30 @@
+import { writable } from "svelte/store"
+import api from "../../api"
+
+function createRolesStore() {
+  const { subscribe, set } = writable([])
+
+  return {
+    subscribe,
+    fetch: async () => {
+      set(await getRoles())
+    },
+    delete: async role => {
+      const response = await api.delete(`/api/roles/${role._id}/${role._rev}`)
+      set(await getRoles())
+      return response
+    },
+    save: async role => {
+      const response = await api.post("/api/roles", role)
+      set(await getRoles())
+      return response
+    },
+  }
+}
+
+async function getRoles() {
+    const response = await api.get("/api/roles")
+    return await response.json()
+}
+
+export const roles = createRolesStore()
diff --git a/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte b/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte
index a45f376a3e..784272c534 100644
--- a/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte
+++ b/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte
@@ -1,9 +1,9 @@
 <script>
-  import { backendUiStore } from "builderStore"
+  import { roles } from 'builderStore/store/backend/'
 
   export let roleId
 
-  $: role = $backendUiStore.roles.find(role => role._id === roleId)
+  $: role = $roles.find(role => role._id === roleId)
   $: roleName = role?.name ?? "Unknown role"
 </script>
 
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
index db92abc065..61da9f61bf 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
@@ -1,5 +1,6 @@
 <script>
   import { backendUiStore } from "builderStore"
+  import { roles } from 'builderStore/store/backend/'
   import { notifier } from "builderStore/store/notifications"
   import RowFieldControl from "../RowFieldControl.svelte"
   import * as backendApi from "../api"
@@ -91,7 +92,7 @@
     data-cy="roleId-select"
     bind:value={row.roleId}>
     <option value="">Choose an option</option>
-    {#each $backendUiStore.roles as role}
+    {#each $roles as role}
       <option value={role._id}>{role.name}</option>
     {/each}
   </Select>
diff --git a/packages/builder/src/components/backend/DataTable/modals/EditRoles.svelte b/packages/builder/src/components/backend/DataTable/modals/EditRoles.svelte
index 9b82c2047e..adfbb127b8 100644
--- a/packages/builder/src/components/backend/DataTable/modals/EditRoles.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/EditRoles.svelte
@@ -4,14 +4,14 @@
   import api from "builderStore/api"
   import { notifier } from "builderStore/store/notifications"
   import ErrorsBox from "components/common/ErrorsBox.svelte"
-  import { backendUiStore } from "builderStore"
+  import { roles } from 'builderStore/store/backend/'
 
   let basePermissions = []
   let selectedRole = {}
   let errors = []
   let builtInRoles = ["Admin", "Power", "Basic", "Public"]
   $: selectedRoleId = selectedRole._id
-  $: otherRoles = $backendUiStore.roles.filter(
+  $: otherRoles = $roles.filter(
     role => role._id !== selectedRoleId
   )
   $: isCreating = selectedRoleId == null || selectedRoleId === ""
@@ -24,7 +24,7 @@
   // Changes the selected role
   const changeRole = event => {
     const id = event?.target?.value
-    const role = $backendUiStore.roles.find(role => role._id === id)
+    const role = $roles.find(role => role._id === id)
     if (role) {
       selectedRole = {
         ...role,
@@ -61,7 +61,7 @@
     }
 
     // Save/create the role
-    const response = await backendUiStore.actions.roles.save(selectedRole)
+    const response = await roles.save(selectedRole)
     if (response.status === 200) {
       notifier.success("Role saved successfully.")
     } else {
@@ -72,7 +72,7 @@
 
   // Deletes the selected role
   const deleteRole = async () => {
-    const response = await backendUiStore.actions.roles.delete(selectedRole)
+    const response = await roles.delete(selectedRole)
     if (response.status === 200) {
       changeRole()
       notifier.success("Role deleted successfully.")
@@ -98,7 +98,7 @@
     value={selectedRoleId}
     on:change={changeRole}>
     <option value="">Create new role</option>
-    {#each $backendUiStore.roles as role}
+    {#each $roles as role}
       <option value={role._id}>{role.name}</option>
     {/each}
   </Select>
diff --git a/packages/builder/src/components/backend/DataTable/popovers/ManageAccessPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/ManageAccessPopover.svelte
index 602ee75157..7a6b420e8a 100644
--- a/packages/builder/src/components/backend/DataTable/popovers/ManageAccessPopover.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/ManageAccessPopover.svelte
@@ -1,5 +1,6 @@
 <script>
   import { backendUiStore } from "builderStore"
+  import { roles } from 'builderStore/store/backend/'
   import { notifier } from "builderStore/store/notifications"
   import { Button, Label, Input, Select, Spacer } from "@budibase/bbui"
 
@@ -42,7 +43,7 @@
         thin
         value={permissions[level]}
         on:change={e => changePermission(level, e.target.value)}>
-        {#each $backendUiStore.roles as role}
+        {#each $roles as role}
           <option value={role._id}>{role.name}</option>
         {/each}
       </Select>
diff --git a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
index e235e3b254..a14dfbce6d 100644
--- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
@@ -4,10 +4,10 @@
   import {
     store,
     allScreens,
-    backendUiStore,
     selectedAccessRole,
     screenSearchString,
   } from "builderStore"
+  import { roles } from 'builderStore/store/backend/'
   import { FrontendTypes } from "constants"
   import ComponentNavigationTree from "components/design/NavigationPanel/ComponentNavigationTree/index.svelte"
   import Layout from "components/design/NavigationPanel/Layout.svelte"
@@ -81,7 +81,7 @@
           on:change={updateAccessRole}
           value={$selectedAccessRole}
           label="Filter by Access">
-          {#each $backendUiStore.roles as role}
+          {#each $roles as role}
             <option value={role._id}>{role.name}</option>
           {/each}
         </Select>
diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
index b924aa4b32..27373524bf 100644
--- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
@@ -1,5 +1,6 @@
 <script>
   import { store, backendUiStore, allScreens } from "builderStore"
+  import { roles } from 'builderStore/store/backend/'
   import { Input, Select, ModalContent, Toggle } from "@budibase/bbui"
   import getTemplates from "builderStore/store/screenTemplates"
   import analytics from "analytics"
@@ -105,7 +106,7 @@
     bind:value={route}
     on:change={routeChanged} />
   <Select label="Access" bind:value={roleId} secondary>
-    {#each $backendUiStore.roles as role}
+    {#each $roles as role}
       <option value={role._id}>{role.name}</option>
     {/each}
   </Select>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RoleSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RoleSelect.svelte
index 0e8731b7bd..29f89c47df 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RoleSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RoleSelect.svelte
@@ -1,13 +1,13 @@
 <script>
   import { Select } from "@budibase/bbui"
-  import { backendUiStore } from "builderStore"
+  import { roles } from 'builderStore/store/backend/'
 
   export let value
 </script>
 
 <Select bind:value extraThin secondary on:change>
   <option value="">Choose an option</option>
-  {#each $backendUiStore.roles as role}
+  {#each $roles as role}
     <option value={role._id}>{role.name}</option>
   {/each}
 </Select>
diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index 2411fad0c9..8e34989a23 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -1,5 +1,6 @@
 <script>
   import { store, automationStore, backendUiStore } from "builderStore"
+  import { roles } from 'builderStore/store/backend/'
   import { Button } from "@budibase/bbui"
   import SettingsLink from "components/settings/Link.svelte"
   import ThemeEditorDropdown from "components/settings/ThemeEditorDropdown.svelte"
@@ -20,7 +21,7 @@
       backendUiStore.actions.reset()
       await store.actions.initialise(pkg)
       await automationStore.actions.fetch()
-      await backendUiStore.actions.roles.fetch()
+      await roles.fetch()
       return pkg
     } else {
       throw new Error(pkg)