diff --git a/cypress/e2e/claim-portal-failure.cy.ts b/cypress/e2e/claim-portal-failure.cy.ts
index 96ab8dd4..d20cd09e 100644
--- a/cypress/e2e/claim-portal-failure.cy.ts
+++ b/cypress/e2e/claim-portal-failure.cy.ts
@@ -18,12 +18,12 @@ describe("Claims Portal Failures", () => {
     });
 
     it("should handle no connected signer", () => {
-      cy.get("#additionalDetails", { timeout: 15000 }).should("be.visible").invoke("click");
+      cy.get(".additional-details", { timeout: 15000 }).first().should("be.visible").invoke("click");
 
-      cy.get("button[id='make-claim']").should("be.visible").click();
-      cy.get("#invalidator").should("not.be.visible");
-      cy.get("#claim-loader").should("not.be.visible");
-      cy.get("#view-claim").should("not.be.visible").and("include.text", "View Claim");
+      cy.get("button.make-claim").first().should("be.visible").click();
+      cy.get(".invalidator").should("not.be.visible");
+      cy.get(".claim-loader").should("not.be.visible");
+      cy.get(".view-claim").should("not.be.visible").and("include.text", "View Claim");
 
       cy.get("body").should("contain.text", "Please connect your wallet to claim this reward.");
     });
@@ -46,11 +46,11 @@ describe("Claims Portal Failures", () => {
     });
 
     it("should handle feedback for a failed wallet provider transaction", () => {
-      cy.get("#additionalDetails", { timeout: 15000 }).should("be.visible").invoke("click");
+      cy.get(".additional-details", { timeout: 15000 }).first().should("be.visible").invoke("click");
 
-      cy.get("button[id='make-claim']").should("be.visible").click();
-      cy.get("#claim-loader").should("be.visible");
-      cy.get("#invalidator").should("not.be.visible");
+      cy.get("button.make-claim").first().should("be.visible").click();
+      cy.get(".claim-loader").first().should("be.visible");
+      cy.get(".invalidator").first().should("not.be.visible");
       // cy.get("#claim-loader").should("not.be.visible"); // gets stuck here
     });
   });
diff --git a/cypress/e2e/claim-portal-non-web3.cy.ts b/cypress/e2e/claim-portal-non-web3.cy.ts
index c1a51c50..e5cd9bf0 100644
--- a/cypress/e2e/claim-portal-non-web3.cy.ts
+++ b/cypress/e2e/claim-portal-non-web3.cy.ts
@@ -14,9 +14,9 @@ describe("Claims Portal Non-Web3", () => {
       cy.visit(`/${claimUrl}`);
       cy.wait(2000);
 
-      cy.get("#invalidator").should("not.be.visible");
-      cy.get("#claim-loader").should("not.be.visible");
-      cy.get("#view-claim").should("not.be.visible");
+      cy.get(".invalidator").should("not.be.visible");
+      cy.get(".claim-loader").should("not.be.visible");
+      cy.get(".view-claim").should("not.be.visible");
 
       cy.get("body", { timeout: 3000 }).should("contain.text", "Please use a web3 enabled browser to collect this reward.");
     });
@@ -79,9 +79,9 @@ function testUserAgent(userAgent: string) {
   });
 
   cy.wait(2000);
-  cy.get("#invalidator").should("not.be.visible");
-  cy.get("#claim-loader").should("not.be.visible");
-  cy.get("#view-claim").should("not.be.visible");
+  cy.get(".invalidator").should("not.be.visible");
+  cy.get(".claim-loader").should("not.be.visible");
+  cy.get(".view-claim").should("not.be.visible");
 
   cy.get("body", { timeout: 3000 }).should("contain.text", "Please use a mobile-friendly Web3 browser such as MetaMask to collect this reward");
 }
diff --git a/cypress/e2e/claim-portal-success.cy.ts b/cypress/e2e/claim-portal-success.cy.ts
index 1f715b3e..b9cb6263 100644
--- a/cypress/e2e/claim-portal-success.cy.ts
+++ b/cypress/e2e/claim-portal-success.cy.ts
@@ -17,21 +17,21 @@ describe("Claims Portal Success", () => {
   });
   describe("Success", () => {
     it("should successfully claim a permit", () => {
-      cy.get("#additionalDetails", { timeout: 15000 }).should("be.visible").invoke("click");
+      cy.get(".additional-details", { timeout: 15000 }).first().should("be.visible").invoke("click");
 
-      cy.get('table[data-make-claim="ok"]').should("exist").and("include.text", "337888.4 WXDAI");
+      cy.get('table[data-make-claim="ok"]').first().should("exist").and("include.text", "337888.4 WXDAI");
 
-      cy.get("button[id='make-claim']").invoke("click");
+      cy.get("button[class='make-claim']").first().invoke("click");
 
-      cy.get("#invalidator").should("not.be.visible");
+      cy.get(".invalidator").first().should("not.be.visible");
 
-      cy.get("#claim-loader").should("be.visible").as("loader");
+      cy.get(".claim-loader").first().should("be.visible").as("loader");
 
       cy.wait(5000); // required for the action to complete
 
-      cy.get("@loader").should("not.be.visible");
+      cy.get("@loader").first().should("not.be.visible");
 
-      cy.get("#view-claim").should("be.visible").and("include.text", "View Claim");
+      cy.get(".view-claim").first().should("be.visible").and("include.text", "View Claim");
 
       // anvil confirms it instantly so there is two notifications
       cy.get("body", { timeout: 15000 }).should("contain.text", "Transaction sent");
@@ -41,10 +41,13 @@ describe("Claims Portal Success", () => {
         win.open = cy.stub().as("open");
       });
 
-      cy.get("#view-claim")
+      cy.get(".view-claim")
+        .first()
         .invoke("click")
         .then(() => {
-          cy.get("@open").should("be.calledWithMatch", /https:\/\/blockscan.com\/tx/);
+          cy.get("@open")
+            .first()
+            .should("be.calledWithMatch", /https:\/\/blockscan.com\/tx/);
         });
     });
   });
@@ -54,17 +57,17 @@ describe("Claims Portal Success", () => {
       cy.visit(`/${notMeantForYouPermit}`).then(() => {
         cy.wait(2000);
       });
-      cy.get("#additionalDetails", { timeout: 15000 }).should("be.visible").invoke("click");
+      cy.get(".additional-details", { timeout: 15000 }).first().should("be.visible").invoke("click");
 
-      cy.get('table[data-make-claim="ok"]').should("exist");
+      cy.get('table[data-make-claim="ok"]').first().should("exist");
 
-      cy.get("button[id='make-claim']").invoke("click");
+      cy.get("button[class='make-claim']").first().invoke("click");
 
-      cy.get("#invalidator").should("not.be.visible");
+      cy.get(".invalidator").first().should("not.be.visible");
 
-      cy.get("#claim-loader").should("be.visible");
+      cy.get(".claim-loader").first().should("be.visible");
 
-      cy.get("#view-claim").should("not.be.visible");
+      cy.get(".view-claim").first().should("not.be.visible");
 
       cy.get("body", { timeout: 15000 }).should("contain.text", "This reward is not for you");
     });
@@ -79,16 +82,16 @@ describe("Claims Portal Success", () => {
       cy.visit(`/${notMeantForYouPermit}`).then(() => {
         cy.wait(2000);
       });
-      cy.get("#additionalDetails", { timeout: 15000 }).should("be.visible").invoke("click");
+      cy.get(".additional-details", { timeout: 15000 }).first().should("be.visible").invoke("click");
 
-      cy.get('table[data-make-claim="ok"]').should("exist");
+      cy.get('table[data-make-claim="ok"]').first().should("exist");
 
-      cy.get("#invalidator").should("be.visible").invoke("click");
+      cy.get(".invalidator").should("be.visible").first().invoke("click");
 
-      cy.get("#claim-loader").should("not.be.visible");
-      cy.get("#view-claim").should("not.be.visible");
+      cy.get(".claim-loader").first().should("not.be.visible");
+      cy.get(".view-claim").first().should("not.be.visible");
 
-      cy.get("body", { timeout: 15000 }).should("contain.text", "Nonce invalidation transaction sent");
+      cy.get("body", { timeout: 15000 }).first().should("contain.text", "Nonce invalidation transaction sent");
     });
   });
 });
diff --git a/static/index.html b/static/index.html
index 9bbb8acc..6c63ef1c 100644
--- a/static/index.html
+++ b/static/index.html
@@ -30,6 +30,7 @@
     <title>Ubiquity Rewards | Ubiquity DAO</title>
     <!-- icons from: https://fonts.google.com/icons weight: 300 optical-size: 24 -->
   </head>
+
   <body>
     <background>
       <div class="gradient"></div>
@@ -67,19 +68,19 @@
             </tr>
           </thead>
           <tbody>
-            <tr id="Amount">
+            <tr class="amount detail">
               <th>
                 <div>Amount</div>
               </th>
-              <td id="rewardAmount">
+              <td class="reward-amount">
                 <div class="loading-message">Loading</div>
               </td>
             </tr>
-            <tr id="Token">
+            <tr class="token detail">
               <th>
                 <div>Token</div>
               </th>
-              <td id="rewardToken">
+              <td class="reward-token">
                 <span class="full">
                   <div></div>
                 </span>
@@ -88,11 +89,11 @@
                 </span>
               </td>
             </tr>
-            <tr id="To">
+            <tr class="to detail">
               <th>
                 <div>For</div>
               </th>
-              <td id="rewardRecipient">
+              <td class="reward-recipient">
                 <span class="full">
                   <div></div>
                 </span>
@@ -104,10 +105,10 @@
                 </span>
               </td>
             </tr>
-            <tr id="additional-details-border">
+            <tr class="additional-details-border">
               <th>
                 <div>
-                  <button id="additionalDetails">
+                  <button class="additional-details">
                     <div>Details</div>
                     <svg class="opener" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
                       <path
@@ -123,8 +124,8 @@
                 </div>
               </th>
               <td>
-                <div id="controls" data-loader="false" data-make-claim="false" data-view-claim="false">
-                  <button id="claim-loader">
+                <div class="controls" data-loader="false" data-make-claim="false" data-view-claim="false">
+                  <button class="claim-loader">
                     <svg
                       version="1.1"
                       id="L9"
