diff --git a/z-paging-x/components/index-nav/index-nav.uvue b/z-paging-x/components/index-nav/index-nav.uvue
new file mode 100644
index 0000000..bf05b35
--- /dev/null
+++ b/z-paging-x/components/index-nav/index-nav.uvue
@@ -0,0 +1,79 @@
+<template>
+    <view class="index-nav">
+        <view class="index-nav-inner" :style="navbarStyle">
+            <view class="index-nav-content" >
+                <image class="index-nav-image" src="/static/title-logo-x.png" mode="aspectFit"></image>
+				<text class="index-nav-version">0.1.5</text>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    export default {
+        name: "index-nav",
+        data() {
+            return {
+                statusBarHeight: 0
+            };
+        },
+        computed: {
+            navbarStyle() : string {
+                return `margin-top:${this.statusBarHeight}px`
+            }
+        },
+        created() {
+            this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
+        },
+        mounted() {
+          setTimeout(() => {
+            uni.setNavigationBarColor({
+                frontColor: '#000000',
+                backgroundColor: '#ffffff'
+            })
+          }, 100)
+        },
+        methods: {
+            back() {
+                uni.navigateBack({})
+            }
+        },
+    }
+</script>
+
+<style>
+    .index-nav {
+        border: 1px #eee solid;
+        background-color: #fff;
+    }
+    .index-nav-inner {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        height: 45px;
+    }
+
+    .index-nav-content {
+        position: absolute;
+        height: 100%;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+    }
+    .index-nav-image {
+		width: 540rpx;
+	}
+	.index-nav-version {
+		background-color:  #007AFF;
+		font-size: 24rpx;
+		color: white;
+		padding: 6rpx 12rpx;
+		border-radius: 6rpx;
+	}
+</style>
diff --git a/z-paging-x/pages.json b/z-paging-x/pages.json
index ce79dad..9fc57a8 100644
--- a/z-paging-x/pages.json
+++ b/z-paging-x/pages.json
@@ -3,7 +3,8 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "z-paging x"
+				"navigationBarTitleText": "z-paging x",
+				"navigationStyle": "custom"
 			}
 		},
 		{
diff --git a/z-paging-x/pages/index/index.uvue b/z-paging-x/pages/index/index.uvue
index bb01dc2..4f1169b 100644
--- a/z-paging-x/pages/index/index.uvue
+++ b/z-paging-x/pages/index/index.uvue
@@ -1,16 +1,17 @@
 <template>
-	<view class="content">
-		<view class="demo-list">
-			<view class="demo-item" v-for="(item,index) in list" :key="index" @click="itemClick(item)">
-				<view class="demo-item-main">
-					<text class="demo-item-title">{{item.title}}</text>
-					<text class="demo-item-subtitle" v-if="item.subTitle.length">{{item.subTitle}}</text>
-					<text class="demo-item-file-text">{{item.file + '.uvue'}}</text>
-				</view>
-				<image class="demo-item-more-img" src="../../static/more_icon.png"></image>
+	<z-paging-x :refresher-enabled="false">
+		<template #top>
+			<index-nav />
+		</template>
+		<list-item class="demo-item" v-for="(item,index) in list" :key="index" @click="itemClick(item)">
+			<view class="demo-item-main">
+				<text class="demo-item-title">{{item.title}}</text>
+				<text class="demo-item-subtitle" v-if="item.subTitle.length">{{item.subTitle}}</text>
+				<text class="demo-item-file-text">{{item.file + '.uvue'}}</text>
 			</view>
-		</view>
-	</view>
+			<image class="demo-item-more-img" src="../../static/more_icon.png"></image>
+		</list-item>
+	</z-paging-x>
 </template>
 
 <script lang="uts">
@@ -42,6 +43,7 @@
 		display: flex;
 		flex-direction: row;
 		justify-content: space-between;
+		align-items: center;
 		border-bottom: #eeeeee solid 1px;
 		padding: 20rpx 30rpx;
 	}
diff --git a/z-paging-x/static/title-logo-x.png b/z-paging-x/static/title-logo-x.png
new file mode 100644
index 0000000..2c0355e
Binary files /dev/null and b/z-paging-x/static/title-logo-x.png differ
diff --git a/z-paging-x/uni_modules/z-paging-x/readme.md b/z-paging-x/uni_modules/z-paging-x/readme.md
index 34f8c30..30e3818 100644
--- a/z-paging-x/uni_modules/z-paging-x/readme.md
+++ b/z-paging-x/uni_modules/z-paging-x/readme.md
@@ -1,5 +1,9 @@
 # z-paging-x
 
+<p align="center">
+    <img alt="logo" src="https://z-paging.zxlee.cn/img/title-logo-x.png" height="100" style="margin-bottom: 50px;">
+</p>
+
 > z-paging uniapp x版
 
 [![version](https://img.shields.io/badge/version-0.1.5-blue)](https://github.com/SmileZXLee/uni-z-paging-x)