diff --git a/frontend/README.md b/frontend/README.md
index 64e343e1846df7c27fe49505a338146e8aeb189f..8eb638b4c279d8b21047e7861fef8615e13efb29 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,6 +1,15 @@
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
-## Available Scripts
+## Setup
+
+First, run
+
+### `yarn install`
+
+to install the node modules used for the frontend. In order for the API links to work, the following repository branches need to be cloned and run (separately):
+
+
+## To run
 
 In the project directory, you can run:
 
diff --git a/frontend/src/components/pages/ModuleResources/index.tsx b/frontend/src/components/pages/ModuleResources/index.tsx
index 678c9e2e1534e4a52a62639ad49ad1a5602a1f4a..921e1d1605d935087014ef30292af5cf42ddc411 100644
--- a/frontend/src/components/pages/ModuleResources/index.tsx
+++ b/frontend/src/components/pages/ModuleResources/index.tsx
@@ -2,6 +2,8 @@ import React from "react";
 import styles from "./style.module.scss";
 
 import classNames from "classnames";
+import { request } from "../../../utils/api"
+import { api } from "../../../constants/routes"
 import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
 
 import graphIllustration from "assets/images/graph-illustration.svg";
@@ -21,6 +23,21 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 
 const ModuleResources: React.FC = () => {
+<<<<<<< Updated upstream
+=======
+  useEffect(() => {
+    //@ts-ignore
+    window.Holder.run();
+    const onSuccess = (data: any) => {
+      console.log(data);
+    }
+    const onFailure = (error: any) => {
+      console.log(error);
+    }
+    request(api.MATERIALS_COURSES, "GET", onSuccess, onFailure)
+  }, []);
+
+>>>>>>> Stashed changes
   return (
     <>
       <MyBreadcrumbs />
@@ -39,6 +56,7 @@ const ModuleResources: React.FC = () => {
 
       <h5 className={classNames(styles.moduleSectionHeader)}>Quick Access</h5>
 
+<<<<<<< Updated upstream
       {/* TODO: add scroll listener once code is refactored */}
       <Container className={classNames(styles.quickAccessRow)}>
         {[...Array(6)].map((e, i) => (
@@ -63,6 +81,18 @@ const ModuleResources: React.FC = () => {
               </Badge>
             </Card.Footer>
           </Card>
+=======
+      <Row>
+        {[...Array(4)].map((e, i) => (
+          <Col xs={6} sm={6} md={3} key={i}>
+            <Card style={{ marginTop: "1rem" }}>
+              <Card.Img variant="top" src="holder.js/100px100" />
+              <Card.Body>
+                <Card.Title>Document :( {i}</Card.Title>
+              </Card.Body>
+            </Card>
+          </Col>
+>>>>>>> Stashed changes
         ))}
       </Container>
 
diff --git a/frontend/src/constants/auth.tsx b/frontend/src/constants/auth.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e0ef8c55ea1e05b05fbf3e708831fab3f7ed4f33
--- /dev/null
+++ b/frontend/src/constants/auth.tsx
@@ -0,0 +1,8 @@
+const authConstants = {
+  ACCESS_TOKEN_HEADER: () => `Bearer ${sessionStorage.getItem("currentUser")}`,
+  ACCESS_TOKEN: "currentUser",
+  USER_INFO: "userInfo"
+};
+  
+export default authConstants;
+  
\ No newline at end of file
diff --git a/frontend/src/constants/routes.tsx b/frontend/src/constants/routes.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d17cf9bf7df5f7e8e6dad79fdd9499931ce977a8
--- /dev/null
+++ b/frontend/src/constants/routes.tsx
@@ -0,0 +1,15 @@
+const dev = {
+  MATERIALS_URL: "http://localhost:5000"
+}
+
+const prod = {
+  MATERIALS_URL: "https://materials.doc.ic.ac.uk",
+}
+
+const LOGIN = "/auth/login"
+const config = process.env.NODE_ENV === "development" ? dev : prod;
+
+export const api = {
+  MATERIALS_LOGIN: config.MATERIALS_URL + LOGIN,
+  MATERIALS_COURSES: config.MATERIALS_URL + "/courses/1819"
+}
\ No newline at end of file
diff --git a/frontend/src/utils/api.tsx b/frontend/src/utils/api.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..84c2a38c8f5504c59f88b1ce86524405dadd167f
--- /dev/null
+++ b/frontend/src/utils/api.tsx
@@ -0,0 +1,32 @@
+import authConstants from "../constants/auth";
+import authenticationService from "../utils/auth";
+
+interface RequestOptions {
+    [key: string]: any
+}
+
+export async function request(url: string, method: string, onSuccess: any, onError: any, body?: any) {
+  if (!authenticationService.userIsLoggedIn()) {
+    await authenticationService.login("abc123", "a");
+  }
+  
+  var options: RequestOptions = {
+    method: method,
+    mode: "cors",
+    headers: { 
+      "Authorization": authConstants.ACCESS_TOKEN_HEADER(),
+      "Access-Control-Allow-Origin": "*",
+    },
+  };
+
+  if (method !== "GET") {
+      options.body = JSON.stringify(body);
+  }
+
+  return fetch(url, options)
+    .then((result) => {
+      onSuccess(result);
+    }, (error) => {
+      onError(error);
+    })
+}
diff --git a/frontend/src/utils/auth.tsx b/frontend/src/utils/auth.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3ff22f0853867e16ed933e652de6ff48bfe05513
--- /dev/null
+++ b/frontend/src/utils/auth.tsx
@@ -0,0 +1,54 @@
+import authConstants from "../constants/auth";
+import { api } from "../constants/routes";
+
+function storeDataInStorage(data: { access_token: string; user_info: any; }) {
+  sessionStorage.setItem(authConstants.ACCESS_TOKEN, data.access_token);
+  sessionStorage.setItem(
+    authConstants.USER_INFO,
+    JSON.stringify(data.user_info)
+  );
+}
+
+function removeDataFromStorage() {
+  sessionStorage.removeItem(authConstants.ACCESS_TOKEN);
+  sessionStorage.removeItem(authConstants.USER_INFO);
+}
+
+function getUserInfo() {
+  const info = sessionStorage.getItem(authConstants.USER_INFO)
+  if (info) {
+    return JSON.parse(info)
+  }
+  return {}
+}
+
+async function login(username: string, password: string) {
+  // TODO: endpoint route should be passed in
+  const response = await fetch(api.MATERIALS_LOGIN, {
+    method: "POST",
+    mode: "cors",
+    headers: {
+      "Content-Type": "application/json",
+      "Access-Control-Allow-Origin": "*",
+    },
+    body: JSON.stringify({ username, password })
+  });
+  if (response.ok) {
+    const data = await response.json();
+    storeDataInStorage(data);
+    return true;
+  }
+  return false;
+}
+
+const logout = () => removeDataFromStorage();
+const userIsLoggedIn = () => {
+  return sessionStorage.getItem(authConstants.ACCESS_TOKEN) !== null;
+};
+
+export default {
+  login,
+  logout,
+  userIsLoggedIn,
+  getUserInfo
+};