diff --git a/package.json b/package.json
index 4990783bb..b65c4f9a8 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
         "e2e": "playwright test tests/e2e"
     },
     "dependencies": {
-        "@appwrite.io/console": "npm:shimon-appwrite-console@0.1.2",
+        "@appwrite.io/console": "npm:shimon-appwrite-console@0.3.3",
         "@appwrite.io/pink": "0.1.0-next.9",
         "@appwrite.io/pink-icons": "^0.1.0-next.9",
         "@popperjs/core": "^2.11.8",
diff --git a/src/lib/layout/usage.svelte b/src/lib/layout/usage.svelte
index 3e2b5c872..ea571a4c6 100644
--- a/src/lib/layout/usage.svelte
+++ b/src/lib/layout/usage.svelte
@@ -24,6 +24,7 @@
     };
 
     export let title: string;
+    export let total: number;
     export let count: Models.Metric[];
     export let countMetadata: MetricMetadata;
     export let path: string = null;
@@ -48,7 +49,7 @@
     </div>
     <Card>
         {#if count}
-            <Heading tag="h6" size="6">{total(count)}</Heading>
+            <Heading tag="h6" size="6">{total}</Heading>
             <p>{countMetadata.title}</p>
             <div class="u-margin-block-start-16" />
             <div class="chart-container">
diff --git a/src/routes/console/project-[project]/auth/usage/[[period]]/+page.svelte b/src/routes/console/project-[project]/auth/usage/[[period]]/+page.svelte
index 33ef1bac0..9c44940be 100644
--- a/src/routes/console/project-[project]/auth/usage/[[period]]/+page.svelte
+++ b/src/routes/console/project-[project]/auth/usage/[[period]]/+page.svelte
@@ -4,13 +4,14 @@
     import type { PageData } from './$types';
 
     export let data: PageData;
-
-    $: count = data.usersTotal;
+    $: total = data.usersTotal;
+    $: count = data.users;
 </script>
 
 <Usage
     title="Users"
     path={`/console/project-${$page.params.project}/auth/usage`}
+    {total}
     {count}
     countMetadata={{
         legend: 'Users',
diff --git a/src/routes/console/project-[project]/auth/usage/[[period]]/+page.ts b/src/routes/console/project-[project]/auth/usage/[[period]]/+page.ts
index b4a930690..4ca3eea55 100644
--- a/src/routes/console/project-[project]/auth/usage/[[period]]/+page.ts
+++ b/src/routes/console/project-[project]/auth/usage/[[period]]/+page.ts
@@ -8,7 +8,8 @@ export const load: PageLoad = async ({ params }) => {
     try {
         const response = await sdk.forProject.users.getUsage(period ?? '30d');
         return {
-            usersTotal: response.usersTotal as unknown as Models.Metric[]
+            usersTotal: response.usersTotal,
+            users: response.users as unknown as Models.Metric[]
         };
     } catch (e) {
         throw error(e.code, e.message);
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.svelte
index fd7382f3e..6634fbb3b 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.svelte
@@ -4,13 +4,14 @@
     import type { PageData } from './$types';
 
     export let data: PageData;
-
-    $: count = data.documentsTotal;
+    $: total = data.documentsTotal;
+    $: count = data.documents;
 </script>
 
 <Usage
     title="Databases"
     path={`/console/project-${$page.params.project}/databases/database-${$page.params.database}/collection-${$page.params.collection}/usage`}
+    {total}
     {count}
     countMetadata={{
         legend: 'Documents',
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.ts
index 924385aef..e673bd032 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.ts
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.ts
@@ -10,6 +10,7 @@ export const load: PageLoad = async ({ params }) => {
     );
 
     return {
-        documentsTotal: response.documentsTotal as unknown as Models.Metric[]
+        documentsTotal: response.documentsTotal,
+        documents: response.documents as unknown as Models.Metric[]
     };
 };
diff --git a/src/routes/console/project-[project]/databases/database-[database]/usage/[[period]]/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/usage/[[period]]/+page.svelte
index b376c62b1..f5486b738 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/usage/[[period]]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/usage/[[period]]/+page.svelte
@@ -5,12 +5,14 @@
 
     export let data: PageData;
 
-    $: count = data.collectionsTotal;
+    $: total = data.collectionsTotal;
+    $: count = data.collections;
 </script>
 
 <Usage
     title="Databases"
     path={`/console/project-${$page.params.project}/databases/database-${$page.params.database}/usage`}
+    {total}
     {count}
     countMetadata={{
         legend: 'Collections',
diff --git a/src/routes/console/project-[project]/databases/database-[database]/usage/[[period]]/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/usage/[[period]]/+page.ts
index bffa5e4db..f4f097595 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/usage/[[period]]/+page.ts
+++ b/src/routes/console/project-[project]/databases/database-[database]/usage/[[period]]/+page.ts
@@ -9,6 +9,7 @@ export const load: PageLoad = async ({ params }) => {
     );
 
     return {
-        collectionsTotal: response.collectionsTotal as unknown as Models.Metric[]
+        collectionsTotal: response.collectionsTotal,
+        collections: response.collections as unknown as Models.Metric[]
     };
 };
diff --git a/src/routes/console/project-[project]/databases/usage/[[period]]/+page.svelte b/src/routes/console/project-[project]/databases/usage/[[period]]/+page.svelte
index dce3a94d4..55b97f174 100644
--- a/src/routes/console/project-[project]/databases/usage/[[period]]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/usage/[[period]]/+page.svelte
@@ -4,13 +4,14 @@
     import type { PageData } from './$types';
 
     export let data: PageData;
-
-    $: count = data.databasesTotal;
+    $: total = data.databasesTotal;
+    $: count = data.databases;
 </script>
 
 <Usage
     title="Databases"
     path={`/console/project-${$page.params.project}/databases/usage`}
+    {total}
     {count}
     countMetadata={{
         legend: 'Databases',
diff --git a/src/routes/console/project-[project]/databases/usage/[[period]]/+page.ts b/src/routes/console/project-[project]/databases/usage/[[period]]/+page.ts
index 44c63496b..ef3a3c835 100644
--- a/src/routes/console/project-[project]/databases/usage/[[period]]/+page.ts
+++ b/src/routes/console/project-[project]/databases/usage/[[period]]/+page.ts
@@ -8,7 +8,8 @@ export const load: PageLoad = async ({ params }) => {
     try {
         const response = await sdk.forProject.databases.getUsage(period ?? '30d');
         return {
-            databasesTotal: response.databasesTotal as unknown as Models.Metric[]
+            databasesTotal: response.databasesTotal as unknown as Models.Metric[],
+            databases: response.databases
         };
     } catch (e) {
         throw error(e.code, e.message);
diff --git a/src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.svelte
index ed5901ed8..c71a6d1ad 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
     import { Container } from '$lib/layout';
     import { Card, SecondaryTabsItem, SecondaryTabs, Heading } from '$lib/components';
-    import { total } from '$lib/layout/usage.svelte';
     import { BarChart } from '$lib/charts';
     import { page } from '$app/stores';
     import type { PageData } from './$types';
 
     export let data: PageData;
-    $: count = data.executionsTotal;
+    $: total = data.executionsTotal;
+    $: count = data.executions;
 </script>
 
 <Container>
@@ -33,7 +33,7 @@
     </div>
     {#if count}
         <Card>
-            <Heading tag="h6" size="6">{total(count)}</Heading>
+            <Heading tag="h6" size="6">{total}</Heading>
             <p>Executions</p>
             <div class="u-margin-block-start-16" />
             <BarChart
diff --git a/src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.ts b/src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.ts
index eabe89bed..712701a24 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.ts
+++ b/src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.ts
@@ -11,7 +11,8 @@ export const load: PageLoad = async ({ params }) => {
         );
 
         return {
-            executionsTotal: response.executionsTotal as unknown as Models.Metric[]
+            executionsTotal: response.executionsTotal,
+            executions: response.executions as unknown as Models.Metric[]
         };
     } catch (e) {
         throw error(e.code, e.message);
diff --git a/src/routes/console/project-[project]/overview/+layout.svelte b/src/routes/console/project-[project]/overview/+layout.svelte
index 344e9443d..d6eef4ddd 100644
--- a/src/routes/console/project-[project]/overview/+layout.svelte
+++ b/src/routes/console/project-[project]/overview/+layout.svelte
@@ -82,7 +82,7 @@
             <Onboard {projectId} />
         {:else}
             {#if $usage}
-                {@const storage = humanFileSize(totalMetrics($usage.filesStorage) ?? 0)}
+                {@const storage = humanFileSize($usage.filesStorageTotal ?? 0)}
                 <section class="common-section">
                     <div class="grid-dashboard-1s-2m-6l">
                         <div class="card is-2-columns-medium-screen is-3-columns-large-screen">
@@ -106,16 +106,14 @@
 
                                 <div class="grid-item-1-end-start">
                                     <div class="heading-level-4">
-                                        {formatNum(totalMetrics($usage.documentsTotal) ?? 0)}
+                                        {formatNum($usage.documentsTotal ?? 0)}
                                     </div>
                                     <div>Documents</div>
                                 </div>
 
                                 <div class="grid-item-1-end-end">
                                     <div class="text">
-                                        Databases: {formatNum(
-                                            totalMetrics($usage.databasesTotal) ?? 0
-                                        )}
+                                        Databases: {formatNum($usage.databasesTotal ?? 0)}
                                     </div>
                                 </div>
                             </div>
@@ -143,7 +141,7 @@
 
                                 <div class="grid-item-1-end-end">
                                     <div class="text">
-                                        Buckets: {formatNum(totalMetrics($usage.bucketsTotal) ?? 0)}
+                                        Buckets: {formatNum($usage.bucketsTotal ?? 0)}
                                     </div>
                                 </div>
                             </div>
@@ -163,7 +161,7 @@
 
                                 <div class="grid-item-1-end-start">
                                     <div class="heading-level-4">
-                                        {formatNum(totalMetrics($usage.usersTotal) ?? 0)}
+                                        {formatNum($usage.usersTotal ?? 0)}
                                     </div>
                                     <div>Users</div>
                                 </div>
@@ -184,7 +182,7 @@
 
                                 <div class="grid-item-1-end-start">
                                     <div class="heading-level-4">
-                                        {formatNum(totalMetrics($usage.executionsTotal) ?? 0)}
+                                        {formatNum($usage.executionsTotal ?? 0)}
                                     </div>
                                     <div>Executions</div>
                                 </div>
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.svelte
index 9b18a11df..4002161a4 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.svelte
@@ -4,13 +4,14 @@
     import type { PageData } from './$types';
 
     export let data: PageData;
-
-    $: count = data.filesTotal;
+    $: total = data.filesTotal;
+    $: count = data.files;
 </script>
 
 <Usage
     title="Files"
     path={`/console/project-${$page.params.project}/storage/bucket-${$page.params.bucket}/usage`}
+    {total}
     {count}
     countMetadata={{
         legend: 'Files',
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.ts b/src/routes/console/project-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.ts
index d86143717..7cb48dbf1 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.ts
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.ts
@@ -9,6 +9,7 @@ export const load: PageLoad = async ({ params }) => {
     );
 
     return {
-        filesTotal: response.filesTotal as unknown as Models.Metric[]
+        filesTotal: response.filesTotal,
+        files: response.files as unknown as Models.Metric[]
     };
 };
diff --git a/src/routes/console/project-[project]/storage/usage/[[period]]/+page.svelte b/src/routes/console/project-[project]/storage/usage/[[period]]/+page.svelte
index 8b5d09759..bc084c930 100644
--- a/src/routes/console/project-[project]/storage/usage/[[period]]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/usage/[[period]]/+page.svelte
@@ -4,12 +4,14 @@
     import type { PageData } from './$types';
 
     export let data: PageData;
-    $: count = data.bucketsTotal;
+    $: total = data.bucketsTotal;
+    $: count = data.buckets;
 </script>
 
 <Usage
     title="Buckets"
     path={`/console/project-${$page.params.project}/storage/usage`}
+    {total}
     {count}
     countMetadata={{
         legend: 'Buckets',
diff --git a/src/routes/console/project-[project]/storage/usage/[[period]]/+page.ts b/src/routes/console/project-[project]/storage/usage/[[period]]/+page.ts
index 6f3a947e3..2f541f332 100644
--- a/src/routes/console/project-[project]/storage/usage/[[period]]/+page.ts
+++ b/src/routes/console/project-[project]/storage/usage/[[period]]/+page.ts
@@ -8,7 +8,8 @@ export const load: PageLoad = async ({ params }) => {
         const response = await sdk.forProject.storage.getUsage(params.period ?? '30d');
 
         return {
-            bucketsTotal: response.bucketsTotal as unknown as Models.Metric[]
+            bucketsTotal: response.bucketsTotal,
+            buckets: response.buckets as unknown as Models.Metric[]
         };
     } catch (e) {
         throw error(e.code, e.message);