diff --git a/js/app/components/mobile/desktop-ui.tsx b/js/app/components/mobile/desktop-ui.tsx
index 7050fbba..37dbf2ef 100644
--- a/js/app/components/mobile/desktop-ui.tsx
+++ b/js/app/components/mobile/desktop-ui.tsx
@@ -1,4 +1,5 @@
 import {
+  PlayerStatus,
   PlayerUI,
   PortalHost,
   Toast,
@@ -26,6 +27,7 @@ import {
   MuteOverlay,
   TopControlBar,
 } from "./desktop-ui/index";
+import { PlayPauseIndicator } from "./desktop-ui/play-pause-indicator";
 import { useResponsiveLayout } from "./useResponsiveLayout";
 
 const { h, layout, position, w, px, py, r, p } = zero;
@@ -72,6 +74,7 @@ export function DesktopUi({
   const fullscreen = usePlayerStore((state) => state.fullscreen);
   const setFullscreen = usePlayerStore((state) => state.setFullscreen);
   const selectedRendition = usePlayerStore((state) => state.selectedRendition);
+  const status = usePlayerStore((state) => state.status);
 
   const safeAreaInsets = embedded
     ? { ...originalSafeAreaInsets, top: 0 }
@@ -96,12 +99,13 @@ export function DesktopUi({
 
     if (selectedRendition === "audio") return;
     if (ingest !== null) return;
+    if (status === PlayerStatus.PAUSE) return;
 
     fadeTimeout.current = setTimeout(() => {
       fadeOpacity.value = withTiming(0, { duration: 400 });
       setIsControlsVisible(false);
     }, FADE_OUT_DELAY);
-  }, [fadeOpacity, selectedRendition, ingest]);
+  }, [fadeOpacity, selectedRendition, ingest, status]);
 
   const onPlayerHover = useCallback(() => {
     resetFadeTimer();
@@ -225,8 +229,8 @@ export function DesktopUi({
           collapsable={false}
         >
           <MuteOverlay />
-          <PlayerUI.AutoplayButton />
           <PlayerUI.ViewerLoadingOverlay />
+          <PlayPauseIndicator />
           <Animated.View
             style={[
               layout.position.absolute,
@@ -273,31 +277,6 @@ export function DesktopUi({
             </View>
           )}
 
-          <Animated.View
-            style={[
-              layout.position.absolute,
-              position.bottom[0],
-              w.percent[100],
-              animatedFadeStyle,
-            ]}
-          >
-            <AnimatedGradient
-              fromColor="#00000080"
-              toColor="#000000"
-              opacityColor1={0}
-            >
-              <BottomControlBar
-                ingest={ingest}
-                pipSupported={pipSupported}
-                pipActive={pipActive}
-                onHandlePip={handlePip}
-                dropdownPortalContainer={fullscreen && portalContainerID}
-                showChat={isChatOpen || false}
-                setShowChat={setIsChatOpen || undefined}
-              />
-            </AnimatedGradient>
-          </Animated.View>
-
           {isSelfAndNotLive && (
             <PlayerUI.InputPanel
               title={title}
@@ -344,6 +323,33 @@ export function DesktopUi({
           )}
         </View>
       </GestureDetector>
+      <Animated.View
+        style={[
+          layout.position.absolute,
+          position.bottom[0],
+          w.percent[100],
+          { zIndex: 999 },
+          animatedFadeStyle,
+          // no clickthrough
+          { pointerEvents: isControlsVisible ? "auto" : "none" },
+        ]}
+      >
+        <AnimatedGradient
+          fromColor="#00000080"
+          toColor="#000000"
+          opacityColor1={0}
+        >
+          <BottomControlBar
+            ingest={ingest}
+            pipSupported={pipSupported}
+            pipActive={pipActive}
+            onHandlePip={handlePip}
+            dropdownPortalContainer={fullscreen && portalContainerID}
+            showChat={isChatOpen || false}
+            setShowChat={setIsChatOpen || undefined}
+          />
+        </AnimatedGradient>
+      </Animated.View>
       {fullscreen && <PortalHost name={portalContainerID} />}
     </>
   );
diff --git a/js/app/components/mobile/desktop-ui/index.ts b/js/app/components/mobile/desktop-ui/index.ts
index 91c372da..3b8f0ba8 100644
--- a/js/app/components/mobile/desktop-ui/index.ts
+++ b/js/app/components/mobile/desktop-ui/index.ts
@@ -2,5 +2,6 @@ export { BottomControlBar } from "./bottom-controls";
 export { KebabMenu } from "./kebab";
 export { LiveBubble } from "./live-bubble";
 export { MuteOverlay } from "./mute-overlay";
+export { PlayPauseIndicator } from "./play-pause-indicator";
 export { TopControlBar } from "./top-controls";
 export { VolumeSlider } from "./volume-slider";
diff --git a/js/app/components/mobile/desktop-ui/mute-overlay.tsx b/js/app/components/mobile/desktop-ui/mute-overlay.tsx
index 09ed23ff..565647da 100644
--- a/js/app/components/mobile/desktop-ui/mute-overlay.tsx
+++ b/js/app/components/mobile/desktop-ui/mute-overlay.tsx
@@ -35,6 +35,7 @@ export function MuteOverlay() {
         h.percent[100],
         w.percent[100],
       ]}
+      pointerEvents="box-none"
     >
       <Pressable
         onPress={() => {
diff --git a/js/app/components/mobile/desktop-ui/play-pause-indicator.tsx b/js/app/components/mobile/desktop-ui/play-pause-indicator.tsx
new file mode 100644
index 00000000..1827414d
--- /dev/null
+++ b/js/app/components/mobile/desktop-ui/play-pause-indicator.tsx
@@ -0,0 +1,90 @@
+import { PlayerStatus, usePlayerStore } from "@streamplace/components";
+import { Pause, Play } from "lucide-react-native";
+import { useCallback, useEffect, useRef } from "react";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSequence,
+  withTiming,
+} from "react-native-reanimated";
+
+export function PlayPauseIndicator() {
+  const status = usePlayerStore((x) => x.status);
+  const prevStatus = useRef(status);
+  const opacity = useSharedValue(0);
+  const scale = useSharedValue(0.5);
+
+  const animate = useCallback(
+    (toPlaying: boolean) => {
+      opacity.value = 1;
+      opacity.value = withSequence(
+        withTiming(1, { duration: 100 }),
+        withTiming(1, { duration: 400 }),
+        withTiming(0, { duration: 300 }),
+      );
+      if (toPlaying) {
+        scale.value = 0.8;
+        scale.value = withSequence(
+          withTiming(1, { duration: 100 }),
+          withTiming(1, { duration: 400 }),
+          withTiming(1.3, { duration: 300 }),
+        );
+      } else {
+        scale.value = 1;
+        scale.value = withSequence(
+          withTiming(0.8, { duration: 100 }),
+          withTiming(0.8, { duration: 500 }),
+        );
+      }
+    },
+    [opacity, scale],
+  );
+
+  useEffect(() => {
+    if (status !== prevStatus.current) {
+      const wasPlaying = prevStatus.current === PlayerStatus.PLAYING;
+      const isPlaying = status === PlayerStatus.PLAYING;
+      const isPaused = status === PlayerStatus.PAUSE;
+
+      if (isPlaying || isPaused) {
+        animate(isPlaying);
+      }
+      prevStatus.current = status;
+    }
+  }, [status, animate]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [{ scale: scale.value }],
+  }));
+
+  const isPlaying = status === PlayerStatus.PLAYING;
+
+  return (
+    <Animated.View
+      style={[
+        {
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          marginLeft: -32,
+          marginTop: -32,
+          width: 64,
+          height: 64,
+          borderRadius: 32,
+          backgroundColor: "rgba(0,0,0,0.5)",
+          justifyContent: "center",
+          alignItems: "center",
+          pointerEvents: "none",
+        },
+        animatedStyle,
+      ]}
+    >
+      {isPlaying ? (
+        <Play size={32} color="white" fill="white" />
+      ) : (
+        <Pause size={32} color="white" fill="white" />
+      )}
+    </Animated.View>
+  );
+}
diff --git a/js/components/src/components/mobile-player/ui/autoplay-button.tsx b/js/components/src/components/mobile-player/ui/autoplay-button.tsx
index 069558d3..8636e930 100644
--- a/js/components/src/components/mobile-player/ui/autoplay-button.tsx
+++ b/js/components/src/components/mobile-player/ui/autoplay-button.tsx
@@ -50,6 +50,7 @@ export function AutoplayButton() {
         h.percent[100],
         w.percent[100],
       ]}
+      pointerEvents="box-none"
     >
       <Pressable
         onPress={handlePlayButtonPress}
diff --git a/js/components/src/components/mobile-player/ui/viewer-loading-overlay.tsx b/js/components/src/components/mobile-player/ui/viewer-loading-overlay.tsx
index a6d9b07d..2b72f4e7 100644
--- a/js/components/src/components/mobile-player/ui/viewer-loading-overlay.tsx
+++ b/js/components/src/components/mobile-player/ui/viewer-loading-overlay.tsx
@@ -1,23 +1,13 @@
-import { Play } from "lucide-react-native";
 import { useEffect } from "react";
-import { Pressable } from "react-native";
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
-import {
-  KeepAwake,
-  Loader,
-  PlayerStatus,
-  usePlayerStore,
-  useTheme,
-} from "../../..";
+import { KeepAwake, Loader, PlayerStatus, usePlayerStore } from "../../..";
 
 export function ViewerLoadingOverlay() {
   const status = usePlayerStore((x) => x.status);
-  const togglePlayPause = usePlayerStore((x) => x.togglePlayPause);
-  const { theme, zero: zt } = useTheme();
   const opacity = useSharedValue(0);
 
   useEffect(() => {
@@ -28,60 +18,33 @@ export function ViewerLoadingOverlay() {
     }
   }, [status, opacity]);
 
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      opacity: opacity.value,
-    };
-  });
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
 
   if (status === PlayerStatus.PLAYING) {
     return <KeepAwake />;
   }
 
-  if (status === PlayerStatus.SUSPEND) {
-    return null; // No overlay when stopped
+  if (status === PlayerStatus.SUSPEND || status === PlayerStatus.PAUSE) {
+    return null;
   }
 
-  const isPaused = status === PlayerStatus.PAUSE;
-
   return (
-    <>
-      <Animated.View
-        style={[
-          {
-            position: "absolute",
-            width: "100%",
-            height: "100%",
-            alignItems: "center",
-            justifyContent: "center",
-            backgroundColor: "rgba(0,0,0,0.3)",
-            pointerEvents: "none",
-          },
-          animatedStyle,
-        ]}
-      >
-        {!isPaused && <Loader size="large" />}
-      </Animated.View>
-      {isPaused && (
-        <Pressable
-          onPress={togglePlayPause}
-          style={{
-            position: "absolute",
-            alignSelf: "center",
-            top: "50%",
-            marginTop: -32,
-            backgroundColor: "rgba(0,0,0,0.45)",
-            borderRadius: 999,
-            padding: 16,
-          }}
-        >
-          <Play
-            size={32}
-            color={theme.colors.foreground}
-            fill={theme.colors.foreground}
-          />
-        </Pressable>
-      )}
-    </>
+    <Animated.View
+      style={[
+        {
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          pointerEvents: "none",
+        },
+        animatedStyle,
+      ]}
+    >
+      <Loader size="large" />
+    </Animated.View>
   );
 }