diff --git a/pages/avatar/index.vue b/pages/avatar/index.vue
index fc84ca9..6c8b2a4 100644
--- a/pages/avatar/index.vue
+++ b/pages/avatar/index.vue
@@ -1,9 +1,6 @@
 <template>
-  <view class="avatar-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
-    <view class="nav-bar">
-      <view class="back" @tap="goBack">‹</view>
-      <text class="nav-title">新春头像挂饰</text>
-    </view>
+  <view class="avatar-page">
+    <NavBar title="头像制作" />
     <view class="preview-card">
       <view class="preview-square">
         <image
@@ -160,7 +157,6 @@
 <script setup>
 import { ref, computed } from "vue";
 import { onShareAppMessage, onLoad, onReachBottom } from "@dcloudio/uni-app";
-import { getBavBarHeight, getDeviceInfo } from "@/utils/system";
 import { useUserStore } from "@/stores/user";
 import {
   createShareToken,
@@ -179,6 +175,7 @@ import {
   generateObjectId,
   uploadImage,
 } from "@/utils/common.js";
+import NavBar from "@/components/NavBar/NavBar.vue";
 
 const userStore = useUserStore();
 const loginPopupRef = ref(null);
@@ -719,28 +716,6 @@ const loadImage = (url) => {
   box-sizing: border-box;
   padding-bottom: env(safe-area-inset-bottom);
 }
-.nav-bar {
-  display: flex;
-  align-items: center;
-  padding: 16rpx 24rpx;
-}
-.back {
-  font-size: 50rpx;
-  margin-right: 24rpx;
-  line-height: 1;
-  color: #333;
-  /* 增大点击区域 */
-  padding: 20rpx;
-  margin-left: -20rpx;
-}
-.nav-title {
-  font-size: 34rpx;
-  font-weight: bold;
-  color: #333;
-  flex: 1;
-  text-align: center;
-  margin-right: 50rpx; /* Balance back button */
-}
 .preview-card {
   margin: 20rpx 24rpx;
   background: #fff;
diff --git a/pages/mine/avatar.vue b/pages/mine/avatar.vue
index 7922958..f71f450 100644
--- a/pages/mine/avatar.vue
+++ b/pages/mine/avatar.vue
@@ -231,40 +231,6 @@ const getDefaultName = (item) => {
   padding-bottom: 40px;
 }
 
-.nav-bar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  z-index: 100;
-  background-color: #f9f9f9;
-
-  .nav-content {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    padding: 0 24rpx;
-
-    .back {
-      font-size: 50rpx;
-      margin-right: 24rpx;
-      line-height: 1;
-      color: #333;
-      padding: 20rpx;
-      margin-left: -20rpx;
-    }
-
-    .nav-title {
-      font-size: 34rpx;
-      font-weight: bold;
-      color: #333;
-      flex: 1;
-      text-align: center;
-      margin-right: 50rpx;
-    }
-  }
-}
-
 .current-card {
   margin: 60px 20px 20px;
   background: #fff;