diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index a619322..3f8ad41 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -1,10 +1,11 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { type Video } from "@shared/schema";
 import VideoCard from "@/components/video-card";
 import { Link } from "wouter";
 import { Input } from "@/components/ui/input";
-import { Search, Menu, X } from "lucide-react";
+import { Search, Menu, X, ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 interface VideosResponse {
   videos: Video[];
@@ -12,6 +13,11 @@ interface VideosResponse {
   hasMore: boolean;
 }
 
+interface VideoCategory {
+  title: string;
+  videos: Video[];
+}
+
 export default function Home() {
   const [searchQuery, setSearchQuery] = useState("");
   const [allVideos, setAllVideos] = useState<Video[]>([]);
@@ -57,10 +63,47 @@ export default function Home() {
     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)
+      }
+    ];
+  };
+
   return (
-    <div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900">
+    <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/20 backdrop-blur-md border-b border-white/10">
+      <header className="sticky top-0 z-50 bg-black/30 backdrop-blur-md border-b border-white/10">
         <div className="container py-4">
           <div className="flex items-center justify-between">
             {/* Logo */}
@@ -87,7 +130,7 @@ export default function Home() {
                 <div className="relative">
                   <Input
                     type="search"
-                    placeholder="Search videos..."
+                    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"
@@ -116,7 +159,7 @@ export default function Home() {
               <div className="relative">
                 <Input
                   type="search"
-                  placeholder="Search..."
+                  placeholder="Suchen..."
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
                   className="bg-white/10 border-white/20 text-white placeholder-white/50 w-full"
@@ -131,25 +174,31 @@ export default function Home() {
       {/* 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 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="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 className="space-y-8">
+            {getCategories().map((category, categoryIndex) => (
+              <CategorySection
+                key={categoryIndex}
+                category={category}
+                onVideoClick={handleVideoClick}
               />
             ))}
           </div>
@@ -157,10 +206,78 @@ export default function Home() {
 
         {allVideos.length === 0 && !isLoading && (
           <div className="text-center py-12">
-            <div className="text-white/60 text-lg">No videos found</div>
+            <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