diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 3f8ad41..494112c 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -1,11 +1,10 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { type Video } from "@shared/schema";
-import VideoCard from "@/components/video-card";
+import NetflixGrid from "@/components/netflix-grid";
 import { Link } from "wouter";
 import { Input } from "@/components/ui/input";
-import { Search, Menu, X, ChevronLeft, ChevronRight } from "lucide-react";
-import { Button } from "@/components/ui/button";
+import { Search, Menu, X } from "lucide-react";
 
 interface VideosResponse {
   videos: Video[];
@@ -13,18 +12,13 @@ interface VideosResponse {
   hasMore: boolean;
 }
 
-interface VideoCategory {
-  title: string;
-  videos: Video[];
-}
-
 export default function Home() {
   const [searchQuery, setSearchQuery] = useState("");
   const [allVideos, setAllVideos] = useState<Video[]>([]);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
   // Fetch videos with optimized loading
-  const { data: videosResponse, isLoading } = useQuery<VideosResponse>({
+  const { data: videosResponse, isLoading, refetch } = useQuery<VideosResponse>({
     queryKey: ["/api/videos", { 
       limit: 150,
       offset: 0, 
@@ -59,70 +53,38 @@ export default function Home() {
     }
   }, [videosResponse]);
 
-  const handleVideoClick = (video: Video) => {
-    window.location.href = `/video/${video.id}`;
-  };
-
-  // Organize videos into categories like ZDF
-  const getCategories = (): VideoCategory[] => {
-    if (!allVideos.length) return [];
-
-    // Sort by views for popular content
-    const sortedByViews = [...allVideos].sort((a, b) => (b.views || 0) - (a.views || 0));
-    
-    // Sort by date for recently added
-    const sortedByDate = [...allVideos].sort((a, b) => 
-      new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
-    );
-
-    // FOLX STADL videos
-    const folxStadlVideos = allVideos.filter(video => 
-      video.title.includes("FOLX STADL") || video.title.includes("FOLXSTADL")
-    );
-
-    return [
-      {
-        title: "Meist Angesehen",
-        videos: sortedByViews.slice(0, 12)
-      },
-      ...(folxStadlVideos.length > 0 ? [{
-        title: "FOLX STADL Shows",
-        videos: folxStadlVideos.slice(0, 12)
-      }] : []),
-      {
-        title: "Neue Videos",
-        videos: sortedByDate.slice(0, 12)
-      },
-      {
-        title: "Alle Videos",
-        videos: allVideos.slice(0, 15)
-      }
-    ];
-  };
+  // Only refetch when search changes
+  useEffect(() => {
+    if (searchQuery !== undefined) {
+      refetch();
+    }
+  }, [searchQuery, refetch]);
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-blue-900 to-indigo-900">
-      {/* Header */}
-      <header className="sticky top-0 z-50 bg-black/30 backdrop-blur-md border-b border-white/10">
+    <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="container py-4">
           <div className="flex items-center justify-between">
-            {/* 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>
+            {/* 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>
 
-            {/* Navigation & Search */}
-            <div className="flex items-center gap-6">
-              {/* Desktop Navigation */}
+            {/* Right side - Navigation + Search */}
+            <div className="flex items-center gap-4">
+              {/* Desktop navigation */}
               <div className="hidden md:flex items-center space-x-6">
                 <nav className="flex space-x-6">
-                  <Link href="/" className="text-white/80 hover:text-white transition-colors">
+                  <Link href="/" className="text-bunny-light hover:text-bunny-blue transition-colors">
                     Home
                   </Link>
-                  <Link href="/folx-stadl" className="text-white/80 hover:text-white transition-colors">
+                  <Link href="/folx-stadl" className="text-bunny-light hover:text-bunny-blue transition-colors">
                     FOLX STADL
                   </Link>
                 </nav>
@@ -133,151 +95,72 @@ export default function Home() {
                     placeholder="Videos suchen..."
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
-                    className="bg-white/10 border-white/20 text-white placeholder-white/50 w-64"
+                    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"
                   />
-                  <Search className="absolute right-3 top-1/2 transform -translate-y-1/2 text-white/50 w-4 h-4" />
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                 </div>
               </div>
 
               {/* Mobile menu button */}
               <button
                 onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-                className="md:hidden p-2 text-white"
+                className="md:hidden p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
+                data-testid="button-mobile-menu"
               >
-                {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+                {isMobileMenuOpen ? (
+                  <X className="w-6 h-6 text-white" />
+                ) : (
+                  <Menu className="w-6 h-6 text-white" />
+                )}
               </button>
             </div>
           </div>
+        </div>
 
-          {/* 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>
+        {/* Mobile menu dropdown */}
+        {isMobileMenuOpen && (
+          <div className="md:hidden border-t border-white/20 bg-bunny-dark/95 backdrop-blur-md">
+            <div className="px-4 py-3">
+              <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>
               </nav>
+              
               <div className="relative">
                 <Input
                   type="search"
-                  placeholder="Suchen..."
+                  placeholder="Search..."
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
-                  className="bg-white/10 border-white/20 text-white placeholder-white/50 w-full"
+                  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"
                 />
-                <Search className="absolute right-3 top-1/2 transform -translate-y-1/2 text-white/50 w-4 h-4" />
+                <Search className="absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
               </div>
             </div>
-          )}
+          </div>
+        )}
+      </div>
+
+      <main className="w-full pt-0 pb-8 relative">
+        <div className="container">
+          <NetflixGrid
+            videos={allVideos}
+            isLoading={isLoading}
+          />
         </div>
-      </header>
-
-      {/* Main Content */}
-      <main className="container py-8">
-        {isLoading ? (
-          <div className="space-y-8">
-            {Array.from({ length: 3 }).map((_, categoryIndex) => (
-              <div key={categoryIndex} className="space-y-4">
-                <div className="h-6 bg-white/10 rounded w-48 animate-pulse"></div>
-                <div className="flex space-x-4 overflow-hidden">
-                  {Array.from({ length: 6 }).map((_, index) => (
-                    <div key={index} className="flex-shrink-0 w-[280px] 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>
-            ))}
-          </div>
-        ) : (
-          <div className="space-y-8">
-            {getCategories().map((category, categoryIndex) => (
-              <CategorySection
-                key={categoryIndex}
-                category={category}
-                onVideoClick={handleVideoClick}
-              />
-            ))}
-          </div>
-        )}
-
-        {allVideos.length === 0 && !isLoading && (
-          <div className="text-center py-12">
-            <div className="text-white/60 text-lg">Keine Videos gefunden</div>
-          </div>
-        )}
       </main>
     </div>
   );
-}
-
-interface CategorySectionProps {
-  category: VideoCategory;
-  onVideoClick: (video: Video) => void;
-}
-
-function CategorySection({ category, onVideoClick }: CategorySectionProps) {
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  const scroll = (direction: 'left' | 'right') => {
-    if (scrollRef.current) {
-      const scrollAmount = 320; // Width of one card + gap
-      const newScrollLeft = scrollRef.current.scrollLeft + (direction === 'right' ? scrollAmount : -scrollAmount);
-      scrollRef.current.scrollTo({
-        left: newScrollLeft,
-        behavior: 'smooth'
-      });
-    }
-  };
-
-  return (
-    <div className="relative group">
-      <h2 className="text-xl font-semibold text-white mb-4 px-4">
-        {category.title}
-      </h2>
-      
-      <div className="relative">
-        {/* Left scroll button */}
-        <Button
-          onClick={() => scroll('left')}
-          className="absolute left-2 top-1/2 -translate-y-1/2 z-40 bg-black/60 hover:bg-black/80 text-white border-none w-12 h-12 rounded-full transition-all duration-300 opacity-0 group-hover:opacity-100"
-          size="sm"
-        >
-          <ChevronLeft className="w-6 h-6" />
-        </Button>
-
-        {/* Right scroll button */}
-        <Button
-          onClick={() => scroll('right')}
-          className="absolute right-2 top-1/2 -translate-y-1/2 z-40 bg-black/60 hover:bg-black/80 text-white border-none w-12 h-12 rounded-full transition-all duration-300 opacity-0 group-hover:opacity-100"
-          size="sm"
-        >
-          <ChevronRight className="w-6 h-6" />
-        </Button>
-
-        {/* Scrollable video row */}
-        <div
-          ref={scrollRef}
-          className="flex gap-4 overflow-x-auto scrollbar-hide pb-4 px-4"
-          style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
-        >
-          {category.videos.map((video) => (
-            <div 
-              key={video.id} 
-              className="flex-shrink-0 w-[280px] hover:scale-105 transition-transform duration-300"
-            >
-              <VideoCard
-                video={video}
-                onClick={onVideoClick}
-                className="w-full"
-              />
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
 }
\ No newline at end of file