diff --git a/package-lock.json b/package-lock.json
index aeb71fdc8b..7aab014972 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,11 +11,12 @@
         "@testing-library/jest-dom": "^5.16.2",
         "@testing-library/react": "^12.1.3",
         "@testing-library/user-event": "^13.5.0",
-        "axios": "^0.26.0",
+        "axios": "^0.26.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-router-dom": "^6.8.1",
-        "react-scripts": "5.0.0"
+        "react-scripts": "5.0.0",
+        "yup": "^1.2.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -4023,9 +4024,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "0.26.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.0.tgz",
-      "integrity": "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==",
+      "version": "0.26.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
+      "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
       "dependencies": {
         "follow-redirects": "^1.14.8"
       }
@@ -11300,6 +11301,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/property-expr": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz",
+      "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA=="
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -13067,6 +13073,11 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "node_modules/tiny-case": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+      "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q=="
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -13099,6 +13110,11 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
+    },
     "node_modules/tough-cookie": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.0.0.tgz",
@@ -14342,6 +14358,28 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/yup": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-1.2.0.tgz",
+      "integrity": "sha512-PPqYKSAXjpRCgLgLKVGPA33v5c/WgEx3wi6NFjIiegz90zSwyMpvTFp/uGcVnnbx6to28pgnzp/q8ih3QRjLMQ==",
+      "dependencies": {
+        "property-expr": "^2.0.5",
+        "tiny-case": "^1.0.3",
+        "toposort": "^2.0.2",
+        "type-fest": "^2.19.0"
+      }
+    },
+    "node_modules/yup/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     }
   },
   "dependencies": {
@@ -17176,9 +17214,9 @@
       "integrity": "sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw=="
     },
     "axios": {
-      "version": "0.26.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.0.tgz",
-      "integrity": "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==",
+      "version": "0.26.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
+      "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
       "requires": {
         "follow-redirects": "^1.14.8"
       }
@@ -22371,6 +22409,11 @@
         }
       }
     },
+    "property-expr": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz",
+      "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA=="
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -23673,6 +23716,11 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tiny-case": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+      "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q=="
+    },
     "tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -23696,6 +23744,11 @@
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
       "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="
     },
+    "toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
+    },
     "tough-cookie": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.0.0.tgz",
