diff --git a/packages/plugins/CHANGELOG.md b/packages/plugins/CHANGELOG.md
index ea9d726e..5ff7bb26 100644
--- a/packages/plugins/CHANGELOG.md
+++ b/packages/plugins/CHANGELOG.md
@@ -4,6 +4,12 @@
 
 ## 1.0.10-beta.1
 
+- playlist
+  - style fixed.
+  - show current playing index.
+
+## 1.0.10-beta.1
+
 - playlist
   - add keyboard `l`.
 
diff --git a/packages/plugins/package.json b/packages/plugins/package.json
index 6b122e82..6ff9b7c2 100644
--- a/packages/plugins/package.json
+++ b/packages/plugins/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oplayer/plugins",
-  "version": "1.0.10-beta.1",
+  "version": "1.0.10-beta.2",
   "description": "oplayer's plugin",
   "type": "module",
   "main": "dist/index.es.js",
diff --git a/packages/plugins/src/playlist.css b/packages/plugins/src/playlist.css
index 858c642f..227447ff 100644
--- a/packages/plugins/src/playlist.css
+++ b/packages/plugins/src/playlist.css
@@ -41,11 +41,13 @@
   justify-content: space-between;
   background: #000;
   border-bottom: 1px solid #484848;
-  font-size: 13px;
-  line-height: 38px;
-  padding: 0 5px 0 10px;
+  padding: 0.2em 0.4em;
   align-items: center;
   color: #fff;
+
+  > span {
+    font-size: 0.875em;
+  }
 }
 
 .playlist-head .playlist-back {
@@ -55,8 +57,8 @@
 }
 
 .playlist-head .playlist-back > svg {
-  width: 28px;
-  height: 28px;
+  width: 1.75em;
+  height: 1.75em;
   fill: #fff;
   pointer-events: none;
 }
diff --git a/packages/plugins/src/playlist.ts b/packages/plugins/src/playlist.ts
index 5f4e73e4..0eed7120 100644
--- a/packages/plugins/src/playlist.ts
+++ b/packages/plugins/src/playlist.ts
@@ -163,6 +163,7 @@ export default class PlaylistPlugin implements PlayerPlugin {
       })
       .finally(() => {
         this.currentIndex = idx
+        this._updateHeader()
         this.$root.querySelector('.playlist-list-item.active')?.classList.remove('active')
         $target?.classList.add('active')
         setTimeout(() => {
@@ -263,10 +264,14 @@ export default class PlaylistPlugin implements PlayerPlugin {
       )
       .join('')
 
+    this._updateHeader()
+    this.$root.querySelector('.playlist-list')!.innerHTML = child
+  }
+
+  _updateHeader() {
     this.$root.querySelector('.playlist-head-title')!.textContent = `${this.player.locales.get(
       'PLAYLIST'
-    )} (${sources.length})`
-    this.$root.querySelector('.playlist-list')!.innerHTML = child
+    )} (${this.currentIndex}/${this.options.sources.length})`
   }
 
   destroy() {}