diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/usage/[[period]]/+page.svelte
index 5d6906d5b..7e7e161ec 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/usage/[[period]]/+page.svelte
@@ -9,16 +9,17 @@
     import { total as totalMetrics } from '$lib/layout/usage.svelte';
     import { IconChartSquareBar } from '@appwrite.io/pink-icons-svelte';
 
-    export let data;
-    $: total = data.executionsTotal;
-    $: count = data.executions;
-    $: gbHoursTotal = (data.buildsMbSecondsTotal + data.executionsMbSecondsTotal) / 1000 / 3600;
-    $: gbHoursCount = [...data.buildsMbSeconds, ...data.executionsMbSeconds]
+    let { data } = $props();
+    let total = $derived(data.executionsTotal);
+    let count = $derived(data.executions);
+    let gbHoursTotal = $derived((data.buildsMbSecondsTotal + data.executionsMbSecondsTotal) / 1000 / 3600);
+    let gbHoursCount = $derived([...data.buildsMbSeconds, ...data.executionsMbSeconds]
         ?.map((metric) => ({
             ...metric,
             value: metric.value / 1000 / 3600
         }))
-    $: bandwidth = [];
+        .filter(({ value }) => value));
+    let bandwidth = $state([]);
 </script>
 
 <Container>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/usage/[[period]]/+page.svelte
index 569d6614c..1fe2a3719 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/usage/[[period]]/+page.svelte
@@ -9,17 +9,17 @@
     import { IconChartSquareBar } from '@appwrite.io/pink-icons-svelte';
     import { Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
 
-    export let data;
-    $: total = data.executionsTotal;
-    $: count = data.executions;
-    $: gbHoursTotal = (data.buildsMbSecondsTotal + data.executionsMbSecondsTotal) / 1000 / 3600;
-    $: gbHoursCount = [...data.buildsMbSeconds, ...data.executionsMbSeconds]
+    let { data } = $props();
+    let total = $derived(data.executionsTotal);
+    let count = $derived(data.executions);
+    let gbHoursTotal = $derived((data.buildsMbSecondsTotal + data.executionsMbSecondsTotal) / 1000 / 3600);
+    let gbHoursCount = $derived([...data.buildsMbSeconds, ...data.executionsMbSeconds]
         ?.map((metric) => ({
             ...metric,
             value: metric.value / 1000 / 3600
         }))
-        .filter(({ value }) => value);
-    $: bandwidth = [];
+        .filter(({ value }) => value));
+    let bandwidth = $state([]);
 </script>
 
 <Container>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/usage/[[period]]/+page.svelte
index a7eedb2bd..b998faa3c 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/usage/[[period]]/+page.svelte
@@ -9,17 +9,17 @@
     import Card from '$lib/components/card.svelte';
     import { Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
 
-    export let data;
-    $: total = data.executionsTotal;
-    $: count = data.executions;
-    $: gbHoursTotal = (data.buildsMbSecondsTotal + data.executionsMbSecondsTotal) / 1000 / 3600;
-    $: gbHoursCount = [...data.buildsMbSeconds, ...data.executionsMbSeconds]
+    let { data } = $props();
+    let total = $derived(data.executionsTotal);
+    let count = $derived(data.executions);
+    let gbHoursTotal = $derived((data.buildsMbSecondsTotal + data.executionsMbSecondsTotal) / 1000 / 3600);
+    let gbHoursCount = $derived([...data.buildsMbSeconds, ...data.executionsMbSeconds]
         ?.map((metric) => ({
             ...metric,
             value: metric.value / 1000 / 3600
         }))
-        .filter(({ value }) => value);
-    $: bandwidth = [...data.inbound, ...data.outbound];
+        .filter(({ value }) => value));
+    let bandwidth = $derived([...data.inbound, ...data.outbound]);
 </script>
 
 <Container>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/usage/[[period]]/+page.svelte
index 4e4699e5f..b39224e71 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/usage/[[period]]/+page.svelte
@@ -9,17 +9,17 @@
     import { IconChartSquareBar } from '@appwrite.io/pink-icons-svelte';
     import { Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
 
-    export let data;
-    $: total = data.executionsTotal;
-    $: count = data.executions;
-    $: gbHoursTotal = (data.buildsMbSecondsTotal + data.executionsMbSecondsTotal) / 1000 / 3600;
-    $: gbHoursCount = [...data.buildsMbSeconds, ...data.executionsMbSeconds]
+    let { data } = $props();
+    let total = $derived(data.executionsTotal);
+    let count = $derived(data.executions);
+    let gbHoursTotal = $derived((data.buildsMbSecondsTotal + data.executionsMbSecondsTotal) / 1000 / 3600);
+    let gbHoursCount = $derived([...data.buildsMbSeconds, ...data.executionsMbSeconds]
         ?.map((metric) => ({
             ...metric,
             value: metric.value / 1000 / 3600
         }))
-        .filter(({ value }) => value);
-    $: bandwidth = [...data.inbound, ...data.outbound];
+        .filter(({ value }) => value));
+    let bandwidth = $derived([...data.inbound, ...data.outbound]);
 </script>
 
 <Container>