diff --git a/apps/dashboard/src/@/hooks/useEngine.ts b/apps/dashboard/src/@/hooks/useEngine.ts
index b7ce2eb0bc8..8caa447ca8b 100644
--- a/apps/dashboard/src/@/hooks/useEngine.ts
+++ b/apps/dashboard/src/@/hooks/useEngine.ts
@@ -1223,7 +1223,7 @@ export function useEngineUpdateAccessToken(params: {
   });
 }
 
-export type CreateWebhookInput = {
+type CreateWebhookInput = {
   url: string;
   name: string;
   eventType: string;
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/webhooks/components/add-webhook-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/webhooks/components/add-webhook-button.tsx
index 2f95e199259..ad32ef2f3e3 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/webhooks/components/add-webhook-button.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/webhooks/components/add-webhook-button.tsx
@@ -1,33 +1,38 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PlusIcon } from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import {
-  Flex,
+  Form,
   FormControl,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Select,
-  useDisclosure,
-} from "@chakra-ui/react";
-import { Button } from "chakra/button";
-import { FormLabel } from "chakra/form";
-import { CirclePlusIcon } from "lucide-react";
-import { useForm } from "react-hook-form";
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
 import {
-  type CreateWebhookInput,
-  useEngineCreateWebhook,
-} from "@/hooks/useEngine";
-import { useTxNotifications } from "@/hooks/useTxNotifications";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useEngineCreateWebhook } from "@/hooks/useEngine";
 import { beautifyString } from "./webhooks-table";
 
