diff --git a/assets/temp-bg.png b/assets/temp-bg.png
new file mode 100644
index 0000000..cc3ad8c
Binary files /dev/null and b/assets/temp-bg.png differ
diff --git a/components/VideoDisplay.tsx b/components/VideoDisplay.tsx
new file mode 100644
index 0000000..64d37ba
--- /dev/null
+++ b/components/VideoDisplay.tsx
@@ -0,0 +1,31 @@
+import { ResizeMode, Video } from "expo-av";
+import { useState } from "react";
+import { ImageBackground } from "react-native";
+
+const RenderPoster = ({ videoLoading, requiredBgImage }) => {
+    if (!videoLoading) return <></>;
+    return <ImageBackground source={requiredBgImage} resizeMode={ResizeMode.COVER} imageStyle={{ opacity: 0.9 }} />;
+};
+
+const VideoDisplay = ({ requiredBgImage, videoUri }) => {
+    const [videoLoading, setVideoLoading] = useState(true);
+
+    return (
+        <Video
+            style={{
+                flex: 1,
+                position: "relative",
+            }}
+            source={videoUri}
+            shouldPlay={true}
+            isLooping={true}
+            isMuted={true}
+            resizeMode={ResizeMode.COVER}
+            usePoster={true}
+            onPlaybackStatusUpdate={(status) => setVideoLoading(() => status.isLoaded)}
+        >
+            <RenderPoster videoLoading={videoLoading} requiredBgImage={requiredBgImage} />
+        </Video>
+    );
+};
+export default VideoDisplay;
diff --git a/package-lock.json b/package-lock.json
index c5b4e77..fcac223 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,7 @@
         "@types/react-native": "^0.70.6",
         "expo": "~49.0.0",
         "expo-av": "~13.4.1",
-        "expo-file-system": "~15.4.4",
+        "expo-file-system": "~15.4.5",
         "expo-linking": "^5.0.0",
         "expo-status-bar": "~1.6.0",
         "react": "18.2.0",
@@ -13294,9 +13294,9 @@
       }
     },
     "node_modules/expo-file-system": {
-      "version": "15.4.4",
-      "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-15.4.4.tgz",
-      "integrity": "sha512-F0xS88D85F7qVQ61r0qBnzh6VW/s6iIl+VaQEEi2nAIOQHw1JIEj4yCXPLTtbyn5VmArbe2dSL3KYz1V+BLkKA==",
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-15.4.5.tgz",
+      "integrity": "sha512-xy61KaTaDgXhT/dllwYDHm3ch026EyO8j4eC6wSVr/yE12MMMxAC09yGwy4f7kkOs6ztGVQF5j7ldRzNLN4l0Q==",
       "dependencies": {
         "uuid": "^3.4.0"
       },
@@ -39371,9 +39371,9 @@
       }
     },
     "expo-file-system": {
-      "version": "15.4.4",
-      "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-15.4.4.tgz",
-      "integrity": "sha512-F0xS88D85F7qVQ61r0qBnzh6VW/s6iIl+VaQEEi2nAIOQHw1JIEj4yCXPLTtbyn5VmArbe2dSL3KYz1V+BLkKA==",
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-15.4.5.tgz",
+      "integrity": "sha512-xy61KaTaDgXhT/dllwYDHm3ch026EyO8j4eC6wSVr/yE12MMMxAC09yGwy4f7kkOs6ztGVQF5j7ldRzNLN4l0Q==",
       "requires": {
         "uuid": "^3.4.0"
       }
diff --git a/package.json b/package.json
index 63528d9..3a2e84b 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "@types/react-native": "^0.70.6",
     "expo": "~49.0.0",
     "expo-av": "~13.4.1",
-    "expo-file-system": "~15.4.4",
+    "expo-file-system": "~15.4.5",
     "expo-linking": "^5.0.0",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
diff --git a/screens/HomeScreen.tsx b/screens/HomeScreen.tsx
index e036131..f6381e7 100644
--- a/screens/HomeScreen.tsx
+++ b/screens/HomeScreen.tsx
@@ -1,6 +1,6 @@
-import { Video } from "expo-av";
 import { Alert, View, Text, TouchableOpacity } from "react-native";
 
+import VideoDisplay from "../components/VideoDisplay";
 import Colors from "../styles/colors";
 import * as Spacing from "../styles/spacing";
 import * as Typography from "../styles/typography";
@@ -8,17 +8,9 @@ import * as Typography from "../styles/typography";
 export default function HomeScreen({ navigation }) {
     return (
         <>
-            <Video
-                style={{
-                    flex: 1,
-                    position: "relative",
-                }}
-                source={{ uri: "https://imgur.com/Q8km3ih.mp4" }}
-                shouldPlay={true}
-                isLooping={true}
-                isMuted={true}
-                resizeMode="cover"
-                usePoster={true}
+            <VideoDisplay
+                requiredBgImage={require("../assets/temp-bg.png")}
+                videoUri={{ uri: "https://imgur.com/Q8km3ih.mp4" }}
             />
             <View
                 style={{