diff --git a/client/src/index.css b/client/src/index.css
index bc4473e..a68ad80 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -170,6 +170,68 @@
   .animation-delay-150 {
     animation-delay: 150ms;
   }
+
+  /* Video.js Player Custom FOLX Theme */
+  .video-js .vjs-control-bar {
+    background: rgba(236, 76, 115, 0.9) !important;
+    backdrop-filter: blur(10px) !important;
+  }
+
+  .video-js .vjs-play-progress {
+    background: #ec4c73 !important;
+  }
+
+  .video-js .vjs-load-progress {
+    background: rgba(236, 76, 115, 0.3) !important;
+  }
+
+  .video-js .vjs-progress-control .vjs-progress-holder {
+    background: rgba(255, 255, 255, 0.2) !important;
+  }
+
+  .video-js .vjs-big-play-button {
+    background: rgba(236, 76, 115, 0.9) !important;
+    border-color: #ec4c73 !important;
+    color: white !important;
+  }
+
+  .video-js .vjs-big-play-button:hover {
+    background: rgba(236, 76, 115, 1) !important;
+  }
+
+  .video-js .vjs-button > .vjs-icon-placeholder:before,
+  .video-js .vjs-time-control {
+    color: white !important;
+  }
+
+  .video-js .vjs-button:hover {
+    background: rgba(236, 76, 115, 0.5) !important;
+  }
+
+  .video-js .vjs-volume-level {
+    background: #ec4c73 !important;
+  }
+
+  .video-js .vjs-volume-bar {
+    background: rgba(255, 255, 255, 0.2) !important;
+  }
+
+  .video-js .vjs-slider-horizontal .vjs-volume-level {
+    background: #ec4c73 !important;
+  }
+
+  .video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+    background: rgba(236, 76, 115, 0.95) !important;
+    backdrop-filter: blur(10px) !important;
+  }
+
+  .video-js .vjs-menu li.vjs-selected {
+    background: rgba(236, 76, 115, 0.8) !important;
+  }
+
+  .video-js .vjs-menu li:hover {
+    background: rgba(236, 76, 115, 0.6) !important;
+  }
 }
 
 /* Video edit modal styles */