diff --git a/.github/workflows/docs_deploy.yml b/.github/workflows/docs_deploy.yml
index 541ef29f76..2b00f64960 100644
--- a/.github/workflows/docs_deploy.yml
+++ b/.github/workflows/docs_deploy.yml
@@ -13,9 +13,6 @@ on:
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
-permissions: write-all
-
 # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
 # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
 concurrency:
@@ -49,6 +46,6 @@ jobs:
       - name: Deploy to GitHub Pages
         uses: peaceiris/actions-gh-pages@v4
         with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
+          github_token: ${{ secrets.DOCS_DEPLOY_TOKEN }}
           publish_dir: ./docs/.vitepress/dist
           cname: ev.xyz
diff --git a/docs/.vitepress/components/CelestiaGasEstimator.vue b/docs/.vitepress/components/CelestiaGasEstimator.vue
index faad8909a5..de5bc84455 100644
--- a/docs/.vitepress/components/CelestiaGasEstimator.vue
+++ b/docs/.vitepress/components/CelestiaGasEstimator.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="calculator">
         <section class="panel data-workload">
-            <h2>Header cadence</h2>
+            <h2>Block production</h2>
             <div class="field-row">
                 <label for="header-bytes">Header size (bytes)</label>
                 <input
@@ -11,16 +11,6 @@
                     readonly
                 />
             </div>
-            <div class="field-row">
-                <label for="header-count">Headers per submission</label>
-                <input
-                    id="header-count"
-                    type="number"
-                    min="1"
-                    step="1"
-                    v-model.number="headerCountInput"
-                />
-            </div>
             <div class="field-row">
                 <label for="block-time">Block time</label>
                 <div class="field-group">
@@ -38,28 +28,6 @@
                 </div>
             </div>
             <ul class="derived">
-                <li>
-                    <span>Headers / submission</span>
-                    <strong>{{ formatInteger(normalizedHeaderCount) }}</strong>
-                </li>
-                <li>
-                    <span>Header bytes / submission</span>
-                    <strong>{{ formatInteger(headerBytesTotal) }}</strong>
-                </li>
-                <li>
-                    <span>Submission interval (s)</span>
-                    <strong>{{
-                        formatNumber(submissionIntervalSeconds, 3)
-                    }}</strong>
-                </li>
-                <li>
-                    <span>Submissions / second</span>
-                    <strong>{{ formatNumber(submissionsPerSecond, 4) }}</strong>
-                </li>
-                <li>
-                    <span>Submissions / minute</span>
-                    <strong>{{ formatNumber(submissionsPerMinute, 2) }}</strong>
-                </li>
                 <li>
                     <span>Blocks / second</span>
                     <strong>{{ formatNumber(blocksPerSecond, 4) }}</strong>
@@ -67,6 +35,94 @@
             </ul>
         </section>
 
