diff --git a/src/components/layout/styled.tsx b/src/components/layout/styled.tsx
index acbec37..90a34d3 100644
--- a/src/components/layout/styled.tsx
+++ b/src/components/layout/styled.tsx
@@ -287,7 +287,11 @@ export const BlurredBackground = styled.img<{ expanded: boolean; image: string }
 `;
 
 export const GradientBackground = styled.div<{ $expanded: boolean; $color: string }>`
-  background: ${(props) => `linear-gradient(0deg, transparent 10%, ${props.$color} 100%)`};
+  background: ${(props) =>
+    `linear-gradient(0deg, transparent 10%, ${props.$color.replace(
+      ',1)',
+      `${props.theme.type === 'dark' ? ',0.2' : ',0.5'})`
+    )} 100%)`};
   top: 32px;
   left: ${(props) => (props.$expanded ? '165px' : '56px')};
   height: calc(100% - 130px);
diff --git a/src/components/library/ArtistView.tsx b/src/components/library/ArtistView.tsx
index f7d4975..a2f37c1 100644
--- a/src/components/library/ArtistView.tsx
+++ b/src/components/library/ArtistView.tsx
@@ -198,7 +198,7 @@ const ArtistView = ({ ...rest }: any) => {
             })
             .then((color) => {
               return setImageAverageColor({
-                color: color.rgba.replace(',1)', ',0.4)'),
+                color: color.rgba,
                 loaded: true,
               });
             })