diff --git a/0.png b/0.png
new file mode 100644
index 0000000..3632d38
Binary files /dev/null and b/0.png differ
diff --git a/A.png b/A.png
new file mode 100644
index 0000000..5819b13
Binary files /dev/null and b/A.png differ
diff --git a/B.png b/B.png
new file mode 100644
index 0000000..71d2701
Binary files /dev/null and b/B.png differ
diff --git a/C.png b/C.png
new file mode 100644
index 0000000..845fa41
Binary files /dev/null and b/C.png differ
diff --git a/text.html b/text.html
new file mode 100644
index 0000000..8c80fef
--- /dev/null
+++ b/text.html
@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,
+                                   initial-scale=1.0">
+    <title>Sudoku</title>
+    <style>
+        body {
+            background-color: #F5FCFF;
+        }
+
+        .container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-top: 50px;
+        }
+
+        .row {
+            display: flex;
+        }
+
+        .cell {
+            width: 80px;
+            height: 80px;
+            border: 1px solid black;
+            text-align: center;
+            line-height: 30px;
+            box-sizing: border-box;
+        }
+
+        .backgroundColor {
+            background-color: #EBF3E8;
+        }
+
+        .buttonContainer {
+            margin-top: 20px;
+            display: flex;
+            /* Ensure buttons are always displayed */
+            align-items: center;
+            justify-content: center;
+        }
+
+        .buttonContainer button {
+            margin-right: 10px;
+            margin-left: 10px;
+        }
+
+        .chosen {
+            margin-right: 10px;
+            margin-left: 10px;
+            background-color: #999999;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="container" id="container"></div>
+
+    <div class="buttonContainer"></div>
+
+    <script>
+        const letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];
+        const buttonContainer = document.querySelector('.buttonContainer');
+
+        letters.forEach(letter => {
+          const button = document.createElement('button');
+          const image = document.createElement('img');
+          image.src = `${letter}.png`;
+          button.id = `drawAnimal${letter}`;
+          button.appendChild(image);
+          buttonContainer.appendChild(button);
+        });
+
+        let chosenAnimal = '';
+
+        document.addEventListener("DOMContentLoaded", function () {
+            const container = document.getElementById("container");
+
+            // Function to generate a random Sudoku puzzle
+            function generateRandomSudoku() {
+                // Placeholder function for generating a random puzzle (9x9)
+                const puzzle = [
+                    ['E', 'C', '0', '0', 'G', '0', '0', '0', '0'],
+                    ['F', '0', '0', 'A', 'I', 'E', '0', '0', '0'],
+                    ['0', 'I', 'H', '0', '0', '0', '0', 'F', '0'],
+                    ['H', '0', '0', '0', 'F', '0', '0', '0', 'C'],
+                    ['D', '0', '0', 'H', '0', 'C', '0', '0', 'A'],
+                    ['G', '0', '0', '0', 'B', '0', '0', '0', 'F'],
+                    ['0', 'F', '0', '0', '0', '0', 'B', 'H', '0'],
+                    ['0', '0', '0', 'D', 'A', 'I', '0', '0', 'E'],
+                    ['0', '0', '0', '0', 'H', '0', '0', 'G', 'I']
+                ];
+                return puzzle;
+            }
+
+            // Function to create the Sudoku puzzle grid
+            function createSudokuGrid(puzzle) {
+                container.innerHTML = '';
+                puzzle.forEach((row) => {
+                    const rowElement = document.createElement('div');
+                    rowElement.classList.add('row');
+                    row.forEach((cell) => {
+                          const cellElement = document.createElement('button');
+                          const image = document.createElement('img');
+                          cellElement.classList.add('cell');
+                          cellElement.classList.add('backgroundColor');
+                          image.src = cell !== '' ? `${cell}.png` : `${cell}.png`;
+                          cellElement.appendChild(image);
+                          // cellElement.textContent = cell !== 0 ? cell : '';
+                          cellElement.onclick = addAnimal(cellElement);
+                          rowElement.appendChild(cellElement);
+                    });
+                    container.appendChild(rowElement);
+                });
+            }
+
+            // Initialize puzzle
+            let initialPuzzle = generateRandomSudoku();
+            let puzzle = JSON.parse(JSON.stringify(initialPuzzle));
+
+            // Function witch animal you should draw
+            function drawAnimal(animal) {
+                return function () {
+                    chosenAnimal = animal;
+                }
+            }
+
+            // Function to add Animal
+            function addAnimal(cellElement) {
+                return function() {
+                      if (chosenAnimal){
+                          const existingImage = cellElement.querySelector('img');
+
+                      if (existingImage) {
+                          cellElement.removeChild(existingImage); // Remove existing image
+                      }
+
+                      const image = document.createElement('img');
+                      image.src = `${chosenAnimal}.png`;
+                      cellElement.appendChild(image);
+                    }
+                };
+            }
+
+            // Initial puzzle creation
+            createSudokuGrid(puzzle);
+
+            // // Attach event listeners to buttons
+            // letters.forEach(letter => {
+            //   document.getElementById(`drawAnimal${letter}`)
+            //         .addEventListener("click", drawAnimal(letter));
+            // });
+            letters.forEach(letter => {
+              const button = document.getElementById(`drawAnimal${letter}`);
+              button.addEventListener("click", drawAnimal(letter));
+
+              // Initial state: check if the button's letter matches the initial `chosenAnimal`
+              if (letter === chosenAnimal) {
+                button.classList.add('chosen'); // Add a class to style the chosen button
+              }
+
+              button.addEventListener('click', () => {
+                chosenAnimal = letter;
+
+                // Remove the 'chosen' class from all buttons
+                letters.forEach(l => document.getElementById(`drawAnimal${l}`).classList.remove('chosen'));
+
+                // Add the 'chosen' class to the current button
+                button.classList.add('chosen');
+              });
+            });
+        });
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
