diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx
new file mode 100644
index 0000000..11de646
--- /dev/null
+++ b/src/app/checkout/page.tsx
@@ -0,0 +1,264 @@
+'use client';
+
+import { useState } from 'react';
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ButtonHoverBubble from '@/components/button/ButtonHoverBubble';
+import Textarea from '@/components/form/Textarea';
+
+const navItems = [
+  { name: 'Home', id: '/' },
+  { name: 'Shop', id: '/shop' },
+  { name: 'Cart', id: '/cart' },
+  { name: 'Checkout', id: '/checkout' },
+];
+
+interface OrderItem {
+  id: string;
+  name: string;
+  price: number;
+  quantity: number;
+}
+
+interface FormData {
+  firstName: string;
+  lastName: string;
+  email: string;
+  address: string;
+  city: string;
+  postalCode: string;
+  notes: string;
+}
+
+export default function CheckoutPage() {
+  const [formData, setFormData] = useState<FormData>({
+    firstName: '',
+    lastName: '',
+    email: '',
+    address: '',
+    city: '',
+    postalCode: '',
+    notes: '',
+  });
+
+  const [orderPlaced, setOrderPlaced] = useState(false);
+
+  // Sample order data
+  const orderItems: OrderItem[] = [
+    { id: '1', name: 'Premium Headphones', price: 199.99, quantity: 1 },
+    { id: '2', name: 'Wireless Mouse', price: 49.99, quantity: 2 },
+  ];
+
+  const subtotal = orderItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
+  const tax = subtotal * 0.1;
+  const shipping = 10.0;
+  const total = subtotal + tax + shipping;
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Simulate order placement
+    setOrderPlaced(true);
+  };
+
+  if (orderPlaced) {
+    return (
+      <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="medium"
+        background="none"
+        cardStyle="solid"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="bold"
+      >
+        <NavbarStyleFullscreen
+          navItems={navItems}
+          brandName="Shop"
+          bottomLeftText="Global Community"
+          bottomRightText="hello@example.com"
+        />
+        <main className="w-full py-12">
+          <div className="max-w-2xl mx-auto px-4 text-center">
+            <div className="mb-8">
+              <div className="w-16 h-16 mx-auto mb-4 bg-green-100 rounded-full flex items-center justify-center">
+                <span className="text-3xl">✓</span>
+              </div>
+              <h1 className="text-4xl font-bold mb-4">Order Confirmed!</h1>
+              <p className="text-lg text-gray-600 mb-6">
+                Thank you for your order. A confirmation email has been sent to {formData.email}
+              </p>
+            </div>
+            <div className="bg-gray-50 border rounded-lg p-8 mb-8">
+              <h2 className="text-2xl font-semibold mb-6">Order Details</h2>
+              <div className="text-left space-y-3 mb-6">
+                <p><strong>Name:</strong> {formData.firstName} {formData.lastName}</p>
+                <p><strong>Email:</strong> {formData.email}</p>
+                <p><strong>Address:</strong> {formData.address}, {formData.city} {formData.postalCode}</p>
+                <p><strong>Total:</strong> ${total.toFixed(2)}</p>
+              </div>
+            </div>
+            <ButtonHoverBubble text="Continue Shopping" href="/shop" />
+          </div>
+        </main>
+      </ThemeProvider>
+    );
+  }
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <NavbarStyleFullscreen
+        navItems={navItems}
+        brandName="Shop"
+        bottomLeftText="Global Community"
+        bottomRightText="hello@example.com"
+      />
+      <main className="w-full py-12">
+        <div className="max-w-6xl mx-auto px-4">
+          <h1 className="text-4xl font-bold mb-8">Checkout</h1>
+
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            {/* Checkout Form */}
+            <div className="lg:col-span-2">
+              <form onSubmit={handleSubmit} className="space-y-6">
+                <div>
+                  <h2 className="text-2xl font-bold mb-4">Shipping Information</h2>
+                  <div className="grid grid-cols-2 gap-4 mb-4">
+                    <input
+                      type="text"
+                      name="firstName"
+                      placeholder="First Name"
+                      value={formData.firstName}
+                      onChange={handleInputChange}
+                      required
+                      className="border rounded-lg px-4 py-2 w-full"
+                    />
+                    <input
+                      type="text"
+                      name="lastName"
+                      placeholder="Last Name"
+                      value={formData.lastName}
+                      onChange={handleInputChange}
+                      required
+                      className="border rounded-lg px-4 py-2 w-full"
+                    />
+                  </div>
+                  <input
+                    type="email"
+                    name="email"
+                    placeholder="Email"
+                    value={formData.email}
+                    onChange={handleInputChange}
+                    required
+                    className="border rounded-lg px-4 py-2 w-full mb-4"
+                  />
+                  <input
+                    type="text"
+                    name="address"
+                    placeholder="Address"
+                    value={formData.address}
+                    onChange={handleInputChange}
+                    required
+                    className="border rounded-lg px-4 py-2 w-full mb-4"
+                  />
+                  <div className="grid grid-cols-2 gap-4">
+                    <input
+                      type="text"
+                      name="city"
+                      placeholder="City"
+                      value={formData.city}
+                      onChange={handleInputChange}
+                      required
+                      className="border rounded-lg px-4 py-2 w-full"
+                    />
+                    <input
+                      type="text"
+                      name="postalCode"
+                      placeholder="Postal Code"
+                      value={formData.postalCode}
+                      onChange={handleInputChange}
+                      required
+                      className="border rounded-lg px-4 py-2 w-full"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <h2 className="text-2xl font-bold mb-4">Order Notes</h2>
+                  <Textarea
+                    value={formData.notes}
+                    onChange={(value) => setFormData(prev => ({ ...prev, notes: value }))}
+                    placeholder="Add any special instructions for your order..."
+                    rows={4}
+                  />
+                </div>
+              </form>
+            </div>
+
+            {/* Order Summary */}
+            <div className="lg:col-span-1">
+              <div className="border rounded-lg p-6 sticky top-4">
+                <h2 className="text-2xl font-bold mb-6">Order Summary</h2>
+
+                {/* Order Items */}
+                <div className="mb-6 space-y-3">
+                  {orderItems.map(item => (
+                    <div key={item.id} className="flex justify-between text-sm">
+                      <span>{item.name} x{item.quantity}</span>
+                      <span>${(item.price * item.quantity).toFixed(2)}</span>
+                    </div>
+                  ))}
+                </div>
+
+                {/* Pricing Breakdown */}
+                <div className="border-t pt-4 space-y-3 mb-6">
+                  <div className="flex justify-between">
+                    <span className="text-gray-600">Subtotal</span>
+                    <span>${subtotal.toFixed(2)}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-600">Tax (10%)</span>
+                    <span>${tax.toFixed(2)}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-600">Shipping</span>
+                    <span>${shipping.toFixed(2)}</span>
+                  </div>
+                  <div className="border-t pt-3 flex justify-between font-semibold text-lg">
+                    <span>Total</span>
+                    <span>${total.toFixed(2)}</span>
+                  </div>
+                </div>
+
+                <button
+                  onClick={handleSubmit}
+                  className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg transition"
+                >
+                  Place Order
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file