diff --git a/src/components/common/FileElement.tsx b/src/components/common/FileElement.tsx
index 5529701..5b6077b 100644
--- a/src/components/common/FileElement.tsx
+++ b/src/components/common/FileElement.tsx
@@ -68,15 +68,15 @@ export default function FileElement({
   customStyles,
 }: IAudioElement) {
   const { downloadVideo } = React.useContext(MyContext);
-  const [startedDownload, setStartedDownload] = React.useState<boolean>(false)
+  const [startedDownload, setStartedDownload] = React.useState<boolean>(false);
   const [isLoading, setIsLoading] = React.useState<boolean>(false);
   const [fileProperties, setFileProperties] = React.useState<any>(null);
   const [downloadLoader, setDownloadLoader] = React.useState<any>(false);
-  const downloads  = useSelector((state: RootState) => state.global?.downloads);
+  const downloads = useSelector((state: RootState) => state.global?.downloads);
   const hasCommencedDownload = React.useRef(false);
   const dispatch = useDispatch();
-  const reDownload = React.useRef<boolean>(false)
-  const isFetchingProperties = React.useRef<boolean>(false)
+  const reDownload = React.useRef<boolean>(false);
+  const isFetchingProperties = React.useRef<boolean>(false);
   const download = React.useMemo(() => {
     if (!downloads || !fileInfo?.identifier) return {};
     const findDownload = downloads[fileInfo?.identifier];
@@ -94,15 +94,13 @@ export default function FileElement({
   const handlePlay = async () => {
     if (disable) return;
     hasCommencedDownload.current = true;
-    setStartedDownload(true)
-    if (
-      resourceStatus?.status === "READY"
-    ) {
+    setStartedDownload(true);
+    if (resourceStatus?.status === "READY") {
       if (downloadLoader) return;
-     
+
       setDownloadLoader(true);
-      let filename = download?.properties?.filename
-      let mimeType = download?.properties?.type
+      let filename = download?.properties?.filename;
+      let mimeType = download?.properties?.type;
 
       try {
         const { name, service, identifier } = fileInfo;
@@ -122,7 +120,7 @@ export default function FileElement({
         }
         mimeType = res?.mimeType || mimeType;
       } catch (error) {
-        
+        console.log(error);
       }
       try {
         const { name, service, identifier } = fileInfo;
@@ -168,7 +166,7 @@ export default function FileElement({
     }
 
     const { name, service, identifier } = fileInfo;
-   
+
     setIsLoading(true);
     downloadVideo({
       name,
@@ -181,40 +179,37 @@ export default function FileElement({
   };
 
   const refetch = React.useCallback(async () => {
-    if (!fileInfo) return
+    if (!fileInfo) return;
     try {
       const { name, service, identifier } = fileInfo;
-      isFetchingProperties.current = true
+      isFetchingProperties.current = true;
       await qortalRequest({
-        action: 'GET_QDN_RESOURCE_PROPERTIES',
+        action: "GET_QDN_RESOURCE_PROPERTIES",
         name,
         service,
-        identifier
-      })
-      
+        identifier,
+      });
     } catch (error) {
-      
+      console.log(error);
     } finally {
-      isFetchingProperties.current = false
+      isFetchingProperties.current = false;
     }
-   
-  }, [fileInfo])
+  }, [fileInfo]);
 
-  const refetchInInterval = ()=> {
+  const refetchInInterval = () => {
     try {
-      const interval = setInterval(()=> {
-          if(resourceStatus?.current === 'DOWNLOADED'){
-            refetch()
-          }
-          if(resourceStatus?.current === 'READY'){
-            clearInterval(interval);
-          }
-         
-        }, 7500)
+      const interval = setInterval(() => {
+        if (resourceStatus?.current === "DOWNLOADED") {
+          refetch();
+        }
+        if (resourceStatus?.current === "READY") {
+          clearInterval(interval);
+        }
+      }, 7500);
     } catch (error) {
-      
+      console.log(error);
     }
-  }
+  };
 
   React.useEffect(() => {
     if (
@@ -230,12 +225,12 @@ export default function FileElement({
           alertType: "info",
         })
       );
-    } else  if (
-      resourceStatus?.status === 'DOWNLOADED' &&
+    } else if (
+      resourceStatus?.status === "DOWNLOADED" &&
       reDownload?.current === false
     ) {
-      refetchInInterval()
-      reDownload.current = true
+      refetchInInterval();
+      reDownload.current = true;
     }
   }, [resourceStatus, download]);
 
@@ -261,7 +256,8 @@ export default function FileElement({
         >
           {children}{" "}
           {((resourceStatus.status && resourceStatus?.status !== "READY") ||
-          isLoading) && startedDownload ? (
+            isLoading) &&
+          startedDownload ? (
             <>
               <CircularProgress color="secondary" size={14} />
               <Typography variant="body2">{`${Math.round(
@@ -334,38 +330,53 @@ export default function FileElement({
             </Box>
           </Box>
           {((resourceStatus.status && resourceStatus?.status !== "READY") ||
-            isLoading) && startedDownload && (
-            <Box
-              position="absolute"
-              top={0}
-              left={0}
-              right={0}
-              bottom={0}
-              display="flex"
-              justifyContent="center"
-              alignItems="center"
-              zIndex={4999}
-              bgcolor="rgba(0, 0, 0, 0.6)"
-              sx={{
-                display: "flex",
-                flexDirection: "column",
-                gap: "10px",
-                padding: "8px",
-                borderRadius: "10px",
-              }}
-            >
-              <CircularProgress color="secondary" />
-              {resourceStatus && (
-                <Typography
-                  variant="subtitle2"
-                  component="div"
-                  sx={{
-                    color: "white",
-                    fontSize: "14px",
-                  }}
-                >
-                  {resourceStatus?.status === "REFETCHING" ? (
-                    <>
+            isLoading) &&
+            startedDownload && (
+              <Box
+                position="absolute"
+                top={0}
+                left={0}
+                right={0}
+                bottom={0}
+                display="flex"
+                justifyContent="center"
+                alignItems="center"
+                zIndex={4999}
+                bgcolor="rgba(0, 0, 0, 0.6)"
+                sx={{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "10px",
+                  padding: "8px",
+                  borderRadius: "10px",
+                }}
+              >
+                <CircularProgress color="secondary" />
+                {resourceStatus && (
+                  <Typography
+                    variant="subtitle2"
+                    component="div"
+                    sx={{
+                      color: "white",
+                      fontSize: "14px",
+                    }}
+                  >
+                    {resourceStatus?.status === "REFETCHING" ? (
+                      <>
+                        <>
+                          {(
+                            (resourceStatus?.localChunkCount /
+                              resourceStatus?.totalChunkCount) *
+                            100
+                          )?.toFixed(0)}
+                          %
+                        </>
+
+                        <> Refetching in 2 minutes</>
+                      </>
+                    ) : resourceStatus?.status === "DOWNLOADED" ? (
+                      <>Download Completed: building file...</>
+                    ) : resourceStatus?.status !== "READY" ? (
                       <>
                         {(
                           (resourceStatus?.localChunkCount /
@@ -374,27 +385,13 @@ export default function FileElement({
                         )?.toFixed(0)}
                         %
                       </>
-
-                      <> Refetching in 2 minutes</>
-                    </>
-                  ) : resourceStatus?.status === "DOWNLOADED" ? (
-                    <>Download Completed: building file...</>
-                  ) : resourceStatus?.status !== "READY" ? (
-                    <>
-                      {(
-                        (resourceStatus?.localChunkCount /
-                          resourceStatus?.totalChunkCount) *
-                        100
-                      )?.toFixed(0)}
-                      %
-                    </>
-                  ) : (
-                    <>Download Completed: fetching file...</>
-                  )}
-                </Typography>
-              )}
-            </Box>
-          )}
+                    ) : (
+                      <>Download Completed: fetching file...</>
+                    )}
+                  </Typography>
+                )}
+              </Box>
+            )}
           {resourceStatus?.status === "READY" &&
             download?.url &&
             download?.properties?.filename && (
diff --git a/src/components/common/VideoPlayer/Components/LoadingVideo.tsx b/src/components/common/VideoPlayer/Components/LoadingVideo.tsx
index 5552df7..d7d57ff 100644
--- a/src/components/common/VideoPlayer/Components/LoadingVideo.tsx
+++ b/src/components/common/VideoPlayer/Components/LoadingVideo.tsx
@@ -2,6 +2,7 @@ import { Box, CircularProgress, Typography } from "@mui/material";
 import { setVideoPlaying } from "../../../../state/features/globalSlice.ts";
 import { useDispatch } from "react-redux";
 import { PlayArrow } from "@mui/icons-material";
+import { playing } from "../VideoPlayer-State.ts";
 
 export interface LoadingVideoProps {
   isLoading: boolean;
@@ -9,7 +10,7 @@ export interface LoadingVideoProps {
   src: any;
   startPlay: boolean;
   from: any;
-  togglePlay: (isPlay?: boolean) => void;
+  togglePlay: () => void;
 }
 export const LoadingVideo = ({
   isLoading,
@@ -102,6 +103,7 @@ export const LoadingVideo = ({
           onClick={() => {
             if (from === "create") return;
             dispatch(setVideoPlaying(null));
+            playing.value = true; // makes autoplay after video loaded work properly
             togglePlay();
           }}
           sx={{
diff --git a/src/components/common/VideoPlayer/Components/VideoControls-State.ts b/src/components/common/VideoPlayer/Components/VideoControls-State.ts
index 004c576..7cc6388 100644
--- a/src/components/common/VideoPlayer/Components/VideoControls-State.ts
+++ b/src/components/common/VideoPlayer/Components/VideoControls-State.ts
@@ -21,7 +21,7 @@ import {
 } from "../VideoPlayer-State.ts";
 import { useEffect } from "react";
 import { signal, useSignal } from "@preact/signals-react";
-import { useSignals } from "@preact/signals-react/runtime";
+import { useSignalEffect, useSignals } from "@preact/signals-react/runtime";
 import { VideoPlayerProps } from "../VideoPlayer.tsx";
 import ReactDOM from "react-dom";
 import { useSelector } from "react-redux";
@@ -30,7 +30,7 @@ export const showControlsFullScreen = signal(true);
 
 export const useVideoControlsState = (
   props: VideoPlayerProps,
-  videoRef,
+  videoRef: React.MutableRefObject<HTMLVideoElement>,
   videoPlayerState: ReturnType<typeof useVideoPlayerState>
 ) => {
   useSignals();
@@ -142,7 +142,6 @@ export const useVideoControlsState = (
     videoRef.current.src = src;
     videoRef.current.load();
     videoRef.current.currentTime = currentTime;
-
     playing.value = true;
     togglePlay();
   };
@@ -178,8 +177,10 @@ export const useVideoControlsState = (
   };
 
   useEffect(() => {
-    playing.value = true;
-    if (autoPlay && identifier) togglePlay();
+    if (autoPlay && identifier) {
+      console.log("autoplay useEffect");
+      togglePlay();
+    }
   }, [autoPlay, identifier]);
 
   const mute = () => {
diff --git a/src/components/common/VideoPlayer/VideoPlayer.tsx b/src/components/common/VideoPlayer/VideoPlayer.tsx
index b71e759..1f187d0 100644
--- a/src/components/common/VideoPlayer/VideoPlayer.tsx
+++ b/src/components/common/VideoPlayer/VideoPlayer.tsx
@@ -89,8 +89,14 @@ export const VideoPlayer = forwardRef<refType, VideoPlayerProps>(
         <VideoElement
           id={identifier}
           ref={videoRef}
-          src={!startPlay ? "" : resourceStatus?.status === "READY" ? src : ""}
-          poster={!startPlay ? poster : ""}
+          src={
+            !startPlay.value
+              ? ""
+              : resourceStatus?.status === "READY"
+              ? src
+              : ""
+          }
+          poster={!startPlay.value ? poster : ""}
           onTimeUpdate={updateProgress}
           autoPlay={autoplay}
           onClick={() => togglePlay()}
@@ -105,7 +111,7 @@ export const VideoPlayer = forwardRef<refType, VideoPlayerProps>(
           }}
           preload="metadata"
           style={
-            startPlay
+            startPlay.value
               ? {
                   ...videoStyles?.video,
                   objectFit: videoObjectFit.value,