diff --git a/.gitignore b/.gitignore
index acc78571f0..a71c6785a6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -155,4 +155,5 @@ dist
 .sentryclirc
 
 # IDE specifics
-.idea
\ No newline at end of file
+.idea
+
diff --git a/check_results.txt b/check_results.txt
new file mode 100644
index 0000000000..2f8cfc0d56
Binary files /dev/null and b/check_results.txt differ
diff --git a/package.json b/package.json
index 57e3e7a94a..20e74c58e0 100644
--- a/package.json
+++ b/package.json
@@ -90,5 +90,6 @@
     "overrides": {
         "vite": "npm:rolldown-vite@latest",
         "minimatch": "10.2.1"
-    }
+    },
+    "packageManager": "pnpm@10.30.3+sha512.c961d1e0a2d8e354ecaa5166b822516668b7f44cb5bd95122d590dd81922f606f5473b6d23ec4a5be05e7fcd18e8488d47d978bbe981872f1145d06e9a740017"
 }
diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
index 023e2fbeee..6cdc1760e4 100644
--- a/src/lib/actions/analytics.ts
+++ b/src/lib/actions/analytics.ts
@@ -156,6 +156,7 @@ export enum Click {
     DatabaseDatabaseDelete = 'click_database_delete',
     DatabaseImportCsv = 'click_database_import_csv',
     DatabaseExportCsv = 'click_database_export_csv',
+    DatabaseExportJson = 'click_database_export_json',
     DomainCreateClick = 'click_domain_create',
     DomainDeleteClick = 'click_domain_delete',
     DomainRetryDomainVerificationClick = 'click_domain_retry_domain_verification',
@@ -283,6 +284,7 @@ export enum Submit {
     DatabaseUpdateName = 'submit_database_update_name',
     DatabaseImportCsv = 'submit_database_import_csv',
     DatabaseExportCsv = 'submit_database_export_csv',
+    DatabaseExportJson = 'submit_database_export_json',
     DatabaseBackupDelete = 'submit_database_backup_delete',
     DatabaseBackupPolicyCreate = 'submit_database_backup_policy_create',
 
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 09b4d248c3..8a17ad97b7 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -14,6 +14,7 @@ export { default as CopyInput } from './copyInput.svelte';
 export { default as UploadBox } from './uploadBox.svelte';
 export { default as BackupRestoreBox } from './backupRestoreBox.svelte';
 export { default as CsvExportBox } from './csvExportBox.svelte';
+export { default as JsonExportBox } from './jsonExportBox.svelte';
 export { default as List } from './list.svelte';
 export { default as ListItem } from './listItem.svelte';
 export { default as Empty } from './empty.svelte';
diff --git a/src/lib/components/jsonExportBox.svelte b/src/lib/components/jsonExportBox.svelte
new file mode 100644
index 0000000000..c80d6e2e26
--- /dev/null
+++ b/src/lib/components/jsonExportBox.svelte
@@ -0,0 +1,178 @@
+<script lang="ts">
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { jsonExportStore, type JsonExportJob } from '$lib/stores/jsonExport';
+    import { addNotification } from '$lib/stores/notifications';
+
+    let isOpen = $state(true);
+
+    // Convert store Map to a plain array for safe iteration in Svelte 5
+    let jobEntries = $state<[string, JsonExportJob][]>([]);
+    let jobCount = $state(0);
+
+    jsonExportStore.subscribe((map) => {
+        jobEntries = [...map.entries()];
+        jobCount = map.size;
+    });
+
+    let showBox = $derived(jobCount > 0);
+
+    function graphSize(status: string, fetched: number, total: number): number {
+        switch (status) {
+            case 'pending':
+                return 5;
+            case 'processing':
+                return total > 0 ? Math.max(10, Math.round((fetched / total) * 100)) : 30;
+            case 'completed':
+            case 'failed':
+                return 100;
+            default:
+                return 10;
+        }
+    }
+
+    function text(job: JsonExportJob): string {
+        switch (job.status) {
+            case 'completed':
+                return 'completed';
+            case 'failed':
+                return 'failed';
+            case 'processing':
+                return job.totalRows > 0
+                    ? `(${job.fetchedRows}/${job.totalRows} rows)`
+                    : '';
+            default:
+                return '';
+        }
+    }
+
+    // Track completed exports to fire notifications
+    let notifiedJobs = new Set<string>();
+
+    $effect(() => {
+        // Prune stale jobs
+        for (const key of notifiedJobs) {
+            if (!jobEntries.some(([k]) => k === key)) {
+                notifiedJobs.delete(key);
+            }
+        }
+
+        for (const [key, job] of jobEntries) {
+            if (notifiedJobs.has(key)) continue;
+
+            if (job.status === 'completed') {
+                notifiedJobs.add(key);
+                addNotification({
+                    type: 'success',
+                    message: `Exported ${job.fetchedRows} rows as JSON`,
+                    timeout: 10000
+                });
+            } else if (job.status === 'failed') {
+                notifiedJobs.add(key);
+                addNotification({
+                    type: 'error',
+                    message: job.error || 'JSON export failed',
+                    timeout: 10000
+                });
+            }
+        }
+    });
+</script>
+
+{#if showBox}
+    <Layout.Stack direction="column" gap="l" alignItems="flex-end">
+        <section class="upload-box">
+            <header class="upload-box-header">
+                <h4 class="upload-box-title">
+                    <Typography.Text variant="m-500">
+                        Exporting rows ({jobCount})
+                    </Typography.Text>
+                </h4>
+                <button
+                    class="upload-box-button"
+                    class:is-open={isOpen}
+                    aria-label="toggle export box"
+                    onclick={() => (isOpen = !isOpen)}>
+                    <span class="icon-cheveron-up" aria-hidden="true"></span>
+                </button>
+                <button
+                    class="upload-box-button"
+                    aria-label="close export box"
+                    onclick={() => jsonExportStore.clear()}>
+                    <span class="icon-x" aria-hidden="true"></span>
+                </button>
+            </header>
+
+            <div class="upload-box-content-list">
+                {#each jobEntries as [key, job] (key)}
+                    <div class="upload-box-content" class:is-open={isOpen}>
+                        <ul class="upload-box-list">
+                            <li class="upload-box-item">
+                                <section class="progress-bar u-width-full-line">
+                                    <div
+                                        class="progress-bar-top-line u-flex u-gap-8 u-main-space-between">
+                                        <Typography.Text>
+                                            Exporting <Typography.Text variant="m-600">{job.tableName}</Typography.Text> {text(job)}
+                                        </Typography.Text>
+                                    </div>
+                                    <div
+                                        class="progress-bar-container"
+                                        class:is-danger={job.status === 'failed'}
+                                        style="--graph-size:{graphSize(
+                                            job.status,
+                                            job.fetchedRows,
+                                            job.totalRows
+                                        )}%">
+                                    </div>
+                                </section>
+                            </li>
+                        </ul>
+                    </div>
+                {/each}
+            </div>
+        </section>
+    </Layout.Stack>
+{/if}
+
+<style lang="scss">
+    .upload-box {
+        display: flex;
+        max-height: 320px;
+        flex-direction: column;
+    }
+
+    .upload-box-header {
+        flex-shrink: 0;
+    }
+
+    .upload-box-title {
+        font-size: 11px;
+    }
+
+    .upload-box-content-list {
+        overflow-y: auto;
+    }
+
+    .upload-box-content {
+        width: 304px;
+    }
+
+    .upload-box-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .progress-bar-container {
+        height: 4px;
+
+        &::before {
+            height: 4px;
+            background-color: var(--bgcolor-neutral-invert);
+        }
+
+        &.is-danger::before {
+            height: 4px;
+            background-color: var(--bgcolor-error);
+        }
+    }
+</style>
diff --git a/src/lib/stores/jsonExport.ts b/src/lib/stores/jsonExport.ts
new file mode 100644
index 0000000000..c15cd1151e
--- /dev/null
+++ b/src/lib/stores/jsonExport.ts
@@ -0,0 +1,215 @@
+import { writable } from 'svelte/store';
+import { sdk } from '$lib/stores/sdk';
+import { Query } from '@appwrite.io/console';
+import type { Models } from '@appwrite.io/console';
+
+export type JsonExportStatus = 'idle' | 'pending' | 'processing' | 'completed' | 'failed';
+
+export type JsonExportJob = {
+    status: JsonExportStatus;
+    tableName: string;
+    filename: string;
+    fetchedRows: number;
+    totalRows: number;
+    error?: string;
+
+    // Config
+    region: string;
+    project: string;
+    databaseId: string;
+    tableId: string;
+    columns: string[];
+    queries: string[];
+    wildcardQueries: string[];
+    prettyPrint: boolean;
+};
+
+export type JsonExportConfig = {
+    region: string;
+    project: string;
+    databaseId: string;
+    tableId: string;
+    tableName: string;
+    filename: string;
+    columns: string[];
+    queries: string[];
+    wildcardQueries: string[];
+    prettyPrint: boolean;
+};
+
+function createJsonExportStore() {
+    const { subscribe, set, update } = writable<Map<string, JsonExportJob>>(new Map());
+
+    async function startExport(config: JsonExportConfig) {
+        const jobId = `${config.databaseId}:${config.tableId}:${Date.now()}`;
+
+        const job: JsonExportJob = {
+            status: 'pending',
+            tableName: config.tableName,
+            filename: config.filename,
+            fetchedRows: 0,
+            totalRows: 0,
+            region: config.region,
+            project: config.project,
+            databaseId: config.databaseId,
+            tableId: config.tableId,
+            columns: config.columns,
+            queries: config.queries,
+            wildcardQueries: config.wildcardQueries,
+            prettyPrint: config.prettyPrint
+        };
+
+        update((jobs) => {
+            jobs.set(jobId, job);
+            return new Map(jobs);
+        });
+
+        // Run the export in the background
+        runExport(jobId, config);
+    }
+
+    async function runExport(jobId: string, config: JsonExportConfig) {
+        const PAGE_SIZE = 100;
+        const MAX_ROWS = 5000;
+        let offset = 0;
+        let allRows: Models.Row[] = [];
+
+        try {
+            // Update to processing
+            update((jobs) => {
+                const job = jobs.get(jobId);
+                if (job) job.status = 'processing';
+                return new Map(jobs);
+            });
+
+            // First fetch to get total
+            const firstBatch = await sdk
+                .forProject(config.region, config.project)
+                .tablesDB.listRows({
+                    databaseId: config.databaseId,
+                    tableId: config.tableId,
+                    queries: [
+                        Query.limit(PAGE_SIZE),
+                        Query.offset(0),
+                        ...config.queries,
+                        ...config.wildcardQueries
+                    ]
+                });
+
+            const total = firstBatch.total;
+
+            if (total > MAX_ROWS) {
+                throw new Error(
+                    `Table size (${total} rows) exceeds client-side export limit of ${MAX_ROWS}. Please apply filters to reduce the result set.`
+                );
+            }
+
+            allRows = [...firstBatch.rows];
+            offset = PAGE_SIZE;
+
+            update((jobs) => {
+                const job = jobs.get(jobId);
+                if (job) {
+                    job.totalRows = total;
+                    job.fetchedRows = allRows.length;
+                }
+                return new Map(jobs);
+            });
+
+            // Paginate remaining
+            while (allRows.length < total) {
+                const batch = await sdk
+                    .forProject(config.region, config.project)
+                    .tablesDB.listRows({
+                        databaseId: config.databaseId,
+                        tableId: config.tableId,
+                        queries: [
+                            Query.limit(PAGE_SIZE),
+                            Query.offset(offset),
+                            ...config.queries,
+                            ...config.wildcardQueries
+                        ]
+                    });
+
+                // Guard against empty batches to prevent infinite loop
+                if (batch.rows.length === 0) {
+                    break;
+                }
+
+                allRows = [...allRows, ...batch.rows];
+                offset += batch.rows.length;
+
+                update((jobs) => {
+                    const job = jobs.get(jobId);
+                    if (job) {
+                        job.fetchedRows = allRows.length;
+                    }
+                    return new Map(jobs);
+                });
+            }
+
+            // Filter to selected columns
+            const filteredRows = allRows.map((row) => {
+                const filtered: Record<string, unknown> = {};
+                for (const col of config.columns) {
+                    if (col in row) {
+                        filtered[col] = row[col];
+                    }
+                }
+                return filtered;
+            });
+
+            // Create and trigger download
+            const jsonString = config.prettyPrint
+                ? JSON.stringify(filteredRows, null, 2)
+                : JSON.stringify(filteredRows);
+            const blob = new Blob([jsonString], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = config.filename;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+
+            update((jobs) => {
+                const job = jobs.get(jobId);
+                if (job) {
+                    job.status = 'completed';
+                    job.fetchedRows = filteredRows.length;
+                }
+                return new Map(jobs);
+            });
+        } catch (error) {
+            update((jobs) => {
+                const job = jobs.get(jobId);
+                if (job) {
+                    job.status = 'failed';
+                    job.error = error instanceof Error ? error.message : 'Export failed';
+                }
+                return new Map(jobs);
+            });
+        }
+    }
+
+    function clear() {
+        set(new Map());
+    }
+
+    function removeJob(jobId: string) {
+        update((jobs) => {
+            jobs.delete(jobId);
+            return new Map(jobs);
+        });
+    }
+
+    return {
+        subscribe,
+        startExport,
+        clear,
+        removeJob
+    };
+}
+
+export const jsonExportStore = createJsonExportStore();
diff --git a/src/routes/(console)/project-[region]-[project]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/+layout.svelte
index ffe92bdca2..818811061b 100644
--- a/src/routes/(console)/project-[region]-[project]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { BackupRestoreBox, MigrationBox, UploadBox, CsvExportBox } from '$lib/components';
+    import { BackupRestoreBox, MigrationBox, UploadBox, CsvExportBox, JsonExportBox } from '$lib/components';
     import { realtime } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { project, stats } from './store';
@@ -129,6 +129,7 @@
     <BackupRestoreBox />
     <CsvImportBox />
     <CsvExportBox />
+    <JsonExportBox />
 </div>
 
 <style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte
index 6467241f2a..ceb9a3e397 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte
@@ -8,7 +8,16 @@
     import { Container } from '$lib/layout';
     import { preferences } from '$lib/stores/preferences';
     import { canWriteTables, canWriteRows } from '$lib/stores/roles';
-    import { Icon, Layout, Divider, Tooltip, Typography, Link } from '@appwrite.io/pink-svelte';
+    import {
+        Icon,
+        Layout,
+        Divider,
+        Tooltip,
+        Typography,
+        Link,
+        Popover,
+        ActionMenu
+    } from '@appwrite.io/pink-svelte';
     import type { PageData } from './$types';
     import {
         tableColumns,
@@ -152,6 +161,20 @@
         return queryParam ? `${url}?query=${encodeURIComponent(queryParam)}` : url;
     }
 
+    function getTableJsonExportUrl() {
+        const queryParam = page.url.searchParams.get('query');
+        const url = resolve(
+            '/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/export-json',
+            {
+                region: page.params.region,
+                project: page.params.project,
+                database: page.params.database,
+                table: page.params.table
+            }
+        );
+        return queryParam ? `${url}?query=${encodeURIComponent(queryParam)}` : url;
+    }
+
     onDestroy(() => ($showCreateColumnSheet.show = false));
 </script>
 
@@ -221,7 +244,7 @@
                                 <svelte:fragment slot="tooltip">Import CSV</svelte:fragment>
                             </Tooltip>
 
-                            <Tooltip placement="top">
+                            <Popover let:toggle padding="none" placement="bottom-end">
                                 <Button
                                     icon
                                     size="s"
@@ -232,15 +255,30 @@
                                         hasValidColumns &&
                                         data.rows?.total
                                     ) || disableButton}
-                                    on:click={() => {
-                                        trackEvent(Click.DatabaseExportCsv);
-                                        goto(getTableExportUrl());
-                                    }}>
+                                    on:click={toggle}>
                                     <Icon icon={IconDownload} size="s" />
                                 </Button>
-
-                                <svelte:fragment slot="tooltip">Export CSV</svelte:fragment>
-                            </Tooltip>
+                                <svelte:fragment slot="tooltip" let:hide>
+                                    <ActionMenu.Root>
+                                        <ActionMenu.Item.Button
+                                            on:click={(e) => {
+                                                hide(e);
+                                                trackEvent(Click.DatabaseExportCsv);
+                                                goto(getTableExportUrl());
+                                            }}>
+                                            Export as CSV
+                                        </ActionMenu.Item.Button>
+                                        <ActionMenu.Item.Button
+                                            on:click={(e) => {
+                                                hide(e);
+                                                trackEvent(Click.DatabaseExportJson);
+                                                goto(getTableJsonExportUrl());
+                                            }}>
+                                            Export as JSON
+                                        </ActionMenu.Item.Button>
+                                    </ActionMenu.Root>
+                                </svelte:fragment>
+                            </Popover>
 
                             <Tooltip disabled={isRefreshing || !data.rows?.total} placement="top">
                                 <Button
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/export-json/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/export-json/+page.svelte
new file mode 100644
index 0000000000..f031cd04a2
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/export-json/+page.svelte
@@ -0,0 +1,236 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { resolve } from '$app/paths';
+    import { page } from '$app/state';
+    import { goto } from '$app/navigation';
+    import { Wizard } from '$lib/layout';
+    import { Fieldset, Layout, Divider, Icon, Tooltip } from '@appwrite.io/pink-svelte';
+    import { Button, InputCheckbox, Form } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import { table } from '../store';
+    import { queries, type TagValue } from '$lib/components/filters/store';
+    import { TagList } from '$lib/components/filters';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { toLocalDateTimeISO } from '$lib/helpers/date';
+    import { writable } from 'svelte/store';
+    import { isSmallViewport } from '$lib/stores/viewport';
+    import { buildWildcardColumnsQuery } from '../rows/store';
+    import { jsonExportStore } from '$lib/stores/jsonExport';
+    import type { Entity } from '$database/(entity)';
+
+    let showExitModal = $state(false);
+    let formComponent: Form;
+    let isSubmitting = $state(writable(false));
+
+    let localQueries = $state<Map<TagValue, string>>(new Map());
+    const localTags = $derived(Array.from(localQueries.keys()));
+
+    const timestamp = toLocalDateTimeISO(Date.now())
+        .replace(/[:.]/g, '-')
+        .split('T')
+        .join('_')
+        .slice(0, -4);
+    const filename = `${$table.name}_${timestamp}.json`;
+
+    let selectedColumns = $state<Record<string, boolean>>({});
+    let showAllColumns = $state(false);
+
+    let prettyPrint = $state(true);
+    let exportWithFilters = $state(false);
+
+    const columnLimit = $derived($isSmallViewport ? 6 : 9);
+    const visibleColumns = $derived(
+        showAllColumns ? $table.columns : $table.columns.slice(0, columnLimit)
+    );
+    const hasMoreColumns = $derived($table.columns.length > columnLimit);
+    const selectedColumnCount = $derived(Object.values(selectedColumns).filter(Boolean).length);
+
+    const tableUrl = $derived.by(() => {
+        const url = resolve(
+            '/(console)/project-[region]-[project]/databases/database-[database]/table-[table]',
+            {
+                region: page.params.region,
+                project: page.params.project,
+                database: page.params.database,
+                table: page.params.table
+            }
+        );
+        return page.url.search ? `${url}${page.url.search}` : url;
+    });
+
+    function removeLocalFilter(tag: TagValue) {
+        localQueries.delete(tag);
+        localQueries = new Map(localQueries);
+    }
+
+    function initializeColumns() {
+        selectedColumns = Object.fromEntries($table.columns.map((col) => [col.key, true]));
+    }
+
+    function selectAllColumns() {
+        selectedColumns = Object.fromEntries($table.columns.map((col) => [col.key, true]));
+    }
+
+    function deselectAllColumns() {
+        selectedColumns = Object.fromEntries($table.columns.map((col) => [col.key, false]));
+    }
+
+    async function handleExport() {
+        const selectedCols = Object.entries(selectedColumns)
+            .filter(([_, selected]) => selected)
+            .map(([key]) => key);
+
+        if (selectedCols.length === 0) {
+            addNotification({
+                type: 'error',
+                message: 'Please select at least one column to export'
+            });
+            return;
+        }
+
+        try {
+            const filterQueries = exportWithFilters ? [...localQueries.values()] : [];
+            const wildcardQueries = buildWildcardColumnsQuery($table as Entity);
+
+            trackEvent(Submit.DatabaseExportJson);
+
+            // Dispatch to the background store — progress box will handle the rest
+            jsonExportStore.startExport({
+                region: page.params.region,
+                project: page.params.project,
+                databaseId: page.params.database,
+                tableId: page.params.table,
+                tableName: $table.name,
+                filename,
+                columns: selectedCols,
+                queries: filterQueries,
+                wildcardQueries,
+                prettyPrint
+            });
+
+            addNotification({
+                type: 'success',
+                message: 'JSON export has started'
+            });
+
+            await goto(tableUrl);
+        } catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            addNotification({
+                type: 'error',
+                message
+            });
+
+            trackError(error, Submit.DatabaseExportJson);
+        }
+    }
+
+    onMount(() => {
+        initializeColumns();
+        localQueries = new Map($queries);
+    });
+</script>
+
+<Wizard title="Export JSON" columnSize="s" href={tableUrl} bind:showExitModal confirmExit column>
+    <Form bind:this={formComponent} bind:isSubmitting onSubmit={handleExport}>
+        <Layout.Stack gap="xxl">
+            <Fieldset legend="Columns">
+                <Layout.Stack gap="l">
+                    <Layout.Stack direction="row" gap="s" alignItems="center">
+                        <Button compact on:click={selectAllColumns}>Select all</Button>
+                        <span style:height="20px">
+                            <Divider vertical />
+                        </span>
+                        <Button compact on:click={deselectAllColumns}>Deselect all</Button>
+                    </Layout.Stack>
+
+                    <Layout.Grid columns={3} columnsS={1} gap="l">
+                        {#each visibleColumns as column (column.key)}
+                            <div style="min-width: 0;">
+                                <InputCheckbox
+                                    id={`column-${column.key}`}
+                                    label={column.key}
+                                    bind:checked={selectedColumns[column.key]}
+                                    truncate />
+                            </div>
+                        {/each}
+                    </Layout.Grid>
+
+                    {#if hasMoreColumns}
+                        <div style:margin-bottom="-0.5rem">
+                            <Button compact on:click={() => (showAllColumns = !showAllColumns)}>
+                                {showAllColumns ? 'Show less' : 'Show more'}
+                            </Button>
+                        </div>
+                    {/if}
+                </Layout.Stack>
+            </Fieldset>
+
+            <Fieldset legend="Export options">
+                <Layout.Stack gap="l">
+                    <Layout.Stack direction="row" gap="xs" alignItems="center">
+                        <InputCheckbox
+                            id="prettyPrint"
+                            label="Pretty print"
+                            description="Format the JSON output with indentation for readability"
+                            bind:checked={prettyPrint} />
+                        <div style="margin-left: 0.5rem; margin-top: -1.25rem;">
+                            <Tooltip>
+                                <Icon size="s" icon={IconInfo} />
+                                <span slot="tooltip">
+                                    Indicate if the JSON should be formatted for readability.
+                                </span>
+                            </Tooltip>
+                        </div>
+                    </Layout.Stack>
+
+                    <Layout.Stack gap="m">
+                        <div class:disabled-checkbox={localTags.length === 0}>
+                            <InputCheckbox
+                                id="exportWithFilters"
+                                label="Export with filters"
+                                description="Export rows that match the current table filters"
+                                disabled={localTags.length === 0}
+                                bind:checked={exportWithFilters} />
+                        </div>
+
+                        {#if localTags.length > 0}
+                            <Layout.Stack
+                                direction="row"
+                                gap="xs"
+                                alignItems="center"
+                                style="padding-left: 1.75rem;"
+                                wrap="wrap">
+                                <TagList
+                                    tags={localTags}
+                                    on:remove={(e) => {
+                                        removeLocalFilter(e.detail);
+                                    }} />
+                            </Layout.Stack>
+                        {/if}
+                    </Layout.Stack>
+                </Layout.Stack>
+            </Fieldset>
+        </Layout.Stack>
+    </Form>
+    <svelte:fragment slot="footer">
+        <Layout.Stack justifyContent="flex-end" direction="row">
+            <Button fullWidthMobile secondary on:click={() => (showExitModal = true)}>
+                Cancel
+            </Button>
+            <Button
+                fullWidthMobile
+                on:click={() => formComponent.triggerSubmit()}
+                disabled={$isSubmitting || selectedColumnCount === 0}>
+                Export
+            </Button>
+        </Layout.Stack>
+    </svelte:fragment>
+</Wizard>
+
+<style>
+    .disabled-checkbox :global(*) {
+        cursor: unset;
+    }
+</style>