@@ -138,9 +139,9 @@
                     >
                       <path fill="#fff" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"></path>
                     </svg>
-                    <div id="claiming-message">Claiming</div>
+                    <div class="claiming-message">Claiming</div>
                   </button>
-                  <button id="make-claim">
+                  <button class="make-claim">
                     <div class="claim-title">Collect</div>
                     <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" id="claim-icon">
                       <path
@@ -149,7 +150,7 @@
                     </svg>
                   </button>
 
-                  <button id="view-claim">
+                  <button class="view-claim">
                     <div class="claim-title">View Claim</div>
                     <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" id="link-icon">
                       <path
@@ -158,7 +159,7 @@
                     </svg>
                   </button>
 
-                  <button id="invalidator">
+                  <button class="invalidator">
                     <div>Void</div>
                     <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
                       <path
@@ -170,28 +171,20 @@
               </td>
             </tr>
           </tbody>
-          <tbody id="additionalDetailsTable"></tbody>
         </table>
       </div>
-      <footer
-        ><figure id="carousel">
-          <div id="prevTx"></div>
-          <div id="rewardsCount"></div>
-          <div id="nextTx"></div>
-        </figure>
-        <div class="footer">
-          <div id="build">
-            <a target="_blank" rel="noopener noreferrer"></a>
-          </div>
-          <div id="faq-icon">
-            <a href="https://github.com/ubiquity/work.ubq.fi/discussions/53" target="_blank">
-              <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
-                <path
-                  d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
-                />
-              </svg>
-            </a>
-          </div>
+      <footer>
+        <div id="build">
+          <a target="_blank" rel="noopener noreferrer"></a>
+        </div>
+        <div id="faq-icon">
+          <a href="https://github.com/ubiquity/work.ubq.fi/discussions/53" target="_blank">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+              <path
+                d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
+              />
+            </svg>
+          </a>
         </div>
       </footer>
     </main>
diff --git a/static/scripts/rewards/app-state.ts b/static/scripts/rewards/app-state.ts
index 54c0c354..1c992b68 100644
--- a/static/scripts/rewards/app-state.ts
+++ b/static/scripts/rewards/app-state.ts
@@ -17,10 +17,6 @@ export class AppState {
     this._signer = value;
   }
 
-  get networkId(): number | null {
-    return this.reward?.networkId || null;
-  }
-
   get provider(): JsonRpcProvider {
     return this._provider;
   }
@@ -33,29 +29,11 @@ export class AppState {
     return this._currentIndex;
   }
 
