diff --git a/components/VideoPlayer/index.jsx b/components/VideoPlayer/index.jsx
index 427cd70..ac3e9fc 100644
--- a/components/VideoPlayer/index.jsx
+++ b/components/VideoPlayer/index.jsx
@@ -8,6 +8,7 @@ export default function VideoPlayer({ video }) {
     play: true,
     currentTimePercentage: 0,
   });
+  const [showController, setShowController] = useState(false);
   const isSliding = useRef(null);
   // const currentTime = useMemo(()=>{
   //   const videoPlayer = document.getElementById("videoPlayer");
@@ -18,20 +19,33 @@ export default function VideoPlayer({ video }) {
   // })
   useEffect(() => {
     const videoPlayer = document.getElementById("videoPlayer");
+    const openVolum = () => {
+      videoPlayer.muted = false;
+    };
+    const pauseVideo = () => {
+      setVideoState((old) => ({ ...old, play: false }));
+    };
+    const updateTime = () => {
+      console.log((videoPlayer.currentTime / videoPlayer.duration) * 100);
+      if (!isSliding.current)
+        setVideoState((old) => ({
+          ...old,
+          currentTimePercentage:
+            (videoPlayer.currentTime / videoPlayer.duration) * 100,
+        }));
+    };
     if (videoPlayer) {
-      videoPlayer.addEventListener("ended", () => {
-        setVideoState((old) => ({ ...old, play: false }));
-      });
-      videoPlayer.addEventListener("timeupdate", () => {
-        console.log((videoPlayer.currentTime / videoPlayer.duration) * 100);
-        if (!isSliding.current)
-          setVideoState((old) => ({
-            ...old,
-            currentTimePercentage:
-              (videoPlayer.currentTime / videoPlayer.duration) * 100,
-          }));
-      });
+      videoPlayer.addEventListener("loadedmetadata", openVolum);
+      videoPlayer.addEventListener("ended", pauseVideo);
+      videoPlayer.addEventListener("timeupdate", updateTime);
     }
+    return () => {
+      if (videoPlayer) {
+        videoPlayer.removeEventListener("loadedmetadata", openVolum);
+        videoPlayer.removeEventListener("ended", pauseVideo);
+        videoPlayer.removeEventListener("timeupdate", updateTime);
+      }
+    };
   }, []);
   const toastValue = (value) => {
     isSliding.current = true;
@@ -61,21 +75,24 @@ export default function VideoPlayer({ video }) {
     isSliding.current = false;
   };
   return (
-    <div className="relative">
-      <BackgroundPlayer
-        src={video.mp4}
-        id="videoPlayer"
-        // controlsList="none"
-        poster={video?.url.src}
-        blurDataURL={video?.url.blurDataURL}
-        autoPlay={videoState.play}
-        // style={{ height: "calc(100vh)" }}
-      />
+    <div className="relative bg-black">
+      <div onClick={() => setShowController(!showController)}>
+        <BackgroundPlayer
+          src={video.mp4}
+          id="videoPlayer"
+          // controlsList="none"
+          poster={video?.url.src}
+          blurDataURL={video?.url.blurDataURL}
+          autoPlay={videoState.play}
+          // style={{ height: "calc(100vh)" }}
+        />
+      </div>
       <div
         className="absolute w-full px-4 grid justify-between items-center"
         style={{
           bottom: "12px",
           gridTemplateColumns: "calc(100% - 32px) 32px",
+          display: showController ? "grid" : "none",
         }}
       >
         <Slider