diff --git a/examples/next/next.config.js b/examples/next/next.config.js
index ce18e3f5e..d3856c246 100644
--- a/examples/next/next.config.js
+++ b/examples/next/next.config.js
@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
+const path = require("path");
+
 const nextConfig = {
   productionBrowserSourceMaps: true,
   reactStrictMode: true,
@@ -24,6 +26,14 @@ const nextConfig = {
       config.plugins.push(new WasmChunksFixPlugin());
     }
 
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      [path.resolve(__dirname, "src/assets")]: path.resolve(
+        path.dirname(require.resolve("@cartridge/ui")),
+        "assets",
+      ),
+    };
+
     return config;
   },
 };
diff --git a/examples/next/tsconfig.json b/examples/next/tsconfig.json
index 818b09bf0..4da2c0125 100644
--- a/examples/next/tsconfig.json
+++ b/examples/next/tsconfig.json
@@ -21,6 +21,7 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
+    "**/*.otf",
     ".next/types/**/*.ts",
     "**/*.wasm"
   ],
diff --git a/package.json b/package.json
index 01a36fe40..7defb0711 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@cartridge/presets": "github:cartridge-gg/presets#c064e82",
-    "@cartridge/ui": "github:cartridge-gg/ui#e5405d6",
+    "@cartridge/ui": "catalog:",
     "tailwindcss": "catalog:",
     "@graphql-codegen/cli": "^2.6.2",
     "@graphql-codegen/typescript": "^2.4.8",
