diff --git a/client/src/App.js b/client/src/App.js
index 16257b22f..426cf24a2 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
-
+import { Route } from 'react-router-dom';
+import Film from './Filmler/Film';
+import FilmListesi from "./Filmler/FilmListesi";
 import KaydedilenlerListesi from './Filmler/KaydedilenlerListesi';
 
 export default function App () {
@@ -12,6 +14,7 @@ export default function App () {
       axios
         .get('http://localhost:5001/api/filmler') // Burayı Postman'le çalışın
         .then(response => {
+          setMovieList(response.data);
           // Bu kısmı log statementlarıyla çalışın
           // ve burdan gelen response'u 'movieList' e aktarın
         })
@@ -22,15 +25,26 @@ export default function App () {
     FilmleriAl();
   }, []);
 
-  const KaydedilenlerListesineEkle = id => {
+  const KaydedilenlerListesineEkle = (movie) => {
+    const newArr = saved;
+    newArr.find((e) => e.id === movie.id) !== null && newArr.push(movie);
+    setSaved([...newArr]);
     // Burası esnek. Aynı filmin birden fazla kez "saved" e eklenmesini engelleyin
   };
 
   return (
     <div>
-      <KaydedilenlerListesi list={[ /* Burası esnek */]} />
-
-      <div>Bu Div'i kendi Routelarınızla değiştirin</div>
+      <KaydedilenlerListesi list={[ saved]} />
+      <Route exact path="/">
+        <FilmListesi movies ={movieList} />
+      </Route>
+      <Route path="/filmler/:id">
+        <Film
+          KaydedilenlerListesineEkle={KaydedilenlerListesineEkle}
+          saved={saved}
+        />
+      </Route>
+      
     </div>
   );
 }
diff --git a/client/src/Filmler/Film.js b/client/src/Filmler/Film.js
index eefebaaa2..81a063e5c 100644
--- a/client/src/Filmler/Film.js
+++ b/client/src/Filmler/Film.js
@@ -1,16 +1,20 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
+import { useParams } from "react-router-dom";
+import KaydedilenlerListesi from './KaydedilenlerListesi';
 
 export default function Film(props) {
   const [movie, setMovie] = useState();
+  const { KaydedilenlerListesineEkle } = props;
 
-  let id = 1;
+  let { id } = useParams();
   // URL'den alınan :id parametresini bu değişkene aktarın
 
   useEffect(() => {
     axios
       .get(`http://localhost:5001/api/filmler/${id}`) // Bu uç noktayı Postman'le çalışın
       .then(response => {
+        setMovie(response.data);
           // Bu kısmı log statementlarıyla çalışın
           // ve burdan gelen response'u 'movie' e aktarın
       })
@@ -48,7 +52,8 @@ export default function Film(props) {
           </div>
         ))}
       </div>
-      <div className="save-button">Kaydet</div>
+      <div className="save-button" onClick={() => KaydedilenlerListesineEkle(movie)}>
+        Kaydet</div>
     </div>
   );
 }
diff --git a/client/src/Filmler/FilmListesi.js b/client/src/Filmler/FilmListesi.js
index cad454c25..0f26be978 100644
--- a/client/src/Filmler/FilmListesi.js
+++ b/client/src/Filmler/FilmListesi.js
@@ -1,4 +1,6 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
+
 
 export default function FilmListesi(props) {
   return (
@@ -11,10 +13,11 @@ export default function FilmListesi(props) {
   }
 
 function FilmDetayları(props) {
-  const { title, director, metascore } = props.movie;
+  const { title, director, metascore, id } = props.movie;
 
   return (
     <div className="movie-card">
+      <Link to={`/filmler/${id}`}>
       <h2>{title}</h2>
       <div className="movie-director">
         Director: <em>{director}</em>
@@ -22,6 +25,7 @@ function FilmDetayları(props) {
       <div className="movie-metascore">
         Metascore: <strong>{metascore}</strong>
       </div>
+      </Link>
     </div>
   );
 }
diff --git a/client/src/Filmler/KaydedilenlerListesi.js b/client/src/Filmler/KaydedilenlerListesi.js
index 8c95fbac9..fb085f7e9 100644
--- a/client/src/Filmler/KaydedilenlerListesi.js
+++ b/client/src/Filmler/KaydedilenlerListesi.js
@@ -1,13 +1,19 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 
 export default function KaydedilenlerListesi(props) {
+  const history = useHistory();
+  function handleClick() {
+    history.push("/");
+  }
   return (
     <div className="saved-list">
       <h3>Kaydedilen Filmler:</h3>
       {props.list.map(movie => (
         <span className="saved-movie">{movie.title}</span>
       ))}
-      <div className="home-button">Anasayfa</div>
+      <div className="home-button" onClick={handleClick}>
+        Anasayfa</div>
     </div>
   );
 }
diff --git a/client/src/index.js b/client/src/index.js
index 9feb14be9..4e7d48f43 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -1,9 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-
+import { BrowserRouter } from 'react-router-dom';
 import './index.css';
 import App from './App';
 
 
 // Routeların çalışması için <App /> öğesini düzenlemeniz gerekir
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+<BrowserRouter><App />
+</BrowserRouter>, 
+document.getElementById('root'));