diff --git a/apps/dashboard/src/@/components/blocks/FormFieldSetup.tsx b/apps/dashboard/src/@/components/blocks/FormFieldSetup.tsx
index 6e9fe8d2068..1c704b098c2 100644
--- a/apps/dashboard/src/@/components/blocks/FormFieldSetup.tsx
+++ b/apps/dashboard/src/@/components/blocks/FormFieldSetup.tsx
@@ -7,7 +7,7 @@ export function FormFieldSetup(props: {
   label: string;
   errorMessage: React.ReactNode | undefined;
   children: React.ReactNode;
-  tooltip: React.ReactNode | undefined;
+  tooltip?: React.ReactNode;
   isRequired: boolean;
 }) {
   return (
diff --git a/apps/dashboard/src/@/components/ui/input.tsx b/apps/dashboard/src/@/components/ui/input.tsx
index fee90047907..421d7f27625 100644
--- a/apps/dashboard/src/@/components/ui/input.tsx
+++ b/apps/dashboard/src/@/components/ui/input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background selection:bg-foreground selection:text-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}
diff --git a/apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx b/apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx
index c1a5640f4c4..08a77ab8c1d 100644
--- a/apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx
+++ b/apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx
@@ -259,7 +259,6 @@ export const ConfigureNetworkForm: React.FC<NetworkConfigFormProps> = ({
             htmlFor="name"
             label="Name"
             errorMessage={networkNameErrorMessage}
-            tooltip={undefined}
             isRequired
           >
             <Input
@@ -301,7 +300,6 @@ export const ConfigureNetworkForm: React.FC<NetworkConfigFormProps> = ({
             isRequired
             label="Currency Symbol"
             errorMessage={form.formState.errors.currencySymbol?.message}
-            tooltip={undefined}
             htmlFor="currency-symbol"
           >
             <Input
@@ -366,7 +364,6 @@ export const ConfigureNetworkForm: React.FC<NetworkConfigFormProps> = ({
             errorMessage={form.formState.errors.icon?.message}
             htmlFor="network-icon"
             label="Icon"
-            tooltip={undefined}
           >
             <div className="flex items-center gap-1">
               <ChainIcon size={20} ipfsSrc={form.watch("icon")} />
diff --git a/apps/dashboard/src/components/configure-networks/Form/ChainIdInput.tsx b/apps/dashboard/src/components/configure-networks/Form/ChainIdInput.tsx
index 758cc9f40b9..566a1e089a8 100644
--- a/apps/dashboard/src/components/configure-networks/Form/ChainIdInput.tsx
+++ b/apps/dashboard/src/components/configure-networks/Form/ChainIdInput.tsx
@@ -17,7 +17,6 @@ export const ChainIdInput: React.FC<{
           ? form.formState.errors.chainId?.message
           : undefined
       }
-      tooltip={undefined}
     >
       <Input
         disabled={disabled}
diff --git a/apps/dashboard/src/components/configure-networks/Form/RpcInput.tsx b/apps/dashboard/src/components/configure-networks/Form/RpcInput.tsx
index 1eed9742107..86e60b3af25 100644
--- a/apps/dashboard/src/components/configure-networks/Form/RpcInput.tsx
+++ b/apps/dashboard/src/components/configure-networks/Form/RpcInput.tsx
@@ -25,7 +25,6 @@ export const RpcInput: React.FC<{
       isRequired
       errorMessage={form.formState.errors.rpcUrl?.message}
       htmlFor="rpc-url"
-      tooltip={undefined}
       label="RPC URL"
     >
       <Input
diff --git a/apps/dashboard/src/components/engine/overview/create-backend-wallet-button.tsx b/apps/dashboard/src/components/engine/overview/create-backend-wallet-button.tsx
index f61f78ef712..819c72d6cb5 100644
--- a/apps/dashboard/src/components/engine/overview/create-backend-wallet-button.tsx
+++ b/apps/dashboard/src/components/engine/overview/create-backend-wallet-button.tsx
@@ -1,49 +1,41 @@
+"use client";
+
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
 import {
   type CreateBackendWalletInput,
   useEngineCreateBackendWallet,
   useEngineWalletConfig,
 } from "@3rdweb-sdk/react/hooks/useEngine";
-import {
-  Flex,
-  FormControl,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  useDisclosure,
-} from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
-import { useTxNotifications } from "hooks/useTxNotifications";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { Button, FormLabel, Text } from "tw-components";
+import { toast } from "sonner";
 
-interface CreateBackendWalletButtonProps {
+export function CreateBackendWalletButton(props: {
   instanceUrl: string;
-}
-
-export const CreateBackendWalletButton: React.FC<
-  CreateBackendWalletButtonProps
-> = ({ instanceUrl }) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
+}) {
+  const { instanceUrl } = props;
+  const [isOpen, setIsOpen] = useState(false);
   const { data: walletConfig } = useEngineWalletConfig(instanceUrl);
-  const { mutate: createBackendWallet } =
-    useEngineCreateBackendWallet(instanceUrl);
-  const { onSuccess, onError } = useTxNotifications(
-    "Wallet created successfully.",
-    "Failed to create wallet.",
-  );
+  const createWallet = useEngineCreateBackendWallet(instanceUrl);
   const trackEvent = useTrack();
   const form = useForm<CreateBackendWalletInput>();
 
   const onSubmit = async (data: CreateBackendWalletInput) => {
-    createBackendWallet(data, {
+    const promise = createWallet.mutateAsync(data, {
       onSuccess: () => {
-        onSuccess();
-        onClose();
+        setIsOpen(false);
         trackEvent({
           category: "engine",
           action: "create-backend-wallet",
@@ -52,7 +44,6 @@ export const CreateBackendWalletButton: React.FC<
         });
       },
       onError: (error) => {
-        onError(error);
         trackEvent({
           category: "engine",
           action: "create-backend-wallet",
@@ -62,6 +53,11 @@ export const CreateBackendWalletButton: React.FC<
         });
       },
     });
+
+    toast.promise(promise, {
+      success: "Wallet created successfully",
+      error: "Failed to create wallet",
+    });
   };
 
   const walletType =
@@ -73,43 +69,58 @@ export const CreateBackendWalletButton: React.FC<
 
   return (
     <>
-      <Button onClick={onOpen} colorScheme="primary">
-        Create
-      </Button>
-      <Modal isOpen={isOpen} onClose={onClose} isCentered>
-        <ModalOverlay />
-        <ModalContent className="!bg-background rounded-lg border border-border">
+      <Button onClick={() => setIsOpen(true)}>Create</Button>
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent
+          className="z-[10001] p-0"
+          dialogOverlayClassName="z-[10000]"
+        >
           <form onSubmit={form.handleSubmit(onSubmit)}>
-            <ModalHeader>Create {walletType} wallet</ModalHeader>
-            <ModalCloseButton />
-            <ModalBody>
+            <div className="p-6">
+              <DialogHeader className="mb-4">
+                <DialogTitle className="font-semibold text-2xl tracking-tight">
+                  Create {walletType} wallet
+                </DialogTitle>
+              </DialogHeader>
+
               <div className="flex flex-col gap-4">
-                <FormControl>
-                  <FormLabel>Wallet Type</FormLabel>
-                  <Text>{walletType}</Text>
-                </FormControl>
-                <FormControl>
-                  <FormLabel>Label</FormLabel>
+                <div>
+                  <p className="mb-1 text-sm">Wallet Type</p>
+                  <Badge className="text-sm" variant="outline">
+                    {walletType}
+                  </Badge>
+                </div>
+
+                <FormFieldSetup
+                  label="Label"
+                  errorMessage={
+                    form.getFieldState("label", form.formState).error?.message
+                  }
+                  htmlFor="wallet-label"
+                  isRequired={false}
+                >
                   <Input
+                    id="wallet-label"
                     type="text"
                     placeholder="Enter a descriptive label"
                     {...form.register("label")}
                   />
-                </FormControl>
+                </FormFieldSetup>
               </div>
-            </ModalBody>
+            </div>
 
-            <ModalFooter as={Flex} gap={3}>
-              <Button onClick={onClose} variant="ghost">
+            <DialogFooter className="mt-4 border-border border-t bg-muted/50 p-6">
+              <Button onClick={() => setIsOpen(false)} variant="outline">
                 Cancel
               </Button>
-              <Button type="submit" colorScheme="primary">
+              <Button type="submit" className="min-w-28 gap-2">
+                {createWallet.isPending && <Spinner className="size-4" />}
                 Create
               </Button>
-            </ModalFooter>
+            </DialogFooter>
           </form>
-        </ModalContent>
-      </Modal>
+        </DialogContent>
+      </Dialog>
     </>
   );
-};
+}
diff --git a/apps/dashboard/src/components/engine/overview/engine-overview.tsx b/apps/dashboard/src/components/engine/overview/engine-overview.tsx
index 6948f16f4bf..ce956b4c4fa 100644
--- a/apps/dashboard/src/components/engine/overview/engine-overview.tsx
+++ b/apps/dashboard/src/components/engine/overview/engine-overview.tsx
@@ -1,16 +1,17 @@
 "use client";
 
 import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import {
   useEngineBackendWallets,
   useEngineTransactions,
   useEngineWalletConfig,
 } from "@3rdweb-sdk/react/hooks/useEngine";
-import { Flex, FormControl, Switch } from "@chakra-ui/react";
 import { NetworkSelectorButton } from "components/selects/NetworkSelectorButton";
+import Link from "next/link";
 import { useState } from "react";
-import { FormLabel, Heading, Link, Text } from "tw-components";
 import { BackendWalletsTable } from "./backend-wallets-table";
 import { CreateBackendWalletButton } from "./create-backend-wallet-button";
 import { ImportBackendWalletButton } from "./import-backend-wallet-button";
@@ -23,107 +24,135 @@ interface EngineOverviewProps {
 export const EngineOverview: React.FC<EngineOverviewProps> = ({
   instanceUrl,
 }) => {
+  return (
+    <div>
+      <BackendWalletsSection instanceUrl={instanceUrl} />
+      <div className="h-14" />
+      <TransactionsSection instanceUrl={instanceUrl} />
+    </div>
+  );
+};
+
+function BackendWalletsSection(props: {
+  instanceUrl: string;
+}) {
+  const { instanceUrl } = props;
   const backendWallets = useEngineBackendWallets(instanceUrl);
   const { data: walletConfig } = useEngineWalletConfig(instanceUrl);
-  const [autoUpdate, setAutoUpdate] = useState<boolean>(true);
-  const transactionsQuery = useEngineTransactions(instanceUrl, autoUpdate);
 
   return (
-    <Flex flexDir="column" gap={12}>
-      <Flex flexDir="column" gap={4}>
-        <Flex flexDir="column" gap={4} justifyItems="flex-end">
-          <Flex justify="space-between" alignItems="center">
-            <Flex flexDir="column" gap={2}>
-              <Flex gap={3}>
-                <Heading size="title.sm">Backend Wallets</Heading>
-                {walletConfig?.type && (
-                  <ToolTipLabel
-                    label={
-                      <>
-                        This engine is configured to use{" "}
-                        {walletConfig.type === "aws-kms"
-                          ? "backend wallets secured by AWS KMS"
-                          : walletConfig.type === "gcp-kms"
-                            ? "backend wallets secured by GCP KMS"
-                            : "local backend wallets"}
-                        . You can change this in the Configuration tab.
-                      </>
-                    }
-                  >
-                    <div>
-                      <Badge variant="outline">
-                        {walletConfig.type.replace("-", " ")}
-                      </Badge>
-                    </div>
-                  </ToolTipLabel>
-                )}
-              </Flex>
-              <Text>
-                Engine performs blockchain actions using backend wallets you own
-                and manage.{" "}
-                <Link
-                  href="https://portal.thirdweb.com/infrastructure/engine/features/backend-wallets"
-                  color="primary.500"
-                  isExternal
-                >
-                  Learn more
-                </Link>
-              </Text>
-            </Flex>
-
-            <div className="flex flex-row gap-2">
-              <ImportBackendWalletButton instanceUrl={instanceUrl} />
-              <CreateBackendWalletButton instanceUrl={instanceUrl} />
-            </div>
-          </Flex>
+    <section>
+      <div className="flex flex-col items-start justify-between gap-5 lg:flex-row">
+        <div>
+          <div className="mb-0.5 flex items-center gap-3">
+            <h2 className="font-semibold text-2xl tracking-tight">
+              Backend Wallets
+            </h2>
+            {walletConfig?.type && (
+              <ToolTipLabel
+                label={
+                  <>
+                    This engine is configured to use{" "}
+                    {walletConfig.type === "aws-kms"
+                      ? "backend wallets secured by AWS KMS"
+                      : walletConfig.type === "gcp-kms"
+                        ? "backend wallets secured by GCP KMS"
+                        : "local backend wallets"}
+                    . You can change this in the Configuration tab.
+                  </>
+                }
+              >
+                <div>
+                  <Badge variant="outline" className="text-base">
+                    {walletConfig.type.replace("-", " ")}
+                  </Badge>
+                </div>
+              </ToolTipLabel>
+            )}
+          </div>
+          <p className="text-muted-foreground">
+            Engine performs blockchain actions using backend wallets you own and
+            manage.{" "}
+            <Link
+              href="https://portal.thirdweb.com/infrastructure/engine/features/backend-wallets"
+              className="text-link-foreground hover:text-foreground"
+              target="_blank"
+            >
+              Learn more
+            </Link>
+          </p>
+        </div>
 
-          <Flex flexDirection="row-reverse">
-            <Flex alignItems="center" gap={2}>
-              <Text>Show balance for</Text>
-              <div className="flex flex-row">
-                <NetworkSelectorButton />
-              </div>
-            </Flex>
-          </Flex>
-        </Flex>
+        <div className="flex flex-row gap-2 max-sm:w-full [&>*]:grow">
+          <ImportBackendWalletButton instanceUrl={instanceUrl} />
+          <CreateBackendWalletButton instanceUrl={instanceUrl} />
+        </div>
+      </div>
 
-        <BackendWalletsTable
-          instanceUrl={instanceUrl}
-          wallets={backendWallets.data ?? []}
-          isPending={backendWallets.isPending}
-          isFetched={backendWallets.isFetched}
-        />
-      </Flex>
-      <Flex flexDir="column" gap={4}>
-        <Flex flexDir="row" gap={2} justify="space-between">
-          <Flex flexDir="column" gap={2}>
-            <Heading size="title.sm">Transactions</Heading>
-            <Text>
-              View transactions sent from your backend wallets in the past 24
-              hours.
-            </Text>
-          </Flex>
+      <div className="h-4" />
 
+      <div className="flex justify-end">
+        <div className="flex items-center gap-2">
+          <span className="text-sm">Show balance for</span>
+          {/* TODO - Replace with simple network selector - there's no need for user to switch chain  */}
           <div className="flex flex-row">
-            <FormControl display="flex" alignItems="center">
-              <FormLabel htmlFor="auto-update" mb="0">
-                Auto-Update
-              </FormLabel>
-              <Switch
-                isChecked={autoUpdate}
-                onChange={() => setAutoUpdate((val) => !val)}
-                id="auto-update"
-              />
-            </FormControl>
+            <NetworkSelectorButton />
           </div>
-        </Flex>
-        <TransactionsTable
-          transactions={transactionsQuery.data?.transactions ?? []}
-          isPending={transactionsQuery.isPending}
-          isFetched={transactionsQuery.isFetched}
-          instanceUrl={instanceUrl}
-        />
-      </Flex>
-    </Flex>
+        </div>
+      </div>
+
+      <div className="h-4" />
+
+      <BackendWalletsTable
+        instanceUrl={instanceUrl}
+        wallets={backendWallets.data ?? []}
+        isPending={backendWallets.isPending}
+        isFetched={backendWallets.isFetched}
+      />
+    </section>
   );
-};
+}
+
+function TransactionsSection(props: {
+  instanceUrl: string;
+}) {
+  const { instanceUrl } = props;
+  const [autoUpdate, setAutoUpdate] = useState<boolean>(true);
+  const transactionsQuery = useEngineTransactions(instanceUrl, autoUpdate);
+
+  return (
+    <section>
+      <div className="flex flex-col gap-4 lg:flex-row lg:justify-between">
+        <div>
+          <h2 className="mb-0.5 font-semibold text-2xl tracking-tight">
+            Transactions
+          </h2>
+          <p className="text-muted-foreground">
+            View transactions sent from your backend wallets in the past 24
+            hours.
+          </p>
+        </div>
+
+        <div className="flex justify-end">
+          <div className="flex items-center gap-2">
+            <Label htmlFor="auto-update">Auto-Update</Label>
+            <Switch
+              checked={autoUpdate}
+              onCheckedChange={(v) => setAutoUpdate(!!v)}
+              id="auto-update"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="h-4" />
+
+      <TransactionsTable
+        transactions={transactionsQuery.data?.transactions ?? []}
+        isPending={transactionsQuery.isPending}
+        isFetched={transactionsQuery.isFetched}
+        instanceUrl={instanceUrl}
+      />
+    </section>
+  );
+}
diff --git a/apps/dashboard/src/components/engine/overview/import-backend-wallet-button.tsx b/apps/dashboard/src/components/engine/overview/import-backend-wallet-button.tsx
index 77a8de8de33..c0b0c31acad 100644
--- a/apps/dashboard/src/components/engine/overview/import-backend-wallet-button.tsx
+++ b/apps/dashboard/src/components/engine/overview/import-backend-wallet-button.tsx
@@ -1,41 +1,33 @@
+"use client";
+
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
 import {
   type ImportBackendWalletInput,
   useEngineImportBackendWallet,
   useEngineWalletConfig,
 } from "@3rdweb-sdk/react/hooks/useEngine";
-import {
-  Flex,
-  FormControl,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  useDisclosure,
-} from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
-import { useTxNotifications } from "hooks/useTxNotifications";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { Button, FormLabel } from "tw-components";
+import { toast } from "sonner";
 
-interface ImportBackendWalletButtonProps {
+export function ImportBackendWalletButton(props: {
   instanceUrl: string;
-}
-
-export const ImportBackendWalletButton: React.FC<
-  ImportBackendWalletButtonProps
-> = ({ instanceUrl }) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
+}) {
+  const { instanceUrl } = props;
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const { data: walletConfig } = useEngineWalletConfig(instanceUrl);
-  const { mutate: importBackendWallet } =
-    useEngineImportBackendWallet(instanceUrl);
-  const { onSuccess, onError } = useTxNotifications(
-    "Wallet imported successfully.",
-    "Failed to import wallet.",
-  );
+  const importWallet = useEngineImportBackendWallet(instanceUrl);
   const trackEvent = useTrack();
   const form = useForm<ImportBackendWalletInput>();
 
@@ -48,111 +40,174 @@ export const ImportBackendWalletButton: React.FC<
 
   return (
     <>
-      <Button onClick={onOpen} colorScheme="primary" variant="outline">
+      <Button onClick={() => setIsModalOpen(true)} variant="outline">
         Import
       </Button>
-      <Modal isOpen={isOpen} onClose={onClose} isCentered>
-        <ModalOverlay />
-        <ModalContent
-          className="!bg-background rounded-lg border border-border"
-          as="form"
-          onSubmit={form.handleSubmit((data) => {
-            importBackendWallet(data, {
-              onSuccess: () => {
-                onSuccess();
-                onClose();
-                trackEvent({
-                  category: "engine",
-                  action: "import-backend-wallet",
-                  label: "success",
-                  type: walletConfig?.type,
-                  instance: instanceUrl,
-                });
-              },
-              onError: (error) => {
-                onError(error);
-                trackEvent({
-                  category: "engine",
-                  action: "import-backend-wallet",
-                  label: "error",
-                  type: walletConfig?.type,
-                  instance: instanceUrl,
-                  error,
-                });
-              },
-            });
-          })}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent
+          className="z-[10001] p-0"
+          dialogOverlayClassName="z-[10000]"
         >
-          <ModalHeader>Import {walletType} wallet</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            {walletConfig?.type === "local" && (
-              <FormControl isRequired>
-                <FormLabel>Private key</FormLabel>
-                <Input
-                  placeholder="Your wallet private key"
-                  autoComplete="off"
-                  type="text"
-                  {...form.register("privateKey", { required: true })}
-                />
-              </FormControl>
-            )}
-            {walletConfig?.type === "aws-kms" && (
-              <Flex flexDir="column" gap={4}>
-                <FormControl isRequired>
-                  <FormLabel>AWS KMS Key ID</FormLabel>
-                  <Input
-                    placeholder=""
-                    autoComplete="off"
-                    type="text"
-                    {...form.register("awsKmsKeyId", { required: true })}
-                  />
-                </FormControl>
-                <FormControl isRequired>
-                  <FormLabel>AWS KMS ARN</FormLabel>
-                  <Input
-                    placeholder=""
-                    autoComplete="off"
-                    type="text"
-                    {...form.register("awsKmsArn", { required: true })}
-                  />
-                </FormControl>
-              </Flex>
-            )}
-            {walletConfig?.type === "gcp-kms" && (
-              <Flex flexDir="column" gap={4}>
-                <FormControl isRequired>
-                  <FormLabel>GCP KMS Key ID</FormLabel>
-                  <Input
-                    placeholder=""
-                    autoComplete="off"
-                    type="text"
-                    {...form.register("gcpKmsKeyId", { required: true })}
-                  />
-                </FormControl>
-                <FormControl isRequired>
-                  <FormLabel>GCP KMS Version ID</FormLabel>
+          <form
+            onSubmit={form.handleSubmit((data) => {
+              const promise = importWallet.mutateAsync(data, {
+                onSuccess: () => {
+                  setIsModalOpen(false);
+                  trackEvent({
+                    category: "engine",
+                    action: "import-backend-wallet",
+                    label: "success",
+                    type: walletConfig?.type,
+                    instance: instanceUrl,
+                  });
+                },
+                onError: (error) => {
+                  trackEvent({
+                    category: "engine",
+                    action: "import-backend-wallet",
+                    label: "error",
+                    type: walletConfig?.type,
+                    instance: instanceUrl,
+                    error,
+                  });
+                },
+              });
+
+              toast.promise(promise, {
+                success: "Wallet imported successfully",
+                error: "Failed to import wallet",
+              });
+            })}
+          >
+            <div className="p-6">
+              <DialogHeader className="mb-5">
+                <DialogTitle className="font-semibold text-2xl tracking-tight">
+                  Import {walletType} wallet
+                </DialogTitle>
+              </DialogHeader>
+
+              {walletConfig?.type === "local" && (
+                <FormFieldSetup
+                  htmlFor="privateKey"
+                  label="Private key"
+                  errorMessage={
+                    form.getFieldState("privateKey", form.formState).error
+                      ?.message
+                  }
+                  isRequired
+                >
                   <Input
-                    placeholder=""
+                    id="privateKey"
+                    placeholder="Your wallet private key"
                     autoComplete="off"
                     type="text"
-                    {...form.register("gcpKmsKeyVersionId", { required: true })}
+                    {...form.register("privateKey", {
+                      required: true,
+                      // TODO: add private key validation here
+                    })}
                   />
-                </FormControl>
-              </Flex>
-            )}
-          </ModalBody>
+                </FormFieldSetup>
+              )}
+
+              {walletConfig?.type === "aws-kms" && (
+                <div className="flex flex-col gap-4">
+                  <FormFieldSetup
+                    label="AWS KMS Key ID"
+                    isRequired
+                    errorMessage={
+                      form.getFieldState("awsKmsKeyId", form.formState).error
+                        ?.message
+                    }
+                    htmlFor="awsKmsKeyId"
+                  >
+                    <Input
+                      id="awsKmsKeyId"
+                      placeholder=""
+                      autoComplete="off"
+                      type="text"
+                      {...form.register("awsKmsKeyId", { required: true })}
+                    />
+                  </FormFieldSetup>
+
+                  <FormFieldSetup
+                    isRequired
+                    label="AWS KMS ARN"
+                    errorMessage={
+                      form.getFieldState("awsKmsArn", form.formState).error
+                        ?.message
+                    }
+                    htmlFor="awsKmsArn"
+                  >
+                    <Input
+                      id="awsKmsArn"
+                      placeholder=""
+                      autoComplete="off"
+                      type="text"
+                      {...form.register("awsKmsArn", { required: true })}
+                    />
+                  </FormFieldSetup>
+                </div>
+              )}
 
-          <ModalFooter as={Flex} gap={3}>
-            <Button type="button" onClick={onClose} variant="ghost">
-              Cancel
-            </Button>
-            <Button type="submit" colorScheme="primary">
-              Import
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
+              {walletConfig?.type === "gcp-kms" && (
+                <div className="flex flex-col gap-4">
+                  <FormFieldSetup
+                    htmlFor="gcpKmsKeyId"
+                    errorMessage={
+                      form.getFieldState("gcpKmsKeyId", form.formState).error
+                        ?.message
+                    }
+                    label="GCP KMS Key ID"
+                    isRequired
+                  >
+                    <Input
+                      id="gcpKmsKeyId"
+                      placeholder=""
+                      autoComplete="off"
+                      type="text"
+                      {...form.register("gcpKmsKeyId", { required: true })}
+                    />
+                  </FormFieldSetup>
+
+                  <FormFieldSetup
+                    label="GCP KMS Version ID"
+                    errorMessage={
+                      form.getFieldState("gcpKmsKeyVersionId", form.formState)
+                        .error?.message
+                    }
+                    htmlFor="gcpKmsKeyVersionId"
+                    isRequired
+                  >
+                    <Input
+                      id="gcpKmsKeyVersionId"
+                      placeholder=""
+                      autoComplete="off"
+                      type="text"
+                      {...form.register("gcpKmsKeyVersionId", {
+                        required: true,
+                      })}
+                    />
+                  </FormFieldSetup>
+                </div>
+              )}
+            </div>
+
+            <DialogFooter className="mt-4 border-border border-t bg-muted/50 p-6">
+              <Button
+                type="button"
+                onClick={() => setIsModalOpen(false)}
+                variant="outline"
+              >
+                Cancel
+              </Button>
+              <Button type="submit" className="min-w-28 gap-2">
+                {importWallet.isPending && <Spinner className="size-4" />}
+                Import
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
     </>
   );
-};
+}