diff --git a/client/src/components/ui/score-card.tsx b/client/src/components/ui/score-card.tsx
index 68525997..e01f7587 100644
--- a/client/src/components/ui/score-card.tsx
+++ b/client/src/components/ui/score-card.tsx
@@ -3,28 +3,26 @@ import { PROJECT_SCORE } from "@shared/entities/project-score.enum";
 import { cn } from "@/lib/utils";
 
 interface ScoreIndicatorProps {
+  value: PROJECT_SCORE;
   className?: string;
-  children?: React.ReactNode;
 }
 
-export const DEFAULT_BG_CLASSES: Record<PROJECT_SCORE, string> = {
+const DEFAULT_BG_CLASSES: Record<PROJECT_SCORE, string> = {
   [PROJECT_SCORE.HIGH]: "bg-ramps-green",
   [PROJECT_SCORE.MEDIUM]: "bg-ramps-yellow",
   [PROJECT_SCORE.LOW]: "bg-ramps-red",
 };
 
-export const ScoreIndicator = ({
-  children,
-  className = "",
-}: ScoreIndicatorProps) => {
+export const ScoreIndicator = ({ value, className }: ScoreIndicatorProps) => {
   return (
     <div
       className={cn(
-        "flex h-10 items-center justify-center font-normal capitalize text-deep-ocean",
+        "flex h-10 items-center justify-center text-sm font-normal capitalize text-deep-ocean",
+        DEFAULT_BG_CLASSES[value],
         className,
       )}
     >
-      {children}
+      {value}
     </div>
   );
 };
diff --git a/client/src/containers/overview/project-details/score-card-ratings/index.tsx b/client/src/containers/overview/project-details/score-card-ratings/index.tsx
index f602c794..0956882a 100644
--- a/client/src/containers/overview/project-details/score-card-ratings/index.tsx
+++ b/client/src/containers/overview/project-details/score-card-ratings/index.tsx
@@ -1,12 +1,14 @@
 import { FC } from "react";
 
 import { Scorecard } from "@shared/dtos/projects/project-scorecard.dto";
+import { PROJECT_SCORE } from "@shared/entities/project-score.enum";
 
 import { useFeatureFlags } from "@/hooks/use-feature-flags";
 
 import CompareButton from "@/containers/overview/project-details/compare-button";
 
 import { Label } from "@/components/ui/label";
+import { ScoreIndicator } from "@/components/ui/score-card";
 import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
 
 const scoreCardMap = {
@@ -52,7 +54,9 @@ const ScoreCardRatings: FC<{ data?: Scorecard }> = ({ data }) => {
                 <TableCell className="py-2 pl-4 text-sm font-normal text-big-stone-200">
                   {scoreCardMap[key as keyof Scorecard]}
                 </TableCell>
-                <TableCell className="w-[240px] font-medium">{value}</TableCell>
+                <TableCell className="w-[240px] p-0 font-medium">
+                  <ScoreIndicator value={value as PROJECT_SCORE} />
+                </TableCell>
               </TableRow>
             ))}
         </TableBody>
diff --git a/client/src/containers/overview/table/view/overview/columns.tsx b/client/src/containers/overview/table/view/overview/columns.tsx
index 4b4670d1..a99608a8 100644
--- a/client/src/containers/overview/table/view/overview/columns.tsx
+++ b/client/src/containers/overview/table/view/overview/columns.tsx
@@ -11,7 +11,7 @@ import { filtersSchema } from "@/app/(overview)/url-store";
 import { TableStateWithMaximums } from "@/containers/overview/table/view/overview";
 
 import SingleStackedBarChart from "@/components/ui/bar-chart/single-stacked-bar-chart";
-import { DEFAULT_BG_CLASSES, ScoreIndicator } from "@/components/ui/score-card";
+import { ScoreIndicator } from "@/components/ui/score-card";
 
 const columnHelper = createColumnHelper<
   Partial<ProjectType> & {
@@ -78,11 +78,7 @@ export const columns = (filters: z.infer<typeof filtersSchema>) => [
       if (value === undefined) {
         return "-";
       }
-      return (
-        <ScoreIndicator className={DEFAULT_BG_CLASSES[value as PROJECT_SCORE]}>
-          {value}
-        </ScoreIndicator>
-      );
+      return <ScoreIndicator value={value as PROJECT_SCORE} />;
     },
   }),
   columnHelper.accessor(
diff --git a/client/src/containers/overview/table/view/scorecard-prioritization/columns.tsx b/client/src/containers/overview/table/view/scorecard-prioritization/columns.tsx
index ddf0e834..a0657496 100644
--- a/client/src/containers/overview/table/view/scorecard-prioritization/columns.tsx
+++ b/client/src/containers/overview/table/view/scorecard-prioritization/columns.tsx
@@ -2,9 +2,7 @@ import { PROJECT_SCORE } from "@shared/entities/project-score.enum";
 import { ProjectScorecardView } from "@shared/entities/project-scorecard.view";
 import { createColumnHelper } from "@tanstack/react-table";
 
-import { cn } from "@/lib/utils";
-
-import { ScoreIndicator, DEFAULT_BG_CLASSES } from "@/components/ui/score-card";
+import { ScoreIndicator } from "@/components/ui/score-card";
 
 const columnHelper = createColumnHelper<ProjectScorecardView>();
 
@@ -18,15 +16,9 @@ export const TABLE_COLUMNS = [
     header: () => <span>Financial feasibility</span>,
     cell: (props) => (
       <ScoreIndicator
-        className={cn(
-          "min-h-[56px]",
-          DEFAULT_BG_CLASSES[
-            props.row.original.financialFeasibility as PROJECT_SCORE
-          ],
-        )}
-      >
-        {props.row.original.financialFeasibility}
-      </ScoreIndicator>
+        value={props.row.original.financialFeasibility as PROJECT_SCORE}
+        className="min-h-[56px]"
+      />
     ),
   }),
   columnHelper.accessor("legalFeasibility", {
@@ -34,15 +26,9 @@ export const TABLE_COLUMNS = [
     header: () => <span>Legal Feasibility</span>,
     cell: (props) => (
       <ScoreIndicator
-        className={cn(
-          "min-h-[56px]",
-          DEFAULT_BG_CLASSES[
-            props.row.original.legalFeasibility as PROJECT_SCORE
-          ],
-        )}
-      >
-        {props.row.original.legalFeasibility}
-      </ScoreIndicator>
+        value={props.row.original.legalFeasibility as PROJECT_SCORE}
+        className="min-h-[56px]"
+      />
     ),
   }),
   columnHelper.accessor("implementationFeasibility", {
@@ -50,15 +36,9 @@ export const TABLE_COLUMNS = [
     header: () => <span>Implementation feasibility</span>,
     cell: (props) => (
       <ScoreIndicator
-        className={cn(
-          "min-h-[56px]",
-          DEFAULT_BG_CLASSES[
-            props.row.original.implementationFeasibility as PROJECT_SCORE
-          ],
-        )}
-      >
-        {props.row.original.implementationFeasibility}
-      </ScoreIndicator>
+        value={props.row.original.implementationFeasibility as PROJECT_SCORE}
+        className="min-h-[56px]"
+      />
     ),
   }),
   columnHelper.accessor("socialFeasibility", {
@@ -66,15 +46,9 @@ export const TABLE_COLUMNS = [
     header: () => <span>Social Feasibility</span>,
     cell: (props) => (
       <ScoreIndicator
-        className={cn(
-          "min-h-[56px]",
-          DEFAULT_BG_CLASSES[
-            props.row.original.socialFeasibility as PROJECT_SCORE
-          ],
-        )}
-      >
-        {props.row.original.socialFeasibility}
-      </ScoreIndicator>
+        value={props.row.original.socialFeasibility as PROJECT_SCORE}
+        className="min-h-[56px]"
+      />
     ),
   }),
   columnHelper.accessor("securityRating", {
@@ -82,15 +56,9 @@ export const TABLE_COLUMNS = [
     header: () => <span>Security Rating</span>,
     cell: (props) => (
       <ScoreIndicator
-        className={cn(
-          "min-h-[56px]",
-          DEFAULT_BG_CLASSES[
-            props.row.original.securityRating as PROJECT_SCORE
-          ],
-        )}
-      >
-        {props.row.original.securityRating}
-      </ScoreIndicator>
+        value={props.row.original.securityRating as PROJECT_SCORE}
+        className="min-h-[56px]"
+      />
     ),
   }),
   columnHelper.accessor("availabilityOfExperiencedLabor", {
@@ -98,15 +66,11 @@ export const TABLE_COLUMNS = [
     header: () => <span>Availability of experienced labor</span>,
     cell: (props) => (
       <ScoreIndicator
-        className={cn(
-          "min-h-[56px]",
-          DEFAULT_BG_CLASSES[
-            props.row.original.availabilityOfExperiencedLabor as PROJECT_SCORE
-          ],
-        )}
-      >
-        {props.row.original.availabilityOfExperiencedLabor}
-      </ScoreIndicator>
+        value={
+          props.row.original.availabilityOfExperiencedLabor as PROJECT_SCORE
+        }
+        className="min-h-[56px]"
+      />
     ),
   }),
   columnHelper.accessor("availabilityOfAlternatingFunding", {
@@ -114,15 +78,11 @@ export const TABLE_COLUMNS = [
     header: () => <span>Availability of alternating funding</span>,
     cell: (props) => (
       <ScoreIndicator
-        className={cn(
-          "min-h-[56px]",
-          DEFAULT_BG_CLASSES[
-            props.row.original.availabilityOfAlternatingFunding as PROJECT_SCORE
-          ],
-        )}
-      >
-        {props.row.original.availabilityOfAlternatingFunding}
-      </ScoreIndicator>
+        value={
+          props.row.original.availabilityOfAlternatingFunding as PROJECT_SCORE
+        }
+        className="min-h-[56px]"
+      />
     ),
   }),
   columnHelper.accessor("coastalProtectionBenefits", {
@@ -130,15 +90,9 @@ export const TABLE_COLUMNS = [
     header: () => <span>Coastal Protection benefit</span>,
     cell: (props) => (
       <ScoreIndicator
-        className={cn(
-          "min-h-[56px]",
-          DEFAULT_BG_CLASSES[
-            props.row.original.coastalProtectionBenefits as PROJECT_SCORE
-          ],
-        )}
-      >
-        {props.row.original.coastalProtectionBenefits}
-      </ScoreIndicator>
+        value={props.row.original.coastalProtectionBenefits as PROJECT_SCORE}
+        className="min-h-[56px]"
+      />
     ),
   }),
   columnHelper.accessor("biodiversityBenefit", {
@@ -146,15 +100,9 @@ export const TABLE_COLUMNS = [
     header: () => <span>Biodiversity benefit</span>,
     cell: (props) => (
       <ScoreIndicator
-        className={cn(
-          "min-h-[56px]",
-          DEFAULT_BG_CLASSES[
-            props.row.original.biodiversityBenefit as PROJECT_SCORE
-          ],
-        )}
-      >
-        {props.row.original.biodiversityBenefit}
-      </ScoreIndicator>
+        value={props.row.original.biodiversityBenefit as PROJECT_SCORE}
+        className="min-h-[56px]"
+      />
     ),
   }),
 ];