diff --git a/packages/keychain/src/components/activity.tsx b/packages/keychain/src/components/activity.tsx
index b65969766..133a616c3 100644
--- a/packages/keychain/src/components/activity.tsx
+++ b/packages/keychain/src/components/activity.tsx
@@ -1,3 +1,5 @@
+import { useCallback, useMemo, useState } from "react";
+import { Link } from "react-router-dom";
 import {
   ActivityAchievementCard,
   ActivityCollectibleCard,
@@ -12,30 +14,10 @@ import {
 import { cn } from "@cartridge/ui/utils";
 import { useExplorer } from "@starknet-react/core";
 import { useData } from "@/hooks/data";
-import { useCallback, useMemo, useState } from "react";
-import { Link } from "react-router-dom";
+import { CardProps } from "@/components/provider/data";
 
 const OFFSET = 100;
 
-interface CardProps {
-  variant: "token" | "collectible" | "game" | "achievement";
-  key: string;
-  transactionHash: string;
-  amount: string;
-  address: string;
-  value: string;
-  name: string;
-  collection: string;
-  image: string;
-  title: string;
-  website: string;
-  certified: boolean;
-  action: "send" | "receive" | "mint";
-  timestamp: number;
-  date: string;
-  points?: number;
-}
-
 export function Activity() {
   const [cap, setCap] = useState(OFFSET);
   const explorer = useExplorer();
@@ -66,8 +48,10 @@ export function Activity() {
       {dates.map((current) => {
         return (
           <div key={current} className="flex flex-col gap-y-2 select-none">
-            <p className="text-foreground-300 text-sm font-medium">{current}</p>
-            <div className="flex flex-col gap-y-px">
+            <p className="text-foreground-400 text-xs font-bold uppercase mb-2 leading-none">
+              {current}
+            </p>
+            <div className="flex flex-col gap-y-2">
               {events
                 .filter((event) => event.date === current)
                 .map((props: CardProps, index: number) => {
@@ -75,16 +59,18 @@ export function Activity() {
                     case "token":
                       return (
                         <Link
-                          key={`${index}-${props.key}`}
+                          key={`${index}-${props.key}-${props.username}`}
                           to={to(props.transactionHash)}
                           target="_blank"
                         >
                           <ActivityTokenCard
                             amount={props.amount}
                             address={props.address}
+                            username={props.username}
                             value={props.value}
                             image={props.image}
                             action={props.action}
+                            timestamp={props.timestamp * 1000}
                           />
                         </Link>
                       );
@@ -99,8 +85,10 @@ export function Activity() {
                             name={props.name}
                             collection={props.collection}
                             address={props.address}
+                            username={props.username}
                             image={props.image}
                             action={props.action}
+                            timestamp={props.timestamp * 1000}
                           />
                         </Link>
                       );
@@ -112,10 +100,12 @@ export function Activity() {
                           target="_blank"
                         >
                           <ActivityGameCard
-                            title={props.title}
+                            action={props.title}
+                            name={props.name}
+                            themeColor={props.color}
                             website={props.website}
-                            image={props.image}
                             certified={props.certified}
+                            timestamp={props.timestamp * 1000}
                           />
                         </Link>
                       );
@@ -125,10 +115,12 @@ export function Activity() {
                           key={`${index}-${props.key}`}
                           title={"Achievement"}
                           topic={props.title}
-                          website={props.website}
                           image={props.image}
-                          certified={props.certified}
                           points={props.points || 0}
+                          themeColor={props.color}
+                          website={props.website}
+                          certified={props.certified}
+                          timestamp={props.timestamp * 1000}
                         />
                       );
                   }
@@ -152,12 +144,12 @@ export function Activity() {
   );
 }
 
-const LoadingState = () => {
+export const LoadingState = ({ rowCount = 5 }: { rowCount?: number }) => {
   return (
     <LayoutContent>
       <Skeleton className="w-1/5 h-4 py-4 rounded" />
       <div className="flex flex-col gap-2">
-        {Array.from({ length: 20 }).map((_, index) => (
+        {Array.from({ length: rowCount }).map((_, index) => (
           <Skeleton key={index} className="w-full h-16 rounded" />
         ))}
       </div>
@@ -165,7 +157,7 @@ const LoadingState = () => {
   );
 };
 
-const EmptyState = () => {
+export const EmptyState = () => {
   return (
     <LayoutContent>
       <Empty
diff --git a/packages/keychain/src/components/inventory/collection/collectible-asset.tsx b/packages/keychain/src/components/inventory/collection/collectible-asset.tsx
index 9343cb087..546533edc 100644
--- a/packages/keychain/src/components/inventory/collection/collectible-asset.tsx
+++ b/packages/keychain/src/components/inventory/collection/collectible-asset.tsx
@@ -284,7 +284,7 @@ export function CollectibleAsset() {
                   </CollectibleItems>
                 </TabsContent>
                 <TabsContent
-                  className="m-0 p-0 flex flex-col gap-px"
+                  className="m-0 p-0 flex flex-col gap-2"
                   value="activity"
                 >
                   {events.map((props: CardProps, index: number) => (
diff --git a/packages/keychain/src/components/inventory/collection/collectible.tsx b/packages/keychain/src/components/inventory/collection/collectible.tsx
index ea83ece5c..8997f108b 100644
--- a/packages/keychain/src/components/inventory/collection/collectible.tsx
+++ b/packages/keychain/src/components/inventory/collection/collectible.tsx
@@ -65,6 +65,7 @@ export function Collectible() {
                         ? asset.name
                         : `${asset.name} #${parseInt(BigInt(asset.tokenId).toString())}`
                     }
+                    clickable
                     selectable={false}
                     images={[...asset.imageUrls, placeholder]}
                     totalCount={asset.amount}
diff --git a/packages/keychain/src/components/inventory/collection/collection-asset.tsx b/packages/keychain/src/components/inventory/collection/collection-asset.tsx
index e10197339..ca6953684 100644
--- a/packages/keychain/src/components/inventory/collection/collection-asset.tsx
+++ b/packages/keychain/src/components/inventory/collection/collection-asset.tsx
@@ -251,7 +251,7 @@ export function CollectionAsset() {
                   />
                 </TabsContent>
                 <TabsContent
-                  className="m-0 p-0 flex flex-col gap-px"
+                  className="m-0 p-0 flex flex-col gap-2"
                   value="activity"
                 >
                   {events.map((props: CardProps, index: number) => (
diff --git a/packages/keychain/src/components/inventory/collection/collection.tsx b/packages/keychain/src/components/inventory/collection/collection.tsx
index b46c89edf..9e2593854 100644
--- a/packages/keychain/src/components/inventory/collection/collection.tsx
+++ b/packages/keychain/src/components/inventory/collection/collection.tsx
@@ -260,6 +260,7 @@ function LazyAsset({
                 : `${asset.name} #${parseInt(BigInt(asset.tokenId).toString())}`
             }
             images={[...asset.imageUrls, placeholder]}
+            clickable
             selectable
             selected={isSelected}
             listingCount={listingCount}
diff --git a/packages/keychain/src/components/inventory/collection/collections.tsx b/packages/keychain/src/components/inventory/collection/collections.tsx
index 288857137..e3d98df3a 100644
--- a/packages/keychain/src/components/inventory/collection/collections.tsx
+++ b/packages/keychain/src/components/inventory/collection/collections.tsx
@@ -51,6 +51,7 @@ export function Collections() {
               totalCount={collection.totalCount}
               listingCount={listingCount}
               selectable={false}
+              clickable
             />
           </Link>
         );
diff --git a/packages/keychain/src/components/inventory/token/token.tsx b/packages/keychain/src/components/inventory/token/token.tsx
index 726c0be7c..9f165ca11 100644
--- a/packages/keychain/src/components/inventory/token/token.tsx
+++ b/packages/keychain/src/components/inventory/token/token.tsx
@@ -16,12 +16,13 @@ import { useData } from "@/hooks/data";
 import { getDate, isPublicChain, useCreditBalance } from "@cartridge/ui/utils";
 import { useExplorer } from "@starknet-react/core";
 import { constants, getChecksumAddress } from "starknet";
-import { useAccount } from "@/hooks/account";
+import { useAccount, useUsernames } from "@/hooks/account";
 import { useToken } from "@/hooks/token";
 import { useCallback, useMemo } from "react";
 import { useConnection } from "@/hooks/connection";
 import { useVersion } from "@/hooks/version";
 import { useNavigation } from "@/context/navigation";
+import { EmptyState, LoadingState } from "@/components/activity";
 
 export function Token() {
   const { address } = useParams<{ address: string }>();
@@ -116,7 +117,7 @@ function ERC20() {
   const accountAddress = account?.address || "";
   const { controller } = useConnection();
   const explorer = useExplorer();
-  const { transfers } = useData();
+  const { transfers, status } = useData();
   const { isControllerGte } = useVersion();
 
   const chainId = constants.StarknetChainId.SN_MAIN; // Use mainnet as default
@@ -127,6 +128,22 @@ function ERC20() {
     return isControllerGte("0.5.6");
   }, [isControllerGte]);
 
+  const addresses = useMemo<string[]>(() => {
+    const accounts =
+      transfers?.transfers?.items.flatMap((item) =>
+        item.transfers.reduce(
+          (acc, item) => [
+            ...acc,
+            `0x${BigInt(item.fromAddress).toString(16)}`,
+            `0x${BigInt(item.toAddress).toString(16)}`,
+          ],
+          [] as string[],
+        ),
+      ) ?? [];
+    return Array.from(new Set(accounts));
+  }, [transfers]);
+  const { getUsername } = useUsernames({ addresses });
+
   const txs = useMemo(() => {
     if (!transfers || !token?.metadata?.image) {
       return [];
@@ -147,11 +164,14 @@ function ERC20() {
             transactionHash: transfer.transactionHash,
             amount: value,
             to: transfer.toAddress,
+            toUsername: getUsername(transfer.toAddress),
             from: transfer.fromAddress,
+            fromUsername: getUsername(transfer.fromAddress),
             contractAddress: transfer.contractAddress,
             symbol: transfer.symbol,
             eventId: transfer.eventId,
             date: date,
+            timestamp,
             image,
             action:
               getChecksumAddress(transfer.fromAddress) ===
@@ -161,7 +181,7 @@ function ERC20() {
           };
         });
     });
-  }, [transfers, accountAddress, token?.metadata?.image]);
+  }, [transfers, accountAddress, getUsername, token?.metadata?.image]);
 
   const to = useCallback(
     (transactionHash: string) => {
@@ -185,44 +205,56 @@ function ERC20() {
           chainId={chainId as constants.StarknetChainId}
         />
 
-        <div className="flex flex-col gap-3">
-          {Object.entries(
-            txs
-              .filter((tx) => tx?.symbol === token.metadata.symbol)
-              .reduce(
-                (acc, tx) => {
-                  if (!acc[tx.date]) {
-                    acc[tx.date] = [];
-                  }
-                  acc[tx.date].push(tx);
-                  return acc;
-                },
-                {} as Record<string, typeof txs>,
-              ),
-          ).map(([date, transactions]) => (
-            <div key={date} className="flex flex-col gap-3">
-              <p className="text-foreground-400 font-semibold text-xs py-3 tracking-wider">
-                {date}
-              </p>
-              {transactions.map((item) => (
-                <Link
-                  key={item.key}
-                  to={to(item.transactionHash)}
-                  target="_blank"
-                >
-                  <ActivityTokenCard
-                    amount={item.amount}
-                    // no price available from the oracle for $PAPER
-                    value=""
-                    address={item.action === "send" ? item.to : item.from}
-                    image={token.metadata.image!}
-                    action={item.action}
-                  />
-                </Link>
-              ))}
-            </div>
-          ))}
-        </div>
+        {status === "loading" ? (
+          <LoadingState rowCount={2} />
+        ) : status === "error" || !txs.length ? (
+          <EmptyState />
+        ) : (
+          <div className="flex flex-col gap-2">
+            {Object.entries(
+              txs
+                .filter((tx) => tx?.symbol === token.metadata.symbol)
+                .reduce(
+                  (acc, tx) => {
+                    if (!acc[tx.date]) {
+                      acc[tx.date] = [];
+                    }
+                    acc[tx.date].push(tx);
+                    return acc;
+                  },
+                  {} as Record<string, typeof txs>,
+                ),
+            ).map(([date, transactions]) => (
+              <div key={date} className="flex flex-col gap-2">
+                <p className="text-foreground-400 text-xs font-bold uppercase py-2">
+                  {date}
+                </p>
+                {transactions.map((item) => (
+                  <Link
+                    key={item.key}
+                    to={to(item.transactionHash)}
+                    target="_blank"
+                  >
+                    <ActivityTokenCard
+                      amount={item.amount}
+                      // no price available from the oracle for $PAPER
+                      value=""
+                      address={item.action === "send" ? item.to : item.from}
+                      username={
+                        item.action === "send"
+                          ? item.toUsername
+                          : item.fromUsername
+                      }
+                      image={token.metadata.image!}
+                      action={item.action}
+                      timestamp={item.timestamp}
+                    />
+                  </Link>
+                ))}
+              </div>
+            ))}
+          </div>
+        )}
       </LayoutContent>
 
       {compatibility && controller && (
diff --git a/packages/keychain/src/components/provider/data.tsx b/packages/keychain/src/components/provider/data.tsx
index 7df8e8e3b..2c9b2c8d5 100644
--- a/packages/keychain/src/components/provider/data.tsx
+++ b/packages/keychain/src/components/provider/data.tsx
@@ -5,7 +5,7 @@ import {
   useActivitiesQuery,
   useTransfersQuery,
 } from "@cartridge/ui/utils/api/cartridge";
-import { useAccount } from "@/hooks/account";
+import { useAccount, useUsernames } from "@/hooks/account";
 import { useConnection, useControllerTheme } from "@/hooks/connection";
 import { addAddressPadding, getChecksumAddress } from "starknet";
 import { erc20Metadata } from "@cartridge/presets";
@@ -19,11 +19,13 @@ export interface CardProps {
   transactionHash: string;
   amount: string;
   address: string;
+  username: string;
   value: string;
   name: string;
   collection: string;
   image: string;
   title: string;
+  color: string;
   website: string;
   certified: boolean;
   action: "send" | "receive" | "mint";
@@ -33,22 +35,38 @@ export interface CardProps {
 }
 
 export function DataProvider({ children }: { children: ReactNode }) {
-  const theme = useControllerTheme();
+  const controllerTheme = useControllerTheme();
+  const theme = useMemo(
+    () => ({
+      color:
+        typeof controllerTheme?.colors?.primary == "string"
+          ? (controllerTheme?.colors?.primary as string)
+          : "#ffffff",
+      icon: controllerTheme?.icon ?? "",
+      certified: controllerTheme?.verified ?? false,
+    }),
+    [controllerTheme],
+  );
+
   const [accountAddress, setAccountAddress] = useState<string | undefined>(
     undefined,
   );
 
   const account = useAccount();
-  const address = account?.address || "";
+  const address = useMemo(
+    () => (account ? addAddressPadding(account.address) : ""),
+    [account],
+  );
   const { project } = useConnection();
 
   const projects = useMemo(() => {
     const projects = project ? [project] : [];
-    return projects.map((proejct) => {
+    return projects.map((project) => {
       return {
-        project: proejct,
+        project,
         address,
         limit: 0,
+        date: "",
       };
     });
   }, [project, address]);
@@ -61,7 +79,7 @@ export function DataProvider({ children }: { children: ReactNode }) {
     refetch: refetchTransfers,
   } = useTransfersQuery(
     {
-      projects: projects.map((p) => ({ ...p, date: "" })),
+      projects,
     },
     {
       queryKey: ["transfers", address, project],
@@ -76,7 +94,7 @@ export function DataProvider({ children }: { children: ReactNode }) {
     refetch: refetchTransactions,
   } = useActivitiesQuery(
     {
-      projects,
+      projects: projects.map((p) => ({ ...p, date: undefined })),
     },
     {
       queryKey: ["activities", address, project],
@@ -86,12 +104,27 @@ export function DataProvider({ children }: { children: ReactNode }) {
   );
 
   const status = useMemo(() => {
-    return transfersStatus === "loading" && activitiesStatus === "loading"
+    return transfersStatus === "loading" || activitiesStatus === "loading"
       ? "loading"
-      : transfersStatus === "error" || activitiesStatus === "error"
+      : transfersStatus === "error" && activitiesStatus === "error"
         ? "error"
         : "success";
   }, [transfersStatus, activitiesStatus]);
+  const addresses = useMemo<string[]>(() => {
+    const accounts =
+      transfers?.transfers?.items.flatMap((item) =>
+        item.transfers.reduce(
+          (acc, item) => [
+            ...acc,
+            `0x${BigInt(item.fromAddress).toString(16)}`,
+            `0x${BigInt(item.toAddress).toString(16)}`,
+          ],
+          [] as string[],
+        ),
+      ) ?? [];
+    return Array.from(new Set(accounts));
+  }, [transfers]);
+  const { getUsername } = useUsernames({ addresses });
 
   const erc20s: CardProps[] = useMemo(() => {
     return (
@@ -109,18 +142,26 @@ export function DataProvider({ children }: { children: ReactNode }) {
                   getChecksumAddress(transfer.contractAddress),
               )?.logo_url ||
               makeBlockie(getChecksumAddress(transfer.contractAddress));
-            return {
+            const userAddress =
+              BigInt(transfer.fromAddress) === BigInt(address)
+                ? transfer.toAddress
+                : transfer.fromAddress;
+            const result: CardProps = {
               variant: "token",
               key: `${transfer.transactionHash}-${transfer.eventId}`,
               contractAddress: transfer.contractAddress,
               transactionHash: transfer.transactionHash,
               amount: value,
-              address:
-                BigInt(transfer.fromAddress) === BigInt(address)
-                  ? transfer.toAddress
-                  : transfer.fromAddress,
+              address: userAddress,
+              username: getUsername(userAddress) ?? "",
               value: "$-",
+              name: "",
+              collection: "",
               image: image || "",
+              title: "",
+              color: theme.color,
+              website: "",
+              certified: theme.certified,
               action:
                 BigInt(transfer.fromAddress) === 0n
                   ? "mint"
@@ -129,11 +170,12 @@ export function DataProvider({ children }: { children: ReactNode }) {
                     : "receive",
               timestamp: timestamp / 1000,
               date: date,
-            } as CardProps;
+            };
+            return result;
           }),
       ) || []
     );
-  }, [transfers, address]);
+  }, [transfers, address, getUsername, theme]);
 
   const erc721s: CardProps[] = useMemo(() => {
     return (
@@ -157,20 +199,26 @@ export function DataProvider({ children }: { children: ReactNode }) {
                   attribute?.trait?.toLowerCase() === "name",
               )?.value || metadata.name;
             const image = `https://api.cartridge.gg/x/${item.meta.project}/torii/static/${addAddressPadding(transfer.contractAddress)}/${transfer.tokenId}/image`;
-            return {
+            const userAddress =
+              BigInt(transfer.fromAddress) === BigInt(address)
+                ? transfer.toAddress
+                : transfer.fromAddress;
+            const result: CardProps = {
               variant: "collectible",
               key: `${transfer.transactionHash}-${transfer.eventId}`,
               contractAddress: transfer.contractAddress,
               transactionHash: transfer.transactionHash,
-              name: name || "",
-              collection: transfer.name,
               amount: "",
-              address:
-                BigInt(transfer.fromAddress) === BigInt(address)
-                  ? transfer.toAddress
-                  : transfer.fromAddress,
+              address: userAddress,
+              username: getUsername(userAddress) ?? "",
               value: "",
+              name: name || "",
+              collection: transfer.name,
               image: image,
+              title: "",
+              color: theme.color,
+              website: "",
+              certified: theme.certified,
               action:
                 BigInt(transfer.fromAddress) === 0n
                   ? "mint"
@@ -179,11 +227,12 @@ export function DataProvider({ children }: { children: ReactNode }) {
                     : "receive",
               timestamp: timestamp / 1000,
               date: date,
-            } as CardProps;
+            };
+            return result;
           });
       }) || []
     );
-  }, [transfers, address]);
+  }, [transfers, address, getUsername, theme]);
 
   const actions: CardProps[] = useMemo(() => {
     return (
@@ -192,18 +241,27 @@ export function DataProvider({ children }: { children: ReactNode }) {
           ({ transactionHash, contractAddress, entrypoint, executedAt }) => {
             const timestamp = new Date(executedAt).getTime();
             const date = getDate(timestamp);
-            return {
+            const result: CardProps = {
               variant: "game",
               key: `${transactionHash}-${entrypoint}`,
               contractAddress: contractAddress,
               transactionHash: transactionHash,
+              amount: "",
+              address: "",
+              username: "",
+              value: "",
+              name: "",
+              collection: "",
+              image: theme.icon,
               title: entrypoint.replace(/_/g, " "),
-              image: theme?.icon || "",
+              color: theme.color,
               website: "",
-              certified: false,
+              certified: theme.certified,
+              action: "mint",
               timestamp: timestamp / 1000,
               date: date,
-            } as CardProps;
+            };
+            return result;
           },
         ),
       ) || []
@@ -215,27 +273,30 @@ export function DataProvider({ children }: { children: ReactNode }) {
       .filter((item) => item.completed)
       .map((item) => {
         const date = getDate(item.timestamp * 1000);
-        return {
+        const result: CardProps = {
           variant: "achievement",
           key: item.id,
-          transactionHash: "",
           contractAddress: "",
-          title: item.title,
-          image: item.icon,
-          timestamp: item.timestamp,
-          date: date,
-          website: "",
-          certified: false,
-          points: item.earning,
+          transactionHash: "",
           amount: "",
           address: "",
+          username: "",
           value: "",
           name: "",
           collection: "",
+          image: item.icon,
+          title: item.title,
+          color: theme.color,
+          website: "",
+          certified: theme.certified,
           action: "mint",
-        } as CardProps;
+          timestamp: item.timestamp,
+          date: date,
+          points: item.earning,
+        };
+        return result;
       });
-  }, [trophies]);
+  }, [trophies, theme]);
 
   const events = useMemo(() => {
     return [...erc20s, ...erc721s, ...actions, ...achievements].sort(
diff --git a/packages/keychain/src/hooks/account.ts b/packages/keychain/src/hooks/account.ts
index 99bd3479d..110fbdbb5 100644
--- a/packages/keychain/src/hooks/account.ts
+++ b/packages/keychain/src/hooks/account.ts
@@ -11,7 +11,7 @@ import {
   useAddressByUsernameQuery,
 } from "@cartridge/ui/utils/api/cartridge";
 import base64url from "base64url";
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useMatch, useSearchParams } from "react-router-dom";
 import { constants, getChecksumAddress } from "starknet";
 import { useConnection } from "./connection";
@@ -271,12 +271,29 @@ export function useUsernames({ addresses }: { addresses: string[] }) {
     { enabled: addresses.length > 0 },
   );
 
-  return {
-    usernames:
+  const usernames = useMemo(() => {
+    return (
       data?.accounts?.edges?.map((edge) => ({
         username: edge?.node?.username,
         address: edge?.node?.controllers?.edges?.[0]?.node?.address,
-      })) ?? [],
+      })) ?? []
+    );
+  }, [data]);
+
+  const getUsername = useCallback(
+    (adress: string | null | undefined) => {
+      return !adress
+        ? undefined
+        : usernames.find(
+            (user) => BigInt(user.address ?? "0x0") === BigInt(adress),
+          )?.username;
+    },
+    [usernames],
+  );
+
+  return {
+    usernames,
+    getUsername,
   };
 }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9e299f513..6f4f066f4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,7 +16,7 @@ catalogs:
       specifier: ^6.2.4
       version: 6.2.4
     '@cartridge/ui':
-      specifier: github:cartridge-gg/ui#e5405d6
+      specifier: github:cartridge-gg/ui#431fb6f
       version: 0.7.14-alpha.2
     '@eslint/js':
       specifier: ^9.18.0
@@ -165,8 +165,8 @@ importers:
         specifier: github:cartridge-gg/presets#c064e82
         version: https://codeload.github.com/cartridge-gg/presets/tar.gz/c064e82
       '@cartridge/ui':
-        specifier: github:cartridge-gg/ui#e5405d6
-        version: https://codeload.github.com/cartridge-gg/ui/tar.gz/e5405d6(@types/react-dom@18.3.7(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sonner@2.0.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(starknet@8.5.4)(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.11.24(@swc/helpers@0.5.17))(@types/node@16.18.11)(typescript@5.8.3)))(viem@2.28.1(bufferutil@4.0.9)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.24.4))
+        specifier: 'catalog:'
+        version: https://codeload.github.com/cartridge-gg/ui/tar.gz/431fb6f(@types/react-dom@18.3.7(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sonner@2.0.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(starknet@8.5.4)(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.11.24(@swc/helpers@0.5.17))(@types/node@16.18.11)(typescript@5.8.3)))(viem@2.28.1(bufferutil@4.0.9)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.24.4))
       '@graphql-codegen/cli':
         specifier: ^2.6.2
         version: 2.16.5(@babel/core@7.27.1)(@swc/core@1.11.24(@swc/helpers@0.5.17))(@types/node@16.18.11)(bufferutil@4.0.9)(encoding@0.1.13)(graphql@16.12.0)(typescript@5.8.3)(utf-8-validate@5.0.10)
@@ -246,7 +246,7 @@ importers:
         version: link:../../packages/controller
       '@cartridge/ui':
         specifier: 'catalog:'
-        version: https://codeload.github.com/cartridge-gg/ui/tar.gz/e5405d6(@types/react-dom@18.3.7(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sonner@2.0.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(starknet@8.5.4)(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.11.24(@swc/helpers@0.5.17))(@types/node@18.19.87)(typescript@5.8.3)))(viem@2.28.1(bufferutil@4.0.9)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.24.4))
+        version: https://codeload.github.com/cartridge-gg/ui/tar.gz/431fb6f(@types/react-dom@18.3.7(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sonner@2.0.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(starknet@8.5.4)(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.11.24(@swc/helpers@0.5.17))(@types/node@18.19.87)(typescript@5.8.3)))(viem@2.28.1(bufferutil@4.0.9)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.24.4))
       '@starknet-react/chains':
         specifier: ^5.0.1
         version: 5.0.1
@@ -497,7 +497,7 @@ importers:
         version: 5.14.0(rollup@4.40.2)
       ts-jest:
         specifier: ^29.2.5
-        version: 29.3.2(@babel/core@7.27.1)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.27.1))(esbuild@0.25.4)(jest@29.7.0(@types/node@18.19.87)(ts-node@10.9.2(@swc/core@1.11.24(@swc/helpers@0.5.17))(@types/node@18.19.87)(typescript@5.8.3)))(typescript@5.8.3)
+        version: 29.3.2(@babel/core@7.27.1)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.27.1))(jest@29.7.0(@types/node@18.19.87)(ts-node@10.9.2(@swc/core@1.11.24(@swc/helpers@0.5.17))(@types/node@18.19.87)(typescript@5.8.3)))(typescript@5.8.3)
       tsup:
         specifier: 'catalog:'
         version: 8.4.0(@microsoft/api-extractor@7.52.6(@types/node@18.19.87))(@swc/core@1.11.24(@swc/helpers@0.5.17))(jiti@1.21.7)(postcss@8.5.3)(tsx@4.19.4)(typescript@5.8.3)(yaml@2.7.1)
@@ -570,7 +570,7 @@ importers:
         version: 6.2.4
       '@cartridge/ui':
         specifier: 'catalog:'
-        version: https://codeload.github.com/cartridge-gg/ui/tar.gz/e5405d6(@types/react-dom@18.3.7(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sonner@2.0.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(starknet@8.5.4)(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.11.24(@swc/helpers@0.5.17))(@types/node@18.19.87)(typescript@5.8.3)))(viem@2.28.1(bufferutil@4.0.9)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.24.4))
+        version: https://codeload.github.com/cartridge-gg/ui/tar.gz/431fb6f(@types/react-dom@18.3.7(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sonner@2.0.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(starknet@8.5.4)(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.11.24(@swc/helpers@0.5.17))(@types/node@18.19.87)(typescript@5.8.3)))(viem@2.28.1(bufferutil@4.0.9)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.24.4))
       '@dojoengine/sdk':
         specifier: 1.8.12
         version: 1.8.12(@effect/platform@0.93.8(effect@3.19.8))(@opentelemetry/semantic-conventions@1.38.0)(@tanstack/react-query@5.75.0(react@18.3.1))(@types/react-dom@18.3.7(@types/react@18.3.20))(@types/react@18.3.20)(bufferutil@4.0.9)(get-starknet-core@4.0.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(starknet@8.5.4)(typescript@5.8.3)(use-sync-external-store@1.6.0(react@18.3.1))(utf-8-validate@5.0.10)(zod@3.24.4)
@@ -1272,8 +1272,8 @@ packages:
     resolution: {tarball: https://codeload.github.com/cartridge-gg/presets/tar.gz/c064e82}
     version: 0.0.1
 
-  '@cartridge/ui@https://codeload.github.com/cartridge-gg/ui/tar.gz/e5405d6':
-    resolution: {tarball: https://codeload.github.com/cartridge-gg/ui/tar.gz/e5405d6}
+  '@cartridge/ui@https://codeload.github.com/cartridge-gg/ui/tar.gz/431fb6f':
+    resolution: {tarball: https://codeload.github.com/cartridge-gg/ui/tar.gz/431fb6f}
     version: 0.7.14-alpha.2
     peerDependencies:
       react: ^18.2.0 || ^19.0.0
@@ -11243,7 +11243,7 @@ snapshots:
     dependencies:
       '@starknet-io/types-js': 0.8.4
 
-  '@cartridge/ui@https://codeload.github.com/cartridge-gg/ui/tar.gz/e5405d6(@types/react-dom@18.3.7(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sonner@2.0.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(starknet@8.5.4)(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.11.24(@swc/helpers@0.5.17))(@types/node@16.18.11)(typescript@5.8.3)))(viem@2.28.1(bufferutil@4.0.9)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.24.4))':
+  '@cartridge/ui@https://codeload.github.com/cartridge-gg/ui/tar.gz/431fb6f(@types/react-dom@18.3.7(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sonner@2.0.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(starknet@8.5.4)(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.11.24(@swc/helpers@0.5.17))(@types/node@16.18.11)(typescript@5.8.3)))(viem@2.28.1(bufferutil@4.0.9)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.24.4))':
     dependencies:
       '@cartridge/presets': https://codeload.github.com/cartridge-gg/presets/tar.gz/90a5fe0
       '@radix-ui/react-accordion': 1.2.1(@types/react-dom@18.3.7(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -11288,7 +11288,7 @@ snapshots:
       - react-native
       - tailwindcss
 
-  '@cartridge/ui@https://codeload.github.com/cartridge-gg/ui/tar.gz/e5405d6(@types/react-dom@18.3.7(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sonner@2.0.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(starknet@8.5.4)(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.11.24(@swc/helpers@0.5.17))(@types/node@18.19.87)(typescript@5.8.3)))(viem@2.28.1(bufferutil@4.0.9)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.24.4))':
+  '@cartridge/ui@https://codeload.github.com/cartridge-gg/ui/tar.gz/431fb6f(@types/react-dom@18.3.7(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sonner@2.0.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(starknet@8.5.4)(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.11.24(@swc/helpers@0.5.17))(@types/node@18.19.87)(typescript@5.8.3)))(viem@2.28.1(bufferutil@4.0.9)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.24.4))':
     dependencies:
       '@cartridge/presets': https://codeload.github.com/cartridge-gg/presets/tar.gz/90a5fe0
       '@radix-ui/react-accordion': 1.2.1(@types/react-dom@18.3.7(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -22090,7 +22090,7 @@ snapshots:
 
   ts-interface-checker@0.1.13: {}
 
-  ts-jest@29.3.2(@babel/core@7.27.1)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.27.1))(esbuild@0.25.4)(jest@29.7.0(@types/node@18.19.87)(ts-node@10.9.2(@swc/core@1.11.24(@swc/helpers@0.5.17))(@types/node@18.19.87)(typescript@5.8.3)))(typescript@5.8.3):
+  ts-jest@29.3.2(@babel/core@7.27.1)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.27.1))(jest@29.7.0(@types/node@18.19.87)(ts-node@10.9.2(@swc/core@1.11.24(@swc/helpers@0.5.17))(@types/node@18.19.87)(typescript@5.8.3)))(typescript@5.8.3):
     dependencies:
       bs-logger: 0.2.6
       ejs: 3.1.10
@@ -22109,7 +22109,6 @@ snapshots:
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
       babel-jest: 29.7.0(@babel/core@7.27.1)
-      esbuild: 0.25.4
 
   ts-log@2.2.7: {}
 
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index a3ae26dfd..6172acd56 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -8,7 +8,7 @@ catalog:
   "@cartridge/arcade": "0.3.12"
   "@cartridge/controller-wasm": "0.9.4"
   "@cartridge/penpal": "^6.2.4"
-  "@cartridge/ui": "github:cartridge-gg/ui#e5405d6"
+  "@cartridge/ui": "github:cartridge-gg/ui#431fb6f"
   "@eslint/js": "^9.18.0"
   "@noble/curves": "^1.9.0"
   "@noble/hashes": "^1.8.0"