diff --git a/src/components/ChaptersBar.vue b/src/components/ChaptersBar.vue
index a1952bba..b6e0a01b 100644
--- a/src/components/ChaptersBar.vue
+++ b/src/components/ChaptersBar.vue
@@ -1,64 +1,51 @@
 <template>
     <!-- desktop view -->
-    <div v-if="!mobileLayout" class="flex-col overflow-y-scroll max-h-75vh min-h-64 lt-lg:hidden">
-        <h2 class="mb-2 bg-gray-500/50 p-2" aria-label="chapters" title="chapters">
-            {{ $t("video.chapters") }} ({{ chapters.length }})
-        </h2>
+    <div v-if="!mobileLayout" class="pp-chapters flex-col overflow-y-scroll max-h-75vh min-h-64 lt-lg:hidden">
+        <h6 aria-label="chapters" title="chapters">{{ $t("video.chapters") }} - {{ chapters.length }}</h6>
         <div
             :key="chapter.start"
             v-for="(chapter, index) in chapters"
             @click="$emit('seek', chapter.start)"
-            class="chapter-vertical"
-            :class="{ 'bg-red-500/50': isCurrentChapter(index) }"
+            class="chapter efy_anim_pulse"
+            :class="{ 'pp-chapter-active': isCurrentChapter(index) }"
         >
             <div class="flex">
-                <span class="mt-5 mr-2 text-current" v-text="index + 1" />
                 <img :src="chapter.image" :alt="chapter.title" />
                 <div class="flex flex-col m-2">
-                    <span class="text-sm" :title="chapter.title" v-text="chapter.title" />
-                    <span class="text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
+                    <span :title="chapter.title" v-text="index + 1 + '. ' + chapter.title" class="font-bold" />
+                    <span class="font-bold" v-text="timeFormat(chapter.start)" />
                 </div>
             </div>
         </div>
     </div>
     <!-- mobile view -->
-    <div v-else class="flex overflow-x-auto">
+    <div v-else class="pp-chapters pp-mobile flex overflow-x-auto">
         <div
             :key="chapter.start"
             v-for="(chapter, index) in chapters"
             @click="$emit('seek', chapter.start)"
-            class="chapter"
-            :class="{ 'bg-red-500/50': isCurrentChapter(index) }"
+            class="chapter efy_anim_pulse"
+            :class="{ 'pp-chapter-active': isCurrentChapter(index) }"
         >
             <img :src="chapter.image" :alt="chapter.title" />
             <div class="m-1 flex">
-                <span class="text-truncate text-sm" :title="chapter.title" v-text="chapter.title" />
-                <span class="px-1 text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
+                <span class="text-truncate font-bold" :title="chapter.title" v-text="chapter.title" />
+                <span class="px-1 font-bold" v-text="timeFormat(chapter.start)" />
             </div>
         </div>
     </div>
 </template>
 
 <style>
-::-webkit-scrollbar {
-    height: 5px;
-}
 .chapter {
     @apply cursor-pointer self-center p-2.5;
 }
-.chapter img {
+.pp-mobile .chapter img {
     @apply w-full h-full;
 }
-.chapter-vertical {
-    @apply cursor-pointer self-center p-2.5;
-}
-.chapter-vertical img {
+.chapter img {
     @apply w-3/10 h-3/10;
 }
-
-.chapter-vertical:hover {
-    @apply bg-gray-500;
-}
 .text-truncate {
     @apply truncate overflow-hidden inline-block w-10em;
 }