diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss
index a5637311..79089122 100644
--- a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss
@@ -16,6 +16,7 @@
       .categoryIcon {
         width: 48px;
         height: 48px;
+        color: #ffffff;
         border-radius: 50%;
         display: flex;
         align-items: center;
@@ -30,6 +31,9 @@
       }
 
       .categoryInfo {
+        display: flex;
+        align-items: center;
+        gap: 10px;
         .categoryTitle {
           font-size: 24px;
           font-weight: 600;
@@ -38,34 +42,31 @@
         }
 
         .categoryCount {
-          font-size: 14px;
+          font-size: 12px;
           color: #666;
           background: #f0f0f0;
-          padding: 4px 12px;
           border-radius: 12px;
           border: 1px solid #e0e0e0;
+          height: 24px;
+          line-height: 20px;
+          padding: 0 10px;
         }
       }
     }
 
     .featureCards {
-      display: flex;
-      justify-content: flex-start;
-      gap: 24px;
-      flex-wrap: wrap;
-
       .featureCard {
         border-radius: 16px;
         border: none;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         transition: all 0.3s ease;
-        width: 30%;
         cursor: pointer;
         position: relative;
         overflow: hidden;
         background: white;
         padding: 20px;
         box-sizing: border-box;
+        margin-bottom: 16px;
 
         &:hover {
           transform: translateY(-2px);
@@ -79,6 +80,7 @@
             justify-content: space-between;
             margin-bottom: 10px;
             .cardIcon {
+              color: #ffffff;
               width: 48px;
               height: 48px;
               border-radius: 12px;
diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx
index 9ccb58d0..6e4828ff 100644
--- a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 import styles from "./index.module.scss";
 import { FeatureCard, featureCategories } from "./index.data.tsx";
-
+import { Col, Row } from "antd";
 const PowerCenter: React.FC = () => {
   const navigate = useNavigate();
 
@@ -35,45 +35,51 @@ const PowerCenter: React.FC = () => {
 
           {/* 功能卡片 */}
           <div className={styles.featureCards}>
-            {category.features.map(card => (
-              <div
-                key={card.id}
-                className={styles.featureCard}
-                onClick={() => handleCardClick(card)}
-              >
-                <div className={styles.cardContent}>
-                  <div className={styles.cardHeader}>
-                    <div
-                      className={styles.cardIcon}
-                      style={{ backgroundColor: card.color }}
-                    >
-                      {card.icon}
-                    </div>
-                    {/* 热门/新功能标签 */}
-                    {(card.isHot || card.isNew) && (
-                      <div
-                        className={styles.badge}
-                        data-type={card.isNew ? "new" : "hot"}
-                      >
-                        {card.isHot ? "热门" : "新功能"}
+            <Row gutter={16}>
+              {category.features.map(card => (
+                <Col span={8} key={card.id}>
+                  <div
+                    key={card.id}
+                    className={styles.featureCard}
+                    onClick={() => handleCardClick(card)}
+                  >
+                    <div className={styles.cardContent}>
+                      <div className={styles.cardHeader}>
+                        <div
+                          className={styles.cardIcon}
+                          style={{ backgroundColor: card.color }}
+                        >
+                          {card.icon}
+                        </div>
+                        {/* 热门/新功能标签 */}
+                        {(card.isHot || card.isNew) && (
+                          <div
+                            className={styles.badge}
+                            data-type={card.isNew ? "new" : "hot"}
+                          >
+                            {card.isHot ? "热门" : "新功能"}
+                          </div>
+                        )}
+
+                        {/* 功能图标 */}
                       </div>
-                    )}
 
-                    {/* 功能图标 */}
-                  </div>
-
-                  {/* 功能信息 */}
-                  <div className={styles.cardInfo}>
-                    <h3 className={styles.cardTitle}>{card.title}</h3>
-                    <p className={styles.cardDescription}>{card.description}</p>
-                    <div className={styles.cardAction}>
-                      <span>点击进入功能</span>
-                      <span className={styles.arrow}>→</span>
+                      {/* 功能信息 */}
+                      <div className={styles.cardInfo}>
+                        <h3 className={styles.cardTitle}>{card.title}</h3>
+                        <p className={styles.cardDescription}>
+                          {card.description}
+                        </p>
+                        <div className={styles.cardAction}>
+                          <span>点击进入功能</span>
+                          <span className={styles.arrow}>→</span>
+                        </div>
+                      </div>
                     </div>
                   </div>
-                </div>
-              </div>
-            ))}
+                </Col>
+              ))}
+            </Row>
           </div>
         </div>
       ))}