diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..64373a0
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,4 @@
+{
+  "recommendations": [],
+  "unwantedRecommendations": []
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..b8ad668
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,18 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.organizeImports.biome": "explicit"
+  },
+  "editor.defaultFormatter": "biomejs.biome",
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "editor.formatOnSave": true,
+  "editor.formatOnType": false,
+  "editor.foldingImportsByDefault": true,
+  "editor.foldingHighlight": true,
+  "editor.foldingStrategy": "auto",
+  "files.eol": "\n"
+}
diff --git a/bun.lockb b/bun.lockb
index b48ba0f..cd38838 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/merkl.config.ts b/merkl.config.ts
index afba16c..da2eb19 100644
--- a/merkl.config.ts
+++ b/merkl.config.ts
@@ -1,7 +1,9 @@
 import { createColoring } from "dappkit";
 import { createConfig } from "src/config/type";
 import hero from "src/customer/assets/images/hero.jpg?url";
+import { v4 as uuidv4 } from "uuid";
 import { http, createClient, custom } from "viem";
+
 import {
   arbitrum,
   astar,
@@ -44,9 +46,11 @@ import { coinbaseWallet, walletConnect } from "wagmi/connectors";
 export default createConfig({
   appName: "Puffer",
   modes: ["light"],
-  defaultTheme: "puffer",
-  deposit: false,
+  defaultTheme: "ignite",
   tags: ["puffer"],
+  opportunityNavigationMode: "direct",
+  rewardsNavigationMode: "chain",
+  deposit: true,
   themes: {
     ignite: {
       base: createColoring(["#2A35BD", "#BFFF37", "#FFFFFF"], ["#2A35BD", "#BFFF37", "#FFFFFF"]),
@@ -89,43 +93,43 @@ export default createConfig({
     home: {
       icon: "RiHomeFill",
       route: "/",
-      key: crypto.randomUUID(),
+      key: uuidv4(),
     },
     opportunities: {
       icon: "RiPlanetFill",
       route: "/opportunities",
-      key: crypto.randomUUID(),
+      key: uuidv4(),
     },
     // protocols: {
     //   icon: "RiVipCrown2Fill",
     //   route: "/protocols",
-    //   key: crypto.randomUUID(),
+    //   key: uuidv4(),
     // },
     // bridge: {
     //   icon: "RiCompassesLine",
     //   route: "/bridge",
-    //   key: crypto.randomUUID(),
+    //   key: uuidv4(),
     // },
     docs: {
       icon: "RiFile4Fill",
       external: true,
       route: "https://docs.merkl.xyz/",
-      key: crypto.randomUUID(),
+      key: uuidv4(),
     },
     faq: {
       icon: "RiQuestionFill",
       route: "/faq",
-      key: crypto.randomUUID(),
+      key: uuidv4(),
     },
     // terms: {
     //   icon: "RiCompassesLine",
     //   route: "/terms",
-    //   key: crypto.randomUUID(),
+    //   key: uuidv4(),
     // },
     // privacy: {
     //   icon: "RiInformationFill",
     //   route: "/privacy",
-    //   key: crypto.randomUUID(),
+    //   key: uuidv4(),
     // },
   },
   socials: {
diff --git a/package.json b/package.json
index a544342..0487924 100644
--- a/package.json
+++ b/package.json
@@ -12,15 +12,13 @@
     "serve": "remix-serve ./build/server/index.js",
     "typecheck": "tsc"
   },
-  "workspaces": [
-    "packages/*"
-  ],
+  "workspaces": ["packages/*"],
   "dependencies": {
     "@acab/ecsstatic": "^0.8.0",
     "@ariakit/react": "^0.4.12",
     "@elysiajs/eden": "^1.1.3",
     "@emotion/css": "^11.13.4",
-    "@merkl/api": "0.10.156",
+    "@merkl/api": "0.10.188",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@remix-run/dev": "^2.11.2",
@@ -49,6 +47,7 @@
     "tailwindcss": "^3.4.12",
     "tailwindcss-animate": "^1.0.7",
     "typedoc": "^0.26.7",
+    "uuid": "^11.0.3",
     "viem": "2.21.54",
     "vite-plugin-dts": "^4.2.1",
     "wagmi": "^2.12.29",
diff --git a/packages/dappkit b/packages/dappkit
index 826ff4b..3c7c7f5 160000
--- a/packages/dappkit
+++ b/packages/dappkit
@@ -1 +1 @@
-Subproject commit 826ff4b818716cb9af015adc06c1341a3638c58f
+Subproject commit 3c7c7f53ece8c9dc245be7cd12ee7e03dc847a0a
diff --git a/src/api/opportunity/opportunity.ts b/src/api/opportunity/opportunity.ts
deleted file mode 100644
index 5917d41..0000000
--- a/src/api/opportunity/opportunity.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { api } from "../index.server";
-
-function getQueryParams(
-  request: Request,
-  overrideQuery?: Parameters<typeof api.v4.opportunities.index.get>[0]["query"],
-) {
-  const status = new URL(request.url).searchParams.get("status");
-  const action = new URL(request.url).searchParams.get("action");
-  const chainId = new URL(request.url).searchParams.get("chain");
-  const page = new URL(request.url).searchParams.get("page");
-
-  const items = new URL(request.url).searchParams.get("items");
-  const search = new URL(request.url).searchParams.get("search");
-  const [sort, order] = new URL(request.url).searchParams.get("sort")?.split("-") ?? [];
-
-  const filters = Object.assign(
-    { status, action, chainId, items, sort, order, name: search, page },
-    overrideQuery ?? {},
-    page !== null && { page: Number(page) - 1 },
-  );
-
-  const query = Object.entries(filters).reduce(
-    (_query, [key, filter]) => Object.assign(_query, filter == null ? {} : { [key]: filter }),
-    {},
-  );
-
-  return query;
-}
-
-export async function fetchOpportunities(
-  request: Request,
-  overrideQuery?: Parameters<typeof api.v4.opportunities.index.get>[0]["query"],
-) {
-  const query = getQueryParams(request, overrideQuery);
-
-  const { data: count } = await api.v4.opportunities.count.get({ query });
-  const { data: opportunities } = await api.v4.opportunities.index.get({
-    query,
-  });
-
-  if (count === null || !opportunities) throw "Cannot fetch opportunities";
-  return { opportunities, count };
-}
diff --git a/src/api/services/campaigns/campaign.service.ts b/src/api/services/campaigns/campaign.service.ts
index 7ebaf94..3868862 100644
--- a/src/api/services/campaigns/campaign.service.ts
+++ b/src/api/services/campaigns/campaign.service.ts
@@ -29,13 +29,13 @@ export abstract class CampaignService {
     const action = new URL(request.url).searchParams.get("action");
     const chainId = new URL(request.url).searchParams.get("chain");
     const page = new URL(request.url).searchParams.get("page");
-
+    const test = new URL(request.url).searchParams.get("test") ?? undefined;
     const items = new URL(request.url).searchParams.get("items");
     const search = new URL(request.url).searchParams.get("search");
     const [sort, order] = new URL(request.url).searchParams.get("sort")?.split("-") ?? [];
 
     const filters = Object.assign(
-      { status, action, chainId, items, sort, order, name: search, page },
+      { status, action, chainId, items, sort, order, name: search, page, test },
       override ?? {},
       page !== null && { page: Number(page) - 1 },
     );
diff --git a/src/api/services/claims.service.ts b/src/api/services/claims.service.ts
new file mode 100644
index 0000000..de8fcfc
--- /dev/null
+++ b/src/api/services/claims.service.ts
@@ -0,0 +1,20 @@
+import { api } from "../index.server";
+import { fetchWithLogs } from "../utils";
+
+export abstract class ClaimsService {
+  static async #fetch<R, T extends { data: R; status: number; response: Response }>(
+    call: () => Promise<T>,
+    resource = "Claims",
+  ): Promise<NonNullable<T["data"]>> {
+    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 });
+    if (data == null) throw new Response(`${resource} unavailable`, { status });
+    return data;
+  }
+
+  static async getForUser(address: string) {
+    return await ClaimsService.#fetch(async () => api.v4.claims({ address }).get());
+  }
+}
diff --git a/src/api/services/interaction.service.ts b/src/api/services/interaction.service.ts
new file mode 100644
index 0000000..3734bdc
--- /dev/null
+++ b/src/api/services/interaction.service.ts
@@ -0,0 +1,56 @@
+import { api as clientApi } from "src/api/index.client";
+import { fetchWithLogs } from "../utils";
+
+export abstract class InteractionService {
+  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 fetchWithLogs(call);
+
+    if (status === 404) throw new Response(`${resource} not found`, { status });
+    if (status === 500) throw new Response(`${resource} unavailable`, { status });
+    if (data == null) throw new Response(`${resource} unavailable`, { status });
+    return data;
+  }
+
+  /**
+   * Client side
+   * @param chainId
+   * @param protocolId
+   * @param identifier
+   */
+  static async getTarget(chainId: number, protocolId: string, identifier: string) {
+    const targets = await InteractionService.#fetch(() =>
+      clientApi.v4.interaction.targets.get({
+        query: { chainId, protocolId, identifier },
+      }),
+    );
+
+    //TODO: opportunity/:id/target instead of taking the first result and expecting unique
+    return targets?.[0];
+  }
+
+  /**
+   * Client side
+   */
+  static async getTransaction(payload: Parameters<typeof clientApi.v4.interaction.transaction.get>[0]["query"]) {
+    const transaction = await InteractionService.#fetch(() =>
+      clientApi.v4.interaction.transaction.get({
+        query: payload,
+      }),
+    );
+
+    return transaction;
+  }
+
+  static async getBalances(chainId: number, address: string) {
+    const tokens = await InteractionService.#fetch(() =>
+      clientApi.v4.tokens.balances.get({
+        query: { chainId: chainId, userAddress: address },
+      }),
+    );
+
+    return tokens;
+  }
+}
diff --git a/src/api/services/liquidity.service.ts b/src/api/services/liquidity.service.ts
new file mode 100644
index 0000000..4eabd27
--- /dev/null
+++ b/src/api/services/liquidity.service.ts
@@ -0,0 +1,20 @@
+import { api } from "../index.server";
+import { fetchWithLogs } from "../utils";
+
+export abstract class LiquidityService {
+  static async #fetch<R, T extends { data: R; status: number; response: Response }>(
+    call: () => Promise<T>,
+    resource = "Positions",
+  ): Promise<NonNullable<T["data"]>> {
+    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 });
+    if (data == null) throw new Response(`${resource} unavailable`, { status });
+    return data;
+  }
+
+  static async getForUser(query: Parameters<typeof api.v4.liquidity.index.get>["0"]["query"]) {
+    return await LiquidityService.#fetch(async () => api.v4.liquidity.index.get({ query }));
+  }
+}
diff --git a/src/api/services/opportunity/opportunity.service.ts b/src/api/services/opportunity/opportunity.service.ts
index 14516a0..1ca78e0 100644
--- a/src/api/services/opportunity/opportunity.service.ts
+++ b/src/api/services/opportunity/opportunity.service.ts
@@ -40,7 +40,7 @@ export abstract class OpportunityService {
 
     //TODO: updates tags to take an array
     if (config.tags && !opportunityWithCampaigns.tags.includes(config.tags?.[0]))
-      throw new Response("Opportunity inacessible", { status: 403 });
+      throw new Response("Opportunity inaccessible", { status: 403 });
 
     return opportunityWithCampaigns;
   }
@@ -96,6 +96,7 @@ export abstract class OpportunityService {
       sort: url.searchParams.get("sort")?.split("-")[0],
       order: url.searchParams.get("sort")?.split("-")[1],
       name: url.searchParams.get("search") ?? undefined,
+      test: url.searchParams.get("test") ?? undefined,
       page: url.searchParams.get("page") ? Math.max(Number(url.searchParams.get("page")) - 1, 0) : undefined,
       ...override,
     };