-interface AddWebhookButtonProps {
-  instanceUrl: string;
-  authToken: string;
-}
-
 const WEBHOOK_EVENT_TYPES = [
   "all_transactions",
   "sent_transaction",
@@ -38,97 +43,156 @@ const WEBHOOK_EVENT_TYPES = [
   "auth",
 ];
 
-export const AddWebhookButton: React.FC<AddWebhookButtonProps> = ({
+const webhookFormSchema = z.object({
+  eventType: z.string().min(1, "Event type is required"),
+  name: z.string().min(1, "Name is required"),
+  url: z.string().url("Please enter a valid URL"),
+});
+
+type WebhookFormValues = z.infer<typeof webhookFormSchema>;
+
+export function AddWebhookButton({
   instanceUrl,
   authToken,
-}) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const { mutate: createWebhook } = useEngineCreateWebhook({
+}: {
+  instanceUrl: string;
+  authToken: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const createWebhook = useEngineCreateWebhook({
     authToken,
     instanceUrl,
   });
 
-  const form = useForm<CreateWebhookInput>();
+  const form = useForm<WebhookFormValues>({
+    resolver: zodResolver(webhookFormSchema),
+    defaultValues: {
+      eventType: "",
+      name: "",
+      url: "",
+    },
+    mode: "onChange",
+  });
 
-  const { onSuccess, onError } = useTxNotifications(
-    "Webhook created successfully.",
-    "Failed to create webhook.",
-  );
+  const onSubmit = (data: WebhookFormValues) => {
+    createWebhook.mutate(data, {
+      onError: (error) => {
+        toast.error("Failed to create webhook", {
+          description: error.message,
+        });
+        console.error(error);
+      },
+      onSuccess: () => {
+        toast.success("Webhook created successfully");
+        setOpen(false);
+        form.reset();
+      },
+    });
+  };
 
   return (
-    <>
-      <Button
-        colorScheme="primary"
-        leftIcon={<CirclePlusIcon className="size-6" />}
-        onClick={onOpen}
-        size="sm"
-        variant="ghost"
-        w="fit-content"
-      >
-        Create Webhook
-      </Button>
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button className="w-fit gap-2" onClick={() => setOpen(true)}>
+          <PlusIcon className="size-4" />
+          Create Webhook
+        </Button>
+      </DialogTrigger>
 
-      <Modal isCentered isOpen={isOpen} onClose={onClose}>
-        <ModalOverlay />
-        <ModalContent
-          as="form"
-          className="!bg-background rounded-lg border border-border"
-          onSubmit={form.handleSubmit((data) => {
-            createWebhook(data, {
-              onError: (error) => {
-                onError(error);
-                console.error(error);
-              },
-              onSuccess: () => {
-                onSuccess();
-                onClose();
-              },
-            });
-          })}
-        >
-          <ModalHeader>Create Webhook</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            <Flex flexDir="column" gap={4}>
-              <FormControl isRequired>
-                <FormLabel>Event Type</FormLabel>
-                <Select {...form.register("eventType", { required: true })}>
-                  {WEBHOOK_EVENT_TYPES.map((eventType) => (
-                    <option key={eventType} value={eventType}>
-                      {beautifyString(eventType)}
-                    </option>
-                  ))}
-                </Select>
-              </FormControl>
-              <FormControl isRequired>
-                <FormLabel>Name</FormLabel>
-                <Input
-                  placeholder="My webhook"
-                  type="text"
-                  {...form.register("name", { required: true })}
-                />
-              </FormControl>
-              <FormControl isRequired>
-                <FormLabel>URL</FormLabel>
-                <Input
-                  placeholder="https://"
-                  type="url"
-                  {...form.register("url", { required: true })}
-                />
-              </FormControl>
-            </Flex>
-          </ModalBody>
+      <DialogContent className="p-0 gap-0 overflow-hidden">
+        <DialogHeader className="p-4 lg:p-6">
+          <DialogTitle>Create Webhook</DialogTitle>
+          <DialogDescription>
+            Create a new webhook to receive notifications for engine events.
+          </DialogDescription>
+        </DialogHeader>
 
-          <ModalFooter as={Flex} gap={3}>
-            <Button onClick={onClose} type="button" variant="ghost">
-              Cancel
-            </Button>
-            <Button colorScheme="primary" type="submit">
-              Create
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <div className="space-y-4 px-4 lg:px-6 pb-4">
+              <FormField
+                control={form.control}
+                name="eventType"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Event Type</FormLabel>
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <FormControl>
+                        <SelectTrigger className="bg-card">
+                          <SelectValue placeholder="Select event type" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {WEBHOOK_EVENT_TYPES.map((eventType) => (
+                          <SelectItem key={eventType} value={eventType}>
+                            {beautifyString(eventType)}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Name</FormLabel>
+                    <FormControl>
+                      <Input
+                        className="bg-card"
+                        placeholder="My webhook"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="url"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>URL</FormLabel>
+                    <FormControl>
+                      <Input
+                        className="bg-card"
+                        placeholder="https://"
+                        type="url"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <div className="flex justify-end gap-3 p-4 lg:p-6 bg-card border-t border-border">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setOpen(false)}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                disabled={createWebhook.isPending}
+                className="gap-2"
+              >
+                {createWebhook.isPending && <Spinner className="size-4" />}
+                Create
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
   );
-};
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/webhooks/components/engine-webhooks.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/webhooks/components/engine-webhooks.tsx
index 65719b202d3..b905cac1829 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/webhooks/components/engine-webhooks.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/webhooks/components/engine-webhooks.tsx
@@ -1,43 +1,38 @@
 "use client";
 
-import { Heading } from "chakra/heading";
-import { Link } from "chakra/link";
-import { Text } from "chakra/text";
+import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import { useEngineWebhooks } from "@/hooks/useEngine";
 import { AddWebhookButton } from "./add-webhook-button";
 import { WebhooksTable } from "./webhooks-table";
 
-interface EngineWebhooksProps {
-  instanceUrl: string;
-  authToken: string;
-}
-
-export const EngineWebhooks: React.FC<EngineWebhooksProps> = ({
+export function EngineWebhooks({
   instanceUrl,
   authToken,
-}) => {
+}: {
+  instanceUrl: string;
+  authToken: string;
+}) {
   const webhooks = useEngineWebhooks({
     authToken,
     instanceUrl,
   });
 
   return (
-    <div className="flex flex-col gap-4">
-      <div className="flex flex-col gap-2">
-        <Heading size="title.md">Webhooks</Heading>
-        <Text>
-          Notify your app backend when transaction and backend wallet events
-          occur.{" "}
-          <Link
-            color="primary.500"
-            href="https://portal.thirdweb.com/infrastructure/engine/features/webhooks"
-            isExternal
-          >
-            Learn more about webhooks
-          </Link>
-          .
-        </Text>
-      </div>
+    <div>
+      <h2 className="text-2xl tracking-tight font-semibold mb-1">Webhooks</h2>
+      <p className="text-muted-foreground mb-4 text-sm">
+        Notify your app backend when transaction and backend wallet events
+        occur.{" "}
+        <UnderlineLink
+          href="https://portal.thirdweb.com/infrastructure/engine/features/webhooks"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Learn more about webhooks
+        </UnderlineLink>
+        .
+      </p>
+
       <WebhooksTable
         authToken={authToken}
         instanceUrl={instanceUrl}
@@ -45,7 +40,10 @@ export const EngineWebhooks: React.FC<EngineWebhooksProps> = ({
         isPending={webhooks.isPending}
         webhooks={webhooks.data || []}
       />
-      <AddWebhookButton authToken={authToken} instanceUrl={instanceUrl} />
+
+      <div className="mt-4 flex justify-end">
+        <AddWebhookButton authToken={authToken} instanceUrl={instanceUrl} />
+      </div>
     </div>
   );
-};
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/webhooks/components/webhooks-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/webhooks/components/webhooks-table.tsx
index 94693a0bcee..e799982647f 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/webhooks/components/webhooks-table.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/webhooks/components/webhooks-table.tsx
@@ -1,36 +1,30 @@
-import {
-  Flex,
-  FormControl,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Tooltip,
-  type UseDisclosureReturn,
-  useDisclosure,
-} from "@chakra-ui/react";
 import { createColumnHelper } from "@tanstack/react-table";
-import { Card } from "chakra/card";
-import { FormLabel } from "chakra/form";
-import { Text } from "chakra/text";
 import { format, formatDistanceToNowStrict } from "date-fns";
-import { MailQuestionIcon, TrashIcon } from "lucide-react";
+import { ForwardIcon, RotateCcwIcon, TrashIcon } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { TWTable } from "@/components/blocks/TWTable";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
-import { FormItem } from "@/components/ui/form";
+import { PlainTextCodeBlock } from "@/components/ui/code/plaintext-code";
+import { DynamicHeight } from "@/components/ui/DynamicHeight";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Skeleton } from "@/components/ui/skeleton";
+import { ToolTipLabel } from "@/components/ui/tooltip";
 import {
   type EngineWebhook,
   useEngineDeleteWebhook,
   useEngineTestWebhook,
 } from "@/hooks/useEngine";
+import { parseError } from "@/utils/errorParser";
 import { shortenString } from "@/utils/usedapp-external";
 
 export function beautifyString(str: string): string {
@@ -40,26 +34,27 @@ export function beautifyString(str: string): string {
     .join(" ");
 }
 
-interface WebhooksTableProps {
-  instanceUrl: string;
-  webhooks: EngineWebhook[];
-  isPending: boolean;
-  isFetched: boolean;
-  authToken: string;
-}
-
 const columnHelper = createColumnHelper<EngineWebhook>();
 
 const columns = [
   columnHelper.accessor("name", {
     cell: (cell) => {
-      return <Text>{cell.getValue()}</Text>;
+      return (
+        <span className="text-foreground">{cell.getValue() || "N/A"}</span>
+      );
     },
     header: "Name",
   }),
   columnHelper.accessor("eventType", {
     cell: (cell) => {
-      return <Text>{beautifyString(cell.getValue())}</Text>;
+      return (
+        <Badge
+          variant="outline"
+          className="py-1 text-sm font-normal bg-background"
+        >
+          {beautifyString(cell.getValue())}
+        </Badge>
+      );
     },
     header: "Event Type",
   }),
@@ -71,6 +66,8 @@ const columns = [
           textToCopy={cell.getValue() || ""}
           textToShow={shortenString(cell.getValue() || "")}
           tooltip="Secret"
+          variant="ghost"
+          className="-translate-x-2 text-muted-foreground font-mono"
         />
       );
     },
@@ -80,9 +77,9 @@ const columns = [
     cell: (cell) => {
       const url = cell.getValue();
       return (
-        <Text isTruncated maxW={300}>
+        <span className="text-foreground truncate max-w-[300px] block">
           {url}
-        </Text>
+        </span>
       );
     },
     header: "URL",
@@ -96,35 +93,33 @@ const columns = [
 
       const date = new Date(value);
       return (
-        <Tooltip
-          bg="transparent"
-          borderRadius="md"
-          boxShadow="none"
-          label={
-            <Card bgColor="backgroundHighlight">
-              <Text>{format(date, "PP pp z")}</Text>
-            </Card>
-          }
-          shouldWrapChildren
-        >
-          <Text>{formatDistanceToNowStrict(date, { addSuffix: true })}</Text>
-        </Tooltip>
+        <ToolTipLabel label={format(date, "PP pp z")}>
+          <span className="text-foreground cursor-help">
+            {formatDistanceToNowStrict(date, { addSuffix: true })}
+          </span>
+        </ToolTipLabel>
       );
     },
     header: "Created At",
   }),
 ];
 
-export const WebhooksTable: React.FC<WebhooksTableProps> = ({
+export function WebhooksTable({
   instanceUrl,
   webhooks,
   isPending,
   isFetched,
   authToken,
-}) => {
+}: {
+  instanceUrl: string;
+  webhooks: EngineWebhook[];
+  isPending: boolean;
+  isFetched: boolean;
+  authToken: string;
+}) {
   const [selectedWebhook, setSelectedWebhook] = useState<EngineWebhook>();
-  const deleteDisclosure = useDisclosure();
-  const testDisclosure = useDisclosure();
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [testDialogOpen, setTestDialogOpen] = useState(false);
 
   const activeWebhooks = webhooks.filter((webhook) => webhook.active);
 
@@ -137,10 +132,10 @@ export const WebhooksTable: React.FC<WebhooksTableProps> = ({
         isPending={isPending}
         onMenuClick={[
           {
-            icon: <MailQuestionIcon className="size-4" />,
+            icon: <ForwardIcon className="size-4" />,
             onClick: (row) => {
               setSelectedWebhook(row);
-              testDisclosure.onOpen();
+              setTestDialogOpen(true);
             },
             text: "Test webhook",
           },
@@ -149,7 +144,7 @@ export const WebhooksTable: React.FC<WebhooksTableProps> = ({
             isDestructive: true,
             onClick: (row) => {
               setSelectedWebhook(row);
-              deleteDisclosure.onOpen();
+              setDeleteDialogOpen(true);
             },
             text: "Delete",
           },
@@ -157,114 +152,150 @@ export const WebhooksTable: React.FC<WebhooksTableProps> = ({
         title="webhooks"
       />
 
-      {selectedWebhook && deleteDisclosure.isOpen && (
-        <DeleteWebhookModal
+      {selectedWebhook && (
+        <DeleteWebhookDialog
           authToken={authToken}
-          disclosure={deleteDisclosure}
           instanceUrl={instanceUrl}
           webhook={selectedWebhook}
+          open={deleteDialogOpen}
+          onOpenChange={setDeleteDialogOpen}
         />
       )}
-      {selectedWebhook && testDisclosure.isOpen && (
-        <TestWebhookModal
+      {selectedWebhook && (
+        <TestWebhookDialog
           authToken={authToken}
-          disclosure={testDisclosure}
           instanceUrl={instanceUrl}
           webhook={selectedWebhook}
+          open={testDialogOpen}
+          onOpenChange={setTestDialogOpen}
         />
       )}
     </>
   );
-};
-
-interface DeleteWebhookModalProps {
-  webhook: EngineWebhook;
-  disclosure: UseDisclosureReturn;
-  instanceUrl: string;
-  authToken: string;
 }
-function DeleteWebhookModal({
+
+function DeleteWebhookDialog({
   webhook,
-  disclosure,
   instanceUrl,
   authToken,
-}: DeleteWebhookModalProps) {
+  open,
+  onOpenChange,
+}: {
+  webhook: EngineWebhook;
+  instanceUrl: string;
+  authToken: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
   const deleteWebhook = useEngineDeleteWebhook({
     authToken,
     instanceUrl,
   });
 
-  const onDelete = () => {
-    const promise = deleteWebhook.mutateAsync(
+  const onDelete = async () => {
+    await deleteWebhook.mutateAsync(
       { id: webhook.id },
       {
         onError: (error) => {
-          console.error(error);
+          toast.error("Failed to delete webhook", {
+            description: parseError(error),
+          });
         },
         onSuccess: () => {
-          disclosure.onClose();
+          onOpenChange(false);
+          toast.success("Webhook deleted successfully");
         },
       },
     );
-
-    toast.promise(promise, {
-      error: "Failed to delete webhook.",
-      success: "Successfully deleted webhook.",
-    });
   };
 
   return (
-    <Modal isCentered isOpen={disclosure.isOpen} onClose={disclosure.onClose}>
-      <ModalOverlay />
-      <ModalContent className="!bg-background rounded-lg border border-border">
-        <ModalHeader>Delete Webhook</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <div className="flex flex-col gap-4">
-            <Text>Are you sure you want to delete this webhook?</Text>
-            <FormControl>
-              <FormLabel>Name</FormLabel>
-              <Text>{webhook.name}</Text>
-            </FormControl>
-            <FormControl>
-              <FormLabel>URL</FormLabel>
-              <Text>{webhook.url}</Text>
-            </FormControl>
-            <FormControl>
-              <FormLabel>Created at</FormLabel>
-              <Text>
-                {format(new Date(webhook.createdAt ?? ""), "PP pp z")}
-              </Text>
-            </FormControl>
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="p-0 gap-0 overflow-hidden">
+        <DialogHeader className="p-4 lg:p-6">
+          <DialogTitle>Delete Webhook</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to delete this webhook?
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 px-4 lg:px-6 pb-8 overflow-hidden">
+          <div className="space-y-1">
+            <h3 className="text-sm font-medium text-foreground">Name</h3>
+            <span className="text-foreground text-sm">
+              {webhook.name || "N/A"}
+            </span>
+          </div>
+          <div className="space-y-1">
+            <h3 className="text-sm font-medium text-foreground">URL</h3>
+            <p className="text-foreground text-sm truncate">{webhook.url}</p>
           </div>
-        </ModalBody>
+          <div className="space-y-1">
+            <h3 className="text-sm font-medium text-foreground">Created at</h3>
+            <span className="text-foreground text-sm">
+              {format(new Date(webhook.createdAt ?? ""), "PP pp z")}
+            </span>
+          </div>
+        </div>
 
-        <ModalFooter as={Flex} gap={3}>
-          <Button onClick={disclosure.onClose} variant="outline">
+        <div className="flex gap-3 p-4 lg:p-6 bg-card border-t border-border justify-end ">
+          <Button onClick={() => onOpenChange(false)} variant="outline">
             Cancel
           </Button>
-          <Button onClick={onDelete} type="submit" variant="destructive">
+          <Button
+            onClick={onDelete}
+            type="submit"
+            variant="destructive"
+            disabled={deleteWebhook.isPending}
+            className="gap-2"
+          >
+            {deleteWebhook.isPending && <Spinner className="size-4" />}
             Delete
           </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+        </div>
+      </DialogContent>
+    </Dialog>
   );
 }
 
-interface TestWebhookModalProps {
+function TestWebhookDialog({
+  webhook,
+  instanceUrl,
+  authToken,
+  open,
+  onOpenChange,
+}: {
   webhook: EngineWebhook;
-  disclosure: UseDisclosureReturn;
   instanceUrl: string;
   authToken: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="gap-0 p-0 overflow-hidden">
+        <DialogHeader className="p-4 lg:p-6">
+          <DialogTitle>Test Webhook</DialogTitle>
+        </DialogHeader>
+
+        <TestWebhookDialogContent
+          authToken={authToken}
+          instanceUrl={instanceUrl}
+          webhook={webhook}
+        />
+      </DialogContent>
+    </Dialog>
+  );
 }
-function TestWebhookModal({
-  webhook,
-  disclosure,
-  instanceUrl,
-  authToken,
-}: TestWebhookModalProps) {
-  const { mutate: testWebhook, isPending } = useEngineTestWebhook({
+
+function TestWebhookDialogContent(props: {
+  webhook: EngineWebhook;
+  instanceUrl: string;
+  authToken: string;
+}) {
+  const { webhook, instanceUrl, authToken } = props;
+
+  const testWebhook = useEngineTestWebhook({
     authToken,
     instanceUrl,
   });
@@ -273,7 +304,7 @@ function TestWebhookModal({
   const [body, setBody] = useState<string | undefined>();
 
   const onTest = () => {
-    testWebhook(
+    testWebhook.mutate(
       { id: webhook.id },
       {
         onSuccess: (result) => {
@@ -285,36 +316,55 @@ function TestWebhookModal({
   };
 
   return (
-    <Modal isCentered isOpen={disclosure.isOpen} onClose={disclosure.onClose}>
-      <ModalOverlay />
-      <ModalContent className="!bg-background rounded-lg border border-border">
-        <ModalHeader>Test Webhook</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <div className="flex flex-col gap-4 pb-2">
-            <FormItem>
-              <FormLabel>URL</FormLabel>
-              <span className="font-mono">{webhook.url}</span>
-            </FormItem>
-
-            <Button disabled={isPending} onClick={onTest} type="submit">
-              {isPending && <Spinner className="mr-2 size-4" />}
-              Send Request
-            </Button>
+    <DynamicHeight>
+      <div className="overflow-hidden">
+        <div className="space-y-4 px-4 lg:px-6">
+          <div className="space-y-1">
+            <h3 className="text-sm font-medium text-foreground">URL</h3>
+            {/* <span className="font-mono text-foreground">{webhook.url}</span> */}
+            <PlainTextCodeBlock code={webhook.url} />
+          </div>
 
-            {status && (
-              <div>
-                <Badge variant={status <= 299 ? "success" : "destructive"}>
-                  {status}
-                </Badge>
+          {body && !testWebhook.isPending && (
+            <div className="space-y-2">
+              <div className="flex items-center gap-2">
+                <h3 className="text-sm font-medium text-foreground">
+                  Response
+                </h3>
+                {status && (
+                  <Badge variant={status <= 299 ? "success" : "destructive"}>
+                    {status}
+                  </Badge>
+                )}
               </div>
-            )}
-            <div className="max-h-[12rem] overflow-y-auto font-mono text-sm">
-              {body ?? "Send a request to see the response."}
+              <PlainTextCodeBlock
+                code={body}
+                scrollableClassName="max-h-[300px]"
+              />
             </div>
-          </div>
-        </ModalBody>
-      </ModalContent>
-    </Modal>
+          )}
+
+          {testWebhook.isPending && <Skeleton className="h-32 w-full" />}
+        </div>
+
+        <div className="flex justify-end p-4 lg:p-6 bg-card border-t border-border mt-8">
+          <Button
+            disabled={testWebhook.isPending}
+            onClick={onTest}
+            type="submit"
+            className="gap-2"
+          >
+            {testWebhook.isPending ? (
+              <Spinner className="size-4" />
+            ) : body ? (
+              <RotateCcwIcon className="size-4" />
+            ) : (
+              <ForwardIcon className="size-4" />
+            )}
+            {body ? "Send again" : "Send request"}
+          </Button>
+        </div>
+      </div>
+    </DynamicHeight>
   );
 }