diff --git a/src/navigation/navigation.js b/src/navigation/navigation.js
index 84f51ee..738e4d6 100644
--- a/src/navigation/navigation.js
+++ b/src/navigation/navigation.js
@@ -138,6 +138,17 @@ export function pushPlayDetailScreen(componentId, id) {
                     duration: 300,
                   },
                 },
+                {
+                  id: 'pageIndicator',
+                  alpha: {
+                    from: 0, // We don't declare 'to' value as that is the element's current alpha value, here we're essentially animating from 0 to 1
+                    duration: 300,
+                  },
+                  translationX: {
+                    from: -16, // Animate translationY from 16dp to 0dp
+                    duration: 300,
+                  },
+                },
                 {
                   id: 'player',
                   alpha: {
diff --git a/src/screens/PlayDetail/Portrait/Player/Pic.js b/src/screens/PlayDetail/Portrait/Player/Pic.js
index 48f5bf4..f8110f1 100644
--- a/src/screens/PlayDetail/Portrait/Player/Pic.js
+++ b/src/screens/PlayDetail/Portrait/Player/Pic.js
@@ -2,21 +2,27 @@ import React, { memo, useMemo, useState, useEffect } from 'react'
 import { View, Image, StyleSheet } from 'react-native'
 import { useGetter, useDispatch } from '@/store'
 import { useLayout } from '@/utils/hooks'
+import { useNavigationComponentDidAppear } from '@/navigation'
 
-export default memo(() => {
+export default memo(({ componentId }) => {
   const playMusicInfo = useGetter('player', 'playMusicInfo')
   const theme = useGetter('common', 'theme')
   const { onLayout, ...layout } = useLayout()
+  const [animated, setAnimated] = useState(false)
 
   const musicInfo = useMemo(() => {
     return (playMusicInfo && playMusicInfo.musicInfo) || {}
   }, [playMusicInfo])
 
+  useNavigationComponentDidAppear(componentId, () => {
+    setAnimated(true)
+  })
+
   const imgWidth = Math.max(layout.width * 0.8, 100)
 
   return (
     <View style={styles.container} onLayout={onLayout}>
-      <View style={{ ...styles.content }}>
+      <View style={{ ...styles.content, elevation: animated ? 3 : 0 }}>
         <Image source={{ uri: musicInfo.img }} nativeID={`pic${musicInfo.songmid}Dest`} progressiveRenderingEnabled={true} borderRadius={2} style={{
           ...styles.img,
           backgroundColor: theme.primary,
@@ -36,7 +42,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   content: {
-    elevation: 3,
+    // elevation: 3,
     backgroundColor: 'rgba(0,0,0,0)',
     borderRadius: 4,
   },
diff --git a/src/screens/PlayDetail/Portrait/Player/index.js b/src/screens/PlayDetail/Portrait/Player/index.js
index c47962c..0d61d17 100644
--- a/src/screens/PlayDetail/Portrait/Player/index.js
+++ b/src/screens/PlayDetail/Portrait/Player/index.js
@@ -26,7 +26,7 @@ const LyricPage = ({ activeIndex }) => {
 }
 
 // global.iskeep = false
-export default memo(() => {
+export default memo(({ componentId }) => {
   const theme = useGetter('common', 'theme')
   const [pageIndex, setPageIndex] = useState(0)
 
@@ -49,13 +49,13 @@ export default memo(() => {
           style={styles.pagerView}
         >
           <View collapsable={false} style={styles.pageStyle}>
-            <Pic />
+            <Pic componentId={componentId} />
           </View>
           <View collapsable={false} style={styles.pageStyle}>
             <LyricPage activeIndex={pageIndex} />
           </View>
         </PagerView>
-        <View style={styles.pageIndicator}>
+        <View style={styles.pageIndicator} nativeID="pageIndicator">
           <View style={{ ...styles.pageIndicatorItem, backgroundColor: pageIndex == 0 ? theme.secondary20 : theme.normal60 }}></View>
           <View style={{ ...styles.pageIndicatorItem, backgroundColor: pageIndex == 1 ? theme.secondary20 : theme.normal60 }}></View>
         </View>
diff --git a/src/screens/PlayDetail/Portrait/index.js b/src/screens/PlayDetail/Portrait/index.js
index 3dd2941..b114279 100644
--- a/src/screens/PlayDetail/Portrait/index.js
+++ b/src/screens/PlayDetail/Portrait/index.js
@@ -4,10 +4,10 @@ import { useGetter, useDispatch } from '@/store'
 
 import Player from './Player'
 
-export default () => {
+export default ({ componentId }) => {
   return (
     <>
-      <Player />
+      <Player componentId={componentId} />
     </>
   )
 }
diff --git a/src/screens/PlayDetail/index.js b/src/screens/PlayDetail/index.js
index 246efa5..6bd2e1c 100644
--- a/src/screens/PlayDetail/index.js
+++ b/src/screens/PlayDetail/index.js
@@ -21,6 +21,6 @@ export default (props) => {
   })
 
   return (
-    window.width > window.height ? <Landscape /> : <Portrait />
+    window.width > window.height ? <Landscape /> : <Portrait componentId={props.componentId} />
   )
 }