diff --git a/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
index 3b31de170c..bf9606ff97 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
@@ -5,11 +5,9 @@
   let modal
 </script>
 
-<div>
-  <Button secondary icon="UsersLock" on:click on:click={modal.show}>
-    Edit roles
-  </Button>
-</div>
+<Button secondary icon="UsersLock" on:click on:click={modal.show}>
+  Edit roles
+</Button>
 <Modal bind:this={modal} on:show on:hide>
   <EditRolesModal />
 </Modal>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
index 1b9c4826f8..7316fc79a9 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
@@ -1,8 +1,6 @@
 <script>
   import {
     ActionButton,
-    Icon,
-    Body,
     Input,
     Select,
     Label,
@@ -17,6 +15,7 @@
   import { capitalise } from "helpers"
   import InfoDisplay from "pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte"
   import { Roles } from "constants/backend"
+  import RoleEditor from "./RoleEditor.svelte"
 
   export let resourceId
 
@@ -193,10 +192,16 @@
     <InfoDisplay info body={dependantsInfoMessage} />
   {/if}
 
-  <EditRolesButton
-    on:show={() => (showPopover = false)}
-    on:hide={() => (showPopover = true)}
-  />
+  <div class="buttons">
+    <EditRolesButton
+      on:show={() => (showPopover = false)}
+      on:hide={() => (showPopover = true)}
+    />
+    <RoleEditor
+      on:drawerShow={() => (showPopover = false)}
+      on:drawerHide={() => (showPopover = true)}
+    />
+  </div>
 </DetailPopover>
 
 <style>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/RoleEditor.svelte b/packages/builder/src/components/backend/DataTable/buttons/RoleEditor.svelte
new file mode 100644
index 0000000000..6b7e79eabc
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/buttons/RoleEditor.svelte
@@ -0,0 +1,32 @@
+<script>
+  import {
+    Button,
+    Modal,
+    ModalContent,
+    Drawer,
+    DrawerContent,
+  } from "@budibase/bbui"
+
+  let drawer
+
+  $: invalid = false
+
+  const save = async () => {
+    drawer.hide()
+  }
+</script>
+
+<Button secondary icon="UsersLock" on:click on:click={drawer.show}>
+  Role editor
+</Button>
+
+<Drawer
+  bind:this={drawer}
+  title="Role editor"
+  on:drawerHide
+  on:drawerShow
+  forceModal
+>
+  <Button disabled={invalid} cta slot="buttons" on:click={save}>Save</Button>
+  <DrawerContent slot="body">asdasdasd</DrawerContent>
+</Drawer>