diff --git a/package-lock.json b/package-lock.json
index d2f9450e5..6c7762d42 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
                 "web-vitals": "^3.4.0"
             },
             "devDependencies": {
+                "@melt-ui/pp": "^0.1.4",
                 "@melt-ui/svelte": "^0.61.2",
                 "@playwright/test": "^1.37.1",
                 "@sveltejs/adapter-static": "^2.0.3",
@@ -55,6 +56,7 @@
                 "svelte-check": "^3.5.1",
                 "svelte-jester": "^2.3.2",
                 "svelte-preprocess": "^5.0.4",
+                "svelte-sequential-preprocessor": "^2.0.1",
                 "tslib": "^2.6.2",
                 "typescript": "^5.2.2",
                 "vite": "^4.4.9",
@@ -1845,6 +1847,22 @@
                 "@jridgewell/sourcemap-codec": "^1.4.14"
             }
         },
+        "node_modules/@melt-ui/pp": {
+            "version": "0.1.4",
+            "resolved": "https://registry.npmjs.org/@melt-ui/pp/-/pp-0.1.4.tgz",
+            "integrity": "sha512-zR+Kl3CZJPJBHW8V7YcdQCMI/dVcnW9Ct3yGbVaIywYVStVRS7F9uEDOea3xLLT2WTGodQePzPlUn53yKFu87g==",
+            "dev": true,
+            "dependencies": {
+                "estree-walker": "^3.0.3"
+            },
+            "engines": {
+                "pnpm": ">=8.6.3"
+            },
+            "peerDependencies": {
+                "@melt-ui/svelte": ">= 0.29.0",
+                "svelte": "^3.55.0 || ^4.0.0 || ^5.0.0-next.1"
+            }
+        },
         "node_modules/@melt-ui/svelte": {
             "version": "0.61.2",
             "resolved": "https://registry.npmjs.org/@melt-ui/svelte/-/svelte-0.61.2.tgz",
@@ -8525,6 +8543,19 @@
                 "node": ">=12"
             }
         },
