diff --git a/frontend/src/components/selectResource/index.js b/frontend/src/components/selectResource/index.js
index 6ab052e..716e85e 100644
--- a/frontend/src/components/selectResource/index.js
+++ b/frontend/src/components/selectResource/index.js
@@ -2,11 +2,12 @@ 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"
     }
 }));
 
@@ -15,29 +16,193 @@ 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>