diff --git a/package-lock.json b/package-lock.json
index 49a318689..e4c198cce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,7 @@
         "": {
             "name": "@appwrite/console",
             "dependencies": {
-                "@appwrite.io/console": "1.0.0",
+                "@appwrite.io/console": "^1.2.0",
                 "@appwrite.io/pink": "0.25.0",
                 "@appwrite.io/pink-icons": "0.25.0",
                 "@popperjs/core": "^2.11.8",
@@ -147,9 +147,10 @@
             "integrity": "sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg=="
         },
         "node_modules/@appwrite.io/console": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/@appwrite.io/console/-/console-1.0.0.tgz",
-            "integrity": "sha512-gELdhiddTTwaz2wYBdTnkG8/r48dTwJfpFD+hjbfyxIMDUGtP/wDfkdcb4+2Cu9726YxkihyvGKxyQxtlJAMDA=="
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/@appwrite.io/console/-/console-1.2.0.tgz",
+            "integrity": "sha512-VglATKgjuhr9jYihz500VbqghOY/695aDwhXtx3beLMzvjjFK+eN+5BOgcNMTj01COl3kBu4wrvbXpDmVemStA==",
+            "license": "BSD-3-Clause"
         },
         "node_modules/@appwrite.io/pink": {
             "version": "0.25.0",
diff --git a/package.json b/package.json
index 76e3f287e..d32370db7 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
         "e2e:ui": "playwright test tests/e2e --ui"
     },
     "dependencies": {
-        "@appwrite.io/console": "1.0.1",
+        "@appwrite.io/console": "^1.2.0",
         "@appwrite.io/pink": "0.25.0",
         "@appwrite.io/pink-icons": "0.25.0",
         "@popperjs/core": "^2.11.8",
diff --git a/src/lib/components/progressBarBig.svelte b/src/lib/components/progressBarBig.svelte
index f3d19c36d..9c9612e33 100644
--- a/src/lib/components/progressBarBig.svelte
+++ b/src/lib/components/progressBarBig.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { ProgressBar } from '$lib/components/progressbar';
+    import { ProgressBar, type ProgressbarData } from '$lib/components/progressbar';
 
     export let currentValue: string;
     export let currentUnit: string;
@@ -8,8 +8,7 @@
     export let progressValue: number;
     export let progressMax: number;
     export let showBar = true;
-    export let minimum = 0;
-    export let maximum = 100;
+    export let progressBarData: Array<ProgressbarData> = [];
 
     $: progress = Math.round((progressValue / progressMax) * 100);
 </script>
@@ -28,12 +27,7 @@
             {maxUnit}
         </p>
     </div>
-    {#if showBar}
-        <ProgressBar maxSize={100} data={[{size: 10, color: '#85DBD8', tooltip: {title: "First Appwrite project", label: "107GB", linkTitle: "View usage", linkPath: "/something"}},{size: 20, color: '#68A3FE59', tooltip: {title: "Second Appwrite project", label: "107GB", linkTitle: "View usage", linkPath: "/something"}},{size: 10, color: '#7C67FE59', tooltip: {title: "Third Appwrite project", label: "107GB", linkTitle: "View usage", linkPath: "/something"}}]}/>
-<!--        <div-->
-<!--            class="progress-bar-container u-margin-block-start-16"-->
-<!--            class:is-warning={progress >= 75 && progress < 100}-->
-<!--            class:is-danger={progress >= 100}-->
-<!--            style:&#45;&#45;graph-size={Math.max(Math.min(progress, maximum), minimum) + '%'} />-->
+    {#if showBar && progressBarData.length > 0}
+        <ProgressBar maxSize={progressMax} data={progressBarData} />
     {/if}
 </section>
diff --git a/src/lib/components/progressbar/ProgressBar.svelte b/src/lib/components/progressbar/ProgressBar.svelte
index e3810d0ac..2d6ea3ede 100644
--- a/src/lib/components/progressbar/ProgressBar.svelte
+++ b/src/lib/components/progressbar/ProgressBar.svelte
@@ -11,30 +11,39 @@
     /**
      * The remaining value of the progressbar
      */
-    let remainder = $$props.data.reduce((sum:number, item:ProgressbarData) => sum - item.size, maxSize);
-
+    let remainder = $$props.data.reduce(
+        (sum: number, item: ProgressbarData) => sum - item.size,
+        maxSize
+    );
 </script>
+
 <section class="progressbar__container">
     {#each $$props.data as item}
-        <div class="progressbar__content" style="background-color:{item.color}; width: {(item.size/maxSize)*100}%;">
+        <div
+            class="progressbar__content"
+            style="background-color:{item.color}; width: {(item.size / maxSize) * 100}%;">
             {#if item.tooltip}
-                <div class="progressbar__content-tooltip">
+                <div
+                    class="progressbar__content-tooltip"
+                    class:progressbar__content-tooltip--has-link={item.tooltip.linkPath &&
+                        item.tooltip.linkTitle}>
                     <div>
-                    <span class="progressbar__content-tooltip-title">{item.tooltip.title}</span>
-                    <span class="progressbar__content-tooltip-label">{item.tooltip.label}</span>
+                        <span class="progressbar__content-tooltip-title">{item.tooltip.title}</span>
+                        <span class="progressbar__content-tooltip-label">{item.tooltip.label}</span>
                     </div>
-                        <a href="{item.tooltip.linkPath}">{item.tooltip.linkTitle}</a>
+                    {#if item.tooltip.linkPath && item.tooltip.linkTitle}
+                        <a href={item.tooltip.linkPath}>{item.tooltip.linkTitle}</a>
+                    {/if}
                 </div>
             {/if}
         </div>
     {/each}
     {#if remainder > 0}
-        <div class="progressbar__content" style="width: {(remainder/maxSize)*100}%;"/>
+        <div class="progressbar__content" style="width: {(remainder / maxSize) * 100}%;" />
     {/if}
 </section>
 
-
 <style lang="scss">
     @use './progressbar';
     @include progressbar.base;
-</style>
\ No newline at end of file
+</style>
diff --git a/src/lib/components/progressbar/_progressbar.scss b/src/lib/components/progressbar/_progressbar.scss
index 9bb4cb070..ab55b5ca4 100644
--- a/src/lib/components/progressbar/_progressbar.scss
+++ b/src/lib/components/progressbar/_progressbar.scss
@@ -1,107 +1,109 @@
 @mixin base {
-
-  :root {
-    --progressbar-border-radius: 0.25rem;
-    --progressbar-tooltip-background-color: #FFFFFF;
-    --progressbar-tooltip-border-color: #EDEDF0;
-    --progressbar-tooltip-label-color: #818186;
-    --progressbar-tooltip-link-color: #6C6C71;
-  }
-
-  :global(.theme-dark) {
-    --progressbar-background-color: var(--neutral-800,#2D2D31);
-  }
-  :global(.theme-light) {
-    --progressbar-background-color: var(--neutral-40, #F4F4F7);
-  }
-
-  .progressbar {
-
-    &__container {
-      height: 0.5rem;
-      background-color: var(--progressbar-background-color);
-      border-radius: var(--progressbar-border-radius);
-      display: flex;
-      flex-direction: row;
-      gap: 2px;
+    :root {
+        --progressbar-border-radius: 0.25rem;
+        --progressbar-tooltip-background-color: #ffffff;
+        --progressbar-tooltip-border-color: #ededf0;
+        --progressbar-tooltip-label-color: #818186;
+        --progressbar-tooltip-link-color: #6c6c71;
     }
 
-    &__content {
-      height: 100%;
-      display: flex;
-      justify-content: center;
-
-      &::before {
-        content: "";
-        height: 2.5rem;
-        margin-top: -1.25rem;
-        width: 100%;
-      }
-
-      &:first-child {
-        border-top-left-radius: var(--progressbar-border-radius);
-        border-bottom-left-radius: var(--progressbar-border-radius);
-      }
-      &:last-child {
-        border-top-right-radius: var(--progressbar-border-radius);
-        border-bottom-right-radius: var(--progressbar-border-radius);
-      }
-
-      &-tooltip {
-        display: none;
-        position: absolute;
-        background-color: var(--progressbar-tooltip-background-color);
-        padding: 0.75rem;
-        margin-top: -5.25rem;
-        border: 1px solid var(--progressbar-tooltip-border-color);
-        border-radius: 0.5rem;
-        flex-direction: column;
-        gap: 0.25rem;
-
-       &::before, &::after {
-         top: 100%;
-         left: 50%;
-         border: solid transparent;
-         content: "";
-         height: 0;
-         width: 0;
-         position: absolute;
-         pointer-events: none;
-       }
-        &::after {
-          border-top-color: var(--progressbar-tooltip-background-color);
-          border-width: 10px;
-          margin-left: -10px;
-        }
-        &::before {
-          border-top-color: var(--progressbar-tooltip-border-color);;
-          border-width: 11px;
-          margin-left: -11px;
-        }
-        &:hover {
-          display: flex;
-        }
-
-        &-title {
-          font-weight: 600;
-          margin-right: 0.5rem;
-        }
-        &-label {
-          color: var(--progressbar-tooltip-label-color);
-        }
-
-        a{
-          color: var(--progressbar-tooltip-link-color);
-          text-decoration: underline;
-        }
-      }
-
-      &:hover {
-        .progressbar__content-tooltip {
-          display: flex;
-        }
-      }
+    :global(.theme-dark) {
+        --progressbar-background-color: var(--neutral-800, #2d2d31);
+    }
+    :global(.theme-light) {
+        --progressbar-background-color: var(--neutral-40, #f4f4f7);
     }
 
-  }
-}
\ No newline at end of file
+    .progressbar {
+        &__container {
+            height: 0.5rem;
+            background-color: var(--progressbar-background-color);
+            border-radius: var(--progressbar-border-radius);
+            display: flex;
+            flex-direction: row;
+            gap: 2px;
+        }
+
+        &__content {
+            height: 100%;
+            display: flex;
+            justify-content: center;
+
+            &::before {
+                content: '';
+                height: 2.5rem;
+                margin-top: -1.25rem;
+                width: 100%;
+            }
+
+            &:first-child {
+                border-top-left-radius: var(--progressbar-border-radius);
+                border-bottom-left-radius: var(--progressbar-border-radius);
+            }
+            &:last-child {
+                border-top-right-radius: var(--progressbar-border-radius);
+                border-bottom-right-radius: var(--progressbar-border-radius);
+            }
+
+            &-tooltip {
+                display: none;
+                position: absolute;
+                background-color: var(--progressbar-tooltip-background-color);
+                padding: 0.75rem;
+                margin-top: -3.75rem;
+                border: 1px solid var(--progressbar-tooltip-border-color);
+                border-radius: 0.5rem;
+                flex-direction: column;
+                gap: 0.25rem;
+
+                &--has-link {
+                    margin-top: -5.25rem;
+                }
+
+                &::before,
+                &::after {
+                    top: 100%;
+                    left: 50%;
+                    border: solid transparent;
+                    content: '';
+                    height: 0;
+                    width: 0;
+                    position: absolute;
+                    pointer-events: none;
+                }
+                &::after {
+                    border-top-color: var(--progressbar-tooltip-background-color);
+                    border-width: 10px;
+                    margin-left: -10px;
+                }
+                &::before {
+                    border-top-color: var(--progressbar-tooltip-border-color);
+                    border-width: 11px;
+                    margin-left: -11px;
+                }
+                &:hover {
+                    display: flex;
+                }
+
+                &-title {
+                    font-weight: 600;
+                    margin-right: 0.5rem;
+                }
+                &-label {
+                    color: var(--progressbar-tooltip-label-color);
+                }
+
+                a {
+                    color: var(--progressbar-tooltip-link-color);
+                    text-decoration: underline;
+                }
+            }
+
+            &:hover {
+                .progressbar__content-tooltip {
+                    display: flex;
+                }
+            }
+        }
+    }
+}
diff --git a/src/lib/components/progressbar/index.ts b/src/lib/components/progressbar/index.ts
index 676495a7a..a7ec1ba01 100644
--- a/src/lib/components/progressbar/index.ts
+++ b/src/lib/components/progressbar/index.ts
@@ -4,8 +4,8 @@ export type ProgressbarData = {
     tooltip?: {
         title: string;
         label: string;
-        linkTitle: string;
-        linkPath: string;
+        linkTitle?: string;
+        linkPath?: string;
     };
 };
 
diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts
index f0fd8ec08..ba68502fc 100644
--- a/src/lib/sdk/billing.ts
+++ b/src/lib/sdk/billing.ts
@@ -178,6 +178,9 @@ export type OrganizationUsage = {
     bandwidth: Array<Models.Metric>;
     executions: Array<Models.Metric>;
     executionsTotal: number;
+    filesStorageTotal: number;
+    buildsStorageTotal: number;
+    deploymentsStorageTotal: number;
     storageTotal: number;
     users: Array<Models.Metric>;
     usersTotal: number;
diff --git a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
index 587fb6fae..769987f32 100644
--- a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Container } from '$lib/layout';
-    import { Card, CardGrid, Heading, ProgressBarBig, ProgressBar } from '$lib/components';
+    import { Card, CardGrid, Heading, ProgressBarBig } from '$lib/components';
     import {
         getServiceLimit,
         showUsageRatesModal,
@@ -282,6 +282,32 @@
                 {@const current = data.organizationUsage.storageTotal}
                 {@const currentHumanized = humanFileSize(current)}
                 {@const max = getServiceLimit('storage', tier)}
+                {@const progressBarStorageDate = [
+                    {
+                        size: bytesToSize(data.organizationUsage.filesStorageTotal, 'GB'),
+                        color: '#85DBD8',
+                        tooltip: {
+                            title: 'File storage total',
+                            label: `${Math.round(bytesToSize(data.organizationUsage.filesStorageTotal, 'GB') * 100) / 100}GB`
+                        }
+                    },
+                    {
+                        size: bytesToSize(data.organizationUsage.deploymentsStorageTotal, 'GB'),
+                        color: '#7C67FE',
+                        tooltip: {
+                            title: 'Deployments storage',
+                            label: `${Math.round(bytesToSize(data.organizationUsage.deploymentsStorageTotal, 'GB') * 100) / 100}GB`
+                        }
+                    },
+                    {
+                        size: bytesToSize(data.organizationUsage.buildsStorageTotal, 'GB'),
+                        color: '#FE9567',
+                        tooltip: {
+                            title: 'Builds storage',
+                            label: `${Math.round(bytesToSize(data.organizationUsage.buildsStorageTotal, 'GB') * 100) / 100}GB`
+                        }
+                    }
+                ]}
                 <ProgressBarBig
                     currentUnit={currentHumanized.unit}
                     currentValue={currentHumanized.value}
@@ -289,7 +315,7 @@
                     maxValue={max.toString()}
                     progressValue={bytesToSize(current, 'GB')}
                     progressMax={max}
-                    minimum={1} />
+                    progressBarData={progressBarStorageDate} />
                 {#if project?.length > 0}
                     <ProjectBreakdown projects={project} metric="storage" {data} />
                 {/if}