diff --git a/mqtt/__pycache__/mqtt_client.cpython-312.pyc b/mqtt/__pycache__/mqtt_client.cpython-312.pyc
new file mode 100644
index 0000000..be6ca40
Binary files /dev/null and b/mqtt/__pycache__/mqtt_client.cpython-312.pyc differ
diff --git a/src/index.html b/src/index.html
index f8e7ad1..2c4e0d5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -17,54 +17,7 @@
             <section class="content">
                 <section class="kant-links">
                     <table id="planten">
-                        <tr>
-                            <td>
-                                <a href="../src/kas_informatie.html">
-                                <article class="article-1">
-                                    <img src="images/Icon awesome-apple-alt.png" alt="">
-                                    <h2 class="plant-naam"></h2>
-                                </article>
-                            </a>
-                            </td>
-                            <td>
-                                <article>
-                                    <img src="images/Icon awesome-apple-alt.png" alt="">
-                                    <h2 class="plant-naam">Tomaat</h2>
-                                </article>
-                            </td>
-                        </tr>
-                        <!-- Second Row -->
-                        <tr>
-                            <td>
-                                <article>
-                                    <img src="images/Icon awesome-apple-alt.png" alt="">
-                                    <h2>Tomaat</h2>
-                                </article>
-                            </td>
-                            <td>
-                                <article>
-                                    <img src="images/Icon awesome-apple-alt.png" alt="">
-                                    <h2>Tomaat</h2>
-                                </article>
-                            </td>
-                        </tr>
-                        <!-- Third Row -->
-                        <tr>
-                            <td>
-                                <article>
-                                    <img src="images/Icon awesome-apple-alt.png" alt="">
-                                    <h2>Tomaat</h2>
-                                </article>          
-                        </td>
-                            <td>
-                                <article>
-                                    <img src="images/Icon awesome-apple-alt.png" alt="">
-                                    <h2>Tomaat</h2>
-                                </article>
-                            </td>
-                        </tr>
-                        <!-- Fourth Row -->
-                        <tr>
+                        <!-- <tr>
                             <td>
                                 <article>
                                     <img src="images/Icon awesome-apple-alt.png" alt="">
@@ -76,7 +29,7 @@
                                     <img id="toevoegen"src="images/Toevoegen.png" alt="">
                                 </article>
                             </td>
-                        </tr>
+                        </tr> -->
                     </table>
                     <div id="myModal" class="modal">
                         <span class="close">&times;</span>
