diff --git a/backend/.idea/workspace.xml b/backend/.idea/workspace.xml
index 4fc0f70..bce6fc0 100644
--- a/backend/.idea/workspace.xml
+++ b/backend/.idea/workspace.xml
@@ -5,10 +5,8 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="8a64704d-5500-41a6-aa4c-e275933fc58c" name="Changes" comment="">
-      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/internal/ws/handlers.go" beforeDir="false" afterPath="$PROJECT_DIR$/internal/ws/handlers.go" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/internal/ws/hub.go" beforeDir="false" afterPath="$PROJECT_DIR$/internal/ws/hub.go" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/internal/ws/message.go" beforeDir="false" afterPath="$PROJECT_DIR$/internal/ws/message.go" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/src/components/Player.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/components/Player.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/src/pages/player.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/pages/player.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
diff --git a/frontend/src/components/Player.tsx b/frontend/src/components/Player.tsx
index 0741996..48032a1 100644
--- a/frontend/src/components/Player.tsx
+++ b/frontend/src/components/Player.tsx
@@ -1,19 +1,15 @@
 import React, { FC } from "react";
-import ReactPlayer, { ReactPlayerProps } from "react-player";
+import ReactPlayer, { Config, ReactPlayerProps } from "react-player";
 
 type PlayerProps = { id: string } & ReactPlayerProps;
 
-const Player: FC<PlayerProps> = ({ id, config }) => {
-  return <ReactPlayer url={id} config={config} />;
-};
-
-Player.defaultProps = {
-  id: "",
-  config: {
+const Player: FC<PlayerProps> = (props) => {
+  const config: Config = {
     file: {
       forceHLS: true,
     },
-  },
+  };
+  return <ReactPlayer url={props.id} config={config} {...props} />;
 };
 
 export default Player;
diff --git a/frontend/src/pages/_document.tsx b/frontend/src/pages/_document.tsx
index 542c4d0..ce3cca6 100644
--- a/frontend/src/pages/_document.tsx
+++ b/frontend/src/pages/_document.tsx
@@ -1,5 +1,6 @@
 import NextDocument, { Html, Head, Main, NextScript } from "next/document";
 import { ColorModeScript } from "@chakra-ui/react";
+import theme from "../theme";
 
 export default class Document extends NextDocument {
   render() {
@@ -8,7 +9,7 @@ export default class Document extends NextDocument {
         <Head />
         <body>
           {/* Make Color mode to persists when you refresh the page. */}
-          <ColorModeScript />
+          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
           <Main />
           <NextScript />
         </body>
diff --git a/frontend/src/pages/player.tsx b/frontend/src/pages/player.tsx
index 6e5087d..54c936a 100644
--- a/frontend/src/pages/player.tsx
+++ b/frontend/src/pages/player.tsx
@@ -3,7 +3,8 @@ import { GetServerSideProps, NextPage } from "next";
 import { Session, User } from "next-auth";
 import { getSession, useSession } from "next-auth/react";
 import dynamic from "next/dynamic";
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
+import ReactPlayer from "react-player";
 import { Container } from "../components/Container";
 import { MessageTypes } from "../interfaces/IMessage";
 import Message from "../util/Message";
@@ -28,6 +29,7 @@ const pingEvent = (ws: WebSocket) => {
 };
 
 const PlayerPage: NextPage<PlayerPageProps> = ({ URI, user }) => {
+  const playerRef = useRef<ReactPlayer>();
   consola.wrapAll();
   useEffect(() => {
     if (typeof window === "undefined") return;
@@ -63,7 +65,11 @@ const PlayerPage: NextPage<PlayerPageProps> = ({ URI, user }) => {
       ws.close();
     };
   }, []);
-  return <Container height="100vh">{/* <Player /> */}</Container>;
+  return (
+    <Container height="100vh">
+      <Player id="" ref={playerRef} />
+    </Container>
+  );
 };
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
