diff --git a/api/auth.js b/api/auth.js
index 4e26980..0c29044 100644
--- a/api/auth.js
+++ b/api/auth.js
@@ -30,7 +30,6 @@ export const login = async (email, password) => {
   return await axios
     .post(AUTH_LOGIN, user)
     .then(res => res.data)
-  //   .catch(error => this.handleErrorResponse(error));
 }
 
 export const logout = () => {
diff --git a/components/Header/index.js b/components/Header/index.js
index ef48e76..17572de 100644
--- a/components/Header/index.js
+++ b/components/Header/index.js
@@ -109,7 +109,7 @@ class Header extends React.Component {
                     Add Apiary
                   </Button>
                 }
-                {user.role === "beelover" &&
+                {/* {user.role === "beelover" &&
                   <Button
                     variant="contained"
                     color={this.state.isTop ? "secondary" : "white"}
@@ -118,10 +118,10 @@ class Header extends React.Component {
                   >
                     Fundings
                   </Button>
-                }
+                } */}
                 <Link
                   variant="button"
-                  href={"/" + user.role}
+                  // href={"/" + user.role}
                   className={this.state.isTop ? classes.linkBlack : classes.linkWhite}
                 >
                   {"Hello " + user.name}
diff --git a/components/Hero/index.js b/components/Hero/index.js
index ac86b7a..e737d10 100644
--- a/components/Hero/index.js
+++ b/components/Hero/index.js
@@ -1,15 +1,9 @@
-import { Container, Typography } from "@material-ui/core";
+import { Container } from "@material-ui/core";
 import { makeStyles } from '@material-ui/core/styles';
-import Card from "@material-ui/core/Card";
-import CardHeader from "@material-ui/core/CardHeader";
-import StarIcon from "@material-ui/core/SvgIcon/SvgIcon";
-import CardContent from "@material-ui/core/CardContent";
 import Grid from "@material-ui/core/Grid";
 import React from "react";
 
 import taxiWaiting from '../../assets/images/taxiWaiting.png';
-import vector from '../../assets/images/Vector.png';
-import Logo from "../../assets/images/logo/black_on_yellow.png";
 
 const useStyles = makeStyles(theme => ({
     heroContent: {
@@ -33,27 +27,7 @@ const useStyles = makeStyles(theme => ({
         textAlign: 'center'
     }
 }));
-/*
-<Typography
-    component="h1"
-    variant="h2"
-    align="center"
-    color="textPrimary"
-    gutterBottom
->
-    Hero Message
-</Typography>
-<Typography
-variant="h5"
-align="center"
-color="textSecondary"
-component="p"
-    >
-    Quickly build an effective pricing table for your potential customers
-with this layout. It&apos;s built with default Material-UI components
-with little customization.
-</Typography>
-*/
+
 function Hero() {
   const classes = useStyles();
   return (
diff --git a/components/LineChart/index.js b/components/LineChart/index.js
index 3a239a5..1a077b5 100644
--- a/components/LineChart/index.js
+++ b/components/LineChart/index.js
@@ -1,7 +1,6 @@
 // <reference path="../Plot/react-vis.d.ts"/>
 import React, { Component } from "react";
 import Button from "@material-ui/core/Button";
-//import "react-vis/dist/style.css";
 import {
   XYPlot,
   XAxis,
@@ -18,12 +17,16 @@ const styles = theme => ({
   ButtonContent: {
     padding: theme.spacing(1, 5, 6),
     marginTop: 6
+  },
+  button: {
+    margin: theme.spacing(1, 0.5),
+    alignSelf: "center"
   }
 });
 
 class LineChart extends Component {
   render() {
-    const { labels, values } = this.props;
+    const { labels, values, x_axis, y_axis } = this.props;
     const { classes } = this.props;
     const error =
       this.props.labels.length == 0 && this.props.values.length == 0;
@@ -34,7 +37,7 @@ class LineChart extends Component {
           <HorizontalGridLines style={{ stroke: "#B7E9ED" }} />
           <VerticalGridLines style={{ stroke: "#B7E9ED" }} />
           <XAxis
-            title="X Axis"
+            title={this.props.x_axis}
             tickFormat={v => labels[v]}
             tickLabelAngle={-45}
             style={{
@@ -44,12 +47,13 @@ class LineChart extends Component {
             }}
           />
 
-          <YAxis title="Y Axis" />
+          <YAxis title={this.props.y_axis} />
           <LineSeries
             className="first-series"
             data={values}
             style={{
               strokeLinejoin: "round",
+              fill: "none",
               strokeWidth: 4
             }}
           />
@@ -58,53 +62,88 @@ class LineChart extends Component {
         {!error ? (
           <Container className={classes.ButtonContent}>
             <Button
+              className={classes.button}
               variant="outlined"
               color="secondary"
               size="small"
-              onClick={() => this.props.handleChangeData("temperature")}
+              onClick={() => this.props.handleChangeData("temperature", null)}
             >
               Temperature
             </Button>
             <Button
+              className={classes.button}
               variant="outlined"
               color="secondary"
               size="small"
-              onClick={() => this.props.handleChangeData("pressure")}
+              onClick={() => this.props.handleChangeData("pressure", null)}
             >
               Pressure
             </Button>
             <Button
+              className={classes.button}
               variant="outlined"
               color="secondary"
               size="small"
-              onClick={() => this.props.handleChangeData("light")}
+              onClick={() => this.props.handleChangeData("light", null)}
             >
               Light
             </Button>
             <Button
+              className={classes.button}
               variant="outlined"
               color="secondary"
               size="small"
-              onClick={() => this.props.handleChangeData("noise")}
+              onClick={() => this.props.handleChangeData("noise", null)}
             >
               Noise
             </Button>
             <Button
+              className={classes.button}
               variant="outlined"
               color="secondary"
               size="small"
-              onClick={() => this.props.handleChangeData("accelerometer")}
+              onClick={() => this.props.handleChangeData("accelerometer", null)}
             >
               Accelerometer
             </Button>
             <Button
+              className={classes.button}
               variant="outlined"
               color="secondary"
               size="small"
-              onClick={() => this.props.handleChangeData("humidity")}
+              onClick={() => this.props.handleChangeData("humidity", null)}
             >
               Humidity
             </Button>
+            <Container>
+              <Button
+                className={classes.button}
+                variant="contained"
+                color="secondary"
+                size="small"
+                onClick={() => this.props.handleChangeData(null, "hour")}
+              >
+                Hour
+              </Button>
+              <Button
+                className={classes.button}
+                variant="contained"
+                color="secondary"
+                size="small"
+                onClick={() => this.props.handleChangeData(null, "minute")}
+              >
+                Minute
+              </Button>
+              <Button
+                className={classes.button}
+                variant="contained"
+                color="secondary"
+                size="small"
+                onClick={() => this.props.handleChangeData(null, "day")}
+              >
+                Day
+              </Button>
+            </Container>
           </Container>
         ) : (
           ""
diff --git a/components/OverallChart/index.js b/components/OverallChart/index.js
index f6efa64..d70f24b 100644
--- a/components/OverallChart/index.js
+++ b/components/OverallChart/index.js
@@ -10,6 +10,9 @@ class OverallChart extends Component {
       this.props.values.length != 0
         ? this.props.values
         : new Array(6).fill("loading");
+    var status_color = "";
+    if (this.props.status == "healthy") status_color = "#4bb543";
+    else status_color = "#ff0000";
 
     const newData = [
       { x: 3.2, y: 2.4, reading: values[0], type: "Temperature", unity: "ºC" },
@@ -97,9 +100,9 @@ class OverallChart extends Component {
             animation
             className="hexbin-example"
             style={{
-              stroke: "black",
+              stroke: status_color,
               strokeLinejoin: "round",
-              strokeWidth: 3
+              strokeWidth: 2
             }}
             xOffset={0}
             yOffset={0}
diff --git a/pages/beekeeper/hives/add.js b/pages/beekeeper/hives/add.js
index 5c90072..43882f8 100644
--- a/pages/beekeeper/hives/add.js
+++ b/pages/beekeeper/hives/add.js
@@ -192,7 +192,7 @@ class AddHivePage extends Component {
               onChange={this.handleHiveInputChange("bee_number")}
             />
             <FormControl required fullWidth margin="normal">
-              <InputLabel id="apiary_id-label">Apiary ID</InputLabel>
+              <InputLabel id="apiary_id-label">Apiary</InputLabel>
               <Select
                 labelId="apiary_id-label"
                 id="apiary_id"
@@ -200,7 +200,7 @@ class AddHivePage extends Component {
               >
                 {apiaries.map(e => (
                   <MenuItem value={e.id} key={e.id}>
-                    {e.id}
+                    {e.name}
                   </MenuItem>
                 ))}
               </Select>
diff --git a/pages/beekeeper/hives/index.js b/pages/beekeeper/hives/index.js
index 54abee9..73c65d4 100644
--- a/pages/beekeeper/hives/index.js
+++ b/pages/beekeeper/hives/index.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import Router  from "next/router";
+import Router from "next/router";
 import axios from "axios";
 import {
   CssBaseline,
@@ -36,6 +36,9 @@ const styles = theme => ({
     marginTop: 0,
     marginBottom: 50
   },
+  card: {
+   color: theme.palette.primary.main,
+  },
   hives: {
     marginTop: theme.spacing(5),
     marginBottom: theme.spacing(10)
@@ -54,6 +57,7 @@ const styles = theme => ({
 
 // todo: put in .env => process.env.APIARIES_API
 const APIARIES_API = "http://localhost:3001/api/v1/beekeeper/apiaries/";
+const FUNDINGS_API = "http://localhost:3001/api/v1/beekeeper/fundings/";
 
 class BeekeeperHivesPage extends Component {
   static contextType = AuthContext;
@@ -77,7 +81,7 @@ class BeekeeperHivesPage extends Component {
     if (!user || user.role != "beekeeper") {
       Router.push("/login");
     }
-    
+
     let config = {
       headers: {
         Authorization: "Bearer " + localStorage.token,
@@ -115,18 +119,51 @@ class BeekeeperHivesPage extends Component {
 
     try {
       const res = await axios.get(HIVES_API, config);
-      await Promise.all(
-        res.data.hives.map(hive => {
-          hive.apiary_id = apiary_id;
-          hive.apiary_name = apiary_name;
-        })
-      );
-      return res.data.hives;
+      const hives = await Promise.all(res.data.hives.map(hive =>
+        this.getHiveFunding(hive, apiary_id, apiary_name)
+      ))
+      return hives;
     } catch (error) {
       this.setState({ error: "Error Get Hives" });
     }
   };
 
+  getHiveFunding = async (hive, apiary_id, apiary_name) => {
+    const HIVE_FUNDING_API = APIARIES_API + apiary_id + "/hives/" + hive.id;
+
+    let config = {
+      headers: {
+        Authorization: "Bearer " + localStorage.getItem("token"),
+        "Content-Type": "application/json"
+      }
+    };
+
+    const res = await axios.get(HIVE_FUNDING_API, config);
+
+    const fundingInfo = res.data.fundings.reduce(function (accFundings, fund) {
+      const idx = accFundings.findIndex(h => h.beelover === fund.user_name);
+      if (idx >= 0) {
+        accFundings[idx].funded += fund.price;
+      }
+      else {
+        accFundings.push({ beelover: fund.user_name, funded: fund.price });
+      }
+      return accFundings;
+    }, []);
+
+    const funding = fundingInfo.reduce(function (nFundings, fund) {
+      nFundings.beelovers++;
+      nFundings.funded += fund.funded;
+      return nFundings;
+    }, { beelovers: 0, funded: 0 });
+
+    const hiveInfo = { ...hive, apiary_id, apiary_name, beelovers: funding.beelovers, funded: funding.funded };
+
+    return hiveInfo;
+  }
+
+
+
   handleApiaryErrorResponse(error) {
     if (error.response && error.response.data.hasOwnProperty("errors")) {
       this.setState({ error: "Error Get Apiaries" });
@@ -135,6 +172,21 @@ class BeekeeperHivesPage extends Component {
     }
   }
 
+  handleStatistics(n, status, desc, id1, id2, n_bees) {
+    Router.push({
+      pathname: "/statistics",
+      query: {
+        name: n,
+        status: status,
+        description: desc,
+        hive: id1,
+        apiary: id2,
+        bee_number: n_bees
+      },
+      shallow: true
+    });
+  }
+
   render() {
     const { classes, state } = this.props;
     const { hives } = this.state;
@@ -148,7 +200,7 @@ class BeekeeperHivesPage extends Component {
           </Typography>
           <Container className={classes.hives}>
             <Grid container spacing={5} alignItems="center">
-              <Grid item xs={12} sm={6} md={6}>
+              <Grid item xs={10} sm={4} md={4}>
                 <Fab
                   href="/beekeeper/hives/add"
                   color="primary"
@@ -160,7 +212,7 @@ class BeekeeperHivesPage extends Component {
                 </Fab>
               </Grid>
               {hives.map(hive => (
-                <Grid item xs={12} sm={6} md={6}>
+                <Grid item xs={10} sm={4} md={4}>
                   <Card>
                     <CardContent>
                       <Typography
@@ -177,15 +229,27 @@ class BeekeeperHivesPage extends Component {
                         variant="subtitle1"
                         color="textPrimary"
                       >
-                        Apiary {hive.apiary_name}
+                        {hive.apiary_name}
+                      </Typography>
+                      <Typography
+                        className={classes.cardHive}
+                        component="h2"
+                        variant="overline"
+                        color="textPrimary"
+                      >
+                        {hive.beelovers} {hive.beelovers === 1 ? "beelover" : "beelovers"} funded {hive.funded}€
                       </Typography>
                       <CardActions>
                         <Button
-                          href={
-                            "/statistics?apiary=" +
-                            hive.apiary_id +
-                            "&hive=" +
-                            hive.id
+                          onClick={() =>
+                            this.handleStatistics(
+                              hive.name,
+                              hive.status,
+                              hive.description,
+                              hive.id,
+                              hive.apiary_id,
+                              hive.bee_number
+                            )
                           }
                           fullWidth
                           variant="contained"
diff --git a/pages/beekeeper/index.js b/pages/beekeeper/index.js
index 2e341d3..fa68389 100644
--- a/pages/beekeeper/index.js
+++ b/pages/beekeeper/index.js
@@ -69,6 +69,7 @@ class ApiaryPage extends Component {
     if (!user || user.role != "beekeeper") {
       Router.push("/login");
     }
+    else { Router.push("/beekeeper/hives");}
 
     var params = {};
     location.search
diff --git a/pages/beelover/fund/index.js b/pages/beelover/fund/index.js
new file mode 100644
index 0000000..3b6527e
--- /dev/null
+++ b/pages/beelover/fund/index.js
@@ -0,0 +1,219 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import axios from "axios";
+import {
+  CssBaseline,
+  Typography,
+  Container,
+  Button,
+  TextField,
+} from "@material-ui/core";
+import { withStyles } from "@material-ui/core/styles";
+
+import { Footer, Header } from "../../../components";
+import { AuthContext } from '../../../providers/auth';
+
+
+const styles = theme => ({
+  "@global": {
+    body: {
+      backgroundColor: theme.palette.common.white
+    },
+    ul: {
+      margin: 0,
+      padding: 0
+    },
+    li: {
+      listStyle: "none"
+    }
+  },
+  content: {
+    padding: theme.spacing(5, 0, 0),
+    marginTop: 0,
+    marginBottom: 0
+  },
+  payment: {
+    marginTop: theme.spacing(5),
+    marginBottom: theme.spacing(10)
+  },
+  payButton: {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(5)
+  }
+});
+
+const FUNDINGS_API = "http://localhost:3001/api/v1/beelover/fundings/";
+
+class PaymentPage extends Component {
+  static contextType = AuthContext;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      funding: {
+        hive_id: "",
+        price_cents: 200,
+      },
+      error: false,
+    };
+    this.handleFundPayment = this.handleFundPayment.bind(this);
+  }
+
+  componentDidMount() {
+    const { user } = this.context;
+    if (!user || user.role != "beelover") {
+      Router.push("/login");
+    }
+    var params = {};
+    location.search
+      .slice(1)
+      .split("&")
+      .map(a => {
+        params[a.split("=")[0]] = a.split("=")[1];
+      });
+
+
+    this.setState({
+      funding: { ...this.state.funding, hive_id: params["hive"] }
+    });
+  }
+
+  handleFundPayment = async () => {
+    let { funding } = this.state;
+
+    console.log(this.state);
+
+    let config = {
+      headers: {
+        Authorization: "Bearer " + localStorage.getItem("token")
+      }
+    };
+
+    let res = await axios.post(FUNDINGS_API, funding, config);
+
+    if (res.status === 201) {
+      Router.push("/beelover/hives");
+    }
+    else {
+      this.setState({ error: true });
+    }
+  }
+
+
+  render() {
+    const { classes } = this.props;
+    return (
+      <React.Fragment>
+        <CssBaseline />
+        <Header />
+        <Container maxWidth="sm" align="center" className={classes.content}>
+          <Typography component="h1" variant="h2" align="center">
+            Payment
+          </Typography>
+          <Container className={classes.payment}>
+            <TextField
+              fullWidth
+              autoFocus
+              margin="normal"
+              id="name"
+              key="name"
+              autoComplete="name"
+              label="Name"
+              InputLabelProps={{
+                shrink: true,
+              }}
+            />
+            <TextField
+              fullWidth
+              InputLabelProps={{
+                shrink: true,
+              }}
+              margin="normal"
+              id="address"
+              key="address"
+              autoComplete="address"
+              label="Address"
+            />
+            <TextField
+              fullWidth
+              InputProps={{
+                readOnly: true,
+              }}
+              margin="normal"
+              id="price"
+              key="price"
+              type="number"
+              label="Price in €"
+              disabled
+              defaultValue={200}
+            />
+            <TextField
+              fullWidth
+              InputLabelProps={{
+                shrink: true,
+              }}
+              margin="normal"
+              id="card-number"
+              key="card-number"
+              autoComplete="card-number"
+              label="Card Number"
+            />
+            <TextField
+              fullWidth
+              InputLabelProps={{
+                shrink: true,
+              }}
+              margin="normal"
+              id="cvc"
+              key="cvc"
+              autoComplete="cvc"
+              label="CVC"
+            />
+            <TextField
+              InputLabelProps={{
+                shrink: true,
+              }}
+              margin="dense"
+              id="Month"
+              type="number"
+              autoComplete="Month"
+              label="Month"
+            />
+            <TextField
+              InputLabelProps={{
+                shrink: true,
+              }}
+              margin="dense"
+              id="Year"
+              type="number"
+              autoComplete="Year"
+              label="Year"
+            />
+            <Button
+              fullWidth
+              variant="contained"
+              color="warning"
+              className={classes.payButton}
+              onClick={this.handleFundPayment}
+            >
+              PAY NOW
+            </Button>
+            {this.state.error && (
+              <Typography
+                color="error"
+                component="h1"
+                variant="body1"
+                align="center"
+              >
+                Fund was not successful
+            </Typography>
+            )}
+          </Container>
+        </Container>
+        <Footer />
+      </React.Fragment>
+    );
+  }
+}
+
+export default withStyles(styles)(PaymentPage);
diff --git a/pages/beelover/hives/add.js b/pages/beelover/hives/add.js
index cdd5474..1f21722 100644
--- a/pages/beelover/hives/add.js
+++ b/pages/beelover/hives/add.js
@@ -84,7 +84,6 @@ class AddHivePage extends Component {
 
     let res = await axios.get(endpoint, config);
     if (res.hasOwnProperty("data")) {
-      console.log(res.data.hives);
       this.setState({ hives: res.data.hives, error: "" });
     }
   }
@@ -142,7 +141,7 @@ class AddHivePage extends Component {
                       <CardActions>
                         <Button
                           href={
-                            "/beelover/hives/fund?hive=" +
+                            "/beelover/fund?hive=" +
                             hive.id
                           }
                           fullWidth
diff --git a/pages/beelover/hives/index.js b/pages/beelover/hives/index.js
index c0d99da..fdaa032 100644
--- a/pages/beelover/hives/index.js
+++ b/pages/beelover/hives/index.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import Router  from "next/router";
+import Router from "next/router";
 import {
   CssBaseline,
   Typography,
@@ -52,17 +52,17 @@ const styles = theme => ({
   }
 });
 
-// todo: put in .env => process.env.FUNDINGS_API
 const FUNDINGS_API = "http://localhost:3001/api/v1/beelover/fundings/";
+const HIVES_API = "http://localhost:3001/api/v1/beelover/hives/";
 
 class BeeloverHivesPage extends Component {
   static contextType = AuthContext;
-  
+
   constructor(props) {
     super(props);
     this.state = {
-      apiaries: [],
-      hives: []
+      fundings: [],
+      hives: [],
     };
   }
 
@@ -73,7 +73,7 @@ class BeeloverHivesPage extends Component {
     }
     let config = {
       headers: {
-        Authorization: "Bearer " + localStorage.token,
+        Authorization: "Bearer " + localStorage.getItem("token"),
         "Content-Type": "application/json"
       }
     };
@@ -85,38 +85,46 @@ class BeeloverHivesPage extends Component {
   }
 
   handleApiaryResponse = async res => {
-    if (res.data.hasOwnProperty("apiaries")) {
-      const apiaries = res.data.apiaries;
-      const hives = await Promise.all(
-        apiaries.map(a => this.getHives(a.id, a.name))
+    if (res.data.hasOwnProperty("fundings")) {
+      const fundings = res.data.fundings;
+
+      const fundingsInfo = await Promise.all(
+        fundings.map(a => this.getHiveInfo(a.hive_id, a.price_cents))
       );
-      this.setState({ apiaries, hives: hives.flat() });
+
+      const hives = fundingsInfo.reduce(function (hivesFunded, hive) {
+        const idx = hivesFunded.findIndex(h => h.id === hive.id);
+        if (idx >= 0) {
+          hivesFunded[idx].price += hive.price;
+        }
+        else {
+          hivesFunded.push(hive);
+        }
+        return hivesFunded;
+      }, []);
+
+      this.setState({ fundings, hives });
     } else {
-      this.setState({ error: "Apiaries Not Found" });
+      this.setState({ error: "Fundings Not Found" });
     }
   };
 
-  getHives = async (apiary_id, apiary_name) => {
-    const HIVES_API = FUNDINGS_API + apiary_id + "/hives";
+  getHiveInfo = async (hive_id, price) => {
+    const HIVE_INFO_API = HIVES_API + hive_id;
 
     let config = {
       headers: {
-        Authorization: "Bearer " + localStorage.token,
+        Authorization: "Bearer " + localStorage.getItem("token"),
         "Content-Type": "application/json"
       }
     };
 
     try {
-      const res = await axios.get(HIVES_API, config);
-      await Promise.all(
-        res.data.hives.map(hive => {
-          hive.apiary_id = apiary_id;
-          hive.apiary_name = apiary_name;
-        })
-      );
-      return res.data.hives;
+      const res = await axios.get(HIVE_INFO_API, config);
+      res.data["price"] = price
+      return res.data;
     } catch (error) {
-      this.setState({ error: "Error Get Hives" });
+      this.setState({ error: "Error Get Hive Info" });
     }
   };
 
@@ -128,6 +136,21 @@ class BeeloverHivesPage extends Component {
     }
   }
 
+  handleStatistics(n, status, desc, id1, id2, n_bees) {
+    Router.push({
+      pathname: "/statistics",
+      query: {
+        name: n,
+        status: status,
+        description: desc,
+        hive: id1,
+        apiary: id2,
+        bee_number: n_bees
+      },
+      shallow: true
+    });
+  }
+
   render() {
     const { classes } = this.props;
     const { hives } = this.state;
@@ -140,8 +163,8 @@ class BeeloverHivesPage extends Component {
             My Hives
           </Typography>
           <Container className={classes.hives}>
-            <Grid container spacing={5} alignItems="center">
-              <Grid item xs={12} sm={6} md={6}>
+            <Grid container spacing={3} alignItems="center">
+              <Grid item xs={10} sm={4} md={4}>
                 <Fab
                   href="/beelover/hives/add"
                   color="primary"
@@ -153,7 +176,7 @@ class BeeloverHivesPage extends Component {
                 </Fab>
               </Grid>
               {hives.map(hive => (
-                <Grid item xs={12} sm={6} md={6}>
+                <Grid item xs={10} sm={4} md={4}>
                   <Card>
                     <CardContent>
                       <Typography
@@ -167,26 +190,41 @@ class BeeloverHivesPage extends Component {
                       <Typography
                         className={classes.cardHive}
                         component="h2"
-                        variant="subtitle1"
+                        variant="overline"
                         color="textPrimary"
                       >
-                        Apiary {hive.apiary_name}
+                        You funded {hive.price}€
                       </Typography>
-                      <CardActions>
-                        <Button
-                          href={
-                            "/statistics?apiary=" +
-                            hive.apiary_id +
-                            "&hive=" +
-                            hive.id
-                          }
-                          fullWidth
-                          variant="contained"
-                          color="warning"
-                        >
-                          See statistics
+                      <Button
+                        onClick={() =>
+                          this.handleStatistics(
+                            hive.name,
+                            hive.status,
+                            hive.description,
+                            hive.id,
+                            hive.apiary_id,
+                            hive.bee_number
+                          )
+                        }
+                        fullWidth
+                        className={classes.cardHive}
+
+                        variant="contained"
+                        color="warning"
+                      >
+                        See statistics
+                      </Button>
+                      <Button
+                        onClick={() =>
+                          Router.push("/beelover/fund?hive=" +
+                            hive.id)
+                        }
+                        className={classes.cardHive}
+                        variant="outlined"
+                        color="secondary"
+                      >
+                        Fund More
                         </Button>
-                      </CardActions>
                     </CardContent>
                   </Card>
                 </Grid>
diff --git a/pages/beelover/index.js b/pages/beelover/index.js
index b503232..2a812bb 100644
--- a/pages/beelover/index.js
+++ b/pages/beelover/index.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import Router  from "next/router";
+import Router from "next/router";
 import { CssBaseline, Typography, Container, Button, Grid, CardContent, Card, CardActions } from "@material-ui/core";
 import { withStyles } from "@material-ui/core/styles";
 
@@ -55,11 +55,14 @@ class BeeloverPage extends Component {
     if (!user || user.role != "beelover") {
       Router.push("/login");
     }
+    else {
+      Router.push("/beelover/hives");
+    }
   }
 
   handleInputChange = name => event => {
     this.setState({
-      [name]: event.target.value 
+      [name]: event.target.value
     });
   };
 
diff --git a/pages/login.js b/pages/login.js
index 1530407..b62b37c 100644
--- a/pages/login.js
+++ b/pages/login.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import Router  from "next/router";
+import Router from "next/router";
 import LoginForm from "../components/LoginForm";
 import { CssBaseline, Typography, Container } from "@material-ui/core";
 import { withStyles } from "@material-ui/core/styles";
@@ -24,6 +24,9 @@ const styles = theme => ({
     padding: theme.spacing(8, 0, 6),
     marginTop: 0,
     marginBottom: 50
+  },
+  msgError: {
+    marginTop: theme.spacing(2),
   }
 });
 
@@ -36,7 +39,7 @@ class LoginPage extends Component {
     this.state = {
       email: '',
       password: '',
-      error: ''
+      error: false,
     };
     this.handleLoginSubmit = this.handleLoginSubmit.bind(this)
 
@@ -59,7 +62,8 @@ class LoginPage extends Component {
     const { handleLogin } = this.context;
     const { email, password } = this.state;
 
-    handleLogin(email, password);
+    const response = await handleLogin(email, password);
+    if (!response.token) this.setState({ error: true });
   }
 
   render() {
@@ -73,6 +77,17 @@ class LoginPage extends Component {
             Login
           </Typography>
           <LoginForm onChangeInput={this.handleInputChange} onSubmitLogin={this.handleLoginSubmit} />
+          {this.state.error && (
+            <Typography
+              color="error"
+              component="h1"
+              variant="body1"
+              align="center"
+              className={classes.msgError}
+            >
+              Email/Password incorrect.
+            </Typography>
+          )}
         </Container>
         <Footer />
       </React.Fragment>
diff --git a/pages/statistics.js b/pages/statistics.js
index 41177a2..728d8d9 100644
--- a/pages/statistics.js
+++ b/pages/statistics.js
@@ -1,6 +1,6 @@
 import React, { Component } from "react";
-import Router  from "next/router";
-import { AuthContext } from '../providers/auth';
+import Router from "next/router";
+import { AuthContext } from "../providers/auth";
 import { CssBaseline, Typography, Container } from "@material-ui/core";
 import { withStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
@@ -9,6 +9,8 @@ import OverallChart from "../components/OverallChart/index.js";
 import axios from "axios";
 import { Footer, Header } from "../components";
 import moment from "moment";
+import { withRouter } from "next/router";
+import { compose } from "recompose";
 
 const styles = theme => ({
   "@global": {
@@ -31,6 +33,10 @@ const styles = theme => ({
     marginTop: 0,
     marginBottom: 50
   },
+  subtitleContent: {
+    marginTop: 15
+  },
+
   plot: {
     padding: theme.spacing(4, 0, 6)
   }
@@ -52,8 +58,13 @@ class StatisticsPage extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      hive_name: "",
       apiary_id: "",
       hive_id: "",
+      hive_status: "",
+      hive_desc: "",
+      type: "temperature",
+      time: "hour",
       overallValues: [],
       linechartValues: [],
       linechartLabels: [],
@@ -61,10 +72,12 @@ class StatisticsPage extends Component {
     };
   }
 
-  processLabel = stats => {
+  processLabel = (stats, time) => {
+    const output = time == "day" ? "D" : "H:mm";
+
     const newdata = stats.data.map(row =>
       moment(row.date)
-        .format("H:mm")
+        .format(output)
         .toString()
     );
 
@@ -82,21 +95,36 @@ class StatisticsPage extends Component {
     return readings.data[readings.data.length - 1].value.toFixed(2);
   };
 
-  fetchLineChartData = type => {
+  fetchLineChartData = (type, time) => {
+    let config = {
+      headers: {
+        Authorization: "Bearer " + localStorage.token,
+        "Content-Type": "application/json"
+      }
+    };
+
+    const y_axis = type || this.state.type;
+
+    const x_axis = time || this.state.time;
+
     axios
       .get(
         APIARY_API +
-        this.state.apiary_id +
-        "/statistics/" +
-        this.state.hive_id +
-        "?query=" +
-        type +
-        "&time_unity=minute"
+          this.state.apiary_id +
+          "/statistics/" +
+          this.state.hive_id +
+          "?query=" +
+          y_axis +
+          "&group=" +
+          x_axis,
+        config
       )
       .then(res => {
         this.setState({
+          time: x_axis,
+          type: y_axis,
           linechartValues: this.processData(res.data),
-          linechartLabels: this.processLabel(res.data)
+          linechartLabels: this.processLabel(res.data, x_axis)
         });
       })
       .catch(error => {
@@ -109,18 +137,25 @@ class StatisticsPage extends Component {
   };
 
   fetchOverallData = async () => {
+    let config = {
+      headers: {
+        Authorization: "Bearer " + localStorage.token,
+        "Content-Type": "application/json"
+      }
+    };
     var readings = [];
 
     for (var i = 0; i < HIVE_PARAMS.length; i++) {
       await axios
         .get(
           APIARY_API +
-          this.state.apiary_id +
-          "/statistics/" +
-          this.state.hive_id +
-          "?query=" +
-          HIVE_PARAMS[i] +
-          "&time_unity=minute"
+            this.state.apiary_id +
+            "/statistics/" +
+            this.state.hive_id +
+            "?query=" +
+            HIVE_PARAMS[i] +
+            "&time_unity=minute",
+          config
         )
         .then(res => {
           readings.push(this.lastReading(res.data));
@@ -150,45 +185,85 @@ class StatisticsPage extends Component {
 
     this.setState(
       {
+        hive_name: decodeURI(params.name),
         apiary_id: params.apiary,
-        hive_id: params.hive
+        hive_id: params.hive,
+        hive_status: params.status,
+        hive_desc: decodeURI(params.description),
+        hive_beeN: params.bee_number
       },
       () => {
         this.fetchOverallData();
-        this.fetchLineChartData("temperature");
+        this.fetchLineChartData("temperature", null);
       }
     );
   }
 
   render() {
     const { classes } = this.props;
-    const { overallValues, linechartValues, linechartLabels } = this.state;
+    const {
+      hive_beeN,
+      hive_name,
+      hive_desc,
+      hive_status,
+      overallValues,
+      linechartValues,
+      linechartLabels,
+      type,
+      time
+    } = this.state;
 
     return (
       <React.Fragment>
         <CssBaseline />
         <Header />
         <Container maxWidth="90%" className={classes.statisticsContent}>
-          <Typography component="h1" variant="h2" align="center">
-            Hive X
+          <Typography
+            component="h1"
+            variant="h2"
+            align="center"
+            justify="center"
+          >
+            {"Hive " + hive_name}
+          </Typography>
+          <Typography
+            component="h1"
+            variant="h5"
+            align="center"
+            justify="center"
+            className={classes.subtitleContent}
+          >
+            {"Status: " + hive_status} {" BeeNumber: " + hive_beeN}
+          </Typography>
+          <Typography
+            component="h3"
+            variant="subtitle1"
+            align="center"
+            justify="center"
+            className={classes.subtitleContent}
+          >
+            {hive_desc}
           </Typography>
           <div className={classes.root}>
             <Grid
               container
               justify="center"
               align="center"
-              item xs
+              item
+              xs
               direction="row"
               spacing={3}
               className={classes.plot}
             >
               <Grid item xs sm>
-                {<OverallChart values={overallValues} />}
+                {<OverallChart values={overallValues} status={hive_status} />}
               </Grid>
               <Grid item xs sm>
                 <LineChart
                   values={linechartValues}
                   labels={linechartLabels}
+                  x_axis={time}
+                  y_axis={type}
                   handleChangeData={this.fetchLineChartData}
                 />
               </Grid>
@@ -201,4 +276,4 @@ class StatisticsPage extends Component {
   }
 }
 
-export default withStyles(styles)(StatisticsPage);
+export default compose(withRouter, withStyles(styles))(StatisticsPage);
diff --git a/providers/auth.js b/providers/auth.js
index 14e3435..5875fa3 100644
--- a/providers/auth.js
+++ b/providers/auth.js
@@ -31,6 +31,8 @@ export const AuthProvider = ({ children }) => {
     setUser(profile);
 
     Router.push('/' + profile.role + "/hives");
+
+    return response
   }
 
   function handleLogout() {
diff --git a/yarn.lock b/yarn.lock
index 6742668..17936d5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -793,9 +793,9 @@
     regenerator-runtime "^0.13.2"
 
 "@babel/runtime@^7.0.0":
-  version "7.7.7"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.7.tgz#194769ca8d6d7790ec23605af9ee3e42a0aa79cf"
-  integrity sha512-uCnC2JEVAu8AKB5do1WRIsvrdJ0flYx/A/9f/6chdacnEZ7LmavjdsDXr5ksYBegxtuTPR5Va9/+13QF/kFkCA==
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.0.tgz#8c81711517c56b3d00c6de706b0fb13dc3531549"
+  integrity sha512-Z7ti+HB0puCcLmFE3x90kzaVgbx6TRrYIReaygW6EkBEnJh1ajS4/inhF7CypzWeDV3NFl1AfWj0eMtdihojxw==
   dependencies:
     regenerator-runtime "^0.13.2"
 
@@ -3751,10 +3751,6 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
-isstream@~0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
-  integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
 isomorphic-fetch@^2.1.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
@@ -3763,6 +3759,11 @@ isomorphic-fetch@^2.1.1:
     node-fetch "^1.0.1"
     whatwg-fetch ">=0.10.0"
 
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+  integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
+
 jest-worker@24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
@@ -4551,6 +4552,14 @@ node-fetch@2.6.0:
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
   integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
 
+node-fetch@^1.0.1:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
 node-gyp@^3.8.0:
   version "3.8.0"
   resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.8.0.tgz#540304261c330e80d0d5edce253a68cb3964218c"
@@ -4568,13 +4577,6 @@ node-gyp@^3.8.0:
     semver "~5.3.0"
     tar "^2.0.0"
     which "1"
-node-fetch@^1.0.1:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
-  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
-  dependencies:
-    encoding "^0.1.11"
-    is-stream "^1.0.1"
 
 node-libs-browser@^2.2.1:
   version "2.2.1"
@@ -5899,13 +5901,6 @@ readdirp@^2.2.1:
     micromatch "^3.1.10"
     readable-stream "^2.0.2"
 
-redent@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
-  integrity sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=
-  dependencies:
-    indent-string "^2.1.0"
-    strip-indent "^1.0.1"
 recompose@^0.30.0:
   version "0.30.0"
   resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.30.0.tgz#82773641b3927e8c7d24a0d87d65aeeba18aabd0"
@@ -5918,6 +5913,14 @@ recompose@^0.30.0:
     react-lifecycles-compat "^3.0.2"
     symbol-observable "^1.0.4"
 
+redent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
+  integrity sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=
+  dependencies:
+    indent-string "^2.1.0"
+    strip-indent "^1.0.1"
+
 reflect.ownkeys@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460"