diff --git a/src/app/dashboard/customers/page.tsx b/src/app/dashboard/customers/page.tsx
index e8939ef..263456a 100644
--- a/src/app/dashboard/customers/page.tsx
+++ b/src/app/dashboard/customers/page.tsx
@@ -8,9 +8,10 @@ import {
     TableRow,
 } from "@/components/ui/table"
 import { Button } from "@/components/ui/button"
-import { Plus, Search } from "lucide-react"
+import { Plus, Search, Phone, Mail, FileText, Edit } from "lucide-react"
 import Link from "next/link"
 import { Input } from "@/components/ui/input"
+import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
 
 export default async function CustomersPage({
     searchParams,
@@ -29,11 +30,11 @@ export default async function CustomersPage({
     const { data: customers } = await request
 
     return (
-        <div className="space-y-4">
-            <div className="flex items-center justify-between">
+        <div className="space-y-6">
+            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                 <h2 className="text-3xl font-bold tracking-tight">Müşteriler</h2>
-                <Link href="/dashboard/customers/new">
-                    <Button>
+                <Link href="/dashboard/customers/new" className="w-full sm:w-auto">
+                    <Button className="w-full">
                         <Plus className="mr-2 h-4 w-4" /> Yeni Müşteri Ekle
                     </Button>
                 </Link>
@@ -52,7 +53,8 @@ export default async function CustomersPage({
                 </div>
             </div>
 
-            <div className="rounded-md border">
+            {/* Desktop View */}
+            <div className="hidden md:block rounded-md border">
                 <Table>
                     <TableHeader>
                         <TableRow>
@@ -86,6 +88,42 @@ export default async function CustomersPage({
                     </TableBody>
                 </Table>
             </div>
+
+            {/* Mobile View */}
+            <div className="grid grid-cols-1 gap-4 md:hidden">
+                {customers?.length === 0 ? (
+                    <div className="text-center p-8 border rounded-lg bg-muted/10 text-muted-foreground">
+                        Müşteri bulunamadı.
+                    </div>
+                ) : (
+                    customers?.map((customer) => (
+                        <Card key={customer.id} className="overflow-hidden">
+                            <CardHeader className="bg-muted/20 p-4 flex flex-row items-center justify-between space-y-0">
+                                <span className="font-semibold text-lg">{customer.full_name}</span>
+                                <Button variant="ghost" size="icon" className="h-8 w-8">
+                                    <Edit className="h-4 w-4 text-muted-foreground" />
+                                </Button>
+                            </CardHeader>
+                            <CardContent className="p-4 space-y-3">
+                                <div className="flex items-center text-sm">
+                                    <Phone className="mr-2 h-4 w-4 text-muted-foreground" />
+                                    {customer.phone || "-"}
+                                </div>
+                                <div className="flex items-center text-sm">
+                                    <Mail className="mr-2 h-4 w-4 text-muted-foreground" />
+                                    <span className="truncate">{customer.email || "-"}</span>
+                                </div>
+                                {customer.notes && (
+                                    <div className="flex items-start text-sm">
+                                        <FileText className="mr-2 h-4 w-4 text-muted-foreground mt-0.5" />
+                                        <span className="line-clamp-2 text-muted-foreground">{customer.notes}</span>
+                                    </div>
+                                )}
+                            </CardContent>
+                        </Card>
+                    ))
+                )}
+            </div>
         </div>
     )
 }