diff --git a/src/actions/favoriteActions.js b/src/actions/favoriteActions.js
new file mode 100644
index 000000000..4fc89632e
--- /dev/null
+++ b/src/actions/favoriteActions.js
@@ -0,0 +1,12 @@
+export const TOGGLE_FAVORITES = "TOGGLE_FAVORITES";
+export const ADD_FAVORITE = "ADD_FAVORITE";
+export const REMOVE_FAVORITE = "REMOVE_FAVORITE";
+export const toggleFavorites = () => {
+    return({type: TOGGLE_FAVORITES});
+}
+export const addFavorite = (movie) => {
+    return({type: ADD_FAVORITE, payload:movie});
+}
+export const removeFavorite = (id) => {
+    return({type: REMOVE_FAVORITE, payload:id});
+}
\ No newline at end of file
diff --git a/src/actions/movieActions.js b/src/actions/movieActions.js
index 3fb8c9ddb..05d3ac1a5 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 addMovie = (movie) => {
+    return({type: ADD_MOVIE, payload:movie});
+    
+ }
\ No newline at end of file
diff --git a/src/components/AddMovieForm.js b/src/components/AddMovieForm.js
index d8a4d768c..0053139fd 100644
--- a/src/components/AddMovieForm.js
+++ b/src/components/AddMovieForm.js
@@ -23,6 +23,9 @@ const AddMovieForm = (props) => {
     }
 
     const handleSubmit = (e) => {
+        e.preventDefault();
+        props.addMovie(movie);
+        push('/movies');
     }
 
     const { title, director, genre, metascore, description } = movie;
@@ -67,4 +70,4 @@ const AddMovieForm = (props) => {
     </div>);
 }
 
