diff --git a/package.json b/package.json
index e2ef165..c0f13da 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "google-maps-react": "^2.0.2",
     "react": "^16.5.1",
     "react-dom": "^16.5.1",
+    "react-quiz-component": "0.2.0",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-scripts": "1.1.5"
@@ -20,4 +21,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}
\ No newline at end of file
diff --git a/public/quizimages/question1.jpg b/public/quizimages/question1.jpg
new file mode 100644
index 0000000..8ce9a50
Binary files /dev/null and b/public/quizimages/question1.jpg differ
diff --git a/public/quizimages/question2.jpg b/public/quizimages/question2.jpg
new file mode 100644
index 0000000..8f6d931
Binary files /dev/null and b/public/quizimages/question2.jpg differ
diff --git a/public/quizimages/question3.jpg b/public/quizimages/question3.jpg
new file mode 100644
index 0000000..c518c5e
Binary files /dev/null and b/public/quizimages/question3.jpg differ
diff --git a/public/quizimages/question4.jpg b/public/quizimages/question4.jpg
new file mode 100644
index 0000000..0e52c59
Binary files /dev/null and b/public/quizimages/question4.jpg differ
diff --git a/public/quizimages/question5.jpg b/public/quizimages/question5.jpg
new file mode 100644
index 0000000..c49d92f
Binary files /dev/null and b/public/quizimages/question5.jpg differ
diff --git a/src/components/Main.js b/src/components/Main.js
index 2259d17..5d7921c 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -7,7 +7,7 @@ import Tab from '@material-ui/core/Tab';
 import Typography from '@material-ui/core/Typography';
 import Home from '../pages/Home';
 import ViewMap from '../pages/ViewMap';
-import Quiz from '../pages/Quiz';
+import QuizPage from '../pages/QuizPage';
 import SightingList from '../pages/SightingList';
 import Report from '../pages/Report';
 import Info from '../pages/Info';
@@ -44,26 +44,26 @@ class SimpleTabs extends React.Component {
         const { classes } = this.props;
         const { value } = this.state;
 
-    return (
-    <div className={classes.root}>
-        <AppBar position="static">
-            <Tabs value={value} onChange={this.handleChange} centered>
-                <Tab label="Home" />
-                <Tab label="Report a Sighting"/>
-                <Tab label="Sightings" />
-                <Tab label="Trail-Cam Quiz" />
-                <Tab label="View Map" />
-                <Tab label="Marten Info" />
-            </Tabs>
-        </AppBar>
-        {value === 0 && <Home/>}
-        {value === 1 && <Report/>}
-        {value === 2 && <SightingList/>}
-        {value === 3 && <Quiz/>}
-        {value === 4 && <ViewMap/>}
-        {value === 5 && <Info/>}
-    </div>
-    );
+        return (
+            <div className={classes.root}>
+                <AppBar position="static">
+                    <Tabs value={value} onChange={this.handleChange} centered>
+                        <Tab label="Home" />
+                        <Tab label="Report a Sighting" />
+                        <Tab label="Sightings" />
+                        <Tab label="Trail-Cam Quiz" />
+                        <Tab label="View Map" />
+                        <Tab label="Marten Info" />
+                    </Tabs>
+                </AppBar>
+                {value === 0 && <Home />}
+                {value === 1 && <Report />}
+                {value === 2 && <SightingList />}
+                {value === 3 && <QuizPage />}
+                {value === 4 && <ViewMap />}
+                {value === 5 && <Info />}
+            </div>
+        );
     }
 }
 
