diff --git a/src/components/BoardSwitcher.js b/src/components/BoardSwitcher.js
index e99793a..01f7f92 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";
@@ -9,17 +9,31 @@ function Board(props) {
   return <div className={className}>{props.index + 1}</div>;
 }
 
+// using useState
 function BoardSwitcher(props) {
+  const [selectBoard, setSelectBoard] = useState(0);
   let boards = [];
   for (let ii = 0; ii < props.numBoards; ii++) {
-    let isSelected = ii === 0;
+    let isSelected = ii === selectBoard;
     boards.push(<Board index={ii} selected={isSelected} key={ii} />);
   }
 
+  // iterate through each of the array
+  // function to make the button move
+  // initially I thought of only going (selectBoard + 1) but then it gets stuck so we need to reset
+  const handleClick = () => {
+    if (selectBoard + 1 < props.numBoards) {
+      setSelectBoard(selectBoard + 1);
+    } else {
+      // resets after the 4th index
+      setSelectBoard(0);
+    }
+  };
+
   return (
     <div>
       <div className="boards">{boards}</div>
-      <button>Toggle</button>
+      <button onClick={handleClick}>Toggle</button>
     </div>
   );
 }
diff --git a/src/index.js b/src/index.js
index 782f402..316ad56 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,6 +6,6 @@ import "./index.css";
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <BoardSwitcher numBoards={3} />
+    <BoardSwitcher numBoards={5} />
   </React.StrictMode>
 );