diff --git a/src/css/style.css b/src/css/style.css
index 294a339..a418aa3 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -32,7 +32,7 @@ body .mainContainer .goodgarden-logo {
   position: absolute;
   width: 10vw;
   left: 50%;
-  top: 2.5rem;
+  top: 4.1rem;
   transform: translateX(-50%);
 }
 body .mainContainer .informatie-kas-main-container {
diff --git a/src/css/style.scss b/src/css/style.scss
index 59e5c56..e7fa65c 100644
--- a/src/css/style.scss
+++ b/src/css/style.scss
@@ -71,7 +71,7 @@ body
             position: absolute;
             width: 10vw;
             left: 50%;
-            top: 2.5rem;
+            top: 4.1rem;
             transform: translateX(-50%);
         }
 
diff --git a/src/index.html b/src/index.html
index 54968d1..2f3aef1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,6 +6,7 @@
     <title>Document</title>
     <link rel="stylesheet" href="../src/css/style.css">
     <script src="../src/js/main.js" defer></script>
+    <script src="../src/js/planten.class.js"></script>
 </head>
 <body>
     <section class="mainContainer">
@@ -21,7 +22,7 @@
                                 <a href="../src/kas_informatie.html">
                                 <article class="article-1">
                                     <img src="images/Icon awesome-apple-alt.png" alt="">
-                                    <h2>Tomaat</h2>
+                                    <h2 class="plant-naam"></h2>
                                 </article>
                             </a>
                             </td>
@@ -79,7 +80,7 @@
                     </table>
                     <div id="myModal" class="modal">
                         <span class="close">&times;</span>
-                        <form action="http://localhost:3000/submit-form" method="post">
+                        <form action="http://localhost:3000/submit-form" method="post" onsubmit="return addplant()">
                 
                             <input type="text" name="plant_naam" id="plantNaam">
                             <label for="plantNaam">Naam van de plant</label>
@@ -97,10 +98,10 @@
                         </form>
                 
                     </div>
+                    <div id="overlay" onclick="closeOverlay"></div>
                 </section>
                 <!-- White space -->
                 <section>
-                    <p>a</p>
                 </section>
                 <section class="kant-rechts">
                     <section id="sectie-1">
diff --git a/src/js/planten.class.js b/src/js/planten.class.js
new file mode 100644
index 0000000..db55ccc
--- /dev/null
+++ b/src/js/planten.class.js
@@ -0,0 +1,32 @@
+dataHardObject = {
+    "id": 1,
+    "plantnaam": "Tomaat",
+    "plantensoort": "Groente",
+    "plantGeteelt": 1
+}
+
+// Nieuwe planten aanmaken in de table
+// function hardcodeData(dataHardObject) 
+// {
+//     dataHardObject => "id"    
+// }
+
+class Plant {
+    constructor(dataHardObject) {
+      this.id = dataHardObject.id;
+      this.plantNaam = dataHardObject.plantNaam;
+      this.plantensoort = dataHardObject.plantensoort;
+      this.plantGeteelt = dataHardObject.plantGeteelt;
+    }
+
+    htmlData(plantNaam) {
+        if (this.plantGeteelt) 
+        {
+            const titel = document.querySelector(".plant-naam");
+            titel.textContent = this.plantNaam;
+        }
+    }
+}
+
+const tomaatPlant = new Plant(dataHardObject);
+tomaatPlant.htmlData();
\ No newline at end of file
