diff --git a/README.md b/README.md
index 25693bed..27f5b070 100644
--- a/README.md
+++ b/README.md
@@ -47,6 +47,13 @@
 
 ## Prerequests
 
+### Yarn Install
+Make sure npm packages are installed with yarn to generate `yarn.lock` file.
+```
+yarn install
+```
+
+### The Movie Database
 - Create an account if you don't have on [TMDB](https://www.themoviedb.org/).
   Because I use its free API to consume movie/tv data.
 - And then follow the [documentation](https://developers.themoviedb.org/3/getting-started/introduction) to create API Key
diff --git a/src/components/DetailModal.tsx b/src/components/DetailModal.tsx
index e2abb157..298c72cb 100644
--- a/src/components/DetailModal.tsx
+++ b/src/components/DetailModal.tsx
@@ -48,7 +48,7 @@ export default function DetailModal() {
 
   const handleReady = useCallback((player: Player) => {
     playerRef.current = player;
-    setMuted(player.muted());
+    setMuted(player.muted() || false);
   }, []);
 
   const handleMute = useCallback((status: boolean) => {
diff --git a/src/components/watch/VolumeControllers.tsx b/src/components/watch/VolumeControllers.tsx
index c3734bcd..085b8344 100644
--- a/src/components/watch/VolumeControllers.tsx
+++ b/src/components/watch/VolumeControllers.tsx
@@ -1,7 +1,6 @@
 import { Stack } from "@mui/material";
 import Slider from "@mui/material/Slider";
 import { styled } from "@mui/material/styles";
-import { SliderUnstyledOwnProps } from "@mui/base/SliderUnstyled";
 import VolumeUpIcon from "@mui/icons-material/VolumeUp";
 import VolumeOffIcon from "@mui/icons-material/VolumeOff";
 import PlayerControlButton from "./PlayerControlButton";
@@ -34,6 +33,8 @@ const StyledSlider = styled(Slider)({
   },
 });
 
+import { SliderTypeMap } from "@mui/material/Slider";
+
 export default function VolumeControllers({
   value,
   handleVolume,
@@ -41,7 +42,7 @@ export default function VolumeControllers({
   muted,
 }: {
   value: number;
-  handleVolume: SliderUnstyledOwnProps["onChange"];
+  handleVolume: SliderTypeMap["props"]["onChange"];
   handleVolumeToggle: React.MouseEventHandler<HTMLButtonElement>;
   muted: boolean;
 }) {
diff --git a/src/pages/WatchPage.tsx b/src/pages/WatchPage.tsx
index 3ab75ec0..bfdb31ee 100644
--- a/src/pages/WatchPage.tsx
+++ b/src/pages/WatchPage.tsx
@@ -2,7 +2,6 @@ import { useState, useRef, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 import Player from "video.js/dist/types/player";
 import { Box, Stack, Typography } from "@mui/material";
-import { SliderUnstyledOwnProps } from "@mui/base/SliderUnstyled";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import PauseIcon from "@mui/icons-material/Pause";
 import SkipNextIcon from "@mui/icons-material/SkipNext";
@@ -21,6 +20,8 @@ import PlayerSeekbar from "src/components/watch/PlayerSeekbar";
 import PlayerControlButton from "src/components/watch/PlayerControlButton";
 import MainLoadingScreen from "src/components/MainLoadingScreen";
 
+import { SliderTypeMap } from "@mui/material/Slider";
+
 export function Component() {
   const playerRef = useRef<Player | null>(null);
   const [playerState, setPlayerState] = useState({
@@ -72,13 +73,13 @@ export function Component() {
 
     player.on("timeupdate", () => {
       setPlayerState((draft) => {
-        return { ...draft, playedSeconds: player.currentTime() };
+        return { ...draft, playedSeconds: player.currentTime() ?? 0 };
       });
     });
 
     player.one("durationchange", () => {
       setPlayerInitialized(true);
-      setPlayerState((draft) => ({ ...draft, duration: player.duration() }));
+      setPlayerState((draft) => ({ ...draft, duration: player.duration() ?? 0 }));
     });
 
     playerRef.current = player;
@@ -88,10 +89,10 @@ export function Component() {
     });
   };
 
-  const handleVolumeChange: SliderUnstyledOwnProps["onChange"] = (_, value) => {
-    playerRef.current?.volume((value as number) / 100);
+  const handleVolumeChange: SliderTypeMap["props"]["onChange"] = (event: any, value: number | number[]) => {
+    playerRef.current?.volume(Array.isArray(value) ? value[0] / 100 : value / 100);
     setPlayerState((draft) => {
-      return { ...draft, volume: (value as number) / 100 };
+      return { ...draft, volume: Array.isArray(value) ? value[0] / 100 : value / 100 };
     });
   };