diff --git a/public/index.html b/public/index.html
index ec54be0..62dbf42 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,10 +3,46 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>React Mini</title>
+    <title>Grid Maker</title>
+    <link rel="stylesheet" href="style.css" />
     <script defer src="main.js"></script>
   </head>
   <body>
-    <div id="root"></div>
+    <!-- Please feel free to change the HTML as you see fit! This is just a starting point. -->
+    <div id="root">
+      <h1>Grid Maker</h1>
+      <table>
+        <tbody>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+        </tbody>
+      </table>
+      <div>
+        <button id="add-row">Add Row</button>
+        <button id="delete-row">Delete Row</button> 
+        <button id="add-column">Add Column</button>
+         <button id="delete-column">Delete Column</button>
+        <select id="color-select">
+          <option value="red">Red</option>
+          <option value="blue">Blue</option>
+        </select>
+        <button id="fill-uncolored">Fill Uncolored</button>
+        <button id="fill-grid">Fill Grid</button>
+        <button id="clear-grid">Clear Grid</button>
+      </div>
+    </div>
   </body>
 </html>
diff --git a/src/app.jsx b/src/app.jsx
index 1eebc0c..f2d0a78 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -12,3 +12,42 @@ const App = () => {
 
 const root = createRoot(document.getElementById("root"));
 root.render(<App />);
+
+const addRow = () => {
+        setNumRows(prevNumRows => {
+            const newNumRows = prevNumRows + 1;
+            const newRow = Array(numCols).fill('white');
+            setGrid(prevGrid => [...prevGrid, newRow]);
+            return newNumRows;
+        });
+    };
+
+    const deleteRow = () => {
+        setNumRows(prevNumRows => {
+            if (prevNumRows > 1) {
+                const newNumRows = prevNumRows - 1;
+                setGrid(prevGrid => prevGrid.slice(0, newNumRows));
+                return newNumRows;
+            }
+            return prevNumRows;
+        });
+    };
+
+    const addColumn = () => {
+        setNumCols(prevNumCols => {
+            const newNumCols = prevNumCols + 1;
+            setGrid(prevGrid => prevGrid.map(row => [...row, 'white']));
+            return newNumCols;
+        });
+    };
+
+    const deleteColumn = () => {
+        setNumCols(prevNumCols => {
+            if (prevNumCols > 1) {
+                const newNumCols = prevNumCols - 1;
+                setGrid(prevGrid => prevGrid.map(row => row.slice(0, newNumCols)));
+                return newNumCols;
+            }
+            return prevNumCols;
+        });
+    };
\ No newline at end of file
