diff --git a/package-lock.json b/package-lock.json
index 5ddc4bd0c..51afc44c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "react-redux": "^7.2.6",
         "react-router-dom": "5.2.0",
         "redux": "^4.2.0",
+        "redux-devtools-extension": "^2.13.9",
         "sass": "^1.32.8",
         "style-loader": "^3.3.1",
         "styled-components": "5.3.3"
@@ -12604,6 +12605,15 @@
         "@babel/runtime": "^7.9.2"
       }
     },
+    "node_modules/redux-devtools-extension": {
+      "version": "2.13.9",
+      "resolved": "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.9.tgz",
+      "integrity": "sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A==",
+      "deprecated": "Package moved to @redux-devtools/extension.",
+      "peerDependencies": {
+        "redux": "^3.1.0 || ^4.0.0"
+      }
+    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -24652,6 +24662,12 @@
         "@babel/runtime": "^7.9.2"
       }
     },
+    "redux-devtools-extension": {
+      "version": "2.13.9",
+      "resolved": "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.9.tgz",
+      "integrity": "sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A==",
+      "requires": {}
+    },
     "regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
diff --git a/package.json b/package.json
index 8f39e1399..018644a4e 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "react-redux": "^7.2.6",
     "react-router-dom": "5.2.0",
     "redux": "^4.2.0",
+    "redux-devtools-extension": "^2.13.9",
     "sass": "^1.32.8",
     "style-loader": "^3.3.1",
     "styled-components": "5.3.3"
