diff --git a/src/components/ReportForm.js b/src/components/ReportForm.js
index cab0f04..b380827 100644
--- a/src/components/ReportForm.js
+++ b/src/components/ReportForm.js
@@ -1,19 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-// import classNames from 'classnames';
+import Grid from '@material-ui/core/Grid';
 import { withStyles } from '@material-ui/core/styles';
 import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
+import Button from '@material-ui/core/Button';
 
+/**
+ * Styles that the different
+ * Material UI components pull
+ * in. Mostly used for spacing.
+ */
 const styles = theme => ({
   container: {
     display: 'flex',
     flexWrap: 'wrap',
   },
   textField: {
-    marginLeft: theme.spacing.unit,
+    marginLeft: theme.spacing.unit * 2,
     marginRight: theme.spacing.unit,
-    marginTop: theme.spacing.unit,
+    marginTop: theme.spacing.unit * 2,
+    flexBasis: 280,
+  },
+  button: {
+    marginLeft: theme.spacing.unit * 2,
+    marginRight: theme.spacing.unit,
+    marginTop: theme.spacing.unit * 2,
   },
   dense: {
     marginTop: 30,
@@ -23,6 +35,14 @@ const styles = theme => ({
   },
 });
 
+/**
+ * Function for formatting the
+ * date as a string that
+ * Material UI can use. We'll
+ * also store the date like
+ * this string in the database.
+ * @param {*} date, Date passed in. 
+ */
 function formatDate(date) {
     var d = new Date(date),
         month = '' + (d.getMonth() + 1),
@@ -95,109 +115,150 @@ const confidenceLevels = [
     },
   ];
 
+/**
+ * The form compnent.
+ */
 class ReportForm extends React.Component {
+  /**
+   * State of form components.
+   */
   state = {
     date: formatDate(new Date()),
     time: '00:00',
-    multiline: 'Controlled',
     type: '',
     confidence: ''
   };
 
+  /**
+   * Handles state change in form
+   * components.
+   */
   handleChange = name => event => {
     this.setState({
       [name]: event.target.value,
     });
   };
 
+  /**
+   * The render method for this component.
+   */
   render() {
     const { classes } = this.props;
 
+    /**
+     * The actual form.
+     */
     return (
-      <form className={classes.container} noValidate autoComplete="off">
-        <TextField
-          id="select-sighting-type"
-          select
-          label="Select"
-          className={classes.textField}
-          value={this.state.type}
-          onChange={this.handleChange('type')}
-          SelectProps={{
-            MenuProps: {
-              className: classes.menu,
-            },
-          }}
-          helperText="Please select type of sighting"
-          margin="normal"
-          variant="outlined"
-        >
-          {sightingTypes.map(option => (
-            <MenuItem key={option.value} value={option.value}>
-              {option.label}
-            </MenuItem>
-          ))}
-        </TextField>
+      <form className={classes.container} noValidate autoComplete="off" method='GET'>
+        <Grid container spacing={8}>
+                <Grid item xs={5} xl={2}>
+                    <TextField
+                    id="select-sighting-type"
+                    select
+                    required
+                    name="sighting-type"
+                    label="Select"
+                    className={classes.textField}
+                    value={this.state.type}
+                    onChange={this.handleChange('type')}
+                    SelectProps={{
+                        MenuProps: {
+                        className: classes.menu,
+                        },
+                    }}
+                    helperText="Please select type of sighting"
+                    >
+                    {sightingTypes.map(option => (
+                        <MenuItem key={option.value} value={option.value}>
+                        {option.label}
+                        </MenuItem>
+                    ))}
+                    </TextField>
+                </Grid>
 
-        <TextField
-          id="select-confidence"
-          select
-          label="Select"
-          className={classes.textField}
-          value={this.state.confidence}
-          onChange={this.handleChange('confidence')}
-          SelectProps={{
-            MenuProps: {
-              className: classes.menu,
-            },
-          }}
-          helperText="Please select confidence in sighting"
-          margin="normal"
-          variant="outlined"
-        >
-          {confidenceLevels.map(option => (
-            <MenuItem key={option.value} value={option.value}>
-              {option.label}
-            </MenuItem>
-          ))}
-        </TextField>
+                <Grid item xs={5} xl={2}>
+                    <TextField
+                    id="select-confidence"
+                    select
+                    required
+                    name="sighting-confidence"
+                    label="Select"
+                    className={classes.textField}
+                    value={this.state.confidence}
+                    onChange={this.handleChange('confidence')}
+                    SelectProps={{
+                        MenuProps: {
+                        className: classes.menu,
+                        },
+                    }}
+                    helperText="Please select confidence in sighting"
+                    >
+                    {confidenceLevels.map(option => (
+                        <MenuItem key={option.value} value={option.value}>
+                        {option.label}
+                        </MenuItem>
+                    ))}
+                    </TextField>
+                </Grid>
 
-        <TextField
-            id="sighting-date"
-            label="Sighting date"
-            type="date"
-            value={this.state.date}
-            className={classes.textField}
-            onChange={this.handleChange('date')}
-            InputLabelProps={{
-              shrink: true,
-            }}
-          />
+                <Grid item xs={12}>
+                    <TextField
+                        id="sighting-date"
+                        required
+                        label="Sighting date"
+                        name="sighting-date"
+                        type="date"
+                        value={this.state.date}
+                        className={classes.textField}
+                        onChange={this.handleChange('date')}
+                        InputLabelProps={{
+                        shrink: true,
+                        }}
+                    />
+                </Grid>
 
-          <TextField
-            id="sighting-time"
-            label="Sighting time"
-            type="time"
-            value={this.state.time}
-            className={classes.textField}
-            onChange={this.handleChange('time')}
-            InputLabelProps={{
-              shrink: true,
-            }}
-          />
-        <TextField
-          id="sighting-description"
-          label="Description"
-          multiline
-          rows="5"
-          placeholder="Describe the sighting to the best of your ability."
-          defaultValue=""
-          className={classes.textField}
-          margin="normal"
-          variant="outlined"
-          InputLabelProps={{
-            shrink: true,
-          }}
-        />
+                <Grid item xs={12}>
+                    <TextField
+                        id="sighting-time"
+                        required
+                        label="Sighting time"
+                        name="sighting-time"
+                        type="time"
+                        margin="normal"
+                        value={this.state.time}
+                        className={classes.textField}
+                        onChange={this.handleChange('time')}
+                        InputLabelProps={{
+                        shrink: true,
+                        }}
+                    />
+                </Grid>
+
+                <Grid item xs={12}>
+                    <TextField
+                    id="sighting-description"
+                    required
+                    label="Description"
+                    name="sighting-desc"
+                    multiline
+                    rows="5"
+                    placeholder="Describe the sighting to the best of your ability."
+                    defaultValue=""
+                    className={classes.textField}
+                    margin="normal"
+                    variant="outlined"
+                    InputLabelProps={{
+                        shrink: true,
+                    }}
+                    />
+                </Grid>
+                
+                <Grid item xs={12}>
+                    <Button variant="contained" type="submit" color="primary" className={classes.button}>
+                        Submit
+                    </Button>
+                </Grid>
+        </Grid>
       </form>
     );
   }
diff --git a/src/pages/Report.js b/src/pages/Report.js
index 3a46a74..8a7909d 100644
--- a/src/pages/Report.js
+++ b/src/pages/Report.js
@@ -5,7 +5,7 @@ import Typography from '@material-ui/core/Typography';
 class Report extends Component {
     render() {
         return (
-            <Typography variant='display1' align='center' gutterBottom>
+            <Typography variant='display1' align='left' gutterBottom>
             <ReportForm/>
             </Typography>
         );