diff --git a/app/pricing/page.tsx b/app/pricing/page.tsx
index a733491..0418f22 100644
--- a/app/pricing/page.tsx
+++ b/app/pricing/page.tsx
@@ -16,37 +16,6 @@ import { DashboardLayout } from "@/components/layout/dashboard-layout";
 
 export default function PricingPage() {
 
-  useEffect(() => {
-    // 获取当前窗口尺寸
-    const currentWidth = window.innerWidth;
-    const currentHeight = window.innerHeight;
-    // 计算缩放比例 (1920x1080)
-    const wScale = currentWidth / 1920;
-    const hScale = currentHeight / 1080;
-
-    // 检查app节点是否存在
-    const pricingPage = document.getElementById("pricing-page");
-    if (!pricingPage) {
-      console.error("未找到app节点");
-      return;
-    }
-    // setHPading((hScale || 1)  * 10);
-    // 创建样式元素
-    const style = document.createElement("style");
-
-    // 设置CSS样式
-    style.textContent = `
-        #pricing-page {
-           transform-origin: top left;
-           transform: scale(${wScale}, ${hScale});
-           width: 1920px;
-           height: 1080px;
-         }
-     `;
-
-    // 将样式添加到head
-    document.head.appendChild(style);
-  }, []);
   return (
     <DashboardLayout>
     <div className="w-full h-full overflow-y-auto bg-black text-white pb-[10rem]" id="pricing-page">
@@ -135,95 +104,341 @@ function HomeModule5() {
   };
   return (
     <div
-      data-alt="core-value-section"
-      className="home-module5 h-[1300px] relative flex flex-col items-center justify-center w-full  bg-black snap-start"
+    data-alt="core-value-section"
+    className="home-module5 relative flex flex-col items-center justify-center w-full bg-black snap-start
+               /* 移动端适配 */
+               min-h-[100vh] py-8
+               /* 平板适配 */
+               sm:min-h-[100vh] sm:py-12
+               /* 小屏笔记本适配 (13-15寸) */
+               md:h-[1000px] md:py-16
+               /* 大屏笔记本适配 (16-17寸) */
+               lg:h-[1100px] lg:py-20
+               /* 桌面端适配 (21-24寸) */
+               xl:h-[1200px] xl:py-24
+               /* 大屏显示器适配 (27寸+) */
+               2xl:h-[1500px] 2xl:py-32"
+  >
+    <div
+      data-alt="core-value-content"
+      className="center z-10 flex flex-col items-center
+                 /* 移动端间距 */
+                 mb-8 px-4
+                 /* 平板间距 */
+                 sm:mb-12 sm:px-6
+                 /* 小屏笔记本间距 */
+                 md:mb-[4rem] md:px-8
+                 /* 大屏笔记本间距 */
+                 lg:mb-[4rem] lg:px-12
+                 /* 桌面端间距 */
+                 xl:mb-[4rem] xl:px-16
+                 /* 大屏显示器间距 */
+                 2xl:mb-[4rem] 2xl:px-20"
     >
-      <div
-        data-alt="core-value-content"
-        className="center z-10 flex flex-col items-center  mb-[4rem]"
+      <h2
+        className="text-white font-normal text-center
+                     /* 移动端字体 */
+                     text-[1.5rem] leading-[110%] mb-4
+                     /* 平板字体 */
+                     sm:text-[2rem] sm:leading-[110%] sm:mb-6
+                     /* 小屏笔记本字体 */
+                     md:text-[2.5rem] md:leading-[110%] md:mb-[1.5rem]
+                     /* 大屏笔记本字体 */
+                     lg:text-[3rem] lg:leading-[110%] lg:mb-[1.5rem]
+                     /* 桌面端字体 */
+                     xl:text-[3.375rem] xl:leading-[110%] xl:mb-[1.5rem]
+                     /* 大屏显示器字体 */
+                     2xl:text-[3.5rem] 2xl:leading-[110%] 2xl:mb-[1.5rem]"
       >
-        <h2 className="text-white text-[3.375rem] leading-[100%] font-normal mb-[1.5rem]">
         Pick a plan and make it yours
-        </h2>
+      </h2>
 
-        {/* 计费切换 */}
-        <div className="h-[3.375rem] flex bg-black rounded-full p-[0.0625rem] mt-[1.5rem] border border-white/20">
-          <button
-            onClick={() => setBillingType("month")}
-            className={`box-border flex justify-center items-center w-[6rem]  text-base rounded-full transition-all duration-300 ${
-              billingType === "month"
-                ? "bg-white text-black"
-                : "text-white hover:text-gray-300"
-            }`}
-          >
-            Monthly
-          </button>
-          <button
-            onClick={() => setBillingType("year")}
-            className={`box-border flex justify-center items-center w-[7.125rem]  text-base rounded-full transition-all duration-300 ${
-              billingType === "year"
-                ? "bg-white text-black"
-                : "text-white hover:text-gray-300"
-            }`}
-          >
-            Yearly - <span className="text-[#FFCC6D]">20%</span>
-          </button>
-        </div>
+      {/* 计费切换 */}
+      <div
+        className="flex bg-black rounded-full border border-white/20
+                      /* 移动端尺寸 */
+                      h-[2.5rem] p-[0.0625rem] mt-4
+                      /* 平板尺寸 */
+                      sm:h-[3rem] sm:mt-6
+                      /* 小屏笔记本尺寸 */
+                      md:h-[3.375rem] md:mt-[1.5rem]
+                      /* 大屏笔记本尺寸 */
+                      lg:h-[3.375rem] lg:mt-[1.5rem]
+                      /* 桌面端尺寸 */
+                      xl:h-[3.375rem] xl:mt-[1.5rem]
+                      /* 大屏显示器尺寸 */
+                      2xl:h-[3.375rem] 2xl:mt-[1.5rem]"
+      >
+        <button
+          onClick={() => setBillingType("month")}
+          className={`box-border flex justify-center items-center rounded-full transition-all duration-300 ${
+            billingType === "month"
+              ? "bg-white text-black"
+              : "text-white hover:text-gray-300"
+          }
+          /* 移动端按钮尺寸 */
+          w-[4.5rem] text-sm
+          /* 平板按钮尺寸 */
+          sm:w-[5rem] sm:text-sm
+          /* 小屏笔记本按钮尺寸 */
+          md:w-[6rem] md:text-base
+          /* 大屏笔记本按钮尺寸 */
+          lg:w-[6rem] lg:text-base
+          /* 桌面端按钮尺寸 */
+          xl:w-[6rem] xl:text-base
+          /* 大屏显示器按钮尺寸 */
+          2xl:w-[6rem] 2xl:text-base`}
+        >
+          Monthly
+        </button>
+        <button
+          onClick={() => setBillingType("year")}
+          className={`box-border flex justify-center items-center rounded-full transition-all duration-300 ${
+            billingType === "year"
+              ? "bg-white text-black"
+              : "text-white hover:text-gray-300"
+          }
+          /* 移动端按钮尺寸 */
+          w-[5.5rem] text-sm
+          /* 平板按钮尺寸 */
+          sm:w-[6rem] sm:text-sm
+          /* 小屏笔记本按钮尺寸 */
+          md:w-[7.125rem] md:text-base
+          /* 大屏笔记本按钮尺寸 */
+          lg:w-[7.125rem] lg:text-base
+          /* 桌面端按钮尺寸 */
+          xl:w-[7.125rem] xl:text-base
+          /* 大屏显示器按钮尺寸 */
+          2xl:w-[7.125rem] 2xl:text-base`}
+        >
+          Yearly - <span className="text-[#FFCC6D]">20%</span>
+        </button>
       </div>
-
-      {/* 主要价格卡片 */}
-      <div className="flex justify-between w-[90%] px-[12rem] mb-[2rem]">
-        {pricingPlans.map((plan, index) => (
-          <div
-            key={index}
-            className=" w-[24rem] h-[38.125rem] bg-black rounded-2xl p-[1.5rem] border border-white/20"
-          >
-            <h3 className="text-white text-2xl font-normal mb-[1rem]">
-              {plan.title}
-            </h3>
-            <div className="mb-[1rem]">
-              <span className="text-white text-[3.375rem] font-bold">
-                ${plan.price}
-              </span>
-              <span className="text-white text-xs ml-[0.5rem]">/ {billingType === "month" ? "mo" : "year"}</span>
-            </div>
-            <p className="text-white text-[0.875rem] mb-[1rem]">
-              {plan.credits}
-            </p>
-            {plan.issubscribed ? (
-              <button
-                disabled
-                className="w-full bg-gray-400 text-gray-600 py-[0.75rem] rounded-full mb-[1rem] cursor-not-allowed border border-gray-300"
-              >
-                Already Owned
-              </button>
-            ) : (
-              <button
-                onClick={() => handleSubscribe(plan.title)}
-                className="w-full bg-white text-black py-[0.75rem] rounded-full mb-[1rem] hover:bg-black hover:text-white transition-colors border border-white/20"
-              >
-                {plan.buttonText}
-              </button>
-            )}
-            <p className="w-full text-center text-white/60 text-[0.75rem] mb-[2rem]">
-              * Billed monthly until cancelled
-            </p>
-            <ul className="space-y-[1rem]">
-              {plan.features.map((feature, featureIndex) => (
-                <li
-                  key={featureIndex}
-                  className="flex items-center text-white text-[0.875rem]"
-                >
-                  <span className="text-[#C73BFF] mr-[0.5rem]">✓</span>
-                  {feature}
-                </li>
-              ))}
-            </ul>
-          </div>
-        ))}
-      </div>
-
-
     </div>
+
+    {/* 主要价格卡片 */}
+    <div
+      className="w-full max-w-[70%] mx-auto px-4
+                   /* 移动端 - 单列布局 */
+                   grid grid-cols-1 gap-4
+                   /* 平板 - 双列布局 */
+                   sm:grid-cols-2 sm:gap-6 sm:px-6
+                   /* 桌面端 - 三列布局 */
+                   md:grid-cols-3 md:gap-8 md:px-8
+                   /* 大屏 - 保持三列但增加间距 */
+                   lg:gap-10 lg:px-12
+                   xl:gap-12 xl:px-16
+                   2xl:gap-16 2xl:px-20"
+    >
+      {pricingPlans.map((plan, index) => (
+        <div
+          key={index}
+          className="bg-black rounded-2xl border border-white/20
+                     /* 移动端卡片尺寸 */
+                     p-4 min-h-[28rem]
+                     /* 平板卡片尺寸 */
+                     sm:p-5 sm:min-h-[32rem]
+                     /* 小屏笔记本卡片尺寸 */
+                     md:p-6 md:min-h-[36rem]
+                     /* 大屏笔记本卡片尺寸 */
+                     lg:p-[1.375rem] lg:min-h-[37rem]
+                     /* 桌面端卡片尺寸 */
+                     xl:p-[1.5rem] xl:min-h-[38.125rem]
+                     /* 大屏显示器卡片尺寸 */
+                     2xl:p-[1.75rem] 2xl:min-h-[40rem]"
+        >
+          <h3
+            className="text-white font-normal
+                        /* 移动端标题 */
+                        text-lg mb-3
+                        /* 平板标题 */
+                        sm:text-xl sm:mb-4
+                        /* 小屏笔记本标题 */
+                        md:text-xl md:mb-4
+                        /* 大屏笔记本标题 */
+                        lg:text-2xl lg:mb-[1rem]
+                        /* 桌面端标题 */
+                        xl:text-2xl xl:mb-[1rem]
+                        /* 大屏显示器标题 */
+                        2xl:text-3xl 2xl:mb-[1.25rem]"
+          >
+            {plan.title}
+          </h3>
+          <div
+            className="mb-3
+                         /* 平板间距 */
+                         sm:mb-4
+                         /* 小屏笔记本间距 */
+                         md:mb-4
+                         /* 大屏笔记本间距 */
+                         lg:mb-[1rem]
+                         /* 桌面端间距 */
+                         xl:mb-[1rem]
+                         /* 大屏显示器间距 */
+                         2xl:mb-[1.25rem]"
+          >
+            <span
+              className="text-white font-bold
+                            /* 移动端价格字体 */
+                            text-2xl
+                            /* 平板价格字体 */
+                            sm:text-3xl
+                            /* 小屏笔记本价格字体 */
+                            md:text-[2.5rem]
+                            /* 大屏笔记本价格字体 */
+                            lg:text-[3rem]
+                            /* 桌面端价格字体 */
+                            xl:text-[3.375rem]
+                            /* 大屏显示器价格字体 */
+                            2xl:text-[3.75rem]"
+            >
+              ${plan.price}
+            </span>
+            <span
+              className="text-white ml-2
+                            /* 移动端单位字体 */
+                            text-xs
+                            /* 平板单位字体 */
+                            sm:text-xs
+                            /* 小屏笔记本单位字体 */
+                            md:text-xs
+                            /* 大屏笔记本单位字体 */
+                            lg:text-xs
+                            /* 桌面端单位字体 */
+                            xl:text-xs
+                            /* 大屏显示器单位字体 */
+                            2xl:text-sm"
+            >
+              / {billingType === "month" ? "mo" : "year"}
+            </span>
+          </div>
+          <p
+            className="text-white mb-4
+                        /* 移动端描述字体 */
+                        text-sm
+                        /* 平板描述字体 */
+                        sm:text-sm
+                        /* 小屏笔记本描述字体 */
+                        md:text-[0.875rem]
+                        /* 大屏笔记本描述字体 */
+                        lg:text-[0.875rem]
+                        /* 桌面端描述字体 */
+                        xl:text-[0.875rem]
+                        /* 大屏显示器描述字体 */
+                        2xl:text-base"
+          >
+            {plan.credits}
+          </p>
+          {plan.issubscribed ? (
+            <button
+              disabled
+              className="w-full bg-gray-400 text-gray-600 rounded-full cursor-not-allowed border border-gray-300
+                        /* 移动端按钮 */
+                        py-2 mb-4 text-sm
+                        /* 平板按钮 */
+                        sm:py-3 sm:mb-4 sm:text-base
+                        /* 小屏笔记本按钮 */
+                        md:py-[0.75rem] md:mb-[1rem] md:text-base
+                        /* 大屏笔记本按钮 */
+                        lg:py-[0.75rem] lg:mb-[1rem] lg:text-base
+                        /* 桌面端按钮 */
+                        xl:py-[0.75rem] xl:mb-[1rem] xl:text-base
+                        /* 大屏显示器按钮 */
+                        2xl:py-[0.875rem] 2xl:mb-[1.25rem] 2xl:text-lg"
+            >
+              Already Owned
+            </button>
+          ) : (
+            <button
+              onClick={() => handleSubscribe(plan.title)}
+              className="w-full bg-white text-black rounded-full hover:bg-black hover:text-white transition-colors border border-white/20
+                        /* 移动端按钮 */
+                        py-2 mb-4 text-sm
+                        /* 平板按钮 */
+                        sm:py-3 sm:mb-4 sm:text-base
+                        /* 小屏笔记本按钮 */
+                        md:py-[0.75rem] md:mb-[1rem] md:text-base
+                        /* 大屏笔记本按钮 */
+                        lg:py-[0.75rem] lg:mb-[1rem] lg:text-base
+                        /* 桌面端按钮 */
+                        xl:py-[0.75rem] xl:mb-[1rem] xl:text-base
+                        /* 大屏显示器按钮 */
+                        2xl:py-[0.875rem] 2xl:mb-[1.25rem] 2xl:text-lg"
+            >
+              {plan.buttonText}
+            </button>
+          )}
+          <p
+            className="w-full text-center text-white/60 mb-4
+                        /* 移动端提示文字 */
+                        text-xs
+                        /* 平板提示文字 */
+                        sm:text-xs
+                        /* 小屏笔记本提示文字 */
+                        md:text-[0.75rem] md:mb-[2rem]
+                        /* 大屏笔记本提示文字 */
+                        lg:text-[0.75rem] lg:mb-[2rem]
+                        /* 桌面端提示文字 */
+                        xl:text-[0.75rem] xl:mb-[2rem]
+                        /* 大屏显示器提示文字 */
+                        2xl:text-sm 2xl:mb-[2.5rem]"
+          >
+            * Billed monthly until cancelled
+          </p>
+          <ul
+            className="space-y-2
+                        /* 平板特性列表间距 */
+                        sm:space-y-3
+                        /* 小屏笔记本特性列表间距 */
+                        md:space-y-[1rem]
+                        /* 大屏笔记本特性列表间距 */
+                        lg:space-y-[1rem]
+                        /* 桌面端特性列表间距 */
+                        xl:space-y-[1rem]
+                        /* 大屏显示器特性列表间距 */
+                        2xl:space-y-[1.25rem]"
+          >
+            {plan.features.map((feature, featureIndex) => (
+              <li
+                key={featureIndex}
+                className="flex items-center text-white
+                          /* 移动端特性文字 */
+                          text-sm
+                          /* 平板特性文字 */
+                          sm:text-sm
+                          /* 小屏笔记本特性文字 */
+                          md:text-[0.875rem]
+                          /* 大屏笔记本特性文字 */
+                          lg:text-[0.875rem]
+                          /* 桌面端特性文字 */
+                          xl:text-[0.875rem]
+                          /* 大屏显示器特性文字 */
+                          2xl:text-base"
+              >
+                <span
+                  className="text-[#C73BFF] mr-2
+                                /* 移动端勾号间距 */
+                                text-sm
+                                /* 平板勾号间距 */
+                                sm:mr-2 sm:text-base
+                                /* 小屏笔记本勾号间距 */
+                                md:mr-[0.5rem] md:text-base
+                                /* 大屏笔记本勾号间距 */
+                                lg:mr-[0.5rem] lg:text-base
+                                /* 桌面端勾号间距 */
+                                xl:mr-[0.5rem] xl:text-base
+                                /* 大屏显示器勾号间距 */
+                                2xl:mr-[0.625rem] 2xl:text-lg"
+                >
+                  ✓
+                </span>
+                {feature}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  </div>
   );
 }