diff --git a/src/remote/components/remote-container.tsx b/src/remote/components/remote-container.tsx
index a178f2a70..4566cd82e 100644
--- a/src/remote/components/remote-container.tsx
+++ b/src/remote/components/remote-container.tsx
@@ -84,7 +84,7 @@ export const RemoteContainer = () => {
                     disabled={!id}
                     icon="favorite"
                     iconProps={{
-                        fill: song?.userFavorite ? 'favorite' : 'default',
+                        fill: song?.userFavorite ? 'primary' : 'default',
                     }}
                     onClick={() => {
                         if (!id) return;
diff --git a/src/renderer/components/item-card/item-card-controls.module.css b/src/renderer/components/item-card/item-card-controls.module.css
index a1834165b..8684fa9ac 100644
--- a/src/renderer/components/item-card/item-card-controls.module.css
+++ b/src/renderer/components/item-card/item-card-controls.module.css
@@ -143,6 +143,10 @@
         opacity: 1;
         transform: scale(0.9);
     }
+
+    svg {
+        stroke: rgb(255 255 255);
+    }
 }
 
 .user-data {
diff --git a/src/renderer/components/item-card/item-card-controls.tsx b/src/renderer/components/item-card/item-card-controls.tsx
index e5e20f087..75539bcd7 100644
--- a/src/renderer/components/item-card/item-card-controls.tsx
+++ b/src/renderer/components/item-card/item-card-controls.tsx
@@ -128,10 +128,10 @@ export const ItemCardControls = ({
                     icon="favorite"
                     iconProps={{
                         color: (item as { userFavorite: boolean }).userFavorite
-                            ? 'favorite'
+                            ? 'primary'
                             : 'default',
                         fill: (item as { userFavorite: boolean }).userFavorite
-                            ? 'favorite'
+                            ? 'primary'
                             : undefined,
                     }}
                     onClick={(e) => {
diff --git a/src/renderer/components/item-detail/item-detail.tsx b/src/renderer/components/item-detail/item-detail.tsx
index 91956f744..50a1a1f5f 100644
--- a/src/renderer/components/item-detail/item-detail.tsx
+++ b/src/renderer/components/item-detail/item-detail.tsx
@@ -109,7 +109,7 @@ export const ItemDetail = ({ data, itemType, onClick, withControls }: ItemDetail
                             <ActionIcon
                                 icon="favorite"
                                 iconProps={{
-                                    fill: data?.userFavorite ? 'favorite' : 'default',
+                                    fill: data?.userFavorite ? 'primary' : 'default',
                                 }}
                                 size="xs"
                             />
diff --git a/src/renderer/components/item-list/item-table-list/columns/favorite-column.tsx b/src/renderer/components/item-list/item-table-list/columns/favorite-column.tsx
index 53389e430..34e0cabb6 100644
--- a/src/renderer/components/item-list/item-table-list/columns/favorite-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/favorite-column.tsx
@@ -17,8 +17,8 @@ export const FavoriteColumn = (props: ItemTableListInnerColumn) => {
                     className={row ? undefined : 'hover-only'}
                     icon="favorite"
                     iconProps={{
-                        color: row ? 'favorite' : 'muted',
-                        fill: row ? 'favorite' : undefined,
+                        color: row ? 'primary' : 'muted',
+                        fill: row ? 'primary' : undefined,
                         size: 'md',
                     }}
                     onClick={(event) => {
diff --git a/src/renderer/features/albums/routes/dummy-album-detail-route.tsx b/src/renderer/features/albums/routes/dummy-album-detail-route.tsx
index 9f3ed90c2..634c313dd 100644
--- a/src/renderer/features/albums/routes/dummy-album-detail-route.tsx
+++ b/src/renderer/features/albums/routes/dummy-album-detail-route.tsx
@@ -168,7 +168,7 @@ const DummyAlbumDetailRoute = () => {
                             <ActionIcon
                                 icon="favorite"
                                 iconProps={{
-                                    fill: detailQuery?.data?.userFavorite ? 'favorite' : undefined,
+                                    fill: detailQuery?.data?.userFavorite ? 'primary' : undefined,
                                 }}
                                 loading={
                                     createFavoriteMutation.isPending ||
diff --git a/src/renderer/features/artists/components/album-artist-detail-content.tsx b/src/renderer/features/artists/components/album-artist-detail-content.tsx
index 8982faa7f..614729a24 100644
--- a/src/renderer/features/artists/components/album-artist-detail-content.tsx
+++ b/src/renderer/features/artists/components/album-artist-detail-content.tsx
@@ -235,7 +235,7 @@ export const AlbumArtistDetailContent = () => {
                         <ActionIcon
                             icon="favorite"
                             iconProps={{
-                                fill: detailQuery?.data?.userFavorite ? 'favorite' : undefined,
+                                fill: detailQuery?.data?.userFavorite ? 'primary' : undefined,
                             }}
                             onClick={handleFavorite}
                             size="lg"
diff --git a/src/renderer/features/player/components/mobile-fullscreen-player-metadata.tsx b/src/renderer/features/player/components/mobile-fullscreen-player-metadata.tsx
index a793b22cb..5630df629 100644
--- a/src/renderer/features/player/components/mobile-fullscreen-player-metadata.tsx
+++ b/src/renderer/features/player/components/mobile-fullscreen-player-metadata.tsx
@@ -69,7 +69,7 @@ export const MobileFullscreenPlayerMetadata = memo(
                     <ActionIcon
                         icon="favorite"
                         iconProps={{
-                            fill: isFavorite ? 'favorite' : undefined,
+                            fill: isFavorite ? 'primary' : undefined,
                             size: 'md',
                         }}
                         onClick={onToggleFavorite}
diff --git a/src/renderer/features/player/components/right-controls.tsx b/src/renderer/features/player/components/right-controls.tsx
index 83d3b5c77..9bf6400d4 100644
--- a/src/renderer/features/player/components/right-controls.tsx
+++ b/src/renderer/features/player/components/right-controls.tsx
@@ -209,7 +209,7 @@ export const RightControls = () => {
                 <ActionIcon
                     icon="favorite"
                     iconProps={{
-                        fill: currentSong?.userFavorite ? 'favorite' : undefined,
+                        fill: currentSong?.userFavorite ? 'primary' : undefined,
                         size: 'lg',
                     }}
                     onClick={(e) => {