diff --git a/src/components/common/VideoPlayer/Components/MobileControlsBar.tsx b/src/components/common/VideoPlayer/Components/MobileControlsBar.tsx
index 7a733b2..81a677b 100644
--- a/src/components/common/VideoPlayer/Components/MobileControlsBar.tsx
+++ b/src/components/common/VideoPlayer/Components/MobileControlsBar.tsx
@@ -10,8 +10,7 @@ import {
   ProgressSlider,
   ReloadButton,
   VideoTime,
-  VolumeButton,
-  VolumeSlider,
+  VolumeControl,
 } from "./VideoControls.tsx";
 
 export const MobileControlsBar = () => {
@@ -54,10 +53,6 @@ export const MobileControlsBar = () => {
           },
         }}
       >
-        <MenuItem>
-          <VolumeButton />
-          <VolumeSlider width={"100%"} />
-        </MenuItem>
         <MenuItem>
           <ObjectFitButton />
         </MenuItem>
diff --git a/src/components/common/VideoPlayer/Components/VideoControls.tsx b/src/components/common/VideoPlayer/Components/VideoControls.tsx
index ec89106..d655279 100644
--- a/src/components/common/VideoPlayer/Components/VideoControls.tsx
+++ b/src/components/common/VideoPlayer/Components/VideoControls.tsx
@@ -1,4 +1,4 @@
-import { IconButton, Slider, Typography } from "@mui/material";
+import { Box, IconButton, Slider, Typography } from "@mui/material";
 import { fontSizeExSmall, fontSizeSmall } from "../../../../constants/Misc.ts";
 import { CustomFontTooltip } from "../../../../utils/CustomFontTooltip.tsx";
 import { formatTime } from "../../../../utils/numberFunctions.ts";
