diff --git a/src/components/media/StreamOverlays.tsx b/src/components/media/StreamOverlays.tsx
index b6f82c1..dc83c6d 100644
--- a/src/components/media/StreamOverlays.tsx
+++ b/src/components/media/StreamOverlays.tsx
@@ -44,7 +44,27 @@ export const StreamOverlays = () => {
                 [Query.limit(10), Query.orderDesc('$createdAt'), Query.equal('estado', 'Publicado')]
             );
             
-            setRotatingContent(res.documents);
+            const posts = res.documents;
+            const mediaIds = posts.map(p => p.imagen_destacada_id).filter(id => id && typeof id === 'string');
+            if (mediaIds.length > 0) {
+                try {
+                    const mediaRes = await databases.listDocuments(
+                        APPWRITE_ALMEIRA_CONFIG.databaseId,
+                        'media',
+                        [Query.equal('$id', mediaIds)]
+                    );
+                    const mediaMap = new Map(mediaRes.documents.map(m => [m.$id, m]));
+                    posts.forEach(p => {
+                        if (p.imagen_destacada_id && typeof p.imagen_destacada_id === 'string' && mediaMap.has(p.imagen_destacada_id)) {
+                            p.resolved_media = mediaMap.get(p.imagen_destacada_id);
+                        }
+                    });
+                } catch(e) {
+                    console.error("Error resolving media for overlays:", e);
+                }
+            }
+            
+            setRotatingContent(posts);
         } catch (error) {
             console.error('Error fetching content for overlays:', error);
         }
@@ -130,17 +150,25 @@ export const StreamOverlays = () => {
             {/* SIDE CONTENT CAROUSEL (BOTTOM LEFT ABOVE TICKER) */}
             <div className="absolute bottom-16 left-6 w-72 transition-all">
                 {activeItem && (
-                    <div className="bg-slate-900/40 backdrop-blur-2xl border border-white/10 rounded-2xl overflow-hidden shadow-2xl animate-in slide-in-from-left duration-700">
+                    <a 
+                        href={`/${activeItem.slug || activeItem.$id}`} 
+                        className="block bg-slate-900/40 backdrop-blur-2xl border border-white/10 rounded-2xl overflow-hidden shadow-2xl animate-in slide-in-from-left duration-700 hover:scale-105 transition-all pointer-events-auto cursor-pointer"
+                        onClick={(e) => {
+                            // If they click, we could theoretically stop rotation or close player, but just navigating is fine
+                        }}
+                    >
                         <div className="relative aspect-video">
                             {(() => {
-                                const mediaId = typeof activeItem.imagen_destacada_id === 'object' 
-                                    ? activeItem.imagen_destacada_id?.$id 
-                                    : activeItem.imagen_destacada_id;
+                                let mediaObj = activeItem.resolved_media;
+                                if (!mediaObj && typeof activeItem.imagen_destacada_id === 'object') {
+                                    mediaObj = activeItem.imagen_destacada_id;
+                                }
                                 
-                                if (mediaId) {
+                                if (mediaObj && mediaObj.file_id) {
+                                    const bucketId = mediaObj.bucket_id || APPWRITE_ALMEIRA_CONFIG.mediaBucketId;
                                     return (
                                         <img 
-                                            src={`${APPWRITE_ALMEIRA_CONFIG.endpoint}/storage/buckets/${APPWRITE_ALMEIRA_CONFIG.mediaBucketId}/files/${mediaId}/view?project=${APPWRITE_ALMEIRA_CONFIG.projectId}`}
+                                            src={`${APPWRITE_ALMEIRA_CONFIG.endpoint}/storage/buckets/${bucketId}/files/${mediaObj.file_id}/preview?project=${APPWRITE_ALMEIRA_CONFIG.projectId}&width=400&height=250&quality=80`}
                                             className="w-full h-full object-cover"
                                             alt={activeItem.titulo}
                                         />
@@ -153,12 +181,12 @@ export const StreamOverlays = () => {
                                 );
                             })()}
                             <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/20 to-transparent px-4 py-3 flex flex-col justify-end">
-                                <h4 className="text-sm font-black text-white leading-tight uppercase tracking-tight line-clamp-2">
+                                <h4 className="text-sm font-black text-white leading-tight uppercase tracking-tight line-clamp-2 drop-shadow-md">
                                     {activeItem.titulo}
                                 </h4>
                             </div>
                         </div>
-                    </div>
+                    </a>
                 )}
             </div>