diff --git a/components/DataGrid.tsx b/components/DataGrid.tsx
index a58e786..d07aa72 100644
--- a/components/DataGrid.tsx
+++ b/components/DataGrid.tsx
@@ -354,6 +354,24 @@ const DataGrid: React.FC<DataGridProps> = ({ data }) => {
                         valB = b.totalsByYear[y]?.[m] || 0;
                     }
                 }
+                // Handle sorting by Growth Percentages (growth_sellOut_2024_2023)
+                else if ((sortConfig.key as string).startsWith('growth_')) {
+                    const parts = (sortConfig.key as string).split('_');
+                    // parts[1] = metric (sellOut/units), parts[2] = current year, parts[3] = previous year
+                    if (parts.length === 4) {
+                        const metric = parts[1] as 'sellOut' | 'units';
+                        const currentYear = parts[2];
+                        const prevYear = parts[3];
+
+                        const currA = a.totalsByYear[currentYear]?.[metric] || 0;
+                        const prevA = a.totalsByYear[prevYear]?.[metric] || 0;
+                        valA = prevA !== 0 ? ((currA - prevA) / prevA) * 100 : (currA > 0 ? 100 : 0);
+
+                        const currB = b.totalsByYear[currentYear]?.[metric] || 0;
+                        const prevB = b.totalsByYear[prevYear]?.[metric] || 0;
+                        valB = prevB !== 0 ? ((currB - prevB) / prevB) * 100 : (currB > 0 ? 100 : 0);
+                    }
+                }
 
                 if (valA < valB) return sortConfig.direction === 'asc' ? -1 : 1;
                 if (valA > valB) return sortConfig.direction === 'asc' ? 1 : -1;
@@ -762,14 +780,20 @@ const DataGrid: React.FC<DataGridProps> = ({ data }) => {
                                             {/* Growth Columns (if prev year exists) */}
                                             {prevYear && (
                                                 <>
-                                                    <th className="px-2 py-3 border-b border-border text-center bg-slate-950/50 min-w-[80px]">
+                                                    <th
+                                                        className="px-2 py-3 border-b border-border text-center bg-slate-950/50 min-w-[80px] cursor-pointer hover:text-white"
+                                                        onClick={() => requestSort(`growth_sellOut_${year}_${prevYear}`)}
+                                                    >
                                                         <div className="flex items-center justify-center text-[10px] text-slate-500 uppercase">
-                                                            S.O. Δ%
+                                                            S.O. Δ% {getSortIcon(`growth_sellOut_${year}_${prevYear}`)}
                                                         </div>
                                                     </th>
-                                                    <th className="px-2 py-3 border-b border-border text-center bg-slate-950/50 min-w-[80px]">
+                                                    <th
+                                                        className="px-2 py-3 border-b border-border text-center bg-slate-950/50 min-w-[80px] cursor-pointer hover:text-white"
+                                                        onClick={() => requestSort(`growth_units_${year}_${prevYear}`)}
+                                                    >
                                                         <div className="flex items-center justify-center text-[10px] text-slate-500 uppercase">
-                                                            Units Δ%
+                                                            Units Δ% {getSortIcon(`growth_units_${year}_${prevYear}`)}
                                                         </div>
                                                     </th>
                                                 </>