diff --git a/public/Photos/valkosipuli1.jpeg b/public/Photos/valkosipuli1.jpeg
new file mode 100644
index 0000000..c65a2ad
Binary files /dev/null and b/public/Photos/valkosipuli1.jpeg differ
diff --git a/public/plantinfo.json b/public/plantinfo.json
new file mode 100644
index 0000000..c702c00
--- /dev/null
+++ b/public/plantinfo.json
@@ -0,0 +1,136 @@
+{
+    "id":             "Valkosipuli",
+    "type":           "Sipuli",
+    "description":    "Sipulilajike joka maistuu hyvältä",
+    "imagefile":      "../Photos/valkosipuli1.jpeg",
+    "logfile_output": "/path/to/plant/log/file.log",
+    "istutuspv":      "10.10.2019",
+
+  
+    "sensor": {
+      "waterpump_1": {
+        "pin":           23,
+        "pindirection":  "out",
+        "friendly_name": "Water pump (1)"
+      },
+      "nutrientpump_1": {
+        "pin":           24,
+        "pindirection":  "out",
+        "friendly_name": "Nutrient pump (1)"
+      },
+      "lightbulb_1": {
+        "pin":           18,
+        "pindirection":  "out",
+        "friendly_name": "Light bulb (1)"
+      },
+      "moisturedetect_1": {
+        "pin":           16,
+        "pindirection":  "in",
+        "friendly_name": "Moisture sensor (1)",
+        "data": {
+          "type":   "pindata",
+          "path":   "",
+          "parser": ""
+        }
+      },
+      "aciddetect_1": {
+        "pin":           26,
+        "pindirection":  "in",
+        "friendly_name": "pH sensor (1)",
+        "data": {
+          "type":   "file",
+          "path":   "/path/to/raw/device/data",
+          "parser": "name-of-internal-python-parser-function"
+        }
+      },
+      "tempdetect_1": {
+        "friendly_name": "Temperature sensor (1)"
+      },
+      "lightdetect_1": {
+        "pin":           8,
+        "pindirection":  "in",
+        "friendly_name": "Light detection sensor (1)",
+        "data": {
+          "type":   "file",
+          "path":   "/path/to/raw/device/data",
+          "parser": "name-of-internal-python-parser-function"
+        }
+      }
+    },
+  
+    "feedplant": {
+      "light": {
+        "time": {
+          "dates": ["mon, tue, wed, thu, fri, sat, sun"],
+          "clock": ["06.30-12.00","14.00-19.00"],
+          "clock_reverserange": false
+        },
+        "sensors": [ {
+          "trigger_sensor": {
+            "name":   "lightdetect_1",
+            "trigger_min": 5,
+            "trigger_max": 10
+          },
+          "activate_sensor": {
+            "name":             "lightbulb_1",
+            "ignoretrigger":    false,
+            "ignoredates":      false,
+            "ignoreclock":      false,
+            "minkeepalivetime": 5,
+            "maxkeepalivetime": 0
+          }
+        } ]
+      },
+      "nutrient": {
+        "time": {
+          "dates": ["mon, tue, wed, thu, fri, sat, sun"],
+          "clock": ["00.00-23.59"],
+          "clock_reverserange": false
+        },
+        "sensors": [ {
+          "trigger_sensor": {
+            "name":   "aciddetect_1",
+            "trigger_min": 0.9,
+            "trigger_max": 1.6
+          },
+          "activate_sensor": {
+            "name":            "nutrientpump_1",
+            "ignoretrigger":    false,
+            "ignoredates":      false,
+            "ignoreclo¿ck":      false,
+            "minkeepalivetime": 0.25,
+            "maxkeepalivetime": 5
+          }
+        } ]
+      },
+      "moisture": {
+        "time": {
+          "dates": ["mon, tue, wed, thu, fri, sat, sun"],
+          "clock": ["00.00-23.59"],
+          "clock_reverserange": false
+        },
+        "sensors": [ {
+          "trigger_sensor": {
+            "name":   "moisturedetect_1",
+            "trigger_min": 0,
+            "trigger_max": 1
+          },
+          "activate_sensor": {
+            "name":             "waterpump_1",
+            "ignoretrigger":    false,
+            "ignoredates":      false,
+            "ignoreclock":      false,
+            "minkeepalivetime": 0.25,
+            "maxkeepalivetime": 5
+          }
+        } ]
+      },
+      "temperature": {
+        "format":        "celcius",
+        "baselinevalue": 22, 
+        "threshold":     4,
+        "decimals":      3,
+        "loglevel":      0
+      }
+    }
+  }
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
index 2cc413d..54c62a7 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2,33 +2,47 @@
   text-align: center;
 }
 
