diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/ContractSettingsPage.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/ContractSettingsPage.tsx
index d6e8d5bde72..a7d35ccef97 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/ContractSettingsPage.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/ContractSettingsPage.tsx
@@ -1,76 +1,62 @@
 "use client";
-import { Flex, GridItem, SimpleGrid } from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
 import * as CommonExt from "thirdweb/extensions/common";
+import { cn } from "@/lib/utils";
 import { SettingsMetadata } from "./components/metadata";
 import { SettingsPlatformFees } from "./components/platform-fees";
 import { SettingsPrimarySale } from "./components/primary-sale";
 import { SettingsRoyalties } from "./components/royalties";
 
-interface ContractSettingsPageProps {
+const ContractSettingsPageInner = (props: {
   contract: ThirdwebContract;
   isContractMetadataSupported: boolean;
   isPrimarySaleSupported: boolean;
   isRoyaltiesSupported: boolean;
   isPlatformFeesSupported: boolean;
   isLoggedIn: boolean;
-}
-
-const ContractSettingsPageInner: React.FC<ContractSettingsPageProps> = ({
-  contract,
-  isContractMetadataSupported,
-  isPrimarySaleSupported,
-  isRoyaltiesSupported,
-  isPlatformFeesSupported,
-  isLoggedIn,
 }) => {
   return (
-    <Flex direction="column" gap={4}>
-      <Flex gap={8} w="100%">
-        <SimpleGrid columns={1} gap={8} w="100%">
-          {contract && (
-            <GridItem order={isContractMetadataSupported ? 0 : 100}>
-              <SettingsMetadata
-                contract={contract}
-                detectedState={
-                  isContractMetadataSupported ? "enabled" : "disabled"
-                }
-                isLoggedIn={isLoggedIn}
-              />
-            </GridItem>
-          )}
-          {contract && (
-            <GridItem order={isPrimarySaleSupported ? 2 : 101}>
-              <SettingsPrimarySale
-                contract={contract}
-                detectedState={isPrimarySaleSupported ? "enabled" : "disabled"}
-                isLoggedIn={isLoggedIn}
-              />
-            </GridItem>
-          )}
+    <div className="flex flex-col gap-8">
+      <div
+        className={cn(
+          props.isContractMetadataSupported ? "order-1" : "order-2",
+        )}
+      >
+        <SettingsMetadata
+          contract={props.contract}
+          detectedState={
+            props.isContractMetadataSupported ? "enabled" : "disabled"
+          }
+          isLoggedIn={props.isLoggedIn}
+        />
+      </div>
 
-          {contract && (
-            <GridItem order={isRoyaltiesSupported ? 3 : 102}>
-              <SettingsRoyalties
-                contract={contract}
-                detectedState={isRoyaltiesSupported ? "enabled" : "disabled"}
-                isLoggedIn={isLoggedIn}
-              />
-            </GridItem>
-          )}
+      <div className={cn(props.isPrimarySaleSupported ? "order-1" : "order-2")}>
+        <SettingsPrimarySale
+          contract={props.contract}
+          detectedState={props.isPrimarySaleSupported ? "enabled" : "disabled"}
+          isLoggedIn={props.isLoggedIn}
+        />
+      </div>
 
-          {contract && (
-            <GridItem order={isPlatformFeesSupported ? 4 : 103}>
-              <SettingsPlatformFees
-                contract={contract}
-                detectedState={isPlatformFeesSupported ? "enabled" : "disabled"}
-                isLoggedIn={isLoggedIn}
-              />
-            </GridItem>
-          )}
-        </SimpleGrid>
-      </Flex>
-    </Flex>
+      <div className={cn(props.isRoyaltiesSupported ? "order-1" : "order-2")}>
+        <SettingsRoyalties
+          contract={props.contract}
+          detectedState={props.isRoyaltiesSupported ? "enabled" : "disabled"}
+          isLoggedIn={props.isLoggedIn}
+        />
+      </div>
+
+      <div
+        className={cn(props.isPlatformFeesSupported ? "order-1" : "order-2")}
+      >
+        <SettingsPlatformFees
+          contract={props.contract}
+          detectedState={props.isPlatformFeesSupported ? "enabled" : "disabled"}
+          isLoggedIn={props.isLoggedIn}
+        />
+      </div>
+    </div>
   );
 };
 
@@ -83,28 +69,35 @@ export function ContractSettingsPage(props: {
   const { functionSelectors, contract, isLoggedIn, hasDefaultFeeConfig } =
     props;
   return (
-    <ContractSettingsPageInner
-      contract={contract}
-      isContractMetadataSupported={[
-        CommonExt.isGetContractMetadataSupported(functionSelectors),
-        CommonExt.isSetContractMetadataSupported(functionSelectors),
-      ].every(Boolean)}
-      isLoggedIn={isLoggedIn}
-      isPlatformFeesSupported={
-        !hasDefaultFeeConfig &&
-        [
-          CommonExt.isGetPlatformFeeInfoSupported(functionSelectors),
-          CommonExt.isSetPlatformFeeInfoSupported(functionSelectors),
-        ].every(Boolean)
-      }
-      isPrimarySaleSupported={[
-        CommonExt.isPrimarySaleRecipientSupported(functionSelectors),
-        CommonExt.isSetPrimarySaleRecipientSupported(functionSelectors),
-      ].every(Boolean)}
-      isRoyaltiesSupported={[
-        CommonExt.isGetDefaultRoyaltyInfoSupported(functionSelectors),
-        CommonExt.isSetDefaultRoyaltyInfoSupported(functionSelectors),
-      ].every(Boolean)}
-    />
+    <div>
+      <h2 className="text-2xl font-semibold tracking-tight mb-0.5">Settings</h2>
+      <p className="text-muted-foreground mb-5">
+        Configure the settings for your contract
+      </p>
+
+      <ContractSettingsPageInner
+        contract={contract}
+        isContractMetadataSupported={[
+          CommonExt.isGetContractMetadataSupported(functionSelectors),
+          CommonExt.isSetContractMetadataSupported(functionSelectors),
+        ].every(Boolean)}
+        isLoggedIn={isLoggedIn}
+        isPlatformFeesSupported={
+          !hasDefaultFeeConfig &&
+          [
+            CommonExt.isGetPlatformFeeInfoSupported(functionSelectors),
+            CommonExt.isSetPlatformFeeInfoSupported(functionSelectors),
+          ].every(Boolean)
+        }
+        isPrimarySaleSupported={[
+          CommonExt.isPrimarySaleRecipientSupported(functionSelectors),
+          CommonExt.isSetPrimarySaleRecipientSupported(functionSelectors),
+        ].every(Boolean)}
+        isRoyaltiesSupported={[
+          CommonExt.isGetDefaultRoyaltyInfoSupported(functionSelectors),
+          CommonExt.isSetDefaultRoyaltyInfoSupported(functionSelectors),
+        ].every(Boolean)}
+      />
+    </div>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/metadata.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/metadata.tsx
index 807249aca2a..0b83b7b67fd 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/metadata.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/metadata.tsx
@@ -1,21 +1,10 @@
 "use client";
 
-import {
-  Flex,
-  FormControl,
-  IconButton,
-  Input,
-  Textarea,
-} from "@chakra-ui/react";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button } from "chakra/button";
-import { Card } from "chakra/card";
-import { FormErrorMessage, FormLabel } from "chakra/form";
-import { Heading } from "chakra/heading";
-import { Text } from "chakra/text";
 import { PlusIcon, Trash2Icon } from "lucide-react";
 import { useMemo } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
+import { toast } from "sonner";
 import type { ThirdwebContract } from "thirdweb";
 import {
   getContractMetadata,
@@ -27,9 +16,21 @@ import { z } from "zod";
 import { FileInput } from "@/components/blocks/FileInput";
 import { AdminOnly } from "@/components/contracts/roles/admin-only";
 import { TransactionButton } from "@/components/tx-button";
-import { useTxNotifications } from "@/hooks/useTxNotifications";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Textarea } from "@/components/ui/textarea";
 import { CommonContractSchema } from "@/schema/schemas";
 import type { ExtensionDetectedState } from "@/types/ExtensionDetectedState";
+import { parseError } from "@/utils/errorParser";
 import { SettingDetectedState } from "./detected-state";
 
 const DashboardCommonContractSchema = CommonContractSchema.extend({
@@ -105,15 +106,7 @@ export const SettingsMetadata = ({
     };
   }, [metadata.data, contract.client]);
 
-  const {
-    control,
-    setValue,
-    register,
-    watch,
-    handleSubmit,
-    formState,
-    getFieldState,
-  } = useForm<z.input<typeof DashboardCommonContractSchema>>({
+  const form = useForm<z.input<typeof DashboardCommonContractSchema>>({
     defaultValues: transformedQueryData,
     resetOptions: {
       keepDirty: true,
@@ -124,205 +117,218 @@ export const SettingsMetadata = ({
   });
 
   const { fields, append, remove } = useFieldArray({
-    control,
+    control: form.control,
     // @ts-expect-error - TODO: fix this
     name: "dashboard_social_urls",
   });
 
-  const { onSuccess, onError } = useTxNotifications(
-    "Successfully updated metadata",
-    "Error updating metadata",
-    contract,
-  );
+  const onSubmit = (d: z.input<typeof DashboardCommonContractSchema>) => {
+    const { dashboard_social_urls, ...data } = d;
 
-  return (
-    <Card overflow="hidden" p={0} position="relative">
-      <SettingDetectedState detectedState={detectedState} type="metadata" />
-      <Flex
-        as="form"
-        direction="column"
-        onSubmit={handleSubmit((d) => {
-          const { dashboard_social_urls, ...data } = d;
+    const socialUrlsArray =
+      Object.keys(dashboard_social_urls || {}).length > 0
+        ? (dashboard_social_urls as unknown as {
+            key: string;
+            value: string;
+          }[])
+        : [];
 
-          const socialUrlsArray =
-            Object.keys(dashboard_social_urls || {}).length > 0
-              ? (dashboard_social_urls as unknown as {
-                  key: string;
-                  value: string;
-                }[])
-              : [];
+    const socialUrlsObj = socialUrlsArray.reduce<Record<string, string>>(
+      (obj, item) => {
+        const platform = item.key || extractDomain(item.value);
+        if (platform && item.value.trim() !== "") {
+          obj[platform] = item.value;
+        }
+        return obj;
+      },
+      {},
+    );
 
-          const socialUrlsObj = socialUrlsArray.reduce<Record<string, string>>(
-            (obj, item) => {
-              const domain = extractDomain(item.value);
-              if (domain && item.value.trim() !== "") {
-                obj[domain] = item.value;
-              }
-              return obj;
-            },
-            {},
-          );
+    const tx = setContractMetadata({
+      contract,
+      ...data,
+      social_urls: socialUrlsObj,
+    });
 
-          const tx = setContractMetadata({
-            contract,
-            ...data,
-            social_urls: socialUrlsObj,
-          });
+    sendTransaction.mutate(tx, {
+      onError: (error) => {
+        toast.error("Error updating metadata", {
+          description: parseError(error),
+        });
+        console.error(error);
+      },
+      onSuccess: () => {
+        toast.success("Metadata updated");
+      },
+    });
+  };
 
-          sendTransaction.mutate(tx, {
-            onError: (error) => {
-              onError(error);
-            },
-            onSuccess: () => {
-              onSuccess();
-            },
-          });
-        })}
-      >
-        <Flex as="section" direction="column" gap={4} p={{ base: 6, md: 10 }}>
-          <div className="flex flex-col">
-            <Heading size="title.md">Metadata</Heading>
-            <Text fontStyle="italic" size="body.md">
-              Settings to organize and distinguish between your different
-              contracts.
-            </Text>
-          </div>
-          <Flex direction={{ base: "column", md: "row" }} gap={4}>
-            <Flex
-              flexGrow={1}
-              flexShrink={0}
-              maxW={{ base: "100%", md: "160px" }}
-            >
-              <FormControl
-                display="flex"
-                flexDirection="column"
-                isDisabled={metadata.isPending || sendTransaction.isPending}
-                isInvalid={!!getFieldState("image", formState).error}
-              >
-                <FormLabel>Image</FormLabel>
-                <FileInput
-                  accept={{ "image/*": [] }}
-                  className="rounded border border-border transition-all duration-200"
-                  client={contract.client}
-                  isDisabled={metadata.isPending || sendTransaction.isPending}
-                  setValue={(file) =>
-                    setValue("image", file, {
-                      shouldDirty: true,
-                      shouldTouch: true,
-                    })
-                  }
-                  value={watch("image")}
-                />
-                <FormErrorMessage>
-                  {getFieldState("image", formState).error?.message}
-                </FormErrorMessage>
-              </FormControl>
-            </Flex>
+  return (
+    <div className="relative bg-card border rounded-lg">
+      <SettingDetectedState detectedState={detectedState} type="metadata" />
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col">
+          <div className="p-4 md:p-6">
+            {/* header */}
+            <div className="mb-6">
+              <h2 className="text-xl font-semibold tracking-tight">Metadata</h2>
+              <p className="text-muted-foreground text-sm">
+                Settings to organize and distinguish between your different
+                contracts.
+              </p>
+            </div>
 
-            <Flex
-              direction="column"
-              flexGrow={1}
-              gap={4}
-              justify="space-between"
-            >
-              <Flex direction={{ base: "column", md: "row" }} gap={4}>
-                <FormControl
-                  isDisabled={metadata.isPending || sendTransaction.isPending}
-                  isInvalid={!!getFieldState("name", formState).error}
-                >
-                  <FormLabel>Name</FormLabel>
-                  <Input variant="filled" {...register("name")} />
-                  <FormErrorMessage>
-                    {getFieldState("name", formState).error?.message}
-                  </FormErrorMessage>
-                </FormControl>
-              </Flex>
+            {metadata.isPending ? (
+              <Skeleton className="h-[432px] w-full" />
+            ) : (
+              <div>
+                <div className="flex flex-col gap-6 md:flex-row mb-6">
+                  {/* image */}
+                  <div className="w-full max-w-full md:max-w-[200px]">
+                    <FormField
+                      control={form.control}
+                      name="image"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Image</FormLabel>
+                          <FormControl>
+                            <FileInput
+                              accept={{ "image/*": [] }}
+                              className="rounded border border-border transition-all duration-200 bg-background"
+                              client={contract.client}
+                              setValue={(file) => field.onChange(file)}
+                              value={field.value}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
 
-              <FormControl
-                isDisabled={metadata.isPending || sendTransaction.isPending}
-                isInvalid={!!getFieldState("description", formState).error}
-              >
-                <FormLabel>Description</FormLabel>
-                <Textarea variant="filled" {...register("description")} />
-                <FormErrorMessage>
-                  {getFieldState("description", formState).error?.message}
-                </FormErrorMessage>
-              </FormControl>
-            </Flex>
-          </Flex>
-          <Flex direction="column" gap={4}>
-            <FormControl
-              isDisabled={metadata.isPending || sendTransaction.isPending}
-            >
-              <FormLabel>Social URLs</FormLabel>
-            </FormControl>
-            {fields.map((item, index) => (
-              <Flex key={item.id}>
-                <FormControl
-                  isDisabled={metadata.isPending || sendTransaction.isPending}
-                >
-                  <FormLabel textTransform="capitalize">
-                    {/* biome-ignore lint/suspicious/noExplicitAny: FIXME */}
-                    {(item as any).key ||
-                      extractDomain(
-                        watch(`dashboard_social_urls.${index}.value`),
-                      ) ||
-                      "New URL"}
-                  </FormLabel>
-                  <div className="flex flex-row gap-2">
-                    <Input
-                      isDisabled={
-                        metadata.isPending || sendTransaction.isPending
-                      }
-                      {...register(`dashboard_social_urls.${index}.value`)}
-                      placeholder="https://..."
-                      type="url"
+                  <div className="flex flex-col grow gap-6">
+                    {/* name */}
+                    <FormField
+                      control={form.control}
+                      name="name"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Name</FormLabel>
+                          <FormControl>
+                            <Input className="max-w-sm" {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
                     />
-                    <IconButton
-                      aria-label="Remove row"
-                      icon={<Trash2Icon className="size-5" />}
-                      isDisabled={
-                        metadata.isPending || sendTransaction.isPending
-                      }
-                      onClick={() => remove(index)}
+
+                    {/* description */}
+                    <FormField
+                      control={form.control}
+                      name="description"
+                      render={({ field }) => (
+                        <FormItem className="grow flex flex-col">
+                          <FormLabel>Description</FormLabel>
+                          <FormControl>
+                            <Textarea className="grow" {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
                     />
                   </div>
-                </FormControl>
-              </Flex>
-            ))}
-            <div>
-              <Button
-                borderRadius="md"
-                colorScheme="primary"
-                isDisabled={metadata.isPending || sendTransaction.isPending}
-                leftIcon={<PlusIcon className="size-5" />}
-                onClick={() => append({ key: "", value: "" })}
+                </div>
+
+                <div>
+                  <h3 className="text-sm font-medium mb-2">Social URLs</h3>
+                  <div className="space-y-4">
+                    {fields.map((item, index) => (
+                      <div
+                        key={item.id}
+                        className="flex flex-col lg:flex-row gap-3"
+                      >
+                        <FormField
+                          control={form.control}
+                          name={`dashboard_social_urls.${index}.key`}
+                          render={({ field }) => (
+                            <FormItem className="lg:max-w-[140px]">
+                              <FormControl>
+                                <Input
+                                  {...field}
+                                  aria-label="Platform"
+                                  placeholder="Platform"
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <FormField
+                          control={form.control}
+                          name={`dashboard_social_urls.${index}.value`}
+                          render={({ field }) => (
+                            <FormItem className="flex-1">
+                              <FormControl>
+                                <Input
+                                  {...field}
+                                  aria-label="Platform URL"
+                                  placeholder="https://..."
+                                  type="url"
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <Button
+                          variant="outline"
+                          className="rounded-full p-0 size-10 bg-background self-end"
+                          onClick={() => remove(index)}
+                          aria-label="Remove row"
+                        >
+                          <Trash2Icon className="size-4" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                  <div className="mt-4">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={() => append({ key: "", value: "" })}
+                      className="flex items-center gap-2 rounded-full"
+                    >
+                      <PlusIcon className="size-3.5" />
+                      Add URL
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+
+          <AdminOnly contract={contract}>
+            <div className="px-4 lg:px-6 py-3 border-t border-dashed flex justify-end">
+              <TransactionButton
+                client={contract.client}
+                disabled={metadata.isPending}
+                isLoggedIn={isLoggedIn}
+                isPending={sendTransaction.isPending}
+                transactionCount={undefined}
+                txChainID={contract.chain.id}
+                type="submit"
+                variant="default"
                 size="sm"
-                type="button"
               >
-                Add URL
-              </Button>
+                Save
+              </TransactionButton>
             </div>
-          </Flex>
-        </Flex>
-
-        <AdminOnly contract={contract}>
-          <TransactionButton
-            className="!rounded-t-none rounded-xl"
-            client={contract.client}
-            disabled={metadata.isPending || !formState.isDirty}
-            isLoggedIn={isLoggedIn}
-            isPending={sendTransaction.isPending}
-            transactionCount={1}
-            txChainID={contract.chain.id}
-            type="submit"
-          >
-            {sendTransaction.isPending
-              ? "Updating Metadata"
-              : "Update Metadata"}
-          </TransactionButton>
-        </AdminOnly>
-      </Flex>
-    </Card>
+          </AdminOnly>
+        </form>
+      </Form>
+    </div>
   );
 };
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/platform-fees.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/platform-fees.tsx
index c7294408fab..b543d518c24 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/platform-fees.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/platform-fees.tsx
@@ -1,11 +1,7 @@
 "use client";
-import { Flex, FormControl } from "@chakra-ui/react";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Card } from "chakra/card";
-import { FormErrorMessage, FormLabel } from "chakra/form";
-import { Heading } from "chakra/heading";
-import { Text } from "chakra/text";
 import { useForm } from "react-hook-form";
+import { toast } from "sonner";
 import type { ThirdwebContract } from "thirdweb";
 import {
   getPlatformFeeInfo,
@@ -21,9 +17,18 @@ import { BasisPointsInput } from "@/components/blocks/BasisPointsInput";
 import { AdminOnly } from "@/components/contracts/roles/admin-only";
 import { SolidityInput } from "@/components/solidity-inputs";
 import { TransactionButton } from "@/components/tx-button";
-import { useTxNotifications } from "@/hooks/useTxNotifications";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Skeleton } from "@/components/ui/skeleton";
 import { AddressOrEnsSchema, BasisPointsSchema } from "@/schema/schemas";
 import type { ExtensionDetectedState } from "@/types/ExtensionDetectedState";
+import { parseError } from "@/utils/errorParser";
 import { SettingDetectedState } from "./detected-state";
 
 // @internal
@@ -38,7 +43,7 @@ const CommonPlatformFeeSchema = z.object({
   platform_fee_recipient: AddressOrEnsSchema,
 });
 
-export const SettingsPlatformFees = ({
+export function SettingsPlatformFees({
   contract,
   detectedState,
   isLoggedIn,
@@ -46,7 +51,7 @@ export const SettingsPlatformFees = ({
   contract: ThirdwebContract;
   detectedState: ExtensionDetectedState;
   isLoggedIn: boolean;
-}) => {
+}) {
   const address = useActiveAccount()?.address;
   const sendAndConfirmTx = useSendAndConfirmTransaction();
   const platformFeesQuery = useReadContract(getPlatformFeeInfo, { contract });
@@ -63,114 +68,110 @@ export const SettingsPlatformFees = ({
     values: platformFeeInfo,
   });
 
-  const { onSuccess, onError } = useTxNotifications(
-    "Platform fee settings updated",
-    "Error updating platform fee settings",
-    contract,
-  );
-
   return (
-    <Card overflow="hidden" p={0} position="relative">
+    <div className="relative overflow-hidden bg-card border rounded-lg">
       <SettingDetectedState detectedState={detectedState} type="platformFee" />
-      <Flex
-        as="form"
-        direction="column"
-        onSubmit={form.handleSubmit((data) => {
-          const transaction = setPlatformFeeInfo({
-            contract,
-            platformFeeBps: BigInt(data.platform_fee_basis_points),
-            platformFeeRecipient: data.platform_fee_recipient,
-          });
-          sendAndConfirmTx.mutate(transaction, {
-            onError: (error) => {
-              console.error(error);
-              onError(error);
-            },
-            onSuccess: () => {
-              form.reset(data);
-              onSuccess();
-            },
-          });
-        })}
-      >
-        <Flex as="section" direction="column" gap={4} p={{ base: 6, md: 10 }}>
-          <Heading size="title.sm">Platform fee</Heading>
-          <Text fontStyle="italic" size="body.md">
-            The wallet address that should receive the revenue from platform
-            fees.
-          </Text>
-          <Flex direction={{ base: "column", md: "row" }} gap={4}>
-            <FormControl
-              isDisabled={!address}
-              isInvalid={
-                !!form.getFieldState("platform_fee_recipient", form.formState)
-                  .error
-              }
-            >
-              <FormLabel>Recipient Address</FormLabel>
-              <SolidityInput
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit((data) => {
+            const transaction = setPlatformFeeInfo({
+              contract,
+              platformFeeBps: BigInt(data.platform_fee_basis_points),
+              platformFeeRecipient: data.platform_fee_recipient,
+            });
+            sendAndConfirmTx.mutate(transaction, {
+              onError: (error) => {
+                toast.error("Error updating platform fee settings", {
+                  description: parseError(error),
+                });
+                console.error(error);
+              },
+              onSuccess: () => {
+                form.reset(data);
+                toast.success("Platform fee settings updated");
+              },
+            });
+          })}
+        >
+          <div className="p-4 md:p-6">
+            <div className="mb-6">
+              <h3 className="text-xl font-semibold tracking-tight">
+                Platform fee
+              </h3>
+              <p className="text-muted-foreground text-sm">
+                The wallet address that should receive the revenue from platform
+                fees
+              </p>
+            </div>
+
+            {platformFeesQuery.isPending ? (
+              <Skeleton className="h-[74px] w-full" />
+            ) : (
+              <div className="flex flex-col lg:flex-row gap-4 w-full">
+                <FormField
+                  control={form.control}
+                  name="platform_fee_recipient"
+                  render={({ field }) => (
+                    <FormItem className="grow max-w-md">
+                      <FormLabel>Recipient Address</FormLabel>
+                      <FormControl>
+                        <SolidityInput
+                          client={contract.client}
+                          formContext={form}
+                          className="bg-background"
+                          solidityType="address"
+                          disabled={!address || sendAndConfirmTx.isPending}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="platform_fee_basis_points"
+                  render={() => (
+                    <FormItem className="md:max-w-[200px]">
+                      <FormLabel>Percentage</FormLabel>
+                      <FormControl>
+                        <BasisPointsInput
+                          disabled={sendAndConfirmTx.isPending}
+                          onChange={(value) =>
+                            form.setValue("platform_fee_basis_points", value, {
+                              shouldValidate: true,
+                            })
+                          }
+                          value={form.watch("platform_fee_basis_points")}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+            )}
+          </div>
+
+          <AdminOnly contract={contract}>
+            <div className="p-4 lg:px-6 py-3 border-t border-dashed flex justify-end">
+              <TransactionButton
+                variant="default"
+                size="sm"
                 client={contract.client}
-                formContext={form}
-                solidityType="address"
-                {...form.register("platform_fee_recipient")}
-                disabled={!address || sendAndConfirmTx.isPending}
-              />
-              <FormErrorMessage>
-                {
-                  form.getFieldState("platform_fee_recipient", form.formState)
-                    .error?.message
-                }
-              </FormErrorMessage>
-            </FormControl>
-            <FormControl
-              isDisabled={!address}
-              isInvalid={
-                !!form.getFieldState(
-                  "platform_fee_basis_points",
-                  form.formState,
-                ).error
-              }
-              maxW={{ base: "100%", md: "200px" }}
-            >
-              <FormLabel>Percentage</FormLabel>
-              <BasisPointsInput
-                disabled={sendAndConfirmTx.isPending}
-                onChange={(value) =>
-                  form.setValue("platform_fee_basis_points", value, {
-                    shouldDirty: true,
-                    shouldTouch: true,
-                  })
-                }
-                value={form.watch("platform_fee_basis_points")}
-              />
-              <FormErrorMessage>
-                {
-                  form.getFieldState(
-                    "platform_fee_basis_points",
-                    form.formState,
-                  ).error?.message
-                }
-              </FormErrorMessage>
-            </FormControl>
-          </Flex>
-        </Flex>
-        <AdminOnly contract={contract}>
-          <TransactionButton
-            className="!rounded-t-none rounded-xl"
-            client={contract.client}
-            disabled={platformFeesQuery.isPending || !form.formState.isDirty}
-            isLoggedIn={isLoggedIn}
-            isPending={sendAndConfirmTx.isPending}
-            transactionCount={1}
-            txChainID={contract.chain.id}
-            type="submit"
-          >
-            {sendAndConfirmTx.isPending
-              ? "Updating Platform Fee Settings"
-              : "Update Platform Fee Settings"}
-          </TransactionButton>
-        </AdminOnly>
-      </Flex>
-    </Card>
+                disabled={!form.formState.isDirty}
+                isLoggedIn={isLoggedIn}
+                isPending={sendAndConfirmTx.isPending}
+                transactionCount={undefined}
+                txChainID={contract.chain.id}
+                type="submit"
+              >
+                Save
+              </TransactionButton>
+            </div>
+          </AdminOnly>
+        </form>
+      </Form>
+    </div>
   );
-};
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/primary-sale.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/primary-sale.tsx
index aa83570824d..cbc99abb1f2 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/primary-sale.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/primary-sale.tsx
@@ -1,10 +1,5 @@
 "use client";
-import { Flex, FormControl } from "@chakra-ui/react";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Card } from "chakra/card";
-import { FormErrorMessage, FormLabel } from "chakra/form";
-import { Heading } from "chakra/heading";
-import { Text } from "chakra/text";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
@@ -21,9 +16,18 @@ import { z } from "zod";
 import { AdminOnly } from "@/components/contracts/roles/admin-only";
 import { SolidityInput } from "@/components/solidity-inputs";
 import { TransactionButton } from "@/components/tx-button";
-import { useTxNotifications } from "@/hooks/useTxNotifications";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Skeleton } from "@/components/ui/skeleton";
 import { AddressOrEnsSchema } from "@/schema/schemas";
 import type { ExtensionDetectedState } from "@/types/ExtensionDetectedState";
+import { parseError } from "@/utils/errorParser";
 import { SettingDetectedState } from "./detected-state";
 
 const CommonPrimarySaleSchema = z.object({
@@ -56,90 +60,90 @@ export const SettingsPrimarySale = ({
     values: transformedQueryData,
   });
 
-  const { onSuccess, onError } = useTxNotifications(
-    "Primary sale address updated",
-    "Error updating primary sale address",
-    contract,
-  );
+  const onSubmit = (data: z.input<typeof CommonPrimarySaleSchema>) => {
+    const saleRecipient = data.primary_sale_recipient;
+    if (!saleRecipient) {
+      return toast.error("Please enter a valid primary sale recipient address");
+    }
+    const transaction = setPrimarySaleRecipient({
+      contract,
+      saleRecipient,
+    });
+
+    mutation.mutate(transaction, {
+      onError: (error) => {
+        toast.error("Error updating primary sale address", {
+          description: parseError(error),
+        });
+        console.error(error);
+      },
+      onSuccess: () => {
+        toast.success("Primary sale address updated");
+      },
+    });
+  };
 
   return (
-    <Card overflow="hidden" p={0} position="relative">
+    <div className="relative bg-card border rounded-lg">
       <SettingDetectedState detectedState={detectedState} type="primarySale" />
-      <Flex
-        as="form"
-        direction="column"
-        onSubmit={form.handleSubmit((d) => {
-          const saleRecipient = d.primary_sale_recipient;
-          if (!saleRecipient) {
-            return toast.error(
-              "Please enter a valid primary sale recipient address",
-            );
-          }
-          const transaction = setPrimarySaleRecipient({
-            contract,
-            saleRecipient,
-          });
-          // if we switch back to mutateAsync then *need* to catch errors
-          mutation.mutate(transaction, {
-            onError: (error) => {
-              console.error(error);
-              onError(error);
-            },
-            onSuccess: () => {
-              form.reset({ primary_sale_recipient: saleRecipient });
-              onSuccess();
-            },
-          });
-        })}
-      >
-        <Flex as="section" direction="column" gap={4} p={{ base: 6, md: 10 }}>
-          <Heading size="title.sm">Primary Sales</Heading>
-          <Text fontStyle="italic" size="body.md">
-            The wallet address that should receive the revenue from initial
-            sales of the assets.
-          </Text>
-          <Flex direction={{ base: "column", md: "row" }} gap={4}>
-            <FormControl
-              isDisabled={mutation.isPending || !address}
-              isInvalid={
-                !!form.getFieldState("primary_sale_recipient", form.formState)
-                  .error
-              }
-            >
-              <FormLabel>Recipient Address</FormLabel>
-              <SolidityInput
-                client={contract.client}
-                disabled={mutation.isPending || !address}
-                formContext={form}
-                solidityType="address"
-                {...form.register("primary_sale_recipient")}
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <div className="p-4 md:p-6">
+            {/* header */}
+            <div className="mb-6">
+              <h2 className="text-xl font-semibold tracking-tight">
+                Primary Sales
+              </h2>
+              <p className="text-muted-foreground text-sm">
+                The wallet address that should receive the revenue from initial
+                sales of the assets
+              </p>
+            </div>
+
+            {query.isPending ? (
+              <Skeleton className="h-[74px] w-full" />
+            ) : (
+              <FormField
+                control={form.control}
+                name="primary_sale_recipient"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Recipient Address</FormLabel>
+                    <FormControl>
+                      <SolidityInput
+                        client={contract.client}
+                        disabled={!address}
+                        formContext={form}
+                        solidityType="address"
+                        className="max-w-md"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
-              <FormErrorMessage>
-                {
-                  form.getFieldState("primary_sale_recipient", form.formState)
-                    .error?.message
-                }
-              </FormErrorMessage>
-            </FormControl>
-          </Flex>
-        </Flex>
-        <AdminOnly contract={contract}>
-          <TransactionButton
-            className="!rounded-t-none rounded-xl"
-            client={contract.client}
-            disabled={query.isPending || !form.formState.isDirty}
-            isLoggedIn={isLoggedIn}
-            isPending={mutation.isPending}
-            transactionCount={1}
-            txChainID={contract.chain.id}
-            type="submit"
-          >
-            {mutation.isPending
-              ? "Updating Primary Sale Settings"
-              : "Update Primary Sale Settings"}
-          </TransactionButton>
-        </AdminOnly>
-      </Flex>
-    </Card>
+            )}
+          </div>
+          <AdminOnly contract={contract}>
+            <div className="px-4 lg:px-6 py-3 border-t border-dashed flex justify-end">
+              <TransactionButton
+                client={contract.client}
+                disabled={query.isPending}
+                isLoggedIn={isLoggedIn}
+                isPending={mutation.isPending}
+                transactionCount={undefined}
+                txChainID={contract.chain.id}
+                type="submit"
+                variant="default"
+                size="sm"
+              >
+                Save
+              </TransactionButton>
+            </div>
+          </AdminOnly>
+        </form>
+      </Form>
+    </div>
   );
 };
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/royalties.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/royalties.tsx
index cbd774356c7..99cdf0297ee 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/royalties.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/royalties.tsx
@@ -1,10 +1,5 @@
 "use client";
-import { Flex, FormControl } from "@chakra-ui/react";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Card } from "chakra/card";
-import { FormErrorMessage, FormLabel } from "chakra/form";
-import { Heading } from "chakra/heading";
-import { Text } from "chakra/text";
 import { useForm } from "react-hook-form";
 import type { ThirdwebContract } from "thirdweb";
 import {
@@ -21,6 +16,15 @@ import { BasisPointsInput } from "@/components/blocks/BasisPointsInput";
 import { AdminOnly } from "@/components/contracts/roles/admin-only";
 import { SolidityInput } from "@/components/solidity-inputs";
 import { TransactionButton } from "@/components/tx-button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Skeleton } from "@/components/ui/skeleton";
 import { useTxNotifications } from "@/hooks/useTxNotifications";
 import { AddressOrEnsSchema, BasisPointsSchema } from "@/schema/schemas";
 import type { ExtensionDetectedState } from "@/types/ExtensionDetectedState";
@@ -51,7 +55,7 @@ const CommonRoyaltySchema = z.object({
   seller_fee_basis_points: BasisPointsSchema,
 });
 
-export const SettingsRoyalties = ({
+export function SettingsRoyalties({
   contract,
   detectedState,
   isLoggedIn,
@@ -59,7 +63,7 @@ export const SettingsRoyalties = ({
   contract: ThirdwebContract;
   detectedState: ExtensionDetectedState;
   isLoggedIn: boolean;
-}) => {
+}) {
   const query = useReadContract(getDefaultRoyaltyInfo, {
     contract,
   });
@@ -82,101 +86,105 @@ export const SettingsRoyalties = ({
   );
 
   return (
-    <Card overflow="hidden" p={0} position="relative">
+    <div className="relative overflow-hidden bg-card border rounded-lg">
       <SettingDetectedState detectedState={detectedState} type="royalties" />
-      <Flex
-        as="form"
-        direction="column"
-        onSubmit={form.handleSubmit((d) => {
-          const transaction = setDefaultRoyaltyInfo({
-            contract,
-            royaltyBps: BigInt(d.seller_fee_basis_points),
-            royaltyRecipient: d.fee_recipient,
-          });
-          mutation.mutate(transaction, {
-            onError: (error) => {
-              console.error(error);
-              onError(error);
-            },
-            onSuccess: () => {
-              form.reset(d);
-              onSuccess();
-            },
-          });
-        })}
-      >
-        <Flex as="section" direction="column" gap={4} p={{ base: 6, md: 10 }}>
-          <Heading size="title.sm">Royalties</Heading>
-          <Text fontStyle="italic" size="body.md">
-            The wallet address that should receive the revenue from royalties
-            earned from secondary sales of the assets.
-          </Text>
-          <Flex direction={{ base: "column", md: "row" }} gap={4}>
-            <FormControl
-              isDisabled={!address}
-              isInvalid={
-                !!form.getFieldState("fee_recipient", form.formState).error
-              }
-            >
-              <FormLabel>Recipient Address</FormLabel>
-              <SolidityInput
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit((d) => {
+            const transaction = setDefaultRoyaltyInfo({
+              contract,
+              royaltyBps: BigInt(d.seller_fee_basis_points),
+              royaltyRecipient: d.fee_recipient,
+            });
+            mutation.mutate(transaction, {
+              onError: (error) => {
+                console.error(error);
+                onError(error);
+              },
+              onSuccess: () => {
+                form.reset(d);
+                onSuccess();
+              },
+            });
+          })}
+        >
+          <div className="p-4 md:p-6">
+            <div className="mb-6">
+              <h3 className="text-xl font-semibold tracking-tight">
+                Royalties
+              </h3>
+              <p className="text-sm text-muted-foreground">
+                The wallet address that should receive the revenue from
+                royalties earned from secondary sales of the assets.
+              </p>
+            </div>
+
+            {query.isPending ? (
+              <Skeleton className="h-[74px] w-full" />
+            ) : (
+              <div className="flex flex-col md:flex-row gap-4">
+                <FormField
+                  control={form.control}
+                  name="fee_recipient"
+                  render={({ field }) => (
+                    <FormItem className="flex-1 max-w-md">
+                      <FormLabel>Recipient Address</FormLabel>
+                      <FormControl>
+                        <SolidityInput
+                          client={contract.client}
+                          formContext={form}
+                          solidityType="address"
+                          {...field}
+                          disabled={!address}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="seller_fee_basis_points"
+                  render={() => (
+                    <FormItem className="md:max-w-[200px]">
+                      <FormLabel>Percentage</FormLabel>
+                      <FormControl>
+                        <BasisPointsInput
+                          onChange={(value) =>
+                            form.setValue("seller_fee_basis_points", value, {
+                              shouldValidate: true,
+                            })
+                          }
+                          value={form.watch("seller_fee_basis_points")}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+            )}
+          </div>
+
+          <AdminOnly contract={contract}>
+            <div className="p-4 lg:px-6 py-3 border-t border-dashed flex justify-end">
+              <TransactionButton
                 client={contract.client}
-                formContext={form}
-                solidityType="address"
-                {...form.register("fee_recipient")}
-                disabled={!address}
-              />
-              <FormErrorMessage>
-                {
-                  form.getFieldState("fee_recipient", form.formState).error
-                    ?.message
-                }
-              </FormErrorMessage>
-            </FormControl>
-            <FormControl
-              isDisabled={!address}
-              isInvalid={
-                !!form.getFieldState("seller_fee_basis_points", form.formState)
-                  .error
-              }
-              maxW={{ base: "100%", md: "200px" }}
-            >
-              <FormLabel>Percentage</FormLabel>
-              <BasisPointsInput
-                onChange={(value) =>
-                  form.setValue("seller_fee_basis_points", value, {
-                    shouldDirty: true,
-                    shouldTouch: true,
-                  })
-                }
-                value={form.watch("seller_fee_basis_points")}
-              />
-              <FormErrorMessage>
-                {
-                  form.getFieldState("seller_fee_basis_points", form.formState)
-                    .error?.message
-                }
-              </FormErrorMessage>
-            </FormControl>
-          </Flex>
-        </Flex>
-        <AdminOnly contract={contract}>
-          <TransactionButton
-            className="!rounded-t-none rounded-xl"
-            client={contract.client}
-            disabled={query.isPending || !form.formState.isDirty}
-            isLoggedIn={isLoggedIn}
-            isPending={mutation.isPending}
-            transactionCount={1}
-            txChainID={contract.chain.id}
-            type="submit"
-          >
-            {mutation.isPending
-              ? "Updating Royalty Settings"
-              : "Update Royalty Settings"}
-          </TransactionButton>
-        </AdminOnly>
-      </Flex>
-    </Card>
+                size="sm"
+                variant="default"
+                disabled={query.isPending || !form.formState.isDirty}
+                isLoggedIn={isLoggedIn}
+                isPending={mutation.isPending}
+                transactionCount={undefined}
+                txChainID={contract.chain.id}
+                type="submit"
+              >
+                Save
+              </TransactionButton>
+            </div>
+          </AdminOnly>
+        </form>
+      </Form>
+    </div>
   );
-};
+}