diff --git a/public/app.bundle.js b/public/app.bundle.js
index 4c94652694087014632ea2960e9d47a297b8ae9a..1fc0ed012b31be14ed657b64797696d4fdfa30fc 100644
--- a/public/app.bundle.js
+++ b/public/app.bundle.js
@@ -2326,7 +2326,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ App)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/AppBar/AppBar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tabs/Tabs.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tab/Tab.js\");\n/* harmony import */ var _Favorites__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Favorites */ \"./src/Favorites.js\");\n/* harmony import */ var _SearchPage__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./SearchPage */ \"./src/SearchPage.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\nfunction App() {\n  var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState(0),\n    _React$useState2 = _slicedToArray(_React$useState, 2),\n    currentTab = _React$useState2[0],\n    setCurrentTab = _React$useState2[1];\n  var _React$useState3 = react__WEBPACK_IMPORTED_MODULE_0___default().useState([]),\n    _React$useState4 = _slicedToArray(_React$useState3, 2),\n    searchResult = _React$useState4[0],\n    setSearchResult = _React$useState4[1];\n  var _React$useState5 = react__WEBPACK_IMPORTED_MODULE_0___default().useState({}),\n    _React$useState6 = _slicedToArray(_React$useState5, 2),\n    likes = _React$useState6[0],\n    setLikes = _React$useState6[1];\n  var _React$useState7 = react__WEBPACK_IMPORTED_MODULE_0___default().useState([]),\n    _React$useState8 = _slicedToArray(_React$useState7, 2),\n    favorites = _React$useState8[0],\n    setFavorites = _React$useState8[1];\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n    var fetchLikes = function fetchLikes() {\n      fetch(\"/likes\").then(function (response) {\n        return response.json();\n      }).then(function (r) {\n        console.log(r);\n        setLikes(r);\n      })[\"catch\"](function (e) {\n        return console.log('error while getting likes');\n      });\n    };\n    fetchLikes();\n  }, []);\n  var handleTabChange = function handleTabChange(event, newValue) {\n    setCurrentTab(newValue);\n  };\n  var handleLike = function handleLike(id, item) {\n    var isLiked = likes[id] === true;\n    setLikes(function (prevLikes) {\n      return _objectSpread(_objectSpread({}, prevLikes), {}, _defineProperty({}, id, !isLiked));\n    });\n    if (!isLiked) {\n      var updatedFavorites = [].concat(_toConsumableArray(favorites), [item]);\n      setFavorites(updatedFavorites);\n      fetch(\"/likes\", {\n        method: \"POST\",\n        headers: {\n          \"Content-Type\": \"application/json\"\n        },\n        body: JSON.stringify(item)\n      })[\"catch\"](function (e) {\n        return console.log(\"error while posting likes\");\n      });\n    } else {\n      var _updatedFavorites = favorites.filter(function (favorite) {\n        return favorite.collectionId !== id;\n      });\n      setFavorites(_updatedFavorites);\n      fetch(\"/likes/\".concat(id), {\n        method: \"DELETE\"\n      })[\"catch\"](function (e) {\n        return console.log(\"error while deleting\");\n      });\n    }\n  };\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n    position: \"fixed\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n    align: \"center\",\n    variant: \"h3\",\n    color: \"inherit\"\n  }, \"Sumin's Favorite Music\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    style: {\n      height: 60,\n      width: \"100%\"\n    }\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n    sx: {\n      borderBottom: 1,\n      borderColorl: \"divider\"\n    }\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n    value: currentTab,\n    onChange: handleTabChange,\n    \"aria-label\": \"basic tabs\",\n    centered: true\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n    label: \"Search Music\",\n    value: 0\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n    label: \"Favorites\",\n    value: 1\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n    label: \"More Contents\",\n    value: 2\n  }))), currentTab == 0 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SearchPage__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    list: searchResult,\n    onSearch: setSearchResult,\n    likes: likes,\n    onLike: handleLike\n  }), currentTab === 1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Favorites__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    list: favorites,\n    likes: likes,\n    onLike: handleLike\n  }), currentTab == 2 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n    align: \"center\",\n    variant: \"h2\"\n  }, \"More\"));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/App.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ App)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/AppBar/AppBar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tabs/Tabs.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tab/Tab.js\");\n/* harmony import */ var _Favorites__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Favorites */ \"./src/Favorites.js\");\n/* harmony import */ var _SearchPage__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./SearchPage */ \"./src/SearchPage.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\nfunction App() {\n  var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState(0),\n    _React$useState2 = _slicedToArray(_React$useState, 2),\n    currentTab = _React$useState2[0],\n    setCurrentTab = _React$useState2[1];\n  var _React$useState3 = react__WEBPACK_IMPORTED_MODULE_0___default().useState([]),\n    _React$useState4 = _slicedToArray(_React$useState3, 2),\n    searchResult = _React$useState4[0],\n    setSearchResult = _React$useState4[1];\n  var _React$useState5 = react__WEBPACK_IMPORTED_MODULE_0___default().useState({}),\n    _React$useState6 = _slicedToArray(_React$useState5, 2),\n    likes = _React$useState6[0],\n    setLikes = _React$useState6[1];\n  var _React$useState7 = react__WEBPACK_IMPORTED_MODULE_0___default().useState([]),\n    _React$useState8 = _slicedToArray(_React$useState7, 2),\n    favorites = _React$useState8[0],\n    setFavorites = _React$useState8[1];\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n    fetch(\"/likes\").then(function (response) {\n      return response.json();\n    }).then(function (r) {\n      var likes = r.reduce(function (obj, item) {\n        return _objectSpread(_objectSpread({}, obj), {}, _defineProperty({}, item.collectionId, true));\n      }, {});\n      setLikes(likes);\n      setFavorites(r);\n      console.log(r);\n    })[\"catch\"](function (e) {\n      return console.log(e.message);\n    });\n  }, []);\n  var handleTabChange = function handleTabChange(event, newValue) {\n    setCurrentTab(newValue);\n  };\n  var handleLike = function handleLike(id, item) {\n    var isLiked = likes[id] === true;\n    setLikes(function (prevLikes) {\n      return _objectSpread(_objectSpread({}, prevLikes), {}, _defineProperty({}, id, !isLiked));\n    });\n    if (!isLiked) {\n      var updatedFavorites = [].concat(_toConsumableArray(favorites), [item]);\n      setFavorites(updatedFavorites);\n      fetch(\"/likes\", {\n        method: \"POST\",\n        headers: {\n          \"Content-Type\": \"application/json\"\n        },\n        body: JSON.stringify(item)\n      })[\"catch\"](function (e) {\n        return console.log(\"error while posting likes\");\n      });\n    } else {\n      fetch(\"/likes/\".concat(id), {\n        method: \"DELETE\"\n      }).then(function () {\n        var updatedFavorites = favorites.filter(function (favorite) {\n          return favorite.collectionId !== id;\n        });\n        setFavorites(updatedFavorites);\n      })[\"catch\"](function (e) {\n        return console.log(\"error while deleting\");\n      });\n    }\n  };\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n    position: \"fixed\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n    align: \"center\",\n    variant: \"h3\",\n    color: \"inherit\"\n  }, \"Sumin's Favorite Music\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    style: {\n      height: 60,\n      width: \"100%\"\n    }\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n    sx: {\n      borderBottom: 1,\n      borderColorl: \"divider\"\n    }\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n    value: currentTab,\n    onChange: handleTabChange,\n    \"aria-label\": \"basic tabs\",\n    centered: true\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n    label: \"Search Music\",\n    value: 0\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n    label: \"Favorites\",\n    value: 1\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n    label: \"More Contents\",\n    value: 2\n  }))), currentTab === 0 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SearchPage__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    list: searchResult,\n    onSearch: setSearchResult,\n    likes: likes,\n    onLike: handleLike\n  }), currentTab === 1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Favorites__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    list: favorites,\n    likes: likes,\n    onLike: handleLike\n  }), currentTab === 2 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n    align: \"center\",\n    variant: \"h2\"\n  }, \"More\"));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/App.js?");
 
 /***/ }),
 