diff --git a/src/actions/movieActions.js b/src/actions/movieActions.js
index 3fb8c9ddb..d6f961b28 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});
+}
+
+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..a6c1424ba 100644
--- a/src/components/AddMovieForm.js
+++ b/src/components/AddMovieForm.js
@@ -8,6 +8,7 @@ const AddMovieForm = (props) => {
     const { push } = useHistory();
 
     const [movie, setMovie] = useState({
+        id: Date.now(),
         title: "",
         director: "",
         genre: "",
@@ -22,7 +23,9 @@ const AddMovieForm = (props) => {
         });
     }
 
-    const handleSubmit = (e) => {
+    const handleSubmit = () => {
+        props.addMovie(movie)
+        push('/movies')
     }
 
     const { title, director, genre, metascore, description } = movie;
@@ -67,4 +70,5 @@ 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..4fe36bb2c 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.displayFavorites;
 
   return (
     <div>
@@ -48,4 +48,11 @@ const App = props => {
   );
 };
 
-export default App;
\ No newline at end of file
+const mapStateToProps = state => {
+  return{
+    displayFavorites: state.favorite.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..f8e1c1f96 100644
--- a/src/components/FavoriteMovieList.js
+++ b/src/components/FavoriteMovieList.js
@@ -1,10 +1,11 @@
 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 = props.favorites;
     
     return (<div className="col-xs savedContainer">
         <h5>Favorite Movies</h5>
@@ -13,7 +14,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><span className="material-icons" onClick={() => props.removeFavorite(movie.id)}>remove_circle</span></span>
                     </Link> 
                 </div>
             })
@@ -21,5 +22,11 @@ const FavoriteMovieList = (props) => {
     </div>);
 }
 
+const mapStateToProps = state => {
+    return {
+        favorites: state.favorite.favorites
+    }
+    
+}
 
-export default FavoriteMovieList;
\ No newline at end of file
+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..896b05925 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -1,12 +1,26 @@
 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 movies = props.movies;
     const movie = movies.find(movie=>movie.id===Number(id));
+
+    const handleFavorite = (e) => {
+        e.preventDefault;
+        props.addFavorite(movie)
+    }
+
+    const handleDelete = (e) => {
+        e.preventDefault;
+        props.deleteMovie(movie.id)
+        push('/movies')
+    }
     
     return(<div className="modal-page col">
         <div className="modal-dialog">
@@ -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>
+                            <span className="m-2 btn btn-dark" onClick={(e) => handleFavorite(e)}>Favorite</span>
+                            <span className="delete"><input type="button" className="m-2 btn btn-danger" value="Delete" onClick={(e) => handleDelete(e)}/></span>
                         </section>
                     </div>
                 </div>
@@ -46,5 +60,12 @@ const Movie = (props) => {
         </div>
     </div>);
 }
+const mapStateToProps = state => {
+    return {
+        displayFavorites: state.favorite.displayFavorites,
+        movies: state.movie.movies
+    }
+}
+
 
-export default Movie;
\ No newline at end of file
+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..763af28e9 100644
--- a/src/components/MovieHeader.js
+++ b/src/components/MovieHeader.js
@@ -1,9 +1,12 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+import { toggleFavorites } from '../actions/favoritesActions';
 
 const MovieHeader = (props) => {
-    const appTitle = "";
-    const displayFavorites = true;
+    const appTitle = props.title;
+    const displayFavorites = props.displayFavorites;
+
     
     return(<div className="table-title">
         <div className="row">
@@ -11,12 +14,18 @@ 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 className="btn btn-sm btn-primary" onClick={() => props.toggleFavorites()}><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>);
 }
+const mapStateToProps = state => {
+    return{
+        displayFavorites: state.favorite.displayFavorites,
+        title: state.movie.appTitle
+    }
+}
 
-export default MovieHeader;
\ No newline at end of file
+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..5aef85796 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.movies;
 
     return (
         <div className="col">
@@ -30,5 +30,11 @@ const MovieList = (props)=> {
         </div>
     );
 }
+const mapStateToProps = state => {
+    return {
+        movies: state.movie.movies
+    }
+}
+
 
-export default MovieList;
\ No newline at end of file
+export default connect(mapStateToProps, {})(MovieList);
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 227c0531b..71ef77dd1 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 { legacy_createStore as createStore } from 'redux';
 import { Provider } from 'react-redux';
-
+import {composeWithDevTools} from 'redux-devtools-extension'
 import reducer from './reducers';
 
 import App from './components/App';
 import { BrowserRouter as Router } from 'react-router-dom';
 import './index.css';
 
+const store = createStore(reducer,composeWithDevTools())
+
 ReactDOM.render(
-  <Router>
-      <App />
-  </Router>,
+  <Provider store={store}>
+    <Router>
+        <App />
+    </Router>
+  </Provider>,
   document.getElementById('root')
 );
diff --git a/src/reducers/favoritesReducer.js b/src/reducers/favoritesReducer.js
new file mode 100644
index 000000000..dad1f64b7
--- /dev/null
+++ b/src/reducers/favoritesReducer.js
@@ -0,0 +1,39 @@
+import { TOGGLE_FAVORITES, ADD_FAVORITE, REMOVE_FAVORITE } from "../actions/favoritesActions";
+
+const initialState = {
+    favorites: [],
+    displayFavorites: false
+}
+
+const reducer = (state = initialState, action) => {
+    switch(action.type) {
+        case TOGGLE_FAVORITES:
+            return {
+                ...state,
+                displayFavorites: !state.displayFavorites
+            }
+        case ADD_FAVORITE:
+            for(let i = 0; i<state.favorites.length;i++){
+                if(state.favorites[i].id === action.payload.id){
+                    return {
+                        ...state
+                    }
+                }
+            }
+            return{
+                ...state,
+                favorites: [...state.favorites,action.payload]
+            }
+        case REMOVE_FAVORITE:
+            return {
+                ...state,
+                favorites: state.favorites.filter(item=>(action.payload !== item.id))
+            }
+        default:
+            return state;
+    }
+
+}
+
+
+export default reducer
\ No newline at end of file
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 6629609ca..c1ea2bc6f 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -1,5 +1,7 @@
 import { combineReducers } from 'redux';
-
 import movieReducer from './movieReducer';
+import favoritesRducer from './favoritesReducer'
+
+const rootReducers = combineReducers({movie: movieReducer, favorite: favoritesRducer})
 
-export default movieReducer;
\ No newline at end of file
+export default rootReducers;
\ No newline at end of file
diff --git a/src/reducers/movieReducer.js b/src/reducers/movieReducer.js
index 16f33bcdd..3b3f37e32 100644
--- a/src/reducers/movieReducer.js
+++ b/src/reducers/movieReducer.js
@@ -6,12 +6,18 @@ 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:
+            return {
+                ...state,
+                movies: [...movies,action.payload]
+            }
         default:
             return state;
     }