diff --git a/src/App.js b/src/App.js
index edd0e16e..9009d5bb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,40 +1,43 @@
 import React, { useEffect, useState } from "react";
 
 import { Route, Routes, Navigate } from "react-router-dom";
-import MovieList from './components/MovieList';
-import Movie from './components/Movie';
+import MovieList from "./components/MovieList";
+import Movie from "./components/Movie";
+EditMovieForm;
 
-import MovieHeader from './components/MovieHeader';
+import MovieHeader from "./components/MovieHeader";
 
-import FavoriteMovieList from './components/FavoriteMovieList';
+import FavoriteMovieList from "./components/FavoriteMovieList";
 
-import axios from 'axios';
+import axios from "axios";
+import EditMovieForm from "./components/EditMovieForm";
+import AddMovieForm from "./components/AddMovieForm";
 
 const App = (props) => {
   const [movies, setMovies] = useState([]);
   const [favoriteMovies, setFavoriteMovies] = useState([]);
 
   useEffect(() => {
-    axios.get('http://localhost:9000/api/movies')
-      .then(res => {
+    axios
+      .get("http://localhost:9000/api/movies")
+      .then((res) => {
         setMovies(res.data);
       })
-      .catch(err => {
+      .catch((err) => {
         console.log(err);
       });
   }, []);
 
   const deleteMovie = (id) => {
-  }
+    setMovies(movies.filter((movie) => movie.id != id));
+  };
 
-  const addToFavorites = (movie) => {
-
-  }
+  const addToFavorites = (movie) => {};
 
   return (
     <div>
       <nav className="navbar navbar-dark bg-dark">
-        <span className="navbar-brand" > HTTP / CRUD Module Project</span>
+        <span className="navbar-brand"> HTTP / CRUD Module Project</span>
       </nav>
 
       <div className="container">
@@ -43,12 +46,23 @@ 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" />
+            <Route
+              path="movies/:id"
+              element={<Movie deleteMovie={deleteMovie} />}
+            />
 
             <Route path="movies" element={<MovieList movies={movies} />} />
 
+            <Route
+              path="/movies/add"
+              element={<AddMovieForm setMovies={setMovies} />}
+            />
+
             <Route path="/" element={<Navigate to="/movies" />} />
           </Routes>
         </div>
@@ -57,5 +71,4 @@ const App = (props) => {
   );
 };
 
-
 export default App;
diff --git a/src/components/AddMovieForm.js b/src/components/AddMovieForm.js
new file mode 100644
index 00000000..eec65d6b
--- /dev/null
+++ b/src/components/AddMovieForm.js
@@ -0,0 +1,113 @@
+import React, { useState, useEffect } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { 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>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="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;
diff --git a/src/components/EditMovieForm.js b/src/components/EditMovieForm.js
index 4a229e18..a781d3f3 100644
--- a/src/components/EditMovieForm.js
+++ b/src/components/EditMovieForm.js
@@ -1,11 +1,12 @@
-import React, { useState, useEffect } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
-import { Link } from 'react-router-dom';
+import React, { useState, useEffect } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 
-import axios from 'axios';
+import axios from "axios";
 
 const EditMovieForm = (props) => {
   const navigate = useNavigate();
+  const { id } = useParams();
 
   const { setMovies } = props;
   const [movie, setMovie] = useState({
@@ -13,27 +14,35 @@ const EditMovieForm = (props) => {
     director: "",
     genre: "",
     metascore: 0,
-    description: ""
+    description: "",
   });
 
   const handleChange = (e) => {
     setMovie({
       ...movie,
-      [e.target.name]: e.target.value
+      [e.target.name]: e.target.value,
     });
-  }
+  };
+
+  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)
-      .then(res => {
+    axios
+      .put(`http://localhost:9000/api/movies/${id}`, movie)
+      .then((res) => {
         setMovies(res.data);
         navigate(`/movies/${movie.id}`);
       })
-      .catch(err => {
+      .catch((err) => {
         console.log(err);
-      })
-  }
+      });
+  };
 
   const { title, director, genre, metascore, description } = movie;
 
@@ -42,38 +51,71 @@ const EditMovieForm = (props) => {
       <div className="modal-content">
         <form onSubmit={handleSubmit}>
           <div className="modal-header">
-            <h4 className="modal-title">Editing <strong>{movie.title}</strong></h4>
+            <h4 className="modal-title">
+              Editing <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" />
+              <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" />
+              <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" />
+              <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" />
+              <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>
+              <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/1`}><input type="button" className="btn btn-default" value="Cancel" /></Link>
+            <Link to={`/movies/1`}>
+              <input type="button" className="btn btn-default" value="Cancel" />
+            </Link>
           </div>
         </form>
       </div>
-    </div>);
-}
+    </div>
+  );
+};
 
 export default EditMovieForm;
diff --git a/src/components/Movie.js b/src/components/Movie.js
index 9b2159f1..8c9025b2 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -1,64 +1,98 @@
-import React, { useEffect, useState } from 'react';
-import { Link, useParams, useNavigate } from 'react-router-dom';
+import React, { useEffect, useState } from "react";
+import { Link, useParams, useNavigate } from "react-router-dom";
 
-import axios from 'axios';
+import axios from "axios";
 
 const Movie = (props) => {
   const { addToFavorites } = props;
 
-  const [movie, setMovie] = useState('');
+  const [movie, setMovie] = useState("");
 
   const { id } = useParams();
   const navigate = useNavigate();
 
+  const handleDelete = () => {
+    axios
+      .delete(`http://localhost:9000/api/movies/${id}`)
+      .then((res) => {
+        props.deleteMovie(id);
+        navigate("/movies");
+      })
+      .catch((err) => console.log(err));
+  };
+
   useEffect(() => {
-    axios.get(`http://localhost:9000/api/movies/${id}`)
-      .then(res => {
+    axios
+      .get(`http://localhost:9000/api/movies/${id}`)
+      .then((res) => {
         setMovie(res.data);
       })
-      .catch(err => {
+      .catch((err) => {
         console.log(err.response);
-      })
+      });
   }, [id]);
 
-  return (<div className="modal-page col">
-    <div className="modal-dialog">
-      <div className="modal-content">
-        <div className="modal-header">
-          <h4 className="modal-title">{movie.title} Details</h4>
-        </div>
-        <div className="modal-body">
-          <div className="flexContainer">
-
-            <section className="movie-details">
-              <div>
-                <label>Title: <strong>{movie.title}</strong></label>
-              </div>
-              <div>
-                <label>Director: <strong>{movie.director}</strong></label>
-              </div>
-              <div>
-                <label>Genre: <strong>{movie.genre}</strong></label>
-              </div>
-              <div>
-                <label>Metascore: <strong>{movie.metascore}</strong></label>
-              </div>
-              <div>
-                <label>Description:</label>
-                <p><strong>{movie.description}</strong></p>
-              </div>
-            </section>
+  return (
+    <div className="modal-page col">
+      <div className="modal-dialog">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h4 className="modal-title">{movie.title} Details</h4>
+          </div>
+          <div className="modal-body">
+            <div className="flexContainer">
+              <section className="movie-details">
+                <div>
+                  <label>
+                    Title: <strong>{movie.title}</strong>
+                  </label>
+                </div>
+                <div>
+                  <label>
+                    Director: <strong>{movie.director}</strong>
+                  </label>
+                </div>
+                <div>
+                  <label>
+                    Genre: <strong>{movie.genre}</strong>
+                  </label>
+                </div>
+                <div>
+                  <label>
+                    Metascore: <strong>{movie.metascore}</strong>
+                  </label>
+                </div>
+                <div>
+                  <label>Description:</label>
+                  <p>
+                    <strong>{movie.description}</strong>
+                  </p>
+                </div>
+              </section>
 
-            <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>
-            </section>
+              <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"
+                    onClick={handleDelete}
+                    className="m-2 btn btn-danger"
+                    value="Delete"
+                  />
+                </span>
+              </section>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>);
-}
+  );
+};
 
 export default Movie;