diff --git a/resources/js/modules/editor/partials/canvas/video-editor.jsx b/resources/js/modules/editor/partials/canvas/video-editor.jsx
index e2f8124..8aa950f 100644
--- a/resources/js/modules/editor/partials/canvas/video-editor.jsx
+++ b/resources/js/modules/editor/partials/canvas/video-editor.jsx
@@ -78,7 +78,7 @@ const VideoEditor = ({ width, height, onOpenTextSidebar }) => {
             currentCaption: currentCaption || 'Default caption text',
         };
 
-        const generatedTimeline = generateTimelineFromTemplate(SINGLE_CAPTION_TEMPLATE, mediaStoreData);
+        const generatedTimeline = generateTimelineFromTemplate(dimensions, SINGLE_CAPTION_TEMPLATE, mediaStoreData);
 
         if (generatedTimeline.length > 0) {
             cleanupVideos(videoElements);
diff --git a/resources/js/modules/editor/templates/single_caption_meme_background.json b/resources/js/modules/editor/templates/single_caption_meme_background.json
index 3b66d24..806e970 100644
--- a/resources/js/modules/editor/templates/single_caption_meme_background.json
+++ b/resources/js/modules/editor/templates/single_caption_meme_background.json
@@ -19,8 +19,8 @@
             "duration": 6,
             "x": 0,
             "y": 0,
-            "asset_width": 720,
-            "asset_height": 720,
+            "media_width": 720,
+            "media_height": 720,
             "width": 720,
             "height": 1280,
             "rotation": 0
@@ -38,8 +38,8 @@
             "duration": 6,
             "x": 0,
             "y": 0,
-            "asset_width": 720,
-            "asset_height": 1280,
+            "media_width": 720,
+            "media_height": 1280,
             "width": 720,
             "height": 1280,
             "rotation": 0
diff --git a/resources/js/modules/editor/utils/timeline-template-processor.js b/resources/js/modules/editor/utils/timeline-template-processor.js
index a922771..ee1dfc0 100644
--- a/resources/js/modules/editor/utils/timeline-template-processor.js
+++ b/resources/js/modules/editor/utils/timeline-template-processor.js
@@ -1,6 +1,6 @@
 // utils/timeline-template-processor.js
 
-export const generateTimelineFromTemplate = (template, mediaStoreData) => {
+export const generateTimelineFromTemplate = (dimensions, template, mediaStoreData) => {
     const { selectedMeme, selectedBackground, currentCaption } = mediaStoreData;
 
     // If no selections, return empty timeline
@@ -28,6 +28,32 @@ export const generateTimelineFromTemplate = (template, mediaStoreData) => {
                     if (selectedBackground) {
                         processedElement.source = selectedBackground.media_url;
                         processedElement.name = selectedBackground.prompt || 'Background';
+                        processedElement.media_width = selectedBackground.media_width;
+                        processedElement.media_height = selectedBackground.media_height;
+
+                        const canvasWidth = dimensions.width;
+                        const canvasHeight = dimensions.height;
+
+                        // Calculate scale factors to fit media within canvas while maintaining aspect ratio
+                        const scaleX = canvasWidth / selectedBackground.media_width;
+                        const scaleY = canvasHeight / selectedBackground.media_height;
+
+                        // Use the larger scale factor to ensure the media fills the entire canvas
+                        const scale = Math.max(scaleX, scaleY);
+
+                        // Calculate final dimensions
+                        const scaledWidth = selectedBackground.media_width * scale;
+                        const scaledHeight = selectedBackground.media_height * scale;
+
+                        // Center the scaled media within the canvas
+                        const offsetX = (canvasWidth - scaledWidth) / 2;
+                        const offsetY = (canvasHeight - scaledHeight) / 2;
+
+                        // Set the processed element properties
+                        processedElement.width = scaledWidth;
+                        processedElement.height = scaledHeight;
+                        processedElement.x = offsetX;
+                        processedElement.y = offsetY;
                     } else {
                         return null; // Skip if no background selected
                     }
@@ -39,6 +65,10 @@ export const generateTimelineFromTemplate = (template, mediaStoreData) => {
                         processedElement.source_mov = selectedMeme.mov_url;
                         processedElement.poster = selectedMeme.webp_url;
                         processedElement.name = selectedMeme.name;
+                        processedElement.media_width = selectedMeme.media_width;
+                        processedElement.media_height = selectedMeme.media_height;
+                        processedElement.width = selectedMeme.media_width;
+                        processedElement.height = selectedMeme.media_height;
                     } else {
                         return null; // Skip if no meme selected
                     }