diff --git a/static/index.html b/static/index.html
index 2f324f2b..fc4ede08 100644
--- a/static/index.html
+++ b/static/index.html
@@ -7,7 +7,6 @@
     <link href="styles/rewards/claim-table.css" rel="stylesheet" />
     <link href="styles/rewards/media-queries.css" rel="stylesheet" />
     <link href="styles/rewards/light-mode.css" rel="stylesheet" />
-
     <link rel="canonical" href="https://pay.ubq.fi" />
     <meta charset="utf-8" />
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
@@ -28,11 +27,7 @@
     <meta property="twitter:domain" content="dao.ubq.fi" />
     <meta property="twitter:url" content="https://dao.ubq.fi" />
     <title>Ubiquity Rewards | Ubiquity DAO</title>
-    <!--
-      icons from: https://fonts.google.com/icons
-      weight: 300
-      optical-size: 24
-     -->
+    <!-- icons from: https://fonts.google.com/icons weight: 300 optical-size: 24 -->
   </head>
   <body>
     <background>
@@ -62,32 +57,52 @@
         <table>
           <thead>
             <tr>
-              <th><div>Notice</div></th>
-              <td><div>Loading...</div></td>
+              <th>
+                <div>Notice</div>
+              </th>
+              <td>
+                <div>Loading...</div>
+              </td>
             </tr>
           </thead>
           <tbody>
             <tr id="Amount">
-              <th><div>Amount</div></th>
-              <td id="rewardAmount"><div>Loading...</div></td>
+              <th>
+                <div>Amount</div>
+              </th>
+              <td id="rewardAmount">
+                <div>Loading...</div>
+              </td>
             </tr>
             <tr id="Token">
-              <th><div>Token</div></th>
+              <th>
+                <div>Token</div>
+              </th>
               <td id="rewardToken">
-                <span class="full"><div></div></span>
-                <span class="short"><div>Loading...</div></span>
+                <span class="full">
+                  <div></div>
+                </span>
+                <span class="short">
+                  <div>Loading...</div>
+                </span>
               </td>
             </tr>
             <tr id="To">
-              <th><div>For</div></th>
+              <th>
+                <div>For</div>
+              </th>
               <td id="rewardRecipient">
-                <span class="full"><div></div></span>
-                <span class="short"><div>Loading...</div></span>
+                <span class="full">
+                  <div></div>
+                </span>
+                <span class="short">
+                  <div>Loading...</div>
+                </span>
               </td>
             </tr>
             <tr id="additional-details-border">
-              <th
-                ><div>
+              <th>
+                <div>
                   <button id="additionalDetails">
                     <div>Details</div>
                     <svg class="opener" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
@@ -99,13 +114,15 @@
                       <path
                         d="M356-173.847 313.847-216 480-382.153 646.153-216 604-173.847l-124-124-124 124Zm124-404L313.847-744 356-786.153l124 124 124-124L646.153-744 480-577.847Z"
                       />
-                    </svg> </button></div
-              ></th>
+                    </svg>
+                  </button>
+                </div>
+              </th>
               <td>
-                <div id="controls">
-                  <button id="claimButton" class="hide-cl">
+                <div id="controls" data-loader="false" data-make-claim="false" data-view-claim="false">
+                  <button id="claim-loader">
                     <svg
-                      class="claim-loader"
+                      id="claim-loader"
                       version="1.1"
                       id="L9"
                       xmlns="http://www.w3.org/2000/svg"
@@ -128,28 +145,40 @@
                         />
                       </path>
                     </svg>
+                    <div id="claiming-message">Claiming</div>
+                  </button>
+                  <button id="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" class="claim-icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" id="claim-icon">
                       <path
                         d="M252.309-180.001q-30.308 0-51.308-21t-21-51.308V-360H240v107.691q0 4.616 3.846 8.463 3.847 3.846 8.463 3.846h455.382q4.616 0 8.463-3.846 3.846-3.847 3.846-8.463V-360h59.999v107.691q0 30.308-21 51.308t-51.308 21H252.309ZM480-335.386 309.233-506.153l42.153-43.383 98.615 98.615v-336.001h59.998v336.001l98.615-98.615 42.153 43.383L480-335.386Z"
                       />
                     </svg>
                   </button>
-                  <button id="viewClaimButton" class="hide-cl">
+
+                  <button id="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" class="link-icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" id="link-icon">
                       <path
                         d="M212.309-140.001q-30.308 0-51.308-21t-21-51.308v-535.382q0-30.308 21-51.308t51.308-21h252.305V-760H212.309q-4.616 0-8.463 3.846-3.846 3.847-3.846 8.463v535.382q0 4.616 3.846 8.463 3.847 3.846 8.463 3.846h535.382q4.616 0 8.463-3.846 3.846-3.847 3.846-8.463v-252.305h59.999v252.305q0 30.308-21 51.308t-51.308 21H212.309Zm176.46-206.615-42.153-42.153L717.847-760H560v-59.999h259.999V-560H760v-157.847L388.769-346.616Z"
                       />
                     </svg>
                   </button>
+
+                  <button id="invalidator">
+                    <div>Void</div>
+                    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+                      <path
+                        d="M256-213.847 213.847-256l224-224-224-224L256-746.153l224 224 224-224L746.153-704l-224 224 224 224L704-213.847l-224-224-224 224Z"
+                      />
+                    </svg>
+                  </button>
                 </div>
               </td>
             </tr>
           </tbody>
           <tbody id="additionalDetailsTable"></tbody>
         </table>
-
         <figure id="carousel">
           <div id="prevTx"></div>
           <div id="rewardsCount"></div>
