diff --git a/src/app/docs/page.tsx b/src/app/docs/page.tsx
new file mode 100644
index 0000000..2f38f4e
--- /dev/null
+++ b/src/app/docs/page.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import HeroSignup from '@/components/sections/hero/HeroSignup';
+import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { FileText, HelpCircle, Bot, Code, Database } from "lucide-react";
+
+export default function DocsPage() {
+    const navItems = [
+        { name: "Features", id: "features" },
+        { name: "Pricing", id: "pricing" },
+        { name: "Docs", href: "/docs" },
+        { name: "Contact", id: "contact" },
+        { name: "Admin", href: "/admin" }
+    ];
+
+    const docsFeatures = [
+        {
+            title: "Agent Creation Guide",            description: "Step-by-step instructions on how to build and configure your first AI agent.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/feature1.webp",            imageAlt: "Agent Creation Guide"
+        },
+        {
+            title: "API Reference",            description: "Detailed documentation for integrating AgentFlow with your existing systems.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/feature2.webp",            imageAlt: "API Reference"
+        },
+        {
+            title: "Integrations Setup",            description: "Guides for connecting AgentFlow with popular third-party tools and services.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/feature3.webp",            imageAlt: "Integrations Setup"
+        },
+        {
+            title: "Troubleshooting & FAQs",            description: "Common issues and solutions to help you resolve problems quickly.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/feature4.webp",            imageAlt: "Troubleshooting & FAQs"
+        }
+    ];
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="background-highlight"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="gradient-bordered"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="layered"
+            headingFontWeight="semibold"
+        >
+            <NavbarStyleFullscreen
+                navItems={navItems}
+                brandName="AgentFlow"
+                bottomLeftText="Build Smarter"
+                bottomRightText="hello@agentflow.ai"
+            />
+            <HeroSignup
+                background={{ variant: "canvas-reveal" }}
+                tag="Resources"
+                tagIcon={FileText}
+                title="Documentation Center"
+                description="Find comprehensive guides, API references, and tutorials to help you master AgentFlow."
+                buttons={[
+                    { text: "Browse Docs", href: "#" }
+                ]}
+            />
+            <FeatureCardSix
+                tag="Getting Started"
+                tagIcon={HelpCircle}
+                title="Popular Topics"
+                description="Explore our most frequently accessed documentation and tutorials."
+                textboxLayout="default"
+                useInvertedBackground={false}
+                features={docsFeatures.map(f => ({
+                    title: f.title,
+                    description: f.description,
+                    imageSrc: f.imageSrc,
+                    imageAlt: f.imageAlt,
+                    buttons: [{ text: "Read More", href: "#" }]
+                }))}
+            />
+        </ThemeProvider>
+    );
+}