diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.css b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
index 364e807c..6ce695d1 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.css
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
@@ -15,6 +15,26 @@
   color: var(--tertiary-text-color);
 }
 
+.playlistProgressBar {
+  margin-left: 10px;
+  /* > In order to let ::-webkit-progress-value take effect, appearance needs to be set to none on the <progress> element. */
+  /* https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value */
+  appearance: none;
+}
+
+.playlistProgressBar::-webkit-progress-value {
+  /* Color for filled part */
+  /* https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value */
+  /* background-color is required to be declared here to prevent color being green */
+  background-color: var(--accent-color);
+}
+
+.playlistProgressBar::-webkit-progress-bar {
+  /* Color for unfilled part */
+  /* https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-bar */
+  background-color: var(--secondary-text-color);
+}
+
 .playlistIcon {
   font-size: 20px;
   padding: 10px;
diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.vue b/src/renderer/components/watch-video-playlist/watch-video-playlist.vue
index bbae3729..a4f3a697 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.vue
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.vue
@@ -22,6 +22,12 @@
         class="playlistIndex"
       >
         - {{ currentVideoIndex }} / {{ playlistVideoCount }}
+        <progress
+          v-if="!shuffleEnabled && !reversePlaylist"
+          class="playlistProgressBar"
+          :value="currentVideoIndex"
+          :max="playlistVideoCount"
+        />
       </span>
       <p>
         <font-awesome-icon