diff --git a/client/src/components/media-upload.tsx b/client/src/components/media-upload.tsx
index f65dc9c..01c4378 100644
--- a/client/src/components/media-upload.tsx
+++ b/client/src/components/media-upload.tsx
@@ -115,7 +115,8 @@ export default function MediaUpload() {
               {(mediaList as any[])?.slice(0, 3).map((media: any) => (
                 <div
                   key={media.id}
-                  className="flex items-center gap-3 p-3 rounded-lg bg-accent border border-border"
+                  onClick={() => setSelectedFile(media)}
+                  className="flex items-center gap-3 p-3 rounded-lg bg-accent border border-border cursor-pointer hover:bg-accent/80 transition-colors"
                   data-testid={`media-item-${media.id}`}
                 >
                   <div className="w-12 h-12 rounded bg-muted flex items-center justify-center flex-shrink-0">
diff --git a/server/services/cloudinary.ts b/server/services/cloudinary.ts
index 97321ca..157c6c1 100644
--- a/server/services/cloudinary.ts
+++ b/server/services/cloudinary.ts
@@ -59,17 +59,17 @@ class CloudinaryService {
     if (!isVideo) {
       facebookFeedUrl = cloudinary.url(publicId, {
         transformation: [
-          { width: 1200, height: 630, crop: 'fill', gravity: 'auto' }
+          { width: 1200, height: 630, crop: 'pad', gravity: 'auto', background: 'black' }
         ]
       });
       instagramFeedUrl = cloudinary.url(publicId, {
         transformation: [
-          { width: 1080, height: 1080, crop: 'fill', gravity: 'auto' }
+          { width: 1080, height: 1080, crop: 'pad', gravity: 'auto', background: 'black' }
         ]
       });
       instagramStoryUrl = cloudinary.url(publicId, {
         transformation: [
-          { width: 1080, height: 1920, crop: 'fill', gravity: 'auto' }
+          { width: 1080, height: 1920, crop: 'pad', gravity: 'auto', background: 'black' }
         ]
       });
     }