@@ -2922,7 +2922,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	(() => {
-/******/ 		__webpack_require__.h = () => ("125a413f8e7df3fb0262")
+/******/ 		__webpack_require__.h = () => ("f9176102e1af0d353201")
 /******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/global */
diff --git a/src/App.js b/src/App.js
index dbdccf6dd27b2e19c5f4ec7e395a794dd56e735b..34a8e2861cd82fefb62b1967d2a9962fb6768308 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,21 +9,23 @@ export default function  App (){
     const [likes, setLikes] = React.useState({});
     const [favorites, setFavorites] = React.useState([]);
 
-
     useEffect(() => {
-      const fetchLikes = () => {
-        fetch("/likes")
-        .then((response)=>response.json())
-        .then((r)=>{
-          console.log(r);
-          setLikes(r);
-        }).catch(e => console.log('error while getting likes'));
-      };
+      fetch("/likes")
+      .then((response)=>response.json())
+      .then((r)=>{
+        const likes = r.reduce((obj, item) => {
+          return {
+              ...obj,
+              [item.collectionId]: true,
+          };
+        }, {});
 
-      fetchLikes();
+        setLikes(likes);
+        setFavorites(r);
+        console.log(r);
+      }).catch(e => console.log(e.message));
     }, []);
 
-
     const handleTabChange = (event, newValue)=>{
         setCurrentTab(newValue);
     }
@@ -45,12 +47,15 @@ export default function  App (){
           body: JSON.stringify(item),
         }).catch((e) => console.log("error while posting likes"));
       } else {
-        const updatedFavorites = favorites.filter(favorite => favorite.collectionId !== id);
-        setFavorites(updatedFavorites);
 
         fetch(`/likes/${id}`, {
           method: "DELETE",
-        }).catch((e) => console.log("error while deleting"));
+        })
+        .then(() => {
+          const updatedFavorites = favorites.filter(favorite => favorite.collectionId !== id);
+          setFavorites(updatedFavorites);
+        })
+        .catch((e) => console.log("error while deleting"));
       }
     };
 
