diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/NPSSummary.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/NPSSummary.tsx
index e4755e7ff8..cdf846088e 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/NPSSummary.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/NPSSummary.tsx
@@ -78,7 +78,7 @@ export const NPSSummary = ({ questionSummary, survey, setFilter }: NPSSummaryPro
                 <div className="flex items-center space-x-2 rounded-lg bg-slate-100 p-2">
                   <SatisfactionSmiley percentage={questionSummary.promoters.percentage} />
                   <div>
-                    % {t("environments.surveys.summary.promoters")}:{" "}
+                    {t("environments.surveys.summary.promoters")}:{" "}
                     {convertFloatToNDecimal(questionSummary.promoters.percentage, 2)}%
                   </div>
                 </div>
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SatisfactionSmiley.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SatisfactionSmiley.tsx
index 363558dd74..6b0de98dbe 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SatisfactionSmiley.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SatisfactionSmiley.tsx
@@ -3,137 +3,16 @@ interface SatisfactionSmileyProps {
   className?: string;
 }
 
-const TiredFace = ({ className }: { className?: string }) => (
-  <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <g id="line">
-      <circle
-        cx="36"
-        cy="36"
-        r="23"
-        fill="currentColor"
-        stroke="currentColor"
-        strokeMiterlimit="10"
-        strokeWidth="2"
-      />
-      <path
-        fill="none"
-        stroke="white"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeMiterlimit="10"
-        strokeWidth="2"
-        d="m21.88 23.92c5.102-0.06134 7.273-1.882 8.383-3.346"
-      />
-      <path
-        fill="white"
-        stroke="white"
-        strokeMiterlimit="10"
-        strokeWidth="2"
-        d="m46.24 47.56c0-2.592-2.867-7.121-10.25-6.93-6.974 0.1812-10.22 4.518-10.22 7.111s4.271-1.611 10.05-1.492c6.317 0.13 10.43 3.903 10.43 1.311z"
-      />
-      <path
-        fill="none"
-        stroke="white"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeMiterlimit="10"
-        strokeWidth="2"
-        d="m23.16 28.47c5.215 1.438 5.603 0.9096 8.204 1.207 1.068 0.1221-2.03 2.67-7.282 4.397"
-      />
-      <path
-        fill="none"
-        stroke="white"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeMiterlimit="10"
-        strokeWidth="2"
-        d="m50.12 23.92c-5.102-0.06134-7.273-1.882-8.383-3.346"
-      />
-      <path
-        fill="none"
-        stroke="white"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeMiterlimit="10"
-        strokeWidth="2"
-        d="m48.84 28.47c-5.215 1.438-5.603 0.9096-8.204 1.207-1.068 0.1221 2.03 2.67 7.282 4.397"
-      />
-    </g>
-  </svg>
-);
-
-const SlightlySmilingFace = ({ className }: { className?: string }) => (
-  <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <g id="line">
-      <circle
-        cx="36"
-        cy="36"
-        r="23"
-        fill="currentColor"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-      />
-      <path
-        fill="none"
-        stroke="white"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-        d="M45.8149,44.9293 c-2.8995,1.6362-6.2482,2.5699-9.8149,2.5699s-6.9153-0.9336-9.8149-2.5699"
-      />
-      <path
-        fill="white"
-        d="M30,31c0,1.6568-1.3448,3-3,3c-1.6553,0-3-1.3433-3-3c0-1.6552,1.3447-3,3-3C28.6552,28,30,29.3448,30,31"
-      />
-      <path
-        fill="white"
-        d="M48,31c0,1.6568-1.3447,3-3,3s-3-1.3433-3-3c0-1.6552,1.3447-3,3-3S48,29.3448,48,31"
-      />
-    </g>
-  </svg>
-);
-
-const SmilingFace = ({ className }: { className?: string }) => (
-  <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <g id="line">
-      <circle
-        cx="36"
-        cy="36"
-        r="23"
-        fill="currentColor"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-      />
-      <path
-        fill="none"
-        stroke="white"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-        d="M45.8149,44.9293 c-2.8995,1.6362-6.2482,2.5699-9.8149,2.5699s-6.9153-0.9336-9.8149-2.5699"
-      />
-      <path
-        fill="white"
-        d="M30,31c0,1.6568-1.3448,3-3,3c-1.6553,0-3-1.3433-3-3c0-1.6552,1.3447-3,3-3C28.6552,28,30,29.3448,30,31"
-      />
-      <path
-        fill="white"
-        d="M48,31c0,1.6568-1.3447,3-3,3s-3-1.3433-3-3c0-1.6552,1.3447-3,3-3S48,29.3448,48,31"
-      />
-    </g>
-  </svg>
-);
-
 export const SatisfactionSmiley = ({ percentage, className }: SatisfactionSmileyProps) => {
+  let colorClass = "";
+
   if (percentage > 80) {
-    return <SmilingFace className={`h-4 w-4 text-emerald-500 ${className || ""}`} />;
+    colorClass = "bg-emerald-500";
   } else if (percentage >= 55) {
-    return <SlightlySmilingFace className={`h-4 w-4 text-orange-500 ${className || ""}`} />;
+    colorClass = "bg-orange-500";
   } else {
-    return <TiredFace className={`h-4 w-4 text-rose-500 ${className || ""}`} />;
+    colorClass = "bg-rose-500";
   }
+
+  return <div className={`h-3 w-3 rounded-full ${colorClass} ${className || ""}`} />;
 };