+        "node_modules/svelte-sequential-preprocessor": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/svelte-sequential-preprocessor/-/svelte-sequential-preprocessor-2.0.1.tgz",
+            "integrity": "sha512-N5JqlBni6BzElxmuFrOPxOJnjsxh1cFDACLEVKs8OHBcx8ZNRO1p5SxuQex1m3qbLzAC8G99EHeWcxGkjyKjLQ==",
+            "dev": true,
+            "dependencies": {
+                "svelte": "^4.0.1",
+                "tslib": "~2.6.0"
+            },
+            "engines": {
+                "node": ">=16"
+            }
+        },
         "node_modules/svelte/node_modules/aria-query": {
             "version": "5.3.0",
             "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
diff --git a/package.json b/package.json
index 3305a9d74..b5767a173 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
         "web-vitals": "^3.4.0"
     },
     "devDependencies": {
+        "@melt-ui/pp": "^0.1.4",
         "@melt-ui/svelte": "^0.61.2",
         "@playwright/test": "^1.37.1",
         "@sveltejs/adapter-static": "^2.0.3",
@@ -67,6 +68,7 @@
         "svelte-check": "^3.5.1",
         "svelte-jester": "^2.3.2",
         "svelte-preprocess": "^5.0.4",
+        "svelte-sequential-preprocessor": "^2.0.1",
         "tslib": "^2.6.2",
         "typescript": "^5.2.2",
         "vite": "^4.4.9",
diff --git a/src/lib/elements/forms/inputDateRange.svelte b/src/lib/elements/forms/inputDateRange.svelte
index ef2396530..1b19832e5 100644
--- a/src/lib/elements/forms/inputDateRange.svelte
+++ b/src/lib/elements/forms/inputDateRange.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { createDateRangePicker, type DateRange } from '@melt-ui/svelte';
+    import { createDateRangePicker, melt, type DateRange } from '@melt-ui/svelte';
     import { Label } from '.';
     const {
         elements: {
@@ -44,38 +44,38 @@
 <div class="u-flex u-gap-4">
     {#if showDates}
         {#each $segmentContents.start as seg}
-            <div {...$startSegment(seg.part)} use:startSegment>
+            <div use:melt={$startSegment(seg.part)}>
                 {seg.value}
             </div>
         {/each}
         <div aria-hidden="true">-</div>
         {#each $segmentContents.end as seg}
-            <div {...$endSegment(seg.part)} use:endSegment>
+            <div use:melt={$endSegment(seg.part)}>
                 {seg.value}
             </div>
         {/each}
     {/if}
     <div>
-        <button {...$trigger} use:trigger class="button is-secondary" type="button">
+        <button use:melt={$trigger} class="button is-secondary" type="button">
             <slot>Open calendar</slot>
         </button>
     </div>
 </div>
-<div {...$content} use:content class="card dt-container">
-    <div {...$calendar} use:calendar class="u-flex u-flex-vertical">
+<div use:melt={$content} class="card dt-container">
+    <div use:melt={$calendar} class="u-flex u-flex-vertical">
         <header class="u-flex u-main-space-between u-cross-center">
-            <button type="button" class="button is-only-icon is-text" use:prevButton>
+            <button type="button" class="button is-only-icon is-text" use:melt={$prevButton}>
                 <span class="icon-cheveron-left" aria-label="previous month"></span>
             </button>
-            <div {...$heading} use:heading>
+            <div {...$heading} use:melt={$heading}>
                 {$headingValue}
             </div>
-            <button type="button" class="button is-only-icon is-text" use:nextButton>
+            <button type="button" class="button is-only-icon is-text" use:melt={$nextButton}>
                 <span class="icon-cheveron-right" aria-label="next month"></span>
             </button>
         </header>
         {#each $months as month}
-            <table use:grid>
+            <table use:melt={$grid}>
                 <thead aria-hidden="true">
                     <tr>
                         {#each $daysOfWeek as day}
@@ -97,8 +97,7 @@
                                     aria-disabled={$isDateDisabled(date) ||
                                         $isDateUnavailable(date)}>
                                     <div
-                                        {...$cell(date, month.value)}
-                                        use:cell
+                                        use:melt={$cell(date, month.value)}
                                         class="u-flex u-main-center u-cross-center dt-button">
                                         {date.day}
                                     </div>
diff --git a/src/lib/helpers/sizeConvertion.ts b/src/lib/helpers/sizeConvertion.ts
index d268c5fa2..41b261069 100644
--- a/src/lib/helpers/sizeConvertion.ts
+++ b/src/lib/helpers/sizeConvertion.ts
@@ -14,9 +14,9 @@ export function calculateSize(bytes: number, decimals = 1) {
     return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
 }
 
-export function sizeToBytes(value: number, unit: Size) {
+export function sizeToBytes(value: number, unit: Size, base = 1024) {
     const index = sizes.indexOf(unit);
-    return value * Math.pow(1024, index);
+    return value * Math.pow(base, index);
 }
 
 export function bytesToSize(value: number, unit: Size) {
diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts
index 0f6716c92..298137e82 100644
--- a/src/lib/sdk/billing.ts
+++ b/src/lib/sdk/billing.ts
@@ -452,8 +452,8 @@ export class Billing {
     // TODO: add date range
     async listUsage(
         organizationId: string,
-        startDate: string = '',
-        endDate: string = ''
+        startDate: string = null,
+        endDate: string = null
     ): Promise<OrganizationUsage> {
         const path = `/organizations/${organizationId}/usage`;
         const params = {
diff --git a/src/routes/console/organization-[organization]/billing/+page.ts b/src/routes/console/organization-[organization]/billing/+page.ts
index f122b101a..dc327135d 100644
--- a/src/routes/console/organization-[organization]/billing/+page.ts
+++ b/src/routes/console/organization-[organization]/billing/+page.ts
@@ -2,7 +2,7 @@ import { Dependencies } from '$lib/constants';
 import { sdk } from '$lib/stores/sdk';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async ({ params, parent, depends }) => {
+export const load: PageLoad = async ({ parent, depends }) => {
     await parent();
     depends(Dependencies.PAYMENT_METHODS);
     depends(Dependencies.ORGANIZATION);
@@ -12,7 +12,6 @@ export const load: PageLoad = async ({ params, parent, depends }) => {
 
     return {
         paymentMethods: await sdk.forConsole.billing.listPaymentMethods(),
-        addressList: await sdk.forConsole.billing.listAddresses(),
-        oraganizationUsage: await sdk.forConsole.billing.listUsage(params.organization)
+        addressList: await sdk.forConsole.billing.listAddresses()
     };
 };
diff --git a/src/routes/console/organization-[organization]/excesLimitModal.svelte b/src/routes/console/organization-[organization]/excesLimitModal.svelte
index d42f9fb56..90c06db66 100644
--- a/src/routes/console/organization-[organization]/excesLimitModal.svelte
+++ b/src/routes/console/organization-[organization]/excesLimitModal.svelte
@@ -20,7 +20,11 @@
     let excess: Record<string, number> = null;
 
     onMount(async () => {
-        usage = await sdk.forConsole.billing.listUsage($organization.$id);
+        usage = await sdk.forConsole.billing.listUsage(
+            $organization.$id,
+            $organization.billingCurrentInvoiceDate,
+            new Date().toISOString()
+        );
         members = await sdk.forConsole.teams.listMemberships($organization.$id);
         calculateExcess();
     });
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.ts b/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.ts
index a2ead3698..c1c532cf2 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.ts
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.ts
@@ -15,8 +15,13 @@ export const load: PageLoad = async ({ params, depends, url, route }) => {
     const limit = getLimit(url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
     let oraganizationUsage: OrganizationUsage = null;
-    if (isCloud && get(organization)) {
-        oraganizationUsage = await sdk.forConsole.billing.listUsage(get(organization)?.$id);
+    const org = get(organization);
+    if (isCloud && org) {
+        oraganizationUsage = await sdk.forConsole.billing.listUsage(
+            org.$id,
+            org.billingCurrentInvoiceDate,
+            new Date().toISOString()
+        );
     }
 
     return {
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte
index 286c4c17c..a5d416066 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { Submit } from '$lib/actions/analytics';
     import { Alert, CardGrid, Heading } from '$lib/components';
-    import { Button, Form, InputNumber, InputSelect } from '$lib/elements/forms';
-    import { humanFileSize } from '$lib/helpers/sizeConvertion';
+    import { Button, Form, FormItem, InputNumber, InputSelect } from '$lib/elements/forms';
+    import { humanFileSize, sizeToBytes } from '$lib/helpers/sizeConvertion';
     import { createByteUnitPair } from '$lib/helpers/unit';
     import { getServiceLimit, readOnly } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
@@ -27,7 +27,7 @@
         );
     }
 
-    const service = getServiceLimit('storage');
+    const service = getServiceLimit('fileSize');
 </script>
 
 <Form onSubmit={updateMaxSize}>
@@ -36,7 +36,7 @@
         <p class="text">Set the maximum file size allowed in the bucket.</p>
         <svelte:fragment slot="aside">
             {#if isCloud && $organization?.billingPlan === 'tier-0'}
-                {@const size = humanFileSize(service)}
+                {@const size = humanFileSize(sizeToBytes(service, 'MB', 1000))}
                 <Alert type="info">
                     <p class="text">
                         The Starter plan has a maximum upload file size limit of {size.value}{size.unit}.
@@ -51,8 +51,10 @@
                     </svelte:fragment>
                 </Alert>
             {/if}
-            <ul class="u-flex u-gap-12 u-width-full-line">
+            <FormItem isMultiple>
                 <InputNumber
+                    isMultiple
+                    fullWidth
                     id="size"
                     label="Size"
                     disabled={$readOnly.storage}
@@ -60,8 +62,14 @@
                     min={0}
                     max={isCloud ? service : Infinity}
                     bind:value={$value} />
-                <InputSelect id="bytes" label="Bytes" {options} bind:value={$unit} />
-            </ul>
+                <InputSelect
+                    id="bytes"
+                    label="Bytes"
+                    isMultiple
+                    fullWidth
+                    {options}
+                    bind:value={$unit} />
+            </FormItem>
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/svelte.config.js b/svelte.config.js
index ca8f1dd0b..a3e96612f 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,11 +1,13 @@
 import adapter from '@sveltejs/adapter-static';
 import preprocess from 'svelte-preprocess';
+import { preprocessMeltUI } from '@melt-ui/pp';
+import sequence from 'svelte-sequential-preprocessor';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
     // Consult https://github.com/sveltejs/svelte-preprocess
     // for more information about preprocessors
-    preprocess: preprocess(),
+    preprocess: sequence([preprocess(), preprocessMeltUI()]),
     compilerOptions: {
         accessors: process.env.VITEST
     },