+        <section class="panel batching-strategy">
+            <h2>Batching strategy</h2>
+            <p class="hint">
+                Controls how blocks are batched before submission to the DA layer. Different strategies offer trade-offs between latency, cost efficiency, and throughput.
+            </p>
+            <div class="field-row">
+                <label for="strategy">Strategy</label>
+                <select id="strategy" v-model="batchingStrategy">
+                    <option value="immediate">Immediate</option>
+                    <option value="size">Size-based</option>
+                    <option value="time">Time-based</option>
+                    <option value="adaptive">Adaptive (Recommended)</option>
+                </select>
+            </div>
+            <div class="strategy-description">
+                <p v-if="batchingStrategy === 'immediate'">
+                    <strong>Immediate:</strong> Submits as soon as any blocks are available. Best for low-latency requirements where cost is not a concern.
+                </p>
+                <p v-else-if="batchingStrategy === 'size'">
+                    <strong>Size-based:</strong> Waits until the batch reaches a size threshold (fraction of max blob size). Best for maximizing blob utilization and minimizing costs when latency is flexible.
+                </p>
+                <p v-else-if="batchingStrategy === 'time'">
+                    <strong>Time-based:</strong> Waits for a time interval before submitting. Provides predictable submission timing aligned with DA block times.
+                </p>
+                <p v-else-if="batchingStrategy === 'adaptive'">
+                    <strong>Adaptive:</strong> Balances between size and time constraints—submits when either the size threshold is reached OR the max delay expires. Recommended for most production deployments.
+                </p>
+            </div>
+
+            <div class="field-row">
+                <label for="da-block-time">DA block time</label>
+                <div class="field-group">
+                    <input
+                        id="da-block-time"
+                        type="number"
+                        min="1"
+                        step="1"
+                        v-model.number="daBlockTimeSeconds"
+                    />
+                    <span class="unit-label">seconds</span>
+                </div>
+            </div>
+
+            <div v-if="batchingStrategy === 'size' || batchingStrategy === 'adaptive'" class="field-row">
+                <label for="size-threshold">Batch size threshold (%)</label>
+                <div class="field-group">
+                    <input
+                        id="size-threshold"
+                        type="number"
+                        min="10"
+                        max="100"
+                        step="5"
+                        v-model.number="batchSizeThresholdPercent"
+                    />
+                    <span class="unit-label">% of 7 MB max blob</span>
+                </div>
+            </div>
+
+            <div v-if="batchingStrategy === 'time' || batchingStrategy === 'adaptive'" class="field-row">
+                <label for="max-delay">Batch max delay</label>
+                <div class="field-group">
+                    <input
+                        id="max-delay"
+                        type="number"
+                        min="0"
+                        step="1"
+                        v-model.number="batchMaxDelaySeconds"
+                    />
+                    <span class="unit-label">seconds (0 = DA block time)</span>
+                </div>
+            </div>
+
+            <div class="field-row">
+                <label for="min-items">Batch minimum items</label>
+                <input
+                    id="min-items"
+                    type="number"
+                    min="1"
+                    step="1"
+                    v-model.number="batchMinItems"
+                />
+            </div>
+
+            <p class="hint" style="margin-top: 1rem;">
+                Header and data submission rates are shown in the Estimation section below, based on your data workload configuration.
+            </p>
+        </section>
+
         <section class="panel data-workload">
             <h2>Data workload</h2>
             <div class="env-toggle">
@@ -308,14 +364,10 @@
         <section class="panel results">
             <h2>Estimation</h2>
             <div class="summary">
-                <div class="summary-item">
-                    <span>Total gas / submission</span>
-                    <strong>{{ formatInteger(totalGasPerSubmission) }}</strong>
-                </div>
-                <div class="summary-item">
-                    <span>Fee / submission (TIA)</span>
+                <div class="summary-item highlight">
+                    <span>Total yearly fee (TIA)</span>
                     <strong>{{
-                        formatNumber(totalFeePerSubmissionTIA, 6)
+                        formatNumber(totalRecurringFeePerYearTIA, 4)
                     }}</strong>
                 </div>
                 <div class="summary-item">
@@ -323,16 +375,34 @@
                     <strong>{{ formatNumber(feePerSecondTIA, 6) }}</strong>
                 </div>
                 <div class="summary-item">
-                    <span>Total yearly fee (TIA)</span>
-                    <strong>{{
-                        formatNumber(totalRecurringFeePerYearTIA, 4)
-                    }}</strong>
+                    <span>Header fee / year (TIA)</span>
+                    <strong>{{ formatNumber(headerFeePerYearTIA, 4) }}</strong>
+                </div>
+                <div class="summary-item">
+                    <span>Data fee / year (TIA)</span>
+                    <strong>{{ formatNumber(dataFeePerYearTIA, 4) }}</strong>
                 </div>
             </div>
 
             <details open>
                 <summary>Header costs</summary>
                 <ul class="breakdown">
