diff --git a/frontend/src/components/selectResource/index.js b/frontend/src/components/selectResource/index.js
index 0df248d..dc137fb 100644
--- a/frontend/src/components/selectResource/index.js
+++ b/frontend/src/components/selectResource/index.js
@@ -1,26 +1,46 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import Typography from '@material-ui/core/Typography'
 
 const useStyles = makeStyles(theme => ({
+    card: {
 
+    }
 }));
 
+function CreateResourceCard(resource, classes) {
+    return (<Card className={classes.card}>
+        <CardContent>
+            <Typography variant="h5" component="h2">
+                {JSON.stringify(resource)}
+            </Typography>
+        </CardContent>
+    </Card>)
+}
+
 export default function SelectResource() {
-    //const classes = useStyles();
-    const [resources, setResources] = React.useState(false);
+    const classes = useStyles();
+    const [resources, setResources] = React.useState(null);
 
     const loadResources = async () => {
         var resourceJSON = await fetch("/API/resourcelist");
-        setResources(await resourceJSON.text())
+        resourceJSON = await resourceJSON.json();
+        let rArr = [];
+        for (let i = 0; i < resourceJSON.length; i++) {
+            rArr.push(CreateResourceCard(resourceJSON[i], classes));
+        }
+        setResources(rArr);
     }
 
     loadResources();
 
     return (
 
-        <div>
+        <React.Fragment>
             {resources}
-        </div>
+        </React.Fragment>
 
     );
 }