diff --git a/src/components/CoverArt.jsx b/src/components/CoverArt.jsx
index d8cc6a5..8a555b9 100644
--- a/src/components/CoverArt.jsx
+++ b/src/components/CoverArt.jsx
@@ -1,13 +1,15 @@
-import React, {Fragment, useEffect, useState} from "react";
+import React, {useEffect, useState} from "react";
 import {ReactComponent as DiscSVG} from "../svg/disc.svg";
 import {getDiscCoverArt, getReleaseCoverArt} from "../services/entity_service";
+import {ResponsiveImage} from './ResponsiveImage';
+
 import './CoverArt.scss';
 
 export const CoverArt = (props) => {
   const disc = props.disc
   const release = props.release
   const popup = props.popup
-  const [loading, setLoading] = useState(true);
+
   const [coverArt, setCoverArt] = useState(null)
 
   useEffect(() => {
@@ -22,28 +24,15 @@ export const CoverArt = (props) => {
     }
   }, [disc, release])
 
-  const handleLoad = () => setLoading(false)
-
   const handleClick = () => {
-    if(popup && coverArt && !loading){
+    if(popup && coverArt){
       window.open(coverArt.image)
     }
   }
 
-  if (coverArt) {
-    if (loading) {
-      return (
-        <Fragment>
-          <img src={coverArt.image} className={'coverart loading'} alt={props.alt}
-               onLoad={handleLoad}/>
-          <div className={'coverart pulsating'}/>
-        </Fragment>
-      )
-    } else {
-      return <img src={coverArt.image} className={'coverart'} alt={props.alt}
-                  onClick={handleClick}/>
-    }
-  } else {
-    return <DiscSVG className='coverart'/>
-  }
+  const image = coverArt ? coverArt.image : null;
+  const size = props.size ? props.size : 2;
+
+  return <ResponsiveImage image={image} alt={''} onClick={handleClick}
+    placeholder={<DiscSVG/>} size={size}/>
 }
diff --git a/src/components/CoverArt.scss b/src/components/CoverArt.scss
index 310f4cf..e69de29 100644
--- a/src/components/CoverArt.scss
+++ b/src/components/CoverArt.scss
@@ -1,11 +0,0 @@
-.coverart {
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-  outline: 1px var(--gray-2) solid;
-  cursor: pointer;
-
-  &.loading {
-    display: none;
-  }
-}
diff --git a/src/components/ResponsiveImage.jsx b/src/components/ResponsiveImage.jsx
index 46105bc..b9030e2 100644
--- a/src/components/ResponsiveImage.jsx
+++ b/src/components/ResponsiveImage.jsx
@@ -1,17 +1,22 @@
-import React, {useState} from 'react';
+import React, {Fragment, useState} from 'react';
 import './ResponsiveImage.scss';
 
 export const ResponsiveImage = (props) => {
   /* Link de la imagen */
   const image = props.image;
+
   /* Alt text de la imagen */
   const alt = props.alt;
+
   /* Accion al hacer click en la imagen */
   const handleClick = props.onClick;
+
   /* Placeholder a usar mientras la imagen carga */
-  const placeholder = props.placeholder ? React.cloneElement(props.placeholder, {className: 'responsive-image'}) : null;
+  const placeholder = props.placeholder ? React.cloneElement(props.placeholder, {className: 'responsive-image'}) : <Fragment/>;
+
   /* Tamaño de la imagen, de 1 a 6 */
   const size = props.size ? props.size : 1;
+
   /* Ratio de aspecto de la imagen 4by3, 1by1, 16by9, auto*/
   const ratio = props.ratio ? props.ratio : '1by1';
 
diff --git a/src/components/ResponsiveImage.scss b/src/components/ResponsiveImage.scss
index 0ee55b9..f1ec971 100644
--- a/src/components/ResponsiveImage.scss
+++ b/src/components/ResponsiveImage.scss
@@ -3,8 +3,8 @@
 
   &.size-1 {width: 100px;}
   &.size-2 {width: 200px;}
-  &.size-3 {width: 300px;}
-  &.size-4 {width: 400px;}
+  &.size-3 {width: 250px;}
+  &.size-4 {width: 300px;}
   &.size-5 {width: 500px;}
   &.size-6 {width: 600px;}
 
diff --git a/src/views/Artist.jsx b/src/views/Artist.jsx
index 06a58f8..2c672ce 100644
--- a/src/views/Artist.jsx
+++ b/src/views/Artist.jsx
@@ -22,7 +22,7 @@ const Discs = (props) => {
   if (discs) {
     if(discs.length > 0){
       const items = discs.map((disc) => ({
-        'cover': <CoverArt disc={disc}/>,
+        'cover': <CoverArt disc={disc} size={3}/>,
         'link': `/disc/${disc.id}`,
         'title': disc.title,
         'subtitle': disc.artist.name
diff --git a/src/views/Disc.jsx b/src/views/Disc.jsx
index 2e26230..df2b0d5 100644
--- a/src/views/Disc.jsx
+++ b/src/views/Disc.jsx
@@ -22,7 +22,7 @@ const Versions = (props) => {
   let versionsComponent = <EntityList placeholder={true} size={10} cover={true}/>;
   if(versions) {
     const items = versions.map((version) => ({
-      'cover': <CoverArt release={version}/>,
+      'cover': <CoverArt release={version} size={2}/>,
       'link': `/release/${version.id}`,
       'title': version.title,
       'subtitle': <Fragment>
@@ -69,7 +69,7 @@ const Disc = (props) => {
     return <Entity title={disc.title}
       subtitle={subtitle}
       buttonText='Agregar a mi lista'
-      cover={<CoverArt disc={disc} popup={true}/>}/>
+      cover={<CoverArt disc={disc} popup={true} size={4}/>}/>
   }else {
     return <Fragment></Fragment>
   }
diff --git a/src/views/Recomended.jsx b/src/views/Recomended.jsx
index f4c46e0..1e58f9b 100644
--- a/src/views/Recomended.jsx
+++ b/src/views/Recomended.jsx
@@ -47,7 +47,7 @@ const PopularDiscs = () => {
     return <EntityList placeholder={true} size={4}/>
   }else {
     const items = discs.map((disc) => ({
-      'cover': <CoverArt disc={disc}/>,
+      'cover': <CoverArt disc={disc} size={2}/>,
     'link': `/disc/${disc.id}`,
     'title': disc.title,
     'subtitle': disc.artist.name,
diff --git a/src/views/Release.jsx b/src/views/Release.jsx
index cc01c27..adc9471 100644
--- a/src/views/Release.jsx
+++ b/src/views/Release.jsx
@@ -54,7 +54,7 @@ const Release = (props) => {
     return <Entity title={release.title}
       subtitle={subtitle}
       buttonText='Agregar a mi lista'
-      cover={<CoverArt release={release} popup={true}/>}/>
+      cover={<CoverArt release={release} popup={true} size={4}/>}/>
   }else {
     return <Fragment></Fragment>
   }