diff --git a/imports/ui/AddPlant.jsx b/imports/ui/AddPlant.jsx
index a1961ce..4f5dae4 100644
--- a/imports/ui/AddPlant.jsx
+++ b/imports/ui/AddPlant.jsx
@@ -22,8 +22,8 @@ class AddPlant extends React.Component{
     // search for arrow function for further syntax knowledge
     handleSubmit = (e) => {
         e.preventDefault();
-        console.log(this.state)
-        //this.props.addPlant   
+        //console.log(this.state)
+        this.props.addPlant(this.state)
     }
 
     
diff --git a/imports/ui/Plants.jsx b/imports/ui/Plants.jsx
new file mode 100644
index 0000000..7d289d9
--- /dev/null
+++ b/imports/ui/Plants.jsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { Table } from 'react-bootstrap';
+
+const Plants = ({plants}) => {
+
+  return (
+      <>
+        {
+            plants.length !== 0 ?
+            <Table striped bordered hover>
+                <thead>
+                    <tr>
+                    <th>Plant name</th>
+                    <th>Plant type</th>
+                    </tr>
+                </thead>
+                <tbody>
+                {
+                    plants.map((plant, index) => {
+                        return <tr key={index}>
+                                    <td>{plant.name}</td>
+                                    <td>{plant.type}</td>
+                                </tr>
+                    })
+                }
+                </tbody>
+            </Table> : null
+        }
+      </> 
+    );
+
+}
+
+export default Plants
\ No newline at end of file
diff --git a/imports/ui/Settings.jsx b/imports/ui/Settings.jsx
index 6f298e9..ab0a3ae 100644
--- a/imports/ui/Settings.jsx
+++ b/imports/ui/Settings.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import AddPlant from './AddPlant'
+import Plants from './Plants'
 import { Button, Form, Container, Row, Col, Table } from 'react-bootstrap';
 
 class Settings extends React.Component{
@@ -14,7 +15,7 @@ class Settings extends React.Component{
 
     // pass this function to the addplant comp as a prop
     addPlant = (plant) => {
-        plant.id = Math.random(); // rework
+        plant.id = Math.random(); // TODO rework
 
         let plants = [...this.state.plants, plant]; // create a copy of the array and add the new plant to it
 
@@ -47,32 +48,7 @@ class Settings extends React.Component{
 
                     <br></br>
                     
-                    {
-                        this.state.plants.length !== 0?
-                        <Table striped bordered hover>
-                        <thead>
-                            <tr>
-                            <th>Plant name</th>
-                            <th>Plant type</th>
-                            <th>Dirt type</th>
-                            <th></th>
-                            <th></th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                        {
-                            this.state.plants.map((plant, index) => {
-                                return <tr key={index}>
-                                            <td>{plant[0]}</td>
-                                            <td>{plant[1]}</td>
-                                            <td>{plant[2]}</td>
-                                        </tr>
-                            })
-                        }
-                        </tbody>
-                        </Table>
-                        : null
-                    }
+                    <Plants plants={this.state.plants}></Plants>
 
                 </Container>