diff --git a/frontend/src/components/resourcechart/resourcechart.js b/frontend/src/components/resourcechart/resourcechart.js
index 1029368..b943e16 100644
--- a/frontend/src/components/resourcechart/resourcechart.js
+++ b/frontend/src/components/resourcechart/resourcechart.js
@@ -11,11 +11,15 @@ import CardContent from '@material-ui/core/CardContent';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
+import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles((theme) => ({
     root: {
         display: 'flex',
     },
+    card: {
+        padding: 20
+    }
 }));
 
 const output = (data) => {
@@ -86,6 +90,8 @@ export default function ResourceChart(props) {
                         case 7:
                             qualitySortedData[qualitySortedData.length - 1]["q7"] = dataWithDate[i]["price"];
                             break;
+                        default:
+                            break;
                     }
                 } else {
                     qualitySortedData.push(dataWithDate[i]);
@@ -105,7 +111,9 @@ export default function ResourceChart(props) {
         loadData();
     }
 
-
+    const handleClick = (e) => {
+        loadData()
+    }
 
     return (
         <div className={classes.root}>
@@ -116,10 +124,13 @@ export default function ResourceChart(props) {
                     </Typography>
                 </Grid>
                 <Grid item xs={12}>
-                    <Card>
+                    <Card className={classes.card}>
                         <CardContent>
                             {output(data)}
                         </CardContent>
+                        <Button variant="contained" color="secondary" onClick={handleClick}>
+                            Refresh
+                        </Button>
                     </Card>
                 </Grid>
             </Grid>
diff --git a/frontend/src/components/selectResource/index.js b/frontend/src/components/selectResource/index.js
index 9027869..716e85e 100644
--- a/frontend/src/components/selectResource/index.js
+++ b/frontend/src/components/selectResource/index.js
@@ -2,37 +2,207 @@ import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import ResourceCard from './resourceCard';
+import Typography from '@material-ui/core/Typography';
 
 
 const useStyles = makeStyles(theme => ({
-    card: {
-
+    grid: {
+        display: "flex"
     }
 }));
 
+const agri = [66, 3, 4, 5, 6, 7, 8, 9, 40, 72, 106]
+const construct = [101, 102, 103, 104, 105, 107, 108, 109, 110, 111]
+const fashion = [41, 46, 60, 61, 62, 63, 64, 65, 70, 71]
+const energy = [10, 11, 12, 1, 73, 74, 83]
+const electronics = [20, 21, 22, 23, 24, 25, 26, 27, 28, 79, 98]
+const auto = [47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 112]
+const aero = [77, 78, 80, 81, 82, 84, 85, 86, 87, 88, 89]
+const resource = [2, 13, 14, 15, 16, 17, 18, 19, 42, 43, 44, 45, 68, 69, 75, 76]
+const research = [29, 30, 31, 32, 33, 34, 35, 58, 59, 100, 113]
 
 
 export default function SelectResource() {
     const classes = useStyles();
-    const [resources, setResources] = React.useState(null);
+    const [resources, setResources] = React.useState([]);
 
     const loadResources = async () => {
         var resourceJSON = await fetch("/simcompanies/API/resourcelist");
         resourceJSON = await resourceJSON.json();
-        let rArr = [];
+        let rArr = [[], [], [], [], [], [], [], [], [], []];
         for (let i = 0; i < resourceJSON.length; i++) {
-            rArr.push(<ResourceCard resource={resourceJSON[i]}></ResourceCard>);
+            if (agri.includes(resourceJSON[i]["db_letter"])) {
+                rArr[0].push(<ResourceCard resource={resourceJSON[i]}></ResourceCard>);
+            } else if (construct.includes(resourceJSON[i]["db_letter"])) {
+                rArr[1].push(<ResourceCard resource={resourceJSON[i]}></ResourceCard>);
+            } else if (fashion.includes(resourceJSON[i]["db_letter"])) {
+                rArr[2].push(<ResourceCard resource={resourceJSON[i]}></ResourceCard>);
+            } else if (energy.includes(resourceJSON[i]["db_letter"])) {
+                rArr[3].push(<ResourceCard resource={resourceJSON[i]}></ResourceCard>);
+            } else if (electronics.includes(resourceJSON[i]["db_letter"])) {
+                rArr[4].push(<ResourceCard resource={resourceJSON[i]}></ResourceCard>);
+            } else if (auto.includes(resourceJSON[i]["db_letter"])) {
+                rArr[5].push(<ResourceCard resource={resourceJSON[i]}></ResourceCard>);
+            } else if (aero.includes(resourceJSON[i]["db_letter"])) {
+                rArr[6].push(<ResourceCard resource={resourceJSON[i]}></ResourceCard>);
+            } else if (resource.includes(resourceJSON[i]["db_letter"])) {
+                rArr[7].push(<ResourceCard resource={resourceJSON[i]}></ResourceCard>);
+            } else if (research.includes(resourceJSON[i]["db_letter"])) {
+                rArr[8].push(<ResourceCard resource={resourceJSON[i]}></ResourceCard>);
+            } else {
+                rArr[9].push(<ResourceCard resource={resourceJSON[i]}></ResourceCard>);
+            }
+
         }
         setResources(rArr);
     }
 
-    if (resources === null)
+    if (resources.length === 0)
         loadResources();
 
     return (
 
-        <Grid container spacing={2}>
-            {resources}
+        <Grid container spacing={2} >
+            <Grid item xs={12} className={classes.grid}>
+                <Grid container spacing={2} >
+                    <Grid item xs={12}>
+                        <Typography variant="h4">
+                            Agriculture & Food
+                </Typography>
+                    </Grid>
+                    <Grid item xs={12} className={classes.grid}>
+                        <Grid container spacing={1} >
+                            {resources[0]}
+                        </Grid>
+                    </Grid>
+                </Grid>
+            </Grid>
+            <Grid item xs={12} className={classes.grid}>
+                <Grid container spacing={2} >
+                    <Grid item xs={12}>
+                        <Typography variant="h4">
+                            Construction
+                </Typography>
+                    </Grid>
+                    <Grid item xs={12} className={classes.grid}>
+                        <Grid container spacing={1} >
+                            {resources[1]}
+                        </Grid>
+                    </Grid>
+                </Grid>
+            </Grid>
+            <Grid item xs={12} className={classes.grid}>
+                <Grid container spacing={2} >
+                    <Grid item xs={12}>
+                        <Typography variant="h4">
+                            Fashion
+                </Typography>
+                    </Grid>
+                    <Grid item xs={12} className={classes.grid}>
+                        <Grid container spacing={1} >
+                            {resources[2]}
+                        </Grid>
+                    </Grid>
+                </Grid>
+            </Grid>
+            <Grid item xs={12} className={classes.grid}>
+                <Grid container spacing={2} >
+                    <Grid item xs={12}>
+                        <Typography variant="h4">
+                            Energy
+                </Typography>
+                    </Grid>
+                    <Grid item xs={12} className={classes.grid}>
+                        <Grid container spacing={1} >
+                            {resources[3]}
+                        </Grid>
+                    </Grid>
+                </Grid>
+            </Grid>
+            <Grid item xs={12} className={classes.grid}>
+                <Grid container spacing={2} >
+                    <Grid item xs={12}>
+                        <Typography variant="h4">
+                            Electronics
+                </Typography>
+                    </Grid>
+                    <Grid item xs={12} className={classes.grid}>
+                        <Grid container spacing={1} >
+                            {resources[4]}
+                        </Grid>
+                    </Grid>
+                </Grid>
+            </Grid>
+            <Grid item xs={12} className={classes.grid}>
+                <Grid container spacing={2} >
+                    <Grid item xs={12}>
+                        <Typography variant="h4">
+                            Automotive
+                </Typography>
+                    </Grid>
+                    <Grid item xs={12} className={classes.grid}>
+                        <Grid container spacing={1} >
+                            {resources[5]}
+                        </Grid>
+                    </Grid>
+                </Grid>
+            </Grid>
+            <Grid item xs={12} className={classes.grid}>
+                <Grid container spacing={2} >
+                    <Grid item xs={12}>
+                        <Typography variant="h4">
+                            Aerospace
+                </Typography>
+                    </Grid>
+                    <Grid item xs={12} className={classes.grid}>
+                        <Grid container spacing={1} >
+                            {resources[6]}
+                        </Grid>
+                    </Grid>
+                </Grid>
+            </Grid>
+            <Grid item xs={12} className={classes.grid}>
+                <Grid container spacing={2} >
+                    <Grid item xs={12}>
+                        <Typography variant="h4">
+                            Resources
+                </Typography>
+                    </Grid>
+                    <Grid item xs={12} className={classes.grid}>
+                        <Grid container spacing={1} >
+                            {resources[7]}
+                        </Grid>
+                    </Grid>
+                </Grid>
+            </Grid>
+            <Grid item xs={12} className={classes.grid}>
+                <Grid container spacing={2} >
+                    <Grid item xs={12}>
+                        <Typography variant="h4">
+                            Research
+                </Typography>
+                    </Grid>
+                    <Grid item xs={12} className={classes.grid}>
+                        <Grid container spacing={1} >
+                            {resources[8]}
+                        </Grid>
+                    </Grid>
+                </Grid>
+            </Grid>
+            <Grid item xs={12} className={classes.grid}>
+                <Grid container spacing={2} >
+                    <Grid item xs={12}>
+                        <Typography variant="h4">
+                            Others
+                </Typography>
+                    </Grid>
+                    <Grid item xs={12} className={classes.grid}>
+                        <Grid container spacing={1} >
+                            {resources[9]}
+                        </Grid>
+                    </Grid>
+                </Grid>
+            </Grid>
         </Grid>
 
     );
diff --git a/frontend/src/components/selectResource/resourceCard.js b/frontend/src/components/selectResource/resourceCard.js
index 683f04c..f5be27b 100644
--- a/frontend/src/components/selectResource/resourceCard.js
+++ b/frontend/src/components/selectResource/resourceCard.js
@@ -8,7 +8,7 @@ import { Link } from 'react-router-dom';
 import Link1 from '@material-ui/core/Link';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
-import CardMedia from '@material-ui/core/CardMedia';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
 
 
 const useStyles = makeStyles(theme => ({
@@ -46,7 +46,10 @@ export default function ResourceCard(props) {
             <Card >
                 <CardContent style={{ padding: 0 }}>
                     <ListItemLink to={"/resourcechart/" + props.resource["db_letter"]} component={Link}>
-                        <img src={picture} alt={props.resource["name"]} style={{ width: 50, height: 50 }} />
+                        <ListItemIcon>
+                            <img src={picture} alt={props.resource["name"]} style={{ width: 50, height: 50 }} />
+                        </ListItemIcon>
+
                         <ListItemText primary={props.resource["name"]} />
                     </ListItemLink>
                 </CardContent>