diff --git a/src/App.js b/src/App.js
index efced37e3cdc55a6c7f400be0de0537834b7dc58..9eeb0788d5689538dc84c46a56e2e1ace0e43ea4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,16 +8,18 @@ import FavoriteList from './Favorite';
 export default function App () {
     const [currentTab, setCurrentTab] = React.useState(0);
     const [searchResult, setSearchResult] = React.useState([]);
-    const [likes, setLikes] = React.useState([]);
+    const [myFavoriteList, setmyFavoriteList] = React.useState([]);
+    const [likes, setLikes] = React.useState({});
     const handleTabChange = (event, newValue) => {
         setCurrentTab(newValue);
     }
-    const handleLike = (item) => {
-        if(likes.includes(item.collectionId)){
-            setLikes(likes.filter(it => it != item.collectionId))
-        }else{
-            setLikes([...likes, item]);
-        }
+    const addToFavoriteList = (item) => {
+        setmyFavoriteList((prevList) => [...prevList, item]);
+    };
+
+    const handleLike = (id) => {
+        const updatedLikes = { ...likes, [id]: !likes[id] };
+        setLikes(updatedLikes);
     }
     return (
         <React.Fragment>
@@ -37,8 +39,8 @@ export default function App () {
                 </Tabs>
 
             </Box>
-            { currentTab == 0 && <SearchPage list={searchResult} onSearch={setSearchResult} onsetLikes={handleLike}/>}
-            { currentTab == 1 && <FavoriteList list={likes} onsetLikes={handleLike} />}
+            { currentTab == 0 && <SearchPage list={searchResult} addToFavoriteList={addToFavoriteList} myFavoriteList={myFavoriteList} handleLike={handleLike} likes={likes} onSearch={setSearchResult}/>}
+            { currentTab == 1 && <FavoriteList likes={likes} handleLike={handleLike} myFavoriteList={myFavoriteList} addToFavoriteList={addToFavoriteList} />}
             { currentTab == 2 && <Typography align="center" variant="h2">Item Three</Typography>}
         </React.Fragment>
     )
diff --git a/src/Favorite.js b/src/Favorite.js
index 530d246cc7c4c8194c0bc86c2f2d382a4da9f6fe..ec5653b8b7a2171697a51977d06ef1b905fda61d 100644
--- a/src/Favorite.js
+++ b/src/Favorite.js
@@ -18,17 +18,20 @@ const styles = {
     },
 };
 
-export default function Favoritee({list,onsetLikes}){
+export default function Favoritee({likes,myFavoriteList,handleLike,addToFavoriteList}){
+    const [favoriteLikes, setFavoriteLikes] = React.useState(likes);
 
-
-    let [snackState, setSnakState] = React.useState({open:false, msg:''})
-    const toggleFavorite = (item) => () => {
-        onsetLikes(item);
-        setSnakState({...snackState, open:true, msg:`${item.collectionName} is clicked`})
+    const toggleFavorite = (id) => () => {
+        const updatedLikes = { ...favoriteLikes, [id]: !favoriteLikes[id] };
+        setFavoriteLikes(updatedLikes);
+        handleLike(id);
     }
+
+    const favoriteList = myFavoriteList.filter((item) => favoriteLikes[item.collectionId] === true);
+
     return (
         <div>
-            {list.map(item => {
+            {favoriteList.map(item => {
                 return (
                     <Card sx={styles.card} key={item.collectionId}>
                         <CardContent>
@@ -36,9 +39,8 @@ export default function Favoritee({list,onsetLikes}){
                             <Typography variant="subtitle2">{item.collectionCensoredName}</Typography>
                         </CardContent>
                         <CardActions>
-                            <IconButton onClick={toggleFavorite(item)}>
-                                {list.includes(item.collectionId) ?
-                                 <Favorite /> : <FavoriteBorder />}
+                            <IconButton onClick={toggleFavorite(item.collectionId)}>
+                                {favoriteLikes[item.collectionId] ? <Favorite /> : <FavoriteBorder />}
                             </IconButton>
                         </CardActions>
                     </Card>
diff --git a/src/MusicList.js b/src/MusicList.js
index 3ca63dbea3fa4cd7ddee3459f39b7ab24049b4d4..d36b7e675b3137ec3d672baacea91be468306233 100644
--- a/src/MusicList.js
+++ b/src/MusicList.js
@@ -18,18 +18,29 @@ const styles = {
     },
 };
 
-export default function MusicList({list,onsetLikes}){
-    let [snackState, setSnakState] = React.useState({open:false, msg:''})
-    const toggleFavorite = (item) => () => {
-        onsetLikes(item);
-        setSnakState({...snackState, open:true, msg:`${item.collectionName} is clicked`})
-    }
-    const handleSnackbarClose = (event,reason) => {
-        if(reason == 'clickaway'){
-            return;
+export default function MusicList({list,likes,handleLike,myFavoriteList,addToFavoriteList}){
+    let [snackState, setSnackState] = React.useState({open:false, msg:''})
+    const toggleFavorite = (id,name) => () => {
+        const updatedLikes = { ...likes, [id]: !likes[id] };
+        setSnackState({ ...snackState, open: true, msg: `${name} is clicked` });
+        handleLike(id);
+        if (updatedLikes[id]) {
+            if (!myFavoriteList.find((item) => item.collectionId === id)) {
+                addToFavoriteList(list.find((item) => item.collectionId === id));
+            }
+        } else {
+            const updatedFavoriteList = myFavoriteList.filter((item) => item.collectionId !== item);
+            addToFavoriteList(updatedFavoriteList);
         }
-        setSnakState({open:false, msg:''});
+    
     }
+    const handleSnackbarClose = (event, reason) => {
+        if (reason === 'clickaway') {
+        return;
+        }
+        setSnackState({ open: false, msg: '' });
+    };
+
     return (
         <div>
             {list.map(item => {
@@ -40,9 +51,8 @@ export default function MusicList({list,onsetLikes}){
                             <Typography variant="subtitle2">{item.collectionCensoredName}</Typography>
                         </CardContent>
                         <CardActions>
-                            <IconButton onClick={toggleFavorite(item)}>
-                                {list.includes(item.collectionId) ?
-                                 <Favorite /> : <FavoriteBorder />}
+                            <IconButton onClick={toggleFavorite(item.collectionId, item.collectionName)}>
+                                {likes[item.collectionId] === true ? <Favorite /> : <FavoriteBorder />}
                             </IconButton>
                         </CardActions>
                     </Card>
diff --git a/src/Search.js b/src/Search.js
index 07a3b08fba3b8dce931fe76e50ed7046f3bccbc9..454fccc15a360d0641c2fdd9066041bb70f00370 100644
--- a/src/Search.js
+++ b/src/Search.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {Button, TextField} from '@mui/material';
 import MusicList from './MusicList';
 
-export default function SearchPage({list, onSearch, onsetLikes}){
+export default function SearchPage({list, onSearch,likes,handleLike,myFavoriteList,addToFavoriteList}){
     const [searchWord, setSearchWord] = React.useState('');
 
     const handleSearch = (event) =>{
@@ -35,7 +35,7 @@ export default function SearchPage({list, onSearch, onsetLikes}){
                 </div>
 
             </form>
-            <MusicList list={list} onsetLikes={onsetLikes}>
+            <MusicList list={list} addToFavoriteList={addToFavoriteList} likes={likes} handleLike={handleLike} myFavoriteList={myFavoriteList}>
 
             </MusicList>
         </React.Fragment>