Merge pull request #22 from nikandlv/development

Playerbar and homepage and minor changes update
2019-07-26 19:53:08 +04:30 · 2019-07-26 19:53:08 +04:30 · bb761c071b
parent 7fdb504464 b5e5a8e80f
commit bb761c071b
10 changed files with 418 additions and 167 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -534,7 +534,6 @@
      "version": "6.10.2",
      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.2.tgz",
      "integrity": "sha512-TXtUUEYHuaTEbLZWIKUr5pmBuhDLy+8KYtPYdcV8qC+pOZL+NKqYwvWSRrVXHn+ZmRRAu8vJTAznH7Oag6RVRw==",
-      "dev": true,
      "requires": {
        "fast-deep-equal": "^2.0.1",
        "fast-json-stable-stringify": "^2.0.0",
@ -545,14 +544,12 @@
    "ajv-errors": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
-      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true
+      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ=="
    },
    "ajv-keywords": {
      "version": "3.4.1",
      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.4.1.tgz",
-      "integrity": "sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==",
-      "dev": true
+      "integrity": "sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ=="
    },
    "align-text": {
      "version": "0.1.4",
@ -685,14 +682,12 @@
    "ansi-regex": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-      "dev": true
+      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
    },
    "ansi-styles": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
-      "dev": true
+      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
    },
    "anymatch": {
      "version": "2.0.0",
@ -1358,7 +1353,6 @@
      "version": "6.26.0",
      "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
      "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=",
-      "dev": true,
      "requires": {
        "chalk": "^1.1.3",
        "esutils": "^2.0.2",
@ -1369,7 +1363,6 @@
          "version": "1.1.3",
          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-          "dev": true,
          "requires": {
            "ansi-styles": "^2.2.1",
            "escape-string-regexp": "^1.0.2",
@ -2613,8 +2606,7 @@
    "big.js": {
      "version": "5.2.2",
      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
-      "dev": true
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
    },
    "binary-extensions": {
      "version": "1.13.1",
@ -3387,7 +3379,6 @@
      "version": "2.4.2",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
      "requires": {
        "ansi-styles": "^3.2.1",
        "escape-string-regexp": "^1.0.5",
@ -3398,7 +3389,6 @@
          "version": "3.2.1",
          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
          "requires": {
            "color-convert": "^1.9.0"
          }
@ -3407,7 +3397,6 @@
          "version": "5.5.0",
          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
          "requires": {
            "has-flag": "^3.0.0"
          }
@ -3914,7 +3903,6 @@
      "version": "1.9.3",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
      "requires": {
        "color-name": "1.1.3"
      }
@ -3922,8 +3910,7 @@
    "color-name": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
    },
    "color-string": {
      "version": "0.3.0",
@ -4509,7 +4496,6 @@
      "version": "0.7.1",
      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.1.tgz",
      "integrity": "sha512-xYL0AMZJ4gFzJQsHUKa5jiWWi2vH77WVNg7JYRyewwj6oPh4yb/y6Y9ZCw9dsj/9UauMhtuxR+ogQd//EdEVNA==",
-      "dev": true,
      "requires": {
        "cssesc": "^0.1.0",
        "fastparse": "^1.1.1",
@ -4520,7 +4506,6 @@
          "version": "1.0.0",
          "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-1.0.0.tgz",
          "integrity": "sha1-hqdj9Y7k18L2sQLkdkBQ3n7ZDGs=",
-          "dev": true,
          "requires": {
            "regenerate": "^1.2.1",
            "regjsgen": "^0.2.0",
@ -4544,8 +4529,7 @@
    "cssesc": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz",
-      "integrity": "sha1-yBSQPkViM3GgR3tAEJqq++6t27Q=",
-      "dev": true
+      "integrity": "sha1-yBSQPkViM3GgR3tAEJqq++6t27Q="
    },
    "cssnano": {
      "version": "3.10.0",
@ -5092,11 +5076,6 @@
        "entities": "^1.1.1"
      }
    },
-    "dom-walk": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
-      "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg="
-    },
    "domain-browser": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@ -5513,8 +5492,7 @@
    "emojis-list": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
-      "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
-      "dev": true
+      "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="
    },
    "encodeurl": {
      "version": "1.0.2",
@ -5732,8 +5710,7 @@
    "escape-string-regexp": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
    },
    "escodegen": {
      "version": "1.11.1",
@ -6169,8 +6146,7 @@
    "esutils": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
-      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
-      "dev": true
+      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs="
    },
    "etag": {
      "version": "1.8.1",
@ -6460,14 +6436,12 @@
    "fast-deep-equal": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
-      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
-      "dev": true
+      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
    },
    "fast-json-stable-stringify": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
-      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=",
-      "dev": true
+      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
    },
    "fast-levenshtein": {
      "version": "2.0.6",
@ -6478,8 +6452,7 @@
    "fastparse": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
-      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
-      "dev": true
+      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ=="
    },
    "faye-websocket": {
      "version": "0.10.0",
@ -7847,15 +7820,6 @@
        "is-glob": "^2.0.0"
      }
    },
-    "global": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
-      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
-      "requires": {
-        "min-document": "^2.19.0",
-        "process": "^0.11.10"
-      }
-    },
    "global-dirs": {
      "version": "0.1.1",
      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-0.1.1.tgz",
@ -8055,7 +8019,6 @@
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
      "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
-      "dev": true,
      "requires": {
        "ansi-regex": "^2.0.0"
      }
@ -8086,8 +8049,7 @@
    "has-flag": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "dev": true
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
    },
    "has-symbols": {
      "version": "1.0.0",
@ -8819,14 +8781,12 @@
    "icss-replace-symbols": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
-      "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=",
-      "dev": true
+      "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0="
    },
    "icss-utils": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-2.1.0.tgz",
      "integrity": "sha1-g/Cg7DeL8yRheLbCrZE28TWxyWI=",
