diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/import/EngineImportPage.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/import/EngineImportPage.tsx
index 478e773efd6..4fb245b7a77 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/import/EngineImportPage.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/import/EngineImportPage.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { FormControl } from "@chakra-ui/react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation } from "@tanstack/react-query";
 import { CircleAlertIcon, DownloadIcon, ExternalLinkIcon } from "lucide-react";
@@ -12,6 +11,7 @@ import { apiServerProxy } from "@/actions/proxies";
 import { Button } from "@/components/ui/button";
 import {
   Form,
+  FormControl,
   FormField,
   FormItem,
   FormLabel,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx
index cde5a34614a..4cf61d3ee53 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx
@@ -1,33 +1,28 @@
-import {
-  Flex,
-  FormControl,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  type UseDisclosureReturn,
-  useDisclosure,
-} from "@chakra-ui/react";
 import { createColumnHelper } from "@tanstack/react-table";
-import { Button } from "chakra/button";
-import { FormLabel } from "chakra/form";
-import { Text } from "chakra/text";
 import { PencilIcon, Trash2Icon } from "lucide-react";
 import { useMemo, useState } from "react";
+import { toast } from "sonner";
 import type { ThirdwebClient } from "thirdweb";
 import { TWTable } from "@/components/blocks/TWTable";
 import { WalletAddress } from "@/components/blocks/wallet-address";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
 import {
   type AccessToken,
   useEngineRevokeAccessToken,
   useEngineUpdateAccessToken,
 } from "@/hooks/useEngine";
-import { useTxNotifications } from "@/hooks/useTxNotifications";
 import { toDateTimeLocal } from "@/utils/date-utils";
+import { parseError } from "@/utils/errorParser";
 
 interface AccessTokensTableProps {
   instanceUrl: string;
@@ -40,36 +35,32 @@ interface AccessTokensTableProps {
 
 const columnHelper = createColumnHelper<AccessToken>();
 
-export const AccessTokensTable: React.FC<AccessTokensTableProps> = ({
+export function AccessTokensTable({
   instanceUrl,
   accessTokens,
   isPending,
   isFetched,
   authToken,
   client,
-}) => {
-  const editDisclosure = useDisclosure();
-  const removeDisclosure = useDisclosure();
+}: AccessTokensTableProps) {
+  const [editOpen, setEditOpen] = useState(false);
+  const [removeOpen, setRemoveOpen] = useState(false);
   const [selectedAccessToken, setSelectedAccessToken] = useState<AccessToken>();
 
   const columns = useMemo(() => {
     return [
       columnHelper.accessor("tokenMask", {
-        cell: (cell) => {
-          return (
-            <p className="py-3 font-mono text-foreground">{cell.getValue()}</p>
-          );
-        },
+        cell: (cell) => (
+          <p className="py-3 font-mono text-foreground">{cell.getValue()}</p>
+        ),
         header: "Access Token",
       }),
       columnHelper.accessor("label", {
-        cell: (cell) => {
-          return (
-            <Text isTruncated maxW={300}>
-              {cell.getValue()}
-            </Text>
-          );
-        },
+        cell: (cell) => (
+          <span className="truncate max-w-[300px] block">
+            {cell.getValue()}
+          </span>
+        ),
         header: "Label",
       }),
       columnHelper.accessor("walletAddress", {
@@ -82,11 +73,8 @@ export const AccessTokensTable: React.FC<AccessTokensTableProps> = ({
       columnHelper.accessor("createdAt", {
         cell: (cell) => {
           const value = cell.getValue();
-
-          if (!value) {
-            return;
-          }
-          return <Text>{toDateTimeLocal(value)}</Text>;
+          if (!value) return null;
+          return <span>{toDateTimeLocal(value)}</span>;
         },
         header: "Created At",
       }),
@@ -105,7 +93,7 @@ export const AccessTokensTable: React.FC<AccessTokensTableProps> = ({
             icon: <PencilIcon className="size-4" />,
             onClick: (accessToken) => {
               setSelectedAccessToken(accessToken);
-              editDisclosure.onOpen();
+              setEditOpen(true);
             },
             text: "Edit",
           },
@@ -114,181 +102,201 @@ export const AccessTokensTable: React.FC<AccessTokensTableProps> = ({
             isDestructive: true,
             onClick: (accessToken) => {
               setSelectedAccessToken(accessToken);
-              removeDisclosure.onOpen();
+              setRemoveOpen(true);
             },
             text: "Delete",
           },
         ]}
         title="access tokens"
       />
-
-      {selectedAccessToken && editDisclosure.isOpen && (
+      {selectedAccessToken && (
         <EditModal
+          open={editOpen}
+          onOpenChange={setEditOpen}
           accessToken={selectedAccessToken}
           authToken={authToken}
-          disclosure={editDisclosure}
           instanceUrl={instanceUrl}
         />
       )}
-      {selectedAccessToken && removeDisclosure.isOpen && (
+      {selectedAccessToken && (
         <RemoveModal
+          open={removeOpen}
+          onOpenChange={setRemoveOpen}
           accessToken={selectedAccessToken}
           authToken={authToken}
-          disclosure={removeDisclosure}
           instanceUrl={instanceUrl}
         />
       )}
     </>
   );
-};
+}
 
-const EditModal = ({
+function EditModal({
+  open,
+  onOpenChange,
   accessToken,
-  disclosure,
   instanceUrl,
   authToken,
 }: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
   accessToken: AccessToken;
-  disclosure: UseDisclosureReturn;
   instanceUrl: string;
   authToken: string;
-}) => {
-  const { mutate: updateAccessToken } = useEngineUpdateAccessToken({
+}) {
+  const updateToken = useEngineUpdateAccessToken({
     authToken,
     instanceUrl,
   });
 
-  const { onSuccess, onError } = useTxNotifications(
-    "Successfully updated access token",
-    "Failed to update access token",
-  );
-
   const [label, setLabel] = useState(accessToken.label ?? "");
-
   const onClick = () => {
-    updateAccessToken(
+    updateToken.mutate(
       {
         id: accessToken.id,
         label,
       },
       {
         onError: (error) => {
-          onError(error);
+          toast.error("Failed to update access token", {
+            description: parseError(error),
+          });
           console.error(error);
         },
         onSuccess: () => {
-          onSuccess();
-          disclosure.onClose();
+          toast.success("Successfully updated access token");
+          onOpenChange(false);
         },
       },
     );
   };
-
   return (
-    <Modal isCentered isOpen={disclosure.isOpen} onClose={disclosure.onClose}>
-      <ModalOverlay />
-      <ModalContent className="!bg-background rounded-lg border border-border">
-        <ModalHeader>Update Access Token</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <div className="flex flex-col gap-4">
-            <FormControl>
-              <FormLabel>Access Token</FormLabel>
-              <Text>{accessToken.tokenMask}</Text>
-            </FormControl>
-            <FormControl>
-              <FormLabel>Label</FormLabel>
-              <Input
-                onChange={(e) => setLabel(e.target.value)}
-                placeholder="Enter a description for this access token"
-                type="text"
-                value={label}
-              />
-            </FormControl>
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="p-0 overflow-hidden gap-0">
+        <DialogHeader className="p-4 lg:p-6">
+          <DialogTitle>Update Access Token</DialogTitle>
+        </DialogHeader>
+
+        <div className="px-4 lg:px-6 space-y-5">
+          <div className="space-y-1.5">
+            <h3 className="text-sm font-medium">Access Token </h3>
+            <div className="font-mono text-sm text-muted-foreground">
+              {accessToken.tokenMask}
+            </div>
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="edit-label">Label</Label>
+            <Input
+              id="edit-label"
+              onChange={(e) => setLabel(e.target.value)}
+              placeholder="Enter a description for this access token"
+              className="bg-card"
+              type="text"
+              value={label}
+            />
           </div>
-        </ModalBody>
+        </div>
 
-        <ModalFooter as={Flex} gap={3}>
-          <Button onClick={disclosure.onClose} type="button" variant="ghost">
+        <div className="flex justify-end gap-3 border-t p-4 lg:p-6 mt-8 bg-card">
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            type="button"
+          >
             Cancel
           </Button>
-          <Button colorScheme="blue" onClick={onClick} type="submit">
+          <Button onClick={onClick} type="submit" className="gap-2">
+            {updateToken.isPending && <Spinner className="size-4" />}
             Save
           </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+        </div>
+      </DialogContent>
+    </Dialog>
   );
-};
+}
 
-const RemoveModal = ({
+function RemoveModal({
+  open,
+  onOpenChange,
   accessToken,
-  disclosure,
   instanceUrl,
   authToken,
 }: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
   accessToken: AccessToken;
-  disclosure: UseDisclosureReturn;
   instanceUrl: string;
   authToken: string;
-}) => {
-  const { mutate: deleteAccessToken } = useEngineRevokeAccessToken({
+}) {
+  const deleteToken = useEngineRevokeAccessToken({
     authToken,
     instanceUrl,
   });
 
-  const { onSuccess, onError } = useTxNotifications(
-    "Successfully deleted access token",
-    "Failed to delete access token",
-  );
-
   const onClick = () => {
-    deleteAccessToken(
+    deleteToken.mutate(
       {
         id: accessToken.id,
       },
       {
         onError: (error) => {
-          onError(error);
+          toast.error("Failed to delete access token", {
+            description: parseError(error),
+          });
           console.error(error);
         },
         onSuccess: () => {
-          onSuccess();
-          disclosure.onClose();
+          toast.success("Successfully deleted access token");
+          onOpenChange(false);
         },
       },
     );
   };
-
   return (
-    <Modal isCentered isOpen={disclosure.isOpen} onClose={disclosure.onClose}>
-      <ModalOverlay />
-      <ModalContent className="!bg-background rounded-lg border border-border">
-        <ModalHeader>Delete Access Token</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <div className="flex flex-col gap-4">
-            <Text>Are you sure you want to delete this access token?</Text>
-            <FormControl>
-              <FormLabel>Access Token</FormLabel>
-              <Text>{accessToken.tokenMask}</Text>
-            </FormControl>
-            <FormControl>
-              <FormLabel>Label</FormLabel>
-              <Text>{accessToken.label ?? <em>N/A</em>}</Text>
-            </FormControl>
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="p-0 overflow-hidden gap-0">
+        <DialogHeader className="p-4 lg:p-6">
+          <DialogTitle>Delete access token</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to delete this access token?
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="px-4 lg:px-6 space-y-5">
+          <div className="space-y-1.5">
+            <h3 className="text-sm font-medium">Access Token </h3>
+            <div className="font-mono text-sm text-muted-foreground">
+              {accessToken.tokenMask}
+            </div>
           </div>
-        </ModalBody>
+          <div className="space-y-1.5">
+            <Label>Label</Label>
+            <div className="text-sm text-muted-foreground">
+              {accessToken.label ?? <span> No Label </span>}
+            </div>
+          </div>
+        </div>
 
-        <ModalFooter as={Flex} gap={3}>
-          <Button onClick={disclosure.onClose} type="button" variant="ghost">
+        <div className="flex justify-end gap-3 border-t p-4 lg:p-6 mt-8 bg-card">
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            type="button"
+          >
             Cancel
           </Button>
-          <Button colorScheme="red" onClick={onClick} type="submit">
+          <Button
+            variant="destructive"
+            onClick={onClick}
+            type="submit"
+            className="gap-2"
+          >
+            {deleteToken.isPending && <Spinner className="size-4" />}
             Delete
           </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+        </div>
+      </DialogContent>
+    </Dialog>
   );
-};
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/add-access-token-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/add-access-token-button.tsx
index 9e1b02c7064..50ffda101d7 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/add-access-token-button.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/add-access-token-button.tsx
@@ -1,111 +1,102 @@
-import {
-  Flex,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  useDisclosure,
-} from "@chakra-ui/react";
-import { Button } from "chakra/button";
-import { Text } from "chakra/text";
-import { CirclePlusIcon } from "lucide-react";
+import { PlusIcon } from "lucide-react";
 import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
 import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
 import { PlainTextCodeBlock } from "@/components/ui/code/plaintext-code";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { useEngineCreateAccessToken } from "@/hooks/useEngine";
-import { useTxNotifications } from "@/hooks/useTxNotifications";
+import { parseError } from "@/utils/errorParser";
 
-interface AddAccessTokenButtonProps {
-  instanceUrl: string;
-  authToken: string;
-}
-
-export const AddAccessTokenButton: React.FC<AddAccessTokenButtonProps> = ({
+export function AddAccessTokenButton({
   instanceUrl,
   authToken,
-}) => {
-  const [accessToken, setAccessToken] = useState<string>("");
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const { mutate: createAccessToken } = useEngineCreateAccessToken({
+}: {
+  instanceUrl: string;
+  authToken: string;
+}) {
+  const [accessToken, setAccessToken] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  const createAccessToken = useEngineCreateAccessToken({
     authToken,
     instanceUrl,
   });
-
-  const [hasStoredToken, setHasStoredToken] = useState<boolean>(false);
-
-  const { onSuccess, onError } = useTxNotifications(
-    "Access token created successfully.",
-    "Failed to create Access Token.",
-  );
+  const [hasStoredToken, setHasStoredToken] = useState(false);
 
   return (
     <>
       <Button
-        colorScheme="primary"
-        leftIcon={<CirclePlusIcon className="size-6" />}
+        className="gap-2"
         onClick={() => {
-          createAccessToken(undefined, {
+          createAccessToken.mutate(undefined, {
             onError: (error) => {
-              onError(error);
+              toast.error("Failed to create access token", {
+                description: parseError(error),
+              });
               console.error(error);
             },
             onSuccess: (response) => {
-              onSuccess();
+              toast.success("Access token created successfully");
               setAccessToken(response.accessToken);
-              onOpen();
+              setIsOpen(true);
             },
           });
         }}
-        size="sm"
-        variant="ghost"
-        w="fit-content"
       >
+        {createAccessToken.isPending ? (
+          <Spinner className="size-4" />
+        ) : (
+          <PlusIcon className="size-4" />
+        )}
         Create Access Token
       </Button>
 
-      <Modal
-        closeOnEsc={false}
-        closeOnOverlayClick={false}
-        isCentered
-        isOpen={isOpen}
-        onClose={onClose}
+      <Dialog
+        open={isOpen}
+        onOpenChange={(open) => {
+          setIsOpen(open);
+          if (!open) setAccessToken("");
+        }}
       >
-        <ModalOverlay />
-        <ModalContent className="!bg-background rounded-lg border border-border">
-          <ModalHeader>Access token</ModalHeader>
-          <ModalBody as={Flex} flexDir="column" gap={4}>
-            <div className="flex flex-col gap-4">
-              <PlainTextCodeBlock code={accessToken} />
-              <Text color="red.500">
-                This access token will not be shown again.
-              </Text>
-              <CheckboxWithLabel>
-                <Checkbox
-                  checked={hasStoredToken}
-                  onCheckedChange={(val) => setHasStoredToken(!!val)}
-                />
-                <span>I have securely stored this access token.</span>
-              </CheckboxWithLabel>
-            </div>
-          </ModalBody>
+        <DialogContent className="p-0 gap-0 overflow-hidden">
+          <DialogHeader className="p-4 lg:p-6">
+            <DialogTitle>Access token</DialogTitle>
+            <DialogDescription>
+              This access token will not be shown again.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 overflow-hidden px-4 lg:px-6">
+            <PlainTextCodeBlock code={accessToken} className="max-w-full" />
+            <CheckboxWithLabel>
+              <Checkbox
+                checked={hasStoredToken}
+                onCheckedChange={(val) => setHasStoredToken(!!val)}
+              />
+              <span>I have securely stored this access token.</span>
+            </CheckboxWithLabel>
+          </div>
 
-          <ModalFooter as={Flex} gap={3}>
+          <div className="p-4 lg:p-6 border-t bg-card mt-8 flex justify-end">
             <Button
-              colorScheme="primary"
-              isDisabled={!hasStoredToken}
+              disabled={!hasStoredToken}
               onClick={() => {
-                onClose();
+                setIsOpen(false);
                 setAccessToken("");
               }}
-              type="submit"
             >
               Done
             </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
+          </div>
+        </DialogContent>
+      </Dialog>
     </>
   );
-};
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/add-keypair-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/add-keypair-button.tsx
index 78a69675f79..f88130eb48f 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/add-keypair-button.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/add-keypair-button.tsx
@@ -1,26 +1,27 @@
+import { InfoIcon, PlusIcon } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { CodeClient } from "@/components/ui/code/code.client";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
 import {
-  Alert,
-  Flex,
-  FormControl,
-  Input,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
   Select,
-  Textarea,
-  useDisclosure,
-} from "@chakra-ui/react";
-import { Button } from "chakra/button";
-import { FormLabel } from "chakra/form";
-import { Text } from "chakra/text";
-import { CirclePlusIcon } from "lucide-react";
-import { useState } from "react";
-import { PlainTextCodeBlock } from "@/components/ui/code/plaintext-code";
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
 import { type KeypairAlgorithm, useEngineAddKeypair } from "@/hooks/useEngine";
-import { useTxNotifications } from "@/hooks/useTxNotifications";
+import { parseError } from "@/utils/errorParser";
 
 const KEYPAIR_ALGORITHM_DETAILS: Record<
   KeypairAlgorithm,
@@ -52,168 +53,162 @@ const KEYPAIR_ALGORITHM_DETAILS: Record<
   },
 };
 
-interface AddKeypairButtonProps {
-  instanceUrl: string;
-  authToken: string;
-}
-
-export const AddKeypairButton: React.FC<AddKeypairButtonProps> = ({
+export function AddKeypairButton({
   instanceUrl,
   authToken,
-}) => {
-  const [publicKey, setPublicKey] = useState<string>("");
+}: {
+  instanceUrl: string;
+  authToken: string;
+}) {
+  const [publicKey, setPublicKey] = useState("");
   const [algorithm, setAlgorithm] = useState<KeypairAlgorithm>("ES256");
-  const [label, setLabel] = useState<string>("");
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const { mutateAsync: importKeypair } = useEngineAddKeypair({
+  const [label, setLabel] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  const importKeypairMutation = useEngineAddKeypair({
     authToken,
     instanceUrl,
   });
 
-  const { onSuccess, onError } = useTxNotifications(
-    "Public key added successfully.",
-    "Failed to add public key.",
-  );
-
   const onClick = async () => {
     try {
-      await importKeypair({
+      await importKeypairMutation.mutateAsync({
         algorithm,
         label,
         publicKey,
       });
-
-      onSuccess();
-
+      toast.success("Public key added successfully.");
       setPublicKey("");
-      onClose();
+      setIsOpen(false);
     } catch (error) {
-      onError(error);
+      toast.error("Failed to add public key.", {
+        description: parseError(error),
+      });
       console.error(error);
     }
   };
 
   return (
     <>
-      <Button
-        colorScheme="primary"
-        leftIcon={<CirclePlusIcon className="size-6" />}
-        onClick={onOpen}
-        size="sm"
-        variant="ghost"
-        w="fit-content"
-      >
-        Add Public Key
+      <Button className="w-fit gap-2" onClick={() => setIsOpen(true)}>
+        <PlusIcon className="size-4" /> Add Public Key
       </Button>
 
-      <Modal
-        closeOnEsc={false}
-        closeOnOverlayClick={false}
-        isCentered
-        isOpen={isOpen}
-        onClose={onClose}
-        size="2xl"
-      >
-        <ModalOverlay />
-        <ModalContent className="!bg-background rounded-lg border border-border">
-          <ModalHeader>Add Public Key</ModalHeader>
-          <ModalBody as={Flex} flexDir="column" gap={8}>
-            <FormControl>
-              <div className="flex flex-col gap-2">
-                <div className="flex flex-row gap-2">
-                  <Text>Create a private key using:</Text>
-                  <Select
-                    color="primary.500"
-                    fontFamily="mono"
-                    fontSize="small"
-                    mt="-1px"
-                    onChange={(e) =>
-                      setAlgorithm(e.target.value as KeypairAlgorithm)
-                    }
-                    size="sm"
-                    // fontWeight="bold"
-                    value={algorithm}
-                    variant="unstyled"
-                    w="fit-content"
-                  >
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent className="!max-w-2xl p-0 gap-0 overflow-hidden">
+          <DialogHeader className="p-4 lg:p-6 border-b border-dashed">
+            <DialogTitle className="text-lg font-semibold">
+              Add Public Key
+            </DialogTitle>
+          </DialogHeader>
+
+          <div className="space-y-6 max-h-[600px] overflow-y-auto px-4 lg:px-6 pb-6 pt-4">
+            {/* instruction */}
+            <div className="space-y-2">
+              {/* create private key */}
+              <div className="space-y-2">
+                <span className="text-sm">Generate a public key</span>
+                <Select
+                  value={algorithm}
+                  onValueChange={(v) => setAlgorithm(v as KeypairAlgorithm)}
+                >
+                  <SelectTrigger className="bg-card">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent id="algorithm">
                     {(
                       Object.keys(
                         KEYPAIR_ALGORITHM_DETAILS,
                       ) as KeypairAlgorithm[]
                     ).map((key) => (
-                      <option key={key} value={key}>
+                      <SelectItem key={key} value={key}>
                         {key} ({KEYPAIR_ALGORITHM_DETAILS[key].name})
-                      </option>
+                      </SelectItem>
                     ))}
-                  </Select>
-                </div>
+                  </SelectContent>
+                </Select>
 
-                <PlainTextCodeBlock
-                  code={
-                    KEYPAIR_ALGORITHM_DETAILS[algorithm].privateKeyInstructions
-                  }
-                />
-                <Text>Extract the public key.</Text>
-                <PlainTextCodeBlock
-                  code={
-                    KEYPAIR_ALGORITHM_DETAILS[algorithm].publicKeyInstructions
-                  }
+                <CodeClient
+                  lang="bash"
+                  code={`\
+# create private key
+${KEYPAIR_ALGORITHM_DETAILS[algorithm].privateKeyInstructions}
+
+# extract public key
+${KEYPAIR_ALGORITHM_DETAILS[algorithm].publicKeyInstructions}
+
+# print public key
+cat public.key
+`}
                 />
-                <Text>Print the public key.</Text>
-                <PlainTextCodeBlock code="cat public.key" />
               </div>
-            </FormControl>
+            </div>
 
-            <FormControl isRequired>
-              <FormLabel>
-                Public Key ({KEYPAIR_ALGORITHM_DETAILS[algorithm].name})
-              </FormLabel>
+            {/* public key input */}
+            <div className="flex flex-col gap-2">
+              <label className="text-sm font-medium" htmlFor="publicKey">
+                Public Key ({KEYPAIR_ALGORITHM_DETAILS[algorithm].name}){" "}
+                <span className="text-destructive">*</span>
+              </label>
               <Textarea
-                fontFamily="mono"
-                fontSize="small"
-                onChange={(e) => setPublicKey(e.target.value)}
-                placeholder="-----BEGIN PUBLIC KEY-----\n...\n...\n...\n...\n-----END PUBLIC KEY-----"
+                id="publicKey"
+                className="font-mono bg-card"
                 rows={6}
+                placeholder={
+                  "-----BEGIN PUBLIC KEY-----\n...\n...\n...\n...\n-----END PUBLIC KEY-----"
+                }
                 value={publicKey}
+                onChange={(e) => setPublicKey(e.target.value)}
+                required
               />
-            </FormControl>
+            </div>
 
-            <FormControl>
-              <FormLabel>Label</FormLabel>
+            {/* label */}
+            <div className="flex flex-col gap-2">
+              <label className="text-sm font-medium" htmlFor="key-label">
+                Label
+              </label>
               <Input
-                onChange={(e) => setLabel(e.target.value)}
+                id="key-label"
                 placeholder="Enter a description for this keypair"
+                className="bg-card"
                 value={label}
+                onChange={(e) => setLabel(e.target.value)}
               />
-            </FormControl>
+            </div>
 
-            <Alert variant="left-accent">
-              <div className="flex flex-col gap-2">
-                <Text>
-                  <strong>Keep your private key secure!</strong>
-                  <br />
-                  Your backend will sign access tokens with this private key
-                  which Engine verifies with this public key.
-                </Text>
-              </div>
+            {/* alert */}
+            <Alert variant="info">
+              <InfoIcon className="size-5" />
+              <AlertTitle>Keep your private key secure</AlertTitle>
+              <AlertDescription>
+                Your backend will sign access tokens with this private key which
+                Engine verifies with this public key.
+              </AlertDescription>
             </Alert>
-          </ModalBody>
+          </div>
 
-          <ModalFooter as={Flex} gap={3}>
-            <Button onClick={onClose} variant="ghost">
+          <div className="flex justify-end gap-3 border-t p-4 lg:p-6 bg-card">
+            <Button
+              variant="outline"
+              onClick={() => setIsOpen(false)}
+              type="button"
+            >
               Cancel
             </Button>
             <Button
-              colorScheme="primary"
-              isDisabled={!publicKey}
+              disabled={!publicKey}
               onClick={onClick}
               type="submit"
+              className="gap-2"
             >
+              {importKeypairMutation.isPending && (
+                <Spinner className="size-4" />
+              )}
               Add Public Key
             </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
+          </div>
+        </DialogContent>
+      </Dialog>
     </>
   );
-};
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/engine-access-tokens.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/engine-access-tokens.tsx
index 77009de1e0d..bd4f59a26fc 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/engine-access-tokens.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/engine-access-tokens.tsx
@@ -1,14 +1,11 @@
 "use client";
 
-import { ButtonGroup, Flex } from "@chakra-ui/react";
-import { Button } from "chakra/button";
-import { Heading } from "chakra/heading";
-import { Link } from "chakra/link";
-import { Text } from "chakra/text";
 import { useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
 import { CodeClient } from "@/components/ui/code/code.client";
 import { InlineCode } from "@/components/ui/inline-code";
+import { TabButtons } from "@/components/ui/tabs";
+import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import {
   useEngineAccessTokens,
   useEngineKeypairs,
@@ -39,38 +36,28 @@ export const EngineAccessTokens: React.FC<EngineAccessTokensProps> = ({
   );
 
   return (
-    <Flex flexDir="column" gap={4}>
-      <Flex flexDir="column" gap={2}>
-        <Heading size="title.md">Access Tokens</Heading>
-      </Flex>
+    <div>
+      <h2 className="text-2xl font-semibold tracking-tight mb-1">
+        Access Tokens
+      </h2>
 
       {supportsKeyPairAuth && (
-        <ButtonGroup size="sm" spacing={2} variant="ghost">
-          <Button
-            _active={{
-              bg: "bgBlack",
-              color: "bgWhite",
-            }}
-            isActive={selected === "standard"}
-            onClick={() => setSelected("standard")}
-            rounded="lg"
-            type="button"
-          >
-            Standard
-          </Button>
-          <Button
-            _active={{
-              bg: "bgBlack",
-              color: "bgWhite",
-            }}
-            isActive={selected === "keypair"}
-            onClick={() => setSelected("keypair")}
-            rounded="lg"
-            type="button"
-          >
-            Keypair Authentication
-          </Button>
-        </ButtonGroup>
+        <TabButtons
+          containerClassName="mb-4 mt-3"
+          tabClassName="!text-sm"
+          tabs={[
+            {
+              name: "Standard",
+              onClick: () => setSelected("standard"),
+              isActive: selected === "standard",
+            },
+            {
+              name: "Keypair Authentication",
+              onClick: () => setSelected("keypair"),
+              isActive: selected === "keypair",
+            },
+          ]}
+        />
       )}
 
       {selected === "standard" ? (
@@ -85,7 +72,7 @@ export const EngineAccessTokens: React.FC<EngineAccessTokensProps> = ({
           instanceUrl={instanceUrl}
         />
       ) : null}
-    </Flex>
+    </div>
   );
 };
 
@@ -104,18 +91,16 @@ const StandardAccessTokensPanel = ({
   });
 
   return (
-    <>
-      <Text>
+    <div>
+      <p className="text-sm text-muted-foreground mb-4">
         Access tokens allow API access to Engine.{" "}
-        <Link
-          color="primary.500"
+        <UnderlineLink
           href="https://portal.thirdweb.com/engine/features/access-tokens"
-          isExternal
+          target="_blank"
         >
           Learn more about access tokens
-        </Link>
-        .
-      </Text>
+        </UnderlineLink>
+      </p>
 
       <AccessTokensTable
         accessTokens={accessTokens.data ?? []}
@@ -125,13 +110,20 @@ const StandardAccessTokensPanel = ({
         isFetched={accessTokens.isFetched}
         isPending={accessTokens.isPending}
       />
-      <AddAccessTokenButton authToken={authToken} instanceUrl={instanceUrl} />
 
-      <Flex direction="column" gap={2} mt={16}>
-        <Heading size="title.md">Authenticate with your access token</Heading>
-        <Text>
-          Set the <InlineCode code="authorization" /> header.
-        </Text>
+      <div className="flex justify-end mt-4">
+        <AddAccessTokenButton authToken={authToken} instanceUrl={instanceUrl} />
+      </div>
+
+      <div className="mt-16">
+        <div className="mb-3">
+          <h3 className="text-lg font-semibold mb-1">
+            Authenticate with your access token
+          </h3>
+          <p className="text-sm text-muted-foreground">
+            Set the <InlineCode code="authorization" /> header.
+          </p>
+        </div>
         <CodeClient
           code={`const resp = fetch("<engine_url>/backend-wallet/get-all", {
   headers: {
@@ -140,8 +132,8 @@ const StandardAccessTokensPanel = ({
 });`}
           lang="ts"
         />
-      </Flex>
-    </>
+      </div>
+    </div>
   );
 };
 
@@ -159,20 +151,19 @@ const KeypairAuthenticationPanel = ({
 
   return (
     <>
-      <Text>
+      <p className="text-sm text-muted-foreground mb-4">
         Keypair authentication allows your app to generate short-lived access
         tokens.
         <br />
         They are securely signed by your backend and verified with a public key.{" "}
-        <Link
-          color="primary.500"
+        <UnderlineLink
           href="https://portal.thirdweb.com/engine/features/keypair-authentication"
-          isExternal
+          target="_blank"
         >
           Learn more about keypair authentication
-        </Link>
+        </UnderlineLink>
         .
-      </Text>
+      </p>
 
       <KeypairsTable
         authToken={authToken}
@@ -181,14 +172,19 @@ const KeypairAuthenticationPanel = ({
         isPending={keypairs.isPending}
         keypairs={keypairs.data || []}
       />
-      <AddKeypairButton authToken={authToken} instanceUrl={instanceUrl} />
 
-      <Flex direction="column" gap={2} mt={16}>
-        <Heading size="title.md">Authenticate with your access token</Heading>
+      <div className="flex justify-end mt-4">
+        <AddKeypairButton authToken={authToken} instanceUrl={instanceUrl} />
+      </div>
+
+      <div className="flex flex-col gap-2 mt-16">
+        <h3 className="text-lg font-medium">
+          Authenticate with your access token
+        </h3>
 
-        <Text>
+        <p className="text-sm text-muted-foreground">
           Set the <InlineCode code="authorization" /> header.
-        </Text>
+        </p>
         <CodeClient
           code={`import jsonwebtoken from "jsonwebtoken";
 
@@ -209,7 +205,7 @@ const resp = fetch("<engine_url>/backend-wallet/get-all", {
 });`}
           lang="ts"
         />
-      </Flex>
+      </div>
     </>
   );
 };
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/keypairs-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/keypairs-table.tsx
index 14c3d24a3b9..50c67ff926a 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/keypairs-table.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/keypairs-table.tsx
@@ -1,43 +1,29 @@
-import {
-  Flex,
-  FormControl,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  type UseDisclosureReturn,
-  useDisclosure,
-} from "@chakra-ui/react";
 import { createColumnHelper } from "@tanstack/react-table";
-import { Button } from "chakra/button";
-import { FormLabel } from "chakra/form";
-import { Text } from "chakra/text";
 import { Trash2Icon } from "lucide-react";
 import { useState } from "react";
+import { toast } from "sonner";
 import { TWTable } from "@/components/blocks/TWTable";
+import { Button } from "@/components/ui/button";
 import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
 import { PlainTextCodeBlock } from "@/components/ui/code/plaintext-code";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { type Keypair, useEngineRemoveKeypair } from "@/hooks/useEngine";
-import { useTxNotifications } from "@/hooks/useTxNotifications";
 import { toDateTimeLocal } from "@/utils/date-utils";
-
-interface KeypairsTableProps {
-  instanceUrl: string;
-  keypairs: Keypair[];
-  isPending: boolean;
-  isFetched: boolean;
-  authToken: string;
-}
+import { parseError } from "@/utils/errorParser";
 
 const columnHelper = createColumnHelper<Keypair>();
 
 const columns = [
   columnHelper.accessor("label", {
     cell: (cell) => {
-      return <Text>{cell.getValue()}</Text>;
+      return <span>{cell.getValue()}</span>;
     },
     header: "Label",
   }),
@@ -63,26 +49,32 @@ const columns = [
   }),
   columnHelper.accessor("algorithm", {
     cell: (cell) => {
-      return <Text>{cell.getValue()}</Text>;
+      return <span>{cell.getValue()}</span>;
     },
     header: "Type",
   }),
   columnHelper.accessor("createdAt", {
     cell: (cell) => {
-      return <Text>{toDateTimeLocal(cell.getValue())}</Text>;
+      return <span>{toDateTimeLocal(cell.getValue())}</span>;
     },
     header: "Added At",
   }),
 ];
 
-export const KeypairsTable: React.FC<KeypairsTableProps> = ({
+export function KeypairsTable({
   instanceUrl,
   keypairs,
   isPending,
   isFetched,
   authToken,
-}) => {
-  const removeDisclosure = useDisclosure();
+}: {
+  instanceUrl: string;
+  keypairs: Keypair[];
+  isPending: boolean;
+  isFetched: boolean;
+  authToken: string;
+}) {
+  const [isRemoveDialogOpen, setIsRemoveDialogOpen] = useState(false);
   const [selectedKeypair, setSelectedKeypair] = useState<Keypair>();
 
   return (
@@ -98,7 +90,7 @@ export const KeypairsTable: React.FC<KeypairsTableProps> = ({
             isDestructive: true,
             onClick: (keypair) => {
               setSelectedKeypair(keypair);
-              removeDisclosure.onOpen();
+              setIsRemoveDialogOpen(true);
             },
             text: "Remove",
           },
@@ -106,99 +98,93 @@ export const KeypairsTable: React.FC<KeypairsTableProps> = ({
         title="public keys"
       />
 
-      {selectedKeypair && removeDisclosure.isOpen && (
-        <RemoveModal
+      {selectedKeypair && (
+        <RemoveDialog
           authToken={authToken}
-          disclosure={removeDisclosure}
           instanceUrl={instanceUrl}
           keypair={selectedKeypair}
+          isOpen={isRemoveDialogOpen}
+          onOpenChange={setIsRemoveDialogOpen}
         />
       )}
     </>
   );
-};
+}
 
-const RemoveModal = ({
+function RemoveDialog({
   keypair,
-  disclosure,
   instanceUrl,
   authToken,
+  isOpen,
+  onOpenChange,
 }: {
   keypair: Keypair;
-  disclosure: UseDisclosureReturn;
   instanceUrl: string;
   authToken: string;
-}) => {
-  const { mutate: revokeKeypair } = useEngineRemoveKeypair({
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const removeKeypairMutation = useEngineRemoveKeypair({
     authToken,
     instanceUrl,
   });
 
-  const { onSuccess, onError } = useTxNotifications(
-    "Successfully removed public key",
-    "Failed to remove public key",
-  );
-
   const onClick = () => {
-    revokeKeypair(
+    removeKeypairMutation.mutate(
       { hash: keypair.hash },
       {
         onError: (error) => {
-          onError(error);
+          toast.error("Failed to remove public key.", {
+            description: parseError(error),
+          });
           console.error(error);
         },
         onSuccess: () => {
-          onSuccess();
-          disclosure.onClose();
+          toast.success("Public key removed successfully.");
+          onOpenChange(false);
         },
       },
     );
   };
 
   return (
-    <Modal isCentered isOpen={disclosure.isOpen} onClose={disclosure.onClose}>
-      <ModalOverlay />
-      <ModalContent className="!bg-background rounded-lg border border-border">
-        <ModalHeader>Remove Keypair</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <div className="flex flex-col gap-4">
-            <Text>Are you sure you want to remove this keypair?</Text>
-            <Text>
-              Access tokens signed by the private key for this keypair will no
-              longer be valid.
-            </Text>
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent className="p-0 overflow-hidden gap-0">
+        <DialogHeader className="p-4 lg:p-6 border-b border-dashed">
+          <DialogTitle>Remove Keypair</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to remove this keypair? Access tokens signed
+            by the private key for this keypair will no longer be valid.
+          </DialogDescription>
+        </DialogHeader>
 
-            <FormControl>
-              <FormLabel>Label</FormLabel>
-              <Text>{keypair.label}</Text>
-            </FormControl>
+        <div className="flex flex-col gap-4 overflow-hidden px-4 lg:px-6 pb-8 pt-6">
+          <div className="space-y-1.">
+            <h3 className="text-sm font-medium">Label</h3>
+            <p className="text-sm text-muted-foreground">{keypair.label}</p>
+          </div>
 
-            <FormControl>
-              <FormLabel>Type</FormLabel>
-              <Text>{keypair.algorithm}</Text>
-            </FormControl>
+          <div className="space-y-1">
+            <h3 className="text-sm font-medium">Type</h3>
+            <p className="text-sm text-muted-foreground">{keypair.algorithm}</p>
+          </div>
 
-            <FormControl>
-              <FormLabel>Public Key</FormLabel>
-              <Flex overflowX="scroll">
-                <Text fontFamily="mono" fontSize="small" whiteSpace="pre-line">
-                  {keypair.publicKey}
-                </Text>
-              </Flex>
-            </FormControl>
+          <div className="space-y-1">
+            <h3 className="text-sm font-medium">Public Key</h3>
+            <PlainTextCodeBlock code={keypair.publicKey} />
           </div>
-        </ModalBody>
+        </div>
 
-        <ModalFooter as={Flex} gap={3}>
-          <Button onClick={disclosure.onClose} type="button" variant="ghost">
+        <div className="flex justify-end gap-3 p-4 lg:p-6 bg-card border-t">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>
-          <Button colorScheme="red" onClick={onClick} type="submit">
+          <Button variant="destructive" onClick={onClick} className="gap-2">
+            {removeKeypairMutation.isPending && <Spinner className="size-4" />}
             Remove
           </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+        </div>
+      </DialogContent>
+    </Dialog>
   );
-};
+}