diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/CancelDirectListing.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/CancelDirectListing.tsx
deleted file mode 100644
index ee649a11d82..00000000000
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/CancelDirectListing.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { ThirdwebContract } from "thirdweb";
-import { CancelTab } from "./cancel-tab";
-
-interface CancelDirectListingProps {
-  contract: ThirdwebContract;
-  listingId: string;
-}
-
-export const CancelDirectListing: React.FC<CancelDirectListingProps> = ({
-  contract,
-  listingId,
-}) => {
-  return <CancelTab contract={contract} id={listingId} />;
-};
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/CancelEnglishAuction.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/CancelEnglishAuction.tsx
deleted file mode 100644
index 5fd19089be3..00000000000
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/CancelEnglishAuction.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { ThirdwebContract } from "thirdweb";
-import { CancelTab } from "./cancel-tab";
-
-interface CancelEnglishAuctionProps {
-  contract: ThirdwebContract;
-  auctionId: string;
-}
-
-export const CancelEnglishAuction: React.FC<CancelEnglishAuctionProps> = ({
-  contract,
-  auctionId,
-}) => {
-  return <CancelTab contract={contract} id={auctionId} />;
-};
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/cancel-tab.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/cancel-tab.tsx
index 07a94194013..3e9580888bb 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/cancel-tab.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/cancel-tab.tsx
@@ -3,7 +3,7 @@
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useAllChainsData } from "hooks/chains/allChains";
-import { useTxNotifications } from "hooks/useTxNotifications";
+import { toast } from "sonner";
 import type { ThirdwebContract } from "thirdweb";
 import { cancelAuction, cancelListing } from "thirdweb/extensions/marketplace";
 import { useSendAndConfirmTransaction } from "thirdweb/react";
