diff --git a/packages/dappkit b/packages/dappkit
index 49cb1b4e..cc2714c1 160000
--- a/packages/dappkit
+++ b/packages/dappkit
@@ -1 +1 @@
-Subproject commit 49cb1b4e4696c5688d18a287728ea0a8fc6b4811
+Subproject commit cc2714c1df79c1c06eafbddace823a2fbba84cd5
diff --git a/src/api/services/chain.service.ts b/src/api/services/chain.service.ts
index b5b6f5f8..ab4b2450 100644
--- a/src/api/services/chain.service.ts
+++ b/src/api/services/chain.service.ts
@@ -1,12 +1,13 @@
 import type { Chain } from "@merkl/api";
 import { api } from "../index.server";
+import { fetchWithLogs } from "../utils";
 
 export abstract class ChainService {
-  static async #fetch<R, T extends { data: R; status: number }>(
+  static async #fetch<R, T extends { data: R; status: number; response: Response }>(
     call: () => Promise<T>,
     resource = "Chain",
   ): Promise<NonNullable<T["data"]>> {
-    const { data, status } = await call();
+    const { data, status } = await fetchWithLogs(call);
 
     if (status === 404) throw new Response(`${resource} not found`, { status });
     if (status === 500) throw new Response(`${resource} unavailable`, { status });
@@ -14,7 +15,7 @@ export abstract class ChainService {
     return data;
   }
 
-  static async getAll(): Promise<Chain[]> {
+  static async getAll() {
     const chains = await ChainService.#fetch(async () => api.v4.chains.index.get({ query: {} }));
 
     //TODO: add some cache here
diff --git a/src/api/services/opportunity.service.ts b/src/api/services/opportunity.service.ts
index ae4ca252..6ef58452 100644
--- a/src/api/services/opportunity.service.ts
+++ b/src/api/services/opportunity.service.ts
@@ -1,13 +1,14 @@
 import type { Opportunity } from "@merkl/api";
 import config from "merkl.config";
 import { api } from "../index.server";
+import { fetchWithLogs } from "../utils";
 
 export abstract class OpportunityService {
-  static async #fetch<R, T extends { data: R; status: number }>(
+  static async #fetch<R, T extends { data: R; status: number; response: Response }>(
     call: () => Promise<T>,
     resource = "Opportunity",
   ): Promise<NonNullable<T["data"]>> {
-    const { data, status } = await call();
+    const { data, status } = await fetchWithLogs(call);
 
     if (status === 404) throw new Response(`${resource} not found`, { status });
     if (status === 500) throw new Response(`${resource} unavailable`, { status });
diff --git a/src/api/services/protocol.service.ts b/src/api/services/protocol.service.ts
index e3446108..8d405643 100644
--- a/src/api/services/protocol.service.ts
+++ b/src/api/services/protocol.service.ts
@@ -1,12 +1,13 @@
 import type { Protocol } from "@merkl/api";
 import { api } from "../index.server";
+import { fetchWithLogs } from "../utils";
 
 export abstract class ProtocolService {
-  static async #fetch<R, T extends { data: R; status: number }>(
+  static async #fetch<R, T extends { data: R; status: number; response: Response }>(
     call: () => Promise<T>,
     resource = "Protocol",
   ): Promise<NonNullable<T["data"]>> {
-    const { data, status } = await call();
+    const { data, status } = await fetchWithLogs(call);
 
     if (status === 404) throw new Response(`${resource} not found`, { status });
     if (status === 500) throw new Response(`${resource} unavailable`, { status });
diff --git a/src/api/services/reward.service.ts b/src/api/services/reward.service.ts
index a3bdb278..8f58df16 100644
--- a/src/api/services/reward.service.ts
+++ b/src/api/services/reward.service.ts
@@ -1,12 +1,13 @@
 import type { Reward } from "@merkl/api";
 import { api } from "../index.server";
+import { fetchWithLogs } from "../utils";
 
 export abstract class RewardService {
-  static async #fetch<R, T extends { data: R; status: number }>(
+  static async #fetch<R, T extends { data: R; status: number; response: Response }>(
     call: () => Promise<T>,
     resource = "Reward",
   ): Promise<NonNullable<T["data"]>> {
-    const { data, status } = await call();
+    const { data, status } = await fetchWithLogs(call);
 
     if (status === 404) throw new Response(`${resource} not found`, { status });
     if (status === 500) throw new Response(`${resource} unavailable`, { status });
diff --git a/src/api/services/token.service.ts b/src/api/services/token.service.ts
index 2f6767d7..b092303e 100644
--- a/src/api/services/token.service.ts
+++ b/src/api/services/token.service.ts
@@ -1,12 +1,13 @@
 import type { Token } from "@merkl/api";
 import { api } from "../index.server";
+import { fetchWithLogs } from "../utils";
 
 export abstract class TokenService {
-  static async #fetch<R, T extends { data: R; status: number }>(
+  static async #fetch<R, T extends { data: R; status: number; response: Response }>(
     call: () => Promise<T>,
     resource = "Token",
   ): Promise<NonNullable<T["data"]>> {
-    const { data, status } = await call();
+    const { data, status } = await fetchWithLogs(call);
 
     if (status === 404) throw new Response(`${resource} not found`, { status });
     if (status === 500) throw new Response(`${resource} unavailable`, { status });
diff --git a/src/api/utils.ts b/src/api/utils.ts
new file mode 100644
index 00000000..44e02cff
--- /dev/null
+++ b/src/api/utils.ts
@@ -0,0 +1,34 @@
+import chalk from "chalk";
+
+function logStatus(status: number) {
+  if (status === 200) return chalk.green(`[${status}]`);
+  if (status < 500) return chalk.yellow(`[${status}]`);
+  return chalk.red(`[${status}]`);
+}
+
+function logPerformance(ms: number) {
+  if (ms < 100) return chalk.green(`[${Math.round(ms)}ms]`);
+  if (ms < 500) return chalk.yellow(`[${Math.round(ms)}ms]`);
+  return chalk.red(`[${Math.round(ms)}ms]`);
+}
+
+function logSize(bytes: number) {
+  const kb = Math.round(bytes / 1000);
+
+  return `[${kb}kb]`;
+}
+
+export async function fetchWithLogs<R, T extends { data: R; status: number; response: Response }>(
+  call: () => Promise<T>,
+) {
+  const start = performance.now();
+  const response = await call();
+  const end = performance.now() - start;
+
+  process.env.NODE_ENV === "development" &&
+    console.log(
+      `${logStatus(response.status)}${logPerformance(end)}${logSize(+(response.response.headers.get("content-length") ?? 0))}: ${response.response.url}`,
+    );
+
+  return response;
+}
diff --git a/src/components/element/Tag.tsx b/src/components/element/Tag.tsx
index 8a3da624..c78ac718 100644
--- a/src/components/element/Tag.tsx
+++ b/src/components/element/Tag.tsx
@@ -1,7 +1,8 @@
-import type { Opportunity, Token } from "@angleprotocol/merkl-api";
+import type { Opportunity, Token } from "@merkl/api";
 import type { Chain } from "@merkl/api";
 import { Button, Divider, Dropdown, Group, Hash, Icon, PrimitiveTag, Text } from "dappkit";
 import type { ButtonProps } from "dappkit";
+import { useWalletContext } from "packages/dappkit/src/context/Wallet.context";
 import { type Action, actions } from "src/config/actions";
 import type { Protocol } from "src/config/protocols";
 import { statuses } from "src/config/status";
@@ -25,6 +26,8 @@ export type TagProps<T extends keyof TagTypes> = ButtonProps & {
 };
 
 export default function Tag<T extends keyof TagTypes>({ type, value, ...props }: TagProps<T>) {
+  const { chains } = useWalletContext();
+
   switch (type) {
     case "status": {
       const status = statuses[value as TagTypes["status"]] ?? statuses.LIVE;
@@ -153,10 +156,21 @@ export default function Tag<T extends keyof TagTypes>({ type, value, ...props }:
                   <Icon remix="RiArrowRightLine" />
                   {token?.symbol} on Merkl
                 </Button>
-                <Button size="xs" look="soft">
-                  <Icon remix="RiArrowRightLine" />
-                  {token?.symbol} on Etherscan
-                </Button>
+                {chains
+                  .find(c => c.id === token.chainId)
+                  ?.explorers?.map(explorer => {
+                    return (
+                      <Button
+                        key={`${explorer.url}`}
+                        to={`${explorer.url}/token/${token.address}`}
+                        external
+                        size="xs"
+                        look="soft">
+                        <Icon remix="RiArrowRightLine" />
+                        {token?.symbol} on Etherscan
+                      </Button>
+                    );
+                  })}
               </Group>
             </Group>
           }>
diff --git a/src/routes/_merkl.(home).tsx b/src/routes/_merkl.(home).tsx
index 9ed43004..07c91a44 100644
--- a/src/routes/_merkl.(home).tsx
+++ b/src/routes/_merkl.(home).tsx
@@ -1,35 +1,11 @@
 import type { MetaFunction } from "@remix-run/node";
 import { Outlet } from "@remix-run/react";
 import Hero from "src/components/composite/Hero";
-import { http, createConfig } from "wagmi";
-import { mainnet, sepolia } from "wagmi/chains";
-import { coinbaseWallet, walletConnect } from "wagmi/connectors";
 
 export const meta: MetaFunction = () => {
-  return [{ title: "New Remix App" }, { name: "description", content: "Welcome to Remix!" }];
+  return [{ title: "Merkl" }];
 };
 
-export const config = createConfig({
-  chains: [mainnet, sepolia],
-  connectors: [
-    coinbaseWallet(),
-    walletConnect({
-      customStoragePrefix: "wagmi",
-      projectId: "26c912aadd2132cd869a5edc00aeea0f",
-      metadata: {
-        name: "Example",
-        description: "Example website",
-        url: "https://example.com",
-        icons: [],
-      },
-    }),
-  ],
-  transports: {
-    [mainnet.id]: http(),
-    [sepolia.id]: http(),
-  },
-});
-
 export default function Index() {
   return (
     <Hero
diff --git a/src/routes/_merkl.chains.$id.tsx b/src/routes/_merkl.chains.$id.tsx
index b24dd2a0..b8def26a 100644
--- a/src/routes/_merkl.chains.$id.tsx
+++ b/src/routes/_merkl.chains.$id.tsx
@@ -1,4 +1,4 @@
-import { type LoaderFunctionArgs, json } from "@remix-run/node";
+import { type LoaderFunctionArgs, type MetaFunction, json } from "@remix-run/node";
 import { Outlet, useLoaderData, useRouteError } from "@remix-run/react";
 import { Group, Title } from "dappkit";
 import { ChainService } from "src/api/services/chain.service";
@@ -10,6 +10,10 @@ export async function loader({ params: { id } }: LoaderFunctionArgs) {
   return json({ chain });
 }
 
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  return [{ title: `${data?.chain?.name} on Merkl` }];
+};
+
 export default function Index() {
   const { chain } = useLoaderData<typeof loader>();
   const label = chain.name.toLowerCase();
diff --git a/src/routes/_merkl.chains.(all).tsx b/src/routes/_merkl.chains.(all).tsx
index c7e8b85c..9079df71 100644
--- a/src/routes/_merkl.chains.(all).tsx
+++ b/src/routes/_merkl.chains.(all).tsx
@@ -1,6 +1,11 @@
+import type { MetaFunction } from "@remix-run/node";
 import { Outlet } from "@remix-run/react";
 import Hero from "src/components/composite/Hero";
 
+export const meta: MetaFunction = () => {
+  return [{ title: "Chains on Merkl" }];
+};
+
 export default function Index() {
   return (
     <Hero
diff --git a/src/routes/_merkl.opportunities.$chain.$type.$id.tsx b/src/routes/_merkl.opportunities.$chain.$type.$id.tsx
index 67578d3b..06f1c62e 100644
--- a/src/routes/_merkl.opportunities.$chain.$type.$id.tsx
+++ b/src/routes/_merkl.opportunities.$chain.$type.$id.tsx
@@ -25,7 +25,7 @@ export async function loader({ params: { id, type, chain: chainId } }: LoaderFun
 
 export const meta: MetaFunction<typeof loader> = ({ data, error }) => {
   if (error) return [{ title: error }];
-  return [{ title: `${data?.name} on Merkl` }];
+  return [{ title: `${data?.opportunity.name} on Merkl` }];
 };
 
 export type OutletContextOpportunity = {
diff --git a/src/routes/_merkl.opportunity.$chain.$type.$id.tsx b/src/routes/_merkl.opportunity.$chain.$type.$id.tsx
deleted file mode 100644
index 67578d3b..00000000
--- a/src/routes/_merkl.opportunity.$chain.$type.$id.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import type { Opportunity } from "@angleprotocol/merkl-api";
-import { type LoaderFunctionArgs, type MetaFunction, json } from "@remix-run/node";
-import { Meta, Outlet, useLoaderData } from "@remix-run/react";
-import { useMemo } from "react";
-import { ChainService } from "src/api/services/chain.service";
-import { OpportunityService } from "src/api/services/opportunity.service";
-import Hero from "src/components/composite/Hero";
-import Tag from "src/components/element/Tag";
-import { ErrorHeading } from "src/components/layout/ErrorHeading";
-import useOpportunity from "src/hooks/resources/useOpportunity";
-
-export async function loader({ params: { id, type, chain: chainId } }: LoaderFunctionArgs) {
-  if (!chainId || !id || !type) throw "";
-
-  const chain = await ChainService.get({ search: chainId });
-
-  const opportunity = await OpportunityService.getCampaignsByParams({
-    chainId: chain.id,
-    type: type,
-    identifier: id,
-  });
-
-  return json({ opportunity });
-}
-
-export const meta: MetaFunction<typeof loader> = ({ data, error }) => {
-  if (error) return [{ title: error }];
-  return [{ title: `${data?.name} on Merkl` }];
-};
-
-export type OutletContextOpportunity = {
-  opportunity: Opportunity;
-};
-
-export default function Index() {
-  const { opportunity } = useLoaderData<typeof loader>();
-  const { tags, description, link } = useOpportunity(opportunity);
-
-  const styleName = useMemo(() => {
-    const spaced = opportunity?.name.split(" ");
-
-    return spaced
-      .map(str => {
-        const key = str + crypto.randomUUID();
-        if (!str.match(/[\p{Letter}\p{Mark}]+/gu))
-          return [
-            <span key={key} className="text-main-11">
-              {str}
-            </span>,
-          ];
-        if (str.includes("-"))
-          return str
-            .split("-")
-            .flatMap((s, i, arr) => [s, i !== arr.length - 1 && <span className="text-main-11">-</span>]);
-        if (str.includes("/"))
-          return str
-            .split("/")
-            .flatMap((s, i, arr) => [s, i !== arr.length - 1 && <span className="text-main-11">/</span>]);
-        return [<span key={key}>{str}</span>];
-      })
-      .flatMap((str, index, arr) => [str, index !== arr.length - 1 && " "]);
-  }, [opportunity]);
-
-  return (
-    <>
-      <Meta />
-      <Hero
-        icons={opportunity.tokens.map(t => ({ src: t.icon }))}
-        breadcrumbs={[
-          { link: "/", name: "Opportunities" },
-          { link: "/", name: opportunity.name },
-        ]}
-        title={styleName}
-        description={description}
-        tabs={[
-          { label: "Overview", link },
-          { label: "Leaderboard", link: `${link}/leaderboard` },
-        ]}
-        tags={tags.map(tag => <Tag key={`${tag.type}_${tag.value?.address ?? tag.value}`} {...tag} size="md" />)}
-        opportunity={opportunity}>
-        <Outlet context={{ opportunity }} />
-      </Hero>
-    </>
-  );
-}
-
-export function ErrorBoundary() {
-  return <ErrorHeading />;
-}
diff --git a/src/routes/_merkl.protocols.$id.tsx b/src/routes/_merkl.protocols.$id.tsx
index cc5b51a5..dc93af55 100644
--- a/src/routes/_merkl.protocols.$id.tsx
+++ b/src/routes/_merkl.protocols.$id.tsx
@@ -1,4 +1,4 @@
-import { type LoaderFunctionArgs, json } from "@remix-run/node";
+import { type LoaderFunctionArgs, type MetaFunction, json } from "@remix-run/node";
 import { Outlet, useLoaderData } from "@remix-run/react";
 import { ProtocolService } from "src/api/services/protocol.service";
 import Hero from "src/components/composite/Hero";
@@ -9,6 +9,12 @@ export async function loader({ params: { id } }: LoaderFunctionArgs) {
   return json({ protocol });
 }
 
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  if (!data?.protocol) return [{ title: "Merkl" }];
+
+  return [{ title: `${data?.protocol?.name} on Merkl` }];
+};
+
 export default function Index() {
   const { protocol } = useLoaderData<typeof loader>();
 
diff --git a/src/routes/_merkl.protocols.(all).tsx b/src/routes/_merkl.protocols.(all).tsx
index c4c38afb..11eb1406 100644
--- a/src/routes/_merkl.protocols.(all).tsx
+++ b/src/routes/_merkl.protocols.(all).tsx
@@ -1,6 +1,11 @@
+import type { MetaFunction } from "@remix-run/node";
 import { Outlet } from "@remix-run/react";
 import Hero from "src/components/composite/Hero";
 
+export const meta: MetaFunction = () => {
+  return [{ title: "Protocols on Merkl" }];
+};
+
 export default function Index() {
   return (
     <Hero
diff --git a/src/routes/_merkl.status.$status.tsx b/src/routes/_merkl.status.$status.tsx
index 6aa5b50c..0884490a 100644
--- a/src/routes/_merkl.status.$status.tsx
+++ b/src/routes/_merkl.status.$status.tsx
@@ -1,4 +1,4 @@
-import { type LoaderFunctionArgs, json } from "@remix-run/node";
+import { type LoaderFunctionArgs, type MetaFunction, json } from "@remix-run/node";
 import { Outlet, useLoaderData } from "@remix-run/react";
 import Hero from "src/components/composite/Hero";
 import { type Status, getStatus, statuses } from "src/config/status";
@@ -11,6 +11,14 @@ export async function loader({ params: { status: _status } }: LoaderFunctionArgs
   return json({ status });
 }
 
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  if (!data?.status) return [{ title: "Merkl" }];
+
+  const status = data.status.charAt(0).toUpperCase() + data.status.slice(1).toLowerCase();
+
+  return [{ title: `${status} opportunities on Merkl` }];
+};
+
 export default function Index() {
   const { status: _status } = useLoaderData<typeof loader>();
   const status = statuses[_status as Status];
diff --git a/src/routes/_merkl.tokens.$symbol.tsx b/src/routes/_merkl.tokens.$symbol.tsx
index 130dded9..60c7f08d 100644
--- a/src/routes/_merkl.tokens.$symbol.tsx
+++ b/src/routes/_merkl.tokens.$symbol.tsx
@@ -1,4 +1,4 @@
-import { type LoaderFunctionArgs, json } from "@remix-run/node";
+import { type LoaderFunctionArgs, type MetaFunction, json } from "@remix-run/node";
 import { Outlet, useLoaderData } from "@remix-run/react";
 import { useMemo } from "react";
 import { ChainService } from "src/api/services/chain.service";
@@ -15,6 +15,14 @@ export async function loader({ params: { symbol } }: LoaderFunctionArgs) {
   return json({ tokens, chains });
 }
 
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  const symbol = data?.tokens?.[0]?.symbol;
+
+  if (!symbol) return [{ title: "Merkl" }];
+
+  return [{ title: `${symbol} on Merkl` }];
+};
+
 export default function Index() {
   const { tokens, chains } = useLoaderData<typeof loader>();
   const token = tokens?.[0];
@@ -41,8 +49,8 @@ export default function Index() {
   return (
     <Hero
       breadcrumbs={[
-        { link: "/token", name: "Tokens" },
-        { link: `/token/${tokens?.[0]?.symbol}`, name: tokens?.[0]?.symbol },
+        { link: "/tokens", name: "Tokens" },
+        { link: `/tokens/${tokens?.[0]?.symbol}`, name: tokens?.[0]?.symbol },
       ]}
       icons={[{ src: tokens.find(t => t.icon && t.icon !== "")?.icon }]}
       navigation={{ label: "Back to opportunities", link: "/" }}
@@ -55,7 +63,7 @@ export default function Index() {
       tabs={[
         {
           label: "Opportunities",
-          link: `/token/${token.symbol?.toLowerCase()}`,
+          link: `/tokens/${token.symbol?.toLowerCase()}`,
         },
       ]}
       tags={tags.map(tag => <Tag key={`${tag.type}_${tag.value?.address ?? tag.value}`} {...tag} size="lg" />)}>
diff --git a/src/routes/_merkl.tokens.(all).tsx b/src/routes/_merkl.tokens.(all).tsx
index e12d9d27..08306789 100644
--- a/src/routes/_merkl.tokens.(all).tsx
+++ b/src/routes/_merkl.tokens.(all).tsx
@@ -1,6 +1,11 @@
+import type { MetaFunction } from "@remix-run/node";
 import { Outlet } from "@remix-run/react";
 import Hero from "src/components/composite/Hero";
 
+export const meta: MetaFunction = () => {
+  return [{ title: "Tokens on Merkl" }];
+};
+
 export default function Index() {
   return (
     <Hero
diff --git a/src/routes/_merkl.users.$address.(rewards).tsx b/src/routes/_merkl.users.$address.(rewards).tsx
index ad94dac3..f902c6e6 100644
--- a/src/routes/_merkl.users.$address.(rewards).tsx
+++ b/src/routes/_merkl.users.$address.(rewards).tsx
@@ -1,15 +1,13 @@
 import type { LoaderFunctionArgs } from "@remix-run/node";
 import { json, useLoaderData } from "@remix-run/react";
 import { Container, Space } from "dappkit";
-import { api } from "src/api/index.server";
+import { RewardService } from "src/api/services/reward.service";
 import ClaimRewardsLibrary from "src/components/element/rewards/ClaimRewardsLibrary";
 
 export async function loader({ params: { address } }: LoaderFunctionArgs) {
   if (!address) throw "";
 
-  const { data: rewards } = await api.v4.users({ address }).rewards.full.get({ query: {} });
-
-  if (!rewards) throw "";
+  const rewards = await RewardService.getForUser(address);
 
   return json({ rewards, address });
 }
diff --git a/src/routes/_merkl.users.$address.tsx b/src/routes/_merkl.users.$address.tsx
index 7f06a44d..044f7840 100644
--- a/src/routes/_merkl.users.$address.tsx
+++ b/src/routes/_merkl.users.$address.tsx
@@ -1,42 +1,73 @@
-import { Outlet, useParams } from "@remix-run/react";
-import { Button, Group, Hash, Icon, Text } from "dappkit";
-import { useState } from "react";
+import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
+import { Outlet, json, useLoaderData } from "@remix-run/react";
+import { Button, Group, Hash, Icon, Text, Value } from "dappkit";
+import { useMemo, useState } from "react";
+import { RewardService } from "src/api/services/reward.service";
 import Hero from "src/components/composite/Hero";
+import { formatUnits } from "viem";
+
+export async function loader({ params: { address } }: LoaderFunctionArgs) {
+  if (!address) throw "";
+
+  //TODO: use a ligther route
+  const rewards = await RewardService.getForUser(address);
+
+  return json({ rewards, address });
+}
+
+export const meta: MetaFunction<typeof loader> = ({ data, error }) => {
+  if (error) return [{ title: error }];
+  return [{ title: `${data?.address?.substring(0, 6)}…${data?.address.substring(data?.address.length - 4)} on Merkl` }];
+};
 
 export default function Index() {
-  const { address } = useParams();
+  const { rewards, address } = useLoaderData<typeof loader>();
   const [_isEditingAddress] = useState(false);
 
+  const { earned, unclaimed } = useMemo(() => {
+    return rewards.reduce(
+      ({ earned, unclaimed }, chain) => {
+        const valueUnclaimed = chain.rewards.reduce((sum, token) => {
+          const value =
+            Number.parseFloat(formatUnits(token.amount - token.claimed, token.token.decimals)) *
+            (token.token.price ?? 0);
+
+          return sum + value;
+        }, 0);
+        const valueEarned = chain.rewards.reduce((sum, token) => {
+          const value = Number.parseFloat(formatUnits(token.claimed, token.token.decimals)) * (token.token.price ?? 0);
+
+          return sum + value;
+        }, 0);
+
+        return { earned: earned + valueEarned, unclaimed: unclaimed + valueUnclaimed };
+      },
+      { earned: 0, unclaimed: 0 },
+    );
+  }, [rewards]);
+
   return (
     <Hero
       breadcrumbs={[
         { link: "/", name: "Users" },
-        { link: "/", name: address ?? "" },
+        { link: `/users/${address ?? ""}`, name: address ?? "" },
       ]}
       navigation={{ label: "Back to opportunities", link: "/" }}
       title={
         <Group className="w-full gap-xl md:gap-xl*4 items-center">
           {/* TODO: Make it dynamic this */}
           <Group className="flex-col">
-            <Text size={2} className="text-main-12">
-              $6k
-            </Text>
+            <Value format="$0,0.0a" size={2} className="text-main-12">
+              {earned}
+            </Value>
             <Text size="xl" bold>
               Total earned
             </Text>
           </Group>
           <Group className="flex-col">
-            <Text size={2} className="text-main-12">
-              $1.2k
-            </Text>
-            <Text size={"xl"} bold>
-              Earned today
-            </Text>
-          </Group>
-          <Group className="flex-col">
-            <Text size={2} className="text-main-12">
-              $3k
-            </Text>
+            <Value format="$0,0.0a" size={2} className="text-main-12">
+              {unclaimed}
+            </Value>
             <Text size={"xl"} bold>
               Claimable
             </Text>