+.wrapper h2{
+  font-size: 55px;
+}
+
 .wrapper{
   background: rgba(245, 245, 245, 0.6);
-  width: 60%;
+  width: 90%;
   padding: 10px;
+  font-size: 40px;
 }
 
 .plants{
   display:grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr;
   grid-column-gap: 15px;
   grid-row-gap: 10px;
 }
 
 .plant {
   background: rgb(240, 240, 240);
-  width: auto;
+  width: 40%;
   text-align: center;
   border: rgb(0, 0, 0) solid 1px;
+  font-size: 25px;
+}
+
+.plant h6{
+  font-size: 25px;
 }
 
 .sys1 {
+  width: 40%;
   margin-left:10px;
   margin-top:20px;
   background: rgb(240, 240, 240);
   text-align: center;
   border: rgb(0, 0, 0) solid 2px;
 }
+.sys1 h6{
+  font-size: 25px;
+}
 
 .App-logo {
   height: 40vmin;
@@ -54,13 +68,24 @@
   margin-top: 100px;
   margin-left: 300px;
   align-content:auto;
-  color: black;
-  background: gray;
+  color: white;
+
 }
 
 .modal-wrapper{
   display:grid;
+  grid-column-gap: 0px;
   grid-row-gap: 12px;
   grid-template-columns: 1fr 1fr 1fr 1fr;
 
+}
+
+.nav-link{
+  font-size: 30px;
+  align-content: center;
+}
+
+.navbar-brand{
+  font-size: 35px;
+
 }
\ No newline at end of file
diff --git a/src/Components/Fetchjson.js b/src/Components/Fetchjson.js
new file mode 100644
index 0000000..06ba847
--- /dev/null
+++ b/src/Components/Fetchjson.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+const Fetchjson = () => {
+
+    const fetchPlant = () =>{
+        fetch('../plantinfo.json')
+        .then(r => r.json())
+        .then(rData => console.log(rData))
+        
+    }
+
+
+    return (
+        <div>
+            <button fetchPlant={fetchPlant}>
+                Fetch
+            </button>
+
+        </div>
+    );
+};
+
+
+export default Fetchjson;
\ No newline at end of file
diff --git a/src/Components/Home.js b/src/Components/Home.js
index 40c904f..58b9b95 100644
--- a/src/Components/Home.js
+++ b/src/Components/Home.js
@@ -1,13 +1,16 @@
 import React from 'react';
-import ModalGrid from './ModalGrid';
 import ModalList from './ModalList';
