diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/header.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/header.svelte
index 664ad1314..e3e1291ab 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/header.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/header.svelte
@@ -19,11 +19,6 @@
             title: 'Deployments',
             event: 'deployments'
         },
-        // {
-        //     href: `${path}/analytics`,
-        //     title: 'Analytics',
-        //     event: 'analytics'
-        // },
         {
             href: `${path}/logs`,
             title: 'Logs',
@@ -34,6 +29,11 @@
             title: 'Domains',
             event: 'domains'
         },
+        {
+            href: `${path}/usage`,
+            title: 'Usage',
+            event: 'usage'
+        },
         {
             href: `${path}/settings`,
             title: 'Settings',
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateBuildSettings.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateBuildSettings.svelte
index 39d4f4aa9..7eea9fc19 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateBuildSettings.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateBuildSettings.svelte
@@ -79,7 +79,8 @@
         buildCommand === site?.buildCommand &&
         outputDirectory === site?.outputDirectory &&
         selectedFramework?.key === site?.framework &&
-        fallback === site?.fallbackFile
+        fallback === site?.fallbackFile &&
+        adapter === site?.adapter
     ) {
         isButtonDisabled = true;
     } else {
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/usage/[[period]]/+page.svelte
new file mode 100644
index 000000000..ace13c9dc
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/usage/[[period]]/+page.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { Usage } from '$lib/layout';
+
+    export let data;
+    $: total = data.deploymentsTotal;
+    $: count = data.deployments;
+
+    // $: totalBuilds = data.buildsTotal;
+    // $: countBuilds = data.builds;
+
+    $: console.log(data);
+</script>
+
+<Usage
+    title="Deployments"
+    path={`${base}/project-${$page.params.project}/sites/site-${$page.params.site}/usage`}
+    countMetadata={{
+        legend: 'Deployments',
+        title: 'Total deployments'
+    }}
+    {total}
+    {count} />
+
+<!-- <Usage
+    title="Builds"
+    path={`${base}/project-${$page.params.project}/sites/site-${$page.params.site}/usage`}
+    countMetadata={{
+        legend: 'Builds',
+        title: 'Total builds'
+    }}
+    total={totalBuilds}
+    count={countBuilds} /> -->
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/usage/[[period]]/+page.ts b/src/routes/(console)/project-[project]/sites/site-[site]/usage/[[period]]/+page.ts
new file mode 100644
index 000000000..c8b57fc02
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/usage/[[period]]/+page.ts
@@ -0,0 +1,16 @@
+import { isValueOfStringEnum } from '$lib/helpers/types';
+import { sdk } from '$lib/stores/sdk';
+import { SiteUsageRange } from '@appwrite.io/console';
+import type { PageLoad } from './$types';
+import { error } from '@sveltejs/kit';
+
+export const load: PageLoad = async ({ params }) => {
+    const period = isValueOfStringEnum(SiteUsageRange, params.period)
+        ? params.period
+        : SiteUsageRange.ThirtyDays;
+    try {
+        return sdk.forProject.sites.getUsage(params.site, period);
+    } catch (e) {
+        error(e.code, e.message);
+    }
+};
diff --git a/src/routes/(console)/project-[project]/sites/usage/+page.svelte b/src/routes/(console)/project-[project]/sites/usage/+page.svelte
deleted file mode 100644
index fbbc96e0d..000000000
--- a/src/routes/(console)/project-[project]/sites/usage/+page.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script lang="ts">
-    import { Container } from '$lib/layout';
-
-    export let data;
-
-    $: console.log(data.usage);
-</script>
-
-<Container>Coming soon</Container>
diff --git a/src/routes/(console)/project-[project]/sites/usage/+page.ts b/src/routes/(console)/project-[project]/sites/usage/+page.ts
deleted file mode 100644
index 349bf84de..000000000
--- a/src/routes/(console)/project-[project]/sites/usage/+page.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { sdk } from '$lib/stores/sdk';
-import { Dependencies } from '$lib/constants';
-
-export const load = async ({ depends }) => {
-    depends(Dependencies.SITES);
-
-    const usage = await sdk.forProject.sites.listUsage();
-
-    return {
-        usage
-    };
-};
diff --git a/src/routes/(console)/project-[project]/sites/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[project]/sites/usage/[[period]]/+page.svelte
new file mode 100644
index 000000000..203a915da
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/usage/[[period]]/+page.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { Usage } from '$lib/layout';
+
+    export let data;
+    $: total = data.deploymentsTotal;
+    $: count = data.deployments;
+
+    $: console.log(data);
+</script>
+
+<Usage
+    title="Sites"
+    path={`${base}/project-${$page.params.project}/sites/usage`}
+    countMetadata={{
+        legend: 'Sites',
+        title: 'Total sites'
+    }}
+    {total}
+    {count} />
diff --git a/src/routes/(console)/project-[project]/sites/usage/[[period]]/+page.ts b/src/routes/(console)/project-[project]/sites/usage/[[period]]/+page.ts
new file mode 100644
index 000000000..01f745f99
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/usage/[[period]]/+page.ts
@@ -0,0 +1,16 @@
+import { isValueOfStringEnum } from '$lib/helpers/types';
+import { sdk } from '$lib/stores/sdk';
+import { SiteUsageRange } from '@appwrite.io/console';
+import type { PageLoad } from './$types';
+import { error } from '@sveltejs/kit';
+
+export const load: PageLoad = async ({ params }) => {
+    const period = isValueOfStringEnum(SiteUsageRange, params.period)
+        ? params.period
+        : SiteUsageRange.ThirtyDays;
+    try {
+        return sdk.forProject.sites.listUsage(period);
+    } catch (e) {
+        error(e.code, e.message);
+    }
+};