@@ -25,14 +25,9 @@ export const CancelTab: React.FC<CancelTabProps> = ({
   const transaction = isAuction
     ? cancelAuction({ contract, auctionId: BigInt(id) })
     : cancelListing({ contract, listingId: BigInt(id) });
-  const { onSuccess, onError } = useTxNotifications(
-    "Listing cancelled",
-    "Error cancelling listing",
-  );
   const cancelQuery = useSendAndConfirmTransaction();
   return (
     <div className="flex flex-col gap-3 pt-3">
-      {/* maybe some text? */}
       <TransactionButton
         txChainID={contract.chain.id}
         transactionCount={1}
@@ -43,7 +38,7 @@ export const CancelTab: React.FC<CancelTabProps> = ({
             action: "cancel-listing",
             label: "attempt",
           });
-          cancelQuery.mutate(transaction, {
+          const promise = cancelQuery.mutateAsync(transaction, {
             onSuccess: () => {
               trackEvent({
                 category: "marketplace",
@@ -51,7 +46,6 @@ export const CancelTab: React.FC<CancelTabProps> = ({
                 label: "success",
                 network,
               });
-              onSuccess();
             },
             onError: (error) => {
               trackEvent({
@@ -61,14 +55,19 @@ export const CancelTab: React.FC<CancelTabProps> = ({
                 network,
                 error,
               });
-              onError(error);
+              console.error(error);
             },
           });
+          toast.promise(promise, {
+            loading: `Cancelling ${isAuction ? "auction" : "listing"}`,
+            success: "Item cancelled successfully",
+            error: "Failed to cancel",
+          });
         }}
         colorScheme="primary"
         alignSelf="flex-end"
       >
-        Cancel Listing
+        Cancel {isAuction ? "Auction" : "Listing"}
       </TransactionButton>
     </div>
   );
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/listing-drawer.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/listing-drawer.tsx
index be9e5e57b86..f8320567e69 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/listing-drawer.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/listing-drawer.tsx
@@ -1,17 +1,8 @@
 import { WalletAddress } from "@/components/blocks/wallet-address";
+import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Sheet, SheetContent } from "@/components/ui/sheet";
-import {
-  Flex,
-  GridItem,
-  SimpleGrid,
-  Tab,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
-  usePrevious,
-} from "@chakra-ui/react";
-import { useMemo } from "react";
+import { Flex, GridItem, SimpleGrid, usePrevious } from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
 import type {
   DirectListing,
@@ -19,10 +10,8 @@ import type {
 } from "thirdweb/extensions/marketplace";
 import { useActiveAccount } from "thirdweb/react";
 import { Badge, Card, CodeBlock, Heading, Text } from "tw-components";
-import { AddressCopyButton } from "tw-components/AddressCopyButton";
 import { NFTMediaWithEmptyState } from "tw-components/nft-media";
-import { CancelDirectListing } from "./CancelDirectListing";
-import { CancelEnglishAuction } from "./CancelEnglishAuction";
+import { CancelTab } from "./cancel-tab";
 import { LISTING_STATUS } from "./types";
 
 interface NFTDrawerProps {
@@ -30,7 +19,6 @@ interface NFTDrawerProps {
   isOpen: boolean;
   onClose: () => void;
   data: DirectListing | EnglishAuction | null;
-  type: "direct-listings" | "english-auctions";
 }
 
 export const ListingDrawer: React.FC<NFTDrawerProps> = ({
@@ -38,164 +26,16 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
   isOpen,
   onClose,
   data,
-  type,
 }) => {
   const address = useActiveAccount()?.address;
   const prevData = usePrevious(data);
 
   const renderData = data || prevData;
-  const isOwner = address === renderData?.creatorAddress;
+  const isOwner =
+    address?.toLowerCase() === renderData?.creatorAddress.toLowerCase();
 
   const tokenId = renderData?.asset.id.toString() || "";
 
-  const tabs = useMemo(() => {
-    if (!renderData) {
-      return [];
-    }
-    const t = [
-      {
-        title: "Details",
-        isDisabled: false,
-        children: () => (
-          <Flex flexDir="column" gap={4}>
-            <Card as={Flex} flexDir="column" gap={3}>
-              <SimpleGrid rowGap={3} columns={12} placeItems="center left">
-                <GridItem colSpan={3}>
-                  <Heading size="label.md">Asset contract address</Heading>
-                </GridItem>
-                <GridItem colSpan={9}>
-                  <AddressCopyButton
-                    size="xs"
-                    address={renderData.assetContractAddress}
-                    title="contract address"
-                  />
-                </GridItem>
-                <GridItem colSpan={3}>
-                  <Heading size="label.md">Token ID</Heading>
-                </GridItem>
-                <GridItem colSpan={9}>
-                  <AddressCopyButton
-                    size="xs"
-                    address={tokenId}
-                    title="Token ID"
-                  />
-                </GridItem>
-                <GridItem colSpan={3}>
-                  <Heading size="label.md">Seller</Heading>
-                </GridItem>
-                <GridItem colSpan={9}>
-                  <WalletAddress address={renderData.creatorAddress} />
-                </GridItem>
-                <GridItem colSpan={3}>
-                  <Heading size="label.md">Listing ID</Heading>
-                </GridItem>
-                <GridItem colSpan={9}>
-                  <AddressCopyButton
-                    size="xs"
-                    title="listing ID"
-                    address={renderData.id.toString()}
-                  />
-                </GridItem>
-                <GridItem colSpan={3}>
-                  <Heading size="label.md">Type</Heading>
-                </GridItem>
-                <GridItem colSpan={9}>
-                  <Text fontFamily="mono" size="body.md">
-                    {renderData.asset.type}
-                  </Text>
-                </GridItem>
-                <GridItem colSpan={3}>
-                  <Heading size="label.md">Status</Heading>
-                </GridItem>
-                <GridItem colSpan={9}>
-                  <Badge
-                    size="label.sm"
-                    variant="subtle"
-                    textTransform="capitalize"
-                  >
-                    {LISTING_STATUS[renderData.status]}
-                  </Badge>
-                </GridItem>
-                <GridItem colSpan={3}>
-                  <Heading size="label.md">Quantity</Heading>
-                </GridItem>
-                <GridItem colSpan={9}>
-                  <Text fontFamily="mono" size="body.md">
-                    {(renderData.quantity || 0n).toString()}{" "}
-                    {/* For listings that are completed, the `quantity` would be `0`
-                    So we show this text to make it clear */}
-                    {LISTING_STATUS[renderData.status] === "Completed"
-                      ? "(Sold out)"
-                      : ""}
-                  </Text>
-                </GridItem>
-
-                {renderData.type === "direct-listing" && (
-                  <>
-                    <GridItem colSpan={3}>
-                      <Heading size="label.md">Price</Heading>
-                    </GridItem>
-                    <GridItem colSpan={9}>
-                      <Text fontFamily="mono" size="body.md">
-                        {renderData.currencyValuePerToken.displayValue}{" "}
-                        {renderData.currencyValuePerToken.symbol}
-                      </Text>
-                    </GridItem>
-                  </>
-                )}
-
-                {/*
-                  Todo: Add a Buy button somewhere in this section once the Dashboard is fully migrated to v5 (?)
-                  Kien already shipped a prebuilt component for the Marketplace Buy Button in SDK v5
-                */}
-              </SimpleGrid>
-            </Card>
-            {data?.asset.metadata.properties ? (
-              <Card as={Flex} flexDir="column" gap={4}>
-                <Heading size="label.md">Attributes</Heading>
-                <CodeBlock
-                  code={
-                    JSON.stringify(data.asset.metadata.properties, null, 2) ||
-                    ""
-                  }
-                  language="json"
-                  canCopy={false}
-                  wrap={false}
-                  overflow="auto"
-                />
-              </Card>
-            ) : null}
-          </Flex>
-        ),
-      },
-      {
-        title: "Cancel Listing",
-        isDisabled: !isOwner,
-        children: () =>
-          type === "direct-listings" ? (
-            <CancelDirectListing
-              contract={contract}
-              listingId={renderData.id.toString()}
-            />
-          ) : (
-            <CancelEnglishAuction
-              contract={contract}
-              auctionId={renderData.id.toString()}
-            />
-          ),
-      },
-    ];
-
-    return t;
-  }, [
-    renderData,
-    isOwner,
-    tokenId,
-    data?.asset.metadata.properties,
-    type,
-    contract,
-  ]);
-
   if (!renderData) {
     return null;
   }
@@ -203,7 +43,7 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
   return (
     <Sheet open={isOpen} onOpenChange={onClose}>
       <SheetContent className="flex w-full flex-col gap-6 py-6 md:min-w-[600px]">
-        <Flex gap={6}>
+        <div className="flex flex-row gap-6">
           <NFTMediaWithEmptyState
             metadata={renderData.asset.metadata}
             requireInteraction
@@ -216,31 +56,124 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
               {renderData.asset.metadata.name}
             </Text>
           </Flex>
-        </Flex>
+        </div>
 
-        <Tabs isLazy lazyBehavior="keepMounted" colorScheme="gray">
-          <TabList
-            px={0}
-            borderBottomColor="borderColor"
-            borderBottomWidth="1px"
-            overflowX={{ base: "auto", md: "inherit" }}
-          >
-            {tabs.map((tab) => (
-              <Tab key={tab.title} gap={2} isDisabled={tab.isDisabled}>
-                {tab.title}
-              </Tab>
-            ))}
-          </TabList>
-          <TabPanels px={0} py={2}>
-            {tabs.map((tab) => {
-              return (
-                <TabPanel key={tab.title} px={0}>
-                  {tab.children()}
-                </TabPanel>
-              );
-            })}
-          </TabPanels>
-        </Tabs>
+        <Flex flexDir="column" gap={4}>
+          <Card as={Flex} flexDir="column" gap={3}>
+            <SimpleGrid rowGap={3} columns={12} placeItems="center left">
+              <GridItem colSpan={3}>
+                <Heading size="label.md">Asset contract address</Heading>
+              </GridItem>
+              <GridItem colSpan={9}>
+                <CopyAddressButton
+                  address={renderData.assetContractAddress}
+                  copyIconPosition="right"
+                />
+              </GridItem>
+              <GridItem colSpan={3}>
+                <Heading size="label.md">Token ID</Heading>
+              </GridItem>
+              <GridItem colSpan={9}>
+                <CopyTextButton
+                  textToCopy={tokenId}
+                  textToShow={tokenId}
+                  copyIconPosition="right"
+                  tooltip="Token ID"
+                />
+              </GridItem>
+              <GridItem colSpan={3}>
+                <Heading size="label.md">Seller</Heading>
+              </GridItem>
+              <GridItem colSpan={9}>
+                <WalletAddress address={renderData.creatorAddress} />
+              </GridItem>
+              <GridItem colSpan={3}>
+                <Heading size="label.md">Listing ID</Heading>
+              </GridItem>
+              <GridItem colSpan={9}>
+                <CopyTextButton
+                  textToCopy={renderData.id.toString()}
+                  textToShow={renderData.id.toString()}
+                  copyIconPosition="right"
+                  tooltip="Listing ID"
+                />
+              </GridItem>
+              <GridItem colSpan={3}>
+                <Heading size="label.md">Type</Heading>
+              </GridItem>
+              <GridItem colSpan={9}>
+                <Text fontFamily="mono" size="body.md">
+                  {renderData.asset.type}
+                </Text>
+              </GridItem>
+              <GridItem colSpan={3}>
+                <Heading size="label.md">Status</Heading>
+              </GridItem>
+              <GridItem colSpan={9}>
+                <Badge
+                  size="label.sm"
+                  variant="subtle"
+                  textTransform="capitalize"
+                >
+                  {LISTING_STATUS[renderData.status]}
+                </Badge>
+              </GridItem>
+              <GridItem colSpan={3}>
+                <Heading size="label.md">Quantity</Heading>
+              </GridItem>
+              <GridItem colSpan={9}>
+                <Text fontFamily="mono" size="body.md">
+                  {(renderData.quantity || 0n).toString()}{" "}
+                  {/* For listings that are completed, the `quantity` would be `0`
+                    So we show this text to make it clear */}
+                  {LISTING_STATUS[renderData.status] === "Completed"
+                    ? "(Sold out)"
+                    : ""}
+                </Text>
+              </GridItem>
+
+              {renderData.type === "direct-listing" && (
+                <>
+                  <GridItem colSpan={3}>
+                    <Heading size="label.md">Price</Heading>
+                  </GridItem>
+                  <GridItem colSpan={9}>
+                    <Text fontFamily="mono" size="body.md">
+                      {renderData.currencyValuePerToken.displayValue}{" "}
+                      {renderData.currencyValuePerToken.symbol}
+                    </Text>
+                  </GridItem>
+                </>
+              )}
+
+              {/*
+                  Todo: Add a Buy button somewhere in this section once the Dashboard is fully migrated to v5 (?)
+                  Kien already shipped a prebuilt component for the Marketplace Buy Button in SDK v5
+                */}
+            </SimpleGrid>
+          </Card>
+          {data?.asset.metadata.properties ? (
+            <Card as={Flex} flexDir="column" gap={4}>
+              <Heading size="label.md">Attributes</Heading>
+              <CodeBlock
+                code={
+                  JSON.stringify(data.asset.metadata.properties, null, 2) || ""
+                }
+                language="json"
+                canCopy={false}
+                wrap={false}
+                overflow="auto"
+              />
+            </Card>
+          ) : null}
+        </Flex>
+        {isOwner && (
+          <CancelTab
+            contract={contract}
+            id={renderData.id.toString()}
+            isAuction={renderData.type === "english-auction"}
+          />
+        )}
       </SheetContent>
     </Sheet>
   );
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/marketplace-table.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/marketplace-table.tsx
index f40c6eb00d1..1784e397011 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/marketplace-table.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/marketplace-table.tsx
@@ -100,7 +100,6 @@ interface MarketplaceTableProps {
       start: number;
     }>
   >;
-  type: "direct-listings" | "english-auctions";
 }
 
 const DEFAULT_QUERY_STATE = { count: 50, start: 0 };
@@ -112,7 +111,6 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
   totalCountQuery,
   queryParams,
   setQueryParams,
-  type,
 }) => {
   const [listingsToShow, setListingsToShow_] = useState<"all" | "valid">("all");
 
@@ -215,7 +213,6 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
           data={tokenRow}
           isOpen={!!tokenRow}
           onClose={() => setTokenRow(null)}
-          type={type}
         />
         <Table {...getTableProps()}>
           <Thead>
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/direct-listings/components/table.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/direct-listings/components/table.tsx
index 5fdd4923ec1..63fea69562b 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/direct-listings/components/table.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/direct-listings/components/table.tsx
@@ -40,7 +40,6 @@ export const DirectListingsTable: React.FC<DirectListingsTableProps> = ({
       totalCountQuery={totalCountQuery}
       queryParams={queryParams}
       setQueryParams={setQueryParams}
-      type="direct-listings"
     />
   );
 };
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/english-auctions/components/table.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/english-auctions/components/table.tsx
index c94f53af1ec..d4b26192650 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/english-auctions/components/table.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/english-auctions/components/table.tsx
@@ -40,7 +40,6 @@ export const EnglishAuctionsTable: React.FC<EnglishAuctionsTableProps> = ({
       totalCountQuery={totalCountQuery}
       queryParams={queryParams}
       setQueryParams={setQueryParams}
-      type="english-auctions"
     />
   );
 };