+//import ModalGrid from './ModalGrid';
+
+
+// TODO fix modallist to display right item
 
 const Home = () => {
     return (
         <div>
             <div className="wrapper">
-                <h1 style={{padding:10}}>Welcome to TinyForest</h1>
-                <ModalList/>
+                <h1 style={{padding:10, fontSize:45}}>Welcome to TinyForest</h1>
+                <ModalList />
             </div>
         </div>
     );
diff --git a/src/Components/ModalList.js b/src/Components/ModalList.js
index b8f03ec..c092331 100644
--- a/src/Components/ModalList.js
+++ b/src/Components/ModalList.js
@@ -9,16 +9,17 @@ const ModalList = () => {
     const [open, setOpen] = React.useState(false);
 
     const imageList = [
-        { url: "../Photos/kolvaus1.jpeg", desc: "Kolvaus kuva" },
-        { url: "../Photos/rpiMoist.jpeg", desc: "rpi Vesianturi" },
-        { url: "../Photos/rpiPek.jpeg", desc: "Pekan testit" },
-        { url: "../Photos/rpiTemp.jpeg", desc: "rpi Lämpöanturi" },
-        { url: "../Photos/konstaRpi.jpeg", desc: "Konstan testit" },
-        { url: "../Photos/kokous1.jpeg", desc: "Kokous kuva" }
+        { id: "0", url: "../Photos/kolvaus1.jpeg", desc: "Kolvaus kuva" },
+        { id: "1", url: "../Photos/rpiMoist.jpeg", desc: "rpi Vesianturi" },
+        { id: "2", url: "../Photos/rpiPek.jpeg", desc: "Pekan testit" },
+        { id: "3", url: "../Photos/rpiTemp.jpeg", desc: "rpi Lämpöanturi" },
+        { id: "4", url: "../Photos/konstaRpi.jpeg", desc: "Konstan testit" },
+        { id: "5", url: "../Photos/kokous1.jpeg", desc: "Kokous kuva" }
     ]
+
     const handleOpen = (e) => {
         e.preventDefault();
-        imageList.filter((item, index) => parseInt(e.target.id ) !== index)
+        imageList.filter((item, index) => parseInt(e.target.id) !== index)
         setOpen(true);
     };
 
@@ -34,21 +35,18 @@ const ModalList = () => {
                     <button type="button" onClick={handleOpen}>
                         <img id="imageIndex" alt="Broken" src={item.url} width="250"></img>
                     </button>
-                    
-                    <Modal 
+
+                    <Modal
                         open={open}
                         onClose={handleClose}
                     >
-                        <div className="Modaldiv">
-                            <img alt="Broken" src={item.url} width="800"></img>
+                        <div  className="Modaldiv">
+                            <img id={index} alt="Broken" src={item.url} width="600" ></img>
                             <Typography variant="body1">{item.desc}</Typography>
-                            {console.log(index)}
                         </div>
-
                     </Modal>
                 </div>)
                 }
-                
             </div>
         </div>
     );