diff --git a/src/api/services/protocol.service.ts b/src/api/services/protocol.service.ts
index 61d613a..20c901a 100644
--- a/src/api/services/protocol.service.ts
+++ b/src/api/services/protocol.service.ts
@@ -1,3 +1,4 @@
+import config from "merkl.config";
 import { api } from "../index.server";
 import { fetchWithLogs } from "../utils";
 
@@ -5,15 +6,28 @@ export abstract class ProtocolService {
   // ─── Get Many Protocols ──────────────────────────────────────────────
 
   static async get(query: Parameters<typeof api.v4.protocols.index.get>[0]["query"]) {
-    return await ProtocolService.#fetch(async () => api.v4.protocols.index.get({ query }));
+    return await ProtocolService.#fetch(async () =>
+      api.v4.protocols.index.get({
+        query: Object.assign({ ...query }, config.tags?.[0] ? { tags: config.tags?.[0] } : {}),
+      }),
+    );
   }
 
   // ─── Get Many Protocols from request ──────────────────────────────────
 
   static async getManyFromRequest(request: Request) {
-    const query = ProtocolService.#getQueryFromRequest(request);
-    const protocols = await ProtocolService.#fetch(async () => api.v4.protocols.index.get({ query }));
-    const count = await ProtocolService.#fetch(async () => api.v4.protocols.count.get({ query }));
+    const query: Parameters<typeof api.v4.protocols.index.get>[0]["query"] =
+      ProtocolService.#getQueryFromRequest(request);
+    const protocols = await ProtocolService.#fetch(async () =>
+      api.v4.protocols.index.get({
+        query: Object.assign({ ...query }, config.tags?.[0] ? { tags: config.tags?.[0] } : {}),
+      }),
+    );
+    const count = await ProtocolService.#fetch(async () =>
+      api.v4.protocols.count.get({
+        query: Object.assign({ ...query }, config.tags?.[0] ? { tags: config.tags?.[0] } : {}),
+      }),
+    );
 
     return { protocols, count };
   }
diff --git a/src/api/services/reward.service.ts b/src/api/services/reward.service.ts
index d72d2e2..8e0d796 100644
--- a/src/api/services/reward.service.ts
+++ b/src/api/services/reward.service.ts
@@ -1,42 +1,6 @@
-import type { Reward } from "@merkl/api";
 import { api } from "../index.server";
 import { fetchWithLogs } from "../utils";
 
