diff --git a/src/App.js b/src/App.js
index cb66bfe6..e498f6d4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,7 +12,6 @@ import AddMovieForm from './components/AddMovieForm';
 import FavoriteMovieList from './components/FavoriteMovieList';
 
 const App = props => {
-  const displayFavorites = true;
 
   return (
     <div>
@@ -23,7 +22,7 @@ const App = props => {
       <div className="container">
         <MovieHeader/>
         <div className="row ">
-          {displayFavorites && <FavoriteMovieList/>}
+          {props.displayFavorites && <FavoriteMovieList/>}
         
           <Switch>
             <Route exact path="/movies/add">
@@ -48,4 +47,10 @@ const App = props => {
   );
 };
 
-export default App;
\ No newline at end of file
+const mapStateToProps = (state) => {
+  return({
+    displayFavorites: state.favoriteMovie.displayFavorites
+  })
+}
+
+export default connect(mapStateToProps)(App);
\ No newline at end of file
diff --git a/src/actions/favoriteActions.js b/src/actions/favoriteActions.js
new file mode 100644
index 00000000..fc1a06fa
--- /dev/null
+++ b/src/actions/favoriteActions.js
@@ -0,0 +1,13 @@
+export const DISPLAY_FAVORITES = 'DISPLAY_FAVORITES'
+export const ADD_FAVORITE = 'ADD_FAVORITE'
+export const DELETE_FAVORITE = 'DELETE_FAVORITE'
+
+export const displayFavorites = () =>{
+    return({type:DISPLAY_FAVORITES})
+}
+export const addFavorite = (obj) =>{
+    return({type:ADD_FAVORITE, payload:obj})
+}
+export const deleteFavorite = (id) =>{
+    return({type:DELETE_FAVORITE, payload:id})
+}
diff --git a/src/actions/movieActions.js b/src/actions/movieActions.js
index 3fb8c9dd..ff87b107 100644
--- a/src/actions/movieActions.js
+++ b/src/actions/movieActions.js
@@ -1,5 +1,9 @@
 export const DELETE_MOVIE = "DELETE_MOVIE";
+export const ADD_MOVIE = "ADD_MOVIE"
 
 export const deleteMovie = (id)=>{
     return({type: DELETE_MOVIE, payload:id});
+}
+export const addMovie = (values) => {
+    return({type: ADD_MOVIE, payload:values})
 }
\ No newline at end of file
diff --git a/src/components/AddMovieForm.js b/src/components/AddMovieForm.js
index d8a4d768..1fdc32aa 100644
--- a/src/components/AddMovieForm.js
+++ b/src/components/AddMovieForm.js
@@ -5,14 +5,15 @@ import { connect } from 'react-redux';
 import { Link, useHistory } from 'react-router-dom';
 
 const AddMovieForm = (props) => {
-    const { push } = useHistory();
+    const history = useHistory();
 
     const [movie, setMovie] = useState({
         title: "",
         director: "",
         genre: "",
         metascore: 0,
-        description:""
+        description:"",
+        id:Date.now()
     });
 
     const handleChange = (e) => {
@@ -25,6 +26,10 @@ const AddMovieForm = (props) => {
     const handleSubmit = (e) => {
     }
 
+    const handleAddMovie = () => {
+        props.addMovie(movie)
+        history.push(`/movies`)
+    }
     const { title, director, genre, metascore, description } = movie;
     return(<div className="col">
         <div className="modal-dialog">
@@ -58,7 +63,7 @@ const AddMovieForm = (props) => {
                         			
                     </div>
                     <div className="modal-footer">
-                        <input type="submit" className="btn btn-success" value="Add"/>
+                        <input type="submit" className="btn btn-success" value="Add" onClick={handleAddMovie}/>
                         <Link to={`/movies`}><input type="button" className="btn btn-default" value="Cancel"/></Link>
                     </div>
                 </form>
@@ -67,4 +72,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/FavoriteMovieList.js b/src/components/FavoriteMovieList.js
index 54f4383f..3cd483a4 100644
--- a/src/components/FavoriteMovieList.js
+++ b/src/components/FavoriteMovieList.js
@@ -1,19 +1,25 @@
 import React from 'react';
 
 import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
 
+import { deleteFavorite } from '../actions/favoriteActions';
 
 const FavoriteMovieList = (props) => {
-    const favorites = [];
+
+    const handleDeleteFavorite = (id) => {
+        props.deleteFavorite(id)
+        
+    }
     
     return (<div className="col-xs savedContainer">
         <h5>Favorite Movies</h5>
         {
-            favorites.map(movie=>{
+            props.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>
+                        <span><span class="material-icons" onClick={()=>{handleDeleteFavorite(movie.id)}}>remove_circle</span></span>
                     </Link> 
                 </div>
             })
@@ -21,5 +27,9 @@ const FavoriteMovieList = (props) => {
     </div>);
 }
 
-
-export default FavoriteMovieList;
\ No newline at end of file
+const mapStateToProps = (state) => {
+    return ({
+        favorites: state.favoriteMovie.favorites
+    })
+}
+export default connect(mapStateToProps, {deleteFavorite})(FavoriteMovieList);
\ No newline at end of file
diff --git a/src/components/Movie.js b/src/components/Movie.js
index 373201e5..bc9170f5 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -1,13 +1,27 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
+import { connect } from 'react-redux';
+import { deleteMovie } from '../actions/movieActions';
+
+import { addFavorite } from '../actions/favoriteActions';
 
 const Movie = (props) => {
     const { id } = useParams();
-    const { push } = useHistory();
+    const history = useHistory();
+
+    const [favButton, setFavButton] = useState(true)
 
-    const movies = [];
-    const movie = movies.find(movie=>movie.id===Number(id));
+    const movie = props.movies.find(movie=>movie.id===Number(id));
     
+    const handleDeleteMovie = () => {
+        props.deleteMovie(movie.id)
+        history.push(`/movies`)
+    }
+
+    const handleAddFavorite = (obj) => {
+        props.addFavorite(obj)
+    }
+
     return(<div className="modal-page col">
         <div className="modal-dialog">
             <div className="modal-content">
@@ -37,8 +51,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>
+                            { props.favButton && <span className="m-2 btn btn-dark" onClick={()=>{handleAddFavorite(movie)}}>Favorite</span>}
+                            <span className="delete"><input type="button" className="m-2 btn btn-danger" value="Delete" onClick={()=>{handleDeleteMovie(movie)}} /></span>
                         </section>
                     </div>
                 </div>
@@ -47,4 +61,11 @@ const Movie = (props) => {
     </div>);
 }
 
-export default Movie;
\ No newline at end of file
+const mapStateToProps =(state)=> {
+    return({
+        movies: state.movie.movies,
+        favButton: state.favoriteMovie.favButton
+    })
+}
+
+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 e3443e5f..b31f1d3d 100644
--- a/src/components/MovieHeader.js
+++ b/src/components/MovieHeader.js
@@ -1,17 +1,23 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+import { displayFavorites } from '../actions/favoriteActions';
 
 const MovieHeader = (props) => {
-    const appTitle = "";
-    const displayFavorites = true;
-    
+
+    const [button, setButton] = useState(true)
+
+    const handleDisplayFavorites = () => {
+        props.displayFavorites()
+        setButton(!button)
+    }
     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>
+            <div className="btn btn-sm btn-primary"><span onClick={handleDisplayFavorites}>{ button ? "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>
@@ -19,4 +25,10 @@ const MovieHeader = (props) => {
     </div>);
 }
 
-export default MovieHeader;
\ No newline at end of file
+const mapStateToProps = (state) => {
+    return({
+        appTitle: state.movie.appTitle,
+        displayFavorites: state.favoriteMovie.displayFavorites
+    })
+}
+export default connect(mapStateToProps, {displayFavorites})(MovieHeader);
\ No newline at end of file
diff --git a/src/components/MovieList.js b/src/components/MovieList.js
index 268c7809..3aae3b94 100644
--- a/src/components/MovieList.js
+++ b/src/components/MovieList.js
@@ -2,10 +2,9 @@ import React from 'react';
 
 import MovieListItem from './MovieListItem';
 import MovieFooter from './MovieFooter';
+import { connect } from 'react-redux';
 
 const MovieList = (props)=> {
-    const movies = [];
-
     return (
         <div className="col">
             <table className="table table-striped table-hover">
@@ -21,14 +20,20 @@ const MovieList = (props)=> {
 
                 <tbody>
                     {
-                        movies.map(movie=><MovieListItem key={movie.id} movie={movie}/>)
+                        props.movies.map(movie=><MovieListItem key={movie.id} movie={movie}/>)
                     }
                 </tbody>
             </table>
             
-            <MovieFooter totalMovies={movies.length}/>
+            <MovieFooter totalMovies={props.movies.length}/>
         </div>
     );
 }
 
-export default MovieList;
\ No newline at end of file
+const mapStateToProps = (state) => {
+    return({
+        movies: state.movie.movies
+    })
+}
+
+export default connect(mapStateToProps)(MovieList);
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index dfc70e99..63081671 100644
--- a/src/index.js
+++ b/src/index.js
@@ -9,9 +9,13 @@ import App from './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/favoriteMovieReducer.js b/src/reducers/favoriteMovieReducer.js
new file mode 100644
index 00000000..dfe6742f
--- /dev/null
+++ b/src/reducers/favoriteMovieReducer.js
@@ -0,0 +1,33 @@
+import movies from "../data"
+import { DISPLAY_FAVORITES, ADD_FAVORITE, DELETE_FAVORITE } from "../actions/favoriteActions";
+
+const initialState = {
+    favorites: [],
+    displayFavorites: true,
+    favButton: true
+}
+
+const favoriteMovieReducer = (state = initialState, action) => {
+    switch(action.type){
+        case(DISPLAY_FAVORITES):
+        return({
+            ...state,
+            displayFavorites: !state.displayFavorites
+    })
+        case(ADD_FAVORITE):
+        return({
+            ...state,
+            favorites: [...state.favorites, action.payload],
+            favButton: !state.favButton
+        })
+        case(DELETE_FAVORITE):
+        return({
+            ...state,
+            favorites: state.favorites.filter(item=>(action.payload !== item.id)),
+            favButton: !state.favButton
+        })
+    default:
+            return state;
+}}
+
+export default favoriteMovieReducer;
\ No newline at end of file
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 6629609c..2369b3c8 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -1,5 +1,10 @@
 import { combineReducers } from 'redux';
 
 import movieReducer from './movieReducer';
+import favoriteMovieReducer from './favoriteMovieReducer';
 
-export default movieReducer;
\ No newline at end of file
+
+export default combineReducers({
+    movie: movieReducer,
+    favoriteMovie: favoriteMovieReducer
+});
\ No newline at end of file
diff --git a/src/reducers/movieReducer.js b/src/reducers/movieReducer.js
index 16f33bcd..5f2793ec 100644
--- a/src/reducers/movieReducer.js
+++ b/src/reducers/movieReducer.js
@@ -6,12 +6,17 @@ const initialState = {
     appTitle: "IMDB Movie Database"
 }
 
-const reducer = (state, action) => {
+const reducer = (state = initialState, action) => {
     switch(action.type) {
         case DELETE_MOVIE:
             return {
                 movies: state.movies.filter(item=>(action.payload !== item.id))
             }
+        case ADD_MOVIE:
+            return {
+                ...state,
+                movies: [...state.movies, action.payload]
+            }
         default:
             return state;
     }