diff --git a/client/src/pages/LivePage.tsx b/client/src/pages/LivePage.tsx
index ed11ac5..fd30e9e 100644
--- a/client/src/pages/LivePage.tsx
+++ b/client/src/pages/LivePage.tsx
@@ -484,7 +484,7 @@ export default function LivePage() {
             
             <h2 className="text-lg font-semibold text-bunny-light mb-4">Empfohlene Videos</h2>
             
-            <div className="space-y-2">
+            <div className="space-y-3">
               {videos.slice(0, 10).map((video: any) => (
                 <div
                   key={video.id}
@@ -492,9 +492,9 @@ export default function LivePage() {
                     const shortId = video.id.replace(/-/g, '').substring(0, 8);
                     window.location.href = `/video/${shortId}`;
                   }}
-                  className="flex gap-3 p-2 bg-bunny-gray/30 hover:bg-bunny-gray/50 rounded-lg cursor-pointer transition-colors"
+                  className="flex gap-3 hover:bg-bunny-gray/30 rounded-xl cursor-pointer transition-colors p-1"
                 >
-                  <div className="relative w-24 h-16 bg-gray-700 rounded overflow-hidden flex-shrink-0">
+                  <div className="relative w-[168px] h-[94px] bg-gray-700 rounded-xl overflow-hidden flex-shrink-0">
                     <img
                       src={video.thumbnailUrl}
                       alt={video.title}
@@ -505,19 +505,19 @@ export default function LivePage() {
                         if (target.parentElement && !target.parentElement.querySelector('.thumbnail-placeholder')) {
                           target.parentElement.style.background = 'linear-gradient(135deg, #1f2937, #374151)';
                           const placeholder = document.createElement('div');
-                          placeholder.className = 'thumbnail-placeholder absolute inset-0 flex items-center justify-center text-white text-xs';
+                          placeholder.className = 'thumbnail-placeholder absolute inset-0 flex items-center justify-center text-white text-2xl';
                           placeholder.innerHTML = '<div>🎬</div>';
                           target.parentElement.appendChild(placeholder);
                         }
                       }}
                     />
-                    <div className="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 py-0.5 rounded">
+                    <div className="absolute bottom-1 right-1 bg-black/80 text-white text-xs font-medium px-1.5 py-0.5 rounded">
                       {video.duration ? Math.floor(video.duration / 60) + ':' + String(video.duration % 60).padStart(2, '0') : '0:00'}
                     </div>
                   </div>
                   
-                  <div className="flex-1 min-w-0">
-                    <h3 className="text-sm font-medium text-bunny-light mb-1 line-clamp-2"
+                  <div className="flex-1 min-w-0 py-0.5">
+                    <h3 className="text-sm font-medium text-bunny-light mb-1 leading-tight"
                         style={{
                           display: '-webkit-box',
                           WebkitLineClamp: 2,
@@ -526,8 +526,9 @@ export default function LivePage() {
                         }}>
                       {video.title}
                     </h3>
-                    <div className="text-xs text-bunny-muted">
-                      <div>{video.views ? (video.views >= 1000 ? Math.floor(video.views / 1000) + 'K' : video.views) : '0'} views • {video.createdAt ? new Date(video.createdAt).toLocaleDateString('de-DE') : 'Unknown date'}</div>
+                    <div className="text-xs text-bunny-muted mt-1">
+                      <div>{video.views ? (video.views >= 1000 ? Math.floor(video.views / 1000) + 'K' : video.views) : '0'} Aufrufe</div>
+                      <div>{video.createdAt ? new Date(video.createdAt).toLocaleDateString('de-DE') : 'Unbekannt'}</div>
                     </div>
                   </div>
                 </div>
diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index d3b70f9..e0e0324 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -782,7 +782,7 @@ export default function VideoPage() {
             
             <h2 className="text-lg font-semibold text-bunny-light mb-4">Empfohlene Videos</h2>
             
-            <div className="space-y-2">
+            <div className="space-y-3">
               {recommendedVideos.slice(0, 10).map((video) => (
                 <div
                   key={video.id}
@@ -790,9 +790,9 @@ export default function VideoPage() {
                     const shortId = video.id.replace(/-/g, '').substring(0, 8);
                     setLocation(`/video/${shortId}`);
                   }}
-                  className="flex gap-3 p-2 bg-bunny-gray/30 hover:bg-bunny-gray/50 rounded-lg cursor-pointer transition-colors"
+                  className="flex gap-3 hover:bg-bunny-gray/30 rounded-xl cursor-pointer transition-colors p-1"
                 >
-                  <div className="relative w-24 h-16 bg-gray-700 rounded overflow-hidden flex-shrink-0">
+                  <div className="relative w-[168px] h-[94px] bg-gray-700 rounded-xl overflow-hidden flex-shrink-0">
                     <img
                       src={video.thumbnailUrl}
                       alt={video.title}
@@ -805,19 +805,19 @@ export default function VideoPage() {
                         if (target.parentElement && !target.parentElement.querySelector('.thumbnail-placeholder')) {
                           target.parentElement.style.background = 'linear-gradient(135deg, #1f2937, #374151)';
                           const placeholder = document.createElement('div');
-                          placeholder.className = 'thumbnail-placeholder absolute inset-0 flex items-center justify-center text-white text-xs';
+                          placeholder.className = 'thumbnail-placeholder absolute inset-0 flex items-center justify-center text-white text-2xl';
                           placeholder.innerHTML = '<div>🎬</div>';
                           target.parentElement.appendChild(placeholder);
                         }
                       }}
                     />
-                    <div className="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 py-0.5 rounded">
+                    <div className="absolute bottom-1 right-1 bg-black/80 text-white text-xs font-medium px-1.5 py-0.5 rounded">
                       {formatDuration(video.duration)}
                     </div>
                   </div>
                   
-                  <div className="flex-1 min-w-0">
-                    <h3 className="text-sm font-medium text-bunny-light mb-1 line-clamp-2"
+                  <div className="flex-1 min-w-0 py-0.5">
+                    <h3 className="text-sm font-medium text-bunny-light mb-1 leading-tight"
                         style={{
                           display: '-webkit-box',
                           WebkitLineClamp: 2,
@@ -826,8 +826,9 @@ export default function VideoPage() {
                         }}>
                       {video.title}
                     </h3>
-                    <div className="text-xs text-bunny-muted">
-                      <div>{formatViews(video.views)} views • {formatDate(video.createdAt)}</div>
+                    <div className="text-xs text-bunny-muted mt-1">
+                      <div>{formatViews(video.views)} Aufrufe</div>
+                      <div>{formatDate(video.createdAt)}</div>
                     </div>
                   </div>
                 </div>