diff --git a/packages/builder/src/components/settings/UserGroupPicker.svelte b/packages/builder/src/components/settings/UserGroupPicker.svelte
index 8e67331b09..31354bde83 100644
--- a/packages/builder/src/components/settings/UserGroupPicker.svelte
+++ b/packages/builder/src/components/settings/UserGroupPicker.svelte
@@ -1,13 +1,19 @@
 <script>
   import { ActionButton, Icon, Search, Divider, Detail } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
 
   export let searchTerm = ""
   export let selected
-  export let filtered
+  export let filtered = []
   export let addAll
   export let select
   export let title
   export let key
+  const dispatch = createEventDispatcher()
+
+  function onChange(e) {
+    dispatch("change", e.detail)
+  }
 </script>
 
 <div style="padding: var(--spacing-m)">
@@ -26,7 +32,9 @@
   <div>
     {#each filtered as item}
       <div
-        on:click={select(item._id)}
+        on:click={() => {
+          select(item._id)
+        }}
         style="padding-bottom: var(--spacing-m)"
         class="selection"
       >
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 9c6cd6241f..f460993859 100644
--- a/packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte
@@ -14,7 +14,7 @@
     StatusLight,
   } from "@budibase/bbui"
   import UserGroupPicker from "components/settings/UserGroupPicker.svelte"
-
+  import { createPaginationStore } from "helpers/pagination"
   import { users, apps, groups } from "stores/portal"
   import { onMount } from "svelte"
   import { RoleUtils } from "@budibase/frontend-core"
@@ -24,24 +24,23 @@
   let popover
   let searchTerm = ""
   let selectedUsers = []
+  let prevSearch = undefined,
+    search = undefined
+  $: page = $pageInfo.page
+  $: fetchUsers(page, search)
   $: group = $groups.find(x => x._id === groupId)