diff --git a/src/components/QuizGame.js b/src/components/QuizGame.js
new file mode 100644
index 0000000..a8a1fa2
--- /dev/null
+++ b/src/components/QuizGame.js
@@ -0,0 +1,157 @@
+import React, { Fragment } from 'react';
+import Grid from '@material-ui/core/Grid';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import AppBar from '@material-ui/core/AppBar';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Quiz from 'react-quiz-component';
+
+/**
+ * Shuffles a given array.
+ * @param {*} array The array passed in.
+ */
+function shuffleArray(array) {
+    var j, x, i;
+    for (i = array.length - 1; i > 0; i--) {
+        j = Math.floor(Math.random() * (i + 1));
+        x = array[i];
+        array[i] = array[j];
+        array[j] = x;
+    }
+    return array;
+}
+
+function TabContainer(props) {
+    return (
+        <Typography component="div" variant='headline' align='center' style={{ padding: 8 }}>
+            {props.children}
+        </Typography>
+    );
+}
+
+TabContainer.propTypes = {
+    children: PropTypes.node.isRequired,
+};
+
+// Style for the tabs.
+const styles = theme => ({
+    root: {
+        flexGrow: 1,
+        backgroundColor: theme.palette.background.paper,
+    },
+});
+
+class QuizGame extends React.Component {
+    // The state of the component.
+    state = {
+        value: 0,
+    };
+
+    // Handles tab changes.
+    handleChange = (event, value) => {
+        this.setState({ value });
+    };
+
+    // Object that contains the easy quiz material.
+    easyQuiz = {
+        "quizTitle": "Trail Cam Quiz: Easy",
+        "questions": shuffleArray([
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question1.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "Black bear",
+                    "Common wombat",
+                    "Raccoon",
+                    "White-tailed deer"
+                ],
+                "correctAnswer": "1"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question2.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "American beaver",
+                    "Muskrat",
+                    "Porcupine",
+                    "Woodchuck"
+                ],
+                "correctAnswer": "3"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question3.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "American badger",
+                    "Raccoon",
+                    "Striped skunk",
+                    "Virginia opossum"
+                ],
+                "correctAnswer": "2"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question4.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "Eastern fox squirrel",
+                    "Eastern gray squirrel",
+                    "Red squirrel",
+                    "Southern flying squirrel"
+                ],
+                "correctAnswer": "3"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question5.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "American Crow",
+                    "Black Vulture",
+                    "Turkey Vulture",
+                    "Northern Raven"
+                ],
+                "correctAnswer": "3"
+            },
+        ])
+    };
+
+    // Renders the quiz component.
+    render() {
+        const { classes } = this.props;
+        const { value } = this.state;
+
+        return (
+            // Tabs
+            <div className={classes.root}>
+                <AppBar position="static">
+                    <Tabs
+                        value={value}
+                        centered
+                        fullWidth
+                        onChange={this.handleChange}
+                    >
+                        <Tab label="Easy" />
+                        <Tab label="Medium" />
+                        <Tab label="Hard" />
+                    </Tabs>
+                </AppBar>
+                {value === 0 && <TabContainer>
+                    <Fragment>
+                        <Grid container justify="center">
+                            <Quiz quiz={this.easyQuiz} />
+                        </Grid>
+                    </Fragment>
+                </TabContainer>}
+                {value === 1 && <TabContainer>Medium Quiz</TabContainer>}
+                {value === 2 && <TabContainer>Hard Quiz</TabContainer>}
+            </div>
+        );
+    }
+}
+
+QuizGame.propTypes = {
+    classes: PropTypes.object.isRequired
+};
+
+export default withStyles(styles)(QuizGame);
\ No newline at end of file
diff --git a/src/firebase.js b/src/firebase.js
index 8d01e36..6e6b6b2 100644
--- a/src/firebase.js
+++ b/src/firebase.js
@@ -1,5 +1,6 @@
 import firebase from 'firebase/app';
 import 'firebase/database';
+import 'firebase/storage';
 
 const config = {
     apiKey: "AIzaSyAYf9AbeYwLY892NRiQfn0AMtG9xIFAJbo",
diff --git a/src/pages/Quiz.js b/src/pages/Quiz.js
deleted file mode 100644
index 28b9f15..0000000
--- a/src/pages/Quiz.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Component } from 'react';
-import Typography from '@material-ui/core/Typography';
-
-class Quiz extends Component {
-    render() {
-        return (
-            <Typography variant='display1' align='center' gutterBottom>
-                Quiz
-            </Typography>
-        );
-    }
-}
-
-export default Quiz;
diff --git a/src/pages/QuizPage.js b/src/pages/QuizPage.js
new file mode 100644
index 0000000..4c36a98
--- /dev/null
+++ b/src/pages/QuizPage.js
@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+import QuizGame from '../components/QuizGame';
+
+
+class QuizPage extends Component {
+  render() {
+    return (
+      <QuizGame />
+    );
+  }
+}
+
+export default QuizPage;