diff --git a/src/manifest.json b/src/manifest.json
index fd325e9..ae7e559 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -32,7 +32,8 @@
     "128": "assets/icon128.png"
   },
   "web_accessible_resources": [
-    "recap.html"
+    "recap.html",
+    "assets/videos/*.mp4"
   ],
   "browser_specific_settings": {
     "gecko": {
diff --git a/src/popup/SlideShow.jsx b/src/popup/SlideShow.jsx
index 065da69..d3ee653 100644
--- a/src/popup/SlideShow.jsx
+++ b/src/popup/SlideShow.jsx
@@ -55,7 +55,7 @@ const SlideShow = ({ setView, timeRange }) => {
     return array;
   };
 
-  useEffect(() => {
+  useEffect(() => { 
     const loadSlides = async () => {
       setLoading(true);
       const daysMap = { day: 1, week: 7, month: 30 };
@@ -231,22 +231,15 @@ const SlideShow = ({ setView, timeRange }) => {
   // 🚀 LOADING SCREEN while slides are being fetched
   if (loading || progress < 100) {
     return (
-      <div style={{
-        height: '100vh',
-        background: 'black',
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-        color: 'white'
-      }}>
-        <h1 style={{ marginBottom: '20px' }}>Preparing your recap...</h1>
+      <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', padding: '2rem', boxSizing: 'border-box' }}>
+        <h1 style={{ color: '#fff', textAlign: 'center', marginTop: '35vh' }}>Preparing your recap...</h1>
         <div style={{
-          width: '80%',
+          width: '75%',
           height: '8px',
           backgroundColor: '#555',
           borderRadius: '5px',
-          overflow: 'hidden'
+          overflow: 'hidden',
+          margin: '0 auto'
         }}>
           <div style={{
             width: `${progress}%`,
@@ -275,8 +268,6 @@ const SlideShow = ({ setView, timeRange }) => {
         {slides[index]?.video && <source src={slides[index].video} type="video/mp4" />}
       </video>
 
-      <button onClick={() => setView('home')} style={{ position: 'absolute', top: '10px', right: '10px', fontSize: '40px', border: 'none', background: 'transparent', color: '#fff', cursor: 'pointer' }}>×</button>
-
       <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', padding: '2rem', boxSizing: 'border-box' }}>
         {slides[index]?.chart ? (
           <>
diff --git a/webpack.config.js b/webpack.config.js
index dfc94fe..1cb3f85 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -32,7 +32,8 @@ module.exports = {
       patterns: [
         { from: 'src/manifest.json', to: 'manifest.json' },
         { from: 'src/popup/popup.html', to: 'popup.html' },
-        { from: 'src/popup/recap.html', to: 'recap.html' }
+        { from: 'src/popup/recap.html', to: 'recap.html' },
+        { from: 'src/assets', to: 'assets' } 
       ]
     })
   ],