diff --git a/howto/src/App.js b/howto/src/App.js
index 4e858f0..88c96a3 100644
--- a/howto/src/App.js
+++ b/howto/src/App.js
@@ -12,53 +12,15 @@ import { postUser, fetchHowto } from './Components/Store/actions/action'
 import Header from './Components/Header'
 import HowToCard from './Components/HowToCard'
 import Signup from './Components/Signup'
-import formSchema from './Components/Validation/FormSchema'
 import Login from './Components/Login'
-import SearchBar from './Components/SearchBar'
 import AddHowToForm from './Components/AddHowToForm'
 import EditHowToForm from './Components/EditHowToForm'
+import SearchBar from './Components/SearchBar'
+import Dropdown from './Components/Dropdown'
+import Delete from './Components/Delete'
 
 import styled, { keyframes } from 'styled-components'
 
-
-
-
-const StyledCardsDiv = styled.div`
-display:flex;
-flex-direction: column;
-align-items: center;
-.cardsHeading{
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  color: white;
-  background: black;
-  width: 100%;
-  h1{
-    padding: 5px 15px;
-    font-size: 1.5rem;
-  }
-  form{
-    select{
-      color: white;
-      font-size: 1.3rem;
-      background: black;
-      border: 0px solid silver;
-      option{
-        font-size: 2rem;
-      }
-    }
-  }
-  h3{
-    padding: 5px;
-    font-size: 1rem;
-  }
-}
-h2{
-  font-size: 2rem;
-}
-`
-
 const StyledBody = styled.div`
 background: url(
   'https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80'
@@ -99,6 +61,9 @@ padding: 2%;
 width: 95%;
 `
 const kfLogo = keyframes`
+25%{
+  border: 1px dotted gray;
+}
 100%{
    background teal;
    color: black;
@@ -107,7 +72,7 @@ const kfLogo = keyframes`
 `
 const StyledLogo = styled.img`
 width: 20%;
-border: 1px solid gray;
+border: 1px dotted gray;
 border-radius: 50% 50%;
 margin: 150px 0px 32px 0px;
 color: white;