+                    <li>
+                        <span>Header submission interval (s)</span>
+                        <strong>{{ formatNumber(headerSubmissionIntervalSeconds, 2) }}</strong>
+                    </li>
+                    <li>
+                        <span>Headers / submission</span>
+                        <strong>{{ formatInteger(normalizedHeaderCount) }}</strong>
+                    </li>
+                    <li>
+                        <span>Header bytes / submission</span>
+                        <strong>{{ formatInteger(headerBytesTotal) }}</strong>
+                    </li>
+                    <li>
+                        <span>Header submissions / year</span>
+                        <strong>{{ formatNumber(headerSubmissionsPerYear, 0) }}</strong>
+                    </li>
                     <li>
                         <span>Header gas / submission</span>
                         <strong>{{ formatInteger(headerGas) }}</strong>
@@ -360,33 +430,43 @@
                 </p>
                 <ul v-else class="breakdown">
                     <li>
-                        <span>Average calldata bytes / tx</span>
+                        <span>Data bytes / second</span>
                         <strong>{{
-                            formatNumber(averageCalldataBytes, 2)
+                            formatNumber(dataBytesPerSecond, 2)
                         }}</strong>
                     </li>
                     <li>
-                        <span>Data blobs / submission</span>
-                        <strong>{{ formatInteger(dataBlobCount) }}</strong>
+                        <span>Data submission interval (s)</span>
+                        <strong>{{
+                            formatNumber(dataSubmissionIntervalSeconds, 2)
+                        }}</strong>
                     </li>
                     <li>
-                        <span>Average blob size (bytes)</span>
+                        <span>Data submissions / year</span>
                         <strong>{{
-                            formatNumber(averageDataBlobBytes, 2)
+                            formatNumber(dataSubmissionsPerYear, 0)
                         }}</strong>
                     </li>
                     <li>
-                        <span>Data bytes / submission</span>
+                        <span>Average calldata bytes / tx</span>
                         <strong>{{
-                            formatNumber(dataBytesPerSubmission, 2)
+                            formatNumber(averageCalldataBytes, 2)
                         }}</strong>
                     </li>
                     <li>
-                        <span>Data shares / submission</span>
+                        <span>Transactions / data submission</span>
+                        <strong>{{ formatNumber(transactionsPerSubmission, 0) }}</strong>
+                    </li>
+                    <li>
+                        <span>Data bytes / submission</span>
                         <strong>{{
-                            formatInteger(dataSharesPerSubmission)
+                            formatNumber(dataBytesPerSubmission, 0)
                         }}</strong>
                     </li>
