diff --git a/lib/sql_generator.js b/lib/sql_generator.js
index f4c3e48..90ea433 100644
--- a/lib/sql_generator.js
+++ b/lib/sql_generator.js
@@ -49,6 +49,9 @@ function generateSQL(source, colMeta) {
     }
 
     function buildBaseline() {
+        const baselineSelect = dataCols.map(c =>
+            c === dateCol ? `(${q(c)} + '{{date_offset}}'::interval)::date` : q(c)
+        ).join(', ');
         return `
 WITH
 ilog AS (
@@ -61,7 +64,7 @@ ilog AS (
 )
 ,ins AS (
     INSERT INTO {{fc_table}} (${insertCols})
-    SELECT ${selectData}, 'baseline', (SELECT id FROM ilog), '{{pf_user}}', now()
+    SELECT ${baselineSelect}, 'baseline', (SELECT id FROM ilog), '{{pf_user}}', now()
     FROM ${srcTable}
     WHERE ${q(dateCol)} BETWEEN '{{date_from}}' AND '{{date_to}}'
     RETURNING *
diff --git a/public/app.js b/public/app.js
index 287a5cd..71ecacf 100644
--- a/public/app.js
+++ b/public/app.js
@@ -375,10 +375,16 @@ function showLoadForm(op) {
     state.loadDataOp = op;
     document.getElementById('load-data-title').textContent =
         op === 'baseline' ? 'Load Baseline' : 'Load Reference';
-    document.getElementById('load-date-from').value  = '';
-    document.getElementById('load-date-to').value    = '';
-    document.getElementById('load-note').value       = '';
+    document.getElementById('load-date-from').value    = '';
+    document.getElementById('load-date-to').value      = '';
+    document.getElementById('load-offset-years').value  = '0';
+    document.getElementById('load-offset-months').value = '0';
+    document.getElementById('load-note').value         = '';
     document.getElementById('load-date-preview').classList.add('hidden');
+
+    const showOffset = op === 'baseline';
+    document.getElementById('load-offset-fields').classList.toggle('hidden', !showOffset);
+
     document.getElementById('load-data-modal').classList.remove('hidden');
     document.getElementById('load-date-from').focus();
 }
@@ -387,31 +393,58 @@ function hideLoadModal() {
     document.getElementById('load-data-modal').classList.add('hidden');
 }
 
-function updateDatePreview() {
-    const fromVal = document.getElementById('load-date-from').value;
-    const toVal   = document.getElementById('load-date-to').value;
-    const preview = document.getElementById('load-date-preview');
-    const chips   = document.getElementById('load-date-chips');
-    const label   = preview.querySelector('.load-preview-label');
-
-    if (!fromVal || !toVal) { preview.classList.add('hidden'); return; }
-
+function buildMonthList(fromVal, toVal) {
     const from = new Date(fromVal + 'T00:00:00');
     const to   = new Date(toVal   + 'T00:00:00');
-    if (isNaN(from) || isNaN(to) || from > to) { preview.classList.add('hidden'); return; }
-
+    if (isNaN(from) || isNaN(to) || from > to) return null;
     const months = [];
     const cur = new Date(from.getFullYear(), from.getMonth(), 1);
     const end = new Date(to.getFullYear(),   to.getMonth(),   1);
     while (cur <= end) { months.push(new Date(cur)); cur.setMonth(cur.getMonth() + 1); }
+    return months;
+}
+
+function renderChips(months, fmt) {
+    if (months.length <= 36) {
+        return months.map(m => `<span class="date-chip">${fmt.format(m)}</span>`).join('');
+    }
+    return `<span class="date-chip-summary">${months.length} months — ${fmt.format(months[0])} → ${fmt.format(months[months.length - 1])}</span>`;
+}
+
+function updateDatePreview() {
+    const fromVal  = document.getElementById('load-date-from').value;
+    const toVal    = document.getElementById('load-date-to').value;
+    const preview  = document.getElementById('load-date-preview');
+    const simple   = document.getElementById('load-preview-simple');
+    const offset   = document.getElementById('load-preview-offset');
+
+    if (!fromVal || !toVal) { preview.classList.add('hidden'); return; }
+
+    const months = buildMonthList(fromVal, toVal);
+    if (!months) { preview.classList.add('hidden'); return; }
 
     const fmt = new Intl.DateTimeFormat('en-US', { month: 'short', year: 'numeric' });
-    label.textContent = `${months.length} month${months.length !== 1 ? 's' : ''} covered`;
 
-    if (months.length <= 36) {
-        chips.innerHTML = months.map(m => `<span class="date-chip">${fmt.format(m)}</span>`).join('');
+    if (state.loadDataOp === 'baseline') {
+        const years  = parseInt(document.getElementById('load-offset-years').value)  || 0;
+        const mths   = parseInt(document.getElementById('load-offset-months').value) || 0;
+        const projected = months.map(d => {
+            const p = new Date(d);
+            p.setFullYear(p.getFullYear() + years);
+            p.setMonth(p.getMonth() + mths);
+            return p;
+        });
+
+        document.getElementById('load-chips-source').innerHTML    = renderChips(months,    fmt);
+        document.getElementById('load-chips-projected').innerHTML = renderChips(projected, fmt);
+        simple.classList.add('hidden');
+        offset.classList.remove('hidden');
     } else {
-        chips.innerHTML = `<span class="date-chip-summary">${months.length} months — ${fmt.format(months[0])} → ${fmt.format(months[months.length - 1])}</span>`;
+        simple.querySelector('.load-preview-label').textContent =
+            `${months.length} month${months.length !== 1 ? 's' : ''} covered`;
+        document.getElementById('load-date-chips').innerHTML = renderChips(months, fmt);
+        offset.classList.add('hidden');
+        simple.classList.remove('hidden');
     }
 
     preview.classList.remove('hidden');
@@ -429,6 +462,15 @@ async function submitLoadData() {
         note:    document.getElementById('load-note').value.trim() || undefined
     };
 
+    if (state.loadDataOp === 'baseline') {
+        const years  = parseInt(document.getElementById('load-offset-years').value)  || 0;
+        const months = parseInt(document.getElementById('load-offset-months').value) || 0;
+        const parts  = [];
+        if (years)  parts.push(`${years} year${years  !== 1 ? 's' : ''}`);
+        if (months) parts.push(`${months} month${months !== 1 ? 's' : ''}`);
+        body.date_offset = parts.length ? parts.join(' ') : '0 days';
+    }
+
     try {
         showStatus(`Loading ${state.loadDataOp}...`, 'info');
         const result = await api('POST', `/versions/${state.selectedVersionId}/${state.loadDataOp}`, body);
@@ -923,6 +965,8 @@ document.addEventListener('DOMContentLoaded', () => {
     document.getElementById('btn-load-close').addEventListener('click', hideLoadModal);
     document.getElementById('load-date-from').addEventListener('change', updateDatePreview);
     document.getElementById('load-date-to').addEventListener('change', updateDatePreview);
+    document.getElementById('load-offset-years').addEventListener('input', updateDatePreview);
+    document.getElementById('load-offset-months').addEventListener('input', updateDatePreview);
 
     // forecast view buttons
     document.getElementById('btn-forecast-refresh').addEventListener('click', loadForecastData);
diff --git a/public/index.html b/public/index.html
index 1f06ac2..6be4881 100644
--- a/public/index.html
+++ b/public/index.html
@@ -169,11 +169,34 @@
             <div class="load-form-fields">
                 <label>Date From<input type="date" id="load-date-from" /></label>
                 <label>Date To<input type="date" id="load-date-to" /></label>
+                <div id="load-offset-fields">
+                    <div class="load-offset-row">
+                        <label>Offset Years<input type="number" id="load-offset-years" min="0" value="0" /></label>
+                        <label>Offset Months<input type="number" id="load-offset-months" min="0" value="0" /></label>
+                    </div>
+                </div>
                 <label>Note<input type="text" id="load-note" placeholder="optional" /></label>
             </div>
             <div id="load-date-preview" class="load-date-preview hidden">
-                <div class="load-preview-label"></div>
-                <div id="load-date-chips" class="date-chips"></div>
+                <!-- reference: single chip list -->
+                <div id="load-preview-simple">
+                    <div class="load-preview-label"></div>
+                    <div id="load-date-chips" class="date-chips"></div>
+                </div>
+                <!-- baseline: before → after -->
+                <div id="load-preview-offset" class="hidden">
+                    <div class="load-preview-columns">
+                        <div class="load-preview-col">
+                            <div class="load-preview-label">Source</div>
+                            <div id="load-chips-source" class="date-chips"></div>
+                        </div>
+                        <div class="load-preview-arrow">→</div>
+                        <div class="load-preview-col">
+                            <div class="load-preview-label">Projected</div>
+                            <div id="load-chips-projected" class="date-chips"></div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
         <div class="modal-footer">
diff --git a/public/styles.css b/public/styles.css
index 137a02c..14e23bd 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -356,9 +356,25 @@ body {
     box-shadow: 0 0 0 2px rgba(41,128,185,.15);
 }
 
+.load-offset-row { display: flex; gap: 12px; }
+.load-offset-row label { flex: 1; }
+
 .load-date-preview { display: flex; flex-direction: column; gap: 8px; }
 .load-date-preview.hidden { display: none; }
 
+.load-preview-columns {
+    display: flex;
+    gap: 10px;
+    align-items: flex-start;
+}
+.load-preview-col { flex: 1; display: flex; flex-direction: column; gap: 6px; }
+.load-preview-arrow {
+    font-size: 20px;
+    color: #aaa;
+    padding-top: 18px;
+    flex-shrink: 0;
+}
+
 .load-preview-label {
     font-size: 11px;
     font-weight: 600;
diff --git a/routes/operations.js b/routes/operations.js
index 1418193..a8f2bdc 100644
--- a/routes/operations.js
+++ b/routes/operations.js
@@ -77,25 +77,27 @@ module.exports = function(pool) {
     // load baseline rows from source table for a date range
     // deletes existing iter='baseline' rows before inserting (handled inside stored SQL)
     router.post('/versions/:id/baseline', async (req, res) => {
-        const { date_from, date_to, pf_user, note, replay } = req.body;
+        const { date_from, date_to, date_offset, pf_user, note, replay } = req.body;
         if (!date_from || !date_to) {
             return res.status(400).json({ error: 'date_from and date_to are required' });
         }
         if (replay) {
             return res.status(501).json({ error: 'replay is not yet implemented' });
         }
+        const dateOffset = date_offset || '0 days';
         try {
             const ctx = await getContext(parseInt(req.params.id), 'baseline');
             if (!guardOpen(ctx.version, res)) return;
 
             const sql = applyTokens(ctx.sql, {
-                fc_table:   ctx.table,
-                version_id: ctx.version.id,
-                pf_user:    esc(pf_user  || ''),
-                note:       esc(note     || ''),
-                params:     esc(JSON.stringify({ date_from, date_to })),
-                date_from:  esc(date_from),
-                date_to:    esc(date_to)
+                fc_table:    ctx.table,
+                version_id:  ctx.version.id,
+                pf_user:     esc(pf_user   || ''),
+                note:        esc(note      || ''),
+                params:      esc(JSON.stringify({ date_from, date_to, date_offset: dateOffset })),
+                date_from:   esc(date_from),
+                date_to:     esc(date_to),
+                date_offset: esc(dateOffset)
             });
 
             const result = await runSQL(sql);