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..198e944 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,15 +2,23 @@ import React, { Component } from 'react';
 import './App.css';
 import MadLibs from './madlibs/MadLibs.js';
 import Story from './components/Story.js';
+import NewStoryForm from './components/NewStoryForm.js';
 
 class App extends Component {
   constructor() {
     super();
 
     this.state = {
-      selectedMadLib: MadLibs[0]
+      // Will only work if * 4, there are only 4 different stories to chose from
+      selectedMadLib: MadLibs[Math.floor(Math.random() * 4 )],
+      storyVisible: false,
     };
+
+    this.updateWord = this.updateWord.bind(this);
   }
+// Returns a new function that, when called, will have this equal to thisArg, the first parameter equal to param1, the second parameter equal to param2, etc.
+//   ex. let add5 = sum.bind(null, 5);
+// console.log(add5(10)); is 15
 
   // Update the value of a word in the selected
   // mad lib using setState
@@ -23,18 +31,35 @@ class App extends Component {
     this.setState({selectedMadLib: updatedMadLib});
   }
 
+  visibleStory = () => {
+    if (this.state.storyVisible) {
+      return(
+        <Story
+          title={ this.state.selectedMadLib.title }
+          text={ this.state.selectedMadLib.getText() }
+          />
+      );
+    }
+  }
+
+  completedStoryVisibility = () => {
+    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() }
+        <NewStoryForm
+        completedStoryVisibility={this.completedStoryVisibility}
+
+          updateWord={this.updateWord}
+          words={this.state.selectedMadLib.words}
           />
+        {this.visibleStory()}
       </section>
     );
   }
diff --git a/src/components/NewStoryForm.css b/src/components/NewStoryForm.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/NewStoryForm.js b/src/components/NewStoryForm.js
new file mode 100644
index 0000000..02d3dd9
--- /dev/null
+++ b/src/components/NewStoryForm.js
@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import './NewStoryForm.css';
+
+class NewStoryForm extends Component {
+
+  static propTypes = {
+      updateWord: PropTypes.func.isRequired,
+      words: PropTypes.array.isRequired,
+    }
+
+  onFieldChange = (key, value) => {
+    this.props.updateWord(key, value);
+  }
+
+  onSubmit = (event) => {
+    event.preventDefault();
+    this.props.completedStoryVisibility();
+  }
+
+  render() {
+    let words = this.props.words;
+    let wordInput = words.map((word) => {
+          return(
+            <section key={word.key}>
+              <label>{word.label}</label>
+              <input
+               name={word.key}
+               onChange={(event) => { this.onFieldChange(word.key, event.target.value) }}
+               />
+            </section>
+          );
+        });
+
+        return (
+      <section>
+        <form
+        className="new-story-form"
+
+        onSubmit={this.onSubmit}>
+
+          {wordInput}
+          <input type="submit" />
+        </form>
+      </section>
+    );
+  }
+}
+
+
+
+export default NewStoryForm;