diff --git a/packages/builder/src/pages/builder/app/[application]/automation/[automationId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/automation/[automationId]/_layout.svelte
new file mode 100644
index 0000000000..3be71a1bbe
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/automation/[automationId]/_layout.svelte
@@ -0,0 +1,15 @@
+<script>
+  import { automationStore } from "builderStore"
+  import { params } from "@roxi/routify"
+
+  if ($params.automation) {
+    const automation = $automationStore.automations.find(
+      m => m._id === $params.automation
+    )
+    if (automation) {
+      automationStore.actions.select(automation)
+    }
+  }
+</script>
+
+<slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/automation/[automationId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/automation/[automationId]/index.svelte
new file mode 100644
index 0000000000..1a15ed48c6
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/automation/[automationId]/index.svelte
@@ -0,0 +1,5 @@
+<script>
+  import AutomationBuilder from "components/automation/AutomationBuilder/AutomationBuilder.svelte"
+</script>
+
+<AutomationBuilder />
diff --git a/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
new file mode 100644
index 0000000000..79ca5df168
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
@@ -0,0 +1,131 @@
+<script>
+  import { Heading, Body, Layout, Button, Modal } from "@budibase/bbui"
+  import { automationStore, selectedAutomation } from "builderStore"
+  import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte"
+  import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.svelte"
+  import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
+  import TestPanel from "components/automation/AutomationBuilder/TestPanel.svelte"
+  import { onDestroy, onMount } from "svelte"
+  import { syncURLToState } from "helpers/urlStateSync"
+  import * as routify from "@roxi/routify"
+  import { store } from "builderStore"
+  import { redirect } from "@roxi/routify"
+
+  // Prevent access for other users than the lock holder
+  $: {
+    if (!$store.hasLock) {
+      $redirect("../data")
+    }
+  }
+
+  // Keep URL and state in sync for selected screen ID
+  const stopSyncing = syncURLToState({
+    urlParam: "automationId",
+    stateKey: "selectedAutomationId",
+    validate: id => $automationStore.automations.some(x => x._id === id),
+    fallbackUrl: "./index",
+    store: automationStore,
+    up: automationStore.actions.select,
+    routify,
+  })
+
+  let modal
+  let webhookModal
+
+  onMount(() => {
+    $automationStore.showTestPanel = false
+  })
+
+  onDestroy(stopSyncing)
+</script>
+
+<!-- routify:options index=3 -->
+<div class="root">
+  <AutomationPanel {modal} {webhookModal} />
+  <div class="content">
+    {#if $automationStore.automations?.length}
+      <slot />
+    {:else}
+      <div class="centered">
+        <div class="main">
+          <Layout gap="S" justifyItems="center">
+            <svg
+              width="60px"
+              height="60px"
+              class="spectrum-Icon"
+              focusable="false"
+            >
+              <use xlink:href="#spectrum-icon-18-WorkflowAdd" />
+            </svg>
+            <Heading size="M">You have no automations</Heading>
+            <Body size="M">Let's fix that. Call the bots!</Body>
+            <Button on:click={() => modal.show()} size="M" cta>
+              Create automation
+            </Button>
+          </Layout>
+        </div>
+      </div>
+    {/if}
+  </div>
+
+  {#if $automationStore.showTestPanel}
+    <div class="setup">
+      <TestPanel automation={$selectedAutomation} />
+    </div>
+  {/if}
+  <Modal bind:this={modal}>
+    <CreateAutomationModal {webhookModal} />
+  </Modal>
+  <Modal bind:this={webhookModal} width="30%">
+    <CreateWebhookModal />
+  </Modal>
+</div>
+
+<style>
+  .root {
+    flex: 1 1 auto;
+    height: 0;
+    display: grid;
+    grid-auto-flow: column dense;
+    grid-template-columns: 260px minmax(510px, 1fr) fit-content(500px);
+    overflow: hidden;
+  }
+  .content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
+    overflow: auto;
+  }
+  .centered {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .main {
+    width: 300px;
+  }
+
+  .setup {
+    padding-top: var(--spectrum-global-dimension-size-200);
+    border-left: var(--border-light);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
+    background-color: var(--background);
+    grid-column: 3;
+    overflow: auto;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/automation/index.svelte b/packages/builder/src/pages/builder/app/[application]/automation/index.svelte
new file mode 100644
index 0000000000..ea2c853139
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/automation/index.svelte
@@ -0,0 +1,10 @@
+<script>
+  import { redirect } from "@roxi/routify"
+  import { automationStore } from "builderStore"
+
+  $: {
+    if ($automationStore.automations?.length) {
+      $redirect(`./${$automationStore.automations[0]._id}`)
+    }
+  }
+</script>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
new file mode 100644
index 0000000000..3c0299d50a
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
@@ -0,0 +1,74 @@
+<script>
+  import {
+    Content,
+    SideNav,
+    SideNavItem,
+    Breadcrumbs,
+    Breadcrumb,
+    Header,
+  } from "components/portal/page"
+  import {
+    Page,
+    Layout,
+    Button,
+    Icon,
+    ActionMenu,
+    MenuItem,
+    Helpers,
+    Input,
+    Modal,
+    notifications,
+  } from "@budibase/bbui"
+  import EditableIcon from "components/common/EditableIcon.svelte"
+  import { url, isActive, goto } from "@roxi/routify"
+  import { apps } from "stores/portal"
+</script>
+
+<!-- routify:options index=4 -->
+<div class="settings">
+  <Page>
+    <Layout noPadding gap="L">
+      <Content showMobileNav>
+        <SideNav slot="side-nav">
+          <SideNavItem
+            text="Automation History"
+            url={$url("./automation-history")}
+            active={$isActive("./automation-history")}
+          />
+          <SideNavItem
+            text="Backups"
+            url={$url("./backups")}
+            active={$isActive("./backups")}
+          />
+          <SideNavItem
+            text="Embed"
+            url={$url("./embed")}
+            active={$isActive("./embed")}
+          />
+          <SideNavItem
+            text="Name and URL"
+            url={$url("./name-and-url")}
+            active={$isActive("./name-and-url")}
+          />
+          <SideNavItem
+            text="Version"
+            url={$url("./version")}
+            active={$isActive("./version")}
+          />
+        </SideNav>
+        <slot />
+      </Content>
+    </Layout>
+  </Page>
+</div>
+
+<style>
+  .settings {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    height: 0;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/automation-history/_components/HistoryDetailsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/settings/automation-history/_components/HistoryDetailsPanel.svelte
new file mode 100644
index 0000000000..5b9c925130
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/automation-history/_components/HistoryDetailsPanel.svelte
@@ -0,0 +1,82 @@
+<script>
+  import {
+    Layout,
+    Body,
+    Button,
+    InlineAlert,
+    Heading,
+    Icon,
+  } from "@budibase/bbui"
+  import StatusRenderer from "./StatusRenderer.svelte"
+  import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
+  import TestDisplay from "components/automation/AutomationBuilder/TestDisplay.svelte"
+  import { goto } from "@roxi/routify"
+  import { automationStore } from "builderStore"
+
+  export let history
+  export let appId
+  export let close
+  const STOPPED_ERROR = "stopped_error"
+
+  $: exists = $automationStore.automations?.find(
+    auto => auto._id === history?.automationId
+  )
+</script>
+
+{#if history}
+  <Layout noPadding>
+    <div class="controls">
+      <StatusRenderer value={history.status} />
+      <Icon hoverable name="Close" on:click={close} />
+    </div>
+    <Layout noPadding gap="XS">
+      <Heading>{history.automationName}</Heading>
+      <DateTimeRenderer value={history.createdAt} />
+    </Layout>
+    {#if history.status === STOPPED_ERROR}
+      <div class="cron-error">
+        <InlineAlert
+          type="error"
+          header="CRON automation disabled"
+          message="Fix the error and re-publish your app to re-activate."
+        />
+      </div>
+    {/if}
+    {#if exists}
+      <div>
+        <Button
+          secondary
+          on:click={() => {
+            $goto(`/builder/app/${appId}/automation/${history.automationId}`)
+          }}
+        >
+          Edit automation
+        </Button>
+      </div>
+    {/if}
+    {#key history}
+      <div class="history">
+        <TestDisplay testResults={history} width="100%" />
+      </div>
+    {/key}
+  </Layout>
+{:else}
+  <Body>No details found</Body>
+{/if}
+
+<style>
+  .controls {
+    display: flex;
+    gap: var(--spacing-s);
+    justify-content: space-between;
+    align-items: center;
+  }
+  .cron-error {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+  }
+  .history {
+    margin: 0 -30px;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/automation-history/_components/StatusRenderer.svelte b/packages/builder/src/pages/builder/app/[application]/settings/automation-history/_components/StatusRenderer.svelte
new file mode 100644
index 0000000000..f041faa349
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/automation-history/_components/StatusRenderer.svelte
@@ -0,0 +1,27 @@
+<script>
+  import { Badge } from "@budibase/bbui"
+  export let value
+
+  $: isError = !value || value.toLowerCase() === "error"
+  $: isStoppedError = value?.toLowerCase() === "stopped_error"
+  $: isStopped = value?.toLowerCase() === "stopped" || isStoppedError
+  $: info = getInfo(isError, isStopped)
+
+  const getInfo = (error, stopped) => {
+    if (error) {
+      return { color: "red", message: "Error" }
+    } else if (stopped) {
+      return { color: "yellow", message: "Stopped" }
+    } else {
+      return { color: "green", message: "Success" }
+    }
+  }
+</script>
+
+<Badge
+  green={info.color === "green"}
+  red={info.color === "red"}
+  yellow={info.color === "yellow"}
+>
+  {info.message}
+</Badge>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/automation-history/index.svelte b/packages/builder/src/pages/builder/app/[application]/settings/automation-history/index.svelte
new file mode 100644
index 0000000000..c1c6be997b
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/automation-history/index.svelte
@@ -0,0 +1,262 @@
+<script>
+  import {
+    Layout,
+    Table,
+    Select,
+    Pagination,
+    Button,
+    Body,
+    Heading,
+    Divider,
+  } from "@budibase/bbui"
+  import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
+  import StatusRenderer from "./_components/StatusRenderer.svelte"
+  import HistoryDetailsPanel from "./_components/HistoryDetailsPanel.svelte"
+  import { automationStore, store } from "builderStore"
+  import { createPaginationStore } from "helpers/pagination"
+  import { getContext, onDestroy, onMount } from "svelte"
+  import dayjs from "dayjs"
+  import { auth, licensing, admin } from "stores/portal"
+  import { Constants } from "@budibase/frontend-core"
+  import Portal from "svelte-portal"
+
+  const ERROR = "error",
+    SUCCESS = "success",
+    STOPPED = "stopped"
+  const sidePanel = getContext("side-panel")
+
+  let pageInfo = createPaginationStore()
+  let runHistory = null
+  let selectedHistory = null
+  let automationOptions = []
+  let automationId = null
+  let status = null
+  let timeRange = null
+  let loaded = false
+
+  $: licensePlan = $auth.user?.license?.plan
+  $: page = $pageInfo.page
+  $: fetchLogs(automationId, status, page, timeRange)
+
+  const timeOptions = [
+    { value: "90-d", label: "Past 90 days" },
+    { value: "30-d", label: "Past 30 days" },
+    { value: "1-w", label: "Past week" },
+    { value: "1-d", label: "Past day" },
+    { value: "1-h", label: "Past 1 hour" },
+    { value: "15-m", label: "Past 15 mins" },
+    { value: "5-m", label: "Past 5 mins" },
+  ]
+
+  const statusOptions = [
+    { value: SUCCESS, label: "Success" },
+    { value: ERROR, label: "Error" },
+    { value: STOPPED, label: "Stopped" },
+  ]
+
+  const runHistorySchema = {
+    status: { displayName: "Status" },
+    automationName: { displayName: "Automation" },
+    createdAt: { displayName: "Time" },
+  }
+
+  const customRenderers = [
+    { column: "createdAt", component: DateTimeRenderer },
+    { column: "status", component: StatusRenderer },
+  ]
+
+  async function fetchLogs(
+    automationId,
+    status,
+    page,
+    timeRange,
+    force = false
+  ) {
+    if (!force && !loaded) {
+      return
+    }
+    let startDate = null
+    if (timeRange) {
+      const [length, units] = timeRange.split("-")
+      startDate = dayjs().subtract(length, units)
+    }
+    const response = await automationStore.actions.getLogs({
+      automationId,
+      status,
+      page,
+      startDate,
+    })
+    pageInfo.fetched(response.hasNextPage, response.nextPage)
+    runHistory = enrichHistory($automationStore.blockDefinitions, response.data)
+  }
+
+  function enrichHistory(definitions, runHistory) {
+    if (!definitions) {
+      return []
+    }
+    const finalHistory = []
+    for (let history of runHistory) {
+      if (!history.steps) {
+        continue
+      }
+      let notFound = false
+      for (let step of history.steps) {
+        const trigger = definitions.TRIGGER[step.stepId],
+          action = definitions.ACTION[step.stepId]
+        if (!trigger && !action) {
+          notFound = true
+          break
+        }
+        step.icon = trigger ? trigger.icon : action.icon
+        step.name = trigger ? trigger.name : action.name
+      }
+      if (!notFound) {
+        finalHistory.push(history)
+      }
+    }
+    return finalHistory
+  }
+
+  function viewDetails({ detail }) {
+    selectedHistory = detail
+    sidePanel.open()
+  }
+
+  onMount(async () => {
+    await automationStore.actions.fetch()
+    const params = new URLSearchParams(window.location.search)
+    const shouldOpen = params.get("open") === ERROR
+    if (shouldOpen) {
+      status = ERROR
+    }
+    automationOptions = []
+    for (let automation of $automationStore.automations) {
+      automationOptions.push({ value: automation._id, label: automation.name })
+    }
+    await fetchLogs(automationId, status, 0, timeRange, true)
+    // Open the first automation info if one exists
+    if (shouldOpen && runHistory?.[0]) {
+      viewDetails({ detail: runHistory[0] })
+    }
+    loaded = true
+  })
+
+  onDestroy(() => {
+    sidePanel.close()
+  })
+</script>
+
+<Layout noPadding>
+  <Layout gap="XS" noPadding>
+    <Heading>Automation History</Heading>
+    <Body>View the automations your app has executed</Body>
+  </Layout>
+  <Divider />
+
+  <div class="controls">
+    <div class="search">
+      <div class="select">
+        <Select
+          placeholder="All"
+          label="Status"
+          bind:value={status}
+          options={statusOptions}
+        />
+      </div>
+      <div class="select">
+        <Select
+          placeholder="All"
+          label="Automation"
+          bind:value={automationId}
+          options={automationOptions}
+        />
+      </div>
+      <div class="select">
+        <Select
+          placeholder="All"
+          label="Date range"
+          bind:value={timeRange}
+          options={timeOptions}
+          isOptionEnabled={x => {
+            if (licensePlan?.type === Constants.PlanType.FREE) {
+              return ["1-w", "30-d", "90-d"].indexOf(x.value) < 0
+            } else if (licensePlan?.type === Constants.PlanType.TEAM) {
+              return ["90-d"].indexOf(x.value) < 0
+            } else if (licensePlan?.type === Constants.PlanType.PRO) {
+              return ["30-d", "90-d"].indexOf(x.value) < 0
+            }
+            return true
+          }}
+        />
+      </div>
+    </div>
+    {#if (licensePlan?.type !== Constants.PlanType.ENTERPRISE && $auth.user.accountPortalAccess) || !$admin.cloud}
+      <Button secondary on:click={$licensing.goToUpgradePage()}>
+        Get more history
+      </Button>
+    {/if}
+  </div>
+
+  {#if runHistory}
+    <div>
+      <Table
+        on:click={viewDetails}
+        schema={runHistorySchema}
+        allowSelectRows={false}
+        allowEditColumns={false}
+        allowEditRows={false}
+        data={runHistory}
+        {customRenderers}
+        placeholderText="No history found"
+        border={false}
+      />
+      <div class="pagination">
+        <Pagination
+          page={$pageInfo.pageNumber}
+          hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
+          hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
+          goToPrevPage={pageInfo.prevPage}
+          goToNextPage={pageInfo.nextPage}
+        />
+      </div>
+    </div>
+  {/if}
+</Layout>
+
+{#if selectedHistory}
+  <Portal target="#side-panel">
+    <HistoryDetailsPanel
+      appId={$store.appId}
+      bind:history={selectedHistory}
+      close={sidePanel.close}
+    />
+  </Portal>
+{/if}
+
+<style>
+  .controls {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-xl);
+    align-items: flex-end;
+    flex-wrap: wrap;
+  }
+  .search {
+    display: flex;
+    gap: var(--spacing-xl);
+    align-items: flex-start;
+    flex: 1 0 auto;
+    max-width: 100%;
+  }
+  .select {
+    flex: 1 1 0;
+    max-width: 150px;
+    min-width: 80px;
+  }
+  .pagination {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin-top: var(--spacing-xl);
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/ActionsRenderer.svelte b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/ActionsRenderer.svelte
new file mode 100644
index 0000000000..4787112760
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/ActionsRenderer.svelte
@@ -0,0 +1,87 @@
+<script>
+  import {
+    ActionMenu,
+    MenuItem,
+    Icon,
+    Heading,
+    Body,
+    Modal,
+  } from "@budibase/bbui"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import CreateRestoreModal from "./CreateRestoreModal.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let row
+
+  let deleteDialog
+  let restoreDialog
+  let restoreBackupModal
+
+  const dispatch = createEventDispatcher()
+
+  const onClickRestore = () => {
+    dispatch("buttonclick", {
+      type: "backupRestore",
+      backupId: row._id,
+    })
+  }
+
+  const onClickDelete = () => {
+    dispatch("buttonclick", {
+      type: "backupDelete",
+      backupId: row._id,
+    })
+  }
+
+  async function downloadExport() {
+    window.open(`/api/apps/${row.appId}/backups/${row._id}/file`, "_blank")
+  }
+</script>
+
+<div class="cell">
+  <ActionMenu align="right">
+    <div slot="control">
+      <Icon size="M" hoverable name="MoreSmallList" />
+    </div>
+
+    {#if row.type !== "restore"}
+      <MenuItem on:click={restoreDialog.show} icon="Revert">Restore</MenuItem>
+      <MenuItem on:click={deleteDialog.show} icon="Delete">Delete</MenuItem>
+      <MenuItem on:click={downloadExport} icon="Download">Download</MenuItem>
+    {/if}
+  </ActionMenu>
+</div>
+
+<Modal bind:this={restoreBackupModal}>
+  <CreateRestoreModal confirm={onClickRestore} />
+</Modal>
+
+<ConfirmDialog
+  bind:this={deleteDialog}
+  okText="Delete Backup"
+  onOk={onClickDelete}
+  title="Confirm Deletion"
+>
+  Are you sure you wish to delete this backup? This action cannot be undone.
+</ConfirmDialog>
+
+<ConfirmDialog
+  bind:this={restoreDialog}
+  okText="Continue"
+  onOk={restoreBackupModal?.show}
+  title="Confirm restore"
+  warning={false}
+>
+  <Heading size="S">Backup</Heading>
+  <Body size="S">{new Date(row.timestamp).toLocaleString()}</Body>
+</ConfirmDialog>
+
+<style>
+  .cell {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-m);
+    align-items: center;
+    margin-left: auto;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/AppSizeRenderer.svelte b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/AppSizeRenderer.svelte
new file mode 100644
index 0000000000..c103399f5b
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/AppSizeRenderer.svelte
@@ -0,0 +1,41 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+
+  export let row
+
+  $: automations = row?.automations
+  $: datasources = row?.datasources
+  $: screens = row?.screens
+</script>
+
+<div class="cell">
+  {#if automations != null && screens != null && datasources != null}
+    <div class="item">
+      <Icon name="Data" />
+      <div>{datasources || 0}</div>
+    </div>
+    <div class="item">
+      <Icon name="WebPage" />
+      <div>{screens || 0}</div>
+    </div>
+    <div class="item">
+      <Icon name="JourneyVoyager" />
+      <div>{automations || 0}</div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .cell {
+    display: flex;
+    flex-direction: row;
+    gap: calc(var(--spacing-xl) * 2);
+    align-items: center;
+  }
+
+  .item {
+    display: flex;
+    gap: var(--spacing-s);
+    flex-direction: row;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/CreateRestoreModal.svelte b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/CreateRestoreModal.svelte
new file mode 100644
index 0000000000..62ef3e239d
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/CreateRestoreModal.svelte
@@ -0,0 +1,27 @@
+<script>
+  import { ModalContent, Input, Body } from "@budibase/bbui"
+  import { auth } from "stores/portal"
+
+  export let confirm
+
+  let templateName = $auth.user.firstName
+    ? `${$auth.user.firstName}'s Backup`
+    : "Restore Backup"
+  let name = templateName
+</script>
+
+<ModalContent
+  onConfirm={() => confirm(name)}
+  title="Back up your current version"
+  confirmText="Confirm Restore"
+  disabled={!name}
+>
+  <Body size="S"
+    >Create a backup of your current app to allow you to roll back after
+    restoring this backup</Body
+  >
+  <Input label="Backup name" bind:value={name} />
+</ModalContent>
+
+<style>
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/DatasourceRenderer.svelte b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/DatasourceRenderer.svelte
new file mode 100644
index 0000000000..198339dae9
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/DatasourceRenderer.svelte
@@ -0,0 +1,21 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+
+  export let value
+</script>
+
+<div class="cell">
+  {#if value != null}
+    <Icon name="Data" />
+    <div>{value || 0}</div>
+  {/if}
+</div>
+
+<style>
+  .cell {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-m);
+    align-items: center;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/StatusRenderer.svelte b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/StatusRenderer.svelte
new file mode 100644
index 0000000000..3b3cce731d
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/StatusRenderer.svelte
@@ -0,0 +1,15 @@
+<script>
+  import { Badge } from "@budibase/bbui"
+
+  export let value = "started"
+  $: status = value[0].toUpperCase() + value?.slice(1)
+</script>
+
+<Badge
+  grey={value === "started" || value === "pending"}
+  green={value === "complete"}
+  red={value === "failed"}
+  size="S"
+>
+  {status}
+</Badge>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/TimeAgoRenderer.svelte b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/TimeAgoRenderer.svelte
new file mode 100644
index 0000000000..fd67b4010b
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/TimeAgoRenderer.svelte
@@ -0,0 +1,10 @@
+<script>
+  import dayjs from "dayjs"
+  import relativeTime from "dayjs/plugin/relativeTime"
+
+  dayjs.extend(relativeTime)
+
+  export let value
+</script>
+
+<span title={value}>{dayjs(value).fromNow()}</span>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/TypeRenderer.svelte b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/TypeRenderer.svelte
new file mode 100644
index 0000000000..86ad0f3d4e
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/TypeRenderer.svelte
@@ -0,0 +1,36 @@
+<script>
+  import { BackupTrigger } from "constants/backend/backups"
+  export let row
+
+  $: trigger = row?.trigger || "manual"
+  $: type = row?.type || "backup"
+
+  function printTrigger(trig) {
+    let final = "undefined"
+    switch (trig) {
+      case BackupTrigger.PUBLISH:
+        final = "published"
+        break
+      case BackupTrigger.RESTORING:
+        final = "pre-restore"
+        break
+      default:
+        final = trig
+        break
+    }
+    return final.charAt(0).toUpperCase() + final.slice(1)
+  }
+</script>
+
+<div class="cell">
+  {printTrigger(trigger)}
+  {type}
+</div>
+
+<style>
+  .cell {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/UserRenderer.svelte b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/UserRenderer.svelte
new file mode 100644
index 0000000000..399877a801
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/UserRenderer.svelte
@@ -0,0 +1,18 @@
+<script>
+  import { UserAvatar } from "@budibase/frontend-core"
+
+  export let value
+</script>
+
+<div class="cell">
+  <UserAvatar user={value} />
+</div>
+
+<style>
+  .cell {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-m);
+    align-items: center;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/backups/index.svelte b/packages/builder/src/pages/builder/app/[application]/settings/backups/index.svelte
new file mode 100644
index 0000000000..1d612117e2
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/index.svelte
@@ -0,0 +1,340 @@
+<script>
+  import {
+    Button,
+    DatePicker,
+    Divider,
+    Layout,
+    notifications,
+    Pagination,
+    Select,
+    Heading,
+    Body,
+    Tags,
+    Tag,
+    Table,
+  } from "@budibase/bbui"
+  import { backups, licensing, auth, admin } from "stores/portal"
+  import { store } from "builderStore"
+  import { createPaginationStore } from "helpers/pagination"
+  import TimeAgoRenderer from "./_components/TimeAgoRenderer.svelte"
+  import AppSizeRenderer from "./_components/AppSizeRenderer.svelte"
+  import ActionsRenderer from "./_components/ActionsRenderer.svelte"
+  import UserRenderer from "./_components/UserRenderer.svelte"
+  import StatusRenderer from "./_components/StatusRenderer.svelte"
+  import TypeRenderer from "./_components/TypeRenderer.svelte"
+  import BackupsDefault from "assets/backups-default.png"
+  import { BackupTrigger, BackupType } from "constants/backend/backups"
+  import { onMount } from "svelte"
+
+  let loading = true
+  let backupData = null
+  let pageInfo = createPaginationStore()
+  let filterOpt = null
+  let startDate = null
+  let endDate = null
+  let filters = [
+    {
+      label: "Manual backup",
+      value: { type: BackupType.BACKUP, trigger: BackupTrigger.MANUAL },
+    },
+    {
+      label: "Published backup",
+      value: { type: BackupType.BACKUP, trigger: BackupTrigger.PUBLISH },
+    },
+    {
+      label: "Pre-restore backup",
+      value: { type: BackupType.BACKUP, trigger: BackupTrigger.RESTORING },
+    },
+    {
+      label: "Manual restore",
+      value: { type: BackupType.RESTORE, trigger: BackupTrigger.MANUAL },
+    },
+  ]
+
+  $: page = $pageInfo.page
+  $: fetchBackups(filterOpt, page, startDate, endDate)
+
+  let schema = {
+    type: {
+      displayName: "Type",
+      width: "auto",
+    },
+    createdAt: {
+      displayName: "Date",
+      width: "auto",
+    },
+    appSize: {
+      displayName: "App size",
+      width: "auto",
+    },
+    createdBy: {
+      displayName: "User",
+      width: "auto",
+    },
+    status: {
+      displayName: "Status",
+      width: "auto",
+    },
+    actions: {
+      displayName: null,
+      width: "auto",
+    },
+  }
+
+  const customRenderers = [
+    { column: "appSize", component: AppSizeRenderer },
+    { column: "actions", component: ActionsRenderer },
+    { column: "createdAt", component: TimeAgoRenderer },
+    { column: "createdBy", component: UserRenderer },
+    { column: "status", component: StatusRenderer },
+    { column: "type", component: TypeRenderer },
+  ]
+
+  function flattenBackups(backups) {
+    return backups.map(backup => {
+      return {
+        ...backup,
+        ...backup?.contents,
+      }
+    })
+  }
+
+  async function fetchBackups(filters, page, startDate, endDate) {
+    const response = await backups.searchBackups({
+      appId: $store.appId,
+      ...filters,
+      page,
+      startDate,
+      endDate,
+    })
+    pageInfo.fetched(response.hasNextPage, response.nextPage)
+
+    // flatten so we have an easier structure to use for the table schema
+    backupData = flattenBackups(response.data)
+  }
+
+  async function createManualBackup() {
+    try {
+      loading = true
+      let response = await backups.createManualBackup({
+        appId: $store.appId,
+      })
+      await fetchBackups(filterOpt, page)
+      notifications.success(response.message)
+    } catch {
+      notifications.error("Unable to create backup")
+    }
+  }
+
+  const poll = backupData => {
+    if (backupData === null) {
+      return
+    }
+
+    if (backupData.some(datum => datum.status === "started")) {
+      setTimeout(() => fetchBackups(filterOpt, page), 2000)
+    } else {
+      loading = false
+    }
+  }
+
+  $: poll(backupData)
+
+  async function handleButtonClick({ detail }) {
+    if (detail.type === "backupDelete") {
+      await backups.deleteBackup({
+        appId: $store.appId,
+        backupId: detail.backupId,
+      })
+      await fetchBackups(filterOpt, page)
+    } else if (detail.type === "backupRestore") {
+      await backups.restoreBackup({
+        appId: $store.appId,
+        backupId: detail.backupId,
+        name: detail.restoreBackupName,
+      })
+      await fetchBackups(filterOpt, page)
+    } else if (detail.type === "backupUpdate") {
+      await backups.updateBackup({
+        appId: $store.appId,
+        backupId: detail.backupId,
+        name: detail.name,
+      })
+      await fetchBackups(filterOpt, page)
+    }
+  }
+
+  onMount(async () => {
+    await fetchBackups(filterOpt, page, startDate, endDate)
+    loading = false
+  })
+</script>
+
+<Layout noPadding>
+  <Layout gap="XS" noPadding>
+    <div class="title">
+      <Heading>Backups</Heading>
+      {#if !$licensing.backupsEnabled}
+        <Tags>
+          <Tag icon="LockClosed">Premium</Tag>
+        </Tags>
+      {/if}
+    </div>
+    <Body>Back up your apps and restore them to their previous state</Body>
+  </Layout>
+  <Divider />
+
+  {#if !$licensing.backupsEnabled}
+    {#if !$auth.accountPortalAccess && $admin.cloud}
+      <Body>Contact your account holder to upgrade your plan.</Body>
+    {/if}
+    <div class="pro-buttons">
+      {#if $auth.accountPortalAccess}
+        <Button
+          primary
+          disabled={!$auth.accountPortalAccess && $admin.cloud}
+          on:click={$licensing.goToUpgradePage()}
+        >
+          Upgrade
+        </Button>
+      {/if}
+      <Button
+        secondary
+        on:click={() => {
+          window.open("https://budibase.com/pricing/", "_blank")
+        }}
+      >
+        View plans
+      </Button>
+    </div>
+  {:else if !backupData?.length && !loading && !filterOpt && !startDate}
+    <div class="center">
+      <Layout noPadding gap="S" justifyItems="center">
+        <img height="130px" src={BackupsDefault} alt="BackupsDefault" />
+        <Layout noPadding gap="XS">
+          <Heading>You have no backups yet</Heading>
+          <Body>You can manually back up your app any time</Body>
+        </Layout>
+        <div>
+          <Button cta disabled={loading} on:click={createManualBackup}>
+            Create backup
+          </Button>
+        </div>
+      </Layout>
+    </div>
+  {:else}
+    <Layout noPadding gap="M" alignContent="start">
+      <div class="controls">
+        <div class="search">
+          <div class="select">
+            <Select
+              placeholder="All"
+              label="Type"
+              options={filters}
+              getOptionValue={filter => filter.value}
+              getOptionLabel={filter => filter.label}
+              bind:value={filterOpt}
+            />
+          </div>
+          <DatePicker
+            range={true}
+            label="Date Range"
+            on:change={e => {
+              if (e.detail[0].length > 1) {
+                startDate = e.detail[0][0].toISOString()
+                endDate = e.detail[0][1].toISOString()
+              }
+            }}
+          />
+        </div>
+        <div>
+          <Button cta disabled={loading} on:click={createManualBackup}
+            >Create new backup</Button
+          >
+        </div>
+      </div>
+      <div class="table">
+        <Table
+          {schema}
+          disableSorting
+          allowSelectRows={false}
+          allowEditColumns={false}
+          allowEditRows={false}
+          data={backupData}
+          {customRenderers}
+          placeholderText="No backups found"
+          border={false}
+          on:buttonclick={handleButtonClick}
+        />
+        <div class="pagination">
+          <Pagination
+            page={$pageInfo.pageNumber}
+            hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
+            hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
+            goToPrevPage={pageInfo.prevPage}
+            goToNextPage={pageInfo.nextPage}
+          />
+        </div>
+      </div>
+    </Layout>
+  {/if}
+</Layout>
+
+<style>
+  .title {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xl);
+  }
+
+  .controls {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-end;
+    gap: var(--spacing-xl);
+    flex-wrap: wrap;
+  }
+
+  .search {
+    flex: 1 1 auto;
+    display: flex;
+    gap: var(--spacing-xl);
+    align-items: flex-end;
+  }
+  .search :global(.spectrum-InputGroup) {
+    min-width: 100px;
+  }
+
+  .select {
+    flex-basis: 160px;
+    width: 0;
+    min-width: 100px;
+  }
+
+  .pagination {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin-top: var(--spacing-xl);
+  }
+
+  .title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+
+  .pro-buttons {
+    display: flex;
+    gap: var(--spacing-m);
+  }
+
+  .center {
+    text-align: center;
+    display: contents;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte b/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
new file mode 100644
index 0000000000..9e450557c4
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
@@ -0,0 +1,23 @@
+<script>
+  import {
+    Layout,
+    Table,
+    Select,
+    Pagination,
+    Button,
+    Body,
+    Heading,
+    Divider,
+  } from "@budibase/bbui"
+</script>
+
+<Layout noPadding>
+  <Layout gap="XS" noPadding>
+    <Heading>Embed</Heading>
+    <Body>View the automations your app has executed</Body>
+  </Layout>
+  <Divider />
+</Layout>
+
+<style>
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/index.svelte b/packages/builder/src/pages/builder/app/[application]/settings/index.svelte
new file mode 100644
index 0000000000..a99eb55f7a
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/index.svelte
@@ -0,0 +1,4 @@
+<script>
+  import { redirect } from "@roxi/routify"
+  $redirect("../settings/automation-history")
+</script>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte b/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte
new file mode 100644
index 0000000000..86af5df3bc
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte
@@ -0,0 +1,79 @@
+<script>
+  import {
+    Layout,
+    Divider,
+    Heading,
+    Body,
+    Button,
+    Label,
+    Modal,
+    Icon,
+  } from "@budibase/bbui"
+  import { AppStatus } from "constants"
+  import { store } from "builderStore"
+  import { apps } from "stores/portal"
+  import UpdateAppModal from "components/start/UpdateAppModal.svelte"
+
+  let updatingModal
+
+  $: filteredApps = $apps.filter(app => app.devId == $store.appId)
+  $: app = filteredApps.length ? filteredApps[0] : {}
+  $: appUrl = `${window.origin}/app${app?.url}`
+  $: appDeployed = app?.status === AppStatus.DEPLOYED
+</script>
+
+<Layout noPadding>
+  <Layout gap="XS" noPadding>
+    <Heading>Name and URL</Heading>
+    <Body>Edit your app's name and URL</Body>
+  </Layout>
+  <Divider />
+
+  <Layout noPadding gap="XXS">
+    <Label size="L">Name</Label>
+    <Body>{app?.name}</Body>
+  </Layout>
+
+  <Layout noPadding gap="XS">
+    <Label size="L">Icon</Label>
+    <div class="icon">
+      <Icon
+        size="L"
+        name={app?.icon?.name || "Apps"}
+        color={app?.icon?.color}
+      />
+    </div>
+  </Layout>
+
+  <Layout noPadding gap="XXS">
+    <Label size="L">URL</Label>
+    <Body>{appUrl}</Body>
+  </Layout>
+
+  <div>
+    <Button
+      cta
+      on:click={() => {
+        updatingModal.show()
+      }}
+      disabled={appDeployed}
+      tooltip={appDeployed
+        ? "You must unpublish your app to make changes to these settings"
+        : null}
+      icon={appDeployed ? "HelpOutline" : null}
+    >
+      Edit
+    </Button>
+  </div>
+</Layout>
+
+<Modal bind:this={updatingModal} padding={false} width="600px">
+  <UpdateAppModal {app} />
+</Modal>
+
+<style>
+  .icon {
+    display: flex;
+    justify-content: flex-start;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/version.svelte b/packages/builder/src/pages/builder/app/[application]/settings/version.svelte
new file mode 100644
index 0000000000..723e32984d
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/version.svelte
@@ -0,0 +1,39 @@
+<script>
+  import { Layout, Heading, Body, Divider, Button } from "@budibase/bbui"
+  import { store } from "builderStore"
+  import VersionModal from "components/deploy/VersionModal.svelte"
+
+  let versionModal
+
+  $: updateAvailable = $store.upgradableVersion !== $store.version
+</script>
+
+<Layout noPadding>
+  <Layout gap="XS" noPadding>
+    <Heading>Version</Heading>
+    <Body>See the current version of your app and check for updates</Body>
+  </Layout>
+  <Divider />
+  {#if updateAvailable}
+    <Body>
+      The app is currently using version <strong>{$store.version}</strong>
+      but version <strong>{$store.upgradableVersion}</strong> is available.
+      <br />
+      Updates can contain new features, performance improvements and bug fixes.
+    </Body>
+    <div>
+      <Button cta on:click={versionModal.show}>Update app</Button>
+    </div>
+  {:else}
+    <Body>
+      The app is currently using version <strong>{$store.version}</strong>.
+      <br />
+      You're running the latest!
+    </Body>
+    <div>
+      <Button secondary on:click={versionModal.show}>Revert app</Button>
+    </div>
+  {/if}
+</Layout>
+
+<VersionModal bind:this={versionModal} hideIcon={true} />
