diff --git a/app/checkout/page.tsx b/app/checkout/page.tsx
new file mode 100644
index 0000000..a4a58ec
--- /dev/null
+++ b/app/checkout/page.tsx
@@ -0,0 +1,113 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Footer } from "@/components/footer";
+import { CheckCircle2 } from "lucide-react";
+import { useState } from "react";
+import Link from "next/link";
+
+export default function CheckoutPage() {
+  const [isOrdered, setIsOrdered] = useState(false);
+
+  if (isOrdered) {
+    return (
+      <main className="min-h-screen bg-neutral-50">
+        <Container className="py-20 text-center">
+          <div className="bg-white p-12 rounded-3xl shadow-sm max-w-md mx-auto">
+            <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
+              <CheckCircle2 className="w-10 h-10 text-green-600" />
+            </div>
+            <Heading level={2} className="text-2xl mb-4">Order Placed Successfully!</Heading>
+            <p className="text-neutral-500 mb-8">Thank you for shopping with BharatStore. Your order #BS-12345 is being processed.</p>
+            <Button asChild className="rounded-full px-8">
+              <Link href="/">Back to Home</Link>
+            </Button>
+          </div>
+        </Container>
+        <Footer />
+      </main>
+    );
+  }
+
+  return (
+    <main className="min-h-screen bg-neutral-50">
+      <Container className="py-12">
+        <Heading className="mb-8">Checkout</Heading>
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          <div className="lg:col-span-2 space-y-6">
+            <div className="bg-white p-8 rounded-3xl shadow-sm">
+              <h3 className="font-bold text-xl mb-6">Shipping Address</h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="name">Full Name</Label>
+                  <Input id="name" placeholder="John Doe" />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="phone">Phone Number</Label>
+                  <Input id="phone" placeholder="+91 98765 43210" />
+                </div>
+                <div className="md:col-span-2 space-y-2">
+                  <Label htmlFor="address">Address</Label>
+                  <Input id="address" placeholder="House No, Street, Area" />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="city">City</Label>
+                  <Input id="city" placeholder="Mumbai" />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="pincode">Pincode</Label>
+                  <Input id="pincode" placeholder="400001" />
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-white p-8 rounded-3xl shadow-sm">
+              <h3 className="font-bold text-xl mb-6">Payment Method</h3>
+              <div className="space-y-4">
+                <div className="flex items-center p-4 border rounded-2xl cursor-pointer hover:border-blue-600 transition-colors">
+                  <input type="radio" name="payment" id="upi" className="mr-3" defaultChecked />
+                  <Label htmlFor="upi" className="flex-1 cursor-pointer font-medium">UPI (Google Pay, PhonePe, Paytm)</Label>
+                </div>
+                <div className="flex items-center p-4 border rounded-2xl cursor-pointer hover:border-blue-600 transition-colors">
+                  <input type="radio" name="payment" id="card" className="mr-3" />
+                  <Label htmlFor="card" className="flex-1 cursor-pointer font-medium">Credit / Debit Card</Label>
+                </div>
+                <div className="flex items-center p-4 border rounded-2xl cursor-pointer hover:border-blue-600 transition-colors">
+                  <input type="radio" name="payment" id="cod" className="mr-3" />
+                  <Label htmlFor="cod" className="flex-1 cursor-pointer font-medium">Cash on Delivery</Label>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="lg:col-span-1">
+            <div className="bg-white p-6 rounded-3xl shadow-sm sticky top-24">
+              <h3 className="font-bold text-lg mb-6">Order Summary</h3>
+              <div className="space-y-4 mb-6">
+                <div className="flex justify-between text-neutral-600">
+                  <span>Items Total</span>
+                  <span>₹2,499</span>
+                </div>
+                <div className="flex justify-between text-neutral-600">
+                  <span>Delivery</span>
+                  <span className="text-green-600 font-medium">FREE</span>
+                </div>
+                <div className="pt-4 border-t flex justify-between font-bold text-xl text-neutral-900">
+                  <span>Total Payable</span>
+                  <span>₹2,499</span>
+                </div>
+              </div>
+              <Button onClick={() => setIsOrdered(true)} className="w-full rounded-full py-6 text-lg">
+                Place Order
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Container>
+      <Footer />
+    </main>
+  );
+}