diff --git a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte b/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
index 9f8c0239f..8af9467b7 100644
--- a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
@@ -25,21 +25,17 @@
 
   const roleSchema = {
     name: { displayName: "App" },
-    roles: { type: "options" },
+    role: { type: "options" },
   }
 
   // Here we need to merge the Apps list and the roles response to get something that makes sense for the table
-  $: appList = $apps.map(app => ({ ...app, roles: ["READ"] }))
+  $: appList = $apps.map(app => ({
+    ...app,
+    role: $request?.data?.roles?.[app._id],
+  }))
   let selectedApp
 
   const request = fetchData(`/api/admin/users/${userId}`)
-  const roles = fetchData(
-    `/api/admin/roles/app_5a72d9b923504765852338e614a72c85`
-  )
-
-  $: console.log($apps)
-
-  $: console.log($roles)
 
   async function deleteUser() {
     const res = await users.del(userId)
@@ -71,7 +67,6 @@
         ut nesciunt ipsam perspiciatis aliquam et hic minus alias beatae. Odit
         veritatis quos quas laborum magnam tenetur perspiciatis ex hic.
       </Body>
-      {JSON.stringify($roles.data, null, 2)}
       <Body />
     </Layout>
   </div>
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/UpdateRolesModal.svelte b/packages/builder/src/pages/builder/portal/manage/users/_components/UpdateRolesModal.svelte
index b17955ea3..01ebe0089 100644
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/UpdateRolesModal.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/UpdateRolesModal.svelte
@@ -1,20 +1,23 @@
 <script>
-  import {
-    Body,
-    Multiselect,
-    ModalContent,
-    notifications,
-  } from "@budibase/bbui"
+  import { Body, Select, ModalContent, notifications } from "@budibase/bbui"
+  import { fetchData } from "helpers"
   import { users } from "stores/portal"
 
   export let app
   export let user
-  let roles = app.roles
 
-  const options = ["READ", "WRITE", "ADMIN", "PUBLIC"]
+  const roles = fetchData(`/api/admin/roles/${app._id}`)
+  $: options = $roles?.data?.roles?.map(role => role._id)
+  let selectedRole
 
   function updateUserRoles() {
-    users.updateRoles({ ...user, roles: { ...user.roles, [app._id]: roles } })
+    users.updateRoles({
+      ...user,
+      roles: {
+        ...user.roles,
+        [app._id]: selectedRole,
+      },
+    })
     notifications.success("Roles updated")
   }
 </script>
@@ -30,9 +33,9 @@
   <Body noPadding
     >Update {user.email}'s roles for <strong>{app.name}</strong>.</Body
   >
-  <Multiselect
+  <Select
     placeholder={null}
-    bind:value={roles}
+    bind:value={selectedRole}
     on:change
     {options}
     label="Select roles:"
diff --git a/packages/builder/src/stores/portal/users.js b/packages/builder/src/stores/portal/users.js
index 4634373d6..2f3bc972c 100644
--- a/packages/builder/src/stores/portal/users.js
+++ b/packages/builder/src/stores/portal/users.js
@@ -1,5 +1,5 @@
 import { writable } from "svelte/store"
-import api from "builderStore/api"
+import api, { get } from "builderStore/api"
 import { update } from "lodash"
 
 export function createUsersStore() {
@@ -41,11 +41,13 @@ export function createUsersStore() {
   }
 
   async function updateRoles(data) {
-    console.log(data)
-    // const res = await api.post(`/api/admin/users`, data)
-    // console.log(await res.json())
-    // update(users => (users.filter(user => user._id !== id)))
-    // return await response.json()
+    try {
+      const res = await post(`/api/admin/users`, data)
+      const json = await res.json()
+      return json
+    } catch (error) {
+      return error
+    }
   }
 
   return {
