diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..4fd5eda
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,23 @@
+# Agent Instructions
+Use this file when an AI coding agent edits the generated documentation PR.
+## Documentation Source
+- The docs source lives in `apps/docs`.
+- `docs.json` is the Docs Cloud configuration for publishing, previews, and content roots.
+- Keep every page grounded in README, package metadata, source exports, CLI help, environment examples, or existing docs.
+## Generated Docs Map
+- /docs - Better-Auth UI
+- /docs/installation - Installation
+- /docs/quickstart - Quickstart
+- /docs/features - Features
+- /docs/features/readme-feature-integration - Integration
+- /docs/features/readme-feature-ui-components - UI Components
+- /docs/frontend - Frontend
+- /docs/frontend/application - Frontend Application
+## Editing Rules
+- Prefer reader-facing task explanations over source inventories.
+- Do not add commands, flags, environment variables, routes, imports, or framework names unless they are present in the repository.
+- If you add or rename a page, keep its frontmatter title and description accurate and make sure the navigation ordering still includes it.
+- Avoid analyzer language such as generated from, source evidence, implementation map, source surface, or detected in files.
+## Verification
+- Build the docs site with `cd apps/docs && pnpm install && pnpm build` before handing off a docs PR.
+- Open `/docs` and at least one generated leaf page to confirm the sidebar and page content match the PR.
diff --git a/apps/docs/.gitignore b/apps/docs/.gitignore
new file mode 100644
index 0000000..aff9a25
--- /dev/null
+++ b/apps/docs/.gitignore
@@ -0,0 +1,14 @@
+node_modules
+.env*
+!.env.example
+.next
+.nuxt
+.output
+.svelte-kit
+.astro
+dist
+build
+.vercel
+app/api/docs
+app/docs/layout.tsx
+mdx-components.tsx
diff --git a/apps/docs/app/docs/features/page.mdx b/apps/docs/app/docs/features/page.mdx
new file mode 100644
index 0000000..fdc9674
--- /dev/null
+++ b/apps/docs/app/docs/features/page.mdx
@@ -0,0 +1,13 @@
+---
+title: "Features"
+description: "Feature guides for the main user-facing workflows."
+order: 30
+---
+
+# Features
+
+Feature pages explain the capabilities Better-Auth UI exposes to users, operators, or application developers. Each page starts with the outcome, then links that behavior to setup and reference details.
+
+## Feature guides
+- [Integration](/docs/features/readme-feature-integration) - Easy integration with the Better-Auth authentication library.
+- [UI Components](/docs/features/readme-feature-ui-components) - Beautiful and responsive UI components.
diff --git a/apps/docs/app/docs/features/readme-feature-integration/page.mdx b/apps/docs/app/docs/features/readme-feature-integration/page.mdx
new file mode 100644
index 0000000..93c924f
--- /dev/null
+++ b/apps/docs/app/docs/features/readme-feature-integration/page.mdx
@@ -0,0 +1,19 @@
+---
+title: "Integration"
+description: "Easy integration with the Better-Auth authentication library."
+order: 40
+---
+
+# Integration
+
+This page explains easy integration with the better-auth authentication library in practical terms, including where it appears in the product and how to adopt it in a real project.
+
+## Reader workflow
+1. Start with the product surface called out in the README so the user-facing goal is clear.
+2. Map the feature to the components, routes, or configuration that make it work in this repository.
+3. Use the examples and setup notes in the repo to adopt the feature in a real project.
+
+## Where readers encounter it
+This page starts from the parts of the product a reader can actually recognize.
+
+- The README already calls out related context in **Features**.
diff --git a/apps/docs/app/docs/features/readme-feature-ui-components/page.mdx b/apps/docs/app/docs/features/readme-feature-ui-components/page.mdx
new file mode 100644
index 0000000..6326582
--- /dev/null
+++ b/apps/docs/app/docs/features/readme-feature-ui-components/page.mdx
@@ -0,0 +1,19 @@
+---
+title: "UI Components"
+description: "Beautiful and responsive UI components."
+order: 50
+---
+
+# UI Components
+
+This page explains beautiful and responsive ui components in practical terms, including where it appears in the product and how to adopt it in a real project.
+
+## Reader workflow
+1. Start with the product surface called out in the README so the user-facing goal is clear.
+2. Map the feature to the components, routes, or configuration that make it work in this repository.
+3. Use the examples and setup notes in the repo to adopt the feature in a real project.
+
+## Where readers encounter it
+This page starts from the parts of the product a reader can actually recognize.
+
+- The README already calls out related context in **Features**.
diff --git a/apps/docs/app/docs/frontend/application/page.mdx b/apps/docs/app/docs/frontend/application/page.mdx
new file mode 100644
index 0000000..1df300f
--- /dev/null
+++ b/apps/docs/app/docs/frontend/application/page.mdx
@@ -0,0 +1,24 @@
+---
+title: "Frontend Application"
+description: "The frontend page explains the user-facing application, navigation shell, and interface workflows readers actually interact with."
+order: 70
+---
+
+# Frontend Application
+
+The frontend page explains the user-facing application, navigation shell, and interface workflows readers actually interact with.
+## What Lives Here
+- `app/builder/_components/nested/pages/forget-password.tsx` - Forget Password page-level UI. This is where users usually encounter the capability in the product.
+- `app/builder/_components/nested/pages/reset-password.tsx` - Reset Password page-level UI. This is where users usually encounter the capability in the product.
+- `app/constants/components/credentail/username-and-password.tsx` - Username And Password reusable UI component. It renders a visible part of the workflow or a focused interaction.
+- `app/constants/components/GridCredentialSocial.tsx` - GridCredentialSocial reusable UI component. It renders a visible part of the workflow or a focused interaction.
+- `components/bottom-toolbar.tsx` - Repository file related to this page.
+- `components/codeblock/index.tsx` - Repository file related to this page.
+- `components/command-menu.tsx` - Repository file related to this page.
+- `components/command-palette-context.tsx` - Repository file related to this page.
+## How It Connects
+- The frontend translates user actions into API requests, mutations, or route transitions.
+- Shared layout, navigation, and state live here so workflow pages can explain the visible product before they describe internals.
+- Reader-facing docs should start from the screen or task, then link to backend or configuration pages only when the UI depends on them.
+## Related Areas
+No sibling subsystem pages are planned yet.
diff --git a/apps/docs/app/docs/frontend/page.mdx b/apps/docs/app/docs/frontend/page.mdx
new file mode 100644
index 0000000..1ff8d17
--- /dev/null
+++ b/apps/docs/app/docs/frontend/page.mdx
@@ -0,0 +1,12 @@
+---
+title: "Frontend"
+description: "User-facing application structure, navigation, and interface behavior."
+order: 60
+---
+
+# Frontend
+
+Frontend is the starting point for related workflows in Better-Auth UI. Choose the page that matches the workflow, integration, or reference surface you need, then follow its setup and verification guidance.
+
+## Frontend pages
+- [Frontend Application](/docs/frontend/application) - The frontend page explains the user-facing application, navigation shell, and interface workflows readers actually interact with.
diff --git a/apps/docs/app/docs/installation/page.mdx b/apps/docs/app/docs/installation/page.mdx
new file mode 100644
index 0000000..0176d55
--- /dev/null
+++ b/apps/docs/app/docs/installation/page.mdx
@@ -0,0 +1,41 @@
+---
+title: "Installation"
+description: "Install and configure Better-Auth UI."
+order: 20
+---
+
+# Installation
+
+Install the project dependencies first, then run the command or package entrypoint that proves Better-Auth UI is usable in this repository.
+
+## Install, configure, verify
+Installation has two jobs: install the package dependencies and verify the command or package entrypoint that exercises the main workflow.
+
+## Runtime inputs
+- Dependencies provide the framework, CLI, adapters, and runtime libraries used by the project.
+
+- Scripts provide repeatable entrypoints for local development, production builds, tests, and release tasks.
+
+## Verify setup
+- Dependencies install with the package manager already used by the project.
+
+- The primary command starts, builds, or verifies the project without needing undocumented manual steps.
+
+## Install Dependencies
+Run `pnpm install` from the project root.
+
+## Review Runtime Configuration
+Review the project files and scripts before running the project.
+
+No reader-facing environment contract was found in README or example environment files.
+
+## Run the project
+Use `pnpm dev` as the first local command for this repository.
+
+## Runtime coverage
+- Next.js
+
+## Repository scripts
+- `dev`: `next dev` starts the local development workflow.
+- `build`: `next build` creates the production build or compiled package artifacts.
+- `start`: `next start` starts the runtime entrypoint after dependencies or build output are ready.
diff --git a/apps/docs/app/docs/page.mdx b/apps/docs/app/docs/page.mdx
new file mode 100644
index 0000000..3fbbcd6
--- /dev/null
+++ b/apps/docs/app/docs/page.mdx
@@ -0,0 +1,17 @@
+---
+title: "Better-Auth UI"
+description: "Overview for Better-Auth UI."
+order: 0
+---
+
+# Better-Auth UI
+
+Better-Auth UI is a beautiful and compatible user interface designed to enhance the authentication experience in your applications using Better Auth as your authentication library , providing you a set of pre-built UI components that you can easily copy and paste to kickstart your project.
+
+Better-Auth UI is a beautiful and compatible user interface designed to enhance the authentication experience in your applications using Better Auth as your authentication library , providing you a set of pre-built UI components that you can easily copy and paste to kickstart your project.
+
+New here? Jump to the [quickstart](/docs/quickstart) for a minimal working example, or [installation](/docs/installation) for setup details.
+
+## What's in these docs
+**[Features](/docs/features)** — Feature guides for the main user-facing workflows.
+**[Frontend](/docs/frontend)** — User-facing application structure, navigation, and interface behavior.
diff --git a/apps/docs/app/docs/quickstart/page.mdx b/apps/docs/app/docs/quickstart/page.mdx
new file mode 100644
index 0000000..83b84db
--- /dev/null
+++ b/apps/docs/app/docs/quickstart/page.mdx
@@ -0,0 +1,31 @@
+---
+title: "Quickstart"
+description: "Run Better-Auth UI with the current scripts and configuration."
+order: 10
+---
+
+# Quickstart
+
+Use this quickstart to move from a fresh checkout to the first workflow that proves Better-Auth UI is installed and usable.
+
+## Prerequisites
+This project uses `pnpm` as its package manager.
+The repository does not publish a first-run environment checklist, so begin with the package scripts and add provider keys only when a workflow asks for them.
+
+## Run locally
+1. Install dependencies with `pnpm install`.
+2. Run `pnpm dev` to exercise the main workflow.
+
+## Repository scripts
+These commands are useful after the first run because they are the repeatable workflows available in the project.
+
+- `dev`: `next dev` starts the local development workflow.
+- `build`: `next build` creates the production build or compiled package artifacts.
+- `start`: `next start` starts the runtime entrypoint after dependencies or build output are ready.
+
+## Next steps
+- [Features](/docs/features) - Feature guides for the main user-facing workflows.
+- [Integration](/docs/features/readme-feature-integration) - Easy integration with the Better-Auth authentication library.
+- [UI Components](/docs/features/readme-feature-ui-components) - Beautiful and responsive UI components.
+- [Frontend](/docs/frontend) - User-facing application structure, navigation, and interface behavior.
+- [Frontend Application](/docs/frontend/application) - The frontend page explains the user-facing application, navigation shell, and interface workflows readers actually interact with.
diff --git a/apps/docs/app/global.css b/apps/docs/app/global.css
new file mode 100644
index 0000000..3c489ba
--- /dev/null
+++ b/apps/docs/app/global.css
@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "@farming-labs/theme/colorful/css";
diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
new file mode 100644
index 0000000..8a31ca5
--- /dev/null
+++ b/apps/docs/app/layout.tsx
@@ -0,0 +1,33 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import { RootProvider } from "@farming-labs/theme";
+import docsConfig from "../docs.config";
+import "./global.css";
+
+const geistSans = Geist({
+ variable: "--fd-font-sans",
+ subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+ variable: "--fd-font-mono",
+ subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+ title: {
+ default: "Docs",
+ template: docsConfig.metadata?.titleTemplate ?? "%s",
+ },
+ description: docsConfig.metadata?.description,
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+ {children}
+
+
+ );
+}
diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx
new file mode 100644
index 0000000..f0593ea
--- /dev/null
+++ b/apps/docs/app/page.tsx
@@ -0,0 +1,14 @@
+import Link from "next/link";
+
+const title = "Better-Auth UI";
+const description = "Better-Auth UI is a beautiful and compatible user interface designed to enhance the authentication experience in your applications using Better Auth as your authentication library , providing you a set of pre-built UI components that you can easily copy and paste to kickstart your project.";
+
+export default function HomePage() {
+ return (
+
+