diff --git a/package-lock.json b/package-lock.json
index f3d7993..815c9d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21474,6 +21474,11 @@
         "prop-types": "^15.6.1"
       }
     },
+    "react-hook-form": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-4.8.1.tgz",
+      "integrity": "sha512-3DFNKCB+a1RDq7nuQXjvHqzWl6Mt80USts6j47duI0Jn+07T+liXh7JuIOne+Fnb59kSGWCSHMvT0ytqNo7YOg=="
+    },
     "react-input-autosize": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-2.2.2.tgz",
diff --git a/package.json b/package.json
index fdc32a7..bba58dc 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "prop-types": "^15.7.2",
     "react": "16.11.0",
     "react-dom": "16.11.0",
-    "react-hook-form": "5.5.1",
+    "react-hook-form": "^6.7.2",
     "react-query": "^2.15.4",
     "react-router-dom": "5.1.2",
     "react-scripts": "^3.4.0",
diff --git a/src/components/Resources/ResourceCard.js b/src/components/Resources/ResourceCard.js
index 562e72d..bc64b9b 100644
--- a/src/components/Resources/ResourceCard.js
+++ b/src/components/Resources/ResourceCard.js
@@ -50,6 +50,7 @@ export const ResourceCard = ({ guid, title, created, description, url }) => {
   const handleExpandClick = () => {
     setExpanded(!expanded);
   };
+
   return (
     <Card className={classes.card}>
       <Link to={`/resources/${guid}`}>
@@ -115,7 +116,7 @@ export const ResourceCard = ({ guid, title, created, description, url }) => {
 ResourceCard.propTypes = {
   guid: PropTypes.string,
   title: PropTypes.string,
-  created: PropTypes.string,
+  created: PropTypes.string, // is actually a PropTypes.instanceOf(Date),
   description: PropTypes.string,
   url: PropTypes.string,
 };
diff --git a/src/components/Resources/index.js b/src/components/Resources/index.js
index 59c6e38..75ee507 100644
--- a/src/components/Resources/index.js
+++ b/src/components/Resources/index.js
@@ -1,13 +1,31 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
 import axios from 'axios';
 import PersonalMenu from '../PersonalMenu';
 import Search from '../Search';
-import Grid from '@material-ui/core/Grid';
+import { Grid, Button } from '@material-ui/core';
 import { ResourceCard } from './ResourceCard';
+import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
+import { makeStyles } from '@material-ui/core/styles';
 
-function Resources({ getResourcesUrl }) {
+const useStyles = makeStyles(theme => ({
+  button: {
+    margin: theme.spacing(1),
+  },
+  input: {
+    display: 'none',
+  },
+  heading: {
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+}));
+
+function Resources() {
+  const classes = useStyles();
   const [resources, setResources] = useState([]);
+  const getResourcesUrl = '/api/v1/resources';
 
   useEffect(() => {
     axios
@@ -29,17 +47,27 @@ function Resources({ getResourcesUrl }) {
           <PersonalMenu />
         </Grid>
         <Grid item lg={9}>
-          <h2>Resources</h2>
+          <h2 className={classes.heading}>
+            Resources{' '}
+            <Link to="/submit-resource">
+              <Button
+                variant="contained"
+                color="primary"
+                className={classes.button}
+              >
+                <AddCircleOutlineIcon /> &nbsp; Add new resource
+              </Button>
+            </Link>
+          </h2>
           <Search label="Search resources" />
+
           <br />
           <Grid container spacing={1}>
-            {resources.map(resource => {
-              return (
-                <Grid item lg={3} key={resource.guid}>
-                  <ResourceCard {...resource} />
-                </Grid>
-              );
-            })}
+            {resources.map(resource => (
+              <Grid item lg={3} key={resource.guid}>
+                <ResourceCard {...resource} />
+              </Grid>
+            ))}
           </Grid>
         </Grid>
       </Grid>
diff --git a/src/components/Resources/submitResource.js b/src/components/Resources/submitResource.js
index 940bf20..58ddbd4 100644
--- a/src/components/Resources/submitResource.js
+++ b/src/components/Resources/submitResource.js
@@ -1,6 +1,9 @@
+// Component to submit a resource at `/submit-resource`
 import React, { useState, useRef, useEffect } from 'react';
+import axios from 'axios';
 import CreatableSelect from 'react-select/creatable';
 import clsx from 'clsx';
+import { useForm } from 'react-hook-form';
 import { Link } from 'react-router-dom';
 import {
   Grid,
@@ -80,24 +83,31 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const SubmitResource = () => {
+const initialState = {
+  created: Date.now(),
+  description: '',
+  freeResource: true,
+  level: '',
+  mediaType: '',
+  review: '',
+  title: '',
+  url: '',
+  year: '',
+};
+
+const SubmitResource = matchProps => {
   const classes = useStyles();
   const inputLabel = useRef(null);
   const [labelWidth, setLabelWidth] = useState(0);
+  const { register, handleSubmit, errors } = useForm({
+    defaultValues: initialState,
+  });
+
   useEffect(() => {
     setLabelWidth(inputLabel.current.offsetWidth);
   }, []);
 
-  const [values, setValues] = useState({
-    url: '',
-    year: '',
-    level: '',
-    title: '',
-    review: '',
-    mediaType: '',
-    description: '',
-    freeResource: true,
-  });
+  const [values, setValues] = useState(initialState);
   const [tags, setTags] = useState([]);
 
   const handleChange = name => event => {
@@ -112,7 +122,20 @@ const SubmitResource = () => {
     setTags(newValue);
   };
 
-  const handleSubmit = () => alert('Ready to handle tour submit request 🚀');
+  const onSubmit = () => {
+    axios
+      .post('http://localhost:3001/resources', values)
+      .then(function(response) {
+        // handle success
+        console.log(matchProps);
+        matchProps.history.push('/resources');
+        console.log(response);
+      })
+      .catch(function(error) {
+        // handle error
+        console.log(error);
+      });
+  };
 
   return (
     <Grid container spacing={1}>
@@ -130,161 +153,186 @@ const SubmitResource = () => {
               <Link color="inherit" to="/resources">
                 Resources
               </Link>
-              <Typography color="textPrimary">Submit</Typography>
+              <Typography color="textPrimary">Add new resource</Typography>
             </Breadcrumbs>
           </Paper>
         </div>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <TextField
+            required
+            id="outlined-dense"
+            label="URL"
+            className={clsx(classes.textField, classes.dense)}
+            margin="dense"
+            variant="outlined"
+            fullWidth
+            value={values.url}
+            onChange={handleChange('url')}
+            name="url"
+            ref={register({ name: 'url', required: true, maxLength: 400 })}
+          />
+          {/* TODO: error for maxLength */}
+          {errors.url && 'URL is required'}
 
-        <TextField
-          required
-          id="outlined-dense"
-          label="URL"
-          className={clsx(classes.textField, classes.dense)}
-          margin="dense"
-          variant="outlined"
-          fullWidth
-          value={values.url}
-          onChange={handleChange('url')}
-        />
-
-        <TextField
-          id="outlined-dense"
-          label="Title"
-          className={clsx(classes.textField, classes.dense)}
-          margin="dense"
-          variant="outlined"
-          fullWidth
-          value={values.title}
-          onChange={handleChange('title')}
-        />
-
-        <TextField
-          id="outlined-dense"
-          label="Description"
-          className={clsx(classes.textField, classes.dense)}
-          margin="dense"
-          variant="outlined"
-          fullWidth
-          value={values.description}
-          onChange={handleChange('description')}
-        />
-
-        <TextField
-          id="outlined-dense"
-          label="Year Updated"
-          className={clsx(classes.textField, classes.dense)}
-          margin="dense"
-          variant="outlined"
-          value={values.year}
-          onChange={handleChange('year')}
-        />
-        <FormGroup aria-label="position" row className={classes.freeSwitch}>
-          <FormControlLabel
-            checked={values.freeResource}
-            value="start"
-            control={<Switch color="primary" />}
-            label="Free"
-            labelPlacement="start"
-            onChange={handleSwitchChange('freeResource')}
+          <TextField
+            required
+            id="outlined-dense"
+            label="Title"
+            className={clsx(classes.textField, classes.dense)}
+            margin="dense"
+            variant="outlined"
+            fullWidth
+            name="title"
+            ref={register}
+            value={values.title}
+            onChange={handleChange('title')}
           />
-        </FormGroup>
 
-        <FormControl variant="outlined" className={classes.formControl}>
-          <InputLabel
-            ref={inputLabel}
-            htmlFor="outlined-media-type-native-simple"
-            className={classes.label}
-          >
-            Media Type
-          </InputLabel>
-          <Select
-            native
-            value={values.mediaType}
-            inputProps={{
-              name: 'media-type',
-              id: 'outlined-media-type-native-simple',
-            }}
-            className={classes.dense}
+          <TextField
+            required
+            id="outlined-dense"
+            label="Description"
+            className={clsx(classes.textField, classes.dense)}
             margin="dense"
-            labelWidth={labelWidth}
-            onChange={handleChange('mediaType')}
-          >
-            <option value="" />
-            {mediaTypes.map(type => (
-              <option key={type} value={type}>
-                {type}
-              </option>
-            ))}
-          </Select>
-        </FormControl>
+            variant="outlined"
+            fullWidth
+            name="description"
+            ref={register}
+            value={values.description}
+            onChange={handleChange('description')}
+          />
 
-        <FormControl variant="outlined" className={classes.formControl}>
-          <InputLabel
-            ref={inputLabel}
-            htmlFor="outlined-level-native-simple"
-            className={classes.label}
-          >
-            Level
-          </InputLabel>
-          <Select
-            native
-            value={values.level}
-            inputProps={{
-              name: 'level',
-              id: 'outlined-level-native-simple',
-            }}
-            className={classes.dense}
+          {/* TODO: date validation */}
+          {/* TODO: date selector */}
+          <TextField
+            id="outlined-dense"
+            label="Year Updated"
+            className={clsx(classes.textField, classes.dense)}
             margin="dense"
-            labelWidth={labelWidth}
-            onChange={handleChange('level')}
-          >
-            <option value="" />
-            <option value="beginner">Beginner</option>
-            <option value="intermediate">Intermediate</option>
-            <option value="advanced">Advanced</option>
-          </Select>
-        </FormControl>
+            variant="outlined"
+            name="year_updated"
+            ref={register}
+            value={values.year}
+            onChange={handleChange('year')}
+          />
+
+          <FormGroup aria-label="position" row className={classes.freeSwitch}>
+            <FormControlLabel
+              checked={values.freeResource}
+              value="start"
+              control={<Switch color="primary" />}
+              label="Free"
+              name="price"
+              ref={register}
+              labelPlacement="start"
+              onChange={handleSwitchChange('freeResource')}
+            />
+          </FormGroup>
+
+          <FormControl variant="outlined" className={classes.formControl}>
+            <InputLabel
+              ref={inputLabel}
+              htmlFor="outlined-media-type-native-simple"
+              className={classes.label}
+            >
+              Media Type
+            </InputLabel>
+            <Select
+              native
+              value={values.mediaType}
+              inputProps={{
+                name: 'media-type',
+                id: 'outlined-media-type-native-simple',
+              }}
+              name="media_type"
+              ref={register}
+              className={classes.dense}
+              margin="dense"
+              labelWidth={labelWidth}
+              onChange={handleChange('mediaType')}
+            >
+              <option value="" />
+              {mediaTypes.map(type => (
+                <option key={type} value={type}>
+                  {type}
+                </option>
+              ))}
+            </Select>
+          </FormControl>
+
+          <FormControl variant="outlined" className={classes.formControl}>
+            <InputLabel
+              ref={inputLabel}
+              htmlFor="outlined-level-native-simple"
+              className={classes.label}
+            >
+              Level
+            </InputLabel>
+            <Select
+              native
+              value={values.level}
+              inputProps={{
+                name: 'level',
+                id: 'outlined-level-native-simple',
+              }}
+              ref={register}
+              className={classes.dense}
+              margin="dense"
+              labelWidth={labelWidth}
+              onChange={handleChange('level')}
+            >
+              <option value="" />
+              <option value="beginner">Beginner</option>
+              <option value="intermediate">Intermediate</option>
+              <option value="advanced">Advanced</option>
+            </Select>
+          </FormControl>
 
-        <TextField
-          id="outlined-dense"
-          label="Your Review"
-          value={values.review}
-          className={clsx(classes.textField, classes.dense)}
-          margin="dense"
-          variant="outlined"
-          fullWidth
-          multiline
-          rowsMax="4"
-          onChange={handleChange('review')}
-        />
+          <TextField
+            id="outlined-dense"
+            label="Your Review"
+            value={values.review}
+            className={clsx(classes.textField, classes.dense)}
+            margin="dense"
+            variant="outlined"
+            fullWidth
+            multiline
+            rowsMax="4"
+            onChange={handleChange('review')}
+            name="your_review"
+            ref={register}
+          />
 
-        <CreatableSelect
-          className={classes.select}
-          isMulti
-          onChange={handleTagChange}
-          placeholder="Tags"
-          options={defaultTags}
-          styles={{
-            control: styles => ({
-              ...styles,
-              borderColor: 'hsl(0, 0%, 77%)',
-              ':hover': { borderColor: 'rgba(0, 0, 0, 0.87)' },
-              ':focus': { border: '2px solid #3f51b5' },
-            }),
-            placeholder: styles => ({ ...styles, color: '#757575' }),
-          }}
-          value={tags}
-        />
+          <CreatableSelect
+            className={classes.select}
+            isMulti
+            onChange={handleTagChange}
+            placeholder="Tags"
+            options={defaultTags}
+            styles={{
+              control: (styles, state) => ({
+                ...styles,
+                borderColor: 'hsl(0, 0%, 77%)',
+                ':hover': { borderColor: 'rgba(0, 0, 0, 0.87)' },
+                ':focus': { border: '2px solid #3f51b5' },
+              }),
+              placeholder: styles => ({ ...styles, color: '#757575' }),
+            }}
+            value={tags}
+            name="tags"
+            ref={register}
+          />
 
-        <FormGroup aria-label="position" className={classes.submit}>
-          <Button
-            variant="contained"
-            className={classes.button}
-            onClick={handleSubmit}
-          >
-            Submit
-          </Button>
-        </FormGroup>
+          <FormGroup aria-label="position" className={classes.submit}>
+            <Button
+              variant="contained"
+              className={classes.button}
+              type="submit"
+            >
+              Submit
+            </Button>
+          </FormGroup>
+        </form>
       </Grid>
     </Grid>
   );