diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte
index d6c4dc23ac..a315f44a65 100644
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@@ -14,6 +14,7 @@
   export let autocomplete = false
   export let sort = false
   export let autoWidth = false
+  export let fetchTerm = null
 
   const dispatch = createEventDispatcher()
 
@@ -83,6 +84,7 @@
   {options}
   isPlaceholder={!value?.length}
   {autocomplete}
+  bind:fetchTerm
   {isOptionSelected}
   {getOptionLabel}
   {getOptionValue}
diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index 32cfcf3310..acd3c5da61 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -31,7 +31,8 @@
   export let autoWidth = false
   export let autocomplete = false
   export let sort = false
-
+  export let fetchTerm = null
+  $: console.log(fieldText)
   const dispatch = createEventDispatcher()
 
   let searchTerm = null
@@ -71,7 +72,7 @@
   }
 
   const getFilteredOptions = (options, term, getLabel) => {
-    if (autocomplete && term) {
+    if (autocomplete && term && !fetchTerm) {
       const lowerCaseTerm = term.toLowerCase()
       return options.filter(option => {
         return `${getLabel(option)}`.toLowerCase().includes(lowerCaseTerm)
@@ -144,8 +145,8 @@
   >
     {#if autocomplete}
       <Search
-        value={searchTerm}
-        on:change={event => (searchTerm = event.detail)}
+        value={fetchTerm ? fetchTerm : searchTerm}
+        on:change={event => (fetchTerm = event.detail)}
         {disabled}
         placeholder="Search"
       />
@@ -247,7 +248,7 @@
   }
   .popover-content.auto-width .spectrum-Menu-itemLabel {
     white-space: nowrap;
-    overflow: hidden;
+    overflow: none;
     text-overflow: ellipsis;
   }
   .popover-content:not(.auto-width) .spectrum-Menu-itemLabel {
diff --git a/packages/bbui/src/Form/Multiselect.svelte b/packages/bbui/src/Form/Multiselect.svelte
index 7bcf22aa06..d28401b608 100644
--- a/packages/bbui/src/Form/Multiselect.svelte
+++ b/packages/bbui/src/Form/Multiselect.svelte
@@ -15,6 +15,9 @@
   export let getOptionValue = option => option
   export let sort = false
   export let autoWidth = false
+  export let autocomplete = false
+  export let fetchTerm = null
+
   const dispatch = createEventDispatcher()
   const onChange = e => {
     value = e.detail
@@ -34,6 +37,8 @@
     {getOptionLabel}
     {getOptionValue}
     {autoWidth}
+    {autocomplete}
+    bind:fetchTerm
     on:change={onChange}
     on:click
   />
diff --git a/packages/bbui/src/Form/Select.svelte b/packages/bbui/src/Form/Select.svelte
index 69126e648d..4f30318282 100644
--- a/packages/bbui/src/Form/Select.svelte
+++ b/packages/bbui/src/Form/Select.svelte
@@ -20,6 +20,7 @@
   export let autoWidth = false
   export let sort = false
   export let tooltip = ""
+  export let autocomplete = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -51,6 +52,7 @@
     {getOptionIcon}
     {getOptionColour}
     {isOptionEnabled}
+    {autocomplete}
     on:change={onChange}
     on:click
   />
diff --git a/packages/builder/src/pages/builder/portal/_components/LockedFeature.svelte b/packages/builder/src/pages/builder/portal/_components/LockedFeature.svelte
new file mode 100644
index 0000000000..e6f4075e2e
--- /dev/null
+++ b/packages/builder/src/pages/builder/portal/_components/LockedFeature.svelte
@@ -0,0 +1,76 @@
+<script>
+  import {
+    Layout,
+    Heading,
+    Body,
+    Button,
+    Divider,
+    Tags,
+    Tag,
+  } from "@budibase/bbui"
+  import { auth, admin } from "stores/portal"
+
+  export let title
+  export let planType
+  export let description
+  export let enabled
+  export let upgradeButtonClick
+</script>
+
+<Layout noPadding>
+  <Layout gap="XS" noPadding>
+    <div class="title">
+      <Heading size="M">{title}</Heading>
+      {#if !enabled}
+        <Tags>
+          <Tag icon="LockClosed">{planType}</Tag>
+        </Tags>
+      {/if}
+    </div>
+    <Body>{description}</Body>
+  </Layout>
+  <Divider size="S" />
+
+  {#if enabled}
+    <slot />
+  {:else}
+    <div class="buttons">
+      <Button
+        primary
+        disabled={!$auth.accountPortalAccess && $admin.cloud}
+        on:click={async () => upgradeButtonClick()}
+      >
+        Upgrade
+      </Button>
+      <!--Show the view plans button-->
+      <Button
+        secondary
+        on:click={() => {
+          window.open("https://budibase.com/pricing/", "_blank")
+        }}
+      >
+        View Plans
+      </Button>
+    </div>
+  {/if}
+</Layout>
+
+<style>
+  .buttons {
+    display: flex;
+    gap: var(--spacing-l);
+  }
+  .title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--spacing-m);
+  }
+
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-m);
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/portal/account/_layout.svelte b/packages/builder/src/pages/builder/portal/account/_layout.svelte
index 3083b574a8..892e853aad 100644
--- a/packages/builder/src/pages/builder/portal/account/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/account/_layout.svelte
@@ -4,12 +4,13 @@
   import { Content, SideNav, SideNavItem } from "components/portal/page"
   import { menu } from "stores/portal"
 
+  $: wide = $isActive("./auditLogs")
   $: pages = $menu.find(x => x.title === "Account")?.subPages || []
   $: !pages.length && $goto("../")
 </script>
 
 <Page>
-  <Content narrow>
+  <Content narrow={!wide}>
     <div slot="side-nav">
       <SideNav>
         {#each pages as { title, href }}
diff --git a/packages/builder/src/pages/builder/portal/account/auditLogs/_components/UserRenderer.svelte b/packages/builder/src/pages/builder/portal/account/auditLogs/_components/UserRenderer.svelte
new file mode 100644
index 0000000000..4baa24403e
--- /dev/null
+++ b/packages/builder/src/pages/builder/portal/account/auditLogs/_components/UserRenderer.svelte
@@ -0,0 +1,6 @@
+<script>
+  import { Avatar } from "@budibase/bbui"
+  export let row
+</script>
+
+<Avatar size="M" initials={"PC"} />
diff --git a/packages/builder/src/pages/builder/portal/account/auditLogs/_components/ViewDetailsRenderer.svelte b/packages/builder/src/pages/builder/portal/account/auditLogs/_components/ViewDetailsRenderer.svelte
new file mode 100644
index 0000000000..a222871966
--- /dev/null
+++ b/packages/builder/src/pages/builder/portal/account/auditLogs/_components/ViewDetailsRenderer.svelte
@@ -0,0 +1,13 @@
+<script>
+  import { ActionButton } from "@budibase/bbui"
+  import { getContext } from "svelte"
+
+  export let row
+  const auditLogs = getContext("auditLogs")
+  const onClick = e => {
+    e.stopPropagation()
+    auditLogs.viewDetails(row)
+  }
+</script>
+
+<ActionButton size="S" on:click={onClick}>Edit</ActionButton>
diff --git a/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte b/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte
new file mode 100644
index 0000000000..a5d403491a
--- /dev/null
+++ b/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte
@@ -0,0 +1,200 @@
+<script>
+  import {
+    Layout,
+    Table,
+    Select,
+    Search,
+    Multiselect,
+    notifications,
+  } from "@budibase/bbui"
+  import { licensing, users, apps } from "stores/portal"
+  import LockedFeature from "../../_components/LockedFeature.svelte"
+  import { createPaginationStore } from "helpers/pagination"
+  import { getContext, setContext } from "svelte"
+  import Portal from "svelte-portal"
+  import ViewDetailsRenderer from "./_components/ViewDetailsRenderer.svelte"
+  import UserRenderer from "./_components/UserRenderer.svelte"
+
+  const sidePanel = getContext("side-panel")
+  const schema = {
+    name: {},
+    date: {},
+    user: { width: "auto" },
+    app: {},
+    event: {},
+    view: { width: "auto", borderLeft: true, displayName: "" },
+  }
+
+  const customRenderers = [
+    {
+      column: "view",
+      component: ViewDetailsRenderer,
+    },
+    {
+      column: "user",
+      component: UserRenderer,
+    },
+  ]
+
+  let searchTerm = ""
+  let pageInfo = createPaginationStore()
+  let prevSearch = undefined
+  let selectedUsers = []
+  let selectedLog
+
+  let data = [
+    {
+      name: "User created",
+      date: "2021-03-01 12:00:00",
+      user: "Peter Clement",
+      app: "School Admin Panel",
+      event: "User added",
+      metadata: {
+        name: "Peter Clement",
+        email: "",
+      },
+    },
+  ]
+
+  $: fetchUsers(page, searchTerm)
+  $: page = $pageInfo.page
+  $: enrichedList = enrich($users.data || [], selectedUsers)
+  $: sortedList = sort(enrichedList)
+
+  const fetchUsers = async (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, email: search })
+      pageInfo.fetched($users.hasNextPage, $users.nextPage)
+    } catch (error) {
+      notifications.error("Error getting user list")
+    }
+  }
+
+  const enrich = (list, selected) => {
+    return list.map(item => {
+      return {
+        ...item,
+        selected: selected.find(x => x === item._id) != null,
+      }
+    })
+  }
+
+  const sort = list => {
+    let sortedList = list.slice()
+    sortedList?.sort((a, b) => {
+      if (a.selected === b.selected) {
+        return a["email"] < b["email"] ? -1 : 1
+      } else if (a.selected) {
+        return -1
+      } else if (b.selected) {
+        return 1
+      }
+      return 0
+    })
+    return sortedList
+  }
+
+  const viewDetails = detail => {
+    selectedLog = detail
+    sidePanel.open()
+  }
+
+  setContext("auditLogs", {
+    viewDetails,
+  })
+</script>
+
+<LockedFeature
+  title={"Audit Logs"}
+  planType={"Business plan"}
+  description={"View all events that have occurred in your Budibase installation"}
+  enabled={$licensing.auditLogsEnabled}
+  upgradeButtonClick={async () => {
+    $licensing.goToUpgradePage()
+  }}
+>
+  <div class="controls">
+    <div class="search">
+      <div class="select">
+        <Select placeholder="All" label="Activity" />
+      </div>
+      <div class="select">
+        <Multiselect
+          bind:fetchTerm={searchTerm}
+          placeholder="All users"
+          label="Users"
+          autocomplete
+          bind:value={selectedUsers}
+          getOptionValue={user => user._id}
+          getOptionLabel={user => user.email}
+          options={sortedList}
+        />
+      </div>
+      <div class="select">
+        <Multiselect
+          placeholder="All apps"
+          label="App"
+          getOptionValue={app => app.appId}
+          getOptionLabel={app => app.name}
+          options={$apps}
+        />
+      </div>
+      <div class="select">
+        <Multiselect placeholder="All events" label="Event" />
+      </div>
+    </div>
+    <div style="width: 200px;">
+      <Search placeholder="Search" value={""} />
+    </div>
+  </div>
+  <Layout noPadding>
+    <Table
+      {customRenderers}
+      on:click={viewDetails}
+      {data}
+      allowEditColumns={false}
+      allowEditRows={false}
+      allowSelectRows={false}
+      {schema}
+    />
+  </Layout>
+</LockedFeature>
+
+{#if selectedLog}
+  <Portal target="#side-panel">
+    <div>hello</div>
+  </Portal>
+{/if}
+
+<style>
+  .controls {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-l);
+    align-items: flex-end;
+    flex-wrap: wrap;
+  }
+
+  .search {
+    display: flex;
+    gap: var(--spacing-m);
+    align-items: flex-start;
+    flex: 1 1 auto;
+    max-width: 100%;
+  }
+  .select {
+    flex: 1 1 0;
+    max-width: 200px;
+    min-width: 80px;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte
index c15f944601..49b4a5babc 100644
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte
@@ -184,7 +184,7 @@
   <Divider />
 
   {#if !$licensing.backupsEnabled}
-    {#if !$auth.accountPortalAccess && !$licensing.groupsEnabled && $admin.cloud}
+    {#if !$auth.accountPortalAccess && $admin.cloud}
       <Body>Contact your account holder to upgrade your plan.</Body>
     {/if}
     <div class="pro-buttons">
diff --git a/packages/builder/src/pages/builder/portal/settings/environment/index.svelte b/packages/builder/src/pages/builder/portal/settings/environment/index.svelte
index 3c170235e9..013d6b8ff4 100644
--- a/packages/builder/src/pages/builder/portal/settings/environment/index.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/environment/index.svelte
@@ -1,21 +1,17 @@
 <script>
   import {
     Layout,
-    Heading,
-    Body,
     Button,
-    Divider,
     Modal,
     Table,
-    Tags,
-    Tag,
     InlineAlert,
     notifications,
   } from "@budibase/bbui"
-  import { environment, licensing, auth, admin } from "stores/portal"
+  import { environment, licensing } from "stores/portal"
   import { onMount } from "svelte"
   import CreateEditVariableModal from "components/portal/environment/CreateEditVariableModal.svelte"
   import EditVariableColumn from "./_components/EditVariableColumn.svelte"
+  import LockedFeature from "../../_components/LockedFeature.svelte"
 
   let modal
 
@@ -59,93 +55,46 @@
       notifications.error(`Error saving variable: ${err.message}`)
     }
   }
+  $: console.log($environment.variables)
 </script>
 
-<Layout noPadding>
-  <Layout gap="XS" noPadding>
-    <div class="title">
-      <Heading size="M">Environment Variables</Heading>
-      {#if !$licensing.environmentVariablesEnabled}
-        <Tags>
-          <Tag icon="LockClosed">Business plan</Tag>
-        </Tags>
-      {/if}
-    </div>
-    <Body
-      >Add and manage environment variables for development and production</Body
-    >
-  </Layout>
-  <Divider size="S" />
-
-  {#if $licensing.environmentVariablesEnabled}
-    {#if noEncryptionKey}
-      <InlineAlert
-        message="Your Budibase installation does not have a key for encryption, please update your app service's environment variables to contain an 'ENCRYPTION_KEY' value."
-        header="No encryption key found"
-        type="error"
-      />
-    {/if}
-    <div>
-      <Button on:click={modal.show} cta disabled={noEncryptionKey}
-        >Add Variable</Button
-      >
-    </div>
-
-    <Layout noPadding>
-      <Table
-        {schema}
-        data={$environment.variables}
-        allowEditColumns={false}
-        allowEditRows={false}
-        allowSelectRows={false}
-        {customRenderers}
-      />
-    </Layout>
-  {:else}
-    <div class="buttons">
-      <Button
-        primary
-        disabled={!$auth.accountPortalAccess && $admin.cloud}
-        on:click={async () => {
-          await environment.upgradePanelOpened()
-          $licensing.goToUpgradePage()
-        }}
-      >
-        Upgrade
-      </Button>
-      <!--Show the view plans button-->
-      <Button
-        secondary
-        on:click={() => {
-          window.open("https://budibase.com/pricing/", "_blank")
-        }}
-      >
-        View Plans
-      </Button>
-    </div>
+<LockedFeature
+  title={"Environment Variables"}
+  planType={"Business plan"}
+  description={"Add and manage environment variables for development and production"}
+  enabled={$licensing.environmentVariablesEnabled}
+  upgradeButtonClick={async () => {
+    await environment.upgradePanelOpened()
+    $licensing.goToUpgradePage()
+  }}
+>
+  {#if noEncryptionKey}
+    <InlineAlert
+      message="Your Budibase installation does not have a key for encryption, please update your app service's environment variables to contain an 'ENCRYPTION_KEY' value."
+      header="No encryption key found"
+      type="error"
+    />
   {/if}
-</Layout>
+  <div>
+    <Button on:click={modal.show} cta disabled={noEncryptionKey}
+      >Add Variable</Button
+    >
+  </div>
+  <Layout noPadding>
+    <Table
+      {schema}
+      data={$environment.variables}
+      allowEditColumns={false}
+      allowEditRows={false}
+      allowSelectRows={false}
+      {customRenderers}
+    />
+  </Layout>
+</LockedFeature>
 
 <Modal bind:this={modal}>
   <CreateEditVariableModal {save} />
 </Modal>
 
 <style>
-  .buttons {
-    display: flex;
-    gap: var(--spacing-l);
-  }
-  .title {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    gap: var(--spacing-m);
-  }
-
-  .buttons {
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-m);
-  }
 </style>
diff --git a/packages/builder/src/stores/portal/licensing.js b/packages/builder/src/stores/portal/licensing.js
index 6f5c80e03c..9adb76fa8c 100644
--- a/packages/builder/src/stores/portal/licensing.js
+++ b/packages/builder/src/stores/portal/licensing.js
@@ -64,6 +64,10 @@ export const createLicensingStore = () => {
         Constants.Features.ENVIRONMENT_VARIABLES
       )
 
+      let auditLogsEnabled = license.features.includes(
+        Constants.Features.AUDIT_LOGS
+      )
+      auditLogsEnabled = true
       store.update(state => {
         return {
           ...state,
@@ -72,6 +76,7 @@ export const createLicensingStore = () => {
           groupsEnabled,
           backupsEnabled,
           environmentVariablesEnabled,
+          auditLogsEnabled,
         }
       })
     },
diff --git a/packages/builder/src/stores/portal/menu.js b/packages/builder/src/stores/portal/menu.js
index 8eea36c08c..56956fc330 100644
--- a/packages/builder/src/stores/portal/menu.js
+++ b/packages/builder/src/stores/portal/menu.js
@@ -75,6 +75,10 @@ export const menu = derived([admin, auth], ([$admin, $auth]) => {
         title: "Usage",
         href: "/builder/portal/account/usage",
       },
+      {
+        title: "Audit Logs",
+        href: "/builder/portal/account/auditLogs",
+      },
     ]
     if ($admin.cloud && $auth?.user?.accountPortalAccess) {
       accountSubPages.push({
@@ -87,6 +91,7 @@ export const menu = derived([admin, auth], ([$admin, $auth]) => {
         href: "/builder/portal/account/upgrade",
       })
     }
+    // add license check here
     if (
       $auth?.user?.accountPortalAccess &&
       $auth.user.account.stripeCustomerId
diff --git a/packages/frontend-core/src/constants.js b/packages/frontend-core/src/constants.js
index 3a16013df2..8c7103a88f 100644
--- a/packages/frontend-core/src/constants.js
+++ b/packages/frontend-core/src/constants.js
@@ -115,6 +115,7 @@ export const Features = {
   USER_GROUPS: "userGroups",
   BACKUPS: "appBackups",
   ENVIRONMENT_VARIABLES: "environmentVariables",
+  AUDIT_LOGS: "auditLogs",
 }
 
 // Role IDs