diff --git a/src/Components/Modalbox1.js b/src/Components/Modalbox1.js
index 7814bc7..68b25e8 100644
--- a/src/Components/Modalbox1.js
+++ b/src/Components/Modalbox1.js
@@ -24,7 +24,7 @@ const Modalbox1 = () => {
                 onClose={handleClose}
             >
                 <div className="Modaldiv">
-                    <img alt="Broken" src='../Photos/kolvaus1.jpeg' width="800"></img>
+                    <img alt="Broken" src='../Photos/kolvaus1.jpeg' width="600"></img>
                 </div>
             </Modal>
         </div>
diff --git a/src/Components/Modalbox2.js b/src/Components/Modalbox2.js
index b7f8afe..6f6e40b 100644
--- a/src/Components/Modalbox2.js
+++ b/src/Components/Modalbox2.js
@@ -24,7 +24,7 @@ const Modalbox2 = () => {
                 onClose={handleClose}
             >
                 <div className="Modaldiv">
-                    <img alt="Broken" src='../Photos/kokous1.jpeg' width="800"></img>
+                    <img alt="Broken" src='../Photos/kokous1.jpeg' width="600"></img>
                 </div>
             </Modal>
         </div>
diff --git a/src/Components/Modalbox3.js b/src/Components/Modalbox3.js
index e3f4bd2..a931b8b 100644
--- a/src/Components/Modalbox3.js
+++ b/src/Components/Modalbox3.js
@@ -24,7 +24,7 @@ const Modalbox3 = () => {
                 onClose={handleClose}
             >
                 <div className="Modaldiv">
-                    <img alt="Broken" src='../Photos/konstaRpi.jpeg' width="800"></img>
+                    <img alt="Broken" src='../Photos/konstaRpi.jpeg' width="600"></img>
                 </div>
             </Modal>
         </div>
diff --git a/src/Components/Modalbox4.js b/src/Components/Modalbox4.js
index a41b098..b911f1d 100644
--- a/src/Components/Modalbox4.js
+++ b/src/Components/Modalbox4.js
@@ -24,7 +24,7 @@ const Modalbox4 = () => {
                 onClose={handleClose}
             >
                 <div className="Modaldiv">
-                    <img alt="Broken" src='../Photos/rpiMoist.jpeg' width="800"></img>
+                    <img alt="Broken" src='../Photos/rpiMoist.jpeg' width="600"></img>
                 </div>
             </Modal>
         </div>
diff --git a/src/Components/Modalbox5.js b/src/Components/Modalbox5.js
index aa7b537..2256a02 100644
--- a/src/Components/Modalbox5.js
+++ b/src/Components/Modalbox5.js
@@ -24,7 +24,7 @@ const Modalbox5 = () => {
                 onClose={handleClose}
             >
                 <div className="Modaldiv">
-                    <img alt="Broken" src='../Photos/rpiPek.jpeg' width="800"></img>
+                    <img alt="Broken" src='../Photos/rpiPek.jpeg' width="600"></img>
                 </div>
             </Modal>
         </div>
diff --git a/src/Components/Modalbox6.js b/src/Components/Modalbox6.js
index b88f07d..5e67fc3 100644
--- a/src/Components/Modalbox6.js
+++ b/src/Components/Modalbox6.js
@@ -24,7 +24,7 @@ const Modalbox6 = props => {
                 onClose={handleClose}
             >
                 <div className="Modaldiv">
-                    <img alt="Broken" src='../Photos/rpiTemp.jpeg' width="800"></img>
+                    <img alt="Broken" src='../Photos/rpiTemp.jpeg' width="600"></img>
                 </div>
             </Modal>
         </div>
diff --git a/src/Components/Navigator.js b/src/Components/Navigator.js
index d38c533..cd6cbdd 100644
--- a/src/Components/Navigator.js
+++ b/src/Components/Navigator.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import '../App.css';
 
 const Navigator = () => {
     return (
diff --git a/src/Components/Plants.js b/src/Components/Plants.js
index ab6773b..dd1a0f3 100644
--- a/src/Components/Plants.js
+++ b/src/Components/Plants.js
@@ -1,31 +1,41 @@
-import React from 'react';
+import React, {useState, useEffect} from 'react';
 
 const Plants = () => {
+
+
+    // TODO Figure out layout and what information to pull form json
+    // Maby add pictures etc.
+
+
+    const [plant, setPlant] = useState([]);
+
+    useEffect(() => {
+        jsonFetch();
+    }, [])
+
+    const jsonFetch = () => {
+        fetch('../plantinfo.json')
+        .then((res) => res.json())
+        .then(data => setPlant(data))
+        .catch(err => console.error(err))
+    }
+
+    console.log(plant.imagefile)
+
     return (
         <div>
+            
             <div className="wrapper">
             <h2 style={{padding:10}}>Plant Information</h2>
-            <h6>Info about plants such as temperature moisturelevel etc.</h6>
             <div className="plants">
+    
                 <div className="plant">
-                <h6>Plant1</h6>
-                <text>Temperature: 20C</text><br></br>
-                <text>Moisture: 40%</text>
-                </div>
-                <div className="plant">
-                <h6>Plant2</h6>
-                <text>Temperature: 20C</text><br></br>
-                <text>Moisture: 40%</text>
-                </div>
-                <div className="plant">
-                <h6>Plant3</h6>
-                <text>Temperature: 20C</text><br></br>
-                <text>Moisture: 40%</text>
-                </div>
-                <div className="plant">
-                <h6>Plant4</h6>
-                <text>Temperature: 20C</text><br></br>
-                <text>Moisture: 40%</text>
+                <h6>Nimi: {plant.id}</h6>
+                <h6>Tyyppi: {plant.type}</h6>
+                <h6>Istutus päivä: {plant.istutuspv}</h6>
+                <img alt="Broken" src={plant.imagefile} width="200" ></img>
+                
+                
                 </div>
             </div>
             </div>
diff --git a/src/Components/Sysinfo.js b/src/Components/Sysinfo.js
index adf9bea..3b3524c 100644
--- a/src/Components/Sysinfo.js
+++ b/src/Components/Sysinfo.js
@@ -1,15 +1,17 @@
 import React from 'react';
 
 const Sysinfo = () => {
+
+    // TODO Pull system info etc.
+
     return (
         <div>
             <div className="wrapper">
             <h2 style={{padding:10}}>System Information</h2>
-            <h6>System stats such as Kernel Uptime etc.</h6>
             <div className="sys1">
-                <h6>Systeminfo</h6>
-                <text>Temperature: 47C</text><br></br>
-                <text>Kernel: abcd123</text>
+                <h5>Systeminfo</h5>
+                <h6>Temperature: Pull system temp</h6>
+                <h6>Kernel: Pull kernel info</h6>
             </div>
             </div>
         </div>
diff --git a/src/plantinfo.json b/src/plantinfo.json
new file mode 100644
index 0000000..1e5bf59
--- /dev/null
+++ b/src/plantinfo.json
@@ -0,0 +1,134 @@
+{
+  "id":             "Valkosipuli1",
+  "type":           "mountainplant",
+  "description":    "Desc: Valkosibable",
+  "imagefile":      "public/Photos/valkosipuli1.jpeg",
+  "logfile_output": "/path/to/plant/log/file.log",
+
+  "sensor": {
+    "waterpump_1": {
+      "pin":           23,
+      "pindirection":  "out",
+      "friendly_name": "Water pump (1)"
+    },
+    "nutrientpump_1": {
+      "pin":           24,
+      "pindirection":  "out",
+      "friendly_name": "Nutrient pump (1)"
+    },
+    "lightbulb_1": {
+      "pin":           18,
+      "pindirection":  "out",
+      "friendly_name": "Light bulb (1)"
+    },
+    "moisturedetect_1": {
+      "pin":           16,
+      "pindirection":  "in",
+      "friendly_name": "Moisture sensor (1)",
+      "data": {
+        "type":   "pindata",
+        "path":   "",
+        "parser": ""
+      }
+    },
+    "aciddetect_1": {
+      "pin":           26,
+      "pindirection":  "in",
+      "friendly_name": "pH sensor (1)",
+      "data": {
+        "type":   "file",
+        "path":   "/path/to/raw/device/data",
+        "parser": "name-of-internal-python-parser-function"
+      }
+    },
+    "tempdetect_1": {
+      "friendly_name": "Temperature sensor (1)"
+    },
+    "lightdetect_1": {
+      "pin":           8,
+      "pindirection":  "in",
+      "friendly_name": "Light detection sensor (1)",
+      "data": {
+        "type":   "file",
+        "path":   "/path/to/raw/device/data",
+        "parser": "name-of-internal-python-parser-function"
+      }
+    }
+  },
+
+  "feedplant": {
+    "light": {
+      "time": {
+        "dates": ["mon, tue, wed, thu, fri, sat, sun"],
+        "clock": ["06.30-12.00","14.00-19.00"],
+        "clock_reverserange": false
+      },
+      "sensors": [ {
+        "trigger_sensor": {
+          "name":   "lightdetect_1",
+          "trigger_min": 5,
+          "trigger_max": 10
+        },
+        "activate_sensor": {
+          "name":             "lightbulb_1",
+          "ignoretrigger":    false,
+          "ignoredates":      false,
+          "ignoreclock":      false,
+          "minkeepalivetime": 5,
+          "maxkeepalivetime": 0
+        }
+      } ]
+    },
+    "nutrient": {
+      "time": {
+        "dates": ["mon, tue, wed, thu, fri, sat, sun"],
+        "clock": ["00.00-23.59"],
+        "clock_reverserange": false
+      },
+      "sensors": [ {
+        "trigger_sensor": {
+          "name":   "aciddetect_1",
+          "trigger_min": 0.9,
+          "trigger_max": 1.6
+        },
+        "activate_sensor": {
+          "name":            "nutrientpump_1",
+          "ignoretrigger":    false,
+          "ignoredates":      false,
+          "ignoreclo¿ck":      false,
+          "minkeepalivetime": 0.25,
+          "maxkeepalivetime": 5
+        }
+      } ]
+    },
+    "moisture": {
+      "time": {
+        "dates": ["mon, tue, wed, thu, fri, sat, sun"],
+        "clock": ["00.00-23.59"],
+        "clock_reverserange": false
+      },
+      "sensors": [ {
+        "trigger_sensor": {
+          "name":   "moisturedetect_1",
+          "trigger_min": 0,
+          "trigger_max": 1
+        },
+        "activate_sensor": {
+          "name":             "waterpump_1",
+          "ignoretrigger":    false,
+          "ignoredates":      false,
+          "ignoreclock":      false,
+          "minkeepalivetime": 0.25,
+          "maxkeepalivetime": 5
+        }
+      } ]
+    },
+    "temperature": {
+      "format":        "celcius",
+      "baselinevalue": 22, 
+      "threshold":     4,
+      "decimals":      3,
+      "loglevel":      0
+    }
+  }
+}
\ No newline at end of file