diff --git a/app/components/post_list/post/body/content/youtube/index.tsx b/app/components/post_list/post/body/content/youtube/index.tsx
index cb208ed1a..9251fabb4 100644
--- a/app/components/post_list/post/body/content/youtube/index.tsx
+++ b/app/components/post_list/post/body/content/youtube/index.tsx
@@ -3,52 +3,71 @@
 
 import React, {useCallback} from 'react';
 import {useIntl} from 'react-intl';
-import {Alert, Image, StyleSheet, TouchableOpacity, View} from 'react-native';
+import {Alert, StyleSheet, TouchableOpacity, View} from 'react-native';
+import FastImage from 'react-native-fast-image';
 
-import ProgressiveImage from '@components/progressive_image';
+import {useTheme} from '@context/theme';
 import {useIsTablet} from '@hooks/device';
 import {emptyFunction} from '@utils/general';
 import {calculateDimensions, getViewPortWidth} from '@utils/images';
+import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 import {getYouTubeVideoId, tryOpenURL} from '@utils/url';
 
+// @ts-expect-error import svg
+import YouTubeLogo from './youtube.svg';
+
 type YouTubeProps = {
     isReplyPost: boolean;
     layoutWidth?: number;
     metadata: PostMetadata;
 }
 
-const MAX_YOUTUBE_IMAGE_HEIGHT = 202;
-const MAX_YOUTUBE_IMAGE_WIDTH = 360;
+const MAX_YOUTUBE_IMAGE_HEIGHT = 280;
+const MAX_YOUTUBE_IMAGE_WIDTH = 500;
 
-const styles = StyleSheet.create({
+const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
     imageContainer: {
         alignItems: 'flex-start',
         justifyContent: 'flex-start',
+        borderRadius: 4,
         marginBottom: 6,
         marginTop: 10,
     },
     image: {
         alignItems: 'center',
-        borderRadius: 3,
+        borderRadius: 4,
         justifyContent: 'center',
-        marginVertical: 1,
     },
     playButton: {
         flex: 1,
         alignItems: 'center',
         justifyContent: 'center',
     },
-});
+    playContainer: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: changeOpacity('#000', 0.24),
+        borderColor: changeOpacity(theme.centerChannelColor, 0.08),
+        borderRadius: 4,
+        borderWidth: 1,
+        elevation: 3,
+        shadowColor: changeOpacity('#000', 0.08),
+        shadowOffset: {width: 0, height: 2},
+        shadowOpacity: 1,
+        shadowRadius: 3,
+    },
+}));
 
 const YouTube = ({isReplyPost, layoutWidth, metadata}: YouTubeProps) => {
     const intl = useIntl();
     const isTablet = useIsTablet();
+    const theme = useTheme();
+    const styles = getStyleSheet(theme);
     const link = metadata.embeds![0].url;
     const videoId = getYouTubeVideoId(link);
     const dimensions = calculateDimensions(
         MAX_YOUTUBE_IMAGE_HEIGHT,
         MAX_YOUTUBE_IMAGE_WIDTH,
-        layoutWidth || getViewPortWidth(isReplyPost, isTablet),
+        layoutWidth || (getViewPortWidth(isReplyPost, isTablet) - 15),
     );
 
     const playYouTubeVideo = useCallback(() => {
@@ -80,21 +99,20 @@ const YouTube = ({isReplyPost, layoutWidth, metadata}: YouTubeProps) => {
 
     return (
         <TouchableOpacity
-            style={[styles.imageContainer, {height: dimensions.height}]}
+            style={[styles.imageContainer, {height: dimensions.height, width: dimensions.width}]}
             onPress={playYouTubeVideo}
         >
-            <ProgressiveImage
-                id={imgUrl}
-                isBackgroundImage={true}
-                imageUri={imgUrl}
-                style={[styles.image, dimensions]}
-                resizeMode='cover'
+            <FastImage
                 onError={emptyFunction}
-            >
+                resizeMode='cover'
+                style={[styles.image, dimensions]}
+                source={{uri: imgUrl}}
+            />
+            <View style={styles.playContainer}>
                 <View style={styles.playButton}>
-                    <Image source={require('@assets/images/icons/youtube-play-icon.png')}/>
+                    <YouTubeLogo/>
                 </View>
-            </ProgressiveImage>
+            </View>
         </TouchableOpacity>
     );
 };
diff --git a/app/components/post_list/post/body/content/youtube/youtube.svg b/app/components/post_list/post/body/content/youtube/youtube.svg
new file mode 100644
index 000000000..7ed67919d
--- /dev/null
+++ b/app/components/post_list/post/body/content/youtube/youtube.svg
@@ -0,0 +1,4 @@
+<svg width="69" height="48" viewBox="0 0 69 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.9" d="M67.1402 7.49577C66.35 4.54374 64.0301 2.22389 61.0781 1.43368C55.7272 0 34.2841 0 34.2841 0C34.2841 0 12.841 0 7.49577 1.43368C4.54374 2.22389 2.22389 4.54374 1.43368 7.49577C0 12.841 0 24 0 24C0 24 0 35.159 1.43368 40.5042C2.22389 43.4563 4.54374 45.7761 7.49577 46.5663C12.841 48 34.2841 48 34.2841 48C34.2841 48 55.7272 48 61.0724 46.5663C64.0245 45.7761 66.3443 43.4563 67.1345 40.5042C68.5682 35.159 68.5682 24 68.5682 24C68.5682 24 68.5682 12.841 67.1345 7.49577H67.1402Z" fill="#FF0000"/>
+<path d="M27.4261 34.2841L45.2455 24L27.4261 13.7159V34.2841Z" fill="white"/>
+</svg>
diff --git a/app/components/post_list/post_list.tsx b/app/components/post_list/post_list.tsx
index d695ebeb4..b170092d9 100644
--- a/app/components/post_list/post_list.tsx
+++ b/app/components/post_list/post_list.tsx
@@ -117,8 +117,8 @@ const PostList = ({
 
     useEffect(() => {
         const t = setTimeout(() => {
-            listRef.current?.scrollToOffset({offset: 0, animated: false});
-        }, 200);
+            listRef.current?.scrollToOffset({offset: 0, animated: true});
+        }, 300);
 
         return () => clearTimeout(t);
     }, [channelId, rootId]);
diff --git a/assets/base/images/icons/youtube-play-icon.png b/assets/base/images/icons/youtube-play-icon.png
deleted file mode 100644
index 5aa70a6f1..000000000
Binary files a/assets/base/images/icons/youtube-play-icon.png and /dev/null differ