diff --git a/src/actions/movieActions.js b/src/actions/movieActions.js
index 3fb8c9ddb..da8f2c0aa 100644
--- a/src/actions/movieActions.js
+++ b/src/actions/movieActions.js
@@ -1,5 +1,10 @@
 export const DELETE_MOVIE = "DELETE_MOVIE";
+export const ADD_MOVIE = "ADD_MOVIE";
 
-export const deleteMovie = (id)=>{
-    return({type: DELETE_MOVIE, payload:id});
-}
\ No newline at end of file
+export const deleteMovie = (id) => {
+  return { type: DELETE_MOVIE, payload: id };
+};
+
+export const addMovie = (newMovie) => {
+  return { type: ADD_MOVIE, payload: newMovie };
+};
diff --git a/src/components/AddMovieForm.js b/src/components/AddMovieForm.js
index d8a4d768c..06ba73bf2 100644
--- a/src/components/AddMovieForm.js
+++ b/src/components/AddMovieForm.js
@@ -1,70 +1,114 @@
-import React, { useState } from 'react';
-import { addMovie } from './../actions/movieActions';
-import { connect } from 'react-redux';
+import React, { useState } from "react";
+import { addMovie } from "./../actions/movieActions";
+import { connect } from "react-redux";
 
-import { Link, useHistory } from 'react-router-dom';
+import { Link, useHistory } from "react-router-dom";
 
 const AddMovieForm = (props) => {
-    const { push } = useHistory();
+  const { push } = useHistory();
 
-    const [movie, setMovie] = useState({
-        title: "",
-        director: "",
-        genre: "",
-        metascore: 0,
-        description:""
-    });
+  const [movie, setMovie] = useState({
+    title: "",
+    director: "",
+    genre: "",
+    metascore: 0,
+    description: "",
+  });
 
-    const handleChange = (e) => {
-        setMovie({
-            ...movie,
-            [e.target.name]: e.target.value
-        });
-    }
+  const handleChange = (e) => {
+    setMovie({
+      ...movie,
+      [e.target.name]: e.target.value,
+    });
+  };
 
-    const handleSubmit = (e) => {
-    }
+  const handleSubmit = (e) => {
+    e.preventDefault;
+    props.addMovie(movie);
+    push("/movies");
+  };
 
-    const { title, director, genre, metascore, description } = movie;
-    return(<div className="col">
-        <div className="modal-dialog">
-            <div className="modal-content">
-                <form onSubmit={handleSubmit}>
-                    <div className="modal-header">						
-                        <h4 className="modal-title">Add Movie</h4>
-                    </div>
+  const { title, director, genre, metascore, description } = movie;
+  return (
+    <div className="col">
+      <div className="modal-dialog">
+        <div className="modal-content">
+          <form onSubmit={handleSubmit}>
+            <div className="modal-header">
+              <h4 className="modal-title">Add Movie</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-success" value="Add"/>
-                        <Link to={`/movies`}><input type="button" className="btn btn-default" value="Cancel"/></Link>
-                    </div>
-                </form>
+            <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-success"
+                value="Add"
+                onClick={handleSubmit}
+              />
+              <Link to={`/movies`}>
+                <input
+                  type="button"
+                  className="btn btn-default"
+                  value="Cancel"
+                />
+              </Link>
             </div>
+          </form>
         </div>
-    </div>);
-}
+      </div>
+    </div>
+  );
+};
 