-  $: filteredUsers = $users.filter(
-    user =>
-      selectedUsers &&
-      user?.email?.toLowerCase().includes(searchTerm.toLowerCase())
-  )
-  $: console.log(group)
+  let pageInfo = createPaginationStore()
+
   async function addAll() {
-    selectedUsers = [...selectedUsers, ...filteredUsers]
     group.users = selectedUsers
     await groups.actions.save(group)
   }
 
   async function selectUser(id) {
     let selectedUser = selectedUsers.includes(id)
-    let enrichedUser = $users.find(user => user._id === id)
-
+    let enrichedUser = $users.data.find(user => user._id === id)
     if (selectedUser) {
+      console.log
       selectedUsers = selectedUsers.filter(id => id !== selectedUser)
       let newUsers = group.users.filter(user => user._id !== id)
       group.users = newUsers
@@ -52,16 +51,43 @@
 
     await groups.actions.save(group)
   }
+  $: filtered =
+    $users.data?.filter(x => !group?.users.map(y => y._id).includes(x._id)) ||
+    []
 
+  $: console.log(filtered)
   async function removeUser(id) {
     let newUsers = group.users.filter(user => user._id !== id)
     group.users = newUsers
     await groups.actions.save(group)
   }
+
+  async function fetchUsers(page, search) {
+    if ($pageInfo.loading) {
+      return
+    }
+    // need to remove the page if they've started searching
+    if (search && !prevSearch) {
+      pageInfo.reset()
+      page = undefined
+    }
+    prevSearch = search
+    try {
+      pageInfo.loading()
+      await users.search({ page, search })
+      pageInfo.fetched($users.hasNextPage, $users.nextPage)
+    } catch (error) {
+      notifications.error("Error getting user list")
+    }
+  }
+
+  function onChange(e) {
+    console.log(e)
+  }
+
   onMount(async () => {
     try {
       await groups.actions.init()
-      await users.init()
       await apps.load()
     } catch (error) {
       notifications.error("Error fetching User Group data")
@@ -91,11 +117,12 @@
     </div>
     <Popover align="right" bind:this={popover} anchor={popoverAnchor}>
       <UserGroupPicker
+        on:change={onChange}
         key={"email"}
         title={"User"}
         bind:searchTerm
         bind:selected={selectedUsers}
-        bind:filtered={filteredUsers}
+        bind:filtered
         {addAll}
         select={selectUser}
       />
diff --git a/packages/builder/src/pages/builder/portal/manage/groups/_components/CreateEditGroupModal.svelte b/packages/builder/src/pages/builder/portal/manage/groups/_components/CreateEditGroupModal.svelte
index 75cb1fd6ec..22a59c2193 100644
--- a/packages/builder/src/pages/builder/portal/manage/groups/_components/CreateEditGroupModal.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/groups/_components/CreateEditGroupModal.svelte
@@ -22,13 +22,19 @@
     <div class="modal-inner">
       <Body size="XS">Icon</Body>
       <div class="modal-spacing">
-        <IconPicker on:change={e => (group.icon = e.detail)} />
+        <IconPicker
+          bind:value={group.icon}
+          on:change={e => (group.icon = e.detail)}
+        />
       </div>
     </div>
     <div class="modal-inner">
       <Body size="XS">Color</Body>
       <div class="modal-spacing">
-        <ColorPicker on:change={e => (group.color = e.detail)} />
+        <ColorPicker
+          bind:value={group.color}
+          on:change={e => (group.color = e.detail)}
+        />
       </div>
     </div>
   </div>
diff --git a/packages/builder/src/pages/builder/portal/manage/groups/index.svelte b/packages/builder/src/pages/builder/portal/manage/groups/index.svelte
index 898a2e4e0a..2821adaf37 100644
--- a/packages/builder/src/pages/builder/portal/manage/groups/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/groups/index.svelte
@@ -96,7 +96,7 @@
 </Layout>
 
 <Modal bind:this={modal}>
-  <CreateEditGroupModal {group} {saveGroup} />
+  <CreateEditGroupModal bind:group {saveGroup} />
 </Modal>
 
 <style>
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/AppsTableRenderer.svelte b/packages/builder/src/pages/builder/portal/manage/users/_components/AppsTableRenderer.svelte
index 025370e796..d348082ffa 100644
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/AppsTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/AppsTableRenderer.svelte
@@ -1,7 +1,6 @@
 <script>
   import { Icon } from "@budibase/bbui"
   export let value
-  $: console.log(value)
 </script>
 
 <div class="align">
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/GroupsTableRenderer.svelte b/packages/builder/src/pages/builder/portal/manage/users/_components/GroupsTableRenderer.svelte
index 2072ce628f..dcd25f61aa 100644
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/GroupsTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/GroupsTableRenderer.svelte
@@ -1,21 +1,22 @@
 <script>
   import { Icon, Body } from "@budibase/bbui"
   export let value
+  console.log(value)
 </script>
 
 <div class="align">
   <div class="spacing">
     <Icon name="UserGroup" />
   </div>
-  {#if value.length === 0}
+  {#if value?.length === 0}
     <div class="opacity">0</div>
-  {:else if value.length === 1}
+  {:else if value?.length === 1}
     <div class="opacity">
-      <Body size="S">{value[0].name}</Body>
+      <Body size="S">{value[0]?.name}</Body>
     </div>
   {:else}
     <div class="opacity">
-      {parseInt(value.length) || 0} groups
+      {parseInt(value?.length) || 0} groups
     </div>
   {/if}
 </div>
diff --git a/packages/builder/src/pages/builder/portal/manage/users/index.svelte b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
index fb43965343..a7e45002f5 100644
--- a/packages/builder/src/pages/builder/portal/manage/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
@@ -62,8 +62,8 @@
   ]
 
   let email
+  let enrichedUsers = []
   let createUserModal,
-    basicOnboardingModal,
     inviteConfirmationModal,
     onboardingTypeModal,
     passwordModal,
@@ -74,8 +74,36 @@
     search = undefined
   $: page = $pageInfo.page
   $: fetchUsers(page, search)
-  $: console.log(page)
 
+  $: {
+    if ($users.data) {
+      enrichedUsers = $users.data.map(user => {
+        let userGroups = []
+        let userApps = []
+        $groups.forEach(group => {
+          console.log(group)
+          if (group.users) {
+            group.users?.forEach(y => {
+              if (y._id === user._id) {
+                console.log("hello")
+                userGroups.push(group)
+                userApps = group.apps
+              }
+            })
+          }
+        })
+        return {
+          ...user,
+          name: user.firstName ? user.firstName + " " + user.lastName : "",
+          userGroups,
+          apps: [...new Set(Object.keys(user.roles))],
+        }
+      })
+    } else {
+      enrichedUsers = []
+    }
+  }
+  $: console.log(enrichedUsers)
   function showOnboardingTypeModal() {
     onboardingTypeModal.show()
   }
@@ -128,6 +156,15 @@
     }
   }
 
+  onMount(async () => {
+    try {
+      await groups.actions.init()
+    } catch (error) {
+      console.log(error)
+      notifications.error("Error fetching User Group data")
+    }
+  })
+
   async function fetchUsers(page, search) {
     if ($pageInfo.loading) {
       return
@@ -176,6 +213,22 @@
         >Import Users</Button
       >
     </ButtonGroup>
+    <Table
+      on:click={({ detail }) => $goto(`./${detail._id}`)}
+      {schema}
+      data={enrichedUsers}
+      allowEditColumns={false}
+      allowEditRows={false}
+      allowSelectRows={true}
+      showHeaderBorder={false}
+      customRenderers={[
+        { column: "userGroups", component: GroupsTableRenderer },
+        { column: "apps", component: AppsTableRenderer },
+        { column: "name", component: NameTableRenderer },
+        { column: "settings", component: SettingsTableRenderer },
+        { column: "role", component: RoleTableRenderer },
+      ]}
+    />
     <div class="pagination">
       <Pagination
         page={$pageInfo.pageNumber}
diff --git a/packages/builder/src/stores/portal/groups.js b/packages/builder/src/stores/portal/groups.js
index aae647651d..0ea1562205 100644
--- a/packages/builder/src/stores/portal/groups.js
+++ b/packages/builder/src/stores/portal/groups.js
@@ -19,6 +19,7 @@ export function createGroupsStore() {
     },
 
     save: async group => {
+      console.log(group)
       const response = await API.saveGroup(group)
       group._id = response._id
       group._rev = response._rev
diff --git a/packages/worker/src/api/routes/global/groups.js b/packages/worker/src/api/routes/global/groups.js
index 53532a7c5b..cea482a02a 100644
--- a/packages/worker/src/api/routes/global/groups.js
+++ b/packages/worker/src/api/routes/global/groups.js
@@ -15,7 +15,9 @@ function buildGroupSaveValidation() {
     icon: Joi.string().required(),
     name: Joi.string().required(),
     users: Joi.array().optional(),
-    apps: Joi.array().optional()
+    apps: Joi.array().optional(),
+    createdAt: Joi.string().optional(),
+    updatedAt: Joi.string().optional(),
   }).required())
 }