diff --git a/package.json b/package.json
index 5579ef2721..4230556716 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
         "deep-equal": "^2.2.3",
         "echarts": "^5.6.0",
         "ignore": "^6.0.2",
+        "install": "^0.13.0",
         "nanoid": "^5.1.5",
         "nanotar": "^0.1.1",
         "plausible-tracker": "^0.3.9",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 479be4ae9f..a1cfb8a9c7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,6 +59,9 @@ importers:
       ignore:
         specifier: ^6.0.2
         version: 6.0.2
+      install:
+        specifier: ^0.13.0
+        version: 0.13.0
       nanoid:
         specifier: ^5.1.5
         version: 5.1.5
@@ -2408,6 +2411,10 @@ packages:
     resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
     engines: {node: '>=8'}
 
+  install@0.13.0:
+    resolution: {integrity: sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA==}
+    engines: {node: '>= 0.10'}
+
   internal-slot@1.1.0:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
@@ -6090,6 +6097,8 @@ snapshots:
 
   indent-string@4.0.0: {}
 
+  install@0.13.0: {}
+
   internal-slot@1.1.0:
     dependencies:
       es-errors: 1.3.0
diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts
index f728ca5e84..348d1ebb61 100644
--- a/src/lib/sdk/billing.ts
+++ b/src/lib/sdk/billing.ts
@@ -292,12 +292,14 @@ export type OrganizationUsage = {
     databasesReads: Array<Models.Metric>;
     databasesWrites: Array<Models.Metric>;
     imageTransformations: Array<Models.Metric>;
+    screenshotsGenerated: Array<Models.Metric>;
     executionsTotal: number;
     filesStorageTotal: number;
     buildsStorageTotal: number;
     databasesReadsTotal: number;
     databasesWritesTotal: number;
     imageTransformationsTotal: number;
+    screenshotsGeneratedTotal: number;
     deploymentsStorageTotal: number;
     executionsMBSecondsTotal: number;
     buildsMBSecondsTotal: number;
@@ -316,6 +318,7 @@ export type OrganizationUsage = {
         authPhoneTotal: number;
         authPhoneEstimate: number;
         imageTransformations: number;
+        screenshotsGenerated: number;
     }>;
     authPhoneTotal: number;
     authPhoneEstimate: number;
@@ -384,6 +387,7 @@ export type Plan = {
     bandwidth: number;
     storage: number;
     imageTransformations: number;
+    screenshotsGenerated: number;
     webhooks: number;
     users: number;
     teams: number;
@@ -411,6 +415,7 @@ export type Plan = {
         databasesWrites: AdditionalResource;
         GBHours: AdditionalResource;
         imageTransformations: AdditionalResource;
+        screenshotsGenerated: AdditionalResource;
     };
     addons: {
         seats: PlanAddon;
diff --git a/src/lib/sdk/usage.ts b/src/lib/sdk/usage.ts
index b446bfa50f..268f785234 100644
--- a/src/lib/sdk/usage.ts
+++ b/src/lib/sdk/usage.ts
@@ -332,4 +332,14 @@ export type UsageProject = {
      * Aggregated statistics of total number of image transformations.
      */
     imageTransformationsTotal: number;
+
+    /**
+     * Array of screenshots generated per period.
+     */
+    screenshotsGenerated: Metric[];
+
+    /**
+     * Aggregated statistics of total number of screenshots generated.
+     */
+    screenshotsGeneratedTotal: number;
 };
diff --git a/src/lib/stores/billing.ts b/src/lib/stores/billing.ts
index 695ef874c7..2aee7e0d02 100644
--- a/src/lib/stores/billing.ts
+++ b/src/lib/stores/billing.ts
@@ -150,7 +150,8 @@ export type PlanServices =
     | 'webhooks'
     | 'sites'
     | 'authPhone'
-    | 'imageTransformations';
+    | 'imageTransformations'
+    | 'screenshotsGenerated';
 
 export function getServiceLimit(serviceId: PlanServices, tier: Tier = null, plan?: Plan): number {
     if (!isCloud) return 0;
diff --git a/src/routes/(console)/organization-[organization]/billing/planSummary.svelte b/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
index fb3df8a608..baec58e475 100644
--- a/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
@@ -347,6 +347,12 @@
                         getResource(resources, 'imageTransformations'),
                         currentPlan?.imageTransformations
                     ),
+                    createResourceRow(
+                        'screenshots-generated',
+                        'Screenshots generated',
+                        getResource(resources, 'screenshotsGenerated'),
+                        currentPlan?.screenshotsGenerated
+                    ),
                     createResourceRow(
                         'gb-hours',
                         'GB-hours',
diff --git a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
index a9422df60b..cd8399e4fe 100644
--- a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
@@ -322,6 +322,53 @@
         </svelte:fragment>
     </CardGrid>
 
+    <CardGrid gap="none">
+        <svelte:fragment slot="title">Screenshots generated</svelte:fragment>
+        The total number of screenshots generated across all projects in your organization.
+        <svelte:fragment slot="aside">
+            {#if data.organizationUsage.screenshotsGeneratedTotal}
+                {@const current = data.organizationUsage.screenshotsGeneratedTotal}
+                {@const max = getServiceLimit('screenshotsGenerated', tier, plan)}
+                <ProgressBarBig
+                    currentUnit="Screenshots"
+                    currentValue={formatNum(current)}
+                    maxValue={max ? `/ ${formatNum(max)}` : undefined}
+                    progressValue={current}
+                    progressMax={max}
+                    showBar={false} />
+                <BarChart
+                    options={{
+                        yAxis: {
+                            axisLabel: {
+                                formatter: formatNum
+                            }
+                        }
+                    }}
+                    series={[
+                        {
+                            name: 'Screenshots generated',
+                            data: [
+                                ...(data.organizationUsage.screenshotsGenerated ?? []).map((e) => [
+                                    e.date,
+                                    e.value
+                                ])
+                            ]
+                        }
+                    ]} />
+                {#if projects?.length > 0}
+                    <ProjectBreakdown {projects} metric="screenshotsGenerated" {usageProjects} />
+                {/if}
+            {:else}
+                <Card isDashed>
+                    <Layout.Stack gap="xs" alignItems="center" justifyContent="center">
+                        <Icon icon={IconChartSquareBar} size="l" />
+                        <Typography.Text variant="m-600">No data to show</Typography.Text>
+                    </Layout.Stack>
+                </Card>
+            {/if}
+        </svelte:fragment>
+    </CardGrid>
+
     <CardGrid gap="none">
         <svelte:fragment slot="title">Executions</svelte:fragment>
         Calculated for all functions that are executed in all projects in your organization.
diff --git a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.ts b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.ts
index 8fd36fadfc..8143bcdc96 100644
--- a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.ts
+++ b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.ts
@@ -34,7 +34,9 @@ export const load: PageLoad = async ({ params, parent }) => {
                 databasesReadsTotal: null,
                 databasesWritesTotal: null,
                 imageTransformations: null,
-                imageTransformationsTotal: null
+                imageTransformationsTotal: null,
+                screenshotsGenerated: null,
+                screenshotsGeneratedTotal: null
             }
         };
     }
diff --git a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte
index 98a0282821..1772e6a4f5 100644
--- a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte
+++ b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte
@@ -16,7 +16,8 @@
         | 'authPhoneTotal'
         | 'databasesReads'
         | 'databasesWrites'
-        | 'imageTransformations';
+        | 'imageTransformations'
+        | 'screenshotsGenerated';
 
     type Estimate = 'authPhoneEstimate';
 
@@ -89,6 +90,7 @@
 
         switch (metric) {
             case 'imageTransformations':
+            case 'screenshotsGenerated':
             case 'authPhoneTotal':
                 return formatNumberWithCommas(value);
             case 'executions':
diff --git a/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte
index 76d4d5e1e2..0bd816cc52 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte
@@ -30,6 +30,8 @@
         data.usage.buildsStorageTotal;
     $: imageTransformations = data.usage.imageTransformations;
     $: imageTransformationsTotal = data.usage.imageTransformationsTotal;
+    $: screenshotsGenerated = data.usage.screenshotsGenerated;
+    $: screenshotsGeneratedTotal = data.usage.screenshotsGeneratedTotal;
     $: dbReads = data.usage.databasesReads;
     $: dbWrites = data.usage.databasesWrites;
 
@@ -241,6 +243,44 @@
             {/if}
         </svelte:fragment>
     </CardGrid>
+    <CardGrid>
+        <svelte:fragment slot="title">Screenshots generated</svelte:fragment>
+        Total number of screenshots generated in your project.
+        <svelte:fragment slot="aside">
+            {#if screenshotsGenerated}
+                {@const current = formatNum(screenshotsGeneratedTotal)}
+                <div class="u-flex u-flex-vertical">
+                    <div class="u-flex u-main-space-between">
+                        <p>
+                            <span class="heading-level-4">{current}</span>
+                            <span class="body-text-1 u-bold">Screenshots</span>
+                        </p>
+                    </div>
+                </div>
+                <BarChart
+                    options={{
+                        yAxis: {
+                            axisLabel: {
+                                formatter: formatNum
+                            }
+                        }
+                    }}
+                    series={[
+                        {
+                            name: 'Screenshots generated',
+                            data: [...screenshotsGenerated.map((e) => [e.date, e.value])]
+                        }
+                    ]} />
+            {:else}
+                <Card isDashed>
+                    <Layout.Stack gap="xs" alignItems="center" justifyContent="center">
+                        <Icon icon={IconChartSquareBar} size="l" />
+                        <Typography.Text variant="m-600">No data to show</Typography.Text>
+                    </Layout.Stack>
+                </Card>
+            {/if}
+        </svelte:fragment>
+    </CardGrid>
     <CardGrid>
         <svelte:fragment slot="title">Executions</svelte:fragment>
         Calculated for all functions that are executed in this project.