@@ -162,7 +191,6 @@
         </div>
       </footer>
     </main>
-
     <ul class="notifications"></ul>
     <script src="out/init.js" type="application/javascript"></script>
     <link href="styles/proxima.css" rel="stylesheet" />
diff --git a/static/scripts/rewards/ButtonController.ts b/static/scripts/rewards/ButtonController.ts
new file mode 100644
index 00000000..5f7372ef
--- /dev/null
+++ b/static/scripts/rewards/ButtonController.ts
@@ -0,0 +1,91 @@
+const LOADER = "data-loader";
+const MAKE_CLAIM = "data-make-claim";
+const VIEW_CLAIM = "data-view-claim";
+const INVALIDATOR = "data-invalidator";
+export class ButtonController {
+  private _controls: HTMLDivElement;
+
+  constructor(controls: HTMLDivElement) {
+    this._controls = controls;
+    this.hideAll();
+  }
+
+  public showLoader(): void {
+    if (window.ethereum) {
+      this._controls.setAttribute(LOADER, "true");
+    } else {
+      throw new Error("Can not show loader without `window.ethereum`");
+    }
+  }
+
+  public hideLoader(): void {
+    this._controls.setAttribute(LOADER, "false");
+  }
+
+  public hideMakeClaim(): void {
+    this._controls.setAttribute(MAKE_CLAIM, "false");
+  }
+
+  public showMakeClaim(): void {
+    if (window.ethereum) {
+      this._controls.setAttribute(MAKE_CLAIM, "true");
+    } else {
+      throw new Error("Can not show make claim button without `window.ethereum`");
+    }
+  }
+
+  public hideViewClaim(): void {
+    this._controls.setAttribute(VIEW_CLAIM, "false");
+  }
+
+  public showViewClaim(): void {
+    this._controls.setAttribute(VIEW_CLAIM, "true");
+  }
+
+  public hideInvalidator(): void {
+    this._controls.setAttribute(INVALIDATOR, "false");
+  }
+
+  public showInvalidator(): void {
+    if (window.ethereum) {
+      this._controls.setAttribute(INVALIDATOR, "true");
+    } else {
+      throw new Error("Can not show invalidator button without `window.ethereum`");
+    }
+  }
+
+  public onlyShowLoader(): void {
+    this.hideMakeClaim();
+    this.hideViewClaim();
+    this.hideInvalidator();
+    this.showLoader();
+  }
+
+  public onlyShowMakeClaim(): void {
+    this.hideLoader();
+    this.showMakeClaim();
+    this.hideViewClaim();
+    this.hideInvalidator();
+  }
+
+  public onlyShowViewClaim(): void {
+    this.hideLoader();
+    this.hideMakeClaim();
+    this.showViewClaim();
+    this.hideInvalidator();
+  }
+
+  public onlyShowInvalidator(): void {
+    this.hideLoader();
+    this.hideMakeClaim();
+    this.hideViewClaim();
+    this.showInvalidator();
+  }
+
+  public hideAll(): void {
+    this.hideLoader();
+    this.hideMakeClaim();
+    this.hideViewClaim();
+    this.hideInvalidator();
+  }
+}
diff --git a/static/scripts/rewards/invalidate-component.ts b/static/scripts/rewards/invalidate-component.ts
deleted file mode 100644
index 8687d329..00000000
--- a/static/scripts/rewards/invalidate-component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-const invalidateBtnInnerHTML = `<div>Void</div>
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M256-213.847 213.847-256l224-224-224-224L256-746.153l224 224 224-224L746.153-704l-224 224 224 224L704-213.847l-224-224-224 224Z"/></svg>`;
-
-// parse string and turn into an html entity
-function parseHtml(html: string) {
-  const button = document.createElement("button");
-  button.id = "invalidateBtn";
-  button.innerHTML = html;
-  return button.cloneNode(true) as HTMLButtonElement;
-}
-
-export default parseHtml(invalidateBtnInnerHTML);
diff --git a/static/scripts/rewards/render-transaction/claim-rewards-pagination.ts b/static/scripts/rewards/render-transaction/claim-rewards-pagination.ts
index 5fdccbd0..163fa8c0 100644
--- a/static/scripts/rewards/render-transaction/claim-rewards-pagination.ts
+++ b/static/scripts/rewards/render-transaction/claim-rewards-pagination.ts
@@ -1,5 +1,5 @@
 import { app } from "../app-state";
-import { claimButton } from "../toaster";
+import { makeClaimButton } from "../toaster";
 import { table } from "./read-claim-data-from-url";
 import { renderTransaction } from "./render-transaction";
 import { removeAllEventListeners } from "./utils";
@@ -9,24 +9,13 @@ 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"));
+}
 
-  if (nextTxButton) {
-    nextTxButton.addEventListener("click", () => {
-      claimButton.element = removeAllEventListeners(claimButton.element) as HTMLButtonElement;
-      app.nextPermit();
-      rewardsCount.innerHTML = `${app.rewardIndex + 1}/${app.claims.length} reward`;
-      table.setAttribute(`data-claim`, "error");
-      renderTransaction().catch(console.error);
-    });
-  }
-
-  if (prevTxButton) {
-    prevTxButton.addEventListener("click", () => {
-      claimButton.element = removeAllEventListeners(claimButton.element) as HTMLButtonElement;
-      app.previousPermit();
-      rewardsCount.innerHTML = `${app.rewardIndex + 1}/${app.claims.length} reward`;
-      table.setAttribute(`data-claim`, "error");
-      renderTransaction().catch(console.error);
-    });
-  }
+export function transactionHandler(direction: "next" | "previous") {
+  removeAllEventListeners(makeClaimButton) 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 c8485b20..5c9e8e24 100644
--- a/static/scripts/rewards/render-transaction/insert-table-data.ts
+++ b/static/scripts/rewards/render-transaction/insert-table-data.ts
@@ -27,7 +27,7 @@ export function insertErc20PermitTableData(
     { 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.setAttribute(`data-claim-rendered`, "true");
+  table.setAttribute(`data-make-claim-rendered`, "true");
   return requestedAmountElement;
 }
 
@@ -63,7 +63,7 @@ export function insertErc721PermitTableData(reward: Erc721Permit, table: Element
     },
     { name: "Contribution Type", value: GITHUB_CONTRIBUTION_TYPE.split(",").join(", ") },
   ]);
