diff --git a/client/src/App.js b/client/src/App.js
index 740adc7a8a..5aa6648c12 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,6 +1,9 @@
 import React, { useState } from 'react';
-
+import { Route, Link } from 'react-router-dom';
 import SavedList from './Movies/SavedList';
+import MovieList from './Movies/MovieList';
+import Movie from './Movies/Movie';
+
 
 const App = () => {
   const [savedList, setSavedList] = useState( [] );
@@ -12,7 +15,9 @@ const App = () => {
   return (
     <div>
       <SavedList list={savedList} />
-      <div>Replace this Div with your Routes</div>
+      <Route exact path='/' component={MovieList} />
+      <Route path='/movies/:id' component={Movie} />
+      
     </div>
   );
 };
diff --git a/client/src/Movies/Movie.js b/client/src/Movies/Movie.js
index 76f5210642..008980e4d1 100644
--- a/client/src/Movies/Movie.js
+++ b/client/src/Movies/Movie.js
@@ -5,7 +5,7 @@ const Movie = (props) => {
   const [movie, setMovie] = useState();
  
   useEffect(() => {
-    const id = 1;
+    const id = props.match.params.id;
     // change ^^^ that line and grab the id from the URL
     // You will NEED to add a dependency array to this effect hook
 
@@ -18,7 +18,7 @@ const Movie = (props) => {
           console.error(error);
         });
 
-  },[]);
+  },[props.match.params.id]);
   
   // Uncomment this only when you have moved on to the stretch goals
   // const saveMovie = () => {
diff --git a/client/src/Movies/MovieList.js b/client/src/Movies/MovieList.js
index ab22a906a1..d63f71ea20 100644
--- a/client/src/Movies/MovieList.js
+++ b/client/src/Movies/MovieList.js
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
+import { Link} from 'react-router-dom';
 
 const MovieList = props => {
   const [movies, setMovies] = useState([])
@@ -21,7 +22,9 @@ const MovieList = props => {
   return (
     <div className="movie-list">
       {movies.map(movie => (
+        <Link to={`/movies/${movie.id}`}>
         <MovieDetails key={movie.id} movie={movie} />
+        </Link>
       ))}
     </div>
   );
diff --git a/client/src/Movies/SavedList.js b/client/src/Movies/SavedList.js
index 2c7d484cac..508eed6bef 100644
--- a/client/src/Movies/SavedList.js
+++ b/client/src/Movies/SavedList.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 const SavedList = props => (
   <div className="saved-list">
@@ -6,7 +7,9 @@ const SavedList = props => (
     {props.list.map(movie => (
       <span className="saved-movie">{movie.title}</span>
     ))}
+    <Link to='/'>
     <div className="home-button">Home</div>
+    </Link>
   </div>
 );
 
diff --git a/client/src/index.js b/client/src/index.js
index 9eac967ab4..4251c52b67 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -1,7 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter as Router } from "react-router-dom";
 
 import './index.css';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const rootElement = document.getElementById('root');
+ReactDOM.render(
+<Router><App /></Router>
+, rootElement
+);