diff --git a/assets/react/controllers/GameGrid.jsx b/assets/react/controllers/GameGrid.jsx
index 2981c9a..73cb81a 100644
--- a/assets/react/controllers/GameGrid.jsx
+++ b/assets/react/controllers/GameGrid.jsx
@@ -1,25 +1,18 @@
 import React from 'react';
+import GameRow from './GameRow';
 
 export default function GameGrid({ grid, width, middle }) {
     return (
         <table id="actors">
             <tbody>
                 {grid.map((row, rowIndex) => (
-                    <tr key={rowIndex}>
-                        {Array.from({ length: width + 1 }, (_, colIndex) => {
-                            const start = middle - row.pos;
-                            const charIndex = colIndex - start;
-                            const name = row.actorName;
-                            const isInRange = charIndex >= 0 && charIndex < name.length;
-                            const isHighlighted = charIndex === row.pos;
-
-                            return (
-                                <td key={colIndex} style={isHighlighted ? { color: 'red' } : undefined}>
-                                    {isInRange ? name[charIndex].toUpperCase() : ''}
-                                </td>
-                            );
-                        })}
-                    </tr>
+                    <GameRow
+                        key={rowIndex}
+                        actorName={row.actorName}
+                        pos={row.pos}
+                        colStart={middle - row.pos}
+                        totalWidth={width}
+                    />
                 ))}
             </tbody>
         </table>