diff --git a/backend/index.js b/backend/index.js
index 86be953..0fbb3f1 100644
--- a/backend/index.js
+++ b/backend/index.js
@@ -1,6 +1,7 @@
 const express = require('express')
 const app = express();
 const status = require('http-status');
+const fetch = require('node-fetch');
 var mysql = require('mysql');
 var connection = mysql.createConnection({
     host: 'localhost',
@@ -9,7 +10,23 @@ var connection = mysql.createConnection({
     database: 'simcompanies'
 });
 
-const mockDataDay = require('./mockdata-test/day.json')
+const mockDataDay = require('./mockdata-test/day.json');
+var resourceList;
+
+var serverStartupComplete = false;
+
+async function loadData() {
+    var rL = await fetch("https://www.simcompanies.com/api/v3/en/encyclopedia/resources/");
+    resourceList = await rL.json();
+    serverStartupComplete = true;
+}
+loadData();
+
+app.all("*", function (req, res, next) {
+    if (!serverStartupComplete)
+        return res.send("Server is starting...");
+    else return next();
+})
 
 app.get('/API/day', function (req, res) {
     var date = new Date(req.query.date);
@@ -38,4 +55,8 @@ app.get('/API/day', function (req, res) {
         res.status(status.BAD_REQUEST).send("invalid data provided");
 });
 
+app.get('/API/resourcelist', function (req, res) {
+    res.send(resourceList);
+});
+
 app.listen(3001);
\ No newline at end of file
diff --git a/backend/package-lock.json b/backend/package-lock.json
index d57432b..eebf721 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -690,6 +690,11 @@
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
       "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
     },
+    "node-fetch": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
+      "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA=="
+    },
     "nodemon": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.2.tgz",
diff --git a/backend/package.json b/backend/package.json
index 7eef899..1c95193 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -13,6 +13,7 @@
     "express": "^4.17.1",
     "http-status": "^1.4.2",
     "mysql": "^2.18.1",
+    "node-fetch": "^2.6.0",
     "nodemon": "^2.0.2"
   }
 }
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e28207d..17dd696 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -4206,11 +4206,27 @@
       }
     },
     "dom-helpers": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
-      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz",
+      "integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==",
       "requires": {
-        "@babel/runtime": "^7.1.2"
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^2.6.7"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.9.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.2.tgz",
+          "integrity": "sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.5",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
+          "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA=="
+        }
       }
     },
     "dom-serializer": {
@@ -10767,20 +10783,50 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
       "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q=="
     },
-    "react-lifecycles-compat": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
-    },
-    "react-resize-detector": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-2.3.0.tgz",
-      "integrity": "sha512-oCAddEWWeFWYH5FAcHdBYcZjAw9fMzRUK9sWSx6WvSSOPVRxcHd5zTIGy/mOus+AhN/u6T4TMiWxvq79PywnJQ==",
+    "react-router": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz",
+      "integrity": "sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==",
       "requires": {
-        "lodash.debounce": "^4.0.8",
-        "lodash.throttle": "^4.1.1",
-        "prop-types": "^15.6.0",
-        "resize-observer-polyfill": "^1.5.0"
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "mini-create-react-context": "^0.3.0",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "path-to-regexp": {
+          "version": "1.8.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+          "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        }
+      }
+    },
+    "react-router-dom": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.1.2.tgz",
+      "integrity": "sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.1.2",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
       }
     },
     "react-scripts": {
@@ -10843,26 +10889,15 @@
         "workbox-webpack-plugin": "4.3.1"
       }
     },
-    "react-smooth": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-1.0.5.tgz",
-      "integrity": "sha512-eW057HT0lFgCKh8ilr0y2JaH2YbNcuEdFpxyg7Gf/qDKk9hqGMyXryZJ8iMGJEuKH0+wxS0ccSsBBB3W8yCn8w==",
-      "requires": {
-        "lodash": "~4.17.4",
-        "prop-types": "^15.6.0",
-        "raf": "^3.4.0",
-        "react-transition-group": "^2.5.0"
-      }
-    },
     "react-transition-group": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
-      "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",
+      "integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==",
       "requires": {
-        "dom-helpers": "^3.4.0",
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
         "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2",
-        "react-lifecycles-compat": "^3.0.4"
+        "prop-types": "^15.6.2"
       }
     },
     "read-pkg": {
diff --git a/frontend/package.json b/frontend/package.json
index 8b062fd..081f8bc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,9 +10,10 @@
     "@testing-library/user-event": "^7.2.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.0",
-    "recharts": "^1.8.5",
-    "typeface-roboto": "0.0.75"
+    "typeface-roboto": "0.0.75",
+    "recharts": "^1.8.5"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json
index e2e6aee..f740c88 100644
--- a/frontend/public/manifest.json
+++ b/frontend/public/manifest.json
@@ -1,6 +1,6 @@
 {
-    "short_name": "React App",
-    "name": "Create React App Sample",
+    "short_name": "SC Dashboard",
+    "name": "Sim Companies Dashboard",
     "icons": [{
         "src": "favicon.ico",
         "sizes": "64x64 32x32 24x24 16x16",
diff --git a/frontend/src/App.css b/frontend/src/App.css
index b80d8fc..61592b6 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -8,4 +8,4 @@
     overflow: hidden;
     margin-left: 10px;
     height: 64px;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/selectResource/index.js b/frontend/src/components/selectResource/index.js
new file mode 100644
index 0000000..93b1bf8
--- /dev/null
+++ b/frontend/src/components/selectResource/index.js
@@ -0,0 +1,61 @@
+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';
+import Grid from '@material-ui/core/Grid';
+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';
+
+
+const useStyles = makeStyles(theme => ({
+    card: {
+
+    }
+}));
+
+function CreateResourceCard(resource, classes) {
+    function ListItemLink(props) {
+        return <ListItem button component={Link1} {...props} />;
+    }
+    return (
+        <Grid item xs={4} lg={2} >
+            <Card >
+                <CardContent style={{ padding: 0 }}>
+                    <ListItemLink to={"/" + resource["name"].toLowerCase()} component={Link}>
+                        <ListItemText primary={resource["name"]} />
+                    </ListItemLink>
+                </CardContent>
+            </Card>
+        </Grid>
+
+    )
+}
+
+export default function SelectResource() {
+    const classes = useStyles();
+    const [resources, setResources] = React.useState(null);
+
+    const loadResources = async () => {
+        var resourceJSON = await fetch("/API/resourcelist");
+        resourceJSON = await resourceJSON.json();
+        let rArr = [];
+        for (let i = 0; i < resourceJSON.length; i++) {
+            rArr.push(CreateResourceCard(resourceJSON[i], classes));
+        }
+        setResources(rArr);
+    }
+
+    if (resources === null)
+        loadResources();
+
+    return (
+
+        <Grid container spacing={2}>
+            {resources}
+        </Grid>
+
+    );
+}