diff --git a/server/routes.ts b/server/routes.ts
index 71a489d..8ae8bb9 100644
--- a/server/routes.ts
+++ b/server/routes.ts
@@ -701,59 +701,69 @@ export async function registerRoutes(app: Express): Promise<Server> {
   // Optimized social image endpoint
   app.get('/api/social-image', async (req, res) => {
     try {
-      // Generate a modern social image with Sharp
+      console.log('📸 Generating social image...');
+      
+      // Generate a large, high-quality social image with Sharp
       const width = 1200;
       const height = 630;
       
-      // Create a gradient background with text overlay
+      // Create a more prominent social media image
       const svg = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
         <defs>
           <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-            <stop offset="0%" style="stop-color:#2D1B69;stop-opacity:1" />
-            <stop offset="50%" style="stop-color:#6366f1;stop-opacity:1" />
+            <stop offset="0%" style="stop-color:#1a1a2e;stop-opacity:1" />
+            <stop offset="30%" style="stop-color:#16213e;stop-opacity:1" />
+            <stop offset="70%" style="stop-color:#6366f1;stop-opacity:1" />
             <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
           </linearGradient>
           <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
             <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
-            <stop offset="100%" style="stop-color:#ffffff;stop-opacity:0.8" />
+            <stop offset="100%" style="stop-color:#ffffff;stop-opacity:0.9" />
           </linearGradient>
+          <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
+            <dropShadow dx="2" dy="4" stdDeviation="3" flood-color="#000000" flood-opacity="0.3"/>
+          </filter>
         </defs>
         
         <!-- Background -->
         <rect width="${width}" height="${height}" fill="url(#bgGradient)"/>
         
-        <!-- Decorative elements -->
-        <polygon points="100,100 200,200 50,200" fill="#ffffff" opacity="0.1"/>
-        <polygon points="1000,150 1100,250 900,250" fill="#ffffff" opacity="0.08"/>
-        <polygon points="200,400 300,500 100,500" fill="#ffffff" opacity="0.12"/>
-        <polygon points="950,450 1050,550 850,550" fill="#ffffff" opacity="0.06"/>
+        <!-- Large decorative triangles -->
+        <polygon points="0,0 300,0 150,150" fill="#ffffff" opacity="0.05"/>
+        <polygon points="900,0 1200,0 1200,300" fill="#ffffff" opacity="0.04"/>
+        <polygon points="0,330 200,630 0,630" fill="#ffffff" opacity="0.06"/>
+        <polygon points="1000,430 1200,630 1000,630" fill="#ffffff" opacity="0.05"/>
         
-        <!-- Main logo -->
-        <rect x="150" y="250" width="120" height="120" rx="30" fill="url(#logoGradient)"/>
-        <polygon points="185,285 185,335 235,310" fill="#6366f1"/>
+        <!-- Large central logo -->
+        <rect x="100" y="215" width="200" height="200" rx="50" fill="url(#logoGradient)" filter="url(#shadow)"/>
+        <polygon points="150,265 150,365 250,315" fill="#6366f1"/>
         
-        <!-- Main text -->
-        <text x="320" y="290" font-family="Arial, sans-serif" font-size="64" font-weight="bold" fill="white">go4.video</text>
-        <text x="320" y="340" font-family="Arial, sans-serif" font-size="28" fill="rgba(255,255,255,0.9)">Professional Video Streaming Platform</text>
-        <text x="320" y="380" font-family="Arial, sans-serif" font-size="24" fill="rgba(255,255,255,0.7)">FOLX STADL • Geschichte des Liedes • Premium Content</text>
+        <!-- Large prominent text -->
+        <text x="350" y="280" font-family="Arial, sans-serif" font-size="84" font-weight="bold" fill="white" filter="url(#shadow)">go4.video</text>
+        <text x="350" y="330" font-family="Arial, sans-serif" font-size="32" fill="rgba(255,255,255,0.95)" filter="url(#shadow)">Professional Video Streaming</text>
+        <text x="350" y="370" font-family="Arial, sans-serif" font-size="28" fill="rgba(255,255,255,0.8)">FOLX STADL • Geschichte des Liedes</text>
+        <text x="350" y="410" font-family="Arial, sans-serif" font-size="24" fill="rgba(255,255,255,0.7)">Premium Video Content Platform</text>
       </svg>`;
 
-      // Convert SVG to optimized PNG
+      // Convert SVG to high-quality PNG with better compression
       const buffer = await sharp(Buffer.from(svg))
         .png({ 
-          quality: 85, 
-          compressionLevel: 8,
+          quality: 90, 
+          compressionLevel: 6,
           progressive: true 
         })
         .toBuffer();
       
+      console.log(`📸 Social image generated: ${buffer.length} bytes`);
+      
       res.setHeader('Content-Type', 'image/png');
-      res.setHeader('Cache-Control', 'public, max-age=3600'); // Cache 1 hour for easier updates
+      res.setHeader('Cache-Control', 'public, max-age=1800'); // Cache 30 minutes
       res.setHeader('Content-Length', buffer.length);
+      res.setHeader('Access-Control-Allow-Origin', '*'); // Allow cross-origin for social media
       res.send(buffer);
       
     } catch (error) {
-      console.error('Error generating optimized social image:', error);
+      console.error('❌ Error generating social image:', error);
       res.status(500).send('Error generating social image');
     }
   });