diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index 942fb1de5b0..68c347994c1 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -34,7 +34,6 @@
     "@vercel/functions": "2.2.2",
     "@vercel/og": "^0.6.8",
     "abitype": "1.0.8",
-    "chakra-react-select": "^4.7.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "color": "5.0.0",
diff --git a/apps/dashboard/src/@/components/contract-components/contract-publish-form/abi-selector.tsx b/apps/dashboard/src/@/components/contract-components/contract-publish-form/abi-selector.tsx
index 8361fdecfec..6163a74e06e 100644
--- a/apps/dashboard/src/@/components/contract-components/contract-publish-form/abi-selector.tsx
+++ b/apps/dashboard/src/@/components/contract-components/contract-publish-form/abi-selector.tsx
@@ -1,20 +1,24 @@
 import type { Abi } from "abitype";
-import { Select } from "chakra-react-select";
 import { useMemo } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
-interface AbiSelectorProps {
-  abi: Abi;
-  defaultValue: string;
-  value: string;
-  onChange: (fn: string) => void;
-}
-
-export const AbiSelector: React.FC<AbiSelectorProps> = ({
+export function AbiSelector({
   abi,
   value,
   defaultValue,
   onChange,
-}) => {
+}: {
+  abi: Abi;
+  defaultValue: string;
+  value: string;
+  onChange: (fn: string) => void;
+}) {
   const options = useMemo(() => {
     return abi
       .filter((f) => f.type === "function")
@@ -26,24 +30,17 @@ export const AbiSelector: React.FC<AbiSelectorProps> = ({
   }, [abi]);
 
   return (
-    <div className="flex w-full flex-row items-center gap-2">
-      <Select
-        chakraStyles={{
-          container: (provided) => ({
-            ...provided,
-            width: "full",
-          }),
-        }}
-        defaultValue={options.find((o) => o.value === defaultValue)}
-        onChange={(selectedFn) => {
-          if (selectedFn) {
-            onChange((selectedFn as { label: string; value: string }).value);
-          }
-        }}
-        options={options}
-        placeholder="Select function"
-        value={options.find((o) => o.value === value)}
-      />
-    </div>
+    <Select value={value} onValueChange={onChange} defaultValue={defaultValue}>
+      <SelectTrigger className="w-full bg-card">
+        <SelectValue placeholder="Select function" />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
   );
-};
+}
diff --git a/apps/dashboard/src/@/components/contract-components/contract-publish-form/contract-params-fieldset.tsx b/apps/dashboard/src/@/components/contract-components/contract-publish-form/contract-params-fieldset.tsx
index 8b9204f8887..2dcb4eb10ad 100644
--- a/apps/dashboard/src/@/components/contract-components/contract-publish-form/contract-params-fieldset.tsx
+++ b/apps/dashboard/src/@/components/contract-components/contract-publish-form/contract-params-fieldset.tsx
@@ -1,4 +1,3 @@
-import { FormControl, useBreakpointValue } from "@chakra-ui/react";
 import type { AbiParameter } from "abitype";
 import { useId, useState } from "react";
 import { useFormContext } from "react-hook-form";
@@ -12,6 +11,7 @@ import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
+import { useIsMobile } from "@/hooks/use-mobile";
 import { getTemplateValuesForType } from "@/lib/deployment/template-values";
 import { DecodedInputArrayFieldset } from "./decoded-bytes-input/decoded-input-array-fieldset";
 import { RefInputFieldset } from "./ref-contract-input/ref-input-fieldset";
@@ -25,7 +25,7 @@ export const ContractParamsFieldset: React.FC<ContractParamsFieldsetProps> = ({
   client,
 }) => {
   const form = useFormContext();
-  const isMobile = useBreakpointValue({ base: true, md: false });
+  const isMobile = useIsMobile();
   const displayNameId = useId();
   const descriptionId = useId();
   const [isCustomInputEnabledArray, setIsCustomInputEnabledArray] = useState(
@@ -70,22 +70,20 @@ export const ContractParamsFieldset: React.FC<ContractParamsFieldsetProps> = ({
 
   return (
     <fieldset>
-      <h2 className="font-semibold text-3xl tracking-tight">
+      <h2 className="text-2xl font-semibold tracking-tight mb-1">
         Contract Parameters
       </h2>
-      <p className="text-muted-foreground">
+      <p className="text-muted-foreground text-sm mb-6">
         These are the parameters users will need to fill in when deploying this
         contract.
       </p>
 
-      <div className="h-6" />
-
       <div className="flex flex-col gap-8">
         {deployParams.map((param, idx) => {
           const paramTemplateValues = getTemplateValuesForType(param.type);
           return (
             <div
-              className="rounded-lg border border-border bg-card p-6"
+              className="rounded-lg border border-border bg-card p-4"
               key={`implementation_${param.name}`}
             >
               {/* Title + Type */}
@@ -100,12 +98,12 @@ export const ContractParamsFieldset: React.FC<ContractParamsFieldsetProps> = ({
                   )}
                 </h3>
                 <InlineCode
-                  className="px-2 text-base text-muted-foreground"
+                  className="px-2 text-muted-foreground text-sm"
                   code={param.type}
                 />
               </div>
 
-              <div className="h-5" />
+              <div className="h-4" />
 
               {/* Display Name */}
               <FormFieldSetup
@@ -140,7 +138,7 @@ export const ContractParamsFieldset: React.FC<ContractParamsFieldsetProps> = ({
                 />
               </FormFieldSetup>
 
-              <div className="h-5" />
+              <div className="h-4" />
 
               {/* Description */}
               <FormFieldSetup
@@ -217,25 +215,23 @@ export const ContractParamsFieldset: React.FC<ContractParamsFieldsetProps> = ({
 
                 {/* Inputs */}
                 {!isCustomInputEnabledArray[idx] ? (
-                  <FormControl>
-                    <SolidityInput
-                      className="!bg-background !text-sm placeholder:!text-sm"
-                      client={client}
-                      placeholder={
-                        isMobile ||
-                        paramTemplateValues?.[0]?.value ===
-                          "{{trusted_forwarders}}"
-                          ? "Pre-filled value."
-                          : "This value will be pre-filled in the deploy form."
-                      }
-                      solidityType={param.type}
-                      {...form.register(
-                        `constructorParams.${
-                          param.name ? param.name : "*"
-                        }.defaultValue`,
-                      )}
-                    />
-                  </FormControl>
+                  <SolidityInput
+                    className="!bg-background !text-sm placeholder:!text-sm"
+                    client={client}
+                    placeholder={
+                      isMobile ||
+                      paramTemplateValues?.[0]?.value ===
+                        "{{trusted_forwarders}}"
+                        ? "Pre-filled value."
+                        : "This value will be pre-filled in the deploy form."
+                    }
+                    solidityType={param.type}
+                    {...form.register(
+                      `constructorParams.${
+                        param.name ? param.name : "*"
+                      }.defaultValue`,
+                    )}
+                  />
                 ) : param.type === "address" || param.type === "address[]" ? (
                   <RefInputFieldset client={client} param={param} />
                 ) : (
diff --git a/apps/dashboard/src/@/components/contract-components/contract-publish-form/custom-factory.tsx b/apps/dashboard/src/@/components/contract-components/contract-publish-form/custom-factory.tsx
index 8a3a6852f69..20f1145f478 100644
--- a/apps/dashboard/src/@/components/contract-components/contract-publish-form/custom-factory.tsx
+++ b/apps/dashboard/src/@/components/contract-components/contract-publish-form/custom-factory.tsx
@@ -1,33 +1,26 @@
-import {
-  Box,
-  Flex,
-  FormControl,
-  IconButton,
-  Input,
-  ListItem,
-  UnorderedList,
-} from "@chakra-ui/react";
 import type { Abi } from "abitype";
-import { Button } from "chakra/button";
-import { Heading } from "chakra/heading";
-import { Text } from "chakra/text";
 import { PlusIcon, TrashIcon } from "lucide-react";
 import { type Dispatch, type SetStateAction, useEffect } from "react";
-import { Controller, useFieldArray, useFormContext } from "react-hook-form";
+import { useFieldArray, useFormContext } from "react-hook-form";
 import type { ThirdwebClient } from "thirdweb";
 import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
+import { Button } from "@/components/ui/button";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
 import { useCustomFactoryAbi } from "@/hooks/contract-hooks";
 import { AbiSelector } from "./abi-selector";
 
-interface CustomFactoryProps {
+export function CustomFactory(props: {
   setCustomFactoryAbi: Dispatch<SetStateAction<Abi>>;
   client: ThirdwebClient;
-}
-
-export const CustomFactory: React.FC<CustomFactoryProps> = ({
-  setCustomFactoryAbi,
-  client,
-}) => {
+}) {
+  const { setCustomFactoryAbi, client } = props;
   const form = useFormContext();
 
   const customFactoryAbi = useCustomFactoryAbi(
@@ -35,7 +28,6 @@ export const CustomFactory: React.FC<CustomFactoryProps> = ({
     form.watch("customFactoryAddresses[0].value"),
     form.watch("customFactoryAddresses[0].key"),
   );
-
   // FIXME: all of this logic needs to be reworked
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
@@ -58,102 +50,130 @@ export const CustomFactory: React.FC<CustomFactoryProps> = ({
   }, [fields, append]);
 
   return (
-    <Flex flexDir="column" gap={12} pb={0} px={0}>
-      <UnorderedList>
-        <Text as={ListItem}>
+    <div className="space-y-12">
+      {/* Description */}
+      <div className="space-y-1.5 text-sm text-muted-foreground">
+        <p>
           Use this if you want to invoke your own function with custom logic
           when users deploy your contract.
-        </Text>
-        <Text as={ListItem}>
+        </p>
+
+        <p>
           You need to have factory contracts pre-deployed to all networks that
           you want to support.
-        </Text>
-      </UnorderedList>
-      <Flex flexDir="column" gap={4}>
-        <Flex flexDir="column" gap={2}>
-          <Heading size="title.md">Factory contract addresses</Heading>
-          <Text>
-            Paste the contract address of your factory contracts. Your contract
-            can be deployed only to networks with valid factory address.
-          </Text>
-        </Flex>
-        {fields.map((field, index) => (
-          <div key={field.id}>
-            <FormControl as={Flex} gap={4} isRequired>
-              <Box w={{ base: "full", md: "40%" }}>
-                <Controller
-                  control={form.control}
-                  name={`customFactoryAddresses[${index}].key`}
-                  render={({ field: _field }) => {
-                    return (
-                      <SingleNetworkSelector
-                        chainId={_field.value}
-                        client={client}
-                        onChange={(value) => {
-                          _field.onChange(value);
-                        }}
+        </p>
+      </div>
+
+      {/* Factory contract addresses */}
+      <div>
+        <h2 className="text-xl font-semibold tracking-tight mb-1">
+          Factory contract addresses
+        </h2>
+
+        <p className="text-sm text-muted-foreground mb-4">
+          Paste the contract address of your factory contracts. Your contract
+          can be deployed only to networks with valid factory address.
+        </p>
+
+        <div className="space-y-3 mb-5">
+          {fields.map((field, index) => (
+            <div
+              key={field.id}
+              className="flex flex-col lg:flex-row gap-4 lg:items-end"
+            >
+              <FormField
+                control={form.control}
+                name={`customFactoryAddresses[${index}].key`}
+                render={({ field }) => (
+                  <FormItem className="w-full lg:w-80 space-y-1.5">
+                    <FormLabel>Network</FormLabel>
+                    <SingleNetworkSelector
+                      chainId={field.value}
+                      disableChainId
+                      className="bg-card"
+                      client={client}
+                      onChange={field.onChange}
+                    />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name={`customFactoryAddresses[${index}].value`}
+                render={({ field }) => (
+                  <FormItem className="grow space-y-1.5">
+                    <FormLabel>Factory contract address</FormLabel>
+                    <FormControl>
+                      <Input
+                        required
+                        className="bg-card"
+                        {...field}
+                        placeholder="0x..."
                       />
-                    );
-                  }}
-                />
-              </Box>
-              <Box w="full">
-                <Input
-                  isRequired
-                  {...form.register(`customFactoryAddresses[${index}].value`)}
-                  placeholder="Factory contract address"
-                />
-              </Box>
-              <IconButton
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Button
+                type="button"
+                variant="outline"
+                className="rounded-full p-0 size-10 bg-card self-end"
                 aria-label="Remove row"
-                icon={<TrashIcon className="size-5" />}
-                isDisabled={fields.length === 1 || form.formState.isSubmitting}
+                disabled={fields.length === 1 || form.formState.isSubmitting}
                 onClick={() => remove(index)}
-              />
-            </FormControl>
-          </div>
-        ))}
+              >
+                <TrashIcon className="size-4" />
+              </Button>
+            </div>
+          ))}
+        </div>
+
         <div>
           <Button
-            borderRadius="md"
-            colorScheme="primary"
-            leftIcon={<PlusIcon className="size-5" />}
-            onClick={() => append({ key: "", value: "" })}
+            variant="outline"
             size="sm"
-            type="button"
+            className="rounded-full bg-card"
+            onClick={() => append({ key: "", value: "" })}
           >
-            Add Network
+            <PlusIcon className="size-5 mr-2" /> Add Network
           </Button>
         </div>
-      </Flex>
-      <Flex flexDir="column" gap={4}>
-        <Flex flexDir="column" gap={2}>
-          <Heading size="title.md">Factory function</Heading>
-          <Text>Choose the factory function to deploy your contracts.</Text>
-        </Flex>
-        <FormControl isRequired>
-          {customFactoryAbi?.data ? (
-            <AbiSelector
-              abi={customFactoryAbi.data}
-              defaultValue="deployProxyByImplementation"
-              onChange={(selectedFn) =>
-                form.setValue(
-                  "factoryDeploymentData.customFactoryInput.factoryFunction",
-                  selectedFn,
-                )
-              }
-              value={form.watch(
+      </div>
+
+      {/* Factory function */}
+      <div>
+        <h2 className="text-xl font-semibold tracking-tight mb-1">
+          Factory function
+        </h2>
+
+        <p className="text-sm text-muted-foreground mb-4">
+          Choose the factory function to deploy your contracts.
+        </p>
+
+        {customFactoryAbi?.data ? (
+          <AbiSelector
+            abi={customFactoryAbi.data}
+            defaultValue="deployProxyByImplementation"
+            onChange={(selectedFn) =>
+              form.setValue(
                 "factoryDeploymentData.customFactoryInput.factoryFunction",
-              )}
-            />
-          ) : (
-            <Text fontStyle="italic">
-              Custom factory ABI not found. Please provide a valid imported
-              contract on the previous step.
-            </Text>
-          )}
-        </FormControl>
-      </Flex>
-    </Flex>
+                selectedFn,
+              )
+            }
+            value={form.watch(
+              "factoryDeploymentData.customFactoryInput.factoryFunction",
+            )}
+          />
+        ) : (
+          <p className="text-sm text-red-500 font-medium">
+            Custom factory ABI not found. Please provide a valid imported
+            contract on the previous step.
+          </p>
+        )}
+      </div>
+    </div>
   );
-};
+}
diff --git a/apps/dashboard/src/@/components/contract-components/contract-publish-form/default-factory.tsx b/apps/dashboard/src/@/components/contract-components/contract-publish-form/default-factory.tsx
index 5280c8c8f7f..a0be58a7333 100644
--- a/apps/dashboard/src/@/components/contract-components/contract-publish-form/default-factory.tsx
+++ b/apps/dashboard/src/@/components/contract-components/contract-publish-form/default-factory.tsx
@@ -1,10 +1,7 @@
-import { Flex, FormControl, ListItem, UnorderedList } from "@chakra-ui/react";
 import type { Abi } from "abitype";
-import { Heading } from "chakra/heading";
-import { Link } from "chakra/link";
-import { Text } from "chakra/text";
 import { useFormContext } from "react-hook-form";
 import type { ThirdwebClient } from "thirdweb";
+import { UnderlineLink } from "../../ui/UnderlineLink";
 import { AbiSelector } from "./abi-selector";
 import { NetworksFieldset } from "./networks-fieldset";
 
@@ -13,63 +10,62 @@ interface DefaultFactoryProps {
   client: ThirdwebClient;
 }
 
-export const DefaultFactory: React.FC<DefaultFactoryProps> = ({
-  abi,
-  client,
-}) => {
+export function DefaultFactory({ abi, client }: DefaultFactoryProps) {
   const form = useFormContext();
 
   return (
-    <Flex flexDir="column" gap={12} pb={0} px={0}>
-      <UnorderedList>
-        <Text as={ListItem}>
+    <div className="space-y-12">
+      {/* Description */}
+      <div className="space-y-1.5 text-sm text-muted-foreground">
+        <p>
           Default factory lets users deploy your contract to{" "}
-          <strong>any EVM network</strong>.
-        </Text>
-        <Text as={ListItem}>
+          <em className="font-medium">any EVM network</em>.
+        </p>
+        <p>
           The factory deploys EIP-1167 minimal proxies of your contract. This
           makes it much cheaper to deploy.
-        </Text>
-        <Text as={ListItem}>
+        </p>
+        <p>
           The factory is{" "}
-          <Link
-            color="primary.500"
+          <UnderlineLink
             href="https://github.com/thirdweb-dev/contracts/blob/main/contracts/TWStatelessFactory.sol"
-            isExternal
+            target="_blank"
+            rel="noopener noreferrer"
           >
             open-source
-          </Link>
+          </UnderlineLink>
           , permissionless, and does not alter contract ownership.
-        </Text>
-        <Text as={ListItem}>
+        </p>
+        <p>
           Your contract needs to be written in the upgradeable/initializable
           pattern. It needs to contain an initializer function.
-        </Text>
-      </UnorderedList>
-      <Flex flexDir="column" gap={4}>
-        <Flex flexDir="column" gap={2}>
-          <Heading size="title.md">Initializer function</Heading>
-          <Text>
-            Choose the initializer function to invoke on your proxy contracts.
-          </Text>
-        </Flex>
-        <FormControl isRequired>
-          <AbiSelector
-            abi={abi}
-            defaultValue="initialize"
-            onChange={(selectedFn) =>
-              form.setValue(
-                "factoryDeploymentData.implementationInitializerFunction",
-                selectedFn,
-              )
-            }
-            value={form.watch(
+        </p>
+      </div>
+
+      {/* Initializer function */}
+      <div>
+        <h3 className="text-lg font-semibold mb-1">Initializer function</h3>
+        <p className="text-muted-foreground text-sm mb-4">
+          Choose the initializer function to invoke on your proxy contracts.
+        </p>
+
+        <AbiSelector
+          abi={abi}
+          defaultValue="initialize"
+          onChange={(selectedFn) =>
+            form.setValue(
               "factoryDeploymentData.implementationInitializerFunction",
-            )}
-          />
-        </FormControl>
-      </Flex>
+              selectedFn,
+            )
+          }
+          value={form.watch(
+            "factoryDeploymentData.implementationInitializerFunction",
+          )}
+        />
+      </div>
+
+      {/* Networks */}
       <NetworksFieldset client={client} />
-    </Flex>
+    </div>
   );
-};
+}
diff --git a/apps/dashboard/src/@/components/contract-components/contract-publish-form/external-links-fieldset.tsx b/apps/dashboard/src/@/components/contract-components/contract-publish-form/external-links-fieldset.tsx
index 5aa04019775..1b6c1df274f 100644
--- a/apps/dashboard/src/@/components/contract-components/contract-publish-form/external-links-fieldset.tsx
+++ b/apps/dashboard/src/@/components/contract-components/contract-publish-form/external-links-fieldset.tsx
@@ -1,5 +1,4 @@
 import { PlusIcon } from "lucide-react";
-import { useEffect } from "react";
 import { useFieldArray, useFormContext } from "react-hook-form";
 import { Button } from "@/components/ui/button";
 import { ExternalLinksInput } from "./external-links-input";
@@ -12,35 +11,26 @@ export const ExternalLinksFieldset = () => {
     name: "externalLinks",
   });
 
-  // FIXME: all of this logic needs to be reworked
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    if (fields.length === 0) {
-      append(
-        {
-          name: "",
-          url: "",
-        },
-        { shouldFocus: false },
-      );
-    }
-  }, [fields, append]);
-
   return (
-    <fieldset className="flex flex-col gap-8">
-      <div className="flex flex-col gap-2">
-        <h3 className="font-semibold text-xl tracking-tight">Resources</h3>
-        <p className="text-muted-foreground">
+    <fieldset>
+      <div>
+        <h3 className="font-semibold text-xl tracking-tight mb-1">Resources</h3>
+        <p className="text-muted-foreground text-sm mb-5">
           Provide links to docs, usage guides etc. for the contract.
         </p>
       </div>
       <div className="flex flex-col gap-4">
         {fields.map((item, index) => (
-          <ExternalLinksInput index={index} key={item.id} remove={remove} />
+          <ExternalLinksInput
+            index={index}
+            key={item.id}
+            remove={remove}
+            disableRemove={fields.length === 1}
+          />
         ))}
         <div>
           <Button
-            className="gap-2"
+            className="gap-2 bg-card rounded-full"
             onClick={() =>
               append({
                 name: "",
@@ -51,7 +41,7 @@ export const ExternalLinksFieldset = () => {
             type="button"
             variant="outline"
           >
-            <PlusIcon className="size-5" />
+            <PlusIcon className="size-4" />
             Add Resource
           </Button>
         </div>
diff --git a/apps/dashboard/src/@/components/contract-components/contract-publish-form/external-links-input.tsx b/apps/dashboard/src/@/components/contract-components/contract-publish-form/external-links-input.tsx
index 0c5241653e2..7c9c3af085d 100644
--- a/apps/dashboard/src/@/components/contract-components/contract-publish-form/external-links-input.tsx
+++ b/apps/dashboard/src/@/components/contract-components/contract-publish-form/external-links-input.tsx
@@ -3,82 +3,82 @@ import { useFormContext } from "react-hook-form";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Separator } from "@/components/ui/separator";
 
 interface ExternalLinksInputProps {
   index: number;
   remove: (index: number) => void;
+  disableRemove: boolean;
 }
 
 export const ExternalLinksInput: React.FC<ExternalLinksInputProps> = ({
   index,
   remove,
+  disableRemove,
 }) => {
   const form = useFormContext();
 
   return (
-    <div className="flex flex-col gap-2">
-      <div className="flex w-full flex-col gap-4 md:flex-row md:gap-2">
-        <div className="flex flex-1 flex-col gap-1">
-          <Label className="capitalize" htmlFor={`externalLinks.${index}.name`}>
-            Resource Name
-          </Label>
-          <Input
-            id={`externalLinks.${index}.name`}
-            placeholder="Resource name"
-            {...form.register(`externalLinks.${index}.name`)}
-          />
-          {form.getFieldState(`externalLinks.${index}.name`, form.formState)
-            .error?.message && (
-            <p className="text-destructive-text text-sm">
-              {
-                form.getFieldState(
-                  `externalLinks.${index}.name`,
-                  form.formState,
-                ).error?.message
-              }
-            </p>
-          )}
-        </div>
-        <div className="flex flex-1 flex-col gap-1">
-          <Label className="capitalize" htmlFor={`externalLinks.${index}.url`}>
-            Link
-          </Label>
-          <Input
-            id={`externalLinks.${index}.url`}
-            placeholder="Provide URL to the resource page"
-            {...form.register(`externalLinks.${index}.url`, {
-              required: true,
-              validate: (value: string) => {
-                if (value.match(new RegExp(/^https:\/\/[^\s/$.?#].[^\s]*$/))) {
-                  return true;
-                }
-                return "Provide a valid URL";
-              },
-            })}
-          />
-          {form.getFieldState(`externalLinks.${index}.url`, form.formState)
-            .error?.message && (
-            <p className="text-destructive-text text-sm">
-              {
-                form.getFieldState(`externalLinks.${index}.url`, form.formState)
-                  .error?.message
+    <div className="flex w-full flex-col gap-3 md:flex-row">
+      {/* Resource name */}
+      <div className="flex flex-1 flex-col gap-2">
+        <Label className="capitalize" htmlFor={`externalLinks.${index}.name`}>
+          Name
+        </Label>
+        <Input
+          id={`externalLinks.${index}.name`}
+          {...form.register(`externalLinks.${index}.name`)}
+          className="bg-card"
+        />
+        {form.getFieldState(`externalLinks.${index}.name`, form.formState).error
+          ?.message && (
+          <p className="text-destructive-text text-sm">
+            {
+              form.getFieldState(`externalLinks.${index}.name`, form.formState)
+                .error?.message
+            }
+          </p>
+        )}
+      </div>
+
+      {/* Resource URL */}
+      <div className="flex flex-1 flex-col gap-2">
+        <Label className="capitalize" htmlFor={`externalLinks.${index}.url`}>
+          Link
+        </Label>
+        <Input
+          id={`externalLinks.${index}.url`}
+          className="bg-card"
+          {...form.register(`externalLinks.${index}.url`, {
+            required: true,
+            validate: (value: string) => {
+              if (value.match(new RegExp(/^https:\/\/[^\s/$.?#].[^\s]*$/))) {
+                return true;
               }
-            </p>
-          )}
-        </div>
-        <Button
-          aria-label="Remove row"
-          className="self-end"
-          onClick={() => remove(index)}
-          size="icon"
-          variant="ghost"
-        >
-          <TrashIcon className="size-5" />
-          <span className="sr-only">Remove row</span>
-        </Button>
+              return "Provide a valid URL";
+            },
+          })}
+        />
+        {form.getFieldState(`externalLinks.${index}.url`, form.formState).error
+          ?.message && (
+          <p className="text-destructive-text text-sm">
+            {
+              form.getFieldState(`externalLinks.${index}.url`, form.formState)
+                .error?.message
+            }
+          </p>
+        )}
       </div>
-      <Separator />
+
+      <Button
+        className="self-end rounded-full p-0 bg-card"
+        disabled={disableRemove}
+        onClick={() => remove(index)}
+        size="icon"
+        variant="outline"
+        aria-label="Remove resource"
+      >
+        <TrashIcon className="size-4" />
+      </Button>
     </div>
   );
 };
diff --git a/apps/dashboard/src/@/components/contract-components/contract-publish-form/factory-fieldset.tsx b/apps/dashboard/src/@/components/contract-components/contract-publish-form/factory-fieldset.tsx
index 33a040c06f0..61ff780938e 100644
--- a/apps/dashboard/src/@/components/contract-components/contract-publish-form/factory-fieldset.tsx
+++ b/apps/dashboard/src/@/components/contract-components/contract-publish-form/factory-fieldset.tsx
@@ -1,10 +1,8 @@
-import { ButtonGroup, Flex } from "@chakra-ui/react";
 import type { Abi } from "abitype";
-import { Button } from "chakra/button";
-import { Heading } from "chakra/heading";
 import type { Dispatch, SetStateAction } from "react";
 import { useFormContext } from "react-hook-form";
 import type { ThirdwebClient } from "thirdweb";
+import { TabButtons } from "../../ui/tabs";
 import { CustomFactory } from "./custom-factory";
 import { DefaultFactory } from "./default-factory";
 
@@ -20,47 +18,45 @@ export const FactoryFieldset: React.FC<FactoryFieldsetProps> = ({
   client,
 }) => {
   const form = useFormContext();
+  const tab = form.watch("deployType");
 
   return (
-    <Flex as="fieldset" direction="column" gap={12}>
-      <Flex direction="column" gap={6}>
-        <Heading size="title.lg">Factory deploy settings</Heading>
-        <ButtonGroup size="sm" spacing={{ base: 0.5, md: 2 }} variant="ghost">
-          <Button
-            _active={{
-              bg: "bgBlack",
-              color: "bgWhite",
-            }}
-            isActive={form.watch("deployType") === "autoFactory"}
-            onClick={() => form.setValue("deployType", "autoFactory")}
-            rounded="lg"
-            type="button"
-          >
-            Default Factory
-          </Button>
-          <Button
-            _active={{
-              bg: "bgBlack",
-              color: "bgWhite",
-            }}
-            isActive={form.watch("deployType") === "customFactory"}
-            onClick={() => form.setValue("deployType", "customFactory")}
-            rounded="lg"
-            type="button"
-          >
-            Custom Factory (Advanced)
-          </Button>
-        </ButtonGroup>
-        {form.watch("deployType") === "autoFactory" && (
-          <DefaultFactory abi={abi} client={client} />
-        )}
-        {form.watch("deployType") === "customFactory" && (
-          <CustomFactory
-            client={client}
-            setCustomFactoryAbi={setCustomFactoryAbi}
-          />
-        )}
-      </Flex>
-    </Flex>
+    <div>
+      <h2 className="text-2xl font-semibold tracking-tight mb-1">
+        Factory deploy settings
+      </h2>
+      <p className="text-muted-foreground mb-6">
+        Choose how you want to deploy your contract
+      </p>
+
+      <TabButtons
+        tabClassName="!text-sm font-semibold"
+        tabs={[
+          {
+            name: "Default Factory",
+            onClick: () => form.setValue("deployType", "autoFactory"),
+            isActive: tab === "autoFactory",
+          },
+          {
+            name: "Custom Factory (Advanced)",
+            onClick: () => form.setValue("deployType", "customFactory"),
+            isActive: tab === "customFactory",
+          },
+        ]}
+      />
+
+      <div className="h-4" />
+
+      {form.watch("deployType") === "autoFactory" && (
+        <DefaultFactory abi={abi} client={client} />
+      )}
+
+      {form.watch("deployType") === "customFactory" && (
+        <CustomFactory
+          client={client}
+          setCustomFactoryAbi={setCustomFactoryAbi}
+        />
+      )}
+    </div>
   );
 };
diff --git a/apps/dashboard/src/@/components/contract-components/contract-publish-form/impl-params-fieldset.tsx b/apps/dashboard/src/@/components/contract-components/contract-publish-form/impl-params-fieldset.tsx
index 743bd80cd1d..f17a3409cd5 100644
--- a/apps/dashboard/src/@/components/contract-components/contract-publish-form/impl-params-fieldset.tsx
+++ b/apps/dashboard/src/@/components/contract-components/contract-publish-form/impl-params-fieldset.tsx
@@ -1,4 +1,3 @@
-import { FormControl, useBreakpointValue } from "@chakra-ui/react";
 import type { AbiParameter } from "abitype";
 import { useState } from "react";
 import { useFormContext } from "react-hook-form";
@@ -7,6 +6,7 @@ import { SolidityInput } from "@/components/solidity-inputs";
 import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
 import { InlineCode } from "@/components/ui/inline-code";
 import { Switch } from "@/components/ui/switch";
+import { useIsMobile } from "@/hooks/use-mobile";
 import { getTemplateValuesForType } from "@/lib/deployment/template-values";
 import { RefInputImplFieldset } from "./ref-contract-impl-input/ref-input-impl-fieldset";
 
@@ -19,7 +19,7 @@ export const ImplementationParamsFieldset: React.FC<
 > = ({ implParams, client }) => {
   const form = useFormContext();
 
-  const isMobile = useBreakpointValue({ base: true, md: false });
+  const isMobile = useIsMobile();
 
   const [isCustomInputEnabled, setIsCustomInputEnabled] = useState(
     Array(implParams.length).fill(false),
@@ -119,25 +119,23 @@ export const ImplementationParamsFieldset: React.FC<
                 </div>
 
                 {!isCustomInputEnabled[idx] ? (
-                  <FormControl>
-                    <SolidityInput
-                      className="!bg-background !text-sm placeholder:!text-sm"
-                      client={client}
-                      placeholder={
-                        isMobile ||
-                        paramTemplateValues?.[0]?.value ===
-                          "{{trusted_forwarders}}"
-                          ? "Pre-filled value."
-                          : "This value will be pre-filled in the deploy form."
-                      }
-                      solidityType={param.type}
-                      {...form.register(
-                        `implConstructorParams.${
-                          param.name ? param.name : "*"
-                        }.defaultValue`,
-                      )}
-                    />
-                  </FormControl>
+                  <SolidityInput
+                    className="!bg-background !text-sm placeholder:!text-sm"
+                    client={client}
+                    placeholder={
+                      isMobile ||
+                      paramTemplateValues?.[0]?.value ===
+                        "{{trusted_forwarders}}"
+                        ? "Pre-filled value."
+                        : "This value will be pre-filled in the deploy form."
+                    }
+                    solidityType={param.type}
+                    {...form.register(
+                      `implConstructorParams.${
+                        param.name ? param.name : "*"
+                      }.defaultValue`,
+                    )}
+                  />
                 ) : (
                   <RefInputImplFieldset client={client} param={param} />
                 )}
diff --git a/apps/dashboard/src/@/components/contract-components/contract-publish-form/index.tsx b/apps/dashboard/src/@/components/contract-components/contract-publish-form/index.tsx
index e1fd22191be..3414ce1ec0a 100644
--- a/apps/dashboard/src/@/components/contract-components/contract-publish-form/index.tsx
+++ b/apps/dashboard/src/@/components/contract-components/contract-publish-form/index.tsx
@@ -1,9 +1,6 @@
 "use client";
-import { Box, Divider, Flex, IconButton } from "@chakra-ui/react";
 import type { Abi } from "abitype";
-import { Button } from "chakra/button";
-import { Text } from "chakra/text";
-import { ChevronFirstIcon } from "lucide-react";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
 import { useId, useMemo, useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import type { ThirdwebClient } from "thirdweb";
@@ -15,6 +12,8 @@ import {
 import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
 import { reportContractPublished } from "@/analytics/report";
 import { CustomConnectWallet } from "@/components/connect-wallet";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
 import {
   DASHBOARD_ENGINE_RELAYER_URL,
   DASHBOARD_FORWARDER_ADDRESS,
@@ -22,7 +21,6 @@ import {
 import { useEns, useFunctionParamsFromABI } from "@/hooks/contract-hooks";
 import { useTxNotifications } from "@/hooks/useTxNotifications";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
 import { ContractParamsFieldset } from "./contract-params-fieldset";
 import { FactoryFieldset } from "./factory-fieldset";
 import { ImplementationParamsFieldset } from "./impl-params-fieldset";
@@ -183,284 +181,238 @@ export function ContractPublishForm(props: {
   // during loading and after success we should stay in loading state
   const isPending = sendTx.isPending || sendTx.isSuccess;
 
-  useIsomorphicLayoutEffect(() => {
-    window?.scrollTo({
-      behavior: "smooth",
-      top: 0,
-    });
-  }, []);
-
   const formId = useId();
 
   return (
     <FormProvider {...form}>
-      <div className="w-full">
-        <Flex
-          as="form"
-          direction="column"
-          gap={6}
-          id={formId}
-          onSubmit={form.handleSubmit((data) => {
-            if (!account) {
-              // no account, do nothing
-              return;
-            }
-            const addressArray =
-              Object.keys(data?.customFactoryAddresses || {}).length > 0
-                ? (data?.customFactoryAddresses as unknown as {
-                    key: number;
-                    value: string;
-                  }[])
-                : [];
+      <form
+        className="flex flex-col gap-6"
+        id={formId}
+        onSubmit={form.handleSubmit((data) => {
+          if (!account) {
+            // no account, do nothing
+            return;
+          }
+          const addressArray =
+            Object.keys(data?.customFactoryAddresses || {}).length > 0
+              ? (data?.customFactoryAddresses as unknown as {
+                  key: number;
+                  value: string;
+                }[])
+              : [];
 
-            const addressObj = addressArray.reduce<Record<number, string>>(
-              (obj, item) => {
-                obj[item.key] = item.value;
-                return obj;
-              },
-              {},
-            );
+          const addressObj = addressArray.reduce<Record<number, string>>(
+            (obj, item) => {
+              obj[item.key] = item.value;
+              return obj;
+            },
+            {},
+          );
 
-            const metadata = {
-              ...data,
-              factoryDeploymentData: {
-                ...data.factoryDeploymentData,
-                customFactoryInput: {
-                  customFactoryAddresses:
-                    addressObj ||
-                    data.factoryDeploymentData?.customFactoryInput
-                      ?.customFactoryAddresses,
-                  factoryFunction:
-                    data.factoryDeploymentData?.customFactoryInput
-                      ?.factoryFunction || "deployProxyByImplementation",
-                  params:
-                    data.factoryDeploymentData?.customFactoryInput?.params ||
-                    [],
-                },
-                implementationAddresses:
-                  data.factoryDeploymentData?.implementationAddresses || {},
-                implementationInitializerFunction:
-                  data.factoryDeploymentData
-                    ?.implementationInitializerFunction || "initialize",
-              },
-              networksForDeployment: {
-                allNetworks:
-                  data.deployType === "customFactory"
-                    ? false
-                    : data.networksForDeployment?.allNetworks,
-                networksEnabled:
-                  addressArray.length > 0
-                    ? Object.keys(addressObj).map((val) => Number(val))
-                    : data.networksForDeployment?.networksEnabled,
+          const metadata = {
+            ...data,
+            factoryDeploymentData: {
+              ...data.factoryDeploymentData,
+              customFactoryInput: {
+                customFactoryAddresses:
+                  addressObj ||
+                  data.factoryDeploymentData?.customFactoryInput
+                    ?.customFactoryAddresses,
+                factoryFunction:
+                  data.factoryDeploymentData?.customFactoryInput
+                    ?.factoryFunction || "deployProxyByImplementation",
+                params:
+                  data.factoryDeploymentData?.customFactoryInput?.params || [],
               },
-            } satisfies FetchDeployMetadataResult & {
-              name: string;
-              version: string;
-            };
+              implementationAddresses:
+                data.factoryDeploymentData?.implementationAddresses || {},
+              implementationInitializerFunction:
+                data.factoryDeploymentData?.implementationInitializerFunction ||
+                "initialize",
+            },
+            networksForDeployment: {
+              allNetworks:
+                data.deployType === "customFactory"
+                  ? false
+                  : data.networksForDeployment?.allNetworks,
+              networksEnabled:
+                addressArray.length > 0
+                  ? Object.keys(addressObj).map((val) => Number(val))
+                  : data.networksForDeployment?.networksEnabled,
+            },
+          } satisfies FetchDeployMetadataResult & {
+            name: string;
+            version: string;
+          };
 
-            const tx = publishContract({
-              account,
-              contract: getContractPublisher(props.client),
-              metadata,
-              previousMetadata: props.publishMetadata,
-            });
+          const tx = publishContract({
+            account,
+            contract: getContractPublisher(props.client),
+            metadata,
+            previousMetadata: props.publishMetadata,
+          });
 
-            sendTx.mutate(tx, {
-              onError: (err) => {
-                console.error("Failed to publish contract", err);
-                onError(err);
-              },
-              onSuccess: async () => {
-                onSuccess();
+          sendTx.mutate(tx, {
+            onError: (err) => {
+              console.error("Failed to publish contract", err);
+              onError(err);
+            },
+            onSuccess: async () => {
+              onSuccess();
 
-                reportContractPublished({
-                  contractName: props.publishMetadata.name,
-                  deployType: data.deployType,
-                  publisher: ensNameOrAddress ?? "",
-                  version: data.version,
-                });
-                await props.onPublishSuccess().catch((err) => {
-                  console.error("Failed to run onPublishSuccess", err);
-                });
-                if (successRedirectUrl) {
-                  router.push(successRedirectUrl, { scroll: true });
-                }
-              },
-            });
-          })}
-        >
-          {fieldsetToShow !== "landing" && (
-            <div>
-              <IconButton
-                aria-label="Back"
-                icon={<ChevronFirstIcon className="size-6" />}
-                onClick={() =>
-                  fieldsetToShow === "contractParams" &&
-                  (form.watch("deployType") === "autoFactory" ||
-                    form.watch("deployType") === "customFactory")
-                    ? setFieldsetToShow("factory")
-                    : fieldsetToShow === "contractParams" &&
-                        form.watch("deployType") === "standard"
-                      ? setFieldsetToShow("networks")
-                      : fieldsetToShow === "implParams"
-                        ? setFieldsetToShow("contractParams")
-                        : setFieldsetToShow("landing")
-                }
-                variant="ghost"
-                w="inherit"
-              >
-                Back
-              </IconButton>
-            </div>
-          )}
+              reportContractPublished({
+                contractName: props.publishMetadata.name,
+                deployType: data.deployType,
+                publisher: ensNameOrAddress ?? "",
+                version: data.version,
+              });
+              await props.onPublishSuccess().catch((err) => {
+                console.error("Failed to run onPublishSuccess", err);
+              });
+              if (successRedirectUrl) {
+                router.push(successRedirectUrl, { scroll: true });
+              }
+            },
+          });
+        })}
+      >
+        {fieldsetToShow !== "landing" && (
+          <div>
+            <Button
+              size="sm"
+              className="-translate-x-3"
+              variant="ghost"
+              onClick={() =>
+                fieldsetToShow === "contractParams" &&
+                (form.watch("deployType") === "autoFactory" ||
+                  form.watch("deployType") === "customFactory")
+                  ? setFieldsetToShow("factory")
+                  : fieldsetToShow === "contractParams" &&
+                      form.watch("deployType") === "standard"
+                    ? setFieldsetToShow("networks")
+                    : fieldsetToShow === "implParams"
+                      ? setFieldsetToShow("contractParams")
+                      : setFieldsetToShow("landing")
+              }
+            >
+              <ArrowLeftIcon className="size-4 mr-2" />
+              Back
+            </Button>
+          </div>
+        )}
 
-          {fieldsetToShow === "landing" && (
-            <LandingFieldset
-              client={props.client}
-              latestVersion={latestVersion}
-              placeholderVersion={placeholderVersion}
-            />
-          )}
+        {fieldsetToShow === "landing" && (
+          <LandingFieldset
+            client={props.client}
+            latestVersion={latestVersion}
+            placeholderVersion={placeholderVersion}
+          />
+        )}
 
-          {fieldsetToShow === "contractParams" && (
-            <ContractParamsFieldset
+        {fieldsetToShow === "contractParams" && (
+          <ContractParamsFieldset
+            client={props.client}
+            deployParams={deployParams}
+          />
+        )}
+
+        {fieldsetToShow === "implParams" && implDeployParams?.length > 0 && (
+          <ImplementationParamsFieldset
+            client={props.client}
+            implParams={implDeployParams}
+          />
+        )}
+
+        {fieldsetToShow === "factory" && (
+          <div className="flex flex-col gap-24">
+            <FactoryFieldset
+              abi={props.publishMetadata.abi || []}
               client={props.client}
-              deployParams={deployParams}
+              setCustomFactoryAbi={setCustomFactoryAbi}
             />
-          )}
+          </div>
+        )}
+
+        {fieldsetToShow === "networks" && (
+          <NetworksFieldset client={props.client} />
+        )}
 
-          {fieldsetToShow === "implParams" && implDeployParams?.length > 0 && (
-            <ImplementationParamsFieldset
+        <div className="flex items-center gap-4 justify-end border-t py-6 mt-6">
+          {!account ? (
+            <CustomConnectWallet
               client={props.client}
-              implParams={implDeployParams}
+              isLoggedIn={props.isLoggedIn}
             />
-          )}
-
-          {fieldsetToShow === "factory" && (
-            <Flex flexDir="column" gap={24}>
-              <FactoryFieldset
-                abi={props.publishMetadata.abi || []}
-                client={props.client}
-                setCustomFactoryAbi={setCustomFactoryAbi}
-              />
-            </Flex>
-          )}
+          ) : fieldsetToShow === "landing" &&
+            form.watch("deployType") === "standard" ? (
+            <NextButton
+              disabled={disableNext}
+              onClick={() => setFieldsetToShow("networks")}
+            />
+          ) : fieldsetToShow === "landing" &&
+            (form.watch("deployType") === "autoFactory" ||
+              form.watch("deployType") === "customFactory") ? (
+            <NextButton
+              disabled={disableNext}
+              onClick={() => setFieldsetToShow("factory")}
+            />
+          ) : fieldsetToShow !== "contractParams" &&
+            fieldsetToShow !== "implParams" &&
+            deployParams?.length > 0 ? (
+            <NextButton
+              disabled={disableNext}
+              onClick={() => setFieldsetToShow("contractParams")}
+            />
+          ) : fieldsetToShow !== "contractParams" &&
+            fieldsetToShow !== "implParams" &&
+            deployParams?.length === 0 &&
+            implDeployParams?.length > 0 ? (
+            <NextButton
+              disabled={disableNext}
+              onClick={() => setFieldsetToShow("implParams")}
+            />
+          ) : fieldsetToShow === "contractParams" &&
+            implDeployParams?.length > 0 ? (
+            <NextButton
+              disabled={disableNext}
+              onClick={() => setFieldsetToShow("implParams")}
+            />
+          ) : (
+            <div className="flex items-start justify-between gap-4 w-full">
+              <span className="text-sm text-muted-foreground">
+                Publishing your contract is free, we cover all gas costs
+              </span>
 
-          {fieldsetToShow === "networks" && (
-            <Flex flexDir="column" gap={24}>
-              <NetworksFieldset client={props.client} fromStandard />
-            </Flex>
+              <Button
+                className="gap-2"
+                form={formId}
+                disabled={isDisabled}
+                type="submit"
+              >
+                {isPending && <Spinner className="size-4" />}
+                {sendTx.isSuccess
+                  ? "Preparing page"
+                  : sendTx.isPending
+                    ? "Publishing contract"
+                    : "Publish Contract"}
+              </Button>
+            </div>
           )}
-
-          <Flex flexDir="column" gap={6}>
-            <Divider />
-            <Flex
-              alignItems="center"
-              flexDir={{ base: "column", md: "row" }}
-              gap={4}
-              justifyContent="space-between"
-            >
-              {!account ? (
-                <>
-                  <Box />
-                  <CustomConnectWallet
-                    client={props.client}
-                    isLoggedIn={props.isLoggedIn}
-                  />
-                </>
-              ) : fieldsetToShow === "landing" &&
-                form.watch("deployType") === "standard" ? (
-                <>
-                  <Box />
-                  <Button
-                    colorScheme="primary"
-                    isDisabled={disableNext}
-                    onClick={() => setFieldsetToShow("networks")}
-                  >
-                    Next
-                  </Button>
-                </>
-              ) : fieldsetToShow === "landing" &&
-                (form.watch("deployType") === "autoFactory" ||
-                  form.watch("deployType") === "customFactory") ? (
-                <>
-                  <Box />
-                  <Button
-                    colorScheme="primary"
-                    isDisabled={disableNext}
-                    onClick={() => setFieldsetToShow("factory")}
-                  >
-                    Next
-                  </Button>
-                </>
-              ) : fieldsetToShow !== "contractParams" &&
-                fieldsetToShow !== "implParams" &&
-                deployParams?.length > 0 ? (
-                <>
-                  <Box />
-                  <Button
-                    colorScheme="primary"
-                    isDisabled={disableNext}
-                    onClick={() => setFieldsetToShow("contractParams")}
-                  >
-                    Next
-                  </Button>
-                </>
-              ) : fieldsetToShow !== "contractParams" &&
-                fieldsetToShow !== "implParams" &&
-                deployParams?.length === 0 &&
-                implDeployParams?.length > 0 ? (
-                <>
-                  <Box />
-                  <Button
-                    colorScheme="primary"
-                    isDisabled={disableNext}
-                    onClick={() => setFieldsetToShow("implParams")}
-                  >
-                    Next
-                  </Button>
-                </>
-              ) : fieldsetToShow === "contractParams" &&
-                implDeployParams?.length > 0 ? (
-                <>
-                  <Box />
-                  <Button
-                    colorScheme="primary"
-                    isDisabled={disableNext}
-                    onClick={() => setFieldsetToShow("implParams")}
-                  >
-                    Next
-                  </Button>
-                </>
-              ) : (
-                <>
-                  <Text fontStyle="italic">
-                    Publishing your contract is free, we cover all gas costs.
-                  </Text>
-                  <Button
-                    // differentiate this from the edit button
-                    borderRadius="md"
-                    colorScheme="blue"
-                    form={formId}
-                    isDisabled={isDisabled}
-                    isLoading={isPending}
-                    key="submit-button"
-                    loadingText={
-                      sendTx.isSuccess
-                        ? "Preparing page"
-                        : "Publishing contract"
-                    }
-                    position="relative"
-                    type="submit"
-                  >
-                    Publish Contract
-                  </Button>
-                </>
-              )}
-            </Flex>
-          </Flex>
-        </Flex>
-      </div>
+        </div>
+      </form>
     </FormProvider>
   );
 }
+
+function NextButton(props: { disabled: boolean; onClick: () => void }) {
+  return (
+    <Button
+      disabled={props.disabled}
+      onClick={props.onClick}
+      className="gap-2 w-32"
+    >
+      Next
+      <ArrowRightIcon className="size-4" />
+    </Button>
+  );
+}
diff --git a/apps/dashboard/src/@/components/contract-components/contract-publish-form/landing-fieldset.tsx b/apps/dashboard/src/@/components/contract-components/contract-publish-form/landing-fieldset.tsx
index 37e735f620e..2a18ba94336 100644
--- a/apps/dashboard/src/@/components/contract-components/contract-publish-form/landing-fieldset.tsx
+++ b/apps/dashboard/src/@/components/contract-components/contract-publish-form/landing-fieldset.tsx
@@ -1,41 +1,30 @@
-import {
-  Box,
-  Flex,
-  FormControl,
-  Input,
-  Tab,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
-  Textarea,
-} from "@chakra-ui/react";
-import { Card } from "chakra/card";
-import { FormErrorMessage, FormHelperText, FormLabel } from "chakra/form";
-import { Heading } from "chakra/heading";
-import { Link } from "chakra/link";
-import { Text } from "chakra/text";
 import { compare, validate } from "compare-versions";
+import { useState } from "react";
 import { useFormContext } from "react-hook-form";
 import type { ThirdwebClient } from "thirdweb";
 import type { ExtendedMetadata } from "thirdweb/utils";
 import { SelectOption } from "@/components/batch-upload/lazy-mint-form/select-option";
 import { FileInput } from "@/components/blocks/FileInput";
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { SolidityInput } from "@/components/solidity-inputs";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
 import { MarkdownRenderer } from "../../blocks/markdown-renderer";
+import { TabButtons } from "../../ui/tabs";
+import { UnderlineLink } from "../../ui/UnderlineLink";
 import { ExternalLinksFieldset } from "./external-links-fieldset";
 
-interface LandingFieldsetProps {
+type LandingFieldsetProps = {
   latestVersion: string | undefined;
   placeholderVersion: string;
   client: ThirdwebClient;
-}
+};
 
-export const LandingFieldset: React.FC<LandingFieldsetProps> = ({
+export function LandingFieldset({
   latestVersion,
   placeholderVersion,
   client,
-}) => {
+}: LandingFieldsetProps) {
   const form = useFormContext<ExtendedMetadata>();
   const logoUrl = form.watch("logo");
 
@@ -66,205 +55,235 @@ export const LandingFieldset: React.FC<LandingFieldsetProps> = ({
     }
   };
 
+  const [readmeTab, setReadmeTab] = useState<"write" | "preview">("write");
+  const [changelogTab, setChangelogTab] = useState<"write" | "preview">(
+    "write",
+  );
+
   return (
-    <Flex as="fieldset" direction="column" gap={16} mt={{ base: 4, md: 12 }}>
-      <Flex direction="column" gap={2}>
-        <Heading size="title.lg">
+    <fieldset className="space-y-12">
+      {/* header */}
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight mb-1">
           {!latestVersion ? "Publish" : "Edit"} your contract
-        </Heading>
-        <Text fontStyle="normal">
+        </h1>
+        <p className="text-muted-foreground text-sm">
           Publishing your contract makes it shareable, discoverable, and
           deployable in a single click.{" "}
-          <Link
-            color="blue.500"
+          <UnderlineLink
             href="https://portal.thirdweb.com/contracts/publish/overview"
-            isExternal
+            target="_blank"
+            rel="noopener noreferrer"
           >
             Learn more
-          </Link>
-        </Text>
-      </Flex>
-      <Flex gap={6} w="full">
-        <FormControl isInvalid={!!form.formState.errors.logo} w="auto">
-          <FormLabel>Image</FormLabel>
-          <Box width="141px">
+          </UnderlineLink>
+        </p>
+      </div>
+
+      {/* logo, name, description */}
+      <div className="flex flex-col md:flex-row gap-6 w-full">
+        <FormFieldSetup
+          label="Image"
+          errorMessage={form.formState.errors?.logo?.message as string}
+          isRequired={false}
+          className="w-auto"
+        >
+          <div className="w-[200px]">
             <FileInput
               accept={{ "image/*": [] }}
-              className="rounded border border-border transition-all duration-200"
+              className="rounded-lg border bg-card transition-all duration-200"
               client={client}
               helperText="Image"
               // @ts-expect-error - we upload the file later this is fine
               setValue={(file) => form.setValue("logo", file)}
               value={logoUrl}
             />
-          </Box>
-          <FormErrorMessage>
-            {form.formState.errors?.logo?.message as unknown as string}
-          </FormErrorMessage>
-        </FormControl>
-        <Flex flexDir="column" gap={4} w="full">
-          <FormControl
-            isInvalid={!!form.formState.errors.displayName}
-            isRequired
+          </div>
+        </FormFieldSetup>
+
+        <div className="flex flex-col gap-4 w-full grow">
+          <FormFieldSetup
+            htmlFor="displayName"
+            label="Contract Name"
+            errorMessage={form.formState.errors?.displayName?.message}
+            isRequired={true}
           >
-            <FormLabel>Contract Name</FormLabel>
             <Input
+              id="displayName"
               onChange={(e) => form.setValue("displayName", e.target.value)}
               placeholder="Ex. MyContract"
+              className="bg-card"
               value={form.watch("displayName")}
             />
-            <FormErrorMessage>
-              {form.formState.errors?.displayName?.message}
-            </FormErrorMessage>
-          </FormControl>
-          <FormControl isInvalid={!!form.formState.errors.description}>
-            <FormLabel>Description</FormLabel>
+          </FormFieldSetup>
+
+          <FormFieldSetup
+            htmlFor="description"
+            label="Description"
+            errorMessage={form.formState.errors?.description?.message}
+            isRequired={false}
+            className="grow flex flex-col"
+          >
             <Textarea
+              id="description"
               onChange={(e) => form.setValue("description", e.target.value)}
               placeholder="Briefly describe what your contract does."
               rows={2}
+              className="bg-card grow"
               value={form.watch("description")}
             />
-
-            <FormErrorMessage>
-              {form.formState.errors?.description?.message}
-            </FormErrorMessage>
-          </FormControl>
-        </Flex>
-      </Flex>
+          </FormFieldSetup>
+        </div>
+      </div>
 
       <div>
-        <Heading mb={2} size="title.md">
-          README
-        </Heading>
-        <Text mb={4} size="body.md">
+        <h2 className="text-xl font-semibold mb-1 tracking-tight">README</h2>
+        <p className="text-muted-foreground text-sm mb-5">
           Describe what your contract does and how it should be used. Markdown
           formatting is supported.
-        </Text>
-        <FormControl isInvalid={!!form.formState.errors.readme}>
-          <Tabs colorScheme="gray" isLazy lazyBehavior="keepMounted">
-            <TabList
-              borderBottomColor="borderColor"
-              borderBottomWidth="1px"
-              px={0}
-            >
-              <Tab gap={2}>
-                <Heading size="label.lg">Write</Heading>
-              </Tab>
-              <Tab gap={2}>
-                <Heading size="label.lg">Preview</Heading>
-              </Tab>
-            </TabList>
-            <TabPanels pt={2}>
-              <TabPanel pb={0} px={0}>
-                <Textarea
-                  {...form.register("readme")}
-                  placeholder="Describe how users can use this contract. Add links if relevant."
-                  rows={12}
-                />
-                <FormErrorMessage>
-                  {form.formState.errors?.readme?.message}
-                </FormErrorMessage>
-              </TabPanel>
-              <TabPanel pb={0} px={0}>
-                <Card>
-                  <MarkdownRenderer markdownText={form.watch("readme") || ""} />
-                </Card>
-              </TabPanel>
-            </TabPanels>
-          </Tabs>
-        </FormControl>
+        </p>
+
+        <TabButtons
+          tabClassName="!text-sm"
+          tabs={[
+            {
+              name: "Write",
+              onClick: () => setReadmeTab("write"),
+              isActive: readmeTab === "write",
+            },
+            {
+              name: "Preview",
+              onClick: () => setReadmeTab("preview"),
+              isActive: readmeTab === "preview",
+            },
+          ]}
+        />
+
+        <div className="mt-2">
+          {readmeTab === "write" && (
+            <Textarea
+              {...form.register("readme")}
+              placeholder="Describe how users can use this contract. Add links if relevant."
+              rows={12}
+              className="bg-card"
+            />
+          )}
+
+          {readmeTab === "preview" && (
+            <div className="p-4 rounded-lg border border-border bg-card">
+              <MarkdownRenderer markdownText={form.watch("readme") || ""} />
+            </div>
+          )}
+        </div>
+
+        {form.formState.errors.readme && (
+          <p className="text-red-500 text-sm mt-2">
+            {form.formState.errors.readme.message}
+          </p>
+        )}
       </div>
+
       <ExternalLinksFieldset />
+
       <div>
-        <Heading mb={2} size="title.md">
-          Version information
-        </Heading>
-        <Text mb={4} size="body.md">
+        <h2 className="text-xl font-semibold mb-1">Version information</h2>
+        <p className="text-muted-foreground text-sm mb-5">
           Set your contract version number, add release notes, and link to your
           contract&apos;s audit report.
-        </Text>
-        <Flex flexDir="column" gap={6}>
-          <FormControl isInvalid={!!form.formState.errors.version} isRequired>
-            <Flex alignItems="center" mb={1}>
-              <FormLabel flex="1" mb={0}>
-                Version
-              </FormLabel>
-              {latestVersion && (
-                <Text size="body.md">latest version: {latestVersion}</Text>
-              )}
-            </Flex>
+        </p>
+
+        <div className="space-y-6">
+          <FormFieldSetup
+            htmlFor="version"
+            label={
+              <div className="flex items-center justify-between w-full">
+                <span>Version</span>
+                {latestVersion && (
+                  <span className="text-sm text-muted-foreground">
+                    latest version: {latestVersion}
+                  </span>
+                )}
+              </div>
+            }
+            errorMessage={form.formState.errors?.version?.message}
+            isRequired={true}
+          >
             <Input
+              id="version"
               onChange={handleVersionChange}
+              className="bg-card"
               placeholder={placeholderVersion}
               value={form.watch("version")}
             />
-            <FormErrorMessage>
-              {form.formState.errors?.version?.message}
-            </FormErrorMessage>
-          </FormControl>
+          </FormFieldSetup>
+
           {latestVersion && (
-            <FormControl isInvalid={!!form.formState.errors.changelog}>
-              <FormLabel>Release notes</FormLabel>
-              <Tabs colorScheme="gray" isLazy lazyBehavior="keepMounted">
-                <TabList
-                  borderBottomColor="borderColor"
-                  borderBottomWidth="1px"
-                  px={0}
-                >
-                  <Tab gap={2}>
-                    <Heading size="label.lg">Write</Heading>
-                  </Tab>
-                  <Tab gap={2}>
-                    <Heading size="label.lg">Preview</Heading>
-                  </Tab>
-                </TabList>
-                <TabPanels pt={2}>
-                  <TabPanel pb={0} px={0}>
-                    <Textarea
-                      {...form.register("changelog")}
-                      placeholder="Mention what is new in this version of your contract."
+            <div>
+              <h3 className="text-sm font-medium mb-2">Release notes</h3>
+              {form.formState.errors?.changelog?.message && (
+                <p className="text-red-500 text-sm mt-2">
+                  {form.formState.errors.changelog.message}
+                </p>
+              )}
+              <TabButtons
+                tabClassName="!text-sm"
+                tabs={[
+                  {
+                    name: "Write",
+                    onClick: () => setChangelogTab("write"),
+                    isActive: changelogTab === "write",
+                  },
+                  {
+                    name: "Preview",
+                    onClick: () => setChangelogTab("preview"),
+                    isActive: changelogTab === "preview",
+                  },
+                ]}
+              />
+
+              <div className="mt-2">
+                {changelogTab === "write" && (
+                  <Textarea
+                    {...form.register("changelog")}
+                    placeholder="Mention what is new in this version of your contract."
+                    className="bg-card"
+                  />
+                )}
+
+                {changelogTab === "preview" && (
+                  <div className="p-4 rounded-lg border bg-card">
+                    <MarkdownRenderer
+                      markdownText={form.watch("changelog") || ""}
                     />
-                    <FormErrorMessage>
-                      {form.formState.errors?.changelog?.message}
-                    </FormErrorMessage>
-                  </TabPanel>
-                  <TabPanel pb={0} px={0}>
-                    <Card>
-                      <MarkdownRenderer
-                        markdownText={form.watch("changelog") || ""}
-                      />
-                    </Card>
-                  </TabPanel>
-                </TabPanels>
-              </Tabs>
-            </FormControl>
+                  </div>
+                )}
+              </div>
+            </div>
           )}
-          <FormControl isInvalid={!!form.formState.errors.audit}>
-            <FormLabel>Audit report</FormLabel>
+
+          <FormFieldSetup
+            label="Audit report"
+            errorMessage={form.formState.errors?.audit?.message}
+            isRequired={false}
+            helperText="You can add a IPFS hash or URL pointing to an audit report, or add a file and we'll upload it to IPFS."
+          >
             <SolidityInput
               client={client}
               solidityType="string"
               {...form.register("audit")}
               placeholder="ipfs://... or https://..."
+              className="bg-card"
             />
-            <FormHelperText>
-              <Text size="body.sm">
-                You can add a IPFS hash or URL pointing to an audit report, or
-                add a file and we&apos;ll upload it to IPFS.
-              </Text>
-            </FormHelperText>
-          </FormControl>
-        </Flex>
+          </FormFieldSetup>
+        </div>
       </div>
+
       <div>
-        <Heading mb={2} size="title.md">
-          Deployment options
-        </Heading>
-        <Text mb={4} size="body.md">
+        <h2 className="text-xl font-semibold mb-1">Deployment options</h2>
+        <p className="text-muted-foreground text-sm mb-3">
           Choose how users will deploy your published contract.
-        </Text>
-        <Flex flexDir="column" gap={2} width="full">
+        </p>
+        <div className="flex flex-col md:flex-row gap-4 w-full">
           <SelectOption
             className="w-full"
             description="Users will directly deploy the full contract."
@@ -282,8 +301,8 @@ export const LandingFieldset: React.FC<LandingFieldsetProps> = ({
             name="Deploy via factory"
             onClick={() => form.setValue("deployType", "autoFactory")}
           />
-        </Flex>
+        </div>
       </div>
-    </Flex>
+    </fieldset>
   );
-};
+}
diff --git a/apps/dashboard/src/@/components/contract-components/contract-publish-form/networks-fieldset.tsx b/apps/dashboard/src/@/components/contract-components/contract-publish-form/networks-fieldset.tsx
index 3d709702c70..e5ea66da332 100644
--- a/apps/dashboard/src/@/components/contract-components/contract-publish-form/networks-fieldset.tsx
+++ b/apps/dashboard/src/@/components/contract-components/contract-publish-form/networks-fieldset.tsx
@@ -1,5 +1,3 @@
-import { Heading } from "chakra/heading";
-import { Text } from "chakra/text";
 import { useFormContext } from "react-hook-form";
 import type { ThirdwebClient } from "thirdweb";
 import { MultiNetworkSelector } from "@/components/blocks/NetworkSelectors";
@@ -10,57 +8,55 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { cn } from "@/lib/utils";
 
 interface NetworksFieldsetProps {
-  fromStandard?: boolean;
   client: ThirdwebClient;
 }
 
 export const NetworksFieldset: React.FC<NetworksFieldsetProps> = ({
-  fromStandard,
   client,
 }) => {
   const form = useFormContext();
 
   return (
-    <div className={cn("flex flex-col", fromStandard ? "gap-6" : "gap-4")}>
-      <div className="flex flex-col gap-2">
-        <Heading size={fromStandard ? "title.lg" : "title.md"}>
-          Networks that your contract can be deployed to
-        </Heading>
+    <div className="space-y-4">
+      <div>
+        <h2 className="text-lg font-semibold tracking-tight mb-1">
+          Select networks
+        </h2>
+        <p className="text-muted-foreground text-sm mb-4">
+          Select the networks that your contract can be deployed to
+        </p>
       </div>
-      <div className="flex flex-col gap-2" data-required>
-        <Select
-          onValueChange={(value) =>
-            form.setValue("networksForDeployment.allNetworks", value === "all")
+
+      <Select
+        onValueChange={(value) =>
+          form.setValue("networksForDeployment.allNetworks", value === "all")
+        }
+        value={
+          form.watch("networksForDeployment.allNetworks") ? "all" : "specific"
+        }
+      >
+        <SelectTrigger className="w-full bg-card">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">All networks</SelectItem>
+          <SelectItem value="specific">Specific networks</SelectItem>
+        </SelectContent>
+      </Select>
+
+      {!form.watch("networksForDeployment.allNetworks") && (
+        <MultiNetworkSelector
+          className="bg-card"
+          client={client}
+          onChange={(chainIds) =>
+            form.setValue("networksForDeployment.networksEnabled", chainIds)
           }
-          value={
-            form.watch("networksForDeployment.allNetworks") ? "all" : "specific"
+          selectedChainIds={
+            form.watch("networksForDeployment.networksEnabled") || []
           }
-        >
-          <SelectTrigger className="w-full">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">All networks</SelectItem>
-            <SelectItem value="specific">Specific networks</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-      {!form.watch("networksForDeployment.allNetworks") && (
-        <div className="flex flex-col gap-2">
-          <Text>Please select the networks you want to enable:</Text>
-          <MultiNetworkSelector
-            client={client}
-            onChange={(chainIds) =>
-              form.setValue("networksForDeployment.networksEnabled", chainIds)
-            }
-            selectedChainIds={
-              form.watch("networksForDeployment.networksEnabled") || []
-            }
-          />
-        </div>
+        />
       )}
     </div>
   );
diff --git a/apps/dashboard/src/@/components/contract-components/contract-publish-form/ref-contract-impl-input/ref-input-impl-fieldset.tsx b/apps/dashboard/src/@/components/contract-components/contract-publish-form/ref-contract-impl-input/ref-input-impl-fieldset.tsx
index 6f96e60ea27..a5417573001 100644
--- a/apps/dashboard/src/@/components/contract-components/contract-publish-form/ref-contract-impl-input/ref-input-impl-fieldset.tsx
+++ b/apps/dashboard/src/@/components/contract-components/contract-publish-form/ref-contract-impl-input/ref-input-impl-fieldset.tsx
@@ -1,20 +1,16 @@
 import type { AbiParameter } from "abitype";
-import { Button } from "chakra/button";
 import { PlusIcon } from "lucide-react";
 import { useFieldArray, useFormContext } from "react-hook-form";
 import type { ThirdwebClient } from "thirdweb";
+import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { RefContractImplInput } from "./ref-input-impl";
 
-interface RefInputImplFieldsetProps {
+export function RefInputImplFieldset(props: {
   param: AbiParameter;
   client: ThirdwebClient;
-}
-
-export const RefInputImplFieldset: React.FC<RefInputImplFieldsetProps> = ({
-  param,
-  client,
-}) => {
+}) {
+  const { param, client } = props;
   const form = useFormContext();
 
   const { fields, append, remove } = useFieldArray({
@@ -63,4 +59,4 @@ export const RefInputImplFieldset: React.FC<RefInputImplFieldsetProps> = ({
       )}
     </div>
   );
-};
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 95c33f8ad0e..6779f1ebe65 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -163,9 +163,6 @@ importers:
       abitype:
         specifier: 1.0.8
         version: 1.0.8(typescript@5.8.3)(zod@3.25.75)
-      chakra-react-select:
-        specifier: ^4.7.6
-        version: 4.10.1(@chakra-ui/react@2.10.4(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(framer-motion@12.23.0(@emotion/is-prop-valid@1.3.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -6879,11 +6876,6 @@ packages:
   '@types/react-table@7.7.20':
     resolution: {integrity: sha512-ahMp4pmjVlnExxNwxyaDrFgmKxSbPwU23sGQw2gJK4EhCvnvmib2s/O/+y1dfV57dXOwpr2plfyBol+vEHbi2w==}
 
-  '@types/react-transition-group@4.4.12':
-    resolution: {integrity: sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==}
-    peerDependencies:
-      '@types/react': '*'
-
   '@types/react@19.1.8':
     resolution: {integrity: sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==}
 
@@ -8335,14 +8327,6 @@ packages:
     resolution: {integrity: sha512-mCuXncKXk5iCLhfhwTc0izo0gtEmpz5CtG2y8GiOINBlMVS6v8TMRc5TaLWKS6692m9+dVVfzgeVxR5UxWHTYw==}
     engines: {node: '>=12'}
 
-  chakra-react-select@4.10.1:
-    resolution: {integrity: sha512-0d7lubrmcm7molVYNYWEYi7o71W8wn/WruINon+m23XQLYvJ+bZlYVawDdWYdJjX8O1nzJlTDo4b7CB6zTsr4A==}
-    peerDependencies:
-      '@chakra-ui/react': 2.x
-      '@emotion/react': ^11.8.1
-      react: ^18.0.0
-      react-dom: ^18.0.0
-
   chalk@2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
@@ -11736,9 +11720,6 @@ packages:
   memoize-one@5.2.1:
     resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
 
-  memoize-one@6.0.0:
-    resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
-
   merge-options@3.0.4:
     resolution: {integrity: sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==}
     engines: {node: '>=10'}
@@ -13587,12 +13568,6 @@ packages:
       '@types/react':
         optional: true
 
-  react-select@5.8.3:
-    resolution: {integrity: sha512-lVswnIq8/iTj1db7XCG74M/3fbGB6ZaluCzvwPGT5ZOjCdL/k0CLWhEK0vCBLuU5bHTEf6Gj8jtSvi+3v+tO1w==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-
   react-smooth@4.0.4:
     resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==}
     peerDependencies:
@@ -15251,15 +15226,6 @@ packages:
     peerDependencies:
       react: '*'
 
-  use-isomorphic-layout-effect@1.2.0:
-    resolution: {integrity: sha512-q6ayo8DWoPZT0VdG4u3D3uxcgONP3Mevx2i2b0434cwWBoL+aelL1DzkXI6w3PhTZzUeR2kaVlZn70iCiseP6w==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   use-sidecar@1.1.3:
     resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
     engines: {node: '>=10'}
@@ -16125,10 +16091,10 @@ snapshots:
     dependencies:
       '@aws-crypto/sha256-browser': 3.0.0
       '@aws-crypto/sha256-js': 3.0.0
-      '@aws-sdk/client-sso-oidc': 3.592.0(@aws-sdk/client-sts@3.592.0)
+      '@aws-sdk/client-sso-oidc': 3.592.0
       '@aws-sdk/client-sts': 3.592.0
       '@aws-sdk/core': 3.592.0
-      '@aws-sdk/credential-provider-node': 3.592.0(@aws-sdk/client-sso-oidc@3.592.0(@aws-sdk/client-sts@3.592.0))(@aws-sdk/client-sts@3.592.0)
+      '@aws-sdk/credential-provider-node': 3.592.0(@aws-sdk/client-sso-oidc@3.592.0)(@aws-sdk/client-sts@3.592.0)
       '@aws-sdk/middleware-host-header': 3.577.0
       '@aws-sdk/middleware-logger': 3.577.0
       '@aws-sdk/middleware-recursion-detection': 3.577.0
@@ -16171,10 +16137,10 @@ snapshots:
     dependencies:
       '@aws-crypto/sha256-browser': 3.0.0
       '@aws-crypto/sha256-js': 3.0.0
-      '@aws-sdk/client-sso-oidc': 3.592.0(@aws-sdk/client-sts@3.592.0)
+      '@aws-sdk/client-sso-oidc': 3.592.0
       '@aws-sdk/client-sts': 3.592.0
       '@aws-sdk/core': 3.592.0
-      '@aws-sdk/credential-provider-node': 3.592.0(@aws-sdk/client-sso-oidc@3.592.0(@aws-sdk/client-sts@3.592.0))(@aws-sdk/client-sts@3.592.0)
+      '@aws-sdk/credential-provider-node': 3.592.0(@aws-sdk/client-sso-oidc@3.592.0)(@aws-sdk/client-sts@3.592.0)
       '@aws-sdk/middleware-host-header': 3.577.0
       '@aws-sdk/middleware-logger': 3.577.0
       '@aws-sdk/middleware-recursion-detection': 3.577.0
@@ -16217,10 +16183,10 @@ snapshots:
     dependencies:
       '@aws-crypto/sha256-browser': 3.0.0
       '@aws-crypto/sha256-js': 3.0.0
-      '@aws-sdk/client-sso-oidc': 3.592.0(@aws-sdk/client-sts@3.592.0)
+      '@aws-sdk/client-sso-oidc': 3.592.0
       '@aws-sdk/client-sts': 3.592.0
       '@aws-sdk/core': 3.592.0
-      '@aws-sdk/credential-provider-node': 3.592.0(@aws-sdk/client-sso-oidc@3.592.0(@aws-sdk/client-sts@3.592.0))(@aws-sdk/client-sts@3.592.0)
+      '@aws-sdk/credential-provider-node': 3.592.0(@aws-sdk/client-sso-oidc@3.592.0)(@aws-sdk/client-sts@3.592.0)
       '@aws-sdk/middleware-host-header': 3.577.0
       '@aws-sdk/middleware-logger': 3.577.0
       '@aws-sdk/middleware-recursion-detection': 3.577.0
@@ -16264,7 +16230,7 @@ snapshots:
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/client-sso-oidc@3.592.0(@aws-sdk/client-sts@3.592.0)':
+  '@aws-sdk/client-sso-oidc@3.592.0':
     dependencies:
       '@aws-crypto/sha256-browser': 3.0.0
       '@aws-crypto/sha256-js': 3.0.0
@@ -16307,7 +16273,6 @@ snapshots:
       '@smithy/util-utf8': 3.0.0
       tslib: 2.8.1
     transitivePeerDependencies:
-      - '@aws-sdk/client-sts'
       - aws-crt
 
   '@aws-sdk/client-sso-oidc@3.840.0':
@@ -16444,7 +16409,7 @@ snapshots:
     dependencies:
       '@aws-crypto/sha256-browser': 3.0.0
       '@aws-crypto/sha256-js': 3.0.0
-      '@aws-sdk/client-sso-oidc': 3.592.0(@aws-sdk/client-sts@3.592.0)
+      '@aws-sdk/client-sso-oidc': 3.592.0
       '@aws-sdk/core': 3.592.0
       '@aws-sdk/credential-provider-node': 3.592.0(@aws-sdk/client-sso-oidc@3.592.0)(@aws-sdk/client-sts@3.592.0)
       '@aws-sdk/middleware-host-header': 3.577.0
@@ -16563,24 +16528,6 @@ snapshots:
       '@smithy/util-stream': 4.2.2
       tslib: 2.8.1
 
-  '@aws-sdk/credential-provider-ini@3.592.0(@aws-sdk/client-sso-oidc@3.592.0(@aws-sdk/client-sts@3.592.0))(@aws-sdk/client-sts@3.592.0)':
-    dependencies:
-      '@aws-sdk/client-sts': 3.592.0
-      '@aws-sdk/credential-provider-env': 3.587.0
-      '@aws-sdk/credential-provider-http': 3.587.0
-      '@aws-sdk/credential-provider-process': 3.587.0
-      '@aws-sdk/credential-provider-sso': 3.592.0(@aws-sdk/client-sso-oidc@3.592.0)
-      '@aws-sdk/credential-provider-web-identity': 3.587.0(@aws-sdk/client-sts@3.592.0)
-      '@aws-sdk/types': 3.577.0
-      '@smithy/credential-provider-imds': 3.2.8
-      '@smithy/property-provider': 3.1.11
-      '@smithy/shared-ini-file-loader': 3.1.12
-      '@smithy/types': 3.7.2
-      tslib: 2.8.1
-    transitivePeerDependencies:
-      - '@aws-sdk/client-sso-oidc'
-      - aws-crt
-
   '@aws-sdk/credential-provider-ini@3.592.0(@aws-sdk/client-sso-oidc@3.592.0)(@aws-sdk/client-sts@3.592.0)':
     dependencies:
       '@aws-sdk/client-sts': 3.592.0
@@ -16635,25 +16582,6 @@ snapshots:
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/credential-provider-node@3.592.0(@aws-sdk/client-sso-oidc@3.592.0(@aws-sdk/client-sts@3.592.0))(@aws-sdk/client-sts@3.592.0)':
-    dependencies:
-      '@aws-sdk/credential-provider-env': 3.587.0
-      '@aws-sdk/credential-provider-http': 3.587.0
-      '@aws-sdk/credential-provider-ini': 3.592.0(@aws-sdk/client-sso-oidc@3.592.0(@aws-sdk/client-sts@3.592.0))(@aws-sdk/client-sts@3.592.0)
-      '@aws-sdk/credential-provider-process': 3.587.0
-      '@aws-sdk/credential-provider-sso': 3.592.0(@aws-sdk/client-sso-oidc@3.592.0)
-      '@aws-sdk/credential-provider-web-identity': 3.587.0(@aws-sdk/client-sts@3.592.0)
-      '@aws-sdk/types': 3.577.0
-      '@smithy/credential-provider-imds': 3.2.8
-      '@smithy/property-provider': 3.1.11
-      '@smithy/shared-ini-file-loader': 3.1.12
-      '@smithy/types': 3.7.2
-      tslib: 2.8.1
-    transitivePeerDependencies:
-      - '@aws-sdk/client-sso-oidc'
-      - '@aws-sdk/client-sts'
-      - aws-crt
-
   '@aws-sdk/credential-provider-node@3.592.0(@aws-sdk/client-sso-oidc@3.592.0)(@aws-sdk/client-sts@3.592.0)':
     dependencies:
       '@aws-sdk/credential-provider-env': 3.587.0
@@ -16927,7 +16855,7 @@ snapshots:
 
   '@aws-sdk/token-providers@3.587.0(@aws-sdk/client-sso-oidc@3.592.0)':
     dependencies:
-      '@aws-sdk/client-sso-oidc': 3.592.0(@aws-sdk/client-sts@3.592.0)
+      '@aws-sdk/client-sso-oidc': 3.592.0
       '@aws-sdk/types': 3.577.0
       '@smithy/property-provider': 3.1.11
       '@smithy/shared-ini-file-loader': 3.1.12
@@ -24869,10 +24797,6 @@ snapshots:
     dependencies:
       '@types/react': 19.1.8
 
-  '@types/react-transition-group@4.4.12(@types/react@19.1.8)':
-    dependencies:
-      '@types/react': 19.1.8
-
   '@types/react@19.1.8':
     dependencies:
       csstype: 3.1.3
@@ -27751,17 +27675,6 @@ snapshots:
       loupe: 3.1.4
       pathval: 2.0.1
 
-  chakra-react-select@4.10.1(@chakra-ui/react@2.10.4(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(framer-motion@12.23.0(@emotion/is-prop-valid@1.3.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
-    dependencies:
-      '@chakra-ui/react': 2.10.4(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(framer-motion@12.23.0(@emotion/is-prop-valid@1.3.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@emotion/react': 11.14.0(@types/react@19.1.8)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-      react-select: 5.8.3(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-    transitivePeerDependencies:
-      - '@types/react'
-      - supports-color
-
   chalk@2.4.2:
     dependencies:
       ansi-styles: 3.2.1
@@ -31832,8 +31745,6 @@ snapshots:
 
   memoize-one@5.2.1: {}
 
-  memoize-one@6.0.0: {}
-
   merge-options@3.0.4:
     dependencies:
       is-plain-obj: 2.1.0
@@ -34107,23 +34018,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.8
 
-  react-select@5.8.3(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
-    dependencies:
-      '@babel/runtime': 7.27.6
-      '@emotion/cache': 11.14.0
-      '@emotion/react': 11.14.0(@types/react@19.1.8)(react@19.1.0)
-      '@floating-ui/dom': 1.7.2
-      '@types/react-transition-group': 4.4.12(@types/react@19.1.8)
-      memoize-one: 6.0.0
-      prop-types: 15.8.1
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-      react-transition-group: 4.4.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      use-isomorphic-layout-effect: 1.2.0(@types/react@19.1.8)(react@19.1.0)
-    transitivePeerDependencies:
-      - '@types/react'
-      - supports-color
-
   react-smooth@4.0.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
       fast-equals: 5.2.2
@@ -36182,12 +36076,6 @@ snapshots:
     dependencies:
       react: 19.1.0
 
-  use-isomorphic-layout-effect@1.2.0(@types/react@19.1.8)(react@19.1.0):
-    dependencies:
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.8
-
   use-sidecar@1.1.3(@types/react@19.1.8)(react@19.1.0):
     dependencies:
       detect-node-es: 1.1.0