diff --git a/src/components/ProfilePage/QuestCard/QuestCard.tsx b/src/components/ProfilePage/QuestCard/QuestCard.tsx
index 9b90113be..da6f684b7 100644
--- a/src/components/ProfilePage/QuestCard/QuestCard.tsx
+++ b/src/components/ProfilePage/QuestCard/QuestCard.tsx
@@ -253,6 +253,7 @@ export const QuestCard = ({ data }: QuestCardDataProps) => {
                           })
                         }
                         active={true}
+                        color={completed ? '#00B849' : undefined}
                       />
                     )}
                   </>
diff --git a/src/components/ProfilePage/QuestCard/XPRewardsInfo.tsx b/src/components/ProfilePage/QuestCard/XPRewardsInfo.tsx
index 7d6174aec..92f050898 100644
--- a/src/components/ProfilePage/QuestCard/XPRewardsInfo.tsx
+++ b/src/components/ProfilePage/QuestCard/XPRewardsInfo.tsx
@@ -9,6 +9,7 @@ interface XPRewardsInfoProps {
   tooltip?: string;
   active?: boolean;
   completed?: boolean;
+  color?: string;
 }
 
 export const XPRewardsInfo: React.FC<PropsWithChildren<XPRewardsInfoProps>> = ({
@@ -18,6 +19,7 @@ export const XPRewardsInfo: React.FC<PropsWithChildren<XPRewardsInfoProps>> = ({
   active,
   children,
   completed,
+  color,
 }) => {
   return (
     <Tooltip title={tooltip} placement="top" enterTouchDelay={0} arrow>
@@ -30,7 +32,7 @@ export const XPRewardsInfo: React.FC<PropsWithChildren<XPRewardsInfoProps>> = ({
         <XPDisplayBoxLabel variant="bodySmallStrong">
           {points}
         </XPDisplayBoxLabel>
-        {children ? children : <XPIcon />}
+        {children ? children : <XPIcon colorFill={color} />}
       </XPDisplayBox>
     </Tooltip>
   );
diff --git a/src/components/illustrations/XPIcon.tsx b/src/components/illustrations/XPIcon.tsx
index 40681251c..5784cffbf 100644
--- a/src/components/illustrations/XPIcon.tsx
+++ b/src/components/illustrations/XPIcon.tsx
@@ -1,4 +1,6 @@
-export const XPIcon = () => {
+export const XPIcon = ({ colorFill }: { colorFill?: string }) => {
+  const color = colorFill ?? '#31007A';
+
   return (
     <svg
       width="20"
@@ -7,7 +9,7 @@ export const XPIcon = () => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle cx="10" cy="10" r="10" fill="#31007A" />
+      <circle cx="10" cy="10" r="10" fill={color} />
       <path
         d="M5.18696 7.68696C4.94289 7.93104 4.94289 8.32677 5.18696 8.57085L6.62298 10.0069L5.18696 11.4429C4.94289 11.687 4.94289 12.0827 5.18696 12.3268C5.43104 12.5708 5.82677 12.5708 6.07085 12.3268L7.50686 10.8907L8.94286 12.3267C9.18694 12.5708 9.58267 12.5708 9.82674 12.3267C10.0708 12.0827 10.0708 11.6869 9.82674 11.4429L8.39075 10.0069L9.82674 8.57087C10.0708 8.32679 10.0708 7.93106 9.82674 7.68698C9.58267 7.4429 9.18694 7.4429 8.94286 7.68698L7.50686 9.12298L6.07085 7.68696C5.82677 7.44289 5.43104 7.44289 5.18696 7.68696Z"
         fill="white"