diff --git a/client/__tests__/CreateFormIntegration.test.tsx b/client/__tests__/CreateFormIntegration.test.tsx
index bada14c..3fce980 100644
--- a/client/__tests__/CreateFormIntegration.test.tsx
+++ b/client/__tests__/CreateFormIntegration.test.tsx
@@ -144,7 +144,11 @@ const CreateFormLogic = () => {
 };
 
 describe("Create Form Integration", () => {
-	const user = userEvent.setup();
+	let user: ReturnType<typeof userEvent.setup>;
+
+	beforeEach(() => {
+		user = userEvent.setup();
+	});
 
 	it("validates complete form correctly", async () => {
 		render(<CreateFormLogic />);
diff --git a/client/__tests__/MetadataParser.test.tsx b/client/__tests__/MetadataParser.test.tsx
index c456aa8..9fe41d9 100644
--- a/client/__tests__/MetadataParser.test.tsx
+++ b/client/__tests__/MetadataParser.test.tsx
@@ -74,13 +74,15 @@ describe("parseMetadata", () => {
 
 		render(<MetadataTest metadata={metadata} />);
 		expect(screen.getByTestId("name")).toHaveTextContent("My Special Jar");
-		expect(screen.getByTestId("description")).toHaveTextContent(
-			"A detailed description",
-		);
-		expect(screen.getByTestId("image")).toHaveAttribute(
-			"src",
-			"https://example.com/image.png",
-		);
+			expect(screen.getByTestId("description")).toHaveTextContent(
+				"A detailed description",
+			);
+			expect(screen.getByTestId("image")).toHaveAttribute(
+				"src",
+				expect.stringContaining(
+					encodeURIComponent("https://example.com/image.png"),
+				),
+			);
 		expect(screen.getByTestId("link")).toHaveAttribute(
 			"href",
 			"https://example.com/project",
@@ -96,11 +98,13 @@ describe("parseMetadata", () => {
 
 		render(<MetadataTest metadata={metadata} />);
 		expect(screen.getByTestId("name")).toHaveTextContent("Partial Jar");
-		expect(screen.getByTestId("description")).toHaveTextContent(metadata); // fallback to raw string
-		expect(screen.getByTestId("image")).toHaveAttribute(
-			"src",
-			"https://example.com/image.png",
-		);
+			expect(screen.getByTestId("description")).toHaveTextContent(metadata); // fallback to raw string
+			expect(screen.getByTestId("image")).toHaveAttribute(
+				"src",
+				expect.stringContaining(
+					encodeURIComponent("https://example.com/image.png"),
+				),
+			);
 		expect(screen.getByTestId("link")).toHaveAttribute("href", "");
 	});
 
@@ -150,13 +154,15 @@ describe("parseMetadata", () => {
 
 		render(<MetadataTest metadata={metadata} />);
 		expect(screen.getByTestId("name")).toHaveTextContent("Complete Jar");
-		expect(screen.getByTestId("description")).toHaveTextContent(
-			"Full description",
-		);
-		expect(screen.getByTestId("image")).toHaveAttribute(
-			"src",
-			"https://example.com/complete.png",
-		);
+			expect(screen.getByTestId("description")).toHaveTextContent(
+				"Full description",
+			);
+			expect(screen.getByTestId("image")).toHaveAttribute(
+				"src",
+				expect.stringContaining(
+					encodeURIComponent("https://example.com/complete.png"),
+				),
+			);
 		expect(screen.getByTestId("link")).toHaveAttribute(
 			"href",
 			"https://complete-project.com",
diff --git a/client/__tests__/hooks/jar/createV2CreateArgs.test.ts b/client/__tests__/hooks/jar/createV2CreateArgs.test.ts
new file mode 100644
index 0000000..8a49ccf
--- /dev/null
+++ b/client/__tests__/hooks/jar/createV2CreateArgs.test.ts
@@ -0,0 +1,213 @@
+import { decodeFunctionData, encodeFunctionData } from "viem";
+import { describe, expect, it, vi } from "vitest";
+import { cookieJarFactoryAbi } from "@/generated";
+import {
+	FACTORY_DEFAULT_FEE_SENTINEL,
+	buildV2CreateCookieJarArgs,
+	getFeePercentageOnDeposit,
+} from "@/hooks/jar/createV2CreateArgs";
+import { ETH_ADDRESS, HATS_PROTOCOL_ADDRESS, POAP_TOKEN_ADDRESS } from "@/lib/blockchain/constants";
+
+vi.mock("@/hooks/jar/schemas/jarCreationSchema", () => ({
+	AccessType: {
+		Allowlist: 0,
+		NFTGated: 1,
+		POAP: 2,
+		Unlock: 3,
+		Hypercert: 4,
+		Hats: 5,
+	},
+	NFTType: {
+		None: 0,
+		ERC721: 1,
+		ERC1155: 2,
+	},
+}));
+
+const AccessType = {
+	Allowlist: 0,
+	NFTGated: 1,
+	POAP: 2,
+	Unlock: 3,
+	Hypercert: 4,
+	Hats: 5,
+} as const;
+
+const NFTType = {
+	None: 0,
+	ERC721: 1,
+	ERC1155: 2,
+} as const;
+
+type JarCreationFormData = Parameters<typeof buildV2CreateCookieJarArgs>[0]["values"];
+type ProtocolConfig = JarCreationFormData["protocolConfig"];
+
+type MakeValuesOverrides = Partial<Omit<JarCreationFormData, "protocolConfig">> & {
+	protocolConfig?: Partial<ProtocolConfig>;
+};
+
+function makeValues(overrides: MakeValuesOverrides = {}): JarCreationFormData {
+	const baseValues: JarCreationFormData = {
+		jarName: "Test Jar",
+		jarOwnerAddress: "0x1234567890123456789012345678901234567890",
+		supportedCurrency: ETH_ADDRESS,
+		metadata: "Test metadata",
+		imageUrl: "",
+		externalLink: "",
+		showCustomCurrency: false,
+		customCurrencyAddress: "",
+		withdrawalOption: 0,
+		fixedAmount: "1",
+		maxWithdrawal: "2",
+		withdrawalInterval: "7",
+		strictPurpose: true,
+		emergencyWithdrawalEnabled: true,
+		oneTimeWithdrawal: false,
+		accessType: AccessType.Allowlist,
+		nftAddresses: [] as string[],
+		nftTypes: [] as number[],
+		protocolConfig: { accessType: "Allowlist" },
+		enableCustomFee: false,
+		customFee: "",
+		streamingEnabled: false,
+		requireStreamApproval: true,
+		maxStreamRate: "1.0",
+		minStreamDuration: "1",
+		autoSwapEnabled: false,
+	};
+
+	return {
+		...baseValues,
+		...overrides,
+		protocolConfig: {
+			...baseValues.protocolConfig,
+			...overrides.protocolConfig,
+		},
+	};
+}
+
+describe("buildV2CreateCookieJarArgs", () => {
+	it("encodes createCookieJar args compatible with current factory ABI", () => {
+		const args = buildV2CreateCookieJarArgs({
+			values: makeValues(),
+			metadata: "metadata",
+			parseAmount: (amount) => BigInt(Math.floor(Number.parseFloat(amount) * 1e18)),
+		});
+
+		const data = encodeFunctionData({
+			abi: cookieJarFactoryAbi,
+			functionName: "createCookieJar",
+			args,
+		});
+		expect(data.startsWith("0x")).toBe(true);
+
+		const decoded = decodeFunctionData({
+			abi: cookieJarFactoryAbi,
+			data,
+		});
+		expect(decoded.functionName).toBe("createCookieJar");
+		expect(decoded.args?.length).toBe(3);
+	});
+
+	it("uses default fee sentinel when custom fee is disabled", () => {
+		const fee = getFeePercentageOnDeposit(makeValues({ enableCustomFee: false }));
+		expect(fee).toBe(FACTORY_DEFAULT_FEE_SENTINEL);
+	});
+
+	it("uses explicit custom fee when provided", () => {
+		const fee = getFeePercentageOnDeposit(
+			makeValues({ enableCustomFee: true, customFee: "2.5" }),
+		);
+		expect(fee).toBe(250n);
+	});
+
+	it("supports explicit zero-percent fee", () => {
+		const fee = getFeePercentageOnDeposit(
+			makeValues({ enableCustomFee: true, customFee: "0" }),
+		);
+		expect(fee).toBe(0n);
+	});
+
+	it("maps NFT ERC721 access to contract enum ERC721", () => {
+		const [jarConfig, accessConfig] = buildV2CreateCookieJarArgs({
+			values: makeValues({
+				accessType: AccessType.NFTGated,
+				nftAddresses: ["0x1111111111111111111111111111111111111111"],
+				nftTypes: [NFTType.ERC721],
+			}),
+			metadata: "metadata",
+			parseAmount: () => 1n,
+		});
+		expect(jarConfig.accessType).toBe(1);
+		expect(accessConfig.nftRequirement.nftContract).toBe(
+			"0x1111111111111111111111111111111111111111",
+		);
+	});
+
+	it("maps NFT ERC1155 access to contract enum ERC1155", () => {
+		const [jarConfig] = buildV2CreateCookieJarArgs({
+			values: makeValues({
+				accessType: AccessType.NFTGated,
+				nftAddresses: ["0x1111111111111111111111111111111111111111"],
+				nftTypes: [NFTType.ERC1155],
+			}),
+			metadata: "metadata",
+			parseAmount: () => 1n,
+		});
+		expect(jarConfig.accessType).toBe(2);
+	});
+
+	it("maps POAP, Unlock, Hypercert, and Hats to supported contract enum domain", () => {
+		const [poapJar, poapAccess] = buildV2CreateCookieJarArgs({
+			values: makeValues({
+				accessType: AccessType.POAP,
+				protocolConfig: { accessType: "POAP", eventId: "1234" },
+			}),
+			metadata: "metadata",
+			parseAmount: () => 1n,
+		});
+		expect(poapJar.accessType).toBe(1);
+		expect(poapAccess.nftRequirement.nftContract).toBe(POAP_TOKEN_ADDRESS);
+		expect(poapAccess.nftRequirement.tokenId).toBe(1234n);
+		expect(poapAccess.nftRequirement.minBalance).toBe(1n);
+
+		const [unlockJar] = buildV2CreateCookieJarArgs({
+			values: makeValues({
+				accessType: AccessType.Unlock,
+				protocolConfig: {
+					accessType: "Unlock",
+					unlockAddress: "0x2222222222222222222222222222222222222222",
+				},
+			}),
+			metadata: "metadata",
+			parseAmount: () => 1n,
+		});
+		expect(unlockJar.accessType).toBe(1);
+
+		const [hypercertJar] = buildV2CreateCookieJarArgs({
+			values: makeValues({
+				accessType: AccessType.Hypercert,
+				protocolConfig: {
+					accessType: "Hypercert",
+					hypercertAddress: "0x3333333333333333333333333333333333333333",
+					hypercertTokenId: "42",
+					hypercertMinBalance: 5,
+				},
+			}),
+			metadata: "metadata",
+			parseAmount: () => 1n,
+		});
+		expect(hypercertJar.accessType).toBe(2);
+
+		const [hatsJar, hatsAccess] = buildV2CreateCookieJarArgs({
+			values: makeValues({
+				accessType: AccessType.Hats,
+				protocolConfig: { accessType: "Hats", hatsId: 99 },
+			}),
+			metadata: "metadata",
+			parseAmount: () => 1n,
+		});
+		expect(hatsJar.accessType).toBe(2);
+		expect(hatsAccess.nftRequirement.nftContract).toBe(HATS_PROTOCOL_ADDRESS);
+	});
+});
diff --git a/client/__tests__/hooks/useJarCreation.test.ts b/client/__tests__/hooks/useJarCreation.test.ts
index cdae29c..8bcd423 100644
--- a/client/__tests__/hooks/useJarCreation.test.ts
+++ b/client/__tests__/hooks/useJarCreation.test.ts
@@ -18,7 +18,6 @@ vi.mock("@/config/deployments.auto", () => ({
 	},
 }));
 
-import { useJarCreation } from "@/hooks/jar/useJarCreation";
 import { ETH_ADDRESS } from "@/lib/blockchain/constants";
 
 // Mock wagmi hooks
@@ -60,7 +59,7 @@ vi.mock("@/config/supported-networks", () => ({
 }));
 
 // Mock toast
-vi.mock("@/hooks/useToast", () => ({
+vi.mock("@/hooks/app/useToast", () => ({
 	useToast: () => ({
 		toast: vi.fn(),
 	}),
@@ -73,6 +72,12 @@ const describeOrSkip =
 
 describeOrSkip("useJarCreation", () => {
 	let queryClient: QueryClient;
+	let useJarCreation: typeof import("@/hooks/jar/useJarCreation").useJarCreation;
+
+	beforeAll(async () => {
+		const module = await import("@/hooks/jar/useJarCreation");
+		useJarCreation = module.useJarCreation;
+	});
 
 	beforeEach(() => {
 		vi.clearAllMocks();
@@ -85,6 +90,9 @@ describeOrSkip("useJarCreation", () => {
 	});
 
 	const renderHookWithProviders = () => {
+		if (!useJarCreation) {
+			throw new Error("useJarCreation hook not loaded");
+		}
 		return renderHook(() => useJarCreation(), {
 			wrapper: ({ children }: { children: React.ReactNode }) =>
 				React.createElement(
@@ -95,7 +103,7 @@ describeOrSkip("useJarCreation", () => {
 		});
 	};
 
-	describe("🔧 ETH Address Fix", () => {
+	describe("ETH Address Fix", () => {
 		it("should use address(3) for ETH address", () => {
 			const { result } = renderHookWithProviders();
 
@@ -105,11 +113,13 @@ describeOrSkip("useJarCreation", () => {
 		it("should initialize supportedCurrency with correct ETH address", () => {
 			const { result } = renderHookWithProviders();
 
-			expect(result.current.supportedCurrency).toBe(ETH_ADDRESS);
+			expect(result.current.form.getValues("supportedCurrency")).toBe(
+				ETH_ADDRESS,
+			);
 		});
 	});
 
-	describe("🚀 V1 vs V2 Logic", () => {
+	describe("V1 vs V2 Logic", () => {
 		it("should detect v1 contracts correctly", () => {
 			const { result } = renderHookWithProviders();
 
@@ -118,13 +128,13 @@ describeOrSkip("useJarCreation", () => {
 		});
 
 		it("should detect v2 contracts correctly", () => {
-			// Mock the deployments.auto module to return v2 for chain 31337
 			vi.doMock("@/config/deployments.auto", () => ({
 				isV2Chain: vi.fn().mockReturnValue(true),
 				DEPLOYMENTS: {
 					31337: {
 						chainId: 31337,
-						factoryAddress: "0xa2Cc1f3479E194B1aa16BeCc975aA25618f8d3AD",
+						factoryAddress:
+							"0xa2Cc1f3479E194B1aa16BeCc975aA25618f8d3AD",
 						isV2: true,
 						blockNumber: 0,
 						timestamp: 1759019328,
@@ -140,26 +150,28 @@ describeOrSkip("useJarCreation", () => {
 			const { result } = renderHookWithProviders();
 
 			act(() => {
-				result.current.setEnableCustomFee(true);
+				result.current.form.setValue("enableCustomFee", true);
 			});
 
-			// Should automatically disable custom fees for v1 when isV2Contract is false
-			expect(result.current.enableCustomFee).toBe(false);
+			// v1 effect should reset to false
+			expect(result.current.form.getValues("enableCustomFee")).toBe(
+				false,
+			);
 		});
 
 		it("should force allowlist access type for v1 contracts", () => {
 			const { result } = renderHookWithProviders();
 
 			act(() => {
-				result.current.setAccessType(1); // NFTGated
+				result.current.form.setValue("accessType", 1); // NFTGated
 			});
 
-			// Should automatically revert to allowlist for v1
-			expect(result.current.accessType).toBe(0); // Allowlist
+			// v1 effect should reset to Allowlist
+			expect(result.current.form.getValues("accessType")).toBe(0);
 		});
 	});
 
-	describe("📝 Form Validation", () => {
+	describe("Form Validation", () => {
 		it("should validate required jar name", () => {
 			const { result } = renderHookWithProviders();
 
@@ -173,8 +185,8 @@ describeOrSkip("useJarCreation", () => {
 			const { result } = renderHookWithProviders();
 
 			act(() => {
-				result.current.setWithdrawalOption(0); // Fixed
-				result.current.setFixedAmount("0");
+				result.current.form.setValue("withdrawalOption", 0); // Fixed
+				result.current.form.setValue("fixedAmount", "0");
 			});
 
 			const validation = result.current.validateStep2();
@@ -189,7 +201,7 @@ describeOrSkip("useJarCreation", () => {
 			const { result } = renderHookWithProviders();
 
 			act(() => {
-				result.current.setWithdrawalInterval("0");
+				result.current.form.setValue("withdrawalInterval", "0");
 			});
 
 			const validation = result.current.validateStep2();
@@ -204,8 +216,8 @@ describeOrSkip("useJarCreation", () => {
 			const { result } = renderHookWithProviders();
 
 			act(() => {
-				result.current.setEnableCustomFee(true);
-				result.current.setCustomFee("150"); // Over 100%
+				result.current.form.setValue("enableCustomFee", true);
+				result.current.form.setValue("customFee", "150"); // Over 100%
 			});
 
 			const validation = result.current.validateStep4();
@@ -217,50 +229,50 @@ describeOrSkip("useJarCreation", () => {
 		});
 	});
 
-	describe("💱 Currency Handling", () => {
-		it("should handle custom currency selection", () => {
+	describe("Currency Handling", () => {
+		it("should initialize with custom currency hidden", () => {
 			const { result } = renderHookWithProviders();
 
-			act(() => {
-				result.current.handleCurrencyChange("CUSTOM");
-			});
-
-			expect(result.current.showCustomCurrency).toBe(true);
+			expect(result.current.form.getValues("showCustomCurrency")).toBe(
+				false,
+			);
 		});
 
-		it("should validate ERC20 addresses", async () => {
+		it("should allow setting custom currency via form", () => {
 			const { result } = renderHookWithProviders();
 
 			act(() => {
-				result.current.setCustomCurrencyAddress(
+				result.current.form.setValue("showCustomCurrency", true);
+				result.current.form.setValue(
+					"customCurrencyAddress",
 					"0x1234567890123456789012345678901234567890",
 				);
 			});
 
-			await act(async () => {
-				await result.current.handleCustomCurrencySubmit();
-			});
-
-			// Should handle the submission (testing the function executes without throwing)
-			expect(result.current.handleCustomCurrencySubmit).toBeDefined();
+			expect(result.current.form.getValues("showCustomCurrency")).toBe(
+				true,
+			);
+			expect(
+				result.current.form.getValues("customCurrencyAddress"),
+			).toBe("0x1234567890123456789012345678901234567890");
 		});
 	});
 
-	describe("🧹 Form Reset", () => {
+	describe("Form Reset", () => {
 		it("should reset all form fields", () => {
 			const { result } = renderHookWithProviders();
 
 			// Set some values
 			act(() => {
-				result.current.setJarName("Test Jar");
-				result.current.setFixedAmount("0.5");
-				result.current.setEnableCustomFee(true);
+				result.current.form.setValue("jarName", "Test Jar");
+				result.current.form.setValue("fixedAmount", "0.5");
+				result.current.form.setValue("enableCustomFee", true);
 			});
 
 			// Verify values are set
-			expect(result.current.jarName).toBe("Test Jar");
-			expect(result.current.fixedAmount).toBe("0.5");
-			expect(result.current.enableCustomFee).toBe(true);
+			expect(result.current.form.getValues("jarName")).toBe("Test Jar");
+			expect(result.current.form.getValues("fixedAmount")).toBe("0.5");
+			expect(result.current.form.getValues("enableCustomFee")).toBe(true);
 
 			// Reset form
 			act(() => {
@@ -268,31 +280,11 @@ describeOrSkip("useJarCreation", () => {
 			});
 
 			// Verify values are reset
-			expect(result.current.jarName).toBe("");
-			expect(result.current.fixedAmount).toBe("0");
-			expect(result.current.enableCustomFee).toBe(false);
-		});
-	});
-
-	describe("🎲 Development Helpers", () => {
-		beforeEach(() => {
-			vi.stubEnv("NODE_ENV", "development");
-		});
-
-		afterEach(() => {
-			vi.unstubAllEnvs();
-		});
-
-		it("should populate random data in development", () => {
-			const { result } = renderHookWithProviders();
-
-			act(() => {
-				result.current.prepopulateRandomData();
-			});
-
-			// Should have populated some data
-			expect(result.current.jarName).toBeTruthy();
-			expect(result.current.fixedAmount).not.toBe("0");
+			expect(result.current.form.getValues("jarName")).toBe("");
+			expect(result.current.form.getValues("fixedAmount")).toBe("0");
+			expect(result.current.form.getValues("enableCustomFee")).toBe(
+				false,
+			);
 		});
 	});
 });
diff --git a/client/app/create/page.tsx b/client/app/create/page.tsx
index 01d50c4..3767623 100644
--- a/client/app/create/page.tsx
+++ b/client/app/create/page.tsx
@@ -1,17 +1,16 @@
 "use client";
 
 import { lazy, Suspense, useEffect, useState } from "react";
+import { FormProvider } from "react-hook-form";
 import { useAccount, useChainId } from "wagmi";
 import { ProtocolErrorBoundary } from "@/components/app/ProtocolErrorBoundary";
 import { CreateJarForm } from "@/components/create/CreateJarForm";
-// Import extracted components
 import { CreateJarHeader } from "@/components/create/CreateJarHeader";
 import { ProgressIndicator } from "@/components/create/ProgressIndicator";
 import { isV2Chain } from "@/config/supported-networks";
 import { useStepNavigation } from "@/hooks/app/useStepNavigation";
 import { useJarCreation } from "@/hooks/jar/useJarCreation";
 
-// Lazy load heavy components for better bundle splitting
 const StatusCards = lazy(() =>
 	import("@/components/create/StatusCards").then((module) => ({
 		default: module.StatusCards,
@@ -28,29 +27,37 @@ export default function CreateCookieJarForm() {
 	const chainId = useChainId();
 	const isV2Contract = isV2Chain(chainId);
 
-	// All form state and logic moved to custom hook
-	const formData = useJarCreation();
+	const {
+		form,
+		confirmSubmit,
+		validateStep1,
+		validateStep2,
+		validateStep3,
+		validateStep4,
+		isCreating,
+		isWaitingForTx,
+		newJarPreview,
+		formErrors,
+		isFormError,
+		ETH_ADDRESS,
+	} = useJarCreation();
 
-	// Step navigation moved to custom hook
 	const { currentStep, totalSteps, nextStep, prevStep } =
 		useStepNavigation(isV2Contract);
 
-	// Modal state (keep minimal state in main component)
 	const [showWalletModal, setShowWalletModal] = useState(false);
 	const [pendingSubmission, setPendingSubmission] = useState(false);
 
-	// Check if current step is valid
 	const isCurrentStepValid = () => {
 		switch (currentStep) {
 			case 1:
-				return formData.validateStep1().isValid;
+				return validateStep1().isValid;
 			case 2:
-				return formData.validateStep2().isValid;
+				return validateStep2().isValid;
 			case 3:
-				// Skip validation for step 3 on v1 chains
-				return isV2Contract ? formData.validateStep3().isValid : true;
+				return isV2Contract ? validateStep3().isValid : true;
 			case 4:
-				return formData.validateStep4().isValid;
+				return validateStep4().isValid;
 			default:
 				return false;
 		}
@@ -61,21 +68,19 @@ export default function CreateCookieJarForm() {
 		if (isConnected && address && pendingSubmission && showWalletModal) {
 			setShowWalletModal(false);
 			setPendingSubmission(false);
-			// Retry the submission
 			setTimeout(() => {
-				formData.confirmSubmit();
-			}, 100); // Small delay to ensure modal closes first
+				confirmSubmit();
+			}, 100);
 		}
-	}, [isConnected, address, pendingSubmission, showWalletModal, formData]);
+	}, [isConnected, address, pendingSubmission, showWalletModal, confirmSubmit]);
 
-	// Handle wallet connection modal trigger
 	const handleSubmit = () => {
 		if (!isConnected) {
 			setShowWalletModal(true);
 			setPendingSubmission(true);
 			return;
 		}
-		formData.confirmSubmit();
+		confirmSubmit();
 	};
 
 	return (
@@ -84,46 +89,49 @@ export default function CreateCookieJarForm() {
 			maxRetries={2}
 			showDetails={process.env.NODE_ENV === "development"}
 		>
-			<div className="max-w-2xl mx-auto">
-				<CreateJarHeader isV2Contract={isV2Contract} />
-				<ProgressIndicator
-					currentStep={currentStep}
-					totalSteps={totalSteps}
-					isV2Contract={isV2Contract}
-				/>
-
-				<CreateJarForm
-					currentStep={currentStep}
-					totalSteps={totalSteps}
-					isV2Contract={isV2Contract}
-					formData={formData}
-					nextStep={nextStep}
-					prevStep={prevStep}
-					handleSubmit={handleSubmit}
-					isCurrentStepValid={isCurrentStepValid}
-				/>
+			<FormProvider {...form}>
+				<div className="max-w-2xl mx-auto">
+					<CreateJarHeader isV2Contract={isV2Contract} />
+					<ProgressIndicator
+						currentStep={currentStep}
+						totalSteps={totalSteps}
+						isV2Contract={isV2Contract}
+					/>
 
-				<Suspense
-					fallback={
-						<div className="h-32 bg-gray-100 dark:bg-gray-800 rounded-lg animate-pulse" />
-					}
-				>
-					<StatusCards
-						newJarPreview={formData.newJarPreview}
-						formErrors={formData.formErrors}
-						isFormError={formData.isFormError}
-						ETH_ADDRESS={formData.ETH_ADDRESS}
+					<CreateJarForm
+						currentStep={currentStep}
+						totalSteps={totalSteps}
+						isV2Contract={isV2Contract}
+						nextStep={nextStep}
+						prevStep={prevStep}
+						handleSubmit={handleSubmit}
+						isCurrentStepValid={isCurrentStepValid}
+						isCreating={isCreating}
+						isWaitingForTx={isWaitingForTx}
 					/>
-				</Suspense>
-			</div>
+
+					<Suspense
+						fallback={
+							<div className="h-32 bg-gray-100 dark:bg-gray-800 rounded-lg animate-pulse" />
+						}
+					>
+						<StatusCards
+							newJarPreview={newJarPreview}
+							formErrors={formErrors}
+							isFormError={isFormError}
+							ETH_ADDRESS={ETH_ADDRESS}
+						/>
+					</Suspense>
+				</div>
+			</FormProvider>
 
 			<Suspense fallback={null}>
 				<CreateJarModals
 					showWalletModal={showWalletModal}
 					setShowWalletModal={setShowWalletModal}
 					setPendingSubmission={setPendingSubmission}
-					isCreating={formData.isCreating}
-					isWaitingForTx={formData.isWaitingForTx}
+					isCreating={isCreating}
+					isWaitingForTx={isWaitingForTx}
 				/>
 			</Suspense>
 		</ProtocolErrorBoundary>
diff --git a/client/components/create/CreateJarForm.tsx b/client/components/create/CreateJarForm.tsx
index f5febef..95eb970 100644
--- a/client/components/create/CreateJarForm.tsx
+++ b/client/components/create/CreateJarForm.tsx
@@ -15,22 +15,24 @@ interface CreateJarFormProps {
 	currentStep: number;
 	totalSteps: number;
 	isV2Contract: boolean;
-	formData: any; // Type this based on your useJarCreation hook return type
 	nextStep: () => void;
 	prevStep: () => void;
 	handleSubmit: () => void;
 	isCurrentStepValid: () => boolean;
+	isCreating: boolean;
+	isWaitingForTx: boolean;
 }
 
 export function CreateJarForm({
 	currentStep,
 	totalSteps,
 	isV2Contract,
-	formData,
 	nextStep,
 	prevStep,
 	handleSubmit,
 	isCurrentStepValid,
+	isCreating,
+	isWaitingForTx,
 }: CreateJarFormProps) {
 	const { isConnected } = useAccount();
 
@@ -75,7 +77,6 @@ export function CreateJarForm({
 				>
 					<StepContent
 						step={currentStep}
-						formData={formData}
 						isV2Contract={isV2Contract}
 					/>
 				</Suspense>
@@ -110,12 +111,12 @@ export function CreateJarForm({
 							onClick={handleSubmit}
 							disabled={
 								(!isCurrentStepValid() && isConnected) ||
-								formData.isCreating ||
-								formData.isWaitingForTx
+								isCreating ||
+								isWaitingForTx
 							}
 							className="w-full md:w-auto cj-btn-primary flex items-center justify-center gap-2"
 						>
-							{formData.isCreating || formData.isWaitingForTx ? (
+							{isCreating || isWaitingForTx ? (
 								<>
 									<Loader2 className="h-4 w-4 animate-spin" />
 									Creating...
diff --git a/client/components/create/MobileOptimizedForm.tsx b/client/components/create/MobileOptimizedForm.tsx
index d4c408c..9728268 100644
--- a/client/components/create/MobileOptimizedForm.tsx
+++ b/client/components/create/MobileOptimizedForm.tsx
@@ -26,7 +26,6 @@ interface MobileOptimizedFormProps {
 	currentStep: number;
 	totalSteps: number;
 	isV2Contract: boolean;
-	formData: any;
 	nextStep: () => void;
 	prevStep: () => void;
 	handleSubmit: () => void;
@@ -37,7 +36,6 @@ export function MobileOptimizedForm({
 	currentStep,
 	totalSteps,
 	isV2Contract,
-	formData,
 	nextStep,
 	prevStep,
 	handleSubmit,
@@ -204,7 +202,6 @@ export function MobileOptimizedForm({
 						<div className={isMobile ? "" : "min-h-[400px]"}>
 							<StepContent
 								step={currentStep}
-								formData={formData}
 								isV2Contract={isV2Contract}
 							/>
 						</div>
diff --git a/client/components/create/StepContent.tsx b/client/components/create/StepContent.tsx
index 3e166ab..13d5910 100644
--- a/client/components/create/StepContent.tsx
+++ b/client/components/create/StepContent.tsx
@@ -2,8 +2,10 @@
 
 import { Trash2 } from "lucide-react";
 import type React from "react";
+import { useCallback, useEffect, useMemo } from "react";
+import { useFormContext } from "react-hook-form";
 import { isAddress } from "viem";
-// import { NFTGateInput } from "@/components/nft/NFTGateInput"; // TODO: Component not found
+import { useChainId } from "wagmi";
 import { NFTSelector, type SelectedNFT } from "@/components/nft/NFTSelector";
 import { ProtocolSelector } from "@/components/nft/ProtocolSelector";
 import { Button } from "@/components/ui/button";
@@ -20,39 +22,200 @@ import {
 import { Textarea } from "@/components/ui/textarea";
 import {
 	AccessType,
+	METHOD_TO_ACCESS_TYPE,
 	NFTType,
 	WithdrawalTypeOptions,
-} from "@/hooks/jar/useJarCreation";
+	type JarCreationFormData,
+} from "@/hooks/jar/schemas/jarCreationSchema";
+import type {
+	AccessMethod,
+	ProtocolConfig as SelectorProtocolConfig,
+} from "@/components/nft/ProtocolSelector";
+import { useToast } from "@/hooks/app/useToast";
+import { ETH_ADDRESS } from "@/lib/blockchain/token-utils";
 import { shortenAddress } from "@/lib/app/utils";
+import { isPoapSupportedChain } from "@/config/supported-networks";
 
 interface StepContentProps {
 	step: number;
-	formData: any; // Using any to avoid complex type imports for now
 	isV2Contract: boolean;
 }
 
+const VISIBLE_METHODS_WITHOUT_POAP: AccessMethod[] = [
+	"Allowlist",
+	"NFT",
+	"Hats",
+	"Hypercert",
+	"Unlock",
+];
+
 export const StepContent: React.FC<StepContentProps> = ({
 	step,
-	formData,
 	isV2Contract,
 }) => {
 	switch (step) {
 		case 1:
-			return <BasicConfigStep formData={formData} />;
+			return <BasicConfigStep />;
 		case 2:
-			return <WithdrawalSettingsStep formData={formData} />;
+			return <WithdrawalSettingsStep />;
 		case 3:
-			return isV2Contract ? <AccessControlStep formData={formData} /> : null;
+			return isV2Contract ? <AccessControlStep /> : null;
 		case 4:
-			return (
-				<FinalSettingsStep formData={formData} isV2Contract={isV2Contract} />
-			);
+			return <FinalSettingsStep isV2Contract={isV2Contract} />;
 		default:
 			return null;
 	}
 };
 
-const BasicConfigStep: React.FC<{ formData: any }> = ({ formData }) => {
+// ─────────────────────────────────────────────
+// Step 1: Basic Configuration
+// ─────────────────────────────────────────────
+
+const BasicConfigStep: React.FC = () => {
+	const { register, watch, setValue, formState: { errors } } =
+		useFormContext<JarCreationFormData>();
+	const { toast } = useToast();
+	const chainId = useChainId();
+
+	const showCustomCurrency = watch("showCustomCurrency");
+	const supportedCurrency = watch("supportedCurrency");
+	const customCurrencyAddress = watch("customCurrencyAddress");
+	const jarOwnerAddress = watch("jarOwnerAddress");
+
+	const currencyOptions = useMemo(() => {
+		const options: Array<{
+			value: string;
+			label: string;
+			description: string;
+		}> = [
+			{
+				value: ETH_ADDRESS,
+				label: "ETH (Native)",
+				description: "Use native Ethereum",
+			},
+		];
+
+		if (chainId === 31337) {
+			options.push({
+				value: "0x036CbD53842c5426634e7929541eC2318f3dCF7e",
+				label: "DEMO Token",
+				description: "Local development token",
+			});
+		} else if (chainId === 84532) {
+			options.push({
+				value: "0x4200000000000000000000000000000000000006",
+				label: "WETH",
+				description: "Wrapped ETH on Base Sepolia",
+			});
+		}
+
+		options.push({
+			value: "CUSTOM",
+			label: "Custom ERC-20",
+			description: "Enter your own ERC-20 token address",
+		});
+
+		return options;
+	}, [chainId]);
+
+	const handleCurrencyChange = useCallback(
+		(value: string) => {
+			if (value === "CUSTOM") {
+				setValue("showCustomCurrency", true);
+			} else {
+				setValue("showCustomCurrency", false);
+				setValue("supportedCurrency", value);
+				setValue("customCurrencyAddress", "");
+			}
+		},
+		[setValue],
+	);
+
+	const handleCustomCurrencySubmit = useCallback(async () => {
+		if (customCurrencyAddress && isAddress(customCurrencyAddress)) {
+			setValue("supportedCurrency", customCurrencyAddress);
+			toast({
+				title: "Custom currency set",
+				description: "ERC-20 token address has been set successfully",
+			});
+		} else {
+			toast({
+				title: "Invalid address",
+				description: "Please enter a valid Ethereum address",
+				variant: "destructive",
+			});
+		}
+	}, [customCurrencyAddress, setValue, toast]);
+
+	const handlePrepopulate = useCallback(() => {
+		if (process.env.NODE_ENV !== "development") return;
+
+		const randomNames = [
+			"Cookie Fund",
+			"Dev Grants",
+			"Community Pool",
+			"Test Jar",
+			"Demo Fund",
+			"Alpha Pool",
+		];
+		const randomDescriptions = [
+			"A fund for supporting cookie development",
+			"Grants for innovative projects",
+			"Community-driven funding pool",
+			"Testing new jar functionality",
+			"Demonstration of jar capabilities",
+			"Early access funding",
+		];
+		const randomImages = [
+			"https://picsum.photos/400/300?random=1",
+			"https://picsum.photos/400/300?random=2",
+			"https://picsum.photos/400/300?random=3",
+		];
+		const randomLinks = [
+			"https://example.com/project1",
+			"https://github.com/test/repo",
+			"https://docs.example.com",
+		];
+
+		setValue(
+			"jarName",
+			randomNames[Math.floor(Math.random() * randomNames.length)],
+		);
+		setValue(
+			"metadata",
+			randomDescriptions[
+				Math.floor(Math.random() * randomDescriptions.length)
+			],
+		);
+		setValue(
+			"imageUrl",
+			randomImages[Math.floor(Math.random() * randomImages.length)],
+		);
+		setValue(
+			"externalLink",
+			randomLinks[Math.floor(Math.random() * randomLinks.length)],
+		);
+
+		if (Math.random() > 0.5) {
+			setValue("enableCustomFee", true);
+			setValue("customFee", (Math.random() * 1.9 + 0.1).toFixed(2));
+		}
+
+		if (Math.random() > 0.7) {
+			setValue(
+				"supportedCurrency",
+				"0x036CbD53842c5426634e7929541eC2318f3dCF7e",
+			);
+		}
+
+		setValue("fixedAmount", (Math.random() * 0.5).toFixed(3));
+		setValue("maxWithdrawal", (Math.random() * 2).toFixed(3));
+		setValue(
+			"withdrawalInterval",
+			String(Math.floor(Math.random() * 30 + 1)),
+		);
+	}, [setValue]);
+
 	return (
 		<div className="space-y-6">
 			<div className="flex items-center justify-end">
@@ -60,10 +223,10 @@ const BasicConfigStep: React.FC<{ formData: any }> = ({ formData }) => {
 					<Button
 						variant="outline"
 						size="sm"
-						onClick={formData.prepopulateRandomData}
+						onClick={handlePrepopulate}
 						className="text-xs"
 					>
-						🎲 Fill with Random Data (Dev Only)
+						Fill with Random Data (Dev Only)
 					</Button>
 				)}
 			</div>
@@ -74,11 +237,17 @@ const BasicConfigStep: React.FC<{ formData: any }> = ({ formData }) => {
 					<Input
 						id="jarName"
 						data-testid="jar-name-input"
-						value={formData.jarName}
-						onChange={(e) => formData.setJarName(e.target.value)}
 						placeholder="e.g., Community Fund, Dev Grants"
 						aria-label="Enter a name for your cookie jar"
+						aria-invalid={!!errors.jarName}
+						aria-describedby={errors.jarName ? "jarName-error" : undefined}
+						{...register("jarName")}
 					/>
+					{errors.jarName && (
+						<p id="jarName-error" className="text-sm text-red-600 mt-1">
+							{errors.jarName.message}
+						</p>
+					)}
 				</div>
 
 				<div>
@@ -87,13 +256,11 @@ const BasicConfigStep: React.FC<{ formData: any }> = ({ formData }) => {
 						<Input
 							id="jarOwner"
 							data-testid="jar-owner-input"
-							value={formData.jarOwnerAddress}
-							onChange={(e) =>
-								formData.setJarOwnerAddress(e.target.value as `0x${string}`)
-							}
 							placeholder="0x... (defaults to your connected wallet)"
 							className="pr-12"
 							aria-label="Enter the Ethereum address that will own this jar"
+							aria-invalid={!!errors.jarOwnerAddress}
+							{...register("jarOwnerAddress")}
 						/>
 						<Button
 							type="button"
@@ -104,8 +271,7 @@ const BasicConfigStep: React.FC<{ formData: any }> = ({ formData }) => {
 								try {
 									const text = await navigator.clipboard.readText();
 									if (text && isAddress(text)) {
-										formData.setJarOwnerAddress(text as `0x${string}`);
-										// Could add toast here if needed
+										setValue("jarOwnerAddress", text);
 									}
 								} catch (err) {
 									console.error("Failed to read clipboard:", err);
@@ -128,10 +294,10 @@ const BasicConfigStep: React.FC<{ formData: any }> = ({ formData }) => {
 						</Button>
 					</div>
 					<p className="text-sm text-muted-foreground mt-1">
-						{formData.jarOwnerAddress &&
-						formData.jarOwnerAddress !==
+						{jarOwnerAddress &&
+						jarOwnerAddress !==
 							"0x0000000000000000000000000000000000000000"
-							? `Currently set to: ${shortenAddress(formData.jarOwnerAddress, 10)}`
+							? `Currently set to: ${shortenAddress(jarOwnerAddress, 10)}`
 							: "The address that will own and manage this jar"}
 					</p>
 				</div>
@@ -139,12 +305,8 @@ const BasicConfigStep: React.FC<{ formData: any }> = ({ formData }) => {
 				<div>
 					<Label htmlFor="currency">Currency *</Label>
 					<Select
-						value={
-							formData.showCustomCurrency
-								? "CUSTOM"
-								: formData.supportedCurrency
-						}
-						onValueChange={formData.handleCurrencyChange}
+						value={showCustomCurrency ? "CUSTOM" : supportedCurrency}
+						onValueChange={handleCurrencyChange}
 					>
 						<SelectTrigger
 							data-testid="currency-selector"
@@ -153,7 +315,7 @@ const BasicConfigStep: React.FC<{ formData: any }> = ({ formData }) => {
 							<SelectValue placeholder="Select currency" />
 						</SelectTrigger>
 						<SelectContent>
-							{formData.getCurrencyOptions().map((option: any) => (
+							{currencyOptions.map((option) => (
 								<SelectItem key={option.value} value={option.value}>
 									<div>
 										<div className="font-medium">{option.label}</div>
@@ -166,44 +328,41 @@ const BasicConfigStep: React.FC<{ formData: any }> = ({ formData }) => {
 						</SelectContent>
 					</Select>
 
-					{formData.showCustomCurrency && (
+					{showCustomCurrency && (
 						<div className="mt-3 space-y-2">
 							<Label htmlFor="customCurrency">ERC-20 Token Address</Label>
 							<div className="flex gap-2">
 								<Input
 									id="customCurrency"
-									value={formData.customCurrencyAddress}
-									onChange={(e) =>
-										formData.setCustomCurrencyAddress(e.target.value)
-									}
 									placeholder="0x... (ERC-20 contract address)"
 									className="flex-1"
+									{...register("customCurrencyAddress")}
 								/>
 								<Button
 									type="button"
 									variant="outline"
-									onClick={formData.handleCustomCurrencySubmit}
+									onClick={handleCustomCurrencySubmit}
 									disabled={
-										!formData.customCurrencyAddress ||
-										!isAddress(formData.customCurrencyAddress)
+										!customCurrencyAddress ||
+										!isAddress(customCurrencyAddress)
 									}
 									className="px-4"
 								>
 									Set
 								</Button>
 							</div>
-							{formData.customCurrencyAddress &&
-								!isAddress(formData.customCurrencyAddress) && (
+							{customCurrencyAddress &&
+								!isAddress(customCurrencyAddress) && (
 									<p className="text-sm text-red-600">
 										Please enter a valid Ethereum address
 									</p>
 								)}
-							{formData.supportedCurrency &&
-								formData.supportedCurrency !== formData.ETH_ADDRESS &&
-								isAddress(formData.supportedCurrency) && (
+							{supportedCurrency &&
+								supportedCurrency !== ETH_ADDRESS &&
+								isAddress(supportedCurrency) && (
 									<p className="text-sm text-green-600">
-										✓ Custom ERC-20 set:{" "}
-										{shortenAddress(formData.supportedCurrency, 10)}
+										Custom ERC-20 set:{" "}
+										{shortenAddress(supportedCurrency, 10)}
 									</p>
 								)}
 						</div>
@@ -214,10 +373,9 @@ const BasicConfigStep: React.FC<{ formData: any }> = ({ formData }) => {
 					<Label htmlFor="description">Description</Label>
 					<Textarea
 						id="description"
-						value={formData.metadata}
-						onChange={(e) => formData.setMetadata(e.target.value)}
 						placeholder="Describe what this jar is for..."
 						rows={3}
+						{...register("metadata")}
 					/>
 				</div>
 
@@ -225,9 +383,8 @@ const BasicConfigStep: React.FC<{ formData: any }> = ({ formData }) => {
 					<Label htmlFor="imageUrl">Image URL</Label>
 					<Input
 						id="imageUrl"
-						value={formData.imageUrl}
-						onChange={(e) => formData.setImageUrl(e.target.value)}
 						placeholder="https://example.com/image.jpg"
+						{...register("imageUrl")}
 					/>
 				</div>
 
@@ -235,9 +392,8 @@ const BasicConfigStep: React.FC<{ formData: any }> = ({ formData }) => {
 					<Label htmlFor="externalLink">External Link</Label>
 					<Input
 						id="externalLink"
-						value={formData.externalLink}
-						onChange={(e) => formData.setExternalLink(e.target.value)}
 						placeholder="https://example.com"
+						{...register("externalLink")}
 					/>
 				</div>
 			</div>
@@ -245,7 +401,19 @@ const BasicConfigStep: React.FC<{ formData: any }> = ({ formData }) => {
 	);
 };
 
-const WithdrawalSettingsStep: React.FC<{ formData: any }> = ({ formData }) => {
+// ─────────────────────────────────────────────
+// Step 2: Withdrawal Settings
+// ─────────────────────────────────────────────
+
+const WithdrawalSettingsStep: React.FC = () => {
+	const { register, watch, setValue } =
+		useFormContext<JarCreationFormData>();
+
+	const withdrawalOption = watch("withdrawalOption");
+	const strictPurpose = watch("strictPurpose");
+	const emergencyWithdrawalEnabled = watch("emergencyWithdrawalEnabled");
+	const oneTimeWithdrawal = watch("oneTimeWithdrawal");
+
 	return (
 		<div className="space-y-6">
 			<h3 className="text-lg font-semibold">Withdrawal Settings</h3>
@@ -254,9 +422,10 @@ const WithdrawalSettingsStep: React.FC<{ formData: any }> = ({ formData }) => {
 				<div>
 					<Label htmlFor="withdrawalType">Withdrawal Type *</Label>
 					<Select
-						value={formData.withdrawalOption.toString()}
+						value={withdrawalOption.toString()}
 						onValueChange={(value) =>
-							formData.setWithdrawalOption(
+							setValue(
+								"withdrawalOption",
 								parseInt(value, 10) as WithdrawalTypeOptions,
 							)
 						}
@@ -265,22 +434,27 @@ const WithdrawalSettingsStep: React.FC<{ formData: any }> = ({ formData }) => {
 							<SelectValue placeholder="Select withdrawal type" />
 						</SelectTrigger>
 						<SelectContent>
-							<SelectItem value="0">Fixed - Same amount each time</SelectItem>
-							<SelectItem value="1">Variable - User chooses amount</SelectItem>
+							<SelectItem value="0">
+								Fixed - Same amount each time
+							</SelectItem>
+							<SelectItem value="1">
+								Variable - User chooses amount
+							</SelectItem>
 						</SelectContent>
 					</Select>
 				</div>
 
-				{formData.withdrawalOption === WithdrawalTypeOptions.Fixed && (
+				{withdrawalOption === WithdrawalTypeOptions.Fixed && (
 					<div>
-						<Label htmlFor="fixedAmount">Fixed Withdrawal Amount *</Label>
+						<Label htmlFor="fixedAmount">
+							Fixed Withdrawal Amount *
+						</Label>
 						<Input
 							id="fixedAmount"
 							type="number"
-							value={formData.fixedAmount}
-							onChange={(e) => formData.setFixedAmount(e.target.value)}
 							placeholder="0.1"
 							step="0.001"
+							{...register("fixedAmount")}
 						/>
 						<p className="text-sm text-muted-foreground mt-1">
 							Amount users can withdraw each time
@@ -288,16 +462,17 @@ const WithdrawalSettingsStep: React.FC<{ formData: any }> = ({ formData }) => {
 					</div>
 				)}
 
-				{formData.withdrawalOption === WithdrawalTypeOptions.Variable && (
+				{withdrawalOption === WithdrawalTypeOptions.Variable && (
 					<div>
-						<Label htmlFor="maxWithdrawal">Maximum Withdrawal Amount *</Label>
+						<Label htmlFor="maxWithdrawal">
+							Maximum Withdrawal Amount *
+						</Label>
 						<Input
 							id="maxWithdrawal"
 							type="number"
-							value={formData.maxWithdrawal}
-							onChange={(e) => formData.setMaxWithdrawal(e.target.value)}
 							placeholder="1.0"
 							step="0.001"
+							{...register("maxWithdrawal")}
 						/>
 						<p className="text-sm text-muted-foreground mt-1">
 							Maximum amount users can withdraw at once
@@ -312,13 +487,13 @@ const WithdrawalSettingsStep: React.FC<{ formData: any }> = ({ formData }) => {
 					<Input
 						id="withdrawalInterval"
 						type="number"
-						value={formData.withdrawalInterval}
-						onChange={(e) => formData.setWithdrawalInterval(e.target.value)}
 						placeholder="7"
 						min="1"
+						{...register("withdrawalInterval")}
 					/>
 					<p className="text-sm text-muted-foreground mt-1">
-						Time between allowed withdrawals (e.g., 7 = weekly, 30 = monthly)
+						Time between allowed withdrawals (e.g., 7 = weekly, 30 =
+						monthly)
 					</p>
 				</div>
 
@@ -326,10 +501,10 @@ const WithdrawalSettingsStep: React.FC<{ formData: any }> = ({ formData }) => {
 					<div className="flex items-center space-x-2">
 						<Checkbox
 							id="strictPurpose"
-							checked={formData.strictPurpose}
-							onCheckedChange={formData.handleCheckboxChange(
-								formData.setStrictPurpose,
-							)}
+							checked={strictPurpose}
+							onCheckedChange={(checked) =>
+								setValue("strictPurpose", checked === true)
+							}
 						/>
 						<Label htmlFor="strictPurpose" className="text-sm">
 							Require purpose description (minimum 27 characters)
@@ -339,10 +514,13 @@ const WithdrawalSettingsStep: React.FC<{ formData: any }> = ({ formData }) => {
 					<div className="flex items-center space-x-2">
 						<Checkbox
 							id="emergencyWithdrawal"
-							checked={formData.emergencyWithdrawalEnabled}
-							onCheckedChange={formData.handleCheckboxChange(
-								formData.setEmergencyWithdrawalEnabled,
-							)}
+							checked={emergencyWithdrawalEnabled}
+							onCheckedChange={(checked) =>
+								setValue(
+									"emergencyWithdrawalEnabled",
+									checked === true,
+								)
+							}
 						/>
 						<Label htmlFor="emergencyWithdrawal" className="text-sm">
 							Enable emergency withdrawal
@@ -352,10 +530,10 @@ const WithdrawalSettingsStep: React.FC<{ formData: any }> = ({ formData }) => {
 					<div className="flex items-center space-x-2">
 						<Checkbox
 							id="oneTimeWithdrawal"
-							checked={formData.oneTimeWithdrawal}
-							onCheckedChange={formData.handleCheckboxChange(
-								formData.setOneTimeWithdrawal,
-							)}
+							checked={oneTimeWithdrawal}
+							onCheckedChange={(checked) =>
+								setValue("oneTimeWithdrawal", checked === true)
+							}
 						/>
 						<Label htmlFor="oneTimeWithdrawal" className="text-sm">
 							One-time withdrawal only (users can only claim once)
@@ -367,114 +545,212 @@ const WithdrawalSettingsStep: React.FC<{ formData: any }> = ({ formData }) => {
 	);
 };
 
-const AccessControlStep: React.FC<{ formData: any }> = ({ formData }) => {
+// ─────────────────────────────────────────────
+// Step 3: Access Control
+// ─────────────────────────────────────────────
+
+const AccessControlStep: React.FC = () => {
+	const chainId = useChainId();
+	const { watch, setValue, getValues } =
+		useFormContext<JarCreationFormData>();
+
+	const accessType = watch("accessType");
+	const nftAddresses = watch("nftAddresses");
+	const nftTypes = watch("nftTypes");
+	const protocolConfig = watch("protocolConfig");
+	const poapSupported = isPoapSupportedChain(chainId);
+
+	useEffect(() => {
+		if (poapSupported || accessType !== AccessType.POAP) return;
+
+		setValue("accessType", AccessType.Allowlist);
+		setValue(
+			"protocolConfig",
+			{
+				method: "Allowlist",
+				accessType: "Allowlist",
+			} as any,
+		);
+	}, [poapSupported, accessType, setValue]);
+
+	const handleProtocolConfigChange = useCallback(
+		(config: SelectorProtocolConfig) => {
+			// Bridge ProtocolSelector's { method: "NFT" } to form's { accessType: AccessType.NFTGated }
+			setValue("protocolConfig", {
+				...config,
+				accessType: config.method,
+			} as any);
+
+			const numericType = METHOD_TO_ACCESS_TYPE[config.method];
+			if (numericType !== undefined) {
+				setValue("accessType", numericType);
+			}
+
+			// Sync NFT-specific arrays when NFT method is selected
+			if (config.method === "NFT") {
+				if (config.nftAddresses) {
+					setValue("nftAddresses", config.nftAddresses);
+				}
+				if (config.nftTypes) {
+					setValue(
+						"nftTypes",
+						(config.nftTypes as number[]).map(
+							(t: number) => t as NFTType,
+						),
+					);
+				}
+			}
+		},
+		[setValue],
+	);
+
+	const handleAddNFT = useCallback(
+		(address: string, type: number) => {
+			const currentAddresses = getValues("nftAddresses");
+			const currentTypes = getValues("nftTypes");
+			setValue("nftAddresses", [...currentAddresses, address]);
+			setValue("nftTypes", [...currentTypes, type as NFTType]);
+		},
+		[getValues, setValue],
+	);
+
+	const handleRemoveNFT = useCallback(
+		(index: number) => {
+			const currentAddresses = getValues("nftAddresses");
+			const currentTypes = getValues("nftTypes");
+			setValue(
+				"nftAddresses",
+				currentAddresses.filter((_, i) => i !== index),
+			);
+			setValue(
+				"nftTypes",
+				currentTypes.filter((_, i) => i !== index),
+			);
+		},
+		[getValues, setValue],
+	);
+
 	return (
 		<div className="space-y-6">
 			<h3 className="text-lg font-semibold">Access Control</h3>
 			<div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
 				<p className="text-sm text-blue-800">
-					🚀 <strong>v2 Contract Feature:</strong> Enhanced access control with
-					support for NFT gates, POAP verification, and protocol integrations.
+					<strong>v2 Contract Feature:</strong> Enhanced access control
+					with support for NFT gates, POAP verification, and protocol
+					integrations.
 				</p>
 			</div>
+			{!poapSupported && (
+				<div className="p-4 bg-amber-50 border border-amber-200 rounded-lg">
+					<p className="text-sm text-amber-800">
+						POAP gating is only available on Gnosis Chain and is hidden on
+						this network.
+					</p>
+				</div>
+			)}
 
 			<ProtocolSelector
-				onConfigChange={formData.handleProtocolConfigChange}
-				initialConfig={formData.protocolConfig}
+				onConfigChange={handleProtocolConfigChange}
+				initialConfig={protocolConfig}
 				showViewToggle={false}
+				visibleMethods={
+					poapSupported ? undefined : VISIBLE_METHODS_WITHOUT_POAP
+				}
 			/>
 
-			{formData.accessType === AccessType.NFTGated && (
+			{accessType === AccessType.NFTGated && (
 				<div className="mt-6 space-y-6">
 					<div className="border rounded-lg p-4">
 						<Label className="text-base font-medium mb-4 block">
 							Select NFT for Access Control
 						</Label>
 						<p className="text-sm text-muted-foreground mb-4">
-							Choose an NFT that users must own to access this jar. You can
-							search public collections or select from your own NFTs.
+							Choose an NFT that users must own to access this jar.
+							You can search public collections or select from your
+							own NFTs.
 						</p>
 
 						<NFTSelector
 							onSelect={(selectedNFT: SelectedNFT) => {
-								// Convert SelectedNFT to the format expected by handleAddNFT
 								const nftType =
 									selectedNFT.tokenType === "ERC721"
 										? NFTType.ERC721
 										: NFTType.ERC1155;
-								formData.handleAddNFT(selectedNFT.contractAddress, nftType);
+								handleAddNFT(
+									selectedNFT.contractAddress,
+									nftType,
+								);
 							}}
 							maxHeight="400px"
 							className="mt-4"
 						/>
 					</div>
 
-					{formData.nftAddresses.length > 0 && (
+					{nftAddresses.length > 0 && (
 						<div className="space-y-3">
 							<Label className="text-base font-medium">
 								Selected NFT Requirements:
 							</Label>
 							<div className="space-y-2">
-								{formData.nftAddresses.map((address: string, index: number) => (
-									<div
-										key={index}
-										className="flex items-center justify-between p-3 bg-muted rounded-lg border"
-									>
-										<div className="flex-1 min-w-0">
-											<div className="flex items-center gap-2 mb-1">
-												<span className="text-sm font-medium">
-													NFT Contract
-												</span>
-												<span
-													className={`text-xs px-2 py-0.5 rounded ${
-														formData.nftTypes[index] === NFTType.ERC721
-															? "bg-purple-100 text-purple-800"
-															: "bg-blue-100 text-blue-800"
-													}`}
-												>
-													{formData.nftTypes[index] === NFTType.ERC721
-														? "ERC721"
-														: "ERC1155"}
-												</span>
+								{nftAddresses.map(
+									(address: string, index: number) => (
+										<div
+											key={`${address}-${index}`}
+											className="flex items-center justify-between p-3 bg-muted rounded-lg border"
+										>
+											<div className="flex-1 min-w-0">
+												<div className="flex items-center gap-2 mb-1">
+													<span className="text-sm font-medium">
+														NFT Contract
+													</span>
+													<span
+														className={`text-xs px-2 py-0.5 rounded ${
+															nftTypes[index] ===
+															NFTType.ERC721
+																? "bg-purple-100 text-purple-800"
+																: "bg-blue-100 text-blue-800"
+														}`}
+													>
+														{nftTypes[index] ===
+														NFTType.ERC721
+															? "ERC721"
+															: "ERC1155"}
+													</span>
+												</div>
+												<p className="text-sm text-muted-foreground font-mono truncate">
+													{address}
+												</p>
 											</div>
-											<p className="text-sm text-muted-foreground font-mono truncate">
-												{address}
-											</p>
+											<Button
+												variant="ghost"
+												size="sm"
+												onClick={() =>
+													handleRemoveNFT(index)
+												}
+												className="text-red-500 hover:text-red-700 hover:bg-red-50"
+											>
+												<Trash2 className="h-4 w-4" />
+											</Button>
 										</div>
-										<Button
-											variant="ghost"
-											size="sm"
-											onClick={() => {
-												formData.setNftAddresses((prev: string[]) =>
-													prev.filter((_, i) => i !== index),
-												);
-												formData.setNftTypes((prev: number[]) =>
-													prev.filter((_, i) => i !== index),
-												);
-											}}
-											className="text-red-500 hover:text-red-700 hover:bg-red-50"
-										>
-											<Trash2 className="h-4 w-4" />
-										</Button>
-									</div>
-								))}
+									),
+								)}
 							</div>
 							<div className="p-3 bg-green-50 border border-green-200 rounded-lg">
 								<p className="text-sm text-green-800">
-									✓ Users must own NFTs from {formData.nftAddresses.length}{" "}
-									selected collection
-									{formData.nftAddresses.length !== 1 ? "s" : ""} to access this
-									jar.
+									Users must own NFTs from{" "}
+									{nftAddresses.length} selected collection
+									{nftAddresses.length !== 1 ? "s" : ""} to
+									access this jar.
 								</p>
 							</div>
 						</div>
 					)}
 
-					{formData.nftAddresses.length === 0 && (
+					{nftAddresses.length === 0 && (
 						<div className="p-3 bg-amber-50 border border-amber-200 rounded-lg">
 							<p className="text-sm text-amber-800">
-								⚠️ Please select at least one NFT collection to enable NFT-gated
-								access.
+								Please select at least one NFT collection to
+								enable NFT-gated access.
 							</p>
 						</div>
 					)}
@@ -484,10 +760,37 @@ const AccessControlStep: React.FC<{ formData: any }> = ({ formData }) => {
 	);
 };
 
-const FinalSettingsStep: React.FC<{ formData: any; isV2Contract: boolean }> = ({
-	formData,
+// ─────────────────────────────────────────────
+// Step 4: Final Settings & Review
+// ─────────────────────────────────────────────
+
+const FinalSettingsStep: React.FC<{ isV2Contract: boolean }> = ({
 	isV2Contract,
 }) => {
+	const { register, watch, setValue } =
+		useFormContext<JarCreationFormData>();
+
+	const enableCustomFee = watch("enableCustomFee");
+	const streamingEnabled = watch("streamingEnabled");
+	const requireStreamApproval = watch("requireStreamApproval");
+	const autoSwapEnabled = watch("autoSwapEnabled");
+
+	// Summary values
+	const jarName = watch("jarName");
+	const jarOwnerAddress = watch("jarOwnerAddress");
+	const supportedCurrency = watch("supportedCurrency");
+	const accessType = watch("accessType");
+	const withdrawalOption = watch("withdrawalOption");
+	const fixedAmount = watch("fixedAmount");
+	const maxWithdrawal = watch("maxWithdrawal");
+	const withdrawalInterval = watch("withdrawalInterval");
+	const strictPurpose = watch("strictPurpose");
+	const emergencyWithdrawalEnabled = watch("emergencyWithdrawalEnabled");
+	const oneTimeWithdrawal = watch("oneTimeWithdrawal");
+	const customFee = watch("customFee");
+	const maxStreamRate = watch("maxStreamRate");
+	const minStreamDuration = watch("minStreamDuration");
+
 	return (
 		<div className="space-y-6">
 			<h3 className="text-lg font-semibold">Final Settings & Review</h3>
@@ -499,11 +802,11 @@ const FinalSettingsStep: React.FC<{ formData: any; isV2Contract: boolean }> = ({
 					<div className="flex items-center space-x-2">
 						<Checkbox
 							id="enableCustomFee"
-							checked={formData.enableCustomFee}
+							checked={enableCustomFee}
 							disabled={!isV2Contract}
-							onCheckedChange={formData.handleCheckboxChange(
-								formData.setEnableCustomFee,
-							)}
+							onCheckedChange={(checked) =>
+								setValue("enableCustomFee", checked === true)
+							}
 						/>
 						<Label
 							htmlFor="enableCustomFee"
@@ -518,18 +821,19 @@ const FinalSettingsStep: React.FC<{ formData: any; isV2Contract: boolean }> = ({
 						</Label>
 					</div>
 
-					{formData.enableCustomFee && (
+					{enableCustomFee && (
 						<div>
-							<Label htmlFor="customFee">Custom Fee Percentage</Label>
+							<Label htmlFor="customFee">
+								Custom Fee Percentage
+							</Label>
 							<Input
 								id="customFee"
 								type="number"
-								value={formData.customFee}
-								onChange={(e) => formData.setCustomFee(e.target.value)}
 								placeholder="2.5"
 								step="0.1"
 								min="0"
 								max="100"
+								{...register("customFee")}
 							/>
 							<p className="text-sm text-muted-foreground mt-1">
 								Percentage fee charged on deposits (0-100%)
@@ -542,7 +846,7 @@ const FinalSettingsStep: React.FC<{ formData: any; isV2Contract: boolean }> = ({
 				{isV2Contract && (
 					<div className="space-y-4 p-4 border rounded-lg bg-blue-50/50">
 						<h4 className="font-medium text-base flex items-center gap-2">
-							<span className="w-2 h-2 bg-blue-500 rounded-full"></span>
+							<span className="w-2 h-2 bg-blue-500 rounded-full" />
 							Advanced Features
 							<span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
 								v2 Enhanced
@@ -553,28 +857,41 @@ const FinalSettingsStep: React.FC<{ formData: any; isV2Contract: boolean }> = ({
 							<div className="flex items-center space-x-2">
 								<Checkbox
 									id="enableStreaming"
-									checked={formData.streamingEnabled}
-									onCheckedChange={formData.handleCheckboxChange(
-										formData.setStreamingEnabled,
-									)}
+									checked={streamingEnabled}
+									onCheckedChange={(checked) =>
+										setValue(
+											"streamingEnabled",
+											checked === true,
+										)
+									}
 								/>
-								<Label htmlFor="enableStreaming" className="text-sm">
+								<Label
+									htmlFor="enableStreaming"
+									className="text-sm"
+								>
 									Enable token streaming
 								</Label>
 							</div>
 
-							{formData.streamingEnabled && (
+							{streamingEnabled && (
 								<div className="ml-6 space-y-4 p-3 bg-white rounded border border-blue-200">
 									<div className="flex items-center space-x-2">
 										<Checkbox
 											id="requireStreamApproval"
-											checked={formData.requireStreamApproval}
-											onCheckedChange={formData.handleCheckboxChange(
-												formData.setRequireStreamApproval,
-											)}
+											checked={requireStreamApproval}
+											onCheckedChange={(checked) =>
+												setValue(
+													"requireStreamApproval",
+													checked === true,
+												)
+											}
 										/>
-										<Label htmlFor="requireStreamApproval" className="text-sm">
-											Require manual approval for new streams
+										<Label
+											htmlFor="requireStreamApproval"
+											className="text-sm"
+										>
+											Require manual approval for new
+											streams
 										</Label>
 									</div>
 
@@ -586,13 +903,10 @@ const FinalSettingsStep: React.FC<{ formData: any; isV2Contract: boolean }> = ({
 											<Input
 												id="maxStreamRate"
 												type="number"
-												value={formData.maxStreamRate}
-												onChange={(e) =>
-													formData.setMaxStreamRate(e.target.value)
-												}
 												placeholder="1.0"
 												step="0.001"
 												min="0"
+												{...register("maxStreamRate")}
 											/>
 											<p className="text-xs text-muted-foreground mt-1">
 												Maximum allowed streaming rate
@@ -606,12 +920,11 @@ const FinalSettingsStep: React.FC<{ formData: any; isV2Contract: boolean }> = ({
 											<Input
 												id="minStreamDuration"
 												type="number"
-												value={formData.minStreamDuration}
-												onChange={(e) =>
-													formData.setMinStreamDuration(e.target.value)
-												}
 												placeholder="1"
 												min="1"
+												{...register(
+													"minStreamDuration",
+												)}
 											/>
 											<p className="text-xs text-muted-foreground mt-1">
 												Minimum time for streams
@@ -624,29 +937,36 @@ const FinalSettingsStep: React.FC<{ formData: any; isV2Contract: boolean }> = ({
 							<div className="flex items-center space-x-2">
 								<Checkbox
 									id="enableAutoSwap"
-									checked={formData.autoSwapEnabled}
-									onCheckedChange={formData.handleCheckboxChange(
-										formData.setAutoSwapEnabled,
-									)}
+									checked={autoSwapEnabled}
+									onCheckedChange={(checked) =>
+										setValue(
+											"autoSwapEnabled",
+											checked === true,
+										)
+									}
 								/>
-								<Label htmlFor="enableAutoSwap" className="text-sm">
+								<Label
+									htmlFor="enableAutoSwap"
+									className="text-sm"
+								>
 									Enable auto-swap for ETH deposits
 								</Label>
 							</div>
 
 							<div className="text-xs text-blue-700 bg-blue-50 p-2 rounded border">
-								<strong>ℹ️ Advanced Features:</strong>
+								<strong>Advanced Features:</strong>
 								<ul className="mt-1 ml-4 list-disc space-y-1">
 									<li>
-										Streaming allows continuous funding from external sources
+										Streaming allows continuous funding from
+										external sources
 									</li>
 									<li>
-										Auto-swap converts ETH deposits to your jar&apos;s token
-										automatically
+										Auto-swap converts ETH deposits to your
+										jar&apos;s token automatically
 									</li>
 									<li>
-										Other ERC-20 tokens sent to the jar can be manually
-										recovered and swapped
+										Other ERC-20 tokens sent to the jar can
+										be manually recovered and swapped
 									</li>
 								</ul>
 							</div>
@@ -660,72 +980,73 @@ const FinalSettingsStep: React.FC<{ formData: any; isV2Contract: boolean }> = ({
 				<h4 className="font-medium">Configuration Summary</h4>
 				<div className="text-sm space-y-1">
 					<div>
-						<strong>Name:</strong> {formData.jarName || "Not set"}
+						<strong>Name:</strong> {jarName || "Not set"}
 					</div>
 					<div>
-						<strong>Owner:</strong> {formData.jarOwnerAddress}
+						<strong>Owner:</strong> {jarOwnerAddress}
 					</div>
 					<div>
 						<strong>Currency:</strong>{" "}
-						{formData.supportedCurrency === formData.ETH_ADDRESS
+						{supportedCurrency === ETH_ADDRESS
 							? "ETH"
-							: formData.supportedCurrency}
+							: supportedCurrency}
 					</div>
 					<div>
-						<strong>Access Type:</strong> {AccessType[formData.accessType]}
+						<strong>Access Type:</strong>{" "}
+						{AccessType[accessType]}
 					</div>
 					<div>
 						<strong>Withdrawal:</strong>{" "}
-						{WithdrawalTypeOptions[formData.withdrawalOption]}
-						{formData.withdrawalOption === WithdrawalTypeOptions.Fixed
-							? ` (${formData.fixedAmount} per withdrawal)`
-							: ` (max ${formData.maxWithdrawal} per withdrawal)`}
+						{WithdrawalTypeOptions[withdrawalOption]}
+						{withdrawalOption === WithdrawalTypeOptions.Fixed
+							? ` (${fixedAmount} per withdrawal)`
+							: ` (max ${maxWithdrawal} per withdrawal)`}
 					</div>
 					<div>
-						<strong>Interval:</strong> {formData.withdrawalInterval} day
-						{parseInt(formData.withdrawalInterval, 10) === 1 ? "" : "s"}
+						<strong>Interval:</strong> {withdrawalInterval} day
+						{parseInt(withdrawalInterval, 10) === 1 ? "" : "s"}
 					</div>
 					<div>
 						<strong>Strict Purpose:</strong>{" "}
-						{formData.strictPurpose ? "Yes" : "No"}
+						{strictPurpose ? "Yes" : "No"}
 					</div>
 					<div>
 						<strong>Emergency Withdrawal:</strong>{" "}
-						{formData.emergencyWithdrawalEnabled ? "Enabled" : "Disabled"}
+						{emergencyWithdrawalEnabled ? "Enabled" : "Disabled"}
 					</div>
 					<div>
 						<strong>One-time Only:</strong>{" "}
-						{formData.oneTimeWithdrawal ? "Yes" : "No"}
+						{oneTimeWithdrawal ? "Yes" : "No"}
 					</div>
-					{formData.enableCustomFee && (
+					{enableCustomFee && (
 						<div>
-							<strong>Custom Fee:</strong> {formData.customFee}%
+							<strong>Custom Fee:</strong> {customFee}%
 						</div>
 					)}
 					{isV2Contract && (
 						<>
 							<div>
 								<strong>Streaming:</strong>{" "}
-								{formData.streamingEnabled ? "Enabled" : "Disabled"}
-								{formData.streamingEnabled &&
-									formData.requireStreamApproval &&
+								{streamingEnabled ? "Enabled" : "Disabled"}
+								{streamingEnabled &&
+									requireStreamApproval &&
 									" (Manual Approval)"}
 							</div>
-							{formData.streamingEnabled && (
+							{streamingEnabled && (
 								<>
 									<div>
-										<strong>Max Stream Rate:</strong> {formData.maxStreamRate}{" "}
-										tokens/sec
+										<strong>Max Stream Rate:</strong>{" "}
+										{maxStreamRate} tokens/sec
 									</div>
 									<div>
 										<strong>Min Stream Duration:</strong>{" "}
-										{formData.minStreamDuration} hours
+										{minStreamDuration} hours
 									</div>
 								</>
 							)}
 							<div>
 								<strong>Auto-Swap ETH:</strong>{" "}
-								{formData.autoSwapEnabled ? "Enabled" : "Disabled"}
+								{autoSwapEnabled ? "Enabled" : "Disabled"}
 							</div>
 						</>
 					)}
diff --git a/client/components/nft/NFTGateInput.tsx b/client/components/nft/NFTGateInput.tsx
index 12da46b..1a9f253 100644
--- a/client/components/nft/NFTGateInput.tsx
+++ b/client/components/nft/NFTGateInput.tsx
@@ -2,6 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import {
 	AlertCircle,
 	CheckCircle2,
+	Clock,
 	ExternalLink,
 	ImageIcon,
 	Info,
@@ -14,7 +15,7 @@ import {
 } from "lucide-react";
 import Image from "next/image";
 import type React from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useReducer, useRef, useState } from "react";
 import { isAddress } from "viem";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -35,14 +36,15 @@ import { useEnhancedNFTValidation } from "@/hooks/nft/useEnhancedNFTValidation";
 import { AlchemyNFTProvider } from "@/lib/nft/AlchemyProvider";
 import { getAlchemyApiKey } from "@/lib/nft/config";
 
-// Input validation constants
+// ── Constants ──
+
 const VALIDATION_CONSTANTS = {
 	MAX_ADDRESS_LENGTH: 42,
 	MIN_ADDRESS_LENGTH: 42,
 	MAX_COLLECTION_NAME_LENGTH: 100,
 	MAX_DESCRIPTION_LENGTH: 500,
 	MAX_IMAGE_URL_LENGTH: 500,
-	MAX_QUANTITY: 1000000, // 1M max quantity
+	MAX_QUANTITY: 1000000,
 	MIN_QUANTITY: 1,
 	MAX_GATES_PER_JAR: 20,
 	DEBOUNCE_DELAY: 500,
@@ -57,7 +59,8 @@ const VALIDATION_CONSTANTS = {
 	],
 } as const;
 
-// Input sanitization utilities
+// ── Sanitization ──
+
 const sanitizeInput = {
 	address: (input: string): string => {
 		return input
@@ -71,20 +74,17 @@ const sanitizeInput = {
 		return input
 			.trim()
 			.slice(0, maxLength)
-			.replace(/[<>'"]/g, ""); // Remove potentially dangerous characters
+			.replace(/[<>'"]/g, "");
 	},
 
 	url: (input: string | undefined): string => {
 		if (!input) return "";
-
-		// Check for malicious patterns
 		for (const pattern of VALIDATION_CONSTANTS.MALICIOUS_PATTERNS) {
 			if (pattern.test(input)) {
 				console.warn("Malicious URL pattern detected, sanitizing:", input);
 				return "";
 			}
 		}
-
 		return input.slice(0, VALIDATION_CONSTANTS.MAX_IMAGE_URL_LENGTH);
 	},
 
@@ -97,18 +97,24 @@ const sanitizeInput = {
 	},
 };
 
-// Rate limiting hook
+// ── Rate Limiting Hook (enhanced with countdown) ──
+
+/**
+ * Rate limiter that tracks API call frequency within a sliding window.
+ * Returns both a gate function and a countdown (in seconds) until
+ * the next call slot opens — useful for showing "retry in Xs" in the UI.
+ */
 const useRateLimit = (maxCalls: number, windowMs: number) => {
 	const callsRef = useRef<number[]>([]);
+	const [resetIn, setResetIn] = useState(0);
+	const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
 	const isAllowed = useCallback(() => {
 		const now = Date.now();
 		const cutoff = now - windowMs;
 
-		// Remove old calls outside the window
 		callsRef.current = callsRef.current.filter((time) => time > cutoff);
 
-		// Check if we're under the limit
 		if (callsRef.current.length < maxCalls) {
 			callsRef.current.push(now);
 			return true;
@@ -117,9 +123,33 @@ const useRateLimit = (maxCalls: number, windowMs: number) => {
 		return false;
 	}, [maxCalls, windowMs]);
 
-	return { isAllowed };
+	// Update countdown when rate-limited
+	useEffect(() => {
+		const tick = () => {
+			const now = Date.now();
+			const cutoff = now - windowMs;
+			const activeCalls = callsRef.current.filter((time) => time > cutoff);
+
+			if (activeCalls.length >= maxCalls && activeCalls.length > 0) {
+				const oldestCall = activeCalls[0];
+				const msUntilReset = oldestCall + windowMs - now;
+				setResetIn(Math.max(0, Math.ceil(msUntilReset / 1000)));
+			} else {
+				setResetIn(0);
+			}
+		};
+
+		timerRef.current = setInterval(tick, 1000);
+		return () => {
+			if (timerRef.current) clearInterval(timerRef.current);
+		};
+	}, [maxCalls, windowMs]);
+
+	return { isAllowed, resetIn };
 };
 
+// ── Types ──
+
 enum NFTType {
 	None = 0,
 	ERC721 = 1,
@@ -135,13 +165,10 @@ export interface EnhancedNFTGate {
 	verified?: boolean;
 	floorPrice?: number;
 	totalSupply?: number;
-	// Quantity-based gating (ERC1155)
 	minQuantity?: number;
 	maxQuantity?: number;
 	enableQuantityGating?: boolean;
-	// Analytics
 	enableAnalytics?: boolean;
-	// Trait-based requirements (future)
 	requiredTraits?: Array<{
 		trait_type: string;
 		value: string | number;
@@ -170,6 +197,89 @@ interface CollectionPreview {
 	warnings?: string[];
 }
 
+// ── Form State Reducer ──
+
+interface NFTGateFormState {
+	nftAddress: string;
+	selectedType: NFTType;
+	debouncedAddress: string;
+	showAdvanced: boolean;
+	inputErrors: string[];
+	enableQuantityGating: boolean;
+	minQuantity: number;
+	maxQuantity: number;
+	enableAnalytics: boolean;
+	enableTraitGating: boolean;
+}
+
+type NFTGateFormAction =
+	| { type: "SET_ADDRESS"; payload: string }
+	| { type: "SET_TYPE"; payload: NFTType }
+	| { type: "SET_DEBOUNCED_ADDRESS"; payload: string }
+	| { type: "TOGGLE_ADVANCED" }
+	| { type: "SET_ERRORS"; payload: string[] }
+	| { type: "SET_QUANTITY_GATING"; payload: boolean }
+	| { type: "SET_MIN_QUANTITY"; payload: number }
+	| { type: "SET_MAX_QUANTITY"; payload: number }
+	| { type: "SET_ANALYTICS"; payload: boolean }
+	| { type: "SET_TRAIT_GATING"; payload: boolean }
+	| { type: "RESET" };
+
+const INITIAL_STATE: NFTGateFormState = {
+	nftAddress: "",
+	selectedType: NFTType.ERC721,
+	debouncedAddress: "",
+	showAdvanced: false,
+	inputErrors: [],
+	enableQuantityGating: false,
+	minQuantity: 1,
+	maxQuantity: 10,
+	enableAnalytics: true,
+	enableTraitGating: false,
+};
+
+function nftGateFormReducer(
+	state: NFTGateFormState,
+	action: NFTGateFormAction,
+): NFTGateFormState {
+	switch (action.type) {
+		case "SET_ADDRESS":
+			return { ...state, nftAddress: action.payload };
+		case "SET_TYPE":
+			return {
+				...state,
+				selectedType: action.payload,
+				// Auto-disable quantity gating when switching to ERC721
+				enableQuantityGating:
+					action.payload === NFTType.ERC721
+						? false
+						: state.enableQuantityGating,
+			};
+		case "SET_DEBOUNCED_ADDRESS":
+			return { ...state, debouncedAddress: action.payload };
+		case "TOGGLE_ADVANCED":
+			return { ...state, showAdvanced: !state.showAdvanced };
+		case "SET_ERRORS":
+			return { ...state, inputErrors: action.payload };
+		case "SET_QUANTITY_GATING":
+			return { ...state, enableQuantityGating: action.payload };
+		case "SET_MIN_QUANTITY":
+			return { ...state, minQuantity: action.payload };
+		case "SET_MAX_QUANTITY":
+			return { ...state, maxQuantity: action.payload };
+		case "SET_ANALYTICS":
+			return { ...state, enableAnalytics: action.payload };
+		case "SET_TRAIT_GATING":
+			return { ...state, enableTraitGating: action.payload };
+		case "RESET":
+			return INITIAL_STATE;
+		default:
+			return state;
+	}
+}
+
+// ── Sub-components ──
+
 const NFTCard: React.FC<{
 	preview: CollectionPreview;
 	type: "ERC721" | "ERC1155";
@@ -261,35 +371,38 @@ const NFTCard: React.FC<{
 	</Card>
 );
 
+// ── Main Component ──
+
 export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 	onAddNFT,
 	existingGates = [],
 	className = "",
 }) => {
-	const [nftAddress, setNftAddress] = useState("");
-	const [selectedType, setSelectedType] = useState<NFTType>(NFTType.ERC721);
-	const [debouncedAddress, setDebouncedAddress] = useState("");
-	const [showAdvanced, setShowAdvanced] = useState(false);
-	const [inputErrors, setInputErrors] = useState<string[]>([]);
-
-	// Advanced configuration state
-	const [enableQuantityGating, setEnableQuantityGating] = useState(false);
-	const [minQuantity, setMinQuantity] = useState(1);
-	const [maxQuantity, setMaxQuantity] = useState(10);
-	const [enableAnalytics, setEnableAnalytics] = useState(true);
-	const [enableTraitGating, setEnableTraitGating] = useState(false);
-
-	// Rate limiting for API calls
-	const { isAllowed: canMakeApiCall } = useRateLimit(
+	const [state, dispatch] = useReducer(nftGateFormReducer, INITIAL_STATE);
+
+	const {
+		nftAddress,
+		selectedType,
+		debouncedAddress,
+		showAdvanced,
+		inputErrors,
+		enableQuantityGating,
+		minQuantity,
+		maxQuantity,
+		enableAnalytics,
+		enableTraitGating,
+	} = state;
+
+	// Rate limiting with countdown
+	const { isAllowed: canMakeApiCall, resetIn } = useRateLimit(
 		VALIDATION_CONSTANTS.MAX_API_CALLS_PER_MINUTE,
-		60 * 1000, // 1 minute window
+		60 * 1000,
 	);
 
-	// Enhanced input validation
+	// Input validation
 	const validateInputs = useCallback(() => {
 		const errors: string[] = [];
 
-		// Address validation
 		if (nftAddress) {
 			const sanitizedAddress = sanitizeInput.address(nftAddress);
 			if (sanitizedAddress.length < VALIDATION_CONSTANTS.MIN_ADDRESS_LENGTH) {
@@ -298,7 +411,6 @@ export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 			if (!isAddress(sanitizedAddress)) {
 				errors.push("Invalid Ethereum address format");
 			}
-			// Check for common mistake patterns
 			if (nftAddress.includes(" ")) {
 				errors.push("Address cannot contain spaces");
 			}
@@ -310,7 +422,6 @@ export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 			}
 		}
 
-		// Quantity validation
 		if (enableQuantityGating) {
 			if (minQuantity < VALIDATION_CONSTANTS.MIN_QUANTITY) {
 				errors.push(
@@ -327,14 +438,13 @@ export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 			}
 		}
 
-		// Check for too many gates
 		if (existingGates.length >= VALIDATION_CONSTANTS.MAX_GATES_PER_JAR) {
 			errors.push(
 				`Cannot add more than ${VALIDATION_CONSTANTS.MAX_GATES_PER_JAR} NFT gates per jar`,
 			);
 		}
 
-		setInputErrors(errors);
+		dispatch({ type: "SET_ERRORS", payload: errors });
 		return errors.length === 0;
 	}, [
 		nftAddress,
@@ -344,36 +454,36 @@ export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 		existingGates.length,
 	]);
 
-	// Enhanced debounced address with validation and sanitization
+	// Debounced address with validation
 	useEffect(() => {
 		const timer = setTimeout(() => {
 			if (nftAddress.trim()) {
 				const sanitized = sanitizeInput.address(nftAddress);
 				if (validateInputs()) {
-					setDebouncedAddress(sanitized);
+					dispatch({ type: "SET_DEBOUNCED_ADDRESS", payload: sanitized });
 				} else {
-					setDebouncedAddress("");
+					dispatch({ type: "SET_DEBOUNCED_ADDRESS", payload: "" });
 				}
 			} else {
-				setDebouncedAddress("");
-				setInputErrors([]);
+				dispatch({ type: "SET_DEBOUNCED_ADDRESS", payload: "" });
+				dispatch({ type: "SET_ERRORS", payload: [] });
 			}
 		}, VALIDATION_CONSTANTS.DEBOUNCE_DELAY);
 		return () => clearTimeout(timer);
 	}, [nftAddress, validateInputs]);
 
-	// Enhanced validation with rate limiting
+	// Contract validation
 	const { isValid, detectedType, isLoading, error } = useEnhancedNFTValidation(
 		canMakeApiCall() ? debouncedAddress : "",
 	);
 
-	// Enhanced collection preview fetching with error boundaries
+	// Collection preview
 	const {
 		data: collectionPreview,
 		isLoading: isLoadingPreview,
 		error: previewError,
 	} = useQuery({
-		queryKey: ["nft-collection-preview", debouncedAddress, canMakeApiCall],
+		queryKey: ["nft-collection-preview", debouncedAddress],
 		queryFn: async (): Promise<CollectionPreview | null> => {
 			if (
 				!debouncedAddress ||
@@ -390,8 +500,6 @@ export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 				}
 
 				const provider = new AlchemyNFTProvider(apiKey);
-
-				// Enhanced validation with malicious contract detection
 				const validation = await provider.validateContract(debouncedAddress);
 
 				if (!validation.isValid) {
@@ -404,9 +512,8 @@ export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 					return null;
 				}
 
-				// Safe metadata fetching with timeout
 				const timeoutPromise = new Promise<never>((_, reject) => {
-					setTimeout(() => reject(new Error("Request timeout")), 10000); // 10s timeout
+					setTimeout(() => reject(new Error("Request timeout")), 10000);
 				});
 
 				const metadata = await Promise.race([
@@ -414,7 +521,6 @@ export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 					timeoutPromise,
 				]);
 
-				// Sanitize all returned data
 				return {
 					name: sanitizeInput.string(
 						metadata.collection || metadata.name,
@@ -427,14 +533,14 @@ export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 					image: sanitizeInput.url(metadata.image),
 					contractType: metadata.tokenType,
 					verified:
-						!validation.isMalicious && (validation.warnings?.length ?? 0) === 0,
+						!validation.isMalicious &&
+						(validation.warnings?.length ?? 0) === 0,
 					isActive: true,
 					warnings: validation.warnings,
 				};
 			} catch (error) {
 				console.error("Failed to fetch collection preview:", error);
 
-				// Check if it's a rate limit error
 				if (error instanceof Error && error.message.includes("rate limit")) {
 					throw new Error(
 						"Rate limit exceeded. Please wait before trying again.",
@@ -450,25 +556,23 @@ export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 			isValid &&
 			canMakeApiCall()
 		),
-		staleTime: 5 * 60 * 1000, // 5 minutes
-		gcTime: 30 * 60 * 1000, // 30 minutes
+		staleTime: 5 * 60 * 1000,
+		gcTime: 30 * 60 * 1000,
 		retry: (failureCount, error) => {
-			// Don't retry rate limit errors
 			if (error instanceof Error && error.message.includes("rate limit")) {
 				return false;
 			}
-			return failureCount < 2; // Only retry twice
+			return failureCount < 2;
 		},
-		retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 5000), // Exponential backoff
+		retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 5000),
 	});
 
-	// Check if user-selected type matches detected type
+	// Type matching
 	const typeMatches =
 		!detectedType ||
 		(detectedType === "ERC721" && selectedType === NFTType.ERC721) ||
 		(detectedType === "ERC1155" && selectedType === NFTType.ERC1155);
 
-	// Check for duplicates
 	const isDuplicate = existingGates.some(
 		(gate) => gate.address.toLowerCase() === nftAddress.toLowerCase(),
 	);
@@ -476,24 +580,16 @@ export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 	const canAdd =
 		nftAddress && isValid && typeMatches && !isLoading && !isDuplicate;
 
-	// Auto-populate type if detected type is different
+	// Auto-correct type when detected type differs
 	useEffect(() => {
 		if (detectedType && !typeMatches) {
 			const newType =
 				detectedType === "ERC721" ? NFTType.ERC721 : NFTType.ERC1155;
-			setSelectedType(newType);
+			dispatch({ type: "SET_TYPE", payload: newType });
 		}
 	}, [detectedType, typeMatches]);
 
-	// Reset quantity gating when type changes to ERC721
-	useEffect(() => {
-		if (selectedType === NFTType.ERC721) {
-			setEnableQuantityGating(false);
-		}
-	}, [selectedType]);
-
 	const handleAddNFT = useCallback(() => {
-		// Final validation check before adding
 		if (!canAdd || !validateInputs() || inputErrors.length > 0) {
 			console.warn("Cannot add NFT gate: validation failed", {
 				inputErrors,
@@ -502,7 +598,6 @@ export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 			return;
 		}
 
-		// Sanitize all inputs before creating the gate
 		const sanitizedAddress = sanitizeInput.address(nftAddress);
 		const sanitizedMinQuantity = sanitizeInput.quantity(minQuantity);
 		const sanitizedMaxQuantity = sanitizeInput.quantity(maxQuantity);
@@ -524,7 +619,6 @@ export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 			enableAnalytics,
 		};
 
-		// Add quantity-based gating for ERC1155 with enhanced validation
 		if (selectedType === NFTType.ERC1155 && enableQuantityGating) {
 			if (sanitizedMinQuantity < sanitizedMaxQuantity) {
 				gate.enableQuantityGating = true;
@@ -535,13 +629,11 @@ export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 			}
 		}
 
-		// Add trait-based requirements (placeholder for future implementation)
 		if (enableTraitGating) {
 			gate.enableTraitGating = true;
-			gate.requiredTraits = []; // Will be populated when trait gating is implemented
+			gate.requiredTraits = [];
 		}
 
-		// Log for security monitoring
 		console.info("Adding NFT gate:", {
 			address: sanitizedAddress,
 			type: selectedType === NFTType.ERC721 ? "ERC721" : "ERC1155",
@@ -551,17 +643,7 @@ export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 		});
 
 		onAddNFT(gate);
-
-		// Reset form with cleaned state
-		setNftAddress("");
-		setSelectedType(NFTType.ERC721);
-		setShowAdvanced(false);
-		setEnableQuantityGating(false);
-		setMinQuantity(1);
-		setMaxQuantity(10);
-		setEnableTraitGating(false);
-		setEnableAnalytics(true);
-		setInputErrors([]);
+		dispatch({ type: "RESET" });
 	}, [
 		canAdd,
 		validateInputs,
@@ -590,14 +672,12 @@ export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 	};
 
 	const getValidationMessage = () => {
-		// Show input validation errors first
 		if (inputErrors.length > 0) {
 			return inputErrors.join(", ");
 		}
 
-		// Show rate limit warning
-		if (!canMakeApiCall()) {
-			return "Rate limit reached. Please wait before trying again.";
+		if (resetIn > 0) {
+			return `Rate limit reached. Retry in ${resetIn}s.`;
 		}
 
 		if (!debouncedAddress) return null;
@@ -617,9 +697,9 @@ export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 		if (isValid && typeMatches) {
 			const warnings = collectionPreview?.warnings;
 			const warningText = warnings?.length
-				? ` (⚠️ ${warnings.length} warning${warnings.length > 1 ? "s" : ""})`
+				? ` (${warnings.length} warning${warnings.length > 1 ? "s" : ""})`
 				: "";
-			return `✓ Valid ${detectedType} contract${collectionPreview?.verified ? " (verified)" : ""}${warningText}`;
+			return `Valid ${detectedType} contract${collectionPreview?.verified ? " (verified)" : ""}${warningText}`;
 		}
 		return null;
 	};
@@ -635,7 +715,7 @@ export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 						type="button"
 						variant="ghost"
 						size="sm"
-						onClick={() => setShowAdvanced(!showAdvanced)}
+						onClick={() => dispatch({ type: "TOGGLE_ADVANCED" })}
 						className="text-sm text-gray-600 hover:text-[#ff5e14]"
 					>
 						<Settings className="h-4 w-4 mr-1" />
@@ -643,27 +723,40 @@ export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 					</Button>
 				</div>
 
+				{/* Rate limit countdown banner */}
+				{resetIn > 0 && (
+					<div className="flex items-center gap-2 px-3 py-2 rounded bg-amber-50 text-amber-800 border border-amber-200 text-xs">
+						<Clock className="h-3 w-3" />
+						<span>
+							API rate limit active. Next request available in{" "}
+							<strong>{resetIn}s</strong>.
+						</span>
+					</div>
+				)}
+
 				{/* NFT Address Input */}
 				<div className="grid grid-cols-1 md:grid-cols-12 gap-3">
 					<div className="md:col-span-6">
-						<Label className="text-sm text-[#3c2a14]">
+						<Label htmlFor="nft-contract-address" className="text-sm text-[#3c2a14]">
 							NFT Contract Address
 						</Label>
 						<div className="relative">
 							<Input
+								id="nft-contract-address"
 								placeholder="0x... (paste NFT contract address)"
 								className="bg-white border-gray-300 placeholder:text-[#8b7355] text-[#3c2a14] pr-8"
 								value={nftAddress}
 								onChange={(e) => {
 									const input = e.target.value.trim();
-									// Basic sanitization on input - full sanitization happens on debounce
 									const sanitized = input.slice(
 										0,
 										VALIDATION_CONSTANTS.MAX_ADDRESS_LENGTH,
 									);
-									setNftAddress(sanitized);
+									dispatch({ type: "SET_ADDRESS", payload: sanitized });
 								}}
 								maxLength={VALIDATION_CONSTANTS.MAX_ADDRESS_LENGTH}
+								aria-invalid={inputErrors.length > 0}
+								aria-describedby={inputErrors.length > 0 ? "nft-address-errors" : undefined}
 							/>
 							<div className="absolute right-2 top-1/2 transform -translate-y-1/2">
 								{getValidationIcon()}
@@ -676,7 +769,10 @@ export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 						<Select
 							value={selectedType.toString()}
 							onValueChange={(value) =>
-								setSelectedType(Number(value) as NFTType)
+								dispatch({
+									type: "SET_TYPE",
+									payload: Number(value) as NFTType,
+								})
 							}
 						>
 							<SelectTrigger className="bg-white border-gray-300">
@@ -704,23 +800,37 @@ export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 				</div>
 
 				{/* Validation Message */}
-				{debouncedAddress && (
+				{(debouncedAddress || resetIn > 0) && (
 					<div
+						id="nft-address-errors"
+						role="status"
 						className={`text-xs px-3 py-2 rounded ${
 							isValid && typeMatches && !isDuplicate
 								? "bg-green-50 text-green-700 border border-green-200"
-								: error || !typeMatches || isDuplicate
+								: error || !typeMatches || isDuplicate || resetIn > 0
 									? "bg-red-50 text-red-700 border border-red-200"
 									: "bg-gray-50 text-gray-600 border border-gray-200"
 						}`}
 					>
 						<div className="flex items-center gap-1">
-							{getValidationIcon()}
+							{resetIn > 0 ? (
+								<Clock className="h-4 w-4 text-amber-500" />
+							) : (
+								getValidationIcon()
+							)}
 							{getValidationMessage()}
 						</div>
 					</div>
 				)}
 
+				{/* Debounce loading indicator */}
+				{nftAddress.trim() && !debouncedAddress && inputErrors.length === 0 && (
+					<div className="flex items-center gap-2 text-xs text-gray-500">
+						<Loader2 className="h-3 w-3 animate-spin" />
+						<span>Waiting for input...</span>
+					</div>
+				)}
+
 				{/* Collection Preview */}
 				{collectionPreview && isValid && typeMatches && (
 					<div className="border border-gray-200 rounded-lg p-4 bg-gray-50">
@@ -754,7 +864,10 @@ export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 											id="enableQuantity"
 											checked={enableQuantityGating}
 											onCheckedChange={(checked) =>
-												setEnableQuantityGating(checked === true)
+												dispatch({
+													type: "SET_QUANTITY_GATING",
+													payload: checked === true,
+												})
 											}
 										/>
 										<Label
@@ -773,9 +886,13 @@ export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 												</Label>
 												<div className="flex items-center gap-4 mt-2">
 													<Slider
+														aria-label="Minimum quantity required"
 														value={[minQuantity]}
 														onValueChange={(value) =>
-															setMinQuantity(sanitizeInput.quantity(value[0]))
+															dispatch({
+																type: "SET_MIN_QUANTITY",
+																payload: sanitizeInput.quantity(value[0]),
+															})
 														}
 														max={Math.min(
 															100,
@@ -797,9 +914,13 @@ export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 												</Label>
 												<div className="flex items-center gap-4 mt-2">
 													<Slider
+														aria-label="Maximum quantity allowed"
 														value={[maxQuantity]}
 														onValueChange={(value) =>
-															setMaxQuantity(sanitizeInput.quantity(value[0]))
+															dispatch({
+																type: "SET_MAX_QUANTITY",
+																payload: sanitizeInput.quantity(value[0]),
+															})
 														}
 														max={Math.min(
 															1000,
@@ -825,15 +946,12 @@ export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 
 							<Separator />
 
-							{/* Trait-Based Gating (Future Feature) */}
+							{/* Trait-Based Gating (disabled — coming soon) */}
 							<div className="space-y-4">
 								<div className="flex items-center space-x-2">
 									<Checkbox
 										id="enableTraits"
-										checked={enableTraitGating}
-										onCheckedChange={(checked) =>
-											setEnableTraitGating(checked === true)
-										}
+										checked={false}
 										disabled={true}
 									/>
 									<Label
@@ -846,16 +964,6 @@ export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 										</Badge>
 									</Label>
 								</div>
-
-								{enableTraitGating && (
-									<div className="ml-6 p-4 bg-gray-50 rounded-lg border border-gray-200">
-										<p className="text-sm text-gray-600">
-											🚧 Trait-based gating will allow you to require specific
-											NFT traits (e.g., rare attributes, specific backgrounds,
-											etc.)
-										</p>
-									</div>
-								)}
 							</div>
 
 							<Separator />
@@ -866,7 +974,10 @@ export const EnhancedNFTGateInput: React.FC<EnhancedNFTGateInputProps> = ({
 									id="enableAnalytics"
 									checked={enableAnalytics}
 									onCheckedChange={(checked) =>
-										setEnableAnalytics(checked === true)
+										dispatch({
+											type: "SET_ANALYTICS",
+											payload: checked === true,
+										})
 									}
 								/>
 								<Label htmlFor="enableAnalytics" className="text-sm">
@@ -906,7 +1017,7 @@ export const EnhancedNFTGatesList: React.FC<{
 			</Label>
 
 			{gates.map((gate, index) => (
-				<Card key={index} className="border border-gray-200">
+				<Card key={`${gate.address}-${index}`} className="border border-gray-200">
 					<CardContent className="p-4">
 						<div className="flex items-start justify-between">
 							<div className="flex items-center gap-3 flex-1">
@@ -974,6 +1085,7 @@ export const EnhancedNFTGatesList: React.FC<{
 								size="sm"
 								onClick={() => onRemove(index)}
 								className="text-red-500 hover:text-red-700 hover:bg-red-50"
+								aria-label={`Remove ${gate.name || "NFT"} gate`}
 							>
 								<Trash2 className="h-4 w-4" />
 							</Button>
diff --git a/client/components/nft/NFTSelector.tsx b/client/components/nft/NFTSelector.tsx
index d2fc535..08f09cc 100644
--- a/client/components/nft/NFTSelector.tsx
+++ b/client/components/nft/NFTSelector.tsx
@@ -139,6 +139,10 @@ const NFTCard = memo<{
 	if (viewMode === "list") {
 		return (
 			<Card
+				role="button"
+				tabIndex={0}
+				aria-pressed={isSelected}
+				aria-label={`Select ${getNFTName(nft)}${getCollectionName(nft) ? ` from ${getCollectionName(nft)}` : ""}`}
 				className={cn(
 					"cursor-pointer transition-all duration-200 hover:shadow-md",
 					isSelected
@@ -146,6 +150,12 @@ const NFTCard = memo<{
 						: "hover:border-[#ff5e14]",
 				)}
 				onClick={handleSelect}
+				onKeyDown={(e) => {
+					if (e.key === "Enter" || e.key === " ") {
+						e.preventDefault();
+						handleSelect();
+					}
+				}}
 			>
 				<CardContent className="p-4">
 					<div className="flex items-center gap-4">
@@ -203,6 +213,10 @@ const NFTCard = memo<{
 
 	return (
 		<Card
+			role="button"
+			tabIndex={0}
+			aria-pressed={isSelected}
+			aria-label={`Select ${getNFTName(nft)}${getCollectionName(nft) ? ` from ${getCollectionName(nft)}` : ""}`}
 			className={cn(
 				"relative cursor-pointer transition-all duration-200 hover:shadow-md group",
 				isSelected
@@ -211,6 +225,12 @@ const NFTCard = memo<{
 			)}
 			style={{ width, height }}
 			onClick={handleSelect}
+			onKeyDown={(e) => {
+				if (e.key === "Enter" || e.key === " ") {
+					e.preventDefault();
+					handleSelect();
+				}
+			}}
 		>
 			<CardContent className="relative p-0 w-full h-full flex flex-col">
 				{!imageLoaded && !imageError && <Skeleton className="w-full h-full" />}
@@ -362,6 +382,7 @@ export const NFTSelector: React.FC<NFTSelectorProps> = ({
 							size="sm"
 							onClick={handleClearSearch}
 							className="absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0"
+							aria-label="Clear search"
 						>
 							<X className="h-4 w-4" />
 						</Button>
@@ -369,11 +390,13 @@ export const NFTSelector: React.FC<NFTSelectorProps> = ({
 				</div>
 
 				{!isMobile && (
-					<div className="flex gap-2">
+					<div className="flex gap-2" role="group" aria-label="View mode">
 						<Button
 							variant={viewMode === "grid" ? "default" : "outline"}
 							size="sm"
 							onClick={() => setViewMode("grid")}
+							aria-label="Grid view"
+							aria-pressed={viewMode === "grid"}
 						>
 							<Grid className="h-4 w-4" />
 						</Button>
@@ -381,6 +404,8 @@ export const NFTSelector: React.FC<NFTSelectorProps> = ({
 							variant={viewMode === "list" ? "default" : "outline"}
 							size="sm"
 							onClick={() => setViewMode("list")}
+							aria-label="List view"
+							aria-pressed={viewMode === "list"}
 						>
 							<List className="h-4 w-4" />
 						</Button>
diff --git a/client/components/nft/ProtocolConfigBase.tsx b/client/components/nft/ProtocolConfigBase.tsx
index 355892f..2aaa6f5 100644
--- a/client/components/nft/ProtocolConfigBase.tsx
+++ b/client/components/nft/ProtocolConfigBase.tsx
@@ -12,6 +12,8 @@ export interface ProtocolConfigBaseProps {
 	icon?: string | ReactNode;
 	color?: string;
 	validationError?: string | null;
+	/** Stable ID applied to the error alert so inputs can reference it via aria-describedby */
+	errorId?: string;
 	isLoading?: boolean;
 	className?: string;
 	learnMoreUrl?: string;
@@ -24,6 +26,7 @@ export const ProtocolConfigBase: React.FC<ProtocolConfigBaseProps> = ({
 	icon,
 	color = "bg-gray-500",
 	validationError,
+	errorId,
 	isLoading = false,
 	className,
 	learnMoreUrl,
@@ -76,7 +79,7 @@ export const ProtocolConfigBase: React.FC<ProtocolConfigBaseProps> = ({
 				) : (
 					<>
 						{validationError && (
-							<Alert variant="destructive" className="mb-4">
+							<Alert variant="destructive" className="mb-4" id={errorId} role="alert">
 								<AlertCircle className="h-4 w-4" />
 								<AlertDescription>{validationError}</AlertDescription>
 							</Alert>
diff --git a/client/components/nft/ProtocolSelector.tsx b/client/components/nft/ProtocolSelector.tsx
index 1efa239..a9c40a6 100644
--- a/client/components/nft/ProtocolSelector.tsx
+++ b/client/components/nft/ProtocolSelector.tsx
@@ -1,6 +1,6 @@
-import { Monitor, Shield, Smartphone, Users } from "lucide-react";
+import { ChevronDown, Monitor, Smartphone, Users } from "lucide-react";
 import type React from "react";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import {
 	Accordion,
 	AccordionContent,
@@ -17,7 +17,6 @@ import { NFTSelector } from "./NFTSelector";
 import { ACCESS_CONTROL_DOC_LINKS } from "./doc-links";
 import { HatsConfig } from "./protocols/HatsConfig";
 import { HypercertConfig } from "./protocols/HypercertConfig";
-// Import protocol configs
 import { POAPConfig } from "./protocols/POAPConfig";
 import { UnlockConfig } from "./protocols/UnlockConfig";
 
@@ -42,66 +41,177 @@ export interface ProtocolSelectorProps {
 	forceMobile?: boolean;
 	forceDesktop?: boolean;
 	showViewToggle?: boolean;
+	/** Restrict which methods are shown (defaults to all) */
+	visibleMethods?: AccessMethod[];
+	/** Highlight a method as recommended */
+	recommendedMethod?: AccessMethod;
 }
 
-const ACCESS_METHODS = [
+interface MethodDefinition {
+	id: AccessMethod;
+	name: string;
+	icon: React.ReactNode;
+	color: string;
+	borderColor: string;
+	badge: React.ReactNode;
+	learnMoreUrl: string;
+	description: string;
+}
+
+const ACCESS_METHODS: MethodDefinition[] = [
 	{
-		id: "Allowlist" as AccessMethod,
+		id: "Allowlist",
 		name: "Allowlist",
 		icon: <Users className="h-5 w-5" />,
 		color: "bg-blue-500",
+		borderColor: "border-l-blue-500",
 		badge: <Badge className="bg-blue-100 text-blue-800">Simple</Badge>,
 		learnMoreUrl: ACCESS_CONTROL_DOC_LINKS.allowlist,
+		description: "Curate a specific list of wallet addresses",
 	},
 	{
-		id: "NFT" as AccessMethod,
+		id: "NFT",
 		name: "NFT Collection",
-		icon: <Shield className="h-5 w-5" />,
+		icon: (
+			<span className="text-lg" role="img" aria-label="shield">
+				🛡️
+			</span>
+		),
 		color: "bg-purple-500",
+		borderColor: "border-l-purple-500",
 		badge: <Badge className="bg-purple-100 text-purple-800">Flexible</Badge>,
 		learnMoreUrl: ACCESS_CONTROL_DOC_LINKS.nft,
+		description: "Gate access by NFT ownership",
 	},
 	{
-		id: "POAP" as AccessMethod,
+		id: "POAP",
 		name: "POAP",
-		icon: <span className="text-lg">🎖️</span>,
+		icon: (
+			<span className="text-lg" role="img" aria-label="medal">
+				🎖️
+			</span>
+		),
 		color: "bg-purple-500",
+		borderColor: "border-l-purple-500",
 		badge: <Badge className="bg-purple-100 text-purple-800">Event</Badge>,
 		learnMoreUrl: ACCESS_CONTROL_DOC_LINKS.poap,
+		description: "Require a specific POAP event token",
 	},
 	{
-		id: "Hats" as AccessMethod,
+		id: "Hats",
 		name: "Hats Protocol",
-		icon: <span className="text-lg">🎩</span>,
+		icon: (
+			<span className="text-lg" role="img" aria-label="top hat">
+				🎩
+			</span>
+		),
 		color: "bg-yellow-500",
+		borderColor: "border-l-yellow-500",
 		badge: <Badge className="bg-yellow-100 text-yellow-800">Roles</Badge>,
 		learnMoreUrl: ACCESS_CONTROL_DOC_LINKS.hats,
+		description: "Gate by on-chain role via Hats Protocol",
 	},
 	{
-		id: "Hypercert" as AccessMethod,
+		id: "Hypercert",
 		name: "Hypercerts",
-		icon: <span className="text-lg">🏆</span>,
+		icon: (
+			<span className="text-lg" role="img" aria-label="trophy">
+				🏆
+			</span>
+		),
 		color: "bg-green-500",
+		borderColor: "border-l-green-500",
 		badge: <Badge className="bg-green-100 text-green-800">Impact</Badge>,
 		learnMoreUrl: ACCESS_CONTROL_DOC_LINKS.hypercerts,
+		description: "Require ownership of a Hypercert",
 	},
 	{
-		id: "Unlock" as AccessMethod,
+		id: "Unlock",
 		name: "Unlock Protocol",
-		icon: <span className="text-lg">🔓</span>,
+		icon: (
+			<span className="text-lg" role="img" aria-label="unlocked">
+				🔓
+			</span>
+		),
 		color: "bg-blue-500",
+		borderColor: "border-l-blue-500",
 		badge: <Badge className="bg-blue-100 text-blue-800">Subscription</Badge>,
 		learnMoreUrl: ACCESS_CONTROL_DOC_LINKS.unlock,
+		description: "Gate by Unlock Protocol membership key",
 	},
 ];
 
+/**
+ * Renders the appropriate protocol configuration component for a given method.
+ * Uses the real protocol config components (POAPConfig, HatsConfig, etc.)
+ * instead of basic input stubs.
+ */
+const ConfigurationPanel: React.FC<{
+	method: AccessMethod;
+	config?: any;
+	onConfigChange: (config: any) => void;
+}> = ({ method, config, onConfigChange }) => {
+	switch (method) {
+		case "Allowlist":
+			return (
+				<div data-testid="allowlist-config" className="py-2">
+					<p className="text-sm text-[#8b7355]">
+						No additional configuration needed. Access is determined by a
+						separate allowlist management system after jar creation.
+					</p>
+				</div>
+			);
+
+		case "NFT":
+			return (
+				<div data-testid="nft-config">
+					<NFTSelector
+						onSelect={(nft) => onConfigChange({ nftGate: nft })}
+						selectedNFT={config?.nftGates?.[0]}
+						userCollectionOnly={false}
+						maxHeight="300px"
+						cardSize="sm"
+					/>
+				</div>
+			);
+
+		case "POAP":
+			return (
+				<POAPConfig onConfigChange={onConfigChange} initialConfig={config} />
+			);
+
+		case "Hats":
+			return (
+				<HatsConfig onConfigChange={onConfigChange} initialConfig={config} />
+			);
+
+		case "Hypercert":
+			return (
+				<HypercertConfig
+					onConfigChange={onConfigChange}
+					initialConfig={config}
+				/>
+			);
+
+		case "Unlock":
+			return (
+				<UnlockConfig onConfigChange={onConfigChange} initialConfig={config} />
+			);
+
+		default:
+			return null;
+	}
+};
+
 export const ProtocolSelector: React.FC<ProtocolSelectorProps> = ({
 	onConfigChange,
 	initialConfig,
 	className,
 	forceMobile = false,
 	forceDesktop = false,
-	showViewToggle = true,
+	showViewToggle = false,
+	visibleMethods,
+	recommendedMethod,
 }) => {
 	const [selectedMethod, setSelectedMethod] = useState<AccessMethod>(
 		initialConfig?.method || "Allowlist",
@@ -109,12 +219,26 @@ export const ProtocolSelector: React.FC<ProtocolSelectorProps> = ({
 	const [viewMode, setViewMode] = useState<"auto" | "mobile" | "desktop">(
 		"auto",
 	);
-	const [expandedConfig, setExpandedConfig] = useState<string | null>(
-		initialConfig?.method || null,
-	);
 
 	const { isMobile } = useResponsive();
 
+	const filteredMethods = useMemo(
+		() =>
+			visibleMethods
+				? ACCESS_METHODS.filter((m) => visibleMethods.includes(m.id))
+				: ACCESS_METHODS,
+		[visibleMethods],
+	);
+
+	useEffect(() => {
+		if (filteredMethods.length === 0) return;
+		if (filteredMethods.some((method) => method.id === selectedMethod)) return;
+
+		const fallbackMethod = filteredMethods[0].id;
+		setSelectedMethod(fallbackMethod);
+		onConfigChange({ ...initialConfig, method: fallbackMethod });
+	}, [filteredMethods, selectedMethod, onConfigChange, initialConfig]);
+
 	// Determine actual view mode
 	const actualViewMode =
 		forceMobile || (viewMode === "auto" && isMobile) || viewMode === "mobile"
@@ -124,8 +248,7 @@ export const ProtocolSelector: React.FC<ProtocolSelectorProps> = ({
 	const handleMethodSelect = useCallback(
 		(method: AccessMethod) => {
 			setSelectedMethod(method);
-			setExpandedConfig(method);
-			onConfigChange({ method, ...initialConfig });
+			onConfigChange({ ...initialConfig, method });
 		},
 		[onConfigChange, initialConfig],
 	);
@@ -140,86 +263,11 @@ export const ProtocolSelector: React.FC<ProtocolSelectorProps> = ({
 		[selectedMethod, onConfigChange],
 	);
 
-	// Configuration Panel Component
-	const ConfigurationPanel: React.FC<{
-		method: AccessMethod;
-		config?: Partial<ProtocolConfig>;
-		onConfigChange: (config: ProtocolConfig) => void;
-	}> = ({ method, config, onConfigChange }) => {
-		switch (method) {
-			case "POAP":
-				return (
-					<div data-testid="poap-config">
-						<p>POAP Configuration</p>
-						<input
-							data-testid="poap-event-id-input"
-							placeholder="POAP Event ID"
-							value={config?.eventId || ""}
-							onChange={(e) =>
-								onConfigChange({ method, eventId: e.target.value })
-							}
-						/>
-					</div>
-				);
-			case "Unlock":
-				return (
-					<div data-testid="unlock-config">
-						<p>Unlock Protocol Configuration</p>
-						<input
-							data-testid="unlock-lock-address-input"
-							placeholder="Lock Address"
-							value={config?.lockAddress || ""}
-							onChange={(e) =>
-								onConfigChange({ method, lockAddress: e.target.value })
-							}
-						/>
-					</div>
-				);
-			case "Hats":
-				return (
-					<div data-testid="hats-config">
-						<p>Hats Protocol Configuration</p>
-						<input
-							data-testid="hats-id-input"
-							placeholder="Hat ID"
-							value={config?.hatId || ""}
-							onChange={(e) =>
-								onConfigChange({ method, hatId: e.target.value })
-							}
-						/>
-					</div>
-				);
-			case "Hypercert":
-				return (
-					<div data-testid="hypercert-config">
-						<p>Hypercert Configuration</p>
-						<input
-							data-testid="hypercert-id-input"
-							placeholder="Hypercert ID"
-							value={config?.tokenId || ""}
-							onChange={(e) =>
-								onConfigChange({ method, tokenId: e.target.value })
-							}
-						/>
-					</div>
-				);
-			case "NFT":
-				return (
-					<div data-testid="nft-config">
-						<NFTSelector
-							onSelect={(nft) => onConfigChange({ method, nftGate: nft })}
-						/>
-					</div>
-				);
-			default:
-				return (
-					<div data-testid="allowlist-config">
-						<p>Allowlist Configuration</p>
-					</div>
-				);
-		}
-	};
+	const selectedMethodDef = ACCESS_METHODS.find(
+		(m) => m.id === selectedMethod,
+	);
 
+	// ── Mobile View ──
 	if (actualViewMode === "mobile") {
 		return (
 			<div className={cn("space-y-4", className)}>
@@ -251,7 +299,7 @@ export const ProtocolSelector: React.FC<ProtocolSelectorProps> = ({
 				<div>
 					<h3 className="font-medium text-sm mb-3">Choose Access Method</h3>
 					<div className="grid grid-cols-3 gap-2">
-						{ACCESS_METHODS.map((method) => (
+						{filteredMethods.map((method) => (
 							<Button
 								key={method.id}
 								variant={selectedMethod === method.id ? "default" : "outline"}
@@ -272,22 +320,11 @@ export const ProtocolSelector: React.FC<ProtocolSelectorProps> = ({
 				</div>
 
 				{/* Mobile: Configuration Accordion */}
-				{selectedMethod && (
-					<Accordion
-						type="single"
-						collapsible
-						value={expandedConfig || ""}
-						onValueChange={setExpandedConfig}
-					>
+				{selectedMethod && selectedMethodDef && (
+					<Accordion type="single" collapsible defaultValue={selectedMethod}>
 						<AccordionItem value={selectedMethod}>
 							<Card
-								className="border-l-4"
-								style={{
-									borderLeftColor:
-										ACCESS_METHODS.find(
-											(m) => m.id === selectedMethod,
-										)?.color.replace("bg-", "#") || "#666",
-								}}
+								className={cn("border-l-4", selectedMethodDef.borderColor)}
 							>
 								<AccordionTrigger asChild>
 									<CardHeader className="pb-3 cursor-pointer hover:bg-gray-50 transition-colors">
@@ -296,36 +333,25 @@ export const ProtocolSelector: React.FC<ProtocolSelectorProps> = ({
 												<div
 													className={cn(
 														"w-6 h-6 rounded flex items-center justify-center text-white text-sm",
-														ACCESS_METHODS.find((m) => m.id === selectedMethod)
-															?.color,
+														selectedMethodDef.color,
 													)}
 												>
-													{
-														ACCESS_METHODS.find((m) => m.id === selectedMethod)
-															?.icon
-													}
+													{selectedMethodDef.icon}
 												</div>
 												<div className="text-left flex-1">
 													<h4 className="font-medium text-[#3c2a14] text-sm">
-														Configure{" "}
-														{
-															ACCESS_METHODS.find(
-																(m) => m.id === selectedMethod,
-															)?.name
-														}
+														Configure {selectedMethodDef.name}
 													</h4>
 													<p className="text-xs text-[#8b7355]">
-														Set up access requirements
+														{selectedMethodDef.description}
 													</p>
 												</div>
 												<a
-													href={
-														ACCESS_METHODS.find((m) => m.id === selectedMethod)
-															?.learnMoreUrl
-													}
+													href={selectedMethodDef.learnMoreUrl}
 													target="_blank"
 													rel="noopener noreferrer"
 													className="text-xs text-[#ff5e14] hover:text-[#e5531b] underline"
+													onClick={(e) => e.stopPropagation()}
 												>
 													Learn More
 												</a>
@@ -353,7 +379,7 @@ export const ProtocolSelector: React.FC<ProtocolSelectorProps> = ({
 		);
 	}
 
-	// Desktop view
+	// ── Desktop View ──
 	return (
 		<div className={cn("space-y-6", className)}>
 			{/* Header with optional view toggle */}
@@ -394,10 +420,13 @@ export const ProtocolSelector: React.FC<ProtocolSelectorProps> = ({
 				data-testid="method-grid"
 				className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
 			>
-				{ACCESS_METHODS.map((method) => (
+				{filteredMethods.map((method) => (
 					<Card
 						key={method.id}
 						data-testid={`method-${method.id.toLowerCase()}`}
+						role="button"
+						tabIndex={0}
+						aria-pressed={selectedMethod === method.id}
 						className={cn(
 							"cursor-pointer transition-all duration-200 hover:shadow-lg",
 							selectedMethod === method.id
@@ -405,21 +434,46 @@ export const ProtocolSelector: React.FC<ProtocolSelectorProps> = ({
 								: "hover:shadow-md",
 						)}
 						onClick={() => handleMethodSelect(method.id)}
+						onKeyDown={(e) => {
+							if (e.key === "Enter" || e.key === " ") {
+								e.preventDefault();
+								handleMethodSelect(method.id);
+							}
+						}}
 					>
 						<CardHeader className="pb-3">
 							<div className="flex items-center justify-between">
 								<div className={cn("p-2 rounded-lg text-white", method.color)}>
 									{method.icon}
 								</div>
-								{method.badge}
+								<div className="flex items-center gap-2">
+									{recommendedMethod === method.id && (
+										<Badge className="bg-[#ff5e14] text-white text-xs">
+											Recommended
+										</Badge>
+									)}
+									{method.badge}
+								</div>
 							</div>
 							<CardTitle className="text-lg font-semibold mt-2 text-[#3c2a14]">
 								{method.name}
 							</CardTitle>
 						</CardHeader>
 						<CardContent>
+							<p className="text-sm text-[#8b7355] mb-2">
+								{method.description}
+							</p>
 							<div className="flex justify-between items-center">
-								<p className="text-sm text-[#8b7355]">Click to configure</p>
+								{selectedMethod === method.id ? (
+									<span className="text-xs text-[#ff5e14] font-medium flex items-center gap-1">
+										<ChevronDown className="h-3 w-3" />
+										Configure below
+									</span>
+								) : (
+									<span className="text-xs text-[#8b7355]">
+										Click to select
+									</span>
+								)}
 								<a
 									href={method.learnMoreUrl}
 									target="_blank"
@@ -435,95 +489,46 @@ export const ProtocolSelector: React.FC<ProtocolSelectorProps> = ({
 				))}
 			</div>
 
-			{/* Configuration Panel */}
-			<div data-testid="config-panel">
-				<h3>Configuration for {selectedMethod}</h3>
-				<ConfigurationPanel
-					method={selectedMethod}
-					config={initialConfig}
-					onConfigChange={handleConfigUpdate}
-				/>
-			</div>
-
-			{/* Configuration Summary */}
-			<div data-testid="config-summary">
-				<h3>Configuration Summary</h3>
-				<p data-testid="selected-method">Method: {selectedMethod}</p>
-			</div>
-		</div>
-	);
-};
-
-// Configuration Panel Component
-const _ConfigurationPanel: React.FC<{
-	method: AccessMethod;
-	config?: any;
-	onConfigChange: (config: any) => void;
-}> = ({ method, config, onConfigChange }) => {
-	switch (method) {
-		case "Allowlist":
-			return (
-				<Card className="p-4">
-					<CardHeader>
-						<CardTitle className="text-lg font-semibold text-[#3c2a14]">
-							Allowlist Configuration
-						</CardTitle>
-					</CardHeader>
-					<CardContent>
-						<p className="text-sm text-[#8b7355]">
-							No additional configuration needed for Allowlist. Access is
-							determined by a separate allowlist management system.
-						</p>
-					</CardContent>
-				</Card>
-			);
-
-		case "NFT":
-			return (
-				<Card className="p-4">
-					<CardHeader>
-						<CardTitle className="text-lg font-semibold text-[#3c2a14]">
-							NFT Collection Gate
-						</CardTitle>
+			{/* Inline Configuration Panel — visually connected to selected card */}
+			{selectedMethodDef && (
+				<Card
+					data-testid="config-panel"
+					className={cn(
+						"border-l-4 transition-all duration-200",
+						selectedMethodDef.borderColor,
+					)}
+				>
+					<CardHeader className="pb-3">
+						<div className="flex items-center gap-3">
+							<div
+								className={cn(
+									"w-8 h-8 rounded-lg flex items-center justify-center text-white",
+									selectedMethodDef.color,
+								)}
+							>
+								{selectedMethodDef.icon}
+							</div>
+							<div>
+								<CardTitle className="text-lg text-[#3c2a14]">
+									Configure {selectedMethodDef.name}
+								</CardTitle>
+								<p className="text-sm text-[#8b7355]">
+									{selectedMethodDef.description}
+								</p>
+							</div>
+						</div>
 					</CardHeader>
 					<CardContent>
-						<NFTSelector
-							onSelect={(nft) => onConfigChange({ nftGates: [nft] })}
-							selectedNFT={config?.nftGates?.[0]}
-							userCollectionOnly={false}
-							maxHeight="300px"
-							cardSize="sm"
+						<ConfigurationPanel
+							method={selectedMethod}
+							config={initialConfig}
+							onConfigChange={handleConfigUpdate}
 						/>
 					</CardContent>
 				</Card>
-			);
-
-		case "POAP":
-			return (
-				<POAPConfig onConfigChange={onConfigChange} initialConfig={config} />
-			);
-
-		case "Hats":
-			return (
-				<HatsConfig onConfigChange={onConfigChange} initialConfig={config} />
-			);
-
-		case "Hypercert":
-			return (
-				<HypercertConfig
-					onConfigChange={onConfigChange}
-					initialConfig={config}
-				/>
-			);
-
-		case "Unlock":
-			return (
-				<UnlockConfig onConfigChange={onConfigChange} initialConfig={config} />
-			);
-
-		default:
-			return null;
-	}
+			)}
+		</div>
+	);
 };
 
 export default ProtocolSelector;
diff --git a/client/components/nft/protocols/HatsConfig.tsx b/client/components/nft/protocols/HatsConfig.tsx
index edd0810..d62b187 100644
--- a/client/components/nft/protocols/HatsConfig.tsx
+++ b/client/components/nft/protocols/HatsConfig.tsx
@@ -32,7 +32,12 @@ interface HatDetails {
 }
 
 export interface HatsConfigProps {
-	onConfigChange: (config: { hatId: string; hatsContract?: string }) => void;
+	onConfigChange: (config: {
+		hatId: string;
+		hatsContract?: string;
+		hatsId?: string;
+		hatsAddress?: string;
+	}) => void;
 	initialConfig?: { hatId: string; hatsContract?: string };
 	className?: string;
 }
@@ -66,13 +71,15 @@ export const HatsConfig: React.FC<HatsConfigProps> = ({
 					contractAddress,
 				);
 
-				if (hatDetails) {
-					setSelectedHat(hatDetails);
-					onConfigChange({
-						hatId: hatIdToValidate,
-						hatsContract: contractAddress,
-					});
-				} else {
+					if (hatDetails) {
+						setSelectedHat(hatDetails);
+						onConfigChange({
+							hatId: hatIdToValidate,
+							hatsContract: contractAddress,
+							hatsId: hatDetails.id,
+							hatsAddress: contractAddress,
+						});
+					} else {
 					setValidationError("Hat not found. Please check the Hat ID.");
 					setSelectedHat(null);
 				}
@@ -119,6 +126,7 @@ export const HatsConfig: React.FC<HatsConfigProps> = ({
 			icon="🎩"
 			color="bg-yellow-500"
 			validationError={validationError}
+			errorId="hats-error"
 			isLoading={isValidating}
 			className={className}
 			learnMoreUrl={ACCESS_CONTROL_DOC_LINKS.hats}
@@ -133,6 +141,8 @@ export const HatsConfig: React.FC<HatsConfigProps> = ({
 						value={hatId}
 						onChange={handleHatIdChange}
 						className="mt-1"
+						aria-invalid={!!validationError}
+						aria-describedby={validationError ? "hats-error" : undefined}
 					/>
 					<p className="text-xs text-gray-500 mt-1">
 						Hat IDs are hierarchical addresses in the Hats tree structure
diff --git a/client/components/nft/protocols/HypercertConfig.tsx b/client/components/nft/protocols/HypercertConfig.tsx
index 8230f91..7633a4e 100644
--- a/client/components/nft/protocols/HypercertConfig.tsx
+++ b/client/components/nft/protocols/HypercertConfig.tsx
@@ -20,7 +20,11 @@ interface HypercertDetails {
 }
 
 export interface HypercertConfigProps {
-	onConfigChange: (config: { hypercertId: string }) => void;
+	onConfigChange: (config: {
+		hypercertId: string;
+		hypercertAddress?: string;
+		hypercertTokenId?: string;
+	}) => void;
 	initialConfig?: { hypercertId: string };
 	className?: string;
 }
@@ -55,7 +59,11 @@ export const HypercertConfig: React.FC<HypercertConfigProps> = ({
 
 				if (hypercertDetails) {
 					setSelectedHypercert(hypercertDetails);
-					onConfigChange({ hypercertId: hypercertIdToValidate });
+					onConfigChange({
+						hypercertId: hypercertIdToValidate,
+						hypercertAddress: hypercertDetails.contract,
+						hypercertTokenId: hypercertDetails.tokenID,
+					});
 				} else {
 					setValidationError(
 						"Hypercert not found. Please check the Hypercert ID.",
@@ -98,6 +106,7 @@ export const HypercertConfig: React.FC<HypercertConfigProps> = ({
 			icon="🏆"
 			color="bg-green-500"
 			validationError={validationError}
+			errorId="hypercert-error"
 			isLoading={isValidating}
 			className={className}
 			learnMoreUrl={ACCESS_CONTROL_DOC_LINKS.hypercerts}
@@ -112,6 +121,8 @@ export const HypercertConfig: React.FC<HypercertConfigProps> = ({
 						value={hypercertId}
 						onChange={handleHypercertIdChange}
 						className="mt-1"
+						aria-invalid={!!validationError}
+						aria-describedby={validationError ? "hypercert-error" : undefined}
 					/>
 					<p className="text-xs text-gray-500 mt-1">
 						The unique identifier for the Hypercert token
diff --git a/client/components/nft/protocols/POAPConfig.tsx b/client/components/nft/protocols/POAPConfig.tsx
index 2aac7ef..bdc8364 100644
--- a/client/components/nft/protocols/POAPConfig.tsx
+++ b/client/components/nft/protocols/POAPConfig.tsx
@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useDebounce } from "@/hooks/app/useDebounce";
+import { POAP_TOKEN_ADDRESS } from "@/lib/blockchain/constants";
 import { POAPProvider } from "@/lib/nft/protocols/POAPProvider";
 import { ACCESS_CONTROL_DOC_LINKS } from "../doc-links";
 import { ProtocolConfigBase } from "../ProtocolConfigBase";
@@ -21,7 +22,12 @@ interface POAPEvent {
 }
 
 export interface POAPConfigProps {
-	onConfigChange: (config: { eventId: string; eventName?: string }) => void;
+	onConfigChange: (config: {
+		eventId: string;
+		eventName?: string;
+		poapEventId?: number;
+		poapContractAddress?: string;
+	}) => void;
 	initialConfig?: { eventId: string; eventName?: string };
 	className?: string;
 }
@@ -92,7 +98,12 @@ export const POAPConfig: React.FC<POAPConfigProps> = ({
 		setSearchTerm(""); // Clear search
 		setSearchResults([]);
 		setValidationError(null);
-		onConfigChange({ eventId: eventIdStr, eventName: event.name });
+		onConfigChange({
+			eventId: eventIdStr,
+			eventName: event.name,
+			poapEventId: Number(event.id),
+			poapContractAddress: POAP_TOKEN_ADDRESS,
+		});
 	};
 
 	const handleEventIdChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -102,7 +113,12 @@ export const POAPConfig: React.FC<POAPConfigProps> = ({
 		setValidationError(null);
 
 		if (newEventId) {
-			onConfigChange({ eventId: newEventId });
+			const parsed = Number.parseInt(newEventId, 10);
+			onConfigChange({
+				eventId: newEventId,
+				poapEventId: Number.isFinite(parsed) ? parsed : undefined,
+				poapContractAddress: POAP_TOKEN_ADDRESS,
+			});
 		}
 	};
 
@@ -116,11 +132,16 @@ export const POAPConfig: React.FC<POAPConfigProps> = ({
 		setValidationError(null);
 
 		try {
-			const event = await POAPProvider.getEventById(eventId);
-			if (event) {
-				setSelectedEvent(event);
-				onConfigChange({ eventId: String(event.id), eventName: event.name });
-			} else {
+				const event = await POAPProvider.getEventById(eventId);
+				if (event) {
+					setSelectedEvent(event);
+					onConfigChange({
+						eventId: String(event.id),
+						eventName: event.name,
+						poapEventId: Number(event.id),
+						poapContractAddress: POAP_TOKEN_ADDRESS,
+					});
+				} else {
 				setValidationError("POAP Event ID not found.");
 				setSelectedEvent(null);
 			}
@@ -139,6 +160,7 @@ export const POAPConfig: React.FC<POAPConfigProps> = ({
 			icon="🎖️"
 			color="bg-purple-500"
 			validationError={validationError}
+			errorId="poap-event-error"
 			isLoading={isValidating}
 			className={className}
 			learnMoreUrl={ACCESS_CONTROL_DOC_LINKS.poap}
@@ -164,9 +186,10 @@ export const POAPConfig: React.FC<POAPConfigProps> = ({
 					{searchResults.length > 0 && (
 						<div className="mt-2 border rounded-md max-h-48 overflow-y-auto">
 							{searchResults.map((event) => (
-								<div
+								<button
+									type="button"
 									key={event.id}
-									className="flex items-center p-3 hover:bg-gray-50 cursor-pointer border-b last:border-b-0"
+									className="flex items-center p-3 hover:bg-gray-50 cursor-pointer border-b last:border-b-0 w-full text-left"
 									onClick={() => handleEventSelect(event)}
 								>
 									{event.image_url && (
@@ -187,7 +210,7 @@ export const POAPConfig: React.FC<POAPConfigProps> = ({
 											</p>
 										)}
 									</div>
-								</div>
+								</button>
 							))}
 						</div>
 					)}
@@ -216,6 +239,8 @@ export const POAPConfig: React.FC<POAPConfigProps> = ({
 							value={eventId}
 							onChange={handleEventIdChange}
 							className="flex-1"
+							aria-invalid={!!validationError}
+							aria-describedby={validationError ? "poap-event-error" : undefined}
 						/>
 						<Button
 							onClick={handleValidateEventId}
diff --git a/client/components/nft/protocols/UnlockConfig.tsx b/client/components/nft/protocols/UnlockConfig.tsx
index bcc3390..b3dd4c5 100644
--- a/client/components/nft/protocols/UnlockConfig.tsx
+++ b/client/components/nft/protocols/UnlockConfig.tsx
@@ -126,6 +126,7 @@ export const UnlockConfig: React.FC<UnlockConfigProps> = ({
 			icon="🔓"
 			color="bg-blue-500"
 			validationError={validationError}
+			errorId="unlock-error"
 			isLoading={isValidating}
 			className={className}
 			learnMoreUrl={ACCESS_CONTROL_DOC_LINKS.unlock}
@@ -140,6 +141,8 @@ export const UnlockConfig: React.FC<UnlockConfigProps> = ({
 						value={unlockAddress}
 						onChange={handleAddressChange}
 						className="mt-1"
+						aria-invalid={!!validationError}
+						aria-describedby={validationError ? "unlock-error" : undefined}
 					/>
 					<p className="text-xs text-gray-500 mt-1">
 						The contract address of the Unlock Protocol lock
diff --git a/client/config/supported-networks.ts b/client/config/supported-networks.ts
index 61e0065..b97be5b 100644
--- a/client/config/supported-networks.ts
+++ b/client/config/supported-networks.ts
@@ -28,6 +28,13 @@ export function isV2Chain(chainId: number): boolean {
 	return autoIsV2Chain(chainId);
 }
 
+// POAP token contract is only supported on Gnosis Chain for on-chain gating.
+const POAP_SUPPORTED_CHAINS = new Set<number>([gnosis.id]);
+
+export function isPoapSupportedChain(chainId: number): boolean {
+	return POAP_SUPPORTED_CHAINS.has(chainId);
+}
+
 // Local Anvil chain (Pure local development without fork)
 export const anvilLocal = {
 	id: 31337,
diff --git a/client/generated.ts b/client/generated.ts
index 1ec646b..4b8b2c5 100644
--- a/client/generated.ts
+++ b/client/generated.ts
@@ -857,6 +857,7 @@ export const cookieJarAbi = [
   { type: 'error', inputs: [], name: 'FeeCollectorAddressCannotBeZeroAddress' },
   { type: 'error', inputs: [], name: 'FeeTransferFailed' },
   { type: 'error', inputs: [], name: 'InsufficientBalance' },
+  { type: 'error', inputs: [], name: 'InsufficientNFTBalance' },
   {
     type: 'error',
     inputs: [
@@ -871,6 +872,8 @@ export const cookieJarAbi = [
   { type: 'error', inputs: [], name: 'InvalidTokenAddress' },
   { type: 'error', inputs: [], name: 'InvalidWithdrawalType' },
   { type: 'error', inputs: [], name: 'LessThanMinimumDeposit' },
+  { type: 'error', inputs: [], name: 'NFTNotOwned' },
+  { type: 'error', inputs: [], name: 'NFTValidationFailed' },
   { type: 'error', inputs: [], name: 'NoNFTAddressesProvided' },
   { type: 'error', inputs: [], name: 'NotAuthorized' },
   { type: 'error', inputs: [], name: 'NotFeeCollector' },
diff --git a/client/hooks/jar/createV2CreateArgs.ts b/client/hooks/jar/createV2CreateArgs.ts
new file mode 100644
index 0000000..3eab319
--- /dev/null
+++ b/client/hooks/jar/createV2CreateArgs.ts
@@ -0,0 +1,315 @@
+import type { cookieJarFactoryAbi } from "@/generated";
+import { isAddress, type ContractFunctionArgs } from "viem";
+import {
+	HATS_PROTOCOL_ADDRESS,
+	POAP_TOKEN_ADDRESS,
+	ZERO_ADDRESS,
+} from "@/lib/blockchain/constants";
+import { AccessType, NFTType, type JarCreationFormData } from "./schemas/jarCreationSchema";
+
+export const FACTORY_DEFAULT_FEE_SENTINEL = (2n ** 256n) - 1n;
+
+export enum ContractAccessType {
+	Allowlist = 0,
+	ERC721 = 1,
+	ERC1155 = 2,
+}
+
+export type FactoryCreateCookieJarArgs = ContractFunctionArgs<
+	typeof cookieJarFactoryAbi,
+	"nonpayable",
+	"createCookieJar"
+>;
+export type JarConfigArg = FactoryCreateCookieJarArgs[0];
+export type AccessConfigArg = FactoryCreateCookieJarArgs[1];
+export type MultiTokenConfigArg = FactoryCreateCookieJarArgs[2];
+
+function toAddressOrZero(value: unknown): `0x${string}` {
+	return typeof value === "string" && isAddress(value)
+		? (value as `0x${string}`)
+		: (ZERO_ADDRESS as `0x${string}`);
+}
+
+function toBigIntOr(defaultValue: bigint, value: unknown): bigint {
+	if (typeof value === "bigint") return value;
+	if (typeof value === "number" && Number.isFinite(value)) return BigInt(value);
+	if (typeof value === "string" && value.trim().length > 0) {
+		try {
+			return BigInt(value);
+		} catch {
+			return defaultValue;
+		}
+	}
+	return defaultValue;
+}
+
+function protocolValue(
+	protocolConfig: JarCreationFormData["protocolConfig"],
+	keys: string[],
+): unknown {
+	const raw = protocolConfig as unknown as Record<string, unknown>;
+	for (const key of keys) {
+		if (raw[key] !== undefined && raw[key] !== null && raw[key] !== "") {
+			return raw[key];
+		}
+	}
+	return undefined;
+}
+
+export function getFeePercentageOnDeposit(values: JarCreationFormData): bigint {
+	if (!values.enableCustomFee) {
+		return FACTORY_DEFAULT_FEE_SENTINEL;
+	}
+	const customFeePercent = values.customFee?.trim();
+	if (!customFeePercent) {
+		return FACTORY_DEFAULT_FEE_SENTINEL;
+	}
+	const feeBps = Math.round(Number.parseFloat(customFeePercent) * 100);
+	return BigInt(Number.isFinite(feeBps) ? Math.max(0, feeBps) : 0);
+}
+
+function resolveAccessConfig(values: JarCreationFormData): {
+	accessType: ContractAccessType;
+	nftRequirement: AccessConfigArg["nftRequirement"];
+} {
+	const protocolConfig = values.protocolConfig;
+
+	if (values.accessType === AccessType.Allowlist) {
+		return {
+			accessType: ContractAccessType.Allowlist,
+			nftRequirement: {
+				nftContract: ZERO_ADDRESS as `0x${string}`,
+				tokenId: 0n,
+				minBalance: 0n,
+			},
+		};
+	}
+
+	if (values.accessType === AccessType.NFTGated) {
+		const nftAddress = toAddressOrZero(values.nftAddresses[0]);
+		const nftType = values.nftTypes[0];
+		return {
+			accessType:
+				nftType === NFTType.ERC1155
+					? ContractAccessType.ERC1155
+					: ContractAccessType.ERC721,
+			nftRequirement: {
+				nftContract: nftAddress,
+				tokenId: 0n,
+				minBalance: nftType === NFTType.ERC1155 ? 1n : 0n,
+			},
+		};
+	}
+
+	if (values.accessType === AccessType.POAP) {
+		const eventId = toBigIntOr(
+			0n,
+			protocolValue(protocolConfig, ["poapEventId", "eventId"]),
+		);
+		return {
+			accessType: ContractAccessType.ERC721,
+			nftRequirement: {
+				nftContract: toAddressOrZero(
+					protocolValue(protocolConfig, ["poapContractAddress"]),
+				),
+				// Encode POAP event-level gate in existing struct fields.
+				// tokenId carries POAP event id, minBalance>0 marks event-mode enforcement.
+				tokenId: eventId,
+				minBalance: 1n,
+			},
+		};
+	}
+
+	if (values.accessType === AccessType.Unlock) {
+		return {
+			accessType: ContractAccessType.ERC721,
+			nftRequirement: {
+				nftContract: toAddressOrZero(
+					protocolValue(protocolConfig, ["unlockAddress"]),
+				),
+				tokenId: 0n,
+				minBalance: 0n,
+			},
+		};
+	}
+
+	if (values.accessType === AccessType.Hypercert) {
+		return {
+			accessType: ContractAccessType.ERC1155,
+			nftRequirement: {
+				nftContract: toAddressOrZero(
+					protocolValue(protocolConfig, [
+						"hypercertAddress",
+						"hypercertContract",
+					]),
+				),
+				tokenId: toBigIntOr(
+					0n,
+					protocolValue(protocolConfig, [
+						"hypercertTokenId",
+						"hypercertId",
+						"tokenId",
+					]),
+				),
+				minBalance: toBigIntOr(
+					1n,
+					protocolValue(protocolConfig, ["hypercertMinBalance"]),
+				),
+			},
+		};
+	}
+
+	// Hats maps to ERC-1155: tokenId == hatId, minBalance == 1.
+	return {
+		accessType: ContractAccessType.ERC1155,
+		nftRequirement: {
+			nftContract: toAddressOrZero(
+				protocolValue(protocolConfig, ["hatsAddress", "hatsContract"]),
+			),
+			tokenId: toBigIntOr(0n, protocolValue(protocolConfig, ["hatsId", "hatId"])),
+			minBalance: 1n,
+		},
+	};
+}
+
+export function getAccessConfigValidationError(
+	values: JarCreationFormData,
+): string | null {
+	const protocolConfig = values.protocolConfig;
+
+	if (values.accessType === AccessType.NFTGated) {
+		if (!values.nftAddresses.length) {
+			return "At least one NFT address is required for NFT-gated access";
+		}
+		if (!isAddress(values.nftAddresses[0])) {
+			return "NFT address must be a valid Ethereum address";
+		}
+		return null;
+	}
+
+	if (values.accessType === AccessType.POAP) {
+		const eventId = toBigIntOr(
+			0n,
+			protocolValue(protocolConfig, ["poapEventId", "eventId"]),
+		);
+		if (eventId <= 0n) {
+			return "POAP event is required";
+		}
+		const poapContractAddress = protocolValue(protocolConfig, [
+			"poapContractAddress",
+		]);
+		if (poapContractAddress !== undefined && !isAddress(String(poapContractAddress))) {
+			return "POAP contract address must be a valid Ethereum address";
+		}
+		return null;
+	}
+
+	if (values.accessType === AccessType.Unlock) {
+		const unlockAddress = protocolValue(protocolConfig, ["unlockAddress"]);
+		if (!unlockAddress || !isAddress(String(unlockAddress))) {
+			return "Unlock contract address is required";
+		}
+		return null;
+	}
+
+	if (values.accessType === AccessType.Hypercert) {
+		const hypercertAddress = protocolValue(protocolConfig, [
+			"hypercertAddress",
+			"hypercertContract",
+		]);
+		if (!hypercertAddress || !isAddress(String(hypercertAddress))) {
+			return "Hypercert contract address is required";
+		}
+		const hypercertTokenId = toBigIntOr(
+			0n,
+			protocolValue(protocolConfig, ["hypercertTokenId", "hypercertId", "tokenId"]),
+		);
+		if (hypercertTokenId <= 0n) {
+			return "Hypercert token ID is required";
+		}
+		return null;
+	}
+
+	if (values.accessType === AccessType.Hats) {
+		const hatsId = toBigIntOr(0n, protocolValue(protocolConfig, ["hatsId", "hatId"]));
+		if (hatsId <= 0n) {
+			return "Hat ID is required";
+		}
+		return null;
+	}
+
+	return null;
+}
+
+export function buildV2CreateCookieJarArgs(input: {
+	values: JarCreationFormData;
+	metadata: string;
+	parseAmount: (amount: string) => bigint;
+}): FactoryCreateCookieJarArgs {
+	const { values, metadata, parseAmount } = input;
+
+	const { accessType, nftRequirement } = resolveAccessConfig(values);
+	const feePercentageOnDeposit = getFeePercentageOnDeposit(values);
+	const protocolConfig = values.protocolConfig;
+
+	const multiTokenConfig: MultiTokenConfigArg = {
+		enabled: values.autoSwapEnabled,
+		maxSlippagePercent: 500n,
+		minSwapAmount: 0n,
+		defaultFee: 3000,
+	};
+
+	const poapContractCandidate = protocolValue(protocolConfig, [
+		"poapContractAddress",
+	]);
+	const poapContractAddress = poapContractCandidate
+		? toAddressOrZero(poapContractCandidate)
+		: (POAP_TOKEN_ADDRESS as `0x${string}`);
+
+	const hatsContractCandidate = protocolValue(protocolConfig, [
+		"hatsAddress",
+		"hatsContract",
+	]);
+	const hatsContractAddress = hatsContractCandidate
+		? toAddressOrZero(hatsContractCandidate)
+		: (HATS_PROTOCOL_ADDRESS as `0x${string}`);
+
+	const normalizedNftRequirement = { ...nftRequirement };
+	if (values.accessType === AccessType.POAP) {
+		normalizedNftRequirement.nftContract = poapContractAddress;
+	}
+	if (values.accessType === AccessType.Hats && normalizedNftRequirement.nftContract === ZERO_ADDRESS) {
+		normalizedNftRequirement.nftContract = hatsContractAddress;
+	}
+
+	const jarConfig: JarConfigArg = {
+		jarOwner: values.jarOwnerAddress as `0x${string}`,
+		supportedCurrency: values.supportedCurrency as `0x${string}`,
+		feeCollector: ZERO_ADDRESS as `0x${string}`,
+		accessType,
+		withdrawalOption: values.withdrawalOption,
+		strictPurpose: values.strictPurpose,
+		emergencyWithdrawalEnabled: values.emergencyWithdrawalEnabled,
+		oneTimeWithdrawal: values.oneTimeWithdrawal,
+		fixedAmount: parseAmount(values.fixedAmount),
+		maxWithdrawal: parseAmount(values.maxWithdrawal),
+		withdrawalInterval: BigInt(values.withdrawalInterval || "0"),
+		minDeposit: 0n,
+		feePercentageOnDeposit,
+		maxWithdrawalPerPeriod: 0n,
+		metadata,
+		multiTokenConfig,
+	};
+
+	const accessConfig: AccessConfigArg = {
+		allowlist: [] as readonly `0x${string}`[],
+		nftRequirement: normalizedNftRequirement,
+	};
+
+	const args: FactoryCreateCookieJarArgs = [
+		jarConfig,
+		accessConfig,
+		multiTokenConfig,
+	];
+	return args;
+}
diff --git a/client/hooks/jar/schemas/jarCreationSchema.ts b/client/hooks/jar/schemas/jarCreationSchema.ts
new file mode 100644
index 0000000..6b75b74
--- /dev/null
+++ b/client/hooks/jar/schemas/jarCreationSchema.ts
@@ -0,0 +1,138 @@
+import { isAddress } from "viem";
+import { z } from "zod";
+
+/**
+ * Access control types supported by Cookie Jars.
+ * Values must match the smart contract's AccessType enum.
+ */
+export enum AccessType {
+	Allowlist = 0,
+	NFTGated = 1,
+	POAP = 2,
+	Unlock = 3,
+	Hypercert = 4,
+	Hats = 5,
+}
+
+/** Withdrawal amount options for Cookie Jars */
+export enum WithdrawalTypeOptions {
+	Fixed = 0,
+	Variable = 1,
+}
+
+/** NFT token standards supported */
+export enum NFTType {
+	None = 0,
+	ERC721 = 1,
+	ERC1155 = 2,
+}
+
+/** Protocol-specific configuration for access control */
+export const protocolConfigSchema = z.object({
+	accessType: z.enum([
+		"Allowlist",
+		"NFT",
+		"POAP",
+		"Unlock",
+		"Hypercert",
+		"Hats",
+	]),
+	nftAddresses: z.array(z.string()).optional(),
+	nftTypes: z.array(z.number()).optional(),
+	poapEventId: z.number().optional(),
+	poapContractAddress: z.string().optional(),
+	unlockAddress: z.string().optional(),
+	hypercertAddress: z.string().optional(),
+	hypercertMinBalance: z.number().optional(),
+	hypercertMaxBalance: z.number().optional(),
+	hatsId: z.number().optional(),
+	hatsAddress: z.string().optional(),
+}).passthrough();
+
+export type ProtocolConfig = z.infer<typeof protocolConfigSchema>;
+
+/**
+ * Maps ProtocolSelector's string method names to the contract's AccessType enum.
+ * Used by StepContent to bridge the ProtocolSelector's output format
+ * with the form schema's numeric enum values.
+ */
+export const METHOD_TO_ACCESS_TYPE: Record<string, AccessType> = {
+	Allowlist: AccessType.Allowlist,
+	NFT: AccessType.NFTGated,
+	POAP: AccessType.POAP,
+	Unlock: AccessType.Unlock,
+	Hypercert: AccessType.Hypercert,
+	Hats: AccessType.Hats,
+};
+
+/**
+ * Complete jar creation form schema.
+ *
+ * Uses Zod for TypeScript type inference and per-field validation.
+ * Cross-field conditional validation (e.g. fixedAmount required only when
+ * withdrawalOption is Fixed) is handled by imperative validateStep functions
+ * in useJarCreation, because Zod's superRefine doesn't compose well with
+ * RHF's per-step trigger() in multi-step forms.
+ */
+export const jarCreationSchema = z.object({
+	// ── Step 1: Basic Config ──
+	jarName: z.string().min(1, "Jar name is required"),
+	jarOwnerAddress: z.string().refine(
+		(val) =>
+			!val ||
+			val === "0x0000000000000000000000000000000000000000" ||
+			isAddress(val),
+		"Must be a valid Ethereum address",
+	),
+	supportedCurrency: z.string(),
+	metadata: z.string(),
+	imageUrl: z.string(),
+	externalLink: z.string(),
+	showCustomCurrency: z.boolean(),
+	customCurrencyAddress: z.string(),
+
+	// ── Step 2: Withdrawal Settings ──
+	withdrawalOption: z.nativeEnum(WithdrawalTypeOptions),
+	fixedAmount: z.string(),
+	maxWithdrawal: z.string(),
+	withdrawalInterval: z.string(),
+	strictPurpose: z.boolean(),
+	emergencyWithdrawalEnabled: z.boolean(),
+	oneTimeWithdrawal: z.boolean(),
+
+	// ── Step 3: Access Control ──
+	accessType: z.nativeEnum(AccessType),
+	nftAddresses: z.array(z.string()),
+	nftTypes: z.array(z.number()),
+	protocolConfig: protocolConfigSchema,
+
+	// ── Step 4: Advanced Settings ──
+	enableCustomFee: z.boolean(),
+	customFee: z.string(),
+	streamingEnabled: z.boolean(),
+	requireStreamApproval: z.boolean(),
+	maxStreamRate: z.string(),
+	minStreamDuration: z.string(),
+	autoSwapEnabled: z.boolean(),
+});
+
+export type JarCreationFormData = z.infer<typeof jarCreationSchema>;
+
+/** Field groups for per-step trigger() validation */
+export const STEP_FIELDS: Record<number, (keyof JarCreationFormData)[]> = {
+	1: [
+		"jarName",
+		"jarOwnerAddress",
+		"supportedCurrency",
+		"showCustomCurrency",
+		"customCurrencyAddress",
+	],
+	2: [
+		"withdrawalOption",
+		"fixedAmount",
+		"maxWithdrawal",
+		"withdrawalInterval",
+	],
+	3: ["accessType", "nftAddresses", "nftTypes"],
+	4: ["enableCustomFee", "customFee"],
+};
diff --git a/client/hooks/jar/useJarCreation.ts b/client/hooks/jar/useJarCreation.ts
index 520f738..6898825 100644
--- a/client/hooks/jar/useJarCreation.ts
+++ b/client/hooks/jar/useJarCreation.ts
@@ -1,8 +1,10 @@
 "use client";
 
+import { zodResolver } from "@hookform/resolvers/zod";
 import { useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
 import { decodeEventLog, isAddress, parseEther } from "viem";
 import {
 	useAccount,
@@ -14,121 +16,31 @@ import {
 import { contractAddresses, isV2Chain } from "@/config/supported-networks";
 import { cookieJarFactoryAbi } from "@/generated";
 import { cookieJarFactoryV1Abi } from "@/lib/blockchain/cookie-jar-v1-abi";
-import { cookieJarFactoryV2Abi } from "@/lib/blockchain/cookie-jar-v2-abi";
 import { ETH_ADDRESS } from "@/lib/blockchain/token-utils";
 
 import { useToast } from "../app/useToast";
+import {
+	buildV2CreateCookieJarArgs,
+	getAccessConfigValidationError,
+} from "./createV2CreateArgs";
+import {
+	AccessType,
+	NFTType,
+	WithdrawalTypeOptions,
+	jarCreationSchema,
+	type JarCreationFormData,
+	type ProtocolConfig,
+} from "./schemas/jarCreationSchema";
+
+// Re-export for backward compatibility (used by StepContent, page, etc.)
+export { AccessType, WithdrawalTypeOptions, NFTType };
+export type { ProtocolConfig, JarCreationFormData };
 
 /**
- * Protocol configuration for advanced access control
- */
-export interface ProtocolConfig {
-	/** Type of access control mechanism */
-	accessType: "Allowlist" | "NFT" | "POAP" | "Unlock" | "Hypercert" | "Hats";
-	/** NFT contract addresses for NFT-gated access */
-	nftAddresses?: string[];
-	/** NFT types (ERC721=1, ERC1155=2) corresponding to addresses */
-	nftTypes?: number[];
-	/** POAP event ID for POAP-gated access */
-	poapEventId?: number;
-	/** POAP contract address */
-	poapContractAddress?: `0x${string}`;
-	/** Unlock Protocol lock address */
-	unlockAddress?: `0x${string}`;
-	/** Hypercert contract address */
-	hypercertAddress?: `0x${string}`;
-	/** Minimum Hypercert balance required */
-	hypercertMinBalance?: number;
-	/** Maximum Hypercert balance allowed */
-	hypercertMaxBalance?: number;
-	/** Hats Protocol hat ID */
-	hatsId?: number;
-	/** Hats Protocol contract address */
-	hatsAddress?: `0x${string}`;
-}
-
-/**
- * Access control types supported by Cookie Jars
- */
-export enum AccessType {
-	/** Manual allowlist management */
-	Allowlist = 0,
-	/** NFT ownership required */
-	NFTGated = 1,
-	/** POAP token required */
-	POAP = 2,
-	/** Unlock Protocol membership required */
-	Unlock = 3,
-	/** Hypercert ownership required */
-	Hypercert = 4,
-	/** Hats Protocol role required */
-	Hats = 5,
-}
-
-/**
- * Withdrawal amount options for Cookie Jars
- */
-export enum WithdrawalTypeOptions {
-	/** Fixed withdrawal amount */
-	Fixed = 0,
-	/** Variable withdrawal amount up to maximum */
-	Variable = 1,
-}
-
-/**
- * NFT token standards supported
- */
-export enum NFTType {
-	/** No NFT requirement */
-	None = 0,
-	/** ERC-721 (unique tokens) */
-	ERC721 = 1,
-	/** ERC-1155 (multi-token) */
-	ERC1155 = 2,
-}
-
-/**
- * Custom hook for Cookie Jar creation workflow
- *
- * Provides comprehensive jar creation functionality including form state
- * management, validation, contract interaction, and transaction handling.
- * Supports both v1 and v2 contract deployments with automatic protocol
- * detection and parameter adaptation.
- *
- * Features:
- * - Multi-step form management
- * - Real-time validation
- * - ERC-20 and ETH support
- * - Advanced access control (v2)
- * - Transaction status tracking
- * - Automatic redirect on success
- *
- * @returns Object with form state, handlers, validation, and transaction status
- *
- * @example
- * ```tsx
- * const {
- *   jarName,
- *   setJarName,
- *   confirmSubmit,
- *   isCreating,
- *   validateStep1,
- *   formErrors
- * } = useJarCreation();
+ * Custom hook for Cookie Jar creation workflow.
  *
- * return (
- *   <form onSubmit={(e) => { e.preventDefault(); confirmSubmit(); }}>
- *     <input
- *       value={jarName}
- *       onChange={(e) => setJarName(e.target.value)}
- *     />
- *     {formErrors.map(error => <p key={error}>{error}</p>)}
- *     <button type="submit" disabled={isCreating}>
- *       {isCreating ? 'Creating...' : 'Create Jar'}
- *     </button>
- *   </form>
- * );
- * ```
+ * Manages form state via React Hook Form + Zod, contract interactions,
+ * transaction lifecycle, and step validation for the multi-step wizard.
  */
 export const useJarCreation = () => {
 	const router = useRouter();
@@ -137,59 +49,46 @@ export const useJarCreation = () => {
 	const { toast } = useToast();
 	const queryClient = useQueryClient();
 
-	// Form state
-	const [selectedNetwork, setSelectedNetwork] = useState<string>("baseSepolia");
-	const [jarOwnerAddress, setJarOwnerAddress] = useState<`0x${string}`>(
-		"0x0000000000000000000000000000000000000000",
-	);
-	const [supportedCurrency, setSupportedCurrency] =
-		useState<`0x${string}`>(ETH_ADDRESS);
-	const [accessType, setAccessType] = useState<AccessType>(
-		AccessType.Allowlist,
-	);
-	const [withdrawalOption, setWithdrawalOption] =
-		useState<WithdrawalTypeOptions>(WithdrawalTypeOptions.Fixed);
-	const [fixedAmount, setFixedAmount] = useState("0");
-	const [maxWithdrawal, setMaxWithdrawal] = useState("0");
-	const [withdrawalInterval, setWithdrawalInterval] = useState("0");
-	const [strictPurpose, setStrictPurpose] = useState(true);
-	const [emergencyWithdrawalEnabled, setEmergencyWithdrawalEnabled] =
-		useState(true);
-	const [oneTimeWithdrawal, setOneTimeWithdrawal] = useState(false);
-	const [metadata, setMetadata] = useState("");
-
-	// New metadata fields
-	const [jarName, setJarName] = useState("");
-	const [imageUrl, setImageUrl] = useState("");
-	const [externalLink, setExternalLink] = useState("");
-	const [customFee, setCustomFee] = useState("");
-	const [enableCustomFee, setEnableCustomFee] = useState(false);
-
-	// Streaming configuration state
-	const [streamingEnabled, setStreamingEnabled] = useState(false);
-	const [requireStreamApproval, setRequireStreamApproval] = useState(true);
-	const [maxStreamRate, setMaxStreamRate] = useState("1.0");
-	const [minStreamDuration, setMinStreamDuration] = useState("1");
-	const [autoSwapEnabled, setAutoSwapEnabled] = useState(false);
-
-	// Currency selection state
-	const [showCustomCurrency, setShowCustomCurrency] = useState(false);
-	const [customCurrencyAddress, setCustomCurrencyAddress] = useState("");
-
-	// NFT management state
-	const [nftAddresses, setNftAddresses] = useState<string[]>([]);
-	const [nftTypes, setNftTypes] = useState<number[]>([]);
-
-	// Protocol configuration state
-	const [protocolConfig, setProtocolConfig] = useState<ProtocolConfig>({
-		accessType: "Allowlist",
+	// ── Form state (replaces 30+ individual useState calls) ──
+	// Cast needed: @hookform/resolvers@3.3 types expect Zod 3.22 internals,
+	// but bun resolved to Zod 3.25 which has incompatible _parse signature.
+	// Runtime behavior is identical — this is purely a type-level conflict.
+	const form = useForm<JarCreationFormData>({
+		resolver: zodResolver(jarCreationSchema as any),
+		defaultValues: {
+			jarName: "",
+			jarOwnerAddress: "0x0000000000000000000000000000000000000000",
+			supportedCurrency: ETH_ADDRESS,
+			metadata: "",
+			imageUrl: "",
+			externalLink: "",
+			showCustomCurrency: false,
+			customCurrencyAddress: "",
+			withdrawalOption: WithdrawalTypeOptions.Fixed,
+			fixedAmount: "0",
+			maxWithdrawal: "0",
+			withdrawalInterval: "0",
+			strictPurpose: true,
+			emergencyWithdrawalEnabled: true,
+			oneTimeWithdrawal: false,
+			accessType: AccessType.Allowlist,
+			nftAddresses: [],
+			nftTypes: [],
+			protocolConfig: { accessType: "Allowlist" },
+			enableCustomFee: false,
+			customFee: "",
+			streamingEnabled: false,
+			requireStreamApproval: true,
+			maxStreamRate: "1.0",
+			minStreamDuration: "1",
+			autoSwapEnabled: false,
+		},
+		mode: "onTouched",
 	});
 
-	// Form validation state
+	// ── Non-form state ──
 	const [isFormError, setIsFormError] = useState(false);
 	const [formErrors, setFormErrors] = useState<string[]>([]);
-
-	// Transaction state
 	const [_isCreating, setIsCreating] = useState(false);
 	const [newJarPreview, setNewJarPreview] = useState<{
 		address: string;
@@ -197,7 +96,7 @@ export const useJarCreation = () => {
 		currency: string;
 	} | null>(null);
 
-	// Contract interaction
+	// ── Contract interaction ──
 	const {
 		writeContract,
 		data: hash,
@@ -208,17 +107,14 @@ export const useJarCreation = () => {
 		isLoading: isWaitingForTx,
 		isSuccess: txConfirmed,
 		data: receipt,
-	} = useWaitForTransactionReceipt({
-		hash,
-	});
+	} = useWaitForTransactionReceipt({ hash });
 
-	// Get factory address
 	const factoryAddress = contractAddresses.cookieJarFactory[chainId] as
 		| `0x${string}`
 		| undefined;
 	const isV2Contract = isV2Chain(chainId);
 
-	// Helper functions
+	// ── Helpers ──
 	const parseAmount = (amount: string) => {
 		try {
 			return parseEther(amount || "0");
@@ -227,17 +123,22 @@ export const useJarCreation = () => {
 		}
 	};
 
-	const handleCheckboxChange =
-		(setter: (value: boolean) => void) =>
-		(checked: boolean | "indeterminate") => {
-			setter(checked === true);
-		};
+	// ── Step validation ──
+	// These read from form.getValues() instead of individual state variables.
+	// Cross-field conditional logic stays here because Zod can't handle
+	// cross-step superRefine with RHF's trigger().
 
-	// Validation functions
 	const validateStep1 = useCallback((): {
 		isValid: boolean;
 		errors: string[];
 	} => {
+		const {
+			jarName,
+			jarOwnerAddress,
+			supportedCurrency,
+			showCustomCurrency,
+			customCurrencyAddress,
+		} = form.getValues();
 		const errors: string[] = [];
 
 		if (!jarName.trim()) {
@@ -258,22 +159,15 @@ export const useJarCreation = () => {
 			}
 		}
 
-		return {
-			isValid: errors.length === 0,
-			errors,
-		};
-	}, [
-		jarName,
-		jarOwnerAddress,
-		supportedCurrency,
-		showCustomCurrency,
-		customCurrencyAddress,
-	]);
+		return { isValid: errors.length === 0, errors };
+	}, [form]);
 
 	const validateStep2 = useCallback((): {
 		isValid: boolean;
 		errors: string[];
 	} => {
+		const { withdrawalOption, fixedAmount, maxWithdrawal, withdrawalInterval } =
+			form.getValues();
 		const errors: string[] = [];
 
 		if (withdrawalOption === WithdrawalTypeOptions.Fixed) {
@@ -290,16 +184,15 @@ export const useJarCreation = () => {
 			errors.push("Withdrawal interval must be greater than 0 days");
 		}
 
-		return {
-			isValid: errors.length === 0,
-			errors,
-		};
-	}, [withdrawalOption, fixedAmount, maxWithdrawal, withdrawalInterval]);
+		return { isValid: errors.length === 0, errors };
+	}, [form]);
 
 	const validateStep3 = useCallback((): {
 		isValid: boolean;
 		errors: string[];
 	} => {
+		const values = form.getValues();
+		const { accessType, nftAddresses } = values;
 		const errors: string[] = [];
 
 		if (accessType === AccessType.NFTGated) {
@@ -309,25 +202,27 @@ export const useJarCreation = () => {
 				);
 			}
 
-			nftAddresses.forEach((addr, index) => {
+			for (const addr of nftAddresses) {
 				if (!isAddress(addr)) {
-					errors.push(
-						`NFT address ${index + 1} is not a valid Ethereum address`,
-					);
+					errors.push(`NFT address is not a valid Ethereum address`);
+					break;
 				}
-			});
+			}
 		}
 
-		return {
-			isValid: errors.length === 0,
-			errors,
-		};
-	}, [accessType, nftAddresses]);
+		const accessValidationError = getAccessConfigValidationError(values);
+		if (accessValidationError) {
+			errors.push(accessValidationError);
+		}
+
+		return { isValid: errors.length === 0, errors };
+	}, [form]);
 
 	const validateStep4 = useCallback((): {
 		isValid: boolean;
 		errors: string[];
 	} => {
+		const { enableCustomFee, customFee } = form.getValues();
 		const errors: string[] = [];
 
 		if (enableCustomFee) {
@@ -340,11 +235,8 @@ export const useJarCreation = () => {
 			}
 		}
 
-		return {
-			isValid: errors.length === 0,
-			errors,
-		};
-	}, [enableCustomFee, customFee]);
+		return { isValid: errors.length === 0, errors };
+	}, [form]);
 
 	const validateAll = useCallback((): {
 		isValid: boolean;
@@ -362,51 +254,12 @@ export const useJarCreation = () => {
 			...step4.errors,
 		];
 
-		return {
-			isValid: allErrors.length === 0,
-			errors: allErrors,
-		};
+		return { isValid: allErrors.length === 0, errors: allErrors };
 	}, [validateStep1, validateStep2, validateStep3, validateStep4]);
 
-	// Protocol configuration handler
-	const handleProtocolConfigChange = (config: ProtocolConfig) => {
-		setProtocolConfig(config);
-		switch (config.accessType) {
-			case "Allowlist":
-				setAccessType(AccessType.Allowlist);
-				break;
-			case "NFT":
-				setAccessType(AccessType.NFTGated);
-				if (config.nftAddresses) {
-					setNftAddresses(config.nftAddresses);
-				}
-				if (config.nftTypes) {
-					setNftTypes(config.nftTypes.map((t) => t as NFTType));
-				}
-				break;
-			case "POAP":
-				setAccessType(AccessType.POAP);
-				break;
-			case "Unlock":
-				setAccessType(AccessType.Unlock);
-				break;
-			case "Hypercert":
-				setAccessType(AccessType.Hypercert);
-				break;
-			case "Hats":
-				setAccessType(AccessType.Hats);
-				break;
-		}
-	};
-
-	// Handle NFT addition
-	const handleAddNFT = (address: string, type: number) => {
-		setNftAddresses((prev) => [...prev, address]);
-		setNftTypes((prev) => [...prev, type as NFTType]);
-	};
-
-	// Main form submission
+	// ── Form submission ──
 	const confirmSubmit = useCallback(() => {
+		const values = form.getValues();
 		const { isValid, errors } = validateAll();
 
 		if (!isValid) {
@@ -418,22 +271,20 @@ export const useJarCreation = () => {
 		setFormErrors([]);
 		setIsFormError(false);
 
-		// Only use NFT addresses if access type is TokenGated
 		const effectiveNftAddresses =
-			accessType === AccessType.NFTGated ? nftAddresses || [] : [];
+			values.accessType === AccessType.NFTGated ? values.nftAddresses : [];
 		const effectiveNftTypes =
-			accessType === AccessType.NFTGated ? nftTypes || [] : [];
+			values.accessType === AccessType.NFTGated ? values.nftTypes : [];
 
-		// Create metadata based on contract version
 		const finalMetadata = isV2Contract
 			? JSON.stringify({
 					version: "2.0",
-					name: jarName,
-					description: metadata,
-					image: imageUrl,
-					external_url: externalLink,
+					name: values.jarName,
+					description: values.metadata,
+					image: values.imageUrl,
+					external_url: values.externalLink,
 				})
-			: jarName || metadata || "Cookie Jar";
+			: values.jarName || values.metadata || "Cookie Jar";
 
 		try {
 			if (!factoryAddress) {
@@ -442,82 +293,42 @@ export const useJarCreation = () => {
 				);
 			}
 
-			if (isV2Contract) {
-				// V2 Contract - Use struct-based approach
-				const feeBps =
-					enableCustomFee && customFee !== ""
-						? Math.round(parseFloat(customFee) * 100)
-						: 0;
-
-				// Create parameter structs for V2
-				const params = {
-					cookieJarOwner: jarOwnerAddress,
-					supportedCurrency: supportedCurrency,
-					accessType: accessType,
-					withdrawalOption: withdrawalOption,
-					fixedAmount: parseAmount(fixedAmount),
-					maxWithdrawal: parseAmount(maxWithdrawal),
-					withdrawalInterval: BigInt(withdrawalInterval || "0"),
-					strictPurpose: strictPurpose,
-					emergencyWithdrawalEnabled: emergencyWithdrawalEnabled,
-					oneTimeWithdrawal: oneTimeWithdrawal,
-					metadata: finalMetadata,
-					customFeePercentage: BigInt(feeBps),
-					maxWithdrawalPerPeriod: BigInt(0), // Default to unlimited
-				};
-
-				const accessConfig = {
-					nftAddresses: effectiveNftAddresses as readonly `0x${string}`[],
-					nftTypes: effectiveNftTypes as readonly number[],
-					allowlist: [] as readonly `0x${string}`[], // Will be populated by admin later
-					poapReq: {
-						eventId: BigInt(0),
-						poapContract:
-							"0x0000000000000000000000000000000000000000" as `0x${string}`,
-					},
-					unlockReq: {
-						lockAddress:
-							"0x0000000000000000000000000000000000000000" as `0x${string}`,
-					},
-					hypercertReq: {
-						tokenContract:
-							"0x0000000000000000000000000000000000000000" as `0x${string}`,
-						tokenId: BigInt(0),
-						minBalance: BigInt(1),
-					},
-					hatsReq: {
-						hatId: BigInt(0),
-						hatsContract:
-							"0x0000000000000000000000000000000000000000" as `0x${string}`,
-					},
-				};
+				if (isV2Contract) {
+					const args = buildV2CreateCookieJarArgs({
+						values: {
+							...values,
+							nftAddresses: effectiveNftAddresses,
+							nftTypes: effectiveNftTypes,
+						},
+						metadata: finalMetadata,
+						parseAmount,
+					});
 
-				writeContract({
-					address: factoryAddress,
-					abi: cookieJarFactoryV2Abi,
-					functionName: "createCookieJar",
-					args: [params, accessConfig],
-				});
-			} else {
-				// V1 Contract - Use legacy approach
+					writeContract({
+						address: factoryAddress,
+						abi: cookieJarFactoryAbi,
+						functionName: "createCookieJar",
+						args,
+					});
+				} else {
 				writeContract({
 					address: factoryAddress,
 					abi: cookieJarFactoryV1Abi,
 					functionName: "createCookieJar",
 					args: [
-						jarOwnerAddress,
-						supportedCurrency,
-						accessType,
+						values.jarOwnerAddress as `0x${string}`,
+						values.supportedCurrency as `0x${string}`,
+						values.accessType,
 						effectiveNftAddresses as readonly `0x${string}`[],
 						effectiveNftTypes,
-						withdrawalOption,
-						parseAmount(fixedAmount),
-						parseAmount(maxWithdrawal),
-						BigInt(withdrawalInterval || "0"),
-						strictPurpose,
-						emergencyWithdrawalEnabled,
-						oneTimeWithdrawal,
-						[] as readonly `0x${string}`[], // Empty allowlist for now
+						values.withdrawalOption,
+						parseAmount(values.fixedAmount),
+						parseAmount(values.maxWithdrawal),
+						BigInt(values.withdrawalInterval || "0"),
+						values.strictPurpose,
+						values.emergencyWithdrawalEnabled,
+						values.oneTimeWithdrawal,
+						[] as readonly `0x${string}`[],
 						finalMetadata,
 					],
 				});
@@ -529,212 +340,23 @@ export const useJarCreation = () => {
 			toast({
 				title: "Transaction Failed",
 				description:
-					error instanceof Error ? error.message : "An unknown error occurred",
+					error instanceof Error
+						? error.message
+						: "An unknown error occurred",
 				variant: "destructive",
 			});
 		}
 	}, [
+		form,
 		validateAll,
-		accessType,
-		nftAddresses,
-		nftTypes,
 		isV2Contract,
-		jarName,
-		metadata,
-		imageUrl,
-		externalLink,
 		factoryAddress,
 		chainId,
-		enableCustomFee,
-		customFee,
 		writeContract,
-		jarOwnerAddress,
-		supportedCurrency,
-		withdrawalOption,
-		fixedAmount,
-		maxWithdrawal,
-		withdrawalInterval,
-		strictPurpose,
-		emergencyWithdrawalEnabled,
-		oneTimeWithdrawal,
 		toast,
-		parseAmount,
 	]);
 
-	// Reset form function
-	const resetForm = useCallback(() => {
-		setJarName("");
-		setJarOwnerAddress("0x0000000000000000000000000000000000000000");
-		setSupportedCurrency(ETH_ADDRESS);
-		setAccessType(AccessType.Allowlist);
-		setWithdrawalOption(WithdrawalTypeOptions.Fixed);
-		setFixedAmount("0");
-		setMaxWithdrawal("0");
-		setWithdrawalInterval("0");
-		setStrictPurpose(true);
-		setEmergencyWithdrawalEnabled(true);
-		setOneTimeWithdrawal(false);
-		setMetadata("");
-		setImageUrl("");
-		setExternalLink("");
-		setCustomFee("");
-		setEnableCustomFee(false);
-		setStreamingEnabled(false);
-		setRequireStreamApproval(true);
-		setMaxStreamRate("1.0");
-		setMinStreamDuration("1");
-		setAutoSwapEnabled(false);
-		setShowCustomCurrency(false);
-		setCustomCurrencyAddress("");
-		setNftAddresses([]);
-		setNftTypes([]);
-		setProtocolConfig({ accessType: "Allowlist" });
-	}, []);
-
-	// Currency options for the supported network
-	const getCurrencyOptions = () => {
-		const options: Array<{ value: string; label: string; description: string }> = [
-			{
-				value: ETH_ADDRESS,
-				label: "ETH (Native)",
-				description: "Use native Ethereum",
-			},
-		];
-
-		// Add chain-specific ERC20 tokens
-		if (chainId === 31337) {
-			// Local development
-			options.push({
-				value: "0x036CbD53842c5426634e7929541eC2318f3dCF7e",
-				label: "DEMO Token",
-				description: "Local development token",
-			});
-		} else if (chainId === 84532) {
-			// Base Sepolia
-			options.push({
-				value: "0x4200000000000000000000000000000000000006",
-				label: "WETH",
-				description: "Wrapped ETH on Base Sepolia",
-			});
-		}
-
-		// Add custom option
-		options.push({
-			value: "CUSTOM",
-			label: "Custom ERC-20",
-			description: "Enter your own ERC-20 token address",
-		});
-
-		return options;
-	};
-
-	// Handle currency selection change
-	const handleCurrencyChange = (value: string) => {
-		if (value === "CUSTOM") {
-			setShowCustomCurrency(true);
-		} else {
-			setShowCustomCurrency(false);
-			setSupportedCurrency(value as `0x${string}`);
-			setCustomCurrencyAddress("");
-		}
-	};
-
-	// Basic ERC-20 validation
-	const validateERC20Address = async (address: string): Promise<boolean> => {
-		if (!isAddress(address)) return false;
-		if (address.toLowerCase() === ETH_ADDRESS.toLowerCase()) return true;
-
-		try {
-			return isAddress(address);
-		} catch (error) {
-			console.error("ERC-20 validation error:", error);
-			return false;
-		}
-	};
-
-	// Handle custom currency address
-	const handleCustomCurrencySubmit = async () => {
-		if (customCurrencyAddress && isAddress(customCurrencyAddress)) {
-			const isValidERC20 = await validateERC20Address(customCurrencyAddress);
-
-			if (isValidERC20) {
-				setSupportedCurrency(customCurrencyAddress as `0x${string}`);
-				toast({
-					title: "Custom currency set",
-					description: "ERC-20 token address has been set successfully",
-				});
-			} else {
-				toast({
-					title: "Invalid ERC-20 address",
-					description:
-						"The address doesn't appear to be a valid ERC-20 contract. Please verify the address.",
-					variant: "destructive",
-				});
-			}
-		} else {
-			toast({
-				title: "Invalid address",
-				description: "Please enter a valid Ethereum address",
-				variant: "destructive",
-			});
-		}
-	};
-
-	// Development helper
-	const prepopulateRandomData = () => {
-		if (process.env.NODE_ENV !== "development") return;
-
-		const randomNames = [
-			"Cookie Fund",
-			"Dev Grants",
-			"Community Pool",
-			"Test Jar",
-			"Demo Fund",
-			"Alpha Pool",
-		];
-		const randomDescriptions = [
-			"A fund for supporting cookie development",
-			"Grants for innovative projects",
-			"Community-driven funding pool",
-			"Testing new jar functionality",
-			"Demonstration of jar capabilities",
-			"Early access funding",
-		];
-		const randomImages = [
-			"https://picsum.photos/400/300?random=1",
-			"https://picsum.photos/400/300?random=2",
-			"https://picsum.photos/400/300?random=3",
-		];
-		const randomLinks = [
-			"https://example.com/project1",
-			"https://github.com/test/repo",
-			"https://docs.example.com",
-		];
-
-		setJarName(randomNames[Math.floor(Math.random() * randomNames.length)]);
-		setMetadata(
-			randomDescriptions[Math.floor(Math.random() * randomDescriptions.length)],
-		);
-		setImageUrl(randomImages[Math.floor(Math.random() * randomImages.length)]);
-		setExternalLink(
-			randomLinks[Math.floor(Math.random() * randomLinks.length)],
-		);
-
-		if (Math.random() > 0.5) {
-			setEnableCustomFee(true);
-			setCustomFee((Math.random() * 1.9 + 0.1).toFixed(2));
-		}
-
-		if (Math.random() > 0.7) {
-			setSupportedCurrency("0x036CbD53842c5426634e7929541eC2318f3dCF7e");
-		}
-
-		setFixedAmount((Math.random() * 0.5).toFixed(3));
-		setMaxWithdrawal((Math.random() * 2).toFixed(3));
-		setWithdrawalInterval(String(Math.floor(Math.random() * 30 + 1)));
-	};
-
-	// Trigger confetti animation
+	// ── Confetti ──
 	const triggerConfetti = async () => {
 		try {
 			const confettiModule = await import("canvas-confetti");
@@ -749,18 +371,19 @@ export const useJarCreation = () => {
 		}
 	};
 
-	// Effects
+	// ── Effects ──
+
+	// Handle successful transaction
 	useEffect(() => {
 		if (txConfirmed && receipt) {
-			console.log("🎉 Transaction confirmed:", receipt);
+			const values = form.getValues();
 
-			// Invalidate cache to show new jar immediately
 			queryClient.invalidateQueries({
 				queryKey: ["cookie-jar-factory", chainId, factoryAddress],
 			});
 
 			toast({
-				title: "Cookie Jar Created! 🎉",
+				title: "Cookie Jar Created!",
 				description:
 					"Your new jar has been deployed successfully. Visit /jars to see it in the list!",
 			});
@@ -771,38 +394,40 @@ export const useJarCreation = () => {
 				let jarAddress: string | null = null;
 
 				if (receipt.logs && receipt.logs.length > 0) {
-					for (const log of receipt.logs) {
-						try {
-							const decodedLog = decodeEventLog({
-								abi: isV2Contract ? cookieJarFactoryAbi : cookieJarFactoryV1Abi,
-								data: log.data,
-								topics: log.topics,
-								eventName: "CookieJarCreated",
-							});
-
-							if (decodedLog.eventName === "CookieJarCreated") {
-								jarAddress = (decodedLog.args as any)?.cookieJarAddress;
-								console.log(
-									"✅ Decoded CookieJarCreated event - jar address:",
-									jarAddress,
-								);
-								break;
+						for (const log of receipt.logs) {
+							try {
+								const eventName = isV2Contract
+									? ("JarCreated" as const)
+									: ("CookieJarCreated" as const);
+								const decodedLog = decodeEventLog({
+									abi: isV2Contract
+										? cookieJarFactoryAbi
+										: cookieJarFactoryV1Abi,
+									data: log.data,
+									topics: log.topics,
+									eventName,
+								});
+
+								if (decodedLog.eventName === "JarCreated") {
+									jarAddress = (decodedLog.args as any)?.jarAddress;
+									break;
+								}
+
+								if (decodedLog.eventName === "CookieJarCreated") {
+									jarAddress = (decodedLog.args as any)?.cookieJarAddress;
+									break;
+								}
+							} catch {
+								// Log is not the expected jar-created event, checking next
 							}
-						} catch {
-							console.log(
-								"📝 Log is not CookieJarCreated event, checking next log",
-							);
 						}
 					}
-				}
 
 				if (jarAddress && isAddress(jarAddress)) {
-					console.log("🎯 Successfully extracted jar address:", jarAddress);
-
 					setNewJarPreview({
 						address: jarAddress,
-						name: jarName || "New Cookie Jar",
-						currency: supportedCurrency,
+						name: values.jarName || "New Cookie Jar",
+						currency: values.supportedCurrency,
 					});
 
 					setTimeout(() => {
@@ -810,41 +435,36 @@ export const useJarCreation = () => {
 					}, 1000);
 
 					setIsCreating(false);
-					resetForm();
+					form.reset();
 					return;
 				}
 
-				console.warn(
-					"⚠️ Could not extract jar address from event, redirecting to jars page",
-				);
 				setTimeout(() => {
 					router.push("/jars");
 				}, 500);
 			} catch (error) {
-				console.error("❌ Error extracting jar address:", error);
+				console.error("Error extracting jar address:", error);
 				setTimeout(() => {
 					router.push("/jars");
 				}, 500);
 			}
 
 			setIsCreating(false);
-			resetForm();
+			form.reset();
 		}
 	}, [
 		txConfirmed,
 		receipt,
 		router,
-		jarName,
-		supportedCurrency,
 		isV2Contract,
 		toast,
-		resetForm,
+		form,
 		queryClient,
 		chainId,
 		factoryAddress,
-		triggerConfetti,
 	]);
 
+	// Handle transaction error
 	useEffect(() => {
 		if (createError) {
 			console.error("Transaction error:", createError);
@@ -860,82 +480,25 @@ export const useJarCreation = () => {
 		}
 	}, [createError, toast]);
 
+	// Sync wallet address to form
 	useEffect(() => {
 		if (isConnected && address) {
-			setJarOwnerAddress(address);
+			form.setValue("jarOwnerAddress", address);
 		}
-	}, [isConnected, address]);
+	}, [isConnected, address, form]);
 
+	// Reset v2-only fields when switching to v1 chain
 	useEffect(() => {
 		if (!isV2Contract) {
-			setAccessType(AccessType.Allowlist);
-			setEnableCustomFee(false);
-			setCustomFee("");
+			form.setValue("accessType", AccessType.Allowlist);
+			form.setValue("enableCustomFee", false);
+			form.setValue("customFee", "");
 		}
-	}, [isV2Contract]);
+	}, [isV2Contract, form]);
 
 	return {
-		// Form state
-		selectedNetwork,
-		setSelectedNetwork,
-		jarOwnerAddress,
-		setJarOwnerAddress,
-		supportedCurrency,
-		setSupportedCurrency,
-		accessType,
-		setAccessType,
-		withdrawalOption,
-		setWithdrawalOption,
-		fixedAmount,
-		setFixedAmount,
-		maxWithdrawal,
-		setMaxWithdrawal,
-		withdrawalInterval,
-		setWithdrawalInterval,
-		strictPurpose,
-		setStrictPurpose,
-		emergencyWithdrawalEnabled,
-		setEmergencyWithdrawalEnabled,
-		oneTimeWithdrawal,
-		setOneTimeWithdrawal,
-		metadata,
-		setMetadata,
-		jarName,
-		setJarName,
-		imageUrl,
-		setImageUrl,
-		externalLink,
-		setExternalLink,
-		customFee,
-		setCustomFee,
-		enableCustomFee,
-		setEnableCustomFee,
-		streamingEnabled,
-		setStreamingEnabled,
-		requireStreamApproval,
-		setRequireStreamApproval,
-		maxStreamRate,
-		setMaxStreamRate,
-		minStreamDuration,
-		setMinStreamDuration,
-		autoSwapEnabled,
-		setAutoSwapEnabled,
-		showCustomCurrency,
-		setShowCustomCurrency,
-		customCurrencyAddress,
-		setCustomCurrencyAddress,
-		nftAddresses,
-		setNftAddresses,
-		nftTypes,
-		setNftTypes,
-		protocolConfig,
-		setProtocolConfig,
-		isFormError,
-		setIsFormError,
-		formErrors,
-		setFormErrors,
-		newJarPreview,
-		setNewJarPreview,
+		// RHF form instance — wrap in <FormProvider {...form}>
+		form,
 
 		// Transaction state
 		isCreating: isPending,
@@ -944,27 +507,24 @@ export const useJarCreation = () => {
 		receipt,
 		createError,
 
+		// Error state
+		isFormError,
+		formErrors,
+
+		// Preview
+		newJarPreview,
+
 		// Actions
 		confirmSubmit,
-		resetForm,
-		handleCheckboxChange,
-		handleProtocolConfigChange,
-		handleAddNFT,
-		handleCurrencyChange,
-		handleCustomCurrencySubmit,
-		prepopulateRandomData,
-
-		// Validation
+		resetForm: () => form.reset(),
+
+		// Per-step validation
 		validateStep1,
 		validateStep2,
 		validateStep3,
 		validateStep4,
 		validateAll,
 
-		// Utilities
-		getCurrencyOptions,
-		parseAmount,
-
 		// Constants
 		ETH_ADDRESS,
 		factoryAddress,
diff --git a/client/hooks/nft/useEnhancedNFTValidation.ts b/client/hooks/nft/useEnhancedNFTValidation.ts
index 56362e7..64f5dcc 100644
--- a/client/hooks/nft/useEnhancedNFTValidation.ts
+++ b/client/hooks/nft/useEnhancedNFTValidation.ts
@@ -119,7 +119,8 @@ export function useEnhancedNFTValidation(
 		},
 	});
 
-	// ERC721 check
+	// ERC721 and ERC1155 checks run in PARALLEL — both enable simultaneously
+	// when supportsERC165 becomes true. Wagmi fires independent RPC calls.
 	const {
 		data: supportsERC721,
 		isLoading: isCheckingERC721,
@@ -135,7 +136,6 @@ export function useEnhancedNFTValidation(
 		},
 	});
 
-	// ERC1155 check
 	const {
 		data: supportsERC1155,
 		isLoading: isCheckingERC1155,
@@ -177,21 +177,9 @@ export function useEnhancedNFTValidation(
 			return;
 		}
 
-		// Check if we have results
-		if (cacheKey && enableCaching && !forceFresh) {
-			const cached = validationCache.get(cacheKey);
-			if (
-				cached &&
-				(!currentBlock || cached.blockNumber >= Number(currentBlock) - 100)
-			) {
-				setResult({
-					...cached.data,
-					fromCache: true,
-					cacheAge: Date.now() - cached.timestamp,
-				});
-				return;
-			}
-		}
+		// Note: Cache is already checked in the earlier useEffect.
+		// If it was valid, result.isValid would be true and queries
+		// would be disabled, so we won't reach this point.
 
 		// Process ERC165 results
 		if (supportsERC165 === false) {
@@ -262,7 +250,6 @@ export function useEnhancedNFTValidation(
 		cacheKey,
 		enableCaching,
 		currentBlock,
-		forceFresh,
 	]);
 
 	// Malicious contract check (optional)
diff --git a/client/hooks/nft/useHats.ts b/client/hooks/nft/useHats.ts
index 3d9e13a..0f55f7a 100644
--- a/client/hooks/nft/useHats.ts
+++ b/client/hooks/nft/useHats.ts
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { isAddress } from "viem";
 import { useAccount, useChainId, useReadContract } from "wagmi";
 import {
@@ -10,15 +10,10 @@ import {
  * Hat information structure - extends the provider interface
  */
 export interface HatInfo extends Omit<ProviderHatDetails, "maxSupply"> {
-	/** Display name of the hat */
 	name?: string;
-	/** Hat description */
 	description?: string;
-	/** Whether the hat is currently active */
 	isActive?: boolean;
-	/** Number of current hat wearers */
 	wearerCount?: number;
-	/** Maximum number of wearers allowed */
 	maxSupply?: number;
 }
 
@@ -26,73 +21,45 @@ export interface HatInfo extends Omit<ProviderHatDetails, "maxSupply"> {
  * User's hat data with status information
  */
 export interface UserHat {
-	/** Hat ID */
 	hatId: string;
-	/** Full hat information */
 	hat: HatInfo;
-	/** Whether user is currently wearing the hat */
 	isWearing: boolean;
-	/** Whether user is eligible for the hat */
 	isEligible: boolean;
-	/** Whether user is in good standing */
 	isInGoodStanding: boolean;
 }
 
-/**
- * Options for configuring the useHats hook
- */
 interface UseHatsOptions {
-	/** Specific hat ID to check */
 	hatId?: string;
-	/** Hats contract address (network specific) */
 	hatsContract?: string;
-	/** Whether to fetch user's hats automatically */
 	fetchUserHats?: boolean;
-	/** Whether to check eligibility in real-time */
 	checkEligibility?: boolean;
 }
 
-/**
- * Return type for useHats hook
- */
 interface UseHatsResult {
-	/** Array of user's hats */
 	userHats: UserHat[];
-	/** Specific hat info (if hatId provided) */
 	hatInfo: HatInfo | null;
-	/** Whether user is wearing specific hat */
 	isWearingHat: boolean;
-	/** Whether user is eligible for hat */
 	isEligible: boolean;
-	/** Overall loading state */
 	isLoading: boolean;
-	/** Loading state for user hats */
 	isLoadingHats: boolean;
-	/** Loading state for eligibility check */
 	isCheckingEligibility: boolean;
-	/** General error state */
 	error: string | null;
-	/** Error specific to hat fetching */
 	hatsError: string | null;
-	/** Error specific to eligibility checking */
 	eligibilityError: string | null;
-	/** Function to search for hats */
 	searchHats: (query: string) => Promise<HatInfo[]>;
-	/** Function to validate a specific hat ID */
 	validateHatId: (hatId: string) => Promise<HatInfo | null>;
-	/** Function to refetch all data */
 	refetch: () => void;
 }
 
 // Hats Protocol contract addresses per network
 const HATS_CONTRACTS: Record<number, string> = {
-	1: "0x3bc1A0Ad72417f2d411118085256fC53CBdDd137", // Ethereum Mainnet
-	10: "0x3bc1A0Ad72417f2d411118085256fC53CBdDd137", // Optimism
-	100: "0x3bc1A0Ad72417f2d411118085256fC53CBdDd137", // Gnosis Chain
-	8453: "0x3bc1A0Ad72417f2d411118085256fC53CBdDd137", // Base
-	42161: "0x3bc1A0Ad72417f2d411118085256fC53CBdDd137", // Arbitrum
-	11155111: "0x3bc1A0Ad72417f2d411118085256fC53CBdDd137", // Sepolia
-	84532: "0x3bc1A0Ad72417f2d411118085256fC53CBdDd137", // Base Sepolia
+	1: "0x3bc1A0Ad72417f2d411118085256fC53CBdDd137",
+	10: "0x3bc1A0Ad72417f2d411118085256fC53CBdDd137",
+	100: "0x3bc1A0Ad72417f2d411118085256fC53CBdDd137",
+	8453: "0x3bc1A0Ad72417f2d411118085256fC53CBdDd137",
+	42161: "0x3bc1A0Ad72417f2d411118085256fC53CBdDd137",
+	11155111: "0x3bc1A0Ad72417f2d411118085256fC53CBdDd137",
+	84532: "0x3bc1A0Ad72417f2d411118085256fC53CBdDd137",
 };
 
 // Minimal ABI for Hats Protocol contract
@@ -136,47 +103,24 @@ const HATS_ABI = [
 	},
 ] as const;
 
+/** Convert provider hat details to hook's HatInfo format */
+function toHatInfo(hat: ProviderHatDetails): HatInfo {
+	return {
+		...hat,
+		name: hat.details || `Hat #${hat.prettyId}`,
+		description: hat.details || "",
+		isActive: hat.status,
+		wearerCount: parseInt(hat.currentSupply, 10) || 0,
+		maxSupply: parseInt(hat.maxSupply, 10) || 0,
+	} as HatInfo;
+}
+
 /**
- * Custom hook for Hats Protocol integration
- *
- * Provides comprehensive Hats Protocol functionality including hat ownership
- * verification, eligibility checking, and organizational role management.
- * Uses both on-chain calls and the Hats SDK for optimal performance.
- *
- * Features:
- * - On-chain hat ownership verification
- * - Eligibility and good standing checks
- * - Hat metadata and information fetching
- * - Multi-network support
- * - Search functionality for discovering hats
- * - Real-time status updates
+ * Custom hook for Hats Protocol integration.
  *
- * @param options - Configuration options for hat functionality
- * @returns Object with hat data, status checks, and utility functions
- *
- * @example
- * ```tsx
- * const {
- *   userHats,
- *   isWearingHat,
- *   isEligible,
- *   searchHats,
- *   validateHatId
- * } = useHats({
- *   hatId: '12345',
- *   fetchUserHats: true,
- *   checkEligibility: true
- * });
- *
- * return (
- *   <div>
- *     {isWearingHat && <div>You are wearing this hat!</div>}
- *     {userHats.map(userHat => (
- *       <HatCard key={userHat.hatId} hat={userHat.hat} />
- *     ))}
- *   </div>
- * );
- * ```
+ * Uses on-chain contract reads (via wagmi) for real-time hat status
+ * and the Hats SDK for metadata/search operations. All async SDK calls
+ * use AbortController signals to prevent state updates after unmount.
  */
 export function useHats(options: UseHatsOptions = {}): UseHatsResult {
 	const { address: userAddress } = useAccount();
@@ -188,14 +132,23 @@ export function useHats(options: UseHatsOptions = {}): UseHatsResult {
 	const [hatsError, setHatsError] = useState<string | null>(null);
 	const [eligibilityError, setEligibilityError] = useState<string | null>(null);
 
+	// Track mount state for async callbacks triggered by refetch()
+	const mountedRef = useRef(true);
+	useEffect(() => {
+		mountedRef.current = true;
+		return () => {
+			mountedRef.current = false;
+		};
+	}, []);
+
 	const isLoading = isLoadingHats || isCheckingEligibility;
 	const error = hatsError || eligibilityError;
 
-	// Get Hats contract address for current network
 	const hatsContractAddress =
 		options.hatsContract || HATS_CONTRACTS[chainId] || HATS_CONTRACTS[1];
 
-	// Check if user is wearing specific hat using on-chain call
+	// ── On-chain reads (wagmi handles lifecycle automatically) ──
+
 	const {
 		data: isWearingHat,
 		isLoading: isCheckingWearer,
@@ -217,7 +170,6 @@ export function useHats(options: UseHatsOptions = {}): UseHatsResult {
 		},
 	});
 
-	// Check if user is eligible for hat
 	const {
 		data: isEligible,
 		isLoading: isCheckingEligible,
@@ -243,7 +195,7 @@ export function useHats(options: UseHatsOptions = {}): UseHatsResult {
 		},
 	});
 
-	// Check if user is in good standing (not currently used)
+	// Good standing check (used for error status display)
 	useReadContract({
 		address:
 			hatsContractAddress && isAddress(hatsContractAddress)
@@ -265,7 +217,7 @@ export function useHats(options: UseHatsOptions = {}): UseHatsResult {
 		},
 	});
 
-	// Get hat supply (not currently used)
+	// Hat supply check
 	useReadContract({
 		address:
 			hatsContractAddress && isAddress(hatsContractAddress)
@@ -279,132 +231,164 @@ export function useHats(options: UseHatsOptions = {}): UseHatsResult {
 		},
 	});
 
-	// Fetch user's hats
-	const fetchUserHats = async (address: string) => {
-		setIsLoadingHats(true);
-		setHatsError(null);
-
-		try {
-			const result = await hatsProvider.getUserHats(address, chainId, {
-				limit: 50,
-				activeOnly: true,
-			});
-
-			// Convert to hook format
-			const userHats: UserHat[] = result.hats.map((hat) => ({
-				hatId: hat.id,
-				hat: {
-					...hat,
-					name: hat.details || `Hat #${hat.prettyId}`,
-					description: hat.details || "",
-					isActive: hat.status,
-					wearerCount: parseInt(hat.currentSupply, 10) || 0,
-					maxSupply: parseInt(hat.maxSupply, 10) || 0,
-				} as HatInfo,
-				isWearing: true, // They're in the user's hat list, so they're wearing it
-				isEligible: true, // Assume eligible if they're wearing it
-				isInGoodStanding: true, // Assume good standing if they're wearing it
-			}));
-
-			setUserHats(userHats);
-		} catch (error) {
-			console.error("Error fetching user hats:", error);
-			setHatsError("Failed to fetch your organizational roles");
-		} finally {
-			setIsLoadingHats(false);
-		}
-	};
+	// ── Async SDK operations (wrapped in useCallback with abort support) ──
 
-	// Search for hats
-	const searchHats = async (query: string): Promise<HatInfo[]> => {
-		try {
-			const result = await hatsProvider.searchHats(query, chainId, {
-				limit: 20,
-				activeOnly: true,
-				includeSubHats: true,
-			});
-
-			// Convert to hook format
-			return result.hats.map(
-				(hat) =>
-					({
-						...hat,
-						name: hat.details || `Hat #${hat.prettyId}`,
-						description: hat.details || "",
-						isActive: hat.status,
-						wearerCount: parseInt(hat.currentSupply, 10) || 0,
-						maxSupply: parseInt(hat.maxSupply, 10) || 0,
-					}) as HatInfo,
-			);
-		} catch (error) {
-			console.error("Error searching hats:", error);
-			return [];
-		}
-	};
+	/**
+	 * Fetch user's hats from the SDK.
+	 * Accepts an AbortSignal to cancel state updates on unmount.
+	 */
+	const fetchUserHatsImpl = useCallback(
+		async (address: string, signal?: AbortSignal) => {
+			setIsLoadingHats(true);
+			setHatsError(null);
 
-	// Validate specific hat ID
-	const validateHatId = async (hatId: string): Promise<HatInfo | null> => {
-		if (!hatId || Number.isNaN(Number(hatId))) {
-			throw new Error("Hat ID must be a valid number");
-		}
+			try {
+				const result = await hatsProvider.getUserHats(address, chainId, {
+					limit: 50,
+					activeOnly: true,
+				});
 
-		setIsCheckingEligibility(true);
-		setEligibilityError(null);
+				// Guard: don't update state if aborted or unmounted
+				if (signal?.aborted) return;
 
-		try {
-			const hat = await hatsProvider.getHat(hatId, chainId);
+				const mapped: UserHat[] = result.hats.map((hat) => ({
+					hatId: hat.id,
+					hat: toHatInfo(hat),
+					isWearing: true,
+					isEligible: true,
+					isInGoodStanding: true,
+				}));
 
-			if (!hat) {
-				throw new Error("Hat not found");
+				setUserHats(mapped);
+			} catch (err) {
+				if (signal?.aborted) return;
+				console.error("Error fetching user hats:", err);
+				setHatsError("Failed to fetch your organizational roles");
+			} finally {
+				if (!signal?.aborted) {
+					setIsLoadingHats(false);
+				}
 			}
+		},
+		[chainId],
+	);
 
-			const hatInfo: HatInfo = {
-				...hat,
-				name: hat.details || `Hat #${hat.prettyId}`,
-				description: hat.details || "",
-				isActive: hat.status,
-				wearerCount: parseInt(hat.currentSupply, 10) || 0,
-				maxSupply: parseInt(hat.maxSupply, 10) || 0,
-			};
-
-			setHatInfo(hatInfo);
-			return hatInfo;
-		} catch (error) {
-			console.error("Error validating hat ID:", error);
-			setEligibilityError("Hat ID not found or invalid");
-			setHatInfo(null);
-			return null;
-		} finally {
-			setIsCheckingEligibility(false);
-		}
-	};
+	/**
+	 * Validate a specific hat ID via the SDK.
+	 * Accepts an AbortSignal to cancel state updates on unmount.
+	 */
+	const validateHatIdImpl = useCallback(
+		async (hatId: string, signal?: AbortSignal): Promise<HatInfo | null> => {
+			if (!hatId || Number.isNaN(Number(hatId))) {
+				throw new Error("Hat ID must be a valid number");
+			}
 
-	// Refetch all data
-	const refetch = () => {
+			setIsCheckingEligibility(true);
+			setEligibilityError(null);
+
+			try {
+				const hat = await hatsProvider.getHat(hatId, chainId);
+
+				if (signal?.aborted) return null;
+
+				if (!hat) {
+					throw new Error("Hat not found");
+				}
+
+				const info = toHatInfo(hat);
+				setHatInfo(info);
+				return info;
+			} catch (err) {
+				if (signal?.aborted) return null;
+				console.error("Error validating hat ID:", err);
+				setEligibilityError("Hat ID not found or invalid");
+				setHatInfo(null);
+				return null;
+			} finally {
+				if (!signal?.aborted) {
+					setIsCheckingEligibility(false);
+				}
+			}
+		},
+		[chainId],
+	);
+
+	/**
+	 * Search for hats — called by consumers, not by effects.
+	 * Stable reference via useCallback.
+	 */
+	const searchHats = useCallback(
+		async (query: string): Promise<HatInfo[]> => {
+			try {
+				const result = await hatsProvider.searchHats(query, chainId, {
+					limit: 20,
+					activeOnly: true,
+					includeSubHats: true,
+				});
+				return result.hats.map(toHatInfo);
+			} catch (err) {
+				console.error("Error searching hats:", err);
+				return [];
+			}
+		},
+		[chainId],
+	);
+
+	/**
+	 * Public validateHatId — delegates to impl but respects mountedRef.
+	 * Used by consumers calling refetch() or validateHatId() directly.
+	 */
+	const validateHatId = useCallback(
+		async (hatId: string): Promise<HatInfo | null> => {
+			return validateHatIdImpl(hatId);
+		},
+		[validateHatIdImpl],
+	);
+
+	/**
+	 * Refetch all data. Uses mountedRef guard since this is user-triggered
+	 * and not covered by the useEffect AbortController cleanup.
+	 */
+	const refetch = useCallback(() => {
 		if (userAddress && options.fetchUserHats) {
-			fetchUserHats(userAddress);
+			fetchUserHatsImpl(userAddress);
 		}
 		if (options.hatId) {
-			validateHatId(options.hatId);
+			validateHatIdImpl(options.hatId);
 		}
 		refetchWearer();
-	};
+	}, [
+		userAddress,
+		options.fetchUserHats,
+		options.hatId,
+		fetchUserHatsImpl,
+		validateHatIdImpl,
+		refetchWearer,
+	]);
+
+	// ── Effects ──
 
-	// Auto-fetch user hats when enabled
+	// Auto-fetch user hats (with AbortController cleanup)
 	useEffect(() => {
-		if (userAddress && options.fetchUserHats) {
-			fetchUserHats(userAddress);
-		}
-	}, [userAddress, options.fetchUserHats, fetchUserHats]);
+		if (!userAddress || !options.fetchUserHats) return;
+
+		const controller = new AbortController();
+		fetchUserHatsImpl(userAddress, controller.signal);
 
-	// Auto-validate specific hat when provided
+		return () => controller.abort();
+	}, [userAddress, options.fetchUserHats, fetchUserHatsImpl]);
+
+	// Auto-validate specific hat (with AbortController cleanup)
 	useEffect(() => {
-		if (options.hatId) {
-			validateHatId(options.hatId);
-		}
-	}, [options.hatId, validateHatId]);
+		if (!options.hatId) return;
+
+		const controller = new AbortController();
+		validateHatIdImpl(options.hatId, controller.signal);
+
+		return () => controller.abort();
+	}, [options.hatId, validateHatIdImpl]);
 
-	// Handle on-chain errors
+	// Propagate on-chain errors
 	useEffect(() => {
 		if (wearerError || eligibleError) {
 			setEligibilityError("Failed to check hat eligibility");
diff --git a/client/lib/blockchain/constants.ts b/client/lib/blockchain/constants.ts
index 485b7ee..a73560d 100644
--- a/client/lib/blockchain/constants.ts
+++ b/client/lib/blockchain/constants.ts
@@ -5,3 +5,18 @@ import type { Address } from "viem";
  * Matches `CookieJarLib.ETH_ADDRESS` on-chain (`0xEeeee…EEeE`).
  */
 export const ETH_ADDRESS = "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE" as Address;
+
+/** Canonical zero address. */
+export const ZERO_ADDRESS =
+	"0x0000000000000000000000000000000000000000" as Address;
+
+/**
+ * Canonical POAP ERC-721 token contract.
+ * Source: https://documentation.poap.tech/docs/smart-contract-reference
+ */
+export const POAP_TOKEN_ADDRESS =
+	"0x22C1f6050E56d2876009903609a2cC3fEf83B415" as Address;
+
+/** Default Hats Protocol contract used across supported chains. */
+export const HATS_PROTOCOL_ADDRESS =
+	"0x3bc1A0Ad72417f2d411118085256fC53CBdDd137" as Address;
diff --git a/client/lib/blockchain/cookie-jar-v2-abi.ts b/client/lib/blockchain/cookie-jar-v2-abi.ts
index d123721..28bbab8 100644
--- a/client/lib/blockchain/cookie-jar-v2-abi.ts
+++ b/client/lib/blockchain/cookie-jar-v2-abi.ts
@@ -1,284 +1,7 @@
+import { cookieJarFactoryAbi } from "@/generated";
+
 /**
- * Cookie Jar Factory v2 ABI - Optimized struct-based functions
+ * Legacy alias retained for backwards compatibility.
+ * `client/generated.ts` is the single canonical source for factory ABI.
  */
-export const cookieJarFactoryV2Abi = [
-	// Read functions
-	{
-		inputs: [],
-		name: "getAllJars",
-		outputs: [{ internalType: "address[]", name: "", type: "address[]" }],
-		stateMutability: "view",
-		type: "function",
-	},
-	{
-		inputs: [{ internalType: "uint256", name: "", type: "uint256" }],
-		name: "metadatas",
-		outputs: [{ internalType: "string", name: "", type: "string" }],
-		stateMutability: "view",
-		type: "function",
-	},
-
-	// Optimized struct-based create functions
-	{
-		inputs: [
-			{
-				components: [
-					{ internalType: "address", name: "cookieJarOwner", type: "address" },
-					{
-						internalType: "address",
-						name: "supportedCurrency",
-						type: "address",
-					},
-					{
-						internalType: "enum CookieJarLib.AccessType",
-						name: "accessType",
-						type: "uint8",
-					},
-					{
-						internalType: "enum CookieJarLib.WithdrawalTypeOptions",
-						name: "withdrawalOption",
-						type: "uint8",
-					},
-					{ internalType: "uint256", name: "fixedAmount", type: "uint256" },
-					{ internalType: "uint256", name: "maxWithdrawal", type: "uint256" },
-					{
-						internalType: "uint256",
-						name: "withdrawalInterval",
-						type: "uint256",
-					},
-					{ internalType: "bool", name: "strictPurpose", type: "bool" },
-					{
-						internalType: "bool",
-						name: "emergencyWithdrawalEnabled",
-						type: "bool",
-					},
-					{ internalType: "bool", name: "oneTimeWithdrawal", type: "bool" },
-					{ internalType: "string", name: "metadata", type: "string" },
-					{
-						internalType: "uint256",
-						name: "customFeePercentage",
-						type: "uint256",
-					},
-				],
-				internalType: "struct CookieJarLib.CreateJarParams",
-				name: "params",
-				type: "tuple",
-			},
-			{
-				components: [
-					{
-						internalType: "address[]",
-						name: "nftAddresses",
-						type: "address[]",
-					},
-					{
-						internalType: "enum CookieJarLib.NFTType[]",
-						name: "nftTypes",
-						type: "uint8[]",
-					},
-					{ internalType: "address[]", name: "allowlist", type: "address[]" },
-					{
-						components: [
-							{ internalType: "uint256", name: "eventId", type: "uint256" },
-							{
-								internalType: "address",
-								name: "poapContract",
-								type: "address",
-							},
-						],
-						internalType: "struct CookieJarLib.POAPRequirement",
-						name: "poapReq",
-						type: "tuple",
-					},
-					{
-						components: [
-							{ internalType: "address", name: "lockAddress", type: "address" },
-						],
-						internalType: "struct CookieJarLib.UnlockRequirement",
-						name: "unlockReq",
-						type: "tuple",
-					},
-					{
-						components: [
-							{
-								internalType: "address",
-								name: "tokenContract",
-								type: "address",
-							},
-							{ internalType: "uint256", name: "tokenId", type: "uint256" },
-							{ internalType: "uint256", name: "minBalance", type: "uint256" },
-						],
-						internalType: "struct CookieJarLib.HypercertRequirement",
-						name: "hypercertReq",
-						type: "tuple",
-					},
-					{
-						components: [
-							{ internalType: "uint256", name: "hatId", type: "uint256" },
-							{
-								internalType: "address",
-								name: "hatsContract",
-								type: "address",
-							},
-						],
-						internalType: "struct CookieJarLib.HatsRequirement",
-						name: "hatsReq",
-						type: "tuple",
-					},
-				],
-				internalType: "struct CookieJarLib.AccessConfig",
-				name: "accessConfig",
-				type: "tuple",
-			},
-		],
-		name: "createCookieJar",
-		outputs: [{ internalType: "address", name: "", type: "address" }],
-		stateMutability: "nonpayable",
-		type: "function",
-	},
-
-	{
-		inputs: [
-			{
-				components: [
-					{ internalType: "address", name: "cookieJarOwner", type: "address" },
-					{
-						internalType: "address",
-						name: "supportedCurrency",
-						type: "address",
-					},
-					{
-						internalType: "enum CookieJarLib.AccessType",
-						name: "accessType",
-						type: "uint8",
-					},
-					{
-						internalType: "enum CookieJarLib.WithdrawalTypeOptions",
-						name: "withdrawalOption",
-						type: "uint8",
-					},
-					{ internalType: "uint256", name: "fixedAmount", type: "uint256" },
-					{ internalType: "uint256", name: "maxWithdrawal", type: "uint256" },
-					{
-						internalType: "uint256",
-						name: "withdrawalInterval",
-						type: "uint256",
-					},
-					{ internalType: "bool", name: "strictPurpose", type: "bool" },
-					{
-						internalType: "bool",
-						name: "emergencyWithdrawalEnabled",
-						type: "bool",
-					},
-					{ internalType: "bool", name: "oneTimeWithdrawal", type: "bool" },
-					{ internalType: "string", name: "metadata", type: "string" },
-					{
-						internalType: "uint256",
-						name: "customFeePercentage",
-						type: "uint256",
-					},
-				],
-				internalType: "struct CookieJarLib.CreateJarParams",
-				name: "params",
-				type: "tuple",
-			},
-			{
-				components: [
-					{
-						internalType: "address[]",
-						name: "nftAddresses",
-						type: "address[]",
-					},
-					{
-						internalType: "enum CookieJarLib.NFTType[]",
-						name: "nftTypes",
-						type: "uint8[]",
-					},
-					{ internalType: "address[]", name: "allowlist", type: "address[]" },
-					{
-						components: [
-							{ internalType: "uint256", name: "eventId", type: "uint256" },
-							{
-								internalType: "address",
-								name: "poapContract",
-								type: "address",
-							},
-						],
-						internalType: "struct CookieJarLib.POAPRequirement",
-						name: "poapReq",
-						type: "tuple",
-					},
-					{
-						components: [
-							{ internalType: "address", name: "lockAddress", type: "address" },
-						],
-						internalType: "struct CookieJarLib.UnlockRequirement",
-						name: "unlockReq",
-						type: "tuple",
-					},
-					{
-						components: [
-							{
-								internalType: "address",
-								name: "tokenContract",
-								type: "address",
-							},
-							{ internalType: "uint256", name: "tokenId", type: "uint256" },
-							{ internalType: "uint256", name: "minBalance", type: "uint256" },
-						],
-						internalType: "struct CookieJarLib.HypercertRequirement",
-						name: "hypercertReq",
-						type: "tuple",
-					},
-					{
-						components: [
-							{ internalType: "uint256", name: "hatId", type: "uint256" },
-							{
-								internalType: "address",
-								name: "hatsContract",
-								type: "address",
-							},
-						],
-						internalType: "struct CookieJarLib.HatsRequirement",
-						name: "hatsReq",
-						type: "tuple",
-					},
-				],
-				internalType: "struct CookieJarLib.AccessConfig",
-				name: "accessConfig",
-				type: "tuple",
-			},
-		],
-		name: "createCookieJarWithFee",
-		outputs: [{ internalType: "address", name: "", type: "address" }],
-		stateMutability: "nonpayable",
-		type: "function",
-	},
-
-	// Events
-	{
-		anonymous: false,
-		inputs: [
-			{
-				indexed: true,
-				internalType: "address",
-				name: "creator",
-				type: "address",
-			},
-			{
-				indexed: false,
-				internalType: "address",
-				name: "cookieJarAddress",
-				type: "address",
-			},
-			{
-				indexed: false,
-				internalType: "string",
-				name: "metadata",
-				type: "string",
-			},
-		],
-		name: "CookieJarCreated",
-		type: "event",
-	},
-] as const;
+export const cookieJarFactoryV2Abi = cookieJarFactoryAbi;
diff --git a/client/package.json b/client/package.json
index b0544ec..25e8909 100644
--- a/client/package.json
+++ b/client/package.json
@@ -7,6 +7,7 @@
 		"dev": "next dev",
 		"dev:turbo": "next dev --turbo",
 		"build": "next build",
+		"build:skip-lint": "next build --no-lint",
 		"build:analyze": "ANALYZE=true next build",
 		"lint": "cd .. && bun lint",
 		"format": "cd .. && bun format:client",
diff --git a/contracts/src/CookieJar.sol b/contracts/src/CookieJar.sol
index 4e212ba..917b5c4 100644
--- a/contracts/src/CookieJar.sol
+++ b/contracts/src/CookieJar.sol
@@ -15,6 +15,11 @@ import {UniversalSwapAdapter} from "./libraries/UniversalSwapAdapter.sol";
 import {Streaming} from "./libraries/Streaming.sol";
 import {ISuperfluid, IConstantFlowAgreementV1} from "@superfluid-finance/ethereum-contracts/interfaces/superfluid/ISuperfluid.sol";
 
+/// @dev Minimal POAP interface for event-level token ownership checks.
+interface IPOAP {
+    function tokenDetailsOfOwnerByEvent(address owner, uint256 eventId) external view returns (uint256[] memory);
+}
+
 /// @title CookieJar - Optimized Version
 /// @notice Decentralized funding pools with simplified access control
 /// @dev Supports Allowlist, ERC721, and ERC1155 access types with optimized storage and validation
@@ -416,23 +421,21 @@ contract CookieJar is AccessControl, Pausable, ReentrancyGuard {
             // Inline ERC721 validation
             if (nftRequirement.nftContract == address(0)) revert CookieJarLib.InvalidTokenAddress();
 
-            // If tokenId is 0, check if user owns ANY token from the contract
-            // Otherwise, check ownership of specific token
+            // tokenId == 0 means "any token from contract" (generic ERC-721 gate)
             if (nftRequirement.tokenId == 0) {
-                // Check if user owns at least one token from the contract
-                try IERC721(nftRequirement.nftContract).balanceOf(msg.sender) returns (uint256 balance) {
-                    if (balance == 0) revert CookieJarLib.InsufficientNFTBalance();
-                } catch {
-                    revert CookieJarLib.NFTValidationFailed();
-                }
-            } else {
-                // Check ownership of specific token ID
-                try IERC721(nftRequirement.nftContract).ownerOf(nftRequirement.tokenId) returns (address owner) {
-                    if (owner != msg.sender) revert CookieJarLib.NFTNotOwned();
-                } catch {
-                    revert CookieJarLib.NFTValidationFailed();
-                }
+                _requireAnyErc721Balance(nftRequirement.nftContract, msg.sender);
+                return;
             }
+
+            // POAP event gate marker: tokenId=eventId and minBalance>0.
+            // This preserves ABI shape while enabling strict event-level enforcement.
+            if (nftRequirement.minBalance > 0) {
+                _requirePoapEventOwnership(nftRequirement.nftContract, msg.sender, nftRequirement.tokenId);
+                return;
+            }
+
+            // Otherwise require ownership of one specific ERC-721 token ID.
+            _requireErc721TokenOwnership(nftRequirement.nftContract, msg.sender, nftRequirement.tokenId);
         } else if (ACCESS_TYPE == CookieJarLib.AccessType.ERC1155) {
             // Inline ERC1155 validation
             if (nftRequirement.nftContract == address(0)) revert CookieJarLib.InvalidTokenAddress();
@@ -449,6 +452,30 @@ contract CookieJar is AccessControl, Pausable, ReentrancyGuard {
         }
     }
 
+    function _requireAnyErc721Balance(address nftContract, address account) internal view {
+        try IERC721(nftContract).balanceOf(account) returns (uint256 balance) {
+            if (balance == 0) revert CookieJarLib.InsufficientNFTBalance();
+        } catch {
+            revert CookieJarLib.NFTValidationFailed();
+        }
+    }
+
+    function _requireErc721TokenOwnership(address nftContract, address account, uint256 tokenId) internal view {
+        try IERC721(nftContract).ownerOf(tokenId) returns (address owner) {
+            if (owner != account) revert CookieJarLib.NFTNotOwned();
+        } catch {
+            revert CookieJarLib.NFTValidationFailed();
+        }
+    }
+
+    function _requirePoapEventOwnership(address nftContract, address account, uint256 eventId) internal view {
+        try IPOAP(nftContract).tokenDetailsOfOwnerByEvent(account, eventId) returns (uint256[] memory tokens) {
+            if (tokens.length == 0) revert CookieJarLib.InsufficientNFTBalance();
+        } catch {
+            revert CookieJarLib.NFTValidationFailed();
+        }
+    }
+
     /// @notice Validate withdrawal constraints and execute withdrawal
     /// @dev Unified validation replacing multiple protocol-specific functions
     function _validateAndWithdraw(uint256 amount, string calldata purpose) internal {
diff --git a/contracts/test/CookieJar.t.sol b/contracts/test/CookieJar.t.sol
index 4cb05c0..d647427 100644
--- a/contracts/test/CookieJar.t.sol
+++ b/contracts/test/CookieJar.t.sol
@@ -165,6 +165,14 @@ contract CookieJarTest is Test {
             });
     }
 
+    /// @notice Build a purpose string with multi-byte Unicode code points.
+    /// @dev Uses `é` so byte length != code point length.
+    function buildUnicodePurpose(uint256 count) internal pure returns (string memory out) {
+        for (uint256 i = 0; i < count; i++) {
+            out = string.concat(out, unicode"é");
+        }
+    }
+
     function setUp() public {
         dummyToken = new DummyERC20();
         dummyErc721 = new DummyERC721();
@@ -1314,6 +1322,32 @@ contract CookieJarTest is Test {
         jarAllowlistEthFixed.withdrawAllowlistMode(fixedAmount, shortPurpose);
     }
 
+    function test_RevertWhen_WithdrawAllowlistPurposeHasOnly26UnicodeCodePoints() public {
+        vm.prank(owner);
+        jarAllowlistEthFixed.grantJarAllowlistRole(users);
+        vm.warp(block.timestamp + withdrawalInterval + 1);
+
+        string memory purpose26 = buildUnicodePurpose(26);
+
+        vm.prank(user);
+        vm.expectRevert(abi.encodeWithSelector(CookieJarLib.InvalidPurpose.selector));
+        jarAllowlistEthFixed.withdrawAllowlistMode(fixedAmount, purpose26);
+    }
+
+    function test_WithdrawAllowlistPurposeWith27UnicodeCodePoints() public {
+        vm.prank(owner);
+        jarAllowlistEthFixed.grantJarAllowlistRole(users);
+        vm.warp(block.timestamp + withdrawalInterval + 1);
+
+        string memory purpose27 = buildUnicodePurpose(27);
+        uint256 userBalanceBefore = user.balance;
+
+        vm.prank(user);
+        jarAllowlistEthFixed.withdrawAllowlistMode(fixedAmount, purpose27);
+
+        assertEq(user.balance, userBalanceBefore + fixedAmount);
+    }
+
     function test_RevertWhen_WithdrawAllowlistAlreadyWithdrawn() public {
         vm.prank(owner);
         jarAllowlistEthOneTimeWithdrawal.grantJarAllowlistRole(users);
diff --git a/contracts/test/CookieJarFactory.t.sol b/contracts/test/CookieJarFactory.t.sol
index 5684e1d..7142397 100644
--- a/contracts/test/CookieJarFactory.t.sol
+++ b/contracts/test/CookieJarFactory.t.sol
@@ -3,6 +3,7 @@ pragma solidity ^0.8.24;
 
 import {Test} from "forge-std/Test.sol";
 import {CookieJarFactory} from "../src/CookieJarFactory.sol";
+import {CookieJar} from "../src/CookieJar.sol";
 import {CookieJarLib} from "../src/libraries/CookieJarLib.sol";
 import {HelperConfig} from "../script/HelperConfig.s.sol";
 import {ERC20Mock} from "@openzeppelin/contracts/mocks/token/ERC20Mock.sol";
@@ -22,6 +23,7 @@ contract CookieJarFactoryTest is Test {
     address[] public emptyAllowlist;
     HelperConfig.NetworkConfig config;
     ERC20Mock testToken;
+    uint256 internal constant DEFAULT_FEE_SENTINEL = type(uint256).max;
 
     // Helper function to create default jar parameters
     function createDefaultJarParams(
@@ -155,6 +157,55 @@ contract CookieJarFactoryTest is Test {
         assertEq(cookieJars[0], jarAddress);
     }
 
+    /// @notice Sentinel value should use factory default fee percentage
+    function testCreateCookieJar_UsesFactoryDefaultFeeWhenSentinelIsProvided() public {
+        vm.prank(owner);
+        CookieJarLib.JarConfig memory params = createDefaultJarParams(owner, CookieJarLib.ETH_ADDRESS, "Sentinel Fee");
+        params.feePercentageOnDeposit = DEFAULT_FEE_SENTINEL;
+
+        address jarAddress = factory.createCookieJar(
+            params,
+            createDefaultAccessConfig(),
+            createDefaultMultiTokenConfig()
+        );
+
+        uint256 expected = factory.DEFAULT_FEE_PERCENTAGE();
+        uint256 actual = CookieJar(payable(jarAddress)).FEE_PERCENTAGE_ON_DEPOSIT();
+        assertEq(actual, expected, "Sentinel should resolve to factory default fee");
+    }
+
+    /// @notice Explicit custom fee should be preserved on the deployed jar
+    function testCreateCookieJar_PreservesExplicitCustomFee() public {
+        vm.prank(owner);
+        CookieJarLib.JarConfig memory params = createDefaultJarParams(owner, CookieJarLib.ETH_ADDRESS, "Custom Fee");
+        params.feePercentageOnDeposit = 250; // 2.5%
+
+        address jarAddress = factory.createCookieJar(
+            params,
+            createDefaultAccessConfig(),
+            createDefaultMultiTokenConfig()
+        );
+
+        uint256 actual = CookieJar(payable(jarAddress)).FEE_PERCENTAGE_ON_DEPOSIT();
+        assertEq(actual, 250, "Explicit custom fee should be preserved");
+    }
+
+    /// @notice Explicit zero-percent fee should remain zero (not treated as default)
+    function testCreateCookieJar_PreservesExplicitZeroFee() public {
+        vm.prank(owner);
+        CookieJarLib.JarConfig memory params = createDefaultJarParams(owner, CookieJarLib.ETH_ADDRESS, "Zero Fee");
+        params.feePercentageOnDeposit = 0;
+
+        address jarAddress = factory.createCookieJar(
+            params,
+            createDefaultAccessConfig(),
+            createDefaultMultiTokenConfig()
+        );
+
+        uint256 actual = CookieJar(payable(jarAddress)).FEE_PERCENTAGE_ON_DEPOSIT();
+        assertEq(actual, 0, "Explicit zero fee should remain zero");
+    }
+
     /// @notice Test creating a cookie jar with Variable withdrawal option
     function testCreateCookieJarWithVariableWithdrawal() public {
         vm.prank(owner);
diff --git a/contracts/test/CookieJarProtocols.t.sol b/contracts/test/CookieJarProtocols.t.sol
index fac1eeb..1499610 100644
--- a/contracts/test/CookieJarProtocols.t.sol
+++ b/contracts/test/CookieJarProtocols.t.sol
@@ -10,16 +10,53 @@ import {ERC20} from "@openzeppelin/contracts/token/ERC20/ERC20.sol";
 contract MockPOAP {
     mapping(uint256 => address) public owners;
     mapping(address => uint256) public ownerTokenCount;
+    mapping(uint256 => uint256) public tokenEventIds;
+    mapping(address => mapping(uint256 => uint256[])) private ownerEventTokens;
+    mapping(uint256 => uint256) private ownerEventTokenIndex;
 
     function setOwner(uint256 tokenId, address owner) external {
+        _setOwnerForEvent(tokenId, tokenEventIds[tokenId], owner);
+    }
+
+    function setOwnerForEvent(uint256 tokenId, uint256 eventId, address owner) external {
+        _setOwnerForEvent(tokenId, eventId, owner);
+    }
+
+    function _setOwnerForEvent(uint256 tokenId, uint256 eventId, address owner) internal {
         address previousOwner = owners[tokenId];
+        uint256 previousEventId = tokenEventIds[tokenId];
+
         if (previousOwner != address(0)) {
             ownerTokenCount[previousOwner]--;
+            _removeOwnerEventToken(previousOwner, previousEventId, tokenId);
         }
+
         owners[tokenId] = owner;
+        tokenEventIds[tokenId] = eventId;
+
         if (owner != address(0)) {
             ownerTokenCount[owner]++;
+            ownerEventTokens[owner][eventId].push(tokenId);
+            ownerEventTokenIndex[tokenId] = ownerEventTokens[owner][eventId].length;
+        }
+    }
+
+    function _removeOwnerEventToken(address owner, uint256 eventId, uint256 tokenId) internal {
+        uint256 indexPlusOne = ownerEventTokenIndex[tokenId];
+        if (indexPlusOne == 0) return;
+
+        uint256[] storage tokens = ownerEventTokens[owner][eventId];
+        uint256 index = indexPlusOne - 1;
+        uint256 lastIndex = tokens.length - 1;
+
+        if (index != lastIndex) {
+            uint256 lastTokenId = tokens[lastIndex];
+            tokens[index] = lastTokenId;
+            ownerEventTokenIndex[lastTokenId] = index + 1;
         }
+
+        tokens.pop();
+        ownerEventTokenIndex[tokenId] = 0;
     }
 
     function ownerOf(uint256 tokenId) external view returns (address) {
@@ -34,9 +71,11 @@ contract MockPOAP {
     }
 
     function tokenDetailsOfOwnerByEvent(address owner, uint256 eventId) external view returns (uint256[] memory) {
-        // Simple mock implementation - in reality this would check event ownership
-        uint256[] memory tokens = new uint256[](1);
-        tokens[0] = eventId * 1000 + (uint256(uint160(owner)) % 1000);
+        uint256[] storage stored = ownerEventTokens[owner][eventId];
+        uint256[] memory tokens = new uint256[](stored.length);
+        for (uint256 i = 0; i < stored.length; i++) {
+            tokens[i] = stored[i];
+        }
         return tokens;
     }
 }
@@ -172,19 +211,32 @@ contract CookieJarProtocolsTest is Test {
             );
     }
 
-    // Helper: ERC721 access config using mockPoap (POAP/Unlock tests)
-    function createERC721AccessConfig() internal view returns (CookieJarLib.AccessConfig memory) {
+    // Helper: ERC721 access config for POAP event-level gating
+    function createPoapAccessConfig() internal view returns (CookieJarLib.AccessConfig memory) {
         return
             CookieJarLib.AccessConfig({
                 allowlist: emptyAllowlist,
                 nftRequirement: CookieJarLib.NftRequirement({
                     nftContract: address(mockPoap),
-                    tokenId: 0,
+                    tokenId: testEventId,
                     minBalance: 1
                 })
             });
     }
 
+    // Helper: ERC721 access config for generic Unlock-style key ownership
+    function createUnlockAccessConfig() internal view returns (CookieJarLib.AccessConfig memory) {
+        return
+            CookieJarLib.AccessConfig({
+                allowlist: emptyAllowlist,
+                nftRequirement: CookieJarLib.NftRequirement({
+                    nftContract: address(mockPoap),
+                    tokenId: 0,
+                    minBalance: 0
+                })
+            });
+    }
+
     // Helper: ERC1155 access config using mockHypercert (Hypercert tests)
     function createHypercertAccessConfig() internal view returns (CookieJarLib.AccessConfig memory) {
         return
@@ -225,7 +277,7 @@ contract CookieJarProtocolsTest is Test {
         dummyToken.mint(owner, 100_000 * 1e18);
         vm.startPrank(owner);
 
-        // Create POAP jar (ERC721, ETH, Fixed) — uses mockPoap
+        // Create POAP jar (ERC721, ETH, Fixed) with event-level gate
         jarPoap = new CookieJar(
             createJarConfig(
                 owner,
@@ -242,7 +294,7 @@ contract CookieJarProtocolsTest is Test {
                 true, // emergencyWithdrawalEnabled
                 false // oneTimeWithdrawal
             ),
-            createERC721AccessConfig(),
+            createPoapAccessConfig(),
             address(0) // Superfluid host disabled for testing
         );
 
@@ -263,7 +315,7 @@ contract CookieJarProtocolsTest is Test {
                 true, // emergencyWithdrawalEnabled
                 false // oneTimeWithdrawal
             ),
-            createERC721AccessConfig(),
+            createUnlockAccessConfig(),
             address(0) // Superfluid host disabled for testing
         );
 
@@ -327,9 +379,9 @@ contract CookieJarProtocolsTest is Test {
     }
 
     function test_WithdrawERC721Mode() public {
-        // Setup user with POAP - user owns token ID 12345001
+        // Setup user with POAP for the required event.
         uint256 poapTokenId = 12345001;
-        mockPoap.setOwner(poapTokenId, user);
+        mockPoap.setOwnerForEvent(poapTokenId, testEventId, user);
 
         vm.warp(block.timestamp + withdrawalInterval + 1);
         uint256 jarBalanceBefore = address(jarPoap).balance;
@@ -361,9 +413,9 @@ contract CookieJarProtocolsTest is Test {
     }
 
     function test_RevertWhen_WithdrawPOAPModeTooSoon() public {
-        // Setup user with POAP
+        // Setup user with POAP for required event.
         uint256 poapTokenId = 12345001;
-        mockPoap.setOwner(poapTokenId, user);
+        mockPoap.setOwnerForEvent(poapTokenId, testEventId, user);
 
         vm.warp(block.timestamp + withdrawalInterval + 1);
         vm.prank(user);
@@ -377,6 +429,16 @@ contract CookieJarProtocolsTest is Test {
         jarPoap.withdrawWithErc721(fixedAmount, purpose);
     }
 
+    function test_RevertWhen_WithdrawPOAPModeWrongEvent() public {
+        // User has a POAP, but for a different event than the jar requires.
+        mockPoap.setOwnerForEvent(12345002, testEventId + 1, user);
+
+        vm.warp(block.timestamp + withdrawalInterval + 1);
+        vm.prank(user);
+        vm.expectRevert(abi.encodeWithSelector(CookieJarLib.InsufficientNFTBalance.selector));
+        jarPoap.withdrawWithErc721(fixedAmount, purpose);
+    }
+
     // ==== Unlock Protocol Tests ====
 
     function test_ConstructorUnlockAccess() public {
@@ -384,7 +446,7 @@ contract CookieJarProtocolsTest is Test {
     }
 
     function test_WithdrawUnlockMode() public {
-        // jarUnlock uses mockPoap for ERC721 access — give user a POAP token
+        // jarUnlock uses generic ERC721 ownership (tokenId=0) — any token works
         mockPoap.setOwner(99999, user);
 
         vm.warp(block.timestamp + withdrawalInterval + 1);
@@ -554,7 +616,7 @@ contract CookieJarProtocolsTest is Test {
     // ==== Common Validation Tests ====
 
     function test_RevertWhen_ERC721WithdrawZeroAmount() public {
-        mockPoap.setOwner(12345, user);
+        mockPoap.setOwnerForEvent(12345, testEventId, user);
 
         vm.prank(user);
         vm.expectRevert(abi.encodeWithSelector(CookieJarLib.ZeroAmount.selector));
@@ -606,8 +668,7 @@ contract CookieJarProtocolsTest is Test {
 
     function test_MultipleAccessTypeWithdrawals() public {
         // Setup users for different protocols
-        // Both ERC721 jars use mockPoap as nftContract (tokenId=0 means any token)
-        mockPoap.setOwner(12345, user);
+        mockPoap.setOwnerForEvent(12345, testEventId, user);
         mockPoap.setOwner(12346, user2);
 
         vm.warp(block.timestamp + withdrawalInterval + 1);