diff --git a/attached_assets/image_1756750417243.png b/attached_assets/image_1756750417243.png
new file mode 100644
index 0000000..ee6c9a8
Binary files /dev/null and b/attached_assets/image_1756750417243.png differ
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 8b442fd..a619322 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -1,13 +1,10 @@
 import { useState, useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { type Video } from "@shared/schema";
-import VideoGrid from "@/components/video-grid";
+import VideoCard from "@/components/video-card";
 import { Link } from "wouter";
 import { Input } from "@/components/ui/input";
 import { Search, Menu, X } from "lucide-react";
-import NetflixGrid from "@/components/netflix-grid";
-import go4LogoPath from "@assets/go4_1756394900352.png";
-
 
 interface VideosResponse {
   videos: Video[];
@@ -17,17 +14,13 @@ interface VideosResponse {
 
 export default function Home() {
   const [searchQuery, setSearchQuery] = useState("");
-  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
-  const [offset, setOffset] = useState(0);
   const [allVideos, setAllVideos] = useState<Video[]>([]);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
-
-
   // Fetch videos with optimized loading
-  const { data: videosResponse, isLoading, refetch } = useQuery<VideosResponse>({
+  const { data: videosResponse, isLoading } = useQuery<VideosResponse>({
     queryKey: ["/api/videos", { 
-      limit: 150, // Naloži dovolj videov za vse kategorije
+      limit: 150,
       offset: 0, 
       search: searchQuery || undefined
     }],
@@ -47,10 +40,10 @@ export default function Home() {
       }
       return response.json();
     },
-    staleTime: 5 * 60 * 1000, // 5 minutes cache - much faster
-    gcTime: 10 * 60 * 1000, // 10 minutes retention
-    refetchOnWindowFocus: false, // Don't refetch on focus
-    refetchOnReconnect: false // Don't refetch on reconnect
+    staleTime: 5 * 60 * 1000,
+    gcTime: 10 * 60 * 1000,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false
   });
 
   // Update videos when new data comes in
@@ -60,44 +53,33 @@ export default function Home() {
     }
   }, [videosResponse]);
 
-  // Reset videos when search changes
-  const handleSearch = (query: string) => {
-    setSearchQuery(query);
-    setAllVideos([]);
+  const handleVideoClick = (video: Video) => {
+    window.location.href = `/video/${video.id}`;
   };
 
-  // Only refetch when search changes, not offset (for speed)
-  useEffect(() => {
-    if (searchQuery !== undefined) {
-      refetch();
-    }
-  }, [searchQuery, refetch]);
-
   return (
-    <div className="has-fixed-header" style={{minHeight: '100vh', background: 'linear-gradient(135deg, hsl(250, 50%, 15%) 0%, hsl(240, 30%, 25%) 100%)', color: 'white'}}>
-      {/* STICKY HEADER */}
-      <div className="header-sticky bg-transparent overflow-hidden">
+    <div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900">
+      {/* Header */}
+      <header className="sticky top-0 z-50 bg-black/20 backdrop-blur-md border-b border-white/10">
         <div className="container py-4">
           <div className="flex items-center justify-between">
-            {/* Left side - Logo */}
-            <div className="flex items-center space-x-4">
-              <Link href="/" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">
-                <div className="w-9 h-9 gradient-primary rounded-lg flex items-center justify-center shadow-lg">
-                  <div className="w-0 h-0 border-l-[10px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
-                </div>
-                <h1 className="text-2xl font-bold text-white tracking-wide">go4.video</h1>
-              </Link>
-            </div>
+            {/* Logo */}
+            <Link href="/" className="flex items-center space-x-3">
+              <div className="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+                <div className="w-0 h-0 border-l-[12px] border-l-white border-y-[8px] border-y-transparent ml-1"></div>
+              </div>
+              <h1 className="text-2xl font-bold text-white">go4.video</h1>
+            </Link>
 
-            {/* Right side - Navigation + Search */}
-            <div className="flex items-center gap-4">
-              {/* Desktop navigation */}
+            {/* Navigation & Search */}
+            <div className="flex items-center gap-6">
+              {/* Desktop Navigation */}
               <div className="hidden md:flex items-center space-x-6">
                 <nav className="flex space-x-6">
-                  <Link href="/" className="text-bunny-light hover:text-bunny-blue transition-colors">
+                  <Link href="/" className="text-white/80 hover:text-white transition-colors">
                     Home
                   </Link>
-                  <Link href="/folx-stadl" className="text-bunny-light hover:text-bunny-blue transition-colors">
+                  <Link href="/folx-stadl" className="text-white/80 hover:text-white transition-colors">
                     FOLX STADL
                   </Link>
                 </nav>
@@ -105,155 +87,80 @@ export default function Home() {
                 <div className="relative">
                   <Input
                     type="search"
-                    placeholder="Videos suchen..."
+                    placeholder="Search videos..."
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
-                    className="bg-white border border-gray-300 rounded-lg px-4 py-2 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-64"
+                    className="bg-white/10 border-white/20 text-white placeholder-white/50 w-64"
                   />
-                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                  <Search className="absolute right-3 top-1/2 transform -translate-y-1/2 text-white/50 w-4 h-4" />
                 </div>
               </div>
 
               {/* Mobile menu button */}
               <button
                 onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-                className="md:hidden p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
-                data-testid="button-mobile-menu"
+                className="md:hidden p-2 text-white"
               >
-                {isMobileMenuOpen ? (
-                  <X className="w-6 h-6 text-white" />
-                ) : (
-                  <Menu className="w-6 h-6 text-white" />
-                )}
+                {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
               </button>
             </div>
           </div>
-        </div>
 
-        {/* Mobile menu dropdown - kompakten */}
-        {isMobileMenuOpen && (
-          <div className="md:hidden border-t border-white/20 bg-bunny-dark/95 backdrop-blur-md">
-            <div className="px-4 py-3">
-              {/* Mobile navigation links - horizontal */}
-              <nav className="flex space-x-6 mb-3">
-                <Link 
-                  href="/" 
-                  className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
-                  onClick={() => setIsMobileMenuOpen(false)}
-                >
-                  Home
-                </Link>
-                <Link 
-                  href="/folx-stadl" 
-                  className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
-                  onClick={() => setIsMobileMenuOpen(false)}
-                >
-                  FOLX STADL
-                </Link>
+          {/* Mobile Menu */}
+          {isMobileMenuOpen && (
+            <div className="md:hidden mt-4 pt-4 border-t border-white/20">
+              <nav className="flex flex-col space-y-3 mb-4">
+                <Link href="/" className="text-white/80 hover:text-white">Home</Link>
+                <Link href="/folx-stadl" className="text-white/80 hover:text-white">FOLX STADL</Link>
               </nav>
-              
-              {/* Mobile search - manjši */}
               <div className="relative">
                 <Input
                   type="search"
                   placeholder="Search..."
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
-                  className="bg-white border border-gray-300 rounded-lg px-3 py-2 pl-9 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-full"
+                  className="bg-white/10 border-white/20 text-white placeholder-white/50 w-full"
                 />
-                <Search className="absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                <Search className="absolute right-3 top-1/2 transform -translate-y-1/2 text-white/50 w-4 h-4" />
               </div>
             </div>
-          </div>
-        )}
-      </div>
+          )}
+        </div>
+      </header>
 
-      <main className="w-full pt-0 pb-8 relative">
-        {/* Trikotniki na robovih - ne prekrivajo video kartic */}
-        <div className="absolute top-10 right-2 w-0 h-0 border-l-[70px] border-l-transparent border-r-[70px] border-r-transparent border-b-[100px] border-b-blue-400/8 rotate-12 z-0"></div>
-        <div className="absolute top-1/2 left-2 w-0 h-0 border-l-[60px] border-l-transparent border-r-[60px] border-r-transparent border-b-[85px] border-b-purple-400/8 -rotate-12 z-0"></div>
-        <div className="absolute bottom-1/4 right-2 w-0 h-0 border-l-[50px] border-l-transparent border-r-[50px] border-r-transparent border-b-[70px] border-b-cyan-400/8 rotate-45 z-0"></div>
-        {viewMode === "grid" ? (
-          <div className="container">
-            <NetflixGrid
-              videos={allVideos}
-              isLoading={isLoading}
-            />
+      {/* Main Content */}
+      <main className="container py-8">
+        {isLoading ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
+            {Array.from({ length: 15 }).map((_, index) => (
+              <div key={index} className="animate-pulse">
+                <div className="bg-white/10 aspect-video rounded-lg mb-3"></div>
+                <div className="space-y-2">
+                  <div className="h-4 bg-white/10 rounded w-3/4"></div>
+                  <div className="h-3 bg-white/10 rounded w-1/2"></div>
+                </div>
+              </div>
+            ))}
           </div>
         ) : (
-          <div className="container">
-            <VideoGrid
-              videos={allVideos}
-              isLoading={isLoading}
-              hasMore={false}
-              onLoadMore={() => {}}
-              viewMode={viewMode}
-            />
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
+            {allVideos.map((video) => (
+              <VideoCard
+                key={video.id}
+                video={video}
+                onClick={handleVideoClick}
+                className="hover:scale-105 transition-transform duration-200"
+              />
+            ))}
+          </div>
+        )}
+
+        {allVideos.length === 0 && !isLoading && (
+          <div className="text-center py-12">
+            <div className="text-white/60 text-lg">No videos found</div>
           </div>
         )}
       </main>
-
-
-      
-
-
-      {/* Footer with large triangle design */}
-      <footer className="bunny-gray border-t border-white/20 mt-16 relative overflow-hidden">
-        
-        {/* Trikotniki v footerju - manjši in bolje pozicionirani */}
-        <div className="absolute top-0 right-0 w-0 h-0 border-l-[80px] border-l-transparent border-b-[50px] border-b-blue-500/4 z-0"></div>
-        <div className="absolute bottom-0 left-0 w-0 h-0 border-r-[70px] border-r-transparent border-t-[45px] border-t-purple-500/4 z-0"></div>
-        <div className="container py-12">
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
-            <div className="col-span-1 md:col-span-2">
-              <div className="flex items-center space-x-2 mb-4">
-                <div className="w-8 h-8 gradient-primary rounded-lg flex items-center justify-center shadow-lg">
-                  <div className="w-0 h-0 border-l-[8px] border-l-white border-y-[5px] border-y-transparent ml-1"></div>
-                </div>
-                <h3 className="text-xl font-bold text-bunny-light">go4.video</h3>
-              </div>
-              <p className="text-bunny-muted mb-4">
-                Premium Video-Streaming-Plattform für Volksmusik, Schlager und Shows von Folx TV.
-              </p>
-              <div className="flex space-x-4">
-                <a href="#" className="text-bunny-muted hover:text-bunny-blue transition-colors">
-                  Twitter
-                </a>
-                <a href="#" className="text-bunny-muted hover:text-bunny-blue transition-colors">
-                  Facebook
-                </a>
-                <a href="#" className="text-bunny-muted hover:text-bunny-blue transition-colors">
-                  YouTube
-                </a>
-              </div>
-            </div>
-            
-            <div>
-              <h4 className="font-semibold mb-4 text-bunny-light">Plattform</h4>
-              <ul className="space-y-2 text-bunny-muted">
-                <li><a href="#" className="hover:text-bunny-light transition-colors">Hochladen</a></li>
-                <li><a href="#" className="hover:text-bunny-light transition-colors">Statistiken</a></li>
-                <li><a href="#" className="hover:text-bunny-light transition-colors">API Docs</a></li>
-                <li><a href="#" className="hover:text-bunny-light transition-colors">Support</a></li>
-              </ul>
-            </div>
-            
-            <div>
-              <h4 className="font-semibold mb-4 text-bunny-light">Unternehmen</h4>
-              <ul className="space-y-2 text-bunny-muted">
-                <li><a href="#" className="hover:text-bunny-light transition-colors">Über uns</a></li>
-                <li><a href="#" className="hover:text-bunny-light transition-colors">Datenschutz</a></li>
-                <li><a href="#" className="hover:text-bunny-light transition-colors">AGB</a></li>
-                <li><a href="#" className="hover:text-bunny-light transition-colors">Kontakt</a></li>
-              </ul>
-            </div>
-          </div>
-          
-          <div className="border-t border-gray-700 mt-8 pt-8 text-center text-bunny-muted">
-            <p>&copy; 2024 go4.video. Alle Rechte vorbehalten.</p>
-          </div>
-        </div>
-      </footer>
     </div>
   );
-}
+}
\ No newline at end of file