diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/desktop-token-activity.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/desktop-token-activity.tsx
new file mode 100644
index 00000000..aabce9eb
--- /dev/null
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/desktop-token-activity.tsx
@@ -0,0 +1,100 @@
+import {
+  ArrowLeftRight,
+  CircleDot,
+  Gavel,
+  List,
+  ListX,
+  Meh,
+  ShoppingCart,
+  Tag,
+  X,
+} from "lucide-react";
+
+import type { PropsWithClassName } from "@ark-market/ui";
+import { shortAddress, timeSince } from "@ark-market/ui";
+import { PriceTag } from "@ark-market/ui/price-tag";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@ark-market/ui/table";
+
+import type { TokenActivity } from "../queries/getTokenData";
+
+export const activityTypeToItem = new Map([
+  ["FULFILL", { icon: <ShoppingCart size={24} />, title: "Sale in progress" }],
+  ["EXECUTED", { icon: <ShoppingCart size={24} />, title: "Sale" }],
+  ["SALE", { icon: <ShoppingCart size={24} />, title: "Sale" }],
+  ["TRANSFER", { icon: <ArrowLeftRight size={24} />, title: "Transfer" }],
+  ["LISTING", { icon: <List size={24} />, title: "List" }],
+  ["OFFER", { icon: <Tag size={24} />, title: "Offer" }],
+  ["CANCELLED", { icon: <X size={24} />, title: "Cancel Offer" }],
+  ["MINT", { icon: <CircleDot size={24} />, title: "Mint" }],
+  ["AUCTION", { icon: <Gavel size={24} />, title: "Put in auction" }],
+  ["DELISTING", { icon: <ListX size={24} />, title: "Delist" }],
+]);
+
+interface DesktopTokenActivityProps {
+  tokenActivity: TokenActivity[];
+}
+
+export default function DesktopTokenActivity({
+  className,
+  tokenActivity,
+}: PropsWithClassName<DesktopTokenActivityProps>) {
+  return (
+    <Table className={className}>
+      <TableHeader>
+        <TableRow className="hover:bg-background">
+          <TableHead className="pl-5">Event</TableHead>
+          <TableHead>Price</TableHead>
+          <TableHead>From</TableHead>
+          <TableHead>To</TableHead>
+          <TableHead>Date</TableHead>
+        </TableRow>
+      </TableHeader>
+      {tokenActivity.length === 0 ? (
+        <TableBody className="table-caption">
+          <div className="flex flex-col items-center gap-3 pt-10 text-muted-foreground">
+            <Meh size={42} />
+            <p className="text-xl font-semibold">No activity yet!</p>
+          </div>
+        </TableBody>
+      ) : (
+        <TableBody className="text-sm font-semibold">
+          {tokenActivity.map((activity, index) => {
+            const activityItem = activityTypeToItem.get(activity.activity_type);
+
+            return (
+              <TableRow className="group h-[4.6875rem]" key={index}>
+                <TableCell className="pl-5 transition-colors group-hover:text-muted-foreground">
+                  <div className="flex items-center gap-4 whitespace-nowrap">
+                    {activityItem?.icon}
+                    <p>{activityItem?.title}</p>
+                  </div>
+                </TableCell>
+                <TableCell>
+                  {activity.price !== null ? (
+                    <PriceTag price={activity.price} />
+                  ) : (
+                    "_"
+                  )}
+                </TableCell>
+                <TableCell>
+                  {activity.from ? shortAddress(activity.from) : "_"}
+                </TableCell>
+                <TableCell>
+                  {activity.to ? shortAddress(activity.to) : "_"}
+                </TableCell>
+                <TableCell>{timeSince(activity.time_stamp)}</TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      )}
+    </Table>
+  );
+}
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/mobile-token-activity.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/mobile-token-activity.tsx
index 7b0451b6..aebc2057 100644
--- a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/mobile-token-activity.tsx
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/mobile-token-activity.tsx
@@ -1,109 +1,67 @@
 import { Fragment } from "react";
-import {
-  ArrowLeftRight,
-  List,
-  ListX,
-  ShoppingCart,
-  Tag,
-  X,
-} from "lucide-react";
+import { Meh } from "lucide-react";
 
 import type { PropsWithClassName } from "@ark-market/ui";
-import { cn } from "@ark-market/ui";
+import { shortAddress, timeSince } from "@ark-market/ui";
 import { PriceTag } from "@ark-market/ui/price-tag";
 import { Separator } from "@ark-market/ui/separator";
 
-const activityTypeToItem = new Map([
-  ["sale", { icon: <ShoppingCart size={20} />, title: "Sale" }],
-  ["transfer", { icon: <ArrowLeftRight size={20} />, title: "Transfer" }],
-  ["list", { icon: <List size={20} />, title: "List" }],
-  ["offer", { icon: <Tag size={20} />, title: "Offer" }],
-  ["cancel_offer", { icon: <X size={20} />, title: "Cancel Offer" }],
-  ["delist", { icon: <ListX size={20} />, title: "Delist" }],
-]);
+import type { TokenActivity } from "../queries/getTokenData";
+import { activityTypeToItem } from "./desktop-token-activity";
 
-const activityData = [
-  {
-    type: "transfer",
-    from: "0x123",
-    to: "0x456",
-  },
-  {
-    type: "list",
-    price: 1180000000000000000n,
-    from: "0x123",
-  },
-  {
-    type: "offer",
-    price: 1840000000000000000n,
-    from: "0x123",
-    to: "0x456",
-  },
-  {
-    type: "cancel_offer",
-    price: 1540000000000000000n,
-    from: "0x123",
-    to: "0x456",
-  },
-  {
-    type: "delist",
-    price: 3240000000000000000n,
-    from: "0x123",
-  },
-  {
-    type: "sale",
-    price: 1140000000000000000n,
-    from: "0x123",
-    to: "0x456",
-  },
-];
+interface MobileTokenActivityProps {
+  tokenActivity: TokenActivity[];
+}
 
-export default function MobileTokenActivity({ className }: PropsWithClassName) {
+export default function MobileTokenActivity({
+  className,
+  tokenActivity,
+}: PropsWithClassName<MobileTokenActivityProps>) {
   return (
-    <div className={cn("", className)}>
-      <div className="flex items-center gap-4">
-        <h2 className="text-2xl font-semibold">Activity</h2>
-        <div className="flex h-6 items-center rounded-full bg-secondary px-3 text-sm font-medium text-secondary-foreground">
-          {activityData.length}
-        </div>
-      </div>
+    <div className={className}>
+      <p className="text-sm font-semibold text-muted-foreground">Event</p>
+      <Separator className="my-4" />
 
-      <div className="mt-6">
-        <p className="text-sm font-semibold text-muted-foreground">Event</p>
-        <Separator className="my-4" />
+      {tokenActivity.length === 0 && (
+        <div className="flex flex-col items-center gap-3 py-10 text-muted-foreground">
+          <Meh size={42} />
+          <p className="text-xl font-semibold">No activity yet!</p>
+        </div>
+      )}
 
-        {activityData.map((activity, index) => {
-          const activityItem = activityTypeToItem.get(activity.type);
+      {tokenActivity.map((activity, index) => {
+        const activityItem = activityTypeToItem.get(activity.activity_type);
 
-          return (
-            <Fragment key={index}>
-              <div className="flex flex-col gap-2">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2.5">
-                    {activityItem?.icon}
-                    <p>{activityItem?.title}</p>
-                  </div>
-                  {activity.price !== undefined ? (
-                    <PriceTag price={activity.price} className="h-7 text-xs" />
-                  ) : (
-                    "_"
-                  )}
-                </div>
-                <div className="flex items-center justify-between text-sm font-semibold">
-                  <p>
-                    by{" "}
-                    <span className="text-muted-foreground">
-                      {activity.from}{" "}
-                    </span>
-                  </p>
-                  <p className="text-xs text-muted-foreground">8min ago</p>
+        return (
+          <Fragment key={index}>
+            <div className="flex flex-col gap-2">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2.5">
+                  {activityItem?.icon}
+                  <p>{activityItem?.title}</p>
                 </div>
+                {activity.price !== null ? (
+                  <PriceTag price={activity.price} className="h-7 text-xs" />
+                ) : (
+                  "_"
+                )}
+              </div>
+              <div className="flex items-center justify-between text-sm font-semibold">
+                <p>
+                  by{" "}
+                  <span className="text-muted-foreground">
+                    {activity.from ? shortAddress(activity.from) : "_"}
+                  </span>
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {timeSince(activity.time_stamp)}
+                </p>
               </div>
-              <Separator className="my-4" />
-            </Fragment>
-          );
-        })}
-      </div>
+            </div>
+            <Separator className="my-4" />
+          </Fragment>
+        );
+      })}
     </div>
   );
 }
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-about.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-about.tsx
index 7166e293..d47609b0 100644
--- a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-about.tsx
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-about.tsx
@@ -4,7 +4,7 @@ import { useMemo, useState } from "react";
 import { ChevronDown, ChevronUp } from "lucide-react";
 
 import type { PropsWithClassName } from "@ark-market/ui";
-import { cn } from "@ark-market/ui";
+import { cn, ellipsableStyles } from "@ark-market/ui";
 import { Button } from "@ark-market/ui/button";
 import {
   Collapsible,
@@ -100,9 +100,11 @@ export default function TokenAbout({
               {collectionShortenedAddress}
             </p>
           </div>
-          <div className="flex items-center justify-between">
-            <p className="font-medium">Token ID</p>
-            <p className="text-muted-foreground">{tokenId}</p>
+          <div className="flex items-center justify-between gap-4">
+            <p className="whitespace-nowrap font-medium">Token ID</p>
+            <p className={cn("text-muted-foreground", ellipsableStyles)}>
+              {tokenId}
+            </p>
           </div>
           <div className="flex items-center justify-between">
             <p className="font-medium">Token Standard</p>
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-create-listing.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-create-listing.tsx
index 37f9a8ba..4fade84e 100644
--- a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-create-listing.tsx
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-create-listing.tsx
@@ -192,7 +192,7 @@ export function TokenActionsCreateListing({
       </DialogTrigger>
       <DialogContent>
         <DialogHeader className="items-center"></DialogHeader>
-        <div className="flex flex-col gap-6">
+        <div className="flex flex-col gap-8">
           <div className="text-center text-xl font-semibold">List for sale</div>
           <TokenActionsTokenOverview
             collection={collection}
@@ -205,7 +205,7 @@ export function TokenActionsCreateListing({
               className="flex flex-col space-y-4"
             >
               <FormItem className="">
-                <FormLabel>Type of sale</FormLabel>
+                <FormLabel className="text-lg">Type of sale</FormLabel>
                 <div className="flex gap-6">
                   <Button
                     type="button"
@@ -233,7 +233,9 @@ export function TokenActionsCreateListing({
                 name="startAmount"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Set starting price</FormLabel>
+                    <FormLabel className="text-lg">
+                      Set {isAuction && "starting"} price
+                    </FormLabel>
                     <Button
                       type="button"
                       className="w-full"
@@ -243,7 +245,10 @@ export function TokenActionsCreateListing({
                         field.onChange("0.5");
                       }}
                     >
-                      Choose floor price 0.5 ETH
+                      <p>
+                        Choose floor price of{" "}
+                        <span className="font-bold">0.5 ETH</span>
+                      </p>
                     </Button>
                     <FormControl>
                       <NumericalInput
@@ -251,8 +256,12 @@ export function TokenActionsCreateListing({
                         defaultValue="0.1"
                         value={field.value}
                         onChange={field.onChange}
+                        placeholder="Price"
                       />
                     </FormControl>
+                    <p className="!mt-1 ml-3 text-sm text-muted-foreground">
+                      $---
+                    </p>
                     {formattedStartAmount !== "-" && <FormMessage />}
                   </FormItem>
                 )}
@@ -263,7 +272,9 @@ export function TokenActionsCreateListing({
                   name="endAmount"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Set reserve price</FormLabel>
+                      <FormLabel className="text-lg">
+                        Set reserve price
+                      </FormLabel>
                       <FormControl>
                         <NumericalInput
                           value={field.value}
@@ -280,7 +291,7 @@ export function TokenActionsCreateListing({
                 name="duration"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Set expiration</FormLabel>
+                    <FormLabel className="text-lg">Set expiration</FormLabel>
                     <Select
                       onValueChange={field.onChange}
                       defaultValue={field.value.toString()}
@@ -304,7 +315,7 @@ export function TokenActionsCreateListing({
               />
               <Button
                 type="submit"
-                className="mx-auto w-full px-10 lg:w-auto"
+                className="mx-auto !mt-8 w-full px-10 lg:w-auto"
                 disabled={isDisabled}
                 size="xl"
               >
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-token-overview.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-token-overview.tsx
index 98afb839..a1b2c047 100644
--- a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-token-overview.tsx
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-token-overview.tsx
@@ -1,4 +1,4 @@
-import { BadgeCheck } from "lucide-react";
+import VerifiedIcon from "@ark-market/ui/icons/verified-icon";
 
 import type { Collection, Token } from "~/types";
 import TokenMedia from "~/app/assets/[contract_address]/[token_id]/components/token-media";
@@ -25,7 +25,7 @@ export default function TokenActionsTokenOverview({
           <div className="text-lg font-semibold text-muted-foreground">
             {collection.name || "Unknown"}
           </div>
-          <BadgeCheck className="size-4 text-muted-foreground" />
+          <VerifiedIcon className="size-6 text-background" />
         </div>
       </div>
       <div className="grow" />
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-activity.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-activity.tsx
index 370457a2..69a66711 100644
--- a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-activity.tsx
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-activity.tsx
@@ -1,115 +1,88 @@
-import {
-  ArrowLeftRight,
-  List,
-  ListX,
-  ShoppingCart,
-  Tag,
-  X,
-} from "lucide-react";
+"use client";
+
+import { useMemo, useRef } from "react";
+import { useInfiniteQuery } from "@tanstack/react-query";
 
 import type { PropsWithClassName } from "@ark-market/ui";
 import { cn } from "@ark-market/ui";
-import { PriceTag } from "@ark-market/ui/price-tag";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@ark-market/ui/table";
 
-const activityTypeToItem = new Map([
-  ["sale", { icon: <ShoppingCart size={24} />, title: "Sale" }],
-  ["transfer", { icon: <ArrowLeftRight size={24} />, title: "Transfer" }],
-  ["list", { icon: <List size={24} />, title: "List" }],
-  ["offer", { icon: <Tag size={24} />, title: "Offer" }],
-  ["cancel_offer", { icon: <X size={24} />, title: "Cancel Offer" }],
-  ["delist", { icon: <ListX size={24} />, title: "Delist" }],
-]);
+import type { TokenActivityApiResponse } from "../queries/getTokenData";
+import useInfiniteWindowScroll from "~/hooks/useInfiniteWindowScroll";
+import { getTokenActivity } from "../queries/getTokenData";
+import DesktopTokenActivity from "./desktop-token-activity";
+import MobileTokenActivity from "./mobile-token-activity";
+
+interface TokenActivityProps {
+  contractAddress: string;
+  tokenId: string;
+}
+
+export default function TokenActivity({
+  className,
+  contractAddress,
+  tokenId,
+}: PropsWithClassName<TokenActivityProps>) {
+  const tableContainerRef = useRef<HTMLTableElement | null>(null);
+  const {
+    data: infiniteData,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useInfiniteQuery({
+    queryKey: ["tokenActivity", contractAddress, tokenId],
+    refetchInterval: 10_000,
+    // getNextPageParam: (lastPage) => lastPage.next_page,
+    getNextPageParam: (lastPage?: TokenActivityApiResponse) =>
+      lastPage?.next_page,
+    initialPageParam: undefined,
+    queryFn: ({ pageParam }) =>
+      getTokenActivity({ contractAddress, tokenId, page: pageParam }),
+  });
+
+  const totalCount = infiniteData?.pages[0]?.count ?? 0;
+  const tokenActivity = useMemo(
+    () => infiniteData?.pages.flatMap((page) => page?.data ?? []) ?? [],
+    [infiniteData],
+  );
+  console.log(tokenActivity);
+
+  useInfiniteWindowScroll({
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  });
 
-const activityData = [
-  {
-    type: "transfer",
-    from: "0x123",
-    to: "0x456",
-  },
-  {
-    type: "list",
-    price: 1180000000000000000n,
-    from: "0x123",
-  },
-  {
-    type: "offer",
-    price: 1840000000000000000n,
-    from: "0x123",
-    to: "0x456",
-  },
-  {
-    type: "cancel_offer",
-    price: 1540000000000000000n,
-    from: "0x123",
-    to: "0x456",
-  },
-  {
-    type: "delist",
-    price: 3240000000000000000n,
-    from: "0x123",
-  },
-  {
-    type: "sale",
-    price: 1140000000000000000n,
-    from: "0x123",
-    to: "0x456",
-  },
-];
+  // const rowVirtualizer = useWindowVirtualizer({
+  //   // Approximate initial rect for SSR
+  //   initialRect: { height: 1080, width: 1920 },
+  //   count: tokenActivity.length,
+  //   estimateSize: () => 75, // Estimation of row height for accurate scrollbar dragging
+  //   // Measure dynamic row height, except in firefox because it measures table border height incorrectly
+  //   measureElement:
+  //     typeof window !== "undefined" && !navigator.userAgent.includes("Firefox")
+  //       ? (element) => element.getBoundingClientRect().height
+  //       : undefined,
+  //   overscan: 5,
+  //   scrollMargin: tableContainer.current?.offsetTop ?? 0,
+  // });
 
-export default function TokenActivity({ className }: PropsWithClassName) {
   return (
     <div className={cn("", className)}>
-      <div className="flex items-center gap-1.5">
+      <div className="flex items-center gap-4 lg:gap-1.5">
         <h2 className="text-2xl font-semibold">Activity</h2>
         <div className="flex h-6 items-center rounded-full bg-secondary px-3 text-sm font-medium text-secondary-foreground">
-          {activityData.length}
+          {totalCount}
         </div>
       </div>
 
-      <Table className="mt-12">
-        <TableHeader>
-          <TableRow className="hover:bg-background">
-            <TableHead className="pl-5">Event</TableHead>
-            <TableHead>Price</TableHead>
-            <TableHead>From</TableHead>
-            <TableHead>To</TableHead>
-            <TableHead>Date</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody className="text-sm font-semibold">
-          {activityData.map((activity, index) => {
-            const activityItem = activityTypeToItem.get(activity.type);
-            return (
-              <TableRow className="group h-[4.6875rem]" key={index}>
-                <TableCell className="pl-5 transition-colors group-hover:text-muted-foreground">
-                  <div className="flex items-center gap-4 whitespace-nowrap">
-                    {activityItem?.icon}
-                    <p>{activityItem?.title}</p>
-                  </div>
-                </TableCell>
-                <TableCell>
-                  {activity.price !== undefined ? (
-                    <PriceTag price={activity.price} />
-                  ) : (
-                    "_"
-                  )}
-                </TableCell>
-                <TableCell>{activity.from}</TableCell>
-                <TableCell>{activity.to ?? "_"}</TableCell>
-                <TableCell>8min ago</TableCell>
-              </TableRow>
-            );
-          })}
-        </TableBody>
-      </Table>
+      <div className="mt-6 lg:mt-12" ref={tableContainerRef}>
+        <div className="hidden lg:block">
+          <DesktopTokenActivity tokenActivity={tokenActivity} />
+        </div>
+        <div className="lg:hidden">
+          <MobileTokenActivity tokenActivity={tokenActivity} />
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-summary.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-summary.tsx
index 6760d24b..c3ba58ee 100644
--- a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-summary.tsx
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-summary.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 import { RefreshCw, Share2 } from "lucide-react";
 
 import type { PropsWithClassName } from "@ark-market/ui";
-import { cn, ellipsableStyles } from "@ark-market/ui";
+import { cn, ellipsableStyles, focusableStyles } from "@ark-market/ui";
 import VerifiedIcon from "@ark-market/ui/icons/verified-icon";
 
 import type { TokenInfosApiResponse } from "../queries/getTokenData";
@@ -43,7 +43,10 @@ export default function TokenSummary({
       />
       <div className="flex flex-col lg:gap-4">
         <div className="flex items-center gap-1.5">
-          <Link href={`/collection/${contractAddress}`}>
+          <Link
+            href={`/collection/${contractAddress}`}
+            className={focusableStyles}
+          >
             <h3 className="text-lg text-muted-foreground">
               {tokenInfos.collection_name}
             </h3>
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/page.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/page.tsx
index 50114b19..e90f8e3d 100644
--- a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/page.tsx
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/page.tsx
@@ -5,7 +5,6 @@ import {
   getCollectionToken,
   getOrderbookCollectionToken,
 } from "~/app/assets/[contract_address]/[token_id]/data";
-import MobileTokenActivity from "./components/mobile-token-activity";
 import TokenAbout from "./components/token-about";
 import TokenActions from "./components/token-actions";
 import TokenActivity from "./components/token-activity";
@@ -93,8 +92,11 @@ export default async function TokenPage({
           />
         </div>
       </div>
-      <TokenActivity className="mt-20 hidden lg:block" />
-      <MobileTokenActivity className="mt-8 lg:hidden" />
+      <TokenActivity
+        className="mt-20"
+        contractAddress={contractAddress}
+        tokenId={tokenId}
+      />
     </main>
   );
 }
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/queries/getTokenData.ts b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/queries/getTokenData.ts
index 2cb0b0c7..09040ce3 100644
--- a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/queries/getTokenData.ts
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/queries/getTokenData.ts
@@ -79,3 +79,50 @@ export async function getTokenOffers({
 
   return (await response.json()) as Promise<TokenOffersApiResponse>;
 }
+
+export type TokenActivityType =
+  | "LISTING"
+  | "OFFER"
+  | "CANCELLED"
+  | "FULFILL"
+  | "TRANSFER"
+  | "EXECUTED"
+  | "MINT";
+export interface TokenActivity {
+  activity_type: TokenActivityType;
+  from: string | null;
+  price: string | null;
+  time_stamp: number;
+  to: string | null;
+  transaction_hash: string | null;
+}
+export interface TokenActivityApiResponse {
+  data: TokenActivity[];
+  count: number;
+  next_page: number;
+}
+interface GetTokenActivityParams {
+  contractAddress: string;
+  page?: number;
+  tokenId: string;
+}
+export async function getTokenActivity({
+  contractAddress,
+  page,
+  tokenId,
+}: GetTokenActivityParams) {
+  const queryParams = [`items_per_page=${30}`];
+  if (page !== undefined) {
+    queryParams.push(`page=${page}`);
+  }
+
+  const url = `${env.NEXT_PUBLIC_MARKETPLACE_API_URL}/tokens/${contractAddress}/0x534e5f4d41494e/${tokenId}/activity?${queryParams.join("&")}`;
+
+  const response = await fetch(url);
+  if (!response.ok) {
+    console.error(url, response.status);
+    return undefined;
+  }
+
+  return (await response.json()) as Promise<TokenActivityApiResponse>;
+}
diff --git a/apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-items-data-list-view.tsx b/apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-items-data-list-view.tsx
index 0acb941d..36157309 100644
--- a/apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-items-data-list-view.tsx
+++ b/apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-items-data-list-view.tsx
@@ -77,13 +77,13 @@ export default function PortfolioItemsDataListView({
 
           return (
             <TableRow
-              key={`${token.contract}-${token.token_id}`}
-              data-index={virtualRow.index} // Needed for dynamic row height measurement
-              ref={(node) => rowVirtualizer.measureElement(node)} // Measure dynamic row height
               className={cn(
                 "group absolute grid h-[4.6875rem] w-full items-center",
                 gridTemplateColumnValue,
               )}
+              data-index={virtualRow.index} // Needed for dynamic row height measurement
+              key={`${token.contract}-${token.token_id}`}
+              ref={(node) => rowVirtualizer.measureElement(node)} // Measure dynamic row height
               style={{
                 transform: `translateY(${virtualRow.start}px)`,
               }}
diff --git a/apps/arkmarket/src/components/footer.tsx b/apps/arkmarket/src/components/footer.tsx
index b1d5cb3e..2168417d 100644
--- a/apps/arkmarket/src/components/footer.tsx
+++ b/apps/arkmarket/src/components/footer.tsx
@@ -14,7 +14,11 @@ import { Icons } from "./icons";
 
 export default function Footer() {
   const pathname = usePathname();
-  if (pathname.includes("/wallet/") || pathname.includes("/collection/")) {
+  if (
+    pathname.includes("/wallet/") ||
+    pathname.includes("/collection/") ||
+    pathname.includes("/token/")
+  ) {
     return null;
   }
 
diff --git a/packages/ui/src/form.tsx b/packages/ui/src/form.tsx
index 72a45c55..e44cd0c0 100644
--- a/packages/ui/src/form.tsx
+++ b/packages/ui/src/form.tsx
@@ -74,7 +74,7 @@ const FormItem = React.forwardRef<
 
   return (
     <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      <div ref={ref} className={cn("space-y-3", className)} {...props} />
     </FormItemContext.Provider>
   );
 });
diff --git a/packages/ui/src/label.tsx b/packages/ui/src/label.tsx
index bbcf21b9..11940010 100644
--- a/packages/ui/src/label.tsx
+++ b/packages/ui/src/label.tsx
@@ -8,7 +8,7 @@ import { cva } from "class-variance-authority";
 import { cn } from "@ark-market/ui";
 
 const labelVariants = cva(
-  "font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  "font-semibold leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 );
 
 const Label = React.forwardRef<