diff --git a/client/src/App.js b/client/src/App.js
index 048a1923..bf0b06c2 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -8,7 +8,7 @@ import MovieHeader from './components/MovieHeader';
 
 import EditMovieForm from './components/EditMovieForm';
 import FavoriteMovieList from './components/FavoriteMovieList';
-
+import AddMovieForm from './components/AddMovieForm'
 import axios from 'axios';
 
 const App = (props) => {
@@ -26,6 +26,7 @@ const App = (props) => {
   }, []);
 
   const deleteMovie = (id)=> {
+    setMovies(movies.filter(item => (item.id !== Number(id))));
   }
 
   const addToFavorites = (movie) => {
@@ -45,10 +46,15 @@ const App = (props) => {
         
           <Switch>
             <Route path="/movies/edit/:id">
+            <EditMovieForm setMovies={setMovies}/>
+            </Route>
+
+            <Route path="/movies/add/" component={AddMovieForm}>
+              <AddMovieForm setMovies={ setMovies}/>
             </Route>
 
             <Route path="/movies/:id">
-              <Movie/>
+              <Movie deleteMovie={deleteMovie}/>
             </Route>
 
             <Route path="/movies">
diff --git a/client/src/components/AddMovieForm.js b/client/src/components/AddMovieForm.js
new file mode 100644
index 00000000..d209d1b3
--- /dev/null
+++ b/client/src/components/AddMovieForm.js
@@ -0,0 +1,76 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useHistory } from 'react-router-dom';
+import axios from 'axios';
+import { Link } from 'react-router-dom';
+
+
+const AddMovieForm = (props) => {
+    const { push } = useHistory();
+
+    const [movie, setMovie] = useState({
+		title:"",
+		director: "",
+		genre: "",
+		metascore: 0,
+		description: ""
+	});
+
+    const handleChange = (e) => {
+        setMovie({
+            ...movie,
+            [e.target.name]: e.target.value
+        });
+    }
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        axios.post(`http://localhost:5000/api/movies/`, movie).then(res => {
+            props.setMovies(res.data);
+            push(`/movies/`)
+        }).catch(err => {
+            console.log(err.response)
+        })
+    }
+
+    const { title, director, genre, metascore, description} = movie;
+
+    return (
+        <div className="add">
+            <div className="add-content">
+                <form onSubmit={handleSubmit}>
+                    <div className="add-header">						
+                        <h4 className="add-title">Adding <strong>{movie.title}</strong></h4>
+                    </div>
+                    <div className="add-body">					
+                        <div className="form-group">
+                            <label>Title</label>
+                            <input value={title} onChange={handleChange} name="title" type="text" className="form-control"/>
+                        </div>
+                        <div className="form-group">
+                            <label>Director</label>
+                            <input value={director} onChange={handleChange} name="director" type="text" className="form-control"/>
+                        </div>
+                        <div className="form-group">
+                            <label>Genre</label>
+                            <input value={genre} onChange={handleChange} name="genre" type="text" className="form-control"/>
+                        </div>
+                        <div className="form-group">
+                            <label>Metascore</label>
+                            <input value={metascore} onChange={handleChange} name="metascore" type="number" className="form-control"/>
+                        </div>		
+                        <div className="form-group">
+                            <label>Description</label>
+                            <textarea value={description} onChange={handleChange} name="description" className="form-control"></textarea>
+                        </div>
+
+                    </div>
+                    <div className="add-footer">			    
+                        <input type="submit" className="btn btn-info" value="Save"/>
+                        <Link to={`/movies/`}><input type="button" className="btn btn-default" value="Cancel"/></Link>
+                    </div>
+                </form>
+            </div>
+        </div>);
+    }
+
+    export default AddMovieForm; 
\ No newline at end of file
diff --git a/client/src/components/EditMovieForm.js b/client/src/components/EditMovieForm.js
index 9c058388..05564791 100644
--- a/client/src/components/EditMovieForm.js
+++ b/client/src/components/EditMovieForm.js
@@ -6,6 +6,7 @@ import axios from 'axios';
 
 const EditMovieForm = (props) => {
 	const { push } = useHistory();
+	const { id } = useParams();
 
 	const [movie, setMovie] = useState({
 		title:"",
@@ -15,6 +16,13 @@ const EditMovieForm = (props) => {
 		description: ""
 	});
 	
+	useEffect(() => {
+		axios.get(`http://localhost:5000/api/movies/${id}`)
+		.then(resp => {
+			setMovie(resp.data);
+		}).catch(err=>{console.log(err.response)})
+	},[])
+
 	const handleChange = (e) => {
         setMovie({
             ...movie,
@@ -24,6 +32,12 @@ const EditMovieForm = (props) => {
 
     const handleSubmit = (e) => {
 		e.preventDefault();
+		axios.put(`http://localhost:5000/api/movies/${id}`, movie).then(res => {
+			props.setMovies(res.data);
+			push(`/movies/${id}`);
+		}).catch(err => {
+			console.log(err.response);
+		})
 	}
 	
 	const { title, director, genre, metascore, description } = movie;
@@ -60,7 +74,7 @@ const EditMovieForm = (props) => {
 				</div>
 				<div className="modal-footer">			    
 					<input type="submit" className="btn btn-info" value="Save"/>
-					<Link to={`/movies/1`}><input type="button" className="btn btn-default" value="Cancel"/></Link>
+					<Link to={`/movies/`}><input type="button" className="btn btn-default" value="Cancel"/></Link>
 				</div>
 			</form>
 		</div>
diff --git a/client/src/components/Movie.js b/client/src/components/Movie.js
index fc2b0e05..cd38923f 100644
--- a/client/src/components/Movie.js
+++ b/client/src/components/Movie.js
@@ -21,6 +21,16 @@ const Movie = (props) => {
             })
     }, [id]);
 
+    const handleDelete = () => {
+        axios.delete(`http://localhost:5000/api/movies/${id}`)
+        .then(res => {
+            props.deleteMovie(id);
+            push(`/movies`)
+        })
+        .catch(error=>{console.log(error)})
+
+    }
+
     return(<div className="modal-page col">
         <div className="modal-dialog">
             <div className="modal-content">
@@ -52,7 +62,7 @@ const Movie = (props) => {
                         <section>
                             <span className="m-2 btn btn-dark">Favorite</span>
                             <Link to={`/movies/edit/${movie.id}`} className="m-2 btn btn-success">Edit</Link>
-                            <span className="delete"><input type="button" className="m-2 btn btn-danger" value="Delete"/></span>
+                            <span onClick={ handleDelete }><input type="button" className="m-2 btn btn-danger" value="Delete"/></span>
                         </section>
                     </div>
                 </div>
diff --git a/client/src/components/MovieHeader.js b/client/src/components/MovieHeader.js
index 48ee5dd6..d389c886 100644
--- a/client/src/components/MovieHeader.js
+++ b/client/src/components/MovieHeader.js
@@ -8,7 +8,7 @@ const MovieHeader = ()=> {
             <h2>IMDB Movie Database</h2>
         </div>
         <div className="col-sm-6">
-            <Link className="btn btn-success"><i className="material-icons">&#xE147;</i> <span>Add New Movie</span></Link>
+            <Link to="/movies/add/" className="btn btn-success"><i className="material-icons">&#xE147;</i> <span>Add New Movie</span></Link>
             <Link to="/movies" className="btn btn-primary">View All Movies</Link>
         </div>
         </div>