diff --git a/src/app/design-canvas/page.tsx b/src/app/design-canvas/page.tsx
new file mode 100644
index 0000000..cab459e
--- /dev/null
+++ b/src/app/design-canvas/page.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import HeroOverlay from "@/components/sections/hero/HeroOverlay";
+import { Move3d, ArrowRight } from "lucide-react";
+
+export default function DesignCanvasPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-bubble"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="smallMedium"
+      sizing="largeSmall"
+      background="grid"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="solid"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="DesignLens"
+          navItems={[
+            { name: "Features", id: "#features" },
+            { name: "Products", id: "#products" },
+            { name: "Pricing", id: "#pricing" },
+            { name: "Contact", id: "#contact" },
+            { name: "Start Designing", id: "https://app.designlens.io" },
+          ]}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroOverlay
+          title="Interactive Design Canvas"
+          description="Position your logos on any garment template with precise controls. Rotate, scale, and preview your designs in real-time before moving to supplier matching."
+          tag="Design Tools"
+          tagIcon={Move3d}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZYNcpRFV3V44D4fPITDL3yqoO/an-interactive-canvas-showing-a-white-t--1772801642764-d0d6cce3.png"
+          imageAlt="Interactive canvas for logo placement"
+          textPosition="bottom-left"
+          showBlur={true}
+          showDimOverlay={false}
+          buttons={[
+            { text: "Start Designing", href: "https://app.designlens.io" },
+            { text: "Back to Home", href: "/" },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}