diff --git a/backend/.idea/workspace.xml b/backend/.idea/workspace.xml
index d0c22a3..bd3ec1e 100644
--- a/backend/.idea/workspace.xml
+++ b/backend/.idea/workspace.xml
@@ -6,8 +6,6 @@
   <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/state.go" beforeDir="false" afterPath="$PROJECT_DIR$/internal/ws/state.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>
@@ -100,15 +98,4 @@
   <component name="VgoProject">
     <integration-enabled>true</integration-enabled>
   </component>
-  <component name="XDebuggerManager">
-    <breakpoint-manager>
-      <breakpoints>
-        <line-breakpoint enabled="true" type="DlvLineBreakpoint">
-          <url>file://$PROJECT_DIR$/internal/ws/handlers.go</url>
-          <line>61</line>
-          <option name="timeStamp" value="7" />
-        </line-breakpoint>
-      </breakpoints>
-    </breakpoint-manager>
-  </component>
 </project>
\ No newline at end of file
diff --git a/frontend/src/components/Player.tsx b/frontend/src/components/Player.tsx
index 52ef0ed..f4e7c49 100644
--- a/frontend/src/components/Player.tsx
+++ b/frontend/src/components/Player.tsx
@@ -1,103 +1,85 @@
-import { Box, css } from "@chakra-ui/react";
-import React, { FC, useEffect, useRef, useState } from "react";
+import { Box } from "@chakra-ui/react";
+import React, { forwardRef } from "react";
 import ReactPlayer, { Config, ReactPlayerProps } from "react-player";
-import IdentityData from "../interfaces/Identity";
-import { MessageTypes } from "../interfaces/IMessage";
-import SocketEvents from "../interfaces/SocketEvents";
-import Message from "../util/Message";
-import MessageUtil from "../util/MessageUtil";
-import PlayerSocket from "../ws/websocket";
 
-type PlayerProps = {
-  id: string;
-  socket: PlayerSocket;
-  identity?: IdentityData;
-} & ReactPlayerProps;
-
-const Player: FC<PlayerProps> = (props) => {
-  const playerRef = useRef<ReactPlayer>(null);
-  const [paused, setPaused] = useState<boolean>(false);
-  const { socket } = props;
+const Player = forwardRef<ReactPlayer, ReactPlayerProps>((props, ref) => {
   const config: Config = {
     file: {
       forceHLS: true,
     },
   };
-  useEffect(() => {
-    if (playerRef.current && typeof props.identity !== "undefined") {
-      console.log(props.identity.playhead);
-      playerRef.current.seekTo(props.identity.playhead);
-      setPaused(props.identity.paused);
-    }
-  }, []);
-  socket.emitter.once(SocketEvents.SetPlayhead, (e) => {
-    console.log(e);
-    playerRef.current.seekTo(e.playhead);
-    setPaused(e.paused);
-  });
-  const onSeek = (playedSeconds: number) => {
-    if (!props.identity.admin) return;
-    if (paused) {
-      socket?.send(
-        MessageUtil.encode(
-          new Message(MessageTypes.SetPlayhead, {
-            playhead: playedSeconds,
-            paused: true,
-          })
-        )
-      );
-      return;
-    }
-    socket?.send(
-      MessageUtil.encode(
-        new Message(MessageTypes.SetPlayhead, {
-          playhead: playedSeconds,
-          paused: false,
-        })
-      )
-    );
-  };
-  const onPause = () => {
-    if (!props.identity.admin) return;
-    setPaused(true);
-    socket?.send(
-      MessageUtil.encode(
-        new Message(MessageTypes.SetPlayhead, {
-          playhead: playerRef.current.getCurrentTime(),
-          paused: true,
-        })
-      )
-    );
-  };
-  const onPlay = () => {
-    if (!props.identity.admin) return;
-    setPaused(false);
-    socket?.send(
-      MessageUtil.encode(
-        new Message(MessageTypes.SetPlayhead, {
-          playhead: playerRef.current.getCurrentTime(),
-          paused: false,
-        })
-      )
-    );
-  };
+  // useEffect(() => {
+  //   if (playerRef.current && typeof props.identity !== "undefined") {
+  //     console.log(props.identity.playhead);
+  //     playerRef.current.seekTo(props.identity.playhead);
+  //     setPaused(props.identity.paused);
+  //   }
+  // }, []);
+  // socket.emitter.once(SocketEvents.SetPlayhead, (e) => {
+  //   console.log(e);
+  //   playerRef.current.seekTo(e.playhead);
+  //   setPaused(e.paused);
+  // });
+  // const onSeek = (playedSeconds: number) => {
+  //   if (!props.identity.admin) return;
+  //   if (paused) {
+  //     socket?.send(
+  //       MessageUtil.encode(
+  //         new Message(MessageTypes.SetPlayhead, {
+  //           playhead: playedSeconds,
+  //           paused: true,
+  //         })
+  //       )
+  //     );
+  //     return;
+  //   }
+  //   socket?.send(
+  //     MessageUtil.encode(
+  //       new Message(MessageTypes.SetPlayhead, {
+  //         playhead: playedSeconds,
+  //         paused: false,
+  //       })
+  //     )
+  //   );
+  // };
+  // const onPause = () => {
+  //   if (!props.identity.admin) return;
+  //   setPaused(true);
+  //   socket?.send(
+  //     MessageUtil.encode(
+  //       new Message(MessageTypes.SetPlayhead, {
+  //         playhead: playerRef.current.getCurrentTime(),
+  //         paused: true,
+  //       })
+  //     )
+  //   );
+  // };
+  // const onPlay = () => {
+  //   if (!props.identity.admin) return;
+  //   setPaused(false);
+  //   socket?.send(
+  //     MessageUtil.encode(
+  //       new Message(MessageTypes.SetPlayhead, {
+  //         playhead: playerRef.current.getCurrentTime(),
+  //         paused: false,
+  //       })
+  //     )
+  //   );
+  // };
   return (
     <Box height="100vh" width="100vw">
       <ReactPlayer
-        url={props.id}
+        url={props.url}
         width="100%"
         height="100%"
         config={config}
-        controls={props.identity.admin}
-        onPlay={onPlay}
-        onPause={onPause}
-        onSeek={onSeek}
-        ref={playerRef}
-        playing={!paused}
+        controls
+        ref={ref}
+        playing={false}
         {...props}
       />
     </Box>
   );
-};
+});
 
 export default Player;
