diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts
index 994506e720..7113d7073d 100644
--- a/src/lib/sdk/billing.ts
+++ b/src/lib/sdk/billing.ts
@@ -298,6 +298,7 @@ export type OrganizationUsage = {
     databasesReadsTotal: number;
     databasesWritesTotal: number;
     imageTransformationsTotal: number;
+    screenshotsGeneratedTotal: number;
     deploymentsStorageTotal: number;
     executionsMBSecondsTotal: number;
     buildsMBSecondsTotal: number;
@@ -316,6 +317,7 @@ export type OrganizationUsage = {
         authPhoneTotal: number;
         authPhoneEstimate: number;
         imageTransformations: number;
+        screenshotsGenerated: number;
     }>;
     authPhoneTotal: number;
     authPhoneEstimate: number;
@@ -384,6 +386,7 @@ export type Plan = {
     bandwidth: number;
     storage: number;
     imageTransformations: number;
+    screenshotsGenerated: number;
     webhooks: number;
     users: number;
     teams: number;
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..7ba828a170 100644
--- a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
@@ -322,6 +322,54 @@
         </svelte:fragment>
     </CardGrid>
 
+    <CardGrid gap="none">
+        <svelte:fragment slot="title">Screenshots generated</svelte:fragment>
+        The total number of unique screenshots generated across all projects in your organization.
+
+        <svelte:fragment slot="aside">
+            {#if data.organizationUsage.screenshotsGeneratedTotal}
+                {@const current = data.organizationUsage.screenshotsGeneratedTotal}
+                <ProgressBarBig
+                    currentUnit="Screenshots generated"
+                    currentValue={formatNum(current)}
+                    progressValue={current}
+                    showBar={false} />
+                <BarChart
+                    options={{
+                        yAxis: {
+                            axisLabel: {
+                                formatter: formatNum
+                            }
+                        }
+                    }}
+                    series={[
+                        {
+                            name: 'Screenshots generated',
+                            data: [
+                                ...(data.organizationUsage.imageTransformations ?? []).map((e) => [
+                                    e.date,
+                                    e.value
+                                ])
+                            ]
+                        }
+                    ]} />
+                {#if projects?.length > 0}
+                    <ProjectBreakdown {projects} metric="screenshotsGenerated" {usageProjects} />
+                {/if}
+            {:else}
+                <Card isDashed>
+                    <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
+                        <span
+                            class="icon-chart-square-bar text-large"
+                            aria-hidden="true"
+                            style="font-size: 32px;"></span>
+                        <p class="u-bold">No data to show</p>
+                    </div>
+                </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 05fd3ff846..88d3194d07 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..15d1180cfe 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';
 
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..1089070aa3 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 unique 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">Transformations</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.