diff --git a/frontend-tools/video-js/src/VideoJS.css b/frontend-tools/video-js/src/VideoJS.css
index dab53cd4..227f3592 100644
--- a/frontend-tools/video-js/src/VideoJS.css
+++ b/frontend-tools/video-js/src/VideoJS.css
@@ -320,6 +320,15 @@ html {
     position: relative !important;
 }
 
+/* Reduce gap between pip and fullscreen buttons */
+.video-js .vjs-pip-wrapper {
+    margin-right: 0px !important;
+}
+
+.video-js .vjs-fullscreen-wrapper {
+    margin-left: 0px !important;
+}
+
 /* Center the settings button inside its wrapper */
 .video-js .vjs-settings-wrapper .vjs-settings-button {
     display: flex !important;
@@ -339,6 +348,21 @@ html {
     height: 46px !important;
 }
 
+/* Ensure consistent alignment and spacing for all control wrappers */
+.video-js .vjs-play-wrapper,
+.video-js .vjs-next-video-wrapper,
+.video-js .vjs-volume-wrapper,
+.video-js .vjs-autoplay-wrapper,
+.video-js .vjs-chapters-button.vjs-menu-button,
+.video-js .vjs-subtitles-button.vjs-menu-button,
+.video-js .vjs-settings-wrapper,
+.video-js .vjs-pip-wrapper,
+.video-js .vjs-fullscreen-wrapper {
+    align-items: center !important;
+    justify-content: center !important;
+    vertical-align: middle !important;
+}
+
 .video-js .vjs-next-video-control {
     order: 1 !important;
 }
@@ -796,6 +820,68 @@ button.vjs-button > .vjs-icon-placeholder:before {
         bottom: 52px !important; /* Moved up to prevent overlap with controls */
     }
 
+    /* Consistent wrapper spacing and alignment on mobile */
+    .video-js .vjs-play-wrapper,
+    .video-js .vjs-next-video-wrapper,
+    .video-js .vjs-volume-wrapper,
+    .video-js .vjs-autoplay-wrapper,
+    .video-js .vjs-chapters-button.vjs-menu-button,
+    .video-js .vjs-subtitles-button.vjs-menu-button,
+    .video-js .vjs-settings-wrapper,
+    .video-js .vjs-pip-wrapper,
+    .video-js .vjs-fullscreen-wrapper {
+        padding: 0px !important;
+        margin: 0 1px !important;
+        width: 32px !important;
+        height: 32px !important;
+        align-items: center !important;
+        justify-content: center !important;
+    }
+
+    /* Ensure buttons inside wrappers are properly sized on mobile */
+    .video-js .vjs-play-wrapper .vjs-play-control,
+    .video-js .vjs-next-video-wrapper .vjs-next-video-control,
+    .video-js .vjs-autoplay-wrapper .vjs-autoplay-toggle,
+    .video-js .vjs-chapters-button.vjs-menu-button button,
+    .video-js .vjs-subtitles-button.vjs-menu-button button,
+    .video-js .vjs-settings-wrapper .vjs-settings-button,
+    .video-js .vjs-pip-wrapper .vjs-picture-in-picture-control,
+    .video-js .vjs-fullscreen-wrapper .vjs-fullscreen-control {
+        width: 32px !important;
+        height: 32px !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        margin: 0 !important;
+        padding: 0 !important;
+    }
+
+    /* Fix play button icon vertical alignment to match other icons */
+    .video-js .vjs-play-wrapper .vjs-play-control .vjs-icon-placeholder {
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        width: 100% !important;
+        height: 100% !important;
+        line-height: 1 !important;
+        position: absolute !important;
+        top: 48% !important;
+        left: 50% !important;
+        transform: translate(-50%, -50%) !important;
+    }
+
+    .video-js .vjs-play-wrapper .vjs-play-control .vjs-icon-placeholder:before {
+        position: static !important;
+        top: auto !important;
+        left: auto !important;
+        transform: none !important;
+        vertical-align: middle !important;
+        line-height: 1 !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+    }
+
     .vjs-chapters-button button.vjs-button,
     .vjs-subtitles-button button.vjs-button,
     .video-js button.vjs-control {
@@ -907,6 +993,20 @@ button.vjs-button > .vjs-icon-placeholder:before {
         display: none !important;
     }
 
+    /* Hide subtitles button on small screens to make room for fullscreen */
+    .video-js .vjs-subtitles-button.vjs-menu-button,
+    .video-js .vjs-subs-caps-button {
+        display: none !important;
+    }
+
+    /* Reduce spacing for first three controls on small screens */
+    .video-js .vjs-play-wrapper,
+    .video-js .vjs-next-video-wrapper,
+    .video-js .vjs-volume-wrapper {
+        margin: 0 0.5px !important;
+        padding: 0 !important;
+    }
+
     /* Compact buttons for small screens */
     .vjs-chapters-button button.vjs-button,
     .vjs-subtitles-button button.vjs-button,
@@ -1029,6 +1129,20 @@ button.vjs-button > .vjs-icon-placeholder:before {
         opacity: 0 !important;
         display: none !important;
     }
+
+    /* Hide subtitles button on very small screens to make room for fullscreen */
+    .video-js .vjs-subtitles-button.vjs-menu-button,
+    .video-js .vjs-subs-caps-button {
+        display: none !important;
+    }
+
+    /* Further reduce spacing for first three controls on very small screens */
+    .video-js .vjs-play-wrapper,
+    .video-js .vjs-next-video-wrapper,
+    .video-js .vjs-volume-wrapper {
+        margin: 0 0px !important;
+        padding: 0 !important;
+    }
     .vjs-chapters-button button.vjs-button,
     .vjs-subtitles-button button.vjs-button,
     .video-js button.vjs-control {
diff --git a/frontend-tools/video-js/src/components/controls/CustomRemainingTime.css b/frontend-tools/video-js/src/components/controls/CustomRemainingTime.css
index 0749c733..6657e90f 100644
--- a/frontend-tools/video-js/src/components/controls/CustomRemainingTime.css
+++ b/frontend-tools/video-js/src/components/controls/CustomRemainingTime.css
@@ -21,31 +21,35 @@
 /* Responsive time display sizing */
 @media (max-width: 767px) {
     .vjs-control-bar .custom-remaining-time .vjs-remaining-time-display {
-        font-size: 11px !important;
-        padding: 0 2px;
+        font-size: 13px !important;
+        padding: 0 3px;
+        font-weight: 600 !important;
     }
 }
 
 @media (max-width: 500px) {
     .vjs-control-bar .custom-remaining-time .vjs-remaining-time-display {
-        font-size: 9px !important;
-        padding: 0 1px;
-        letter-spacing: -0.3px;
+        font-size: 12px !important;
+        padding: 0 2px;
+        letter-spacing: -0.2px;
+        font-weight: 600 !important;
     }
 }
 
 @media (max-width: 480px) {
     .vjs-control-bar .custom-remaining-time .vjs-remaining-time-display {
-        font-size: 9px !important;
-        padding: 0 1px;
-        letter-spacing: -0.3px;
+        font-size: 11px !important;
+        padding: 0 2px;
+        letter-spacing: -0.2px;
+        font-weight: 600 !important;
     }
 }
 
 @media (max-width: 399px) {
     .vjs-control-bar .custom-remaining-time .vjs-remaining-time-display {
-        font-size: 8px !important;
-        padding: 0;
-        letter-spacing: -0.5px;
+        font-size: 10px !important;
+        padding: 0 1px;
+        letter-spacing: -0.3px;
+        font-weight: 600 !important;
     }
 }