-      "dev": true,
      "requires": {
        "postcss": "^6.0.1"
      },
@ -8835,7 +8795,6 @@
          "version": "6.0.23",
          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-          "dev": true,
          "requires": {
            "chalk": "^2.4.1",
            "source-map": "^0.6.1",
@ -8845,14 +8804,12 @@
        "source-map": {
          "version": "0.6.1",
          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
        },
        "supports-color": {
          "version": "5.5.0",
          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
          "requires": {
            "has-flag": "^3.0.0"
          }
@ -9646,6 +9603,11 @@
        "semver": "^5.3.0"
      }
    },
+    "jquery": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
+      "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
+    },
    "js-base64": {
      "version": "2.5.1",
      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
@ -9661,8 +9623,7 @@
    "js-tokens": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
-      "dev": true
+      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
    },
    "js-yaml": {
      "version": "3.7.0",
@ -9707,8 +9668,7 @@
    "json-schema-traverse": {
      "version": "0.4.1",
      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
    },
    "json-stable-stringify-without-jsonify": {
      "version": "1.0.1",
@ -10157,7 +10117,6 @@
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
      "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
-      "dev": true,
      "requires": {
        "big.js": "^5.2.2",
        "emojis-list": "^2.0.0",
@ -10168,7 +10127,6 @@
          "version": "1.0.1",
          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-          "dev": true,
          "requires": {
            "minimist": "^1.2.0"
          }
@ -10176,8 +10134,7 @@
        "minimist": {
          "version": "1.2.0",
          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
-          "dev": true
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
        }
      }
    },
@ -10193,8 +10150,7 @@
    "lodash": {
      "version": "4.17.14",
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.14.tgz",
-      "integrity": "sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw==",
-      "dev": true
+      "integrity": "sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw=="
    },
    "lodash._arraycopy": {
      "version": "3.0.0",
@ -11002,14 +10958,6 @@
      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
      "dev": true
    },
-    "min-document": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
-      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
-      "requires": {
-        "dom-walk": "^0.1.0"
-      }
-    },
    "mini-css-extract-plugin": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.0.tgz",
@ -12057,6 +12005,14 @@
        "os-tmpdir": "^1.0.0"
      }
    },
+    "owl.carousel": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/owl.carousel/-/owl.carousel-2.3.4.tgz",
+      "integrity": "sha512-JaDss9+feAvEW8KZppPSpllfposEzQiW+Ytt/Xm5t/3CTJ7YVmkh6RkWixoA2yXk2boIwedYxOvrrppIGzru9A==",
+      "requires": {
+        "jquery": ">=1.8.3"
+      }
+    },
    "p-cancelable": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz",
