diff --git a/package.json b/package.json
index a0d4140..ab45a82 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "@exhumer/f1tv-api": "^2.2.1",
     "@reduxjs/toolkit": "^2.4.0",
     "bitmovin-player": "^8.191.0",
+    "bitmovin-player-react": "^1.0.2",
     "bitmovin-player-ui": "^3.75.0",
     "bootstrap": "^5.3.3",
     "react": "^18.3.1",
diff --git a/src/player/React/App.tsx b/src/player/React/App.tsx
index 1f0a8bf..c5c67f4 100644
--- a/src/player/React/App.tsx
+++ b/src/player/React/App.tsx
@@ -1,18 +1,28 @@
 import { useEffect, useRef } from 'react';
-import { type SourceConfig, PlayerEvent } from 'bitmovin-player';
+import { type SourceConfig, PlayerAPI, PlayerEvent } from 'bitmovin-player';
+import { BitmovinPlayer, CustomUi } from 'bitmovin-player-react';
 import type { IpcRendererEvent } from 'electron';
 import { F1TV } from '@exhumer/f1tv-api';
 
-import styles from './App.module.scss';
-import BitmovinPlayer, { BitmovinPlayerRef } from './Component/BitmovinPlayer';
 import Overlay from './Component/Overlay';
+import PlayerUI from './Component/PlayerUI';
+import StreamSwitcherButton from './Component/StreamSwitcherButton';
 
-import { updateAscendon, updateConfig, updatePlatform, updateVideoContainer } from './Slice/Player';
+import { updateAscendon, updateConfig, updateCurrentPlayResult, updatePlatform, updateVideoContainer } from './Slice/Player';
 import { usePlayerDispatch, usePlayerSelector } from './Hook';
 
 import { author, productName } from '../../../package.json';
 import { F1TVPlatform } from '../../main_window/React/Type';
 