@@ -24646,6 +24699,24 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
+    },
+    "yup": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-1.2.0.tgz",
+      "integrity": "sha512-PPqYKSAXjpRCgLgLKVGPA33v5c/WgEx3wi6NFjIiegz90zSwyMpvTFp/uGcVnnbx6to28pgnzp/q8ih3QRjLMQ==",
+      "requires": {
+        "property-expr": "^2.0.5",
+        "tiny-case": "^1.0.3",
+        "toposort": "^2.0.2",
+        "type-fest": "^2.19.0"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "2.19.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+          "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA=="
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 61bb183474..d5ed955ed0 100644
--- a/package.json
+++ b/package.json
@@ -6,11 +6,12 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
-    "axios": "^0.26.0",
+    "axios": "^0.26.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.8.1",
-    "react-scripts": "5.0.0"
+    "react-scripts": "5.0.0",
+    "yup": "^1.2.0"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/App.js b/src/App.js
index 29530fe9d2..ac9bb4d8c4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,11 +1,102 @@
-import React from "react";
+import React,{useState}from "react";
+import { Route,Routes, Link } from "react-router-dom";
+import axios from "axios";
 
+import schema from './comps/formSchema'
+import * as yup from 'yup'
+
+import Form from "./comps/Form";
+import Home from "./comps/Home";
+
+const intialvalues = {
+  name: "",
+  topping1: false,
+  topping2: false,
+  topping3: false,
+  topping4: false,
+  size: "",
+  specialText: ""
+}
+
+const intialErrors = {
+  name: "",
+  topping1: "",
+  topping2: "",
+  topping3: "",
+  topping4: "",
+  size: "",
+  specialText: ""
+
+}
 const App = () => {
+const [formValues,setFormvalues] = useState(intialvalues)
+const [formErrors,setFormErrors] = useState(intialErrors)
+const [users,setUsers] = useState([])
+
+
+
+
+const handleChange = (name,value) => {
+  setFormvalues({...formValues, [name]: value})
+  formValidate(name,value)
+
+}
+
+const formValidate = (name,value) => {
+  yup.reach(schema,name)
+   .validate(value)
+    .then(() => setFormErrors({...formErrors, [name]: ""}))
+    .catch(err => setFormErrors({
+        ...formErrors, [name]: err.errors[0]}))
+}
+
+
+const handleSubmit = () => {
+axios.post("https://reqres.in/api/orders", formValues)
+.then(res => {
+  setUsers([res.data,...users])
+})
+.catch(err => console.error(err))
+}
+
+
+
+
+
   return (
-    <>
-      <h1>Lambda Eats</h1>
-      <p>You can remove this code and create your own header</p>
-    </>
+<><p>{formErrors.name}</p>
+      <h1>Bloomtech Eats</h1>
+      <i>Welcome to the best Pizza spot in the DMV!!!</i>
+   <button> Carry Out </button> <button> Delivery</button> 
+
+   <nav>
+     <Link to="/"> Home </Link>
+     <Link to="/pizza">    <button id="order-pizza" > Order Now!!!</button> </Link>
+     <Link to="/"> Images</Link>
+      </nav>
+  
+     
+      <Routes>
+        <Route path="/" element={<Home />}/>
+        <Route path="/pizza" element={ <Form values={formValues} 
+   change={handleChange} 
+   errors={formErrors} 
+   submit={handleSubmit} />}/>
+      </Routes>
+      {users.map(user => (
+        <div key={user.id}>
+          <p>{user.name}</p>
+          <p>{user.size}</p>
+          <p>{user.topping1}</p>
+          <p>{user.topping2}</p>
+          <p>{user.topping3}</p>
+          <p>{user.topping4}</p>
+        </div>
+      ))}
+
+
+   
+   </>
   );
 };
 export default App;
diff --git a/src/comps/Form.js b/src/comps/Form.js
new file mode 100644
index 0000000000..7c5824a0b5
--- /dev/null
+++ b/src/comps/Form.js
@@ -0,0 +1,71 @@
+import React from 'react'
+
+
+
+function Form(props) {
+const {change,submit} = props 
+const {name,size,topping1,topping2,topping3,topping4,specialText} = props.values
+
+const onChange = (event => {
+    const {checked,value,name,type} = event.target
+    const valueToUse = type === 'checkbox' ? checked : value
+  change(name, valueToUse)
+    });
+
+    const onSubmit = (e) => {
+        e.preventDefault();
+        submit();
+    }
+
+    
+
+
+  return (
+    <div>
+        
+        <h1> Bloomtech Eats</h1>
+        <form id='pizza-form' onSubmit={onSubmit} >
+            <label> Name
+            <input 
+            type="text"
+            id="name-input"
+            name="name"
+            value={name}
+            onChange={onChange}
+            />
+            </label><br/>
+
+            <label>  Pick your Size
+            <select id="size-dropdown" type="" name="size" value={size} onChange={onChange}>
+                <option value="0"> -- Select a size--</option>
+                <option value="1"> Small</option>
+                <option value="2"> Medium</option>
+                <option value="3"> Large</option>
+                <option value="4"> X-large</option>
+            </select><br/>
+</label> 
+          <h3> Add your toppings </h3>
+          <label> Toppings
+            <input type="checkbox" />
+          <input type="checkbox"   name="topping1"checked={topping1} onChange={onChange}/> 
+          <input type="checkbox" name="topping2" checked={topping2} onChange={onChange}/>
+          <input type="checkbox" name="topping3" checked={topping3} onChange={onChange}/>
+          <input type="checkbox"  name="topping4" checked={topping4} onChange={onChange}/>
+          </label>
+          
+         
+
+
+            <br/>
+
+            <label id='special-text'> Special instructions <br/>
+               <input name="specialText" type="text" value={specialText} onChange={onChange}/>
+            </label><br />
+            <input type="submit" value="create a friend" onChange={onChange} id="order-button" />
+        </form>
+    </div>
+  )
+}
+
+
+export default Form
diff --git a/src/comps/Home.js b/src/comps/Home.js
new file mode 100644
index 0000000000..7b15f846a6
--- /dev/null
+++ b/src/comps/Home.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Home() {
+  return (
+    <div>Home</div>
+  )
+}
+
+export default Home
diff --git a/src/comps/formSchema.js b/src/comps/formSchema.js
new file mode 100644
index 0000000000..bada38a572
--- /dev/null
+++ b/src/comps/formSchema.js
@@ -0,0 +1,16 @@
+import * as yup from "yup"
+
+const formschema = yup.object().shape({
+    name: yup.string().required("name must be at least 2 characters").min(2, "name must be at least 2 characters"),
+    size: yup.string().oneOf(["1","2","3","4"], 'you must chose your size'),
+    topping1: yup.boolean(),
+    topping2: yup.boolean(),
+    topping3: yup.boolean(),
+    topping4: yup.boolean(),
+    specialText: yup.string()
+  
+   
+
+})
+
+export default formschema
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index afed62d599..13683a2f7d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,5 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
 import App from "./App";
+import { BrowserRouter } from "react-router-dom";
+
+ ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById("root"));
 
-ReactDOM.render(<App />, document.getElementById("root"));