@@ -117,6 +82,31 @@ box-shadow: 0px 0px 80px 1px;
 animation: ${kfLogo} 1.3s ease-in-out forwards;
 `
 
+const StyledCardsDiv = styled.div`
+display:flex;
+flex-direction: column;
+align-items: center;
+.cardsHeading{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: white;
+  background: black;
+  width: 100%;
+  h1{
+    padding: 5px 15px;
+    font-size: 1.5rem;
+  }
+  h3{
+    padding: 5px;
+    font-size: 1rem;
+  }
+}
+h2{
+  font-size: 2rem;
+}
+`
+
 
 
 /////////////////////////////////(╯°□°）╯︵ ┻━┻
@@ -136,7 +126,8 @@ const initialLogIn = {
 }
 
 const initialHowToForm = {
-  username: '',
+  title: '',
+  author: '',
   topic: '',
   steps: '',
 }
@@ -160,6 +151,7 @@ function App(props) {
   const [formErrors, setFormErrors] = useState(initialFormErrors)
   const [disabled, setDisabled] = useState(initialDisabled)
   const [users, setUser] = useState(initialUsers)
+  const [login, setLogin] = useState(initialLogIn)
 
   ///////////////////////////////
   //HowToCardStates(╯°□°）╯︵ ┻━┻
@@ -189,6 +181,7 @@ function App(props) {
       })
       .catch(err => {
         console.log(err)
+        debugger
       })
   }
 
@@ -200,6 +193,7 @@ function App(props) {
       })
       .catch(err => {
         console.log(err)
+        debugger
       })
   }
   ////////////////////////////////////////////////
@@ -208,9 +202,9 @@ function App(props) {
 
   //////////////FORM HELPER FUNCTIONS START HERE//////
   ///////////////////////////////////////////////////
-  const inputChange = (name, value) => {
+  const inputChange = (name, value, values, setValues, schema) => {
     yup
-      .reach(formSchema, name)
+      .reach(schema, name)
 
       .validate(value)
 
@@ -228,8 +222,8 @@ function App(props) {
         })
       })
 
-    setSignUpFormValues({
-      ...signUpFormValues,
+    setValues({
+      ...values,
       [name]: value
     })
   }
@@ -243,7 +237,7 @@ function App(props) {
       password: signUpFormValues.password.trim(),
       email: signUpFormValues.email.trim(),
     }
-    props.postUser(newUser)
+    postNewUser(newUser)
   }
 
   const submitCard = () => {
@@ -264,11 +258,11 @@ function App(props) {
     props.fetchHowto()
   }, [])
 
-  useEffect(() => {
-    formSchema.isValid(signUpFormValues).then(valid => {
-      setDisabled(!valid)
-    })
-  }, [signUpFormValues])
+  // useEffect(() => {
+  //   formSchemaLogin.isValid(login).then(valid => {
+  //     setDisabled(!valid)
+  //   })
+  // }, [login])
 
   return (
     <StyledBody>
@@ -285,21 +279,34 @@ function App(props) {
 
         <StyledLowerTopDiv>
 
+          <Route path='/user/delete'>
+            <Delete />
+          </Route>
+
           <Route path='/user/edit'>
             <EditHowToForm
+              values={howToFormValues}
+              setValues={setHowToFormValues}
               inputChange={inputChange}
               submit={submitCard}
               disabled={disabled}
               errors={formErrors}
+              cards={howToCards}
+              setCards={setHowToCards}
+              initial={initialHowToForm}
+              setDisabled={setDisabled}
             />
           </Route>
 
           <Route path='/user/create'>  
-          {/* A workable link is commented out inside the Header Component */}
+          
             <AddHowToForm
+              values={howToFormValues}
+              setValues={setHowToFormValues}
               inputChange={inputChange}
               submit={submitCard}
               disabled={disabled}
+              setDisabled={setDisabled}
               errors={formErrors}
             />
           </Route>
@@ -307,9 +314,11 @@ function App(props) {
           <Route path='/signup'>
             <Signup
               values={signUpFormValues}
+              setValues={setSignUpFormValues}
               inputChange={inputChange}        
               submit={submitUser}
               disabled={disabled}
+              setDisabled={setDisabled}
               errors={formErrors} 
               />
           </Route>
@@ -319,7 +328,15 @@ function App(props) {
           </Route>
 
           <Route path ='/login'>
-            <Login />
+            <Login
+              values={login}
+              setValues={setLogin}
+              inputChange={inputChange}
+              disabled={disabled}
+              setDisabled={setDisabled}
+              errors={formErrors}
+              initial={initialLogIn}
+            />
           </Route>
 
         </StyledLowerTopDiv>
@@ -332,17 +349,13 @@ function App(props) {
           <h1>Popular How To's!</h1>
           
           <form>
-            <SearchBar/>
-          </form>
-          <form>
-          <select>
-            <option>Select a Category</option>
-            <option>Home and Living</option>
-            <option>Business</option>
-            <option>Health</option>
-            <option>Educational</option>
-          </select>
+            <SearchBar
+              cards={howToCards}
+              setCards={setHowToCards}
+              getCards={getCards}
+            />
           </form>
+          <Dropdown />
         </div>
         {props.isLoading && <h2>LOADING...</h2>}
         {props.error && (<p>ERROR {this.props.error}</p>)}
diff --git a/howto/src/Components/AddHowToForm.js b/howto/src/Components/AddHowToForm.js
index bc6d7c2..4748dc0 100644
--- a/howto/src/Components/AddHowToForm.js
+++ b/howto/src/Components/AddHowToForm.js
@@ -1,25 +1,27 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import styled from 'styled-components'
+import formSchemaCard from './Validation/FormSchemaCard'
+
+import Logo from './Logo'
 
 const StyledAddForm = styled.form`
 display: flex;
 flex-direction: column;
 align-items: center;
