diff --git a/package-lock.json b/package-lock.json
index 4ba5857..fc3ff92 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@mui/icons-material": "^5.11.11",
         "@mui/lab": "^5.0.0-alpha.163",
         "@mui/material": "^5.11.13",
+        "@preact/signals-react": "^2.2.0",
         "@reduxjs/toolkit": "^1.9.3",
         "compressorjs": "^1.2.1",
         "dompurify": "^3.0.6",
@@ -1463,6 +1464,33 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@preact/signals-core": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.8.0.tgz",
+      "integrity": "sha512-OBvUsRZqNmjzCZXWLxkZfhcgT+Fk8DDcT/8vD6a1xhDemodyy87UJRJfASMuSD8FaAIeGgGm85ydXhm7lr4fyA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
+    "node_modules/@preact/signals-react": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@preact/signals-react/-/signals-react-2.2.0.tgz",
+      "integrity": "sha512-EPYlhXqqcOUxz2gTQGt4rtK6X7Jr04517DcJVZ4I5a7Gxy39haK24uFeVWtiU/tnEReRFcxpQN6poYra1jf68A==",
+      "license": "MIT",
+      "dependencies": {
+        "@preact/signals-core": "^1.7.0",
+        "use-sync-external-store": "^1.2.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      },
+      "peerDependencies": {
+        "react": "^16.14.0 || 17.x || 18.x"
+      }
+    },
     "node_modules/@reduxjs/toolkit": {
       "version": "1.9.5",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz",
@@ -5528,6 +5556,20 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
     },
+    "@preact/signals-core": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.8.0.tgz",
+      "integrity": "sha512-OBvUsRZqNmjzCZXWLxkZfhcgT+Fk8DDcT/8vD6a1xhDemodyy87UJRJfASMuSD8FaAIeGgGm85ydXhm7lr4fyA=="
+    },
+    "@preact/signals-react": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@preact/signals-react/-/signals-react-2.2.0.tgz",
+      "integrity": "sha512-EPYlhXqqcOUxz2gTQGt4rtK6X7Jr04517DcJVZ4I5a7Gxy39haK24uFeVWtiU/tnEReRFcxpQN6poYra1jf68A==",
+      "requires": {
+        "@preact/signals-core": "^1.7.0",
+        "use-sync-external-store": "^1.2.0"
+      }
+    },
     "@reduxjs/toolkit": {
       "version": "1.9.5",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz",
diff --git a/package.json b/package.json
index b753d69..90535ef 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@mui/icons-material": "^5.11.11",
     "@mui/lab": "^5.0.0-alpha.163",
     "@mui/material": "^5.11.13",
+    "@preact/signals-react": "^2.2.0",
     "@reduxjs/toolkit": "^1.9.3",
     "compressorjs": "^1.2.1",
     "dompurify": "^3.0.6",
diff --git a/src/components/common/VideoPlayer/Components/LoadingVideo.tsx b/src/components/common/VideoPlayer/Components/LoadingVideo.tsx
index d7d57ff..2eea3df 100644
--- a/src/components/common/VideoPlayer/Components/LoadingVideo.tsx
+++ b/src/components/common/VideoPlayer/Components/LoadingVideo.tsx
@@ -2,7 +2,6 @@ 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;
@@ -103,7 +102,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 7cc6388..b9d15fa 100644
--- a/src/components/common/VideoPlayer/Components/VideoControls-State.ts
+++ b/src/components/common/VideoPlayer/Components/VideoControls-State.ts
@@ -147,8 +147,8 @@ export const useVideoControlsState = (
   };
 
   const togglePlay = async () => {
+    // console.log("in toggleplay playing is: ", playing.value);
     if (!videoRef.current) return;
-
     if (!src || resourceStatus?.status !== "READY") {
       const el = document.getElementById("videoWrapper");
       if (el) {
@@ -159,11 +159,12 @@ export const useVideoControlsState = (
       });
       getSrc();
     }
-
     startPlay.value = true;
+
+    const pause = playing.value;
     playing.value = !playing.value;
 
-    if (playing.value) videoRef.current.pause();
+    if (pause) videoRef.current.pause();
     else await videoRef.current.play();
   };
 
@@ -178,7 +179,6 @@ export const useVideoControlsState = (
 
   useEffect(() => {
     if (autoPlay && identifier) {
-      console.log("autoplay useEffect");
       togglePlay();
     }
   }, [autoPlay, identifier]);
diff --git a/src/components/common/VideoPlayer/Components/VideoControls.tsx b/src/components/common/VideoPlayer/Components/VideoControls.tsx
index 63995a6..2c85010 100644
--- a/src/components/common/VideoPlayer/Components/VideoControls.tsx
+++ b/src/components/common/VideoPlayer/Components/VideoControls.tsx
@@ -76,7 +76,7 @@ export const VideoControls = ({
             }}
             onClick={() => togglePlay()}
           >
-            {!playing.value ? <Pause /> : <PlayArrow />}
+            {playing.value ? <Pause /> : <PlayArrow />}
           </IconButton>
           <IconButton
             sx={{
@@ -150,7 +150,7 @@ export const VideoControls = ({
             }}
             onClick={() => togglePlay()}
           >
-            {!playing.value ? <Pause /> : <PlayArrow />}
+            {playing.value ? <Pause /> : <PlayArrow />}
           </IconButton>
           <IconButton
             sx={{