diff --git a/server/routes.ts b/server/routes.ts
index cba49c5..a6ceddc 100644
--- a/server/routes.ts
+++ b/server/routes.ts
@@ -732,59 +732,59 @@ export async function registerRoutes(app: Express): Promise<Server> {
     }
   });
 
-  // Custom social image endpoint - serves your beautiful uploaded image
+  // Custom social image endpoint - directly serve the beautiful triangular image
   app.get('/api/social-image', async (req, res) => {
     try {
-      console.log('📸 Serving custom social image...');
+      console.log('📸 Generating beautiful social image...');
       
-      const path = await import('path');
-      const fs = await import('fs');
+      // Create the beautiful triangular design directly
+      const width = 1200;
+      const height = 630;
       
-      const imagePath = path.join(__dirname, '..', 'client', 'public', 'social-share-image.png');
-      
-      // Check if custom image exists
-      if (fs.existsSync(imagePath)) {
-        console.log('✅ Custom social image found, serving...');
-        const imageBuffer = fs.readFileSync(imagePath);
+      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:#9333ea;stop-opacity:1" />
+            <stop offset="25%" style="stop-color:#7c3aed;stop-opacity:1" />
+            <stop offset="50%" style="stop-color:#6366f1;stop-opacity:1" />
+            <stop offset="75%" style="stop-color:#0ea5e9;stop-opacity:1" />
+            <stop offset="100%" style="stop-color:#06b6d4;stop-opacity:1" />
+          </linearGradient>
+        </defs>
         
-        res.setHeader('Content-Type', 'image/png');
-        res.setHeader('Content-Length', imageBuffer.length);
-        res.setHeader('Cache-Control', 'public, max-age=3600'); // Cache for 1 hour
-        res.setHeader('Access-Control-Allow-Origin', '*'); // Allow cross-origin for social media
-        res.send(imageBuffer);
-      } else {
-        console.log('⚠️ Custom image not found, generating fallback...');
-        // Fallback to generated image if custom not found
-        const width = 1200;
-        const height = 630;
+        <!-- Beautiful gradient background -->
+        <rect width="${width}" height="${height}" fill="url(#bgGradient)"/>
         
-        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:#6366f1;stop-opacity:1" />
-              <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
-            </linearGradient>
-          </defs>
-          
-          <rect width="${width}" height="${height}" fill="url(#bgGradient)"/>
-          <text x="600" y="340" font-family="Arial, sans-serif" font-size="80" font-weight="bold" fill="white" text-anchor="middle">go4.video</text>
-          <text x="600" y="390" font-family="Arial, sans-serif" font-size="32" fill="rgba(255,255,255,0.9)" text-anchor="middle">Video-Welt von Folx TV</text>
-        </svg>`;
+        <!-- Large triangular geometric patterns -->
+        <polygon points="0,0 400,0 200,200" fill="#ffffff" opacity="0.08"/>
+        <polygon points="800,0 1200,0 1000,300" fill="#ffffff" opacity="0.06"/>
+        <polygon points="0,400 300,630 0,630" fill="#ffffff" opacity="0.1"/>
+        <polygon points="900,330 1200,630 900,630" fill="#ffffff" opacity="0.07"/>
+        <polygon points="400,200 600,400 200,400" fill="#ffffff" opacity="0.05"/>
+        <polygon points="600,0 1000,0 800,200" fill="#ffffff" opacity="0.04"/>
+        
+        <!-- Central sparkle element -->
+        <polygon points="1150,480 1170,500 1150,520 1130,500" fill="#ffffff" opacity="0.9"/>
+        
+        <!-- Main title centered -->
+        <text x="600" y="330" font-family="Arial, sans-serif" font-size="88" font-weight="bold" fill="white" text-anchor="middle">go4.video</text>
+      </svg>`;
 
-        const buffer = await sharp(Buffer.from(svg))
-          .png({ quality: 95, compressionLevel: 6 })
-          .toBuffer();
+      const buffer = await sharp(Buffer.from(svg))
+        .png({ quality: 95, compressionLevel: 6, progressive: true })
+        .toBuffer();
 
-        res.setHeader('Content-Type', 'image/png');
-        res.setHeader('Content-Length', buffer.length);
-        res.setHeader('Cache-Control', 'public, max-age=3600');
-        res.setHeader('Access-Control-Allow-Origin', '*');
-        res.send(buffer);
-      }
+      console.log(`📸 Beautiful social image generated: ${buffer.length} bytes`);
+      
+      res.setHeader('Content-Type', 'image/png');
+      res.setHeader('Content-Length', buffer.length);
+      res.setHeader('Cache-Control', 'public, max-age=3600'); // Cache for 1 hour
+      res.setHeader('Access-Control-Allow-Origin', '*'); // Allow cross-origin for social media
+      res.send(buffer);
       
     } catch (error) {
-      console.error('❌ Error serving social image:', error);
-      res.status(500).send('Error serving social image');
+      console.error('❌ Error generating social image:', error);
+      res.status(500).send('Error generating social image');
     }
   });