diff --git a/src/App.js b/src/App.js
index 2c4307c..fb8ae3f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -44,22 +44,20 @@ export default function App() {
       <Route exact path="/rules" component={Rules} />
       <Route exact path="/about" component={About} />
 
-      <section className="about">
-        <Controls
-          className="section--Controls"
-          updateBox={updateBox}
-          gen={gen}
-          setGen={setGen}
-          gridSize={gridSize}
-          setGridSize={setGridSize}
-          populated2dArray={populated2dArray}
-          setPopulated2dArray={setPopulated2dArray}
-        />
-      </section>
-
-      <section className="section--Grid">
-        <Route exact path="/">
-          {" "}
+      <Route exact path="/">
+        <section className="about">
+          <Controls
+            className="section--Controls"
+            updateBox={updateBox}
+            gen={gen}
+            setGen={setGen}
+            gridSize={gridSize}
+            setGridSize={setGridSize}
+            populated2dArray={populated2dArray}
+            setPopulated2dArray={setPopulated2dArray}
+          />
+        </section>
+        <section className="section--Grid">
           <Grid
             updateBox={updateBox}
             gen={gen}
@@ -69,8 +67,8 @@ export default function App() {
             populated2dArray={populated2dArray}
             setPopulated2dArray={setPopulated2dArray}
           />
-        </Route>
-      </section>
+        </section>
+      </Route>
     </>
   );
 }
diff --git a/src/Box.js b/src/Box.js
index 70fcdea..ea1be4a 100644
--- a/src/Box.js
+++ b/src/Box.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect,useRef } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import "./styles.css";
 
 export default function Box({
@@ -7,21 +7,22 @@ export default function Box({
   coli,
   ri,
   populated2dArray,
-  updateBox
+  updateBox,
+  isRunning
 }) {
   let boxWidth = 100 / gridSize;
-let fontSize=`${boxWidth*20}%`;
+  let fontSize = `${boxWidth * 20}%`;
   return (
     <div
       className="box"
-      style={{fontSize,
+      style={{
+        fontSize,
         width: `${boxWidth}`,
-        ...(box===1&&{background:'black',color:'yellow'}),
-        ...(box===0&&{background:'yellow',color:'black'})
+        ...(box === 1 && { background: "black", color: "yellow" }),
+        ...(box === 0 && { background: "yellow", color: "black" })
       }}
       onClick={() => {
-        updateBox(populated2dArray, ri,coli);
-
+        !isRunning && updateBox(populated2dArray, ri, coli);
       }}
     >
       {box}