diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx
new file mode 100644
index 0000000..7a6120a
--- /dev/null
+++ b/src/app/checkout/page.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterBase from '@/components/sections/footer/FooterBase';
+
+export default function CheckoutPage() {
+  return (
+    <ThemeProvider>
+      <ReactLenis root>
+        <NavbarLayoutFloatingInline
+          navItems={[{ name: "Home", id: "hero" }, { name: "Cart", id: "/cart" }, { name: "Checkout", id: "/checkout" }]}
+          brandName="ShopifyPro"
+        />
+        <main className="py-20 px-6 container mx-auto flex flex-col items-center">
+          <h1 className="text-4xl font-bold mb-8">Checkout</h1>
+          <div className="w-full max-w-2xl bg-card p-8 rounded-lg shadow-sm border border-border">
+            <h2 className="text-xl font-semibold mb-4">Order Summary</h2>
+            <div className="flex justify-between border-b pb-4 mb-4">
+              <span>Premium Gadget (x1)</span>
+              <span>$129</span>
+            </div>
+            <div className="flex justify-between font-bold text-xl mb-8">
+              <span>Total</span>
+              <span>$129</span>
+            </div>
+            <button className="w-full bg-primary-cta text-white py-3 rounded-md hover:opacity-90 transition-opacity">
+              Confirm & Pay
+            </button>
+          </div>
+        </main>
+        <FooterBase
+          columns={[{ title: "Company", items: [{ label: "About Us", href: "#" }] }]}
+          logoText="ShopifyPro"
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file