-export default AddMovieForm;
\ No newline at end of file
+export default connect(null, { addMovie })(AddMovieForm); 
\ No newline at end of file
diff --git a/src/components/App.js b/src/components/App.js
index d2d276d38..b3b42000d 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -12,7 +12,7 @@ import AddMovieForm from './AddMovieForm';
 import FavoriteMovieList from './FavoriteMovieList';
 
 const App = props => {
-  const displayFavorites = true;
+  const { displayFavorites } = props; 
 
   return (
     <div>
@@ -47,5 +47,9 @@ const App = props => {
     </div>
   );
 };
-
-export default App;
\ No newline at end of file
+const mapStateToProps = (state) => {
+  return {
+    displayFavorites: state.favoritesReducer.displayFavorites
+  }
+}
+export default connect(mapStateToProps) (App);
\ No newline at end of file
diff --git a/src/components/FavoriteMovieList.js b/src/components/FavoriteMovieList.js
index 54f4383fa..ff17cba3e 100644
--- a/src/components/FavoriteMovieList.js
+++ b/src/components/FavoriteMovieList.js
@@ -1,11 +1,14 @@
 import React from 'react';
-
+import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
+import { removeFavorite } from './../actions/favoritesActions';
 
 
 const FavoriteMovieList = (props) => {
-    const favorites = [];
-    
+    const { favorites, removeFavorite } = props;
+    const handleClick = (id) => {
+        removeFavorite(id);
+    }
     return (<div className="col-xs savedContainer">
         <h5>Favorite Movies</h5>
         {
@@ -13,7 +16,7 @@ const FavoriteMovieList = (props) => {
                 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>
+                        <span onClick={()=>{handleClick(movie.id)}}><span class="material-icons">remove_circle</span></span>
                     </Link> 
                 </div>
             })
@@ -21,5 +24,9 @@ const FavoriteMovieList = (props) => {
     </div>);
 }
 
-
-export default FavoriteMovieList;
\ No newline at end of file
+const mapStateToProps = (state) => {
+    return{
+        favorites: state.favoritesReducer.favorites
+    }
+}
+export default connect(mapStateToProps, { removeFavorite })(FavoriteMovieList);
\ No newline at end of file
diff --git a/src/components/Movie.js b/src/components/Movie.js
index 373201e56..b8b4c2fe5 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -1,13 +1,22 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { useParams, useHistory } from 'react-router-dom';
+import { deleteMovie } from './../actions/movieActions';
+import { addFavorite } from './../actions/favoritesActions';
 
 const Movie = (props) => {
     const { id } = useParams();
     const { push } = useHistory();
 
-    const movies = [];
+    const { movies, displayFavorites, deleteMovie, addFavorite }  = props;
     const movie = movies.find(movie=>movie.id===Number(id));
-    
+    const handleDeleteClick = () => {
+        deleteMovie(movie.id); 
+        push('/movies'); 
+    }
+    const handleFavoriteClick = () => {
+        addFavorite(movie);
+    }
     return(<div className="modal-page col">
         <div className="modal-dialog">
             <div className="modal-content">
@@ -37,8 +46,8 @@ const Movie = (props) => {
                         </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>
+                            {displayFavorites && <span onClick={handleFavoriteClick} className="m-2 btn btn-dark">Favorite</span>}
+                            <span className="delete" onClick={handleDeleteClick}><input type="button" className="m-2 btn btn-danger" value="Delete"/></span>
                         </section>
                     </div>
                 </div>
@@ -46,5 +55,10 @@ const Movie = (props) => {
         </div>
     </div>);
 }
-
-export default Movie;
\ No newline at end of file
+const mapStateToProps = (state) => {
+    return({
+        displayFavorites: state.favoritesReducer.displayFavorites, 
+        movies:state.movieReducer.movies 
+    });
+}
+export default connect(mapStateToProps, {deleteMovie, addFavorite})(Movie);
\ No newline at end of file
diff --git a/src/components/MovieHeader.js b/src/components/MovieHeader.js
index e3443e5fb..54f781c22 100644
--- a/src/components/MovieHeader.js
+++ b/src/components/MovieHeader.js
@@ -1,9 +1,13 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import { toggleFavorites } from './../actions/favoritesActions';
 import { Link } from 'react-router-dom';
 
 const MovieHeader = (props) => {
-    const appTitle = "";
-    const displayFavorites = true;
+    const { appTitle, displayFavorites, toggleFavorites } = props;
+    const handleClick = () => {
+        toggleFavorites();
+    }
     
     return(<div className="table-title">
         <div className="row">
@@ -11,12 +15,17 @@ const MovieHeader = (props) => {
             <h2>{appTitle}</h2>
         </div>
         <div className="col-sm-6 headerBar">
-            <div className="btn btn-sm btn-primary"><span>{ displayFavorites ? "Hide" : "Show"} Favorites</span></div>
+            <div onClick={handleClick}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>
     </div>);
 }
-
-export default MovieHeader;
\ No newline at end of file
+const mapStateToProps = (state) => {
+    return({
+        displayFavorites: state.favoritesReducer.displayFavorites,
+        appTitle: state.movieReducer.appTitle 
+    });
+}
+export default connect(mapStateToProps, {toggleFavorites})(MovieHeader);
\ No newline at end of file
diff --git a/src/components/MovieList.js b/src/components/MovieList.js
index 268c78099..716c3ea3d 100644
--- a/src/components/MovieList.js
+++ b/src/components/MovieList.js
@@ -1,10 +1,10 @@
 import React from 'react';
-
+import {connect} from 'react-redux';
 import MovieListItem from './MovieListItem';
 import MovieFooter from './MovieFooter';
 
 const MovieList = (props)=> {
-    const movies = [];
+    const { movies }= props;
 
     return (
         <div className="col">
@@ -30,5 +30,9 @@ const MovieList = (props)=> {
         </div>
     );
 }
-
-export default MovieList;
\ No newline at end of file
+const mapStateToProps = (state) => {
+    return({
+        movies:state.movieReducer.movies 
+    })
+}
+export default connect(mapStateToProps)(MovieList);
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 227c0531b..117a2d754 100644
--- a/src/index.js
+++ b/src/index.js
@@ -9,9 +9,13 @@ import App from './components/App';
 import { BrowserRouter as Router } from 'react-router-dom';
 import './index.css';
 
+const store = createStore(reducer);
+
 ReactDOM.render(
+  <Provider store={store}>
   <Router>
       <App />
-  </Router>,
+  </Router>
+  </Provider>,
   document.getElementById('root')
 );
diff --git a/src/reducers/favoritesReducer.js b/src/reducers/favoritesReducer.js
new file mode 100644
index 000000000..7c2d6308d
--- /dev/null
+++ b/src/reducers/favoritesReducer.js
@@ -0,0 +1,31 @@
+import { TOGGLE_FAVORITES, ADD_FAVORITE, REMOVE_FAVORITE } 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 {
+                    fravorites: state.favorites.filter(item=>(item.id !== action.payload)) 
+                }
+            }
+        default:
+            return(state);
+    }
+}
+
+export default favoritesReducer;
\ No newline at end of file
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 6629609ca..854d6ffce 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -1,5 +1,9 @@
 import { combineReducers } from 'redux';
 
 import movieReducer from './movieReducer';
-
-export default movieReducer;
\ No newline at end of file
+import favoritesReducer from './favoritesReducer';
+const rootReducer = combineReducers({
+    movieReducer,
+    favoritesReducer
+});
+export default rootReducer;
\ No newline at end of file
diff --git a/src/reducers/movieReducer.js b/src/reducers/movieReducer.js
index 16f33bcdd..e8e036a76 100644
--- a/src/reducers/movieReducer.js
+++ b/src/reducers/movieReducer.js
@@ -6,12 +6,22 @@ const initialState = {
     appTitle: "IMDB Movie Database"
 }
 
-const reducer = (state, action) => {
+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, 
+                    movie: [...state.movies, newMovie]
+                }
         default:
             return state;
     }