-export default AddMovieForm;
\ No newline at end of file
+export default connect(null, { addMovie })(AddMovieForm);
diff --git a/src/components/FavoriteMovieList.js b/src/components/FavoriteMovieList.js
index 54f4383fa..6ec372ec9 100644
--- a/src/components/FavoriteMovieList.js
+++ b/src/components/FavoriteMovieList.js
@@ -1,25 +1,52 @@
-import React from 'react';
+import React from "react";
 
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 
+import { connect } from "react-redux";
+
+import { removeFavorite } from "../actions/favoritesActions";
 
 const FavoriteMovieList = (props) => {
-    const favorites = [];
-    
-    return (<div className="col-xs savedContainer">
-        <h5>Favorite Movies</h5>
-        {
-            favorites.map(movie=>{
-                return <div key={movie.id}>
-                    <Link className="btn btn-light savedButton" to={`/movies/${movie.id}`}>
-                        {movie.title}
-                        <span><span class="material-icons">remove_circle</span></span>
-                    </Link> 
-                </div>
-            })
-        }
-    </div>);
-}
-
-
-export default FavoriteMovieList;
\ No newline at end of file
+  const { favorites } = props;
+  console.log(favorites);
+
+  const handleRemove = (id) => {
+    props.removeFavorite(id);
+  };
+
+  return (
+    <div className="col-xs savedContainer">
+      <h5>Favorite Movies</h5>
+      {favorites.map((movie) => {
+        return (
+          <div key={movie.id}>
+            <Link
+              className="btn btn-light savedButton"
+              to={`/movies/${movie.id}`}
+            >
+              {movie.title}
+              <span>
+                <span
+                  onClick={() => handleRemove(movie.id)}
+                  class="material-icons"
+                >
+                  remove_circle
+                </span>
+              </span>
+            </Link>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => {
+  console.log(state);
+  return {
+    favorites: state.favoritesReducer.favorites,
+    displayFavorites: state.favoritesReducer.displayFavorites,
+  };
+};
+
+export default connect(mapStateToProps, { removeFavorite })(FavoriteMovieList);
diff --git a/src/components/Movie.js b/src/components/Movie.js
index 373201e56..f445c2782 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -1,50 +1,92 @@
-import React from 'react';
-import { useParams, useHistory } from 'react-router-dom';
+import React from "react";
+import { useParams, useHistory } from "react-router-dom";
+
+import { connect } from "react-redux";
+
+import { deleteMovie } from "../actions/movieActions";
+import { addFavorite } from "../actions/favoritesActions";
 
 const Movie = (props) => {
-    const { id } = useParams();
-    const { push } = useHistory();
-
-    const movies = [];
-    const movie = movies.find(movie=>movie.id===Number(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>
+  const { id } = useParams();
+  const { push } = useHistory();
+
+  const handleClick = () => {
+    props.deleteMovie(movie.id);
+    push("/movies");
+  };
+
+  const handleAdd = () => {
+    props.addFavorite(movie);
+  };
+
+  const displayFavorites = props.displayFavorites;
+
+  const movie = props.movies.find((movie) => movie.id === Number(id));
+  console.log(movie);
+  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 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>
-                            <span className="delete"><input type="button" className="m-2 btn btn-danger" value="Delete"/></span>
-                        </section>
-                    </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>
+                {displayFavorites && (
+                  <span onClick={handleAdd} className="m-2 btn btn-dark">
+                    Favorite
+                  </span>
+                )}
+                <span className="delete">
+                  <input
+                    type="button"
+                    className="m-2 btn btn-danger"
+                    value="Delete"
+                    onClick={handleClick}
+                  />
+                </span>
+              </section>
             </div>
+          </div>
         </div>
-    </div>);
-}
-
-export default Movie;
\ No newline at end of file
+      </div>
+    </div>
+  );
+};
+const mapStateToProps = (state) => {
+  return {
+    displayFavorites: state.favoritesReducer.displayFavorites,
+    movies: state.movieReducer.movies,
+  };
+};
+export default connect(mapStateToProps, { deleteMovie, addFavorite })(Movie);
diff --git a/src/components/MovieHeader.js b/src/components/MovieHeader.js
index e3443e5fb..dfcdad95c 100644
--- a/src/components/MovieHeader.js
+++ b/src/components/MovieHeader.js
@@ -1,22 +1,42 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React from "react";
+import { Link } from "react-router-dom";
+import { toggleFavorites } from "../actions/favoritesActions";
+import { connect } from "react-redux";
 
 const MovieHeader = (props) => {
-    const appTitle = "";
-    const displayFavorites = true;
-    
-    return(<div className="table-title">
-        <div className="row">
+  const appTitle = "";
+  const { displayFavorites, toggleFavorites } = props;
+
+  return (
+    <div className="table-title">
+      <div className="row">
         <div className="col-sm-6">
-            <h2>{appTitle}</h2>
+          <h2>{props.appTitle}</h2>
         </div>
         <div className="col-sm-6 headerBar">
-            <div className="btn btn-sm btn-primary"><span>{ displayFavorites ? "Hide" : "Show"} Favorites</span></div>
-            <Link to="/movies" className="btn btn-sm btn-primary">View All Movies</Link>
-            <Link to="/movies/add" className="btn btn-sm btn-success"><i className="material-icons">&#xE147;</i> <span>Add New Movie</span></Link>
-        </div>
+          <div className="btn btn-sm btn-primary">
+            <span onClick={toggleFavorites}>
+              {displayFavorites ? "Hide" : "Show"} Favorites
+            </span>
+          </div>
+          <Link to="/movies" className="btn btn-sm btn-primary">
+            View All Movies
+          </Link>
+          <Link to="/movies/add" className="btn btn-sm btn-success">
+            <i className="material-icons">&#xE147;</i>{" "}
+            <span>Add New Movie</span>
+          </Link>
         </div>
-    </div>);
-}
+      </div>
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => {
+  return {
+    displayFavorites: state.favoritesReducer.displayFavorites,
+    appTitle: state.movieReducer.appTitle,
+  };
+};
 
-export default MovieHeader;
\ No newline at end of file
+export default connect(mapStateToProps, { toggleFavorites })(MovieHeader);
diff --git a/src/components/MovieList.js b/src/components/MovieList.js
index 268c78099..a9afb1830 100644
--- a/src/components/MovieList.js
+++ b/src/components/MovieList.js
@@ -1,34 +1,42 @@
-import React from 'react';
+import React from "react";
 
-import MovieListItem from './MovieListItem';
-import MovieFooter from './MovieFooter';
+import MovieListItem from "./MovieListItem";
+import MovieFooter from "./MovieFooter";
 
-const MovieList = (props)=> {
-    const movies = [];
+import { connect } from "react-redux";
 
-    return (
-        <div className="col">
-            <table className="table table-striped table-hover">
-                <thead>
-                <tr>
-                    <th>Title</th>
-                    <th>Director</th>
-                    <th>Genre</th>
-                    <th>Metascore</th>
-                    <th></th>
-                </tr>
-                </thead>
+const MovieList = (props) => {
+  const movies = props.movies;
 
-                <tbody>
-                    {
-                        movies.map(movie=><MovieListItem key={movie.id} movie={movie}/>)
-                    }
-                </tbody>
-            </table>
-            
-            <MovieFooter totalMovies={movies.length}/>
-        </div>
-    );
-}
+  return (
+    <div className="col">
+      <table className="table table-striped table-hover">
+        <thead>
+          <tr>
+            <th>Title</th>
+            <th>Director</th>
+            <th>Genre</th>
+            <th>Metascore</th>
+            <th></th>
+          </tr>
+        </thead>
 
-export default MovieList;
\ No newline at end of file
+        <tbody>
+          {movies.map((movie) => (
+            <MovieListItem key={movie.id} movie={movie} />
+          ))}
+        </tbody>
+      </table>
+
+      <MovieFooter totalMovies={movies.length} />
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => {
+  console.log(state.movieReducer);
+  return {
+    movies: state.movieReducer.movies,
+  };
+};
+export default connect(mapStateToProps, {})(MovieList);
diff --git a/src/components/MovieListItem.js b/src/components/MovieListItem.js
index 11f13730e..b931739d0 100644
--- a/src/components/MovieListItem.js
+++ b/src/components/MovieListItem.js
@@ -1,20 +1,22 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React from "react";
+import { Link } from "react-router-dom";
 
-const MovieListItem = (props)=> {
-  const { id, title, director, genre, metascore} = props.movie;
+const MovieListItem = (props) => {
+  const { id, title, director, genre, metascore } = props.movie;
 
-  return(<tr key={id}>
+  return (
+    <tr key={id}>
       <td>{title}</td>
       <td>{director}</td>
       <td>{genre}</td>
       <td>{metascore}</td>
       <td>
         <Link to={`/movies/${id}`} className="view">
-          <input type="button" className="btn btn-secondary" value="View"/>
+          <input type="button" className="btn btn-secondary" value="View" />
         </Link>
       </td>
-  </tr>);
-}
+    </tr>
+  );
+};
 
-export default MovieListItem;
\ No newline at end of file
+export default MovieListItem;
diff --git a/src/index.js b/src/index.js
index 227c0531b..be701b1f6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,17 +1,21 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { createStore } from 'redux';
-import { Provider } from 'react-redux';
+import React from "react";
+import ReactDOM from "react-dom";
+import { createStore } from "redux";
+import { Provider } from "react-redux";
 
-import reducer from './reducers';
+import reducer from "./reducers";
 
-import App from './components/App';
-import { BrowserRouter as Router } from 'react-router-dom';
-import './index.css';
+import App from "./components/App";
+import { BrowserRouter as Router } from "react-router-dom";
+import "./index.css";
+
+const store = createStore(reducer);
 
 ReactDOM.render(
-  <Router>
+  <Provider store={store}>
+    <Router>
       <App />
-  </Router>,
-  document.getElementById('root')
+    </Router>
+  </Provider>,
+  document.getElementById("root")
 );
diff --git a/src/reducers/favoritesReducer.js b/src/reducers/favoritesReducer.js
new file mode 100644
index 000000000..960cfefc6
--- /dev/null
+++ b/src/reducers/favoritesReducer.js
@@ -0,0 +1,38 @@
+import {
+  ADD_FAVORITE,
+  REMOVE_FAVORITE,
+  TOGGLE_FAVORITES,
+} from "../actions/favoritesActions";
+
+const initialState = {
+  favorites: [],
+  displayFavorites: true,
+};
+
+const favoritesReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case TOGGLE_FAVORITES:
+      return {
+        ...state,
+        displayFavorites: !state.displayFavorites,
+      };
+
+    case ADD_FAVORITE:
+      return {
+        ...state,
+        favorites: [...state.favorites, action.payload],
+      };
+    case REMOVE_FAVORITE: {
+      return {
+        ...state,
+        favorites: state.favorites.filter((movie) => {
+          movie.id !== action.payload;
+        }),
+      };
+    }
+    default:
+      return state;
+  }
+};
+
+export default favoritesReducer;
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 6629609ca..98b4a8130 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -1,5 +1,11 @@
-import { combineReducers } from 'redux';
+import { combineReducers } from "redux";
 
-import movieReducer from './movieReducer';
+import movieReducer from "./movieReducer";
+import favoritesReducer from "./favoritesReducer";
 
-export default movieReducer;
\ No newline at end of file
+const combinedReducers = combineReducers({
+  movieReducer,
+  favoritesReducer,
+});
+
+export default combinedReducers;
diff --git a/src/reducers/movieReducer.js b/src/reducers/movieReducer.js
index 16f33bcdd..73da7f6ed 100644
--- a/src/reducers/movieReducer.js
+++ b/src/reducers/movieReducer.js
@@ -1,20 +1,30 @@
-import { ADD_MOVIE, DELETE_MOVIE } from '../actions/movieActions.js';
-import movies from './../data.js';
+import { ADD_MOVIE, DELETE_MOVIE } from "../actions/movieActions.js";
+import movies from "./../data.js";
 
 const initialState = {
-    movies: movies,
-    appTitle: "IMDB Movie Database"
-}
+  movies: movies,
+  appTitle: "IMDB Movie Database",
+};
 
-const reducer = (state, action) => {
-    switch(action.type) {
-        case DELETE_MOVIE:
-            return {
-                movies: state.movies.filter(item=>(action.payload !== item.id))
-            }
-        default:
-            return state;
-    }
-}
+const reducer = (state = initialState, action) => {
+  switch (action.type) {
+    case DELETE_MOVIE:
+      return {
+        ...state,
+        movies: state.movies.filter((item) => action.payload !== item.id),
+      };
+    case ADD_MOVIE:
+      const newMovie = {
+        ...action.payload,
+        id: Date.now(),
+      };
+      return {
+        ...state,
+        movies: [...state.movies, newMovie],
+      };
+    default:
+      return state;
+  }
+};
 
-export default reducer;
\ No newline at end of file
+export default reducer;