diff --git a/package.json b/package.json
index 9d7a88e..be01922 100644
--- a/package.json
+++ b/package.json
@@ -13,4 +13,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
\ No newline at end of file
+}
diff --git a/src/App.js b/src/App.js
index dd2692a..de8ccea 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,19 +2,21 @@ import React, { Component } from 'react';
 import './App.css';
 import MadLibs from './madlibs/MadLibs.js';
 import Story from './components/Story.js';
+import StoryForm from './components/StoryForm.js';
 
 class App extends Component {
   constructor() {
     super();
 
     this.state = {
-      selectedMadLib: MadLibs[0]
+      selectedMadLib: MadLibs[(Math.floor(Math.random() * 4)  )],
+      storyVisible: false,
     };
   }
 
   // Update the value of a word in the selected
   // mad lib using setState
-  updateWord(key, value) {
+  updateWord = (key, value) => {
     const updatedMadLib = this.state.selectedMadLib;
     const changedWord = updatedMadLib.words.find((word) => {
       return word.key === key
@@ -23,18 +25,30 @@ class App extends Component {
     this.setState({selectedMadLib: updatedMadLib});
   }
 
+  showStory = () => {
+    if (this.storyVisible) { return(<Story
+      title={ this.state.selectedMadLib.title}
+      text={ this.state.selectedMadLib.getText()}
+    />)}
+  }
+
+  visibility = () => {
+    this.setState({
+      storyVisible: true,
+    });
+  }
+
   render() {
     return (
       <section className="App">
         <h1>Welcome to MadLibs!</h1>
         <p>Fill in all of the choices to see your final story.</p>
-        {/*
-          Render your form with input values
-        */}
-        <Story
-          title={ this.state.selectedMadLib.title }
-          text={ this.state.selectedMadLib.getText() }
-          />
+        {<StoryForm
+          words={ this.state.selectedMadLib.words }
+          updateWord={ this.updateWord.words }
+          visibility={ this.visibility }
+        />}
+        {this.showStory()}
       </section>
     );
   }
diff --git a/src/components/StoryForm.css b/src/components/StoryForm.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/StoryForm.js b/src/components/StoryForm.js
new file mode 100644
index 0000000..f2a1b72
--- /dev/null
+++ b/src/components/StoryForm.js
@@ -0,0 +1,52 @@
+import React, {Component} from 'react';
+import './StoryForm.css';
+import PropTypes from 'prop-types'
+
+class StoryForm extends Component {
+  constructor() {
+    super();
+  }
+
+  static propTypes = {
+    updateWord: PropTypes.func.isRequired,
+    words: PropTypes.array.isRequired,
+    visibility: PropTypes.func.isRequired,
+  }
+
+  onSubmit = (event) => {
+    event.preventDefault();
+    this.props.visibility();
+  }
+
+
+  render() {
+    console.log(this.props.words)
+    const words = this.props.words.map((item) => {
+      return(
+        <section key={item.key} className="label-input">
+          <label htmlFor={item.key}>{item.label}: </label>
+          <input
+            name={item.key}
+            onChange={(event) => { this.props.updateWord(item.key, event.target.value)}}
+          />
+        </section>
+      );
+    });
+
+    return (
+      <form
+        onSubmit={ this.onSubmit }
+        className="story-form"
+      >
+      { words }
+      <input
+        className="button"
+        type="submit"
+        value="Submit Words"
+      />
+      </form>
+    );
+  }
+}
+
+export default StoryForm;