-  table.setAttribute(`data-claim-rendered`, "true");
+  table.setAttribute(`data-make-claim-rendered`, "true");
   return requestedAmountElement;
 }
 
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 e295d0c2..72846e7d 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
@@ -1,4 +1,6 @@
+import { Type } from "@sinclair/typebox";
 import { Value } from "@sinclair/typebox/value";
+import { createClient } from "@supabase/supabase-js";
 import { AppState, app } from "../app-state";
 import { useFastestRpc } from "../rpc-optimization/get-optimal-provider";
 import { connectWallet } from "../web3/connect-wallet";
@@ -7,8 +9,7 @@ import { claimRewardsPagination } from "./claim-rewards-pagination";
 import { renderTransaction } from "./render-transaction";
 import { setClaimMessage } from "./set-claim-message";
 import { RewardPermit, claimTxT } from "./tx-type";
-import { Type } from "@sinclair/typebox";
-import { createClient } from "@supabase/supabase-js";
+import { buttonController, toaster } from "../toaster";
 
 declare const SUPABASE_URL: string;
 declare const SUPABASE_ANON_KEY: string;
@@ -23,22 +24,25 @@ export async function readClaimDataFromUrl(app: AppState) {
   if (!base64encodedTxData) {
     // No claim data found
     setClaimMessage({ type: "Notice", message: `No claim data found.` });
-    table.setAttribute(`data-claim`, "error");
+    table.setAttribute(`data-make-claim`, "error");
     return;
   }
 
   app.claims = decodeClaimData(base64encodedTxData).flat();
   app.claimTxs = await getClaimedTxs(app);
   app.provider = await useFastestRpc(app);
-  const networkId = app.reward?.networkId || app.networkId;
-  app.signer = await connectWallet().catch(console.error);
-
+  if (window.ethereum) {
+    app.signer = await connectWallet().catch(console.error);
+    window.ethereum.on("accountsChanged", () => buttonController.showMakeClaim());
+  } else {
+    buttonController.hideAll();
+    toaster.create("info", "Please use a web3 enabled browser to collect this reward.");
+  }
   displayRewardDetails();
   displayRewardPagination();
 
-  renderTransaction()
-    .then(() => verifyCurrentNetwork(networkId as number))
-    .catch(console.error);
+  await renderTransaction();
+  await verifyCurrentNetwork(app.networkId);
 }
 
 async function getClaimedTxs(app: AppState): Promise<Record<string, string>> {
@@ -61,7 +65,7 @@ function decodeClaimData(base64encodedTxData: string): RewardPermit[] {
   } catch (error) {
     console.error(error);
     setClaimMessage({ type: "Error", message: `1. Invalid claim data passed in URL` });
-    table.setAttribute(`data-claim`, "error");
+    table.setAttribute(`data-make-claim`, "error");
     throw error;
   }
   try {
@@ -69,7 +73,7 @@ function decodeClaimData(base64encodedTxData: string): RewardPermit[] {
   } catch (error) {
     console.error(error);
     setClaimMessage({ type: "Error", message: `2. Invalid claim data passed in URL` });
-    table.setAttribute(`data-claim`, "error");
+    table.setAttribute(`data-make-claim`, "error");
     throw error;
   }
 }
diff --git a/static/scripts/rewards/render-transaction/render-transaction.ts b/static/scripts/rewards/render-transaction/render-transaction.ts
index 4192caa0..cddb2ea3 100644
--- a/static/scripts/rewards/render-transaction/render-transaction.ts
+++ b/static/scripts/rewards/render-transaction/render-transaction.ts
@@ -1,6 +1,6 @@
 import { app } from "../app-state";
 import { networkExplorers } from "../constants";
-import { claimButton, hideClaimButton, hideLoader, hideViewClaimButton, showClaimButton, showViewClaimButton, viewClaimButton } from "../toaster";
+import { buttonController, makeClaimButton, viewClaimButton } from "../toaster";
 import { claimErc20PermitHandlerWrapper, fetchTreasury, generateInvalidatePermitAdminControl } from "../web3/erc20-permit";
 import { claimErc721PermitHandler } from "../web3/erc721-permit";
 import { verifyCurrentNetwork } from "../web3/verify-current-network";
@@ -10,26 +10,18 @@ import { renderNftSymbol, renderTokenSymbol } from "./render-token-symbol";
 import { Erc20Permit, RewardPermit } from "./tx-type";
 
 const carousel = document.getElementById("carousel") as Element;
-
+const table = document.querySelector(`table`) as HTMLTableElement;
 type Success = boolean;
-export async function renderTransaction(nextTx?: boolean): Promise<Success> {
-  const table = document.getElementsByTagName(`table`)[0];
 
+export async function renderTransaction(): Promise<Success> {
   if (app.claims && app.claims.length > 1) {
-    console.trace("displaying carousel");
-    carousel.className = "display-carousel";
+    carousel.className = "flex";
     const rewardsCount = document.getElementById("rewardsCount") as Element;
     rewardsCount.innerHTML = `${app.rewardIndex + 1}/${app.claims.length} reward`;
-  } else {
-    console.trace("not displaying carousel");
-  }
-
-  if (nextTx) {
-    app.nextPermit();
   }
 
   if (!app.reward) {
-    hideLoader();
+    buttonController.hideAll();
     console.log("No reward found");
     return false;
   }
@@ -54,23 +46,23 @@ export async function renderTransaction(nextTx?: boolean): Promise<Success> {
     const toElement = document.getElementById(`rewardRecipient`) as Element;
     renderEnsName({ element: toElement, address: app.reward.transferDetails.to }).catch(console.error);
 
-    generateInvalidatePermitAdminControl(app).catch(console.error);
+    if (app.provider) {
+      generateInvalidatePermitAdminControl(app).catch(console.error);
+    }
 
     if (app.claimTxs[app.reward.permit.nonce.toString()] !== undefined) {
-      hideClaimButton();
-      showViewClaimButton();
-      viewClaimButton.element.addEventListener("click", () => window.open(`${app.currentExplorerUrl}/tx/${app.claimTxs[app.reward.permit.nonce.toString()]}`));
-    } else {
-      hideViewClaimButton();
-      showClaimButton();
-      claimButton.element.addEventListener("click", claimErc20PermitHandlerWrapper(app));
+      buttonController.showViewClaim();
+      viewClaimButton.addEventListener("click", () => window.open(`${app.currentExplorerUrl}/tx/${app.claimTxs[app.reward.permit.nonce.toString()]}`));
+    } else if (window.ethereum) {
+      // requires wallet connection to claim
+      buttonController.showMakeClaim();
+      makeClaimButton.addEventListener("click", claimErc20PermitHandlerWrapper(app));
     }
-    table.setAttribute(`data-claim`, "ok");
 
-    claimButton.element.addEventListener("click", claimErc20PermitHandlerWrapper(app));
+    table.setAttribute(`data-make-claim`, "ok");
   } else {
     const requestedAmountElement = insertErc721PermitTableData(app.reward, table);
-    table.setAttribute(`data-claim`, "ok");
+    table.setAttribute(`data-make-claim`, "ok");
 
     renderNftSymbol({
       tokenAddress: app.reward.permit.permitted.token,
@@ -82,7 +74,7 @@ export async function renderTransaction(nextTx?: boolean): Promise<Success> {
     const toElement = document.getElementById(`rewardRecipient`) as Element;
     renderEnsName({ element: toElement, address: app.reward.transferDetails.to }).catch(console.error);
 
-    claimButton.element.addEventListener("click", claimErc721PermitHandler(app.reward));
+    makeClaimButton.addEventListener("click", claimErc721PermitHandler(app.reward));
   }
 
   return true;
diff --git a/static/scripts/rewards/toaster.ts b/static/scripts/rewards/toaster.ts
index 4c2462f8..717c152e 100644
--- a/static/scripts/rewards/toaster.ts
+++ b/static/scripts/rewards/toaster.ts
@@ -1,3 +1,5 @@
+import { ButtonController } from "./ButtonController";
+
 export const toaster = {
   create: createToast,
   error: errorToast,
@@ -9,22 +11,14 @@ export const toaster = {
   },
 };
 
-export const claimButton = {
-  // loading: loadingClaimButton,
-  // reset: resetClaimButton,
-  element: document.getElementById("claimButton") as HTMLButtonElement,
-};
-
-export const viewClaimButton = {
-  // loading: loadingClaimButton,
-  // reset: resetClaimButton,
-  element: document.getElementById("viewClaimButton") as HTMLButtonElement,
-};
-
-const notifications = document.querySelector(".notifications") as HTMLUListElement;
+export const controls = document.getElementById("controls") as HTMLDivElement;
+export const makeClaimButton = document.getElementById("make-claim") as HTMLButtonElement;
+export const viewClaimButton = document.getElementById("view-claim") as HTMLButtonElement;
+export const notifications = document.querySelector(".notifications") as HTMLUListElement;
+export const buttonController = new ButtonController(controls);
 
 export function createToast(meaning: keyof typeof toaster.icons, text: string) {
-  hideLoader();
+  if (meaning != "info") buttonController.hideLoader();
   const toastDetails = {
     timer: 5000,
   } as {
@@ -59,32 +53,6 @@ function removeToast(toast: HTMLElement, timeoutId?: NodeJS.Timeout) {
   setTimeout(() => toast.remove(), 500); // Removing the toast after 500ms
 }
 
-export function showLoader() {
-  claimButton.element.disabled = true;
-  claimButton.element.className = "show-cl";
-}
-
-export function hideLoader() {
-  claimButton.element.disabled = false;
-  claimButton.element.className = "hide-cl";
-}
-
-export function hideClaimButton() {
-  claimButton.element.classList.add("hide");
-}
-
-export function showClaimButton() {
-  claimButton.element.classList.remove("hide");
-}
-
-export function hideViewClaimButton() {
-  viewClaimButton.element.classList.add("hide");
-}
-
-export function showViewClaimButton() {
-  viewClaimButton.element.classList.remove("hide");
-}
-
 export function errorToast(error: MetaMaskError, errorMessage?: string) {
   // If a custom error message is provided, use it
   if (errorMessage) {
diff --git a/static/scripts/rewards/web3/connect-wallet.ts b/static/scripts/rewards/web3/connect-wallet.ts
index 4c949c33..81a29cb7 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 { claimButton, toaster } from "../toaster";
+import { buttonController, toaster } from "../toaster";
 
 export async function connectWallet(): Promise<JsonRpcSigner | null> {
   try {
@@ -13,6 +13,7 @@ export async function connectWallet(): Promise<JsonRpcSigner | null> {
     const address = await signer.getAddress();
 
     if (!address) {
+      buttonController.hideAll();
       console.error("Wallet not connected");
       return null;
     }
@@ -23,10 +24,8 @@ export async function connectWallet(): Promise<JsonRpcSigner | null> {
       console.error(error);
       if (error?.message?.includes("missing provider")) {
         toaster.create("info", "Please use a web3 enabled browser to collect this reward.");
-        claimButton.element.disabled = true;
       } else {
         toaster.create("info", "Please connect your wallet to collect this reward.");
-        claimButton.element.disabled = true;
       }
     }
     return null;
diff --git a/static/scripts/rewards/web3/erc20-permit.ts b/static/scripts/rewards/web3/erc20-permit.ts
index c732d6ef..9e248bd8 100644
--- a/static/scripts/rewards/web3/erc20-permit.ts
+++ b/static/scripts/rewards/web3/erc20-permit.ts
@@ -3,11 +3,9 @@ import { BigNumber, BigNumberish, Contract, ethers } from "ethers";
 import { erc20Abi, permit2Abi } from "../abis";
 import { AppState, app } from "../app-state";
 import { permit2Address } from "../constants";
-import invalidateButton from "../invalidate-component";
 import { supabase } from "../render-transaction/read-claim-data-from-url";
-import { renderTransaction } from "../render-transaction/render-transaction";
 import { Erc20Permit, Erc721Permit } from "../render-transaction/tx-type";
-import { MetaMaskError, claimButton, errorToast, showLoader, toaster } from "../toaster";
+import { MetaMaskError, buttonController, errorToast, makeClaimButton, toaster } from "../toaster";
 
 export async function fetchTreasury(
   permit: Erc20Permit | Erc721Permit
@@ -47,9 +45,8 @@ export async function fetchTreasury(
 }
 
 async function checkPermitClaimability(app: AppState): Promise<boolean> {
-  let isPermitClaimable = false;
   try {
-    isPermitClaimable = await checkPermitClaimable(app);
+    return await checkPermitClaimable(app);
   } catch (error: unknown) {
     if (error instanceof Error) {
       const e = error as unknown as MetaMaskError;
@@ -57,7 +54,8 @@ async function checkPermitClaimability(app: AppState): Promise<boolean> {
       errorToast(e, e.reason);
     }
   }
-  return isPermitClaimable;
+  buttonController.hideMakeClaim();
+  return false;
 }
 
 async function transferFromPermit(permit2Contract: Contract, app: AppState) {
@@ -73,6 +71,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();
       } else {
         // Handle other errors
         console.error("Error in permitTransferFrom: ", e);
@@ -87,6 +87,9 @@ async function waitForTransaction(tx: TransactionResponse) {
   try {
     const receipt = await tx.wait();
     toaster.create("success", `Claim Complete.`);
+    buttonController.showViewClaim();
+    buttonController.hideLoader();
+    buttonController.hideMakeClaim();
     console.log(receipt.transactionHash);
     return receipt;
   } catch (error: unknown) {
@@ -98,22 +101,10 @@ async function waitForTransaction(tx: TransactionResponse) {
   }
 }
 
-async function renderTx(app: AppState) {
-  try {
-    app.claims.slice(0, 1);
-    await renderTransaction(true);
-  } catch (error: unknown) {
-    if (error instanceof Error) {
-      const e = error as unknown as MetaMaskError;
-      console.error("Error in renderTransaction: ", e);
-      errorToast(e, e.reason);
-    }
-  }
-}
-
 export function claimErc20PermitHandlerWrapper(app: AppState) {
   return async function claimErc20PermitHandler() {
-    showLoader();
+    buttonController.hideMakeClaim();
+    buttonController.showLoader();
 
     const isPermitClaimable = await checkPermitClaimability(app);
     if (!isPermitClaimable) return;
@@ -124,15 +115,16 @@ export function claimErc20PermitHandlerWrapper(app: AppState) {
     const tx = await transferFromPermit(permit2Contract, app);
     if (!tx) return;
 
+    // buttonController.showLoader();
+    // buttonController.hideMakeClaim();
+
     const receipt = await waitForTransaction(tx);
     if (!receipt) return;
 
     const isHashUpdated = await updatePermitTxHash(app, receipt.transactionHash);
     if (!isHashUpdated) return;
 
-    claimButton.element.removeEventListener("click", claimErc20PermitHandler);
-
-    await renderTx(app);
+    makeClaimButton.removeEventListener("click", claimErc20PermitHandler);
   };
 }
 
@@ -147,6 +139,7 @@ export async function checkPermitClaimable(app: AppState): Promise<boolean> {
 
   if (isClaimed) {
     toaster.create("error", `Your reward for this task has already been claimed or invalidated.`);
+    buttonController.showViewClaim();
     return false;
   }
 
@@ -166,10 +159,12 @@ export async function checkPermitClaimable(app: AppState): Promise<boolean> {
 
   if (!isSolvent) {
     toaster.create("error", `Not enough funds on funding wallet to collect this reward. Please let the financier know.`);
+    buttonController.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();
     return false;
   }
 
@@ -184,6 +179,7 @@ export async function checkPermitClaimable(app: AppState): Promise<boolean> {
   const beneficiary = reward.transferDetails.to.toLowerCase();
   if (beneficiary !== user) {
     toaster.create("warning", `This reward is not for you.`);
+    buttonController.hideMakeClaim();
     return false;
   }
 
@@ -206,14 +202,14 @@ export async function generateInvalidatePermitAdminControl(app: AppState) {
     console.error(error);
   }
 
-  const controls = document.getElementById("controls") as HTMLDivElement;
-  controls.appendChild(invalidateButton);
-
+  const invalidateButton = document.getElementById("invalidator") as HTMLDivElement;
+  buttonController.showInvalidator();
   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;
       }
       await invalidateNonce(app.signer, app.reward.permit.nonce);
@@ -226,6 +222,7 @@ export async function generateInvalidatePermitAdminControl(app: AppState) {
       }
     }
     toaster.create("info", "Nonce invalidation transaction sent");
+    buttonController.hideInvalidator();
   });
 }
 
diff --git a/static/scripts/rewards/web3/erc721-permit.ts b/static/scripts/rewards/web3/erc721-permit.ts
index 2d196986..110989c6 100644
--- a/static/scripts/rewards/web3/erc721-permit.ts
+++ b/static/scripts/rewards/web3/erc721-permit.ts
@@ -2,13 +2,12 @@ import { JsonRpcProvider, TransactionResponse } from "@ethersproject/providers";
 import { ethers } from "ethers";
 import { nftRewardAbi } from "../abis/nft-reward-abi";
 import { app } from "../app-state";
-import { renderTransaction } from "../render-transaction/render-transaction";
 import { Erc721Permit } from "../render-transaction/tx-type";
-import { claimButton, showLoader, toaster } from "../toaster";
+import { buttonController, makeClaimButton, toaster } from "../toaster";
 import { connectWallet } from "./connect-wallet";
 
 export function claimErc721PermitHandler(reward: Erc721Permit) {
-  return async function claimButtonHandler() {
+  return async function claimHandler() {
     const signer = await connectWallet();
     if (!signer) {
       return;
@@ -30,22 +29,26 @@ export function claimErc721PermitHandler(reward: Erc721Permit) {
       return;
     }
 
-    showLoader();
+    buttonController.showLoader();
     try {
       const nftContract = new ethers.Contract(reward.permit.permitted.token, nftRewardAbi, signer);
 
       const tx: TransactionResponse = await nftContract.safeMint(reward.request, reward.signature);
       toaster.create("info", `Transaction sent. Waiting for confirmation...`);
       const receipt = await tx.wait();
+      buttonController.hideLoader();
       toaster.create("success", `Claim Complete.`);
+      buttonController.showViewClaim();
+      buttonController.hideMakeClaim();
       console.log(receipt.transactionHash); // @TODO: post to database
 
-      claimButton.element.removeEventListener("click", claimButtonHandler);
+      makeClaimButton.removeEventListener("click", claimHandler);
 
-      renderTransaction(true).catch((error) => {
-        console.error(error);
-        toaster.create("error", `Error rendering transaction: ${error.message}`);
-      });
+      // app.nextPermit();
+      // renderTransaction().catch((error) => {
+      //   console.error(error);
+      //   toaster.create("error", `Error rendering transaction: ${error.message}`);
+      // });
     } catch (error: unknown) {
       console.error(error);
       if (error instanceof 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 eaffaa43..aabc7267 100644
--- a/static/scripts/rewards/web3/handle-if-on-correct-network.ts
+++ b/static/scripts/rewards/web3/handle-if-on-correct-network.ts
@@ -1,12 +1,9 @@
-import invalidateButton from "../invalidate-component";
-import { showLoader } from "../toaster";
+import { buttonController } from "../toaster";
 
 export function handleIfOnCorrectNetwork(currentNetworkId: number, desiredNetworkId: number) {
   if (desiredNetworkId === currentNetworkId) {
-    // enable the button once on the correct network
-    invalidateButton.disabled = false;
+    buttonController.showInvalidator();
   } else {
-    showLoader();
-    invalidateButton.disabled = true;
+    buttonController.hideInvalidator();
   }
 }
diff --git a/static/scripts/rewards/web3/not-on-correct-network.ts b/static/scripts/rewards/web3/not-on-correct-network.ts
index aff4c909..595525c9 100644
--- a/static/scripts/rewards/web3/not-on-correct-network.ts
+++ b/static/scripts/rewards/web3/not-on-correct-network.ts
@@ -1,13 +1,10 @@
 import { ethers } from "ethers";
 import { getNetworkName } from "../constants";
-import { toaster } from "../toaster";
+import { buttonController, toaster } from "../toaster";
 import { switchNetwork } from "./switch-network";
 
 export function notOnCorrectNetwork(currentNetworkId: number, desiredNetworkId: number, web3provider: ethers.providers.Web3Provider) {
   if (currentNetworkId !== desiredNetworkId) {
-    if (desiredNetworkId == void 0) {
-      console.error(`You must pass in an EVM network ID in the URL query parameters using the key 'network' e.g. '?network=1'`);
-    }
     const networkName = getNetworkName(desiredNetworkId);
     if (!networkName) {
       toaster.create("error", `This dApp currently does not support payouts for network ID ${desiredNetworkId}`);
@@ -15,6 +12,7 @@ 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();
     });
   }
 }
diff --git a/static/scripts/rewards/web3/switch-network.ts b/static/scripts/rewards/web3/switch-network.ts
index 51ddae7c..98266c2f 100644
--- a/static/scripts/rewards/web3/switch-network.ts
+++ b/static/scripts/rewards/web3/switch-network.ts
@@ -1,9 +1,11 @@
 import { ethers } from "ethers";
 import { addNetwork } from "./add-network";
+import { buttonController } 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();
     return true;
   } catch (error: unknown) {
     // Add network if it doesn't exist.
diff --git a/static/scripts/rewards/web3/verify-current-network.ts b/static/scripts/rewards/web3/verify-current-network.ts
index bc658e1a..8d1e530d 100644
--- a/static/scripts/rewards/web3/verify-current-network.ts
+++ b/static/scripts/rewards/web3/verify-current-network.ts
@@ -1,18 +1,17 @@
 import { ethers } from "ethers";
-import invalidateButton from "../invalidate-component";
-import { showLoader, toaster } from "../toaster";
+import { buttonController } 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) {
-  const web3provider = new ethers.providers.Web3Provider(window.ethereum);
-  if (!web3provider || !web3provider.provider.isMetaMask) {
-    showLoader();
-    toaster.create("info", "Please connect to MetaMask.");
-    invalidateButton.disabled = true;
+  if (!window.ethereum) {
+    buttonController.hideAll();
+    return;
   }
 
+  const web3provider = new ethers.providers.Web3Provider(window.ethereum);
+
   const network = await web3provider.getNetwork();
   const currentNetworkId = network.chainId;
 
diff --git a/static/styles/rewards/claim-table.css b/static/styles/rewards/claim-table.css
index 7c09b143..b090f2d7 100644
--- a/static/styles/rewards/claim-table.css
+++ b/static/styles/rewards/claim-table.css
@@ -1,15 +1,13 @@
 :root {
   --left-table-column-width: 120px;
-
-  --background-color-default-brightness: 1%;
+  --background-color-default-brightness: 2%;
   --background-color-light-brightness: 6%;
   --border-brightness: 5%;
-
   --background-color-default: hsl(225 50% var(--background-color-default-brightness) / 1);
   --background-color-light: hsl(225 50% var(--background-color-light-brightness) / 1);
   --border-color: hsl(225 25% var(--border-brightness) / 1);
 }
-#claimButton {
+#claim {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -125,74 +123,83 @@ table tr#additional-details-border > * {
   padding: 0;
   margin: 0;
 }
-table[data-claim-rendered] {
+table[data-make-claim-rendered] {
   /* border: 1px solid #80808020; */
   /* border-right: 0; */
   /* border-left: 0; */
 }
-table[data-claim-rendered] #controls {
+table[data-make-claim-rendered] #controls {
   display: flex;
 }
-table[data-claim-rendered] button {
+table[data-make-claim-rendered] button {
   opacity: 0.5;
 }
-table[data-claim-rendered] button.hide {
+table[data-make-claim-rendered] button.hide {
   display: none !important;
 }
-table[data-claim-rendered] button:disabled {
+table[data-make-claim-rendered] button:disabled {
   opacity: 0.5;
   pointer-events: none;
 }
-table[data-claim-rendered] button:hover {
+table[data-make-claim-rendered] button:hover {
   background-color: #80808020;
   opacity: 1;
 }
-table[data-claim-rendered] button > div {
+table[data-make-claim-rendered] button > div {
   display: none;
 }
-table[data-claim-rendered] button:disabled > svg.claim-icon {
+table[data-make-claim-rendered] button:disabled > svg#claim-icon {
   display: none;
 }
-table[data-claim-rendered] button:hover > div {
+table[data-make-claim-rendered] button:hover > div {
   display: unset;
   color: #fff;
 }
 
-table[data-claim-rendered] button:hover > svg {
+table[data-make-claim-rendered] button:hover > svg {
   display: none !important;
 }
 
-.show-cl {
+.show {
   display: block;
 }
 
-table[data-claim-rendered] button.hide-cl > svg.claim-loader {
+table[data-make-claim-rendered] button.hide > svg#claim-loader {
   display: none;
 }
-table[data-claim-rendered] button.show-cl > svg.claim-icon {
-  display: none;
+table[data-make-claim-rendered] button.show > svg#claim-icon {
+  display: unset;
 }
-
-table[data-claim-rendered] button.show-cl > svg.claim-loader {
+table[data-make-claim-rendered] button.show > svg#claim-loader {
   display: unset;
 }
-table[data-claim-rendered] button.hide-cl > svg.claim-icon {
+table[data-make-claim-rendered] button.hide > svg#claim-icon {
   display: unset;
 }
 
-table[data-claim-rendered] button#additionalDetails {
+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 {
+  opacity: 1;
+  pointer-events: unset;
+}
+
+table[data-make-claim-rendered] button#additionalDetails {
   width: 100%;
   color: #fff;
   /* opacity: 0.25; */
 }
-table[data-claim-rendered] button#additionalDetails:hover {
+table[data-make-claim-rendered] button#additionalDetails:hover {
   /* opacity: 1; */
 }
-table[data-claim-rendered] tr {
+table[data-make-claim-rendered] tr {
   background-color: #80808000;
   transition: 125ms ease-in-out opacity;
 }
-table[data-claim-rendered] tr#additional-details-border {
+table[data-make-claim-rendered] tr#additional-details-border {
   /* background-color: #80808010; */
   /* background-color: var(--background-color-light); */
   /* -webkit-backdrop-filter: blur(4px); */
@@ -201,7 +208,7 @@ table[data-claim-rendered] tr#additional-details-border {
   /* border-left: 0; */
   /* border-right: 0; */
 }
-table[data-claim-rendered] tr#additional-details-border + tr > * {
+table[data-make-claim-rendered] tr#additional-details-border + tr > * {
   padding-top: 24px;
 }
 table #additionalDetailsTable tr,
@@ -237,8 +244,9 @@ table[data-contract-loaded] #Token {
 }
 #nextTx,
 #previousTx {
-  fill: #fff;
-  border-radius: 3px;
+  /* fill: #fff; */
+  /* border-radius: 3px; */
+  /* padding: 8px; */
 }
 table[data-details-visible="false"] #rewardToken .full,
 table[data-details-visible="true"] #rewardToken .short {
@@ -268,16 +276,16 @@ table tbody {
   /* box-shadow: inset 0 0 96px #00000008; */
   box-shadow: inset 0 0 96px #00bfff10;
 }
-table[data-claim="error"] thead {
+table[data-make-claim="error"] thead {
   display: table-row-group;
 }
-table[data-claim="ok"] thead {
+table[data-make-claim="ok"] thead {
   display: none;
 }
-table[data-claim="error"] tbody {
+table[data-make-claim="error"] tbody {
   display: none;
 }
-table[data-claim="ok"] tbody {
+table[data-make-claim="ok"] tbody {
   display: table-row-group;
 }
 
@@ -291,7 +299,6 @@ table[data-claim="ok"] tbody {
   color: #fff;
 }
 
-
 #additionalDetails svg {
   /* display: none; */
 }
@@ -323,3 +330,39 @@ table td {
 table th {
   padding-left: 16px;
 }
+
+[data-loader="false"] #claim-loader {
+  display: none;
+}
+[data-make-claim="false"] #make-claim {
+  display: none;
+}
+[data-view-claim="false"] #view-claim {
+  display: none;
+}
+[data-invalidator="false"] #invalidator {
+  display: none;
+}
+#claiming-message::after {
+  content: "";
+  animation: ellipsis 1s infinite;
+  position: absolute;
+}
+
+@keyframes ellipsis {
+  0% {
+    content: "";
+  }
+  25% {
+    content: ".";
+  }
+  50% {
+    content: "..";
+  }
+  75% {
+    content: "...";
+  }
+  100% {
+    content: "";
+  }
+}
diff --git a/static/styles/rewards/light-mode.css b/static/styles/rewards/light-mode.css
index f357c435..f8b7817f 100644
--- a/static/styles/rewards/light-mode.css
+++ b/static/styles/rewards/light-mode.css
@@ -37,10 +37,10 @@
   table button div {
     color: #000;
   }
-  table[data-claim-rendered] button:hover > div {
+  table[data-make-claim-rendered] button:hover > div {
     color: #000;
   }
-  table[data-claim-rendered] button:hover{
+  table[data-make-claim-rendered] button:hover {
     background-color: #80808018;
   }
   table a:hover,
@@ -76,11 +76,11 @@
     /* box-shadow: inset 0 0 96px #00000010; */
   }
 
-  table tbody{
+  table tbody {
     box-shadow: inset 0 0 96px #00000008;
   }
 
-  table[data-claim-rendered] tr#additional-details-border {
+  table[data-make-claim-rendered] tr#additional-details-border {
     /* background-color: var(--light-mode-background-color-dark); */
   }
   table[data-details-visible="true"] #additional-details-border ~ tr {
@@ -94,4 +94,7 @@
     opacity: 0;
     animation: none;
   }
+  #carousel > div:hover {
+    color: #000;
+  }
 }
diff --git a/static/styles/rewards/pay.css b/static/styles/rewards/pay.css
index af7d1b48..ec76f153 100644
--- a/static/styles/rewards/pay.css
+++ b/static/styles/rewards/pay.css
@@ -87,13 +87,18 @@ a {
   display: inline-block;
   vertical-align: middle;
 }
-
+#logo > div#logo-text > span::after {
+  content: " ";
+  display: inline-block;
+  width: 8px;
+}
 #logo > div#logo-text > span {
   font-size: 20px;
   letter-spacing: 5px;
   text-transform: uppercase;
   text-rendering: geometricPrecision;
   color: #fff;
+  /* margin-right: 8px; */
   /* font-weight: 400; */
 }
 
@@ -147,24 +152,44 @@ footer {
   align-items: center;
   align-self: center;
   margin: 12px auto;
-  opacity: 0.5;
-  display: none;
+  /* opacity: 0.5; */
+  /* display: none; */
+  opacity: 0;
+  transition: opacity 1s;
 }
-#carousel.display-carousel {
-  display: flex;
+#carousel > div {
+  color: #808080;
+  vertical-align: middle;
+}
+#carousel > div:hover {
+  color: #fff;
+}
+#carousel.flex {
+  /* display: flex; */
+  opacity: 1;
+}
+#carousel > #rewardsCount {
+  pointer-events: none;
+  display: inline-block; /* vertical-align: middle; */
 }
-
 #prevTx,
 #nextTx {
   padding: 3px;
-  margin: 8px;
-  border: 3px solid #fff;
+  margin: 3px;
+  border: 2px solid;
   cursor: pointer;
   transform: rotate(45deg);
+  border-radius: 3px;
+  width: 0px;
+  display: inline-block;
 }
 #prevTx {
-  border-color: transparent transparent #fff #fff;
+  /* border-color: transparent transparent #fff #fff; */
+  border-top-color: transparent;
+  border-right-color: transparent;
 }
 #nextTx {
-  border-color: #fff #fff transparent transparent;
+  /* border-color: #fff #fff transparent transparent; */
+  border-bottom-color: transparent;
+  border-left-color: transparent;
 }

Notice	Loading...	+ Notice +	+ Loading... +
Amount	Loading...	+ Amount +	+ Loading... +
Token	+ Token +	- - Loading... + + + + + Loading... +
For	+ For +	- - Loading... + + + + + Loading... +
+	+	- - + - + +