diff --git a/src/renderer/features/now-playing/components/now-playing-header.tsx b/src/renderer/features/now-playing/components/now-playing-header.tsx
index cb86e440..1806a14c 100644
--- a/src/renderer/features/now-playing/components/now-playing-header.tsx
+++ b/src/renderer/features/now-playing/components/now-playing-header.tsx
@@ -1,50 +1,13 @@
-import { useEffect, useState } from 'react';
 import { Group } from '@mantine/core';
-import { FastAverageColor } from 'fast-average-color';
 import { PageHeader, TextTitle } from '/@/renderer/components';
-import { useCurrentSong } from '/@/renderer/store';
-import { getHeaderColor } from '/@/renderer/utils';
-import { useTheme } from '/@/renderer/hooks';
 
 export const NowPlayingHeader = () => {
-  const [headerColor, setHeaderColor] = useState({ isDark: false, value: 'rgba(0, 0, 0, 0)' });
-  const currentSong = useCurrentSong();
-  const theme = useTheme();
-
-  useEffect(() => {
-    const fac = new FastAverageColor();
-    const url = currentSong?.imageUrl;
-
-    if (url) {
-      fac
-        .getColorAsync(currentSong?.imageUrl, {
-          algorithm: 'simple',
-          ignoredColor: [
-            [255, 255, 255, 255], // White
-            [0, 0, 0, 255], // Black
-          ],
-          mode: 'precision',
-        })
-        .then((color) => {
-          const isDark = color.isDark;
-          return setHeaderColor({
-            isDark,
-            value: getHeaderColor(color.rgb, theme === 'dark' ? 0.5 : 0.8),
-          });
-        })
-        .catch((e) => {
-          console.log(e);
-        });
-    }
-
-    return () => {
-      fac.destroy();
-    };
-  }, [currentSong?.imageUrl, theme]);
+  // const currentSong = useCurrentSong();
+  // const theme = useTheme();
 
   return (
-    <PageHeader backgroundColor={headerColor.value}>
-      <Group>
+    <PageHeader>
+      <Group p="1rem">
         <TextTitle
           fw="bold"
           order={3}