diff --git a/admin-lehrer/components/grid-editor/GridTable.tsx b/admin-lehrer/components/grid-editor/GridTable.tsx
index 0b5d58b..6b2d9c0 100644
--- a/admin-lehrer/components/grid-editor/GridTable.tsx
+++ b/admin-lehrer/components/grid-editor/GridTable.tsx
@@ -410,34 +410,40 @@ export function GridTable({
 
               {/* Cells — spanning header or normal columns */}
               {isSpanning ? (
-                <div
-                  className="border-b border-r border-gray-200 dark:border-gray-700 bg-blue-50/50 dark:bg-blue-900/10 flex items-center"
-                  style={{
-                    gridColumn: `2 / ${numCols + 2}`,
-                    height: `${rowH}px`,
-                  }}
-                >
-                  {(() => {
-                    const spanCell = zone.cells.find(
-                      (c) => c.row_index === row.index && c.col_type === 'spanning_header',
-                    )
-                    if (!spanCell) return null
-                    const cellId = spanCell.cell_id
-                    const isSelected = selectedCell === cellId
-                    const cellColor = getCellColor(spanCell)
-                    return (
-                      <div className="flex items-center w-full">
-                        {cellColor && (
-                          <span
-                            className="flex-shrink-0 w-1.5 self-stretch rounded-l-sm"
-                            style={{ backgroundColor: cellColor }}
-                          />
-                        )}
-                        <input
-                          id={`cell-${cellId}`}
-                          type="text"
-                          value={spanCell.text}
-                          onChange={(e) => onCellTextChange(cellId, e.target.value)}
+                <>
+                  {/* Render each spanning cell with its colspan */}
+                  {zone.cells
+                    .filter((c) => c.row_index === row.index && c.col_type === 'spanning_header')
+                    .sort((a, b) => a.col_index - b.col_index)
+                    .map((spanCell) => {
+                      const colspan = spanCell.colspan || numCols
+                      const cellId = spanCell.cell_id
+                      const isSelected = selectedCell === cellId
+                      const cellColor = getCellColor(spanCell)
+                      // Grid column: starts at col_index+2 (1-based, +1 for row number column)
+                      const gridColStart = spanCell.col_index + 2
+                      const gridColEnd = gridColStart + colspan
+                      return (
+                        <div
+                          key={cellId}
+                          className="border-b border-r border-gray-200 dark:border-gray-700 bg-blue-50/50 dark:bg-blue-900/10 flex items-center"
+                          style={{
+                            gridColumn: `${gridColStart} / ${gridColEnd}`,
+                            height: `${rowH}px`,
+                          }}
+                        >
+                          <div className="flex items-center w-full">
+                            {cellColor && (
+                              <span
+                                className="flex-shrink-0 w-1.5 self-stretch rounded-l-sm"
+                                style={{ backgroundColor: cellColor }}
+                              />
+                            )}
+                            <input
+                              id={`cell-${cellId}`}
+                              type="text"
+                              value={spanCell.text}
+                              onChange={(e) => onCellTextChange(cellId, e.target.value)}
                           onFocus={() => onSelectCell(cellId)}
                           onKeyDown={(e) => handleKeyDown(e, cellId)}
                           className={`w-full px-3 py-1 bg-transparent border-0 outline-none text-center ${
@@ -447,9 +453,10 @@ export function GridTable({
                           spellCheck={false}
                         />
                       </div>
-                    )
-                  })()}
-                </div>
+                    </div>
+                      )
+                    })}
+                </>
               ) : (
                 zone.columns.map((col) => {
                   const cell = cellMap.get(`${row.index}_${col.index}`)