diff --git a/packages/builder/assets/backups-default.png b/packages/builder/assets/backups-default.png
new file mode 100644
index 0000000000..6e37cbb6c7
Binary files /dev/null and b/packages/builder/assets/backups-default.png differ
diff --git a/packages/builder/src/components/portal/overview/backups/BackupsTab.svelte b/packages/builder/src/components/portal/overview/backups/BackupsTab.svelte
index cb20013b9b..a8c679a5d8 100644
--- a/packages/builder/src/components/portal/overview/backups/BackupsTab.svelte
+++ b/packages/builder/src/components/portal/overview/backups/BackupsTab.svelte
@@ -1,17 +1,23 @@
 <script>
   import {
     ActionButton,
+    Button,
     DatePicker,
+    Divider,
     Layout,
     Modal,
     notifications,
     Pagination,
     Select,
+    Heading,
+    Body,
+    Tags,
+    Tag,
     Table,
+    Page,
   } from "@budibase/bbui"
-  import { backups } from "stores/portal"
+  import { backups, licensing, auth, admin } from "stores/portal"
   import { createPaginationStore } from "helpers/pagination"
-
   import AppSizeRenderer from "./AppSizeRenderer.svelte"
   import CreateBackupModal from "./CreateBackupModal.svelte"
   import ActionsRenderer from "./ActionsRenderer.svelte"
@@ -19,7 +25,7 @@
   import UserRenderer from "./UserRenderer.svelte"
   import StatusRenderer from "./StatusRenderer.svelte"
   import TypeRenderer from "./TypeRenderer.svelte"
-
+  import BackupsDefault from "assets/backups-default.png"
   export let app
 
   let backupData = null
@@ -30,6 +36,7 @@
   let endDate = null
   let filters = getFilters()
 
+  $: console.log(backupData)
   $: page = $pageInfo.page
   $: fetchBackups(filterOpt, page, startDate, endDate)
 
@@ -146,38 +153,78 @@
 </script>
 
 <div class="root">
-  <Layout noPadding gap="M" alignContent="start">
-    <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>
-      <div>
-        <DatePicker
-          range={true}
-          label={"Filter Range"}
-          on:change={e => {
-            if (e.detail[0].length > 1) {
-              startDate = e.detail[0][0].toISOString()
-              endDate = e.detail[0][1].toISOString()
-            }
-          }}
-        />
-      </div>
+  {#if !$licensing.backupsEnabled}
+    <Page wide={false}>
+      <Layout gap="XS" noPadding>
+        <div class="title">
+          <Heading size="M">Backups</Heading>
+          <Tags>
+            <Tag icon="LockClosed">Pro plan</Tag>
+          </Tags>
+        </div>
+        <div>
+          <Body>
+            Backup your apps and restore them to their previous state.
+            {#if !$auth.accountPortalAccess && !$licensing.groupsEnabled && $admin.cloud}
+              Contact your account holder to upgrade your plan.
+            {/if}
+          </Body>
+        </div>
+        <Divider />
+        <div class="pro-buttons">
+          <Button
+            newStyles
+            primary
+            disabled={!$auth.accountPortalAccess && $admin.cloud}
+            on:click={$licensing.goToUpgradePage()}
+          >
+            Upgrade
+          </Button>
+          <!--Show the view plans button-->
+          <Button
+            newStyles
+            secondary
+            on:click={() => {
+              window.open("https://budibase.com/pricing/", "_blank")
+            }}
+          >
+            View Plans
+          </Button>
+        </div>
+      </Layout>
+    </Page>
+  {:else if backupData}
+    <Layout noPadding gap="M" alignContent="start">
+      <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>
+        <div>
+          <DatePicker
+            range={true}
+            label={"Filter Range"}
+            on:change={e => {
+              if (e.detail[0].length > 1) {
+                startDate = e.detail[0][0].toISOString()
+                endDate = e.detail[0][1].toISOString()
+              }
+            }}
+          />
+        </div>
 
-      <div class="split-buttons">
-        <ActionButton on:click={modal.show} icon="SaveAsFloppy"
-          >Create new backup</ActionButton
-        >
+        <div class="split-buttons">
+          <ActionButton on:click={modal.show} icon="SaveAsFloppy"
+            >Create new backup</ActionButton
+          >
+        </div>
       </div>
-    </div>
-    {#if backupData}
       <div>
         <Table
           {schema}
@@ -200,8 +247,28 @@
           />
         </div>
       </div>
-    {/if}
-  </Layout>
+    </Layout>
+  {:else if !backupData}
+    <Page wide={false}>
+      <div class="align">
+        <img
+          width="200px"
+          height="100px"
+          src={BackupsDefault}
+          alt="BackupsDefault"
+        />
+        <Layout gap="S">
+          <Heading>You have no backups yet</Heading>
+          <div class="opacity">
+            <Body size="S">You can manually backup your app any time</Body>
+          </div>
+          <div class="padding">
+            <Button cta>Create Backup</Button>
+          </div>
+        </Layout>
+      </div>
+    </Page>
+  {/if}
 </div>
 
 <Modal bind:this={modal}>
@@ -242,4 +309,21 @@
     flex: 1;
     gap: var(--spacing-xl);
   }
+
+  .title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+
+  .align {
+    margin-top: 5%;
+    text-align: center;
+  }
+
+  .pro-buttons {
+    display: flex;
+    gap: var(--spacing-m);
+  }
 </style>
diff --git a/packages/builder/src/stores/portal/licensing.js b/packages/builder/src/stores/portal/licensing.js
index 179dac9689..59a1622c9f 100644
--- a/packages/builder/src/stores/portal/licensing.js
+++ b/packages/builder/src/stores/portal/licensing.js
@@ -14,6 +14,7 @@ export const createLicensingStore = () => {
     isFreePlan: true,
     // features
     groupsEnabled: false,
+    backupsEnabled: false,
     // the currently used quotas from the db
     quotaUsage: undefined,
     // derived quota metrics for percentages used
@@ -56,12 +57,17 @@ export const createLicensingStore = () => {
       const groupsEnabled = license.features.includes(
         Constants.Features.USER_GROUPS
       )
+      const backupsEnabled = license.features.includes(
+        Constants.Features.BACKUPS
+      )
+
       store.update(state => {
         return {
           ...state,
           license,
           isFreePlan,
           groupsEnabled,
+          backupsEnabled,
         }
       })
     },
diff --git a/packages/frontend-core/src/constants.js b/packages/frontend-core/src/constants.js
index 9a5acf8a9b..1eed492c25 100644
--- a/packages/frontend-core/src/constants.js
+++ b/packages/frontend-core/src/constants.js
@@ -113,6 +113,7 @@ export const ApiVersion = "1"
 
 export const Features = {
   USER_GROUPS: "userGroups",
+  BACKUPS: "appBackups",
 }
 
 // Role IDs
