diff --git a/packages/backend-core/src/db/conversions.js b/packages/backend-core/src/db/conversions.js
index 90c04e9251..5b1a785ecc 100644
--- a/packages/backend-core/src/db/conversions.js
+++ b/packages/backend-core/src/db/conversions.js
@@ -36,6 +36,7 @@ exports.getDevelopmentAppID = appId => {
   const rest = split.join(APP_PREFIX)
   return `${APP_DEV_PREFIX}${rest}`
 }
+exports.getDevAppID = exports.getDevelopmentAppID
 
 /**
  * Convert a development app ID to a deployed app ID.
diff --git a/packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte b/packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte
index 23cdbff877..92d270931d 100644
--- a/packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte
@@ -25,6 +25,7 @@
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import CreateEditGroupModal from "./_components/CreateEditGroupModal.svelte"
   import GroupIcon from "./_components/GroupIcon.svelte"
+  import AppAddModal from "./_components/AppAddModal.svelte"
 
   export let groupId
 
@@ -34,8 +35,7 @@
   let prevSearch = undefined
   let pageInfo = createPaginationStore()
   let loaded = false
-  let editModal
-  let deleteModal
+  let editModal, deleteModal, appAddModal
 
   $: page = $pageInfo.page
   $: fetchUsers(page, searchTerm)
@@ -182,7 +182,14 @@
     </Layout>
 
     <Layout noPadding gap="S">
-      <Heading size="S">Apps</Heading>
+      <div class="header">
+        <Heading size="S">Apps</Heading>
+        <div>
+          <Button on:click={appAddModal.show()} icon="ExperienceAdd" cta>
+            Add app
+          </Button>
+        </div>
+      </div>
       <List>
         {#if groupApps.length}
           {#each groupApps as app}
@@ -203,6 +210,18 @@
                   {getRoleLabel(app.appId)}
                 </StatusLight>
               </div>
+              <Icon
+                on:click={e => {
+                  groups.actions.removeApp(
+                    groupId,
+                    apps.getProdAppID(app.appId)
+                  )
+                  e.stopPropagation()
+                }}
+                hoverable
+                size="S"
+                name="Close"
+              />
             </ListItem>
           {/each}
         {:else}
@@ -216,6 +235,11 @@
 <Modal bind:this={editModal}>
   <CreateEditGroupModal {group} {saveGroup} />
 </Modal>
+
+<Modal bind:this={appAddModal}>
+  <AppAddModal {group} />
+</Modal>
+
 <ConfirmDialog
   bind:this={deleteModal}
   title="Delete user group"
diff --git a/packages/builder/src/pages/builder/portal/manage/groups/_components/AppAddModal.svelte b/packages/builder/src/pages/builder/portal/manage/groups/_components/AppAddModal.svelte
new file mode 100644
index 0000000000..845e962487
--- /dev/null
+++ b/packages/builder/src/pages/builder/portal/manage/groups/_components/AppAddModal.svelte
@@ -0,0 +1,51 @@
+<script>
+  import { Body, ModalContent, Select } from "@budibase/bbui"
+  import { apps, groups } from "stores/portal"
+  import { roles } from "stores/backend"
+  import RoleSelect from "components/common/RoleSelect.svelte"
+
+  export let group
+
+  $: appOptions = $apps.map(app => ({
+    label: app.name,
+    value: app,
+  }))
+  $: prodAppId = selectedApp ? apps.getProdAppID(selectedApp.appId) : ""
+  $: confirmDisabled =
+    (!selectingRole && !selectedApp) || (selectingRole && !selectedRoleId)
+  let selectedApp, selectedRoleId
+  let selectingRole = false
+
+  async function appSelected() {
+    if (!selectingRole) {
+      selectingRole = true
+      await roles.fetchByAppId(prodAppId)
+      // return false to stop closing modal
+      return false
+    } else {
+      await groups.actions.addApp(group._id, prodAppId, selectedRoleId)
+    }
+  }
+</script>
+
+<ModalContent
+  onConfirm={appSelected}
+  size="M"
+  title="Add app to group"
+  confirmText="Next"
+  showSecondaryButton
+  secondaryButtonText="Back"
+  secondaryAction={() => (selectingRole = false)}
+  disabled={confirmDisabled}
+>
+  {#if !selectingRole}
+    <Body>Select the app to add to the <i>"{group.name}"</i> group.</Body>
+    <Select bind:value={selectedApp} options={appOptions} />
+  {:else}
+    <Body
+      >Pick the role this group will appear as in the <i>"{selectedApp.name}"</i
+      > app.</Body
+    >
+    <RoleSelect allowPublic={false} bind:value={selectedRoleId} />
+  {/if}
+</ModalContent>
diff --git a/packages/builder/src/stores/backend/roles.js b/packages/builder/src/stores/backend/roles.js
index 4d9ab303c9..ac395aa232 100644
--- a/packages/builder/src/stores/backend/roles.js
+++ b/packages/builder/src/stores/backend/roles.js
@@ -5,16 +5,24 @@ import { RoleUtils } from "@budibase/frontend-core"
 export function createRolesStore() {
   const { subscribe, update, set } = writable([])
 
+  function setRoles(roles) {
+    set(
+      roles.sort((a, b) => {
+        const priorityA = RoleUtils.getRolePriority(a._id)
+        const priorityB = RoleUtils.getRolePriority(b._id)
+        return priorityA > priorityB ? -1 : 1
+      })
+    )
+  }
+
   const actions = {
     fetch: async () => {
       const roles = await API.getRoles()
-      set(
-        roles.sort((a, b) => {
-          const priorityA = RoleUtils.getRolePriority(a._id)
-          const priorityB = RoleUtils.getRolePriority(b._id)
-          return priorityA > priorityB ? -1 : 1
-        })
-      )
+      setRoles(roles)
+    },
+    fetchByAppId: async appId => {
+      const { roles } = await API.getRolesForApp(appId)
+      setRoles(roles)
     },
     delete: async role => {
       await API.deleteRole({
diff --git a/packages/frontend-core/src/api/roles.js b/packages/frontend-core/src/api/roles.js
index 15c27091c4..0b8a866a00 100644
--- a/packages/frontend-core/src/api/roles.js
+++ b/packages/frontend-core/src/api/roles.js
@@ -29,4 +29,13 @@ export const buildRoleEndpoints = API => ({
       url: "/api/roles",
     })
   },
+
+  /**
+   * Gets a list of roles within a specified app.
+   */
+  getRolesForApp: async appId => {
+    return await API.get({
+      url: `/api/global/roles/${appId}`,
+    })
+  },
 })
diff --git a/packages/worker/src/api/controllers/global/roles.js b/packages/worker/src/api/controllers/global/roles.js
index 800311b6be..d63f1a62b5 100644
--- a/packages/worker/src/api/controllers/global/roles.js
+++ b/packages/worker/src/api/controllers/global/roles.js
@@ -2,6 +2,7 @@ const { getAllRoles } = require("@budibase/backend-core/roles")
 const {
   getAllApps,
   getProdAppID,
+  getDevAppID,
   DocumentType,
 } = require("@budibase/backend-core/db")
 const { doInAppContext, getAppDB } = require("@budibase/backend-core/context")
@@ -34,7 +35,7 @@ exports.fetch = async ctx => {
 
 exports.find = async ctx => {
   const appId = ctx.params.appId
-  await doInAppContext(appId, async () => {
+  await doInAppContext(getDevAppID(appId), async () => {
     const db = getAppDB()
     const app = await db.get(DocumentType.APP_METADATA)
     ctx.body = {