diff --git a/src/js/planten.class.js b/src/js/planten.class.js
index 0faf7f1..b671e08 100644
--- a/src/js/planten.class.js
+++ b/src/js/planten.class.js
@@ -1,47 +1,143 @@
-dataHardObject = [
-    {
-        "id": 1,
-        "plantNaam": "Tomt",
-        "plantensoort": "Groente",
-        "plantGeteelt": 1
-    },
-    {
-        "id": 2,
-        "plantNaam": "Komkommer",
-        "plantensoort": "Groente",
-        "plantGeteelt": 1
-    }
-]
-
 class Plant {
-    constructor(dataObject) 
-    {
-      this.id = dataObject.id;
-      this.plantNaam = dataObject.plantNaam;
-      this.plantensoort = dataObject.plantensoort;
-      this.plantGeteelt = dataObject.plantGeteelt;
-    }
-
-    htmlData() {
-        if (this.plantGeteelt) 
-        {
-            const titel = document.querySelectorAll(".plant-naam");
-            for (let i = 0; i < titel.length; i++) {
-                const element = titel[i];
-                element.textContent = this.plantNaam;
-            }
-        }
+    constructor(dataObject) {
+        this.id = dataObject.id;
+        this.plantNaam = dataObject.plantNaam;
+        this.plantensoort = dataObject.plantensoort;
+        this.plantGeteelt = dataObject.plantGeteelt;
     }
 }
 
-// document.addEventListener('DOMContentLoaded', (event) => {
-//     const tomaatPlant = new Plant(dataHardObject[0]);
-//     tomaatPlant.htmlData();
-// });
+class PlantGrid {
+    constructor() {
+        this.grid = [];
+        this.cols = 2; // Number of columns
+        this.rows = 4; // Number of rows (including the row for the "Add" button)
 
-document.addEventListener("DOMContentLoaded", (event) => {
-    dataHardObject.forEach(plantObject => {
-        const plant = new Plant(plantObject);
-        plant.htmlData();
-    });
-})
\ No newline at end of file
+        // Initialize the grid with null values
+        for (let i = 0; i < this.rows; i++) {
+            this.grid[i] = new Array(this.cols).fill(null);
+        }
+
+        // Sample data
+        const dataHardObject = [
+            {
+                "id": 1,
+                "plantNaam": "Tomt",
+                "plantensoort": "Groente",
+                "plantGeteelt": 1
+            },
+            {
+                "id": 2,
+                "plantNaam": "Komkommer",
+                "plantensoort": "Groente",
+                "plantGeteelt": 1
+            },
+            {
+                "id": 3,
+                "plantNaam": "Appel",
+                "plantensoort": "Groente",
+                "plantGeteelt": 0
+            },
+            {
+                "id": 4,
+                "plantNaam": "KwamKwammer",
+                "plantensoort": "Groente",
+                "plantGeteelt": 1
+            },
+            {
+                "id": 5,
+                "plantNaam": ":p",
+                "plantensoort": "Groente",
+                "plantGeteelt": 1
+            },
+            {
+                "id": 6,
+                "plantNaam": ":3",
+                "plantensoort": "Groente",
+                "plantGeteelt": 1
+            },
+            {
+                "id": 7,
+                "plantNaam": "Groene",
+                "plantensoort": "Groente",
+                "plantGeteelt": 0
+            },
+            {
+                "id": 8,
+                "plantNaam": "test",
+                "plantensoort": "Groente",
+                "plantGeteelt": 0
+            },
+            {
+                "id": 9,
+                "plantNaam": "yippie",
+                "plantensoort": "Groente",
+                "plantGeteelt": 0
+            }
+        ];
+
+        // Only save objects that have plantGeteelt as 1
+        const filteredData = dataHardObject.filter(plantObject => plantObject.plantGeteelt === 1);
+
+        // Populate the grid with plant objects
+        filteredData.slice(0, 8).forEach((plantObject, index) => {
+            const plant = new Plant(plantObject);
+            const col = index % this.cols;
+            const row = Math.floor(index / this.cols);
+            this.grid[row][col] = plant;
+        });
+        
+
+        // Display the grid in the HTML table with id "planten"
+        this.displayGrid();
+    }
+
+    displayGrid() {
+        const plantenTable = document.getElementById("planten");
+
+        let itemCount = 0; // Counter for the number of items in the grid
+
+        this.grid.forEach((row, rowIndex) => {
+            const tr = document.createElement("tr");
+
+            row.forEach((plant, colIndex) => {
+                const td = document.createElement("td");
+
+                if (itemCount < 8) {
+                     if (plant) {
+                        // Handle regular plant items
+                        const article = document.createElement("article");
+                        const img = article.appendChild(document.createElement("img"));
+                        img.src = "images/Icon awesome-apple-alt.png";
+                        const h2 = article.appendChild(document.createElement("h2"));
+                        h2.classList.add("plant-naam");
+                        h2.textContent = plant.plantNaam;
+
+                        td.appendChild(article);
+                        itemCount++;
+                    } else if (rowIndex === this.rows -1 && colIndex === this.cols -1 && itemCount <= 7) {
+                        // Handle the "Add" button
+                        const article = document.createElement("article");
+                        const img = article.appendChild(document.createElement("img"));
+                        img.src = "images/Toevoegen.png";
+                        img.id = "toevoegen";
+                        img.alt = "Add";
+                        article.id = "modalButton";
+                        article.onclick = openModal;
+
+                        td.appendChild(article);
+                        itemCount++;
+                    }
+                }
+
+                tr.appendChild(td);
+            });
+
+            plantenTable.appendChild(tr);
+        });
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    const plantGrid = new PlantGrid();
+});