diff --git a/src/components/productComponents/cosmeticComponent.tsx b/src/components/productComponents/cosmeticComponent.tsx
index 6423b04..c2f78ac 100644
--- a/src/components/productComponents/cosmeticComponent.tsx
+++ b/src/components/productComponents/cosmeticComponent.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { sendCosmeticDataRequest } from "../../content/apiSetting/sendCosmeticDataRequest";
 import Loading from "../Loading/component";
+import { useTheme } from "@src/contexts/ThemeContext";
 
 const INGREDIENT_KO_MAP: Record<string, string> = {
     avobenzone: "아보벤존",
@@ -27,26 +28,13 @@ const INGREDIENT_KO_MAP: Record<string, string> = {
 };
 
 export const CosmeticComponent = () => {
+    const { fontClasses, theme } = useTheme();
+    const isDarkMode = theme === "dark";
     const [detectedIngredients, setDetectedIngredients] = useState<string[]>(
         [],
     );
     const [isLoading, setIsLoading] = useState(true);
 
-    const commonTextStyle: React.CSSProperties = {
-        fontFamily: "KoddiUD OnGothic",
-        fontSize: "28px",
-        fontWeight: 700,
-        lineHeight: "150%",
-        textAlign: "left",
-    };
-    const commonTextStyle24: React.CSSProperties = {
-        fontFamily: "KoddiUD OnGothic",
-        fontSize: "24px",
-        fontWeight: 700,
-        lineHeight: "150%",
-        textAlign: "left",
-    };
-
     useEffect(() => {
         const fetchData = async () => {
             try {
@@ -115,24 +103,13 @@ export const CosmeticComponent = () => {
     if (isLoading) {
         return (
             <div
-                style={{
-                    padding: "16px",
-                    display: "flex",
-                    flexDirection: "column",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    height: "320px",
-                }}
+                className={`${fontClasses.fontCommon} ${isDarkMode ? "text-grayscale-100" : "text-grayscale-900"}`}
             >
-                <div style={{ width: "260px", height: "243px" }}>
+                <div>
                     <Loading />
                 </div>
                 <div
-                    style={{
-                        marginTop: "12px",
-                        ...commonTextStyle24,
-                        color: "#505156",
-                    }}
+                    className={`${fontClasses.fontCommon} ${isDarkMode ? "text-grayscale-100" : "text-grayscale-900"}`}
                 >
                     제품 정보를 분석 중입니다.
                 </div>
@@ -142,50 +119,39 @@ export const CosmeticComponent = () => {
 
     return (
         <div
-            style={{
-                padding: "16px",
-                backgroundColor: "#ffffff",
-                fontFamily: "KoddiUDOnGothic",
-            }}
+            className={`${fontClasses.fontCommon} ${isDarkMode ? "text-grayscale-100 bg-grayscale-900" : "text-grayscale-900 bg-white"}`}
         >
-            <p style={commonTextStyle}>[화장품] 성분 안내</p>
+            <p className={`${fontClasses.fontHeading} mb-[40px]`}>
+                [화장품] 성분 안내
+            </p>
+
             <div
-                style={{
-                    display: "flex",
-                    justifyContent: "space-between",
-                    marginBottom: "12px",
-                    ...commonTextStyle,
-                }}
+                className={`${fontClasses.fontCommon} ${isDarkMode ? "text-grayscale-100" : "text-grayscale-900"}`}
             >
-                {detectedIngredients.length > 0 && (
-                    <div
-                        style={{
-                            backgroundColor: "#F5F7FB",
-                            padding: "16px",
-                            marginTop: "12px",
-                            borderRadius: "12px",
-                            width: "100%",
-                        }}
-                    >
-                        {detectedIngredients.map((item, idx) => (
+                <span>검출된 성분</span>
+                <span>총 {detectedIngredients.length}개</span>
+            </div>
+
+            {detectedIngredients.length > 0 && (
+                <div
+                    className={`${isDarkMode ? "bg-grayscale-800" : "bg-grayscale-200"} px-6 py-[18px] rounded-[14px] mt-4`}
+                >
+                    {detectedIngredients.map((item, idx) => (
+                        <div key={idx}>
                             <div
-                                key={idx}
-                                style={{
-                                    display: "flex",
-                                    justifyContent: "space-between",
-                                    ...commonTextStyle24,
-                                    marginBottom:
-                                        idx < detectedIngredients.length - 1
-                                            ? "12px"
-                                            : "0",
-                                }}
+                                className={`${fontClasses.fontCommon} ${isDarkMode ? "text-grayscale-100" : "text-grayscale-900"}`}
                             >
                                 {item}
                             </div>
-                        ))}
-                    </div>
-                )}
-            </div>
+                            {idx !== detectedIngredients.length - 1 && (
+                                <div
+                                    className={`${isDarkMode ? "bg-grayscale-700" : "bg-grayscale-300"} my-[15px] w-full h-[2px]`}
+                                />
+                            )}
+                        </div>
+                    ))}
+                </div>
+            )}
         </div>
     );
 };
diff --git a/src/components/productComponents/couponComponent.tsx b/src/components/productComponents/couponComponent.tsx
deleted file mode 100644
index 150ed4c..0000000
--- a/src/components/productComponents/couponComponent.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { downloadAllCoupons } from "../../content/coupang/downloadAllCoupons";
-import { checkCouponStatus } from "../../content/coupang/checkCouponStatus";
-
-interface Props {
-    coupons: string[];
-}
-
-export const CouponComponent: React.FC<Props> = ({ coupons }) => {
-    const [downloaded, setDownloaded] = useState(false);
-    const [status, setStatus] = useState<
-        "none" | "downloadable" | "downloaded"
-    >("downloadable");
-
-    useEffect(() => {
-        const currentStatus = checkCouponStatus();
-        setStatus(currentStatus);
-    }, []);
-
-    useEffect(() => {
-        const listener = () => {
-            setDownloaded(true);
-            setStatus("downloaded");
-        };
-        window.addEventListener("voim-coupon-downloaded", listener);
-        return () =>
-            window.removeEventListener("voim-coupon-downloaded", listener);
-    }, []);
-
-    if (status === "none" || !coupons || coupons.length === 0) return null;
-
-    const commonTextStyle: React.CSSProperties = {
-        fontFamily: "KoddiUD OnGothic",
-        fontSize: "28px",
-        fontStyle: "normal",
-        fontWeight: 700,
-        lineHeight: "150%",
-        textAlign: "center",
-    };
-
-    const handleDownload = async () => {
-        await downloadAllCoupons();
-        setDownloaded(true);
-        setStatus("downloaded");
-    };
-
-    return (
-        <div>
-            {status === "downloadable" && !downloaded && (
-                <button
-                    onClick={handleDownload}
-                    style={{
-                        width: "100%",
-                        padding: "16px",
-                        backgroundColor: "#8914FF",
-                        color: "white",
-                        fontSize: "24px",
-                        fontWeight: "bold",
-                        border: "none",
-                        cursor: "pointer",
-                    }}
-                >
-                    전체 쿠폰 다운로드
-                </button>
-            )}
-        </div>
-    );
-};
diff --git a/src/components/productComponents/foodComponent.tsx b/src/components/productComponents/foodComponent.tsx
index 52588ee..c3efe1e 100644
--- a/src/components/productComponents/foodComponent.tsx
+++ b/src/components/productComponents/foodComponent.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { sendFoodDataRequest } from "../../content/apiSetting/sendFoodDataRequest";
 import Loading from "../Loading/component";
+import { useTheme } from "@src/contexts/ThemeContext";
 
 interface Nutrient {
     nutrientType: string;
@@ -45,6 +46,8 @@ const allergyNameMap: Record<string, string> = {
 };
 
 export const FoodComponent = () => {
+    const { fontClasses, theme } = useTheme();
+    const isDarkMode = theme === "dark";
     const [nutrientAlerts, setNutrientAlerts] = useState<Nutrient[] | null>(
         null,
     );
@@ -176,24 +179,17 @@ export const FoodComponent = () => {
     if (nutrientAlerts === null || allergyTypes === null) {
         return (
             <div
-                style={{
-                    padding: "16px",
-                    display: "flex",
-                    flexDirection: "column",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    height: "320px",
-                }}
+                className={`${fontClasses.fontCommon} ${
+                    isDarkMode ? "text-grayscale-100" : "text-grayscale-900"
+                }`}
             >
-                <div style={{ width: "260px", height: "243px" }}>
+                <div>
                     <Loading />
                 </div>
                 <div
-                    style={{
-                        marginTop: "12px",
-                        ...commonTextStyle24,
-                        color: "#505156",
-                    }}
+                    className={`${fontClasses.fontCommon} ${
+                        isDarkMode ? "text-grayscale-100" : "text-grayscale-900"
+                    }`}
                 >
                     제품 정보를 분석 중입니다.
                 </div>
@@ -203,92 +199,91 @@ export const FoodComponent = () => {
 
     return (
         <div
-            style={{
-                padding: "16px",
-                backgroundColor: "#ffffff",
-                fontFamily: "KoddiUDOnGothic",
-            }}
+            className={`${fontClasses.fontCommon}  ${
+                isDarkMode
+                    ? "text-grayscale-100 bg-grayscale-900"
+                    : "text-grayscale-900 bg-white"
+            }`}
         >
-            <p style={commonTextStyle}>식품 영양 및 알러지 성분</p>
-            <div style={{ margin: "16px 0" }} />
+            <p className={`${fontClasses.fontHeading} mb-[40px] `}>
+                식품 영양 및 알러지 성분
+            </p>
+
             <div
-                style={{
-                    display: "flex",
-                    justifyContent: "space-between",
-                    marginBottom: "12px",
-                    ...commonTextStyle,
-                }}
+                className={`${fontClasses.fontCommon} ${
+                    isDarkMode ? "text-grayscale-100" : "text-grayscale-900"
+                }`}
             >
                 <span>하루 기준 섭취량의 40% 넘는 영양성분</span>
                 <span>총 {nutrientAlerts.length}개</span>
             </div>
             {nutrientOpen && nutrientAlerts.length > 0 && (
                 <div
-                    style={{
-                        backgroundColor: "#F5F7FB",
-                        padding: "16px",
-                        marginTop: "12px",
-                        borderRadius: "12px",
-                    }}
+                    className={`${isDarkMode ? "bg-grayscale-800 " : "bg-grayscale-200 "} px-6 py-[18px] rounded-[14px] mt-4 mb-[30px]`}
                 >
                     {nutrientAlerts.map((item, idx) => (
-                        <div
-                            key={idx}
-                            style={{
-                                display: "flex",
-                                justifyContent: "space-between",
-                                ...commonTextStyle24,
-                                marginBottom:
-                                    idx < nutrientAlerts.length - 1
-                                        ? "12px"
-                                        : "0",
-                            }}
-                        >
-                            <span>
-                                {nutrientNameMap[item.nutrientType] ||
-                                    item.nutrientType}
-                            </span>
-                            <span>{item.percentage}%</span>
+                        <div key={idx}>
+                            <div
+                                className={`${fontClasses.fontCommon} ${
+                                    isDarkMode
+                                        ? "text-grayscale-100"
+                                        : "text-grayscale-900"
+                                }`}
+                            >
+                                <span className="mr-1">
+                                    {nutrientNameMap[item.nutrientType] ||
+                                        item.nutrientType}{" "}
+                                </span>
+                                <span>{item.percentage}%</span>
+                            </div>
+
+                            {idx !== nutrientAlerts.length - 1 && (
+                                <div
+                                    className={`${
+                                        isDarkMode
+                                            ? "bg-grayscale-700"
+                                            : "bg-grayscale-300"
+                                    } my-[15px] w-full h-[2px]`}
+                                />
+                            )}
                         </div>
                     ))}
                 </div>
             )}
 
             <div
-                style={{
-                    display: "flex",
-                    justifyContent: "space-between",
-                    marginBottom: "12px",
-                    fontWeight: "bold",
-                    ...commonTextStyle,
-                }}
+                className={` ${fontClasses.fontCommon} ${
+                    isDarkMode ? "text-grayscale-100" : "text-grayscale-900"
+                }`}
             >
                 <span>알레르기 유발 성분</span>
                 <span>총 {allergyTypes.length}개</span>
             </div>
             {allergyOpen && allergyTypes.length > 0 && (
                 <div
-                    style={{
-                        backgroundColor: "#F5F7FB",
-                        padding: "16px",
-                        marginTop: "12px",
-                        borderRadius: "12px",
-                    }}
+                    className={`${isDarkMode ? "bg-grayscale-800 " : "bg-grayscale-200 "} px-6 py-[18px] rounded-[14px] mt-4`}
                 >
                     {allergyTypes.map((item, idx) => (
-                        <div
-                            key={idx}
-                            style={{
-                                display: "flex",
-                                justifyContent: "space-between",
-                                ...commonTextStyle24,
-                                marginBottom:
-                                    idx < allergyTypes.length - 1
-                                        ? "12px"
-                                        : "0",
-                            }}
-                        >
-                            {allergyNameMap[item] || item}
+                        <div key={idx}>
+                            <div
+                                className={`${fontClasses.fontCommon} ${
+                                    isDarkMode
+                                        ? "text-grayscale-100"
+                                        : "text-grayscale-900"
+                                }`}
+                            >
+                                {allergyNameMap[item] || item}
+                            </div>
+
+                            {idx !== allergyTypes.length - 1 && (
+                                <div
+                                    className={`${
+                                        isDarkMode
+                                            ? "bg-grayscale-700"
+                                            : "bg-grayscale-300"
+                                    } my-[15px] w-full h-[2px]`}
+                                />
+                            )}
                         </div>
                     ))}
                 </div>
diff --git a/src/components/productComponents/healthComponent.tsx b/src/components/productComponents/healthComponent.tsx
index 5a00ec5..dc5f2a5 100644
--- a/src/components/productComponents/healthComponent.tsx
+++ b/src/components/productComponents/healthComponent.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { sendHealthDataRequest } from "../../content/apiSetting/sendHealthDataRequest";
 import Loading from "../Loading/component";
+import { useTheme } from "@src/contexts/ThemeContext";
 
 const healthEffectMap: Record<string, string> = {
     IMMUNE: "면역기능",
@@ -38,6 +39,8 @@ const healthEffectMap: Record<string, string> = {
 };
 
 export const HealthComponent = () => {
+    const { fontClasses, theme } = useTheme();
+    const isDarkMode = theme === "dark";
     const [healthTypes, setHealthTypes] = useState<string[] | null>(null);
 
     const commonTextStyle: React.CSSProperties = {
@@ -140,24 +143,13 @@ export const HealthComponent = () => {
     if (healthTypes === null) {
         return (
             <div
-                style={{
-                    padding: "16px",
-                    display: "flex",
-                    flexDirection: "column",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    height: "320px",
-                }}
+                className={`${fontClasses.fontCommon} ${isDarkMode ? "text-grayscale-100" : "text-grayscale-900"}`}
             >
-                <div style={{ width: "260px", height: "243px" }}>
+                <div>
                     <Loading />
                 </div>
                 <div
-                    style={{
-                        marginTop: "12px",
-                        ...commonTextStyle24,
-                        color: "#505156",
-                    }}
+                    className={`${fontClasses.fontCommon} ${isDarkMode ? "text-grayscale-100" : "text-grayscale-900"}`}
                 >
                     제품 정보를 분석 중입니다.
                 </div>
@@ -167,41 +159,35 @@ export const HealthComponent = () => {
 
     return (
         <div
-            style={{
-                padding: "16px",
-                backgroundColor: "#ffffff",
-                fontFamily: "KoddiUDOnGothic",
-            }}
+            className={`${fontClasses.fontCommon} ${isDarkMode ? "text-grayscale-100 bg-grayscale-900" : "text-grayscale-900 bg-white"}`}
         >
-            <p style={commonTextStyle}>
+            <p className={`${fontClasses.fontHeading} mb-[40px]`}>
                 해당 제품의 기능성 효능 {healthTypes.length}가지
             </p>
-            <div style={{ margin: "16px 0" }} />
+
+            <div
+                className={`${fontClasses.fontCommon} ${isDarkMode ? "text-grayscale-100" : "text-grayscale-900"}`}
+            >
+                <span>검출된 기능성 효능</span>
+                <span>총 {healthTypes.length}개</span>
+            </div>
+
             {healthTypes.length > 0 && (
                 <div
-                    style={{
-                        backgroundColor: "#F5F7FB",
-                        padding: "16px",
-                        marginTop: "12px",
-                        borderRadius: "12px",
-                    }}
+                    className={`${isDarkMode ? "bg-grayscale-800" : "bg-grayscale-200"} px-6 py-[18px] rounded-[14px] mt-4`}
                 >
                     {healthTypes.map((item, idx) => (
-                        <div
-                            key={idx}
-                            style={{
-                                backgroundColor: "#F5F7FB",
-                                ...commonTextStyle24,
-                                marginBottom:
-                                    idx < healthTypes.length - 1 ? "12px" : "0",
-                                borderBottom:
-                                    idx < healthTypes.length - 1
-                                        ? "1px solid #EAEDF4"
-                                        : "none",
-                                paddingBottom: "12px",
-                            }}
-                        >
-                            {healthEffectMap[item] || item}
+                        <div key={idx}>
+                            <div
+                                className={`${fontClasses.fontCommon} ${isDarkMode ? "text-grayscale-100" : "text-grayscale-900"}`}
+                            >
+                                {healthEffectMap[item] || item}
+                            </div>
+                            {idx !== healthTypes.length - 1 && (
+                                <div
+                                    className={`${isDarkMode ? "bg-grayscale-700" : "bg-grayscale-300"} my-[15px] w-full h-[2px]`}
+                                />
+                            )}
                         </div>
                     ))}
                 </div>