+import styles from './App.module.scss';
+import './BitmovinPlayer.scss';
+
+const uiContainerFactory = () => PlayerUI();
+
+const customUi: CustomUi = {
+  containerFactory: uiContainerFactory
+};
+
 const App = () => {
   const ascendon = usePlayerSelector(state => state.player.ascendon);
   const config = usePlayerSelector(state => state.player.config);
@@ -27,7 +37,8 @@ const App = () => {
     dispatch(updateVideoContainer(videoContainer));
   };
 
-  const playerRef = useRef<BitmovinPlayerRef | null>(null);
+  const playerRef = useRef<PlayerAPI | null>(null);
+  const playerDivRef = useRef<HTMLDivElement | null>(null);
 
   const switchChannel = (channelId?: number) => {
     if (videoContainer === null || !playerRef.current)
@@ -42,6 +53,7 @@ const App = () => {
       .then(playData => {
         const currentRef = playerRef.current;
 
+        dispatch(updateCurrentPlayResult(playData));
 
         const source: SourceConfig = {
           title: `${videoContainer.metadata.title}${stream && stream.type === 'obc' ?
@@ -72,18 +84,18 @@ const App = () => {
           source.dash = playData.url;
         }
 
-        if (currentRef.api.getSource() === null)
-          currentRef.api.load(source);
+        if (currentRef.getSource() === null)
+          currentRef.load(source);
 
         else {
-          if (currentRef.api.isLive()) {
-            const timeShift = currentRef.api.getTimeShift();
-            currentRef.api.load(source)
-              .then(() => currentRef.api.timeShift(timeShift));
+          if (currentRef.isLive()) {
+            const timeShift = currentRef.getTimeShift();
+            currentRef.load(source)
+              .then(() => currentRef.timeShift(timeShift));
           } else {
-            const seekTime = currentRef.api.getCurrentTime();
-            currentRef.api.load(source)
-              .then(() => currentRef.api.seek(seekTime));
+            const seekTime = currentRef.getCurrentTime();
+            currentRef.load(source)
+              .then(() => currentRef.seek(seekTime));
           }
         }
       });
@@ -113,23 +125,20 @@ const App = () => {
       <Overlay>
         <div className={styles['additional-streams-overlay']}>
           {videoContainer.metadata.additionalStreams.map(stream => (
-            <button
+            <StreamSwitcherButton
               key={stream.channelId}
-              onClick={() => {
-                switchChannel(stream.channelId);
-              }}
-              style={{
-                backgroundColor: stream.hex,
-              }}
-            >
-              {stream.reportingName}
-            </button>
+              onClick={(stream) => switchChannel(stream.channelId)}
+              stream={stream}
+            />
           ))}
         </div>
       </Overlay>}
     {videoContainer && config && <BitmovinPlayer
-      playerKey={config.bitmovin.bitmovinKeys.player}
+      playerRef={playerRef}
+      ref={playerDivRef}
+      customUi={customUi}
       config={{
+        key: config.bitmovin.bitmovinKeys.player,
         buffer: {
           audio: {
             forwardduration: config.bitmovin.buffer.audio.forwardduration,
@@ -234,7 +243,6 @@ const App = () => {
           app_id: `com.${author.name}.${productName}`.toLowerCase(),
         },
       }}
-      ref={playerRef}
     />}
   </> : <>
     <h1>Loading...</h1>
diff --git a/src/player/React/Component/BitmovinPlayer.scss b/src/player/React/BitmovinPlayer.scss
similarity index 58%
rename from src/player/React/Component/BitmovinPlayer.scss
rename to src/player/React/BitmovinPlayer.scss
index d05c3d2..e940cfb 100644
--- a/src/player/React/Component/BitmovinPlayer.scss
+++ b/src/player/React/BitmovinPlayer.scss
@@ -1,9 +1,9 @@
-@import '../Skin/SkinModern/skin';
+@import './Skin/SkinModern/skin';
 
-#bitmovin-player {
-  height: 100vh;
-  margin: 0;
-  padding: 0;
+.bitmovinplayer-container {
+  height: 100vh!important;
+  margin: 0!important;
+  padding: 0!important;
 }
 
 .bmpui-ui-titlebar,
@@ -15,12 +15,12 @@
 }
 
 .bmpui-ui-rewindbutton {
-  background-image: url('../Skin/SkinModern/assets/images/rewind.svg');
+  background-image: url('./Skin/SkinModern/assets/images/rewind.svg');
   background-size: contain;
 }
 
 .bmpui-ui-forwardbutton {
-  background-image: url('../Skin/SkinModern/assets/images/forward.svg');
+  background-image: url('./Skin/SkinModern/assets/images/forward.svg');
   background-size: contain;
 }
 
diff --git a/src/player/React/Component/BitmovinPlayer.tsx b/src/player/React/Component/BitmovinPlayer.tsx
deleted file mode 100644
index 275df12..0000000
--- a/src/player/React/Component/BitmovinPlayer.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { forwardRef, useEffect, useRef, useState, ForwardRefRenderFunction, useImperativeHandle } from 'react';
-
-import { Player, PlayerAPI, PlayerConfig } from 'bitmovin-player/modules/bitmovinplayer-core';
-import Abr from 'bitmovin-player/modules/bitmovinplayer-abr';
-import ContainerMP4 from 'bitmovin-player/modules/bitmovinplayer-container-mp4';
-import ContainerTS from 'bitmovin-player/modules/bitmovinplayer-container-ts';
-import EngineBitmovin from 'bitmovin-player/modules/bitmovinplayer-engine-bitmovin';
-import RendererMSE from 'bitmovin-player/modules/bitmovinplayer-mserenderer';
-import Hls from 'bitmovin-player/modules/bitmovinplayer-hls';
-import Dash from 'bitmovin-player/modules/bitmovinplayer-dash';
-import Drm from 'bitmovin-player/modules/bitmovinplayer-drm';
-import Thumbnail from 'bitmovin-player/modules/bitmovinplayer-thumbnail';
-import Xml from 'bitmovin-player/modules/bitmovinplayer-xml';
-import Crypto from 'bitmovin-player/modules/bitmovinplayer-crypto';
-import Style from 'bitmovin-player/modules/bitmovinplayer-style';
-import { UIManager } from 'bitmovin-player-ui';
-
-import './BitmovinPlayer.scss'; // Import the custom UI style
-
-import PlayerUI from './PlayerUI';
-
-export type BitmovinPlayerConfig = Omit<PlayerConfig, 'key'>;
-
-export type BitmovinPlayerProps = {
-  playerKey: string;
-  config?: BitmovinPlayerConfig;
-};
-
-export type BitmovinPlayerRef = {
-  readonly api: PlayerAPI | null;
-};
-
-export type BitmovinPlayerFn = ForwardRefRenderFunction<BitmovinPlayerRef, BitmovinPlayerProps>;
-
-const BitmovinPlayer: BitmovinPlayerFn = ({ playerKey, config }, ref) => {
-  const [api, setAPI] = useState<PlayerAPI | null>(null);
-  const playerDivRef = useRef<HTMLDivElement>();
-
-  useEffect(() => {
-    Player.addModule(EngineBitmovin); // Adaptive Streaming capabilities for a wide variety of platforms
-    Player.addModule(Abr); // Adaptation logic
-    Player.addModule(ContainerMP4); // Parsing and processing of specific container formats
-    Player.addModule(ContainerTS); // Parsing and processing of specific container formats
-    Player.addModule(RendererMSE); // Video rendering for DASH / HLS / Smooth using the browser's Media Source Extensions
-    Player.addModule(Hls); // HLS support
-    Player.addModule(Xml); // XML file handling (e.g. for DASH or VAST manifests)
-    Player.addModule(Dash); // MPEG-DASH support
-    Player.addModule(Drm); // Support for a variety of DRM systems (Widevine, PlayReady, PrimeTime, Fairplay)
-    Player.addModule(Thumbnail); // DASH and WebVTT thumbnail support
-    Player.addModule(Crypto); // Support for HLS AES-128 or DASH ClearKey streams
-    Player.addModule(Style); // Provides styling of the player
-
-    const playerCtx = new Player(playerDivRef.current, { key: playerKey, ...config });
-    new UIManager(playerCtx, PlayerUI());
-    setAPI(playerCtx);
-
-    return () => {
-      if (api !== null)
-        api.destroy();
-
-      setAPI(null);
-    };
-  }, [config]);
-
-  useImperativeHandle(ref, () => ({
-    get api() {
-      return api;
-    },
-    get playerDiv() {
-      return playerDivRef.current;
-    }
-  }));
-
-  return (
-    <div ref={playerDivRef} id='bitmovin-player' />
-  );
-};
-
-export default forwardRef<BitmovinPlayerRef, BitmovinPlayerProps>(BitmovinPlayer);
diff --git a/src/player/React/Component/StreamSwitcherButton.tsx b/src/player/React/Component/StreamSwitcherButton.tsx
new file mode 100644
index 0000000..b68acb6
--- /dev/null
+++ b/src/player/React/Component/StreamSwitcherButton.tsx
@@ -0,0 +1,36 @@
+import { F1TV } from '@exhumer/f1tv-api';
+import { useState } from 'react';
+import { usePlayerSelector } from '../Hook';
+
+type StreamType = F1TV.ContentVideoContainer['metadata']['additionalStreams'][number];
+
+type StreamSwitcherButtonProps = {
+  onClick: (stream: StreamType) => void;
+  stream: StreamType;
+};
+
+const StreamSwitcherButton = ({ onClick, stream }: StreamSwitcherButtonProps) => {
+  const currentPlayResult = usePlayerSelector(state => state.player.currentPlayResult);
+
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <button
+      style={{
+        backgroundColor: stream.hex,
+        opacity: currentPlayResult !== null && currentPlayResult.channelId === stream.channelId ?
+          1 :
+          hovered ?
+            0.8 :
+            0.5,
+      }}
+      onClick={() => onClick(stream)}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      {stream.reportingName}
+    </button>
+  );
+};
+
+export default StreamSwitcherButton;
diff --git a/src/player/React/Skin/SkinModern/_skin-cast-receiver.scss b/src/player/React/Skin/SkinModern/_skin-cast-receiver.scss
index 5e6a2ae..ce2fbef 100644
--- a/src/player/React/Skin/SkinModern/_skin-cast-receiver.scss
+++ b/src/player/React/Skin/SkinModern/_skin-cast-receiver.scss
@@ -61,7 +61,7 @@
     // We also display a pause image while playback is paused, instead of a play action button
     .#{$prefix}-ui-hugeplaybacktogglebutton {
       .#{$prefix}-image {
-        background-image: url('../Skin/SkinModern/assets/images/pause.svg');
+        background-image: url('./Skin/SkinModern/assets/images/pause.svg');
         opacity: .7;
       }
 
diff --git a/src/player/React/Skin/SkinModern/_skin-smallscreen.scss b/src/player/React/Skin/SkinModern/_skin-smallscreen.scss
index 27e0bc4..b4ab00f 100644
--- a/src/player/React/Skin/SkinModern/_skin-smallscreen.scss
+++ b/src/player/React/Skin/SkinModern/_skin-smallscreen.scss
@@ -64,7 +64,7 @@
   // Decrease huge play button size and replace icon with normal play icon
   .#{$prefix}-ui-hugeplaybacktogglebutton {
     .#{$prefix}-image {
-      background-image: url('../Skin/SkinModern/assets/images/play.svg');
+      background-image: url('./Skin/SkinModern/assets/images/play.svg');
       background-size: 4em;
     }
   }
@@ -75,7 +75,7 @@
       &.#{$prefix}-on {
         .#{$prefix}-image {
           animation: none;
-          background-image: url('../Skin/SkinModern/assets/images/pause.svg');
+          background-image: url('./Skin/SkinModern/assets/images/pause.svg');
           visibility: visible;
         }
       }
diff --git a/src/player/React/Skin/SkinModern/components/_airplaytogglebutton.scss b/src/player/React/Skin/SkinModern/components/_airplaytogglebutton.scss
index aa9739a..e43167c 100644
--- a/src/player/React/Skin/SkinModern/components/_airplaytogglebutton.scss
+++ b/src/player/React/Skin/SkinModern/components/_airplaytogglebutton.scss
@@ -4,13 +4,13 @@
 .#{$prefix}-ui-airplaytogglebutton {
   @extend %ui-button;
 
-  background-image: url('../Skin/SkinModern/assets/images/airplay.svg');
+  background-image: url('./Skin/SkinModern/assets/images/airplay.svg');
 
   &:hover {
     @include svg-icon-shadow;
   }
 
   &.#{$prefix}-on {
-    background-image: url('../Skin/SkinModern/assets/images/airplayX.svg');
+    background-image: url('./Skin/SkinModern/assets/images/airplayX.svg');
   }
 }
diff --git a/src/player/React/Skin/SkinModern/components/_audiotracksettingspaneltogglebutton.scss b/src/player/React/Skin/SkinModern/components/_audiotracksettingspaneltogglebutton.scss
index c3378f2..9b11878 100644
--- a/src/player/React/Skin/SkinModern/components/_audiotracksettingspaneltogglebutton.scss
+++ b/src/player/React/Skin/SkinModern/components/_audiotracksettingspaneltogglebutton.scss
@@ -4,9 +4,9 @@
 .#{$prefix}-ui-audiotracksettingstogglebutton {
   @extend %ui-settingstogglebutton;
 
-  background-image: url('../Skin/SkinModern/assets/images/audio-tracks.svg');
+  background-image: url('./Skin/SkinModern/assets/images/audio-tracks.svg');
 
   &.#{$prefix}-on {
-    background-image: url('../Skin/SkinModern/assets/images/audio-tracksX.svg');
+    background-image: url('./Skin/SkinModern/assets/images/audio-tracksX.svg');
   }
 }
diff --git a/src/player/React/Skin/SkinModern/components/_bufferingoverlay.scss b/src/player/React/Skin/SkinModern/components/_bufferingoverlay.scss
index 08d2199..336ecd1 100644
--- a/src/player/React/Skin/SkinModern/components/_bufferingoverlay.scss
+++ b/src/player/React/Skin/SkinModern/components/_bufferingoverlay.scss
@@ -66,7 +66,7 @@
 
     & {
       animation: #{$prefix}-fancy $buffering-animation-duration ease-in infinite;
-      background: url('../Skin/SkinModern/assets/images/loader.svg') no-repeat center;
+      background: url('./Skin/SkinModern/assets/images/loader.svg') no-repeat center;
       display: inline-block;
       height: 2em;
       margin: .2em;
diff --git a/src/player/React/Skin/SkinModern/components/_caststatusoverlay.scss b/src/player/React/Skin/SkinModern/components/_caststatusoverlay.scss
index a3ab3a5..8f44b57 100644
--- a/src/player/React/Skin/SkinModern/components/_caststatusoverlay.scss
+++ b/src/player/React/Skin/SkinModern/components/_caststatusoverlay.scss
@@ -7,7 +7,7 @@
   @include hidden-animated;
 
   & {
-    background: $color-background url('../Skin/SkinModern/assets/images/chromecast.svg') center no-repeat;
+    background: $color-background url('./Skin/SkinModern/assets/images/chromecast.svg') center no-repeat;
     background-size: 7em 7em;
   }
 
diff --git a/src/player/React/Skin/SkinModern/components/_casttogglebutton.scss b/src/player/React/Skin/SkinModern/components/_casttogglebutton.scss
index 1344c13..fce17c6 100644
--- a/src/player/React/Skin/SkinModern/components/_casttogglebutton.scss
+++ b/src/player/React/Skin/SkinModern/components/_casttogglebutton.scss
@@ -4,13 +4,13 @@
 .#{$prefix}-ui-casttogglebutton {
   @extend %ui-button;
 
-  background-image: url('../Skin/SkinModern/assets/images/chromecast.svg');
+  background-image: url('./Skin/SkinModern/assets/images/chromecast.svg');
 
   &:hover {
     @include svg-icon-shadow;
   }
 
   &.#{$prefix}-on {
-    background-image: url('../Skin/SkinModern/assets/images/chromecastX.svg');
+    background-image: url('./Skin/SkinModern/assets/images/chromecastX.svg');
   }
 }
diff --git a/src/player/React/Skin/SkinModern/components/_closebutton.scss b/src/player/React/Skin/SkinModern/components/_closebutton.scss
index 59e370e..caace2f 100644
--- a/src/player/React/Skin/SkinModern/components/_closebutton.scss
+++ b/src/player/React/Skin/SkinModern/components/_closebutton.scss
@@ -23,7 +23,7 @@
   }
 
   & {
-    background-image: url('../Skin/SkinModern/assets/images/close.svg');
+    background-image: url('./Skin/SkinModern/assets/images/close.svg');
   }
 
   &:hover {
diff --git a/src/player/React/Skin/SkinModern/components/_fullscreentogglebutton.scss b/src/player/React/Skin/SkinModern/components/_fullscreentogglebutton.scss
index 0c0781c..3a55f88 100644
--- a/src/player/React/Skin/SkinModern/components/_fullscreentogglebutton.scss
+++ b/src/player/React/Skin/SkinModern/components/_fullscreentogglebutton.scss
@@ -4,13 +4,13 @@
 .#{$prefix}-ui-fullscreentogglebutton {
   @extend %ui-button;
 
-  background-image: url('../Skin/SkinModern/assets/images/fullscreen.svg');
+  background-image: url('./Skin/SkinModern/assets/images/fullscreen.svg');
 
   &:hover {
     @include svg-icon-shadow;
   }
 
   &.#{$prefix}-on {
-    background-image: url('../Skin/SkinModern/assets/images/fullscreenX.svg');
+    background-image: url('./Skin/SkinModern/assets/images/fullscreenX.svg');
   }
 }
diff --git a/src/player/React/Skin/SkinModern/components/_hugeplaybacktogglebutton.scss b/src/player/React/Skin/SkinModern/components/_hugeplaybacktogglebutton.scss
index 2acb96c..6abca72 100644
--- a/src/player/React/Skin/SkinModern/components/_hugeplaybacktogglebutton.scss
+++ b/src/player/React/Skin/SkinModern/components/_hugeplaybacktogglebutton.scss
@@ -47,7 +47,7 @@
   }
 
   .#{$prefix}-image {
-    background-image: url('../Skin/SkinModern/assets/images/play_big.svg');
+    background-image: url('./Skin/SkinModern/assets/images/play_big.svg');
     background-position: center;
     background-repeat: no-repeat;
     background-size: 7em;
diff --git a/src/player/React/Skin/SkinModern/components/_hugereplaybutton.scss b/src/player/React/Skin/SkinModern/components/_hugereplaybutton.scss
index f397feb..c331e65 100644
--- a/src/player/React/Skin/SkinModern/components/_hugereplaybutton.scss
+++ b/src/player/React/Skin/SkinModern/components/_hugereplaybutton.scss
@@ -9,7 +9,7 @@
   width: 5em;
 
   .#{$prefix}-image {
-    background-image: url('../Skin/SkinModern/assets/images/replayX.svg');
+    background-image: url('./Skin/SkinModern/assets/images/replayX.svg');
     background-position: center;
     background-repeat: no-repeat;
     background-size: 5em;
diff --git a/src/player/React/Skin/SkinModern/components/_pictureinpicturetogglebutton.scss b/src/player/React/Skin/SkinModern/components/_pictureinpicturetogglebutton.scss
index 7a368b6..c13fda3 100644
--- a/src/player/React/Skin/SkinModern/components/_pictureinpicturetogglebutton.scss
+++ b/src/player/React/Skin/SkinModern/components/_pictureinpicturetogglebutton.scss
@@ -4,13 +4,13 @@
 .#{$prefix}-ui-piptogglebutton {
   @extend %ui-button;
 
-  background-image: url('../Skin/SkinModern/assets/images/picinpic1.svg');
+  background-image: url('./Skin/SkinModern/assets/images/picinpic1.svg');
 
   &:hover {
     @include svg-icon-shadow;
   }
 
   &.#{$prefix}-on {
-    background-image: url('../Skin/SkinModern/assets/images/picinpic1X.svg');
+    background-image: url('./Skin/SkinModern/assets/images/picinpic1X.svg');
   }
 }
diff --git a/src/player/React/Skin/SkinModern/components/_playbacktogglebutton.scss b/src/player/React/Skin/SkinModern/components/_playbacktogglebutton.scss
index 78c5fe8..011f9b2 100644
--- a/src/player/React/Skin/SkinModern/components/_playbacktogglebutton.scss
+++ b/src/player/React/Skin/SkinModern/components/_playbacktogglebutton.scss
@@ -4,17 +4,17 @@
 .#{$prefix}-ui-playbacktogglebutton {
   @extend %ui-button;
 
-  background-image: url('../Skin/SkinModern/assets/images/play.svg');
+  background-image: url('./Skin/SkinModern/assets/images/play.svg');
 
   &:hover {
     @include svg-icon-shadow;
   }
 
   &.#{$prefix}-on {
-    background-image: url('../Skin/SkinModern/assets/images/pause.svg');
+    background-image: url('./Skin/SkinModern/assets/images/pause.svg');
 
     &.#{$prefix}-stoptoggle {
-      background-image: url('../Skin/SkinModern/assets/images/stop.svg');
+      background-image: url('./Skin/SkinModern/assets/images/stop.svg');
     }
   }
 }
diff --git a/src/player/React/Skin/SkinModern/components/_replaybutton.scss b/src/player/React/Skin/SkinModern/components/_replaybutton.scss
index b574d92..bdf840d 100644
--- a/src/player/React/Skin/SkinModern/components/_replaybutton.scss
+++ b/src/player/React/Skin/SkinModern/components/_replaybutton.scss
@@ -4,7 +4,7 @@
 .#{$prefix}-ui-replaybutton {
   @extend %ui-button;
 
-  background-image: url('../Skin/SkinModern/assets/images/replay-nocircle.svg');
+  background-image: url('./Skin/SkinModern/assets/images/replay-nocircle.svg');
 
   &:hover {
     @include svg-icon-shadow;
diff --git a/src/player/React/Skin/SkinModern/components/_settingspanelpageopenbutton.scss b/src/player/React/Skin/SkinModern/components/_settingspanelpageopenbutton.scss
index c551c00..64c6057 100644
--- a/src/player/React/Skin/SkinModern/components/_settingspanelpageopenbutton.scss
+++ b/src/player/React/Skin/SkinModern/components/_settingspanelpageopenbutton.scss
@@ -4,7 +4,7 @@
 %ui-settingspanelpageopenbutton {
   @extend %ui-button;
 
-  background-image: url('../Skin/SkinModern/assets/images/settings.svg');
+  background-image: url('./Skin/SkinModern/assets/images/settings.svg');
   max-height: .8em;
   padding: .3em 0;
   vertical-align: bottom;
@@ -14,7 +14,7 @@
   }
 
   &.#{$prefix}-on {
-    background-image: url('../Skin/SkinModern/assets/images/settingsX.svg');
+    background-image: url('./Skin/SkinModern/assets/images/settingsX.svg');
   }
 }
 
diff --git a/src/player/React/Skin/SkinModern/components/_settingstogglebutton.scss b/src/player/React/Skin/SkinModern/components/_settingstogglebutton.scss
index 76d04dd..351e36a 100644
--- a/src/player/React/Skin/SkinModern/components/_settingstogglebutton.scss
+++ b/src/player/React/Skin/SkinModern/components/_settingstogglebutton.scss
@@ -18,9 +18,9 @@
 .#{$prefix}-ui-settingstogglebutton {
   @extend %ui-settingstogglebutton;
 
-  background-image: url('../Skin/SkinModern/assets/images/settings.svg');
+  background-image: url('./Skin/SkinModern/assets/images/settings.svg');
 
   &.#{$prefix}-on {
-    background-image: url('../Skin/SkinModern/assets/images/settingsX.svg');
+    background-image: url('./Skin/SkinModern/assets/images/settingsX.svg');
   }
 }
diff --git a/src/player/React/Skin/SkinModern/components/_subtitlesettingspaneltogglebutton.scss b/src/player/React/Skin/SkinModern/components/_subtitlesettingspaneltogglebutton.scss
index 37b05d0..dcb5b65 100644
--- a/src/player/React/Skin/SkinModern/components/_subtitlesettingspaneltogglebutton.scss
+++ b/src/player/React/Skin/SkinModern/components/_subtitlesettingspaneltogglebutton.scss
@@ -4,9 +4,9 @@
 .#{$prefix}-ui-subtitlesettingstogglebutton {
   @extend %ui-settingstogglebutton;
 
-  background-image: url('../Skin/SkinModern/assets/images/subtitles.svg');
+  background-image: url('./Skin/SkinModern/assets/images/subtitles.svg');
 
   &.#{$prefix}-on {
-    background-image: url('../Skin/SkinModern/assets/images/subtitlesX.svg');
+    background-image: url('./Skin/SkinModern/assets/images/subtitlesX.svg');
   }
 }
diff --git a/src/player/React/Skin/SkinModern/components/_volumetogglebutton.scss b/src/player/React/Skin/SkinModern/components/_volumetogglebutton.scss
index 98a84f0..3f1b5f0 100644
--- a/src/player/React/Skin/SkinModern/components/_volumetogglebutton.scss
+++ b/src/player/React/Skin/SkinModern/components/_volumetogglebutton.scss
@@ -9,12 +9,12 @@
   }
 
   &.#{$prefix}-muted {
-    background-image: url('../Skin/SkinModern/assets/images/music-off.svg');
+    background-image: url('./Skin/SkinModern/assets/images/music-off.svg');
   }
 
   &.#{$prefix}-unmuted {
     &[data-#{$prefix}-volume-level-tens='0'] {
-      background-image: url('../Skin/SkinModern/assets/images/music-off.svg');
+      background-image: url('./Skin/SkinModern/assets/images/music-off.svg');
     }
 
     &[data-#{$prefix}-volume-level-tens='1'],
@@ -22,7 +22,7 @@
     &[data-#{$prefix}-volume-level-tens='3'],
     &[data-#{$prefix}-volume-level-tens='4'],
     &[data-#{$prefix}-volume-level-tens='5'] {
-      background-image: url('../Skin/SkinModern/assets/images/music-low.svg');
+      background-image: url('./Skin/SkinModern/assets/images/music-low.svg');
     }
 
     &[data-#{$prefix}-volume-level-tens='6'],
@@ -30,7 +30,7 @@
     &[data-#{$prefix}-volume-level-tens='8'],
     &[data-#{$prefix}-volume-level-tens='9'],
     &[data-#{$prefix}-volume-level-tens='10'] {
-      background-image: url('../Skin/SkinModern/assets/images/music-on.svg');
+      background-image: url('./Skin/SkinModern/assets/images/music-on.svg');
     }
   }
 }
diff --git a/src/player/React/Skin/SkinModern/components/_vrtogglebutton.scss b/src/player/React/Skin/SkinModern/components/_vrtogglebutton.scss
index 3decc5a..7a65eaa 100644
--- a/src/player/React/Skin/SkinModern/components/_vrtogglebutton.scss
+++ b/src/player/React/Skin/SkinModern/components/_vrtogglebutton.scss
@@ -5,13 +5,13 @@
   @extend %ui-button;
 
   // svg() usage: http://pavliko.github.io/postcss-svg/
-  background-image: url('../Skin/SkinModern/assets/images/glasses.svg');
+  background-image: url('./Skin/SkinModern/assets/images/glasses.svg');
 
   &:hover {
     @include svg-icon-shadow;
   }
 
   &.#{$prefix}-on {
-    background-image: url('../Skin/SkinModern/assets/images/glassesX.svg');
+    background-image: url('./Skin/SkinModern/assets/images/glassesX.svg');
   }
 }
diff --git a/src/player/React/Skin/SkinModern/components/_watermark.scss b/src/player/React/Skin/SkinModern/components/_watermark.scss
index a0c25c7..dbbb6e0 100644
--- a/src/player/React/Skin/SkinModern/components/_watermark.scss
+++ b/src/player/React/Skin/SkinModern/components/_watermark.scss
@@ -5,7 +5,7 @@
 
   $watermark-size: 4em;
 
-  background-image: url('../Skin/SkinModern/assets/images/logo.svg');
+  background-image: url('./Skin/SkinModern/assets/images/logo.svg');
   background-size: initial;
   height: $watermark-size;
   margin: 2em;
diff --git a/src/player/React/Slice/Player.ts b/src/player/React/Slice/Player.ts
index 7475074..5d221e1 100644
--- a/src/player/React/Slice/Player.ts
+++ b/src/player/React/Slice/Player.ts
@@ -4,6 +4,7 @@ import { F1TV } from '@exhumer/f1tv-api';
 export type PlayerState = {
   ascendon: string | null;
   config: F1TV.Config | null;
+  currentPlayResult: F1TV.ContentPlayResult | null;
   videoContainer: F1TV.ContentVideoContainer | null;
   platform: string | null;
 };
@@ -11,6 +12,7 @@ export type PlayerState = {
 const initialState: PlayerState = {
   ascendon: null,
   config: null,
+  currentPlayResult: null,
   videoContainer: null,
   platform: null,
 };
@@ -25,6 +27,9 @@ export const configSlice = createSlice({
     updateConfig: (state, action: PayloadAction<F1TV.Config | null>) => {
       state.config = action.payload;
     },
+    updateCurrentPlayResult: (state, action: PayloadAction<F1TV.ContentPlayResult | null>) => {
+      state.currentPlayResult = action.payload;
+    },
     updatePlatform: (state, action: PayloadAction<string | null>) => {
       state.platform = action.payload;
     },
@@ -34,6 +39,6 @@ export const configSlice = createSlice({
   },
 });
 
-export const { updateAscendon, updateConfig, updatePlatform, updateVideoContainer } = configSlice.actions;
+export const { updateAscendon, updateConfig, updateCurrentPlayResult, updatePlatform, updateVideoContainer } = configSlice.actions;
 
 export default configSlice.reducer;
diff --git a/yarn.lock b/yarn.lock
index 5e8cdb8..b284c3b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -330,9 +330,9 @@
   optionalDependencies:
     global-agent "^3.0.0"
 
-"@electron/node-gyp@git+https://github.com/electron/node-gyp.git#06b29aafb7708acef8b3669835c8a7857ebc92d2":
+"@electron/node-gyp@https://github.com/electron/node-gyp#06b29aafb7708acef8b3669835c8a7857ebc92d2":
   version "10.2.0-electron.1"
-  resolved "git+https://github.com/electron/node-gyp.git#06b29aafb7708acef8b3669835c8a7857ebc92d2"
+  resolved "https://github.com/electron/node-gyp#06b29aafb7708acef8b3669835c8a7857ebc92d2"
   dependencies:
     env-paths "^2.2.0"
     exponential-backoff "^3.1.1"
@@ -1634,6 +1634,11 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
   integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
 
+bitmovin-player-react@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bitmovin-player-react/-/bitmovin-player-react-1.0.2.tgz#7917f1f68f46075dde08afe3d0cc9a3102b5649e"
+  integrity sha512-/lfIUE6s+5JgPEFtWSazKzvH3L9OrRT7oGN6I+03wMfIg1jZ/rsD2uC6YjdyAvKvvI4NR7+jsp6jARKKxsZn2g==
+
 bitmovin-player-ui@^3.75.0:
   version "3.75.0"
   resolved "https://registry.yarnpkg.com/bitmovin-player-ui/-/bitmovin-player-ui-3.75.0.tgz#59c11288436069862175862adfedd9b933514ea0"