diff --git a/.env b/.env
new file mode 100644
index 00000000..44c0ec83
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+ SKIP_PREFLIGHT_CHECK=true
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..a7986828
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,18 @@
+{
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#7f40bf",
+    "activityBar.activeBorder": "#c78f58",
+    "activityBar.foreground": "#e7e7e7",
+    "activityBar.inactiveForeground": "#e7e7e799",
+    "activityBarBadge.background": "#c78f58",
+    "activityBarBadge.foreground": "#15202b",
+    "titleBar.activeBackground": "#663399",
+    "titleBar.inactiveBackground": "#66339999",
+    "titleBar.activeForeground": "#e7e7e7",
+    "titleBar.inactiveForeground": "#e7e7e799",
+    "statusBar.background": "#663399",
+    "statusBarItem.hoverBackground": "#7f40bf",
+    "statusBar.foreground": "#e7e7e7"
+  },
+  "peacock.color": "#639"
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 8e1f9446..6f0e2798 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,6 +3,7 @@ import './App.css';
 import Game from './components/Game.js';
 
 class App extends Component {
+  
   render() {
     return (
       <div className="App">
diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..2966ac58 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,20 +1,38 @@
 import React from 'react';
 import './FinalPoem.css';
 
-const FinalPoem = (props) => {
+// state, props, any callbacks, event handlers, or helper functions (with the exception of Game component). However, not every render function may need to look like that in the end result. In fact, it is expected that the render functions change in order to accommodate the requirements (namely the ones about conditional rendering).
 
-  return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
-
-      </section>
-
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+class FinalPoem extends React.Component {
+  showCompletedPoem = () => {
+    this.props.showCompletedPoemCallBack()
+  }
+  
+  render() {
+    const pressButton = 
+    <div className="FinalPoem__reveal-btn-container">
+    <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={this.showCompletedPoem} />
+  </div>
+    const fullPoem = this.props.fullPoem.map((line, i) => {
+      return (
+      <div>
+        <p key={i}>The {line.adjective} {line.noun} {line.adverb} {line.verb} the {line.adjective2} {line.noun2}.
+        </p>
       </div>
-    </div>
-  );
+      )
+    })
+    
+    return (
+      <div className="FinalPoem">
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
+          <div>
+            { this.props.showPoemStatus ? fullPoem : pressButton }
+          </div>
+        </section>
+      </div>
+       
+    );
+  }
 }
-
 export default FinalPoem;
diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..205b40b2 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,8 +8,31 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      completedPoem: [],
+      poemSubmitted: false,
+      showForm: true
+    }
+  }
+
+  showCompletedPoem = () => {
+    const itShows = this.state.showForm
+    this.setState({
+      poemSubmitted: true,
+      showForm: !itShows
+    })
   }
 
+  addVerse = (singlePoemVerse) => {
+    let lines = this.state.completedPoem;
+    
+    lines.push(singlePoemVerse);
+    this.setState({
+      lines
+    });
+   }
+
   render() {
 
     const exampleFormat = FIELDS.map((field) => {
@@ -20,6 +43,8 @@ class Game extends Component {
       }
     }).join(" ");
 
+
+
     return (
       <div className="Game">
         <h2>Game</h2>
@@ -32,12 +57,18 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+      { this.state.showForm ? 
+         <div>
+        <RecentSubmission lastVerse={this.state.completedPoem[this.state.completedPoem.length -1]}/> 
 
-        <PlayerSubmissionForm />
-
-        <FinalPoem />
+        <PlayerSubmissionForm addVerseCallBack={this.addVerse}
+        player={this.state.completedPoem.length} />
 
+      </div> : null
+      }
+        <FinalPoem fullPoem={this.state.completedPoem}
+        showPoemStatus={this.state.poemSubmitted}
+        showCompletedPoemCallBack={this.showCompletedPoem}/>
       </div>
     );
   }
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 1de05095..dbf6d768 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -5,25 +5,96 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+    
+    this.state = {
+      adjective: '',
+      noun: '',
+      adverb: '',
+      verb: '',
+      adjective2: '',
+      noun2: '',
+    }
+  }
+
+  //abstraction of whats being allocated to their proper place
+  onPoemInputChange = (event) => {
+    console.log(event);
+    const updatedState = {}; //updatedstate IS field
+
+    updatedState[event.target.name] = event.target.value;
+
+    this.setState(updatedState); //setting state of field
+  }
+
+  //sendSubmission this is the callback submitting form that calls the callaback function
+  onSubmit = (event) => {
+    event.preventDefault();
+    
+    this.props.addVerseCallBack({
+      adjective: this.state.adjective,
+      noun: this.state.noun,
+      adverb: this.state.adverb,
+      verb: this.state.verb,
+      adjective2: this.state.adjective2,
+      noun2: this.state.noun2,
+    });
+    
+    this.setState({
+      adjective: '',
+      noun: '',
+      adverb: '',
+      verb: '',
+      adjective2: '',
+      noun2: '',
+    }); 
   }
 
   render() {
 
+
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
-
-        <form className="PlayerSubmissionForm__form" >
+        <h3>Player Submission Form for Player #{ this.props.player +1 }</h3>
+          
+        <form className="PlayerSubmissionForm__form" onSubmit={this.onSubmit}>
 
           <div className="PlayerSubmissionForm__poem-inputs">
-
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
             <input
-              placeholder="hm..."
-              type="text" />
-
+              name="adjective"
+              placeholder="adjective"
+              onChange={this.onPoemInputChange}
+              value={this.state.adjective}
+            />
+            <input
+              name="noun"
+              placeholder="noun"
+              onChange={this.onPoemInputChange}
+              value={this.state.noun}
+            />
+              <input
+              name="adverb"
+              placeholder="adverb"
+              onChange={this.onPoemInputChange}
+              value={this.state.adverb}
+            />
+            <input
+              name="verb"
+              placeholder="verb"
+              onChange={this.onPoemInputChange}
+              value={this.state.verb}
+            />
+            <input
+              name="adjective2"
+              placeholder="adjective"
+              onChange={this.onPoemInputChange}
+              value={this.state.adjective2}
+            />
+            <input
+              name="noun2"
+              placeholder="noun"
+              onChange={this.onPoemInputChange}
+              value={this.state.noun2}
+            />
           </div>
 
           <div className="PlayerSubmissionForm__submit">
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..255dca82 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -2,12 +2,18 @@ import React from 'react';
 import './RecentSubmission.css';
 
 const RecentSubmission = (props) => {
+  if (props.lastVerse) {
+
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p 
+        className="RecentSubmission__submission">The {props.lastVerse.adjective} {props.lastVerse.noun} {props.lastVerse.adverb} {props.lastVerse.verb} the {props.lastVerse.adjective2} {props.lastVerse.noun2}.
+      </p>
     </div>
   );
-}
+} else {
+  return null
+}}
 
 export default RecentSubmission;