diff --git a/app/filomuz/page.tsx b/app/filomuz/page.tsx
index ab55217..ba5a399 100644
--- a/app/filomuz/page.tsx
+++ b/app/filomuz/page.tsx
@@ -4,9 +4,9 @@ import { FloatingWhatsApp } from "@/components/FloatingWhatsApp";
 import { CTASection } from "@/components/CTASection";
 import { LoadMeterSection } from "@/components/LoadMeterSection";
 import Image from "next/image";
-import { cn } from "@/lib/utils";
 import { Metadata } from "next";
 import { FLEET_ITEMS } from "@/lib/data";
+import { FleetList } from "@/components/FleetList";
 
 export const metadata: Metadata = {
   title: "Geniş Vinç Filosu ve İş Makineleri Parkurumuz",
@@ -44,75 +44,7 @@ export default function FleetPage() {
         </div>
       </header>
 
-      {/* Filter System */}
-      <section className="bg-surface-container border-y border-outline-variant/10">
-        <div className="max-w-7xl mx-auto px-8 py-6">
-          <div className="flex flex-wrap items-center gap-4">
-            <span className="text-on-surface-variant font-headline text-xs uppercase tracking-widest mr-4">Filtrele:</span>
-            {FLEET_CATEGORIES.map((category, index) => (
-              <button 
-                key={index}
-                className={cn(
-                  "px-5 py-2 text-xs font-bold uppercase tracking-wider transition-all",
-                  index === 0 
-                    ? "bg-primary text-on-primary" 
-                    : "bg-surface-container-highest text-on-surface-variant hover:text-primary"
-                )}
-              >
-                {category}
-              </button>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Fleet Grid */}
-      <section className="max-w-7xl mx-auto px-8 py-20">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-outline-variant/10">
-          {FLEET_ITEMS.map((item, index) => (
-            <div 
-              key={index}
-              className="group relative bg-surface-container-low border border-outline-variant/10 overflow-hidden flex flex-col"
-            >
-              <div className="aspect-[4/3] overflow-hidden relative">
-                <Image 
-                  src={item.image}
-                  alt={item.name}
-                  fill
-                  className="object-cover transition-transform duration-700 group-hover:scale-110"
-                />
-                <div className={cn(
-                  "absolute top-4 left-4 px-3 py-1 text-[10px] font-black uppercase tracking-tighter",
-                  item.status === "Müsait" ? "bg-primary text-on-primary" : "bg-error text-on-error"
-                )}>
-                  {item.status}
-                </div>
-              </div>
-              <div className="p-8 flex-1 flex flex-col">
-                <h3 className="text-2xl font-black text-on-surface uppercase tracking-tight mb-2">
-                  {item.name}
-                </h3>
-                <p className="text-on-surface-variant text-sm mb-6 font-light">
-                  {item.description}
-                </p>
-                <div className="grid grid-cols-2 gap-4 border-t border-outline-variant/10 pt-6 mt-auto">
-                  <div>
-                    <span className="block text-primary text-[10px] uppercase tracking-widest mb-1">Kapasite</span>
-                    <span className="text-on-surface font-headline font-bold text-xl">{item.capacity}</span>
-                  </div>
-                  <div>
-                    <span className="block text-primary text-[10px] uppercase tracking-widest mb-1">Erişim</span>
-                    <span className="text-on-surface font-headline font-bold text-xl">{item.reach}</span>
-                  </div>
-                </div>
-                <button className="mt-8 w-full bg-surface-container-highest text-primary py-4 text-xs font-black uppercase tracking-[0.2em] hover:bg-primary hover:text-on-primary transition-all duration-300">
-                  İncele
-                </button>
-              </div>
-            </div>
-          ))}
-        </div>
-      </section>
+      <FleetList items={FLEET_ITEMS} categories={FLEET_CATEGORIES} />
 
       <LoadMeterSection />
       <CTASection />
diff --git a/components/FleetList.tsx b/components/FleetList.tsx
new file mode 100644
index 0000000..22441de
--- /dev/null
+++ b/components/FleetList.tsx
@@ -0,0 +1,103 @@
+'use client';
+
+import { useState } from 'react';
+import Image from "next/image";
+import { cn } from "@/lib/utils";
+
+interface FleetItem {
+  name: string;
+  description: string;
+  capacity: string;
+  reach: string;
+  image: string;
+  status: string;
+  category: string;
+}
+
+interface FleetListProps {
+  items: FleetItem[];
+  categories: string[];
+}
+
+export function FleetList({ items, categories }: FleetListProps) {
+  const [activeCategory, setActiveCategory] = useState("Hepsi");
+
+  const filteredItems = activeCategory === "Hepsi" 
+    ? items 
+    : items.filter(item => item.category === activeCategory);
+
+  return (
+    <>
+      {/* Filter System */}
+      <section className="bg-surface-container border-y border-outline-variant/10">
+        <div className="max-w-7xl mx-auto px-8 py-6">
+          <div className="flex flex-wrap items-center gap-4">
+            <span className="text-on-surface-variant font-headline text-xs uppercase tracking-widest mr-4">Filtrele:</span>
+            {categories.map((category) => (
+              <button 
+                key={category}
+                onClick={() => setActiveCategory(category)}
+                className={cn(
+                  "px-5 py-2 text-xs font-bold uppercase tracking-wider transition-all",
+                  activeCategory === category 
+                    ? "bg-primary text-on-primary" 
+                    : "bg-surface-container-highest text-on-surface-variant hover:text-primary"
+                )}
+              >
+                {category}
+              </button>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Fleet Grid */}
+      <section className="max-w-7xl mx-auto px-8 py-20">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-outline-variant/10">
+          {filteredItems.map((item, index) => (
+            <div 
+              key={index}
+              className="group relative bg-surface-container-low border border-outline-variant/10 overflow-hidden flex flex-col"
+            >
+              <div className="aspect-[4/3] overflow-hidden relative">
+                <Image 
+                  src={item.image}
+                  alt={item.name}
+                  fill
+                  className="object-cover transition-transform duration-700 group-hover:scale-110"
+                />
+                <div className={cn(
+                  "absolute top-4 left-4 px-3 py-1 text-[10px] font-black uppercase tracking-tighter",
+                  item.status === "Müsait" ? "bg-primary text-on-primary" : "bg-error text-on-error"
+                )}>
+                  {item.status}
+                </div>
+              </div>
+              <div className="p-8 flex-1 flex flex-col">
+                <h3 className="text-2xl font-black text-on-surface uppercase tracking-tight mb-2">
+                  {item.name}
+                </h3>
+                <p className="text-on-surface-variant text-sm mb-6 font-light">
+                  {item.description}
+                </p>
+                <div className="grid grid-cols-2 gap-4 border-t border-outline-variant/10 pt-6 mt-auto">
+                  <div>
+                    <span className="block text-primary text-[10px] uppercase tracking-widest mb-1">Kapasite</span>
+                    <span className="text-on-surface font-headline font-bold text-xl">{item.capacity}</span>
+                  </div>
+                  <div>
+                    <span className="block text-primary text-[10px] uppercase tracking-widest mb-1">Erişim</span>
+                    <span className="text-on-surface font-headline font-bold text-xl">{item.reach}</span>
+                  </div>
+                </div>
+                <button className="mt-8 w-full bg-surface-container-highest text-primary py-4 text-xs font-black uppercase tracking-[0.2em] hover:bg-primary hover:text-on-primary transition-all duration-300">
+                  İncele
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+    </>
+  );
+}