@@ -18,7 +18,7 @@ import { useSignalEffect } from "@preact/signals-react";
 export const PlayButton = () => {
   const { togglePlay, playing } = useVideoContext();
   return (
-    <CustomFontTooltip title="Pause/Play (Spacebar)" placement="top" arrow>
+    <CustomFontTooltip title="Pause/Play (Spacebar)" placement="bottom" arrow>
       <IconButton
         sx={{
           color: "white",
@@ -34,7 +34,7 @@ export const PlayButton = () => {
 export const ReloadButton = () => {
   const { reloadVideo } = useVideoContext();
   return (
-    <CustomFontTooltip title="Reload Video (R)" placement="top" arrow>
+    <CustomFontTooltip title="Reload Video (R)" placement="bottom" arrow>
       <IconButton
         sx={{
           color: "white",
@@ -57,7 +57,7 @@ export const ProgressSlider = () => {
       max={videoRef.current?.duration || 100}
       sx={{
         position: "absolute",
-        bottom: "40px",
+        bottom: "42px",
         color: "#00abff",
         padding: "0px",
         // prevents the slider from jumping up 20px in certain mobile conditions
@@ -69,7 +69,8 @@ export const ProgressSlider = () => {
           height: "16px",
         },
         "& .MuiSlider-thumb::after": { width: "20px", height: "20px" },
-        "& .MuiSlider-rail": { opacity: 0.5 },
+        "& .MuiSlider-rail": { opacity: 0.5, height: "6px" },
+        "& .MuiSlider-track": { height: "6px", border: "0px" },
       }}
     />
   );
@@ -81,7 +82,7 @@ export const VideoTime = () => {
   return (
     <CustomFontTooltip
       title="Seek video in 10% increments (0-9)"
-      placement="top"
+      placement="bottom"
       arrow
     >
       <Typography
@@ -102,12 +103,12 @@ export const VideoTime = () => {
   );
 };
 
-export const VolumeButton = () => {
+const VolumeButton = () => {
   const { isMuted, toggleMute } = useVideoContext();
   return (
     <CustomFontTooltip
       title="Toggle Mute (M), Raise (UP), Lower (DOWN)"
-      placement="top"
+      placement="bottom"
       arrow
     >
       <IconButton
@@ -122,8 +123,13 @@ export const VolumeButton = () => {
   );
 };
 
-export const VolumeSlider = ({ width }: { width: string }) => {
+const VolumeSlider = ({ width }: { width: string }) => {
   const { volume, onVolumeChange } = useVideoContext();
+  let color = "";
+  if (volume.value <= 0.5) color = "green";
+  else if (volume.value <= 0.75) color = "yellow";
+  else color = "red";
+
   return (
     <Slider
       value={volume.value}
@@ -134,18 +140,36 @@ export const VolumeSlider = ({ width }: { width: string }) => {
       sx={{
         width,
         marginRight: "10px",
-        "& .MuiSlider-thumb::after": { width: "25px", height: "25px" },
+        color,
+        "& .MuiSlider-thumb": {
+          backgroundColor: "#fff",
+          width: "16px",
+          height: "16px",
+        },
+        "& .MuiSlider-thumb::after": { width: "16px", height: "16px" },
+        "& .MuiSlider-rail": { opacity: 0.5, height: "6px" },
+        "& .MuiSlider-track": { height: "6px", border: "0px" },
       }}
     />
   );
 };
 
+export const VolumeControl = ({ sliderWidth }: { sliderWidth: string }) => {
+  return (
+    <Box
+      sx={{ display: "flex", gap: "5px", alignItems: "center", width: "100%" }}
+    >
+      <VolumeButton />
+      <VolumeSlider width={sliderWidth} />
+    </Box>
+  );
+};
 export const PlaybackRate = () => {
   const { playbackRate, increaseSpeed, isScreenSmall } = useVideoContext();
   return (
     <CustomFontTooltip
       title="Video Speed. Increase (+ or >), Decrease (- or <)"
-      placement="top"
+      placement="bottom"
       arrow
     >
       <IconButton
@@ -170,7 +194,11 @@ export const PictureInPictureButton = () => {
   return (
     <>
       {!isFullscreen.value && (
-        <CustomFontTooltip title="Picture in Picture (P)" placement="top" arrow>
+        <CustomFontTooltip
+          title="Picture in Picture (P)"
+          placement="bottom"
+          arrow
+        >
           <IconButton
             sx={{
               color: "white",
@@ -189,7 +217,7 @@ export const PictureInPictureButton = () => {
 export const ObjectFitButton = () => {
   const { toggleObjectFit } = useVideoContext();
   return (
-    <CustomFontTooltip title="Toggle Aspect Ratio (O)" placement="top" arrow>
+    <CustomFontTooltip title="Toggle Aspect Ratio (O)" placement="bottom" arrow>
       <IconButton
         sx={{
           color: "white",
@@ -206,7 +234,7 @@ export const ObjectFitButton = () => {
 export const FullscreenButton = () => {
   const { toggleFullscreen } = useVideoContext();
   return (
-    <CustomFontTooltip title="Toggle Fullscreen (F)" placement="top" arrow>
+    <CustomFontTooltip title="Toggle Fullscreen (F)" placement="bottom" arrow>
       <IconButton
         sx={{
           color: "white",
diff --git a/src/components/common/VideoPlayer/Components/VideoControlsBar.tsx b/src/components/common/VideoPlayer/Components/VideoControlsBar.tsx
index 48f1362..2aa5663 100644
--- a/src/components/common/VideoPlayer/Components/VideoControlsBar.tsx
+++ b/src/components/common/VideoPlayer/Components/VideoControlsBar.tsx
@@ -11,17 +11,15 @@ import {
   ProgressSlider,
   ReloadButton,
   VideoTime,
-  VolumeButton,
-  VolumeSlider,
+  VolumeControl,
 } from "./VideoControls.tsx";
-import { useSignalEffect } from "@preact/signals-react";
 
 export const VideoControlsBar = () => {
   const { from, canPlay, showControlsFullScreen, isScreenSmall, progress } =
     useVideoContext();
 
   const showMobileControls = isScreenSmall && canPlay.value;
-  const controlsHeight = "40px";
+  const controlsHeight = "42px";
   const controlGroupSX = {
     display: "flex",
     gap: "5px",
@@ -46,8 +44,7 @@ export const VideoControlsBar = () => {
 
             <ProgressSlider />
 
-            <VolumeButton />
-            <VolumeSlider width={"100px"} />
+            <VolumeControl sliderWidth={"100px"} />
             <VideoTime />
           </Box>
 
diff --git a/src/components/common/VideoPlayer/VideoPlayer-State.ts b/src/components/common/VideoPlayer/VideoPlayer-State.ts
index 6a1b20f..a41a87d 100644
--- a/src/components/common/VideoPlayer/VideoPlayer-State.ts
+++ b/src/components/common/VideoPlayer/VideoPlayer-State.ts
@@ -147,11 +147,6 @@ export const useVideoPlayerState = (props: VideoPlayerProps, ref: any) => {
     if (!videoRef.current) return;
     videoRef.current.currentTime = value as number;
     progress.value = value as number;
-
-    if (!playing.value) {
-      await videoRef.current.play();
-      playing.value = true;
-    }
   };
 
   const handleEnded = () => {
@@ -198,9 +193,7 @@ export const useVideoPlayerState = (props: VideoPlayerProps, ref: any) => {
       const target = event?.target;
       if (target) {
         target.pause();
-        if (playing.value) {
-          playing.value = false;
-        }
+        if (playing.value) playing.value = false;
       }
     };
 
diff --git a/src/components/common/VideoPlayer/VideoPlayerGlobal.tsx b/src/components/common/VideoPlayer/VideoPlayerGlobal.tsx
index 436aa26..df29970 100644
--- a/src/components/common/VideoPlayer/VideoPlayerGlobal.tsx
+++ b/src/components/common/VideoPlayer/VideoPlayerGlobal.tsx
@@ -445,21 +445,21 @@ export const VideoPlayerGlobal: React.FC<VideoPlayerProps> = ({
     }
   };
 
-  useEffect(() => {
-    if (element) {
-      const oldElement = document.getElementById("videoPlayer");
-      if (oldElement && oldElement?.parentNode) {
-        oldElement?.parentNode.replaceChild(element, oldElement);
-        videoRef.current = element;
-        setPlaying(true);
-        setCanPlay(true);
-        setStartPlay(true);
-        //videoRef?.current?.addEventListener("click", () => {});
-        videoRef?.current?.addEventListener("timeupdate", updateProgress);
-        videoRef?.current?.addEventListener("ended", handleEnded);
-      }
-    }
-  }, [element]);
+  // useEffect(() => {
+  //   if (element) {
+  //     const oldElement = document.getElementById("videoPlayer");
+  //     if (oldElement && oldElement?.parentNode) {
+  //       oldElement?.parentNode.replaceChild(element, oldElement);
+  //       videoRef.current = element;
+  //       setPlaying(true);
+  //       setCanPlay(true);
+  //       setStartPlay(true);
+  //       //videoRef?.current?.addEventListener("click", () => {});
+  //       videoRef?.current?.addEventListener("timeupdate", updateProgress);
+  //       videoRef?.current?.addEventListener("ended", handleEnded);
+  //     }
+  //   }
+  // }, [element]);
 
   return (
     <VideoContainer
@@ -483,9 +483,9 @@ export const VideoPlayerGlobal: React.FC<VideoPlayerProps> = ({
           }}
         ></CloseIcon>
       </div>
-      <div onClick={togglePlay}>
-        <VideoElement id="videoPlayer" />
-      </div>
+      {/*<div onClick={togglePlay}>*/}
+      {/*  <VideoElement id="videoPlayer" />*/}
+      {/*</div>*/}
       <ControlsContainer
         style={{
           bottom: from === "create" ? "15px" : 0,
diff --git a/src/pages/ContentPages/VideoContent/VideoContent.tsx b/src/pages/ContentPages/VideoContent/VideoContent.tsx
index 1671614..626e43a 100644
--- a/src/pages/ContentPages/VideoContent/VideoContent.tsx
+++ b/src/pages/ContentPages/VideoContent/VideoContent.tsx
@@ -121,7 +121,7 @@ export const VideoContent = () => {
             color="textPrimary"
             sx={{
               textAlign: "start",
-              marginTop: "10px",
+              marginTop: isScreenSmall ? "20px" : "10px",
             }}
           >
             {videoData?.title}
diff --git a/src/wrappers/GlobalWrapper.tsx b/src/wrappers/GlobalWrapper.tsx
index 59dbd34..58a95c9 100644
--- a/src/wrappers/GlobalWrapper.tsx
+++ b/src/wrappers/GlobalWrapper.tsx
@@ -228,30 +228,30 @@ const GlobalWrapper: React.FC<Props> = ({ children, setTheme }) => {
       />
       <EditVideo />
       <EditPlaylist />
-      <Rnd
-        onDragStart={onDragStart}
-        onDragStop={onDragStop}
-        style={{
-          display: videoPlaying ? "block" : "none",
-          position: "fixed",
-          height: "auto",
-          width: 350,
-          zIndex: 1000,
-          maxWidth: 800,
-        }}
-        default={{
-          x: 0,
-          y: 60,
-          width: 350,
-          height: "auto",
-        }}
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onDrag={() => {}}
-      >
-        {videoPlaying && (
-          <VideoPlayerGlobal checkIfDrag={checkIfDrag} element={videoPlaying} />
-        )}
-      </Rnd>
+      {/*<Rnd*/}
+      {/*  onDragStart={onDragStart}*/}
+      {/*  onDragStop={onDragStop}*/}
+      {/*  style={{*/}
+      {/*    display: videoPlaying ? "block" : "none",*/}
+      {/*    position: "fixed",*/}
+      {/*    height: "auto",*/}
+      {/*    width: 350,*/}
+      {/*    zIndex: 1000,*/}
+      {/*    maxWidth: 800,*/}
+      {/*  }}*/}
+      {/*  default={{*/}
+      {/*    x: 0,*/}
+      {/*    y: 60,*/}
+      {/*    width: 350,*/}
+      {/*    height: "auto",*/}
+      {/*  }}*/}
+      {/*  // eslint-disable-next-line @typescript-eslint/no-empty-function*/}
+      {/*  onDrag={() => {}}*/}
+      {/*>*/}
+      {/*  {videoPlaying && (*/}
+      {/*    <VideoPlayerGlobal checkIfDrag={checkIfDrag} element={videoPlaying} />*/}
+      {/*  )}*/}
+      {/*</Rnd>*/}
 
       {children}
     </>