-  get reward(): Permit {
-    return this.rewardIndex < this.claims.length ? this.claims[this.rewardIndex] : this.claims[0];
-  }
-
-  get permitNetworkId() {
-    return this.reward?.networkId;
-  }
-
-  get currentExplorerUrl(): string {
-    if (!this.reward) {
+  getCurrentExplorerUrl(claim: Permit): string {
+    if (!claim) {
       return "https://blockscan.com";
     }
-    return networkExplorers[this.reward.networkId] || "https://blockscan.com";
-  }
-
-  nextPermit(): Permit | null {
-    this._currentIndex = Math.min(this.claims.length - 1, this.rewardIndex + 1);
-    return this.reward;
-  }
-
-  previousPermit(): Permit | null {
-    this._currentIndex = Math.max(0, this._currentIndex - 1);
-    return this.reward;
+    return networkExplorers[claim.networkId] || "https://blockscan.com";
   }
 }
 
diff --git a/static/scripts/rewards/init.ts b/static/scripts/rewards/init.ts
index 75c6a308..b2d599db 100644
--- a/static/scripts/rewards/init.ts
+++ b/static/scripts/rewards/init.ts
@@ -7,7 +7,7 @@ displayCommitHash();
 grid(document.getElementById("grid") as HTMLElement, gridLoadedCallback); // @DEV: display grid background
 readClaimDataFromUrl(app).catch(console.error); // @DEV: read claim data from URL
 
-const footer = document.querySelector(".footer") as Element;
+const footer = document.querySelector("footer") as Element;
 footer.classList.add("ready");
 
 // cSpell:ignore llback
diff --git a/static/scripts/rewards/render-transaction/claim-rewards-pagination.ts b/static/scripts/rewards/render-transaction/claim-rewards-pagination.ts
deleted file mode 100644
index 37735ba5..00000000
--- a/static/scripts/rewards/render-transaction/claim-rewards-pagination.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { app } from "../app-state";
-import { getMakeClaimButton } from "../toaster";
-import { table } from "./read-claim-data-from-url";
-import { renderTransaction } from "./render-transaction";
-import { removeAllEventListeners } from "./utils";
-
-const nextTxButton = document.getElementById("nextTx");
-const prevTxButton = document.getElementById("prevTx");
-
-export function claimRewardsPagination(rewardsCount: HTMLElement) {
-  rewardsCount.innerHTML = `${app.rewardIndex + 1}/${app.claims.length} reward`;
-  if (nextTxButton) nextTxButton.addEventListener("click", () => transactionHandler("next"));
-  if (prevTxButton) prevTxButton.addEventListener("click", () => transactionHandler("previous"));
-}
-
-function transactionHandler(direction: "next" | "previous") {
-  removeAllEventListeners(getMakeClaimButton()) as HTMLButtonElement;
-  direction === "next" ? app.nextPermit() : app.previousPermit();
-  table.setAttribute(`data-make-claim`, "error");
-  renderTransaction().catch(console.error);
-}
diff --git a/static/scripts/rewards/render-transaction/insert-table-data.ts b/static/scripts/rewards/render-transaction/insert-table-data.ts
index 59cf3c22..7b96d3a1 100644
--- a/static/scripts/rewards/render-transaction/insert-table-data.ts
+++ b/static/scripts/rewards/render-transaction/insert-table-data.ts
@@ -1,100 +1,114 @@
-import { ERC20Permit, ERC721Permit } from "@ubiquibot/permit-generation/types";
+import { ERC20PermitReward, ERC721PermitReward } from "@ubiquibot/permit-generation/types";
 import { BigNumber, ethers } from "ethers";
-import { app, AppState } from "../app-state";
+import { app } from "../app-state";
+import { ButtonController } from "../button-controller";
+import { buttonControllers } from "../toaster";
 
 function shortenAddress(address: string): string {
   return `${address.slice(0, 10)}...${address.slice(-8)}`;
 }
 
 export function insertErc20PermitTableData(
-  app: AppState,
+  reward: ERC20PermitReward,
   table: Element,
   treasury: { balance: BigNumber; allowance: BigNumber; decimals: number; symbol: string }
 ): Element {
-  const reward = app.reward as ERC20Permit;
-  const requestedAmountElement = document.getElementById("rewardAmount") as Element;
-  renderToFields(reward.beneficiary, app.currentExplorerUrl);
-  renderTokenFields(reward.tokenAddress, app.currentExplorerUrl);
-  renderDetailsFields([
-    { name: "From", value: `<a target="_blank" rel="noopener noreferrer" href="${app.currentExplorerUrl}/address/${reward.owner}">${reward.owner}</a>` },
-    {
-      name: "Expiry",
-      value: (() => {
-        const deadline = BigNumber.isBigNumber(reward.deadline) ? reward.deadline : BigNumber.from(reward.deadline);
-        return deadline.lte(Number.MAX_SAFE_INTEGER.toString()) ? new Date(deadline.toNumber()).toLocaleString() : undefined;
-      })(),
-    },
-    { name: "Balance", value: treasury.balance.gte(0) ? `${ethers.utils.formatUnits(treasury.balance, treasury.decimals)} ${treasury.symbol}` : "N/A" },
-    { name: "Allowance", value: treasury.allowance.gte(0) ? `${ethers.utils.formatUnits(treasury.allowance, treasury.decimals)} ${treasury.symbol}` : "N/A" },
-  ]);
+  renderToFields(reward.beneficiary, reward.currentExplorerUrl, table);
+  renderTokenFields(reward.tokenAddress, reward.currentExplorerUrl, table);
+  renderDetailsFields(
+    [
+      {
+        name: "From",
+        value: `<a target="_blank" rel="noopener noreferrer" href="${app.getCurrentExplorerUrl(reward)}/address/${reward.owner}">${reward.owner}</a>`,
+      },
+      {
+        name: "Expiry",
+        value: (() => {
+          const deadline = BigNumber.isBigNumber(reward.deadline) ? reward.deadline : BigNumber.from(reward.deadline);
+          return deadline.lte(Number.MAX_SAFE_INTEGER.toString()) ? new Date(deadline.toNumber()).toLocaleString() : undefined;
+        })(),
+      },
+      { name: "Balance", value: treasury.balance.gte(0) ? `${ethers.utils.formatUnits(treasury.balance, treasury.decimals)} ${treasury.symbol}` : "N/A" },
+      { name: "Allowance", value: treasury.allowance.gte(0) ? `${ethers.utils.formatUnits(treasury.allowance, treasury.decimals)} ${treasury.symbol}` : "N/A" },
+    ],
+    table
+  );
+
+  // We need to update the controls after inserting the detail rows
+  const controls = table.querySelector(".controls") as HTMLDivElement;
+  buttonControllers[table.id] = new ButtonController(controls);
   table.setAttribute(`data-make-claim-rendered`, "true");
-  return requestedAmountElement;
+
+  return table.querySelector(".reward-amount") as Element;
 }
 
-export function insertErc721PermitTableData(reward: ERC721Permit, table: Element): Element {
-  const requestedAmountElement = document.getElementById("rewardAmount") as Element;
-  renderToFields(reward.beneficiary, app.currentExplorerUrl);
-  renderTokenFields(reward.tokenAddress, app.currentExplorerUrl);
+export function insertErc721PermitTableData(reward: ERC721PermitReward, table: Element): Element {
+  const requestedAmountElement = table.querySelector(".reward-amount") as Element;
+  renderToFields(reward.beneficiary, app.getCurrentExplorerUrl(reward), table);
+  renderTokenFields(reward.tokenAddress, app.getCurrentExplorerUrl(reward), table);
   const { GITHUB_REPOSITORY_NAME, GITHUB_CONTRIBUTION_TYPE, GITHUB_ISSUE_ID, GITHUB_ORGANIZATION_NAME, GITHUB_USERNAME } = reward.erc721Request?.metadata || {};
-  renderDetailsFields([
-    {
-      name: "NFT address",
-      value: `<a target="_blank" rel="noopener noreferrer" href="${app.currentExplorerUrl}/address/${reward.tokenAddress}">${reward.tokenAddress}</a>`,
-    },
-    {
-      name: "Expiry",
-      value: BigNumber.from(reward.deadline).lte(Number.MAX_SAFE_INTEGER.toString()) ? new Date(Number(reward.deadline)).toLocaleString() : undefined,
-    },
-    {
-      name: "GitHub Organization",
-      value: `<a target="_blank" rel="noopener noreferrer" href="https://github.com/${GITHUB_ORGANIZATION_NAME}">${GITHUB_ORGANIZATION_NAME}</a>`,
-    },
-    {
-      name: "GitHub Repository",
-      value: `<a target="_blank" rel="noopener noreferrer" href="https://github.com/${GITHUB_ORGANIZATION_NAME}/${GITHUB_REPOSITORY_NAME}">${GITHUB_REPOSITORY_NAME}</a>`,
-    },
-    {
-      name: "GitHub Issue",
-      value: `<a target="_blank" rel="noopener noreferrer" href="https://github.com/${GITHUB_ORGANIZATION_NAME}/${GITHUB_REPOSITORY_NAME}/issues/${GITHUB_ISSUE_ID}">${GITHUB_ISSUE_ID}</a>`,
-    },
-    {
-      name: "GitHub Username",
-      value: `<a target="_blank" rel="noopener noreferrer" href="https://github.com/${GITHUB_USERNAME}">${GITHUB_USERNAME}</a>`,
-    },
-    { name: "Contribution Type", value: GITHUB_CONTRIBUTION_TYPE?.split(",").join(", ") },
-  ]);
+  renderDetailsFields(
+    [
+      {
+        name: "NFT address",
+        value: `<a target="_blank" rel="noopener noreferrer" href="${app.getCurrentExplorerUrl(reward)}/address/${reward.tokenAddress}">${reward.tokenAddress}</a>`,
+      },
+      {
+        name: "Expiry",
+        value: BigNumber.from(reward.deadline).lte(Number.MAX_SAFE_INTEGER.toString()) ? new Date(Number(reward.deadline)).toLocaleString() : undefined,
+      },
+      {
+        name: "GitHub Organization",
+        value: `<a target="_blank" rel="noopener noreferrer" href="https://github.com/${GITHUB_ORGANIZATION_NAME}">${GITHUB_ORGANIZATION_NAME}</a>`,
+      },
+      {
+        name: "GitHub Repository",
+        value: `<a target="_blank" rel="noopener noreferrer" href="https://github.com/${GITHUB_ORGANIZATION_NAME}/${GITHUB_REPOSITORY_NAME}">${GITHUB_REPOSITORY_NAME}</a>`,
+      },
+      {
+        name: "GitHub Issue",
+        value: `<a target="_blank" rel="noopener noreferrer" href="https://github.com/${GITHUB_ORGANIZATION_NAME}/${GITHUB_REPOSITORY_NAME}/issues/${GITHUB_ISSUE_ID}">${GITHUB_ISSUE_ID}</a>`,
+      },
+      {
+        name: "GitHub Username",
+        value: `<a target="_blank" rel="noopener noreferrer" href="https://github.com/${GITHUB_USERNAME}">${GITHUB_USERNAME}</a>`,
+      },
+      { name: "Contribution Type", value: GITHUB_CONTRIBUTION_TYPE?.split(",").join(", ") },
+    ],
+    table
+  );
   table.setAttribute(`data-make-claim-rendered`, "true");
   return requestedAmountElement;
 }
 
-function renderDetailsFields(additionalDetails: { name: string; value: string | undefined }[]) {
-  const additionalDetailsDiv = document.getElementById("additionalDetailsTable") as Element;
+function renderDetailsFields(additionalDetails: { name: string; value: string | undefined }[], table: Element) {
+  const additionalDetailsEl = table.querySelector("tbody") as Element;
   let additionalDetailsHtml = "";
   for (const { name, value } of additionalDetails) {
     if (!value) continue;
-    additionalDetailsHtml += `<tr>
+    additionalDetailsHtml += `<tr class="additional-detail">
       <th><div>${name}</div></th>
       <td><div>${value}</div></td>
     </tr>`;
   }
 
-  additionalDetailsDiv.innerHTML = additionalDetailsHtml;
+  additionalDetailsEl.innerHTML = additionalDetailsHtml + additionalDetailsEl.innerHTML;
 }
 
-function renderTokenFields(tokenAddress: string, explorerUrl: string) {
-  const tokenFull = document.querySelector("#Token .full") as Element;
-  const tokenShort = document.querySelector("#Token .short") as Element;
+function renderTokenFields(tokenAddress: string, explorerUrl: string, table: Element) {
+  const tokenFull = table.querySelector(".token .full") as Element;
+  const tokenShort = table.querySelector(".token .short") as Element;
 
   tokenFull.innerHTML = `<div>${tokenAddress}</div>`;
   tokenShort.innerHTML = `<div>${shortenAddress(tokenAddress)}</div>`;
 
-  const tokenBoth = document.getElementById(`rewardToken`) as Element;
+  const tokenBoth = table.querySelector(`.reward-token`) as Element;
   tokenBoth.innerHTML = `<a target="_blank" rel="noopener noreferrer" href="${explorerUrl}/token/${tokenAddress}">${tokenBoth.innerHTML}</a>`;
 }
 
-function renderToFields(receiverAddress: string, explorerUrl: string) {
-  const toFull = document.querySelector("#rewardRecipient .full") as Element;
-  const toShort = document.querySelector("#rewardRecipient .short") as Element;
+function renderToFields(receiverAddress: string, explorerUrl: string, table: Element) {
+  const toFull = table.querySelector(".reward-recipient .full") as Element;
+  const toShort = table.querySelector(".reward-recipient .short") as Element;
 
   // if the for address is an ENS name neither will be found
   if (!toFull || !toShort) return;
@@ -102,6 +116,6 @@ function renderToFields(receiverAddress: string, explorerUrl: string) {
   toFull.innerHTML = `<div>${receiverAddress}</div>`;
   toShort.innerHTML = `<div>${shortenAddress(receiverAddress)}</div>`;
 
-  const toBoth = document.getElementById(`rewardRecipient`) as Element;
+  const toBoth = table.querySelector(`.reward-recipient`) as Element;
   toBoth.innerHTML = `<a target="_blank" rel="noopener noreferrer" href="${explorerUrl}/address/${receiverAddress}">${toBoth.innerHTML}</a>`;
 }
diff --git a/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts b/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts
index 225475c7..f3f527f0 100644
--- a/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts
+++ b/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts
@@ -2,14 +2,13 @@ import { createClient } from "@supabase/supabase-js";
 import { decodePermits } from "@ubiquibot/permit-generation/handlers";
 import { Permit } from "@ubiquibot/permit-generation/types";
 import { app, AppState } from "../app-state";
-import { toaster } from "../toaster";
-import { connectWallet } from "../web3/connect-wallet";
-import { checkRenderInvalidatePermitAdminControl, checkRenderMakeClaimControl } from "../web3/erc20-permit";
-import { verifyCurrentNetwork } from "../web3/verify-current-network";
-import { claimRewardsPagination } from "./claim-rewards-pagination";
-import { renderTransaction } from "./render-transaction";
+import { buttonControllers, toaster } from "../toaster";
+import { checkRenderInvalidatePermitAdminControl, checkRenderMakeClaimControl, createInvalidatorActions } from "../web3/erc20-permit";
 import { setClaimMessage } from "./set-claim-message";
 import { useRpcHandler } from "../web3/use-rpc-handler";
+import { renderTransaction } from "./render-transaction";
+import { ButtonController } from "../button-controller";
+import { connectWallet } from "../web3/connect-wallet";
 
 declare const SUPABASE_URL: string;
 declare const SUPABASE_ANON_KEY: string;
@@ -23,6 +22,7 @@ const base64encodedTxData = urlParams.get("claim");
 export async function readClaimDataFromUrl(app: AppState) {
   if (!base64encodedTxData) {
     // No claim data found
+    // A single table shows the error message
     setClaimMessage({ type: "Notice", message: `No claim data found.` });
     table.setAttribute(`data-make-claim`, "error");
     return;
@@ -32,7 +32,7 @@ export async function readClaimDataFromUrl(app: AppState) {
   app.claimTxs = await getClaimedTxs(app);
 
   try {
-    app.provider = await useRpcHandler(app);
+    app.provider = await useRpcHandler(app.claims[0]);
   } catch (e) {
     if (e instanceof Error) {
       toaster.create("error", e.message);
@@ -42,7 +42,7 @@ export async function readClaimDataFromUrl(app: AppState) {
   }
 
   try {
-    app.signer = await connectWallet();
+    app.signer = await connectWallet(app.claims[0].networkId);
   } catch (error) {
     /* empty */
   }
@@ -60,15 +60,7 @@ export async function readClaimDataFromUrl(app: AppState) {
      */
   }
 
-  displayRewardDetails();
-  displayRewardPagination();
-
-  await renderTransaction();
-  if (app.networkId !== null) {
-    await verifyCurrentNetwork(app.networkId);
-  } else {
-    throw new Error("Network ID is null");
-  }
+  await displayRewardsWithDetails();
 }
 
 async function getClaimedTxs(app: AppState): Promise<Record<string, string>> {
@@ -97,23 +89,44 @@ function decodeClaimData(base64encodedTxData: string): Permit[] {
   }
 }
 
-function displayRewardPagination() {
-  const rewardsCount = document.getElementById("rewardsCount");
-  if (rewardsCount) {
-    if (!app.claims || app.claims.length <= 1) {
-      // already hidden
-    } else {
-      claimRewardsPagination(rewardsCount);
-    }
-  }
-}
-
-function displayRewardDetails() {
+function displayRewardDetails(table: Element) {
   let isDetailsVisible = false;
   table.setAttribute(`data-details-visible`, isDetailsVisible.toString());
-  const additionalDetails = document.getElementById(`additionalDetails`) as HTMLElement;
+  const additionalDetails = table.querySelector(`.additional-details`) as HTMLElement;
   additionalDetails.addEventListener("click", () => {
     isDetailsVisible = !isDetailsVisible;
     table.setAttribute(`data-details-visible`, isDetailsVisible.toString());
   });
 }
+
+/**
+ * @summary Create a separate table element for each claim
+ */
+async function displayRewardsWithDetails() {
+  const tableEl = document.getElementsByTagName("table")[0];
+  if (!tableEl) return;
+  tableEl.id = app.claims[0].nonce;
+  const controls = tableEl.querySelector(".controls") as HTMLDivElement;
+  const buttonController = new ButtonController(controls);
+  buttonControllers[app.claims[0].nonce] = buttonController;
+
+  await Promise.all(
+    app.claims.slice(1).map(async (claim) => {
+      // Create a new copy of the table
+      const newTable = tableEl.cloneNode(true) as Element;
+      newTable.id = claim.nonce;
+      tableEl.parentElement?.appendChild(newTable);
+
+      const controls = newTable.querySelector(".controls") as HTMLDivElement;
+      const buttonController = new ButtonController(controls);
+      buttonControllers[claim.nonce] = buttonController;
+      await renderTransaction(claim, newTable);
+      displayRewardDetails(newTable);
+    })
+  );
+
+  // The first claim's table is populated last
+  await renderTransaction(app.claims[0], tableEl);
+  displayRewardDetails(tableEl);
+  createInvalidatorActions();
+}
diff --git a/static/scripts/rewards/render-transaction/render-ens-name.ts b/static/scripts/rewards/render-transaction/render-ens-name.ts
index 810df96d..97440420 100644
--- a/static/scripts/rewards/render-transaction/render-ens-name.ts
+++ b/static/scripts/rewards/render-transaction/render-ens-name.ts
@@ -1,3 +1,4 @@
+import { Permit } from "@ubiquibot/permit-generation/types";
 import { app } from "../app-state";
 import { ensLookup } from "../cirip/ens-lookup";
 
@@ -17,7 +18,7 @@ type EnsParams =
       networkId: number;
     };
 
-export async function renderEnsName({ element, address, tokenAddress, tokenView, networkId }: EnsParams): Promise<void> {
+export async function renderEnsName(claim: Permit, { element, address, tokenAddress, tokenView, networkId }: EnsParams): Promise<void> {
   let href: string = "";
   try {
     const resolved = await ensLookup(address, networkId);
@@ -32,9 +33,9 @@ export async function renderEnsName({ element, address, tokenAddress, tokenView,
     }
     if (ensName) {
       if (tokenView) {
-        href = `${app.currentExplorerUrl}/token/${tokenAddress}?a=${address}`;
+        href = `${app.getCurrentExplorerUrl(claim)}/token/${tokenAddress}?a=${address}`;
       } else {
-        href = `${app.currentExplorerUrl}/address/${address}"`;
+        href = `${app.getCurrentExplorerUrl(claim)}/address/${address}"`;
       }
       element.innerHTML = `<a target="_blank" rel="noopener noreferrer" href="${href}">${ensName}</a>`;
     }
diff --git a/static/scripts/rewards/render-transaction/render-token-symbol.ts b/static/scripts/rewards/render-transaction/render-token-symbol.ts
index f4ab43c7..9c14a966 100644
--- a/static/scripts/rewards/render-transaction/render-token-symbol.ts
+++ b/static/scripts/rewards/render-transaction/render-token-symbol.ts
@@ -1,6 +1,9 @@
 import { BigNumberish, ethers, utils } from "ethers";
+import { PermitReward } from "@ubiquibot/permit-generation/types";
 import { erc20Abi } from "../abis/erc20-abi";
 import { app } from "../app-state";
+import { useRpcHandler } from "../web3/use-rpc-handler";
+
 export async function renderTokenSymbol({
   table,
   requestedAmountElement,
@@ -8,6 +11,7 @@ export async function renderTokenSymbol({
   ownerAddress,
   amount,
   explorerUrl,
+  claim,
 }: {
   table: Element;
   requestedAmountElement: Element;
@@ -15,7 +19,13 @@ export async function renderTokenSymbol({
   ownerAddress: string;
   amount: BigNumberish;
   explorerUrl: string;
+  claim: PermitReward;
 }): Promise<void> {
+  // If the reward is on a different chain we need a new provider
+  if (app.provider.network.chainId !== claim.networkId) {
+    console.log("Different network. Switching");
+    app.provider = await useRpcHandler(claim);
+  }
   const contract = new ethers.Contract(tokenAddress, erc20Abi, app.provider);
 
   let symbol, decimals;
@@ -57,12 +67,18 @@ export async function renderNftSymbol({
   requestedAmountElement,
   tokenAddress,
   explorerUrl,
+  claim,
 }: {
   table: Element;
   requestedAmountElement: Element;
   tokenAddress: string;
   explorerUrl: string;
+  claim: PermitReward;
 }): Promise<void> {
+  if (app.provider.network.chainId !== claim.networkId) {
+    console.log("Different network. Switching");
+    app.provider = await useRpcHandler(claim);
+  }
   const contract = new ethers.Contract(tokenAddress, erc20Abi, app.provider);
 
   let symbol: string;
diff --git a/static/scripts/rewards/render-transaction/render-transaction.ts b/static/scripts/rewards/render-transaction/render-transaction.ts
index d19583d2..32f54d4b 100644
--- a/static/scripts/rewards/render-transaction/render-transaction.ts
+++ b/static/scripts/rewards/render-transaction/render-transaction.ts
@@ -1,86 +1,80 @@
-import { ERC20Permit, Permit, TokenType } from "@ubiquibot/permit-generation/types";
+import { ERC20PermitReward, PermitReward, TokenType } from "@ubiquibot/permit-generation/types";
 import { networkExplorers } from "@ubiquity-dao/rpc-handler";
 import { app } from "../app-state";
-import { buttonController, getMakeClaimButton, viewClaimButton } from "../toaster";
+import { buttonControllers, getMakeClaimButton, getViewClaimButton } from "../toaster";
 import { checkRenderInvalidatePermitAdminControl, claimErc20PermitHandlerWrapper, fetchTreasury } from "../web3/erc20-permit";
 import { claimErc721PermitHandler } from "../web3/erc721-permit";
-import { verifyCurrentNetwork } from "../web3/verify-current-network";
 import { insertErc20PermitTableData, insertErc721PermitTableData } from "./insert-table-data";
 import { renderEnsName } from "./render-ens-name";
 import { renderNftSymbol, renderTokenSymbol } from "./render-token-symbol";
 
-const carousel = document.getElementById("carousel") as Element;
-const table = document.querySelector(`table`) as HTMLTableElement;
-type Success = boolean;
-
-export async function renderTransaction(): Promise<Success> {
-  if (app.claims && app.claims.length > 1) {
-    carousel.className = "ready";
-    const rewardsCount = document.getElementById("rewardsCount") as Element;
-    rewardsCount.innerHTML = `${app.rewardIndex + 1}/${app.claims.length} reward`;
-  }
-
-  if (!app.reward) {
-    buttonController.hideAll();
+export async function renderTransaction(claim: PermitReward, table: Element): Promise<boolean> {
+  if (!claim) {
+    buttonControllers[claim.nonce].hideAll();
     console.log("No reward found");
     return false;
   }
 
-  verifyCurrentNetwork(app.reward.networkId).catch(console.error);
+  if (!table) {
+    throw new Error("Missing transaction table");
+  }
 
-  if (isErc20Permit(app.reward)) {
-    const treasury = await fetchTreasury(app.reward);
+  if (isErc20Permit(claim)) {
+    const treasury = await fetchTreasury(claim);
     table.setAttribute(`data-additional-data-size`, "small");
 
     // insert tx data into table
-    const requestedAmountElement = insertErc20PermitTableData(app, table, treasury);
+    const requestedAmountElement = insertErc20PermitTableData(claim, table, treasury);
 
-    renderTokenSymbol({
-      tokenAddress: app.reward.tokenAddress,
-      ownerAddress: app.reward.owner,
-      amount: app.reward.amount,
-      explorerUrl: networkExplorers[app.reward.networkId],
+    await renderTokenSymbol({
+      tokenAddress: claim.tokenAddress,
+      ownerAddress: claim.owner,
+      amount: claim.amount,
+      explorerUrl: networkExplorers[claim.networkId],
       table,
       requestedAmountElement,
-    }).catch(console.error);
+      claim,
+    });
 
-    const toElement = document.getElementById(`rewardRecipient`) as Element;
-    renderEnsName({ element: toElement, address: app.reward.beneficiary, networkId: app.networkId }).catch(console.error);
+    const toElement = table.querySelector(`.reward-recipient`) as Element;
+    renderEnsName(claim, { element: toElement, address: claim.beneficiary, networkId: claim.networkId as number }).catch(console.error);
 
     if (app.provider) {
       checkRenderInvalidatePermitAdminControl(app).catch(console.error);
     }
 
-    if (app.claimTxs[app.reward.nonce.toString()] !== undefined) {
-      buttonController.showViewClaim();
-      viewClaimButton.addEventListener("click", () => window.open(`${app.currentExplorerUrl}/tx/${app.claimTxs[app.reward.nonce.toString()]}`));
+    if (app.claimTxs[claim.nonce.toString()] !== undefined) {
+      buttonControllers[claim.nonce].showViewClaim();
+      const viewClaimButton = getViewClaimButton(table);
+      viewClaimButton.addEventListener("click", () => window.open(`${app.getCurrentExplorerUrl(claim)}/tx/${app.claimTxs[claim.nonce.toString()]}`));
     } else if (window.ethereum) {
       // requires wallet connection to claim
-      buttonController.showMakeClaim();
-      getMakeClaimButton().addEventListener("click", claimErc20PermitHandlerWrapper(app));
+      buttonControllers[claim.nonce].showMakeClaim();
+      getMakeClaimButton(table).addEventListener("click", claimErc20PermitHandlerWrapper(table, claim));
     }
 
     table.setAttribute(`data-make-claim`, "ok");
   } else {
-    const requestedAmountElement = insertErc721PermitTableData(app.reward, table);
+    const requestedAmountElement = insertErc721PermitTableData(claim, table);
     table.setAttribute(`data-make-claim`, "ok");
     table.setAttribute(`data-additional-data-size`, "large");
     renderNftSymbol({
-      tokenAddress: app.reward.tokenAddress,
-      explorerUrl: networkExplorers[app.reward.networkId],
+      tokenAddress: claim.tokenAddress,
+      explorerUrl: networkExplorers[claim.networkId],
       table,
       requestedAmountElement,
+      claim,
     }).catch(console.error);
 
-    const toElement = document.getElementById(`rewardRecipient`) as Element;
-    renderEnsName({ element: toElement, address: app.reward.beneficiary, networkId: app.networkId }).catch(console.error);
+    const toElement = document.getElementById(`reward-recipient`) as Element;
+    renderEnsName(claim, { element: toElement, address: claim.beneficiary, networkId: claim.networkId as number }).catch(console.error);
 
-    getMakeClaimButton().addEventListener("click", claimErc721PermitHandler(app.reward));
+    getMakeClaimButton(table).addEventListener("click", claimErc721PermitHandler(table, claim));
   }
 
   return true;
 }
 
-function isErc20Permit(permit: Permit): permit is ERC20Permit {
+function isErc20Permit(permit: PermitReward): permit is ERC20PermitReward {
   return permit.tokenType === TokenType.ERC20;
 }
diff --git a/static/scripts/rewards/render-transaction/utils.ts b/static/scripts/rewards/render-transaction/utils.ts
deleted file mode 100644
index 80281a64..00000000
--- a/static/scripts/rewards/render-transaction/utils.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export function removeAllEventListeners(element: Element): Element {
-  const clone = element.cloneNode(true) as Element;
-  element.replaceWith(clone);
-  return clone;
-}
diff --git a/static/scripts/rewards/toaster.ts b/static/scripts/rewards/toaster.ts
index 84089e42..39cb813a 100644
--- a/static/scripts/rewards/toaster.ts
+++ b/static/scripts/rewards/toaster.ts
@@ -11,16 +11,17 @@ export const toaster = {
   },
 };
 
-const controls = document.getElementById("controls") as HTMLDivElement;
-export function getMakeClaimButton() {
-  return document.getElementById("make-claim") as HTMLButtonElement;
+export function getMakeClaimButton(table: Element) {
+  return table.querySelector(".make-claim") as HTMLButtonElement;
+}
+export function getViewClaimButton(table: Element) {
+  return table.querySelector(".view-claim") as HTMLButtonElement;
 }
-export const viewClaimButton = document.getElementById("view-claim") as HTMLButtonElement;
 const notifications = document.querySelector(".notifications") as HTMLUListElement;
-export const buttonController = new ButtonController(controls);
+export const buttonControllers: { [key: string]: ButtonController } = {};
 
 function createToast(meaning: keyof typeof toaster.icons, text: string, timeout: number = 5000) {
-  if (meaning != "info") buttonController.hideLoader();
+  if (meaning != "info" && buttonControllers.length) Object.keys(buttonControllers).forEach((key) => buttonControllers[key].hideLoader());
   const toastDetails = {
     timer: timeout,
   } as {
diff --git a/static/scripts/rewards/web3/connect-wallet.ts b/static/scripts/rewards/web3/connect-wallet.ts
index 77b43623..0fcc0d36 100644
--- a/static/scripts/rewards/web3/connect-wallet.ts
+++ b/static/scripts/rewards/web3/connect-wallet.ts
@@ -1,6 +1,6 @@
 import { JsonRpcSigner } from "@ethersproject/providers";
 import { ethers } from "ethers";
-import { buttonController, toaster } from "../toaster";
+import { buttonControllers, toaster } from "../toaster";
 import { app } from "../app-state";
 import { useHandler } from "../web3/use-rpc-handler";
 
@@ -24,7 +24,7 @@ function mobileCheck() {
   return checkMobile(navigator.userAgent || navigator.vendor || (window as unknown as { opera: string }).opera);
 }
 
-export async function connectWallet(): Promise<JsonRpcSigner | null> {
+export async function connectWallet(networkId: number): Promise<JsonRpcSigner | null> {
   try {
     const wallet = new ethers.providers.Web3Provider(window.ethereum);
 
@@ -40,7 +40,7 @@ export async function connectWallet(): Promise<JsonRpcSigner | null> {
     const address = await signer.getAddress();
 
     if (!address) {
-      buttonController.hideAll();
+      Object.keys(buttonControllers).forEach((key) => buttonControllers[key].hideAll());
       console.error("Wallet not connected");
       return null;
     }
@@ -54,7 +54,7 @@ export async function connectWallet(): Promise<JsonRpcSigner | null> {
         // Their wallet provider will auto-prompt due to the call succeeding
         toaster.create("error", "We have detected potential issues with your in-wallet RPC. Accept the request to replace it with a more reliable one.");
       }
-      await addFastestHandlerNetwork(wallet);
+      await addFastestHandlerNetwork(wallet, networkId);
     }
 
     return signer;
@@ -63,9 +63,8 @@ export async function connectWallet(): Promise<JsonRpcSigner | null> {
   }
 }
 
-async function addFastestHandlerNetwork(wallet: ethers.providers.Web3Provider) {
-  const networkId = app.networkId ?? (await wallet.getNetwork()).chainId;
-  const handler = useHandler(networkId);
+async function addFastestHandlerNetwork(wallet: ethers.providers.Web3Provider, networkId: number) {
+  const handler = useHandler(networkId ?? (await wallet.getNetwork()).chainId);
   let provider = await handler.getFastestRpcProvider();
   const appUrl = app.provider?.connection?.url;
 
@@ -97,16 +96,16 @@ async function addFastestHandlerNetwork(wallet: ethers.providers.Web3Provider) {
   }
 
   try {
-    await addHandlerSuggested(wallet, toSuggest.url);
+    await addHandlerSuggested(wallet, toSuggest.url, networkId);
   } catch (error) {
     toaster.create("info", `${toSuggest.url}`, Infinity);
   }
 }
 
-async function addHandlerSuggested(provider: ethers.providers.Web3Provider, url: string) {
-  const symbol = app.networkId === 1 ? "ETH" : "XDAI";
-  const altSymbol = app.networkId === 1 ? "eth" : "xdai";
-  const altSymbol2 = app.networkId === 1 ? "Eth" : "xDai";
+async function addHandlerSuggested(provider: ethers.providers.Web3Provider, url: string, networkId: number) {
+  const symbol = networkId === 1 ? "ETH" : "XDAI";
+  const altSymbol = networkId === 1 ? "eth" : "xdai";
+  const altSymbol2 = networkId === 1 ? "Eth" : "xDai";
 
   if (mobileCheck()) {
     /**
@@ -123,7 +122,7 @@ async function addHandlerSuggested(provider: ethers.providers.Web3Provider, url:
   // It will not work unless the symbols match, so we try them all
   for (const _symbol of [symbol, altSymbol, altSymbol2]) {
     // this does not work on mobile yet
-    await addProvider(provider, url, _symbol, app.networkId);
+    await addProvider(provider, url, _symbol, networkId);
   }
 }
 
@@ -192,7 +191,7 @@ function connectErrorHandler(error: unknown) {
         toaster.create("warning", "Please use a mobile-friendly Web3 browser such as MetaMask to collect this reward", Infinity);
       } else if (!window.ethereum) {
         toaster.create("warning", "Please use a web3 enabled browser to collect this reward.", Infinity);
-        buttonController.hideAll();
+        Object.keys(buttonControllers).forEach((key) => buttonControllers[key].hideAll());
       }
     } else {
       toaster.create("error", error.message);
diff --git a/static/scripts/rewards/web3/erc20-permit.ts b/static/scripts/rewards/web3/erc20-permit.ts
index 9e1fe826..abdc1f4e 100644
--- a/static/scripts/rewards/web3/erc20-permit.ts
+++ b/static/scripts/rewards/web3/erc20-permit.ts
@@ -1,17 +1,23 @@
 import { JsonRpcSigner, TransactionResponse } from "@ethersproject/providers";
-import { Permit } from "@ubiquibot/permit-generation/types";
+import { PermitReward, ERC20PermitReward } from "@ubiquibot/permit-generation/types";
+import { permit2Address } from "@ubiquity-dao/rpc-handler";
 import { BigNumber, BigNumberish, Contract, ethers } from "ethers";
 import { erc20Abi, permit2Abi } from "../abis";
 import { app, AppState } from "../app-state";
-import { permit2Address } from "@ubiquity-dao/rpc-handler";
 import { supabase } from "../render-transaction/read-claim-data-from-url";
-import { MetaMaskError, buttonController, errorToast, getMakeClaimButton, toaster, viewClaimButton } from "../toaster";
+import { MetaMaskError, buttonControllers, errorToast, getMakeClaimButton, toaster, getViewClaimButton } from "../toaster";
 import { connectWallet } from "./connect-wallet";
+import { verifyCurrentNetwork } from "./verify-current-network";
+import { useRpcHandler } from "./use-rpc-handler";
 
-export async function fetchTreasury(permit: Permit): Promise<{ balance: BigNumber; allowance: BigNumber; decimals: number; symbol: string }> {
+export async function fetchTreasury(permit: PermitReward): Promise<{ balance: BigNumber; allowance: BigNumber; decimals: number; symbol: string }> {
   let balance: BigNumber, allowance: BigNumber, decimals: number, symbol: string;
 
   try {
+    if (app.provider.network.chainId !== permit.networkId) {
+      console.log("Different network. Switching");
+      app.provider = await useRpcHandler(permit);
+    }
     const tokenAddress = permit.tokenAddress;
     const tokenContract = new ethers.Contract(tokenAddress, erc20Abi, app.provider);
 
@@ -43,9 +49,9 @@ export async function fetchTreasury(permit: Permit): Promise<{ balance: BigNumbe
   }
 }
 
-async function checkPermitClaimability(app: AppState): Promise<boolean> {
+async function checkPermitClaimability(reward: PermitReward): Promise<boolean> {
   try {
-    return await checkPermitClaimable(app);
+    return await checkPermitClaimable(reward);
   } catch (error: unknown) {
     if (error instanceof Error) {
       const e = error as unknown as MetaMaskError;
@@ -53,12 +59,11 @@ async function checkPermitClaimability(app: AppState): Promise<boolean> {
       errorToast(e, e.reason);
     }
   }
-  buttonController.hideMakeClaim();
+  buttonControllers[reward.nonce].hideMakeClaim();
   return false;
 }
 
-async function transferFromPermit(permit2Contract: Contract, app: AppState) {
-  const reward = app.reward;
+async function transferFromPermit(permit2Contract: Contract, reward: ERC20PermitReward) {
   const signer = app.signer;
   if (!signer) return null;
 
@@ -85,8 +90,8 @@ async function transferFromPermit(permit2Contract: Contract, app: AppState) {
       if (e.code == "ACTION_REJECTED") {
         // Handle the user rejection case
         toaster.create("info", `Transaction was not sent because it was rejected by the user.`);
-        buttonController.hideLoader();
-        buttonController.showMakeClaim();
+        buttonControllers[reward.nonce].hideLoader();
+        buttonControllers[reward.nonce].showMakeClaim();
       } else {
         // Handle other errors
         console.error("Error in permitTransferFrom:", e);
@@ -97,18 +102,18 @@ async function transferFromPermit(permit2Contract: Contract, app: AppState) {
   }
 }
 
-async function waitForTransaction(tx: TransactionResponse) {
+async function waitForTransaction(tx: TransactionResponse, table: Element) {
   try {
     const receipt = await tx.wait();
+    const viewClaimButton = getViewClaimButton(table);
     viewClaimButton.onclick = () => {
       window.open(`https://blockscan.com/tx/${receipt.transactionHash}`, "_blank");
     };
 
     toaster.create("success", `Claim Complete.`);
-    buttonController.showViewClaim();
-    buttonController.hideLoader();
-    buttonController.hideMakeClaim();
-    console.log(receipt.transactionHash);
+    buttonControllers[table.id].showViewClaim();
+    buttonControllers[table.id].hideLoader();
+    buttonControllers[table.id].hideMakeClaim();
 
     return receipt;
   } catch (error: unknown) {
@@ -120,43 +125,55 @@ async function waitForTransaction(tx: TransactionResponse) {
   }
 }
 
-export function claimErc20PermitHandlerWrapper(app: AppState) {
+export function claimErc20PermitHandlerWrapper(table: Element, permit: PermitReward) {
   return async function claimErc20PermitHandler() {
-    const signer = await connectWallet(); // we are re-testing the in-wallet rpc at this point
+    if (app.provider.network.chainId !== permit.networkId) {
+      console.log("Different network. Switching");
+      app.provider = await useRpcHandler(permit);
+    }
+    const signer = await connectWallet(permit.networkId); // we are re-testing the in-wallet rpc at this point
+    verifyCurrentNetwork(permit.networkId).catch(console.error);
     if (!signer) {
-      buttonController.hideAll();
+      // If the signer is unavailable, we will disable button for each reward
+      Object.keys(buttonControllers).forEach((key) => buttonControllers[key].hideAll());
       toaster.create("error", `Please connect your wallet to claim this reward.`);
       return;
     }
 
     app.signer = signer; // update this here to be sure it's set if it wasn't before
 
-    buttonController.hideMakeClaim();
-    buttonController.showLoader();
+    buttonControllers[table.id].hideMakeClaim();
+    buttonControllers[table.id].showLoader();
 
-    const isPermitClaimable = await checkPermitClaimability(app);
-    if (!isPermitClaimable) return;
+    const isPermitClaimable = await checkPermitClaimability(permit);
+    if (!isPermitClaimable) {
+      buttonControllers[table.id].hideLoader();
+      return;
+    }
 
     const permit2Contract = new ethers.Contract(permit2Address, permit2Abi, signer);
-    if (!permit2Contract) return;
+    if (!permit2Contract) {
+      buttonControllers[table.id].hideLoader();
+      return;
+    }
 
-    const tx = await transferFromPermit(permit2Contract, app);
+    const tx = await transferFromPermit(permit2Contract, permit);
     if (!tx) return;
 
-    const receipt = await waitForTransaction(tx);
+    const receipt = await waitForTransaction(tx, table);
     if (!receipt) return;
 
-    const isHashUpdated = await updatePermitTxHash(app, receipt.transactionHash);
+    const isHashUpdated = await updatePermitTxHash(permit, receipt.transactionHash);
     if (!isHashUpdated) return;
 
-    getMakeClaimButton().removeEventListener("click", claimErc20PermitHandler);
+    getMakeClaimButton(table).removeEventListener("click", claimErc20PermitHandler);
   };
 }
 
-async function checkPermitClaimable(app: AppState): Promise<boolean> {
+async function checkPermitClaimable(reward: PermitReward): Promise<boolean> {
   let isClaimed: boolean;
   try {
-    isClaimed = await isNonceClaimed(app);
+    isClaimed = await isNonceClaimed(reward);
   } catch (error: unknown) {
     console.error("Error in isNonceClaimed: ", error);
     return false;
@@ -164,12 +181,10 @@ async function checkPermitClaimable(app: AppState): Promise<boolean> {
 
   if (isClaimed) {
     toaster.create("error", `Your reward for this task has already been claimed.`);
-    buttonController.showViewClaim();
+    buttonControllers[reward.nonce].showViewClaim();
     return false;
   }
 
-  const reward = app.reward;
-
   if (BigNumber.from(reward.deadline).lt(Math.floor(Date.now() / 1000))) {
     toaster.create("error", `This reward has expired.`);
     return false;
@@ -177,18 +192,17 @@ async function checkPermitClaimable(app: AppState): Promise<boolean> {
 
   const { balance, allowance } = await fetchTreasury(reward);
   const permitted = BigNumber.from(reward.amount);
-
   const isSolvent = balance.gte(permitted);
   const isAllowed = allowance.gte(permitted);
 
   if (!isSolvent) {
     toaster.create("error", `Not enough funds on funding wallet to collect this reward. Please let the financier know.`);
-    buttonController.hideMakeClaim();
+    buttonControllers[reward.nonce].hideMakeClaim();
     return false;
   }
   if (!isAllowed) {
     toaster.create("error", `Not enough allowance on the funding wallet to collect this reward. Please let the financier know.`);
-    buttonController.hideMakeClaim();
+    buttonControllers[reward.nonce].hideMakeClaim();
     return false;
   }
 
@@ -204,7 +218,7 @@ async function checkPermitClaimable(app: AppState): Promise<boolean> {
   const beneficiary = reward.beneficiary.toLowerCase();
   if (beneficiary !== user) {
     toaster.create("warning", `This reward is not for you.`);
-    buttonController.hideMakeClaim();
+    buttonControllers[reward.nonce].hideMakeClaim();
     return false;
   }
 
@@ -216,18 +230,20 @@ export async function checkRenderMakeClaimControl(app: AppState) {
     const address = await app.signer?.getAddress();
     const user = address?.toLowerCase();
 
-    if (app.reward) {
-      const beneficiary = app.reward.beneficiary.toLowerCase();
-      if (beneficiary !== user) {
-        buttonController.hideMakeClaim();
-        return;
+    app.claims.forEach((claim) => {
+      if (claim) {
+        const beneficiary = claim.beneficiary.toLowerCase();
+        if (beneficiary !== user) {
+          buttonControllers[claim.nonce].hideMakeClaim();
+          return;
+        }
       }
-    }
+    });
   } catch (error) {
     console.error("Error getting address from signer");
     console.error(error);
   }
-  buttonController.showMakeClaim();
+  Object.keys(buttonControllers).forEach((key) => buttonControllers[key].showMakeClaim());
 }
 
 export async function checkRenderInvalidatePermitAdminControl(app: AppState) {
@@ -235,54 +251,65 @@ export async function checkRenderInvalidatePermitAdminControl(app: AppState) {
     const address = await app.signer?.getAddress();
     const user = address?.toLowerCase();
 
-    if (app.reward) {
-      const owner = app.reward.owner.toLowerCase();
-      if (owner !== user) {
-        buttonController.hideInvalidator();
-        return;
+    app.claims.forEach((claim) => {
+      if (claim) {
+        const owner = claim.owner.toLowerCase();
+        if (owner !== user) {
+          buttonControllers[claim.nonce].hideInvalidator();
+          return;
+        }
+        buttonControllers[claim.nonce].showInvalidator();
       }
-    }
+    });
   } catch (error) {
     console.error("Error getting address from signer");
     console.error(error);
   }
-  buttonController.showInvalidator();
 }
 
-const invalidateButton = document.getElementById("invalidator") as HTMLDivElement;
-
-invalidateButton.addEventListener("click", async function invalidateButtonClickHandler() {
-  try {
-    const isClaimed = await isNonceClaimed(app);
-    if (isClaimed) {
-      toaster.create("error", `This reward has already been claimed or invalidated.`);
-      buttonController.hideInvalidator();
-      return;
-    }
-
-    if (!app.signer) return;
-    await invalidateNonce(app.signer, app.reward.nonce);
-  } catch (error: unknown) {
-    if (error instanceof Error) {
-      const e = error as unknown as MetaMaskError;
-      console.error(e);
-      errorToast(e, e.reason);
-      return;
+export function createInvalidatorActions() {
+  for (let i = 0; i < app.claims.length; i++) {
+    const claim = app.claims[i];
+    const table = document.getElementById(claim.nonce) as HTMLElement;
+    const invalidateButton = table.querySelector(".invalidator");
+    if (!invalidateButton) {
+      console.log("Error initializing invalidator");
+      break;
     }
+    invalidateButton.addEventListener("click", async function invalidateButtonClickHandler() {
+      try {
+        const isClaimed = await isNonceClaimed(claim);
+        if (isClaimed) {
+          toaster.create("error", `This reward has already been claimed or invalidated.`);
+          buttonControllers[claim.nonce].hideInvalidator();
+          return;
+        }
+
+        if (!app.signer) return;
+        await invalidateNonce(app.signer, claim.nonce);
+      } catch (error: unknown) {
+        if (error instanceof Error) {
+          const e = error as unknown as MetaMaskError;
+          console.error(e);
+          errorToast(e, e.reason);
+          return;
+        }
+      }
+      toaster.create("info", "Nonce invalidation transaction sent");
+      buttonControllers[claim.nonce].hideInvalidator();
+    });
   }
-  toaster.create("info", "Nonce invalidation transaction sent");
-  buttonController.hideInvalidator();
-});
+}
 
 //mimics https://github.com/Uniswap/permit2/blob/a7cd186948b44f9096a35035226d7d70b9e24eaf/src/SignatureTransfer.sol#L150
-async function isNonceClaimed(app: AppState): Promise<boolean> {
+async function isNonceClaimed(reward: PermitReward): Promise<boolean> {
   const provider = app.provider;
 
   const permit2Contract = new ethers.Contract(permit2Address, permit2Abi, provider);
 
-  const { wordPos, bitPos } = nonceBitmap(BigNumber.from(app.reward.nonce));
+  const { wordPos, bitPos } = nonceBitmap(BigNumber.from(reward.nonce));
 
-  const bitmap = await permit2Contract.nonceBitmap(app.reward.owner, wordPos).catch((error: MetaMaskError) => {
+  const bitmap = await permit2Contract.nonceBitmap(reward.owner, wordPos).catch((error: MetaMaskError) => {
     console.error("Error in nonceBitmap method: ", error);
     throw error;
   });
@@ -312,12 +339,12 @@ function nonceBitmap(nonce: BigNumberish): { wordPos: BigNumber; bitPos: number
   return { wordPos, bitPos };
 }
 
-async function updatePermitTxHash(app: AppState, hash: string): Promise<boolean> {
+async function updatePermitTxHash(reward: ERC20PermitReward, hash: string): Promise<boolean> {
   const { error } = await supabase
     .from("permits")
     .update({ transaction: hash })
     // using only nonce in the condition as it's defined unique on db
-    .eq("nonce", app.reward.nonce.toString());
+    .eq("nonce", reward.nonce.toString());
 
   if (error !== null) {
     console.error(error);
diff --git a/static/scripts/rewards/web3/erc721-permit.ts b/static/scripts/rewards/web3/erc721-permit.ts
index d36658c6..4a159bbf 100644
--- a/static/scripts/rewards/web3/erc721-permit.ts
+++ b/static/scripts/rewards/web3/erc721-permit.ts
@@ -3,12 +3,19 @@ import { ERC721Permit } from "@ubiquibot/permit-generation/types";
 import { BigNumber, ethers } from "ethers";
 import { nftRewardAbi } from "../abis/nft-reward-abi";
 import { app } from "../app-state";
-import { buttonController, getMakeClaimButton, toaster } from "../toaster";
+import { buttonControllers, getMakeClaimButton, toaster } from "../toaster";
 import { connectWallet } from "./connect-wallet";
+import { verifyCurrentNetwork } from "./verify-current-network";
+import { useRpcHandler } from "./use-rpc-handler";
 
-export function claimErc721PermitHandler(reward: ERC721Permit) {
+export function claimErc721PermitHandler(table: Element, reward: ERC721Permit) {
   return async function claimHandler() {
-    const signer = await connectWallet();
+    if (app.provider.network.chainId !== reward.networkId) {
+      console.log("Different network. Switching");
+      app.provider = await useRpcHandler(reward);
+    }
+    const signer = await connectWallet(reward.networkId);
+    verifyCurrentNetwork(reward.networkId).catch(console.error);
     if (!signer) {
       return;
     }
@@ -29,7 +36,7 @@ export function claimErc721PermitHandler(reward: ERC721Permit) {
       return;
     }
 
-    buttonController.showLoader();
+    buttonControllers[table.id].showLoader();
     try {
       const nftContract = new ethers.Contract(reward.tokenAddress, nftRewardAbi, signer);
 
@@ -45,13 +52,13 @@ export function claimErc721PermitHandler(reward: ERC721Permit) {
       );
       toaster.create("info", `Transaction sent. Waiting for confirmation...`);
       const receipt = await tx.wait();
-      buttonController.hideLoader();
+      buttonControllers[table.id].hideLoader();
       toaster.create("success", `Claim Complete.`);
-      buttonController.showViewClaim();
-      buttonController.hideMakeClaim();
+      buttonControllers[table.id].showViewClaim();
+      buttonControllers[table.id].hideMakeClaim();
       console.log(receipt.transactionHash); // @TODO: post to database
 
-      getMakeClaimButton().removeEventListener("click", claimHandler);
+      getMakeClaimButton(table).removeEventListener("click", claimHandler);
 
       // app.nextPermit();
       // renderTransaction().catch((error) => {
diff --git a/static/scripts/rewards/web3/handle-if-on-correct-network.ts b/static/scripts/rewards/web3/handle-if-on-correct-network.ts
index a9d17400..170ee336 100644
--- a/static/scripts/rewards/web3/handle-if-on-correct-network.ts
+++ b/static/scripts/rewards/web3/handle-if-on-correct-network.ts
@@ -1,9 +1,10 @@
-import { buttonController } from "../toaster";
+import { buttonControllers } from "../toaster";
 
 export function handleIfOnCorrectNetwork(currentNetworkId: number, desiredNetworkId: number) {
+  // Show or hide claim action for each permit
   if (desiredNetworkId === currentNetworkId) {
-    buttonController.showMakeClaim();
+    Object.keys(buttonControllers).forEach((key) => buttonControllers[key].showMakeClaim());
   } else {
-    buttonController.hideMakeClaim();
+    Object.keys(buttonControllers).forEach((key) => buttonControllers[key].hideMakeClaim());
   }
 }
diff --git a/static/scripts/rewards/web3/not-on-correct-network.ts b/static/scripts/rewards/web3/not-on-correct-network.ts
index d04a6334..7f396060 100644
--- a/static/scripts/rewards/web3/not-on-correct-network.ts
+++ b/static/scripts/rewards/web3/not-on-correct-network.ts
@@ -1,6 +1,6 @@
 import { ethers } from "ethers";
 import { getNetworkName } from "@ubiquity-dao/rpc-handler";
-import { buttonController, toaster } from "../toaster";
+import { buttonControllers, toaster } from "../toaster";
 import { switchNetwork } from "./switch-network";
 
 export function notOnCorrectNetwork(currentNetworkId: number, desiredNetworkId: number, web3provider: ethers.providers.Web3Provider) {
@@ -12,7 +12,8 @@ export function notOnCorrectNetwork(currentNetworkId: number, desiredNetworkId:
     switchNetwork(web3provider, desiredNetworkId).catch((error) => {
       console.error(error);
       toaster.create("error", `Please switch to the ${networkName} network to claim this reward.`);
-      buttonController.hideAll();
+      // Display error for each permit
+      Object.keys(buttonControllers).forEach((key) => buttonControllers[key].hideAll());
     });
   }
 }
diff --git a/static/scripts/rewards/web3/switch-network.ts b/static/scripts/rewards/web3/switch-network.ts
index 98266c2f..7e64c09f 100644
--- a/static/scripts/rewards/web3/switch-network.ts
+++ b/static/scripts/rewards/web3/switch-network.ts
@@ -1,11 +1,12 @@
 import { ethers } from "ethers";
 import { addNetwork } from "./add-network";
-import { buttonController } from "../toaster";
+import { buttonControllers } from "../toaster";
 
 export async function switchNetwork(provider: ethers.providers.Web3Provider, networkId: number): Promise<boolean> {
   try {
     await provider.send("wallet_switchEthereumChain", [{ chainId: "0x" + networkId.toString(16) }]);
-    buttonController.showMakeClaim();
+    // Display make claim for each permit
+    Object.keys(buttonControllers).forEach((key) => buttonControllers[key].showMakeClaim());
     return true;
   } catch (error: unknown) {
     // Add network if it doesn't exist.
diff --git a/static/scripts/rewards/web3/use-rpc-handler.ts b/static/scripts/rewards/web3/use-rpc-handler.ts
index 97d3c2fe..f9eb4838 100644
--- a/static/scripts/rewards/web3/use-rpc-handler.ts
+++ b/static/scripts/rewards/web3/use-rpc-handler.ts
@@ -1,5 +1,5 @@
 import { RPCHandler } from "@ubiquity-dao/rpc-handler";
-import { AppState } from "../app-state";
+import { Permit } from "@ubiquibot/permit-generation/types";
 
 export function useHandler(networkId: number) {
   const config = {
@@ -16,13 +16,13 @@ export function useHandler(networkId: number) {
   return new RPCHandler(config);
 }
 
-export async function useRpcHandler(app: AppState) {
-  const networkId = app.networkId;
+export async function useRpcHandler(claim: Permit) {
+  const networkId = claim.networkId;
   if (!networkId) {
     throw new Error("Network ID not set");
   }
 
-  const handler = await useHandler(networkId);
+  const handler = useHandler(networkId);
   const provider = await handler.getFastestRpcProvider();
   const url = provider.connection.url;
   if (!url) {
diff --git a/static/scripts/rewards/web3/verify-current-network.ts b/static/scripts/rewards/web3/verify-current-network.ts
index 8d1e530d..50a7620f 100644
--- a/static/scripts/rewards/web3/verify-current-network.ts
+++ b/static/scripts/rewards/web3/verify-current-network.ts
@@ -1,12 +1,13 @@
 import { ethers } from "ethers";
-import { buttonController } from "../toaster";
+import { buttonControllers } from "../toaster";
 import { handleIfOnCorrectNetwork } from "./handle-if-on-correct-network";
 import { notOnCorrectNetwork } from "./not-on-correct-network";
 
 // verifyCurrentNetwork checks if the user is on the correct network and displays an error if not
 export async function verifyCurrentNetwork(desiredNetworkId: number) {
   if (!window.ethereum) {
-    buttonController.hideAll();
+    // Display error for each permit
+    Object.keys(buttonControllers).forEach((key) => buttonControllers[key].hideAll());
     return;
   }
 
diff --git a/static/styles/rewards/claim-table.css b/static/styles/rewards/claim-table.css
index 565441f5..0b91f04e 100644
--- a/static/styles/rewards/claim-table.css
+++ b/static/styles/rewards/claim-table.css
@@ -7,28 +7,30 @@
   --background-color-light: hsl(225 50% var(--background-color-light-brightness) / 1);
   --border-color: hsl(225 25% var(--border-brightness) / 1);
 }
-#claim {
-  display: flex;
-}
 main > div {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  align-items: center;
+  width: 100%;
+  gap: 64px;
 }
 table {
   border-collapse: collapse;
+  max-width: 563px;
+  width: 100%;
 }
 table a:hover,
 table a:hover > div {
   color: #fff;
 }
-table #controls {
+table .controls {
   display: none;
   color: #fff;
   width: 100%;
 }
-table #controls > button {
+table .controls > button {
   flex: 1;
   padding: 0 24px;
 }
@@ -89,7 +91,8 @@ table td div {
 table td div svg ~ div {
   width: unset;
 }
-table tr:first-of-type > * {
+table tr:first-of-type > *,
+table .amount > * {
   padding-top: 24px;
 }
 table tr:last-child td div > div {
@@ -100,11 +103,11 @@ table tr:last-child td div > div {
 table tr:last-of-type > * {
   padding-bottom: 24px;
 }
-table tr#additional-details-border > * {
+table tr.additional-details-border > * {
   padding: 0;
   margin: 0;
 }
-table[data-make-claim-rendered] #controls {
+table[data-make-claim-rendered] .controls {
   display: inline-flex;
 }
 table[data-make-claim-rendered] button {
@@ -124,7 +127,7 @@ table[data-make-claim-rendered] button:hover {
 table[data-make-claim-rendered] button > div {
   display: none;
 }
-table[data-make-claim-rendered] button:disabled > svg#claim-icon {
+table[data-make-claim-rendered] button:disabled > svg.claim-icon {
   display: none;
 }
 table[data-make-claim-rendered] button:hover > div {
@@ -137,113 +140,117 @@ table[data-make-claim-rendered] button:hover > svg {
 .show {
   display: block;
 }
-table[data-make-claim-rendered] button.hide > svg#claim-loader {
+table[data-make-claim-rendered] button.hide > svg.claim-loader {
   display: none;
 }
-table[data-make-claim-rendered] button.show > svg#claim-icon {
+table[data-make-claim-rendered] button.show > svg.claim-icon {
   display: unset;
 }
-table[data-make-claim-rendered] button.show > svg#claim-loader {
+table[data-make-claim-rendered] button.show > svg.claim-loader {
   display: unset;
 }
-table[data-make-claim-rendered] button.hide > svg#claim-icon {
+table[data-make-claim-rendered] button.hide > svg.claim-icon {
   display: unset;
 }
-table #controls {
+table .controls {
   opacity: 0;
   transition: 1s ease-in-out opacity;
   pointer-events: none;
 }
-table[data-make-claim-rendered="true"][data-contract-loaded="true"][data-make-claim="ok"] #controls {
+table[data-make-claim-rendered="true"][data-contract-loaded="true"][data-make-claim="ok"] .controls {
   opacity: 1;
   pointer-events: unset;
 }
-table[data-make-claim-rendered] button#additionalDetails {
+table[data-make-claim-rendered] button.additional-details {
   width: 100%;
   color: #fff;
 }
-table[data-make-claim-rendered] tr#additional-details-border + tr > * {
+table[data-make-claim-rendered] tr.additional-details-border + tr > * {
   padding-top: 24px;
 }
-table #additionalDetailsTable {
+table .additional-detail {
   opacity: 0;
   pointer-events: none;
-  transform: translate(-50%, -90px);
 }
-table[data-additional-data-size="large"] #additionalDetailsTable {
+table[data-additional-data-size="large"] .additional-detail {
   opacity: 0;
   pointer-events: none;
-  transform: translate(-50%, -175px);
 }
-table[data-details-visible="true"] #additionalDetailsTable {
+table[data-details-visible="true"] .additional-detail,
+table[data-details-visible="false"] .detail {
   opacity: 1;
   pointer-events: all;
 }
-table[data-contract-loaded] #Token {
+table[data-details-visible="true"] .detail,
+table[data-details-visible="false"] .additional-detail {
+  opacity: 0;
+  pointer-events: all;
+  visibility: collapse;
+}
+table[data-contract-loaded] .token {
   display: none;
 }
-#rewardAmount a {
+.reward-amount a {
   font-size: 24px;
 }
-#rewardAmount a,
-#rewardRecipient div,
-#rewardsCount {
+.reward-amount a,
+.reward-recipient div,
+.rewards-count {
   color: #fff;
 }
-table[data-details-visible="false"] #rewardToken .full,
-table[data-details-visible="true"] #rewardToken .short {
+table[data-details-visible="false"] .reward-token .full,
+table[data-details-visible="true"] .reward-token .short {
   display: none;
 }
-table[data-details-visible="false"] #rewardToken .short,
-table[data-details-visible="true"] #rewardToken .full {
+table[data-details-visible="false"] .reward-token .short,
+table[data-details-visible="true"] .reward-token .full {
   display: initial;
 }
-table[data-details-visible="false"] #rewardRecipient .full,
-table[data-details-visible="true"] #rewardRecipient .short {
+table[data-details-visible="false"] .reward-recipient .full,
+table[data-details-visible="true"] .reward-recipient .short {
   display: none;
 }
-table[data-details-visible="false"] #rewardRecipient .short,
-table[data-details-visible="true"] #rewardRecipient .full {
+table[data-details-visible="false"] .reward-recipient .short,
+table[data-details-visible="true"] .reward-recipient .full {
   display: initial;
 }
-#To > td,
-#To > th {
+.to > td,
+.to > th {
   padding-bottom: 24px;
 }
 table[data-make-claim="ok"] thead {
-  opacity: 0;
+  visibility: collapse;
   pointer-events: none;
-  transform: translate(-50%, -50%);
   /* filter: blur(4px); */
 }
 table[data-make-claim="error"] tbody {
   opacity: 0;
   pointer-events: none;
-  transform: translate(-50%, -50%);
   filter: blur(4px);
+  display: none;
 }
-#rewardRecipient a div {
+.reward-recipient a div {
   opacity: 0.66;
 }
-#rewardRecipient a:hover div {
+.reward-recipient a:hover div {
   opacity: 1;
 }
-#rewardRecipient div {
+.reward-recipient div {
   color: #fff;
 }
-table[data-details-visible="true"] #additionalDetails svg.opener {
+table[data-details-visible="true"] .additional-details svg.opener {
   display: none;
 }
-table[data-details-visible="false"] #additionalDetails svg.opener {
+table[data-details-visible="false"] .additional-details svg.opener {
   display: unset;
 }
-table[data-details-visible="true"] #additionalDetails svg.closer {
+table[data-details-visible="true"] .additional-details svg.closer {
   display: unset;
 }
-table[data-details-visible="false"] #additionalDetails svg.closer {
+table[data-details-visible="false"] .additional-details svg.closer {
   display: none;
 }
-td#owner > a {
+td.owner > a {
   word-break: break-all;
 }
 table td {
@@ -253,16 +260,16 @@ table td {
 table th {
   padding-left: 32px;
 }
-[data-loader="false"] #claim-loader {
+[data-loader="false"] .claim-loader {
   display: none;
 }
-[data-make-claim="false"] #make-claim {
+[data-make-claim="false"] .make-claim {
   display: none;
 }
-[data-view-claim="false"] #view-claim {
+[data-view-claim="false"] .view-claim {
   display: none;
 }
-[data-invalidator="false"] #invalidator {
+[data-invalidator="false"] .invalidator {
   display: none;
 }
 
@@ -272,7 +279,7 @@ table th {
   position: absolute;
 }
 
-#claiming-message::after {
+.claiming-message::after {
   content: "";
   animation: ellipsis 1s infinite;
   position: absolute;
@@ -302,26 +309,17 @@ table th {
     transform: rotate(360deg);
   }
 }
-#claim-loader > svg {
+.claim-loader > svg {
   animation: rotate 1s linear infinite;
 }
 tbody,
 thead {
   background-color: var(--background-color-default);
-  position: absolute;
   box-shadow: inset 0 0 96px #00bfff10;
   transition: 0.25s all ease-in-out;
-  border: 1px solid var(--border-color);
-  transform: translate(-50%, -50%);
-  width: 100%;
-  max-width: 563px;
   overflow: hidden;
   /* box-shadow: 0 12px 64px #00000010; */
 }
-table * {
-  text-wrap: nowrap;
-}
-
 @keyframes thead-fade-in {
   0% {
     opacity: 0;
@@ -331,6 +329,12 @@ table * {
   }
 }
 
+tr {
+  transition:
+    visibility 0s,
+    opacity 0.5s linear;
+}
+
 thead {
   animation: thead-fade-in 0.5s ease-in-out;
 }
diff --git a/static/styles/rewards/light-mode.css b/static/styles/rewards/light-mode.css
index 5ceb56a8..3860e1fa 100644
--- a/static/styles/rewards/light-mode.css
+++ b/static/styles/rewards/light-mode.css
@@ -13,7 +13,7 @@
   table a:hover > div {
     color: #000;
   }
-  #rewardAmount > a {
+  .reward-amount > a {
     color: #000;
   }
   svg path {
@@ -41,15 +41,11 @@
   div#build > a {
     color: #000;
   }
-  #rewardAmount div,
-  #rewardRecipient div,
-  #rewardsCount {
+  .reward-amount div,
+  .reward-recipient div,
+  .rewards-count {
     color: #000;
   }
-  #nextTx,
-  #previousTx {
-    fill: #000;
-  }
   html {
     background-color: #fff;
   }
@@ -69,9 +65,6 @@
     animation: none;
   }
 
-  #carousel > div:hover {
-    color: #000;
-  }
   tbody,
   thead {
     background-color: #fff;
diff --git a/static/styles/rewards/pay.css b/static/styles/rewards/pay.css
index b87a55b2..7813f302 100644
--- a/static/styles/rewards/pay.css
+++ b/static/styles/rewards/pay.css
@@ -36,7 +36,6 @@ main {
   max-width: 100vw;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
 }
 
@@ -102,7 +101,7 @@ a {
   /* font-weight: 400; */
 }
 
-div.footer > div {
+footer > div {
   /* bottom: 48px; */
   padding: 48px 0;
   text-align: center;
@@ -213,7 +212,7 @@ footer {
   opacity: 1;
 }
 
-.footer {
+footer {
   /* display: flex; */
   /* align-items: center; */
   opacity: 0;
@@ -221,7 +220,7 @@ footer {
   text-align: center;
 }
 
-.footer.ready {
+footer.ready {
   opacity: 1;
 }