diff --git a/client/src/hooks/use-favorites.ts b/client/src/hooks/use-favorites.ts
index 78cc098..e495006 100644
--- a/client/src/hooks/use-favorites.ts
+++ b/client/src/hooks/use-favorites.ts
@@ -2,7 +2,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { apiRequest } from "@/lib/queryClient";
 import { useToast } from "@/hooks/use-toast";
 
-const CURRENT_USER_ID = "test-user-123"; // For demo purposes
+const CURRENT_USER_ID = "5311f8eb-aba2-4f58-96bf-0ca99fe5907c"; // Test user from database
 
 export function useFavorites() {
   const queryClient = useQueryClient();
diff --git a/client/src/hooks/use-playlists.ts b/client/src/hooks/use-playlists.ts
index 8df076d..a1e36b6 100644
--- a/client/src/hooks/use-playlists.ts
+++ b/client/src/hooks/use-playlists.ts
@@ -3,7 +3,7 @@ import { apiRequest } from "@/lib/queryClient";
 import { useToast } from "@/hooks/use-toast";
 import type { Playlist, InsertPlaylist } from "@shared/schema";
 
-const CURRENT_USER_ID = "test-user-123"; // For demo purposes
+const CURRENT_USER_ID = "5311f8eb-aba2-4f58-96bf-0ca99fe5907c"; // Test user from database
 
 export function usePlaylists() {
   const queryClient = useQueryClient();
diff --git a/server/routes.ts b/server/routes.ts
index 96f72c0..007d47e 100644
--- a/server/routes.ts
+++ b/server/routes.ts
@@ -157,28 +157,41 @@ export async function registerRoutes(app: Express): Promise<Server> {
           <svg width="400" height="225" xmlns="http://www.w3.org/2000/svg">
             <defs>
               <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
-                <stop offset="0%" style="stop-color:#1e40af;stop-opacity:1" />
-                <stop offset="100%" style="stop-color:#1e3a8a;stop-opacity:1" />
+                <stop offset="0%" style="stop-color:#374151;stop-opacity:1" />
+                <stop offset="100%" style="stop-color:#1f2937;stop-opacity:1" />
               </linearGradient>
+              <filter id="shadow">
+                <feDropShadow dx="2" dy="2" stdDeviation="3"/>
+              </filter>
             </defs>
             <rect width="400" height="225" fill="url(#grad)" />
             
+            <!-- Video camera icon background -->
+            <circle cx="120" cy="80" r="25" fill="rgba(255,255,255,0.1)" />
+            <!-- Camera body -->
+            <rect x="108" y="72" width="18" height="12" rx="2" fill="rgba(255,255,255,0.6)" />
+            <!-- Camera lens -->
+            <circle cx="114" cy="78" r="3" fill="#374151" />
+            <!-- Camera viewfinder -->
+            <rect x="126" y="75" width="6" height="4" fill="rgba(255,255,255,0.6)" />
+            
             <!-- Play button circle -->
-            <circle cx="200" cy="112" r="35" fill="rgba(255,255,255,0.9)" />
+            <circle cx="200" cy="112" r="35" fill="rgba(255,255,255,0.9)" filter="url(#shadow)" />
             <!-- Play button triangle -->
-            <polygon points="188,97 188,127 218,112" fill="#1e40af" />
+            <polygon points="188,97 188,127 218,112" fill="#374151" />
             
             <!-- Title background -->
-            <rect x="0" y="175" width="400" height="50" fill="rgba(0,0,0,0.7)" />
+            <rect x="0" y="175" width="400" height="50" fill="rgba(0,0,0,0.8)" />
             
             <!-- Title text -->
             <text x="20" y="200" fill="white" font-family="Arial, sans-serif" font-size="14" font-weight="bold">${displayTitle}</text>
             
             <!-- Duration -->
-            ${duration ? `<text x="370" y="200" fill="white" font-family="Arial, sans-serif" font-size="12" text-anchor="end">${duration}</text>` : ''}
+            ${duration ? `<rect x="350" y="185" width="35" height="20" rx="3" fill="rgba(0,0,0,0.8)"/>
+            <text x="367" y="198" fill="white" font-family="Arial, sans-serif" font-size="11" text-anchor="middle">${duration}</text>` : ''}
             
-            <!-- Time indicator -->
-            <text x="20" y="25" fill="rgba(255,255,255,0.8)" font-family="Arial, sans-serif" font-size="12">t=${timeStamp}s</text>
+            <!-- Video type indicator -->
+            <text x="20" y="25" fill="rgba(255,255,255,0.7)" font-family="Arial, sans-serif" font-size="11">VIDEO</text>
           </svg>
         `;