diff --git a/components/NavBar/NavBar.vue b/components/NavBar/NavBar.vue
new file mode 100644
index 0000000..af6234c
--- /dev/null
+++ b/components/NavBar/NavBar.vue
@@ -0,0 +1,120 @@
+<template>
+  <view>
+    <!-- Placeholder to occupy space if fixed -->
+    <view
+      v-if="fixed && placeholder"
+      class="nav-placeholder"
+      :style="{ height: navBarHeight + 'px' }"
+    ></view>
+
+    <!-- Actual Navbar -->
+    <view
+      class="nav-bar"
+      :class="{ fixed: fixed }"
+      :style="{
+        height: navBarHeight + 'px',
+        paddingTop: statusBarHeight + 'px',
+        backgroundColor: background,
+        color: color
+      }"
+    >
+      <view class="nav-content">
+        <view
+          v-if="back"
+          class="back"
+          @tap="goBack"
+          :style="{ color: color }"
+        >‹</view>
+        <text class="nav-title" :style="{ color: color }">{{ title }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { getBavBarHeight, getStatusBarHeight } from "@/utils/system";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  background: {
+    type: String,
+    default: "#ffffff",
+  },
+  color: {
+    type: String,
+    default: "#333333",
+  },
+  back: {
+    type: Boolean,
+    default: true,
+  },
+  fixed: {
+    type: Boolean,
+    default: true,
+  },
+  placeholder: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const navBarHeight = ref(64);
+const statusBarHeight = ref(20);
+
+onMounted(() => {
+  navBarHeight.value = getBavBarHeight();
+  statusBarHeight.value = getStatusBarHeight();
+});
+
+const goBack = () => {
+  const pages = getCurrentPages();
+  if (pages.length > 1) {
+    uni.navigateBack();
+  } else {
+    uni.switchTab({ url: "/pages/index/index" });
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.nav-bar {
+  width: 100%;
+  box-sizing: border-box;
+  z-index: 999;
+  
+  &.fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+}
+
+.nav-content {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 24rpx;
+  position: relative;
+}
+
+.back {
+  font-size: 50rpx;
+  margin-right: 24rpx;
+  line-height: 1;
+  padding: 20rpx;
+  margin-left: -20rpx;
+}
+
+.nav-title {
+  font-size: 34rpx;
+  font-weight: bold;
+  flex: 1;
+  text-align: center;
+  margin-right: 50rpx; /* Balance back button */
+}
+</style>
\ No newline at end of file
diff --git a/pages/avatar/detail.vue b/pages/avatar/detail.vue
index 87564a7..3c4cb00 100644
--- a/pages/avatar/detail.vue
+++ b/pages/avatar/detail.vue
@@ -1,18 +1,6 @@
 <template>
-  <view class="avatar-detail-page" :style="{ paddingTop: navBarHeight + 'px' }">
-    <!-- Custom Navbar -->
-    <view
-      class="nav-bar"
-      :style="{
-        height: navBarHeight + 'px',
-        paddingTop: statusBarHeight + 'px',
-      }"
-    >
-      <view class="nav-content">
-        <view class="back" @tap="goBack">‹</view>
-        <text class="nav-title">专属头像</text>
-      </view>
-    </view>
+  <view class="avatar-detail-page">
+    <NavBar title="专属头像" />
 
     <view class="content-wrap">
       <!-- User Info -->
@@ -138,10 +126,10 @@
 <script setup>
 import { ref, onMounted } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
-import { getBavBarHeight } from "@/utils/system";
 import { getPageDetail } from "@/api/system.js";
 import { getAvatarRecommendList } from "@/api/avatar.js";
 import { saveViewRequest } from "@/utils/common.js";
+import NavBar from "@/components/NavBar/NavBar.vue";
 
 const defaultAvatar =
   "https://file.lihailezzc.com/resource/d9b329082b32f8305101f708593a4882.png";
@@ -149,9 +137,6 @@ const detailData = ref(null);
 const frameList = ref([]);
 const shareToken = ref("");
 
-const navBarHeight = ref(64);
-const statusBarHeight = ref(20);
-
 onLoad((options) => {
   if (options.shareToken) {
     shareToken.value = options.shareToken;
@@ -160,22 +145,6 @@ onLoad((options) => {
   fetchFrames();
 });
 
-onMounted(() => {
-  const sysInfo = uni.getSystemInfoSync();
-  statusBarHeight.value = sysInfo.statusBarHeight;
-  navBarHeight.value = getBavBarHeight();
-});
-
-const goBack = () => {
-  // Check if can go back, otherwise go home
-  const pages = getCurrentPages();
-  if (pages.length > 1) {
-    uni.navigateBack();
-  } else {
-    uni.switchTab({ url: "/pages/index/index" });
-  }
-};
-
 const fetchDetail = async () => {
   try {
     // uni.showLoading({ title: "加载中..." });
@@ -239,42 +208,6 @@ const goToWallpaper = () => {
   box-sizing: border-box;
 }
 
-.nav-bar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 100;
-  box-sizing: border-box;
-  background: #ffffff;
-}
-
-.nav-content {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  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; /* Balance back button */
-}
-
 .content-wrap {
   padding: 30rpx 40rpx 60rpx;
 }
diff --git a/pages/mine/avatar.vue b/pages/mine/avatar.vue
index a50a5f2..7922958 100644
--- a/pages/mine/avatar.vue
+++ b/pages/mine/avatar.vue
@@ -1,15 +1,7 @@
 <template>
-  <view class="avatar-page" :style="{ paddingTop: navBarTop + 'px' }">
+  <view class="avatar-page" >
     <!-- Navbar -->
-    <view
-      class="nav-bar"
-      :style="{ height: navBarHeight + 'px', paddingTop: navBarTop + 'px' }"
-    >
-      <view class="nav-content">
-        <view class="back" @tap="goBack">‹</view>
-        <text class="nav-title">我的制作记录</text>
-      </view>
-    </view>
+    <NavBar title="我的头像制作" />
 
     <!-- Current Avatar Card -->
     <view class="current-card" v-if="currentAvatar">
@@ -100,10 +92,9 @@ import { ref, onMounted } from "vue";
 import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
 import { getMyAvatar, userAvatarChange } from "@/api/mine.js";
 import { useUserStore } from "@/stores/user";
+import NavBar from "@/components/NavBar/NavBar.vue";
 
 const userStore = useUserStore();
-const navBarTop = ref(0);
-const navBarHeight = ref(44);
 const list = ref([]);
 const page = ref(1);
 const loading = ref(false);
@@ -123,8 +114,6 @@ const names = [
 ];
 
 onMounted(() => {
-  const sysInfo = uni.getSystemInfoSync();
-  navBarTop.value = sysInfo.statusBarHeight;
   fetchList(true);
 });