diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts
index 9f7f85c4da..b2d22568cf 100644
--- a/src/lib/sdk/billing.ts
+++ b/src/lib/sdk/billing.ts
@@ -1,6 +1,7 @@
 import type { Client, Query } from '@appwrite.io/console';
 import type { Organization } from '../stores/organization';
 import type { PaymentMethod } from '@stripe/stripe-js';
+import type { Tier } from '$lib/stores/billing';
 
 export type PaymentMethodData = {
     $id: string;
@@ -38,6 +39,7 @@ export type Invoice = {
     status: string;
     dueAt: string;
     clientSecret: string;
+    tier: Tier;
 };
 
 export type InvoiceList = {
@@ -153,12 +155,15 @@ export type Aggregation = {
      */
     resources: OrganizationUsage;
 };
-
+type UsageMetric = {
+    date: string;
+    value: number;
+};
 export type OrganizationUsage = {
-    bandwidth: { date: string; value: number }[];
+    bandwidth: Array<UsageMetric>;
     executions: number;
     storage: number;
-    users: { date: string; value: number }[];
+    users: Array<UsageMetric>;
 };
 
 export type AggregationList = {
diff --git a/src/lib/stores/billing.ts b/src/lib/stores/billing.ts
index eecc1b7483..1638598236 100644
--- a/src/lib/stores/billing.ts
+++ b/src/lib/stores/billing.ts
@@ -58,10 +58,12 @@ export type PlanServices =
     | 'usersAddon'
     | 'webhooks';
 
-export function getServiceLimit(serviceId: PlanServices): number {
+export function getServiceLimit(serviceId: PlanServices, tier: Tier = null): number {
     if (!isCloud) return 0;
     if (!serviceId) return 0;
-    const plan = get(plansInfo).plans.find((p) => p.$id === get(organization)?.billingPlan);
+    const plan = get(plansInfo).plans.find(
+        (p) => p.$id === (tier ?? get(organization)?.billingPlan)
+    );
     return plan[serviceId];
 }
 
diff --git a/src/routes/console/organization-[organization]/usage/[[period]]/+page.svelte b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte
similarity index 65%
rename from src/routes/console/organization-[organization]/usage/[[period]]/+page.svelte
rename to src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte
index fcde6545ef..2ceac055e3 100644
--- a/src/routes/console/organization-[organization]/usage/[[period]]/+page.svelte
+++ b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte
@@ -1,42 +1,37 @@
 <script lang="ts">
     import { Container } from '$lib/layout';
     import { CardGrid, Heading, ProgressBarBig } from '$lib/components';
-    import { getServiceLimit, showUsageRatesModal, tierToPlan } from '$lib/stores/billing.js';
-    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
-    import { wizard } from '$lib/stores/wizard.js';
+    import { getServiceLimit, showUsageRatesModal, tierToPlan } from '$lib/stores/billing';
+    import { wizard } from '$lib/stores/wizard';
     import { organization } from '$lib/stores/organization';
-    import { InputDateRange, InputSelect } from '$lib/elements/forms';
+    import { InputSelect } from '$lib/elements/forms';
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
-    import type { DateRange } from '@melt-ui/svelte';
-
-    const tier = tierToPlan($organization?.billingPlan)?.name;
+    import { toLocaleDate } from '$lib/helpers/date.js';
+    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
 
     export let data;
-    let period = 'current';
+
+    const tier = data?.currentInvoice?.tier ?? $organization?.billingPlan;
+    const plan = tierToPlan(tier).name;
+
+    let invoice = 'current';
 
     async function handlePeriodChange() {
-        if (
-            period === 'current' &&
-            !$page.url.pathname.includes('usage/current') &&
-            $page.url.pathname !== `/console/organization-${$organization.$id}/usage`
-        ) {
-            await goto(`/console/organization-${$organization.$id}/usage/current`);
-        }
-        if (period === 'previous' && !$page.url.pathname.includes('usage/previous')) {
-            await goto(`/console/organization-${$organization.$id}/usage/previous`);
-        }
-        if (period === 'custom' && !$page.url.pathname.includes('usage/custom')) {
-            console.log('test');
-            // await goto(`/console/organization-${$organization.$id}/usage/custom`);
+        const target = invoice
+            ? `/console/organization-${$organization.$id}/usage/${invoice}`
+            : `/console/organization-${$organization.$id}/usage`;
+        if ($page.url.pathname !== target) {
+            await goto(target);
         }
     }
 
-    let test: DateRange;
+    const cycles = data.invoices.invoices.map((invoice) => ({
+        label: toLocaleDate(invoice.from),
+        value: invoice.$id
+    }));
 </script>
 
-<InputDateRange id="date" label="test" bind:data={test}></InputDateRange>
-
 <Container>
     <Heading tag="h2" size="5">Usage</Heading>
     <div class="u-flex u-main-space-between common-section u-cross-center">
@@ -50,7 +45,7 @@
             </p>
         {:else}
             <p class="text">
-                If you exceed the limits of the {tier} plan, services for your projects may be disrupted.
+                If you exceed the limits of the {plan} plan, services for your projects may be disrupted.
                 <button
                     on:click={() => wizard.start(ChangeOrganizationTierCloud)}
                     class="link"
@@ -59,8 +54,6 @@
             </p>
         {/if}
 
-        <!-- <InputDate id="date" label="test" showLabel={false}></InputDate> -->
-
         <div class="u-flex u-gap-8 u-cross-center">
             <p class="text">Usage period:</p>
 
@@ -69,21 +62,14 @@
                 id="period"
                 label="Usage period"
                 showLabel={false}
-                bind:value={period}
+                bind:value={invoice}
                 on:change={handlePeriodChange}
                 options={[
                     {
                         label: 'Current billing cycle',
                         value: 'current'
                     },
-                    {
-                        label: 'Previous billing cycle',
-                        value: 'previous'
-                    },
-                    {
-                        label: 'Choose dates',
-                        value: 'custom'
-                    }
+                    ...cycles
                 ]}></InputSelect>
         </div>
     </div>
@@ -98,8 +84,8 @@
         <svelte:fragment slot="aside">
             <ProgressBarBig
                 unit="GB"
-                max={getServiceLimit('bandwidth')}
-                used={data.organizationUsage.bandwidth[0] ?? 0} />
+                max={getServiceLimit('bandwidth', tier)}
+                used={data.organizationUsage.bandwidth[0]?.value ?? 0} />
         </svelte:fragment>
     </CardGrid>
 
@@ -111,8 +97,8 @@
         <svelte:fragment slot="aside">
             <ProgressBarBig
                 unit="Users"
-                max={getServiceLimit('users')}
-                used={data.organizationUsage.bandwidth[0] ?? 0} />
+                max={getServiceLimit('users', tier)}
+                used={data.organizationUsage.bandwidth[0]?.value ?? 0} />
         </svelte:fragment>
     </CardGrid>
 
@@ -126,7 +112,7 @@
         <svelte:fragment slot="aside">
             <ProgressBarBig
                 unit="Executions"
-                max={getServiceLimit('executions')}
+                max={getServiceLimit('executions', tier)}
                 used={data.organizationUsage.executions} />
         </svelte:fragment>
     </CardGrid>
@@ -141,7 +127,7 @@
         <svelte:fragment slot="aside">
             <ProgressBarBig
                 unit="GB"
-                max={getServiceLimit('storage')}
+                max={getServiceLimit('storage', tier)}
                 used={data.organizationUsage.storage} />
         </svelte:fragment>
     </CardGrid>
diff --git a/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.ts b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.ts
new file mode 100644
index 0000000000..c2f3584748
--- /dev/null
+++ b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.ts
@@ -0,0 +1,34 @@
+import { sdk } from '$lib/stores/sdk';
+import type { PageLoad } from './$types';
+import type { Organization } from '$lib/stores/organization';
+import type { Invoice } from '$lib/sdk/billing';
+
+export const load: PageLoad = async ({ params, parent }) => {
+    const { invoice } = params;
+    const parentData = await parent();
+    const org = parentData.organization as Organization;
+    const today = new Date().toISOString();
+    let startDate: string;
+    let endDate: string;
+    let currentInvoice: Invoice | null = null;
+
+    if (invoice) {
+        currentInvoice = await sdk.forConsole.billing.getInvoice(org.$id, invoice);
+        startDate = currentInvoice.from;
+        endDate = currentInvoice.to;
+    } else {
+        startDate = org.billingCurrentInvoiceDate;
+        endDate = today;
+    }
+
+    const [invoices, usage] = await Promise.all([
+        sdk.forConsole.billing.listInvoices(org.$id),
+        sdk.forConsole.billing.listUsage(params.organization, startDate, endDate)
+    ]);
+
+    return {
+        organizationUsage: usage,
+        invoices,
+        currentInvoice
+    };
+};
diff --git a/src/routes/console/organization-[organization]/usage/[[period]]/+page.ts b/src/routes/console/organization-[organization]/usage/[[period]]/+page.ts
deleted file mode 100644
index ad93286ae2..0000000000
--- a/src/routes/console/organization-[organization]/usage/[[period]]/+page.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { Organization } from '$lib/stores/organization';
-import { sdk } from '$lib/stores/sdk';
-import type { PageLoad } from './$types';
-
-export const load: PageLoad = async ({ params, parent, url }) => {
-    const { period } = params;
-    const parentData = await parent();
-    const org = parentData.organization as Organization;
-    const today = new Date().toISOString();
-    let startDate: string;
-    let endDate: string;
-
-    if (period === 'current') {
-        startDate = org.billingCurrentInvoiceDate;
-        endDate = today;
-    } else if (period === 'previous') {
-        const prevDate = new Date(org.billingCurrentInvoiceDate);
-        prevDate.setDate(prevDate.getDate() - 30);
-        startDate = prevDate.toISOString();
-        endDate = org.billingCurrentInvoiceDate;
-    } else if (period === 'custom') {
-        startDate = url.searchParams.get('start') ?? org.billingCurrentInvoiceDate;
-        endDate = url.searchParams.get('end') ?? today;
-    }
-    const usage = await sdk.forConsole.billing.listUsage(
-        params.organization,
-        startDate ?? org.billingCurrentInvoiceDate,
-        endDate ?? today
-    );
-    console.log(usage);
-    return {
-        organizationUsage: usage
-    };
-};