diff --git a/package.json b/package.json
index ef8f85095f0ff71ce609b0c4f487e8e5760d8498..9b76b799a3677f93fe4094a4642cdc6ed23a2ab0 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "dependencies": {
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
+    "@mui/icons-material": "^5.13.7",
     "@mui/material": "^5.8.6"
   },
   "devDependencies": {
diff --git a/src/App.js b/src/App.js
index dcecf08c89ea2c3139aa9a484d0e8cefc7f6bc1b..1d44570a2a77fcae1d7177ca6dbaee1cb0aa79e4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,7 +7,7 @@ export default function App () {
     return (
         <React.Fragment>
             <AppBar positions = "fixed">
-                <Typography align = "center" variant = "h3" color = "inherit">Favorite Music</Typography>
+                <Typography align = "center" variant = "h3" color = "inherit">Hyunjin's Favorite Music</Typography>
             </AppBar>
 
             <div style = {{height: 60, width: '100%'}}></div>
diff --git a/src/MusicList.js b/src/MusicList.js
index 157eb0b26357937e05acfa549b46294af08ff12e..18372d8a1387c2ab113402464da908e9964a8b67 100644
--- a/src/MusicList.js
+++ b/src/MusicList.js
@@ -1,16 +1,42 @@
 import React from 'react';
-import {Card, CardContent, Typography} from '@mui/material';
+import {Card, CardContent, CardActions, Typography, IconButton} from '@mui/material';
+import {Favorite, FavoriteBorder} from '@mui/icons-material';
+
+const styles = {
+    content: {},
+    layout: {
+        display: 'flex',
+        justifyContent: 'center'
+    }, 
+    card: {
+        minWidth: 275, 
+        maxWidth: 600, 
+        marginBottom: '20pt', 
+        marginLeft: 'auto', 
+        marginRight: 'auto',
+    },
+};
+export default function MusicList ({list}) {
+    const [likes, setLikes] = React.useState({});
+
+    const toggleFavorite = (id) => () => {
+        setLikes({...likes, [id]: !likes[id]});
+    }
 
-export default function ({list}) {
     return (
         <div>
             {list.results.map(item => {
                 return (
-                    <Card>
+                    <Card sx={styles.card} key={(item.collectionId)}>
                         <CardContent>
                             <Typography varient = "subtitle1"> {item.artistName} </Typography>
                             <Typography variant = "subtitle2"> {item.colletcionCensoredName} </Typography>
                         </CardContent>
+                        <CardActions>
+                            <IconButton onClick = {toggleFavorite(item.collectionId)}>
+                                {(likes[item.collectionId] === true) ? <Favorite/> : <FavoriteBorder/>}
+                            </IconButton>
+                        </CardActions>
                     </Card>
                 )
             })}