diff --git a/app/_components/integration-card.tsx b/app/_components/integration-card.tsx
index 4e758eddc..b87e6cad1 100644
--- a/app/_components/integration-card.tsx
+++ b/app/_components/integration-card.tsx
@@ -2,6 +2,7 @@
 import { Card, CardContent } from "@arcadeai/design-system";
 import { cn } from "@arcadeai/design-system/lib/utils";
 import type { LucideIcon } from "lucide-react";
+import { usePostHog } from "posthog-js/react";
 
 type IntegrationCardProps = {
   id: string;
@@ -13,12 +14,24 @@ type IntegrationCardProps = {
 };
 
 export function IntegrationCard({
+  id,
   icon: Icon,
   title,
   description,
   isActive = false,
   onClick,
 }: IntegrationCardProps) {
+  const posthog = usePostHog();
+
+  const handleClick = () => {
+    posthog?.capture("integration_card_clicked", {
+      integration_id: id,
+      integration_title: title,
+      is_active: isActive,
+    });
+    onClick();
+  };
+
   return (
     <Card
       className={cn(
@@ -27,7 +40,7 @@ export function IntegrationCard({
           ? "border-primary/50 bg-primary/5"
           : "border-zinc-800 bg-zinc-900/50 hover:bg-zinc-900"
       )}
-      onClick={onClick}
+      onClick={handleClick}
     >
       <div
         className={cn(
diff --git a/app/_components/posthog.tsx b/app/_components/posthog.tsx
index 0c4145a46..9a27c6e08 100644
--- a/app/_components/posthog.tsx
+++ b/app/_components/posthog.tsx
@@ -16,12 +16,19 @@ export const PostHog = ({ children }: { children: React.ReactNode }) => {
           process.env.NEXT_PUBLIC_POSTHOG_HOST || "https://us.i.posthog.com",
         ui_host:
           process.env.NEXT_PUBLIC_POSTHOG_UI_HOST || "https://us.posthog.com",
-        disable_session_recording: true,
+        // Enable session recording for user behavior analysis
+        disable_session_recording: false,
+        session_recording: {
+          maskAllInputs: true, // Privacy: mask sensitive input fields
+          blockClass: "ph-no-capture", // Allow opting out specific elements
+          recordCrossOriginIframes: false, // Don't record third-party iframes
+        },
+        // Enable heatmaps for click tracking
+        enable_heatmaps: true,
+        // Enable surveys for CSAT feedback
+        disable_surveys: false,
         loaded: (posthogInstance) => {
-          if (
-            process.env.NODE_ENV === "development" ||
-            process.env.NEXT_PUBLIC_POSTHOG_DEBUG
-          ) {
+          if (process.env.NEXT_PUBLIC_POSTHOG_DEBUG === "true") {
             posthogInstance.debug();
           }
         },
diff --git a/app/_components/quick-start-card.tsx b/app/_components/quick-start-card.tsx
index 38b7b0056..f172444a7 100644
--- a/app/_components/quick-start-card.tsx
+++ b/app/_components/quick-start-card.tsx
@@ -7,6 +7,7 @@ import {
 } from "@arcadeai/design-system";
 import { motion } from "motion/react";
 import Link from "next/link";
+import { usePostHog } from "posthog-js/react";
 
 type QuickStartCardProps = {
   icon: React.ElementType;
@@ -25,6 +26,16 @@ export function QuickStartCard({
   onClick,
   code,
 }: QuickStartCardProps) {
+  const posthog = usePostHog();
+
+  const handleCardClick = () => {
+    posthog?.capture("quickstart_card_clicked", {
+      card_title: title,
+      card_href: href || null,
+      has_custom_onclick: !!onClick,
+    });
+  };
+
   const content = (
     <>
       <CardHeader className="flex flex-row items-center gap-3 p-6">
@@ -48,12 +59,17 @@ export function QuickStartCard({
     </>
   );
 
+  const handleClick = () => {
+    handleCardClick();
+    onClick?.();
+  };
+
   let wrapper: React.ReactElement | null = null;
   if (onClick) {
     wrapper = (
       <button
         className="block h-full w-full text-left"
-        onClick={onClick}
+        onClick={handleClick}
         type="button"
       >
         {content}
@@ -61,7 +77,7 @@ export function QuickStartCard({
     );
   } else if (href) {
     wrapper = (
-      <Link className="block h-full" href={href}>
+      <Link className="block h-full" href={href} onClick={handleCardClick}>
         {content}
       </Link>
     );
diff --git a/app/_components/sample-app-card.tsx b/app/_components/sample-app-card.tsx
index dec65c074..ab4dffb8e 100644
--- a/app/_components/sample-app-card.tsx
+++ b/app/_components/sample-app-card.tsx
@@ -1,6 +1,7 @@
 "use client";
 import { Card, CardContent } from "@arcadeai/design-system";
 import Link from "next/link";
+import { usePostHog } from "posthog-js/react";
 
 type SampleAppCardProps = {
   title: string;
@@ -21,8 +22,23 @@ export function SampleAppCard({
   tags = [],
   date,
 }: SampleAppCardProps) {
+  const posthog = usePostHog();
+
+  const handleClick = () => {
+    posthog?.capture("sample_app_clicked", {
+      app_title: title,
+      app_href: href,
+      tags,
+      opens_in_new_tab: blank,
+    });
+  };
+
   return (
-    <Link href={href} target={blank ? "_blank" : undefined}>
+    <Link
+      href={href}
+      onClick={handleClick}
+      target={blank ? "_blank" : undefined}
+    >
       <Card className="flex h-full flex-col gap-1.5 border border-gray-600/20 bg-white/90 py-3 backdrop-blur-sm transition-all duration-300 hover:border-primary hover:bg-gray-600/[0.03] hover:shadow-lg dark:bg-gray-900/80">
         <CardContent className="p-0">
           <div className="space-y-2 p-6">
diff --git a/app/_components/scope-picker.tsx b/app/_components/scope-picker.tsx
index cdfebad7e..5909dc2e6 100644
--- a/app/_components/scope-picker.tsx
+++ b/app/_components/scope-picker.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { usePostHog } from "posthog-js/react";
 import { useState } from "react";
 
 type Tool = {
@@ -13,23 +14,45 @@ type ScopePickerProps = {
 
 export default function ScopePicker({ tools }: ScopePickerProps) {
   const [selectedTools, setSelectedTools] = useState<Set<string>>(new Set());
+  const posthog = usePostHog();
+
+  const trackScopeCalculatorUsed = (
+    action: string,
+    toolName: string | undefined,
+    newSelectedCount: number
+  ) => {
+    posthog?.capture("scope_calculator_used", {
+      action,
+      tool_name: toolName || null,
+      selected_tools_count: newSelectedCount,
+      total_tools_available: tools.length,
+    });
+  };
 
   const toggleTool = (toolName: string) => {
     const newSelected = new Set(selectedTools);
+    const isSelecting = !newSelected.has(toolName);
     if (newSelected.has(toolName)) {
       newSelected.delete(toolName);
     } else {
       newSelected.add(toolName);
     }
     setSelectedTools(newSelected);
+    trackScopeCalculatorUsed(
+      isSelecting ? "tool_selected" : "tool_deselected",
+      toolName,
+      newSelected.size
+    );
   };
 
   const selectAll = () => {
     setSelectedTools(new Set(tools.map((t) => t.name)));
+    trackScopeCalculatorUsed("select_all", undefined, tools.length);
   };
 
   const clearAll = () => {
     setSelectedTools(new Set());
+    trackScopeCalculatorUsed("clear_all", undefined, 0);
   };
 
   // Get unique scopes from selected tools
diff --git a/app/_components/tabbed-code-block.tsx b/app/_components/tabbed-code-block.tsx
index 14181d518..c997830b4 100644
--- a/app/_components/tabbed-code-block.tsx
+++ b/app/_components/tabbed-code-block.tsx
@@ -1,6 +1,7 @@
 "use client";
 import { Button } from "@arcadeai/design-system";
 import { ChevronDown } from "lucide-react";
+import { usePostHog } from "posthog-js/react";
 import React, { useMemo, useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import {
@@ -27,6 +28,7 @@ const CodeTabSwitcher = ({ tabs }: CodeTabSwitcherProps) => {
   const [activeTab, setActiveTab] = useState(0);
   const [selectedLanguage, setSelectedLanguage] = useState("Python");
   const [isDarkMode, setIsDarkMode] = useState(false);
+  const posthog = usePostHog();
 
   // Effect to monitor theme changes
   React.useEffect(() => {
@@ -104,11 +106,19 @@ const CodeTabSwitcher = ({ tabs }: CodeTabSwitcherProps) => {
     fileName
   );
 
+  const handleExpandExample = () => {
+    setIsExpanded(true);
+    posthog?.capture("code_example_expanded", {
+      tab_count: tabs.length,
+      initial_language: selectedLanguage,
+    });
+  };
+
   if (!isExpanded) {
     return (
       <Button
         className="mt-2"
-        onClick={() => setIsExpanded(true)}
+        onClick={handleExpandExample}
         size="sm"
         variant="outline"
       >
diff --git a/app/_components/tabbed-code-block/copy-button.tsx b/app/_components/tabbed-code-block/copy-button.tsx
index 8115f53c1..30ca98a8a 100644
--- a/app/_components/tabbed-code-block/copy-button.tsx
+++ b/app/_components/tabbed-code-block/copy-button.tsx
@@ -1,6 +1,7 @@
 "use client";
 import { Button } from "@arcadeai/design-system";
 import { Check, Copy } from "lucide-react";
+import { usePostHog } from "posthog-js/react";
 import { useCallback, useState } from "react";
 
 const COPY_TIMEOUT_MS = 1500;
@@ -13,6 +14,7 @@ export function CopyButton({
   disabled: boolean;
 }) {
   const [copied, setCopied] = useState(false);
+  const posthog = usePostHog();
 
   const handleCopy = useCallback(async () => {
     if (!content) {
@@ -22,10 +24,16 @@ export function CopyButton({
       await navigator.clipboard.writeText(content);
       setCopied(true);
       setTimeout(() => setCopied(false), COPY_TIMEOUT_MS);
+
+      // Track code copy event
+      posthog?.capture("code_copied", {
+        content_length: content.length,
+        content_preview: content.substring(0, 100),
+      });
     } catch {
       // Silent fail
     }
-  }, [content]);
+  }, [content, posthog]);
 
   return (
     <Button
diff --git a/app/en/get-started/quickstarts/call-tool-agent/page.mdx b/app/en/get-started/quickstarts/call-tool-agent/page.mdx
index aba0cc092..84f313f51 100644
--- a/app/en/get-started/quickstarts/call-tool-agent/page.mdx
+++ b/app/en/get-started/quickstarts/call-tool-agent/page.mdx
@@ -376,7 +376,7 @@ console.log(respose_send_email.output?.value);
 
 ## Next Steps
 
-In this simple example, we call the tool methods directly. In your real applications and agents, you'll likely be letting the LLM decide which tools to call. Learn more about using Arcade with Frameworks in the [Frameworks](/guides/agent-frameworks/langchain/python section, or [how to build your own tools](/guides/create-tools/tool-basics/build-mcp-server).
+In this simple example, we call the tool methods directly. In your real applications and agents, you'll likely be letting the LLM decide which tools to call. Learn more about using Arcade with Frameworks in the [Frameworks](/guides/agent-frameworks) section, or [how to build your own tools](/guides/create-tools/tool-basics/build-mcp-server).
 
 ## Example Code
 
diff --git a/app/en/get-started/quickstarts/call-tool-client/page.mdx b/app/en/get-started/quickstarts/call-tool-client/page.mdx
index c4d2242ab..d96a97501 100644
--- a/app/en/get-started/quickstarts/call-tool-client/page.mdx
+++ b/app/en/get-started/quickstarts/call-tool-client/page.mdx
@@ -205,6 +205,6 @@ As you interact with the agent, it will call the tools from the MCP Gateway. You
 
 - Learn more about [MCP Gateways](/guides/create-tools/mcp-gateways).
 - Learn how to use MCP Gateways with:
-  - [Cursor](/guides/tool-calling/mcp-clients/visual-studio-code)
+  - [Cursor](/guides/tool-calling/mcp-clients/cursor)
   - [Visual Studio Code](/guides/tool-calling/mcp-clients/visual-studio-code)
 - Build your own MCP servers with [arcade-mcp](/get-started/quickstarts/mcp-server-quickstart).
diff --git a/app/en/guides/deployment-hosting/on-prem/page.mdx b/app/en/guides/deployment-hosting/on-prem/page.mdx
index f4ea89637..db008fbbd 100644
--- a/app/en/guides/deployment-hosting/on-prem/page.mdx
+++ b/app/en/guides/deployment-hosting/on-prem/page.mdx
@@ -285,8 +285,8 @@ You can now test your MCP Server by making requests using the Playground, or an
 
 1. Use an app that supports MCP clients, like AI assistants and IDEs:
    - [Visual Studio Code](/guides/tool-calling/mcp-clients/visual-studio-code)
-   - [Claude Desktop](/guides/tool-calling/mcp-clients/visual-studio-code)
-   - [Cursor](/guides/tool-calling/mcp-clients/visual-studio-code)
+   - [Claude Desktop](/guides/tool-calling/mcp-clients/claude-desktop)
+   - [Cursor](/guides/tool-calling/mcp-clients/cursor)
 1. Enable your MCP Server from the list of available MCP Servers
 1. Verify that the response is correct and you see request logs in your MCP Server
 
diff --git a/app/en/home/landing-page.tsx b/app/en/home/landing-page.tsx
index 38f35588b..780070a65 100644
--- a/app/en/home/landing-page.tsx
+++ b/app/en/home/landing-page.tsx
@@ -17,6 +17,7 @@ import {
 import { motion } from "motion/react";
 import Image from "next/image";
 import Link from "next/link";
+import { usePostHog } from "posthog-js/react";
 // import { ChallengeSolution } from "./ChallengeSolution";
 import { QuickStartCard } from "../../_components/quick-start-card";
 import { SampleAppCard } from "../../_components/sample-app-card";
@@ -35,6 +36,16 @@ const ANIMATION_DELAYS = {
 } as const;
 
 export function LandingPage() {
+  const posthog = usePostHog();
+
+  const trackHeroClick =
+    (eventName: string) => (e: React.MouseEvent<HTMLAnchorElement>) => {
+      posthog?.capture(eventName, {
+        button_location: "landing_page_hero",
+        destination: e.currentTarget.getAttribute("href"),
+      });
+    };
+
   return (
     <div>
       <section className="relative isolate px-6 lg:px-8">
@@ -108,7 +119,10 @@ export function LandingPage() {
               className="h-12 bg-primary px-6 text-white hover:bg-primary/90"
               size="lg"
             >
-              <Link href="/get-started/quickstarts/call-tool-agent">
+              <Link
+                href="/get-started/quickstarts/call-tool-agent"
+                onClick={trackHeroClick("get_started_clicked")}
+              >
                 <Rocket className="mr-2 h-5 w-5" />
                 Get Started
               </Link>
@@ -119,7 +133,10 @@ export function LandingPage() {
               size="lg"
               variant="outline"
             >
-              <Link href="/guides/create-tools/tool-basics/build-mcp-server">
+              <Link
+                href="/guides/create-tools/tool-basics/build-mcp-server"
+                onClick={trackHeroClick("build_tool_clicked")}
+              >
                 <Wrench className="mr-2 h-5 w-5" />
                 Build a tool
               </Link>
diff --git a/app/en/references/auth-providers/airtable/page.mdx b/app/en/references/auth-providers/airtable/page.mdx
index 8470822e9..a72ed9268 100644
--- a/app/en/references/auth-providers/airtable/page.mdx
+++ b/app/en/references/auth-providers/airtable/page.mdx
@@ -5,9 +5,9 @@ import { Tabs, Callout, Steps } from "nextra/components";
 The Airtable auth provider enables tools and agents to call [Airtable APIs](https://airtable.com/developers/web/api/introduction) on behalf of a user using OAuth 2.0 authentication.
 
 <Callout>
-  Want to quickly get started with Airtable in your agent or AI app? The pre-built
-  [Arcade Airtable MCP Server](/resources/integrations/productivity/airtable-api) is what you
-  want!
+  Want to quickly get started with Airtable in your agent or AI app? The
+  pre-built [Arcade Airtable MCP
+  Server](/resources/integrations/productivity/airtable-api) is what you want!
 </Callout>
 
 ### What's documented here
@@ -115,7 +115,7 @@ Hit the **Create** button and the provider will be ready to be used.
 
 <Callout type="info">
   This method is only available when you are [self-hosting the
-  engine](/guides/deployment-hosting/on-prem
+  engine](/guides/deployment-hosting/on-prem)
 </Callout>
 
 <Steps>
@@ -224,11 +224,11 @@ const client = new Arcade();
 const userId = "{arcade_user_id}";
 
 // Start the authorization process
-const authResponse = await client.auth.start(
-  userId,
-  "arcade-airtable",
-  ["data.records:read", "data.records:write", "schema.bases:read"]
-);
+const authResponse = await client.auth.start(userId, "arcade-airtable", [
+  "data.records:read",
+  "data.records:write",
+  "schema.bases:read",
+]);
 
 if (authResponse.status !== "completed") {
   console.log("Please complete the authorization challenge in your browser:");
@@ -299,4 +299,3 @@ Airtable supports various OAuth scopes that determine the level of access your a
 - `user.email:read` - Read user email address
 
 For a complete list of available scopes, refer to the [Airtable Scopes documentation](https://airtable.com/developers/web/api/scopes).
-
diff --git a/app/en/references/auth-providers/calendly/page.mdx b/app/en/references/auth-providers/calendly/page.mdx
index 642d44dce..22ca7fc01 100644
--- a/app/en/references/auth-providers/calendly/page.mdx
+++ b/app/en/references/auth-providers/calendly/page.mdx
@@ -6,8 +6,8 @@ The Calendly auth provider enables tools and agents to call [Calendly APIs](http
 
 <Callout>
   Want to quickly get started with Calendly in your agent or AI app? The
-  pre-built [Arcade Calendly MCP Server](/resources/integrations/productivity/calendly-api)
-  is what you want!
+  pre-built [Arcade Calendly MCP
+  Server](/resources/integrations/productivity/calendly-api) is what you want!
 </Callout>
 
 ### What's documented here
@@ -111,7 +111,7 @@ Hit the **Create** button and the provider will be ready to be used.
 
 <Callout type="info">
   This method is only available when you are [self-hosting the
-  engine](/guides/deployment-hosting/on-prem
+  engine](/guides/deployment-hosting/on-prem)
 </Callout>
 
 <Steps>
diff --git a/app/en/resources/contact-us/contact-cards.tsx b/app/en/resources/contact-us/contact-cards.tsx
index ccbda6d2e..0c8023949 100644
--- a/app/en/resources/contact-us/contact-cards.tsx
+++ b/app/en/resources/contact-us/contact-cards.tsx
@@ -7,12 +7,14 @@ import {
   Github,
 } from "@arcadeai/design-system";
 import { HeartPulse, Mail, Shield, Users } from "lucide-react";
+import { usePostHog } from "posthog-js/react";
 import { useEffect, useRef, useState } from "react";
 import { QuickStartCard } from "../../../_components/quick-start-card";
 
 export function ContactCards() {
   const [isSalesModalOpen, setIsSalesModalOpen] = useState(false);
   const scriptLoadedRef = useRef(false);
+  const posthog = usePostHog();
 
   useEffect(() => {
     // Load HubSpot script once
@@ -25,6 +27,13 @@ export function ContactCards() {
     }
   }, []);
 
+  const handleContactSalesClick = () => {
+    posthog?.capture("contact_sales_modal_opened", {
+      source: "contact_us_page",
+    });
+    setIsSalesModalOpen(true);
+  };
+
   return (
     <>
       <div className="mt-16 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
@@ -37,7 +46,7 @@ export function ContactCards() {
         <QuickStartCard
           description="Discuss enterprise plans, pricing, and how Arcade can help your organization build better, safer agents."
           icon={Users}
-          onClick={() => setIsSalesModalOpen(true)}
+          onClick={handleContactSalesClick}
           title="Contact Sales"
         />
         <QuickStartCard
diff --git a/app/en/resources/integrations/components/tool-card.tsx b/app/en/resources/integrations/components/tool-card.tsx
index bf04199e2..18d37ff65 100644
--- a/app/en/resources/integrations/components/tool-card.tsx
+++ b/app/en/resources/integrations/components/tool-card.tsx
@@ -10,6 +10,7 @@ import {
 } from "@arcadeai/design-system";
 import { cn } from "@arcadeai/design-system/lib/utils";
 import Link from "next/link";
+import { usePostHog } from "posthog-js/react";
 import type React from "react";
 import { useState } from "react";
 import { ComingSoonModal } from "./coming-soon-modal";
@@ -35,6 +36,7 @@ export const ToolCard: React.FC<ToolCardProps> = ({
   isPro = false,
 }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const posthog = usePostHog();
   const {
     className,
     label,
@@ -43,7 +45,19 @@ export const ToolCard: React.FC<ToolCardProps> = ({
   } = TOOL_CARD_TYPE_CONFIG[type];
   const showHeaderBadges = isByoc || isPro || isComingSoon;
 
+  const trackToolCardClick = () => {
+    posthog?.capture("tool_card_clicked", {
+      tool_name: toolName,
+      tool_type: type,
+      tool_link: link,
+      is_coming_soon: isComingSoon,
+      is_byoc: isByoc,
+      is_pro: isPro,
+    });
+  };
+
   const handleCardClick = (e: React.MouseEvent | React.KeyboardEvent) => {
+    trackToolCardClick();
     if (isComingSoon) {
       e.preventDefault();
       setIsModalOpen(true);
@@ -123,7 +137,9 @@ export const ToolCard: React.FC<ToolCardProps> = ({
           {cardContent}
         </button>
       ) : (
-        <Link href={link}>{cardContent}</Link>
+        <Link href={link} onClick={trackToolCardClick}>
+          {cardContent}
+        </Link>
       )}
 
       {isComingSoon && (