-width: 30%;
-margin: 20px;;
-padding: 30px;
+width: 27%;
+
 
+padding: 16px;
 color: white;
 font-size: 1.3rem;
 text-align: center;
-background: black;
+background: url('https://images.unsplash.com/photo-1557683311-eac922347aa1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2030&q=80');
 border-radius: 20% 20%;
 h2{
-   
 }
 input {
     display: flex;
-    color: lightblue;
+    color: white;
     font-size: 2rem;
     background: black;
     border-radius: 10px;
@@ -27,24 +29,33 @@ input {
     }
 #stepsInput{
     display: flex;
-   
 }
-
 button{
     color: white;
-    background: green;
+    background: violet;
     width: 40%;
     padding: 5px;
     border-radius: 15px;
+    &:hover{
+        cursor: pointer;
+        background: gold;
+    }
 }
 `
 
 export default function AddHowToForm(props){
-    const { inputChange, submit, disabled, errors } = props
+    const { 
+        values, 
+        setValues, 
+        inputChange, 
+        submit, 
+        disabled, 
+        setDisabled, 
+        errors } = props
 
     const onInputChange = e =>{ 
         const { name, value } = e.target
-        inputChange(name, value)
+        inputChange(name, value, values, setValues, formSchemaCard)
     }
 
     const onSubmit = e =>{
@@ -52,6 +63,12 @@ export default function AddHowToForm(props){
         submit()
     }
 
+    useEffect(() => {
+        formSchemaCard.isValid(values).then(valid => {
+          setDisabled(!valid)
+        })
+      }, [values])
+
     return(
         <StyledAddForm
             onSubmit={onSubmit}
@@ -61,9 +78,12 @@ export default function AddHowToForm(props){
             <div>{errors.topic}</div>
             <div>{errors.steps}</div>
 
+            <Logo />
+
             <h2>Create a How To</h2>
             <label>Title of your How To
                 <input
+                    value={values.title}
                     name='title'
                     type='text'
                     onChange={onInputChange}
@@ -72,6 +92,7 @@ export default function AddHowToForm(props){
 
             <label>Your name
                 <input
+                    value={values.author}
                     name='author'
                     type='text'
                     onChange={onInputChange}
@@ -80,15 +101,17 @@ export default function AddHowToForm(props){
             
             <label>Topic
                 <input
+                    value={values.topic}
                     name='topic'
                     type='text'
                     onChange={onInputChange}
                 />
             </label>
 
-            <label>Explain your idea in straightforward steps
+            <label>Explain your idea in steps
                 <input
                     id='stepsInput'
+                    value={values.steps}
                     name='steps'
                     type='text'
                     onChange={onInputChange}
diff --git a/howto/src/Components/Delete.js b/howto/src/Components/Delete.js
new file mode 100644
index 0000000..741ed83
--- /dev/null
+++ b/howto/src/Components/Delete.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const StyledDelete = styled.button`
+background: red;
+color: black;
+font-size: 5rem;
+width: 75%;
+padding: 80px;
+margin: 11%;
+border: 1px solid red;
+border-radius: 20px;
+&:hover{
+    color: red;
+    cursor: pointer;
+    border: 1px solid black;
+    box-shadow: 0px 0px 100px 10px;
+    background: url('https://i.giphy.com/media/3oEhmP1i8wzdgx2vrW/source.gif')
+    
+}
+`
+
+export default function Delete(props){
+    const { disabled } = props
+
+    return(
+        <StyledDelete>Delete Me</StyledDelete>
+    )
+}
\ No newline at end of file
diff --git a/howto/src/Components/Dropdown.js b/howto/src/Components/Dropdown.js
new file mode 100644
index 0000000..6c4fb2c
--- /dev/null
+++ b/howto/src/Components/Dropdown.js
@@ -0,0 +1,74 @@
+import React from 'react'
+import styled, { keyframes } from 'styled-components'
+
+const kfCategories = keyframes`
+10%{
+  color: teal;
+}
+20%{
+  color: lightblue;
+  background: indigo;
+}
+30%{
+  color: lavender;
+  background: teal;
+}
+40%{
+  color: black;
+  background: pink;
+}
+50%{
+  color: magenta;
+  background: white;
+}
+
+60%{
+  color: teal;
+}
+70%{
+  color: lightblue;
+  background: indigo;
+}
+80%{
+  color: lavender;
+  background: teal;
+}
+90%{
+  color: white;
+  background: violet;
+}
+100%{
+  color: black;
+  background: white;
+}
+`
+
+const StyledDropdown = styled.form`
+select{
+    color: white;
+    font-size: 1.3rem;
+    background: black;
+    border: 0px solid silver;
+    &:hover{
+      cursor: pointer;
+    }
+    option{
+      font-size: 1.3rem;
+      color: white;
+      animation: ${kfCategories} 50s ease-in-out forwards;
+    }
+  }
+`
+export default function Dropdown(){
+    return(
+        <StyledDropdown>
+              <select>
+                <option disabled='disabled' selected='selected'>Select a Category</option>
+                <option>Home and Living</option>
+                <option>Business</option>
+                <option>Health</option>
+                <option>Educational</option>
+              </select>
+        </StyledDropdown>
+    )
+}
diff --git a/howto/src/Components/EditHowToForm.js b/howto/src/Components/EditHowToForm.js
index 4ecb592..d201dd5 100644
--- a/howto/src/Components/EditHowToForm.js
+++ b/howto/src/Components/EditHowToForm.js
@@ -1,25 +1,28 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import styled from 'styled-components'
+// import axios from 'axios'
+import formSchemaCard from './Validation/FormSchemaCard'
+
+import Logo from './Logo'
 
 const StyledAddForm = styled.form`
 display: flex;
 flex-direction: column;
 align-items: center;
