diff --git a/frontend/src/components/navigation.js b/frontend/src/components/navigation.js
index d4e0f2d..0598abe 100644
--- a/frontend/src/components/navigation.js
+++ b/frontend/src/components/navigation.js
@@ -44,6 +44,9 @@ const useStyles = makeStyles((theme) => ({
             easing: theme.transitions.easing.easeOut,
             duration: theme.transitions.duration.enteringScreen,
         }),
+        [theme.breakpoints.down('xs')]: {
+            width: `calc(100% - ${drawerWidth}px)`,
+        },
     },
     menuButton: {
         marginRight: theme.spacing(2),
@@ -54,7 +57,10 @@ const useStyles = makeStyles((theme) => ({
     drawer: {
         width: drawerWidth,
         flexShrink: 0,
-        whiteSpace: 'nowrap'
+        whiteSpace: 'nowrap',
+        [theme.breakpoints.down('xs')]: {
+            width: 0,
+        },
     },
     drawerOpen: {
         width: drawerWidthOpen,
@@ -62,6 +68,9 @@ const useStyles = makeStyles((theme) => ({
             easing: theme.transitions.easing.sharp,
             duration: theme.transitions.duration.enteringScreen,
         }),
+        [theme.breakpoints.down('xs')]: {
+            width: drawerWidth,
+        },
     },
     drawerClose: {
         transition: theme.transitions.create('width', {
@@ -70,6 +79,9 @@ const useStyles = makeStyles((theme) => ({
         }),
         overflowX: 'hidden',
         width: drawerWidth,
+        [theme.breakpoints.down('xs')]: {
+            width: 0,
+        },
     },
     drawerHeader: {
         display: 'flex',
diff --git a/frontend/src/components/resourcechart/chart.js b/frontend/src/components/resourcechart/chart.js
index 12016e1..8962982 100644
--- a/frontend/src/components/resourcechart/chart.js
+++ b/frontend/src/components/resourcechart/chart.js
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import {
-    LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
+    LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer
 } from 'recharts';
 import { makeStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
@@ -12,11 +12,15 @@ import Checkbox from '@material-ui/core/Checkbox';
 
 const useStyles = makeStyles((theme) => ({
     root: {
-        display: 'flex',
+        padding: 0,
+        margin: 0,
     },
     formControl: {
         margin: theme.spacing(2),
     },
+    chart: {
+        width: 0,
+    }
 }));
 
 export default function Chart(props) {
@@ -62,23 +66,26 @@ export default function Chart(props) {
     const { q0, q1, q2, q3, q4, q5, q6, q7 } = state;
 
     return (
-        <Grid container spacing={2}>
-            <Grid item xs={12}>
-                <LineChart
-                    width={900}
-                    height={300}
-                    data={data}
-                    margin={{
-                        top: 5, right: 30, left: 20, bottom: 5,
-                    }}
-                >
-                    <CartesianGrid strokeDasharray="3 3" />
-                    <XAxis dataKey="time" />
-                    <YAxis domain={['datamin', 'datamax']} />
-                    <Tooltip />
-                    <Legend />
-                    {lines}
-                </LineChart>
+        <Grid container spacing={2} className={classes.root}>
+            <Grid item xs={12} className={classes.chart}>
+                <ResponsiveContainer width="99%" height={300}>
+                    <LineChart
+                        data={data}
+                        margin={{
+                            top: 5, right: 0, left: 0, bottom: 5,
+                        }}
+                    >
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey="time" />
+                        <YAxis domain={['datamin', 'datamax']} />
+                        <Tooltip />
+                        <Legend />
+                        {lines}
+                    </LineChart>
+                </ResponsiveContainer>
+
+
+
             </Grid>
             <Grid item xs={12}>
                 <FormControl component="fieldset" className={classes.formControl}>
@@ -119,7 +126,7 @@ export default function Chart(props) {
                     </FormGroup>
                 </FormControl>
             </Grid>
-        </Grid>
+        </Grid >
 
     );
 }
diff --git a/frontend/src/components/resourcechart/resourcechart.js b/frontend/src/components/resourcechart/resourcechart.js
index 5b81528..83228f7 100644
--- a/frontend/src/components/resourcechart/resourcechart.js
+++ b/frontend/src/components/resourcechart/resourcechart.js
@@ -103,7 +103,7 @@ export default function ResourceChart(props) {
                 </Grid>
                 <Grid item xs={12}>
                     <Card className={classes.card}>
-                        <CardContent>
+                        <CardContent style={{ padding: 0 }}>
                             {output(data)}
                         </CardContent>
                         <Button variant="contained" color="secondary" onClick={handleClick}>
diff --git a/frontend/src/components/selectResource/index.js b/frontend/src/components/selectResource/index.js
index ab3467c..3c246a6 100644
--- a/frontend/src/components/selectResource/index.js
+++ b/frontend/src/components/selectResource/index.js
@@ -74,7 +74,7 @@ export default function SelectResource() {
                 </Typography>
                         </Grid>
                         <Grid item xs={12} className={classes.grid}>
-                            <Grid container spacing={1} >
+                            <Grid container spacing={2} >
                                 {resources[0]}
                             </Grid>
                         </Grid>
@@ -88,7 +88,7 @@ export default function SelectResource() {
                 </Typography>
                         </Grid>
                         <Grid item xs={12} className={classes.grid}>
-                            <Grid container spacing={1} >
+                            <Grid container spacing={2} >
                                 {resources[1]}
                             </Grid>
                         </Grid>
@@ -102,7 +102,7 @@ export default function SelectResource() {
                 </Typography>
                         </Grid>
                         <Grid item xs={12} className={classes.grid}>
-                            <Grid container spacing={1} >
+                            <Grid container spacing={2} >
                                 {resources[2]}
                             </Grid>
                         </Grid>
@@ -116,7 +116,7 @@ export default function SelectResource() {
                 </Typography>
                         </Grid>
                         <Grid item xs={12} className={classes.grid}>
-                            <Grid container spacing={1} >
+                            <Grid container spacing={2} >
                                 {resources[3]}
                             </Grid>
                         </Grid>
@@ -127,10 +127,10 @@ export default function SelectResource() {
                         <Grid item xs={12}>
                             <Typography variant="h4">
                                 Electronics
-                </Typography>
+                            </Typography>
                         </Grid>
                         <Grid item xs={12} className={classes.grid}>
-                            <Grid container spacing={1} >
+                            <Grid container spacing={2} >
                                 {resources[4]}
                             </Grid>
                         </Grid>
@@ -144,7 +144,7 @@ export default function SelectResource() {
                 </Typography>
                         </Grid>
                         <Grid item xs={12} className={classes.grid}>
-                            <Grid container spacing={1} >
+                            <Grid container spacing={2} >
                                 {resources[5]}
                             </Grid>
                         </Grid>
@@ -158,7 +158,7 @@ export default function SelectResource() {
                 </Typography>
                         </Grid>
                         <Grid item xs={12} className={classes.grid}>
-                            <Grid container spacing={1} >
+                            <Grid container spacing={2} >
                                 {resources[6]}
                             </Grid>
                         </Grid>
@@ -172,7 +172,7 @@ export default function SelectResource() {
                 </Typography>
                         </Grid>
                         <Grid item xs={12} className={classes.grid}>
-                            <Grid container spacing={1} >
+                            <Grid container spacing={2} >
                                 {resources[7]}
                             </Grid>
                         </Grid>
@@ -186,7 +186,7 @@ export default function SelectResource() {
                 </Typography>
                         </Grid>
                         <Grid item xs={12} className={classes.grid}>
-                            <Grid container spacing={1} >
+                            <Grid container spacing={2} >
                                 {resources[8]}
                             </Grid>
                         </Grid>
@@ -200,7 +200,7 @@ export default function SelectResource() {
                 </Typography>
                         </Grid>
                         <Grid item xs={12} className={classes.grid}>
-                            <Grid container spacing={1} >
+                            <Grid container spacing={2} >
                                 {resources[9]}
                             </Grid>
                         </Grid>
diff --git a/frontend/src/components/selectResource/resourceCard.js b/frontend/src/components/selectResource/resourceCard.js
index 05f1cdb..9bb6304 100644
--- a/frontend/src/components/selectResource/resourceCard.js
+++ b/frontend/src/components/selectResource/resourceCard.js
@@ -9,6 +9,8 @@ import Link1 from '@material-ui/core/Link';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
+import Tooltip from '@material-ui/core/Tooltip';
+import Zoom from '@material-ui/core/Zoom';
 
 
 const useStyles = makeStyles(theme => ({
@@ -42,15 +44,16 @@ export default function ResourceCard(props) {
 
     return (
 
-        <Grid item xs={4} lg={2} key={props.resource["name"]}>
+        <Grid item xs={3} lg={2} key={props.resource["name"]}>
             <Card >
                 <CardContent style={{ padding: 0 }}>
                     <ListItemLink to={{ pathname: "/resourcechart/" + props.resource["db_letter"], state: { name: props.resource["name"] } }} component={Link} >
-                        <ListItemIcon>
-                            <img src={picture} alt={props.resource["name"]} style={{ width: 50, height: 50 }} />
-                        </ListItemIcon>
-
-                        <ListItemText primary={props.resource["name"]} />
+                        <Tooltip TransitionComponent={Zoom} placement='bottom' title={props.resource["name"]} enterDelay={500}>
+                            <ListItemIcon>
+                                <img src={picture} alt={props.resource["name"]} style={{ width: 50, height: 50 }} />
+                            </ListItemIcon>
+                        </Tooltip>
+                        <ListItemText primary={props.resource["name"]} style={{ paddingLeft: 20 }} />
                     </ListItemLink>
                 </CardContent>
             </Card>
diff --git a/start_latest.sh b/start_latest.sh
index 84ac4e5..ec020ee 100755
--- a/start_latest.sh
+++ b/start_latest.sh
@@ -3,10 +3,10 @@ git pull &&
 cd backend &&
 rm -r ./frontend &&
 mkdir frontend &&
-npm i &&
+yarn install &&
 cd ../frontend &&
-npm i &&
-npm run build &&
+yarn install &&
+yarn run build &&
 mv ./build/* ../backend/frontend &&
 cd ../backend &&
-npm start
\ No newline at end of file
+yarn start