diff --git a/apps/dashboard/src/@/api/insight/webhooks.ts b/apps/dashboard/src/@/api/insight/webhooks.ts
index d694c7f4b6f..9a803425cd3 100644
--- a/apps/dashboard/src/@/api/insight/webhooks.ts
+++ b/apps/dashboard/src/@/api/insight/webhooks.ts
@@ -67,8 +67,7 @@ interface TestWebhookResponse {
   error?: string;
 }
 
-// biome-ignore lint/correctness/noUnusedVariables: will be used in the next PR
-async function createWebhook(
+export async function createWebhook(
   payload: CreateWebhookPayload,
   clientId: string,
 ): Promise<WebhookSingleResponse> {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/BasicInfoStep.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/BasicInfoStep.tsx
new file mode 100644
index 00000000000..4d1a6de38e8
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/BasicInfoStep.tsx
@@ -0,0 +1,189 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { cn } from "@/lib/utils";
+import type { UseFormReturn } from "react-hook-form";
+import type { WebhookFormValues } from "../utils/webhookTypes";
+
+interface BasicInfoStepProps {
+  form: UseFormReturn<WebhookFormValues>;
+  goToNextStep: () => void;
+  isLoading: boolean;
+}
+
+export default function BasicInfoStep({
+  form,
+  goToNextStep,
+  isLoading,
+}: BasicInfoStepProps) {
+  return (
+    <>
+      <div className="mb-4">
+        <h2 className="font-medium text-lg">Step 1: Basic Information</h2>
+        <p className="text-muted-foreground text-sm">
+          Provide webhook details and select filter type
+        </p>
+      </div>
+
+      <FormField
+        control={form.control}
+        name="name"
+        render={({ field }) => (
+          <FormItem className="flex flex-col">
+            <FormLabel>
+              Name <span className="text-red-500">*</span>
+            </FormLabel>
+            <FormControl>
+              <Input
+                placeholder="Webhook name"
+                value={field.value}
+                onChange={field.onChange}
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={form.control}
+        name="webhookUrl"
+        render={({ field }) => (
+          <FormItem className="mt-4 flex flex-col">
+            <FormLabel>
+              Webhook URL <span className="text-red-500">*</span>
+            </FormLabel>
+            <FormControl>
+              <Input
+                placeholder="https://your-server.com/webhook"
+                type="url"
+                value={field.value}
+                onChange={field.onChange}
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={form.control}
+        name="filterType"
+        render={({ field }) => (
+          <FormItem className="mt-6 flex flex-col">
+            <FormLabel>
+              Filter Type <span className="text-red-500">*</span>
+            </FormLabel>
+            <FormControl>
+              <RadioGroup
+                onValueChange={(value: string) => {
+                  if (value !== "event" && value !== "transaction") {
+                    return;
+                  }
+                  field.onChange(value);
+                  // Ensure the form state is updated immediately
+                  form.setValue("filterType", value, {
+                    shouldValidate: true,
+                    shouldDirty: true,
+                  });
+                }}
+                value={field.value || undefined}
+                className="grid grid-cols-1 gap-4 md:grid-cols-2"
+              >
+                <div className="col-span-1">
+                  <label
+                    htmlFor="filter-event"
+                    className={cn(
+                      "flex cursor-pointer flex-col rounded-lg border-2 p-4 hover:border-primary/50",
+                      field.value === "event"
+                        ? "border-primary bg-primary/5"
+                        : "",
+                    )}
+                  >
+                    <RadioGroupItem
+                      value="event"
+                      id="filter-event"
+                      className="sr-only"
+                    />
+                    <div className="mb-2 flex items-center justify-between">
+                      <span className="font-medium text-base">Event</span>
+                      <div
+                        className={cn(
+                          "flex h-5 w-5 items-center justify-center rounded-full border",
+                          field.value === "event"
+                            ? "border-primary"
+                            : "border-muted-foreground",
+                        )}
+                      >
+                        {field.value === "event" && (
+                          <div className="h-3 w-3 rounded-full bg-primary" />
+                        )}
+                      </div>
+                    </div>
+                    <span className="text-muted-foreground text-sm">
+                      Listen for contract events like token transfers or state
+                      changes
+                    </span>
+                  </label>
+                </div>
+
+                <div className="col-span-1">
+                  <label
+                    htmlFor="filter-transaction"
+                    className={cn(
+                      "flex cursor-pointer flex-col rounded-lg border-2 p-4 hover:border-primary/50",
+                      field.value === "transaction"
+                        ? "border-primary bg-primary/5"
+                        : "",
+                    )}
+                  >
+                    <RadioGroupItem
+                      value="transaction"
+                      id="filter-transaction"
+                      className="sr-only"
+                    />
+                    <div className="mb-2 flex items-center justify-between">
+                      <span className="font-medium text-base">Transaction</span>
+                      <div
+                        className={cn(
+                          "flex h-5 w-5 items-center justify-center rounded-full border",
+                          field.value === "transaction"
+                            ? "border-primary"
+                            : "border-muted-foreground",
+                        )}
+                      >
+                        {field.value === "transaction" && (
+                          <div className="h-3 w-3 rounded-full bg-primary" />
+                        )}
+                      </div>
+                    </div>
+                    <span className="text-muted-foreground text-sm">
+                      Listen for blockchain transactions with specific
+                      parameters
+                    </span>
+                  </label>
+                </div>
+              </RadioGroup>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <div className="mt-6 flex justify-end">
+        <Button type="button" onClick={goToNextStep} disabled={isLoading}>
+          Next
+        </Button>
+      </div>
+    </>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/CreateWebhookModal.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/CreateWebhookModal.tsx
index 4d8b9c8380f..e9e33451966 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/CreateWebhookModal.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/CreateWebhookModal.tsx
@@ -1,5 +1,294 @@
+"use client";
+
 import { Button } from "@/components/ui/button";
-// Implementation is going to be added in the next PR
-export function CreateWebhookModal() {
-  return <Button>New Webhook</Button>;
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Form } from "@/components/ui/form";
+import { useThirdwebClient } from "@/constants/thirdweb.client";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useState } from "react";
+import { useForm, useWatch } from "react-hook-form";
+import { toast } from "sonner";
+
+import BasicInfoStep from "./BasicInfoStep";
+import { FilterDetailsStep } from "./FilterDetailsStep";
+import ReviewStep from "./ReviewStep";
+
+import { createWebhook } from "@/api/insight/webhooks";
+import { XIcon } from "lucide-react";
+import { useAbiMultiFetch } from "../hooks/useAbiProcessing";
+import { useTestWebhook } from "../hooks/useTestWebhook";
+import {
+  extractEventSignatures,
+  extractFunctionSignatures,
+} from "../utils/abiUtils";
+import {
+  buildEventWebhookPayload,
+  buildTransactionWebhookPayload,
+} from "../utils/webhookPayloadUtils";
+import type { WebhookPayload } from "../utils/webhookPayloadUtils";
+import {
+  type WebhookFormStep,
+  WebhookFormSteps,
+  type WebhookFormValues,
+  webhookFormSchema,
+} from "../utils/webhookTypes";
+
+interface CreateWebhookModalProps {
+  clientId: string;
+}
+
+export function CreateWebhookModal({ clientId }: CreateWebhookModalProps) {
+  const router = useDashboardRouter();
+  const thirdwebClient = useThirdwebClient();
+  const [isOpen, setIsOpen] = useState(false);
+  const [currentStep, setCurrentStep] = useState<WebhookFormStep>(
+    WebhookFormSteps.BasicInfo,
+  );
+
+  const formHook = useForm<WebhookFormValues>({
+    resolver: zodResolver(webhookFormSchema),
+    defaultValues: {
+      name: "",
+      webhookUrl: "",
+      filterType: "event",
+      chainIds: [],
+      addresses: "",
+      fromAddresses: "",
+      toAddresses: "",
+      sigHash: "",
+      sigHashAbi: "",
+      abi: "",
+      inputAbi: [],
+      secret: "",
+      eventTypes: [],
+    },
+  });
+
+  const chainIds = useWatch({ control: formHook.control, name: "chainIds" });
+  const addresses = useWatch({ control: formHook.control, name: "addresses" });
+  const toAddresses = useWatch({
+    control: formHook.control,
+    name: "toAddresses",
+  });
+
+  const eventAbi = useAbiMultiFetch({
+    isOpen,
+    thirdwebClient,
+    chainIds,
+    addresses,
+    extractSignatures: extractEventSignatures,
+    type: "event",
+  });
+
+  const txAbi = useAbiMultiFetch({
+    isOpen,
+    thirdwebClient,
+    chainIds,
+    addresses: toAddresses || "",
+    extractSignatures: extractFunctionSignatures,
+    type: "transaction",
+  });
+
+  // Track loading state locally
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Standalone function for the review step create button
+  const handleCreateButtonClick = async () => {
+    try {
+      const data = formHook.getValues();
+
+      await handleSubmit(data);
+    } catch (error) {
+      toast.error(
+        `Failed to process webhook: ${error instanceof Error ? error.message : String(error)}`,
+      );
+    }
+  };
+
+  // Create our own submit handler
+  const handleSubmit = async (data: WebhookFormValues) => {
+    setIsLoading(true);
+
+    try {
+      let payload: WebhookPayload;
+      if (data.filterType === "event") {
+        payload = buildEventWebhookPayload(data);
+      } else {
+        payload = buildTransactionWebhookPayload(data);
+      }
+
+      const response = await createWebhook(payload, clientId);
+      if (response?.error) {
+        toast.error(`${response.error}`);
+        return;
+      }
+      toast.success("Webhook created successfully!");
+
+      // Reset local state
+      formHook.reset();
+      setCurrentStep(WebhookFormSteps.BasicInfo);
+      setIsOpen(false);
+
+      // Refresh the webhooks table
+      router.refresh();
+    } catch (error) {
+      toast.error(
+        `Failed to create webhook: ${error instanceof Error ? error.message : String(error)}`,
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const goToNextStep = async () => {
+    switch (currentStep) {
+      case WebhookFormSteps.BasicInfo: {
+        const result = await formHook.trigger([
+          "name",
+          "webhookUrl",
+          "filterType",
+        ]);
+
+        if (result) {
+          setCurrentStep(WebhookFormSteps.FilterDetails);
+        } else {
+          toast.error("Please fill in all required fields marked with *");
+        }
+        break;
+      }
+      case WebhookFormSteps.FilterDetails: {
+        // Validate based on filter type
+        const filterType = formHook.getValues("filterType");
+        let result: boolean;
+
+        if (filterType === "event") {
+          result = await formHook.trigger(["chainIds", "addresses"]);
+        } else {
+          result = await formHook.trigger(["chainIds", "toAddresses"]);
+        }
+
+        if (result) {
+          setCurrentStep(WebhookFormSteps.Review);
+        } else {
+          toast.error("Please fill in all required fields marked with *");
+        }
+        break;
+      }
+      default:
+        break;
+    }
+  };
+
+  const goToPreviousStep = () => {
+    switch (currentStep) {
+      case WebhookFormSteps.FilterDetails:
+        setCurrentStep(WebhookFormSteps.BasicInfo);
+        break;
+      case WebhookFormSteps.Review:
+        setCurrentStep(WebhookFormSteps.FilterDetails);
+        break;
+      default:
+        break;
+    }
+  };
+
+  const handleOpenModal = () => {
+    formHook.reset();
+    setCurrentStep(WebhookFormSteps.BasicInfo);
+    setIsOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsOpen(false);
+  };
+
+  const { testWebhookEndpoint, isTestingMap, testResults, isRecentResult } =
+    useTestWebhook(clientId);
+
+  const handleTestWebhook = async (webhookUrl: string) => {
+    const filterType = formHook.getValues("filterType");
+    return await testWebhookEndpoint(webhookUrl, filterType);
+  };
+
+  return (
+    <Dialog open={isOpen}>
+      <DialogTrigger asChild>
+        <Button onClick={handleOpenModal}>New Webhook</Button>
+      </DialogTrigger>
+
+      <DialogContent
+        dialogCloseClassName="hidden"
+        className="max-h-[85vh] max-w-5xl overflow-y-auto"
+      >
+        <div className="flex items-center justify-between">
+          <DialogTitle className="font-medium text-lg">
+            Create New Webhook
+          </DialogTitle>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={handleCloseModal}
+            className="h-6 w-6"
+          >
+            <XIcon className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </Button>
+        </div>
+
+        <Form {...formHook}>
+          <form
+            onSubmit={formHook.handleSubmit(handleSubmit)}
+            className="space-y-4"
+          >
+            {/* Step Content */}
+            <div className="min-h-[300px]">
+              {currentStep === WebhookFormSteps.BasicInfo && (
+                <BasicInfoStep
+                  form={formHook}
+                  goToNextStep={goToNextStep}
+                  isLoading={isLoading}
+                />
+              )}
+
+              {currentStep === WebhookFormSteps.FilterDetails && (
+                <FilterDetailsStep
+                  form={formHook}
+                  eventSignatures={eventAbi.signatures}
+                  functionSignatures={txAbi.signatures}
+                  fetchedAbis={eventAbi.fetchedAbis}
+                  abiErrors={eventAbi.errors}
+                  fetchedTxAbis={txAbi.fetchedAbis}
+                  txAbiErrors={txAbi.errors}
+                  isFetchingEventAbi={eventAbi.isFetching}
+                  isFetchingTxAbi={txAbi.isFetching}
+                  goToNextStep={goToNextStep}
+                  goToPreviousStep={goToPreviousStep}
+                  isLoading={isLoading}
+                />
+              )}
+
+              {currentStep === WebhookFormSteps.Review && (
+                <ReviewStep
+                  form={formHook}
+                  isTestingMap={isTestingMap}
+                  testResults={testResults}
+                  isRecentResult={isRecentResult}
+                  testWebhookEndpoint={handleTestWebhook}
+                  goToPreviousStep={goToPreviousStep}
+                  isLoading={isLoading}
+                  handleCreateButtonClick={handleCreateButtonClick}
+                />
+              )}
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
 }
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx
new file mode 100644
index 00000000000..00470420d09
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx
@@ -0,0 +1,559 @@
+"use client";
+
+import { MultiNetworkSelector } from "@/components/blocks/NetworkSelectors";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { useThirdwebClient } from "@/constants/thirdweb.client";
+import { useQueryClient } from "@tanstack/react-query";
+import type { UseFormReturn } from "react-hook-form";
+
+import { truncateMiddle } from "../utils/abiUtils";
+import type {
+  AbiData,
+  EventSignature,
+  FunctionSignature,
+  WebhookFormValues,
+} from "../utils/webhookTypes";
+
+interface FilterDetailsStepProps {
+  form: UseFormReturn<WebhookFormValues>;
+  eventSignatures: EventSignature[];
+  functionSignatures: FunctionSignature[];
+  fetchedAbis: Record<string, AbiData>;
+  abiErrors: Record<string, string>;
+  fetchedTxAbis: Record<string, AbiData>;
+  txAbiErrors: Record<string, string>;
+  isFetchingEventAbi: boolean;
+  isFetchingTxAbi: boolean;
+  goToNextStep: () => void;
+  goToPreviousStep: () => void;
+  isLoading: boolean;
+}
+
+export function FilterDetailsStep({
+  form,
+  eventSignatures,
+  functionSignatures,
+  fetchedAbis = {},
+  abiErrors = {},
+  fetchedTxAbis = {},
+  txAbiErrors = {},
+  isFetchingEventAbi,
+  isFetchingTxAbi,
+  goToNextStep,
+  goToPreviousStep,
+  isLoading,
+}: FilterDetailsStepProps) {
+  const thirdwebClient = useThirdwebClient();
+  const queryClient = useQueryClient();
+  const watchFilterType = form.watch("filterType") as
+    | "event"
+    | "transaction"
+    | undefined;
+  const selectedChainIds = Array.isArray(form.watch("chainIds"))
+    ? form.watch("chainIds").map(Number)
+    : [];
+  const contractAddresses = form.watch("addresses") || "";
+
+  return (
+    <>
+      <div className="mb-4">
+        <h2 className="font-medium text-lg">
+          Step 2: Configure Filters & Advanced Options
+        </h2>
+        <p className="text-muted-foreground text-sm">
+          Configure filter options and advanced settings for your webhook
+        </p>
+      </div>
+
+      {/* Filter Options */}
+      <div className="space-y-3">
+        {/* Chain IDs Field */}
+        <FormField
+          control={form.control}
+          name="chainIds"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <div className="flex items-center justify-between text-xs">
+                <FormLabel>
+                  Chain IDs <span className="text-red-500">*</span>
+                </FormLabel>
+                <p className="text-muted-foreground">
+                  Select the chains you want to monitor
+                </p>
+              </div>
+              <FormControl>
+                <MultiNetworkSelector
+                  selectedChainIds={
+                    Array.isArray(field.value) ? field.value.map(Number) : []
+                  }
+                  onChange={(chainIds) => field.onChange(chainIds.map(String))}
+                  client={thirdwebClient}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {watchFilterType === "event" && (
+          <FormField
+            control={form.control}
+            name="addresses"
+            render={({ field }) => (
+              <FormItem className="flex flex-col">
+                <div className="flex items-center justify-between text-xs">
+                  <FormLabel>
+                    Contract Addresses <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <p className="text-muted-foreground">
+                    Enter a contract address
+                  </p>
+                </div>
+                <FormControl>
+                  <div className="space-y-2">
+                    <Input placeholder="0x1234..." {...field} />
+
+                    {/* ABI fetch status */}
+                    <div className="mt-2 flex items-center justify-between">
+                      {watchFilterType === "event" && isFetchingEventAbi && (
+                        <div className="flex items-center">
+                          <Spinner className="mr-2 h-3 w-3" />
+                          <span className="text-xs">Fetching ABIs...</span>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* ABI fetch results */}
+                    {(Object.keys(fetchedAbis).length > 0 ||
+                      Object.keys(abiErrors).length > 0) && (
+                      <div className="mt-2 space-y-2 text-xs">
+                        {Object.keys(fetchedAbis).length > 0 && (
+                          <div className="flex items-center gap-2">
+                            <Badge
+                              variant="outline"
+                              className="border-green-200 bg-green-50 text-green-700"
+                            >
+                              ✓ {Object.keys(fetchedAbis).length} ABI
+                              {Object.keys(fetchedAbis).length !== 1 ? "s" : ""}{" "}
+                              fetched
+                            </Badge>
+                          </div>
+                        )}
+
+                        {Object.keys(abiErrors).length > 0 && (
+                          <div className="flex items-center gap-2">
+                            <Badge
+                              variant="outline"
+                              className="border-red-200 bg-red-50 text-red-700"
+                            >
+                              ✗ {Object.keys(abiErrors).length} error
+                              {Object.keys(abiErrors).length !== 1 ? "s" : ""}
+                            </Badge>
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        )}
+
+        {watchFilterType === "transaction" && (
+          <>
+            <FormField
+              control={form.control}
+              name="fromAddresses"
+              render={({ field }) => (
+                <FormItem className="flex flex-col">
+                  <div className="flex items-center justify-between text-xs">
+                    <FormLabel>From Address</FormLabel>
+                    <p className="text-muted-foreground">
+                      Enter a from address
+                    </p>
+                  </div>
+                  <FormControl>
+                    <Input
+                      placeholder="0x1234..."
+                      value={field.value ?? ""}
+                      onChange={field.onChange}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="toAddresses"
+              render={({ field }) => (
+                <FormItem className="flex flex-col">
+                  <div className="flex items-center justify-between text-xs">
+                    <FormLabel>
+                      To Address <span className="text-red-500">*</span>
+                    </FormLabel>
+                    <p className="text-muted-foreground">Enter a to address</p>
+                  </div>
+                  <FormControl>
+                    <div className="space-y-2">
+                      <Input
+                        placeholder="0x1234..."
+                        value={field.value || ""}
+                        onChange={field.onChange}
+                      />
+
+                      {/* ABI fetch status */}
+                      <div className="mt-2 flex items-center justify-between">
+                        {watchFilterType === "transaction" &&
+                          isFetchingTxAbi && (
+                            <div className="flex items-center">
+                              <Spinner className="mr-2 h-3 w-3" />
+                              <span className="text-xs">Fetching ABIs...</span>
+                            </div>
+                          )}
+                      </div>
+
+                      {/* ABI fetch results */}
+                      {(Object.keys(fetchedTxAbis).length > 0 ||
+                        Object.keys(txAbiErrors).length > 0) && (
+                        <div className="mt-2 space-y-2 text-xs">
+                          {Object.keys(fetchedTxAbis).length > 0 && (
+                            <div className="flex items-center gap-2">
+                              <Badge
+                                variant="outline"
+                                className="border-green-200 bg-green-50 text-green-700"
+                              >
+                                ✓ {Object.keys(fetchedTxAbis).length} ABI
+                                {Object.keys(fetchedTxAbis).length !== 1
+                                  ? "s"
+                                  : ""}{" "}
+                                fetched
+                              </Badge>
+                            </div>
+                          )}
+
+                          {Object.keys(txAbiErrors).length > 0 && (
+                            <div className="flex items-center gap-2">
+                              <Badge
+                                variant="outline"
+                                className="border-red-200 bg-red-50 text-red-700"
+                              >
+                                ⚠️ {Object.keys(txAbiErrors).length} error
+                                {Object.keys(txAbiErrors).length !== 1
+                                  ? "s"
+                                  : ""}
+                              </Badge>
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </>
+        )}
+      </div>
+
+      {/* Advanced Options Section */}
+      <div className="space-y-3">
+        {/* Signature Hash Field - reused for both event and transaction types */}
+        <FormField
+          control={form.control}
+          name="sigHash"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <div className="flex items-center justify-between text-xs">
+                <FormLabel>
+                  {watchFilterType === "event"
+                    ? "Event Signature (optional)"
+                    : "Function Signature (optional)"}
+                </FormLabel>
+                <p className="text-muted-foreground">
+                  {watchFilterType === "event"
+                    ? "Select an event to monitor"
+                    : "Select a function to monitor"}
+                </p>
+              </div>
+              <FormControl>
+                {watchFilterType === "event" &&
+                Object.keys(fetchedAbis).length > 0 &&
+                eventSignatures.length > 0 ? (
+                  <Select
+                    value={field.value}
+                    onValueChange={(value) => {
+                      field.onChange(value);
+                      // Find the selected event
+                      const selectedEvent = eventSignatures.find(
+                        (sig) => sig.signature === value,
+                      );
+                      // Set the ABI for the event
+                      form.setValue("sigHashAbi", selectedEvent?.abi || "");
+                    }}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select an event signature">
+                        {field.value
+                          ? eventSignatures.find(
+                              (sig) => sig.signature === field.value,
+                            )?.name || ""
+                          : null}
+                      </SelectValue>
+                    </SelectTrigger>
+                    <SelectContent>
+                      {eventSignatures.map((event) => {
+                        // Truncate the hash for display purposes
+                        const truncatedHash = truncateMiddle(
+                          event.signature,
+                          6,
+                          4,
+                        );
+
+                        return (
+                          <SelectItem
+                            key={event.signature}
+                            value={event.signature}
+                            title={event.name}
+                          >
+                            <div className="flex flex-col">
+                              <span className="font-medium">{event.name}</span>
+                              <span className="text-muted-foreground text-xs">
+                                Signature: {truncatedHash}
+                              </span>
+                            </div>
+                          </SelectItem>
+                        );
+                      })}
+                    </SelectContent>
+                  </Select>
+                ) : watchFilterType === "transaction" &&
+                  Object.keys(fetchedTxAbis).length > 0 &&
+                  functionSignatures.length > 0 ? (
+                  <Select
+                    value={field.value}
+                    onValueChange={(value) => {
+                      field.onChange(value);
+                      // Find the selected function
+                      const selectedFunction = functionSignatures.find(
+                        (sig) => sig.signature === value,
+                      );
+                      // Set the ABI for the function
+                      form.setValue("sigHashAbi", selectedFunction?.abi || "");
+                    }}
+                  >
+                    <SelectTrigger className="max-w-full">
+                      <SelectValue placeholder="Select a function signature">
+                        {field.value
+                          ? functionSignatures.find(
+                              (sig) => sig.signature === field.value,
+                            )?.name || ""
+                          : null}
+                      </SelectValue>
+                    </SelectTrigger>
+                    <SelectContent className="max-w-[600px]">
+                      {functionSignatures.map((func) => (
+                        <SelectItem
+                          key={func.signature}
+                          value={func.signature}
+                          title={func.signature}
+                          className="w-full overflow-x-auto"
+                        >
+                          <div className="flex w-full flex-col">
+                            <span className="overflow-x-auto whitespace-nowrap pb-1 font-medium">
+                              {func.name}
+                            </span>
+                            <span className="overflow-x-auto text-muted-foreground text-xs">
+                              Selector: {func.signature}
+                            </span>
+                          </div>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                ) : (
+                  <Input
+                    placeholder={
+                      watchFilterType === "event"
+                        ? "Fetching event signatures..."
+                        : "Fetching function signatures..."
+                    }
+                    value={field.value}
+                    onChange={field.onChange}
+                    disabled={
+                      (watchFilterType === "event" && isFetchingEventAbi) ||
+                      (watchFilterType === "transaction" && isFetchingTxAbi)
+                    }
+                  />
+                )}
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {/* ABI Field */}
+        <FormField
+          control={form.control}
+          name="abi"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <div className="flex items-center justify-between text-xs">
+                <FormLabel>ABI (optional)</FormLabel>
+                <p className="text-muted-foreground">
+                  {watchFilterType === "event"
+                    ? "Enter the ABI of the contract or event"
+                    : "Enter the ABI of the contract or function"}
+                </p>
+              </div>
+              <FormControl>
+                {(watchFilterType === "event" &&
+                  Object.keys(fetchedAbis).length > 0) ||
+                (watchFilterType === "transaction" &&
+                  Object.keys(fetchedTxAbis).length > 0) ? (
+                  <div className="space-y-2 rounded-md border bg-primary/5 p-3">
+                    <div className="flex items-center">
+                      <Badge className="border-green-200 bg-green-100 text-green-800">
+                        ✓ ABI Automatically Fetched
+                      </Badge>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="ml-auto h-7 text-xs"
+                        onClick={async () => {
+                          try {
+                            if (watchFilterType === "event") {
+                              await Promise.all(
+                                selectedChainIds.flatMap((chainId) =>
+                                  contractAddresses
+                                    .split(/[,\s]+/)
+                                    .map((a) => a.trim())
+                                    .filter(Boolean)
+                                    .map((address) =>
+                                      queryClient.resetQueries({
+                                        queryKey: [
+                                          "abis",
+                                          String(chainId),
+                                          address,
+                                          watchFilterType,
+                                        ],
+                                        exact: true,
+                                      }),
+                                    ),
+                                ),
+                              );
+
+                              // Reset event-specific form values
+                              form.setValue("addresses", "");
+                              // Reset signature hash
+                              form.setValue("sigHash", "");
+                              form.setValue("sigHashAbi", "");
+                            } else if (watchFilterType === "transaction") {
+                              // Reset for all chainId/address pairs concurrently
+                              const resetPromises: Promise<void>[] = [];
+                              for (const chainId of selectedChainIds) {
+                                for (const address of (
+                                  form.watch("toAddresses") || ""
+                                )
+                                  .split(/[,\s]+/)
+                                  .map((a) => a.trim())
+                                  .filter(Boolean)) {
+                                  resetPromises.push(
+                                    (async () => {
+                                      try {
+                                        await queryClient.resetQueries({
+                                          queryKey: [
+                                            "abis",
+                                            String(chainId),
+                                            address,
+                                            watchFilterType,
+                                          ],
+                                          exact: true,
+                                        });
+                                      } catch (err) {
+                                        console.error(
+                                          "Failed to reset query for tx ABI",
+                                          chainId,
+                                          address,
+                                          err,
+                                        );
+                                      }
+                                    })(),
+                                  );
+                                }
+                              }
+                              await Promise.all(resetPromises);
+
+                              // Reset transaction-specific form values
+                              form.setValue("toAddresses", "");
+                              // Reset signature hash
+                              form.setValue("sigHash", "");
+                              form.setValue("sigHashAbi", "");
+                            }
+                          } catch (err) {
+                            console.error("Error during ABI reset:", err);
+                          }
+                        }}
+                      >
+                        Reset
+                      </Button>
+                    </div>
+                    <p className="text-muted-foreground text-xs">
+                      ABIs have been automatically fetched for the contracts you
+                      specified.
+                    </p>
+                  </div>
+                ) : (
+                  <Textarea
+                    placeholder={"[{...}]"}
+                    className="font-mono"
+                    rows={2}
+                    {...field}
+                  />
+                )}
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </div>
+
+      <div className="flex justify-between pt-4">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={goToPreviousStep}
+          disabled={isLoading}
+        >
+          Back
+        </Button>
+        <Button type="button" onClick={goToNextStep} disabled={isLoading}>
+          Next
+        </Button>
+      </div>
+    </>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/RelativeTime.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/RelativeTime.tsx
index 1304deac032..a5a5deea137 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/RelativeTime.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/RelativeTime.tsx
@@ -1,5 +1,4 @@
 "use client";
-import { cn } from "@/lib/utils";
 import { formatDistanceToNowStrict } from "date-fns";
 import { useEffect, useState } from "react";
 
@@ -38,5 +37,5 @@ export function RelativeTime({
     return () => clearInterval(interval);
   }, [date]);
 
-  return <span className={cn(className)}>{content}</span>;
+  return <span className={className}>{content}</span>;
 }
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/ReviewStep.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/ReviewStep.tsx
new file mode 100644
index 00000000000..77a17feb82f
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/ReviewStep.tsx
@@ -0,0 +1,249 @@
+"use client";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Button } from "@/components/ui/button";
+import { CheckIcon, PlayIcon, XIcon } from "lucide-react";
+import type { UseFormReturn } from "react-hook-form";
+
+import { truncateMiddle } from "../utils/abiUtils";
+import type { WebhookFormValues } from "../utils/webhookTypes";
+
+interface WebhookTestResult {
+  status: string;
+  timestamp?: number;
+  error?: string;
+  statusCode?: number;
+}
+
+interface ReviewStepProps {
+  form: UseFormReturn<WebhookFormValues>;
+  isTestingMap: Record<string, boolean>;
+  testResults: Record<string, WebhookTestResult>;
+  isRecentResult: (id: string) => boolean;
+  testWebhookEndpoint: (url: string, filterType: string) => Promise<boolean>;
+  goToPreviousStep: () => void;
+  isLoading: boolean;
+  handleCreateButtonClick: () => void;
+}
+
+// Helper to format addresses
+function formatAddresses(addresses: string | undefined, start = 6, end = 4) {
+  if (!addresses) return "None";
+  return addresses
+    .split(/[,\s]+/)
+    .map((addr) => truncateMiddle(addr.trim(), start, end))
+    .join(", ");
+}
+
+export default function ReviewStep({
+  form,
+  isTestingMap,
+  testResults,
+  isRecentResult,
+  testWebhookEndpoint,
+  goToPreviousStep,
+  isLoading,
+  handleCreateButtonClick,
+}: ReviewStepProps) {
+  // Determine if testing is in progress
+  const webhookUrl = form.watch("webhookUrl");
+  const filterType = form.watch("filterType");
+  const uniqueId = `${webhookUrl}-${filterType}`;
+  const isTesting = isTestingMap[uniqueId];
+  // Get test result if available
+  const testResult = testResults[uniqueId];
+  const isRecent = isRecentResult(uniqueId);
+
+  const handleTestWebhook = async () => {
+    if (webhookUrl && filterType) {
+      await testWebhookEndpoint(webhookUrl, filterType);
+    }
+  };
+
+  function renderTestButton() {
+    if (testResult?.status === "success" && isRecent) {
+      return (
+        <Button
+          className="gap-2 border-green-500 text-green-700"
+          disabled={isTesting}
+          onClick={handleTestWebhook}
+          size="sm"
+          type="button"
+          variant="outline"
+        >
+          <CheckIcon className="h-4 w-4" />
+          Test Successful
+        </Button>
+      );
+    }
+    if (testResult?.status === "error" && isRecent) {
+      return (
+        <Button
+          className="gap-2 border-red-500 text-red-700"
+          disabled={isTesting}
+          onClick={handleTestWebhook}
+          size="sm"
+          type="button"
+          variant="outline"
+        >
+          <XIcon className="h-4 w-4" />
+          Test Failed
+        </Button>
+      );
+    }
+    return (
+      <Button
+        className="gap-2"
+        disabled={isTesting}
+        onClick={handleTestWebhook}
+        size="sm"
+        type="button"
+        variant="outline"
+      >
+        {isTesting ? (
+          <>
+            <Spinner className="h-4 w-4" />
+            Testing...
+          </>
+        ) : (
+          <>
+            <PlayIcon className="h-4 w-4" />
+            Test Webhook
+          </>
+        )}
+      </Button>
+    );
+  }
+
+  return (
+    <>
+      <div className="mb-4">
+        <h2 className="font-medium text-lg">Step 3: Review</h2>
+        <p className="text-muted-foreground text-sm">
+          Review your webhook configuration before creating
+        </p>
+      </div>
+
+      {/* Review Details */}
+      <div className="rounded-md border p-4">
+        <ul className="space-y-2">
+          <li className="flex justify-between">
+            <span className="text-muted-foreground text-sm">Name:</span>
+            <span className="font-medium text-sm">{form.watch("name")}</span>
+          </li>
+          <li className="flex justify-between">
+            <span className="text-muted-foreground text-sm">Webhook URL:</span>
+            <span className="font-medium text-sm">
+              {truncateMiddle(form.watch("webhookUrl"), 12, 10)}
+            </span>
+          </li>
+
+          <li className="flex justify-between">
+            <span className="text-muted-foreground text-sm">Type:</span>
+            <span className="font-medium text-sm capitalize">
+              {form.watch("filterType")}
+            </span>
+          </li>
+
+          <li className="flex justify-between">
+            <span className="text-muted-foreground text-sm">Chain IDs:</span>
+            <span className="font-medium text-sm">
+              {(form.watch("chainIds") || []).length > 0
+                ? (form.watch("chainIds") || [])
+                    .map((id) => id.toString())
+                    .join(", ")
+                : "None"}
+            </span>
+          </li>
+          <li className="flex justify-between">
+            <span className="text-muted-foreground text-sm">
+              Contract Addresses:
+            </span>
+            <span className="font-medium text-sm">
+              {(() => {
+                const filterType = form.watch("filterType");
+                if (filterType === "event") {
+                  return formatAddresses(form.watch("addresses"));
+                } else if (filterType === "transaction") {
+                  return formatAddresses(form.watch("toAddresses"));
+                } else {
+                  return "None";
+                }
+              })()}
+            </span>
+          </li>
+
+          {form.watch("filterType") === "event" ? (
+            <></>
+          ) : (
+            <>
+              <li className="flex justify-between">
+                <span className="text-muted-foreground text-sm">
+                  From Address:
+                </span>
+                <span className="font-medium text-sm">
+                  {formatAddresses(form.watch("fromAddresses"))}
+                </span>
+              </li>
+              <li className="flex justify-between">
+                <span className="text-muted-foreground text-sm">
+                  To Address:
+                </span>
+                <span className="font-medium text-sm">
+                  {formatAddresses(form.watch("toAddresses"))}
+                </span>
+              </li>
+            </>
+          )}
+
+          <li className="flex justify-between">
+            <span className="text-muted-foreground text-sm">
+              Signature Hash:
+            </span>
+            <span className="font-medium text-sm">
+              {(() => {
+                const sigHash = form.watch("sigHash");
+                return sigHash ? truncateMiddle(sigHash, 10, 6) : "None";
+              })()}
+            </span>
+          </li>
+
+          <li className="flex justify-between">
+            <span className="text-muted-foreground text-sm">ABIs:</span>
+            <span className="font-medium text-sm">
+              {form.watch("sigHashAbi") ? "Provided" : "None"}
+            </span>
+          </li>
+        </ul>
+      </div>
+
+      {/* Test Webhook Section */}
+      <div className="mt-6 rounded-md border bg-primary/5 p-4">
+        <h3 className="mb-2 font-medium text-sm">Test your webhook</h3>
+        <p className="mb-4 text-muted-foreground text-sm">
+          Before creating your webhook, you can test if your endpoint is
+          configured correctly to receive events.
+        </p>
+
+        {renderTestButton()}
+      </div>
+
+      <div className="flex justify-between pt-4">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={goToPreviousStep}
+          disabled={isLoading}
+        >
+          Back
+        </Button>
+        <Button
+          type="submit"
+          disabled={isLoading}
+          onClick={handleCreateButtonClick}
+        >
+          {isLoading ? "Creating..." : "Create Webhook"}
+        </Button>
+      </div>
+    </>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx
index 2594bffba91..93f133227a4 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx
@@ -17,9 +17,13 @@ import { PlayIcon, TrashIcon } from "lucide-react";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";
 import { useTestWebhook } from "../hooks/useTestWebhook";
+import { CreateWebhookModal } from "./CreateWebhookModal";
 import { RelativeTime } from "./RelativeTime";
 
 function getEventType(filters: WebhookFilters): string {
+  if (!filters || typeof filters !== "object") {
+    return "Unknown";
+  }
   if (filters["v1.events"]) return "Event";
   if (filters["v1.transactions"]) return "Transaction";
   return "Unknown";
@@ -120,11 +124,15 @@ export function WebhooksTable({ webhooks, clientId }: WebhooksTableProps) {
       header: "Created",
       cell: ({ getValue }) => {
         const date = getValue() as string;
+        const dateObj = new Date(date);
+        const formattedDate = Number.isNaN(dateObj.getTime())
+          ? "Invalid date"
+          : format(dateObj, "MMM d, yyyy");
         return (
           <div className="flex flex-col">
             <RelativeTime date={date} />
             <span className="text-muted-foreground text-xs">
-              {format(new Date(date), "MMM d, yyyy")}
+              {formattedDate}
             </span>
           </div>
         );
@@ -202,7 +210,7 @@ export function WebhooksTable({ webhooks, clientId }: WebhooksTableProps) {
   return (
     <div className="w-full">
       <div className="mb-4 flex items-center justify-end">
-        <Button type="button">New Webhook</Button>
+        <CreateWebhookModal clientId={clientId} />
       </div>
       <TWTable
         data={sortedWebhooks}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/hooks/useAbiProcessing.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/hooks/useAbiProcessing.ts
new file mode 100644
index 00000000000..8815e7c2cff
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/hooks/useAbiProcessing.ts
@@ -0,0 +1,139 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+import type { ThirdwebClient } from "thirdweb";
+import { defineChain } from "thirdweb/chains";
+import { getContract, resolveAbiFromContractApi } from "thirdweb/contract";
+import type {
+  AbiData,
+  EventSignature,
+  FunctionSignature,
+} from "../utils/webhookTypes";
+
+import { parseAddresses } from "../utils/webhookPayloadUtils";
+
+export function useAbiMultiFetch({
+  isOpen,
+  thirdwebClient,
+  chainIds,
+  addresses,
+  extractSignatures,
+  type,
+}: {
+  isOpen: boolean;
+  thirdwebClient: ThirdwebClient;
+  chainIds: string[];
+  addresses: string;
+  extractSignatures: (
+    abis: AbiData[],
+  ) => EventSignature[] | FunctionSignature[];
+  type: "event" | "transaction";
+}) {
+  const pairs = useMemo(() => {
+    const result: { chainId: string; address: string }[] = [];
+    const seen = new Set<string>();
+    for (const chainId of chainIds) {
+      for (const address of parseAddresses(addresses)) {
+        const key = `${chainId}:${address.toLowerCase()}`;
+        if (!seen.has(key)) {
+          seen.add(key);
+          result.push({ chainId, address });
+        }
+      }
+    }
+    return result;
+  }, [chainIds, addresses]);
+
+  const queryResult = useQuery({
+    queryKey: ["abis", chainIds, addresses, type],
+    queryFn: async () => {
+      return Promise.all(
+        pairs.map(async ({ chainId, address }) => {
+          try {
+            // eslint-disable-next-line no-restricted-syntax
+            const chainObj = defineChain(Number(chainId));
+            const contract = getContract({
+              client: thirdwebClient,
+              address,
+              chain: chainObj,
+            });
+            const abi = await resolveAbiFromContractApi(contract);
+            return { chainId, address, data: abi, status: "success" as const };
+          } catch (error) {
+            return { chainId, address, error, status: "error" as const };
+          }
+        }),
+      );
+    },
+    enabled: isOpen && !!addresses.trim() && chainIds.length > 0,
+    staleTime: Number.POSITIVE_INFINITY,
+  });
+
+  // Map results by address for easier access
+  const abisByAddress = useMemo(() => {
+    if (!queryResult.data) return {};
+    const map: Record<
+      string,
+      {
+        chainId: string;
+        address: string;
+        data?: AbiData["abi"];
+        error?: unknown;
+        status: "success" | "error";
+      }
+    > = {};
+    for (const item of queryResult.data) {
+      map[item.address] = item;
+    }
+    return map;
+  }, [queryResult.data]);
+
+  // Build fetchedAbis in the same format as before
+  const fetchedAbis = useMemo(() => {
+    const abis: Record<string, AbiData> = {};
+    if (!queryResult.data) return abis;
+    for (const item of queryResult.data) {
+      if (item.status === "success" && item.data) {
+        const abi = item.data;
+        let items: string[] = [];
+        if (Array.isArray(abi)) {
+          items = abi
+            .filter((abiItem) =>
+              type === "event"
+                ? abiItem && abiItem.type === "event"
+                : abiItem && abiItem.type === "function",
+            )
+            .map((abiItem) => abiItem.name);
+        }
+        abis[item.address] = {
+          fetchedAt: new Date().toISOString(),
+          status: "success",
+          abi: abi,
+          ...(type === "event" ? { events: items } : { functions: items }),
+        };
+      }
+    }
+    return abis;
+  }, [queryResult.data, type]);
+
+  const signatures = extractSignatures(Object.values(fetchedAbis));
+
+  // isFetching: true if any address is still loading and not yet successful
+  const isFetching = queryResult.isLoading;
+
+  // Collect errors per address for easier UI feedback
+  const errors: Record<string, string> = useMemo(() => {
+    const errs: Record<string, string> = {};
+    if (!queryResult.data) return errs;
+    for (const item of queryResult.data) {
+      if (item.status === "error" && item.error) {
+        errs[item.address] =
+          item.error instanceof Error ? item.error.message : String(item.error);
+      }
+    }
+    return errs;
+  }, [queryResult.data]);
+
+  return { signatures, fetchedAbis, errors, isFetching, abisByAddress };
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/hooks/useTestWebhook.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/hooks/useTestWebhook.ts
index c10b0130146..22709ffe884 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/hooks/useTestWebhook.ts
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/hooks/useTestWebhook.ts
@@ -18,14 +18,17 @@ export function useTestWebhook(clientId: string) {
     type: "event" | "transaction",
     id?: string,
   ) => {
-    if (!webhookUrl) {
+    try {
+      new URL(webhookUrl);
+    } catch {
       toast.error("Cannot test webhook", {
-        description: "Webhook URL is required",
+        description:
+          "Please enter a valid URL starting with http:// or https://",
       });
       return false;
     }
 
-    const uniqueId = id || webhookUrl;
+    const uniqueId = id || `${webhookUrl}-${type}`;
 
     if (isTestingMap[uniqueId]) return false;
 
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/page.tsx
index 8b6af7e668b..d4214321766 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/page.tsx
@@ -51,6 +51,7 @@ export default async function WebhooksPage({
               category="webhooks"
               label="learn-more"
               target="_blank"
+              rel="noopener noreferrer"
               href="https://portal.thirdweb.com/insight/webhooks"
             >
               Learn more about webhooks.
@@ -79,7 +80,7 @@ export default async function WebhooksPage({
                 Create a webhook to get started.
               </p>
             </div>
-            <CreateWebhookModal />
+            <CreateWebhookModal clientId={clientId} />
           </div>
         )}
       </div>
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/utils/abiUtils.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/utils/abiUtils.ts
new file mode 100644
index 00000000000..c02a897b66b
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/utils/abiUtils.ts
@@ -0,0 +1,193 @@
+import { keccak256, toFunctionSelector } from "thirdweb/utils";
+import type { AbiData } from "./webhookTypes";
+
+/**
+ * Truncates a string in the middle for display purposes
+ * @param str String to truncate
+ * @param startChars Number of characters to keep at the start
+ * @param endChars Number of characters to keep at the end
+ * @returns Truncated string
+ */
+export const truncateMiddle = (
+  str: string,
+  startChars = 6,
+  endChars = 4,
+): string => {
+  if (!str) return "None";
+  if (str.length <= startChars + endChars) return str;
+  return `${str.substring(0, startChars)}...${str.substring(str.length - endChars)}`;
+};
+
+function isAbiInput(
+  input: unknown,
+): input is { type: string; indexed?: boolean; name?: string } {
+  return (
+    typeof input === "object" &&
+    input !== null &&
+    typeof (input as { type?: unknown }).type === "string"
+  );
+}
+
+/**
+ * Extracts event signatures from ABI data
+ * @param abiData Array of ABI data objects
+ * @returns Array of event signatures with name, signature hash, and ABI
+ */
+export const extractEventSignatures = (
+  abiData: AbiData[],
+): Array<{ name: string; signature: string; abi?: string }> => {
+  try {
+    const signatures: Array<{
+      name: string;
+      signature: string;
+      abi?: string;
+    }> = [];
+
+    // Iterate through all ABIs
+    for (const abiObj of abiData) {
+      if (abiObj && typeof abiObj === "object") {
+        const abi = abiObj.abi;
+
+        // If we have a valid ABI array, extract event signatures
+        if (Array.isArray(abi)) {
+          // Filter to only include events
+          const events = abi.filter(
+            (item) => item && typeof item === "object" && item.type === "event",
+          );
+
+          // Create signatures for each event
+          for (const event of events) {
+            if (event && typeof event === "object" && event.name) {
+              // Create a signature string that includes inputs
+              const eventName = event.name as string;
+              const inputs = Array.isArray(event.inputs)
+                ? event.inputs
+                    .filter((input: unknown) => isAbiInput(input))
+                    .map(
+                      (input: {
+                        type: string;
+                        indexed?: boolean;
+                        name?: string;
+                      }) => `${input.type} ${input.name || ""}`,
+                    )
+                    .join(", ")
+                : "";
+
+              // Create a human-readable signature for display
+              const readableSignature = `${eventName}(${inputs})`;
+
+              // Create the canonical signature for hashing (without parameter names and indexed)
+              const canonicalInputs = Array.isArray(event.inputs)
+                ? event.inputs
+                    .filter((input: unknown) => isAbiInput(input))
+                    .map((input: { type: string }) => input.type)
+                    .join(",")
+                : "";
+
+              const canonicalSignature = `${eventName}(${canonicalInputs})`;
+
+              // Generate the proper Ethereum event signature hash using keccak256
+              // Use proper UTF-8 encoding for the signature
+              const encoder = new TextEncoder();
+              const signatureBytes = encoder.encode(canonicalSignature);
+              const hash = keccak256(signatureBytes);
+
+              // Stringify the event ABI for inclusion in the payload
+              const eventAbi = JSON.stringify(event);
+
+              signatures.push({
+                name: readableSignature,
+                signature: hash, // Use the full hash, not a substring
+                abi: eventAbi, // Include the ABI for the selected event
+              });
+            }
+          }
+        }
+      }
+    }
+
+    return signatures;
+  } catch (err) {
+    console.error("Error extracting event signatures:", err);
+    return [];
+  }
+};
+
+/**
+ * Extracts function signatures from ABI data
+ * @param abiData Array of ABI data objects
+ * @returns Array of function signatures with name, selector, and ABI
+ */
+export const extractFunctionSignatures = (
+  abiData: AbiData[],
+): Array<{ name: string; signature: string; abi?: string }> => {
+  try {
+    const signatures: { name: string; signature: string; abi?: string }[] = [];
+
+    // Iterate through all ABIs
+    for (const abiObj of abiData) {
+      if (abiObj && typeof abiObj === "object") {
+        const abi = abiObj.abi;
+
+        // If we have a valid ABI array, extract function signatures
+        if (Array.isArray(abi)) {
+          // Filter to only include functions
+          const functions = abi.filter(
+            (item) =>
+              item && typeof item === "object" && item.type === "function",
+          );
+
+          // Create signatures for each function
+          for (const func of functions) {
+            if (func && typeof func === "object" && func.name) {
+              // Create a readable signature string for UI display
+              const funcName = func.name as string;
+              const inputs = Array.isArray(func.inputs)
+                ? func.inputs
+                    .filter((input: unknown) => isAbiInput(input))
+                    .map(
+                      (input: {
+                        type: string;
+                        indexed?: boolean;
+                        name?: string;
+                      }) => `${input.type} ${input.name || ""}`,
+                    )
+                    .join(", ")
+                : "";
+
+              // Create a human-readable signature for display
+              const readableSignature = `${funcName}(${inputs})`;
+
+              // Create the canonical signature for function selector
+              const canonicalInputs = Array.isArray(func.inputs)
+                ? func.inputs
+                    .filter((input: unknown) => isAbiInput(input))
+                    .map((input: { type: string }) => input.type)
+                    .join(",")
+                : "";
+
+              const canonicalSignature = `${funcName}(${canonicalInputs})`;
+
+              // Generate the function selector using thirdweb SDK v5
+              const hash = toFunctionSelector(canonicalSignature);
+
+              // Stringify the function ABI for inclusion in the payload
+              const funcAbi = JSON.stringify(func);
+
+              signatures.push({
+                name: readableSignature,
+                signature: hash,
+                abi: funcAbi, // Include the ABI for the selected function
+              });
+            }
+          }
+        }
+      }
+    }
+
+    return signatures;
+  } catch (error) {
+    console.error("Error extracting function signatures: ", error);
+    return [];
+  }
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/utils/webhookPayloadUtils.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/utils/webhookPayloadUtils.ts
new file mode 100644
index 00000000000..a385d8a0f8f
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/utils/webhookPayloadUtils.ts
@@ -0,0 +1,79 @@
+import type { WebhookFormValues } from "./webhookTypes";
+
+export function parseAddresses(addresses: string | undefined): string[] {
+  if (!addresses) return [];
+  return addresses
+    .split(/[\,\s]+/)
+    .map((addr) => addr.trim())
+    .filter(Boolean);
+}
+
+export interface WebhookPayload {
+  name: string;
+  filters: Record<
+    string,
+    {
+      chain_ids?: string[];
+      addresses?: string[];
+      from_addresses?: string[];
+      to_addresses?: string[];
+      signatures?: Array<{
+        sig_hash: string;
+        abi?: string;
+        params: Record<string, unknown> | unknown[];
+      }>;
+    }
+  >;
+  webhook_url: string;
+}
+
+export function buildEventWebhookPayload(
+  data: WebhookFormValues,
+): WebhookPayload {
+  const eventSignatures = [];
+  if (data.sigHash) {
+    eventSignatures.push({
+      sig_hash: data.sigHash,
+      abi: data.sigHashAbi,
+      params: {},
+    });
+  }
+  return {
+    name: data.name ?? "",
+    filters: {
+      "v1.events": {
+        chain_ids: data.chainIds?.map(String),
+        addresses: parseAddresses(data.addresses),
+        signatures: eventSignatures.length > 0 ? eventSignatures : undefined,
+      },
+    },
+    webhook_url: data.webhookUrl,
+  };
+}
+
+export function buildTransactionWebhookPayload(
+  data: WebhookFormValues,
+): WebhookPayload {
+  const txSignatures = [];
+  if (data.sigHash) {
+    txSignatures.push({
+      sig_hash: data.sigHash,
+      abi: data.sigHashAbi,
+      params: [],
+    });
+  }
+  return {
+    name: data.name ?? "",
+    filters: {
+      "v1.transactions": {
+        chain_ids: data.chainIds?.map(String),
+        from_addresses: parseAddresses(data.fromAddresses),
+        to_addresses: data.toAddresses
+          ? parseAddresses(data.toAddresses)
+          : undefined,
+        signatures: txSignatures.length > 0 ? txSignatures : undefined,
+      },
+    },
+    webhook_url: data.webhookUrl,
+  };
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/utils/webhookTypes.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/utils/webhookTypes.ts
new file mode 100644
index 00000000000..1f73034ce5e
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/utils/webhookTypes.ts
@@ -0,0 +1,98 @@
+import { isAddress } from "thirdweb/utils";
+import type { Abi } from "thirdweb/utils";
+import { z } from "zod";
+
+const inputAbi = z.object({
+  type: z.string(),
+  name: z.string().optional(),
+  inputs: z
+    .array(
+      z.object({
+        name: z.string(),
+        type: z.string(),
+        indexed: z.boolean().optional(),
+      }),
+    )
+    .optional(),
+  outputs: z
+    .array(
+      z.object({
+        name: z.string(),
+        type: z.string(),
+      }),
+    )
+    .optional(),
+});
+
+export const webhookFormSchema = z.object({
+  name: z
+    .string()
+    .min(3, { message: "Name must be at least 3 characters long" })
+    .max(100, { message: "Name must be at most 100 characters long" }),
+  webhookUrl: z.string().url({ message: "Must be a valid URL" }),
+  filterType: z.enum(["event", "transaction"]),
+  chainIds: z
+    .array(z.string())
+    .min(1, { message: "Select at least one chain" }),
+  addresses: z
+    .string()
+    .min(1, { message: "Addresses is required" })
+    .refine((val) => val.split(/[\,\s]+/).every((a) => isAddress(a.trim())), {
+      message: "Enter a valid address",
+    }),
+  fromAddresses: z
+    .string()
+    .optional()
+    .refine(
+      (val) => !val || val.split(/[,\s]+/).every((a) => isAddress(a.trim())),
+      {
+        message: "Enter a valid address",
+      },
+    ),
+  toAddresses: z
+    .string()
+    .refine(
+      (val) => !val || val.split(/[,\s]+/).every((a) => isAddress(a.trim())),
+      {
+        message: "Enter a valid address (comma-separated)",
+      },
+    ),
+  sigHash: z.string().optional(),
+  sigHashAbi: z.string().optional(),
+  abi: z.string().optional(),
+  inputAbi: z.array(inputAbi).optional(),
+  secret: z.string().optional(),
+  eventTypes: z.array(z.string()).optional(),
+  params: z.record(z.unknown()).optional(),
+});
+
+export type WebhookFormValues = z.infer<typeof webhookFormSchema>;
+
+export interface EventSignature {
+  name: string;
+  signature: string;
+  abi?: string;
+}
+
+export interface FunctionSignature {
+  name: string;
+  signature: string;
+  abi?: string;
+}
+
+export interface AbiData {
+  fetchedAt: string;
+  status: string;
+  abi: Abi;
+  events?: string[];
+  functions?: string[];
+  name?: string;
+}
+
+export type WebhookFormStep = "basicInfo" | "filterDetails" | "review";
+
+export const WebhookFormSteps = {
+  BasicInfo: "basicInfo" as WebhookFormStep,
+  FilterDetails: "filterDetails" as WebhookFormStep,
+  Review: "review" as WebhookFormStep,
+} as const;