@ -12747,7 +12703,6 @@
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.1.tgz",
      "integrity": "sha512-6jt9XZwUhwmRUhb/CkyJY020PYaPJsCyt3UjbaWo6XEbH/94Hmv6MP7fG2C5NDU/BcHzyGYxNtHvM+LTf9HrYw==",
-      "dev": true,
      "requires": {
        "postcss": "^6.0.1"
      },
@ -12756,7 +12711,6 @@
          "version": "6.0.23",
          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-          "dev": true,
          "requires": {
            "chalk": "^2.4.1",
            "source-map": "^0.6.1",
@ -12766,14 +12720,12 @@
        "source-map": {
          "version": "0.6.1",
          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
        },
        "supports-color": {
          "version": "5.5.0",
          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
          "requires": {
            "has-flag": "^3.0.0"
          }
@ -12784,7 +12736,6 @@
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz",
      "integrity": "sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=",
-      "dev": true,
      "requires": {
        "css-selector-tokenizer": "^0.7.0",
        "postcss": "^6.0.1"
@ -12794,7 +12745,6 @@
          "version": "6.0.23",
          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-          "dev": true,
          "requires": {
            "chalk": "^2.4.1",
            "source-map": "^0.6.1",
@ -12804,14 +12754,12 @@
        "source-map": {
          "version": "0.6.1",
          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
        },
        "supports-color": {
          "version": "5.5.0",
          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
          "requires": {
            "has-flag": "^3.0.0"
          }
@ -12822,7 +12770,6 @@
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz",
      "integrity": "sha1-1upkmUx5+XtipytCb75gVqGUu5A=",
-      "dev": true,
      "requires": {
        "css-selector-tokenizer": "^0.7.0",
        "postcss": "^6.0.1"
@ -12832,7 +12779,6 @@
          "version": "6.0.23",
          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-          "dev": true,
          "requires": {
            "chalk": "^2.4.1",
            "source-map": "^0.6.1",
@ -12842,14 +12788,12 @@
        "source-map": {
          "version": "0.6.1",
          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
        },
        "supports-color": {
          "version": "5.5.0",
          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
          "requires": {
            "has-flag": "^3.0.0"
          }
@ -12860,7 +12804,6 @@
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz",
      "integrity": "sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=",
-      "dev": true,
      "requires": {
        "icss-replace-symbols": "^1.1.0",
        "postcss": "^6.0.1"
@ -12870,7 +12813,6 @@
          "version": "6.0.23",
          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-          "dev": true,
          "requires": {
            "chalk": "^2.4.1",
            "source-map": "^0.6.1",
@ -12880,14 +12822,12 @@
        "source-map": {
          "version": "0.6.1",
          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
        },
        "supports-color": {
          "version": "5.5.0",
          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
          "requires": {
            "has-flag": "^3.0.0"
          }
@ -12992,8 +12932,7 @@
    "postcss-value-parser": {
      "version": "3.3.1",
      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-      "dev": true
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
    },
    "postcss-zindex": {
      "version": "2.2.0",
@ -13059,7 +12998,8 @@
    "process": {
      "version": "0.11.10",
      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
+      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
+      "dev": true
    },
    "process-nextick-args": {
      "version": "2.0.1",
@ -13234,8 +13174,7 @@
    "punycode": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-      "dev": true
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
    },
    "q": {
      "version": "1.5.1",
@ -13886,8 +13825,7 @@
    "regenerate": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
-      "integrity": "sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==",
-      "dev": true
+      "integrity": "sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg=="
    },
    "regenerator-runtime": {
      "version": "0.11.1",
@ -13964,14 +13902,12 @@
    "regjsgen": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
-      "integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc=",
-      "dev": true
+      "integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc="
    },
    "regjsparser": {
      "version": "0.1.5",
      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz",
      "integrity": "sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=",
-      "dev": true,
      "requires": {
        "jsesc": "~0.5.0"
      },
@ -13979,8 +13915,7 @@
        "jsesc": {
          "version": "0.5.0",
          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
-          "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
-          "dev": true
+          "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0="
        }
      }
    },
@ -15099,8 +15034,7 @@
    "source-list-map": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
-      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==",
-      "dev": true
+      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw=="
    },
    "source-map": {
      "version": "0.5.7",
@ -15502,7 +15436,6 @@
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-      "dev": true,
      "requires": {
        "ansi-regex": "^2.0.0"
      }
@ -15571,8 +15504,7 @@
    "supports-color": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
-      "dev": true
+      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
    },
    "svgo": {
      "version": "0.7.2",
@ -16487,7 +16419,6 @@
      "version": "4.2.2",
      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
      "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
-      "dev": true,
      "requires": {
        "punycode": "^2.1.0"
      }
@ -16717,23 +16648,6 @@
      "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
      "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
    },
-    "vue-carousel": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/vue-carousel/-/vue-carousel-0.18.0.tgz",
-      "integrity": "sha512-a2zxh7QJioDxNMguqcuJ7TPbfgK5bGDaAXIia7NWxPAWsEvNE4ZtHgsGu40L5Aha4uyjmNKXvleB14QAXFoKig==",
-      "requires": {
-        "global": "^4.3.2",
-        "regenerator-runtime": "^0.12.1",
-        "vue": "^2.5.17"
-      },
-      "dependencies": {
-        "regenerator-runtime": {
-          "version": "0.12.1",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
-          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
-        }
-      }
-    },
    "vue-custom-scrollbar": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/vue-custom-scrollbar/-/vue-custom-scrollbar-1.1.0.tgz",
@ -16935,6 +16849,90 @@
        "vue-style-loader": "^4.1.0"
      }
    },
+    "vue-owl-carousel": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/vue-owl-carousel/-/vue-owl-carousel-2.0.3.tgz",
+      "integrity": "sha512-TRl6pnbL0HqlebOpEzbGbXL4KxJwlDGxAWeCREjNumvsjB5MXg875y+fkko/M3ML1nxJXIRHw1XWmXgxaQbang==",
+      "requires": {
+        "css-loader": "^1.0.0",
+        "file-loader": "^2.0.0",
+        "jquery": "^3.3.1",
+        "owl.carousel": "^2.3.4",
+        "style-loader": "^0.23.0"
+      },
+      "dependencies": {
+        "css-loader": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.1.tgz",
+          "integrity": "sha512-+ZHAZm/yqvJ2kDtPne3uX0C+Vr3Zn5jFn2N4HywtS5ujwvsVkyg0VArEXpl3BgczDA8anieki1FIzhchX4yrDw==",
+          "requires": {
+            "babel-code-frame": "^6.26.0",
+            "css-selector-tokenizer": "^0.7.0",
+            "icss-utils": "^2.1.0",
+            "loader-utils": "^1.0.2",
+            "lodash": "^4.17.11",
+            "postcss": "^6.0.23",
+            "postcss-modules-extract-imports": "^1.2.0",
+            "postcss-modules-local-by-default": "^1.2.0",
+            "postcss-modules-scope": "^1.1.0",
+            "postcss-modules-values": "^1.3.0",
+            "postcss-value-parser": "^3.3.0",
+            "source-list-map": "^2.0.0"
+          }
+        },
+        "file-loader": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-2.0.0.tgz",
+          "integrity": "sha512-YCsBfd1ZGCyonOKLxPiKPdu+8ld9HAaMEvJewzz+b2eTF7uL5Zm/HdBF6FjCrpCMRq25Mi0U1gl4pwn2TlH7hQ==",
+          "requires": {
+            "loader-utils": "^1.0.2",
+            "schema-utils": "^1.0.0"
+          }
+        },
+        "postcss": {
+          "version": "6.0.23",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.4.0"
+          }
+        },
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "style-loader": {
+          "version": "0.23.1",
+          "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.23.1.tgz",
+          "integrity": "sha512-XK+uv9kWwhZMZ1y7mysB+zoihsEj4wneFWAS5qoiLwzW0WzSqMrrsIy+a3zkQJq0ipFtBpX5W3MqyRIBF/WFGg==",
+          "requires": {
+            "loader-utils": "^1.1.0",
+            "schema-utils": "^1.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
    "vue-router": {
      "version": "3.0.7",
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.7.tgz",
--- a/package.json
+++ b/package.json
@ -62,9 +62,9 @@
    "normalize-scss": "^7.0.1",
    "roboto-slab-fontface-kit": "^1.0.2",
    "vue": "^2.5.16",
-    "vue-carousel": "^0.18.0",
    "vue-custom-scrollbar": "^1.1.0",
    "vue-electron": "^1.0.6",
+    "vue-owl-carousel": "^2.0.3",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1",
    "vuex-electron": "^1.0.0",
--- a/src/renderer/components/Badge.vue
+++ b/src/renderer/components/Badge.vue
@ -18,7 +18,7 @@ export default {
    // base styles
    width: 1rem
    height: 1rem
-    background-color: #336cfb
+    background-color: #0076F9
    display: flex
    justify-content: center
    align-items: center
--- a/src/renderer/components/Button.vue
+++ b/src/renderer/components/Button.vue
@ -29,13 +29,14 @@ export default {
  box-sizing: border-box
  outline: unset
  &--contained 
-    background-color: #336cfb
+    background-color: #0076F9
    color: white
    font-weight: 600
    &:hover
-      background-color: lighten(#336cfb,5)
+      background-color: lighten(#0076F9,5)
    &:focus,&:active
-      background-color: darken(#336cfb,5)
+      background-color: darken(#0076F9,5)
+
  svg
    width: 14px
    height: 14px
@ -53,26 +54,26 @@ export default {
      background-color: rgba(0,0,0,.15)

  &--raised 
-    background-color: #336cfb
+    background-color: #0076F9
    color: white
    font-weight: 600
-    box-shadow: 0 .3rem .7rem rgba(#336cfb , .5)
+    box-shadow: 0 .3rem .7rem rgba(#0076F9 , .5)
    &:hover
-      background-color: lighten(#336cfb,5)
+      background-color: lighten(#0076F9,5)
    &:focus,&:active
-      background-color: darken(#336cfb,5)
+      background-color: darken(#0076F9,5)
  &--outlined 
     background-color: white
-     border: 1px solid #336cfb
+     border: 1px solid #0076F9
     svg
-      fill: #336cfb
+      fill: #0076F9
     &:focus,&:active
-      background-color: darken(#336cfb,5)
+      background-color: darken(#0076F9,5)
      color: white
      svg
        fill: white
     &:hover
-      background-color: #336cfb
+      background-color: #0076F9
      color: white
      svg
        fill: white
--- a/src/renderer/components/ListItem.vue
+++ b/src/renderer/components/ListItem.vue
@ -0,0 +1,76 @@
+<template>
+  <li :class="{ 'active': active === true }" @click="toggleActive">
+      <div class="song">
+        <img :src="item.artwork" alt="Artwork">  
+        {{item.title}}
+      </div>
+
+      <div class="artist">
+        {{item.artist}}
+      </div>
+
+      <div class="duration">
+        {{item.duration}}
+      </div>
+  </li>
+</template>
+
+<script>
+
+export default {
+  name: 'ListItem',
+  props: ['item'],
+
+  data () {
+    return {
+      active: false
+    }
+  },
+
+  methods: {
+    toggleActive () {
+      this.active = !this.active
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped>
+li
+  width: 100%
+  list-style: none
+  display: flex
+  justify-content: space-between
+  margin-bottom: .6rem
+  padding: .4rem .8rem
+  border-radius: .5rem
+  
+  &.active
+    background-color: #0076F9
+    color: white
+    box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12)
+    
+  div.song
+    display: flex
+    align-items: center
+    flex: 1 0 50%
+    
+    img
+      width: 4rem
+      height: 4rem
+      margin-right: .6rem
+      border-radius: 50%
+
+  div.artist
+    display: flex
+    align-items: center
+    flex: 1 0 40%
+
+  div.duration
+    display: flex
+    align-items: center
+    justify-content: center
+    flex: 1 0 15%
+
+</style>
+
--- a/src/renderer/components/MusicBox.vue
+++ b/src/renderer/components/MusicBox.vue
@ -24,7 +24,8 @@ export default {

 <style scoped lang="sass">
 div.music-box
-    width: 140px
+    width: 8.4rem
+    margin: 0 1rem
    img
        border-radius: 100%
        width: 100%
--- a/src/renderer/layouts/HomePage.vue
+++ b/src/renderer/layouts/HomePage.vue
@ -1,18 +1,51 @@
 <template>
    <section>
      <ActionBar />
-      <div>
+      <div class="upper-row">
        <MusicRow :items='items' />
      </div>
+
+      <div class="middle-row">
+        <div class="grow-half">
+          <div class="favourite__title-container">
+            <legend>favourite songs</legend>
+            <Button variant="outlined" class="view-all">View All</Button>
+          </div>
+          
+          <div class="favourite__list-header">
+            <span class="song">
+              <p>songs</p>
+            </span>
+
+            <span class="artist">
+              <p>artist</p>
+            </span>
+
+            <span class="duration">
+              <p>duration</p>
+            </span>
+          </div>
+          <List >
+            <ListItem v-for="favourite in favourites" :key="favourite.id" :item="favourite"></ListItem>
+          </List>
+        </div>
+
+        <div class="grow-half"></div>
+      </div>
+
    </section>
 </template>

 <script>
 import ActionBar from './ActionBar'
 import MusicRow from './MusicRow'
+import List from './List'
+import ListItem from '../components/ListItem'
+import Button from '../components/Button'
+
 export default {
  name: 'HomePage',
-  components: { ActionBar, MusicRow },
+  components: { ActionBar, MusicRow, List, ListItem, Button },
  data: () => {
    return {
      items: [
@ -70,6 +103,29 @@ export default {
          artist: 'Juice WRLD',
          artwork: '/static/demo/clever.jpg'
        }
+      ],
+      favourites: [
+        {
+          id: 1,
+          title: 'Habiba',
+          artist: 'Oldasinus',
+          duration: '3:30',
+          artwork: '/static/demo/habiba.jpg'
+        },
+        {
+          id: 2,
+          title: 'Starboy',
+          artist: 'The Weeknd',
+          duration: '4:30',
+          artwork: '/static/demo/starboy.png'
+        },
+        {
+          id: 3,
+          title: 'Tilte',
+          artist: 'Juice WRLD',
+          duration: '5:30',
+          artwork: '/static/demo/clever.jpg'
+        }
      ]
    }
  }
@ -78,8 +134,53 @@ export default {

 <style lang="sass">
 section.page
-    padding: 1rem 2.5rem
-    overflow-x: hidden
-    .VueCarousel-wrapper
-        overflow: unset
+  padding: 1rem 2.5rem
+  overflow-x: hidden
+  .VueCarousel-wrapper
+     overflow: unset
+
+  .middle-row
+    display: flex
+
+  .grow-half
+    flex: 1 0 50% // deviding the space equally between two element
+
+.favourite
+  &__list-header
+    width: 100%
+    padding: 0.3rem .6rem
+    display: flex
+    justify-content: space-between
+
+    span.song
+        flex: 1 0 50%
+    span.artist
+      flex: 1 0 40%
+    span.duration
+      flex: 1 0 10%
+
+    p
+      color: lighten(grey , 20)
+      text-transform: capitalize
+      
+  &__title-container
+    display: flex
+    justify-content: space-between
+    align-items: center
+
+    legend
+      font-size: 2rem
+      font-family: 'Roboto Slab', serif        
+      margin: 20px 0px
+      text-transform: capitalize
+
+    .view-all
+      border-radius: 1rem
+      line-height: .1rem
+      padding: .9rem 1.3rem
+      font-weight: 300
+      text-transform: capitalize
+      display: flex
+      align-items: center
+      justify-content: center
 </style>
--- a/src/renderer/layouts/List.vue
+++ b/src/renderer/layouts/List.vue
@ -0,0 +1,24 @@
+<template>
+  <div>
+
+    <ul>
+      <slot></slot>
+    </ul>
+  </div>
+</template>
+
+<script>
+import FavouriteItem from '../components/ListItem'
+
+export default {
+  name: 'List',
+  props: ['favourites'],
+  components: { FavouriteItem }
+}
+</script>
+
+<style lang="sass" scoped>
+ul
+  margin: 0
+  padding: .3rem 0rem
+</style>
--- a/src/renderer/layouts/MusicRow.vue
+++ b/src/renderer/layouts/MusicRow.vue
@ -1,29 +1,31 @@
 <template>
-    <section>
-        <legend>Top music of the month</legend>
-        <Carousel class="carousel-custom" :paginationEnabled="false" :scrollPerPage="false" :perPageCustom="[[540, 3], [740, 4], [800, 3], [900, 4],  [1000, 4], [1200, 5] , [1300, 6]]">
-          <Slide v-for="item in items" :key="item.id">
-            <MusicBox  :item="item" />
-          </Slide>
-        </Carousel>
+    <section class="music-row">
+        <legend>Top Rated</legend>
+        <carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom">
+           <MusicBox v-for="item in items" :key="item.id" :item="item" />
+        </carousel>
    </section>
 </template>

 <script>
-import { Carousel, Slide } from 'vue-carousel'
 import MusicBox from '../components/MusicBox'
+import carousel from 'vue-owl-carousel'
+
 export default {
  name: 'MusicRow',
  props: ['items'],
-  components: { MusicBox, Carousel, Slide }
+  components: { MusicBox, carousel }
 }
 </script>

-<style scoped lang="sass">
+<style lang="sass">

-section
+section.music-row
    legend
        font-size: 2rem
        font-family: 'Roboto Slab', serif        
        margin: 20px 0px
+    .carousel-custom
+      .owl-stage-outer
+        overflow: unset
 </style>
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/src/renderer/layouts/PlayerBar.vue
@ -33,20 +33,54 @@ export default {
      container: '#visualizer',
      waveColor: '#c3c3c3',
      progressColor: '#336cfb',
+      cursorColor: 'rgba(0,0,0,0)',
      barWidth: 2,
      barHeight: 1,
      barGap: null,
      autoCenter: true,
-      height: 64,
-      responsive: true
+      responsive: true,
+      height: 64
    })
    this.wavesurfer.load('/static/demo/music.mp3')
    this.wavesurfer.on('ready', () => {
      this.duration = formatSeconds(this.getDuration())
+      this.wavesurfer.container.style['height'] = '100%'
+      console.log(this.wavesurfer.container)
    })
+    let currentWidth = 0
+    let hoverStatus = false
+    let hoverWidth = '0px'
+    let isSeek = false
    this.wavesurfer.on('audioprocess', (amount) => {
+      currentWidth = progressWave.style.width
+      if (hoverStatus && !isSeek) {
+        progressWave.style.width = hoverWidth
+      }
+      isSeek = false
      progress.innerHTML = formatSeconds(amount)
    })
+    let waves = this.wavesurfer.container.getElementsByTagName('wave')
+    let progressWave = waves[1]
+    let mainWave = waves[0]
+    mainWave.addEventListener('mouseenter', (e) => {
+      isSeek = false
+      hoverStatus = true
+    })
+    mainWave.addEventListener('mousemove', (e) => {
+      hoverWidth = e.offsetX + 'px'
+      progressWave.style.width = hoverWidth
+    })
+    mainWave.addEventListener('mouseout', (e) => {
+      hoverStatus = false
+      progressWave.style.width = currentWidth
+    })
+    this.wavesurfer.on('seek', (amount) => {
+      if (!this.playingStatus) {
+        this.wavesurfer.drawer.progress(amount)
+      }
+      isSeek = true
+      currentWidth = progressWave.style.width
+    })
  },
  data () {
    return {
@ -59,7 +93,6 @@ export default {
      let img = this.$el.getElementsByTagName('img')[0]
      color(img.src, (_, color) => {
        this.wavesurfer.setProgressColor(`#${color}`)
-        this.wavesurfer.setCursorColor(`#${color}`)
      })
    },
    play () {
@ -117,7 +150,22 @@ section.player
    .visualizer
        flex-grow: 1
        height: 64px
+        position: relative
+        div
+          position: absolute
+          left: 0
+          top: 0
+          bottom: 0
+          margin: auto
+          transition: height 500ms ease
+          height: 0px
+          width: 100%
+          &.shade
+              pointer-events: none
+              opacity: 0.2
        wave
            overflow-x: hidden !important
-            cursor: e-resize
+            cursor: pointer
+            transition: width 200ms ease
+            height: 100% !important
 </style>