-width: 30%;
-margin: 20px;;
-padding: 30px;
+width: 27%;
 
+padding: 16px;
 color: white;
 font-size: 1.3rem;
 text-align: center;
-background: black;
+background: url('https://images.unsplash.com/photo-1557683311-eac922347aa1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2030&q=80');
 border-radius: 20% 20%;
 h2{
    
 }
 input {
     display: flex;
-    color: lightblue;
+    color: white;
     font-size: 2rem;
     background: black;
     border-radius: 10px;
@@ -32,38 +35,113 @@ input {
 
 button{
     color: white;
-    background: green;
+    background: violet;
     width: 40%;
     padding: 5px;
     border-radius: 15px;
+    &:hover{
+        cursor: pointer;
+        background: gold;
+    }
 }
 `
 
 export default function EditHowToForm(props){
-    const { inputChange, submit, disabled, errors } = props
+    const {
+        values,
+        setValues,
+        inputChange,
+        submit,
+        disabled,
+        setDisabled,
+        errors,
+        // cards,
+        // setCards,
+        // initial, 
+    } = props
+
+    // const getCard = (id) =>{
+    //     const myCard = []
+    //     axios.get('https://reqres.in/api/users?page=2')
+    //     .then(res=>{
+    //         res.data.data.map(card =>{
+    //             if(card.id === id){
+    //                 myCard.push(card)
+    //             }
+    //         }) 
+    //     })
+    //     .catch(err =>{
+    //         debugger
+    //     })
+    //     return myCard
+    // }
+
+    // function submitIt(){
+    //     getCard(7)
+    // }
 
     const onInputChange = e =>{ 
         const { name, value } = e.target
-        inputChange(name, value)
+        inputChange(name, value, values, setValues, formSchemaCard)
     }
 
+
+    // const postEdit = edit =>{
+    //     axios.post('https://reqres.in/api/users', edit)
+    //     .then(res=>{
+    //         // setCards([res.data, ...cards])
+    //         setValues(initial)
+    //         // setCards({
+    //         //     ...cards,
+    //         //     [title]: values.title,
+    //         //     [author]: values.author,
+    //         //     [topic]: values.topic,
+    //         //     [steps]: values.steps
+    //         // })
+    //     })
+    //     .catch(err=>{
+    //         debugger
+    //     })
+    // }
+
+    // const submitNewEdit = () =>{
+    //     const editedCard = {
+    //         title: values.title.trim(),
+    //         author: values.author.trim(),
+    //         topic: values.topic.trim(),
+    //         steps: values.steps.trim(),
+    //     }
+    //     postEdit(editedCard)
+    // }
+
     const onSubmit = e =>{
         e.preventDefault()
-        //submit()
+        submit()
+        console.log('backend works here')
     }
+    useEffect(() => {
+        formSchemaCard.isValid(values).then(valid => {
+          setDisabled(!valid)
+        })
+      }, [values])
+
 
     return(
         <StyledAddForm
             onSubmit={onSubmit}
-        >
+            >
+
             <div>{errors.title}</div>
             <div>{errors.author}</div>
             <div>{errors.topic}</div>
             <div>{errors.steps}</div>
 
+            <Logo />
+
             <h2>Edit this How To</h2>
             <label>Title
                 <input
+                    value={values.title}
                     name='title'
                     type='text'
                     onChange={onInputChange}
@@ -72,6 +150,7 @@ export default function EditHowToForm(props){
 
             <label>Name
                 <input
+                    value={values.author}
                     name='author'
                     type='text'
                     onChange={onInputChange}
@@ -80,6 +159,7 @@ export default function EditHowToForm(props){
             
             <label>Topic
                 <input
+                    value={values.topic}
                     name='topic'
                     type='text'
                     onChange={onInputChange}
@@ -88,6 +168,7 @@ export default function EditHowToForm(props){
 
             <label>Steps
                 <input
+                    value={values.steps}
                     id='stepsInput'
                     name='steps'
                     type='text'
diff --git a/howto/src/Components/HowToCard.js b/howto/src/Components/HowToCard.js
index da54672..53af8a5 100644
--- a/howto/src/Components/HowToCard.js
+++ b/howto/src/Components/HowToCard.js
@@ -46,11 +46,13 @@ img {
 }
 .cardEdit{
     display: flex;
-    flex-direction: column;
+    justify-content: center;
     align-items: center;
     padding: 1px;
-    .editLink{
+    color: purple;
+    .cardLink{
         color: purple;
+        padding: 10px;
         &:hover{
             color: violet;
         }
@@ -68,14 +70,16 @@ export default function HowToCard({ card }) {
         //////////sample PLEASE CHANGE VALUES WHEN ENDPOINT UPDATED////////
         <StyledCard>
             <h2>Title</h2>
-            <img src='https://images.unsplash.com/photo-1531297484001-80022131f5a1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2014&q=80'/>
+            <img src='https://images.unsplash.com/photo-1531297484001-80022131f5a1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2014&q=80' alt='Design for How To Guide'/>
             
             <div className='cardbottomdiv'>
             <p className='cardText'>Author: {card.first_name}{card.last_name}</p>
             <p className='cardText'>Topic: {card.email}</p>
             <p className='cardText'>Guide: {card.avatar}</p>
             <div className='cardEdit'>
-                <Link to='/user/edit' className='editLink'>Edit</Link>
+                <Link to='/user/edit' className='cardLink'>Edit</Link>
+                {'|'}
+                <Link to='/user/delete' className='cardLink'>Delete</Link>
             </div>
             </div>
         </StyledCard>
diff --git a/howto/src/Components/Login.js b/howto/src/Components/Login.js
index 18f8c74..9d353aa 100644
--- a/howto/src/Components/Login.js
+++ b/howto/src/Components/Login.js
@@ -1,5 +1,7 @@
-import React from 'react'
+import React, { useEffect } from 'react'
+import axios from 'axios'
 import styled from 'styled-components'
+import formSchemaLogin from'./Validation/FormSchemaLogin'
 
 const StyledForm = styled.form`
 display: flex;
@@ -8,6 +10,7 @@ align-items: center;
 background: black;
 color: white;
 width: 20%;
+
 padding: 30px;
 margin: 25px;
 border: 1px solid pink;
@@ -47,6 +50,10 @@ background: green;
 width: 40%;
 padding: 5px;
 border-radius: 15px;
+&:hover{
+    background: gold;
+    cursor: pointer;
+}
 `
 
 const StyledLogo = styled.img`
@@ -58,22 +65,60 @@ padding: 3px;
 `
 
 export default function Login(props) {
-    const { values, inputChange, disabled, errors } = props
+    const { 
+        values,
+        initial,
+        setValues, 
+        inputChange, 
+        disabled, 
+        setDisabled, 
+        errors } = props
+
+    const onInputChange = e => {
+        const { name, value } = e.target
+        inputChange(name, value, values, setValues, formSchemaLogin)
+    }
+
+    const submitLogin = () => {
+        axios.get(`https://reqres.in/api/users?${values.username}`)
+        .then(res =>{
+            console.log('Backend works here', res.data.data)
+        })
+        .catch(err =>{
+            debugger
+        })
+        setValues(initial)
+      }
+
+      const onSubmit = e => {
+        e.preventDefault()
+        submitLogin()
+    }
+
+    useEffect(() => {
+        formSchemaLogin.isValid(values).then(valid => {
+          setDisabled(!valid)
+        })
+      }, [values])
+
     return (
         <StyledForm
-        onSubmit={console.log('user log in')}
-        >
+            onSubmit={onSubmit}
+            >
+
+            <div>{errors.username}</div>
+            <div>{errors.password}</div>
       
-            <StyledLogo src='http://www.pngmart.com/files/4/Satin-Transparent-Background.png' />
+            <StyledLogo src='http://www.pngmart.com/files/4/Satin-Transparent-Background.png' alt='butterfly' />
             <h2>Welcome Back!</h2>
             <StyledLabel>Username
                 <StyledInput
                     name='username'
                     type='text'
                     maxLength='15'
-                // value={}
-                // onChange={}
-                />
+                    onChange={onInputChange}
+                    value={values.username}
+                    />
             </StyledLabel>
 
             <StyledLabel>Password
@@ -81,9 +126,9 @@ export default function Login(props) {
                 name='password'
                 type='password'
                 maxLength='15'
-            // value={props.username}
-            // onChange={}
-            />
+                onChange={onInputChange}
+                value={values.password}       
+                />
             </StyledLabel>
             <br></br>
             <StyledButton disabled={disabled}> Log In </StyledButton>
diff --git a/howto/src/Components/Logo.js b/howto/src/Components/Logo.js
new file mode 100644
index 0000000..573039c
--- /dev/null
+++ b/howto/src/Components/Logo.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const StyledLogo = styled.img`
+width: 12%;
+border: 5px solid cyan;
+border-radius: 50% 50%;
+background: violet;
+padding: 3px;
+`
+
+export default function Logo(){
+    return(
+        <StyledLogo src='http://www.pngmart.com/files/4/Satin-Transparent-Background.png' alt='butterfly' />
+        )
+}
\ No newline at end of file
diff --git a/howto/src/Components/SearchBar.js b/howto/src/Components/SearchBar.js
index bfb7f1d..a78f63e 100644
--- a/howto/src/Components/SearchBar.js
+++ b/howto/src/Components/SearchBar.js
@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react'
-import axios from 'axios'
+// import axios from 'axios'
 import styled from 'styled-components'
 
-const StyledSearchBarForm = styled.form`
+const StyledSearchBarDiv = styled.div`
 input{
     font-size: 1.5rem;
       border-radius: 6px;
@@ -16,7 +16,10 @@ input{
 const initialSearchBarValue = 'Search...'
 
 export default function SearchBar(props){
-    const { cards, setCards } = props
+    const { 
+        // cards, 
+        // setCards, 
+        getCards } = props
 
     const [ searchBarValue, setSearchBarValue ] = useState(initialSearchBarValue)
 
@@ -30,31 +33,35 @@ export default function SearchBar(props){
         
         const changeHandler = e =>{
             const { name, value } = e.target 
-            axios.get(`https://reqres.in/api/users?page=${Math.random}`)  //does not appear to actually generate random page number. Always generates same.
-            .then(res =>{
-                if(value == value){   //filter data by value compared to title/tags, map matches to new array, setCards as new array//
-                    console.log(cards)
-                    setCards(res.data.data)
-                    console.log(res.data.data) //cards is updating every keystroke on searchbar. would be obvious if Math.random worked//
-                }else{
-                    setCards([])
-                }
-            })
-            .catch(err =>{
-                debugger
-            })
+            // axios.get(`https://reqres.in/api/users?page=${Math.random}`)  //does not appear to actually generate random page number. Always generates same.
+            // .then(res =>{
+            //     if(value === value){   //filter data by value compared to title/tags, map matches to new array, setCards as new array//
+            //         console.log(cards)
+            //         setCards(res.data.data)
+            //         console.log(res.data.data) //cards is updating every keystroke on searchbar. would be obvious if Math.random worked//
+            //     }else{
+            //         setCards([])
+            //     }
+            // })
+            // .catch(err =>{
+            //     debugger
+            // })
             inputChange(name, value)
-            console.log(value)
+            console.log(searchBarValue)
         }
+
+    useEffect(() =>{
+        getCards()
+    }, [])
         
     return(
-        <StyledSearchBarForm>
+        <StyledSearchBarDiv>
             <input
                 name='search'
                 type="text"
                 placeholder={initialSearchBarValue}
                 onChange={changeHandler}
             />
-        </StyledSearchBarForm>
+        </StyledSearchBarDiv>
     )
 }
\ No newline at end of file
diff --git a/howto/src/Components/Signup.js b/howto/src/Components/Signup.js
index 3b66d43..10c80ef 100644
--- a/howto/src/Components/Signup.js
+++ b/howto/src/Components/Signup.js
@@ -1,5 +1,6 @@
-import React from 'react'
-import styled, {keyframes} from 'styled-components'
+import React, { useEffect } from 'react'
+import styled from 'styled-components'
+import formSchema from './Validation/FormSchema'
 
 const StyledForm = styled.form`
 display: flex;
@@ -43,6 +44,10 @@ background: green;
 width: 40%;
 padding: 5px;
 border-radius: 15px;
+&:hover{
+    background: gold;
+    cursor: pointer;
+}
 `
 
 const StyledLogo = styled.img`
@@ -58,8 +63,14 @@ padding: 3px;
 
 export default function Signup(props) {
 
-    const { values, inputChange, submit, disabled, errors } = props
-
+    const { 
+        values, 
+        setValues, 
+        inputChange, 
+        submit, 
+        disabled, 
+        setDisabled, 
+        errors } = props
 
     //////////////////┬─┬ ノ( ゜-゜ノ)
     //Helper Functions//┬─┬ ノ( ゜-゜ノ)
@@ -67,7 +78,7 @@ export default function Signup(props) {
 
     const onInputChange = e => {
         const { name, value } = e.target
-        inputChange(name, value)
+        inputChange(name, value, values, setValues, formSchema)
     }
 
     const onSubmit = e => {
@@ -75,15 +86,23 @@ export default function Signup(props) {
         submit()
     }
 
+    useEffect(() => {
+        formSchema.isValid(values).then(valid => {
+          setDisabled(!valid)
+        })
+      }, [values])
 
     return (
         <StyledForm
             onSubmit={onSubmit}
             >
+            <div>{errors.fName}</div>
+            <div>{errors.lName}</div>
             <div>{errors.email}</div>
+            <div>{errors.username}</div>
             <div>{errors.password}</div>
             <StyledLogo src='http://www.pngmart.com/files/4/Satin-Transparent-Background.png' />
-            <StyledText>Sign up and create posts!</StyledText>
+            <StyledText>Wecome to How To!</StyledText>
 
             <StyledLabel>First Name
                 <StyledInput
diff --git a/howto/src/Components/Validation/FormSchema.js b/howto/src/Components/Validation/FormSchema.js
index 5d11d34..1aca824 100644
--- a/howto/src/Components/Validation/FormSchema.js
+++ b/howto/src/Components/Validation/FormSchema.js
@@ -1,9 +1,9 @@
 import * as yup from 'yup'
 
-const formSchema = yup.object().shape({
+const formSchemaUser = yup.object().shape({
     fName: yup
         .string()
-        .min(3, "Name or Nick is fine")
+        .min(1, "Name or Nick is fine")
         .required("Must include First Name"),
     lName: yup
         .string()        
@@ -14,28 +14,14 @@ const formSchema = yup.object().shape({
         .required("Must include email address."),
     password: yup
         .string()
-        .min(8, "Passwords need 6 characters")
+        .min(1, "Passwords need 6 characters")
         .required('Password is required'),
     username: yup
         .string()
-        .min(8, 'username please')
+        .min(1, 'username please')
         .required('username is required'),
-    title: yup
-        .string()
-        .min(6, 'title please' )
-        .required('Must include title'),
-    author: yup
-        .string()
-        .min(3, 'Names must use at least 3 characters')
-        .required('Must include a name'),
-    topic: yup
-        .string()
-        .min(8, 'Please describe what your post explains to do')
-        .required('Must include a topic'),
-    steps: yup
-        .string()
-        .required('A guide is required')
-
-});
+  
+   
+    })
 
-export default formSchema
\ No newline at end of file
+export default formSchemaUser
\ No newline at end of file
diff --git a/howto/src/Components/Validation/FormSchemaCard.js b/howto/src/Components/Validation/FormSchemaCard.js
new file mode 100644
index 0000000..f6aedeb
--- /dev/null
+++ b/howto/src/Components/Validation/FormSchemaCard.js
@@ -0,0 +1,21 @@
+import * as yup from 'yup'
+
+const formSchemaCard = yup.object().shape({
+title: yup
+    .string()
+    .min(1, 'Title please' )
+    .required('Must include title'),
+author: yup
+    .string()
+    .min(1, 'Names must use at least 3 characters')
+    .required('Must include a name'),
+topic: yup
+    .string()
+    .min(1, 'Please describe what your post explains to do')
+    .required('Must include a topic'),
+steps: yup
+    .string()
+    .required('A guide is required'),
+})
+
+export default formSchemaCard
\ No newline at end of file
diff --git a/howto/src/Components/Validation/FormSchemaLogin.js b/howto/src/Components/Validation/FormSchemaLogin.js
new file mode 100644
index 0000000..bdb341b
--- /dev/null
+++ b/howto/src/Components/Validation/FormSchemaLogin.js
@@ -0,0 +1,12 @@
+import * as yup from 'yup'
+
+const formSchemaLogin = yup.object().shape({
+    username: yup
+        .string()
+        .required('Please tell us your username'),
+    password: yup
+        .string()
+        .required('Please tell us your password')
+})
+
+export default formSchemaLogin
\ No newline at end of file