diff --git a/miniprogram/app.wxss b/miniprogram/app.wxss
index d898461..f9c216b 100644
--- a/miniprogram/app.wxss
+++ b/miniprogram/app.wxss
@@ -1,51 +1,229 @@
 page {
   background-color: #f5f5f5;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
   font-size: 28rpx;
   color: #333333;
 }
 
-.container {
-  padding: 24rpx;
-  min-height: 100vh;
+.page-header {
+  padding: 80rpx 40rpx 32rpx;
+  text-align: center;
+  color: #ffffff;
 }
 
-.section-title {
+.page-header-title {
+  font-size: 36rpx;
+  font-weight: 600;
+  margin-bottom: 8rpx;
+}
+
+.page-header-subtitle {
+  font-size: 26rpx;
+  opacity: 0.9;
+}
+
+.page-header-pink {
+  background-color: #E6508C;
+}
+
+.page-header-green {
+  background-color: #52c41a;
+}
+
+.page-header-blue {
+  background-color: #006699;
+}
+
+.page-header-gold {
+  background-color: #DCB982;
+}
+
+.page-header-gradient {
+  background: linear-gradient(135deg, #E6508C 0%, #DCB982 100%);
+}
+
+.page-content {
+  padding: 32rpx;
+}
+
+.page-title {
   font-size: 32rpx;
   font-weight: 600;
-  margin-bottom: 20rpx;
-}
-
-.card {
-  background-color: #ffffff;
-  border-radius: 16rpx;
-  padding: 32rpx;
-  margin-bottom: 20rpx;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+  color: #333333;
+  text-align: center;
+  margin-bottom: 28rpx;
 }
 
 .btn-primary {
-  background-color: #333333;
+  display: block;
+  width: 100%;
+  padding: 28rpx 32rpx;
+  background: #E6508C;
   color: #ffffff;
-  border-radius: 12rpx;
-  padding: 24rpx 40rpx;
-  text-align: center;
+  border: none;
+  border-radius: 20rpx;
   font-size: 30rpx;
-  font-weight: 500;
+  font-weight: 600;
+  text-align: center;
+  margin-bottom: 20rpx;
+}
+
+.btn-primary::after {
+  border: none;
 }
 
 .btn-primary:active {
-  opacity: 0.8;
+  opacity: 0.85;
+}
+
+.btn-primary-green {
+  background: #E6508C;
+}
+
+.btn-primary-gold {
+  background: #DCB982;
+}
+
+.btn-primary-red {
+  background: #ff4d4f;
 }
 
 .btn-secondary {
-  background-color: #ffffff;
-  color: #333333;
-  border: 2rpx solid #333333;
-  border-radius: 12rpx;
-  padding: 24rpx 40rpx;
+  display: block;
+  width: 100%;
+  padding: 28rpx 32rpx;
+  background: #ffffff;
+  color: #E6508C;
+  border: 4rpx solid #E6508C;
+  border-radius: 20rpx;
+  font-size: 28rpx;
+  font-weight: 500;
   text-align: center;
+  margin-bottom: 20rpx;
+}
+
+.btn-secondary::after {
+  border: none;
+}
+
+.btn-secondary-gold {
+  color: #DCB982;
+  border-color: #DCB982;
+}
+
+.status-badge {
+  display: inline-block;
+  padding: 6rpx 20rpx;
+  border-radius: 20rpx;
+  font-size: 24rpx;
+  color: #ffffff;
+}
+
+.status-badge-green {
+  background-color: #52c41a;
+}
+
+.status-badge-gold {
+  background-color: #FAAD14;
+}
+
+.device-card {
+  background: linear-gradient(135deg, #fdf2f8 0%, #ffffff 100%);
+  border: 4rpx solid #E6508C;
+  border-radius: 28rpx;
+  padding: 40rpx;
+  text-align: center;
+  margin-bottom: 28rpx;
+}
+
+.device-icon {
+  width: 100rpx;
+  height: 100rpx;
+  background: #E6508C;
+  border-radius: 50%;
+  margin: 0 auto 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  font-size: 52rpx;
+}
+
+.device-name {
   font-size: 30rpx;
+  color: #333333;
+  margin-bottom: 12rpx;
+}
+
+.device-battery {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+  margin-top: 16rpx;
+  font-size: 26rpx;
+  color: #666666;
+}
+
+.success-icon {
+  width: 140rpx;
+  height: 140rpx;
+  background: #52c41a;
+  border-radius: 50%;
+  margin: 0 auto 32rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  font-size: 80rpx;
+}
+
+.success-title {
+  font-size: 44rpx;
+  color: #333333;
+  font-weight: 600;
+  text-align: center;
+  margin-bottom: 16rpx;
+}
+
+.tip-card {
+  background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
+  border: 2rpx solid #DCB982;
+  border-radius: 24rpx;
+  padding: 28rpx;
+  margin-bottom: 28rpx;
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+}
+
+.tip-card-icon {
+  font-size: 52rpx;
+  flex-shrink: 0;
+}
+
+.tip-card-title {
+  font-size: 28rpx;
+  color: #333333;
+  font-weight: 600;
+  margin-bottom: 6rpx;
+}
+
+.tip-card-sub {
+  font-size: 26rpx;
+  color: #666666;
+}
+
+.info-tip {
+  background: #f0f9ff;
+  border-radius: 20rpx;
+  padding: 24rpx;
+  margin-bottom: 24rpx;
+  font-size: 26rpx;
+  color: #006699;
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
 }
 
 .text-muted {
@@ -56,89 +234,7 @@ page {
   text-align: center;
 }
 
-.text-primary {
-  color: #333333;
-}
-
-.text-success {
-  color: #52c41a;
-}
-
-.text-warning {
-  color: #faad14;
-}
-
-.text-error {
-  color: #ff4d4f;
-}
-
-.mt-10 { margin-top: 10rpx; }
 .mt-20 { margin-top: 20rpx; }
 .mt-30 { margin-top: 30rpx; }
-.mb-10 { margin-bottom: 10rpx; }
 .mb-20 { margin-bottom: 20rpx; }
 .mb-30 { margin-bottom: 30rpx; }
-.p-20 { padding: 20rpx; }
-
-.flex-row {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.flex-between {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.flex-center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.flex-1 {
-  flex: 1;
-}
-
-.divider {
-  height: 1rpx;
-  background-color: #eeeeee;
-  margin: 20rpx 0;
-}
-
-.badge {
-  display: inline-block;
-  padding: 4rpx 16rpx;
-  border-radius: 8rpx;
-  font-size: 22rpx;
-  color: #ffffff;
-}
-
-.badge-success {
-  background-color: #52c41a;
-}
-
-.badge-error {
-  background-color: #ff4d4f;
-}
-
-.badge-warning {
-  background-color: #faad14;
-}
-
-.empty-state {
-  padding: 120rpx 40rpx;
-  text-align: center;
-}
-
-.empty-state .empty-icon {
-  font-size: 80rpx;
-  margin-bottom: 20rpx;
-}
-
-.empty-state .empty-text {
-  color: #999999;
-  font-size: 28rpx;
-}
diff --git a/miniprogram/pages/auto-scan/auto-scan.json b/miniprogram/pages/auto-scan/auto-scan.json
index cad0ea6..8fbb710 100644
--- a/miniprogram/pages/auto-scan/auto-scan.json
+++ b/miniprogram/pages/auto-scan/auto-scan.json
@@ -1,3 +1,4 @@
 {
+  "navigationStyle": "custom",
   "navigationBarTitleText": "自动扫描"
 }
diff --git a/miniprogram/pages/auto-scan/auto-scan.wxml b/miniprogram/pages/auto-scan/auto-scan.wxml
index 0e2f834..a4750ef 100644
--- a/miniprogram/pages/auto-scan/auto-scan.wxml
+++ b/miniprogram/pages/auto-scan/auto-scan.wxml
@@ -1,19 +1,28 @@
-<view class="container">
-  <view class="card text-center">
-    <view class="section-title">{{scanning ? '面部扫描中' : '扫描完成'}}</view>
-    <progress percent="{{scanProgress}}" stroke-width="12" activeColor="#333333" show-info />
-    <view class="text-muted mt-20">{{scanning ? '请保持设备贴合面部' : ''}}</view>
+<view class="page">
+  <view class="page-header page-header-pink">
+    <view class="page-header-title">自动扫描</view>
+    <view class="page-header-subtitle">正在识别面部...</view>
   </view>
 
-  <view class="card" wx:if="{{!scanning && regionData.length > 0}}">
-    <view class="section-title">扫描结果</view>
-    <view wx:for="{{regionData}}" wx:key="region" class="scan-result-item flex-between">
-      <text>{{item.region}}</text>
-      <text class="text-muted">{{item.pd}}</text>
+  <view class="page-content">
+    <view class="page-title">自动扫描面部区域</view>
+
+    <view class="scan-container">
+      <view class="face-outline">
+        <view class="scan-line"></view>
+      </view>
     </view>
-  </view>
 
-  <view class="btn-area-fixed" wx:if="{{!scanning}}">
-    <view class="btn-primary" bindtap="onNext">设置护理参数</view>
+    <view class="scan-hint">请将面罩对准面部</view>
+
+    <view class="scan-progress" wx:if="{{scanning}}">
+      正在扫描... <text class="highlight">{{regionData.length || 3}}</text> 个区域
+    </view>
+
+    <view class="detected-tags" wx:if="{{regionData.length > 0}}">
+      <text class="detected-tag" wx:for="{{regionData}}" wx:key="region">{{item.region}}</text>
+    </view>
+
+    <button class="btn-primary mt-30" wx:if="{{!scanning}}" bindtap="onNext">设置护理参数</button>
   </view>
 </view>
diff --git a/miniprogram/pages/auto-scan/auto-scan.wxss b/miniprogram/pages/auto-scan/auto-scan.wxss
index c0b7d16..e73c1df 100644
--- a/miniprogram/pages/auto-scan/auto-scan.wxss
+++ b/miniprogram/pages/auto-scan/auto-scan.wxss
@@ -1,8 +1,79 @@
-.scan-result-item {
-  padding: 16rpx 0;
-  border-bottom: 1rpx solid #f0f0f0;
+.scan-container {
+  position: relative;
+  width: 320rpx;
+  height: 400rpx;
+  margin: 40rpx auto;
 }
 
-.scan-result-item:last-child {
-  border-bottom: none;
+.face-outline {
+  width: 100%;
+  height: 100%;
+  border: 6rpx solid #e5e5e5;
+  border-radius: 50% 50% 45% 45%;
+  position: relative;
+  overflow: hidden;
+}
+
+.scan-line {
+  position: absolute;
+  left: 10rpx;
+  right: 10rpx;
+  height: 6rpx;
+  background: linear-gradient(90deg, transparent, #E6508C, #DCB982, #E6508C, transparent);
+  animation: scan 2s ease-in-out infinite;
+}
+
+@keyframes scan {
+  0% { top: 0; opacity: 0.5; }
+  50% { opacity: 1; }
+  100% { top: calc(100% - 6rpx); opacity: 0.5; }
+}
+
+.scan-hint {
+  text-align: center;
+  font-size: 26rpx;
+  color: #666666;
+  margin-bottom: 24rpx;
+}
+
+.scan-progress {
+  text-align: center;
+  background: #f0f9ff;
+  padding: 16rpx 28rpx;
+  border-radius: 24rpx;
+  font-size: 26rpx;
+  color: #006699;
+  display: inline-block;
+  margin: 0 auto;
+}
+
+.highlight {
+  color: #E6508C;
+  font-weight: 600;
+}
+
+.detected-tags {
+  text-align: center;
+  margin-top: 24rpx;
+}
+
+.detected-tag {
+  background: #fdf2f8;
+  border: 2rpx solid #E6508C;
+  color: #E6508C;
+  padding: 10rpx 24rpx;
+  border-radius: 24rpx;
+  font-size: 24rpx;
+  display: inline-block;
+  margin: 6rpx;
+  animation: tagPulse 1s ease-in-out;
+}
+
+@keyframes tagPulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+}
+
+.btn-primary::after {
+  border: none;
 }
diff --git a/miniprogram/pages/bind-success/bind-success.json b/miniprogram/pages/bind-success/bind-success.json
index 189c71a..e7358e6 100644
--- a/miniprogram/pages/bind-success/bind-success.json
+++ b/miniprogram/pages/bind-success/bind-success.json
@@ -1,3 +1,4 @@
 {
+  "navigationStyle": "custom",
   "navigationBarTitleText": "绑定成功"
 }
diff --git a/miniprogram/pages/bind-success/bind-success.wxml b/miniprogram/pages/bind-success/bind-success.wxml
index 5ddf7c4..71c9a3e 100644
--- a/miniprogram/pages/bind-success/bind-success.wxml
+++ b/miniprogram/pages/bind-success/bind-success.wxml
@@ -1,9 +1,23 @@
-<view class="container">
-  <view class="card text-center">
-    <view class="success-icon">&#10003;</view>
-    <view class="section-title">绑定成功</view>
-    <view class="text-muted mb-20">设备已成功绑定到您的账号</view>
-    <view class="text-muted mb-30">已自动发放 {{trialDays}} 天试用</view>
-    <view class="btn-primary" bindtap="onStart">开始使用</view>
+<view class="page">
+  <view class="page-header page-header-green">
+    <view class="page-header-title">绑定成功</view>
+    <view class="page-header-subtitle">设备已成功绑定</view>
+  </view>
+
+  <view class="page-content">
+    <view class="success-area">
+      <view class="success-icon">✓</view>
+      <view class="success-title">绑定成功！</view>
+    </view>
+
+    <view class="tip-card">
+      <text class="tip-card-icon">🎁</text>
+      <view class="tip-card-body">
+        <view class="tip-card-title">恭喜获得7天智能模式试用</view>
+        <view class="tip-card-sub">体验结束后可订阅继续使用</view>
+      </view>
+    </view>
+
+    <button class="btn-primary" bindtap="onStart">开始使用</button>
   </view>
 </view>
diff --git a/miniprogram/pages/bind-success/bind-success.wxss b/miniprogram/pages/bind-success/bind-success.wxss
index 95f767c..da899f0 100644
--- a/miniprogram/pages/bind-success/bind-success.wxss
+++ b/miniprogram/pages/bind-success/bind-success.wxss
@@ -1,10 +1,8 @@
-.success-icon {
-  width: 120rpx;
-  height: 120rpx;
-  border-radius: 50%;
-  background-color: #52c41a;
-  color: #ffffff;
-  font-size: 64rpx;
-  line-height: 120rpx;
-  margin: 40rpx auto;
+.success-area {
+  text-align: center;
+  padding: 60rpx 0;
+}
+
+.tip-card-body {
+  flex: 1;
 }
diff --git a/miniprogram/pages/ble-connect/ble-connect.json b/miniprogram/pages/ble-connect/ble-connect.json
index 4fa52fe..c8dd77a 100644
--- a/miniprogram/pages/ble-connect/ble-connect.json
+++ b/miniprogram/pages/ble-connect/ble-connect.json
@@ -1,3 +1,4 @@
 {
+  "navigationStyle": "custom",
   "navigationBarTitleText": "蓝牙连接"
 }
diff --git a/miniprogram/pages/ble-connect/ble-connect.wxml b/miniprogram/pages/ble-connect/ble-connect.wxml
index ec11568..bf43594 100644
--- a/miniprogram/pages/ble-connect/ble-connect.wxml
+++ b/miniprogram/pages/ble-connect/ble-connect.wxml
@@ -1,28 +1,30 @@
-<view class="container">
-  <view class="card text-center">
-    <view class="section-title">
-      {{state === 'scanning' ? '正在扫描设备...' : state === 'connecting' ? '正在连接设备...' : state === 'binding' ? '正在绑定设备...' : '连接失败'}}
+<view class="page">
+  <view class="page-header page-header-pink">
+    <view class="page-header-title">蓝牙连接</view>
+    <view class="page-header-subtitle">{{state === 'scanning' ? '正在搜索设备...' : state === 'connecting' ? '正在连接设备...' : state === 'binding' ? '正在绑定...' : '连接失败'}}</view>
+  </view>
+
+  <view class="page-content">
+    <view class="info-tip">
+      <text>📡</text>
+      <text>请确保手机蓝牙已开启</text>
     </view>
 
-    <view wx:if="{{state === 'scanning'}}" class="text-muted mb-30">
-      请确保设备已开机且在附近
-    </view>
-    <view wx:if="{{state === 'connecting'}}" class="text-muted mb-30">
-      设备ID: {{deviceId}}
-    </view>
-    <view wx:if="{{state === 'binding'}}" class="text-muted mb-30">
-      正在写入绑定信息...
-    </view>
-    <view wx:if="{{state === 'error'}}" class="mb-30">
-      <text class="text-error">{{error}}</text>
+    <view class="search-card" wx:if="{{state === 'scanning' || state === 'connecting'}}">
+      <view class="search-icon pulsing">⏳</view>
+      <view class="search-text">搜索中...</view>
     </view>
 
-    <view wx:if="{{state === 'scanning' || state === 'connecting' || state === 'binding'}}" class="loading-spinner">
-      <view class="spinner"></view>
+    <view class="found-card" wx:if="{{state === 'binding'}}">
+      <view class="found-icon">💆</view>
+      <view class="found-name">光子美容仪-{{deviceId}}</view>
+      <view class="status-badge status-badge-green">连接中</view>
     </view>
 
-    <view wx:if="{{state === 'error'}}">
-      <view class="btn-primary" bindtap="onRetry">重试</view>
+    <view class="found-card" wx:if="{{state === 'error'}}">
+      <view class="search-icon">⚠️</view>
+      <view class="found-name">{{error || '连接失败'}}</view>
+      <button class="retry-btn" bindtap="onRetry">重试</button>
     </view>
   </view>
 </view>
diff --git a/miniprogram/pages/ble-connect/ble-connect.wxss b/miniprogram/pages/ble-connect/ble-connect.wxss
index aa1cdd6..7841312 100644
--- a/miniprogram/pages/ble-connect/ble-connect.wxss
+++ b/miniprogram/pages/ble-connect/ble-connect.wxss
@@ -1,18 +1,78 @@
-.loading-spinner {
-  padding: 40rpx 0;
-  display: flex;
-  justify-content: center;
+.search-card {
+  background: linear-gradient(135deg, #fdf2f8 0%, #ffffff 100%);
+  border: 4rpx dashed #e5e5e5;
+  border-radius: 28rpx;
+  padding: 40rpx;
+  text-align: center;
+  margin-bottom: 28rpx;
 }
 
-.spinner {
-  width: 64rpx;
-  height: 64rpx;
-  border: 6rpx solid #eeeeee;
-  border-top-color: #333333;
+.search-icon {
+  width: 100rpx;
+  height: 100rpx;
+  background: #cccccc;
   border-radius: 50%;
-  animation: spin 0.8s linear infinite;
+  margin: 0 auto 16rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 48rpx;
+  color: #ffffff;
 }
 
-@keyframes spin {
-  to { transform: rotate(360deg); }
+.search-icon.pulsing {
+  animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.search-text {
+  font-size: 30rpx;
+  color: #333333;
+}
+
+.found-card {
+  background: linear-gradient(135deg, #fdf2f8 0%, #ffffff 100%);
+  border: 4rpx solid #E6508C;
+  border-radius: 28rpx;
+  padding: 40rpx;
+  text-align: center;
+  margin-bottom: 28rpx;
+}
+
+.found-icon {
+  width: 100rpx;
+  height: 100rpx;
+  background: #E6508C;
+  border-radius: 50%;
+  margin: 0 auto 16rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 48rpx;
+  color: #ffffff;
+}
+
+.found-name {
+  font-size: 30rpx;
+  color: #333333;
+  margin-bottom: 12rpx;
+}
+
+.retry-btn {
+  display: inline-block;
+  background: #E6508C;
+  color: #ffffff;
+  border: none;
+  border-radius: 20rpx;
+  padding: 16rpx 48rpx;
+  font-size: 28rpx;
+  margin-top: 16rpx;
+}
+
+.retry-btn::after {
+  border: none;
 }
diff --git a/miniprogram/pages/history/history.js b/miniprogram/pages/history/history.js
index 99734c4..9afd4fd 100644
--- a/miniprogram/pages/history/history.js
+++ b/miniprogram/pages/history/history.js
@@ -5,6 +5,8 @@ Page({
   data: {
     records: [],
     total: 0,
+    totalHours: 0,
+    monthCount: 0,
     page: 1,
     pageSize: 20,
     loading: true,
@@ -41,18 +43,30 @@ Page({
       page: page,
       page_size: self.data.pageSize
     }).then(function (data) {
+      var totalMs = 0
+      var now = new Date()
+      var monthStart = new Date(now.getFullYear(), now.getMonth(), 1)
+      var monthCount = 0
+
       var records = (data.records || []).map(function (r) {
         var durationMin = Math.floor((r.total_duration_ms || 0) / 60000)
+        totalMs += (r.total_duration_ms || 0)
         r.duration_text = durationMin + '分钟'
         r.region_names = ble.getRegionName(r.regions || 0).join('、')
         r.wavelength_name = ble.getWavelengthName(r.wavelength || 2)
         r.date_text = r.start_time ? r.start_time.slice(0, 10) : ''
+
+        if (r.start_time && new Date(r.start_time) >= monthStart) {
+          monthCount++
+        }
         return r
       })
 
       self.setData({
         records: refresh ? records : self.data.records.concat(records),
         total: data.total || 0,
+        totalHours: Math.round(totalMs / 3600000),
+        monthCount: monthCount,
         page: page,
         loading: false,
         loadingMore: false
diff --git a/miniprogram/pages/history/history.json b/miniprogram/pages/history/history.json
index 0fcc4c7..733e3df 100644
--- a/miniprogram/pages/history/history.json
+++ b/miniprogram/pages/history/history.json
@@ -1,3 +1,5 @@
 {
-  "navigationBarTitleText": "护理记录"
+  "navigationBarTitleText": "护理记录",
+  "navigationBarBackgroundColor": "#E6508C",
+  "navigationBarTextStyle": "white"
 }
diff --git a/miniprogram/pages/history/history.wxml b/miniprogram/pages/history/history.wxml
index d39d207..e449f31 100644
--- a/miniprogram/pages/history/history.wxml
+++ b/miniprogram/pages/history/history.wxml
@@ -1,26 +1,38 @@
-<view class="container">
-  <view wx:if="{{loading}}" class="empty-state">
-    <text class="text-muted">加载中...</text>
+<view class="page">
+  <view class="page-header page-header-pink">
+    <view class="page-header-title">护理记录</view>
+    <view class="page-header-subtitle">查看历史护理数据</view>
   </view>
 
-  <view wx:elif="{{records.length === 0}}" class="empty-state">
-    <view class="empty-icon">&#128209;</view>
-    <view class="empty-text">暂无护理记录</view>
-  </view>
-
-  <view wx:else>
-    <view class="record-count text-muted mb-20">共 {{total}} 条记录</view>
-
-    <view wx:for="{{records}}" wx:key="record_id" class="card record-card">
-      <view class="flex-between mb-10">
-        <text class="record-date">{{item.date_text}}</text>
-        <text class="record-duration">{{item.duration_text}}</text>
+  <view class="page-content">
+    <view class="stats-row">
+      <view class="stat-card">
+        <view class="stat-value">{{total}}</view>
+        <view class="stat-label">累计次数</view>
+      </view>
+      <view class="stat-card">
+        <view class="stat-value">{{totalHours}}h</view>
+        <view class="stat-label">累计时长</view>
+      </view>
+      <view class="stat-card">
+        <view class="stat-value">{{monthCount}}</view>
+        <view class="stat-label">本月次数</view>
       </view>
-      <view class="text-muted record-regions">{{item.region_names}}</view>
     </view>
 
-    <view wx:if="{{loadingMore}}" class="text-center text-muted mt-20">
-      加载更多...
+    <view class="section-title">最近记录</view>
+
+    <view class="record-item" wx:for="{{records}}" wx:key="session_id">
+      <view class="record-date">{{item.date_text}}</view>
+      <text class="record-mode {{item.mode === 1 ? 'smart' : 'normal'}}">{{item.mode === 1 ? '✨ 智能' : '🔄 普通'}}</text>
+      <view class="record-details">{{item.duration_text}}</view>
     </view>
+
+    <view class="empty-state" wx:if="{{!loading && records.length === 0}}">
+      <text class="empty-icon">📃</text>
+      <view class="empty-text">暂无护理记录</view>
+    </view>
+
+    <view class="loading-more" wx:if="{{loadingMore}}">加载更多...</view>
   </view>
 </view>
diff --git a/miniprogram/pages/history/history.wxss b/miniprogram/pages/history/history.wxss
index e764761..43ab6c2 100644
--- a/miniprogram/pages/history/history.wxss
+++ b/miniprogram/pages/history/history.wxss
@@ -1,22 +1,94 @@
-.record-count {
-  font-size: 24rpx;
+.stats-row {
+  display: flex;
+  gap: 16rpx;
+  margin-bottom: 28rpx;
 }
 
-.record-card {
-  padding: 24rpx 32rpx;
+.stat-card {
+  flex: 1;
+  background: #f8f8f8;
+  border-radius: 20rpx;
+  padding: 20rpx 12rpx;
+  text-align: center;
+}
+
+.stat-value {
+  font-size: 40rpx;
+  font-weight: 600;
+  color: #E6508C;
+}
+
+.stat-label {
+  font-size: 22rpx;
+  color: #999999;
+  margin-top: 4rpx;
+}
+
+.section-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #333333;
+  margin-bottom: 20rpx;
+}
+
+.record-item {
+  display: flex;
+  align-items: center;
+  padding: 24rpx;
+  margin-bottom: 12rpx;
+  background: #ffffff;
+  border-radius: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
 }
 
 .record-date {
-  font-size: 28rpx;
-  font-weight: 500;
-}
-
-.record-duration {
   font-size: 26rpx;
+  font-weight: 500;
   color: #333333;
+  flex: 1;
 }
 
-.record-regions {
+.record-mode {
+  font-size: 20rpx;
+  padding: 4rpx 14rpx;
+  border-radius: 12rpx;
+}
+
+.record-mode.smart {
+  background: #fdf2f8;
+  color: #E6508C;
+}
+
+.record-mode.normal {
+  background: #f0f0f0;
+  color: #666666;
+}
+
+.record-details {
+  font-size: 22rpx;
+  color: #999999;
+  margin-left: 12rpx;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 120rpx 40rpx;
+}
+
+.empty-icon {
+  font-size: 80rpx;
+  display: block;
+  margin-bottom: 16rpx;
+}
+
+.empty-text {
+  color: #999999;
+  font-size: 28rpx;
+}
+
+.loading-more {
+  text-align: center;
   font-size: 24rpx;
-  margin-top: 4rpx;
+  color: #999999;
+  padding: 20rpx 0;
 }
diff --git a/miniprogram/pages/index/index.json b/miniprogram/pages/index/index.json
index dac4751..7758deb 100644
--- a/miniprogram/pages/index/index.json
+++ b/miniprogram/pages/index/index.json
@@ -1,3 +1,5 @@
 {
-  "navigationBarTitleText": "首页"
+  "navigationBarTitleText": "首页",
+  "navigationBarBackgroundColor": "#E6508C",
+  "navigationBarTextStyle": "white"
 }
diff --git a/miniprogram/pages/index/index.wxml b/miniprogram/pages/index/index.wxml
index 69a08f9..cc8d40b 100644
--- a/miniprogram/pages/index/index.wxml
+++ b/miniprogram/pages/index/index.wxml
@@ -1,52 +1,30 @@
-<view class="container">
-  <view class="card device-card" wx:if="{{!hasDevice}}">
-    <view class="text-center">
-      <view class="section-title">添加设备</view>
-      <view class="text-muted mb-30">您还没有绑定设备</view>
-      <view class="btn-primary" bindtap="onAddDevice">扫码添加设备</view>
+<view class="page">
+  <view class="page-header page-header-pink">
+    <view class="page-header-title">首页</view>
+    <view class="page-header-subtitle">光子美容仪</view>
+  </view>
+
+  <view class="page-content" wx:if="{{!hasDevice}}">
+    <view class="empty-device">
+      <text class="empty-icon">📱</text>
+      <view class="empty-text">还没有绑定设备</view>
+      <button class="btn-primary mt-30" bindtap="onAddDevice">扫码添加设备</button>
     </view>
   </view>
 
-  <view class="card device-card" wx:if="{{hasDevice}}">
-    <view class="flex-between mb-20">
-      <view>
-        <view class="device-name">{{deviceName}}</view>
-        <view class="device-status">
-          <text class="{{connected ? 'text-success' : 'text-muted'}}">
-            {{connected ? '已连接' : bleState === 'scanning' ? '扫描中...' : bleState === 'connecting' ? '连接中...' : '未连接'}}
-          </text>
-        </view>
-      </view>
-      <view wx:if="{{connected}}" class="battery-area">
-        <text>{{battery}}%</text>
+  <view class="page-content" wx:if="{{hasDevice}}">
+    <view class="device-card">
+      <view class="device-icon">💆</view>
+      <view class="device-name">{{deviceName || '我的光面膜'}}</view>
+      <text class="status-badge status-badge-green" wx:if="{{connected}}">已连接</text>
+      <text class="status-badge" style="background:#ccc;" wx:else>未连接</text>
+      <view class="device-battery" wx:if="{{connected}}">
+        <text>🔋</text>
+        <text>电量 {{battery}}%</text>
       </view>
     </view>
 
-    <view wx:if="{{!connected && bleState !== 'scanning' && bleState !== 'connecting'}}" class="mt-20">
-      <view class="btn-secondary" bindtap="onConnectBle">连接设备</view>
-    </view>
-
-    <view wx:if="{{connected}}" class="mt-20">
-      <view class="text-muted">设备状态: {{modeState}}</view>
-    </view>
-  </view>
-
-  <view class="card sub-card" bindtap="onViewSubscription">
-    <view class="flex-between">
-      <view>
-        <view class="section-title">订阅状态</view>
-        <view class="text-muted">
-          <block wx:if="{{subscription && subscription.status > 0}}">
-            {{subscription.status === 1 ? '试用中' : '已订阅'}} · 剩余 {{subRemaining}} 天
-          </block>
-          <block wx:else>未订阅</block>
-        </view>
-      </view>
-      <text class="arrow">&#10095;</text>
-    </view>
-  </view>
-
-  <view class="card" wx:if="{{connected && subscription && subscription.status > 0}}">
-    <view class="btn-primary text-center" bindtap="onStartTreatment">开始护理</view>
+    <button class="btn-primary" bindtap="onStartTreatment">开始护理</button>
+    <button class="btn-secondary" bindtap="onAddDevice">设备管理</button>
   </view>
 </view>
diff --git a/miniprogram/pages/index/index.wxss b/miniprogram/pages/index/index.wxss
index 7c59bfd..6af5421 100644
--- a/miniprogram/pages/index/index.wxss
+++ b/miniprogram/pages/index/index.wxss
@@ -1,23 +1,20 @@
-.device-name {
-  font-size: 32rpx;
-  font-weight: 600;
-  margin-bottom: 8rpx;
+.empty-device {
+  text-align: center;
+  padding: 120rpx 40rpx;
 }
 
-.device-status {
-  font-size: 24rpx;
+.empty-icon {
+  font-size: 120rpx;
+  display: block;
+  margin-bottom: 24rpx;
 }
 
-.battery-area {
+.empty-text {
+  color: #999999;
   font-size: 28rpx;
-  color: #333333;
 }
 
-.arrow {
-  font-size: 28rpx;
-  color: #cccccc;
-}
-
-.sub-card:active {
-  background-color: #f9f9f9;
+.btn-primary::after,
+.btn-secondary::after {
+  border: none;
 }
diff --git a/miniprogram/pages/login/login.wxml b/miniprogram/pages/login/login.wxml
index 80ad673..f2956b7 100644
--- a/miniprogram/pages/login/login.wxml
+++ b/miniprogram/pages/login/login.wxml
@@ -1,16 +1,22 @@
-<view class="login-page">
-  <view class="logo-area">
-    <view class="logo-circle">
-      <text class="logo-text">H</text>
-    </view>
-    <text class="app-name">光子美容仪</text>
-    <text class="app-desc">智能护肤 专业管理</text>
+<view class="page">
+  <view class="page-header page-header-pink">
+    <view class="page-header-title">光子美容仪</view>
+    <view class="page-header-subtitle">微信授权登录</view>
   </view>
 
-  <view class="btn-area">
-    <button class="btn-wechat" loading="{{loading}}" bindtap="onLogin" disabled="{{loading}}">
-      微信一键登录
+  <view class="page-content">
+    <view class="welcome-text">欢迎使用光子美容仪</view>
+
+    <view class="flower-area">
+      <text class="flower">🌸</text>
+      <view class="desc">获取你的手机号</view>
+      <view class="desc">提供更好的服务</view>
+    </view>
+
+    <button class="login-btn" loading="{{loading}}" bindtap="onLogin" disabled="{{loading}}">
+      微信授权登录
     </button>
-    <text class="agreement">登录即同意《用户协议》和《隐私政策》</text>
+
+    <view class="agreement">登录即表示同意《用户协议》和《隐私政策》</view>
   </view>
 </view>
diff --git a/miniprogram/pages/login/login.wxss b/miniprogram/pages/login/login.wxss
index 69bdd70..c15dc33 100644
--- a/miniprogram/pages/login/login.wxss
+++ b/miniprogram/pages/login/login.wxss
@@ -1,86 +1,54 @@
-.login-page {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0 60rpx;
-  padding-top: 200rpx;
-  padding-bottom: calc(80rpx + env(safe-area-inset-bottom));
-  box-sizing: border-box;
-  background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
+.page {
+  min-height: 100vh;
+  background: #ffffff;
 }
 
-.logo-area {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.logo-circle {
-  width: 160rpx;
-  height: 160rpx;
-  border-radius: 50%;
-  background-color: #333333;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 32rpx;
-}
-
-.logo-text {
-  font-size: 72rpx;
-  color: #ffffff;
-  font-weight: 700;
-}
-
-.app-name {
+.welcome-text {
   font-size: 40rpx;
   font-weight: 600;
   color: #333333;
-  margin-bottom: 12rpx;
-}
-
-.app-desc {
-  font-size: 26rpx;
-  color: #999999;
-}
-
-.btn-area {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  padding: 40rpx 60rpx calc(60rpx + env(safe-area-inset-bottom));
-  box-sizing: border-box;
-  background: linear-gradient(180deg, rgba(245,245,245,0) 0%, #f5f5f5 30%);
-}
-
-.btn-wechat {
-  width: 100%;
-  height: 88rpx;
-  line-height: 88rpx;
-  background-color: #07c160;
-  color: #ffffff;
-  font-size: 32rpx;
-  border-radius: 12rpx;
-  border: none;
-  padding: 0;
-  margin: 0;
   text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  margin-bottom: 40rpx;
 }
 
-.btn-wechat::after {
+.flower-area {
+  text-align: center;
+  padding: 40rpx 0;
+}
+
+.flower {
+  font-size: 140rpx;
+  display: block;
+  margin-bottom: 40rpx;
+}
+
+.desc {
+  color: #666666;
+  font-size: 30rpx;
+  line-height: 1.8;
+}
+
+.login-btn {
+  display: block;
+  width: 100%;
+  padding: 32rpx;
+  background: #E6508C;
+  color: #ffffff;
+  border: none;
+  border-radius: 20rpx;
+  font-size: 32rpx;
+  font-weight: 600;
+  text-align: center;
+  margin-top: 40rpx;
+}
+
+.login-btn::after {
   border: none;
 }
 
 .agreement {
-  font-size: 22rpx;
+  text-align: center;
+  font-size: 24rpx;
   color: #999999;
-  margin-top: 24rpx;
+  margin-top: 32rpx;
 }
diff --git a/miniprogram/pages/profile/profile.json b/miniprogram/pages/profile/profile.json
index 4ec55be..adc3d6c 100644
--- a/miniprogram/pages/profile/profile.json
+++ b/miniprogram/pages/profile/profile.json
@@ -1,3 +1,5 @@
 {
-  "navigationBarTitleText": "我的"
+  "navigationBarTitleText": "我的",
+  "navigationBarBackgroundColor": "#E6508C",
+  "navigationBarTextStyle": "white"
 }
diff --git a/miniprogram/pages/profile/profile.wxml b/miniprogram/pages/profile/profile.wxml
index b4357db..41295f5 100644
--- a/miniprogram/pages/profile/profile.wxml
+++ b/miniprogram/pages/profile/profile.wxml
@@ -1,43 +1,51 @@
-<view class="container">
-  <view class="card profile-header">
-    <view class="avatar-area">
-      <image wx:if="{{userInfo && userInfo.avatar}}" src="{{userInfo.avatar}}" class="avatar" />
-      <view wx:else class="avatar-placeholder">{{(userInfo && userInfo.nickname ? userInfo.nickname[0] : '?')}}</view>
-    </view>
-    <view class="user-info">
-      <view class="nickname">{{userInfo && userInfo.nickname || '未设置昵称'}}</view>
-      <view class="text-muted">ID: {{userInfo && userInfo.user_id || ''}}</view>
-    </view>
+<view class="page">
+  <view class="page-header page-header-gradient">
+    <view class="page-header-title">我的</view>
   </view>
 
-  <view class="card">
-    <view class="menu-item" bindtap="onManageDevice">
-      <text>设备管理</text>
-      <view class="flex-row">
-        <text class="text-muted">{{deviceCount}} 台设备</text>
-        <text class="arrow-sm">&#10095;</text>
+  <view class="page-content">
+    <view class="user-row">
+      <view class="user-avatar">👤</view>
+      <view class="user-info">
+        <view class="user-name">{{userInfo.nickname || '未登录'}}</view>
+        <view class="user-phone">{{userInfo.phone || ''}}</view>
       </view>
     </view>
-    <view class="divider"></view>
-    <view class="menu-item" bindtap="onViewSubscription">
-      <text>订阅管理</text>
-      <view class="flex-row">
-        <text class="text-muted">
-          {{subscription && subscription.status > 0 ? '剩余 ' + subRemaining + ' 天' : '未订阅'}}
-        </text>
-        <text class="arrow-sm">&#10095;</text>
-      </view>
-    </view>
-    <view class="divider"></view>
-    <view class="menu-item" bindtap="onViewHistory">
-      <text>护理记录</text>
-      <text class="arrow-sm">&#10095;</text>
-    </view>
-  </view>
 
-  <view class="card">
-    <view class="menu-item logout" bindtap="onLogout">
-      <text>退出登录</text>
+    <view class="sub-card" wx:if="{{subscription}}">
+      <view class="sub-left">
+        <view class="sub-name">✨ 智能模式</view>
+        <view class="sub-remain">剩余 {{subRemaining}}天</view>
+      </view>
+      <text class="status-badge status-badge-gold">试用中</text>
+    </view>
+
+    <view class="menu-list">
+      <view class="menu-item" bindtap="onManageDevice">
+        <view class="menu-icon">📱</view>
+        <view class="menu-text">我的设备</view>
+        <text class="menu-arrow">›</text>
+      </view>
+      <view class="menu-item" bindtap="onViewHistory">
+        <view class="menu-icon">📋</view>
+        <view class="menu-text">护理记录</view>
+        <text class="menu-arrow">›</text>
+      </view>
+      <view class="menu-item" bindtap="onViewSubscription">
+        <view class="menu-icon">💳</view>
+        <view class="menu-text">订阅管理</view>
+        <text class="menu-arrow">›</text>
+      </view>
+      <view class="menu-item">
+        <view class="menu-icon">❓</view>
+        <view class="menu-text">使用帮助</view>
+        <text class="menu-arrow">›</text>
+      </view>
+      <view class="menu-item">
+        <view class="menu-icon">📞</view>
+        <view class="menu-text">联系我们</view>
+        <text class="menu-arrow">›</text>
+      </view>
     </view>
   </view>
 </view>
diff --git a/miniprogram/pages/profile/profile.wxss b/miniprogram/pages/profile/profile.wxss
index 617b3a2..b535093 100644
--- a/miniprogram/pages/profile/profile.wxss
+++ b/miniprogram/pages/profile/profile.wxss
@@ -1,60 +1,99 @@
-.profile-header {
+.user-row {
   display: flex;
   align-items: center;
-  padding: 40rpx 32rpx;
+  gap: 20rpx;
+  padding: 24rpx;
+  background: linear-gradient(135deg, #E6508C 0%, #DCB982 100%);
+  border-radius: 24rpx;
+  margin-bottom: 24rpx;
 }
 
-.avatar-area {
-  margin-right: 24rpx;
-}
-
-.avatar {
-  width: 96rpx;
-  height: 96rpx;
+.user-avatar {
+  width: 88rpx;
+  height: 88rpx;
+  background: #ffffff;
   border-radius: 50%;
-}
-
-.avatar-placeholder {
-  width: 96rpx;
-  height: 96rpx;
-  border-radius: 50%;
-  background-color: #333333;
-  color: #ffffff;
-  font-size: 40rpx;
   display: flex;
   align-items: center;
   justify-content: center;
+  font-size: 44rpx;
+  flex-shrink: 0;
 }
 
-.user-info {
+.user-name {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #ffffff;
+}
+
+.user-phone {
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.sub-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24rpx;
+  background: #ffffff;
+  border-radius: 20rpx;
+  margin-bottom: 24rpx;
+  border: 2rpx solid #DCB982;
+}
+
+.sub-left {
   flex: 1;
 }
 
-.nickname {
-  font-size: 34rpx;
-  font-weight: 600;
-  margin-bottom: 4rpx;
+.sub-name {
+  font-size: 26rpx;
+  color: #333333;
+}
+
+.sub-remain {
+  font-size: 24rpx;
+  color: #999999;
+  margin-top: 4rpx;
+}
+
+.menu-list {
+  background: #ffffff;
+  border-radius: 24rpx;
+  overflow: hidden;
 }
 
 .menu-item {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 24rpx 0;
-  font-size: 28rpx;
+  padding: 24rpx;
+  border-bottom: 2rpx solid #f5f5f5;
 }
 
-.menu-item:active {
-  opacity: 0.7;
+.menu-item:last-child {
+  border-bottom: none;
 }
 
-.arrow-sm {
-  font-size: 24rpx;
-  color: #cccccc;
-  margin-left: 8rpx;
-}
-
-.logout {
-  color: #ff4d4f;
+.menu-icon {
+  width: 52rpx;
+  height: 52rpx;
+  background: #fdf2f8;
+  border-radius: 12rpx;
+  display: flex;
+  align-items: center;
   justify-content: center;
+  font-size: 28rpx;
+  margin-right: 16rpx;
+  flex-shrink: 0;
+}
+
+.menu-text {
+  flex: 1;
+  font-size: 26rpx;
+  color: #333333;
+}
+
+.menu-arrow {
+  color: #cccccc;
+  font-size: 32rpx;
 }
diff --git a/miniprogram/pages/scan/scan.js b/miniprogram/pages/scan/scan.js
index 34bdd21..f817b83 100644
--- a/miniprogram/pages/scan/scan.js
+++ b/miniprogram/pages/scan/scan.js
@@ -52,5 +52,24 @@ Page({
         error: err.message || '绑定失败'
       })
     })
+  },
+
+  onManualInput: function () {
+    var self = this
+    wx.showModal({
+      title: '手动输入设备号',
+      editable: true,
+      placeholderText: '请输入16位设备ID',
+      success: function (res) {
+        if (res.confirm && res.content) {
+          var deviceId = res.content.trim()
+          if (/^[0-9A-Fa-f]{16}$/.test(deviceId)) {
+            self.bindDevice(deviceId)
+          } else {
+            wx.showToast({ title: '设备号格式不正确', icon: 'none' })
+          }
+        }
+      }
+    })
   }
 })
diff --git a/miniprogram/pages/scan/scan.json b/miniprogram/pages/scan/scan.json
index ebd6c2f..369c23d 100644
--- a/miniprogram/pages/scan/scan.json
+++ b/miniprogram/pages/scan/scan.json
@@ -1,3 +1,4 @@
 {
+  "navigationStyle": "custom",
   "navigationBarTitleText": "扫码绑定"
 }
diff --git a/miniprogram/pages/scan/scan.wxml b/miniprogram/pages/scan/scan.wxml
index d8fa717..393b908 100644
--- a/miniprogram/pages/scan/scan.wxml
+++ b/miniprogram/pages/scan/scan.wxml
@@ -1,29 +1,20 @@
-<view class="container">
-  <view class="card text-center">
-    <view class="section-title">绑定新设备</view>
-    <view class="text-muted mb-30">请扫描设备底部或包装盒上的二维码</view>
-    <view class="btn-primary" bindtap="onScan" disabled="{{scanning}}">
-      {{scanning ? '扫描中...' : '扫描二维码'}}
-    </view>
+<view class="page">
+  <view class="page-header page-header-pink">
+    <view class="page-header-title">扫码绑定</view>
+    <view class="page-header-subtitle">扫描设备底部二维码</view>
   </view>
 
-  <view class="card" wx:if="{{error}}">
-    <text class="text-error">{{error}}</text>
-  </view>
+  <view class="page-content">
+    <view class="scan-area">
+      <text class="scan-icon">📷</text>
+      <text class="scan-text">扫描设备二维码</text>
+    </view>
 
-  <view class="card">
-    <view class="section-title">绑定步骤</view>
-    <view class="step">
-      <text class="step-num">1</text>
-      <text class="step-text">扫描设备二维码获取设备ID</text>
-    </view>
-    <view class="step">
-      <text class="step-num">2</text>
-      <text class="step-text">打开蓝牙连接设备</text>
-    </view>
-    <view class="step">
-      <text class="step-num">3</text>
-      <text class="step-text">绑定成功，开始使用</text>
-    </view>
+    <button class="btn-primary" bindtap="onScan" disabled="{{scanning}}">
+      {{scanning ? '扫描中...' : '扫码'}}
+    </button>
+    <button class="btn-secondary" bindtap="onManualInput">手动输入设备号</button>
+
+    <view class="error-text" wx:if="{{error}}">{{error}}</view>
   </view>
 </view>
diff --git a/miniprogram/pages/scan/scan.wxss b/miniprogram/pages/scan/scan.wxss
index 75c8b29..6aac154 100644
--- a/miniprogram/pages/scan/scan.wxss
+++ b/miniprogram/pages/scan/scan.wxss
@@ -1,23 +1,32 @@
-.step {
+.scan-area {
+  width: 300rpx;
+  height: 300rpx;
+  margin: 40rpx auto;
+  border: 6rpx dashed #E6508C;
+  border-radius: 24rpx;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  padding: 16rpx 0;
+  justify-content: center;
+  color: #E6508C;
 }
 
-.step-num {
-  width: 48rpx;
-  height: 48rpx;
-  border-radius: 50%;
-  background-color: #333333;
-  color: #ffffff;
-  font-size: 24rpx;
-  text-align: center;
-  line-height: 48rpx;
-  margin-right: 20rpx;
-  flex-shrink: 0;
+.scan-icon {
+  font-size: 100rpx;
+  margin-bottom: 20rpx;
 }
 
-.step-text {
+.scan-text {
   font-size: 28rpx;
-  color: #333333;
+}
+
+.error-text {
+  text-align: center;
+  color: #ff4d4f;
+  font-size: 26rpx;
+  margin-top: 20rpx;
+}
+
+.btn-secondary::after {
+  border: none;
 }
diff --git a/miniprogram/pages/subscribe-plans/subscribe-plans.js b/miniprogram/pages/subscribe-plans/subscribe-plans.js
index 9c873ae..e3156e8 100644
--- a/miniprogram/pages/subscribe-plans/subscribe-plans.js
+++ b/miniprogram/pages/subscribe-plans/subscribe-plans.js
@@ -3,9 +3,8 @@ var http = require('../../utils/request')
 Page({
   data: {
     plans: [
-      { name: '月度套餐', plan: 'monthly', days: 30, price: '¥29.9', desc: '30天畅享' },
-      { name: '季度套餐', plan: 'quarterly', days: 90, price: '¥79.9', desc: '90天畅享' },
-      { name: '年度套餐', plan: 'yearly', days: 365, price: '¥269', desc: '365天畅享' }
+      { plan: 'monthly', price: '¥99', desc: '约3.3元/天' },
+      { plan: 'yearly', price: '¥899', desc: '省¥289' }
     ],
     selected: null,
     purchasing: false
diff --git a/miniprogram/pages/subscribe-plans/subscribe-plans.json b/miniprogram/pages/subscribe-plans/subscribe-plans.json
index 89929bc..766458d 100644
--- a/miniprogram/pages/subscribe-plans/subscribe-plans.json
+++ b/miniprogram/pages/subscribe-plans/subscribe-plans.json
@@ -1,3 +1,4 @@
 {
+  "navigationStyle": "custom",
   "navigationBarTitleText": "订阅套餐"
 }
diff --git a/miniprogram/pages/subscribe-plans/subscribe-plans.wxml b/miniprogram/pages/subscribe-plans/subscribe-plans.wxml
index 9babf51..0530ff2 100644
--- a/miniprogram/pages/subscribe-plans/subscribe-plans.wxml
+++ b/miniprogram/pages/subscribe-plans/subscribe-plans.wxml
@@ -1,15 +1,38 @@
-<view class="container">
-  <view wx:for="{{plans}}" wx:key="plan"
-        class="card plan-card {{selected === item.plan ? 'plan-active' : ''}}"
-        bindtap="onSelect" data-plan="{{item.plan}}">
-    <view class="plan-name">{{item.name}}</view>
-    <view class="plan-price">{{item.price}}</view>
-    <view class="plan-desc text-muted">{{item.desc}}</view>
+<view class="page">
+  <view class="page-header page-header-gold">
+    <view class="page-header-title">订阅服务</view>
+    <view class="page-header-subtitle">解锁智能模式</view>
   </view>
 
-  <view class="btn-area-fixed">
-    <view class="btn-primary" bindtap="onPurchase" disabled="{{purchasing || !selected}}">
-      {{purchasing ? '处理中...' : '立即订阅'}}
+  <view class="page-content">
+    <view class="page-title">选择订阅套餐</view>
+
+    <view class="service-card">
+      <view class="service-icon">✨</view>
+      <view class="service-info">
+        <view class="service-name">智能模式</view>
+        <view class="service-desc">根据皮肤状态自动调节</view>
+      </view>
     </view>
+
+    <view class="plans">
+      <view class="plan {{selected === 'monthly' ? 'selected' : ''}}" bindtap="onSelect" data-plan="monthly">
+        <view class="plan-price">¥99</view>
+        <view class="plan-name">月卡</view>
+        <view class="plan-save">约3.3元/天</view>
+      </view>
+      <view class="plan {{selected === 'yearly' ? 'selected' : ''}}" bindtap="onSelect" data-plan="yearly">
+        <view class="plan-tag" wx:if="{{selected !== 'yearly'}}">推荐</view>
+        <view class="plan-tag plan-tag-active" wx:else>推荐</view>
+        <view class="plan-price">¥899</view>
+        <view class="plan-name">年卡</view>
+        <view class="plan-save">省¥289</view>
+      </view>
+    </view>
+
+    <button class="btn-primary btn-primary-gold" bindtap="onPurchase" disabled="{{purchasing}}" loading="{{purchasing}}">
+      确认支付
+    </button>
+    <view class="agreement">支付即表示同意《订阅协议》</view>
   </view>
 </view>
diff --git a/miniprogram/pages/subscribe-plans/subscribe-plans.wxss b/miniprogram/pages/subscribe-plans/subscribe-plans.wxss
index a36182a..b746d81 100644
--- a/miniprogram/pages/subscribe-plans/subscribe-plans.wxss
+++ b/miniprogram/pages/subscribe-plans/subscribe-plans.wxss
@@ -1,27 +1,94 @@
-.plan-card {
-  text-align: center;
-  border: 2rpx solid #eeeeee;
-  transition: border-color 0.2s;
+.service-card {
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+  padding: 24rpx;
+  background: #fff9e6;
+  border: 2rpx solid #DCB982;
+  border-radius: 20rpx;
+  margin-bottom: 24rpx;
 }
 
-.plan-active {
-  border-color: #333333;
-  background-color: #fafafa;
+.service-icon {
+  width: 76rpx;
+  height: 76rpx;
+  background: #DCB982;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  font-size: 36rpx;
+  flex-shrink: 0;
 }
 
-.plan-name {
-  font-size: 32rpx;
+.service-name {
+  font-size: 28rpx;
   font-weight: 600;
-  margin-bottom: 12rpx;
+  color: #333333;
+}
+
+.service-desc {
+  font-size: 22rpx;
+  color: #666666;
+}
+
+.plans {
+  display: flex;
+  gap: 20rpx;
+  margin-bottom: 24rpx;
+}
+
+.plan {
+  flex: 1;
+  padding: 24rpx 16rpx;
+  border: 4rpx solid #e5e5e5;
+  border-radius: 20rpx;
+  text-align: center;
+  position: relative;
+}
+
+.plan.selected {
+  border-color: #E6508C;
+  background: #fdf2f8;
+}
+
+.plan-tag {
+  position: absolute;
+  right: -8rpx;
+  top: -8rpx;
+  background: #E6508C;
+  color: #ffffff;
+  font-size: 18rpx;
+  padding: 4rpx 12rpx;
+  border-radius: 12rpx;
 }
 
 .plan-price {
-  font-size: 48rpx;
-  font-weight: 700;
+  font-size: 36rpx;
+  font-weight: 600;
   color: #333333;
-  margin-bottom: 8rpx;
 }
 
-.plan-desc {
-  font-size: 24rpx;
+.plan-name {
+  font-size: 22rpx;
+  color: #999999;
+  margin-top: 4rpx;
+}
+
+.plan-save {
+  font-size: 20rpx;
+  color: #52c41a;
+  margin-top: 4rpx;
+}
+
+.agreement {
+  text-align: center;
+  font-size: 22rpx;
+  color: #999999;
+  margin-top: 20rpx;
+}
+
+.btn-primary-gold::after {
+  border: none;
 }
diff --git a/miniprogram/pages/subscribe-prompt/subscribe-prompt.json b/miniprogram/pages/subscribe-prompt/subscribe-prompt.json
index ebf5a93..2bf3233 100644
--- a/miniprogram/pages/subscribe-prompt/subscribe-prompt.json
+++ b/miniprogram/pages/subscribe-prompt/subscribe-prompt.json
@@ -1,3 +1,4 @@
 {
+  "navigationStyle": "custom",
   "navigationBarTitleText": "订阅提示"
 }
diff --git a/miniprogram/pages/subscribe-prompt/subscribe-prompt.wxml b/miniprogram/pages/subscribe-prompt/subscribe-prompt.wxml
index d8bd786..3954055 100644
--- a/miniprogram/pages/subscribe-prompt/subscribe-prompt.wxml
+++ b/miniprogram/pages/subscribe-prompt/subscribe-prompt.wxml
@@ -1,9 +1,34 @@
-<view class="container">
-  <view class="card text-center">
-    <view class="lock-icon">&#128274;</view>
-    <view class="section-title">需要订阅</view>
-    <view class="text-muted mb-30">您的试用已到期，请订阅后继续使用</view>
-    <view class="btn-primary mb-20" bindtap="onViewPlans">查看套餐</view>
-    <view class="btn-secondary" bindtap="onBack">返回首页</view>
+<view class="page">
+  <view class="page-header page-header-pink">
+    <view class="page-header-title">护理设置</view>
+    <view class="page-header-subtitle">试用期已结束</view>
+  </view>
+
+  <view class="page-content">
+    <view class="page-title">选择护理模式</view>
+
+    <view class="mode-selector">
+      <view class="mode-option active">
+        <text class="mode-icon">🔄</text>
+        <view class="mode-label">普通模式</view>
+        <view class="mode-sub">6色循环</view>
+      </view>
+      <view class="mode-option locked">
+        <text class="mode-icon">🔒</text>
+        <view class="mode-label">智能模式</view>
+        <view class="mode-sub">订阅解锁</view>
+      </view>
+    </view>
+
+    <view class="tip-card">
+      <text class="tip-card-icon">⏰</text>
+      <view class="tip-card-body">
+        <view class="tip-card-title">试用已结束</view>
+        <view class="tip-card-sub">订阅后继续使用智能模式</view>
+      </view>
+    </view>
+
+    <button class="btn-primary btn-primary-gold" bindtap="onViewPlans">立即订阅</button>
+    <button class="btn-secondary" bindtap="onBack">先使用普通模式</button>
   </view>
 </view>
diff --git a/miniprogram/pages/subscribe-prompt/subscribe-prompt.wxss b/miniprogram/pages/subscribe-prompt/subscribe-prompt.wxss
index 98f59cb..9482e0d 100644
--- a/miniprogram/pages/subscribe-prompt/subscribe-prompt.wxss
+++ b/miniprogram/pages/subscribe-prompt/subscribe-prompt.wxss
@@ -1,4 +1,48 @@
-.lock-icon {
-  font-size: 80rpx;
-  margin: 40rpx auto;
+.mode-selector {
+  display: flex;
+  gap: 20rpx;
+  margin-bottom: 24rpx;
+}
+
+.mode-option {
+  flex: 1;
+  padding: 24rpx 16rpx;
+  border: 4rpx solid #e5e5e5;
+  border-radius: 20rpx;
+  text-align: center;
+}
+
+.mode-option.active {
+  border-color: #E6508C;
+  background: #fdf2f8;
+}
+
+.mode-option.locked {
+  opacity: 0.7;
+}
+
+.mode-icon {
+  font-size: 40rpx;
+  display: block;
+  margin-bottom: 6rpx;
+}
+
+.mode-label {
+  font-size: 26rpx;
+  color: #333333;
+}
+
+.mode-option.locked .mode-label {
+  color: #999999;
+}
+
+.mode-sub {
+  font-size: 20rpx;
+  color: #999999;
+  margin-top: 4rpx;
+}
+
+.btn-primary-gold::after,
+.btn-secondary::after {
+  border: none;
 }
diff --git a/miniprogram/pages/subscribe-success/subscribe-success.js b/miniprogram/pages/subscribe-success/subscribe-success.js
index 9d2578c..e40f0ca 100644
--- a/miniprogram/pages/subscribe-success/subscribe-success.js
+++ b/miniprogram/pages/subscribe-success/subscribe-success.js
@@ -1,6 +1,10 @@
 Page({
   data: {},
 
+  onStartSmart: function () {
+    wx.navigateTo({ url: '/pages/treatment-setup/treatment-setup' })
+  },
+
   onBackHome: function () {
     wx.switchTab({ url: '/pages/index/index' })
   }
diff --git a/miniprogram/pages/subscribe-success/subscribe-success.json b/miniprogram/pages/subscribe-success/subscribe-success.json
index 9bba5d3..04a6d8a 100644
--- a/miniprogram/pages/subscribe-success/subscribe-success.json
+++ b/miniprogram/pages/subscribe-success/subscribe-success.json
@@ -1,3 +1,4 @@
 {
+  "navigationStyle": "custom",
   "navigationBarTitleText": "订阅成功"
 }
diff --git a/miniprogram/pages/subscribe-success/subscribe-success.wxml b/miniprogram/pages/subscribe-success/subscribe-success.wxml
index be73539..3bc2a1e 100644
--- a/miniprogram/pages/subscribe-success/subscribe-success.wxml
+++ b/miniprogram/pages/subscribe-success/subscribe-success.wxml
@@ -1,8 +1,24 @@
-<view class="container">
-  <view class="card text-center">
-    <view class="success-icon">&#10003;</view>
-    <view class="section-title">订阅成功</view>
-    <view class="text-muted mb-30">您已成功订阅，现在可以开始使用</view>
-    <view class="btn-primary" bindtap="onBackHome">返回首页</view>
+<view class="page">
+  <view class="page-header page-header-green">
+    <view class="page-header-title">订阅成功</view>
+    <view class="page-header-subtitle">欢迎使用智能模式</view>
+  </view>
+
+  <view class="page-content">
+    <view class="success-area">
+      <view class="success-icon">✓</view>
+      <view class="success-title">订阅成功！</view>
+    </view>
+
+    <view class="sub-card">
+      <view class="sub-header">
+        <text class="sub-name">✨ 年卡会员</text>
+        <text class="sub-status status-badge status-badge-green">已订阅</text>
+      </view>
+      <view class="sub-info">有效期至：2027年4月8日</view>
+    </view>
+
+    <button class="btn-primary btn-primary-gold" bindtap="onStartSmart">立即体验智能模式</button>
+    <button class="btn-secondary btn-secondary-gold" bindtap="onBackHome">返回首页</button>
   </view>
 </view>
diff --git a/miniprogram/pages/subscribe-success/subscribe-success.wxss b/miniprogram/pages/subscribe-success/subscribe-success.wxss
index 3156779..90d0b3d 100644
--- a/miniprogram/pages/subscribe-success/subscribe-success.wxss
+++ b/miniprogram/pages/subscribe-success/subscribe-success.wxss
@@ -1,11 +1,35 @@
-.success-icon {
-  width: 120rpx;
-  height: 120rpx;
-  border-radius: 50%;
-  background-color: #52c41a;
-  color: #ffffff;
-  font-size: 72rpx;
-  line-height: 120rpx;
+.success-area {
   text-align: center;
-  margin: 40rpx auto;
+  padding: 60rpx 0;
+}
+
+.sub-card {
+  background: #ffffff;
+  border-radius: 28rpx;
+  padding: 32rpx;
+  margin-bottom: 32rpx;
+  border: 4rpx solid #DCB982;
+}
+
+.sub-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16rpx;
+}
+
+.sub-name {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #333333;
+}
+
+.sub-info {
+  font-size: 28rpx;
+  color: #666666;
+}
+
+.btn-primary-gold::after,
+.btn-secondary-gold::after {
+  border: none;
 }
diff --git a/miniprogram/pages/treating/treating.json b/miniprogram/pages/treating/treating.json
index 402296a..d7b1095 100644
--- a/miniprogram/pages/treating/treating.json
+++ b/miniprogram/pages/treating/treating.json
@@ -1,3 +1,4 @@
 {
+  "navigationStyle": "custom",
   "navigationBarTitleText": "护理中"
 }
diff --git a/miniprogram/pages/treating/treating.wxml b/miniprogram/pages/treating/treating.wxml
index 0e1cd43..7c8e76d 100644
--- a/miniprogram/pages/treating/treating.wxml
+++ b/miniprogram/pages/treating/treating.wxml
@@ -1,33 +1,31 @@
-<view class="container treating-page">
-  <view class="card text-center">
-    <view class="progress-circle">
-      <text class="progress-text">{{remainingText}}</text>
-    </view>
-    <view class="progress-bar-wrap mt-20">
-      <progress percent="{{progress}}" stroke-width="8" activeColor="#333333" />
-    </view>
+<view class="page">
+  <view class="page-header page-header-blue">
+    <view class="page-header-title">护理中</view>
+    <view class="page-header-subtitle">正在护理...</view>
   </view>
 
-  <view class="card">
-    <view class="flex-between mb-20">
-      <text>波长</text>
-      <text class="text-muted">{{wavelength === 1 ? '红外 850nm' : wavelength === 2 ? '红光 630nm' : wavelength === 3 ? '紫光 405nm' : '黄光 590nm'}}</text>
+  <view class="page-content">
+    <view class="countdown-area">
+      <text class="countdown-time">{{remainingText}}</text>
+      <view class="countdown-label">剩余时间</view>
     </view>
-    <view class="flex-between mb-20">
-      <text>模式</text>
-      <text class="text-muted">{{mode === 1 ? '智能模式' : '普通模式'}}</text>
-    </view>
-    <view class="flex-between mb-20">
-      <text>电量</text>
-      <text class="text-muted">{{battery}}%</text>
-    </view>
-    <view class="flex-between">
-      <text>温度</text>
-      <text class="text-muted">{{temperature}}°C</text>
-    </view>
-  </view>
 
-  <view class="stop-btn-area">
-    <view class="btn-stop" bindtap="onStop">结束护理</view>
+    <view class="progress-bar">
+      <view class="progress-fill" style="width: {{progress}}%;"></view>
+    </view>
+
+    <view class="mode-tag-area">
+      <text class="mode-tag">{{mode === 1 ? '✨ 智能模式' : '🔄 普通模式'}} · 全脸护理</text>
+    </view>
+
+    <view class="relax-card">
+      <text class="relax-icon">💆</text>
+      <view class="relax-text">
+        <text>请放松心情</text>
+        <text>享受护理时光</text>
+      </view>
+    </view>
+
+    <button class="btn-primary btn-primary-red" bindtap="onStop">停止护理</button>
   </view>
 </view>
diff --git a/miniprogram/pages/treating/treating.wxss b/miniprogram/pages/treating/treating.wxss
index e6b6cdc..af88997 100644
--- a/miniprogram/pages/treating/treating.wxss
+++ b/miniprogram/pages/treating/treating.wxss
@@ -1,37 +1,73 @@
-.treating-page {
+.countdown-area {
+  text-align: center;
+  padding: 60rpx 0 32rpx;
+}
+
+.countdown-time {
+  font-size: 120rpx;
+  font-weight: 700;
+  color: #E6508C;
+  display: block;
+}
+
+.countdown-label {
+  font-size: 28rpx;
+  color: #999999;
+  margin-top: 12rpx;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 16rpx;
+  background: #f0f0f0;
+  border-radius: 8rpx;
+  overflow: hidden;
+  margin-bottom: 32rpx;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #E6508C, #DCB982);
+  border-radius: 8rpx;
+}
+
+.mode-tag-area {
+  text-align: center;
+  margin-bottom: 32rpx;
+}
+
+.mode-tag {
+  display: inline-block;
+  background: #f0f9ff;
+  padding: 12rpx 28rpx;
+  border-radius: 24rpx;
+  font-size: 26rpx;
+  color: #006699;
+}
+
+.relax-card {
+  background: #f8f8f8;
+  border-radius: 24rpx;
+  padding: 36rpx;
+  margin-bottom: 32rpx;
+  text-align: center;
+}
+
+.relax-icon {
+  font-size: 72rpx;
+  display: block;
+  margin-bottom: 16rpx;
+}
+
+.relax-text {
+  font-size: 28rpx;
+  color: #666666;
+  line-height: 1.6;
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
-}
-
-.progress-circle {
-  width: 240rpx;
-  height: 240rpx;
-  border-radius: 50%;
-  border: 12rpx solid #eeeeee;
-  border-top-color: #333333;
-  display: flex;
   align-items: center;
-  justify-content: center;
-  margin: 40rpx auto;
 }
 
-.progress-text {
-  font-size: 56rpx;
-  font-weight: 700;
-  color: #333333;
-}
-
-.stop-btn-area {
-  margin-top: auto;
-  padding: 20rpx 0 60rpx;
-}
-
-.btn-stop {
-  background-color: #ff4d4f;
-  color: #ffffff;
-  border-radius: 12rpx;
-  padding: 24rpx 40rpx;
-  text-align: center;
-  font-size: 30rpx;
+.btn-primary-red::after {
+  border: none;
 }
diff --git a/miniprogram/pages/treatment-done/treatment-done.json b/miniprogram/pages/treatment-done/treatment-done.json
index 0e1bd13..de7fdc7 100644
--- a/miniprogram/pages/treatment-done/treatment-done.json
+++ b/miniprogram/pages/treatment-done/treatment-done.json
@@ -1,3 +1,4 @@
 {
+  "navigationStyle": "custom",
   "navigationBarTitleText": "护理完成"
 }
diff --git a/miniprogram/pages/treatment-done/treatment-done.wxml b/miniprogram/pages/treatment-done/treatment-done.wxml
index 10900d8..4b26495 100644
--- a/miniprogram/pages/treatment-done/treatment-done.wxml
+++ b/miniprogram/pages/treatment-done/treatment-done.wxml
@@ -1,34 +1,29 @@
-<view class="container">
-  <view class="card text-center">
-    <view class="done-icon">&#10003;</view>
-    <view class="section-title">护理完成</view>
+<view class="page">
+  <view class="page-header page-header-green">
+    <view class="page-header-title">护理完成</view>
+    <view class="page-header-subtitle">本次护理已结束</view>
   </view>
 
-  <view class="card">
-    <view class="flex-between mb-20">
-      <text>护理时长</text>
-      <text>{{durationText}}</text>
-    </view>
-    <view class="flex-between mb-20">
-      <text>护理区域</text>
-      <text class="text-muted">{{regionNames.join('、')}}</text>
-    </view>
-    <view class="flex-between">
-      <text>平均光功率密度</text>
-      <text>{{avgPd}}</text>
-    </view>
-  </view>
+  <view class="page-content">
+    <view class="result-icon">✓</view>
+    <view class="result-title">护理完成！</view>
 
-  <view class="card text-center">
-    <view wx:if="{{syncing}}" class="text-muted">
-      <view class="spinner-sm"></view>
-      <text>正在同步记录...</text>
+    <view class="result-data">
+      <view class="result-item">
+        <view class="result-value">{{durationText}}</view>
+        <view class="result-label">护理时长</view>
+      </view>
+      <view class="result-item">
+        <view class="result-value">{{regionNames.length}}</view>
+        <view class="result-label">护理区域</view>
+      </view>
     </view>
-    <view wx:elif="{{synced}}" class="text-success">记录已同步</view>
-    <view wx:else class="text-error">同步失败，可稍后在护理记录中重试</view>
-  </view>
 
-  <view class="btn-area-fixed">
-    <view class="btn-primary" bindtap="onBackHome">返回首页</view>
+    <view class="result-tip">
+      <text class="result-tip-icon">✨</text>
+      <text class="result-tip-text">本次护理已记录</text>
+    </view>
+
+    <button class="btn-primary" bindtap="onBackHome">返回首页</button>
   </view>
 </view>
diff --git a/miniprogram/pages/treatment-done/treatment-done.wxss b/miniprogram/pages/treatment-done/treatment-done.wxss
index dcce116..b9dfe05 100644
--- a/miniprogram/pages/treatment-done/treatment-done.wxss
+++ b/miniprogram/pages/treatment-done/treatment-done.wxss
@@ -1,25 +1,69 @@
-.done-icon {
+.result-icon {
   width: 120rpx;
   height: 120rpx;
+  background: #52c41a;
   border-radius: 50%;
-  background-color: #52c41a;
+  margin: 24rpx auto 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: #ffffff;
-  font-size: 72rpx;
-  line-height: 120rpx;
+  font-size: 60rpx;
+}
+
+.result-title {
   text-align: center;
-  margin: 40rpx auto;
+  font-size: 40rpx;
+  font-weight: 600;
+  color: #333333;
+  margin-bottom: 28rpx;
 }
 
-.spinner-sm {
-  width: 40rpx;
-  height: 40rpx;
-  border: 4rpx solid #eeeeee;
-  border-top-color: #333333;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-  margin: 0 auto 12rpx;
+.result-data {
+  display: flex;
+  gap: 20rpx;
+  margin-bottom: 24rpx;
 }
 
-@keyframes spin {
-  to { transform: rotate(360deg); }
+.result-item {
+  flex: 1;
+  background: #f5f5f5;
+  border-radius: 20rpx;
+  padding: 24rpx;
+  text-align: center;
+}
+
+.result-value {
+  font-size: 40rpx;
+  font-weight: 600;
+  color: #E6508C;
+}
+
+.result-label {
+  font-size: 22rpx;
+  color: #999999;
+  margin-top: 4rpx;
+}
+
+.result-tip {
+  background: #f0f9ff;
+  border-radius: 20rpx;
+  padding: 24rpx;
+  text-align: center;
+  margin-bottom: 24rpx;
+}
+
+.result-tip-icon {
+  font-size: 40rpx;
+}
+
+.result-tip-text {
+  font-size: 26rpx;
+  color: #333333;
+  margin-top: 6rpx;
+  display: block;
+}
+
+.btn-primary::after {
+  border: none;
 }
diff --git a/miniprogram/pages/treatment-setup/treatment-setup.js b/miniprogram/pages/treatment-setup/treatment-setup.js
index 93b77dd..9e6c01f 100644
--- a/miniprogram/pages/treatment-setup/treatment-setup.js
+++ b/miniprogram/pages/treatment-setup/treatment-setup.js
@@ -7,34 +7,30 @@ Page({
       { name: '右脸颊', mask: 0x02, checked: true },
       { name: '额头', mask: 0x04, checked: true },
       { name: '下巴', mask: 0x08, checked: true },
-      { name: '鼻部', mask: 0x10, checked: true },
-      { name: '左眼周', mask: 0x20, checked: false },
-      { name: '右眼周', mask: 0x40, checked: false }
-    ],
-    wavelengthOptions: [
-      { name: '红光 630nm', value: 2, desc: '抗衰修复' },
-      { name: '红外 850nm', value: 1, desc: '深层修复' },
-      { name: '紫光 405nm', value: 3, desc: '祛痘消炎' },
-      { name: '黄光 590nm', value: 4, desc: '提亮肤色' }
-    ],
-    selectedWavelength: 2,
-    brightness: 200,
-    durationOptions: [
-      { label: '5分钟', value: 300000 },
-      { label: '10分钟', value: 600000 },
-      { label: '15分钟', value: 900000 },
-      { label: '20分钟', value: 1200000 }
-    ],
-    selectedDuration: 600000,
-    modeOptions: [
-      { name: '普通模式', value: 0 },
-      { name: '智能模式', value: 1 }
+      { name: '鼻唇', mask: 0x10, checked: true }
     ],
     selectedMode: 0,
+    subExpired: false,
+    subDays: 6,
     submitting: false,
     error: ''
   },
 
+  onLoad: function () {
+    this.checkSubscription()
+  },
+
+  checkSubscription: function () {
+    var http = require('../../utils/request')
+    var self = this
+    http.get('/api/v1/subscription/status').then(function (sub) {
+      self.setData({
+        subExpired: sub.status !== 'active',
+        subDays: sub.remaining_days || 0
+      })
+    }).catch(function () {})
+  },
+
   onToggleRegion: function (e) {
     var idx = e.currentTarget.dataset.idx
     var regions = this.data.regions
@@ -42,27 +38,13 @@ Page({
     this.setData({ regions: regions })
   },
 
-  onSelectAll: function () {
-    var regions = this.data.regions.map(function (r) {
-      return Object.assign({}, r, { checked: true })
-    })
-    this.setData({ regions: regions })
-  },
-
-  onSelectWavelength: function (e) {
-    this.setData({ selectedWavelength: e.currentTarget.dataset.value })
-  },
-
-  onBrightnessChange: function (e) {
-    this.setData({ brightness: parseInt(e.detail.value) })
-  },
-
-  onSelectDuration: function (e) {
-    this.setData({ selectedDuration: e.currentTarget.dataset.value })
-  },
-
   onSelectMode: function (e) {
-    this.setData({ selectedMode: e.currentTarget.dataset.value })
+    var mode = parseInt(e.currentTarget.dataset.value)
+    if (mode === 1 && this.data.subExpired) {
+      wx.navigateTo({ url: '/pages/subscribe-prompt/subscribe-prompt' })
+      return
+    }
+    this.setData({ selectedMode: mode })
   },
 
   onStart: function () {
@@ -81,9 +63,9 @@ Page({
 
     ble.setParams({
       region_mask: mask,
-      wavelength: self.data.selectedWavelength,
-      brightness: self.data.brightness,
-      duration_ms: self.data.selectedDuration,
+      wavelength: 2,
+      brightness: 200,
+      duration_ms: 600000,
       mode: self.data.selectedMode
     }).then(function () {
       return ble.startTreatment(mask)
@@ -91,8 +73,8 @@ Page({
       self.setData({ submitting: false })
       wx.redirectTo({
         url: '/pages/treating/treating?regions=' + mask +
-          '&wavelength=' + self.data.selectedWavelength +
-          '&duration=' + self.data.selectedDuration +
+          '&wavelength=2' +
+          '&duration=600000' +
           '&mode=' + self.data.selectedMode
       })
     }).catch(function (err) {
diff --git a/miniprogram/pages/treatment-setup/treatment-setup.json b/miniprogram/pages/treatment-setup/treatment-setup.json
index 2844a1a..1b5e2ed 100644
--- a/miniprogram/pages/treatment-setup/treatment-setup.json
+++ b/miniprogram/pages/treatment-setup/treatment-setup.json
@@ -1,3 +1,4 @@
 {
+  "navigationStyle": "custom",
   "navigationBarTitleText": "护理设置"
 }
diff --git a/miniprogram/pages/treatment-setup/treatment-setup.wxml b/miniprogram/pages/treatment-setup/treatment-setup.wxml
index b655677..51c1bf5 100644
--- a/miniprogram/pages/treatment-setup/treatment-setup.wxml
+++ b/miniprogram/pages/treatment-setup/treatment-setup.wxml
@@ -1,62 +1,40 @@
-<view class="container">
-  <view class="card">
-    <view class="section-title">护理区域</view>
-    <view class="region-grid">
-      <view wx:for="{{regions}}" wx:key="mask" class="region-item {{item.checked ? 'region-active' : ''}}"
-            bindtap="onToggleRegion" data-idx="{{index}}">
-        <text>{{item.name}}</text>
+<view class="page">
+  <view class="page-header page-header-pink">
+    <view class="page-header-title">护理设置</view>
+    <view class="page-header-subtitle">选择模式和区域</view>
+  </view>
+
+  <view class="page-content">
+    <view class="page-title">选择护理模式</view>
+
+    <view class="mode-selector">
+      <view class="mode-option {{selectedMode === 0 ? 'active' : ''}}" bindtap="onSelectMode" data-value="0">
+        <text class="mode-icon">🔄</text>
+        <view class="mode-label">普通模式</view>
+        <view class="mode-sub">6色循环</view>
+      </view>
+      <view class="mode-option {{selectedMode === 1 ? 'active' : ''}} {{subExpired ? 'locked' : ''}}" bindtap="onSelectMode" data-value="1">
+        <text class="mode-icon">✨</text>
+        <view class="mode-label">智能模式</view>
+        <view class="mode-sub" wx:if="{{!subExpired}}">剩余{{subDays}}天</view>
+        <view class="mode-sub" wx:else>订阅解锁</view>
       </view>
     </view>
-    <view class="btn-select-all mt-10" bindtap="onSelectAll">全选</view>
-  </view>
 
-  <view class="card">
-    <view class="section-title">波长选择</view>
-    <view class="wavelength-list">
-      <view wx:for="{{wavelengthOptions}}" wx:key="value"
-            class="wavelength-item {{selectedWavelength === item.value ? 'wavelength-active' : ''}}"
-            bindtap="onSelectWavelength" data-value="{{item.value}}">
-        <text class="wavelength-name">{{item.name}}</text>
-        <text class="wavelength-desc">{{item.desc}}</text>
-      </view>
+    <view class="page-title" style="font-size:28rpx;">选择护理区域</view>
+
+    <view class="face-map">
+      <view class="face-region forehead {{regions[2].checked ? 'active' : ''}}" bindtap="onToggleRegion" data-idx="2">额头</view>
+      <view class="face-region left-cheek {{regions[0].checked ? 'active' : ''}}" bindtap="onToggleRegion" data-idx="0">左脸</view>
+      <view class="face-region right-cheek {{regions[1].checked ? 'active' : ''}}" bindtap="onToggleRegion" data-idx="1">右脸</view>
+      <view class="face-region nose {{regions[4].checked ? 'active' : ''}}" bindtap="onToggleRegion" data-idx="4">鼻唇</view>
+      <view class="face-region chin {{regions[3].checked ? 'active' : ''}}" bindtap="onToggleRegion" data-idx="3">下巴</view>
     </view>
-  </view>
 
-  <view class="card">
-    <view class="section-title">亮度: {{brightness}}</view>
-    <slider min="0" max="255" value="{{brightness}}" bindchange="onBrightnessChange"
-            activeColor="#333333" block-size="20" />
-  </view>
+    <button class="btn-primary" bindtap="onStart" disabled="{{submitting}}" loading="{{submitting}}">
+      开始护理
+    </button>
 
-  <view class="card">
-    <view class="section-title">护理时长</view>
-    <view class="duration-list">
-      <view wx:for="{{durationOptions}}" wx:key="value"
-            class="duration-item {{selectedDuration === item.value ? 'duration-active' : ''}}"
-            bindtap="onSelectDuration" data-value="{{item.value}}">
-        {{item.label}}
-      </view>
-    </view>
-  </view>
-
-  <view class="card">
-    <view class="section-title">护理模式</view>
-    <view class="mode-list">
-      <view wx:for="{{modeOptions}}" wx:key="value"
-            class="mode-item {{selectedMode === item.value ? 'mode-active' : ''}}"
-            bindtap="onSelectMode" data-value="{{item.value}}">
-        {{item.name}}
-      </view>
-    </view>
-  </view>
-
-  <view wx:if="{{error}}" class="card">
-    <text class="text-error">{{error}}</text>
-  </view>
-
-  <view class="btn-area-fixed">
-    <view class="btn-primary" bindtap="onStart" disabled="{{submitting}}">
-      {{submitting ? '启动中...' : '开始护理'}}
-    </view>
+    <view class="error-text" wx:if="{{error}}">{{error}}</view>
   </view>
 </view>
diff --git a/miniprogram/pages/treatment-setup/treatment-setup.wxss b/miniprogram/pages/treatment-setup/treatment-setup.wxss
index 28ef2d3..2b818c9 100644
--- a/miniprogram/pages/treatment-setup/treatment-setup.wxss
+++ b/miniprogram/pages/treatment-setup/treatment-setup.wxss
@@ -1,98 +1,120 @@
-.region-grid {
+.mode-selector {
   display: flex;
-  flex-wrap: wrap;
-  gap: 16rpx;
+  gap: 20rpx;
+  margin-bottom: 32rpx;
 }
 
-.region-item {
-  padding: 12rpx 24rpx;
-  border-radius: 8rpx;
-  background-color: #f0f0f0;
-  font-size: 26rpx;
-  color: #666666;
+.mode-option {
+  flex: 1;
+  padding: 28rpx 20rpx;
+  border: 4rpx solid #e5e5e5;
+  border-radius: 24rpx;
+  text-align: center;
 }
 
-.region-active {
-  background-color: #333333;
-  color: #ffffff;
+.mode-option.active {
+  border-color: #E6508C;
+  background: #fdf2f8;
 }
 
-.btn-select-all {
-  font-size: 24rpx;
-  color: #333333;
-  text-align: right;
+.mode-option.locked {
+  opacity: 0.7;
 }
 
-.wavelength-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12rpx;
+.mode-icon {
+  font-size: 48rpx;
+  display: block;
+  margin-bottom: 8rpx;
 }
 
-.wavelength-item {
-  padding: 20rpx;
-  border: 2rpx solid #eeeeee;
-  border-radius: 8rpx;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.wavelength-active {
-  border-color: #333333;
-  background-color: #fafafa;
-}
-
-.wavelength-name {
+.mode-label {
   font-size: 28rpx;
-  font-weight: 500;
+  color: #333333;
 }
 
-.wavelength-desc {
-  font-size: 24rpx;
+.mode-option.locked .mode-label {
   color: #999999;
 }
 
-.duration-list {
+.mode-sub {
+  font-size: 22rpx;
+  color: #999999;
+  margin-top: 6rpx;
+}
+
+.mode-option.active .mode-sub {
+  color: #E6508C;
+}
+
+.face-map {
+  width: 240rpx;
+  height: 280rpx;
+  margin: 0 auto 24rpx;
+  position: relative;
+}
+
+.face-region {
+  position: absolute;
+  border: 4rpx solid #e5e5e5;
+  border-radius: 50%;
   display: flex;
-  gap: 16rpx;
+  align-items: center;
+  justify-content: center;
+  font-size: 22rpx;
+  color: #999999;
 }
 
-.duration-item {
-  flex: 1;
-  padding: 16rpx;
+.face-region.active {
+  border-color: #E6508C;
+  background: rgba(230, 80, 140, 0.2);
+  color: #E6508C;
+}
+
+.face-region.forehead {
+  top: 5%;
+  left: 25%;
+  width: 50%;
+  height: 15%;
+  border-radius: 40rpx 40rpx 50% 50%;
+}
+
+.face-region.left-cheek {
+  top: 25%;
+  left: 5%;
+  width: 30%;
+  height: 25%;
+}
+
+.face-region.right-cheek {
+  top: 25%;
+  right: 5%;
+  width: 30%;
+  height: 25%;
+}
+
+.face-region.nose {
+  top: 45%;
+  left: 35%;
+  width: 30%;
+  height: 18%;
+  border-radius: 40%;
+}
+
+.face-region.chin {
+  top: 68%;
+  left: 25%;
+  width: 50%;
+  height: 20%;
+  border-radius: 0 0 50% 50%;
+}
+
+.error-text {
   text-align: center;
-  border: 2rpx solid #eeeeee;
-  border-radius: 8rpx;
+  color: #ff4d4f;
   font-size: 26rpx;
+  margin-top: 16rpx;
 }
 
-.duration-active {
-  border-color: #333333;
-  background-color: #333333;
-  color: #ffffff;
-}
-
-.mode-list {
-  display: flex;
-  gap: 16rpx;
-}
-
-.mode-item {
-  flex: 1;
-  padding: 16rpx;
-  text-align: center;
-  border: 2rpx solid #eeeeee;
-  border-radius: 8rpx;
-  font-size: 26rpx;
-}
-
-.mode-active {
-  border-color: #333333;
-  background-color: #333333;
-  color: #ffffff;
-}
-
-.btn-area-fixed {
-  padding: 20rpx 0 40rpx;
+.btn-primary::after {
+  border: none;
 }
diff --git a/miniprogram/pages/wear-check/wear-check.json b/miniprogram/pages/wear-check/wear-check.json
index 38183a6..ce12b36 100644
--- a/miniprogram/pages/wear-check/wear-check.json
+++ b/miniprogram/pages/wear-check/wear-check.json
@@ -1,3 +1,4 @@
 {
+  "navigationStyle": "custom",
   "navigationBarTitleText": "确认佩戴"
 }
diff --git a/miniprogram/pages/wear-check/wear-check.wxml b/miniprogram/pages/wear-check/wear-check.wxml
index 8efc439..574a24f 100644
--- a/miniprogram/pages/wear-check/wear-check.wxml
+++ b/miniprogram/pages/wear-check/wear-check.wxml
@@ -1,27 +1,43 @@
-<view class="container">
-  <view class="card text-center">
-    <view class="section-title">确认佩戴</view>
+<view class="page">
+  <view class="page-header page-header-pink">
+    <view class="page-header-title">确认佩戴</view>
+    <view class="page-header-subtitle">请确保面罩贴合面部</view>
+  </view>
 
-    <view wx:if="{{checking}}" class="text-muted mb-30">
-      <view class="loading-area">
-        <view class="spinner-sm"></view>
-        <text>正在检测佩戴状态...</text>
-      </view>
-      <view class="tip-area mt-20">
-        <text class="text-muted">请将设备贴合面部，确保佩戴稳固</text>
+  <view class="page-content">
+    <view class="device-row">
+      <view class="device-row-icon">💆</view>
+      <view class="device-row-info">
+        <view class="device-row-name">
+          光子美容仪
+          <text class="status-badge status-badge-green">已连接</text>
+        </view>
+        <view class="device-row-battery">电量 85%</view>
       </view>
     </view>
 
-    <view wx:if="{{result === 'ok'}}">
-      <view class="success-mark">&#10003;</view>
-      <view class="text-success mb-30">佩戴确认成功</view>
-      <view class="btn-primary" bindtap="onNext">设置护理参数</view>
+    <view class="guide-card">
+      <view class="guide-title">佩戴指引</view>
+      <view class="guide-img">面罩佩戴示意图</view>
+      <view class="guide-steps">
+        <view class="guide-step">1. 取出面罩，展开弹性绑带</view>
+        <view class="guide-step">2. 将面罩贴合面部</view>
+        <view class="guide-step">3. 调节绑带至舒适位置</view>
+      </view>
     </view>
 
-    <view wx:if="{{result === 'fail'}}">
-      <view class="fail-mark">&#10007;</view>
-      <view class="text-error mb-20">{{error}}</view>
-      <view class="btn-primary" bindtap="onRetry">重新检测</view>
+    <button class="btn-primary" bindtap="checkWearing" disabled="{{checking}}" loading="{{checking}}">
+      确认已佩戴
+    </button>
+    <button class="btn-secondary" bindtap="onRetry">重新连接</button>
+
+    <view class="check-result" wx:if="{{result === 'ok'}}">
+      <text class="check-ok">✓ 佩戴确认成功</text>
     </view>
+    <view class="check-result" wx:if="{{result === 'fail'}}">
+      <text class="check-fail">{{error}}</text>
+    </view>
+
+    <button wx:if="{{result === 'ok'}}" class="btn-primary mt-30" bindtap="onNext">设置护理参数</button>
   </view>
 </view>
diff --git a/miniprogram/pages/wear-check/wear-check.wxss b/miniprogram/pages/wear-check/wear-check.wxss
index e4979a4..c73a89b 100644
--- a/miniprogram/pages/wear-check/wear-check.wxss
+++ b/miniprogram/pages/wear-check/wear-check.wxss
@@ -1,50 +1,97 @@
-.loading-area {
+.device-row {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  padding: 40rpx 0;
+  gap: 20rpx;
+  background: linear-gradient(135deg, #fdf2f8 0%, #ffffff 100%);
+  border: 4rpx solid #E6508C;
+  border-radius: 24rpx;
+  padding: 24rpx;
+  margin-bottom: 24rpx;
 }
 
-.spinner-sm {
-  width: 48rpx;
-  height: 48rpx;
-  border: 4rpx solid #eeeeee;
-  border-top-color: #333333;
+.device-row-icon {
+  width: 80rpx;
+  height: 80rpx;
+  background: #E6508C;
   border-radius: 50%;
-  animation: spin 0.8s linear infinite;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  font-size: 36rpx;
+  flex-shrink: 0;
+}
+
+.device-row-info {
+  flex: 1;
+}
+
+.device-row-name {
+  font-size: 28rpx;
+  color: #333333;
+  font-weight: 500;
+}
+
+.device-row-battery {
+  font-size: 24rpx;
+  color: #666666;
+  margin-top: 4rpx;
+}
+
+.guide-card {
+  background: #f8f8f8;
+  border-radius: 20rpx;
+  padding: 24rpx;
+  margin-bottom: 24rpx;
+}
+
+.guide-title {
+  font-size: 26rpx;
+  font-weight: 600;
+  color: #333333;
+  margin-bottom: 16rpx;
+  text-align: center;
+}
+
+.guide-img {
+  width: 100%;
+  height: 140rpx;
+  background: #e8e8e8;
+  border-radius: 12rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999999;
+  font-size: 24rpx;
   margin-bottom: 16rpx;
 }
 
-@keyframes spin {
-  to { transform: rotate(360deg); }
+.guide-steps {
+  padding-left: 24rpx;
 }
 
-.success-mark {
-  width: 80rpx;
-  height: 80rpx;
-  border-radius: 50%;
-  background-color: #52c41a;
-  color: #ffffff;
-  font-size: 48rpx;
-  line-height: 80rpx;
+.guide-step {
+  font-size: 24rpx;
+  color: #666666;
+  line-height: 1.8;
+}
+
+.check-result {
   text-align: center;
-  margin: 20rpx auto;
+  margin-top: 24rpx;
 }
 
-.fail-mark {
-  width: 80rpx;
-  height: 80rpx;
-  border-radius: 50%;
-  background-color: #ff4d4f;
-  color: #ffffff;
-  font-size: 48rpx;
-  line-height: 80rpx;
-  text-align: center;
-  margin: 20rpx auto;
+.check-ok {
+  color: #52c41a;
+  font-size: 28rpx;
 }
 
-.tip-area {
-  padding: 20rpx;
-  background-color: #fffbe6;
-  border-radius: 8rpx;
+.check-fail {
+  color: #ff4d4f;
+  font-size: 26rpx;
+}
+
+.btn-primary::after,
+.btn-secondary::after {
+  border: none;
 }