diff --git a/packages/nameguard-react/src/components/RatedBox/RatedBox.tsx b/packages/nameguard-react/src/components/RatedBox/RatedBox.tsx
index 8a5641960..49762fc09 100644
--- a/packages/nameguard-react/src/components/RatedBox/RatedBox.tsx
+++ b/packages/nameguard-react/src/components/RatedBox/RatedBox.tsx
@@ -1,34 +1,7 @@
 import React, { ReactNode } from "react";
 import cc from "classcat";
 import { Rating } from "@namehash/nameguard";
-
-function borderColor(rating: Rating) {
-  switch (rating) {
-    case Rating.alert: {
-      return "border-red-200";
-    }
-    case Rating.pass: {
-      return "border-green-200";
-    }
-    case Rating.warn: {
-      return "border-yellow-200";
-    }
-  }
-}
-
-function shadowColor(rating: Rating) {
-  switch (rating) {
-    case Rating.alert: {
-      return "shadow-red-50";
-    }
-    case Rating.pass: {
-      return "shadow-green-50";
-    }
-    case Rating.warn: {
-      return "shadow-yellow-50";
-    }
-  }
-}
+import { ratingBorderColor, ratingShadowColor } from "../../utils/colors";
 
 type RatedBoxProps = {
   rating?: Rating;
@@ -36,8 +9,8 @@ type RatedBoxProps = {
 };
 
 export const RatedBox = ({ rating, children }: RatedBoxProps) => {
-  const border = borderColor(rating);
-  const shadow = shadowColor(rating);
+  const border = ratingBorderColor(rating);
+  const shadow = ratingShadowColor(rating);
 
   const wrapperClass = cc(["rounded-xl border shadow-xl", border, shadow]);
 
diff --git a/packages/nameguard-react/src/components/Report/Banner.tsx b/packages/nameguard-react/src/components/Report/Banner.tsx
index 777014a86..2baefd6ac 100644
--- a/packages/nameguard-react/src/components/Report/Banner.tsx
+++ b/packages/nameguard-react/src/components/Report/Banner.tsx
@@ -7,7 +7,7 @@ import { RatingIcon, RatingIconSize } from "./RatingIcon";
 import { RatedBox } from "../RatedBox/RatedBox";
 import { ReportChangesApplied } from "./ReportChangesApplied";
 import { ReportFormattedDisplayName } from "./ReportFormattedName";
-import { ratingTextColor } from "../../utils/text";
+import { ratingTextColor } from "../../utils/colors";
 
 type Props = {
   report?: NameGuardReport;
diff --git a/packages/nameguard-react/src/components/Report/LabelListItem.tsx b/packages/nameguard-react/src/components/Report/LabelListItem.tsx
index 633dd4730..238c073df 100644
--- a/packages/nameguard-react/src/components/Report/LabelListItem.tsx
+++ b/packages/nameguard-react/src/components/Report/LabelListItem.tsx
@@ -3,7 +3,7 @@ import React, { Fragment } from "react";
 import { GraphemeList } from "./GraphemeList";
 import { NoGraphemesWarning } from "./NoGraphemesWarning";
 import { CheckResultCode, NameGuardReport, Rating } from "@namehash/nameguard";
-import { checkResultCodeTextColor } from "../../utils/text";
+import { checkResultCodeTextColor } from "../../utils/colors";
 import { RatingIcon } from "./RatingIcon";
 
 type LabelListItemProps = {
diff --git a/packages/nameguard-react/src/components/Report/NoGraphemesWarning.tsx b/packages/nameguard-react/src/components/Report/NoGraphemesWarning.tsx
index 2c0d204b0..8b6ede8c3 100644
--- a/packages/nameguard-react/src/components/Report/NoGraphemesWarning.tsx
+++ b/packages/nameguard-react/src/components/Report/NoGraphemesWarning.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import cc from "classcat";
 import { CheckResultCodeIcon } from "./CheckResultCodeIcon";
 import { CheckResultCode } from "@namehash/nameguard";
-import { checkResultCodeTextColor } from "../../utils/text";
+import { checkResultCodeTextColor } from "../../utils/colors";
 import { ShieldExclamationIcon } from "@heroicons/react/20/solid";
 
 type Props = {
diff --git a/packages/nameguard-react/src/components/Report/Report.tsx b/packages/nameguard-react/src/components/Report/Report.tsx
index ac7aed0bb..9ea877c37 100644
--- a/packages/nameguard-react/src/components/Report/Report.tsx
+++ b/packages/nameguard-react/src/components/Report/Report.tsx
@@ -24,7 +24,7 @@ import { useGraphemeModalStore } from "../../stores/grapheme";
 import { ReportError } from "./ReportError";
 import { ExternalLinks } from "../ExternalLinks/ExternalLinks";
 import { Share } from "../Share/Share";
-import { ratingTextColor } from "../../utils/text";
+import { ratingTextColor } from "../../utils/colors";
 
 type ReportProps = {
   data?: NameGuardReport;
diff --git a/packages/nameguard-react/src/components/Report/ReportError.tsx b/packages/nameguard-react/src/components/Report/ReportError.tsx
index 6c83c85f1..fdaaf1e84 100644
--- a/packages/nameguard-react/src/components/Report/ReportError.tsx
+++ b/packages/nameguard-react/src/components/Report/ReportError.tsx
@@ -5,7 +5,7 @@ import { RatedBox } from "../RatedBox/RatedBox";
 
 import cc from "classcat";
 import { CheckResultCode } from "@namehash/nameguard";
-import { checkResultCodeTextColor } from "../../utils/text";
+import { checkResultCodeTextColor } from "../../utils/colors";
 
 export const ReportError = () => {
   const [isOnline, setIsOnline] = useState(navigator.onLine);
diff --git a/packages/nameguard-react/src/components/ReportIcon/index.tsx b/packages/nameguard-react/src/components/ReportIcon/index.tsx
index 15ed1768f..b8b9623ae 100644
--- a/packages/nameguard-react/src/components/ReportIcon/index.tsx
+++ b/packages/nameguard-react/src/components/ReportIcon/index.tsx
@@ -10,7 +10,7 @@ import cc from "classcat";
 import { Tooltip } from "../Tooltip/Tooltip";
 import { RatingLoadingIcon } from "../icons/RatingLoadingIcon";
 import { RatingIcon, RatingIconSize } from "../Report/RatingIcon";
-import { checkResultCodeTextColor, ratingTextColor } from "../../utils/text";
+import { checkResultCodeTextColor, ratingTextColor } from "../../utils/colors";
 import { ENSName } from "@namehash/ens-utils";
 import { UnknownReportIcon } from "../UnknownReportIcon/UnknownReportIcon";
 
diff --git a/packages/nameguard-react/src/components/Share/Share.tsx b/packages/nameguard-react/src/components/Share/Share.tsx
index 55bc2c0d5..274ee6ec2 100644
--- a/packages/nameguard-react/src/components/Share/Share.tsx
+++ b/packages/nameguard-react/src/components/Share/Share.tsx
@@ -11,7 +11,7 @@ import { toast } from "sonner";
 import cc from "classcat";
 import { Tooltip } from "../Tooltip/Tooltip";
 import { CheckResultCode } from "@namehash/nameguard";
-import { checkResultCodeTextColor } from "../../utils/text";
+import { checkResultCodeTextColor } from "../../utils/colors";
 
 type ShareProps = {
   name?: string;
diff --git a/packages/nameguard-react/src/components/icons/CheckResultCodeAlertIcon.tsx b/packages/nameguard-react/src/components/icons/CheckResultCodeAlertIcon.tsx
index 2de889fbc..88f31e04c 100644
--- a/packages/nameguard-react/src/components/icons/CheckResultCodeAlertIcon.tsx
+++ b/packages/nameguard-react/src/components/icons/CheckResultCodeAlertIcon.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import cc from "classcat";
-import { checkResultCodeTextColor } from "../../utils/text";
+import { checkResultCodeTextColor } from "../../utils/colors";
 import { CheckResultCode } from "@namehash/nameguard";
 
 export const CheckResultCodeAlertIcon = ({
diff --git a/packages/nameguard-react/src/components/icons/CheckResultCodeInfoIcon.tsx b/packages/nameguard-react/src/components/icons/CheckResultCodeInfoIcon.tsx
index ecc5b9c41..60123f53d 100644
--- a/packages/nameguard-react/src/components/icons/CheckResultCodeInfoIcon.tsx
+++ b/packages/nameguard-react/src/components/icons/CheckResultCodeInfoIcon.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import cc from "classcat";
-import { checkResultCodeTextColor } from "../../utils/text";
+import { checkResultCodeTextColor } from "../../utils/colors";
 import { CheckResultCode } from "@namehash/nameguard";
 
 export const CheckResultCodeInfoIcon = ({
diff --git a/packages/nameguard-react/src/components/icons/CheckResultCodePassIcon.tsx b/packages/nameguard-react/src/components/icons/CheckResultCodePassIcon.tsx
index 8c1cf4f44..7edd2dffd 100644
--- a/packages/nameguard-react/src/components/icons/CheckResultCodePassIcon.tsx
+++ b/packages/nameguard-react/src/components/icons/CheckResultCodePassIcon.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import cc from "classcat";
-import { checkResultCodeTextColor } from "../../utils/text";
+import { checkResultCodeTextColor } from "../../utils/colors";
 import { CheckResultCode } from "@namehash/nameguard";
 
 export const CheckResultCodePassIcon = ({
diff --git a/packages/nameguard-react/src/components/icons/CheckResultCodeSkipIcon.tsx b/packages/nameguard-react/src/components/icons/CheckResultCodeSkipIcon.tsx
index 33f8e4f28..e93f737f3 100644
--- a/packages/nameguard-react/src/components/icons/CheckResultCodeSkipIcon.tsx
+++ b/packages/nameguard-react/src/components/icons/CheckResultCodeSkipIcon.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import cc from "classcat";
-import { checkResultCodeTextColor } from "../../utils/text";
+import { checkResultCodeTextColor } from "../../utils/colors";
 import { CheckResultCode } from "@namehash/nameguard";
 
 export const CheckResultCodeSkipIcon = ({
diff --git a/packages/nameguard-react/src/components/icons/CheckResultCodeWarnIcon.tsx b/packages/nameguard-react/src/components/icons/CheckResultCodeWarnIcon.tsx
index a18f489bb..1686758e7 100644
--- a/packages/nameguard-react/src/components/icons/CheckResultCodeWarnIcon.tsx
+++ b/packages/nameguard-react/src/components/icons/CheckResultCodeWarnIcon.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import cc from "classcat";
-import { checkResultCodeTextColor } from "../../utils/text";
+import { checkResultCodeTextColor } from "../../utils/colors";
 import { CheckResultCode } from "@namehash/nameguard";
 
 export const CheckResultCodeWarnIcon = ({
diff --git a/packages/nameguard-react/src/index.ts b/packages/nameguard-react/src/index.ts
index 2ae2a634c..e3c1d58b5 100644
--- a/packages/nameguard-react/src/index.ts
+++ b/packages/nameguard-react/src/index.ts
@@ -1,4 +1,4 @@
-export { ratingTextColor, checkResultCodeTextColor } from "./utils/text";
+export { ratingTextColor, checkResultCodeTextColor } from "./utils/colors";
 export { Tooltip } from "./components/Tooltip/Tooltip";
 export { Search } from "./components/Search/Search";
 export { Report } from "./components/Report/Report";
diff --git a/packages/nameguard-react/src/utils/text.ts b/packages/nameguard-react/src/utils/colors.ts
similarity index 60%
rename from packages/nameguard-react/src/utils/text.ts
rename to packages/nameguard-react/src/utils/colors.ts
index f76ed4941..fbcbe6a3d 100644
--- a/packages/nameguard-react/src/utils/text.ts
+++ b/packages/nameguard-react/src/utils/colors.ts
@@ -4,62 +4,75 @@ export function checkResultCodeTextColor(
   check: CheckResultCode,
   isInteractive = false,
 ): string {
-  let color: string | null = null;
-
   switch (check) {
     case CheckResultCode.alert: {
-      color = isInteractive
+      return isInteractive
         ? "text-red-600 hover:text-red-700"
         : "text-red-600";
-      break;
     }
     case CheckResultCode.pass: {
-      color = isInteractive
+      return isInteractive
         ? "text-emerald-600 hover:text-emerald-800"
         : "text-emerald-600";
-      break;
     }
     case CheckResultCode.warn: {
-      color = isInteractive
+      return isInteractive
         ? "text-yellow-600 hover:text-yellow-700"
         : "text-yellow-600";
-      break;
     }
     case CheckResultCode.info:
     case CheckResultCode.skip: {
-      color = isInteractive
+      return isInteractive
         ? "text-gray-400 hover:text-gray-500"
         : "text-gray-400";
-      break;
     }
   }
-
-  return color;
 }
 
 export function ratingTextColor(rating: Rating, isInteractive = false): string {
-  let color: string | null = null;
-
   switch (rating) {
     case Rating.alert: {
-      color = isInteractive
+      return isInteractive
         ? "text-red-600 hover:text-red-700"
         : "text-red-600";
-      break;
     }
     case Rating.pass: {
-      color = isInteractive
+      return isInteractive
         ? "text-emerald-600 hover:text-emerald-800"
         : "text-emerald-600";
-      break;
     }
     case Rating.warn: {
-      color = isInteractive
+      return isInteractive
         ? "text-yellow-600 hover:text-yellow-700"
         : "text-yellow-600";
-      break;
     }
   }
+}
+
+export function ratingBorderColor(rating: Rating): string {
+  switch (rating) {
+    case Rating.alert: {
+      return "border-red-200";
+    }
+    case Rating.pass: {
+      return "border-green-200";
+    }
+    case Rating.warn: {
+      return "border-yellow-200";
+    }
+  }
+}
 
-  return color;
+export function ratingShadowColor(rating: Rating): string {
+  switch (rating) {
+    case Rating.alert: {
+      return "shadow-red-50";
+    }
+    case Rating.pass: {
+      return "shadow-green-50";
+    }
+    case Rating.warn: {
+      return "shadow-yellow-50";
+    }
+  }
 }