diff --git a/src/App.tsx b/src/App.tsx
index 51cf8e0..85f652d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,6 +8,8 @@ function App() {
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
   const [columns, setColumns] = useState({});
+  const [startedColumns, setStartedColumns] = useState([]);
+  const [completedColumns, setCompletedColumns] = useState([]);
 
   window.addEventListener('message', event => {
     const tasks = Object.fromEntries(event.data.tasks.map(task => [task.id, task]));
@@ -19,12 +21,14 @@ function App() {
         Object.values(event.data.index.columns).map(column => (column as string[]).map(taskId => tasks[taskId]))
       )
     ));
+    setStartedColumns(event.data.startedColumns);
+    setCompletedColumns(event.data.completedColumns);
   });
 
   return (
     <div>
       <Header name={name} description={description} />
-      <Board columns={columns} />
+      <Board columns={columns} startedColumns={startedColumns} completedColumns={completedColumns} />
     </div>
   );
 }