diff --git a/src/App.js b/src/App.js
index edd0e16e..3be0853d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,6 +9,8 @@ import MovieHeader from './components/MovieHeader';
 import FavoriteMovieList from './components/FavoriteMovieList';
 
 import axios from 'axios';
+import EditMovieForm from './components/EditMovieForm';
+import AddMovieForm from './components/AddMovieForm';
 
 const App = (props) => {
   const [movies, setMovies] = useState([]);
@@ -25,7 +27,8 @@ const App = (props) => {
   }, []);
 
   const deleteMovie = (id) => {
-  }
+    setMovies(movies.filter((movie) => movie.id != id));
+  };
 
   const addToFavorites = (movie) => {
 
@@ -43,9 +46,17 @@ const App = (props) => {
           <FavoriteMovieList favoriteMovies={favoriteMovies} />
 
           <Routes>
-            <Route path="movies/edit/:id" />
+            <Route path="movies/edit/:id" 
+              element={<EditMovieForm setMovies={setMovies} />}
+            />
+
+            <Route path="movies/:id"
+            element={<Movie deleteMovie={deleteMovie} />}
+            />
 
-            <Route path="movies/:id" />
+            <Route path="movies"
+            element={<AddMovieForm setMovies={setMovies} />}
+          />
 
             <Route path="movies" element={<MovieList movies={movies} />} />
 
diff --git a/src/components/AddMovieForm.js b/src/components/AddMovieForm.js
new file mode 100644
index 00000000..9fc3f6ce
--- /dev/null
+++ b/src/components/AddMovieForm.js
@@ -0,0 +1,99 @@
+import React, { useState, useEffect,} from "react";
+import { useParams, useNavigate, Link } from "react-router-dom";
+import axios from "axios";
+
+const AddMovieForm = (props) => {
+    const navigate = useNavigate();
+    const { setMovies } = props;
+    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:9000/api/movies`, movie)
+        .then((res) => {
+            props.setMovies(res.data);
+            navigate("/movies");
+        })
+        .catch((err) => {
+            console.log(err);
+    });
+};
+
+
+const { title, director, genre, metascore, description } = movie;
+return (
+    <div className="col">
+        <div className="modal-content">
+            <form onSubmit={handleSubmit}>
+                <div className="modal-header">
+                    <h4 className="modal-title">
+                        add <strong>{movie.title}</strong>
+                    </h4>
+                </div>
+                <div className="modal-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>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="metascrore"
+                        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="modal-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/src/components/EditMovieForm.js b/src/components/EditMovieForm.js
index 4a229e18..91cbd398 100644
--- a/src/components/EditMovieForm.js
+++ b/src/components/EditMovieForm.js
@@ -7,6 +7,8 @@ import axios from 'axios';
 const EditMovieForm = (props) => {
   const navigate = useNavigate();
 
+  const { id } = useParams();
+
   const { setMovies } = props;
   const [movie, setMovie] = useState({
     title: "",
@@ -23,6 +25,13 @@ const EditMovieForm = (props) => {
     });
   }
 
+useEffect(() => {
+  axios
+  .get(`http://localhost:9000/api/movies/${id}`)
+  .then((res) => setMovie(res.data))
+  .catch((err) => console.log(err));
+}, [])
+
   const handleSubmit = (e) => {
     e.preventDefault();
     axios.put(`http://localhost:9000/api/movies/${id}`, movie)
@@ -32,8 +41,8 @@ const EditMovieForm = (props) => {
       })
       .catch(err => {
         console.log(err);
-      })
-  }
+      });
+  };
 
   const { title, director, genre, metascore, description } = movie;
 
diff --git a/src/components/Movie.js b/src/components/Movie.js
index 9b2159f1..9d57017d 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import React, { useEffect, useState } from 'react';
 import { Link, useParams, useNavigate } from 'react-router-dom';
 
@@ -12,7 +13,8 @@ const Movie = (props) => {
   const navigate = useNavigate();
 
   useEffect(() => {
-    axios.get(`http://localhost:9000/api/movies/${id}`)
+    axios
+    .get(`http://localhost:9000/api/movies/${id}`)
       .then(res => {
         setMovie(res.data);
       })