diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/reveal-button.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/reveal-button.tsx
index 9460ad40433..042b19bce8c 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/reveal-button.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/reveal-button.tsx
@@ -1,7 +1,6 @@
 "use client";
 
-import { FormControl, Input, Select } from "@chakra-ui/react";
-import { FormErrorMessage, FormLabel } from "chakra/form";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { EyeIcon } from "lucide-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -9,9 +8,26 @@ import { toast } from "sonner";
 import type { ThirdwebContract } from "thirdweb";
 import { getBatchesToReveal, reveal } from "thirdweb/extensions/erc721";
 import { useReadContract, useSendAndConfirmTransaction } from "thirdweb/react";
+import * as z from "zod";
 import { MinterOnly } from "@/components/contracts/roles/minter-only";
 import { TransactionButton } from "@/components/tx-button";
 import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import {
   Sheet,
   SheetContent,
@@ -20,29 +36,35 @@ import {
   SheetTrigger,
 } from "@/components/ui/sheet";
 import { ToolTipLabel } from "@/components/ui/tooltip";
+import { parseError } from "@/utils/errorParser";
 
-interface NFTRevealButtonProps {
-  contract: ThirdwebContract;
-  isLoggedIn: boolean;
-}
+const revealFormSchema = z.object({
+  batchId: z.string().min(1, "Please select a batch"),
+  password: z.string().min(1, "Password is required"),
+});
 
-const REVEAL_FORM_ID = "reveal-form";
+type RevealFormData = z.infer<typeof revealFormSchema>;
 
-export const NFTRevealButton: React.FC<NFTRevealButtonProps> = ({
+export function NFTRevealButton({
   contract,
   isLoggedIn,
-}) => {
+}: {
+  contract: ThirdwebContract;
+  isLoggedIn: boolean;
+}) {
   const batchesQuery = useReadContract(getBatchesToReveal, {
     contract,
   });
 
   const sendTxMutation = useSendAndConfirmTransaction();
 
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isDirty },
-  } = useForm<{ batchId: string; password: string }>();
+  const form = useForm<RevealFormData>({
+    resolver: zodResolver(revealFormSchema),
+    defaultValues: {
+      batchId: "",
+      password: "",
+    },
+  });
 
   const [open, setOpen] = useState(false);
 
@@ -67,6 +89,27 @@ export const NFTRevealButton: React.FC<NFTRevealButtonProps> = ({
     );
   }
 
+  const onSubmit = async (data: RevealFormData) => {
+    const tx = reveal({
+      batchId: BigInt(data.batchId),
+      contract,
+      password: data.password,
+    });
+
+    await sendTxMutation.mutateAsync(tx, {
+      onError: (error) => {
+        toast.error("Failed to reveal batch", {
+          description: parseError(error),
+        });
+        console.error(error);
+      },
+      onSuccess: () => {
+        toast.success("Batch revealed successfully");
+        setOpen(false);
+      },
+    });
+  };
+
   return (
     <MinterOnly contract={contract}>
       <Sheet onOpenChange={setOpen} open={open}>
@@ -75,80 +118,80 @@ export const NFTRevealButton: React.FC<NFTRevealButtonProps> = ({
             <EyeIcon className="size-4" /> Reveal NFTs
           </Button>
         </SheetTrigger>
-        <SheetContent className="w-full overflow-y-auto sm:min-w-[540px] lg:min-w-[700px]">
+        <SheetContent className="!w-full lg:!max-w-lg">
           <SheetHeader>
             <SheetTitle className="text-left">Reveal batch</SheetTitle>
           </SheetHeader>
-          <form
-            className="mt-10 flex flex-col gap-6"
-            id={REVEAL_FORM_ID}
-            onSubmit={handleSubmit((data) => {
-              const tx = reveal({
-                batchId: BigInt(data.batchId),
-                contract,
-                password: data.password,
-              });
-
-              const promise = sendTxMutation.mutateAsync(tx, {
-                onError: (error) => {
-                  console.error(error);
-                },
-                onSuccess: () => {
-                  setOpen(false);
-                },
-              });
-
-              toast.promise(promise, {
-                error: "Failed to reveal batch",
-                loading: "Revealing batch",
-                success: "Batch revealed successfully",
-              });
-            })}
-          >
-            <FormControl isInvalid={!!errors.password} isRequired mr={4}>
-              <FormLabel>Select a batch</FormLabel>
-              <Select {...register("batchId")} autoFocus>
-                {batchesQuery.data.map((batch) => (
-                  <option
-                    disabled={batch.batchUri === "0x"}
-                    key={batch.batchId.toString()}
-                    value={batch.batchId.toString()}
-                  >
-                    {batch.placeholderMetadata?.name ||
-                      batch.batchId.toString()}{" "}
-                    {batch.batchUri === "0x" && "(REVEALED)"}
-                  </option>
-                ))}
-              </Select>
-              <FormErrorMessage>{errors?.password?.message}</FormErrorMessage>
-            </FormControl>
-            <FormControl isInvalid={!!errors.password} isRequired mr={4}>
-              <FormLabel>Password</FormLabel>
-              <Input
-                {...register("password")}
-                autoFocus
-                placeholder="The one you used to upload this batch"
-                type="password"
-              />
-              <FormErrorMessage>{errors?.password?.message}</FormErrorMessage>
-            </FormControl>
-          </form>
-          <div className="mt-4 flex justify-end">
-            <TransactionButton
-              client={contract.client}
-              disabled={!isDirty}
-              form={REVEAL_FORM_ID}
-              isLoggedIn={isLoggedIn}
-              isPending={sendTxMutation.isPending}
-              transactionCount={1}
-              txChainID={contract.chain.id}
-              type="submit"
+          <Form {...form}>
+            <form
+              className="mt-4 space-y-6"
+              onSubmit={form.handleSubmit(onSubmit)}
             >
-              Reveal NFTs
-            </TransactionButton>
-          </div>
+              <FormField
+                control={form.control}
+                name="batchId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Select a batch</FormLabel>
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <FormControl>
+                        <SelectTrigger className="bg-card">
+                          <SelectValue placeholder="Select a batch" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {batchesQuery.data.map((batch) => (
+                          <SelectItem
+                            disabled={batch.batchUri === "0x"}
+                            key={batch.batchId.toString()}
+                            value={batch.batchId.toString()}
+                          >
+                            {batch.placeholderMetadata?.name ||
+                              batch.batchId.toString()}{" "}
+                            {batch.batchUri === "0x" && "(REVEALED)"}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="password"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Password</FormLabel>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        placeholder="The one you used to upload this batch"
+                        type="password"
+                        className="bg-card"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="flex justify-end">
+                <TransactionButton
+                  client={contract.client}
+                  isLoggedIn={isLoggedIn}
+                  isPending={sendTxMutation.isPending}
+                  transactionCount={1}
+                  txChainID={contract.chain.id}
+                  type="submit"
+                >
+                  Reveal NFTs
+                </TransactionButton>
+              </div>
+            </form>
+          </Form>
         </SheetContent>
       </Sheet>
     </MinterOnly>
   );
-};
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-button.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-button.tsx
index c33b4ad1716..c06a3dca958 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-button.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-button.tsx
@@ -13,24 +13,23 @@ import {
 } from "@/components/ui/sheet";
 import { SharedMetadataForm } from "./shared-metadata-form";
 
-interface NFTSharedMetadataButtonProps {
+export function NFTSharedMetadataButton({
+  contract,
+  isLoggedIn,
+}: {
   contract: ThirdwebContract;
   isLoggedIn: boolean;
-}
-
-export const NFTSharedMetadataButton: React.FC<
-  NFTSharedMetadataButtonProps
-> = ({ contract, isLoggedIn, ...restButtonProps }) => {
+}) {
   const [open, setOpen] = useState(false);
   return (
     <MinterOnly contract={contract}>
       <Sheet onOpenChange={setOpen} open={open}>
         <SheetTrigger asChild>
-          <Button className="gap-2" variant="primary" {...restButtonProps}>
+          <Button className="gap-2" variant="primary">
             <PlusIcon className="size-5" /> Set NFT Metadata
           </Button>
         </SheetTrigger>
-        <SheetContent className="w-full overflow-y-auto sm:min-w-[540px] lg:min-w-[700px]">
+        <SheetContent className="!w-full lg:!max-w-2xl overflow-auto">
           <SheetHeader>
             <SheetTitle className="text-left">Set NFT Metadata</SheetTitle>
           </SheetHeader>
@@ -43,4 +42,4 @@ export const NFTSharedMetadataButton: React.FC<
       </Sheet>
     </MinterOnly>
   );
-};
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-form.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-form.tsx
index d3789d3f868..2489756145d 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-form.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-form.tsx
@@ -1,19 +1,5 @@
 "use client";
 
-import {
-  Accordion,
-  AccordionButton,
-  AccordionIcon,
-  AccordionItem,
-  AccordionPanel,
-  Divider,
-  FormControl,
-  Input,
-  Textarea,
-} from "@chakra-ui/react";
-import { Button } from "chakra/button";
-import { FormErrorMessage, FormHelperText, FormLabel } from "chakra/form";
-import { Heading } from "chakra/heading";
 import type { Dispatch, SetStateAction } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -22,30 +8,44 @@ import { setSharedMetadata } from "thirdweb/extensions/erc721";
 import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
 import { FileInput } from "@/components/blocks/FileInput";
 import { TransactionButton } from "@/components/tx-button";
-import { useTxNotifications } from "@/hooks/useTxNotifications";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
 import type { NFTMetadataInputLimited } from "@/types/modified-types";
+import { parseError } from "@/utils/errorParser";
 import { parseAttributes } from "@/utils/parseAttributes";
 import {
   getUploadedNFTMediaMeta,
   handleNFTMediaUpload,
 } from "../../modules/components/nft/handleNFTMediaUpload";
 
-const SHARED_METADATA_FORM_ID = "shared-metadata-form";
-
-export const SharedMetadataForm: React.FC<{
+export function SharedMetadataForm({
+  contract,
+  setOpen,
+  isLoggedIn,
+}: {
   contract: ThirdwebContract;
   setOpen: Dispatch<SetStateAction<boolean>>;
   isLoggedIn: boolean;
-}> = ({ contract, setOpen, isLoggedIn }) => {
+}) {
   const address = useActiveAccount()?.address;
   const sendAndConfirmTx = useSendAndConfirmTransaction();
   const form = useForm<NFTMetadataInputLimited>();
-  const {
-    setValue,
-    register,
-    handleSubmit,
-    formState: { errors, isDirty },
-  } = form;
 
   const setFile = (file: File) => {
     handleNFTMediaUpload({ file, form });
@@ -54,17 +54,11 @@ export const SharedMetadataForm: React.FC<{
   const { media, image, mediaFileError, showCoverImageUpload, animation_url } =
     getUploadedNFTMediaMeta(form);
 
-  const setSharedMetaNotifications = useTxNotifications(
-    "Shared metadata updated successfully",
-    "Failed to update shared metadata",
-  );
-
   return (
-    <>
+    <Form {...form}>
       <form
-        className="mt-6 flex flex-col gap-6"
-        id={SHARED_METADATA_FORM_ID}
-        onSubmit={handleSubmit(async (data) => {
+        className="mt-4 space-y-6"
+        onSubmit={form.handleSubmit(async (data) => {
           if (!address) {
             toast.error("Please connect your wallet.");
             return;
@@ -76,41 +70,42 @@ export const SharedMetadataForm: React.FC<{
             image: data.image,
           };
 
-          try {
-            const transaction = setSharedMetadata({
-              contract,
-              nft: parseAttributes(dataWithCustom),
-            });
-            await sendAndConfirmTx.mutateAsync(transaction, {
-              onError: (error) => {
-                console.error(error);
-              },
-              onSuccess: () => {
-                setOpen(false);
-              },
-            });
-
-            setSharedMetaNotifications.onSuccess();
-          } catch (err) {
-            console.error(err);
-            setSharedMetaNotifications.onError(err);
-          }
+          const transaction = setSharedMetadata({
+            contract,
+            nft: parseAttributes(dataWithCustom),
+          });
+          await sendAndConfirmTx.mutateAsync(transaction, {
+            onError: (error) => {
+              toast.error("Failed to update shared metadata", {
+                description: parseError(error),
+              });
+            },
+            onSuccess: () => {
+              toast.success("Shared metadata updated successfully");
+              setOpen(false);
+            },
+          });
         })}
       >
-        <div className="flex flex-col gap-2">
-          <Heading size="subtitle.md">Metadata</Heading>
-          <Divider />
-        </div>
-        <FormControl isInvalid={!!errors.name} isRequired>
-          <FormLabel>Name</FormLabel>
-          <Input autoFocus {...register("name")} />
-          <FormErrorMessage>{errors?.name?.message}</FormErrorMessage>
-        </FormControl>
-        <FormControl isInvalid={!!mediaFileError}>
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Name</FormLabel>
+              <FormControl>
+                <Input className="bg-card" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormItem>
           <FormLabel>Media</FormLabel>
           <div>
             <FileInput
-              className="shrink-0 rounded border border-border transition-all duration-200"
+              className="shrink-0 bg-card rounded-lg border border-border transition-all duration-200"
               client={contract.client}
               helperText="Media"
               previewMaxWidth="200px"
@@ -121,112 +116,122 @@ export const SharedMetadataForm: React.FC<{
               value={media}
             />
           </div>
-          <FormHelperText>
+          <FormDescription>
             You can upload image, audio, video, html, text, pdf, and 3d model
             files here.
-          </FormHelperText>
-          <FormErrorMessage>
-            {mediaFileError?.message as unknown as string}
-          </FormErrorMessage>
-        </FormControl>
+          </FormDescription>
+          {mediaFileError && (
+            <FormMessage>{mediaFileError.message}</FormMessage>
+          )}
+        </FormItem>
+
         {showCoverImageUpload && (
-          <FormControl isInvalid={!!errors.image}>
+          <FormItem>
             <FormLabel>Cover Image</FormLabel>
             <FileInput
               accept={{ "image/*": [] }}
-              className="shrink-0 rounded border border-border transition-all"
+              className="shrink-0 bg-card rounded-lg border border-border transition-all"
               client={contract.client}
               previewMaxWidth="200px"
-              setValue={(file) => setValue("image", file)}
+              setValue={(file) =>
+                form.setValue("image", file, {
+                  shouldValidate: true,
+                })
+              }
               showUploadButton
               value={image}
             />
-            <FormHelperText>
+            <FormDescription>
               You can optionally upload an image as the cover of your NFT.
-            </FormHelperText>
-            <FormErrorMessage>
-              {errors?.image?.message as unknown as string}
-            </FormErrorMessage>
-          </FormControl>
+            </FormDescription>
+          </FormItem>
         )}
-        <FormControl isInvalid={!!errors.description}>
-          <FormLabel>Description</FormLabel>
-          <Textarea {...register("description")} />
-          <FormErrorMessage>{errors?.description?.message}</FormErrorMessage>
-        </FormControl>
+
+        <FormField
+          control={form.control}
+          name="description"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Description</FormLabel>
+              <FormControl>
+                <Textarea className="bg-card" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
         <Accordion
-          allowToggle={!(errors.background_color || errors.external_url)}
-          index={
-            errors.background_color || errors.external_url ? [0] : undefined
-          }
+          type="single"
+          collapsible
+          className="-mx-1 border-t border-border"
         >
-          <AccordionItem>
-            <AccordionButton justifyContent="space-between" px={0}>
-              <Heading size="subtitle.md">Advanced Options</Heading>
-              <AccordionIcon />
-            </AccordionButton>
-            <AccordionPanel className="!px-0 flex flex-col gap-6">
+          <AccordionItem value="advanced-options">
+            <AccordionTrigger className="justify-between px-1">
+              <h3 className="text-base font-medium">Advanced Options</h3>
+            </AccordionTrigger>
+            <AccordionContent className="flex flex-col gap-6 px-1">
               {!(image instanceof File) && (
-                <FormControl isInvalid={!!errors.image}>
+                <FormItem>
                   <FormLabel>Image URL</FormLabel>
                   <Input
+                    className="bg-card"
                     onChange={(e) => {
-                      setValue("image", e.target.value);
+                      form.setValue("image", e.target.value, {
+                        shouldValidate: true,
+                      });
                     }}
                     value={image}
                   />
-                  <FormHelperText>
+                  <FormDescription>
                     If you already have your NFT image pre-uploaded, you can set
                     the URL or URI here.
-                  </FormHelperText>
-                  <FormErrorMessage>{errors?.image?.message}</FormErrorMessage>
-                </FormControl>
+                  </FormDescription>
+                </FormItem>
               )}
 
               {!(animation_url instanceof File) && (
-                <FormControl isInvalid={!!errors.animation_url}>
+                <FormItem>
                   <FormLabel>Animation URL</FormLabel>
                   <Input
+                    className="bg-card"
                     onChange={(e) => {
-                      setValue("animation_url", e.target.value);
+                      form.setValue("animation_url", e.target.value, {
+                        shouldValidate: true,
+                      });
                     }}
                     value={animation_url}
                   />
-                  <FormHelperText>
+                  <FormDescription>
                     If you already have your NFT Animation URL pre-uploaded, you
                     can set the URL or URI here.
-                  </FormHelperText>
-                  <FormErrorMessage>
-                    {errors?.animation_url?.message}
-                  </FormErrorMessage>
-                </FormControl>
+                  </FormDescription>
+                </FormItem>
               )}
-            </AccordionPanel>
+            </AccordionContent>
           </AccordionItem>
         </Accordion>
+
+        <div className="mt-8 flex flex-row justify-end gap-3">
+          <Button
+            disabled={sendAndConfirmTx.isPending}
+            variant="outline"
+            onClick={() => setOpen(false)}
+          >
+            Cancel
+          </Button>
+          <TransactionButton
+            client={contract.client}
+            isLoggedIn={isLoggedIn}
+            isPending={sendAndConfirmTx.isPending}
+            transactionCount={1}
+            txChainID={contract.chain.id}
+            type="submit"
+          >
+            Set NFT Metadata
+          </TransactionButton>
+        </div>
       </form>
-      <div className="mt-8 flex flex-row justify-end gap-3">
-        <Button
-          isDisabled={sendAndConfirmTx.isPending}
-          mr={3}
-          onClick={() => setOpen(false)}
-          variant="outline"
-        >
-          Cancel
-        </Button>
-        <TransactionButton
-          client={contract.client}
-          disabled={!isDirty}
-          form={SHARED_METADATA_FORM_ID}
-          isLoggedIn={isLoggedIn}
-          isPending={sendAndConfirmTx.isPending}
-          transactionCount={1}
-          txChainID={contract.chain.id}
-          type="submit"
-        >
-          Set NFT Metadata
-        </TransactionButton>
-      </div>
-    </>
+    </Form>
   );
-};
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx
index 0440851b8ad..ef38f6d6ece 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx
@@ -2,46 +2,32 @@
 /** biome-ignore-all lint/a11y/useSemanticElements: FIXME */
 "use client";
 
-import {
-  Flex,
-  IconButton,
-  Select,
-  Skeleton,
-  Spinner,
-  Table,
-  TableContainer,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-} from "@chakra-ui/react";
 import * as Sentry from "@sentry/nextjs";
-import {
-  ArrowRightIcon,
-  ChevronFirstIcon,
-  ChevronLastIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "lucide-react";
+import { ArrowUpRightIcon } from "lucide-react";
+import Link from "next/link";
 import { useEffect, useMemo, useState } from "react";
 import { ErrorBoundary, type FallbackProps } from "react-error-boundary";
-import {
-  type CellProps,
-  type Column,
-  usePagination,
-  useTable,
-} from "react-table";
-import type { NFT, ThirdwebContract } from "thirdweb";
+import type { ThirdwebContract } from "thirdweb";
 import * as ERC721Ext from "thirdweb/extensions/erc721";
 import * as ERC1155Ext from "thirdweb/extensions/erc1155";
 import { useReadContract } from "thirdweb/react";
 import { UnexpectedValueErrorMessage } from "@/components/blocks/error-fallbacks/unexpect-value-error-message";
+import { NFTMediaWithEmptyState } from "@/components/blocks/nft-media";
+import { PaginationButtons } from "@/components/blocks/pagination-buttons";
 import { WalletAddress } from "@/components/blocks/wallet-address";
-import { MediaCell } from "@/components/contracts/media-cell";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import { useChainSlug } from "@/hooks/chains/chainSlug";
-import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { cn } from "@/lib/utils";
 import type { ProjectMeta } from "../../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
 import { buildContractPagePath } from "../../_utils/contract-page-path";
@@ -52,120 +38,25 @@ interface ContractOverviewNFTGetAllProps {
   tokenByIndex: boolean;
   projectMeta: ProjectMeta | undefined;
 }
-export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
+
+export function NFTGetAllTable({
   contract,
   isErc721,
   tokenByIndex,
   projectMeta,
-}) => {
-  // if it's not erc721, it's erc1155
+}: ContractOverviewNFTGetAllProps) {
   const isErc1155 = !isErc721;
 
-  const router = useDashboardRouter();
-
-  const tableColumns = useMemo(() => {
-    const cols: Column<NFT>[] = [
-      {
-        accessor: (row) =>
-          row.id?.toString().length > 8
-            ? `${row.id.toString().slice(0, 4)}...${row.id.toString().slice(-4)}`
-            : row.id?.toString(),
-        Cell: (cell: CellProps<NFT, string>) => <p>{cell.value}</p>,
-        Header: "Token Id",
-      },
-      {
-        accessor: (row) => row.metadata,
-        Cell: (cell: CellProps<NFT, NFT["metadata"]>) => (
-          <MediaCell cell={cell} client={contract.client} />
-        ),
-        Header: "Media",
-      },
-      {
-        accessor: (row) => row.metadata.name,
-        Cell: (cell: CellProps<NFT, string>) => {
-          if (typeof cell.value !== "string") {
-            return (
-              <UnexpectedValueErrorMessage
-                className="w-[300px] py-3"
-                description="Name is not a string"
-                title="Invalid Name"
-                value={cell.value}
-              />
-            );
-          }
-
-          return (
-            <p className="line-clamp-1 text-muted-foreground text-sm">
-              {cell.value}
-            </p>
-          );
-        },
-        Header: "Name",
-      },
-      {
-        accessor: (row) => row.metadata.description,
-        Cell: (cell: CellProps<NFT, string>) => {
-          if (cell.value && typeof cell.value !== "string") {
-            return (
-              <UnexpectedValueErrorMessage
-                className="w-[300px] py-3"
-                description="Description is not a string"
-                title="Invalid description"
-                value={cell.value}
-              />
-            );
-          }
-
-          return (
-            <p
-              className={cn(
-                "line-clamp-4 max-w-[200px] whitespace-normal text-muted-foreground text-sm",
-                { italic: !cell.value },
-              )}
-            >
-              {cell.value || "No description"}
-            </p>
-          );
-        },
-        Header: "Description",
-      },
-    ];
-    if (isErc721) {
-      cols.push({
-        accessor: (row) => row.owner,
-        Cell: (cell: CellProps<NFT, string>) => (
-          <WalletAddress address={cell.value} client={contract.client} />
-        ),
-        Header: "Owner",
-      });
-    }
-    if (isErc1155) {
-      cols.push({
-        accessor: (row) => row,
-        Cell: (cell: CellProps<NFT, number>) => {
-          if (cell.row.original.type === "ERC1155") {
-            return (
-              <p className="line-clamp-4 font-mono text-base">
-                {cell.row.original.supply.toString()}
-              </p>
-            );
-          }
-        },
-        Header: "Circulating Supply",
-      });
-    }
-    return cols;
-  }, [isErc721, isErc1155, contract.client]);
-
-  const [queryParams, setQueryParams] = useState({ count: 50, start: 0 });
+  const [currentPage, setCurrentPage] = useState(0);
+  const pageSize = 5;
 
   const getNFTsQuery = useReadContract(
     isErc1155 ? ERC1155Ext.getNFTs : ERC721Ext.getNFTs,
     {
       contract,
-      count: queryParams.count,
+      count: pageSize,
       includeOwners: true,
-      start: queryParams.start,
+      start: currentPage * pageSize,
       tokenByIndex,
     },
   );
@@ -202,226 +93,231 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
     return Number(computedSupply);
   }, [totalSupplyQuery?.data, nextTokenIdToMintQuery?.data]);
 
-  const querySuccess =
-    nextTokenIdToMintQuery.isSuccess || totalSupplyQuery.isSuccess;
-  const queryLoading =
-    nextTokenIdToMintQuery.isPending || totalSupplyQuery.isPending;
+  const totalPages = Math.max(Math.ceil(safeTotalCount / pageSize), 1);
 
   const chainSlug = useChainSlug(contract.chain.id);
 
-  const {
-    getTableProps,
-    getTableBodyProps,
-    headerGroups,
-    prepareRow,
-    page,
-    canPreviousPage,
-    canNextPage,
-    pageCount,
-    gotoPage,
-    nextPage,
-    previousPage,
-    setPageSize,
-
-    state: { pageIndex, pageSize },
-  } = useTable(
-    {
-      columns: tableColumns,
-      data: getNFTsQuery.data || [],
-      initialState: {
-        pageIndex: 0,
-        pageSize: queryParams.count,
-      },
-      manualPagination: true,
-      pageCount: Math.max(
-        Math.ceil(safeTotalCount / (queryParams.count || 1)),
-        1,
-      ),
-    },
-    usePagination,
-  );
-
-  // FIXME: re-work tables and pagination with @tanstack/table@latest - which (I believe) does not need this workaround anymore
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    setQueryParams({ count: pageSize, start: pageIndex * pageSize });
-  }, [pageIndex, pageSize]);
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page - 1);
+  };
 
   return (
-    <Flex direction="column" gap={4}>
-      <TableContainer
-        className="relative rounded-lg border border-border bg-card"
-        maxW="100%"
-      >
+    <div className="border rounded-lg overflow-hidden">
+      <TableContainer className="border-0">
         {getNFTsQuery.isFetching && (
-          <Spinner
-            color="primary"
-            position="absolute"
-            right={4}
-            size="xs"
-            top={2}
-          />
+          <div className="absolute right-4 top-2">
+            <Spinner className="h-4 w-4" />
+          </div>
         )}
-        <Table {...getTableProps()}>
-          <Thead className="!bg-background">
-            {headerGroups.map((headerGroup, headerGroupIndex) => (
-              // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-              <Tr {...headerGroup.getHeaderGroupProps()} key={headerGroupIndex}>
-                {headerGroup.headers.map((column, columnIndex) => (
-                  <Th
-                    {...column.getHeaderProps()}
-                    border="none"
-                    // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                    key={columnIndex}
-                  >
-                    <p className="text-muted-foreground">
-                      {column.render("Header")}
-                    </p>
-                  </Th>
-                ))}
-                {/* Need to add an empty header for the drawer button */}
-                <Th border="none" key="drawer" />
-              </Tr>
-            ))}
-          </Thead>
-          <Tbody
-            {...getTableBodyProps()}
-            className="!bg-card"
-            position="relative"
-          >
-            {page.map((row, rowIndex) => {
-              const failedToLoad = !row.original.tokenURI;
-              prepareRow(row);
-              return (
-                <Tr
-                  {...row.getRowProps()}
-                  _last={{ borderBottomWidth: 0 }}
-                  borderBottomWidth={1}
-                  borderColor="borderColor"
-                  className="bg-card hover:bg-accent/50"
-                  cursor={failedToLoad ? "not-allowed" : "pointer"}
-                  // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                  key={rowIndex}
-                  onClick={() => {
-                    const tokenId = row.original.id;
-                    if (!tokenId && tokenId !== 0n) {
-                      return;
-                    }
 
-                    const path = buildContractPagePath({
-                      chainIdOrSlug: chainSlug.toString(),
-                      contractAddress: contract.address,
-                      projectMeta,
-                      subpath: `/nfts/${tokenId.toString()}`,
-                    });
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Token Id</TableHead>
+              <TableHead>Media</TableHead>
+              <TableHead>Name</TableHead>
+              <TableHead>Description</TableHead>
+              {isErc721 && <TableHead>Owner</TableHead>}
+              {isErc1155 && <TableHead>Circulating Supply</TableHead>}
+              {/* Need to add an empty header for the drawer button */}
+              <TableHead />
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {getNFTsQuery.isFetching &&
+              Array.from({ length: pageSize }).map((_, index) => (
+                <SkeletonRow
+                  // biome-ignore lint/suspicious/noArrayIndexKey: ok
+                  key={index}
+                  isErc721={isErc721}
+                  isErc1155={isErc1155}
+                />
+              ))}
+
+            {!getNFTsQuery.isFetching &&
+              (getNFTsQuery.data || []).map((row, _rowIndex) => {
+                const failedToLoad = !row.tokenURI;
 
-                    router.push(path, {
-                      scroll: true,
-                    });
-                  }}
-                  opacity={failedToLoad ? 0.3 : 1}
-                  pointerEvents={failedToLoad ? "none" : "auto"}
-                  role="group"
-                  style={{ cursor: "pointer" }}
-                >
-                  {row.cells.map((cell, cellIndex) => {
-                    return (
-                      <Td
-                        {...cell.getCellProps()}
-                        borderBottomWidth="inherit"
-                        borderColor="borderColor"
-                        // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                        key={cellIndex}
-                        maxW="sm"
+                const path = buildContractPagePath({
+                  chainIdOrSlug: chainSlug.toString(),
+                  contractAddress: contract.address,
+                  projectMeta,
+                  subpath: `/nfts/${row.id.toString()}`,
+                });
+
+                return (
+                  <TableRow
+                    key={row.id}
+                    linkBox
+                    className={cn(
+                      "bg-card hover:bg-accent/50 cursor-pointer",
+                      failedToLoad && "opacity-30 pointer-events-none",
+                    )}
+                  >
+                    {/* Token Id */}
+                    <TableCell className="max-w-sm">
+                      <Link
+                        href={path}
+                        className="before:absolute before:inset-0"
+                        target="_blank"
+                        rel="noopener noreferrer"
                       >
-                        <ErrorBoundary FallbackComponent={NFTCellErrorBoundary}>
-                          {cell.render("Cell")}
-                        </ErrorBoundary>
-                      </Td>
-                    );
-                  })}
-                  <Td borderBottomWidth="inherit" borderColor="borderColor">
-                    {!failedToLoad && <ArrowRightIcon className="size-4" />}
-                  </Td>
-                </Tr>
-              );
-            })}
-            {getNFTsQuery.isPlaceholderData && (
-              <Flex
-                _dark={{ bg: "whiteAlpha.50" }}
-                align="flex-end"
-                backdropFilter="blur(5px)"
-                bg="blackAlpha.100"
-                borderRadius="md"
-                bottom={0}
-                justify="center"
-                left={0}
-                p={8}
-                position="absolute"
-                right={0}
-                top={0}
-                zIndex="above"
-              >
-                <Flex align="center" gap={4}>
-                  <Spinner size="sm" />
-                  <p className="text-lg">Fetching new page</p>
-                </Flex>
-              </Flex>
-            )}
-          </Tbody>
+                        {row.id?.toString().length > 8
+                          ? `${row.id.toString().slice(0, 4)}...${row.id.toString().slice(-4)}`
+                          : row.id?.toString()}
+                      </Link>
+                    </TableCell>
+
+                    {/* Media */}
+                    <TableCell className="max-w-sm">
+                      <NFTMediaWithEmptyState
+                        className="pointer-events-none"
+                        client={contract.client}
+                        height="120px"
+                        metadata={row.metadata}
+                        requireInteraction
+                        width="120px"
+                      />
+                    </TableCell>
+
+                    {/* Name */}
+                    <TableCell className="max-w-sm">
+                      <ErrorBoundary FallbackComponent={NFTCellErrorBoundary}>
+                        {typeof row.metadata.name !== "string" ? (
+                          <UnexpectedValueErrorMessage
+                            className="w-[300px] py-3"
+                            description="Name is not a string"
+                            title="Invalid Name"
+                            value={row.metadata.name}
+                          />
+                        ) : (
+                          <p className="line-clamp-1 text-muted-foreground text-sm">
+                            {row.metadata.name}
+                          </p>
+                        )}
+                      </ErrorBoundary>
+                    </TableCell>
+
+                    {/* Description */}
+                    <TableCell className="max-w-sm">
+                      <ErrorBoundary FallbackComponent={NFTCellErrorBoundary}>
+                        {row.metadata.description &&
+                        typeof row.metadata.description !== "string" ? (
+                          <UnexpectedValueErrorMessage
+                            className="w-[300px] py-3"
+                            description="Description is not a string"
+                            title="Invalid description"
+                            value={row.metadata.description}
+                          />
+                        ) : (
+                          <p
+                            className={cn(
+                              "line-clamp-4 max-w-[200px] whitespace-normal text-muted-foreground text-sm",
+                              { italic: !row.metadata.description },
+                            )}
+                          >
+                            {row.metadata.description || "No description"}
+                          </p>
+                        )}
+                      </ErrorBoundary>
+                    </TableCell>
+
+                    {/* Owner (ERC721 only) */}
+                    {isErc721 && (
+                      <TableCell className="max-w-sm">
+                        {row.owner ? (
+                          <WalletAddress
+                            address={row.owner}
+                            client={contract.client}
+                          />
+                        ) : (
+                          <p className="text-muted-foreground">Not owned</p>
+                        )}
+                      </TableCell>
+                    )}
+
+                    {/* Circulating Supply (ERC1155 only) */}
+                    {isErc1155 && (
+                      <TableCell className="max-w-sm">
+                        {row.type === "ERC1155" && (
+                          <p className="line-clamp-4 font-mono text-base">
+                            {row.supply.toString()}
+                          </p>
+                        )}
+                      </TableCell>
+                    )}
+
+                    {/* arrow  */}
+                    <TableCell>
+                      <ArrowUpRightIcon className="size-4" />
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+          </TableBody>
         </Table>
-      </TableContainer>
-      <div className="flex w-full items-center justify-center">
-        <div className="flex flex-row items-center gap-1">
-          <IconButton
-            aria-label="first page"
-            icon={<ChevronFirstIcon className="size-4" />}
-            isDisabled={!canPreviousPage || queryLoading}
-            onClick={() => gotoPage(0)}
-          />
-          <IconButton
-            aria-label="previous page"
-            icon={<ChevronLeftIcon className="size-4" />}
-            isDisabled={!canPreviousPage || queryLoading}
-            onClick={() => previousPage()}
-          />
-          <p className="whitespace-nowrap">
-            Page <strong>{pageIndex + 1}</strong> of{" "}
-            <Skeleton as="span" display="inline" isLoaded={querySuccess}>
-              <strong>{pageCount}</strong>
-            </Skeleton>
-          </p>
-          <IconButton
-            aria-label="next page"
-            icon={<ChevronRightIcon className="size-4" />}
-            isDisabled={!canNextPage || queryLoading}
-            onClick={() => nextPage()}
-          />
-          <IconButton
-            aria-label="last page"
-            icon={<ChevronLastIcon className="size-4" />}
-            isDisabled={!canNextPage || queryLoading}
-            onClick={() => gotoPage(pageCount - 1)}
-          />
 
-          <Select
-            isDisabled={queryLoading}
-            onChange={(e) => {
-              setPageSize(Number.parseInt(e.target.value as string, 10));
-            }}
-            value={pageSize}
-          >
-            <option value="25">25</option>
-            <option value="50">50</option>
-            <option value="100">100</option>
-            <option value="250">250</option>
-            <option value="500">500</option>
-          </Select>
-        </div>
+        {!getNFTsQuery.isFetching && getNFTsQuery.data?.length === 0 && (
+          <div className="flex items-center justify-center py-20 text-muted-foreground w-full text-sm">
+            No NFTs found
+          </div>
+        )}
+      </TableContainer>
+      <div className="p-6 border-t bg-card">
+        <PaginationButtons
+          activePage={currentPage + 1}
+          totalPages={totalPages}
+          onPageClick={handlePageChange}
+        />
       </div>
-    </Flex>
+    </div>
+  );
+}
+
+function SkeletonRow({
+  isErc721,
+  isErc1155,
+}: {
+  isErc721: boolean;
+  isErc1155: boolean;
+}) {
+  return (
+    <TableRow>
+      {/* Token Id */}
+      <TableCell className="max-w-sm">
+        <Skeleton className="h-6 w-16" />
+      </TableCell>
+      {/* Media */}
+      <TableCell className="max-w-sm">
+        <Skeleton className="size-[120px]" />
+      </TableCell>
+      {/* Name */}
+      <TableCell className="max-w-sm">
+        <Skeleton className="h-6 w-24" />
+      </TableCell>
+      {/* Description */}
+      <TableCell className="max-w-sm">
+        <Skeleton className="h-6 w-32" />
+      </TableCell>
+      {/* Owner (ERC721 only) */}
+      {isErc721 && (
+        <TableCell className="max-w-sm">
+          <Skeleton className="h-6 w-40" />
+        </TableCell>
+      )}
+      {/* Circulating Supply (ERC1155 only) */}
+      {isErc1155 && (
+        <TableCell className="max-w-sm">
+          <Skeleton className="h-6 w-20" />
+        </TableCell>
+      )}
+      {/* Drawer button */}
+      <TableCell>
+        <Skeleton className="h-4 w-4" />
+      </TableCell>
+    </TableRow>
   );
-};
+}
 
 function NFTCellErrorBoundary(errorProps: FallbackProps) {
   // eslint-disable-next-line no-restricted-syntax
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/ContractPermissionsPage.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/ContractPermissionsPage.tsx
index c167a3a43d6..d8b2bd91942 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/ContractPermissionsPage.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/ContractPermissionsPage.tsx
@@ -1,34 +1,26 @@
 "use client";
 
-import { ButtonGroup, Divider, Flex } from "@chakra-ui/react";
-import { LinkButton } from "chakra/button";
-import { Card } from "chakra/card";
-import { Heading } from "chakra/heading";
-import { Link } from "chakra/link";
-import { Text } from "chakra/text";
+import { XIcon } from "lucide-react";
 import type { ThirdwebContract } from "thirdweb";
 import { InlineCode } from "@/components/ui/inline-code";
+import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
 import { buildContractPagePath } from "../_utils/contract-page-path";
 import { Permissions } from "./components";
 
-interface ContractPermissionsPageProps {
-  contract: ThirdwebContract;
-  detectedPermissionEnumerable: boolean;
-  chainSlug: string;
-  isLoggedIn: boolean;
-  projectMeta: ProjectMeta | undefined;
-}
-
-export const ContractPermissionsPage: React.FC<
-  ContractPermissionsPageProps
-> = ({
+export function ContractPermissionsPage({
   contract,
   detectedPermissionEnumerable,
   chainSlug,
   isLoggedIn,
   projectMeta,
-}) => {
+}: {
+  contract: ThirdwebContract;
+  detectedPermissionEnumerable: boolean;
+  chainSlug: string;
+  isLoggedIn: boolean;
+  projectMeta: ProjectMeta | undefined;
+}) {
   const explorerHref = buildContractPagePath({
     chainIdOrSlug: chainSlug,
     contractAddress: contract.address,
@@ -38,42 +30,31 @@ export const ContractPermissionsPage: React.FC<
 
   if (!detectedPermissionEnumerable) {
     return (
-      <Card as={Flex} flexDir="column" gap={3}>
-        {/* TODO  extract this out into it's own component and make it better */}
-        <Heading size="subtitle.md">
+      <div className="p-4 lg:p-6 border rounded-lg bg-card">
+        <div className="flex mb-5">
+          <div className="p-2 rounded-full border bg-card">
+            <XIcon className="size-5 text-muted-foreground" />
+          </div>
+        </div>
+
+        <h3 className="text-xl font-semibold tracking-tight mb-1">
           Missing PermissionsEnumerable Extension
-        </Heading>
-        <Text>
+        </h3>
+
+        <p className="text-muted-foreground leading-relaxed">
           This contract does not support the{" "}
           <InlineCode code="PermissionsEnumerable" />
-          extension.
+          extension.{" "}
+          <UnderlineLink href="https://portal.thirdweb.com/tokens/build/extensions/general/Permissions">
+            Learn more about permissions
+          </UnderlineLink>
           <br />
           As a result, you can only view and manage basic permissions via the{" "}
-          <Link color="primary.500" href={explorerHref}>
-            Explorer
-          </Link>{" "}
-          at the moment.
-        </Text>
-
-        <Divider my={1} />
-        <Flex align="center" gap={4}>
-          <Heading size="label.md">Learn more: </Heading>
-          <ButtonGroup colorScheme="purple" size="sm" variant="solid">
-            <LinkButton
-              href="https://portal.thirdweb.com/contracts/build/extensions/general/Permissions"
-              isExternal
-            >
-              Permissions
-            </LinkButton>
-          </ButtonGroup>
-        </Flex>
-      </Card>
+          <UnderlineLink href={explorerHref}>Explorer</UnderlineLink>
+        </p>
+      </div>
     );
   }
 
-  return (
-    <Flex direction="column" gap={6}>
-      <Permissions contract={contract} isLoggedIn={isLoggedIn} />
-    </Flex>
-  );
-};
+  return <Permissions contract={contract} isLoggedIn={isLoggedIn} />;
+}
diff --git a/apps/dashboard/src/chakra/button.tsx b/apps/dashboard/src/chakra/button.tsx
index d7aaac8641f..c30f51252ec 100644
--- a/apps/dashboard/src/chakra/button.tsx
+++ b/apps/dashboard/src/chakra/button.tsx
@@ -5,7 +5,6 @@ import {
   type ButtonProps as ChakraButtonProps,
   forwardRef,
   LightMode,
-  Link,
   useButtonGroup,
 } from "@chakra-ui/react";
 import {
@@ -13,9 +12,6 @@ import {
   letterSpacings,
   lineHeights,
 } from "chakra/theme/typography";
-import { ExternalLinkIcon } from "lucide-react";
-import { forwardRef as reactForwardRef } from "react";
-import { ChakraNextLink } from "./link";
 import { convertFontSizeToCSSVar } from "./utils/typography";
 
 const buttonSizesMap = {
@@ -80,45 +76,3 @@ export const Button = forwardRef<ButtonProps, "button">(
     );
   },
 );
-
-interface LinkButtonProps extends ButtonProps {
-  href: string;
-  isExternal?: boolean;
-  noIcon?: true;
-}
-
-export const LinkButton = reactForwardRef<HTMLButtonElement, LinkButtonProps>(
-  ({ href, isExternal, noIcon, children, ...restButtonProps }, ref) => {
-    if (isExternal) {
-      return (
-        <Button
-          as={Link}
-          href={href}
-          isExternal
-          ref={ref}
-          rightIcon={
-            noIcon ? undefined : <ExternalLinkIcon className="size-4" />
-          }
-          textDecoration="none!important"
-          {...restButtonProps}
-        >
-          {children}
-        </Button>
-      );
-    }
-
-    return (
-      <Button
-        as={ChakraNextLink}
-        href={href}
-        ref={ref}
-        {...restButtonProps}
-        textDecoration="none!important"
-      >
-        {children}
-      </Button>
-    );
-  },
-);
-
-LinkButton.displayName = "LinkButton";
diff --git a/apps/dashboard/src/chakra/form.tsx b/apps/dashboard/src/chakra/form.tsx
index 337ec534e36..fa527037287 100644
--- a/apps/dashboard/src/chakra/form.tsx
+++ b/apps/dashboard/src/chakra/form.tsx
@@ -1,9 +1,7 @@
 import {
   FormErrorMessage as ChakraFormErrorMessage,
   type FormErrorMessageProps as ChakraFormErrorMessageProps,
-  FormHelperText as ChakraFormHelperText,
   type FormLabelProps as ChakraFormLabelprops,
-  type TextProps as ChakraHelperTextProps,
   FormLabel as FormLabelText,
 } from "@chakra-ui/react";
 import {
@@ -40,27 +38,6 @@ export const FormLabel: ComponentWithChildren<FormLabelProps> = ({
   );
 };
 
-interface FormHelperTextProps extends Omit<ChakraHelperTextProps, "size"> {
-  size?: BodySizes;
-}
-
-export const FormHelperText: ComponentWithChildren<FormHelperTextProps> = ({
-  size = "body.sm",
-  ...restProps
-}) => {
-  const [base] = size.split(".") as [BodyBase, TypographySize];
-
-  return (
-    <ChakraFormHelperText
-      fontSize={convertFontSizeToCSSVar(size)}
-      fontWeight={fontWeights[base]}
-      letterSpacing={letterSpacings[base]}
-      lineHeight={lineHeights[base]}
-      {...restProps}
-    />
-  );
-};
-
 interface FormErrorMessageProps
   extends Omit<ChakraFormErrorMessageProps, "size"> {
   size?: BodySizes;
diff --git a/apps/dashboard/src/chakra/link.tsx b/apps/dashboard/src/chakra/link.tsx
deleted file mode 100644
index 3aad69373af..00000000000
--- a/apps/dashboard/src/chakra/link.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-"use client";
-
-import {
-  Link as ChakraLink,
-  type LinkProps as ChakraLinkProps,
-  forwardRef,
-} from "@chakra-ui/react";
-import _NextLink, { type LinkProps as _NextLinkProps } from "next/link";
-import { forwardRef as reactForwardRef } from "react";
-
-type ChakraNextLinkProps = Omit<ChakraLinkProps, "as"> &
-  Omit<_NextLinkProps, "as">;
-export const ChakraNextLink = forwardRef<ChakraNextLinkProps, "a">(
-  (props, ref) => (
-    <ChakraLink as={_NextLink} {...props} prefetch={false} ref={ref} />
-  ),
-);
-
-interface LinkProps
-  extends Omit<ChakraLinkProps, "href">,
-    Pick<_NextLinkProps, "href"> {
-  isExternal?: boolean;
-  noIcon?: true;
-  href: string;
-
-  scroll?: true;
-}
-
-/**
- * A link component that can be used to navigate to other pages.
- * Combines the `NextLink` and Chakra `Link` components.
- */
-export const Link = reactForwardRef<HTMLAnchorElement, LinkProps>(
-  ({ href, isExternal, children, scroll, ...restLinkProps }, ref) => {
-    if (isExternal) {
-      return (
-        <ChakraLink href={href} isExternal ref={ref} {...restLinkProps}>
-          {children}
-        </ChakraLink>
-      );
-    }
-
-    return (
-      <ChakraNextLink
-        _focus={{ boxShadow: "none" }}
-        href={href}
-        ref={ref}
-        scroll={scroll}
-        scrollBehavior="smooth"
-        {...restLinkProps}
-      >
-        {children}
-      </ChakraNextLink>
-    );
-  },
-);
-
-Link.displayName = "Link";