diff --git a/src/app/seasonal/[symbol]/page.tsx b/src/app/seasonal/[symbol]/page.tsx
index 3978a9a..bbace17 100644
--- a/src/app/seasonal/[symbol]/page.tsx
+++ b/src/app/seasonal/[symbol]/page.tsx
@@ -41,10 +41,10 @@ async function getEarningsView(symbol: string) {
         const closePercentage = ((data[ix].close - lp) / lp);
         const openPercentage = ((data[ix].open - lp) / lp);
 
-        const nextOpenPercentage = data.length > ix ? ((data[ix + 1].open - data[ix].close) / data[ix].close) : undefined;
-        const nextClosePercentage = data.length > ix ? ((data[ix + 1].close - data[ix].close) / data[ix].close) : undefined;
-        const nextOpen = data.length > ix ? data[ix + 1].open : undefined;
-        const nextClose = data.length > ix ? data[ix + 1].close : undefined;
+        const nextOpenPercentage = data.length > ix + 1 ? ((data[ix + 1].open - data[ix].close) / data[ix].close) : undefined;
+        const nextClosePercentage = data.length > ix + 1 ? ((data[ix + 1].close - data[ix].close) / data[ix].close) : undefined;
+        const nextOpen = data.length > ix + 1 ? data[ix + 1].open : undefined;
+        const nextClose = data.length > ix + 1 ? data[ix + 1].close : undefined;
 
         entries.push({
             open: data[ix].open,
diff --git a/src/components/HistoricalSeason.tsx b/src/components/HistoricalSeason.tsx
index 5ba9367..fa709cb 100644
--- a/src/components/HistoricalSeason.tsx
+++ b/src/components/HistoricalSeason.tsx
@@ -67,14 +67,27 @@ const cssFn = (v: any) => {
     return v > 0 ? 'positive' : 'negative';
 }
 
+
+
 export const EarningsSeasonComponent = (props: { data: EarningsSeason[], symbol: string, mode: string }) => {
     const { data } = props;
+    const cellRenderer = (price?: number, change?: number) => {
+        let returnValue = '';
+        if (price) {
+            returnValue += currencyFormatter(price);
+            if (change) {
+                returnValue += ` (${percentageFormatter(change)})`;
+            }
+        }
+        return returnValue;        
+    }
+
     const columns: GridColDef<EarningsSeason>[] = [
         { field: 'date', headerName: 'Date' },
-        { field: 'openPercentage', headerName: 'Open', type: 'number', valueFormatter: (v: number, row) => `${currencyFormatter(row.open)} (${percentageFormatter(v)})`, width: 160, cellClassName: ({ value }) => cssFn(value) },
-        { field: 'closePercentage', headerName: 'Close', type: 'number', valueFormatter: (v: number, row) => `${currencyFormatter(row.close)} (${percentageFormatter(v)})`, width: 160, cellClassName: ({ value }) => cssFn(value) },
-        { field: 'nextOpenPercentage', headerName: 'Next Day Open', type: 'number', valueFormatter: (v: number, row) => `${currencyFormatter(row.nextOpen || 0)} (${percentageFormatter(v)})`, width: 160, cellClassName: ({ value }) => cssFn(value) },
-        { field: 'nextClosePercentage', headerName: 'Next Day Close', type: 'number', valueFormatter: (v: number, row) => `${currencyFormatter(row.nextClose || 0)} (${percentageFormatter(v)})`, width: 160, cellClassName: ({ value }) => cssFn(value) },
+        { field: 'openPercentage', headerName: 'Open', type: 'number', valueFormatter: (v: number, row) => cellRenderer(row.open, v), width: 160, cellClassName: ({ value }) => cssFn(value) },
+        { field: 'closePercentage', headerName: 'Close', type: 'number', valueFormatter: (v: number, row) => cellRenderer(row.close, v), width: 160, cellClassName: ({ value }) => cssFn(value) },
+        { field: 'nextOpenPercentage', headerName: 'Next Day Open', type: 'number', valueFormatter: (v: number, row) => cellRenderer(row.nextOpen, v), width: 160, cellClassName: ({ value }) => cssFn(value) },
+        { field: 'nextClosePercentage', headerName: 'Next Day Close', type: 'number', valueFormatter: (v: number, row) => cellRenderer(row.nextClose, v), width: 160, cellClassName: ({ value }) => cssFn(value) },
     ];
     return data.length > 0 ? <DataGrid
         sx={{