diff --git a/frontend/src/hooks/useWS.ts b/frontend/src/hooks/useWS.ts
index 2a4c80c..546d336 100644
--- a/frontend/src/hooks/useWS.ts
+++ b/frontend/src/hooks/useWS.ts
@@ -7,17 +7,19 @@ interface useWSProps {
 }
 
 // todo write websocket reconnector
-const useWS = ({ user }: useWSProps) => {
+const useWS = ({ user }: useWSProps): PlayerSocket | null => {
   if (typeof window === "undefined") {
     return;
   }
   // todo checkout usecallback
-  const [socket, setSocket] = useState<PlayerSocket>();
+  const [socket, setSocket] = useState<PlayerSocket>(null);
   useEffect(() => {
     let internalSocket = new PlayerSocket(user);
     setSocket(internalSocket);
     return () => {
-      return internalSocket.close();
+      if (internalSocket.readyState !== WebSocket.OPEN) {
+        return internalSocket.close();
+      }
     };
   }, []);
 
diff --git a/frontend/src/interfaces/Playhead.ts b/frontend/src/interfaces/Playhead.ts
new file mode 100644
index 0000000..13dc7b4
--- /dev/null
+++ b/frontend/src/interfaces/Playhead.ts
@@ -0,0 +1,4 @@
+export default interface SetPlayheadEvent {
+  playhead: number;
+  paused: boolean;
+}
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index 3dae921..56e2719 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -8,7 +8,7 @@ import { Container } from "../components/Container";
 import { Footer } from "../components/Footer";
 import { Hero } from "../components/Hero";
 import { Main } from "../components/Main";
-import isDev from "../util/isDev";
+import { isDev } from "../util";
 
 const Index: NextPage = () => {
   return (
diff --git a/frontend/src/pages/player.tsx b/frontend/src/pages/player.tsx
index a71eade..0938f60 100644
--- a/frontend/src/pages/player.tsx
+++ b/frontend/src/pages/player.tsx
@@ -1,16 +1,17 @@
 import { GetServerSideProps, NextPage } from "next";
 import { User } from "next-auth";
 import { getSession } from "next-auth/react";
-import dynamic from "next/dynamic";
 import Head from "next/head";
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
+import ReactPlayer from "react-player";
 import { Container } from "../components/Container";
+import Player from "../components/Player";
 import useWS from "../hooks/useWS";
 import IdentityData from "../interfaces/Identity";
+import SetPlayheadEvent from "../interfaces/Playhead";
 import SocketEvents from "../interfaces/SocketEvents";
-import isBrowser from "../util/isBrowser";
-
-const Player = dynamic(() => import("../components/Player"), { ssr: false });
+import { isBrowser } from "../util";
+import PlayerSocket from "../ws/websocket";
 
 interface PlayerPageProps {
   user: User;
@@ -18,25 +19,29 @@ interface PlayerPageProps {
 // types for the function
 
 const PlayerPage: NextPage<PlayerPageProps> = ({ user }) => {
-  // const playerRef = useRef<ReactPlayer>();
   const socket = useWS({ user });
+  const playerRef = useRef<ReactPlayer>();
   const [id, setID] = useState<string>("");
   const [identity, setIdentity] = useState<IdentityData>();
-  if (isBrowser() && typeof socket !== "undefined") {
-    socket.emitter.on(SocketEvents.Identify, (e: IdentityData) => {
-      console.log(e);
-      setID(e.playlist);
-      setIdentity(e);
-    });
-    console.log(identity);
-  }
+  useEffect(() => {
+    if (isBrowser() && typeof socket !== "undefined") {
+      socket?.emitter.once(SocketEvents.Identify, (e: IdentityData) => {
+        setID(e.playlist);
+        setIdentity(e);
+      });
+      socket?.emitter.on(SocketEvents.SetPlayhead, (e: SetPlayheadEvent) => {
+        console.log(e);
+      });
+    }
+  }, [socket]);
+  const onSeek = () => {};
   return (
     <>
       <Head>
         <title>Watch Together</title>
       </Head>
       <Container height="100vh" background={"#000"}>
-        <Player id={id} socket={socket} identity={identity} />
+        <Player ref={playerRef} />
       </Container>
     </>
   );
diff --git a/frontend/src/util/Handler.ts b/frontend/src/util/Handler.ts
deleted file mode 100644
index 43d2e2e..0000000
--- a/frontend/src/util/Handler.ts
+++ /dev/null
@@ -1 +0,0 @@
-export default class Handler {}
diff --git a/frontend/src/util/api.tsx b/frontend/src/util/api.tsx
deleted file mode 100644
index cd48e7e..0000000
--- a/frontend/src/util/api.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-const useAPI = () => {};
-
-export default useAPI;
diff --git a/frontend/src/util/index.ts b/frontend/src/util/index.ts
new file mode 100644
index 0000000..6b42b9e
--- /dev/null
+++ b/frontend/src/util/index.ts
@@ -0,0 +1,6 @@
+export function isDev() {
+  return process.env.NODE_ENV === "development";
+}
+export function isBrowser() {
+  return typeof window !== "undefined";
+}
diff --git a/frontend/src/util/isBrowser.ts b/frontend/src/util/isBrowser.ts
deleted file mode 100644
index cc6ba88..0000000
--- a/frontend/src/util/isBrowser.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function isBrowser() {
-  return typeof window !== "undefined";
-}
diff --git a/frontend/src/util/isDev.ts b/frontend/src/util/isDev.ts
deleted file mode 100644
index 99f94cd..0000000
--- a/frontend/src/util/isDev.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function isDev() {
-  return process.env.NODE_ENV === "development";
-}
diff --git a/frontend/src/ws/websocket.ts b/frontend/src/ws/websocket.ts
index 6f346ac..73709ee 100644
--- a/frontend/src/ws/websocket.ts
+++ b/frontend/src/ws/websocket.ts
@@ -25,6 +25,10 @@ export default class PlayerSocket extends Websocket {
     this.onmessage = this.onMessage;
     this.onclose = this.onClose;
   }
+  close(code?: number, reason?: string): void {
+    this.emitter.removeAllListeners();
+    super.close(code, reason);
+  }
   onMessage(evt: MessageEvent<any>) {
     let message = MessageUtil.decode(evt.data);
     if (message.type === MessageTypes["Ping"]) {
@@ -65,7 +69,6 @@ export default class PlayerSocket extends Websocket {
   }
   onClose(event: CloseEvent) {
     console.log("[WS] socket connection closed");
-    console.log(event);
     this.emitter.emit("closed");
   }
   get open() {