+                    <li>
+                        <span>Data blobs / submission</span>
+                        <strong>{{ formatInteger(dataBlobCount) }}</strong>
+                    </li>
                     <li>
                         <span>Data gas / submission</span>
                         <strong>{{
@@ -408,29 +488,31 @@
                 </ul>
             </details>
 
-            <details open>
-                <summary>Baseline gas</summary>
+            <details>
+                <summary>Fixed costs (PFB base gas)</summary>
                 <ul class="breakdown">
                     <li>
-                        <span>PFB transactions / submission</span>
-                        <strong>{{
-                            formatInteger(totalTransactionsPerSubmission)
-                        }}</strong>
+                        <span>Header PFB base gas</span>
+                        <strong>{{ formatInteger(GAS_PARAMS.fixedCost) }} gas</strong>
                     </li>
                     <li>
-                        <span>Base gas / submission</span>
+                        <span>Header fixed fee / year (TIA)</span>
                         <strong>{{
-                            formatInteger(fixedGasPerSubmission)
+                            formatNumber(headerFixedGasPerSubmission * headerSubmissionsPerYear * gasPriceTIA, 4)
                         }}</strong>
                     </li>
                     <li>
-                        <span>Base fee / submission (TIA)</span>
+                        <span>Data blobs / submission</span>
+                        <strong>{{ formatInteger(dataBlobCount) }}</strong>
+                    </li>
+                    <li>
+                        <span>Data fixed fee / year (TIA)</span>
                         <strong>{{
-                            formatNumber(fixedFeePerSubmissionTIA, 6)
+                            formatNumber(dataFixedGasPerSubmission * dataSubmissionsPerYear * gasPriceTIA, 4)
                         }}</strong>
                     </li>
                     <li>
-                        <span>Base fee / year (TIA)</span>
+                        <span>Total fixed fee / year (TIA)</span>
                         <strong>{{
                             formatNumber(fixedFeePerYearTIA, 4)
                         }}</strong>
@@ -449,18 +531,20 @@
                         <span>Transactions per second</span>
                         <strong>{{ formatNumber(txPerSecond, 4) }}</strong>
                     </li>
-                    <li>
-                        <span>Transactions per month</span>
-                        <strong>{{ formatNumber(txPerMonth, 0) }}</strong>
-                    </li>
                     <li>
                         <span>Transactions per year</span>
                         <strong>{{ formatNumber(txPerYear, 0) }}</strong>
                     </li>
                     <li>
-                        <span>Submissions per year</span>
+                        <span>Header submissions / year</span>
                         <strong>{{
-                            formatNumber(submissionsPerYear, 0)
+                            formatNumber(headerSubmissionsPerYear, 0)
+                        }}</strong>
+                    </li>
+                    <li>
+                        <span>Data submissions / year</span>
+                        <strong>{{
+                            formatNumber(dataSubmissionsPerYear, 0)
                         }}</strong>
                     </li>
                 </ul>
@@ -477,6 +561,7 @@ const FIRST_TX_SURCHARGE = 10_000;
 const SECONDS_PER_MONTH = 30 * 24 * 60 * 60;
 const SECONDS_PER_YEAR = 365 * 24 * 60 * 60;
 const DATA_CHUNK_BYTES = 500 * 1024; // 500 KiB chunk limit per blob
+const MAX_BLOB_SIZE = 7 * 1024 * 1024; // 7 MB max blob size (from common/consts.go)
 
 const GAS_PARAMS = Object.freeze({
     fixedCost: 65_000,
@@ -485,6 +570,7 @@ const GAS_PARAMS = Object.freeze({
     shareSizeBytes: 482,
 });
 
+type BatchingStrategy = "immediate" | "size" | "time" | "adaptive";
 type ExecutionEnv = "evm" | "cosmos";
 
 type EvmTxType = {
@@ -588,12 +674,19 @@ const evmMix = reactive<EvmMixEntry[]>(
     })),
 );
 
-const headerCount = ref(15);
-const headerCountInput = computed({
-    get: () => headerCount.value,
+// Batching strategy configuration
+const batchingStrategy = ref<BatchingStrategy>("time");
+const daBlockTimeSeconds = ref(6); // Celestia default block time
+const batchSizeThreshold = ref(0.8); // 80% of max blob size (internal: 0.0-1.0)
+const batchMaxDelaySeconds = ref(0); // 0 means use DA block time
+const batchMinItems = ref(1);
+
+// User-facing percentage (10-100) that syncs with internal threshold (0.1-1.0)
+const batchSizeThresholdPercent = computed({
+    get: () => Math.round(batchSizeThreshold.value * 100),
     set: (value: number) => {
-        const sanitized = sanitizeInteger(value, 1);
-        headerCount.value = sanitized;
+        const clamped = Math.max(10, Math.min(100, value));
+        batchSizeThreshold.value = clamped / 100;
     },
 });
 
@@ -624,39 +717,87 @@ const blockTimeSeconds = computed(() => {
     return blockTimeUnit.value === "ms" ? value / 1000 : value;
 });
 
-const normalizedHeaderCount = computed(() =>
-    Math.max(
-        1,
-        Math.round(isFinite(headerCount.value) ? headerCount.value : 1),
-    ),
-);
+// Effective max delay: use DA block time if batchMaxDelaySeconds is 0
+const effectiveMaxDelaySeconds = computed(() => {
+    if (batchMaxDelaySeconds.value <= 0) {
+        return daBlockTimeSeconds.value;
+    }
+    return batchMaxDelaySeconds.value;
+});
 
-const headerBytesTotal = computed(
-    () => normalizedHeaderCount.value * HEADER_BYTES,
-);
+// Target bytes for size-based batching
+const targetBlobBytes = computed(() => MAX_BLOB_SIZE * batchSizeThreshold.value);
 
-const submissionIntervalSeconds = computed(() => {
+// ===== HEADER SUBMISSION INTERVAL =====
+// Calculate header submission interval based on batching strategy
+const headerSubmissionIntervalSeconds = computed(() => {
     const blockSeconds = blockTimeSeconds.value;
-    const count = normalizedHeaderCount.value;
-    if (!isFinite(blockSeconds) || blockSeconds <= 0 || count <= 0) {
+    if (!isFinite(blockSeconds) || blockSeconds <= 0) {
         return NaN;
     }
-    return blockSeconds * count;
+
+    const strategy = batchingStrategy.value;
+    const minItems = Math.max(1, batchMinItems.value);
+    const headerBytesPerBlock = HEADER_BYTES;
+
+    if (strategy === "immediate") {
+        return blockSeconds * minItems;
+    }
+
+    if (strategy === "time") {
+        const delayBlocks = Math.ceil(effectiveMaxDelaySeconds.value / blockSeconds);
+        return blockSeconds * Math.max(minItems, delayBlocks);
+    }
+
+    if (strategy === "size") {
+        // How many blocks until headers fill the target blob size
+        const blocksToThreshold = Math.ceil(targetBlobBytes.value / headerBytesPerBlock);
+        return blockSeconds * Math.max(minItems, blocksToThreshold);
+    }
+
+    if (strategy === "adaptive") {
+        const delayBlocks = Math.ceil(effectiveMaxDelaySeconds.value / blockSeconds);
+        const blocksToThreshold = Math.ceil(targetBlobBytes.value / headerBytesPerBlock);
+        return blockSeconds * Math.min(
+            Math.max(minItems, delayBlocks),
+            Math.max(minItems, blocksToThreshold)
+        );
+    }
+
+    return blockSeconds * minItems;
 });
 
-const submissionsPerSecond = computed(() => {
-    const interval = submissionIntervalSeconds.value;
+// For backward compatibility, alias to submissionIntervalSeconds
+const submissionIntervalSeconds = headerSubmissionIntervalSeconds;
+
+// Calculate header count from submission interval
+const normalizedHeaderCount = computed(() => {
+    const blockSeconds = blockTimeSeconds.value;
+    const interval = headerSubmissionIntervalSeconds.value;
+    if (!isFinite(blockSeconds) || blockSeconds <= 0 || !isFinite(interval)) {
+        return 1;
+    }
+    return Math.max(1, Math.round(interval / blockSeconds));
+});
+
+const headerBytesTotal = computed(
+    () => normalizedHeaderCount.value * HEADER_BYTES,
+);
+
+const headerSubmissionsPerSecond = computed(() => {
+    const interval = headerSubmissionIntervalSeconds.value;
     if (!isFinite(interval) || interval <= 0) {
         return 0;
     }
     return 1 / interval;
 });
 
-const submissionsPerMinute = computed(() => submissionsPerSecond.value * 60);
-
-const submissionsPerYear = computed(
-    () => submissionsPerSecond.value * SECONDS_PER_YEAR,
+const submissionsPerSecond = headerSubmissionsPerSecond; // alias
+const submissionsPerMinute = computed(() => headerSubmissionsPerSecond.value * 60);
+const headerSubmissionsPerYear = computed(
+    () => headerSubmissionsPerSecond.value * SECONDS_PER_YEAR,
 );
+const submissionsPerYear = headerSubmissionsPerYear; // alias
 
 const blocksPerSecond = computed(() => {
     const seconds = blockTimeSeconds.value;
@@ -750,8 +891,71 @@ const averageCalldataBytes = computed(() => {
 const txPerMonth = computed(() => txPerSecond.value * SECONDS_PER_MONTH);
 const txPerYear = computed(() => txPerSecond.value * SECONDS_PER_YEAR);
 
+// Data bytes generated per second
+const dataBytesPerSecond = computed(() => {
+    if (executionEnv.value !== "evm") {
+        return 0;
+    }
+    return txPerSecond.value * averageCalldataBytes.value;
+});
+
+// ===== DATA SUBMISSION INTERVAL =====
+// Calculate data submission interval based on batching strategy
+const dataSubmissionIntervalSeconds = computed(() => {
+    const blockSeconds = blockTimeSeconds.value;
+    const bytesPerSecond = dataBytesPerSecond.value;
+
+    if (!isFinite(blockSeconds) || blockSeconds <= 0) {
+        return NaN;
+    }
+
+    // If no data throughput, fall back to header interval
+    if (bytesPerSecond <= 0) {
+        return headerSubmissionIntervalSeconds.value;
+    }
+
+    const strategy = batchingStrategy.value;
+    const minItems = Math.max(1, batchMinItems.value);
+    const minInterval = blockSeconds * minItems;
+
+    if (strategy === "immediate") {
+        return minInterval;
+    }
+
+    if (strategy === "time") {
+        return Math.max(minInterval, effectiveMaxDelaySeconds.value);
+    }
+
+    if (strategy === "size") {
+        // Time to accumulate enough data to reach size threshold
+        const timeToThreshold = targetBlobBytes.value / bytesPerSecond;
+        return Math.max(minInterval, timeToThreshold);
+    }
+
+    if (strategy === "adaptive") {
+        // Whichever comes first: size threshold or max delay
+        const timeToThreshold = targetBlobBytes.value / bytesPerSecond;
+        return Math.max(minInterval, Math.min(timeToThreshold, effectiveMaxDelaySeconds.value));
+    }
+
+    return minInterval;
+});
+
+const dataSubmissionsPerSecond = computed(() => {
+    const interval = dataSubmissionIntervalSeconds.value;
+    if (!isFinite(interval) || interval <= 0) {
+        return 0;
+    }
+    return 1 / interval;
+});
+
+const dataSubmissionsPerYear = computed(
+    () => dataSubmissionsPerSecond.value * SECONDS_PER_YEAR,
+);
+
+// Transactions included per data submission
 const transactionsPerSubmission = computed(() => {
-    const interval = submissionIntervalSeconds.value;
+    const interval = dataSubmissionIntervalSeconds.value;
     if (!isFinite(interval) || interval <= 0) {
         return 0;
     }
@@ -807,77 +1011,54 @@ const averageDataBlobBytes = computed(() => {
 const gasPriceUTIA = computed(() => Math.max(gasPriceValue.value, 0));
 const gasPriceTIA = computed(() => gasPriceUTIA.value / 1_000_000);
 
-const headerTransactionCount = computed(() =>
-    normalizedHeaderCount.value > 0 ? 1 : 0,
-);
-
-const totalTransactionsPerSubmission = computed(
-    () => headerTransactionCount.value + dataBlobCount.value,
-);
+// ===== HEADER COSTS =====
+// 1 PFB transaction per header submission
+const headerFixedGasPerSubmission = computed(() => GAS_PARAMS.fixedCost);
 
-const fixedGasPerSubmission = computed(
-    () => totalTransactionsPerSubmission.value * GAS_PARAMS.fixedCost,
+const headerFeePerSubmissionTIA = computed(
+    () => (headerGas.value + headerFixedGasPerSubmission.value) * gasPriceTIA.value,
 );
 
-const fixedFeePerSubmissionTIA = computed(
-    () => fixedGasPerSubmission.value * gasPriceTIA.value,
+const headerFeePerYearTIA = computed(
+    () => headerFeePerSubmissionTIA.value * headerSubmissionsPerYear.value,
 );
 
-const headerFeePerSubmissionTIA = computed(
-    () => headerGas.value * gasPriceTIA.value,
+// ===== DATA COSTS =====
+// Each data submission may have multiple blobs (chunks), each is a separate PFB
+const dataFixedGasPerSubmission = computed(
+    () => dataBlobCount.value * GAS_PARAMS.fixedCost,
 );
 
 const dataRecurringGasPerSubmission = computed(
-    () => dataGasPerSubmission.value + dataStaticGasPerSubmission.value,
+    () => dataGasPerSubmission.value + dataStaticGasPerSubmission.value + dataFixedGasPerSubmission.value,
 );
 
 const dataFeePerSubmissionTIA = computed(
     () => dataRecurringGasPerSubmission.value * gasPriceTIA.value,
 );
 
-const recurringGasPerSubmission = computed(
-    () =>
-        fixedGasPerSubmission.value +
-        headerGas.value +
-        dataRecurringGasPerSubmission.value,
+const dataFeePerYearTIA = computed(
+    () => dataFeePerSubmissionTIA.value * dataSubmissionsPerYear.value,
 );
 
+// ===== TOTALS =====
 const firstTxGas = computed(() => (firstTx.value ? FIRST_TX_SURCHARGE : 0));
 const firstTxFeeTIA = computed(() => firstTxGas.value * gasPriceTIA.value);
 
-const totalGasPerSubmission = computed(
-    () => recurringGasPerSubmission.value + firstTxGas.value,
-);
-
-const totalFeePerSubmissionTIA = computed(
-    () => totalGasPerSubmission.value * gasPriceTIA.value,
-);
-
-const headerFeePerYearTIA = computed(
-    () => headerFeePerSubmissionTIA.value * submissionsPerYear.value,
-);
-
-const dataFeePerYearTIA = computed(
-    () => dataFeePerSubmissionTIA.value * submissionsPerYear.value,
-);
-
 const fixedFeePerYearTIA = computed(
-    () => fixedFeePerSubmissionTIA.value * submissionsPerYear.value,
+    () => (headerFixedGasPerSubmission.value * headerSubmissionsPerYear.value +
+           dataFixedGasPerSubmission.value * dataSubmissionsPerYear.value) * gasPriceTIA.value,
 );
 
 const totalRecurringFeePerYearTIA = computed(
-    () =>
-        headerFeePerYearTIA.value +
-        dataFeePerYearTIA.value +
-        fixedFeePerYearTIA.value,
+    () => headerFeePerYearTIA.value + dataFeePerYearTIA.value,
 );
 
 const feePerSecondTIA = computed(() => {
-    const interval = submissionIntervalSeconds.value;
-    if (!isFinite(interval) || interval <= 0) {
-        return 0;
-    }
-    return (recurringGasPerSubmission.value * gasPriceTIA.value) / interval;
+    // Sum of header fee rate + data fee rate
+    const headerFeePerSecond = headerFeePerSubmissionTIA.value * headerSubmissionsPerSecond.value;
+    const dataFeePerSecond = dataFeePerSubmissionTIA.value * dataSubmissionsPerSecond.value;
+    return headerFeePerSecond + dataFeePerSecond;
 });
 
 function randomizeMix() {
@@ -983,6 +1164,14 @@ function formatInteger(value: number) {
     min-width: 120px;
 }
 
+.field-group .unit-label {
+    display: flex;
+    align-items: center;
+    font-size: 0.85rem;
+    color: var(--vp-c-text-2);
+    white-space: nowrap;
+}
+
 input,
 select {
     border: 1px solid var(--vp-c-divider);
@@ -1049,6 +1238,17 @@ button.ghost:hover {
     font-size: 0.95rem;
 }
 
+.derived-header {
+    font-weight: 600;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--vp-c-text-2);
+    margin-top: 0.5rem;
+    padding-top: 0.5rem;
+    border-top: 1px solid var(--vp-c-divider);
+}
+
 .param-list {
     margin-bottom: 1.5rem;
 }
@@ -1083,6 +1283,20 @@ button.ghost:hover {
     color: var(--vp-c-text-2);
 }
 
+.strategy-description {
+    margin: 0.5rem 0 1.25rem;
+    padding: 0.75rem 1rem;
+    background: var(--vp-c-bg);
+    border-radius: 8px;
+    border-left: 3px solid var(--vp-c-brand-1);
+}
+
+.strategy-description p {
+    margin: 0;
+    font-size: 0.9rem;
+    line-height: 1.5;
+}
+
 strong {
     font-variant-numeric: tabular-nums;
 }
@@ -1352,6 +1566,16 @@ strong {
     font-size: 1.1rem;
 }
 
+.summary-item.highlight {
+    background: var(--vp-c-brand-soft);
+    border-color: var(--vp-c-brand-1);
+}
+
+.summary-item.highlight strong {
+    font-size: 1.25rem;
+    color: var(--vp-c-brand-1);
+}
+
 /* Details/summary elements */
 details {
     margin-bottom: 1.5rem;
diff --git a/docs/guides/celestia-gas-calculator.md b/docs/guides/celestia-gas-calculator.md
index 23bef7ab8c..ed30ef5b76 100644
--- a/docs/guides/celestia-gas-calculator.md
+++ b/docs/guides/celestia-gas-calculator.md
@@ -12,13 +12,29 @@ Interactive calculator to estimate Celestia DA costs based on your rollup's bloc
 
 ## How it works
 
-The calculator is organized into four sections:
+The calculator is organized into five sections:
 
-### 1. Header cadence
+### 1. Block production
 
-Configure your rollup's block production rate and header batching strategy. Set how many headers you batch per submission—the tool automatically calculates the submission interval. For example, 15 headers at 250 ms block time means one submission every 3.75 seconds.
+Configure your rollup's block production rate. Set your block time (e.g., 250ms, 1s) to establish the base cadence of block production.
 
-### 2. Data workload
+### 2. Batching strategy
+
+Select how blocks are batched before submission to the DA layer. Four strategies are available:
+
+- **Immediate**: Submits as soon as any blocks are available. Best for low-latency requirements where cost is not a concern.
+- **Size-based**: Waits until the batch reaches a size threshold (fraction of max blob size). Best for maximizing blob utilization and minimizing costs when latency is flexible.
+- **Time-based**: Waits for a time interval before submitting. Provides predictable submission timing aligned with DA block times.
+- **Adaptive** (Recommended): Balances between size and time constraints—submits when either the size threshold is reached OR the max delay expires.
+
+Configure strategy parameters:
+
+- **DA block time**: The block time of the DA chain (default: 6s for Celestia)
+- **Batch size threshold**: For size/adaptive strategies, the fraction of max blob size to fill before submitting (default: 80%)
+- **Batch max delay**: For time/adaptive strategies, the maximum wait time before submitting (default: DA block time)
+- **Batch minimum items**: Minimum number of blocks to accumulate before submission
+
+### 3. Data workload
 
 Model your transaction throughput and calldata usage:
 
@@ -29,7 +45,7 @@ The calculator translates your transaction rate and calldata into Celestia blob
 
 For EVM workloads, data submissions are chunked into 500 KiB blobs (mirroring the batching logic in `da_submitter.go`). If a cadence produces more than 500 KiB of calldata in a window, the tool automatically simulates multiple blobs—and therefore multiple PayForBlobs transactions—so base gas and data gas scale accordingly.
 
-### 3. Gas parameters
+### 4. Gas parameters
 
 Review the Celestia mainnet gas parameters used for calculations:
 
@@ -42,7 +58,7 @@ Set your expected gas price and optionally account for the one-time 10,000 gas s
 
 > **Note**: Gas parameters are currently locked to Celestia mainnet defaults. Live parameter fetching and manual overrides will be added in a future update.
 
-### 4. Estimation
+### 5. Estimation
 
 View comprehensive cost breakdowns including:
 
diff --git a/docs/package.json b/docs/package.json
index 21ef031739..b15fa649dd 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -3,7 +3,9 @@
   "version": "1.0.0",
   "license": "MIT",
   "scripts": {
+    "predev": "[ -d node_modules ] || npm install",
     "dev": "vitepress dev",
+    "prebuild": "[ -d node_modules ] || npm install",
     "build": "vitepress build",
     "preview": "vitepress preview"
   },