diff --git a/src/components/BoardSwitcher.js b/src/components/BoardSwitcher.js
index e99793a..c18e4e3 100644
--- a/src/components/BoardSwitcher.js
+++ b/src/components/BoardSwitcher.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 function Board(props) {
   let className = "board";
@@ -10,16 +10,22 @@ function Board(props) {
 }
 
 function BoardSwitcher(props) {
+  const [selectedBoard, setSelectedBoard] = useState(0); // 1. State to track the currently selected board
+
+  const toggleBoard = () => {  // 2. Event handler for the toggle button
+    setSelectedBoard((prevBoard) => (prevBoard + 1) % props.numBoards);
+  };
+
   let boards = [];
   for (let ii = 0; ii < props.numBoards; ii++) {
-    let isSelected = ii === 0;
+    let isSelected = ii === selectedBoard; // Updated this line
     boards.push(<Board index={ii} selected={isSelected} key={ii} />);
   }
 
   return (
     <div>
       <div className="boards">{boards}</div>
-      <button>Toggle</button>
+      <button onClick={toggleBoard}>Toggle</button>  // 3. Attached the event handler to the button
     </div>
   );
 }