diff --git a/app/hypercerts/[hypercertId]/page.tsx b/app/hypercerts/[hypercertId]/page.tsx
index 8113c966..30363de6 100644
--- a/app/hypercerts/[hypercertId]/page.tsx
+++ b/app/hypercerts/[hypercertId]/page.tsx
@@ -1,4 +1,3 @@
-import { Metadata, ResolvingMetadata } from "next";
 import { Fragment, Suspense } from "react";
 
 import { CurrencyButtons } from "@/components/currency-buttons";
@@ -20,34 +19,6 @@ import { getOrders } from "@/marketplace/getOpenOrders";
 import Image from "next/image";
 import MutationButtons from "@/components/hypercert/mutation-buttons";
 
-type Props = {
-  params: { hypercertId: string };
-  searchParams: { [key: string]: string | string[] | undefined };
-};
-
-export async function generateMetadata(
-  { params }: Props,
-  parent: ResolvingMetadata,
-): Promise<Metadata> {
-  const { hypercertId } = params;
-
-  const hypercert = await getHypercert(hypercertId);
-
-  // optionally access and extend (rather than replace) parent metadata
-  const previousImages = (await parent).openGraph?.images || [];
-  return {
-    title: hypercert?.metadata?.name || "Untitled Hypercert",
-    description: hypercert?.metadata?.description || "",
-    openGraph: {
-      images: [
-        `/api/hypercerts/${hypercertId}/image`,
-        "/hypercerts-opengraph.jpg",
-        ...previousImages,
-      ],
-    },
-  };
-}
-
 async function HypercertPageInner({
   params,
 }: {
diff --git a/app/profile/[address]/blueprint-tab-content.tsx b/app/profile/[address]/blueprint-tab-content.client.tsx
similarity index 54%
rename from app/profile/[address]/blueprint-tab-content.tsx
rename to app/profile/[address]/blueprint-tab-content.client.tsx
index 56c05886..1afbc631 100644
--- a/app/profile/[address]/blueprint-tab-content.tsx
+++ b/app/profile/[address]/blueprint-tab-content.client.tsx
@@ -1,55 +1,39 @@
-import React, { Suspense } from "react";
+"use client";
+
 import { ProfileSubTabKey, subTabs } from "@/app/profile/[address]/tabs";
-import ExploreListSkeleton from "@/components/explore/explore-list-skeleton";
 import { SubTabsWithCount } from "@/components/profile/sub-tabs-with-count";
-import { getBlueprints } from "@/blueprints/getBlueprints";
 import BlueprintsList from "@/components/blueprints/blueprints-list";
 import { CreateBlueprintButton } from "@/components/blueprints/buttons";
 import { OwnAccountOnly } from "@/components/own-account-only";
 import { BlueprintsTable } from "@/components/blueprints/blueprints-table";
-import { BLUEPRINTS_PER_PAGE } from "@/configs/ui";
 import Pagination from "@/components/pagination";
+import { BLUEPRINTS_PER_PAGE } from "@/configs/ui";
 
-const BlueprintTabContentInner = async ({
+export default function BlueprintsTabContentInner({
   address,
   activeTab,
   searchParams,
+  availableBlueprints,
+  mintedBlueprints,
+  blueprintsCreated,
 }: {
   address: string;
   activeTab: ProfileSubTabKey;
   searchParams: Record<string, string>;
-}) => {
-  const currentPage = Number(searchParams?.p) || 1;
-
-  const availableBlueprints = await getBlueprints({
-    filters: { minterAddress: address as `0x${string}`, minted: false },
-    first: BLUEPRINTS_PER_PAGE,
-    offset: BLUEPRINTS_PER_PAGE * (currentPage - 1),
-  });
-  const mintedBlueprints = await getBlueprints({
-    filters: { minterAddress: address as `0x${string}`, minted: true },
-    first: BLUEPRINTS_PER_PAGE,
-    offset: BLUEPRINTS_PER_PAGE * (currentPage - 1),
-  });
-  const blueprintsCreated = await getBlueprints({
-    filters: { adminAddress: address as `0x${string}` },
-    first: BLUEPRINTS_PER_PAGE,
-    offset: BLUEPRINTS_PER_PAGE * (currentPage - 1),
-  });
-
+  availableBlueprints: any;
+  mintedBlueprints: any;
+  blueprintsCreated: any;
+}) {
   const marketplaceSubTabs = subTabs.filter(
     (tab) => tab.key.split("-")[0] === "blueprints",
   );
 
-  const tabBadgeCounts: Partial<
-    Record<(typeof subTabs)[number]["key"], number>
-  > = {
+  const tabBadgeCounts = {
     "blueprints-claimable": availableBlueprints?.count ?? 0,
     "blueprints-claimed": mintedBlueprints?.count ?? 0,
     "blueprints-created": blueprintsCreated?.count ?? 0,
   };
-  const currentCount =
-    tabBadgeCounts[activeTab as (typeof subTabs)[number]["key"]];
+
   return (
     <section>
       <SubTabsWithCount
@@ -64,6 +48,7 @@ const BlueprintTabContentInner = async ({
           <CreateBlueprintButton />
         </div>
       </OwnAccountOnly>
+
       {activeTab === "blueprints-claimable" && (
         <BlueprintsList blueprints={availableBlueprints?.blueprints || []} />
       )}
@@ -78,35 +63,19 @@ const BlueprintTabContentInner = async ({
           count={blueprintsCreated?.count}
         />
       )}
-      {currentCount !== 0 && (
+
+      {(availableBlueprints?.count ||
+        mintedBlueprints?.count ||
+        blueprintsCreated?.count) && (
         <div className="mt-5">
           <Pagination
-            count={currentCount || 0}
+            count={
+              tabBadgeCounts[activeTab as keyof typeof tabBadgeCounts] || 0
+            }
             pageSize={BLUEPRINTS_PER_PAGE}
           />
         </div>
       )}
     </section>
   );
-};
-
-const BlueprintsTabContent = ({
-  address,
-  activeTab,
-  searchParams,
-}: {
-  address: string;
-  activeTab: ProfileSubTabKey;
-  searchParams: Record<string, string>;
-}) => {
-  return (
-    <Suspense fallback={<ExploreListSkeleton length={9} />}>
-      <BlueprintTabContentInner
-        address={address}
-        activeTab={activeTab}
-        searchParams={searchParams}
-      />
-    </Suspense>
-  );
-};
-export { BlueprintsTabContent };
+}
diff --git a/app/profile/[address]/blueprint-tab-content.server.tsx b/app/profile/[address]/blueprint-tab-content.server.tsx
new file mode 100644
index 00000000..54d2ff27
--- /dev/null
+++ b/app/profile/[address]/blueprint-tab-content.server.tsx
@@ -0,0 +1,51 @@
+import { Suspense } from "react";
+import { ProfileSubTabKey } from "@/app/profile/[address]/tabs";
+import BlueprintsTabContentInner from "./blueprint-tab-content.client";
+import { getBlueprints } from "@/blueprints/getBlueprints";
+import ExploreListSkeleton from "@/components/explore/explore-list-skeleton";
+import { BLUEPRINTS_PER_PAGE } from "@/configs/ui";
+
+export default async function BlueprintsTabContent({
+  address,
+  activeTab,
+  searchParams,
+}: {
+  address: string;
+  activeTab: ProfileSubTabKey;
+  searchParams: Record<string, string>;
+}) {
+  const currentPage = Number(searchParams?.p) || 1;
+
+  // Fetch data server-side
+  const [availableBlueprints, mintedBlueprints, blueprintsCreated] =
+    await Promise.all([
+      getBlueprints({
+        filters: { minterAddress: address as `0x${string}`, minted: false },
+        first: BLUEPRINTS_PER_PAGE,
+        offset: BLUEPRINTS_PER_PAGE * (currentPage - 1),
+      }),
+      getBlueprints({
+        filters: { minterAddress: address as `0x${string}`, minted: true },
+        first: BLUEPRINTS_PER_PAGE,
+        offset: BLUEPRINTS_PER_PAGE * (currentPage - 1),
+      }),
+      getBlueprints({
+        filters: { adminAddress: address as `0x${string}` },
+        first: BLUEPRINTS_PER_PAGE,
+        offset: BLUEPRINTS_PER_PAGE * (currentPage - 1),
+      }),
+    ]);
+
+  return (
+    <Suspense fallback={<ExploreListSkeleton length={9} />}>
+      <BlueprintsTabContentInner
+        address={address}
+        activeTab={activeTab}
+        searchParams={searchParams}
+        availableBlueprints={availableBlueprints}
+        mintedBlueprints={mintedBlueprints}
+        blueprintsCreated={blueprintsCreated}
+      />
+    </Suspense>
+  );
+}
diff --git a/app/profile/[address]/collections-tab-content-inner.tsx b/app/profile/[address]/collections-tab-content-inner.tsx
deleted file mode 100644
index 9354357a..00000000
--- a/app/profile/[address]/collections-tab-content-inner.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-"use client";
-
-import { EmptySection } from "@/app/profile/[address]/sections";
-import { HyperboardRow } from "@/components/hyperboard/hyperboard-row";
-import { CreateCollectionButton } from "@/components/collections/buttons";
-import { HyperboardFragment } from "@/collections/hyperboard.fragment";
-import { useAccount } from "wagmi";
-
-export const HyperboardsOverview = ({
-  profileAddress,
-  hyperboards,
-}: {
-  profileAddress: string;
-  hyperboards: readonly HyperboardFragment[];
-}) => {
-  const { address } = useAccount();
-  const isOwnProfile = address === profileAddress;
-  if (!hyperboards?.length) {
-    return (
-      <div>
-        {isOwnProfile && (
-          <div className="flex justify-end mb-2">
-            <CreateCollectionButton />
-          </div>
-        )}
-        <EmptySection />
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      {isOwnProfile && (
-        <div className="flex justify-end mb-2">
-          <CreateCollectionButton />
-        </div>
-      )}
-      <div className="flex flex-col gap-4">
-        {hyperboards.map((hyperboard) => (
-          <HyperboardRow
-            key={hyperboard.id}
-            hyperboardId={hyperboard.id}
-            name={hyperboard.name || ""}
-            description={
-              hyperboard.sections?.data?.[0]?.collection.description || ""
-            }
-            showEditAndDeleteButtons={isOwnProfile}
-          />
-        ))}
-      </div>
-    </div>
-  );
-};
diff --git a/app/profile/[address]/collections-tab-content.client.tsx b/app/profile/[address]/collections-tab-content.client.tsx
new file mode 100644
index 00000000..20c847c8
--- /dev/null
+++ b/app/profile/[address]/collections-tab-content.client.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import Pagination from "@/components/pagination";
+import { HyperboardRow } from "@/components/hyperboard/hyperboard-row";
+import { CreateCollectionButton } from "@/components/collections/buttons";
+import { EmptySection } from "@/app/profile/[address]/sections";
+import { HyperboardFragment } from "@/collections/hyperboard.fragment";
+import { useAccount } from "wagmi";
+
+export default function CollectionsTabContent({
+  address,
+  hyperboards,
+  count,
+}: {
+  address: string;
+  hyperboards: readonly HyperboardFragment[];
+  count: number;
+}) {
+  const { address: loggedInAddress } = useAccount();
+  const isOwnProfile = loggedInAddress === address;
+
+  return (
+    <div>
+      {isOwnProfile && (
+        <div className="flex justify-end mb-2">
+          <CreateCollectionButton />
+        </div>
+      )}
+      {hyperboards.length === 0 ? (
+        <EmptySection />
+      ) : (
+        <div className="flex flex-col gap-4">
+          {hyperboards.map((hyperboard) => (
+            <HyperboardRow
+              key={hyperboard.id}
+              hyperboardId={hyperboard.id}
+              name={hyperboard.name || ""}
+              description={
+                hyperboard.sections?.data?.[0]?.collection.description || ""
+              }
+              showEditAndDeleteButtons={isOwnProfile}
+            />
+          ))}
+        </div>
+      )}
+
+      {count > 0 && (
+        <div className="mt-5">
+          <Pagination count={count} />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/profile/[address]/collections-tab-content.server.tsx b/app/profile/[address]/collections-tab-content.server.tsx
new file mode 100644
index 00000000..d602db95
--- /dev/null
+++ b/app/profile/[address]/collections-tab-content.server.tsx
@@ -0,0 +1,37 @@
+import { Suspense } from "react";
+import { getCollectionsByAdminAddress } from "@/collections/getCollectionsByAdminAddress";
+import { COLLECTIONS_PER_PAGE } from "@/configs/ui";
+import CollectionsTabContent from "./collections-tab-content.client";
+import CollectionsTabSkeleton from "@/components/profile/collections-tab-skeleton";
+
+export default async function CollectionsTabContentServer({
+  address,
+  searchParams,
+}: {
+  address: string;
+  searchParams: Record<string, string>;
+}) {
+  const currentPage = Number(searchParams?.p) || 1;
+
+  // Fetch data server-side
+  const result = await getCollectionsByAdminAddress({
+    adminAddress: address,
+    first: COLLECTIONS_PER_PAGE,
+    offset: COLLECTIONS_PER_PAGE * (currentPage - 1),
+  });
+
+  if (!result) return null;
+
+  const { hyperboards, count } = result;
+
+  // Render client component with fetched data
+  return (
+    <Suspense fallback={<CollectionsTabSkeleton length={3} />}>
+      <CollectionsTabContent
+        address={address}
+        hyperboards={hyperboards}
+        count={count ?? 0}
+      />
+    </Suspense>
+  );
+}
diff --git a/app/profile/[address]/collections-tab-content.tsx b/app/profile/[address]/collections-tab-content.tsx
deleted file mode 100644
index 58dee3cd..00000000
--- a/app/profile/[address]/collections-tab-content.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { getCollectionsByAdminAddress } from "@/collections/getCollectionsByAdminAddress";
-import { Suspense } from "react";
-import { COLLECTIONS_PER_PAGE } from "@/configs/ui";
-import Pagination from "@/components/pagination";
-import { HyperboardsOverview } from "@/app/profile/[address]/collections-tab-content-inner";
-
-const CollectionsTabContentInner = async ({
-  address,
-  searchParams,
-}: {
-  address: string;
-  searchParams: Record<string, string>;
-}) => {
-  const currentPage = Number(searchParams?.p) || 1;
-  const result = await getCollectionsByAdminAddress({
-    adminAddress: address,
-    first: COLLECTIONS_PER_PAGE,
-    offset: COLLECTIONS_PER_PAGE * (currentPage - 1),
-  });
-
-  if (!result) {
-    return null;
-  }
-
-  const { hyperboards, count } = result;
-
-  return (
-    <div>
-      <HyperboardsOverview profileAddress={address} hyperboards={hyperboards} />
-
-      <div className="mt-5">
-        <Pagination count={count || 0} />
-      </div>
-    </div>
-  );
-};
-
-const CollectionsTabContent = ({
-  address,
-  searchParams,
-}: {
-  address: string;
-  searchParams: Record<string, string>;
-}) => {
-  return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <CollectionsTabContentInner
-        address={address}
-        searchParams={searchParams}
-      />
-    </Suspense>
-  );
-};
-export { CollectionsTabContent };
diff --git a/app/profile/[address]/hypercerts-tab-content.client.tsx b/app/profile/[address]/hypercerts-tab-content.client.tsx
new file mode 100644
index 00000000..52beb059
--- /dev/null
+++ b/app/profile/[address]/hypercerts-tab-content.client.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import { ProfileSubTabKey, subTabs } from "@/app/profile/[address]/tabs";
+import { SubTabsWithCount } from "@/components/profile/sub-tabs-with-count";
+import HypercertWindow from "@/components/hypercert/hypercert-window";
+import { EmptySection } from "@/app/profile/[address]/sections";
+import { AllowListRecord } from "@/allowlists/getAllowListRecordsForAddressByClaimed";
+import UnclaimedHypercertsListContent from "@/components/profile/unclaimed-hypercerts-list-content";
+
+export default function HypercertsTabContentInner({
+  address,
+  activeTab,
+  createdHypercerts,
+  ownedHypercerts,
+  claimableHypercerts,
+}: {
+  address: string;
+  activeTab: ProfileSubTabKey;
+  createdHypercerts?: { data: any[]; count: number };
+  ownedHypercerts?: { data: any[]; count: number };
+  claimableHypercerts?: { hypercert: any; record: AllowListRecord }[];
+}) {
+  const showCreatedHypercerts = !!(
+    createdHypercerts && createdHypercerts?.data?.length > 0
+  );
+  const showOwnedHypercerts = !!(
+    ownedHypercerts && ownedHypercerts?.data?.length > 0
+  );
+  const showClaimableHypercerts = !!(
+    claimableHypercerts && claimableHypercerts?.length > 0
+  );
+
+  const tabBadgeCounts = {
+    "hypercerts-created": createdHypercerts?.count ?? 0,
+    "hypercerts-owned": ownedHypercerts?.count ?? 0,
+    "hypercerts-claimable": claimableHypercerts?.length ?? 0,
+  };
+
+  return (
+    <section>
+      <SubTabsWithCount
+        address={address}
+        activeTab={activeTab}
+        tabBadgeCounts={tabBadgeCounts}
+        tabs={subTabs.filter((tab) => tab.key.startsWith("hypercerts"))}
+      />
+
+      {activeTab === "hypercerts-owned" &&
+        (showOwnedHypercerts ? (
+          <div className="grid grid-cols-[repeat(auto-fit,_minmax(16.875rem,_20rem))] gap-4 py-4">
+            {ownedHypercerts.data.map((hypercert) => (
+              <HypercertWindow
+                key={hypercert.hypercert_id}
+                hypercert={hypercert}
+                priceDisplayCurrency="usd"
+              />
+            ))}
+          </div>
+        ) : (
+          <section className="pt-4">
+            <EmptySection />
+          </section>
+        ))}
+
+      {activeTab === "hypercerts-created" &&
+        (showCreatedHypercerts ? (
+          <div className="grid grid-cols-[repeat(auto-fit,_minmax(16.875rem,_20rem))] gap-4 py-4">
+            {createdHypercerts.data.map((hypercert) => (
+              <HypercertWindow
+                key={hypercert.hypercert_id}
+                hypercert={hypercert}
+                priceDisplayCurrency="usd"
+              />
+            ))}
+          </div>
+        ) : (
+          <section className="pt-4">
+            <EmptySection />
+          </section>
+        ))}
+
+      {activeTab === "hypercerts-claimable" &&
+        (showClaimableHypercerts ? (
+          <UnclaimedHypercertsListContent
+            unclaimedHypercertsData={claimableHypercerts}
+          />
+        ) : (
+          <section className="pt-4">
+            <EmptySection />
+          </section>
+        ))}
+    </section>
+  );
+}
diff --git a/app/profile/[address]/hypercerts-tab-content.server.tsx b/app/profile/[address]/hypercerts-tab-content.server.tsx
new file mode 100644
index 00000000..03be9511
--- /dev/null
+++ b/app/profile/[address]/hypercerts-tab-content.server.tsx
@@ -0,0 +1,55 @@
+import { Suspense } from "react";
+import { ProfileSubTabKey } from "@/app/profile/[address]/tabs";
+import ExploreListSkeleton from "@/components/explore/explore-list-skeleton";
+import HypercertsTabContentInner from "./hypercerts-tab-content.client";
+import { getHypercertsByCreator } from "@/hypercerts/getHypercertsByCreator";
+import { getHypercertsByOwner } from "@/hypercerts/getHypercertsByOwner";
+import { getAllowListRecordsForAddressByClaimed } from "@/allowlists/getAllowListRecordsForAddressByClaimed";
+import { getHypercert } from "@/hypercerts/getHypercert";
+import { InfoSection } from "@/app/profile/[address]/sections";
+
+export const HypercertsTabContent = async ({
+  address,
+  activeTab,
+}: {
+  address: string;
+  activeTab: ProfileSubTabKey;
+}) => {
+  // Fetch data server-side
+  const [createdHypercerts, ownedHypercerts, claimableRecords] =
+    await Promise.all([
+      getHypercertsByCreator({ creatorAddress: address }),
+      getHypercertsByOwner({ ownerAddress: address }),
+      getAllowListRecordsForAddressByClaimed(address, false),
+    ]);
+
+  if (!claimableRecords || claimableRecords?.data?.length === 0) {
+    return <InfoSection>No unclaimed hypercerts</InfoSection>;
+  }
+
+  const claimableHypercerts = await Promise.all(
+    claimableRecords.data.map(async (record) => {
+      if (!record.hypercert_id) return [];
+      return [
+        {
+          hypercert: await getHypercert(record.hypercert_id),
+          record,
+        },
+      ];
+    }),
+  );
+
+  const _claimableHypercerts = claimableHypercerts.flat();
+
+  return (
+    <Suspense fallback={<ExploreListSkeleton length={4} />}>
+      <HypercertsTabContentInner
+        address={address}
+        activeTab={activeTab}
+        createdHypercerts={createdHypercerts}
+        ownedHypercerts={ownedHypercerts}
+        claimableHypercerts={_claimableHypercerts}
+      />
+    </Suspense>
+  );
+};
diff --git a/app/profile/[address]/hypercerts-tab-content.tsx b/app/profile/[address]/hypercerts-tab-content.tsx
deleted file mode 100644
index 043d1493..00000000
--- a/app/profile/[address]/hypercerts-tab-content.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import { getHypercertsByCreator } from "@/hypercerts/getHypercertsByCreator";
-import { getAllowListRecordsForAddressByClaimed } from "@/allowlists/getAllowListRecordsForAddressByClaimed";
-import HypercertWindow from "@/components/hypercert/hypercert-window";
-import { EmptySection } from "@/app/profile/[address]/sections";
-import UnclaimedHypercertsList from "@/components/profile/unclaimed-hypercerts-list";
-import { Suspense } from "react";
-import ExploreListSkeleton from "@/components/explore/explore-list-skeleton";
-import { ProfileSubTabKey, subTabs } from "@/app/profile/[address]/tabs";
-import { SubTabsWithCount } from "@/components/profile/sub-tabs-with-count";
-import { getHypercertsByOwner } from "@/hypercerts/getHypercertsByOwner";
-
-const HypercertsTabContentInner = async ({
-  address,
-  activeTab,
-}: {
-  address: string;
-  activeTab: ProfileSubTabKey;
-}) => {
-  const createdHypercerts = await getHypercertsByCreator({
-    creatorAddress: address,
-  });
-
-  const ownedHypercerts = await getHypercertsByOwner({
-    ownerAddress: address,
-  });
-
-  const claimableHypercerts = await getAllowListRecordsForAddressByClaimed(
-    address,
-    false,
-  );
-
-  const showCreatedHypercerts =
-    createdHypercerts?.data && createdHypercerts.data.length > 0;
-  const showOwnedHypercerts =
-    ownedHypercerts?.data && ownedHypercerts.data.length > 0;
-  const showClaimableHypercerts =
-    claimableHypercerts?.data && claimableHypercerts.data.length > 0;
-  const hypercertSubTabs = subTabs.filter(
-    (tab) => tab.key.split("-")[0] === "hypercerts",
-  );
-
-  const tabBadgeCounts: Partial<
-    Record<(typeof subTabs)[number]["key"], number>
-  > = {
-    "hypercerts-created": createdHypercerts?.count ?? 0,
-    "hypercerts-owned": ownedHypercerts?.count ?? 0,
-    "hypercerts-claimable": claimableHypercerts?.count ?? 0,
-  };
-
-  return (
-    <section>
-      <SubTabsWithCount
-        address={address}
-        activeTab={activeTab}
-        tabBadgeCounts={tabBadgeCounts}
-        tabs={hypercertSubTabs}
-      />
-
-      {activeTab === "hypercerts-owned" &&
-        (showOwnedHypercerts ? (
-          <div className="grid grid-cols-[repeat(auto-fit,_minmax(16.875rem,_20rem))] gap-4 py-4">
-            {ownedHypercerts.data.map((hypercert) => {
-              return (
-                <HypercertWindow
-                  key={hypercert.hypercert_id}
-                  hypercert={hypercert}
-                  priceDisplayCurrency="usd"
-                />
-              );
-            })}
-          </div>
-        ) : (
-          <section className="pt-4">
-            <EmptySection />
-          </section>
-        ))}
-
-      {activeTab === "hypercerts-created" &&
-        (showCreatedHypercerts ? (
-          <div className="grid grid-cols-[repeat(auto-fit,_minmax(16.875rem,_20rem))] gap-4 py-4">
-            {createdHypercerts.data.map((hypercert) => {
-              return (
-                <HypercertWindow
-                  key={hypercert.hypercert_id}
-                  hypercert={hypercert}
-                  priceDisplayCurrency="usd"
-                />
-              );
-            })}
-          </div>
-        ) : (
-          <section className="pt-4">
-            <EmptySection />
-          </section>
-        ))}
-
-      {activeTab === "hypercerts-claimable" &&
-        (showClaimableHypercerts ? (
-          <UnclaimedHypercertsList
-            unclaimedHypercerts={claimableHypercerts?.data}
-          />
-        ) : (
-          <section className="pt-4">
-            <EmptySection />
-          </section>
-        ))}
-    </section>
-  );
-};
-
-const HypercertsTabContent = ({
-  address,
-  activeTab,
-}: {
-  address: string;
-  activeTab: ProfileSubTabKey;
-}) => {
-  return (
-    <Suspense fallback={<ExploreListSkeleton length={4} />}>
-      <HypercertsTabContentInner address={address} activeTab={activeTab} />
-    </Suspense>
-  );
-};
-export { HypercertsTabContent };
diff --git a/app/profile/[address]/marketplace-tab-content.client.tsx b/app/profile/[address]/marketplace-tab-content.client.tsx
new file mode 100644
index 00000000..b2b23efd
--- /dev/null
+++ b/app/profile/[address]/marketplace-tab-content.client.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { ProfileSubTabKey, subTabs } from "@/app/profile/[address]/tabs";
+import { SubTabsWithCount } from "@/components/profile/sub-tabs-with-count";
+import UserListingsList from "@/components/marketplace/user-listings-list";
+import UserDealsList from "@/components/marketplace/user-deals-list";
+import { CurrencyButtons } from "@/components/currency-buttons";
+
+export default function MarketplaceTabContentInner({
+  address,
+  activeTab,
+  orders,
+  buys,
+  sells,
+}: {
+  address: string;
+  activeTab: ProfileSubTabKey;
+  orders: any[];
+  buys: any[];
+  sells: any[];
+}) {
+  const marketplaceSubTabs = subTabs.filter(
+    (tab) => tab.key.split("-")[0] === "marketplace",
+  );
+
+  const tabBadgeCounts = {
+    "marketplace-listings": orders.length,
+    "marketplace-bought": buys.length,
+    "marketplace-sold": sells.length,
+  };
+
+  return (
+    <section>
+      <div className="flex flex-row justify-between mb-2 align-middle">
+        <SubTabsWithCount
+          address={address}
+          activeTab={activeTab}
+          tabBadgeCounts={tabBadgeCounts}
+          tabs={marketplaceSubTabs}
+        />
+        {activeTab === "marketplace-listings" && <CurrencyButtons />}
+      </div>
+
+      {activeTab === "marketplace-listings" && (
+        <div className="flex justify-end">
+          <UserListingsList address={address} orders={orders} />
+        </div>
+      )}
+
+      {activeTab === "marketplace-bought" && (
+        <UserDealsList address={address} deals={buys} />
+      )}
+
+      {activeTab === "marketplace-sold" && (
+        <UserDealsList address={address} deals={sells} />
+      )}
+    </section>
+  );
+}
diff --git a/app/profile/[address]/marketplace-tab-content.server.tsx b/app/profile/[address]/marketplace-tab-content.server.tsx
new file mode 100644
index 00000000..c9eb015e
--- /dev/null
+++ b/app/profile/[address]/marketplace-tab-content.server.tsx
@@ -0,0 +1,32 @@
+import { Suspense } from "react";
+import { ProfileSubTabKey } from "@/app/profile/[address]/tabs";
+import MarketplaceTabContentInner from "./marketplace-tab-content.client";
+import { getOrders } from "@/marketplace/getOpenOrders";
+import { getDealsForAddress } from "@/marketplace/getDealsForAddress";
+import MarketplaceTabSkeleton from "@/components/profile/marketplace-tab-skeleton";
+
+export default async function MarketplaceTabContent({
+  address,
+  activeTab,
+}: {
+  address: string;
+  activeTab: ProfileSubTabKey;
+}) {
+  const orders = await getOrders({
+    filter: { signer: address as `0x${string}` },
+  });
+  const deals = await getDealsForAddress(address);
+  const { buys, sells } = deals || {};
+
+  return (
+    <Suspense fallback={<MarketplaceTabSkeleton length={9} />}>
+      <MarketplaceTabContentInner
+        address={address}
+        activeTab={activeTab}
+        orders={orders?.data || []}
+        buys={buys?.data || []}
+        sells={sells?.data || []}
+      />
+    </Suspense>
+  );
+}
diff --git a/app/profile/[address]/marketplace-tab-content.tsx b/app/profile/[address]/marketplace-tab-content.tsx
deleted file mode 100644
index 5bc11524..00000000
--- a/app/profile/[address]/marketplace-tab-content.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Suspense } from "react";
-import UserListingsList from "@/components/marketplace/user-listings-list";
-import { getOrders } from "@/marketplace/getOpenOrders";
-import { ProfileSubTabKey, subTabs } from "@/app/profile/[address]/tabs";
-import { getDealsForAddress } from "@/marketplace/getDealsForAddress";
-import UserDealsList from "@/components/marketplace/user-deals-list";
-import ExploreListSkeleton from "@/components/explore/explore-list-skeleton";
-import { SubTabsWithCount } from "@/components/profile/sub-tabs-with-count";
-import { CurrencyButtons } from "@/components/currency-buttons";
-
-const MarketplaceTabContentInner = async ({
-  address,
-  activeTab,
-}: {
-  address: string;
-  activeTab: ProfileSubTabKey;
-}) => {
-  const orders = await getOrders({
-    filter: { signer: address as `0x${string}` },
-  });
-
-  const deals = await getDealsForAddress(address);
-  const { buys, sells } = deals || {};
-
-  const marketplaceSubTabs = subTabs.filter(
-    (tab) => tab.key.split("-")[0] === "marketplace",
-  );
-
-  const tabBadgeCounts: Partial<
-    Record<(typeof subTabs)[number]["key"], number>
-  > = {
-    "marketplace-listings": orders?.count ?? 0,
-    "marketplace-bought": buys?.count ?? 0,
-    "marketplace-sold": sells?.count ?? 0,
-  };
-  return (
-    <section>
-      <SubTabsWithCount
-        address={address}
-        activeTab={activeTab}
-        tabBadgeCounts={tabBadgeCounts}
-        tabs={marketplaceSubTabs}
-      />
-      {activeTab === "marketplace-listings" && (
-        <Suspense fallback={<div>Loading...</div>}>
-          <div className="flex justify-end">
-            <CurrencyButtons />
-          </div>
-          <UserListingsList address={address} orders={orders?.data || []} />
-        </Suspense>
-      )}
-
-      {activeTab === "marketplace-bought" && (
-        <Suspense fallback={<div>Loading...</div>}>
-          <UserDealsList address={address} deals={buys?.data || []} />
-        </Suspense>
-      )}
-
-      {activeTab === "marketplace-sold" && (
-        <Suspense fallback={<div>Loading...</div>}>
-          <UserDealsList address={address} deals={sells?.data || []} />
-        </Suspense>
-      )}
-    </section>
-  );
-};
-
-const MarketplaceTabContent = ({
-  address,
-  activeTab,
-}: {
-  address: string;
-  activeTab: ProfileSubTabKey;
-}) => {
-  return (
-    <Suspense fallback={<ExploreListSkeleton length={9} />}>
-      <MarketplaceTabContentInner address={address} activeTab={activeTab} />
-    </Suspense>
-  );
-};
-export { MarketplaceTabContent };
diff --git a/app/profile/[address]/page.tsx b/app/profile/[address]/page.tsx
index 0ceaac68..ad27ede6 100644
--- a/app/profile/[address]/page.tsx
+++ b/app/profile/[address]/page.tsx
@@ -1,13 +1,14 @@
+import { Suspense } from "react";
 import {
   ProfileSubTabKey,
   ProfileTabSection,
 } from "@/app/profile/[address]/tabs";
-
 import EthAddress from "@/components/eth-address";
-import { HypercertsTabContent } from "@/app/profile/[address]/hypercerts-tab-content";
-import { CollectionsTabContent } from "@/app/profile/[address]/collections-tab-content";
-import { MarketplaceTabContent } from "@/app/profile/[address]/marketplace-tab-content";
-import { BlueprintsTabContent } from "@/app/profile/[address]/blueprint-tab-content";
+import MarketplaceTabContent from "@/app/profile/[address]/marketplace-tab-content.server";
+import BlueprintsTabContent from "@/app/profile/[address]/blueprint-tab-content.server";
+import TabContentSkeleton from "@/components/tab-content-skeleton";
+import { HypercertsTabContent } from "@/app/profile/[address]/hypercerts-tab-content.server";
+import CollectionsTabContent from "@/app/profile/[address]/collections-tab-content.server";
 
 export default function ProfilePage({
   params,
@@ -17,8 +18,8 @@ export default function ProfilePage({
   searchParams: Record<string, string>;
 }) {
   const address = params.address;
-  const tab = searchParams?.tab || "hypercerts-owned";
-  const mainTab = tab?.split("-")[0] ?? "hypercerts";
+  const tab = (searchParams?.tab || "hypercerts-owned") as ProfileSubTabKey;
+  const mainTab = tab.split("-")[0];
 
   return (
     <section className="flex flex-col gap-2">
@@ -30,31 +31,27 @@ export default function ProfilePage({
       </section>
       <ProfileTabSection address={address} active={tab} />
       <section className="flex flex-col gap-2">
-        {(tab === undefined || mainTab === "hypercerts") && (
-          <HypercertsTabContent
-            address={address}
-            activeTab={tab as ProfileSubTabKey}
-          />
-        )}
-        {mainTab === "collections" && (
-          <CollectionsTabContent
-            address={address}
-            searchParams={searchParams}
-          />
-        )}
-        {mainTab === "marketplace" && (
-          <MarketplaceTabContent
-            address={address}
-            activeTab={tab as ProfileSubTabKey}
-          />
-        )}
-        {mainTab === "blueprints" && (
-          <BlueprintsTabContent
-            address={address}
-            activeTab={tab as ProfileSubTabKey}
-            searchParams={searchParams}
-          />
-        )}
+        <Suspense fallback={<TabContentSkeleton />}>
+          {mainTab === "hypercerts" && (
+            <HypercertsTabContent address={address} activeTab={tab} />
+          )}
+          {mainTab === "collections" && (
+            <CollectionsTabContent
+              address={address}
+              searchParams={searchParams}
+            />
+          )}
+          {mainTab === "marketplace" && (
+            <MarketplaceTabContent address={address} activeTab={tab} />
+          )}
+          {mainTab === "blueprints" && (
+            <BlueprintsTabContent
+              address={address}
+              activeTab={tab}
+              searchParams={searchParams}
+            />
+          )}
+        </Suspense>
       </section>
     </section>
   );
diff --git a/app/profile/[address]/tabs.tsx b/app/profile/[address]/tabs.tsx
index ad039621..abe71563 100644
--- a/app/profile/[address]/tabs.tsx
+++ b/app/profile/[address]/tabs.tsx
@@ -1,6 +1,8 @@
+"use client";
+
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
-import Link from "next/link";
+import { useRouter } from "next/navigation";
 
 export const subTabs = [
   { key: "hypercerts-owned", triggerLabel: "Owned" },
@@ -19,63 +21,65 @@ export type ProfileSubTabKey =
   | "collections"
   | "marketplace-orders";
 
-const mainTabs: {
-  prefix: string;
-  triggerLabel: string;
-  defaultSubTabKey: ProfileSubTabKey;
-}[] = [
+const mainTabs = [
   {
     prefix: "hypercerts",
     triggerLabel: "Hypercerts",
-    defaultSubTabKey: "hypercerts-created",
+    defaultSubTabKey: "hypercerts-created" as ProfileSubTabKey,
   },
   {
     prefix: "collections",
     triggerLabel: "Collections",
-    defaultSubTabKey: "collections",
+    defaultSubTabKey: "collections" as ProfileSubTabKey,
   },
   {
     prefix: "marketplace",
     triggerLabel: "Marketplace",
-    defaultSubTabKey: "marketplace-listings",
+    defaultSubTabKey: "marketplace-listings" as ProfileSubTabKey,
   },
   {
     prefix: "blueprints",
     triggerLabel: "Blueprints",
-    defaultSubTabKey: "blueprints-claimable",
+    defaultSubTabKey: "blueprints-claimable" as ProfileSubTabKey,
   },
 ];
 
 export const createTabRoute = (address: string, tabKey: ProfileSubTabKey) =>
   `/profile/${address}?tab=${tabKey}`;
 
-const ProfileTabSection = ({
-  address,
-  active = "hypercerts-created",
-}: {
+interface ProfileTabSectionProps {
   address: string;
-  active: string;
-}) => {
+  active: ProfileSubTabKey;
+}
+
+export const ProfileTabSection = ({
+  address,
+  active,
+}: ProfileTabSectionProps) => {
+  const router = useRouter();
   const tabPrefix = active.split("-")[0];
+
+  const handleTabClick = (tabKey: ProfileSubTabKey) => {
+    router.push(createTabRoute(address, tabKey));
+  };
+
   return (
     <section className="w-full">
       <section className="flex items-end overflow-clip">
         {mainTabs.map(({ defaultSubTabKey, prefix, triggerLabel }) => (
-          <Link key={prefix} href={createTabRoute(address, defaultSubTabKey)}>
-            <button
-              className={cn(
-                "px-3 py-2 border-b-2 font-semibold text-lg",
-                tabPrefix === prefix ? "border-black" : "opacity-45",
-              )}
-            >
-              {triggerLabel}
-            </button>
-          </Link>
+          <button
+            key={prefix}
+            onClick={() => handleTabClick(defaultSubTabKey)}
+            className={cn(
+              "px-3 py-2 border-b-2 font-semibold text-lg",
+              tabPrefix === prefix ? "border-black" : "opacity-45",
+            )}
+          >
+            {triggerLabel}
+          </button>
         ))}
         <Separator className="flex-1" />
       </section>
     </section>
   );
 };
-
-export { ProfileTabSection };
diff --git a/components/collections/buttons.tsx b/components/collections/buttons.tsx
index d64f2d67..f79c52e6 100644
--- a/components/collections/buttons.tsx
+++ b/components/collections/buttons.tsx
@@ -18,12 +18,12 @@ import { useDeleteCollection } from "@/collections/hooks";
 
 export const CreateCollectionButton = () => {
   return (
-    <Button
-      className="hover:text-white rounded-sm bg-white text-black border border-slate-300"
-      asChild
+    <Link
+      href="/collections/create"
+      className="hover:text-white rounded-sm bg-white text-black border border-slate-300 px-4 py-2 inline-block"
     >
-      <Link href="/collections/create">Create collection</Link>
-    </Button>
+      Create collection
+    </Link>
   );
 };
 
@@ -33,12 +33,12 @@ export const EditCollectionButton = ({
   collectionId: string;
 }) => {
   return (
-    <Button
-      className="hover:text-white rounded-sm bg-white text-black border border-slate-300"
-      asChild
+    <Link
+      href={`/collections/edit/${collectionId}`}
+      className="hover:text-white rounded-sm bg-white text-black border border-slate-300 px-4 py-2 inline-block"
     >
-      <Link href={`/collections/edit/${collectionId}`}>Edit</Link>
-    </Button>
+      Edit
+    </Link>
   );
 };
 
@@ -50,13 +50,8 @@ export const DeleteCollectionButton = ({
   const { mutateAsync: deleteCollection } = useDeleteCollection();
   return (
     <AlertDialog>
-      <AlertDialogTrigger>
-        <Button
-          className="hover:text-white rounded-sm bg-white text-black border border-slate-300"
-          variant="destructive"
-        >
-          Delete
-        </Button>
+      <AlertDialogTrigger className="hover:text-white rounded-sm bg-white text-black border border-slate-300 px-4 py-2">
+        Delete
       </AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>
diff --git a/components/hyperboard/hyperboard-container.tsx b/components/hyperboard/hyperboard-container.tsx
new file mode 100644
index 00000000..255677dc
--- /dev/null
+++ b/components/hyperboard/hyperboard-container.tsx
@@ -0,0 +1,22 @@
+import Script from "next/script";
+
+export const HyperboardWidgetContainer = ({
+  hyperboardId,
+}: {
+  hyperboardId: string;
+}) => {
+  return (
+    <div className="hyperboard-widget-container">
+      <Script
+        src="https://staging.hyperboards.org/widget/hyperboard-widget.js"
+        type="module"
+        strategy="afterInteractive"
+      />
+      <div
+        className="hyperboard-widget"
+        data-hyperboard-id={hyperboardId}
+        data-hyperboard-show-table="false"
+      />
+    </div>
+  );
+};
diff --git a/components/hyperboard/hyperboard-row.tsx b/components/hyperboard/hyperboard-row.tsx
index a76ebcb7..6d49c7f0 100644
--- a/components/hyperboard/hyperboard-row.tsx
+++ b/components/hyperboard/hyperboard-row.tsx
@@ -1,9 +1,11 @@
+"use client";
+
 import Link from "next/link";
-import { HyperboardWidget } from "@/components/hyperboard/hyperboardWidget";
 import {
   DeleteCollectionButton,
   EditCollectionButton,
 } from "@/components/collections/buttons";
+import { HyperboardWidgetContainer } from "@/components/hyperboard/hyperboard-container";
 
 export const HyperboardRow = ({
   hyperboardId,
@@ -19,9 +21,9 @@ export const HyperboardRow = ({
   return (
     <div className="flex flex-col md:flex-row w-full">
       <div className="w-full md:w-1/2">
-        <HyperboardWidget hyperboardId={hyperboardId} />
+        <HyperboardWidgetContainer hyperboardId={hyperboardId} />
       </div>
-      <div className="flex flex-col h-auto w-full md:w-1/2 justify-start pl-0 md:pl-4 pt-0 md:pt-0">
+      <div className="flex flex-col h-auto w-full md:w-1/2 justify-start pl-0 md:pl-4 pt-0 md:pt-0 text-black">
         <Link href={`/collections/${hyperboardId}`}>
           <h3 className="text-lg font-medium">{name}</h3>
         </Link>
diff --git a/components/hyperboard/hyperboardWidget.tsx b/components/hyperboard/hyperboardWidget.tsx
index d55aa895..e77207d8 100644
--- a/components/hyperboard/hyperboardWidget.tsx
+++ b/components/hyperboard/hyperboardWidget.tsx
@@ -1,4 +1,12 @@
+"use client";
+
 import Script from "next/script";
+import dynamic from "next/dynamic";
+import { useState } from "react";
+import { Skeleton } from "@/components/ui/skeleton";
+
+// Dynamically import Script with no SSR to prevent hydration issues
+const DynamicScript = dynamic(() => import("next/script"), { ssr: false });
 
 export const HyperboardWidget = ({
   hyperboardId,
@@ -7,18 +15,28 @@ export const HyperboardWidget = ({
   hyperboardId: string;
   showTable?: boolean;
 }) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  const handleScriptLoad = () => {
+    setIsLoaded(true); // Update state when script loads
+  };
+
   return (
-    <>
+    <div className="hyperboard-widget-container">
       <Script
         async
         src="https://staging.hyperboards.org/widget/hyperboard-widget.js"
         type="module"
+        onLoad={handleScriptLoad} // Utilize onLoad to confirm script loading
       />
-      <div
-        className="hyperboard-widget"
-        data-hyperboard-id={hyperboardId}
-        data-hyperboard-show-table={showTable.toString()}
-      ></div>
-    </>
+      {!isLoaded && <Skeleton className="h-12 w-48 rounded-md" />}
+      {isLoaded && (
+        <div
+          className="hyperboard-widget"
+          data-hyperboard-id={hyperboardId}
+          data-hyperboard-show-table={showTable.toString()}
+        ></div>
+      )}
+    </div>
   );
 };
diff --git a/components/hypercert/hypercert-deal-window.tsx b/components/hypercert/hypercert-deal-window.tsx
index 72573b99..ad31dc8a 100644
--- a/components/hypercert/hypercert-deal-window.tsx
+++ b/components/hypercert/hypercert-deal-window.tsx
@@ -40,16 +40,18 @@ const HypercertDealWindow = ({
 
   return (
     <Link href={`/hypercerts/${hypercertId}`}>
-      <article className="transition-transform duration-300 hover:-translate-y-2 relative group bg-black/10 rounded-lg overflow-hidden">
-        <div className="h-[320px] w-full relative p-1">
-          <Image
-            src={`/api/hypercerts/${hypercertId}/image`}
-            alt={name || "Untitled"}
-            fill
-            sizes="300px"
-            className="object-contain object-center w-full h-full"
-          />
-        </div>
+      <article className="transition-transform duration-300 hover:-translate-y-2 relative group bg-accent rounded-lg overflow-hidden">
+        <section className="p-2">
+          <div className="h-[16.25rem] w-full relative">
+            <Image
+              src={`/api/hypercerts/${hypercertId}/image`}
+              alt={name || "Untitled"}
+              fill
+              sizes="300px"
+              className="object-contain object-center w-full h-full"
+            />
+          </div>
+        </section>
         <section className="absolute top-4 left-4 flex space-x-1 opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity duration-150 ease-out">
           <div className="rounded-md px-2 py-0.5 bg-black border border-white/60 text-white text-xs shadow-sm">
             {cardChain(chainId)}
@@ -58,27 +60,16 @@ const HypercertDealWindow = ({
             {evaluationStatus}
           </div>
         </section>
-        <section className="bg-accent/80 backdrop-blur-md bottom-0 w-full p-4 text-black space-y-2">
-          <p
-            className={`flex-1 text-sm font-semibold line-clamp-2 text-ellipsis ${
+        <section className="bg-accent backdrop-blur-md bottom-0 w-full p-4 text-black space-y-2">
+          <h3
+            className={`flex-1 text-base font-semibold h-[2.5em] overflow-hidden text-ellipsis tracking-tight leading-tight mb-2 ${
               name ? "text-black" : "text-slate-700"
-            }`}
+            } line-clamp-2`}
           >
             {name || "[Untitled]"}
-          </p>
+          </h3>
           <Separator className="bg-black/40 my-2" />
-          <section className="flex text-xs justify-between">
-            <section>
-              <h6 className="opacity-70">Traded</h6>
-              <p> {percentTraded ? `${percentTraded}%` : "--"}</p>
-            </section>
-            <section>
-              <h6 className="text-end opacity-70">Price</h6>
-              <p className="font-medium">
-                {price && price !== "0" ? `${price} ETH` : "--"}
-              </p>
-            </section>
-          </section>
+          <section className="flex text-xs justify-between"></section>
         </section>
       </article>
     </Link>
diff --git a/components/marketplace/user-deals-list.tsx b/components/marketplace/user-deals-list.tsx
index f6a63e62..94192e4e 100644
--- a/components/marketplace/user-deals-list.tsx
+++ b/components/marketplace/user-deals-list.tsx
@@ -19,8 +19,8 @@ export default function UserDealsList({
   return (
     <div className="w-full">
       {deals && deals.length > 0 ? (
-        <div className="flex items-center py-4">
-          <div className="grid grid-cols-[repeat(auto-fit,_minmax(270px,_1fr))] gap-4">
+        <div className="flex flex-col gap-5">
+          <div className="grid grid-cols-1 md:grid-cols-[repeat(auto-fit,_minmax(16.875rem,_18.75rem))] gap-4 py-4">
             {deals.map((deal) => {
               const percentTraded = calculateBigIntPercentage(
                 deal?.amounts?.shift(),
diff --git a/components/profile/collections-tab-skeleton.tsx b/components/profile/collections-tab-skeleton.tsx
new file mode 100644
index 00000000..2ca842af
--- /dev/null
+++ b/components/profile/collections-tab-skeleton.tsx
@@ -0,0 +1,14 @@
+export default function CollectionsTabSkeleton({ length }: { length: number }) {
+  return (
+    <div className="flex flex-col gap-5">
+      <div className="grid grid-rows-[repeat(auto-fit,_minmax(270px,_1fr))] gap-4">
+        {Array.from({ length }, (_, i) => (
+          <div
+            key={i}
+            className="max-w-screen-sm h-[150px] bg-slate-100 rounded-lg"
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/components/profile/marketplace-tab-skeleton.tsx b/components/profile/marketplace-tab-skeleton.tsx
new file mode 100644
index 00000000..9eb8dafe
--- /dev/null
+++ b/components/profile/marketplace-tab-skeleton.tsx
@@ -0,0 +1,14 @@
+export default function MarketplaceTabSkeleton({ length }: { length: number }) {
+  return (
+    <div className="flex flex-col gap-5">
+      <div className="grid grid-cols-[repeat(auto-fit,_minmax(270px,_1fr))] gap-4">
+        {Array.from({ length }, (_, i) => (
+          <div
+            key={i}
+            className="max-w-screen-sm h-[150px] bg-slate-100 rounded-lg"
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/components/profile/sub-tabs-with-count.tsx b/components/profile/sub-tabs-with-count.tsx
index 3a69994f..48403c68 100644
--- a/components/profile/sub-tabs-with-count.tsx
+++ b/components/profile/sub-tabs-with-count.tsx
@@ -20,7 +20,7 @@ export const SubTabsWithCount = ({
   tabs,
 }: SubTabsWithCountProps) => {
   return (
-    <section className="bg-slate-100 w-max flex rounded-sm p-1 my-2">
+    <section className="bg-slate-100 w-max flex rounded-sm p-1">
       {tabs.map(({ key, triggerLabel }) => (
         <Link href={createTabRoute(address, key)} key={key}>
           <button
diff --git a/components/profile/unclaimed-hypercert-list-item.tsx b/components/profile/unclaimed-hypercert-list-item.tsx
deleted file mode 100644
index a86e12fd..00000000
--- a/components/profile/unclaimed-hypercert-list-item.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { AllowListRecord } from "@/allowlists/getAllowListRecordsForAddressByClaimed";
-import Image from "next/image";
-import UnclaimedHypercertClaimButton from "./unclaimed-hypercert-claim-button";
-import TimeFrame from "../hypercert/time-frame";
-import { getHypercert } from "@/hypercerts/getHypercert";
-
-export default async function UnclaimedHypercertListItem({
-  allowListRecordFragment: allowListRecord,
-}: {
-  allowListRecordFragment: AllowListRecord;
-}) {
-  const hypercertId = allowListRecord.hypercert_id;
-  if (!hypercertId) {
-    return null;
-  }
-
-  const hypercert = await getHypercert(hypercertId);
-  if (!hypercert) {
-    return null;
-  }
-
-  return (
-    <div>
-      <div className="flex items-center gap-2">
-        <Image
-          src={`/api/hypercerts/${hypercertId}/image`}
-          alt={hypercert?.metadata?.name || ""}
-          className="object-cover object-top w-[100px] h-[100px]"
-          width={100}
-          height={100}
-        />
-
-        <div className="flex flex-col justify-center">
-          <h6 className="text-lg font-semibold">
-            {hypercert?.metadata?.name || "Untitled"}
-          </h6>
-          <TimeFrame
-            from={hypercert?.metadata?.work_timeframe_from}
-            to={hypercert?.metadata?.work_timeframe_to}
-          />
-        </div>
-
-        <div className="flex-grow" />
-
-        <UnclaimedHypercertClaimButton allowListRecord={allowListRecord} />
-      </div>
-    </div>
-  );
-}
diff --git a/components/profile/unclaimed-hypercert-skeleton.tsx b/components/profile/unclaimed-hypercert-skeleton.tsx
new file mode 100644
index 00000000..bc107692
--- /dev/null
+++ b/components/profile/unclaimed-hypercert-skeleton.tsx
@@ -0,0 +1,18 @@
+export default function UnclaimedHypercertSkeleton({
+  length,
+}: {
+  length: number;
+}) {
+  return (
+    <div className="flex flex-col gap-5">
+      <div className="grid grid-cols-[repeat(auto-fit,_minmax(270px,_1fr))] gap-4">
+        {Array.from({ length }, (_, i) => (
+          <div
+            key={i}
+            className="max-w-screen-sm h-[150px] bg-slate-100 rounded-lg"
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/components/profile/unclaimed-hypercerts-list-content.tsx b/components/profile/unclaimed-hypercerts-list-content.tsx
new file mode 100644
index 00000000..608cf544
--- /dev/null
+++ b/components/profile/unclaimed-hypercerts-list-content.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+import { AllowListRecord } from "@/allowlists/getAllowListRecordsForAddressByClaimed";
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import Image from "next/image";
+import Link from "next/link";
+import TimeFrame from "../hypercert/time-frame";
+import UnclaimedHypercertClaimButton from "./unclaimed-hypercert-claim-button";
+
+interface UnclaimedHypercertsListContentProps {
+  unclaimedHypercertsData: {
+    hypercert: any;
+    record: AllowListRecord;
+  }[];
+}
+
+type UnclaimedHypercert = {
+  id: string;
+  name: string;
+  image: string;
+  timeFrom: string;
+  timeTo: string;
+  allowListRecord: AllowListRecord;
+};
+
+const columnHelper = createColumnHelper<UnclaimedHypercert>();
+
+const columns = [
+  columnHelper.accessor("image", {
+    header: "Image",
+    cell: (info) => (
+      <Link href={`/hypercerts/${info.row.original.id}`}>
+        <Image
+          src={info.getValue()}
+          alt={info.row.original.name || "Untitled"}
+          className="object-cover object-top w-[100px] h-[100px] cursor-pointer"
+          width={75}
+          height={75}
+        />
+      </Link>
+    ),
+  }),
+  columnHelper.accessor("name", {
+    header: "Name",
+    cell: (info) => (
+      <Link
+        href={`/hypercerts/${info.row.original.id}`}
+        className="hover:underline"
+      >
+        <div className="flex flex-col justify-center">
+          <h6 className="text-lg font-semibold">
+            {info.getValue() || "Untitled"}
+          </h6>
+          <TimeFrame
+            from={info.row.original.timeFrom}
+            to={info.row.original.timeTo}
+          />
+        </div>
+      </Link>
+    ),
+  }),
+  columnHelper.accessor("allowListRecord", {
+    header: "Action",
+    cell: (info) => (
+      <UnclaimedHypercertClaimButton allowListRecord={info.getValue()} />
+    ),
+  }),
+];
+
+export default function UnclaimedHypercertsListContent({
+  unclaimedHypercertsData,
+}: UnclaimedHypercertsListContentProps) {
+  // Map to a new array of objects with the necessary properties
+  const data = unclaimedHypercertsData.map(({ hypercert, record }) => {
+    const _unclaimedHypercert: UnclaimedHypercert = {
+      id: record.hypercert_id as string,
+      name: hypercert?.metadata?.name,
+      image: `/api/hypercerts/${record.hypercert_id}/image`,
+      timeFrom: hypercert?.metadata?.work_timeframe_from,
+      timeTo: hypercert?.metadata?.work_timeframe_to,
+      allowListRecord: record,
+    };
+    return _unclaimedHypercert;
+  });
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full">
+        <tbody>
+          {table.getRowModel().rows.map((row, index) => (
+            <tr key={row.id} className="border-b last:border-b-0">
+              {row.getVisibleCells().map((cell) => (
+                <td key={`${index}-${cell.id}`} className="py-4 px-2">
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/components/profile/unclaimed-hypercerts-list.tsx b/components/profile/unclaimed-hypercerts-list.tsx
deleted file mode 100644
index de10eca3..00000000
--- a/components/profile/unclaimed-hypercerts-list.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { EmptySection } from "@/app/profile/[address]/sections";
-import UnclaimedHypercertListItem from "./unclaimed-hypercert-list-item";
-import { AllowListRecord } from "@/allowlists/getAllowListRecordsForAddressByClaimed";
-
-export default async function UnclaimedHypercertsList({
-  unclaimedHypercerts,
-}: {
-  unclaimedHypercerts: readonly AllowListRecord[];
-}) {
-  if (unclaimedHypercerts.length === 0) {
-    return (
-      <section className="pt-4">
-        <EmptySection />
-      </section>
-    );
-  }
-
-  return (
-    <div className="grid grid-cols-[repeat(auto-fit,_minmax(270px,_1fr))] gap-4">
-      {unclaimedHypercerts.map((unclaimedHypercert, i) => (
-        <UnclaimedHypercertListItem
-          allowListRecordFragment={unclaimedHypercert}
-          key={i}
-        />
-      ))}
-    </div>
-  );
-}
diff --git a/components/tab-content-skeleton.tsx b/components/tab-content-skeleton.tsx
new file mode 100644
index 00000000..d623ab8d
--- /dev/null
+++ b/components/tab-content-skeleton.tsx
@@ -0,0 +1,27 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function TabContentSkeleton() {
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center space-x-4">
+        <Skeleton className="h-12 w-12 rounded-full" />
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-[250px]" />
+          <Skeleton className="h-4 w-[200px]" />
+        </div>
+      </div>
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-3/4" />
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {[...Array(6)].map((_, i) => (
+          <div key={i} className="space-y-2">
+            <Skeleton className="h-40 w-full rounded-lg" />
+            <Skeleton className="h-4 w-3/4" />
+            <Skeleton className="h-4 w-1/2" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/graphql-hypercerts-env.d.ts b/graphql-hypercerts-env.d.ts
index 0ec15b61..386740a1 100644
--- a/graphql-hypercerts-env.d.ts
+++ b/graphql-hypercerts-env.d.ts
@@ -48,8 +48,9 @@ export type introspection_types = {
     'GetOrdersResponse': { kind: 'OBJECT'; name: 'GetOrdersResponse'; fields: { 'count': { name: 'count'; type: { kind: 'SCALAR'; name: 'Int'; ofType: null; } }; 'data': { name: 'data'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'Order'; ofType: null; }; }; } }; }; };
     'GetSalesResponse': { kind: 'OBJECT'; name: 'GetSalesResponse'; fields: { 'count': { name: 'count'; type: { kind: 'SCALAR'; name: 'Int'; ofType: null; } }; 'data': { name: 'data'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'Sale'; ofType: null; }; }; } }; }; };
     'GetUsersResponse': { kind: 'OBJECT'; name: 'GetUsersResponse'; fields: { 'count': { name: 'count'; type: { kind: 'SCALAR'; name: 'Int'; ofType: null; } }; 'data': { name: 'data'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'User'; ofType: null; }; }; } }; }; };
-    'Hyperboard': { kind: 'OBJECT'; name: 'Hyperboard'; fields: { 'admins': { name: 'admins'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'User'; ofType: null; }; }; }; } }; 'background_image': { name: 'background_image'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'chain_ids': { name: 'chain_ids'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'EthBigInt'; ofType: null; }; }; } }; 'grayscale_images': { name: 'grayscale_images'; type: { kind: 'SCALAR'; name: 'Boolean'; ofType: null; } }; 'id': { name: 'id'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'ID'; ofType: null; }; } }; 'name': { name: 'name'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'sections': { name: 'sections'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'SectionResponseType'; ofType: null; }; } }; 'tile_border_color': { name: 'tile_border_color'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; }; };
+    'Hyperboard': { kind: 'OBJECT'; name: 'Hyperboard'; fields: { 'admins': { name: 'admins'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'User'; ofType: null; }; }; }; } }; 'background_image': { name: 'background_image'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'chain_ids': { name: 'chain_ids'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'EthBigInt'; ofType: null; }; }; } }; 'grayscale_images': { name: 'grayscale_images'; type: { kind: 'SCALAR'; name: 'Boolean'; ofType: null; } }; 'id': { name: 'id'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'ID'; ofType: null; }; } }; 'name': { name: 'name'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'owners': { name: 'owners'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'HyperboardOwner'; ofType: null; }; }; }; } }; 'sections': { name: 'sections'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'SectionResponseType'; ofType: null; }; } }; 'tile_border_color': { name: 'tile_border_color'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; }; };
     'HyperboardFetchInput': { kind: 'INPUT_OBJECT'; name: 'HyperboardFetchInput'; isOneOf: false; inputFields: [{ name: 'by'; type: { kind: 'INPUT_OBJECT'; name: 'HyperboardSortOptions'; ofType: null; }; defaultValue: null }]; };
+    'HyperboardOwner': { kind: 'OBJECT'; name: 'HyperboardOwner'; fields: { 'address': { name: 'address'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'avatar': { name: 'avatar'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'chain_id': { name: 'chain_id'; type: { kind: 'SCALAR'; name: 'EthBigInt'; ofType: null; } }; 'display_name': { name: 'display_name'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'percentage_owned': { name: 'percentage_owned'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'Float'; ofType: null; }; } }; }; };
     'HyperboardSortOptions': { kind: 'INPUT_OBJECT'; name: 'HyperboardSortOptions'; isOneOf: false; inputFields: [{ name: 'name'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'admin_id'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'chainId'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }]; };
     'HyperboardWhereInput': { kind: 'INPUT_OBJECT'; name: 'HyperboardWhereInput'; isOneOf: false; inputFields: [{ name: 'id'; type: { kind: 'INPUT_OBJECT'; name: 'IdSearchOptions'; ofType: null; }; defaultValue: null }, { name: 'chain_id'; type: { kind: 'INPUT_OBJECT'; name: 'BigIntSearchOptions'; ofType: null; }; defaultValue: null }, { name: 'admin_id'; type: { kind: 'INPUT_OBJECT'; name: 'StringSearchOptions'; ofType: null; }; defaultValue: null }]; };
     'Hypercert': { kind: 'OBJECT'; name: 'Hypercert'; fields: { 'attestations': { name: 'attestations'; type: { kind: 'OBJECT'; name: 'GetAttestationsResponse'; ofType: null; } }; 'attestations_count': { name: 'attestations_count'; type: { kind: 'SCALAR'; name: 'Int'; ofType: null; } }; 'contract': { name: 'contract'; type: { kind: 'OBJECT'; name: 'Contract'; ofType: null; } }; 'contracts_id': { name: 'contracts_id'; type: { kind: 'SCALAR'; name: 'ID'; ofType: null; } }; 'creation_block_number': { name: 'creation_block_number'; type: { kind: 'SCALAR'; name: 'EthBigInt'; ofType: null; } }; 'creation_block_timestamp': { name: 'creation_block_timestamp'; type: { kind: 'SCALAR'; name: 'EthBigInt'; ofType: null; } }; 'creator_address': { name: 'creator_address'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'fractions': { name: 'fractions'; type: { kind: 'OBJECT'; name: 'GetFractionsResponse'; ofType: null; } }; 'hypercert_id': { name: 'hypercert_id'; type: { kind: 'SCALAR'; name: 'ID'; ofType: null; } }; 'id': { name: 'id'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'ID'; ofType: null; }; } }; 'last_update_block_number': { name: 'last_update_block_number'; type: { kind: 'SCALAR'; name: 'EthBigInt'; ofType: null; } }; 'last_update_block_timestamp': { name: 'last_update_block_timestamp'; type: { kind: 'SCALAR'; name: 'EthBigInt'; ofType: null; } }; 'metadata': { name: 'metadata'; type: { kind: 'OBJECT'; name: 'Metadata'; ofType: null; } }; 'orders': { name: 'orders'; type: { kind: 'OBJECT'; name: 'GetOrdersForHypercertResponse'; ofType: null; } }; 'sales': { name: 'sales'; type: { kind: 'OBJECT'; name: 'GetSalesResponse'; ofType: null; } }; 'sales_count': { name: 'sales_count'; type: { kind: 'SCALAR'; name: 'Int'; ofType: null; } }; 'token_id': { name: 'token_id'; type: { kind: 'SCALAR'; name: 'EthBigInt'; ofType: null; } }; 'units': { name: 'units'; type: { kind: 'SCALAR'; name: 'EthBigInt'; ofType: null; } }; 'uri': { name: 'uri'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; }; };
@@ -76,10 +77,9 @@ export type introspection_types = {
     'SaleFetchInput': { kind: 'INPUT_OBJECT'; name: 'SaleFetchInput'; isOneOf: false; inputFields: [{ name: 'by'; type: { kind: 'INPUT_OBJECT'; name: 'SaleSortOptions'; ofType: null; }; defaultValue: null }]; };
     'SaleSortOptions': { kind: 'INPUT_OBJECT'; name: 'SaleSortOptions'; isOneOf: false; inputFields: [{ name: 'amounts'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'buyer'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'collection'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'creationBlockNumber'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'creationBlockTimestamp'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'currency'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'hypercertId'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'seller'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'strategyId'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'transactionHash'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }]; };
     'SaleWhereInput': { kind: 'INPUT_OBJECT'; name: 'SaleWhereInput'; isOneOf: false; inputFields: [{ name: 'transaction_hash'; type: { kind: 'INPUT_OBJECT'; name: 'IdSearchOptions'; ofType: null; }; defaultValue: null }, { name: 'hypercert_id'; type: { kind: 'INPUT_OBJECT'; name: 'StringSearchOptions'; ofType: null; }; defaultValue: null }, { name: 'item_ids'; type: { kind: 'INPUT_OBJECT'; name: 'StringArraySearchOptions'; ofType: null; }; defaultValue: null }, { name: 'currency'; type: { kind: 'INPUT_OBJECT'; name: 'StringSearchOptions'; ofType: null; }; defaultValue: null }, { name: 'collection'; type: { kind: 'INPUT_OBJECT'; name: 'StringSearchOptions'; ofType: null; }; defaultValue: null }, { name: 'buyer'; type: { kind: 'INPUT_OBJECT'; name: 'StringSearchOptions'; ofType: null; }; defaultValue: null }, { name: 'seller'; type: { kind: 'INPUT_OBJECT'; name: 'StringSearchOptions'; ofType: null; }; defaultValue: null }, { name: 'strategy_id'; type: { kind: 'INPUT_OBJECT'; name: 'BigIntSearchOptions'; ofType: null; }; defaultValue: null }, { name: 'creation_block_number'; type: { kind: 'INPUT_OBJECT'; name: 'BigIntSearchOptions'; ofType: null; }; defaultValue: null }, { name: 'creation_block_timestamp'; type: { kind: 'INPUT_OBJECT'; name: 'BigIntSearchOptions'; ofType: null; }; defaultValue: null }, { name: 'amounts'; type: { kind: 'INPUT_OBJECT'; name: 'NumberArraySearchOptions'; ofType: null; }; defaultValue: null }]; };
-    'Section': { kind: 'OBJECT'; name: 'Section'; fields: { 'collection': { name: 'collection'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'Collection'; ofType: null; }; } }; 'entries': { name: 'entries'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'SectionEntry'; ofType: null; }; }; }; } }; 'label': { name: 'label'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'owners': { name: 'owners'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'SectionOwner'; ofType: null; }; }; }; } }; }; };
+    'Section': { kind: 'OBJECT'; name: 'Section'; fields: { 'collection': { name: 'collection'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'Collection'; ofType: null; }; } }; 'entries': { name: 'entries'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'SectionEntry'; ofType: null; }; }; }; } }; 'label': { name: 'label'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'owners': { name: 'owners'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'HyperboardOwner'; ofType: null; }; }; }; } }; }; };
     'SectionEntry': { kind: 'OBJECT'; name: 'SectionEntry'; fields: { 'display_size': { name: 'display_size'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'Float'; ofType: null; }; } }; 'id': { name: 'id'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'is_blueprint': { name: 'is_blueprint'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'Boolean'; ofType: null; }; } }; 'name': { name: 'name'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'owners': { name: 'owners'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'SectionEntryOwner'; ofType: null; }; }; }; } }; 'percentage_of_section': { name: 'percentage_of_section'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'Float'; ofType: null; }; } }; 'total_units': { name: 'total_units'; type: { kind: 'SCALAR'; name: 'BigInt'; ofType: null; } }; }; };
     'SectionEntryOwner': { kind: 'OBJECT'; name: 'SectionEntryOwner'; fields: { 'address': { name: 'address'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'avatar': { name: 'avatar'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'chain_id': { name: 'chain_id'; type: { kind: 'SCALAR'; name: 'EthBigInt'; ofType: null; } }; 'display_name': { name: 'display_name'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'percentage': { name: 'percentage'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'Float'; ofType: null; }; } }; 'units': { name: 'units'; type: { kind: 'SCALAR'; name: 'BigInt'; ofType: null; } }; }; };
-    'SectionOwner': { kind: 'OBJECT'; name: 'SectionOwner'; fields: { 'address': { name: 'address'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'avatar': { name: 'avatar'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'chain_id': { name: 'chain_id'; type: { kind: 'SCALAR'; name: 'EthBigInt'; ofType: null; } }; 'display_name': { name: 'display_name'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'percentage_owned': { name: 'percentage_owned'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'Float'; ofType: null; }; } }; }; };
     'SectionResponseType': { kind: 'OBJECT'; name: 'SectionResponseType'; fields: { 'count': { name: 'count'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'Float'; ofType: null; }; } }; 'data': { name: 'data'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'Section'; ofType: null; }; }; }; } }; }; };
     'SortOrder': { name: 'SortOrder'; enumValues: 'ascending' | 'descending'; };
     'String': unknown;
diff --git a/hypercerts/getHypercert.ts b/hypercerts/getHypercert.ts
index 6f7b9032..919596a2 100644
--- a/hypercerts/getHypercert.ts
+++ b/hypercerts/getHypercert.ts
@@ -1,5 +1,4 @@
-import "server-only";
-
+import { cache } from "react";
 import { graphql, readFragment } from "@/lib/graphql";
 
 import { HYPERCERTS_API_URL_GRAPH } from "@/configs/hypercerts";
@@ -20,10 +19,7 @@ const query = graphql(
   [HypercertFullFragment],
 );
 
-export async function getHypercert(hypercertId: string) {
-  // hypercertID is a string consisting of chainId-contractAddress-tokenId [bigint, string, bigint]
-  // split it into its parts and getAddress for the contractAddress using viem (mixed case)
-
+export const getHypercert = cache(async (hypercertId: string) => {
   const [chainId, contractAddress, tokenId] = hypercertId.split("-");
 
   if (!chainId || !contractAddress || !tokenId) {
@@ -33,7 +29,6 @@ export async function getHypercert(hypercertId: string) {
 
   const _contractAddress = getAddress(contractAddress);
 
-  // TODO: Throw error?
   if (!isAddress(_contractAddress)) {
     console.error("Invalid address");
     return undefined;
@@ -49,4 +44,4 @@ export async function getHypercert(hypercertId: string) {
   }
 
   return readFragment(HypercertFullFragment, hypercertFullFragment);
-}
+});
diff --git a/lib/generateMetadata.ts b/lib/generateMetadata.ts
new file mode 100644
index 00000000..329f9f6c
--- /dev/null
+++ b/lib/generateMetadata.ts
@@ -0,0 +1,30 @@
+import { Metadata, ResolvingMetadata } from "next";
+import { getHypercert } from "@/hypercerts/getHypercert";
+
+type Props = {
+  params: { hypercertId: string };
+  searchParams: { [key: string]: string | string[] | undefined };
+};
+
+export async function generateMetadata(
+  { params }: Props,
+  parent: ResolvingMetadata,
+): Promise<Metadata> {
+  const { hypercertId } = params;
+
+  const hypercert = await getHypercert(hypercertId);
+
+  // optionally access and extend (rather than replace) parent metadata
+  const previousImages = (await parent).openGraph?.images || [];
+  return {
+    title: hypercert?.metadata?.name || "Untitled Hypercert",
+    description: hypercert?.metadata?.description || "",
+    openGraph: {
+      images: [
+        `/api/hypercerts/${hypercertId}/image`,
+        "/hypercerts-opengraph.jpg",
+        ...previousImages,
+      ],
+    },
+  };
+}
diff --git a/lib/getHypercertDataForUnclaimedHypercerts.ts b/lib/getHypercertDataForUnclaimedHypercerts.ts
new file mode 100644
index 00000000..89e3328e
--- /dev/null
+++ b/lib/getHypercertDataForUnclaimedHypercerts.ts
@@ -0,0 +1,29 @@
+import { AllowListRecord } from "@/allowlists/getAllowListRecordsForAddressByClaimed";
+import { getHypercert } from "@/hypercerts/getHypercert";
+
+export async function getHypercertDataForUnclaimed(
+  unclaimedHypercerts: readonly AllowListRecord[],
+) {
+  if (!unclaimedHypercerts) return [];
+
+  console.log("unclaimedHypercerts", unclaimedHypercerts);
+
+  const results = await Promise.all(
+    unclaimedHypercerts.map(async (record) => {
+      if (!record.hypercert_id) {
+        return {
+          hypercert: null,
+          record,
+        };
+      }
+
+      const hypercert = await getHypercert(record.hypercert_id);
+      return {
+        hypercert,
+        record,
+      };
+    }),
+  );
+
+  return results.filter((result) => result.hypercert !== null) ?? [];
+}