diff --git a/public/index.html b/public/index.html
index 467068797856ca7d569d40f3c611f76f6151b256..7f93b9c7ccfad575872454d15edac616fe22e953 100644
--- a/public/index.html
+++ b/public/index.html
@@ -41,12 +41,16 @@
             let numberOfZeros = GetNumberofZeroes();
 
             sudokuBoard = generateSudoku(numberOfZeros);
-            const rawString = sudokuBoard
-                .map((row) => row.map((num) => `<td>${num}</td>`).join(""))
-                .map((row) => `<tr>${row}</tr>`)
-                .join("");
+            let rawString = sudokuBoard
+            .map((row) => row.map((num) => `<td>${num}</td>`).join(""))
+            .map((row) => `<tr>${row}</tr>`)
+            .join("");
+
+console.log(rawString);
+
+let str = rawString.replace(/<td>0<\/td>/g, '<td><input type="number" max="9" min"1" value=""></td>');
+table.innerHTML = str;
 
-            table.innerHTML = rawString;
             console.log("Number of cells to figure out: " + numberOfZeros + ".");
         }
 
@@ -54,11 +58,11 @@
             let table = document.getElementById(tableId);
 
             sudokuBoard = solveSudoku(sudokuBoard);
-            const rawString = sudokuBoard
+            let rawString = sudokuBoard
                 .map((row) => row.map((num) => `<td>${num}</td>`).join(""))
                 .map((row) => `<tr>${row}</tr>`)
                 .join("");
-
+            
             table.innerHTML = rawString;
            
         }
diff --git a/public/styles.css b/public/styles.css
index d1dd61be3b854dc32911ecef4dca7872bef55abb..4afeb1e50b85cafa7d2e6f6386e4ede81adbfbc9 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -1,5 +1,6 @@
-* {
-    margin-bottom: 20px;
+#difficultySelector {
+margin-top: 3px;
+margin-bottom: 10px;
 }
 button {
     margin-top: 0px;
@@ -20,5 +21,42 @@ td {
     width: 30px; /* Adjust the width as needed */
     height: 30px; /* Adjust the height as needed */
     text-align: center;
+}
+tr:first-of-type td{
+    border-top-width: 2px;
+}
+tr td:first-child {
+    border-left-width: 2px;
+}
+/* Apply thicker borders for every third column */
+td:nth-child(3n) {
+    border-right-width: 2px;
+}
 
+/* Apply thicker borders for every third row */
+tr:nth-child(3n) td {
+    border-bottom-width: 2px;
+}
+tr:first-child {
+    border-bottom-width: 2px;
+}
+
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+input {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    /* Standard syntax */
+    /* appearance: none; */
+    /* Vendor prefixes for other browsers */
+    -moz-appearance: none;
+    -ms-appearance: none;
+    -o-appearance: none;
+    /* appearance: none; */
+    text-align: center;
 }
\ No newline at end of file