diff --git a/src/App.js b/src/App.js
index bc5adf0..4f88da5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -25,7 +25,7 @@ function App() {
         token: _token,
       });
 
-      s.getPlaylist("37i9dQZEVXcJZyENOWUFo7").then((response) =>
+      s.getPlaylist("37i9dQZF1DWYteTcNVQZNq").then((response) =>
         dispatch({
           type: "SET_DISCOVER_WEEKLY",
           discover_weekly: response,
@@ -57,6 +57,13 @@ function App() {
           playlists,
         });
       });
+      s.getMyDevices().then(({devices})=>{
+        console.log("Benim cihazlarım",devices[0].id)
+        dispatch({
+          type:"SET_DEVICE",
+          device_id:devices[0]?.id
+        })
+      })
     }
   }, [token, dispatch]);
 
diff --git a/src/Body.js b/src/Body.js
index 63ae5e6..e1e17e4 100644
--- a/src/Body.js
+++ b/src/Body.js
@@ -8,12 +8,13 @@ import FavoriteIcon from "@material-ui/icons/Favorite";
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
 
 function Body({ spotify }) {
-  const [{ discover_weekly }, dispatch] = useStateValue();
+  const [{ discover_weekly,device_id }, dispatch] = useStateValue();
 
   const playPlaylist = (id) => {
     spotify
       .play({
-        context_uri: `spotify:playlist:37i9dQZEVXcJZyENOWUFo7`,
+        device_id:device_id,
+        context_uri: `spotify:playlist:37i9dQZF1DWYteTcNVQZNq`,
       })
       .then((res) => {
         spotify.getMyCurrentPlayingTrack().then((r) => {
@@ -32,6 +33,7 @@ function Body({ spotify }) {
   const playSong = (id) => {
     spotify
       .play({
+        device_id:device_id,
         uris: [`spotify:track:${id}`],
       })
       .then((res) => {
@@ -71,8 +73,8 @@ function Body({ spotify }) {
           <MoreHorizIcon />
         </div>
 
-        {discover_weekly?.tracks.items.map((item) => (
-          <SongRow playSong={playSong} track={item.track} />
+        {discover_weekly?.tracks.items.map((item,i) => (
+          <SongRow key={i} unique={i} playSong={playSong} track={item.track} />
         ))}
       </div>
     </div>
diff --git a/src/Header.js b/src/Header.js
index 13440c9..43f3e12 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -7,7 +7,7 @@ import { useEffect } from "react";
 
 function Header({ spotify }) {
   const [{ user }, dispatch] = useStateValue();
-
+  console.log((user?.images[0])?user.images[0].url:'b')
   return (
     <div className="header">
       <div className="header__left">
@@ -18,7 +18,7 @@ function Header({ spotify }) {
         />
       </div>
       <div className="header__right">
-        <Avatar alt={user?.display_name} src={user?.images[0].url} />
+        <Avatar alt={user?.display_name} src={(user?.images[0])?user?.images[0].url:'https://uplay-avatars.s3.amazonaws.com/d840aae8-60ec-4830-9465-da5e1c16ae59/default_256_256.png'} />
         <h4>{user?.display_name}</h4>
       </div>
     </div>
diff --git a/src/reducer.js b/src/reducer.js
index efb62e6..dc3d426 100644
--- a/src/reducer.js
+++ b/src/reducer.js
@@ -8,6 +8,7 @@ export const initialState = {
   top_artists: null,
   playing: false,
   item: null,
+  device_id:null
 };
 
 const reducer = (state, action) => {
@@ -60,6 +61,11 @@ const reducer = (state, action) => {
         ...state,
         playlists: action.playlists,
       };
+      case "SET_DEVICE":
+      return{
+        ...state,
+        device_id:action.device_id,
+      }
     default:
       return state;
   }