-// Todo: Check how we should type Raw query
-export type IRewards = {
-  amount: string;
-  recipient: string;
-  campaignId: string;
-  reason: string;
-  Token: {
-    id: string;
-    name: string;
-    chainId: number;
-    address: string;
-    decimals: number;
-    symbol: string;
-    icon: string;
-    verified: boolean;
-    price: number;
-  };
-};
-// Todo: Check how we should type Raw query
-export type ITotalRewards = {
-  campaignId: string;
-  totalAmount: string;
-  Token: {
-    id: string;
-    name: string;
-    chainId: number;
-    address: string;
-    decimals: number;
-    symbol: string;
-    icon: string;
-    verified: boolean;
-    price: number;
-  };
-}[];
-
 export abstract class RewardService {
   static async #fetch<R, T extends { data: R; status: number; response: Response }>(
     call: () => Promise<T>,
@@ -79,18 +43,21 @@ export abstract class RewardService {
     return query;
   }
 
-  static async getForUser(address: string): Promise<Reward[]> {
-    const rewards = await RewardService.#fetch(async () => api.v4.users({ address }).rewards.full.get());
-
-    //TODO: add some cache here
-    return rewards;
+  static async getForUser(address: string, chainId: number) {
+    return await RewardService.#fetch(async () =>
+      api.v4.users({ address }).rewards.breakdowns.get({
+        query: { chainId },
+      }),
+    );
   }
 
   static async getManyFromRequest(
     request: Request,
     overrides?: Parameters<typeof api.v4.rewards.index.get>[0]["query"],
   ) {
-    return RewardService.getByParams(Object.assign(RewardService.#getQueryFromRequest(request), overrides ?? {}));
+    return RewardService.getByParams(
+      Object.assign(RewardService.#getQueryFromRequest(request), overrides ?? undefined),
+    );
   }
 
   static async getByParams(query: Parameters<typeof api.v4.rewards.index.get>[0]["query"]) {
@@ -106,10 +73,7 @@ export abstract class RewardService {
     return { count, rewards, total: amount };
   }
 
-  static async total(query: {
-    chainId: number;
-    campaignId: string;
-  }): Promise<ITotalRewards> {
+  static async total(query: { chainId: number; campaignId: string }) {
     const total = await RewardService.#fetch(async () =>
       api.v4.rewards.total.get({
         query: {
@@ -119,6 +83,6 @@ export abstract class RewardService {
       }),
     );
 
-    return total as ITotalRewards;
+    return total;
   }
 }
diff --git a/src/components/composite/Hero.tsx b/src/components/composite/Hero.tsx
index c9665e3..14aae0f 100644
--- a/src/components/composite/Hero.tsx
+++ b/src/components/composite/Hero.tsx
@@ -15,6 +15,7 @@ import {
 } from "dappkit";
 import config from "merkl.config";
 import type { PropsWithChildren, ReactNode } from "react";
+import { v4 as uuidv4 } from "uuid";
 
 export type HeroProps = PropsWithChildren<{
   icons?: IconProps[];
@@ -47,32 +48,71 @@ export default function Hero({
   const location = useLocation();
   return (
     <>
-      <OverrideTheme mode="light">
-        <Group
-          className={`${
-            location?.pathname === "/" || location?.pathname === "/opportunities" ? "bg-cover" : "bg-main-6"
-          } flex-row justify-between bg-no-repeat xl:aspect-auto xl:min-h-[350px] aspect-[1440/300]`}
-          style={{
-            backgroundImage:
-              location?.pathname === "/" || location?.pathname === "/opportunities"
-                ? `url('${config.images.hero}')`
-                : "none",
-          }}>
-          <Container>
-            <Group className="flex-col h-full py-xl gap-xl lg:gap-xs">
-              <Group className="items-center" size="sm">
-                <Button to={navigation?.link ?? "/"} look="soft" bold size="xs">
-                  Home
-                </Button>
-                {breadcrumbs?.map(breadcrumb => {
-                  if (breadcrumb.component) return <>{breadcrumb.component}</>;
-                  return (
-                    <Button key={breadcrumb.link} to={breadcrumb.link} look="soft" size="xs">
-                      <Icon remix="RiArrowRightSLine" />
-                      {breadcrumb.name}
-                    </Button>
-                  );
-                })}
+      {/* TODO: Align lines & descriptions on all pages  */}
+      {/* TODO: On sub-pages (all pages except Opportunities): Replace the banner by a color  */}
+      <Group
+        className={`${
+          location?.pathname === "/" || location?.pathname === "/opportunities" ? "bg-cover" : "bg-main-6"
+        } flex-row justify-between bg-no-repeat xl:aspect-auto xl:min-h-[350px] aspect-[1440/300]`}
+        style={{
+          backgroundImage:
+            location?.pathname === "/" || location?.pathname === "/opportunities"
+              ? `url('${config.images.hero}')`
+              : "none",
+        }}>
+        <Container>
+          <Group className="flex-col h-full py-xl gap-xl lg:gap-xs">
+            <Group className="items-center" size="sm">
+              <Button to={navigation?.link ?? "/"} look="soft" bold size="xs">
+                Home
+              </Button>
+              {breadcrumbs?.map(breadcrumb => {
+                if (breadcrumb.component) return <>{breadcrumb.component}</>;
+                return (
+                  <Button key={breadcrumb.link} to={breadcrumb.link} look="soft" size="xs">
+                    <Icon remix="RiArrowRightSLine" />
+                    {breadcrumb.name}
+                  </Button>
+                );
+              })}
+            </Group>
+            <Group className="grow items-center justify-between gap-xl lg:gap-xl*4">
+              <Group className="flex-col flex-1 gap-xl lg:gap-lg">
+                <Group>
+                  <Group className="items-center gap-0 md:gap-lg">
+                    {!!icons && (
+                      <Icons size="lg">
+                        {icons?.length > 1
+                          ? icons?.map(icon => (
+                              <Icon
+                                className="hidden md:block text-main-12 !w-lg*4 !h-lg*4"
+                                key={`${Object.values(icon)}`}
+                                {...icon}
+                              />
+                            ))
+                          : icons?.map(icon => (
+                              <Icon
+                                className="hidden md:block text-main-12 !w-xl*4 !h-xl*4"
+                                key={`${Object.values(icon)}`}
+                                {...icon}
+                              />
+                            ))}
+                      </Icons>
+                    )}
+                    <Title h={1} size={2}>
+                      {title}
+                    </Title>
+                  </Group>
+                </Group>
+                {!!description && (
+                  <>
+                    <Divider look="base" />
+                    <Text size="lg" bold>
+                      {description}
+                    </Text>
+                  </>
+                )}
+                {!!tags && <Group className="mb-lg">{tags}</Group>}
               </Group>
               <Group className="grow items-center justify-between gap-xl lg:gap-xl*4">
                 <Group className="flex-col flex-1 gap-xl lg:gap-lg">
@@ -146,7 +186,7 @@ export function defaultHeroSideDatas(count: number, maxApr: number, dailyRewards
         </Value>
       ),
       label: "Live opportunities",
-      key: crypto.randomUUID(),
+      key: uuidv4(),
     },
     !!dailyRewards && {
       data: (
@@ -155,7 +195,7 @@ export function defaultHeroSideDatas(count: number, maxApr: number, dailyRewards
         </Value>
       ),
       label: "Daily rewards",
-      key: crypto.randomUUID(),
+      key: uuidv4(),
     },
     !!maxApr && {
       data: (
@@ -164,7 +204,7 @@ export function defaultHeroSideDatas(count: number, maxApr: number, dailyRewards
         </Value>
       ),
       label: "Max APR",
-      key: crypto.randomUUID(),
+      key: uuidv4(),
     },
   ].filter(data => !!data);
 }
diff --git a/src/components/element/apr/AprModal.tsx b/src/components/element/apr/AprModal.tsx
index 96e4fb8..8511cb3 100644
--- a/src/components/element/apr/AprModal.tsx
+++ b/src/components/element/apr/AprModal.tsx
@@ -1,5 +1,5 @@
 import type { Opportunity } from "@merkl/api";
-import { Divider, Group, PrimitiveTag, Title, Value } from "dappkit";
+import { Divider, Group, PrimitiveTag, Title, Value } from "packages/dappkit/src";
 import TvlRowAllocation from "../tvl/TvlRowAllocation";
 import TvlSection from "../tvl/TvlSection";
 import AprSection from "./AprSection";
diff --git a/src/components/element/campaign/CampaignTableRow.tsx b/src/components/element/campaign/CampaignTableRow.tsx
index d37e35a..3dce7a7 100644
--- a/src/components/element/campaign/CampaignTableRow.tsx
+++ b/src/components/element/campaign/CampaignTableRow.tsx
@@ -20,6 +20,7 @@ import Tooltip from "packages/dappkit/src/components/primitives/Tooltip";
 import { type ReactNode, useCallback, useMemo, useState } from "react";
 import type { Opportunity } from "src/api/services/opportunity/opportunity.model";
 import useCampaign from "src/hooks/resources/useCampaign";
+import { v4 as uuidv4 } from "uuid";
 import Chain from "../chain/Chain";
 import Token from "../token/Token";
 import { CampaignRow } from "./CampaignTable";
@@ -97,6 +98,7 @@ export default function CampaignTableRow({
           </Text>
         </Tooltip>,
       ],
+      ["Compute Chain", <Chain chain={campaign.chain} key="computeChain" />],
     ] as const satisfies [string, ReactNode][];
 
     return columns.map(([label, content]) => {
@@ -118,7 +120,7 @@ export default function CampaignTableRow({
       {...props}
       className={mergeClass("cursor-pointer py-4", className)}
       onClick={toggleIsOpen}
-      chainColumn={<Chain chain={campaign.chain} />}
+      chainColumn={<Chain chain={campaign.distributionChain} />}
       dailyRewardsColumn={
         <Group className="align-middle items-center flex-nowrap">
           <OverrideTheme accent={"good"}>
@@ -157,7 +159,7 @@ export default function CampaignTableRow({
               </Group>
               <Group>
                 {rules?.map(rule => (
-                  <Rule size="md" key={crypto.randomUUID()} type={rule.type} value={rule.value} />
+                  <Rule size="md" key={uuidv4()} type={rule.type} value={rule.value} />
                 ))}
               </Group>
             </Group>
diff --git a/src/components/element/historicalClaimsLibrary/HistoricalClaimsLibrary.tsx b/src/components/element/historicalClaimsLibrary/HistoricalClaimsLibrary.tsx
new file mode 100644
index 0000000..980499f
--- /dev/null
+++ b/src/components/element/historicalClaimsLibrary/HistoricalClaimsLibrary.tsx
@@ -0,0 +1,30 @@
+import { Text, Title } from "dappkit";
+import { useMemo } from "react";
+import type { ClaimsService } from "src/api/services/claims.service";
+import { v4 as uuidv4 } from "uuid";
+import LeaderboardTableRow from "./HistoricalClaimsRow";
+import { HistoricalClaimsTable } from "./HistoricalClaimsTable";
+
+export type IProps = {
+  claims: Awaited<ReturnType<typeof ClaimsService.getForUser>>;
+};
+
+export default function HistoricalClaimsLibrary(props: IProps) {
+  const { claims } = props;
+
+  const rows = useMemo(() => {
+    return claims?.map(claim => <LeaderboardTableRow key={uuidv4()} claim={claim} />);
+  }, [claims]);
+
+  return (
+    <HistoricalClaimsTable
+      dividerClassName={index => (index < 2 ? "bg-accent-8" : "bg-main-8")}
+      header={
+        <Title h={5} className="!text-main-11 w-full">
+          Past Claims
+        </Title>
+      }>
+      {!!rows.length ? rows : <Text>No claim transaction found</Text>}
+    </HistoricalClaimsTable>
+  );
+}
diff --git a/src/components/element/historicalClaimsLibrary/HistoricalClaimsRow.tsx b/src/components/element/historicalClaimsLibrary/HistoricalClaimsRow.tsx
new file mode 100644
index 0000000..eab2582
--- /dev/null
+++ b/src/components/element/historicalClaimsLibrary/HistoricalClaimsRow.tsx
@@ -0,0 +1,51 @@
+import { Button, type Component, Icon, mergeClass } from "dappkit";
+import Time from "packages/dappkit/src/components/primitives/Time";
+import { useWalletContext } from "packages/dappkit/src/context/Wallet.context";
+import { useMemo } from "react";
+import type { ClaimsService } from "src/api/services/claims.service";
+import Chain from "../chain/Chain";
+import Token from "../token/Token";
+import { HistoricalClaimsRow } from "./HistoricalClaimsTable";
+
+export type HistoricalClaimsRowProps = Component<{
+  claim: Awaited<ReturnType<typeof ClaimsService.getForUser>>[0];
+}>;
+
+export default function HistoricalClaimsTableRow({ claim, className, ...props }: HistoricalClaimsRowProps) {
+  const { chains } = useWalletContext();
+
+  const chain = useMemo(() => {
+    return chains?.find(c => c.id === claim.token.chainId);
+  }, [chains, claim]);
+
+  const value = useMemo(() => {
+    return Number(claim.amount) * (claim.token.price ?? 0);
+  }, [claim]);
+
+  return (
+    <HistoricalClaimsRow
+      {...props}
+      className={mergeClass("cursor-pointer", className)}
+      chainColumn={<Chain chain={chain} size="md" />}
+      tokenColumn={
+        <Token
+          token={claim.token}
+          format="amount_price"
+          amount={BigInt(Number(claim.amount) * 10 ** claim.token.decimals)}
+          chain={chain}
+        />
+      }
+      dateColumn={<Time timestamp={claim.timestamp * 1000} />}
+      transactionColumn={
+        claim.txHash &&
+        chain?.explorers &&
+        chain.explorers.map(explorer => (
+          <Button key={`${explorer.url}`} to={`${explorer.url}/tx/${claim.txHash}`} external size="xs" look="soft">
+            <Icon remix="RiArrowRightLine" />
+            Inspect
+          </Button>
+        ))
+      }
+    />
+  );
+}
diff --git a/src/components/element/historicalClaimsLibrary/HistoricalClaimsTable.tsx b/src/components/element/historicalClaimsLibrary/HistoricalClaimsTable.tsx
new file mode 100644
index 0000000..d035679
--- /dev/null
+++ b/src/components/element/historicalClaimsLibrary/HistoricalClaimsTable.tsx
@@ -0,0 +1,30 @@
+import { createTable } from "dappkit";
+
+export const [HistoricalClaimsTable, HistoricalClaimsRow, HistoricalClaimsColumns] = createTable({
+  chain: {
+    name: "Chain",
+    size: "minmax(120px,150px)",
+    compact: "1fr",
+    className: "justify-start",
+    main: true,
+  },
+  token: {
+    name: "Token",
+    size: "minmax(120px,150px)",
+    compact: "1fr",
+    className: "justify-start",
+    main: true,
+  },
+  date: {
+    name: "Date",
+    size: "minmax(30px,1fr)",
+    compactSize: "minmax(20px,1fr)",
+    className: "justify-end",
+  },
+  transaction: {
+    name: "Transaction",
+    size: "minmax(30px,1fr)",
+    compactSize: "minmax(20px,0.5fr)",
+    className: "justify-end",
+  },
+});
diff --git a/src/components/element/leaderboard/LeaderboardLibrary.tsx b/src/components/element/leaderboard/LeaderboardLibrary.tsx
index d82e9f1..c1bdd3a 100644
--- a/src/components/element/leaderboard/LeaderboardLibrary.tsx
+++ b/src/components/element/leaderboard/LeaderboardLibrary.tsx
@@ -2,13 +2,14 @@ import type { Campaign } from "@merkl/api";
 import { useSearchParams } from "@remix-run/react";
 import { Text, Title } from "dappkit";
 import { useMemo } from "react";
-import type { IRewards } from "src/api/services/reward.service";
+import type { RewardService } from "src/api/services/reward.service";
+import { v4 as uuidv4 } from "uuid";
 import OpportunityPagination from "../opportunity/OpportunityPagination";
 import { LeaderboardTable } from "./LeaderboardTable";
 import LeaderboardTableRow from "./LeaderboardTableRow";
 
 export type IProps = {
-  leaderboard: IRewards[];
+  leaderboard: Awaited<ReturnType<(typeof RewardService)["getManyFromRequest"]>>["rewards"];
   count?: number;
   total?: number;
   campaign: Campaign;
@@ -24,7 +25,7 @@ export default function LeaderboardLibrary(props: IProps) {
   const rows = useMemo(() => {
     return leaderboard?.map((row, index) => (
       <LeaderboardTableRow
-        key={crypto.randomUUID()}
+        key={uuidv4()}
         total={BigInt(total ?? 0n)}
         row={row}
         rank={index + 1 + Math.max(Number(page) - 1, 0) * Number(items)}
diff --git a/src/components/element/leaderboard/LeaderboardTableRow.tsx b/src/components/element/leaderboard/LeaderboardTableRow.tsx
index 5b54af0..d55621c 100644
--- a/src/components/element/leaderboard/LeaderboardTableRow.tsx
+++ b/src/components/element/leaderboard/LeaderboardTableRow.tsx
@@ -2,14 +2,14 @@ import type { Campaign } from "@merkl/api";
 import { type Component, Group, PrimitiveTag, Text, Value, mergeClass } from "dappkit";
 import { useWalletContext } from "packages/dappkit/src/context/Wallet.context";
 import { useMemo } from "react";
-import type { IRewards } from "src/api/services/reward.service";
+import type { RewardService } from "src/api/services/reward.service";
 import { formatUnits, parseUnits } from "viem";
 import Token from "../token/Token";
 import User from "../user/User";
 import { LeaderboardRow } from "./LeaderboardTable";
 
 export type CampaignTableRowProps = Component<{
-  row: IRewards;
+  row: Awaited<ReturnType<typeof RewardService.getManyFromRequest>>["rewards"][0];
   total: bigint;
   rank: number;
   campaign: Campaign;
diff --git a/src/components/element/opportunity/OpportunityParticipateModal.tsx b/src/components/element/opportunity/OpportunityParticipateModal.tsx
new file mode 100644
index 0000000..25c5d7d
--- /dev/null
+++ b/src/components/element/opportunity/OpportunityParticipateModal.tsx
@@ -0,0 +1,25 @@
+import type { Opportunity } from "@merkl/api";
+import { Divider, Group, Modal, Title } from "packages/dappkit/src";
+import type { PropsWithChildren } from "react";
+import Participate from "../participate/Participate";
+
+export type OpportunityParticipateModalProps = {
+  opportunity: Opportunity;
+} & PropsWithChildren;
+
+export default function OpportunityParticipateModal({ opportunity, children }: OpportunityParticipateModalProps) {
+  return (
+    <Modal
+      modal={
+        <Group className="flex-col">
+          <Group className="p-md">
+            <Title h={3}>SUPPLY</Title>
+          </Group>
+          <Divider horizontal look="hype" />
+          <Participate opportunity={opportunity} displayLinks displayOpportunity displayMode="deposit" />
+        </Group>
+      }>
+      {children}
+    </Modal>
+  );
+}
diff --git a/src/components/element/opportunity/OpportunityShortCard.tsx b/src/components/element/opportunity/OpportunityShortCard.tsx
new file mode 100644
index 0000000..db83592
--- /dev/null
+++ b/src/components/element/opportunity/OpportunityShortCard.tsx
@@ -0,0 +1,42 @@
+import { Box, Group, Icons, Title, Value } from "packages/dappkit/src";
+import type { Opportunity } from "src/api/services/opportunity/opportunity.model";
+import useOpportunity from "src/hooks/resources/useOpportunity";
+import Tag from "../Tag";
+
+export type OpportunityShortCardProps = { opportunity: Opportunity };
+
+export default function OpportunityShortCard({ opportunity }: OpportunityShortCardProps) {
+  const { dailyRewards, icons, rewardIcons, tags } = useOpportunity(opportunity);
+
+  return (
+    <Box look="soft" className="bg-main-4">
+      <Group className="flex-col">
+        <Group>
+          <Value size={3} className="text-main-11" format={"$0,0.#a"}>
+            {dailyRewards}
+          </Value>
+          <Title h={3}>
+            <Icons>{rewardIcons}</Icons>
+          </Title>
+          {tags
+            .filter(({ type }) => type === "protocol")
+            .map(tag => (
+              <Tag
+                size="sm"
+                look="base"
+                key={`${tag?.type}_${
+                  // biome-ignore lint/suspicious/noExplicitAny: templated type
+                  (tag?.value as any)?.address ?? tag?.value
+                }`}
+                {...tag}
+              />
+            ))}
+        </Group>
+        <Group>
+          <Icons>{icons}</Icons>
+          <Title h={5}>{opportunity.name}</Title>
+        </Group>
+      </Group>
+    </Box>
+  );
+}
diff --git a/src/components/element/opportunity/OpportunityTableRow.tsx b/src/components/element/opportunity/OpportunityTableRow.tsx
index 9bdbbda..238684b 100644
--- a/src/components/element/opportunity/OpportunityTableRow.tsx
+++ b/src/components/element/opportunity/OpportunityTableRow.tsx
@@ -4,75 +4,101 @@ import type { BoxProps } from "dappkit";
 import { Dropdown, Group, Icon, Icons, PrimitiveTag, Text, Title, Value } from "dappkit";
 import { mergeClass } from "dappkit";
 import { useOverflowingRef } from "packages/dappkit/src/hooks/events/useOverflowing";
+import { useMemo } from "react";
+import type { OpportunityNavigationMode } from "src/config/opportunity";
 import useOpportunity from "src/hooks/resources/useOpportunity";
 import Tag, { type TagTypes } from "../Tag";
 import AprModal from "../apr/AprModal";
 import TokenAmountModal from "../token/TokenAmountModal";
+import OpportunityParticipateModal from "./OpportunityParticipateModal";
 import { OpportunityRow } from "./OpportunityTable";
 
 export type OpportunityTableRowProps = {
   hideTags?: (keyof TagTypes)[];
   opportunity: Opportunity;
+  navigationMode?: OpportunityNavigationMode;
 } & BoxProps;
 
-export default function OpportunityTableRow({ hideTags, opportunity, className, ...props }: OpportunityTableRowProps) {
+export default function OpportunityTableRow({
+  hideTags,
+  opportunity,
+  className,
+  navigationMode,
+  ...props
+}: OpportunityTableRowProps) {
   const { tags, link, icons, rewardsBreakdown } = useOpportunity(opportunity);
 
   const { ref, overflowing } = useOverflowingRef<HTMLHeadingElement>();
 
-  return (
-    <Link prefetch="intent" to={link}>
+  const aprColumn = useMemo(
+    () => (
+      <Dropdown size="xl" onHover content={<AprModal opportunity={opportunity} />}>
+        <PrimitiveTag look="tint" size="lg">
+          <Value value format="0a%">
+            {opportunity.apr / 100}
+          </Value>
+        </PrimitiveTag>
+      </Dropdown>
+    ),
+    [opportunity],
+  );
+
+  const tvlColumn = useMemo(
+    () => (
+      <Dropdown size="xl" onHover content={<AprModal opportunity={opportunity} />}>
+        <PrimitiveTag look="base" className="font-mono">
+          <Value value format="$0,0.0a">
+            {opportunity.tvl ?? 0}
+          </Value>
+        </PrimitiveTag>
+      </Dropdown>
+    ),
+    [opportunity],
+  );
+
+  const rewardsColumn = useMemo(
+    () => (
+      <Dropdown
+        className="py-xl"
+        content={
+          <TokenAmountModal
+            tokens={rewardsBreakdown}
+            label={
+              <Group size="sm">
+                <Icon remix="RiGift2Fill" />
+                <Text size="sm" className="text-main-12" bold>
+                  Daily Rewards
+                </Text>
+              </Group>
+            }
+          />
+        }>
+        <PrimitiveTag look="base" className="font-mono">
+          <Value value format="$0,0.0a">
+            {opportunity.dailyRewards ?? 0}
+          </Value>
+          <Icons>
+            {rewardsBreakdown.map(({ token: { icon } }) => (
+              <Icon key={icon} src={icon} />
+            ))}
+          </Icons>
+        </PrimitiveTag>
+      </Dropdown>
+    ),
+    [opportunity, rewardsBreakdown],
+  );
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: cannot include props
+  const row = useMemo(
+    () => (
       <OpportunityRow
         size="lg"
         content="sm"
         className={mergeClass("cursor-pointer", className)}
         {...props}
-        aprColumn={
-          <Dropdown size="xl" onHover content={<AprModal opportunity={opportunity} />}>
-            <PrimitiveTag look="tint" size="lg">
-              <Value value format="0a%">
-                {opportunity.apr / 100}
-              </Value>
-            </PrimitiveTag>
-          </Dropdown>
-        }
-        tvlColumn={
-          <Dropdown size="xl" onHover content={<AprModal opportunity={opportunity} />}>
-            <PrimitiveTag look="base" className="font-mono">
-              <Value value format="$0,0.0a">
-                {opportunity.tvl ?? 0}
-              </Value>
-            </PrimitiveTag>
-          </Dropdown>
-        }
-        rewardsColumn={
-          <Dropdown
-            className="py-xl"
-            content={
-              <TokenAmountModal
-                tokens={rewardsBreakdown}
-                label={
-                  <Group size="sm">
-                    <Icon remix="RiGift2Fill" />
-                    <Text size="sm" className="text-main-12" bold>
-                      Daily Rewards
-                    </Text>
-                  </Group>
-                }
-              />
-            }>
-            <PrimitiveTag look="base" className="font-mono">
-              <Value value format="$0,0.0a">
-                {opportunity.dailyRewards ?? 0}
-              </Value>
-              <Icons>
-                {rewardsBreakdown.map(({ token: { icon } }) => (
-                  <Icon key={icon} src={icon} />
-                ))}
-              </Icons>
-            </PrimitiveTag>
-          </Dropdown>
-        }
+        aprColumn={aprColumn}
+        tvlColumn={tvlColumn}
+        rewardsColumn={rewardsColumn}
         opportunityColumn={
           <Group className="flex-col w-full text-nowrap whitespace-nowrap text-ellipsis">
             <Group className="text-nowrap whitespace-nowrap min-w-0 flex-nowrap overflow-hidden max-w-full">
@@ -104,6 +130,15 @@ export default function OpportunityTableRow({ hideTags, opportunity, className,
           </Group>
         }
       />
+    ),
+    [opportunity, aprColumn, tvlColumn, hideTags, className, rewardsColumn, icons, overflowing, ref],
+  );
+
+  if (navigationMode === "supply")
+    return <OpportunityParticipateModal opportunity={opportunity}>{row}</OpportunityParticipateModal>;
+  return (
+    <Link prefetch="intent" to={link}>
+      {row}
     </Link>
   );
 }
diff --git a/src/components/element/participate/Interact.client.tsx b/src/components/element/participate/Interact.client.tsx
new file mode 100644
index 0000000..5deed36
--- /dev/null
+++ b/src/components/element/participate/Interact.client.tsx
@@ -0,0 +1,67 @@
+import type { Opportunity, Token } from "@merkl/api";
+import type { InteractionTarget } from "@merkl/api/dist/src/modules/v4/interaction/interaction.model";
+import { Button, type ButtonProps } from "dappkit";
+import TransactionButton from "packages/dappkit/src/components/dapp/TransactionButton";
+import { useWalletContext } from "packages/dappkit/src/context/Wallet.context";
+import { useMemo, useState } from "react";
+import useInteractionTransaction from "src/hooks/useInteractionTransaction";
+
+export type InteractProps = {
+  opportunity: Opportunity;
+  target?: InteractionTarget;
+  inputToken?: Token;
+  tokenAddress?: string;
+  amount?: bigint;
+  disabled?: boolean;
+};
+
+export default function Interact({ opportunity, inputToken, amount, target, disabled }: InteractProps) {
+  const { chainId, switchChain } = useWalletContext();
+  const { transaction } = useInteractionTransaction(
+    opportunity.chainId,
+    opportunity.protocol?.id,
+    target,
+    inputToken,
+    amount,
+  );
+  const [approvalHash, setApprovalHash] = useState<string>();
+
+  const currentInteraction = useMemo(() => {
+    const buttonProps: ButtonProps = { size: "lg", look: "hype", className: "justify-center w-full" };
+
+    if (disabled)
+      return (
+        <Button {...buttonProps} disabled>
+          Cannot interact
+        </Button>
+      );
+    if (!transaction)
+      return (
+        <Button {...buttonProps} disabled>
+          Loading...
+        </Button>
+      );
+    if (chainId !== opportunity.chainId)
+      return (
+        <Button {...buttonProps} onClick={() => switchChain(opportunity.chainId)}>
+          Switch Chain
+        </Button>
+      );
+
+    if (!transaction.approved || approvalHash)
+      return (
+        <TransactionButton onExecute={setApprovalHash} {...buttonProps} tx={transaction?.approval}>
+          Approve
+        </TransactionButton>
+      );
+
+    if (transaction.transaction)
+      return (
+        <TransactionButton {...buttonProps} tx={transaction?.transaction}>
+          Participate
+        </TransactionButton>
+      );
+  }, [chainId, opportunity.chainId, transaction, disabled, approvalHash, switchChain]);
+
+  return currentInteraction;
+}
diff --git a/src/components/element/position/PositionLibrary.tsx b/src/components/element/position/PositionLibrary.tsx
new file mode 100644
index 0000000..819f683
--- /dev/null
+++ b/src/components/element/position/PositionLibrary.tsx
@@ -0,0 +1,32 @@
+import type { PositionT } from "@merkl/api/dist/src/modules/v4/liquidity";
+import { Text, Title } from "dappkit";
+import { useMemo } from "react";
+import OpportunityPagination from "../opportunity/OpportunityPagination";
+import { PositionTable } from "./PositionTable";
+import PositionTableRow from "./PositionTableRow";
+
+export type IProps = {
+  positions: PositionT[];
+  count?: number;
+};
+
+export default function PositionLibrary(props: IProps) {
+  const { positions, count } = props;
+
+  const rows = useMemo(() => {
+    return positions?.map(row => <PositionTableRow key={crypto.randomUUID()} row={row} />);
+  }, [positions]);
+
+  return (
+    <PositionTable
+      dividerClassName={index => (index < 2 ? "bg-accent-8" : "bg-main-8")}
+      header={
+        <Title h={5} className="!text-main-11 w-full">
+          Your Liquidity
+        </Title>
+      }
+      footer={count !== undefined && <OpportunityPagination count={count} />}>
+      {!!rows.length ? rows : <Text>No positions detected</Text>}
+    </PositionTable>
+  );
+}
diff --git a/src/components/element/position/PositionTable.tsx b/src/components/element/position/PositionTable.tsx
new file mode 100644
index 0000000..8e28a06
--- /dev/null
+++ b/src/components/element/position/PositionTable.tsx
@@ -0,0 +1,23 @@
+import { createTable } from "dappkit";
+
+export const [PositionTable, PositionRow, PositionColumns] = createTable({
+  source: {
+    name: "Source",
+    size: "minmax(120px,150px)",
+    compact: "1fr",
+    className: "justify-start",
+    main: true,
+  },
+  flags: {
+    name: "Flags",
+    size: "minmax(170px,1fr)",
+    compactSize: "1fr",
+    className: "justify-start",
+  },
+  tokens: {
+    name: "Tokens",
+    size: "minmax(30px,1fr)",
+    compactSize: "minmax(20px,1fr)",
+    className: "justify-start",
+  },
+});
diff --git a/src/components/element/position/PositionTableRow.tsx b/src/components/element/position/PositionTableRow.tsx
new file mode 100644
index 0000000..79d78d6
--- /dev/null
+++ b/src/components/element/position/PositionTableRow.tsx
@@ -0,0 +1,43 @@
+import type { PositionT } from "@merkl/api/dist/src/modules/v4/liquidity";
+import { type Component, Group, PrimitiveTag, Text, mergeClass } from "dappkit";
+import React from "react";
+import Token from "../token/Token";
+import { PositionRow } from "./PositionTable";
+
+export type PositionRowProps = Component<{
+  row: PositionT;
+}>;
+
+export default function PositionTableRow({ row, className, ...props }: PositionRowProps) {
+  return (
+    <PositionRow
+      {...props}
+      className={mergeClass("cursor-pointer", className)}
+      sourceColumn={<Group className="flex-nowrap">{row.opportunity.name}</Group>}
+      flagsColumn={
+        <Group className="flex-nowrap">
+          <PrimitiveTag size="xs" className="pointer-events-none" look="soft">
+            <Text>{row.flags?.id}</Text>
+          </PrimitiveTag>
+          <PrimitiveTag size="xs" className="pointer-events-none" look="soft">
+            <Text>{row.flags?.range}</Text>
+          </PrimitiveTag>
+        </Group>
+      }
+      tokensColumn={
+        <Group className="flex-nowrap">
+          {row.tokens.map((token, index) => (
+            <>
+              <Token token={token.token} key={index.toString()} />
+              {token.breakdown.map((breakdown, index) => (
+                <React.Fragment key={index.toString()}>
+                  {breakdown.type} {breakdown.value}
+                </React.Fragment>
+              ))}
+            </>
+          ))}
+        </Group>
+      }
+    />
+  );
+}
diff --git a/src/components/element/rewards/ClaimRewardsLibrary.tsx b/src/components/element/rewards/ClaimRewardsLibrary.tsx
index 61a82f3..cf9d2cd 100644
--- a/src/components/element/rewards/ClaimRewardsLibrary.tsx
+++ b/src/components/element/rewards/ClaimRewardsLibrary.tsx
@@ -1,7 +1,10 @@
 import type { Reward } from "@merkl/api";
 import { Group } from "dappkit";
+import config from "merkl.config";
+import { useMemo } from "react";
 import { ClaimRewardsChainTable } from "./ClaimRewardsChainTable";
 import ClaimRewardsChainTableRow from "./ClaimRewardsChainTableRow";
+import ClaimRewardsByOpportunity from "./byOpportunity/ClaimRewardsByOpportunity";
 
 export type ClaimRewardsLibraryProps = {
   rewards: Reward[];
@@ -9,13 +12,30 @@ export type ClaimRewardsLibraryProps = {
 };
 
 export default function ClaimRewardsLibrary({ from, rewards }: ClaimRewardsLibraryProps) {
-  return (
-    <Group className="flex-row w-full [&>*]:flex-grow">
-      <ClaimRewardsChainTable dividerClassName={index => (index === 1 ? "bg-accent-10" : "bg-main-7")}>
-        {rewards?.map((reward, index) => (
-          <ClaimRewardsChainTableRow {...{ from, reward }} key={reward.chain?.id ?? index} />
-        ))}
-      </ClaimRewardsChainTable>
-    </Group>
+  const flatenedRewards = useMemo(
+    () =>
+      rewards.flatMap(({ chain, rewards, distributor }) =>
+        rewards.flatMap(reward =>
+          reward.breakdowns.flatMap(breakdown => ({ chain, distributor, breakdown, token: reward.token })),
+        ),
+      ),
+    [rewards],
   );
+
+  const renderRewards = useMemo(() => {
+    switch (config.rewardsNavigationMode) {
+      case "opportunity":
+        return <ClaimRewardsByOpportunity from={from} rewards={flatenedRewards} />;
+      default:
+        return (
+          <ClaimRewardsChainTable dividerClassName={index => (index === 1 ? "bg-accent-10" : "bg-main-7")}>
+            {rewards?.map((reward, index) => (
+              <ClaimRewardsChainTableRow {...{ from, reward }} key={reward.chain?.id ?? index} />
+            ))}
+          </ClaimRewardsChainTable>
+        );
+    }
+  }, [rewards, flatenedRewards, from]);
+
+  return <Group className="flex-row w-full [&>*]:flex-grow">{renderRewards}</Group>;
 }
diff --git a/src/components/element/rewards/byOpportunity/ClaimRewardsByOpportunity.tsx b/src/components/element/rewards/byOpportunity/ClaimRewardsByOpportunity.tsx
new file mode 100644
index 0000000..f7919fa
--- /dev/null
+++ b/src/components/element/rewards/byOpportunity/ClaimRewardsByOpportunity.tsx
@@ -0,0 +1,62 @@
+import type { Reward } from "@merkl/api";
+import type { Component } from "dappkit";
+import { Fmt } from "packages/dappkit/src/utils/formatter.service";
+import { useMemo, useState } from "react";
+
+import { ClaimRewardsTableByOpportunity } from "./ClaimRewardsTableByOpportunity";
+import ClaimRewardsTokenTableRowByOpportunity from "./ClaimRewardsTokenTableRowByOpportunity";
+
+type LocalReward = {
+  chain: Reward["chain"];
+  distributor: Reward["distributor"];
+  breakdown: Reward["rewards"][number]["breakdowns"][number];
+  token: Reward["rewards"][number]["token"];
+};
+
+export type claimRewardsByOpportunityProps = Component<{
+  from: string;
+  rewards: LocalReward[];
+}>;
+
+export default function ClaimRewardsByOpportunity({ from, rewards }: claimRewardsByOpportunityProps) {
+  const [selectedTokens, setSelectedTokens] = useState<Set<string>>(new Set<string>());
+
+  const renderTokenRewards = useMemo(() => {
+    return rewards
+      ?.sort((a, b) => {
+        const priceA = Fmt.toPrice(a.breakdown.amount - a.breakdown.claimed, a.token);
+        const priceB = Fmt.toPrice(b.breakdown.amount - b.breakdown.claimed, b.token);
+
+        if (b.breakdown.amount === b.breakdown.claimed && a.breakdown.amount === a.breakdown.claimed)
+          return Fmt.toPrice(b.breakdown.amount, b.token) - Fmt.toPrice(a.breakdown.amount, a.token);
+        return priceB - priceA;
+      })
+      .map(_reward => (
+        <ClaimRewardsTokenTableRowByOpportunity
+          key={_reward.token.address}
+          className="cursor-pointer [&>*>*]:cursor-auto"
+          checkedState={[
+            selectedTokens.has(_reward.token.address) || !selectedTokens.size,
+            () => {
+              setSelectedTokens(t => {
+                if (!t.has(_reward.token.address)) t.add(_reward.token.address);
+                else t.delete(_reward.token.address);
+
+                return new Set(t);
+              });
+            },
+          ]}
+          breakdown={_reward.breakdown}
+          token={_reward.token}
+          distributor={_reward.distributor}
+          from={from}
+        />
+      ));
+  }, [rewards, selectedTokens.size, selectedTokens, from]);
+
+  return (
+    <ClaimRewardsTableByOpportunity className="[&>*]:bg-main-4" look="soft">
+      {renderTokenRewards}
+    </ClaimRewardsTableByOpportunity>
+  );
+}
diff --git a/src/components/element/rewards/byOpportunity/ClaimRewardsTableByOpportunity.tsx b/src/components/element/rewards/byOpportunity/ClaimRewardsTableByOpportunity.tsx
new file mode 100644
index 0000000..9a23e6a
--- /dev/null
+++ b/src/components/element/rewards/byOpportunity/ClaimRewardsTableByOpportunity.tsx
@@ -0,0 +1,36 @@
+import { createTable } from "dappkit";
+
+export const [ClaimRewardsTableByOpportunity, ClaimRewardsByOpportunityRow, claimRewardsByOpportunityColumns] =
+  createTable({
+    positions: {
+      name: "Positions",
+      size: "minmax(100px,1fr)",
+      compact: "1fr",
+      className: "justify-start",
+      main: true,
+    },
+    // action: {
+    //   name: "Actions",
+    //   size: "minmax(min-content,200px)",
+    //   compactSize: "minmax(min-content,200px)",
+    //   className: "justify-end",
+    // },
+    claimed: {
+      name: "Claimed",
+      size: "minmax(min-content,200px)",
+      compactSize: "minmax(min-content,200px)",
+      className: "justify-end",
+    },
+    unclaimed: {
+      name: "Unclaimed",
+      size: "minmax(min-content,200px)",
+      compactSize: "minmax(min-content,200px)",
+      className: "justify-end",
+    },
+    button: {
+      name: "",
+      size: "minmax(min-content,200px)",
+      compactSize: "minmax(min-content,200px)",
+      className: "justify-end",
+    },
+  });
diff --git a/src/components/element/rewards/byOpportunity/ClaimRewardsTokenTableRowByOpportunity.tsx b/src/components/element/rewards/byOpportunity/ClaimRewardsTokenTableRowByOpportunity.tsx
new file mode 100644
index 0000000..bbdd8f9
--- /dev/null
+++ b/src/components/element/rewards/byOpportunity/ClaimRewardsTokenTableRowByOpportunity.tsx
@@ -0,0 +1,55 @@
+import type { Reward } from "@merkl/api";
+import { Button, type Component, Divider, type GetSet, Group } from "dappkit";
+import OpportuntiyButton from "../../opportunity/OpportunityButton";
+import Token from "../../token/Token";
+import { ClaimRewardsByOpportunityRow } from "./ClaimRewardsTableByOpportunity";
+
+export type ClaimRewardsTokenTableRowProps = Component<{
+  breakdown: Reward["rewards"][number]["breakdowns"][number];
+  token: Reward["rewards"][number]["token"];
+  checkedState?: GetSet<boolean>;
+  showCheckbox?: boolean;
+  from: string;
+  distributor: string;
+}>;
+
+export default function ClaimRewardsTokenTableRowByOpportunity({
+  breakdown,
+  token,
+  checkedState,
+  showCheckbox,
+  from,
+  distributor,
+  ...props
+}: ClaimRewardsTokenTableRowProps) {
+  const unclaimed = breakdown.amount - breakdown.claimed;
+  return (
+    <>
+      <Divider look="soft" />
+      <ClaimRewardsByOpportunityRow
+        {...props}
+        key={breakdown.amount}
+        positionsColumn={<OpportuntiyButton opportunity={breakdown.opportunity} />}
+        // actionColumn={
+        //   !!breakdown.opportunity?.action && <Tag type="action" value={breakdown.opportunity?.action} size="xs" />
+        // }
+        claimedColumn={<Token token={token} amount={breakdown.claimed} format="amount_price" size="xs" />}
+        unclaimedColumn={
+          !!unclaimed && (
+            <Token token={token} amount={breakdown.amount - breakdown.claimed} format="amount_price" size="xs" />
+          )
+        }
+        buttonColumn={
+          <Group size="sm">
+            <Button look="hype" size="sm">
+              Supply
+            </Button>
+            <Button look="base" size="sm">
+              Withdraw
+            </Button>
+          </Group>
+        }
+      />
+    </>
+  );
+}
diff --git a/src/components/element/token/TokenSelect.tsx b/src/components/element/token/TokenSelect.tsx
new file mode 100644
index 0000000..7257925
--- /dev/null
+++ b/src/components/element/token/TokenSelect.tsx
@@ -0,0 +1,75 @@
+import { Group, Icon, Select, type SelectProps, Text, Title, Value } from "packages/dappkit/src";
+import { Fmt } from "packages/dappkit/src/utils/formatter.service";
+import { useMemo } from "react";
+import Token from "./Token";
+
+export type TokenSelectProps = {
+  tokens: (Token & { balance: bigint })[];
+  balances?: boolean;
+} & SelectProps<string>;
+
+export default function TokenSelect({ tokens, balances, ...props }: TokenSelectProps) {
+  const options = useMemo(
+    () =>
+      tokens?.reduce(
+        (obj, token) =>
+          Object.assign(obj, {
+            [token.address]: <Token key={token.address} value token={token} />,
+          }),
+        {},
+      ) ?? {},
+    [tokens],
+  );
+
+  const searchOptions = useMemo(
+    () =>
+      tokens?.reduce(
+        (obj, token) =>
+          Object.assign(obj, {
+            [token.address]: `${token.symbol}-${token.name}-${token.address}`,
+          }),
+        {},
+      ) ?? {},
+    [tokens],
+  );
+
+  const displayOptions = useMemo(
+    () =>
+      tokens?.reduce(
+        (obj, token) =>
+          Object.assign(obj, {
+            [token.address]: (
+              <Group size="xl" className="w-full justify-between items-center gap-xl*2">
+                <Group className="flex-grow items-center">
+                  <Title h={3}>
+                    <Icon size="lg" src={token.icon} />
+                  </Title>
+                  <Group className="flex-col !gap-0">
+                    <Text look="bold" bold>
+                      {token.name}
+                    </Text>
+                    <Text look="soft" className="flex gap-sm">
+                      {token.symbol} - <Value format="$0,0.#a">{Fmt.toPrice(token.balance, token)}</Value> -{" "}
+                      <Value format="0,0.###a">{Fmt.toNumber(token.balance, token.decimals)}</Value>{" "}
+                    </Text>
+                  </Group>
+                </Group>
+              </Group>
+            ),
+          }),
+        {},
+      ) ?? {},
+    [tokens],
+  );
+
+  return (
+    <Select
+      search
+      placeholder="Token"
+      options={options}
+      searchOptions={searchOptions}
+      displayOptions={displayOptions}
+      {...props}
+    />
+  );
+}
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index b7a5cba..333bfc5 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,12 +1,12 @@
 import { Button, Container, Dropdown, Group, Icon, WalletButton, useTheme } from "dappkit";
 import { Image } from "dappkit";
-import customerDarkLogo from "src/customer/assets/images/customer-dark-logo.svg";
-import customerLogo from "src/customer/assets/images/customer-logo.svg";
-
 import { motion } from "framer-motion";
 import config from "merkl.config";
 import { useWalletContext } from "packages/dappkit/src/context/Wallet.context";
 import { useMemo, useState } from "react";
+import customerDarkLogo from "src/customer/assets/images/customer-dark-logo.svg";
+import customerLogo from "src/customer/assets/images/customer-logo.svg";
+import { v4 as uuidv4 } from "uuid";
 import SwitchMode from "../element/SwitchMode";
 import SearchBar from "../element/functions/SearchBar";
 import { LayerMenu } from "./LayerMenu";
@@ -47,7 +47,7 @@ export default function Header() {
         claims: {
           icon: "RiDashboardFill",
           route: user ? `/users/${user}` : "/users",
-          key: crypto.randomUUID(),
+          key: uuidv4(),
         },
       },
       rest,
diff --git a/src/config/opportunity.ts b/src/config/opportunity.ts
new file mode 100644
index 0000000..ceb9bfc
--- /dev/null
+++ b/src/config/opportunity.ts
@@ -0,0 +1 @@
+export type OpportunityNavigationMode = "direct" | "supply";
diff --git a/src/config/rewards.ts b/src/config/rewards.ts
new file mode 100644
index 0000000..eddb483
--- /dev/null
+++ b/src/config/rewards.ts
@@ -0,0 +1 @@
+export type RewardsNavigationMode = "opportunity" | "chain";
diff --git a/src/config/type.ts b/src/config/type.ts
index aa29dc9..0f1d189 100644
--- a/src/config/type.ts
+++ b/src/config/type.ts
@@ -1,6 +1,8 @@
 import type * as RemixIcon from "@remixicon/react";
 import type { Mode, Themes, sizeScale } from "dappkit";
 import { createConfig as createWagmiConfig } from "wagmi";
+import type { OpportunityNavigationMode } from "./opportunity";
+import type { RewardsNavigationMode } from "./rewards";
 
 export type routesType = {
   [key: string]: {
@@ -21,6 +23,8 @@ export type MerklConfig<T extends Themes> = {
   tags?: string[];
   defaultTheme: keyof T;
   deposit?: boolean;
+  opportunityNavigationMode?: OpportunityNavigationMode;
+  rewardsNavigationMode?: RewardsNavigationMode;
   modes: Mode[];
   wagmi: Parameters<typeof createWagmiConfig>["0"];
   appName: string;
diff --git a/src/hooks/resources/useOpportunity.tsx b/src/hooks/resources/useOpportunity.tsx
index 712aa4c..ad30a75 100644
--- a/src/hooks/resources/useOpportunity.tsx
+++ b/src/hooks/resources/useOpportunity.tsx
@@ -3,6 +3,7 @@ import type { Token } from "@merkl/api";
 import { Icon, Value } from "dappkit";
 import { useMemo } from "react";
 import type { TagType } from "src/components/element/Tag";
+import { v4 as uuidv4 } from "uuid";
 
 export default function useOpportunity(opportunity: Opportunity) {
   const tags = useMemo(() => {
@@ -40,6 +41,14 @@ export default function useOpportunity(opportunity: Opportunity) {
     [opportunity],
   );
 
+  const rewardIcons = useMemo(
+    () =>
+      opportunity.rewardsRecord?.breakdowns?.map(({ token: { icon, address } }) => (
+        <Icon key={address} rounded src={icon} />
+      )) ?? [],
+    [opportunity],
+  );
+
   const description = useMemo(() => {
     const tokenSymbols = opportunity?.tokens?.reduce((str, token, index, tokens) => {
       const noSeparator = index === tokens.length || index === 0;
@@ -76,7 +85,7 @@ export default function useOpportunity(opportunity: Opportunity) {
                 {opportunity.dailyRewards}
               </Value>
             ),
-            key: crypto.randomUUID(),
+            key: uuidv4(),
           },
           !!opportunity.apr && {
             label: "APR",
@@ -85,7 +94,7 @@ export default function useOpportunity(opportunity: Opportunity) {
                 {opportunity.apr / 100}
               </Value>
             ),
-            key: crypto.randomUUID(),
+            key: uuidv4(),
           },
           !!opportunity.tvl && {
             label: "Total value locked",
@@ -94,7 +103,7 @@ export default function useOpportunity(opportunity: Opportunity) {
                 {opportunity.tvl}
               </Value>
             ),
-            key: crypto.randomUUID(),
+            key: uuidv4(),
           },
         ];
     }
@@ -112,9 +121,21 @@ export default function useOpportunity(opportunity: Opportunity) {
       const breakdowns = opportunity.rewardsRecord.breakdowns.filter(({ token: t }) => t.address === address);
       const amount = breakdowns?.reduce((sum, breakdown) => sum + BigInt(breakdown.amount), 0n);
 
-      return { token: breakdowns?.[0]?.token, amount } satisfies { token: Token; amount: bigint };
+      return { token: breakdowns?.[0]?.token, amount } satisfies {
+        token: Token;
+        amount: bigint;
+      };
     });
   }, [opportunity]);
 
-  return { link, icons, description, rewardsBreakdown, ...opportunity, tags, herosData };
+  return {
+    link,
+    icons,
+    rewardIcons,
+    description,
+    rewardsBreakdown,
+    ...opportunity,
+    tags,
+    herosData,
+  };
 }
diff --git a/src/hooks/useBalances.tsx b/src/hooks/useBalances.tsx
new file mode 100644
index 0000000..c1ac71d
--- /dev/null
+++ b/src/hooks/useBalances.tsx
@@ -0,0 +1,56 @@
+import { useWalletContext } from "packages/dappkit/src/context/Wallet.context";
+import { Fmt } from "packages/dappkit/src/utils/formatter.service";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { api as clientApi } from "src/api/index.client";
+import { InteractionService } from "src/api/services/interaction.service";
+
+type TokenBalances = Awaited<ReturnType<typeof clientApi.v4.tokens.balances.get>>["data"];
+
+export default function useBalances(chainId?: number, userAddress?: string) {
+  const { chainId: connectedChainId, address: connectedAddress } = useWalletContext();
+
+  const address = useMemo(() => userAddress ?? connectedAddress, [userAddress, connectedAddress]);
+  const chain = useMemo(() => chainId ?? connectedChainId, [chainId, connectedChainId]);
+
+  const [chainBalances, setChainBalances] = useState<{
+    [chainId: number]: { [address: string]: TokenBalances };
+  }>();
+
+  const balances = useMemo(() => {
+    if (!chainId || !address) return;
+    return chainBalances?.[chainId]?.[address];
+  }, [chainId, address, chainBalances]);
+
+  useEffect(() => {
+    async function fetchTokenBalances() {
+      if (!chain || !address) return;
+
+      try {
+        const tokens = await InteractionService.getBalances(chain, address);
+
+        setChainBalances(b =>
+          Object.assign(b ? { ...b } : {}, {
+            [chain]: Object.assign(b?.[chain] ?? {}, {
+              [address]: tokens.sort((a, b) => Fmt.toPrice(b.balance, b) - Fmt.toPrice(a.balance, a)),
+            }),
+          }),
+        );
+      } catch (_err) {
+        console.log("ERROR");
+      }
+    }
+
+    fetchTokenBalances();
+  }, [chain, address]);
+
+  const balanceOf = useCallback(
+    (token: { address?: string; symbol?: string }) =>
+      balances?.find(({ address, symbol }) => {
+        if (token.address && address?.toLowerCase?.() === token?.address?.toLowerCase?.()) return true;
+        if (token.symbol && symbol?.toLowerCase?.() === token?.symbol?.toLowerCase?.()) return true;
+      }),
+    [balances],
+  );
+
+  return { balanceOf, balances };
+}
diff --git a/src/hooks/useInteractionTarget.tsx b/src/hooks/useInteractionTarget.tsx
new file mode 100644
index 0000000..eea61a6
--- /dev/null
+++ b/src/hooks/useInteractionTarget.tsx
@@ -0,0 +1,26 @@
+//TODO: export from api index
+import type { InteractionTarget } from "@merkl/api/dist/src/modules/v4/interaction/interaction.model";
+import { useEffect, useState } from "react";
+import { InteractionService } from "src/api/services/interaction.service";
+
+export default function useInteractionTarget(chainId?: number, protocolId?: string, identifier?: string) {
+  const [loading, setLoading] = useState(true);
+  const [target, setTarget] = useState<InteractionTarget | undefined>();
+
+  useEffect(() => {
+    async function fetchTarget() {
+      if (!chainId || !protocolId || !identifier) return;
+
+      setLoading(true);
+
+      const _target = await InteractionService.getTarget(chainId, protocolId, identifier);
+
+      if (_target) setTarget(_target);
+      setLoading(false);
+    }
+
+    fetchTarget();
+  }, [chainId, protocolId, identifier]);
+
+  return { target, loading };
+}
diff --git a/src/hooks/useInteractionTransaction.tsx b/src/hooks/useInteractionTransaction.tsx
new file mode 100644
index 0000000..9945df2
--- /dev/null
+++ b/src/hooks/useInteractionTransaction.tsx
@@ -0,0 +1,49 @@
+import type { Token } from "@merkl/api";
+//TODO: export from api index
+import type { InteractionTarget } from "@merkl/api/dist/src/modules/v4/interaction/interaction.model";
+import { useWalletContext } from "packages/dappkit/src/context/Wallet.context";
+import { useEffect, useMemo, useState } from "react";
+import type { api as clientApi } from "src/api/index.client";
+import { InteractionService } from "src/api/services/interaction.service";
+
+type Payload = Parameters<typeof clientApi.v4.interaction.transaction.get>[0]["query"];
+type Transaction = Awaited<ReturnType<typeof clientApi.v4.interaction.transaction.get>>["data"];
+
+export default function useInteractionTransaction(
+  chainId: number,
+  protocolId?: string,
+  target?: InteractionTarget,
+  tokenIn?: Token,
+  amount?: bigint,
+  userAddress?: string,
+) {
+  const { address: connectedAddress } = useWalletContext();
+  const address = useMemo(() => userAddress ?? connectedAddress, [userAddress, connectedAddress]);
+
+  const [transaction, setTransaction] = useState<Transaction>();
+  const payload: Payload | undefined = useMemo(() => {
+    if (!chainId || !protocolId || !address || !amount || !tokenIn || !target?.identifier) return;
+    return {
+      chainId,
+      protocolId,
+      identifier: target?.identifier,
+      userAddress: address,
+      fromAmount: amount?.toString(),
+      fromTokenAddress: tokenIn?.address,
+    };
+  }, [chainId, protocolId, target, address, tokenIn, amount]);
+
+  useEffect(() => {
+    async function fetchTransaction() {
+      if (!payload) return;
+
+      const tx = await InteractionService.getTransaction(payload);
+
+      setTransaction(tx);
+    }
+
+    fetchTransaction();
+  }, [payload]);
+
+  return { transaction };
+}
diff --git a/src/hooks/useMerklSearch.tsx b/src/hooks/useMerklSearch.tsx
index 19e8316..e4a8b7a 100644
--- a/src/hooks/useMerklSearch.tsx
+++ b/src/hooks/useMerklSearch.tsx
@@ -4,7 +4,12 @@ import { api } from "src/api/index.client";
 
 const searchables = ["opportunity", "token", "protocol", "chain"] as const;
 export type Searchable = (typeof searchables)[number];
-export type Results = { chain: Chain[]; protocol: Protocol[]; opportunity: Opportunity[]; token: Token[] };
+export type Results = {
+  chain: Chain[];
+  protocol: Protocol[];
+  opportunity: Opportunity[];
+  token: Token[];
+};
 
 export function useMerklSearch(input: string, include?: Searchable[]) {
   const [resultCache, setResultCache] = useState<{ [input: string]: Results }>({});
@@ -14,7 +19,9 @@ export function useMerklSearch(input: string, include?: Searchable[]) {
     (_input: string) => {
       if (!_input || _input?.replaceAll(" ", "") === "") return;
 
-      const fetchers: { [S in Searchable]: (i: string) => Promise<Results[S] | null> } = {
+      const fetchers: {
+        [S in Searchable]: (i: string) => Promise<Results[S] | null>;
+      } = {
         chain: async i => (await api.v4.chains.index.get({ query: { search: i } }))?.data,
         opportunity: async i => (await api.v4.opportunities.index.get({ query: { name: i } }))?.data,
         protocol: async i => (await api.v4.protocols.index.get({ query: { name: i } }))?.data,
diff --git a/src/hooks/useParticipate.tsx b/src/hooks/useParticipate.tsx
index 31daf00..2ca0ed7 100644
--- a/src/hooks/useParticipate.tsx
+++ b/src/hooks/useParticipate.tsx
@@ -1,152 +1,31 @@
 import { useWalletContext } from "dappkit/src/context/Wallet.context";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { api as clientApi } from "src/api/index.client";
-import { useSendTransaction } from "wagmi";
-
-type Targets = Awaited<ReturnType<typeof clientApi.v4.interaction.targets.get>>["data"];
-type TokenBalances = Awaited<ReturnType<typeof clientApi.v4.tokens.balances.get>>["data"];
-type Payload = Parameters<typeof clientApi.v4.interaction.transaction.get>[0]["query"];
-type Transaction = Awaited<ReturnType<typeof clientApi.v4.interaction.transaction.get>>["data"];
+import { useMemo } from "react";
+import useBalances from "./useBalances";
+import useInteractionTarget from "./useInteractionTarget";
 
 export default function useParticipate(
-  chainId?: number,
+  chainId: number,
   protocolId?: string,
   identifier?: string,
   tokenAddress?: string,
-  amount?: bigint,
 ) {
-  const [balances, setBalances] = useState<{
-    [chainId: number]: { [address: string]: TokenBalances };
-  }>();
-  const [targets, setTargets] = useState<{
-    [chainId: number]: { [protocolId: string]: Targets };
-  }>();
-  const [transaction, setTransaction] = useState<Transaction>();
+  const { target, loading: targetLoading } = useInteractionTarget(chainId, protocolId, identifier);
+  const { balances } = useBalances(chainId);
 
   const { address } = useWalletContext();
-  const { sendTransaction } = useSendTransaction();
-
-  const target = useMemo(() => {
-    if (!chainId || !protocolId) return;
-
-    return targets?.[chainId]?.[protocolId]?.find?.(
-      ({ identifier: id }) => id?.toLowerCase?.() === identifier?.toLowerCase?.(),
-    );
-  }, [chainId, protocolId, targets, identifier]);
-
-  const balance = useMemo(() => {
-    if (!chainId || !address) return;
-    return balances?.[chainId]?.[address];
-  }, [chainId, address, balances]);
 
   const token = useMemo(() => {
-    return balance?.find(({ address }) => address === tokenAddress);
-  }, [tokenAddress, balance]);
-
-  useEffect(() => {
-    async function fetchTargets() {
-      console.log(chainId, protocolId, identifier);
-
-      if (!chainId || !protocolId || !identifier) return;
-
-      const { data: targets, ...res } = await clientApi.v4.interaction.targets.get({
-        query: { chainId, protocolId, identifier },
-      });
-
-      if (res.status === 200)
-        setTargets(t => {
-          return Object.assign(t ? { ...t } : {}, {
-            [chainId]: Object.assign(t?.[chainId] ?? {}, {
-              [protocolId]: targets,
-            }),
-          });
-        });
-    }
-
-    fetchTargets();
-  }, [chainId, protocolId, identifier]);
-
-  useEffect(() => {
-    async function fetchTokenBalances() {
-      if (!chainId || !address) return;
-
-      const { data: tokens, ...res } = await clientApi.v4.tokens.balances.get({
-        query: { chainId: chainId, userAddress: address },
-      });
-
-      if (res.status === 200)
-        setBalances(b =>
-          Object.assign(b ? { ...b } : {}, {
-            [chainId]: Object.assign(b?.[chainId] ?? {}, { [address]: tokens }),
-          }),
-        );
-    }
-
-    fetchTokenBalances();
-  }, [chainId, address]);
-
-  const payload: Payload | undefined = useMemo(() => {
-    if (!chainId || !protocolId || !address || !amount || !tokenAddress || !target?.identifier) return;
-
-    const token = balance?.find(({ address: a }) => a === tokenAddress);
-
-    if (!token) return;
-
-    return {
-      chainId,
-      protocolId,
-      identifier: target?.identifier,
-      userAddress: address,
-      fromAmount: amount?.toString(),
-      fromTokenAddress: tokenAddress,
-    };
-  }, [chainId, protocolId, target, address, balance, tokenAddress, amount]);
-
-  useEffect(() => {
-    async function fetchTransaction() {
-      if (!payload) return;
-
-      const { data: transaction, ...res } = await clientApi.v4.interaction.transaction.get({ query: payload });
-
-      console.log("tcx", transaction);
-
-      if (res.status === 200) setTransaction(transaction);
-    }
-
-    fetchTransaction();
-  }, [payload]);
-
-  const approve = useCallback(() => {
-    if (!transaction) return;
-
-    const res = sendTransaction({
-      to: transaction.approval.to as `0x${string}`,
-      data: transaction.approval.data,
-    });
-
-    return res;
-  }, [transaction, sendTransaction]);
-
-  const deposit = useCallback(() => {
-    if (!transaction) return;
-
-    const res = sendTransaction({
-      to: transaction.transaction.to as `0x${string}`,
-      data: transaction?.transaction.data as `0x${string}`,
-    });
+    return balances?.find(({ address }) => address === tokenAddress);
+  }, [tokenAddress, balances]);
 
-    console.info(res);
-  }, [transaction, sendTransaction]);
+  const loading = useMemo(() => targetLoading, [targetLoading]);
 
   return {
     target,
-    targets,
     token,
-    balance,
+    balance: balances,
     balances,
     address,
-    deposit,
-    approve,
-    transaction,
+    loading,
   };
 }
diff --git a/src/routes/_merkl.chains.(all).tsx b/src/routes/_merkl.chains.(all).tsx
index 748ea14..f291cc3 100644
--- a/src/routes/_merkl.chains.(all).tsx
+++ b/src/routes/_merkl.chains.(all).tsx
@@ -9,7 +9,7 @@ export const meta: MetaFunction = () => {
 export default function Index() {
   return (
     <Hero
-      icons={[{ remix: "RiExchange2Line" }]}
+      icons={[{ remix: "RiExchange2Line", className: "text-main-11 !w-lg*4 !h-lg*4" }]}
       title={"Chains"}
       breadcrumbs={[{ link: "/chains", name: "Chains" }]}
       description={"Chains integrated by Merkl"}
@@ -18,10 +18,10 @@ export default function Index() {
       //   {
       //     data: "25",
       //     label: "Live opportunities",
-      //     key: crypto.randomUUID(),
+      //     key: uuidv4(),
       //   },
-      //   { data: "400%", label: "APR", key: crypto.randomUUID() },
-      //   { data: "$4k", label: "Daily rewards", key: crypto.randomUUID() },
+      //   { data: "400%", label: "APR", key: uuidv4() },
+      //   { data: "$4k", label: "Daily rewards", key: uuidv4() },
       // ]}
     >
       <Outlet />
diff --git a/src/routes/_merkl.opportunities.$chain.$type.$id.(overview).tsx b/src/routes/_merkl.opportunities.$chain.$type.$id.(overview).tsx
index cbbee20..348518c 100644
--- a/src/routes/_merkl.opportunities.$chain.$type.$id.(overview).tsx
+++ b/src/routes/_merkl.opportunities.$chain.$type.$id.(overview).tsx
@@ -1,9 +1,8 @@
 import { useOutletContext } from "@remix-run/react";
+import { Box, Container, Divider, Group, Space, Title } from "dappkit";
 import merklConfig from "merkl.config";
-import { Container, Group, Space } from "packages/dappkit/src";
-import { Suspense } from "react";
 import CampaignLibrary from "src/components/element/campaign/CampaignLibrary";
-import Participate from "src/components/element/participate/Participate.client";
+import Participate from "src/components/element/participate/Participate";
 import { ErrorContent } from "src/components/layout/ErrorContent";
 import type { OutletContextOpportunity } from "./_merkl.opportunities.$chain.$type.$id";
 
@@ -20,9 +19,15 @@ export default function Index() {
         {/* <Group className="grid grid-cols-1 gap-md md:grid-cols-[1fr,300px]"> */}
         {merklConfig.deposit && (
           <Group className="flex-col">
-            <Suspense>
-              <Participate opportunity={opportunity} />
-            </Suspense>
+            <Box className="w-full">
+              <Group className="p-md">
+                <Title className="!text-main-11" h={5}>
+                  Supply
+                </Title>
+              </Group>
+              <Divider horizontal look="hype" />
+              <Participate displayMode={"deposit"} opportunity={opportunity} />
+            </Box>
           </Group>
         )}
       </Group>
diff --git a/src/routes/_merkl.opportunities.$chain.$type.$id.leaderboard.tsx b/src/routes/_merkl.opportunities.$chain.$type.$id.leaderboard.tsx
index edfa5e1..23a4932 100644
--- a/src/routes/_merkl.opportunities.$chain.$type.$id.leaderboard.tsx
+++ b/src/routes/_merkl.opportunities.$chain.$type.$id.leaderboard.tsx
@@ -1,7 +1,7 @@
 import type { Campaign } from "@merkl/api";
 import type { LoaderFunctionArgs } from "@remix-run/node";
 import { json, useLoaderData } from "@remix-run/react";
-import { Box, Container, Group, Hash, Icon, OverrideTheme, PrimitiveTag, Select, Space, Title, Value } from "dappkit";
+import { Box, Container, Group, Icon, OverrideTheme, PrimitiveTag, Select, Space, Title, Value } from "dappkit";
 import moment from "moment";
 import Time from "packages/dappkit/src/components/primitives/Time";
 import { useCallback, useMemo } from "react";
@@ -34,6 +34,7 @@ export async function loader({ params: { id, type, chain: chainId }, request }:
 
   const { rewards, count, total } = await RewardService.getManyFromRequest(request, {
     chainId: chain.id,
+    campaignId: campaigns?.[0]?.campaignId,
   });
 
   return json({
@@ -97,8 +98,6 @@ export default function Index() {
             <Time timestamp={Number(campaign.endTimestamp) * 1000} />
           </PrimitiveTag>
 
-          <Hash format="short">{campaign.campaignId}</Hash>
-
           <Group>
             <Token token={campaign.rewardToken} amount={dailyRewards(campaign)} format="amount_price" value />
           </Group>
diff --git a/src/routes/_merkl.opportunities.$chain.$type.$id.tsx b/src/routes/_merkl.opportunities.$chain.$type.$id.tsx
index fd7389f..f56ed0f 100644
--- a/src/routes/_merkl.opportunities.$chain.$type.$id.tsx
+++ b/src/routes/_merkl.opportunities.$chain.$type.$id.tsx
@@ -10,6 +10,7 @@ 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";
+import { v4 as uuidv4 } from "uuid";
 
 export async function loader({ params: { id, type, chain: chainId } }: LoaderFunctionArgs) {
   if (!chainId || !id || !type) throw "";
@@ -46,7 +47,7 @@ export default function Index() {
 
     return spaced
       .map(str => {
-        const key = str + crypto.randomUUID();
+        const key = str + uuidv4();
         if (!str.match(/[\p{Letter}\p{Mark}]+/gu))
           return [
             <span key={key} className="text-main-11">
@@ -80,11 +81,11 @@ export default function Index() {
         title={styleName}
         description={description}
         tabs={[
-          { label: "Overview", link, key: crypto.randomUUID() },
+          { label: "Overview", link, key: uuidv4() },
           {
             label: "Leaderboard",
             link: `${link}/leaderboard?campaignId=${currentLiveCampaign?.campaignId}`,
-            key: crypto.randomUUID(),
+            key: uuidv4(),
           },
         ]}
         tags={tags.map(tag => (
diff --git a/src/routes/_merkl.protocols.(all).tsx b/src/routes/_merkl.protocols.(all).tsx
index f15809e..dccb320 100644
--- a/src/routes/_merkl.protocols.(all).tsx
+++ b/src/routes/_merkl.protocols.(all).tsx
@@ -9,7 +9,7 @@ export const meta: MetaFunction = () => {
 export default function Index() {
   return (
     <Hero
-      icons={[{ remix: "RiContactsBook2Line" }]}
+      icons={[{ remix: "RiCommandLine", className: "text-main-11 !w-lg*4 !h-lg*4" }]}
       title={"Protocols"}
       breadcrumbs={[{ link: "/protocols", name: "Protocols" }]}
       description={"Protocols integrated by Merkl"}
@@ -18,10 +18,10 @@ export default function Index() {
       //   {
       //     data: "25",
       //     label: "Live opportunities",
-      //     key: crypto.randomUUID(),
+      //     key: uuidv4(),
       //   },
-      //   { data: "400%", label: "APR", key: crypto.randomUUID() },
-      //   { data: "$4k", label: "Daily rewards", key: crypto.randomUUID() },
+      //   { data: "400%", label: "APR", key: uuidv4() },
+      //   { data: "$4k", label: "Daily rewards", key: uuidv4() },
       // ]}
     >
       <Outlet />
diff --git a/src/routes/_merkl.tokens.$symbol.tsx b/src/routes/_merkl.tokens.$symbol.tsx
index 9b4432e..5ce7d7e 100644
--- a/src/routes/_merkl.tokens.$symbol.tsx
+++ b/src/routes/_merkl.tokens.$symbol.tsx
@@ -22,7 +22,13 @@ export async function loader({ params: { symbol } }: LoaderFunctionArgs) {
 
   const { sum: dailyRewards } = await OpportunityService.getAggregate({ tokens: symbol }, "dailyRewards");
 
-  return json({ tokens, chains, dailyRewards, maxApr: opportunitiesByApr?.[0]?.apr, count });
+  return json({
+    tokens,
+    chains,
+    dailyRewards,
+    maxApr: opportunitiesByApr?.[0]?.apr,
+    count,
+  });
 }
 
 export const clientLoader = Cache.wrap("token", 300);
diff --git a/src/routes/_merkl.tokens.(all).tsx b/src/routes/_merkl.tokens.(all).tsx
index c2e1403..afb8e96 100644
--- a/src/routes/_merkl.tokens.(all).tsx
+++ b/src/routes/_merkl.tokens.(all).tsx
@@ -18,10 +18,10 @@ export default function Index() {
       //   {
       //     data: "25",
       //     label: "Live opportunities",
-      //     key: crypto.randomUUID(),
+      //     key: uuidv4(),
       //   },
-      //   { data: "400%", label: "APR", key: crypto.randomUUID() },
-      //   { data: "$4k", label: "Daily rewards", key: crypto.randomUUID() },
+      //   { data: "400%", label: "APR", key: uuidv4() },
+      //   { data: "$4k", label: "Daily rewards", key: uuidv4() },
       // ]}
     >
       <Outlet />
diff --git a/src/routes/_merkl.users.$address.$chainId.liquidity.tsx b/src/routes/_merkl.users.$address.$chainId.liquidity.tsx
new file mode 100644
index 0000000..c2d73ce
--- /dev/null
+++ b/src/routes/_merkl.users.$address.$chainId.liquidity.tsx
@@ -0,0 +1,26 @@
+import type { LoaderFunctionArgs } from "@remix-run/node";
+import { json, useLoaderData } from "@remix-run/react";
+import { Container } from "dappkit";
+import { LiquidityService } from "src/api/services/liquidity.service";
+import PositionLibrary from "src/components/element/position/PositionLibrary";
+import { isAddress } from "viem";
+
+export async function loader({ params: { address, chainId } }: LoaderFunctionArgs) {
+  if (!address || !isAddress(address)) throw "";
+  if (!chainId && Number(chainId).toString() === chainId) throw "";
+
+  const positions = await LiquidityService.getForUser({
+    address,
+    chainId: Number(chainId),
+  });
+  return json({ positions });
+}
+
+export default function Index() {
+  const { positions } = useLoaderData<typeof loader>();
+  return (
+    <Container>
+      <PositionLibrary positions={positions} />
+    </Container>
+  );
+}
diff --git a/src/routes/_merkl.users.$address.(rewards).tsx b/src/routes/_merkl.users.$address.(rewards).tsx
index ae9f166..19f12a7 100644
--- a/src/routes/_merkl.users.$address.(rewards).tsx
+++ b/src/routes/_merkl.users.$address.(rewards).tsx
@@ -2,10 +2,11 @@ import type { LoaderFunctionArgs } from "@remix-run/node";
 import { json, useLoaderData, useOutletContext } from "@remix-run/react";
 import { Container, Space } from "dappkit";
 import ClaimRewardsLibrary from "src/components/element/rewards/ClaimRewardsLibrary";
+import { isAddress } from "viem";
 import type { OutletContextRewards } from "./_merkl.users.$address";
 
 export async function loader({ params: { address } }: LoaderFunctionArgs) {
-  if (!address) throw "";
+  if (!address || !isAddress(address)) throw "";
 
   return json({ address });
 }
diff --git a/src/routes/_merkl.users.$address.claims.tsx b/src/routes/_merkl.users.$address.claims.tsx
index e41ead2..c517a81 100644
--- a/src/routes/_merkl.users.$address.claims.tsx
+++ b/src/routes/_merkl.users.$address.claims.tsx
@@ -1,5 +1,23 @@
-import { Container } from "dappkit";
+import type { LoaderFunctionArgs } from "@remix-run/node";
+import { json, useLoaderData } from "@remix-run/react";
+import { Container, Space } from "dappkit";
+import { ClaimsService } from "src/api/services/claims.service";
+import HistoricalClaimsLibrary from "src/components/element/historicalClaimsLibrary/HistoricalClaimsLibrary";
+import { isAddress } from "viem";
+
+export async function loader({ params: { address } }: LoaderFunctionArgs) {
+  if (!address || !isAddress(address)) throw "";
+  const claims = await ClaimsService.getForUser(address);
+  return json({ claims });
+}
 
 export default function Index() {
-  return <Container>claims</Container>;
+  const { claims } = useLoaderData<typeof loader>();
+
+  return (
+    <Container>
+      <Space size="md" />
+      <HistoricalClaimsLibrary claims={claims} />
+    </Container>
+  );
 }
diff --git a/src/routes/_merkl.users.$address.liquidity.tsx b/src/routes/_merkl.users.$address.liquidity.tsx
deleted file mode 100644
index 0501867..0000000
--- a/src/routes/_merkl.users.$address.liquidity.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Container } from "dappkit";
-
-export default function Index() {
-  return <Container>liquidity</Container>;
-}
diff --git a/src/routes/_merkl.users.$address.tsx b/src/routes/_merkl.users.$address.tsx
index 1dd2f3d..7af1e74 100644
--- a/src/routes/_merkl.users.$address.tsx
+++ b/src/routes/_merkl.users.$address.tsx
@@ -9,12 +9,13 @@ import Hero from "src/components/composite/Hero";
 import AddressEdit from "src/components/element/AddressEdit";
 import useReward from "src/hooks/resources/useReward";
 import useRewards from "src/hooks/resources/useRewards";
+import { v4 as uuidv4 } from "uuid";
+import { isAddress } from "viem";
 
 export async function loader({ params: { address } }: LoaderFunctionArgs) {
-  if (!address) throw "";
+  if (!address || !isAddress(address)) throw "";
 
-  //TODO: use a ligther route
-  const rewards = await RewardService.getForUser(address);
+  const rewards = await RewardService.getForUser(address, 1);
 
   return json({ rewards, address });
 }
@@ -91,7 +92,7 @@ export default function Index() {
           </Group>
         </Group>
       }
-      description={"Check your liquidity positions and claim your rewards"}
+      description={""}
       tabs={[
         {
           label: (
@@ -101,6 +102,26 @@ export default function Index() {
             </>
           ),
           link: `/users/${address}`,
+          key: uuidv4(),
+        },
+        {
+          label: (
+            <>
+              <Icon size="sm" remix="RiDropFill" />
+              Liquidity
+            </>
+          ),
+          link: `/users/${address}/${chainId}/liquidity`,
+          key: crypto.randomUUID(),
+        },
+        {
+          label: (
+            <>
+              <Icon size="sm" remix="RiListCheck3" />
+              Claims
+            </>
+          ),
+          link: `/users/${address}/claims`,
           key: crypto.randomUUID(),
         },
       ]}>
diff --git a/src/routes/_merkl.users.(none).tsx b/src/routes/_merkl.users.(none).tsx
index a06afbc..f9dede8 100644
--- a/src/routes/_merkl.users.(none).tsx
+++ b/src/routes/_merkl.users.(none).tsx
@@ -3,6 +3,8 @@ import { Icon } from "dappkit";
 import { useWalletContext } from "packages/dappkit/src/context/Wallet.context";
 import { useState } from "react";
 import Hero from "src/components/composite/Hero";
+import { v4 as uuidv4 } from "uuid";
+import { isAddress } from "viem";
 
 export default function Index() {
   const [_isEditingAddress] = useState(false);
@@ -14,38 +16,42 @@ export default function Index() {
       navigation={{ label: "Back to opportunities", link: "/" }}
       title={"Claims"}
       description={"Claim and monitor the rewards awarded through Merkl"}
-      tabs={[
-        {
-          label: (
-            <>
-              <Icon size="sm" remix="RiGift2Fill" />
-              Rewards
-            </>
-          ),
-          link: `/users/${address}`,
-          key: crypto.randomUUID(),
-        },
-        {
-          label: (
-            <>
-              <Icon size="sm" remix="RiDropFill" />
-              Liquidity
-            </>
-          ),
-          link: `/users/${address}/liquidity`,
-          key: crypto.randomUUID(),
-        },
-        {
-          label: (
-            <>
-              <Icon size="sm" remix="RiListCheck3" />
-              Claims
-            </>
-          ),
-          link: `/users/${address}/claims`,
-          key: crypto.randomUUID(),
-        },
-      ]}>
+      tabs={
+        !address || !isAddress(address)
+          ? []
+          : [
+              {
+                label: (
+                  <>
+                    <Icon size="sm" remix="RiGift2Fill" />
+                    Rewards
+                  </>
+                ),
+                link: `/users/${address}`,
+                key: uuidv4(),
+              },
+              {
+                label: (
+                  <>
+                    <Icon size="sm" remix="RiDropFill" />
+                    Liquidity
+                  </>
+                ),
+                link: `/users/${address}/liquidity`,
+                key: uuidv4(),
+              },
+              {
+                label: (
+                  <>
+                    <Icon size="sm" remix="RiListCheck3" />
+                    Claims
+                  </>
+                ),
+                link: `/users/${address}/claims`,
+                key: uuidv4(),
+              },
+            ]
+      }>
       <Outlet />
     </Hero>
   );