diff --git a/apps/dashboard/src/@/components/blocks/wallet-address.tsx b/apps/dashboard/src/@/components/blocks/wallet-address.tsx
index 94c90837c8d..b4c6e284752 100644
--- a/apps/dashboard/src/@/components/blocks/wallet-address.tsx
+++ b/apps/dashboard/src/@/components/blocks/wallet-address.tsx
@@ -23,7 +23,6 @@ export function WalletAddress(props: {
   className?: string;
   iconClassName?: string;
   client: ThirdwebClient;
-  preventOpenOnFocus?: boolean;
 }) {
   // default back to zero address if no address provided
   const address = useMemo(() => props.address || ZERO_ADDRESS, [props.address]);
@@ -68,10 +67,7 @@ export function WalletAddress(props: {
 
   return (
     <HoverCard>
-      <HoverCardTrigger
-        asChild
-        tabIndex={props.preventOpenOnFocus ? -1 : undefined}
-      >
+      <HoverCardTrigger asChild tabIndex={-1}>
         <Button
           className={cn(
             "flex flex-row items-center gap-2 px-0",
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/token-viewer/token-viewer.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/token-viewer/token-viewer.tsx
index 74508b28c30..842dfddff63 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/token-viewer/token-viewer.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/token-viewer/token-viewer.tsx
@@ -269,7 +269,6 @@ function TokenInfoUI(props: {
                     className="h-auto py-0 text-sm"
                     client={props.contract.client}
                     iconClassName="hidden"
-                    preventOpenOnFocus
                   />
                 </div>
               ) : (
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/layout.tsx
index a111d4a197f..07989adf194 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/layout.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/layout.tsx
@@ -1,4 +1,3 @@
-import { ChakraProviderSetup } from "chakra/ChakraProviderSetup";
 import { getAuthToken } from "@/api/auth-token";
 import {
   Breadcrumb,
@@ -59,32 +58,30 @@ export default async function Layout(props: {
   }
 
   return (
-    <ChakraProviderSetup>
-      <div className="flex grow flex-col">
-        <EngineInstanceHeader
-          instance={instance}
-          rootPath={engineRootLayoutPath}
-          teamSlug={params.team_slug}
-        />
+    <div className="flex grow flex-col">
+      <EngineInstanceHeader
+        instance={instance}
+        rootPath={engineRootLayoutPath}
+        teamSlug={params.team_slug}
+      />
 
-        <EngineSidebarLayout
+      <EngineSidebarLayout
+        engineId={params.engineId}
+        projectSlug={params.project_slug}
+        teamSlug={params.team_slug}
+      >
+        <EnsureEnginePermission
+          accountId={account.id}
+          authToken={authToken}
           engineId={params.engineId}
+          instance={instance}
           projectSlug={params.project_slug}
           teamSlug={params.team_slug}
         >
-          <EnsureEnginePermission
-            accountId={account.id}
-            authToken={authToken}
-            engineId={params.engineId}
-            instance={instance}
-            projectSlug={params.project_slug}
-            teamSlug={params.team_slug}
-          >
-            <div>{props.children}</div>
-          </EnsureEnginePermission>
-        </EngineSidebarLayout>
-      </div>
-    </ChakraProviderSetup>
+          <div>{props.children}</div>
+        </EnsureEnginePermission>
+      </EngineSidebarLayout>
+    </div>
   );
 }
 
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/backend-wallets-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/backend-wallets-table.tsx
index a75dff6e339..a6d14072c62 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/backend-wallets-table.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/backend-wallets-table.tsx
@@ -404,7 +404,6 @@ function EditModalContent({
               <WalletAddress
                 address={backendWallet.address}
                 client={client}
-                preventOpenOnFocus
                 iconClassName="size-4"
                 className="h-auto py-0"
               />
@@ -609,7 +608,6 @@ const SendFundsModal = ({
                   address={fromWallet.address}
                   client={client}
                   iconClassName="size-4"
-                  preventOpenOnFocus
                   className="h-auto py-0"
                 />
               </div>
@@ -802,7 +800,6 @@ function DeleteModal({
             <WalletAddress
               address={backendWallet.address}
               client={client}
-              preventOpenOnFocus
               iconClassName="size-4"
               className="h-auto py-1"
             />
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/transaction-timeline.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/transaction-timeline.tsx
index 1d05d22d065..c25709edf71 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/transaction-timeline.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/transaction-timeline.tsx
@@ -278,7 +278,6 @@ function CancelTransactionButton({
               shortenAddress={false}
               className="h-auto py-1"
               iconClassName="size-4"
-              preventOpenOnFocus
             />
           </div>
 
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/relayers/components/add-relayer-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/relayers/components/add-relayer-button.tsx
index 7e431c4846c..386560c82de 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/relayers/components/add-relayer-button.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/relayers/components/add-relayer-button.tsx
@@ -1,33 +1,55 @@
-import {
-  Flex,
-  FormControl,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Select,
-  Textarea,
-  type UseDisclosureReturn,
-  useDisclosure,
-} from "@chakra-ui/react";
-import { Button } from "chakra/button";
-import { FormHelperText, FormLabel } from "chakra/form";
-import { CirclePlusIcon } from "lucide-react";
+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 type { ThirdwebClient } from "thirdweb";
 import { isAddress, shortenAddress } from "thirdweb/utils";
+import { z } from "zod";
 import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
 import { useAllChainsData } from "@/hooks/chains/allChains";
 import {
   type CreateRelayerInput,
   useEngineBackendWallets,
   useEngineCreateRelayer,
 } from "@/hooks/useEngine";
-import { useTxNotifications } from "@/hooks/useTxNotifications";
+import { parseError } from "@/utils/errorParser";
+
+const addRelayerFormSchema = z.object({
+  chainId: z.number().min(1, "Chain is required"),
+  backendWalletAddress: z.string().min(1, "Backend wallet is required"),
+  name: z.string().optional(),
+  allowedContractsRaw: z.string().optional(),
+  allowedForwardersRaw: z.string().optional(),
+});
+
+type AddRelayerFormData = z.infer<typeof addRelayerFormSchema>;
 
 interface AddRelayerButtonProps {
   instanceUrl: string;
@@ -35,58 +57,49 @@ interface AddRelayerButtonProps {
   client: ThirdwebClient;
 }
 
-export const AddRelayerButton: React.FC<AddRelayerButtonProps> = ({
+export function AddRelayerButton({
   instanceUrl,
   authToken,
   client,
-}) => {
-  const disclosure = useDisclosure();
+}: AddRelayerButtonProps) {
+  const [isOpen, setIsOpen] = useState(false);
 
   return (
     <>
-      <Button
-        colorScheme="primary"
-        leftIcon={<CirclePlusIcon className="size-6" />}
-        onClick={disclosure.onOpen}
-        size="sm"
-        variant="ghost"
-        w="fit-content"
-      >
+      <Button onClick={() => setIsOpen(true)} className="w-fit gap-2">
+        <PlusIcon className="size-4" />
         Add Relayer
       </Button>
 
-      {disclosure.isOpen && (
-        <AddModal
-          authToken={authToken}
-          client={client}
-          disclosure={disclosure}
-          instanceUrl={instanceUrl}
-        />
-      )}
+      <Dialog onOpenChange={setIsOpen} open={isOpen}>
+        <DialogContent className="p-0 overflow-hidden">
+          <AddModalContent
+            authToken={authToken}
+            client={client}
+            instanceUrl={instanceUrl}
+            isOpen={isOpen}
+            setIsOpen={setIsOpen}
+          />
+        </DialogContent>
+      </Dialog>
     </>
   );
-};
-
-export interface AddModalInput {
-  chainId: number;
-  backendWalletAddress: string;
-  name?: string;
-  allowedContractsRaw: string;
-  allowedForwardersRaw: string;
 }
 
-const AddModal = ({
+function AddModalContent({
   instanceUrl,
-  disclosure,
+  setIsOpen,
   authToken,
   client,
 }: {
   instanceUrl: string;
-  disclosure: UseDisclosureReturn;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
   authToken: string;
   client: ThirdwebClient;
-}) => {
-  const { mutate: createRelayer } = useEngineCreateRelayer({
+}) {
+  const { idToChain } = useAllChainsData();
+  const createRelayer = useEngineCreateRelayer({
     authToken,
     instanceUrl,
   });
@@ -94,121 +107,182 @@ const AddModal = ({
     authToken,
     instanceUrl,
   });
-  const { idToChain } = useAllChainsData();
-  const { onSuccess, onError } = useTxNotifications(
-    "Relayer created successfully.",
-    "Failed to create relayer.",
-  );
 
-  const form = useForm<AddModalInput>({
+  const form = useForm<AddRelayerFormData>({
+    resolver: zodResolver(addRelayerFormSchema),
     defaultValues: {
       chainId: 11155111, // sepolia chain id
     },
   });
 
-  const onSubmit = (data: AddModalInput) => {
+  const onSubmit = (data: AddRelayerFormData) => {
     const createRelayerData: CreateRelayerInput = {
-      allowedContracts: parseAddressListRaw(data.allowedContractsRaw),
-      allowedForwarders: parseAddressListRaw(data.allowedForwardersRaw),
+      allowedContracts: data.allowedContractsRaw
+        ? parseAddressListRaw(data.allowedContractsRaw)
+        : undefined,
+      allowedForwarders: data.allowedForwardersRaw
+        ? parseAddressListRaw(data.allowedForwardersRaw)
+        : undefined,
       backendWalletAddress: data.backendWalletAddress,
       chain: idToChain.get(data.chainId)?.slug ?? "unknown",
       name: data.name,
     };
 
-    createRelayer(createRelayerData, {
+    createRelayer.mutate(createRelayerData, {
       onError: (error) => {
-        onError(error);
+        toast.error("Failed to create relayer", {
+          description: parseError(error),
+        });
         console.error(error);
       },
       onSuccess: () => {
-        onSuccess();
-        disclosure.onClose();
+        toast.success("Relayer created successfully");
+        setIsOpen(false);
       },
     });
   };
 
   return (
-    <Modal isCentered isOpen={disclosure.isOpen} onClose={disclosure.onClose}>
-      <ModalOverlay />
-      <ModalContent
-        as="form"
-        className="!bg-background rounded-lg border border-border"
-        onSubmit={form.handleSubmit(onSubmit)}
-      >
-        <ModalHeader>Add Relayer</ModalHeader>
-        <ModalCloseButton />
-
-        <ModalBody>
-          <Flex flexDir="column" gap={4}>
-            <FormControl isRequired>
-              <FormLabel>Chain</FormLabel>
-              <SingleNetworkSelector
-                chainId={form.watch("chainId")}
-                client={client}
-                onChange={(val) => form.setValue("chainId", val)}
+    <div>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <div className="p-4 lg:p-6">
+            <DialogHeader className="mb-5">
+              <DialogTitle>Add Relayer</DialogTitle>
+            </DialogHeader>
+
+            <div className="space-y-4">
+              <FormField
+                control={form.control}
+                name="chainId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Chain</FormLabel>
+                    <FormControl>
+                      <SingleNetworkSelector
+                        chainId={field.value}
+                        disableDeprecated
+                        disableChainId
+                        className="bg-card"
+                        client={client}
+                        onChange={(val) => field.onChange(val)}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="backendWalletAddress"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Backend Wallet</FormLabel>
+                    <FormControl>
+                      <Select
+                        onValueChange={field.onChange}
+                        value={field.value}
+                      >
+                        <SelectTrigger className="bg-card">
+                          <SelectValue placeholder="Select a backend wallet to use as a relayer" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {backendWallets?.map((wallet) => (
+                            <SelectItem
+                              key={wallet.address}
+                              value={wallet.address}
+                            >
+                              {shortenAddress(wallet.address)}
+                              {wallet.label && ` (${wallet.label})`}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
-            </FormControl>
-            <FormControl isRequired>
-              <FormLabel>Backend Wallet</FormLabel>
-              <Select
-                {...form.register("backendWalletAddress", { required: true })}
-              >
-                <option disabled hidden selected value="">
-                  Select a backend wallet to use as a relayer
-                </option>
-                {backendWallets?.map((wallet) => (
-                  <option key={wallet.address} value={wallet.address}>
-                    {shortenAddress(wallet.address)}
-                    {wallet.label && ` (${wallet.label})`}
-                  </option>
-                ))}
-              </Select>
-            </FormControl>
-            <FormControl>
-              <FormLabel>Label</FormLabel>
-              <Input
-                placeholder="Enter a description for this relayer"
-                type="text"
-                {...form.register("name")}
+
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Label</FormLabel>
+                    <FormControl>
+                      <Input
+                        className="bg-card"
+                        placeholder="Enter a description for this relayer"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
-            </FormControl>
-            <FormControl>
-              <FormLabel>Allowed Contracts</FormLabel>
-              <Textarea
-                {...form.register("allowedContractsRaw")}
-                placeholder="Enter a comma or newline-separated list of contract addresses"
-                rows={4}
+
+              <FormField
+                control={form.control}
+                name="allowedContractsRaw"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Allowed Contracts</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        className="bg-card"
+                        placeholder="Enter a comma or newline-separated list of contract addresses"
+                        rows={3}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      Allow all contracts if omitted.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
-              <FormHelperText>Allow all contracts if omitted.</FormHelperText>
-            </FormControl>
-            <FormControl>
-              <FormLabel>Allowed Forwarders</FormLabel>
-              <Textarea
-                {...form.register("allowedForwardersRaw")}
-                placeholder="Enter a comma or newline-separated list of forwarder addresses"
-                rows={4}
+
+              <FormField
+                control={form.control}
+                name="allowedForwardersRaw"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Allowed Forwarders</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        className="bg-card"
+                        placeholder="Enter a comma or newline-separated list of forwarder addresses"
+                        rows={3}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      Allow all forwarders if omitted.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
-              <FormHelperText>Allow all forwarders if omitted.</FormHelperText>
-            </FormControl>
-          </Flex>
-        </ModalBody>
-
-        <ModalFooter as={Flex} gap={3}>
-          <Button onClick={disclosure.onClose} type="button" variant="ghost">
-            Cancel
-          </Button>
-          <Button
-            colorScheme="primary"
-            isDisabled={!form.formState.isValid}
-            type="submit"
-          >
-            Add
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+            </div>
+          </div>
+
+          <div className="flex justify-end gap-3 p-4 lg:p-6 border-t bg-card">
+            <Button variant="outline" onClick={() => setIsOpen(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" className="gap-2">
+              {createRelayer.isPending && <Spinner className="size-4" />}
+              Add
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
   );
-};
+}
 
 /**
  * Returns a list of valid addresses from a comma or newline-separated string.
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/relayers/components/engine-relayer.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/relayers/components/engine-relayer.tsx
index 38bc0b9b64b..d9746ce333d 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/relayers/components/engine-relayer.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/relayers/components/engine-relayer.tsx
@@ -1,46 +1,42 @@
 "use client";
 
-import { Heading } from "chakra/heading";
-import { Link } from "chakra/link";
-import { Text } from "chakra/text";
 import type { ThirdwebClient } from "thirdweb";
+import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import { useEngineRelayer } from "@/hooks/useEngine";
 import { AddRelayerButton } from "./add-relayer-button";
 import { RelayersTable } from "./relayers-table";
 
-interface EngineRelayerProps {
-  instanceUrl: string;
-  authToken: string;
-  client: ThirdwebClient;
-}
-
-export const EngineRelayer: React.FC<EngineRelayerProps> = ({
+export function EngineRelayer({
   instanceUrl,
   authToken,
   client,
-}) => {
+}: {
+  instanceUrl: string;
+  authToken: string;
+  client: ThirdwebClient;
+}) {
   const relayers = useEngineRelayer({
     authToken,
     instanceUrl,
   });
 
   return (
-    <div className="flex flex-col gap-4">
-      <div className="flex flex-col gap-2">
-        <Heading size="title.md">Relayers</Heading>
-        <Text>
-          Use relayers to submit transactions from your backend wallets on
-          behalf of your users.{" "}
-          <Link
-            color="primary.500"
-            href="https://portal.thirdweb.com/engine/features/relayers"
-            isExternal
-          >
-            Learn more about relayers
-          </Link>
-          .
-        </Text>
-      </div>
+    <div>
+      <h2 className="text-2xl font-semibold tracking-tight mb-1">Relayers</h2>
+      <p className="text-muted-foreground text-sm">
+        Use relayers to submit transactions from your backend wallets on behalf
+        of your users.{" "}
+        <UnderlineLink
+          href="https://portal.thirdweb.com/engine/features/relayers"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn more about relayers
+        </UnderlineLink>
+        .
+      </p>
+
+      <div className="h-4" />
 
       <RelayersTable
         authToken={authToken}
@@ -50,11 +46,16 @@ export const EngineRelayer: React.FC<EngineRelayerProps> = ({
         isPending={relayers.isPending}
         relayers={relayers.data || []}
       />
-      <AddRelayerButton
-        authToken={authToken}
-        client={client}
-        instanceUrl={instanceUrl}
-      />
+
+      <div className="h-4" />
+
+      <div className="flex justify-end">
+        <AddRelayerButton
+          authToken={authToken}
+          client={client}
+          instanceUrl={instanceUrl}
+        />
+      </div>
     </div>
   );
-};
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/relayers/components/relayers-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/relayers/components/relayers-table.tsx
index 9f1677103b0..54a7cd78c46 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/relayers/components/relayers-table.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/relayers/components/relayers-table.tsx
@@ -1,30 +1,43 @@
-import {
-  Flex,
-  FormControl,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Select,
-  Textarea,
-  type UseDisclosureReturn,
-  useDisclosure,
-} from "@chakra-ui/react";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { createColumnHelper } from "@tanstack/react-table";
-import { Button, Legacy_CopyButton, LinkButton } from "chakra/button";
-import { FormHelperText, FormLabel } from "chakra/form";
-import { Text } from "chakra/text";
 import { PencilIcon, Trash2Icon } from "lucide-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
+import { toast } from "sonner";
 import type { ThirdwebClient } from "thirdweb";
 import { shortenAddress } from "thirdweb/utils";
+import { z } from "zod";
 import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
 import { TWTable } from "@/components/blocks/TWTable";
+import { WalletAddress } from "@/components/blocks/wallet-address";
+import { Button } from "@/components/ui/button";
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
 import { useAllChainsData } from "@/hooks/chains/allChains";
 import {
   type EngineRelayer,
@@ -33,31 +46,39 @@ import {
   useEngineRevokeRelayer,
   useEngineUpdateRelayer,
 } from "@/hooks/useEngine";
-import { useTxNotifications } from "@/hooks/useTxNotifications";
 import { ChainIconClient } from "@/icons/ChainIcon";
-import { type AddModalInput, parseAddressListRaw } from "./add-relayer-button";
+import { parseError } from "@/utils/errorParser";
+import { parseAddressListRaw } from "./add-relayer-button";
 
-interface RelayersTableProps {
-  instanceUrl: string;
-  relayers: EngineRelayer[];
-  isPending: boolean;
-  isFetched: boolean;
-  authToken: string;
-  client: ThirdwebClient;
-}
+const editRelayerFormSchema = z.object({
+  chainId: z.number().min(1, "Chain is required"),
+  backendWalletAddress: z.string().min(1, "Backend wallet is required"),
+  name: z.string().optional(),
+  allowedContractsRaw: z.string(),
+  allowedForwardersRaw: z.string(),
+});
+
+type EditRelayerFormData = z.infer<typeof editRelayerFormSchema>;
 
 const columnHelper = createColumnHelper<EngineRelayer>();
 
-export const RelayersTable: React.FC<RelayersTableProps> = ({
+export function RelayersTable({
   instanceUrl,
   relayers,
   isPending,
   isFetched,
   authToken,
   client,
-}) => {
-  const editDisclosure = useDisclosure();
-  const removeDisclosure = useDisclosure();
+}: {
+  instanceUrl: string;
+  relayers: EngineRelayer[];
+  isPending: boolean;
+  isFetched: boolean;
+  authToken: string;
+  client: ThirdwebClient;
+}) {
+  const [editDialogOpen, setEditDialogOpen] = useState(false);
+  const [removeDialogOpen, setRemoveDialogOpen] = useState(false);
   const [selectedRelayer, setSelectedRelayer] = useState<EngineRelayer>();
   const { idToChain } = useAllChainsData();
 
@@ -66,14 +87,14 @@ export const RelayersTable: React.FC<RelayersTableProps> = ({
       cell: (cell) => {
         const chain = idToChain.get(Number.parseInt(cell.getValue()));
         return (
-          <Flex align="center" gap={2}>
+          <div className="flex items-center gap-2">
             <ChainIconClient
-              className="size-3"
+              className="size-5"
               client={client}
               src={chain?.icon?.url}
             />
-            <Text>{chain?.name ?? "N/A"}</Text>
-          </Flex>
+            <span>{chain?.name ?? "N/A"}</span>
+          </div>
         );
       },
       header: "Chain",
@@ -89,23 +110,18 @@ export const RelayersTable: React.FC<RelayersTableProps> = ({
         }
 
         return (
-          <LinkButton
-            fontFamily="mono"
-            href={`${explorer.url}/address/${backendWalletAddress}`}
-            isExternal
-            key={explorer.name}
-            size="xs"
-            variant="ghost"
-          >
-            {backendWalletAddress}
-          </LinkButton>
+          <WalletAddress
+            address={backendWalletAddress}
+            client={client}
+            iconClassName="size-5"
+          />
         );
       },
       header: "Backend Wallet",
     }),
     columnHelper.accessor("name", {
       cell: (cell) => {
-        return <Text>{cell.getValue()}</Text>;
+        return <span>{cell.getValue()}</span>;
       },
       header: "Label",
     }),
@@ -118,7 +134,7 @@ export const RelayersTable: React.FC<RelayersTableProps> = ({
             : allowedContracts.length === 1
               ? `${allowedContracts.length} address`
               : `${allowedContracts.length} addresses`;
-        return <Text>{value}</Text>;
+        return <span>{value}</span>;
       },
       header: "Allowed Contracts",
     }),
@@ -131,7 +147,7 @@ export const RelayersTable: React.FC<RelayersTableProps> = ({
             : allowedForwarders.length === 1
               ? `${allowedForwarders.length} address`
               : `${allowedForwarders.length} addresses`;
-        return <Text>{value}</Text>;
+        return <span>{value}</span>;
       },
       header: "Allowed Forwarders",
     }),
@@ -139,7 +155,17 @@ export const RelayersTable: React.FC<RelayersTableProps> = ({
       cell: (cell) => {
         const id = cell.getValue();
         const url = `${instanceUrl}relayer/${id}`;
-        return <Legacy_CopyButton aria-label="Copy to clipboard" value={url} />;
+
+        return (
+          <CopyTextButton
+            copyIconPosition="right"
+            className="-translate-x-1.5"
+            variant="ghost"
+            textToCopy={url}
+            textToShow={`${url.slice(0, 20)}${url.length > 20 ? "..." : ""}`}
+            tooltip="Copy URL"
+          />
+        );
       },
       header: "URL",
     }),
@@ -157,7 +183,7 @@ export const RelayersTable: React.FC<RelayersTableProps> = ({
             icon: <PencilIcon className="size-4" />,
             onClick: (relayer) => {
               setSelectedRelayer(relayer);
-              editDisclosure.onOpen();
+              setEditDialogOpen(true);
             },
             text: "Edit",
           },
@@ -166,7 +192,7 @@ export const RelayersTable: React.FC<RelayersTableProps> = ({
             isDestructive: true,
             onClick: (relayer) => {
               setSelectedRelayer(relayer);
-              removeDisclosure.onOpen();
+              setRemoveDialogOpen(true);
             },
             text: "Remove",
           },
@@ -174,57 +200,62 @@ export const RelayersTable: React.FC<RelayersTableProps> = ({
         title="relayers"
       />
 
-      {selectedRelayer && editDisclosure.isOpen && (
-        <EditModal
-          authToken={authToken}
-          client={client}
-          disclosure={editDisclosure}
-          instanceUrl={instanceUrl}
-          relayer={selectedRelayer}
-        />
-      )}
-      {selectedRelayer && removeDisclosure.isOpen && (
-        <RemoveModal
-          authToken={authToken}
-          client={client}
-          disclosure={removeDisclosure}
-          instanceUrl={instanceUrl}
-          relayer={selectedRelayer}
-        />
+      {selectedRelayer && (
+        <>
+          <Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
+            <DialogContent className="p-0 overflow-hidden">
+              <EditDialogContent
+                authToken={authToken}
+                client={client}
+                instanceUrl={instanceUrl}
+                relayer={selectedRelayer}
+                setOpen={setEditDialogOpen}
+              />
+            </DialogContent>
+          </Dialog>
+
+          <Dialog open={removeDialogOpen} onOpenChange={setRemoveDialogOpen}>
+            <DialogContent className="p-0">
+              <RemoveDialogContent
+                authToken={authToken}
+                client={client}
+                instanceUrl={instanceUrl}
+                relayer={selectedRelayer}
+                setOpen={setRemoveDialogOpen}
+              />
+            </DialogContent>
+          </Dialog>
+        </>
       )}
     </>
   );
-};
+}
 
-const EditModal = ({
+function EditDialogContent({
   relayer,
-  disclosure,
+  setOpen,
   instanceUrl,
   authToken,
   client,
 }: {
   relayer: EngineRelayer;
-  disclosure: UseDisclosureReturn;
+  setOpen: (open: boolean) => void;
   instanceUrl: string;
   authToken: string;
   client: ThirdwebClient;
-}) => {
-  const { mutate: updateRelayer } = useEngineUpdateRelayer({
+}) {
+  const updateRelayer = useEngineUpdateRelayer({
     authToken,
     instanceUrl,
   });
-  const { data: backendWallets } = useEngineBackendWallets({
+  const backendWalletsQuery = useEngineBackendWallets({
     authToken,
     instanceUrl,
   });
   const { idToChain } = useAllChainsData();
 
-  const { onSuccess, onError } = useTxNotifications(
-    "Successfully updated relayer",
-    "Failed to update relayer",
-  );
-
-  const form = useForm<AddModalInput>({
+  const form = useForm<EditRelayerFormData>({
+    resolver: zodResolver(editRelayerFormSchema),
     defaultValues: {
       ...relayer,
       allowedContractsRaw: (relayer.allowedContracts ?? []).join("\n"),
@@ -233,7 +264,7 @@ const EditModal = ({
     },
   });
 
-  const onSubmit = (data: AddModalInput) => {
+  const onSubmit = (data: EditRelayerFormData) => {
     const updateRelayerData: UpdateRelayerInput = {
       allowedContracts: parseAddressListRaw(data.allowedContractsRaw),
       allowedForwarders: parseAddressListRaw(data.allowedForwardersRaw),
@@ -243,176 +274,253 @@ const EditModal = ({
       name: data.name,
     };
 
-    updateRelayer(updateRelayerData, {
+    updateRelayer.mutate(updateRelayerData, {
       onError: (error) => {
-        onError(error);
+        toast.error("Failed to update relayer", {
+          description: parseError(error),
+        });
         console.error(error);
       },
       onSuccess: () => {
-        onSuccess();
-        disclosure.onClose();
+        toast.success("Relayer updated successfully");
+        setOpen(false);
       },
     });
   };
 
   return (
-    <Modal isCentered isOpen={disclosure.isOpen} onClose={disclosure.onClose}>
-      <ModalOverlay />
-      <ModalContent
-        as="form"
-        className="!bg-background rounded-lg border border-border"
-        onSubmit={form.handleSubmit(onSubmit)}
-      >
-        <ModalHeader>Update Relayer</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <div className="flex flex-col gap-4">
-            <FormControl>
-              <FormLabel>Chain</FormLabel>
-              <SingleNetworkSelector
-                chainId={form.watch("chainId")}
-                client={client}
-                onChange={(val) => form.setValue("chainId", val)}
+    <div>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <div className="p-4 lg:p-6">
+            <DialogHeader className="mb-4">
+              <DialogTitle>Update Relayer</DialogTitle>
+            </DialogHeader>
+
+            <div className="space-y-4">
+              <FormField
+                control={form.control}
+                name="chainId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Chain</FormLabel>
+                    <FormControl>
+                      <SingleNetworkSelector
+                        chainId={field.value}
+                        disableDeprecated
+                        disableChainId
+                        className="bg-card"
+                        client={client}
+                        onChange={(val) => field.onChange(val)}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="backendWalletAddress"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Backend Wallet</FormLabel>
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <FormControl>
+                        <SelectTrigger className="bg-card">
+                          <SelectValue placeholder="Select a backend wallet" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {backendWalletsQuery.data?.map((wallet) => (
+                          <SelectItem
+                            key={wallet.address}
+                            value={wallet.address}
+                          >
+                            {shortenAddress(wallet.address)}
+                            {wallet.label && ` (${wallet.label})`}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
-            </FormControl>
-            <FormControl>
-              <FormLabel>Backend Wallet</FormLabel>
-              <Select
-                {...form.register("backendWalletAddress", { required: true })}
-              >
-                {backendWallets?.map((wallet) => (
-                  <option key={wallet.address} value={wallet.address}>
-                    {shortenAddress(wallet.address)}
-                    {wallet.label && ` (${wallet.label})`}
-                  </option>
-                ))}
-              </Select>
-            </FormControl>
-            <FormControl>
-              <FormLabel>Label</FormLabel>
-              <Input
-                placeholder="Enter a description for this relayer"
-                type="text"
-                {...form.register("name")}
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Label</FormLabel>
+                    <FormControl>
+                      <Input
+                        className="bg-card"
+                        placeholder="Enter a description for this relayer"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
-            </FormControl>
-            <FormControl>
-              <FormLabel>Allowed Contracts</FormLabel>
-              <Textarea
-                {...form.register("allowedContractsRaw")}
-                placeholder="Enter a comma or newline-separated list of contract addresses"
-                rows={4}
+              <FormField
+                control={form.control}
+                name="allowedContractsRaw"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Allowed Contracts</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        className="bg-card"
+                        placeholder="Enter a comma or newline-separated list of contract addresses"
+                        rows={2}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      Allow all contracts if omitted.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
-              <FormHelperText>Allow all contracts if omitted.</FormHelperText>
-            </FormControl>
-            <FormControl>
-              <FormLabel>Allowed Forwarders</FormLabel>
-              <Textarea
-                {...form.register("allowedForwardersRaw")}
-                placeholder="Enter a comma or newline-separated list of forwarder addresses"
-                rows={4}
+              <FormField
+                control={form.control}
+                name="allowedForwardersRaw"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Allowed Forwarders</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        className="bg-card"
+                        placeholder="Enter a comma or newline-separated list of forwarder addresses"
+                        rows={2}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      Allow all forwarders if omitted.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
-              <FormHelperText>Allow all forwarders if omitted.</FormHelperText>
-            </FormControl>
+            </div>
           </div>
-        </ModalBody>
 
-        <ModalFooter as={Flex} gap={3}>
-          <Button onClick={disclosure.onClose} type="button" variant="ghost">
-            Cancel
-          </Button>
-          <Button colorScheme="blue" type="submit">
-            Save
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+          <div className="flex gap-3 p-4 lg:p-6 border-t bg-card justify-end">
+            <Button onClick={() => setOpen(false)} variant="outline">
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              disabled={updateRelayer.isPending}
+              className="gap-2"
+            >
+              {updateRelayer.isPending && <Spinner className="size-4" />}
+              Save
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
   );
-};
+}
 
-const RemoveModal = ({
+function RemoveDialogContent({
   relayer,
-  disclosure,
+  setOpen,
   instanceUrl,
   authToken,
   client,
 }: {
   relayer: EngineRelayer;
-  disclosure: UseDisclosureReturn;
+  setOpen: (open: boolean) => void;
   instanceUrl: string;
   authToken: string;
   client: ThirdwebClient;
-}) => {
-  const { mutate: revokeRelayer } = useEngineRevokeRelayer({
+}) {
+  const revokeRelayer = useEngineRevokeRelayer({
     authToken,
     instanceUrl,
   });
 
-  const { onSuccess, onError } = useTxNotifications(
-    "Successfully removed relayer",
-    "Failed to remove relayer",
-  );
   const { idToChain } = useAllChainsData();
 
   const onClick = () => {
-    revokeRelayer(
+    revokeRelayer.mutate(
       { id: relayer.id },
       {
         onError: (error) => {
-          onError(error);
+          toast.error("Failed to remove relayer", {
+            description: parseError(error),
+          });
           console.error(error);
         },
         onSuccess: () => {
-          onSuccess();
-          disclosure.onClose();
+          toast.success("Relayer removed successfully");
+          setOpen(false);
         },
       },
     );
   };
 
   return (
-    <Modal isCentered isOpen={disclosure.isOpen} onClose={disclosure.onClose}>
-      <ModalOverlay />
-      <ModalContent className="!bg-background rounded-lg border border-border">
-        <ModalHeader>Remove Relayer</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <div className="flex flex-col gap-4">
-            <Text>Are you sure you want to remove this relayer?</Text>
-            <FormControl>
-              <FormLabel>Chain</FormLabel>
-              <Flex align="center" gap={2}>
-                <ChainIconClient
-                  className="size-3"
-                  client={client}
-                  src={
-                    idToChain.get(Number.parseInt(relayer.chainId))?.icon?.url
-                  }
-                />
-                <Text>
-                  {idToChain.get(Number.parseInt(relayer.chainId))?.name}
-                </Text>
-              </Flex>
-            </FormControl>
-            <FormControl>
-              <FormLabel>Backend Wallet</FormLabel>
-              <Text>{relayer.backendWalletAddress}</Text>
-            </FormControl>
-            <FormControl>
-              <FormLabel>Label</FormLabel>
-              <Text>{relayer.name ?? <em>N/A</em>}</Text>
-            </FormControl>
+    <div>
+      <div className="p-4 lg:p-6">
+        <DialogHeader className="mb-5">
+          <DialogTitle>Remove Relayer</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to remove this relayer?
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-5">
+          <div className="space-y-2">
+            <h3 className="text-sm font-medium">Chain</h3>
+            <div className="flex items-center gap-2">
+              <ChainIconClient
+                className="size-3.5"
+                client={client}
+                src={idToChain.get(Number.parseInt(relayer.chainId))?.icon?.url}
+              />
+              <span className="text-sm">
+                {idToChain.get(Number.parseInt(relayer.chainId))?.name}
+              </span>
+            </div>
           </div>
-        </ModalBody>
-        <ModalFooter as={Flex} gap={3}>
-          <Button onClick={disclosure.onClose} type="button" variant="ghost">
-            Cancel
-          </Button>
-          <Button colorScheme="red" onClick={onClick} type="submit">
-            Remove
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+
+          <div className="space-y-2">
+            <h3 className="text-sm font-medium">Backend Wallet</h3>
+            <WalletAddress
+              address={relayer.backendWalletAddress}
+              client={client}
+              iconClassName="size-3.5"
+              className="h-auto py-0"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <h3 className="text-sm font-medium">Label</h3>
+            <span className="text-sm">{relayer.name ?? <em>N/A</em>}</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex gap-3 p-4 lg:p-6 border-t bg-card justify-end rounded-b-lg">
+        <Button onClick={() => setOpen(false)} variant="outline">
+          Cancel
+        </Button>
+        <Button
+          onClick={onClick}
+          variant="destructive"
+          className="gap-2"
+          disabled={revokeRelayer.isPending}
+        >
+          {revokeRelayer.isPending && <Spinner className="size-4" />}
+          Remove
+        </Button>
+      </div>
+    </div>
   );
-};
+}