diff --git a/package-lock.json b/package-lock.json
index 3841a5b..b52e94c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1154,6 +1154,25 @@
         }
       }
     },
+    "@material-ui/icons": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.5.1.tgz",
+      "integrity": "sha512-YZ/BgJbXX4a0gOuKWb30mBaHaoXRqPanlePam83JQPZ/y4kl+3aW0Wv9tlR70hB5EGAkEJGW5m4ktJwMgxQAeA==",
+      "requires": {
+        "@babel/runtime": "^7.4.4"
+      }
+    },
+    "@material-ui/lab": {
+      "version": "4.0.0-alpha.29",
+      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.29.tgz",
+      "integrity": "sha512-lF8PHp7IkJUvbH8L9IrTCYfMtwMlAFmp0Weoc4kgLJuJMW3JAUQ2NMpyIhy3jcTJjxH/LhK+y6cKYALx2c0O1g==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.4.0",
+        "clsx": "^1.0.4",
+        "prop-types": "^15.7.2"
+      }
+    },
     "@material-ui/styles": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.5.0.tgz",
@@ -2119,6 +2138,43 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
       "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ=="
     },
+    "axios": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
+      "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
+      "requires": {
+        "follow-redirects": "1.5.10",
+        "is-buffer": "^2.0.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "is-buffer": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
+          "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "axobject-query": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz",
diff --git a/package.json b/package.json
index ff96b00..ec5e7b0 100644
--- a/package.json
+++ b/package.json
@@ -3,9 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.5.1",
+    "@material-ui/icons": "^4.5.1",
+    "@material-ui/lab": "^4.0.0-alpha.29",
+    "axios": "^0.19.0",
     "json-server": "^0.15.1",
     "npm-run-all": "^4.1.5",
-    "@material-ui/core": "^4.5.1",
     "react": "16.10.2",
     "react-dom": "16.10.2",
     "react-router-dom": "5.1.2",
diff --git a/src/components/PersonalMenu/index.js b/src/components/PersonalMenu/index.js
new file mode 100644
index 0000000..2b64796
--- /dev/null
+++ b/src/components/PersonalMenu/index.js
@@ -0,0 +1,11 @@
+import React from "react";
+import { Typography } from "@material-ui/core";
+
+export default function PersonalMenu() {
+  return (
+    <>
+      <h2>Personal Menu</h2>
+      <Typography variant="body1">lorem ipsum</Typography>
+    </>
+  );
+}
diff --git a/src/components/Resources/index.js b/src/components/Resources/index.js
index 5f6a5c9..fdfeb5d 100644
--- a/src/components/Resources/index.js
+++ b/src/components/Resources/index.js
@@ -1,5 +1,190 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import { makeStyles } from "@material-ui/core/styles";
+import clsx from "clsx";
+import PersonalMenu from "../PersonalMenu";
+import Card from "@material-ui/core/Card";
+import CardHeader from "@material-ui/core/CardHeader";
+import CardContent from "@material-ui/core/CardContent";
+import CardActions from "@material-ui/core/CardActions";
+import Collapse from "@material-ui/core/Collapse";
+import Avatar from "@material-ui/core/Avatar";
+import IconButton from "@material-ui/core/IconButton";
+import Rating from "@material-ui/lab/Rating";
+import StarBorderIcon from "@material-ui/icons/StarBorder";
+import Typography from "@material-ui/core/Typography";
+import { red } from "@material-ui/core/colors";
+import BookmarkIcon from "@material-ui/icons/Bookmark";
+import ShareIcon from "@material-ui/icons/Share";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import MoreVertIcon from "@material-ui/icons/MoreVert";
+import Grid from "@material-ui/core/Grid";
+import TextareaAutosize from "@material-ui/core/TextareaAutosize";
+import { Button } from "@material-ui/core";
+import LinkIcon from "@material-ui/icons/Link";
+import Search from "../Search";
 
-export default function Resources() {
-  return <h2>Resources</h2>;
+const useStyles = makeStyles(theme => ({
+  card: {
+    maxWidth: 345
+  },
+  media: {
+    height: 0,
+    paddingTop: "56.25%" // 16:9
+  },
+  expand: {
+    transform: "rotate(0deg)",
+    marginLeft: "auto",
+    transition: theme.transitions.create("transform", {
+      duration: theme.transitions.duration.shortest
+    })
+  },
+  expandOpen: {
+    transform: "rotate(180deg)"
+  },
+  avatar: {
+    backgroundColor: red[500]
+  }
+}));
+
+function Resources() {
+  const [resources, setResources] = useState([]);
+
+  const classes = useStyles();
+  const [expanded, setExpanded] = React.useState(false);
+
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
+  };
+
+  useEffect(() => {
+    axios
+      .get("http://localhost:3000/resources")
+      .then(function(response) {
+        // handle success
+        setResources(response.data);
+        console.log(response);
+      })
+      .catch(function(error) {
+        // handle error
+        console.log(error);
+      });
+  }, []);
+
+  return (
+    <>
+      {console.log(resources)}
+
+      <Grid container spacing={1}>
+        <Grid item lg={3}>
+          <PersonalMenu />
+        </Grid>
+        <Grid item lg={9}>
+          <h2>Resources</h2>
+          <Search label="Search resources" />
+          <br />
+          <Grid container spacing={1}>
+            {resources.map(
+              ({
+                id,
+                title,
+                created,
+                description,
+                url,
+                referrer,
+                credit,
+                date_published,
+                paid,
+                tags
+              }) => {
+                return (
+                  <Grid item lg={3} key={id}>
+                    <Card className={classes.card}>
+                      <CardHeader
+                        avatar={
+                          <Avatar
+                            aria-label="recipe"
+                            className={classes.avatar}
+                          >
+                            R
+                          </Avatar>
+                        }
+                        action={
+                          <IconButton aria-label="settings">
+                            <MoreVertIcon />
+                          </IconButton>
+                        }
+                        title={title}
+                        subheader={created}
+                      />
+                      <CardContent>
+                        <Typography
+                          variant="body2"
+                          color="textSecondary"
+                          component="p"
+                        >
+                          {description}
+                        </Typography>
+                      </CardContent>
+                      <CardActions disableSpacing>
+                        <IconButton aria-label="add to favorites">
+                          <BookmarkIcon />
+                        </IconButton>
+                        <IconButton aria-label="share">
+                          <ShareIcon />
+                        </IconButton>
+                        <IconButton aria-label="share">
+                          <a
+                            href={url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            <LinkIcon />
+                          </a>
+                        </IconButton>
+                        <IconButton
+                          className={clsx(classes.expand, {
+                            [classes.expandOpen]: expanded
+                          })}
+                          onClick={handleExpandClick}
+                          aria-expanded={expanded}
+                          aria-label="show more"
+                        >
+                          <ExpandMoreIcon />
+                        </IconButton>
+                      </CardActions>
+                      <Collapse in={expanded} timeout="auto" unmountOnExit>
+                        <CardContent>
+                          <Rating
+                            name="customized-empty"
+                            value={2}
+                            precision={0.5}
+                            emptyIcon={<StarBorderIcon fontSize="inherit" />}
+                          />
+                          <TextareaAutosize
+                            aria-label="Review"
+                            rows={3}
+                            placeholder="Your review"
+                          />
+                          <Button
+                            type="submit"
+                            color="primary"
+                            variant="contained"
+                          >
+                            Submit
+                          </Button>
+                        </CardContent>
+                      </Collapse>
+                    </Card>
+                  </Grid>
+                );
+              }
+            )}
+          </Grid>
+        </Grid>
+      </Grid>
+    </>
+  );
 }
+
+export default Resources;
diff --git a/src/components/Search/index.js b/src/components/Search/index.js
new file mode 100644
index 0000000..a97d45b
--- /dev/null
+++ b/src/components/Search/index.js
@@ -0,0 +1,16 @@
+import React from "react";
+import { Input } from "@material-ui/core";
+import PropTypes from "prop-types";
+
+function Search({ label }) {
+  return (
+    <div>
+      <Input type="search" placeholder={label} />
+    </div>
+  );
+}
+export default Search;
+
+Search.propTypes = {
+  label: PropTypes.string
+};