diff --git a/clientarea/home/hgcloud_home/css/home.css b/clientarea/home/hgcloud_home/css/home.css
index e5e1466..fc7a1ae 100644
--- a/clientarea/home/hgcloud_home/css/home.css
+++ b/clientarea/home/hgcloud_home/css/home.css
@@ -19,7 +19,8 @@
   box-sizing: border-box;
   padding: 0.25rem;
   background-color: #fff;
-  border-radius: 0.04rem;
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
 }
 .info-first {
   height: 0.6rem;
@@ -30,13 +31,14 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 0.36rem;
-  background: #fff;
-  width: 0.6rem;
-  height: 0.6rem;
-  border-radius: 0.03rem;
+  font-size: 0.28rem;
+  background: linear-gradient(135deg, #3B82F6, #8B5CF6);
+  width: 0.52rem;
+  height: 0.52rem;
+  border-radius: 50%;
   color: #FFFFFF;
   font-weight: bold;
+  flex-shrink: 0;
 }
 .name-box {
   display: flex;
@@ -87,11 +89,10 @@
   font-size: 0.14rem;
   color: #8692B0;
 }
-.info-three .compny-box .left-icon img,
-.info-three .person-box .left-icon img {
-  vertical-align: middle;
-  width: 0.24rem;
-  height: 0.24rem;
+.info-three .compny-box .left-icon i,
+.info-three .person-box .left-icon i {
+  font-size: 20px;
+  color: #8692B0;
   flex-shrink: 0;
 }
 .info-three .compny-box .right-text .certify-id,
@@ -151,10 +152,10 @@
   margin-left: 0.25rem;
   color: #1E2736;
 }
-.info-second > div img {
+.info-second > div i.ph {
   margin-right: 0.05rem;
   vertical-align: middle;
-  width: 0.16rem;
+  font-size: 16px;
 }
 .statistics-content {
   display: flex;
@@ -165,8 +166,9 @@
   box-sizing: border-box;
   flex: 1;
   padding: 0.24rem;
-  border-radius: 0.04rem;
+  border-radius: 12px;
   background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
 }
 .money-top {
   display: flex;
@@ -177,7 +179,7 @@
   position: relative;
   flex: 1;
   flex-shrink: 0;
-  border-radius: 0.04rem;
+  border-radius: 10px;
   background: #F6F6FA;
   padding: 0.16rem;
   display: flex;
@@ -319,12 +321,10 @@
 .statistics-bottom {
   margin-top: -0.16rem;
   display: flex;
-  padding: 0.26rem 5.32rem 0.26rem 0.24rem;
-  border-radius: 0.04rem;
-  background: url("../img/index_bg.png") no-repeat;
-  background-size: auto 100%;
-  background-position: right center;
+  padding: 0.26rem 0.24rem;
+  border-radius: 12px;
   background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
 }
 .statistics-bottom .statistics-item {
   flex: 1;
@@ -372,8 +372,13 @@
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  border-radius: 0.03rem;
+  border-radius: 12px;
   cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.order-box .order-item:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
 }
 .order-box .order-title {
   color: #FFFFFF;
@@ -386,27 +391,26 @@
   font-weight: bold;
   color: #FFFFFF;
 }
-.order-box .order-type-img {
-  margin-top: 0.36rem;
-}
-.order-box .order-type-img img {
-  width: 0.68rem;
-  height: 0.68rem;
+.order-box .order-type-icon {
+  margin-top: 0.28rem;
+  font-size: 0.48rem;
+  color: rgba(255, 255, 255, 0.85);
 }
 .order-box .order-box-1 {
-  background: #7239EA;
+  background: linear-gradient(145deg, #7239EA, #9B6BFF);
 }
 .order-box .order-box-2 {
-  background: #3699FF;
+  background: linear-gradient(145deg, #3699FF, #60B0FF);
 }
 .order-box .order-box-3 {
-  background: #3DD598;
+  background: linear-gradient(145deg, #3DD598, #60E8B5);
 }
 .product-list-box {
   flex: 1;
   background-color: #fff;
-  border-radius: 0.04rem;
+  border-radius: 12px;
   padding: 0.24rem;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
 }
 .product-list-box .title-text {
   font-size: 0.14rem;
@@ -426,8 +430,9 @@
   box-sizing: border-box;
   padding: 0.24rem;
   width: 4.5rem;
-  border-radius: 0.04rem;
+  border-radius: 12px;
   background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
 }
 .recommend-box {
   width: 3.65rem;
@@ -447,8 +452,24 @@
   font-size: 0.14rem;
 }
 .recommend-box img {
-  width: 3.65rem;
-  height: 2.56rem;
+  display: none;
+}
+.recommend-placeholder-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 80px;
+  color: #8692B0;
+  opacity: 0.15;
+  padding: 0.4rem 0;
+}
+.recommend-illustration {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 64px;
+  color: var(--color-primary);
+  opacity: 0.3;
 }
 .recommend-people {
   margin-top: 0.3rem;
@@ -507,9 +528,10 @@
   color: #8692B0;
 }
 .WorkOrder-content {
-  padding: 0.3rem 0.3rem 0 0.3rem;
-  border-radius: 0.03rem;
-  border: 1px solid #E6E7EB;
+  padding: 16px;
+  border-radius: 10px;
+  border: 1px solid #EEEEEE;
+  background: #FAFBFC;
 }
 .WorkOrder-item {
   display: flex;
@@ -611,11 +633,19 @@
 }
 .no-product {
   text-align: center;
-  margin-top: 1.06rem;
-  padding-bottom: 1.72rem;
   background-color: #fff;
-  border-radius: 0.04rem;
-  padding: 0.24rem;
+  border-radius: 12px;
+  padding: 60px 24px 80px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+}
+.no-product::before {
+  content: '\e4b6';
+  font-family: 'Phosphor';
+  font-size: 72px;
+  color: #8692B0;
+  opacity: 0.15;
+  display: block;
+  margin-bottom: 16px;
 }
 .no-product h2 {
   font-weight: 400;
diff --git a/clientarea/home/hgcloud_home/home.php b/clientarea/home/hgcloud_home/home.php
index c2fdb79..69d340e 100644
--- a/clientarea/home/hgcloud_home/home.php
+++ b/clientarea/home/hgcloud_home/home.php
@@ -1,4 +1,7 @@
 <link rel="stylesheet" href="/{$template_catalog_home}/template/{$themes_home}/css/home.css">
+<!-- Phosphor Icons -->
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css" />
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/style.css" />
 </head>
 
 <body>
@@ -40,13 +43,11 @@
                   <el-divider class="divider-box" direction="vertical"></el-divider>
                   <div class="info-second" v-loading="nameLoading">
                     <div class="email-box">
-                      <span><img src="/{$template_catalog_home}/template/{$themes}/img/email-icon.png"
-                          alt="">{{lang.index_email}}</span>
+                      <span><i class="ph ph-envelope"></i>{{lang.index_email}}</span>
                       <span class="phone-number">{{account.email ? account.email : '--'}}</span>
                     </div>
                     <div class="phone-box">
-                      <span><img src="/{$template_catalog_home}/template/{$themes}/img/tel-icon.png"
-                          alt="">{{lang.index_tel}}</span>
+                      <span><i class="ph ph-phone"></i>{{lang.index_tel}}</span>
                       <span class="phone-number">{{account.phone ? account.phone : '--'}}</span>
                     </div>
                   </div>
@@ -55,7 +56,7 @@
                     v-if="certificationObj.certification_open === 1">
                     <div class="compny-box">
                       <div class="left-icon">
-                        <img src="/{$template_catalog_home}/template/{$themes}/img/compny-icon.png" alt="">
+                        <i class="ph ph-buildings"></i>
                         <span class="left-type">{{lang.index_compny}}</span>
                       </div>
                       <div class="right-text">
@@ -70,17 +71,15 @@
                           <div class="company-name certify-bottom" :title="certificationObj.company?.certify_id">
                             <span
                               class="certify-text">{{certificationObj.company?.certify_id ? certificationObj.company.certify_id : '--'}}</span>
-                            <img class="cpoy-btn" v-copy="certificationObj.company.certify_id"
-                              v-if="certificationObj.company?.certify_id"
-                              src="/{$template_catalog_home}/template/{$themes}/img/copy.svg" alt="">
+                            <i class="ph ph-copy cpoy-btn" v-copy="certificationObj.company.certify_id"
+                              v-if="certificationObj.company?.certify_id"></i>
                           </div>
                         </div>
                       </div>
                     </div>
                     <div class="person-box">
                       <div class="left-icon">
-                        <img class="left-icon" src="/{$template_catalog_home}/template/{$themes}/img/person-icon.png"
-                          alt="">
+                        <i class="ph ph-user"></i>
                         <span class="left-type">{{lang.index_name}}</span>
                       </div>
                       <div class="right-text">
@@ -98,8 +97,8 @@
                             <span
                               class="certify-text">{{certificationObj.person?.certify_id ? certificationObj.person.certify_id : '--'}}
                             </span>
-                            <img v-copy="certificationObj.person?.certify_id" v-if="certificationObj.person?.certify_id"
-                              class="cpoy-btn" src="/{$template_catalog_home}/template/{$themes}/img/copy.svg" alt="">
+                            <i class="ph ph-copy cpoy-btn" v-copy="certificationObj.person?.certify_id"
+                              v-if="certificationObj.person?.certify_id"></i>
                           </div>
                         </div>
                       </div>
@@ -192,23 +191,17 @@
                     </div>
                     <div class="order-box">
                       <div class="order-item order-box-1" @click="goProductList('using')">
-                        <div class="order-type-img">
-                          <img src="/{$template_catalog_home}/template/{$themes}/img/activation-icon.png" alt="">
-                        </div>
+                        <div class="order-type-icon"><i class="ph ph-pulse"></i></div>
                         <h3 class="order-title">{{lang.index_text6}}</h3>
                         <div class="order-nums">{{account.host_active_num}}</div>
                       </div>
                       <div class="order-item order-box-2" @click="goProductList()">
-                        <div class="order-type-img">
-                          <img src="/{$template_catalog_home}/template/{$themes}/img/prduct-icon.png" alt="">
-                        </div>
+                        <div class="order-type-icon"><i class="ph ph-cube"></i></div>
                         <h3 class="order-title">{{lang.index_text7}}</h3>
                         <div class="order-nums">{{account.host_num}}</div>
                       </div>
                       <div class="order-item order-box-3" @click="goOrderList('Unpaid')">
-                        <div class="order-type-img">
-                          <img src="/{$template_catalog_home}/template/{$themes}/img/no-pay-order.png" alt="">
-                        </div>
+                        <div class="order-type-icon"><i class="ph ph-receipt"></i></div>
                         <h3 class="order-title">{{lang.index_text8}}</h3>
                         <div class="order-nums">{{account.unpaid_order}}</div>
                       </div>
@@ -280,15 +273,13 @@
                     <div class="left">
                       <div class="row1">
                         <div class="title-text">{{lang.referral_title1}}</div>
-                        <span class="reword" @click="toReferral"><img
-                            src="/{$template_catalog_home}/template/{$themes}/img/reword.png"
-                            alt="">{{lang.referral_text14}}</span>
+                        <span class="reword" @click="toReferral"><i class="ph-fill ph-gift"></i>{{lang.referral_text14}}</span>
                       </div>
                       <div class="row2">{{lang.referral_title6}}</div>
                       <div class="row3">{{lang.referral_text15}}</div>
                       <div class="row4">{{lang.referral_text16}}</div>
                     </div>
-                    <img class="right" src="/{$template_catalog_home}/template/{$themes}/img/credit-card.png" alt="">
+                    <div class="right recommend-illustration"><i class="ph ph-credit-card"></i></div>
                   </div>
                   <div class="url">
                     <div class="url-text" :title="promoterData.url">{{promoterData.url}}</div>
@@ -307,7 +298,7 @@
                   </div>
                 </div>
                 <div class="recommend-box" v-if="!showRight || !isOpen">
-                  <img src="/{$template_catalog_home}/template/{$themes}/img/recommend-img.png" alt="">
+                  <div class="recommend-placeholder-icon"><i class="ph ph-megaphone"></i></div>
                   <div v-if="showRight">
                     <h2>{{lang.index_text17}}</h2>
                     <p>{{lang.index_text18}}</p>