diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/components/add-admin-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/components/add-admin-button.tsx
index a3fa5fc306e..26039ccc0ae 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/components/add-admin-button.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/components/add-admin-button.tsx
@@ -1,116 +1,155 @@
-import {
-  Flex,
-  FormControl,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  useDisclosure,
-} from "@chakra-ui/react";
-import { Button } from "chakra/button";
-import { 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 { isAddress } from "thirdweb";
-import { type EngineAdmin, useEngineGrantPermissions } from "@/hooks/useEngine";
-import { useTxNotifications } from "@/hooks/useTxNotifications";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { useEngineGrantPermissions } from "@/hooks/useEngine";
+import { parseError } from "@/utils/errorParser";
 
-interface AddAdminButtonProps {
-  instanceUrl: string;
-  authToken: string;
-}
+const addAdminSchema = z.object({
+  walletAddress: z
+    .string()
+    .refine((address) => isAddress(address), "Invalid address"),
+  label: z.string().optional(),
+});
 
-export const AddAdminButton: React.FC<AddAdminButtonProps> = ({
+type AddAdminFormData = z.infer<typeof addAdminSchema>;
+
+export function AddAdminButton({
   instanceUrl,
   authToken,
-}) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const { mutate: grantPermissions } = useEngineGrantPermissions({
+}: {
+  instanceUrl: string;
+  authToken: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const grantPermissionsMutation = useEngineGrantPermissions({
     authToken,
     instanceUrl,
   });
 
-  const form = useForm<EngineAdmin>({
-    defaultValues: {
-      permissions: "ADMIN",
-    },
+  const form = useForm<AddAdminFormData>({
+    resolver: zodResolver(addAdminSchema),
+    defaultValues: {},
   });
 
-  const { onSuccess, onError } = useTxNotifications(
-    "Successfully added admin.",
-    "Failed to add admin.",
-  );
+  const onSubmit = (data: AddAdminFormData) => {
+    grantPermissionsMutation.mutate(
+      {
+        ...data,
+        permissions: "ADMIN",
+      },
+      {
+        onError: (error) => {
+          toast.error("Failed to add admin.", {
+            description: parseError(error),
+          });
+          console.error(error);
+        },
+        onSuccess: () => {
+          toast.success("Admin added successfully.");
+          setOpen(false);
+          form.reset();
+        },
+      },
+    );
+  };
 
   return (
-    <>
-      <Button
-        colorScheme="primary"
-        leftIcon={<CirclePlusIcon className="size-6" />}
-        onClick={onOpen}
-        size="sm"
-        variant="ghost"
-        w="fit-content"
-      >
-        Add Admin
-      </Button>
-      <Modal isCentered isOpen={isOpen} onClose={onClose}>
-        <ModalOverlay />
-        <ModalContent
-          as="form"
-          className="!bg-background rounded-lg border border-border"
-          onSubmit={form.handleSubmit((data) => {
-            if (!isAddress(data.walletAddress)) {
-              onError(new Error("Invalid wallet address"));
-            }
-            grantPermissions(data, {
-              onError: (error) => {
-                onError(error);
-                console.error(error);
-              },
-              onSuccess: () => {
-                onSuccess();
-                onClose();
-              },
-            });
-          })}
-        >
-          <ModalHeader>Add Admin</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            <div className="flex flex-col gap-4">
-              <FormControl isRequired>
-                <FormLabel>Wallet Address</FormLabel>
-                <Input
-                  placeholder="The wallet address for this admin"
-                  type="text"
-                  {...form.register("walletAddress", { required: true })}
-                />
-              </FormControl>
-              <FormControl>
-                <FormLabel>Label</FormLabel>
-                <Input
-                  placeholder="Enter a description for this admin"
-                  type="text"
-                  {...form.register("label")}
-                />
-              </FormControl>
-            </div>
-          </ModalBody>
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button className="w-fit gap-2">
+          <PlusIcon className="size-4" />
+          Add Admin
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="p-0 overflow-hidden gap-0">
+        <DialogHeader className="p-4 lg:p-6">
+          <DialogTitle>Add Admin</DialogTitle>
+          <DialogDescription>
+            Add a new admin to your engine instance.
+          </DialogDescription>
+        </DialogHeader>
 
-          <ModalFooter as={Flex} gap={3}>
-            <Button onClick={onClose} type="button" variant="ghost">
-              Cancel
-            </Button>
-            <Button colorScheme="primary" type="submit">
-              Add
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="space-y-4 px-4 lg:px-6 pb-8">
+              {/* wallet address */}
+              <FormField
+                control={form.control}
+                name="walletAddress"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Wallet Address</FormLabel>
+                    <FormControl>
+                      <Input
+                        className="bg-card"
+                        placeholder="0x..."
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              {/* label */}
+              <FormField
+                control={form.control}
+                name="label"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Label</FormLabel>
+                    <FormControl>
+                      <Input
+                        className="bg-card"
+                        placeholder="label for this admin"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <div className="flex justify-end gap-3 p-4 lg:p-6 bg-card border-t">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setOpen(false)}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" className="gap-2">
+                {grantPermissionsMutation.isPending && (
+                  <Spinner className="size-4" />
+                )}
+                Add Admin
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
   );
-};
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/components/admins-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/components/admins-table.tsx
index e6f07f24397..a6b1e78eaec 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/components/admins-table.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/components/admins-table.tsx
@@ -1,55 +1,64 @@
-import {
-  Flex,
-  FormControl,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  type UseDisclosureReturn,
-  useDisclosure,
-} from "@chakra-ui/react";
+import { zodResolver } from "@hookform/resolvers/zod";
 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 { useForm } from "react-hook-form";
+import { toast } from "sonner";
 import type { ThirdwebClient } from "thirdweb";
+import { z } from "zod";
 import { TWTable } from "@/components/blocks/TWTable";
 import { WalletAddress } from "@/components/blocks/wallet-address";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
 import {
   type EngineAdmin,
   useEngineGrantPermissions,
   useEngineRevokePermissions,
 } from "@/hooks/useEngine";
-import { useTxNotifications } from "@/hooks/useTxNotifications";
-
-interface AdminsTableProps {
-  instanceUrl: string;
-  admins: EngineAdmin[];
-  isPending: boolean;
-  isFetched: boolean;
-  authToken: string;
-  client: ThirdwebClient;
-}
+import { parseError } from "@/utils/errorParser";
 
 const columnHelper = createColumnHelper<EngineAdmin>();
 
-export const AdminsTable: React.FC<AdminsTableProps> = ({
+const editAdminSchema = z.object({
+  label: z.string().optional(),
+});
+
+type EditAdminFormData = z.infer<typeof editAdminSchema>;
+
+export function AdminsTable({
   instanceUrl,
   admins,
   isPending,
   isFetched,
   authToken,
   client,
-}) => {
-  const editDisclosure = useDisclosure();
-  const removeDisclosure = useDisclosure();
+}: {
+  instanceUrl: string;
+  admins: EngineAdmin[];
+  isPending: boolean;
+  isFetched: boolean;
+  authToken: string;
+  client: ThirdwebClient;
+}) {
+  const [editOpen, setEditOpen] = useState(false);
+  const [removeOpen, setRemoveOpen] = useState(false);
   const [selectedAdmin, setSelectedAdmin] = useState<EngineAdmin>();
 
   const columns = useMemo(() => {
@@ -63,11 +72,7 @@ export const AdminsTable: React.FC<AdminsTableProps> = ({
       }),
       columnHelper.accessor("label", {
         cell: (cell) => {
-          return (
-            <Text isTruncated maxW={300}>
-              {cell.getValue()}
-            </Text>
-          );
+          return <p className="truncate max-w-[300px]">{cell.getValue()}</p>;
         },
         header: "Label",
       }),
@@ -92,7 +97,7 @@ export const AdminsTable: React.FC<AdminsTableProps> = ({
             icon: <PencilIcon className="size-4" />,
             onClick: (admin) => {
               setSelectedAdmin(admin);
-              editDisclosure.onOpen();
+              setEditOpen(true);
             },
             text: "Edit",
           },
@@ -101,7 +106,7 @@ export const AdminsTable: React.FC<AdminsTableProps> = ({
             isDestructive: true,
             onClick: (admin) => {
               setSelectedAdmin(admin);
-              removeDisclosure.onOpen();
+              setRemoveOpen(true);
             },
             text: "Remove",
           },
@@ -109,174 +114,222 @@ export const AdminsTable: React.FC<AdminsTableProps> = ({
         title="admins"
       />
 
-      {selectedAdmin && editDisclosure.isOpen && (
-        <EditModal
+      {selectedAdmin && (
+        <EditDialog
           admin={selectedAdmin}
           authToken={authToken}
-          disclosure={editDisclosure}
           instanceUrl={instanceUrl}
+          open={editOpen}
+          onOpenChange={setEditOpen}
         />
       )}
-      {selectedAdmin && removeDisclosure.isOpen && (
-        <RemoveModal
+      {selectedAdmin && (
+        <RemoveDialog
           admin={selectedAdmin}
           authToken={authToken}
-          disclosure={removeDisclosure}
           instanceUrl={instanceUrl}
+          open={removeOpen}
+          onOpenChange={setRemoveOpen}
         />
       )}
     </>
   );
-};
+}
 
-const EditModal = ({
+function EditDialog({
   admin,
-  disclosure,
   instanceUrl,
   authToken,
+  open,
+  onOpenChange,
 }: {
   admin: EngineAdmin;
-  disclosure: UseDisclosureReturn;
   instanceUrl: string;
   authToken: string;
-}) => {
-  const { mutate: updatePermissions } = useEngineGrantPermissions({
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const updatePermissionsMutation = useEngineGrantPermissions({
     authToken,
     instanceUrl,
   });
 
-  const { onSuccess, onError } = useTxNotifications(
-    "Successfully updated admin",
-    "Failed to update admin",
-  );
-
-  const [label, setLabel] = useState(admin.label ?? "");
+  const form = useForm<EditAdminFormData>({
+    resolver: zodResolver(editAdminSchema),
+    values: {
+      label: admin.label ?? "",
+    },
+  });
 
-  const onClick = () => {
-    updatePermissions(
+  const onSubmit = (data: EditAdminFormData) => {
+    updatePermissionsMutation.mutate(
       {
-        label,
+        label: data.label,
         permissions: admin.permissions,
         walletAddress: admin.walletAddress,
       },
       {
         onError: (error) => {
-          onError(error);
+          toast.error("Failed to update admin.", {
+            description: parseError(error),
+          });
           console.error(error);
         },
         onSuccess: () => {
-          onSuccess();
-          disclosure.onClose();
+          toast.success("Admin updated successfully.");
+          onOpenChange(false);
+          form.reset();
         },
       },
     );
   };
 
   return (
-    <Modal isCentered isOpen={disclosure.isOpen} onClose={disclosure.onClose}>
-      <ModalOverlay />
-      <ModalContent className="!bg-background rounded-lg border border-border">
-        <ModalHeader>Update Admin</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <div className="flex flex-col gap-4">
-            <FormControl>
-              <FormLabel>Wallet Address</FormLabel>
-              <Text>{admin.walletAddress}</Text>
-            </FormControl>
-            <FormControl>
-              <FormLabel>Label</FormLabel>
-              <Input
-                onChange={(e) => setLabel(e.target.value)}
-                placeholder="Enter a description for this admin"
-                type="text"
-                value={label}
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="p-0 overflow-hidden gap-0">
+        <DialogHeader className="p-4 lg:p-6">
+          <DialogTitle>Update Admin</DialogTitle>
+          <DialogDescription>
+            Update the label for this admin.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="space-y-4 px-4 lg:px-6 pb-8">
+              <div className="space-y-1.5">
+                <h3 className="text-sm font-medium">Wallet Address</h3>
+                <p className="text-sm text-muted-foreground">
+                  {admin.walletAddress}
+                </p>
+              </div>
+
+              <FormField
+                control={form.control}
+                name="label"
+                render={({ field }) => (
+                  <FormItem className="space-y-1.5">
+                    <FormLabel>Label</FormLabel>
+                    <FormControl>
+                      <Input
+                        className="bg-card"
+                        placeholder="Enter a description for this admin"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
-            </FormControl>
-          </div>
-        </ModalBody>
+            </div>
 
-        <ModalFooter as={Flex} gap={3}>
-          <Button onClick={disclosure.onClose} type="button" variant="ghost">
-            Cancel
-          </Button>
-          <Button colorScheme="blue" onClick={onClick} type="submit">
-            Save
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+            <div className="flex justify-end gap-3 p-4 lg:p-6 bg-card border-t">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" className="gap-2">
+                {updatePermissionsMutation.isPending && (
+                  <Spinner className="size-4" />
+                )}
+                Save
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
   );
-};
+}
 
-const RemoveModal = ({
+function RemoveDialog({
   admin,
-  disclosure,
   instanceUrl,
   authToken,
+  open,
+  onOpenChange,
 }: {
   admin: EngineAdmin;
-  disclosure: UseDisclosureReturn;
   instanceUrl: string;
   authToken: string;
-}) => {
-  const { mutate: revokePermissions } = useEngineRevokePermissions({
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const revokePermissionsMutation = useEngineRevokePermissions({
     authToken,
     instanceUrl,
   });
 
-  const { onSuccess, onError } = useTxNotifications(
-    "Successfully removed admin",
-    "Failed to remove admin",
-  );
-
   const onClick = () => {
-    revokePermissions(
+    revokePermissionsMutation.mutate(
       {
         walletAddress: admin.walletAddress,
       },
       {
         onError: (error) => {
-          onError(error);
+          toast.error("Failed to remove admin.", {
+            description: parseError(error),
+          });
           console.error(error);
         },
         onSuccess: () => {
-          onSuccess();
-          disclosure.onClose();
+          toast.success("Admin 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 Admin</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <div className="flex flex-col gap-4">
-            <Text>Are you sure you want to remove this admin?</Text>
-            <FormControl>
-              <FormLabel>Wallet Address</FormLabel>
-              <Text>{admin.walletAddress}</Text>
-            </FormControl>
-            <FormControl>
-              <FormLabel>Label</FormLabel>
-              <Text>{admin.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>Remove Admin</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to remove this admin?
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-5 px-4 lg:px-6 pb-8">
+          <div className="space-y-1.5">
+            <h3 className="text-sm font-medium">Wallet Address</h3>
+            <p className="text-sm text-muted-foreground">
+              {admin.walletAddress}
+            </p>
           </div>
-        </ModalBody>
 
-        <ModalFooter as={Flex} gap={3}>
-          <Button onClick={disclosure.onClose} type="button" variant="ghost">
+          <div className="space-y-1.5">
+            <h3 className="text-sm font-medium">Label</h3>
+            <p className="text-sm text-muted-foreground">
+              {admin.label ?? <em>N/A</em>}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-3 p-4 lg:p-6 bg-card border-t">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+          >
             Cancel
           </Button>
-          <Button colorScheme="red" onClick={onClick} type="submit">
+          <Button
+            type="button"
+            variant="destructive"
+            onClick={onClick}
+            className="gap-2"
+          >
+            {revokePermissionsMutation.isPending && (
+              <Spinner className="size-4" />
+            )}
             Remove
           </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]/admins/components/engine-admins.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/components/engine-admins.tsx
index f4fcfbc509c..1313c12f64a 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/components/engine-admins.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/components/engine-admins.tsx
@@ -1,45 +1,40 @@
 "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 { useEnginePermissions } from "@/hooks/useEngine";
 import { AddAdminButton } from "./add-admin-button";
 import { AdminsTable } from "./admins-table";
 
-interface EngineAdminsProps {
-  instanceUrl: string;
-  authToken: string;
-  client: ThirdwebClient;
-}
-
-export const EngineAdmins: React.FC<EngineAdminsProps> = ({
+export function EngineAdmins({
   instanceUrl,
   authToken,
   client,
-}) => {
+}: {
+  instanceUrl: string;
+  authToken: string;
+  client: ThirdwebClient;
+}) {
   const admins = useEnginePermissions({
     authToken,
     instanceUrl,
   });
 
   return (
-    <div className="flex flex-col gap-4">
-      <div className="flex flex-col gap-2">
-        <Heading size="title.md">Admins</Heading>
-        <Text>
-          Admins are allowed to manage your Engine instance from the dashboard.{" "}
-          <Link
-            color="primary.500"
-            href="https://portal.thirdweb.com/engine/features/admins"
-            isExternal
-          >
-            Learn more about admins
-          </Link>
-          .
-        </Text>
-      </div>
+    <div>
+      <h2 className="text-2xl font-semibold tracking-tight mb-1">Admins</h2>
+      <p className="text-muted-foreground text-sm mb-5">
+        Admins are allowed to manage your Engine instance from the dashboard.{" "}
+        <UnderlineLink
+          href="https://portal.thirdweb.com/engine/features/admins"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn more about admins
+        </UnderlineLink>
+        .
+      </p>
+
       <AdminsTable
         admins={admins.data || []}
         authToken={authToken}
@@ -48,7 +43,10 @@ export const EngineAdmins: React.FC<EngineAdminsProps> = ({
         isFetched={admins.isFetched}
         isPending={admins.isPending}
       />
-      <AddAdminButton authToken={authToken} instanceUrl={instanceUrl} />
+
+      <div className="mt-4 flex justify-end">
+        <AddAdminButton authToken={authToken} instanceUrl={instanceUrl} />
+      </div>
     </div>
   );
-};
+}