@@ -70,9 +75,9 @@ export default function  App (){
             </Tabs>
         </Box>
 
-        {currentTab == 0 && <SearchPage list={searchResult} onSearch={setSearchResult} likes={likes} onLike={handleLike}/>}
+        {currentTab === 0 && <SearchPage list={searchResult} onSearch={setSearchResult} likes={likes} onLike={handleLike}/>}
         {currentTab === 1 && <Favorites list={favorites} likes={likes} onLike={handleLike}/>}
-        {currentTab == 2 && <Typography align="center" variant='h2'>More</Typography>}
+        {currentTab === 2 && <Typography align="center" variant='h2'>More</Typography>}
       </React.Fragment>
     );
 }
\ No newline at end of file
diff --git a/src/Favorites.js b/src/Favorites.js
index 06f7c0548bad9042f82a8375ffe3060842918cf1..a9e40a3aa61cefd704df574db42f3cc219bf29fd 100644
--- a/src/Favorites.js
+++ b/src/Favorites.js
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import MusicList from './MusicList';
 
 const Favorites = ({ list, likes, onLike}) => {
-  
+
   return (
     <React.Fragment>
       <MusicList list={list} likes={likes} onLike={onLike} />
diff --git a/src/SnackMsg.js b/src/SnackMsg.js
index 9a7226ea25a529bb5633a0ef21806c0eaa8a2a1c..98adab51d245aa7fdbcd395c4474150802062e39 100644
--- a/src/SnackMsg.js
+++ b/src/SnackMsg.js
@@ -11,6 +11,6 @@ const SnackMsg = (props) => {
         onClose={props.onClose}
         message={props.message}>
         </Snackbar>
-        )
+        );
 }
 export default SnackMsg;