diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx
new file mode 100644
index 0000000..1a0a07c
--- /dev/null
+++ b/src/app/checkout/page.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+
+export default function CheckoutPage() {
+  return (
+    <ThemeProvider>
+      <NavbarLayoutFloatingOverlay
+        brandName="Webild"
+        navItems={[
+          { name: "Home", id: "/" },
+          { name: "Shop", id: "/shop" },
+        ]}
+      />
+      <div className="pt-32 pb-20 container mx-auto px-6">
+        <h1 className="text-4xl font-bold mb-8">Checkout</h1>
+        <div className="grid md:grid-cols-2 gap-12">
+          <div className="bg-card p-8 rounded-2xl">
+            <h2 className="text-2xl font-semibold mb-6">Shipping Details</h2>
+            <div className="space-y-4">
+              <input type="text" placeholder="Full Name" className="w-full p-3 rounded-lg bg-background" />
+              <input type="email" placeholder="Email Address" className="w-full p-3 rounded-lg bg-background" />
+              <input type="text" placeholder="Shipping Address" className="w-full p-3 rounded-lg bg-background" />
+            </div>
+          </div>
+          <div className="bg-card p-8 rounded-2xl">
+            <h2 className="text-2xl font-semibold mb-6">Order Summary</h2>
+            <div className="space-y-4 mb-6">
+              <div className="flex justify-between"><span>Subtotal</span><span>$298</span></div>
+              <div className="flex justify-between font-bold"><span>Total</span><span>$298</span></div>
+            </div>
+            <button className="w-full py-4 bg-primary-cta text-white rounded-xl">Complete Purchase</button>
+          </div>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}