diff --git a/packages/bbui/src/InlineAlert/InlineAlert.svelte b/packages/bbui/src/InlineAlert/InlineAlert.svelte
index b99399bf8b..94ac6b2c2a 100644
--- a/packages/bbui/src/InlineAlert/InlineAlert.svelte
+++ b/packages/bbui/src/InlineAlert/InlineAlert.svelte
@@ -6,6 +6,7 @@
   export let header = ""
   export let message = ""
   export let onConfirm = undefined
+  export let buttonText = ""
 
   $: icon = selectIcon(type)
   // if newlines used, convert them to different elements
@@ -40,7 +41,7 @@
   {/each}
   {#if onConfirm}
     <div class="spectrum-InLineAlert-footer button">
-      <Button secondary on:click={onConfirm}>OK</Button>
+      <Button secondary on:click={onConfirm}>{buttonText || "OK"}</Button>
     </div>
   {/if}
 </div>
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index b45f3e9ed6..11424b1261 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -34,6 +34,7 @@ export { default as Layout } from "./Layout/Layout.svelte"
 export { default as Page } from "./Layout/Page.svelte"
 export { default as Link } from "./Link/Link.svelte"
 export { default as Tooltip } from "./Tooltip/Tooltip.svelte"
+export { default as TooltipWrapper } from "./Tooltip/TooltipWrapper.svelte"
 export { default as Menu } from "./Menu/Menu.svelte"
 export { default as MenuSection } from "./Menu/Section.svelte"
 export { default as MenuSeparator } from "./Menu/Separator.svelte"
diff --git a/packages/builder/src/components/usage/UsageDashCard.svelte b/packages/builder/src/components/usage/UsageDashCard.svelte
index cc6cdf1b24..6dd0b3d969 100644
--- a/packages/builder/src/components/usage/UsageDashCard.svelte
+++ b/packages/builder/src/components/usage/UsageDashCard.svelte
@@ -1,5 +1,12 @@
 <script>
-  import { Detail, Button, Heading, Layout, Body } from "@budibase/bbui"
+  import {
+    Detail,
+    Button,
+    Heading,
+    Layout,
+    Body,
+    TooltipWrapper,
+  } from "@budibase/bbui"
 
   export let description = ""
   export let title = ""
@@ -25,7 +32,13 @@
         {#if textRows.length}
           <div class="text-rows">
             {#each textRows as row}
-              <Body>{row}</Body>
+              {#if row.tooltip}
+                <TooltipWrapper tooltip={row.tooltip}>
+                  <Body>{row.message}</Body>
+                </TooltipWrapper>
+              {:else}
+                <Body>{row.message}</Body>
+              {/if}
             {/each}
           </div>
         {/if}
diff --git a/packages/builder/src/pages/builder/portal/settings/usage.svelte b/packages/builder/src/pages/builder/portal/settings/usage.svelte
index bb3eaaf9d4..41a01e3cd3 100644
--- a/packages/builder/src/pages/builder/portal/settings/usage.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/usage.svelte
@@ -7,6 +7,7 @@
     notifications,
     Detail,
     Link,
+    TooltipWrapper,
   } from "@budibase/bbui"
   import { onMount } from "svelte"
   import { admin, auth, licensing } from "../../../../stores/portal"
@@ -29,6 +30,7 @@
   $: quotaUsage = $licensing.quotaUsage
   $: license = $auth.user?.license
   $: accountPortalAccess = $auth?.user?.accountPortalAccess
+  $: quotaReset = quotaUsage?.quotaReset
 
   const setMonthlyUsage = () => {
     monthlyUsage = []
@@ -97,17 +99,19 @@
     textRows = []
 
     if (cancelAt) {
-      textRows.push("Subscription has been cancelled")
-      textRows.push(`${getDaysRemaining(cancelAt * 1000)} days remaining`)
+      textRows.push({ message: "Subscription has been cancelled" })
+      textRows.push({
+        message: `${getDaysRemaining(cancelAt * 1000)} days remaining`,
+        tooltip: new Date(cancelAt * 1000),
+      })
     }
   }
 
   const setDaysRemainingInMonth = () => {
-    let now = new Date()
-    now = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+    const resetDate = new Date(quotaReset)
 
-    const firstNextMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1)
-    const difference = firstNextMonth.getTime() - now.getTime()
+    const now = new Date()
+    const difference = resetDate.getTime() - now.getTime()
 
     // return the difference in days
     daysRemainingInMonth = (difference / (1000 * 3600 * 24)).toFixed(0)
@@ -207,7 +211,10 @@
             <Layout gap="S">
               <Heading size="S" weight="light">Monthly</Heading>
               <div class="detail">
-                <Detail size="M">Resets in {daysRemainingInMonth} days</Detail>
+                <TooltipWrapper tooltip={new Date(quotaReset)}>
+                  <Detail size="M">Resets in {daysRemainingInMonth} days</Detail
+                  >
+                </TooltipWrapper>
               </div>
               <div class="usages">
                 <Layout noPadding>
@@ -236,7 +243,8 @@
   }
   .detail :global(.spectrum-Detail) {
     color: var(--spectrum-global-color-gray-700);
-    margin-bottom: 5px;
-    margin-top: -8px;
+  }
+  .detail :global(.icon) {
+    margin-bottom: 0;
   }
 </style>
