diff --git a/web/src/components/Card.jsx b/web/src/components/Card.jsx
index 83bb0cb53..32726ff22 100644
--- a/web/src/components/Card.jsx
+++ b/web/src/components/Card.jsx
@@ -9,6 +9,7 @@ export default function Card({
   className = '',
   role,
   fullHeight = false,
+  bgColorClass = 'bg-base-100',
 }) {
   const getGridClasses = () => {
     const breakpoints = [
@@ -29,7 +30,7 @@ export default function Card({
 
   return (
     <div
-      className={`card bg-base-100 shadow-xl ${gridClasses} ${fullHeight ? 'h-full' : ''} ${className}`}
+      className={`card ${bgColorClass} shadow-xl ${gridClasses} ${fullHeight ? 'h-full' : ''} ${className}`}
       role={role}
     >
       {title && (
diff --git a/web/src/pages/ProfileList/index.jsx b/web/src/pages/ProfileList/index.jsx
index 44fe54ecc..5afbcad7d 100644
--- a/web/src/pages/ProfileList/index.jsx
+++ b/web/src/pages/ProfileList/index.jsx
@@ -97,6 +97,9 @@ function ProfileCard({
   const chevronRotation = detailsCollapsed ? '' : 'rotate-90';
   const detailsSectionId = `profile-${data.id}-summary`;
 
+  // Favorite/Unfavorite profile background color
+  const bgProfileFavorite = data.favorite ? 'bg-primary/10' : 'bg-base-200';
+
   // Sum total duration from phases (in seconds)
   const totalDurationSeconds = Array.isArray(data?.phases)
     ? data.phases.reduce((sum, p) => sum + (Number.isFinite(p?.duration) ? p.duration : 0), 0)
@@ -193,7 +196,7 @@ function ProfileCard({
   }, [positionPopover]);
 
   return (
-    <Card sm={12} role='listitem'>
+    <Card sm={12} role='listitem' bgColorClass={bgProfileFavorite}>
       <div
         className='flex flex-row items-center'
         role='group'