diff --git a/frontend-tools/video-js/src/VideoJS.css b/frontend-tools/video-js/src/VideoJS.css
index 16232338..3bb0fa16 100644
--- a/frontend-tools/video-js/src/VideoJS.css
+++ b/frontend-tools/video-js/src/VideoJS.css
@@ -509,39 +509,7 @@
     gap: 6px !important;
 }
 
-/* Create a spacer to push remaining controls to the right */
-.video-js .vjs-control-bar .vjs-volume-panel::after {
-    content: "";
-    flex: 1;
-    margin-left: auto;
-}
-
-/* Move these 5 controls to the right */
-.video-js .vjs-playback-rate,
-.video-js .vjs-picture-in-picture-control,
-.video-js .vjs-chapters-button,
-.video-js .vjs-subtitles-button,
-.video-js .vjs-fullscreen-control,
-.video-js .vjs-subs-caps-button {
-    margin-left: auto !important;
-    order: 999 !important;
-}
-
-/* Remove auto margin from subsequent items to keep them grouped */
-.video-js .vjs-picture-in-picture-control,
-.video-js .vjs-chapters-button,
-.video-js .vjs-subtitles-button,
-.video-js .vjs-fullscreen-control,
-.video-js .vjs-subs-caps-button {
-    margin-left: 0 !important;
-}
-
-/* Alternative approach - target by position */
-.video-js .vjs-control-bar > *:nth-last-child(-n + 5) {
-    margin-left: auto !important;
-    order: 999 !important;
-}
-
-.video-js .vjs-control-bar > *:nth-last-child(-n + 4) {
-    margin-left: 0 !important;
+/* Basic control bar styling - let JavaScript handle positioning */
+.video-js .vjs-control-bar .vjs-control {
+    /* Natural flex flow */
 }
diff --git a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
index 9532939c..8f1bb875 100644
--- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
+++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
@@ -1135,6 +1135,24 @@ function VideoJSPlayer() {
 
                         // BEGIN: Move CC (subtitles) and PiP buttons to the right side
                         setTimeout(() => {
+                            // Create a spacer element to push buttons to the right
+                            const spacer = videojs.dom.createEl('div', {
+                                className: 'vjs-spacer-control vjs-control',
+                            });
+                            spacer.style.flex = '1';
+                            spacer.style.minWidth = '1px';
+
+                            // Find insertion point after time displays
+                            const durationDisplay = controlBar.getChild('durationDisplay');
+                            const customRemainingTime = controlBar.getChild('customRemainingTime');
+                            const insertAfter = customRemainingTime || durationDisplay;
+
+                            if (insertAfter) {
+                                const insertIndex = controlBar.children().indexOf(insertAfter) + 1;
+                                controlBar.el().insertBefore(spacer, controlBar.children()[insertIndex]?.el() || null);
+                                console.log('✓ Spacer added after time displays');
+                            }
+
                             // Find the subtitles/captions button (CC button)
                             const possibleTextTrackButtons = ['subtitlesButton', 'captionsButton', 'subsCapsButton'];
                             let textTrackButton = null;
@@ -1148,37 +1166,31 @@ function VideoJSPlayer() {
                                 }
                             }
 
-                            // Find the picture-in-picture button
+                            // Find other buttons to move to the right
                             const pipButton = controlBar.getChild('pictureInPictureToggle');
+                            const playbackRateButton = controlBar.getChild('playbackRateMenuButton');
+                            const chaptersButton = controlBar.getChild('chaptersButton');
 
-                            // Move buttons to the right side in desired order
-                            if (fullscreenToggle) {
-                                const fullscreenIndex = controlBar.children().indexOf(fullscreenToggle);
-                                let insertIndex = fullscreenIndex;
+                            // Move buttons to the right side (after spacer)
+                            const buttonsToMove = [
+                                playbackRateButton,
+                                textTrackButton,
+                                pipButton,
+                                chaptersButton,
+                                fullscreenToggle,
+                            ].filter(Boolean);
 
-                                // Move PiP button first (will be rightmost before fullscreen)
-                                if (pipButton) {
+                            buttonsToMove.forEach((button) => {
+                                if (button) {
                                     try {
-                                        controlBar.removeChild(pipButton);
-                                        controlBar.addChild(pipButton, {}, insertIndex);
-                                        console.log('✓ Picture-in-Picture button moved to right side');
-                                        insertIndex = controlBar.children().indexOf(fullscreenToggle); // Update index
+                                        controlBar.removeChild(button);
+                                        controlBar.addChild(button);
+                                        console.log(`✓ Moved ${button.name_ || 'button'} to right side`);
                                     } catch (e) {
-                                        console.log('✗ Failed to move PiP button:', e);
+                                        console.log(`✗ Failed to move button:`, e);
                                     }
                                 }
-
-                                // Move CC button (will be before PiP)
-                                if (textTrackButton) {
-                                    try {
-                                        controlBar.removeChild(textTrackButton);
-                                        controlBar.addChild(textTrackButton, {}, insertIndex);
-                                        console.log('✓ CC button moved to right side');
-                                    } catch (e) {
-                                        console.log('✗ Failed to move CC button:', e);
-                                    }
-                                }
-                            }
+                            });
                         }, 100);
                         // END: Move CC (subtitles) and PiP buttons to the right side