diff --git a/build/esbuild-watch.ts b/build/esbuild-watch.ts
index d00ab150..7e030699 100644
--- a/build/esbuild-watch.ts
+++ b/build/esbuild-watch.ts
@@ -8,6 +8,4 @@ async function watch() {
 }
 
 // The following expression MUST NOT be awaited.
-void watch().catch((err) => {
-  console.error("Error watching:", err);
-});
\ No newline at end of file
+void watch();
diff --git a/cypress/scripts/funding.ts b/cypress/scripts/funding.ts
index accc8615..c7bf9b77 100644
--- a/cypress/scripts/funding.ts
+++ b/cypress/scripts/funding.ts
@@ -21,7 +21,7 @@ class TestFunder {
   whale = "0xefC0e701A824943b469a694aC564Aa1efF7Ab7dd";
   expected = {
     allowance: "999999999999999111119999999999999999",
-    balance: "10000000000000000000000",
+    balance: "5000000000000000000000",
   };
 
   async execute() {
diff --git a/package.json b/package.json
index 831d6639..1bef4d0d 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,8 @@
   },
   "scripts": {
     "start": "run-s start:sign serve:watch",
-    "serve:watch": "run-p serve watch",
-    "serve": "npx wrangler pages dev static --port 8080",
+    "serve:watch": "run-p start-wrangler watch",
+    "start-wrangler": "npx wrangler pages dev static --port 8080",
     "watch": "tsx build/esbuild-watch.ts",
     "format": "run-s format:lint format:prettier format:cspell",
     "build": "run-s utils:build",
diff --git a/static/index.html b/static/index.html
index d1317588..8b80ddcb 100644
--- a/static/index.html
+++ b/static/index.html
@@ -49,137 +49,130 @@
           </div>
         </a>
       </header>
-      <div class="receipt-container">
-        <table class="receipt" data-details-visible="false" data-make-claim-rendered="false" data-contract-loaded="false" data-make-claim="error">
-          <thead>
-            <tr>
-              <th>
-                <div>Notice</div>
-              </th>
-              <td>
-                <div class="loading-message">Loading</div>
-              </td>
-            </tr>
-          </thead>
-          <tbody>
-            <tr id="Amount">
-              <th>
-                <div>Amount</div>
-              </th>
-              <td id="rewardAmount">
-                <div class="loading-message">Loading</div>
-              </td>
-            </tr>
-            <tr id="Token">
-              <th>
-                <div>Token</div>
-              </th>
-              <td id="rewardToken">
-                <span class="full">
-                  <div></div>
-                </span>
-                <span class="short">
+      <div class="receipt-carrousel-wrapper">
+        <div class="receipt-container">
+          <div class="receipt" data-details-visible="false" data-make-claim-rendered="false" data-contract-loaded="false" data-make-claim="error">
+            <div class="body" id="mainDetailsTable">
+              <div class="row" id="Amount">
+                <div class="cell head">Amount</div>
+                <div class="cell" id="rewardAmount">
                   <div class="loading-message">Loading</div>
-                </span>
-              </td>
-            </tr>
-            <tr id="To">
-              <th>
-                <div>For</div>
-              </th>
-              <td id="rewardRecipient">
-                <span class="full">
-                  <div></div>
-                </span>
-                <span class="short">
-                  <div class="loading-message">Loading</div>
-                </span>
-                <span class="ens">
-                  <div></div>
-                </span>
-              </td>
-            </tr>
-            <tr id="additional-details-border">
-              <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">
-                      <path
-                        d="M480-134.616 313.078-301.539l43.383-43.383L480-221.384l123.539-123.538 43.383 43.383L480-134.616Zm-123.539-478L313.078-656 480-822.922 646.922-656l-43.383 43.384L480-736.155 356.461-612.616Z"
-                      />
-                    </svg>
-                    <svg class="closer" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
-                      <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>
-              <td>
-                <div id="controls" data-loader="false" data-make-claim="false" data-view-claim="false" data-collect-gift-card="false">
-                  <button id="claim-loader">
-                    <svg
-                      version="1.1"
-                      id="L9"
-                      xmlns="http://www.w3.org/2000/svg"
-                      xmlns:xlink="http://www.w3.org/1999/xlink"
-                      width="33.33"
-                      height="33.33"
-                      viewBox="0 0 100 100"
-                      enable-background="new 0 0 0 0"
-                      xml:space="preserve"
-                    >
-                      <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">Loading</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" 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="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
-                        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>
+              <div class="row" id="Token">
+                <div class="cell head">Token</div>
+                <div class="cell" id="rewardToken">
+                  <span class="full">
+                    <div></div>
+                  </span>
+                  <span class="short">
+                    <div class="loading-message">Loading</div>
+                  </span>
+                </div>
+              </div>
+              <div class="row" id="To">
+                <div class="cell head">For</div>
+                <div class="cell" id="rewardRecipient">
+                  <span class="full">
+                    <div></div>
+                  </span>
+                  <span class="short">
+                    <div class="loading-message">Loading</div>
+                  </span>
+                  <span class="ens">
+                    <div></div>
+                  </span>
                 </div>
-              </td>
-            </tr>
-          </tbody>
-          <tbody id="additionalDetailsTable"></tbody>
-        </table>
+              </div>
+            </div>
+            <div class="body" id="additionalDetailsTable"></div>
+            <div class="row" id="additional-details-border">
+              <div id="controls" data-loader="false" data-make-claim="false" data-view-claim="false" data-collect-gift-card="false">
+                <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">
+                    <path
+                      d="M480-134.616 313.078-301.539l43.383-43.383L480-221.384l123.539-123.538 43.383 43.383L480-134.616Zm-123.539-478L313.078-656 480-822.922 646.922-656l-43.383 43.384L480-736.155 356.461-612.616Z"
+                    />
+                  </svg>
+                  <svg class="closer" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+                    <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>
+                <button id="claim-loader">
+                  <svg
+                    version="1.1"
+                    id="L9"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                    width="33.33"
+                    height="33.33"
+                    viewBox="0 0 100 100"
+                    enable-background="new 0 0 0 0"
+                    xml:space="preserve"
+                  >
+                    <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">Loading</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" 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="claim-card">
+                  <div class="claim-title">Mint Debit Card</div>
+                  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24px" id="card-icon">
+                    <path 
+                      d="M880-720v480q0 33-23.5 56.5T800-160H160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720Zm-720 80h640v-80H160v80Zm0 160v240h640v-240H160Zm0 240v-480 480Z"
+                    />
+                  </svg>
+                </button>
+
+                <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" 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>
+            </div>
+          </div>
+        </div>
+        <figure id="carousel">
+          <div id="prevTx"></div>
+          <div id="rewardsCount"></div>
+          <div id="nextTx"></div>
+        </figure>
       </div>
-      <figure id="carousel">
-        <div id="prevTx"></div>
-        <div id="rewardsCount"></div>
-        <div id="nextTx"></div>
-      </figure>
-      <div>
-        <div id="gift-cards">Loading...</div>
-        <div class="disclaimer">
-          <h2>Disclaimer</h2>
-          <p>All Visa/Mastercard are non-exchangeable & non-refundable.</p>
-          <p>Exact value of a card can be slightly different due to exchange rate.</p>
+      <div id="card-container">
+        <div class="drag-handle"></div>
+        <div class="content">
+          <div id="gift-cards">Loading...</div>
+          <div class="disclaimer">
+            <h2>Disclaimer</h2>
+            <p>All Visa/Mastercard are non-exchangeable & non-refundable.</p>
+            <p>Exact value of a card can be slightly different due to exchange rate.</p>
+          </div>
         </div>
       </div>
+      
       <footer>
         <div class="footer">
           <div id="build">
diff --git a/static/scripts/rewards/button-controller.ts b/static/scripts/rewards/button-controller.ts
index f811e021..1de9bb57 100644
--- a/static/scripts/rewards/button-controller.ts
+++ b/static/scripts/rewards/button-controller.ts
@@ -1,3 +1,5 @@
+import { handleDrag } from "./render-transaction/card-container-drag";
+
 const LOADER = "data-loader";
 const MAKE_CLAIM = "data-make-claim";
 const VIEW_CLAIM = "data-view-claim";
@@ -94,5 +96,24 @@ const controls = document.getElementById("controls") as HTMLDivElement;
 export function getMakeClaimButton() {
   return document.getElementById("make-claim") as HTMLButtonElement;
 }
+export function getClaimCardButton() {
+  return document.getElementById("claim-card") as HTMLButtonElement;
+}
+
+export function openCardContainer() {
+  cardContainer.style.transform = "translateY(0)";
+  cardContainer.classList.add("visible");
+}
+
+const claimCardButton = getClaimCardButton();
+if (claimCardButton) {
+  claimCardButton.addEventListener("click", openCardContainer);
+}
+
+const cardContainer = document.getElementById("card-container") as HTMLDivElement;
+const dragHandle = cardContainer.querySelector(".drag-handle") as HTMLDivElement;
+
+handleDrag(cardContainer, dragHandle);
+
 export const viewClaimButton = document.getElementById("view-claim") as HTMLButtonElement;
 export const buttonController = new ButtonController(controls);
diff --git a/static/scripts/rewards/render-transaction/card-container-drag.ts b/static/scripts/rewards/render-transaction/card-container-drag.ts
new file mode 100644
index 00000000..5f36eb49
--- /dev/null
+++ b/static/scripts/rewards/render-transaction/card-container-drag.ts
@@ -0,0 +1,69 @@
+const DRAG_THRESHOLD = 100; // px to drag before closing
+
+/**
+ * Attach drag events to a handle that can pull the container down.
+ * @param container The #card-container element.
+ * @param handle The .drag-handle element at the top of the container.
+ */
+export function handleDrag(container: HTMLDivElement, handle: HTMLDivElement): void {
+  let startY = 0;
+  let currentY = 0;
+  let isDragging = false;
+
+  // Start drag
+  function onPointerDown(e: PointerEvent) {
+    // Only left-click or touch
+    if (e.pointerType === "mouse" && e.buttons !== 1) {
+      return;
+    }
+    isDragging = true;
+    startY = e.clientY;
+    currentY = startY;
+
+    // Disable container's transition so it follows the pointer directly
+    container.style.transition = "none";
+
+    // Set the pointer capture so we continue to get events
+    handle.setPointerCapture(e.pointerId);
+  }
+
+  // Move drag
+  function onPointerMove(e: PointerEvent) {
+    if (!isDragging) return;
+    currentY = e.clientY;
+    const deltaY = currentY - startY;
+
+    // Only move the panel downward if user drags down (deltaY > 0)
+    if (deltaY > 0) {
+      container.style.transform = `translateY(${deltaY}px)`;
+    }
+  }
+
+  // End drag
+  function onPointerUp(e: PointerEvent) {
+    if (!isDragging) return;
+    isDragging = false;
+
+    handle.releasePointerCapture(e.pointerId);
+
+    // Re-enable the transition
+    container.style.transition = "transform 0.5s ease-in-out, opacity 0.5s ease-in-out";
+
+    const deltaY = currentY - startY;
+
+    if (deltaY > DRAG_THRESHOLD) {
+      // If dragged sufficiently, close the panel
+      container.classList.remove("visible");
+      // Immediately reset transform so it is hidden
+      container.style.transform = "translateY(100%)";
+    } else {
+      // Otherwise, snap back to fully visible
+      container.style.transform = "translateY(0)";
+    }
+  }
+
+  // Attach pointer event listeners to the handle
+  handle.addEventListener("pointerdown", onPointerDown);
+  handle.addEventListener("pointermove", onPointerMove);
+  handle.addEventListener("pointerup", onPointerUp);
+}
diff --git a/static/scripts/rewards/render-transaction/insert-table-data.ts b/static/scripts/rewards/render-transaction/insert-table-data.ts
index 4dd6be5a..2bfa0894 100644
--- a/static/scripts/rewards/render-transaction/insert-table-data.ts
+++ b/static/scripts/rewards/render-transaction/insert-table-data.ts
@@ -34,7 +34,10 @@ export function insertErc20PermitTableData(
   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: "From",
+      value: `<a target="_blank" rel="noopener noreferrer" href="${app.currentExplorerUrl}/address/${reward.owner}"><span class="full"><div>${reward.owner}</div></span></a>`,
+    },
     {
       name: "Expiry",
       value: (() => {
@@ -96,10 +99,10 @@ function renderDetailsFields(additionalDetails: { name: string; value: string |
   let additionalDetailsHtml = "";
   for (const { name, value } of additionalDetails) {
     if (!value) continue;
-    additionalDetailsHtml += `<tr>
-      <th><div>${name}</div></th>
-      <td><div>${value}</div></td>
-    </tr>`;
+    additionalDetailsHtml += `<div class="row">
+      <div class="cell head">${name}</div>
+      <div class="cell">${value}</div>
+    </div>`;
   }
 
   additionalDetailsDiv.innerHTML = additionalDetailsHtml;
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 c33cd209..a9ac5ae8 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
@@ -20,7 +20,7 @@ declare const SUPABASE_ANON_KEY: string;
 
 export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
 
-export const table = document.getElementsByTagName(`table`)[0];
+export const table = document.getElementsByClassName(`receipt`)[0];
 const urlParams = new URLSearchParams(window.location.search);
 const base64encodedTxData = urlParams.get("claim");
 
@@ -28,7 +28,7 @@ export async function readClaimDataFromUrl(app: AppState) {
   if (!base64encodedTxData) {
     // No claim data found
     setClaimMessage({ type: "Notice", message: `No claim data found.` });
-    table.setAttribute(`data-make-claim`, "error");
+    table.setAttribute(`data-make-claim`, "empty");
     return;
   }
 
@@ -125,7 +125,7 @@ function decodeClaimData(base64encodedTxData: string): Permit[] {
   } catch (error) {
     console.error(error);
     setClaimMessage({ type: "Error", message: `Invalid claim data passed in URL` });
-    table.setAttribute(`data-make-claim`, "error");
+    table.setAttribute(`data-make-claim`, "empty");
     throw error;
   }
 }
diff --git a/static/scripts/rewards/render-transaction/render-transaction.ts b/static/scripts/rewards/render-transaction/render-transaction.ts
index ea0d9d29..21c3a666 100644
--- a/static/scripts/rewards/render-transaction/render-transaction.ts
+++ b/static/scripts/rewards/render-transaction/render-transaction.ts
@@ -1,6 +1,6 @@
 import { ERC20Permit, Permit, TokenType } from "@ubiquibot/permit-generation/types";
 import { app } from "../app-state";
-import { buttonController, getMakeClaimButton, viewClaimButton } from "../button-controller";
+import { buttonController, getClaimCardButton, getMakeClaimButton, openCardContainer, viewClaimButton } from "../button-controller";
 import { claimErc20PermitHandlerWrapper, fetchTreasury } from "../web3/erc20-permit";
 import { claimErc721PermitHandler } from "../web3/erc721-permit";
 import { insertErc20PermitTableData, insertErc721PermitTableData } from "./insert-table-data";
@@ -8,7 +8,7 @@ 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;
+const table = document.getElementsByClassName("receipt")[0];
 type Success = boolean;
 
 export async function renderTransaction(): Promise<Success> {
@@ -48,6 +48,7 @@ export async function renderTransaction(): Promise<Success> {
       viewClaimButton.addEventListener("click", () => window.open(`${app.currentExplorerUrl}/tx/${app.claimTxs[app.reward.nonce.toString()]}`));
     } else if (window.ethereum) {
       getMakeClaimButton().addEventListener("click", claimErc20PermitHandlerWrapper(app));
+      getClaimCardButton().addEventListener("click", openCardContainer);
     }
 
     table.setAttribute(`data-make-claim`, "ok");
diff --git a/static/scripts/rewards/render-transaction/set-claim-message.ts b/static/scripts/rewards/render-transaction/set-claim-message.ts
index 51d38d1b..ea464aef 100644
--- a/static/scripts/rewards/render-transaction/set-claim-message.ts
+++ b/static/scripts/rewards/render-transaction/set-claim-message.ts
@@ -1,6 +1,4 @@
 export function setClaimMessage({ type, message }: { type: string; message: string }): void {
-  const claimMessageType = document.querySelector(`table > thead th`) as Element;
-  const claimMessageBody = document.querySelector(`table > thead td`) as Element;
-  claimMessageType.innerHTML = `<div>${type}</div>`;
-  claimMessageBody.innerHTML = `<div>${message}</div>`;
+  const claimMessageBody = document.querySelector(`#mainDetailsTable`) as Element;
+  claimMessageBody.innerHTML = `<div><span id="notice">${type}</span><br/><br/>${message}</div>`;
 }
diff --git a/static/styles/rewards/claim-table.css b/static/styles/rewards/claim-table.css
index 9c6dbde3..c331ff3e 100644
--- a/static/styles/rewards/claim-table.css
+++ b/static/styles/rewards/claim-table.css
@@ -2,9 +2,11 @@
   --left-table-column-width: 120px;
   --background-color-default-brightness: 2%;
   --background-color-light-brightness: 6%;
+  --shimmer-brightness: 10%;
   --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);
+  --shimmer-color: hsl(225 50% var(--shimmer-brightness) / 1);
   --border-color: hsl(225 25% var(--border-brightness) / 1);
 }
 #claim {
@@ -17,23 +19,20 @@ main > div {
   justify-content: center;
   align-items: center;
 }
-table {
-  border-collapse: collapse;
-}
-table a:hover,
-table a:hover > div {
+.receipt a:hover,
+.receipt a:hover > div {
   color: #fff;
 }
-table #controls {
+.receipt #controls {
   display: none;
   color: #fff;
   width: 100%;
 }
-table #controls > button {
+.receipt #controls > button {
   flex: 1;
   padding: 0 24px;
 }
-table aside {
+.receipt aside {
   text-transform: uppercase;
   font-weight: 100;
   letter-spacing: 2px;
@@ -44,7 +43,7 @@ table aside {
   text-align: center;
   padding: 16px;
 }
-table button {
+.receipt button {
   user-select: none;
   appearance: none;
   border: none;
@@ -54,133 +53,149 @@ table button {
   height: 48px;
   color: currentColor;
 }
-table button div {
+.receipt button div {
   text-transform: uppercase;
   word-break: break-all;
   text-rendering: geometricPrecision;
   color: #fff;
 }
-table hr {
-  background-color: #80808040;
-  height: 1px;
-  border: none;
-}
 svg path {
   fill: currentColor;
 }
-table td div {
-  word-break: break-all;
-}
-table th div {
-  text-align: right;
-  color: #80808080;
-}
-table td,
-table th {
+.receipt .cell {
   padding: 8px;
   text-rendering: geometricPrecision;
   line-height: 1.25;
   color: grey;
 }
-table td div {
+a, .cell, div {
   word-break: break-all;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-table td div svg ~ div {
+.receipt .cell div svg ~ div {
   width: unset;
 }
-table tr:first-of-type > * {
+.receipt .row:first-of-type > * {
   padding-top: 24px;
 }
-table tr:last-child td div > div {
+.receipt .row:last-child .cell div > div {
   width: 50%;
   display: inline-block;
   vertical-align: middle;
 }
-table tr:last-of-type > * {
+.receipt .row:last-of-type > * {
   padding-bottom: 24px;
 }
-table tr#additional-details-border > * {
+.receipt .row#additional-details-border > * {
   padding: 0;
   margin: 0;
 }
-table[data-make-claim-rendered] #controls {
+.receipt[data-make-claim-rendered] #controls {
   display: inline-flex;
 }
-table[data-make-claim-rendered] button {
+.receipt[data-make-claim-rendered] button {
   opacity: 0.5;
 }
-table[data-make-claim-rendered] button.hide {
+.receipt[data-make-claim-rendered] button.hide {
   display: none !important;
 }
-table[data-make-claim-rendered] button:disabled {
+.receipt[data-make-claim-rendered] button:disabled {
   opacity: 0.5;
   pointer-events: none;
 }
-table[data-make-claim-rendered] button:hover {
+.receipt[data-make-claim-rendered] button:hover {
   background-color: #80808020;
   opacity: 1;
 }
-table[data-make-claim-rendered] button > div {
+.receipt[data-make-claim-rendered] button > div {
   display: none;
 }
-table[data-make-claim-rendered] button:disabled > svg#claim-icon {
+.receipt[data-make-claim-rendered] button:disabled > svg#claim-icon {
   display: none;
 }
-table[data-make-claim-rendered] button:hover > div {
+.receipt[data-make-claim-rendered] button:hover > div {
   display: unset;
   color: #fff;
 }
-table[data-make-claim-rendered] button:hover > svg {
+.receipt[data-make-claim-rendered] button:hover > svg {
   display: none !important;
 }
 .show {
   display: block;
 }
-table[data-make-claim-rendered] button.hide > svg#claim-loader {
+.receipt[data-make-claim-rendered] button.hide > svg#claim-loader {
   display: none;
 }
-table[data-make-claim-rendered] button.show > svg#claim-icon {
+.receipt[data-make-claim-rendered] button.show > svg#claim-icon {
   display: unset;
 }
-table[data-make-claim-rendered] button.show > svg#claim-loader {
+.receipt[data-make-claim-rendered] button.show > svg#claim-loader {
   display: unset;
 }
-table[data-make-claim-rendered] button.hide > svg#claim-icon {
+.receipt[data-make-claim-rendered] button.hide > svg#claim-icon {
   display: unset;
 }
-table #controls {
+.receipt #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 {
+.receipt[data-make-claim="error"] {
+  background: linear-gradient(45deg, var(--background-color-default) 40%, var(--background-color-light) 50%, var(--background-color-default) 60%);  
+  animation: shimmer 1s infinite linear;
+  background-size: 300%;
+  background-position-x: 100%;
+} 
+@keyframes shimmer {
+  to {
+    background-position-x: 0%
+  }
+}
+
+#notice {
+  color: #404040;
+}
+.receipt[data-make-claim="empty"] #mainDetailsTable{
+  text-align: center;
+} 
+
+.receipt[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 {
+.receipt[data-make-claim-rendered] button#additionalDetails {
   width: 100%;
   color: #fff;
 }
-table[data-make-claim-rendered] tr#additional-details-border + tr > * {
+.receipt[data-make-claim-rendered] .row#additional-details-border + .row > * {
   padding-top: 24px;
 }
-table #additionalDetailsTable {
+.receipt #additionalDetailsTable {
   opacity: 0;
+  display: none;
   pointer-events: none;
-  transform: translate(-50%, -90px);
 }
-table[data-additional-data-size="large"] #additionalDetailsTable {
+.receipt[data-details-visible="true"] #additionalDetailsTable {
+  opacity: 1;
+  display: block;
+  pointer-events: all;
+}
+.receipt[data-details-visible="true"] #mainDetailsTable{
+  opacity: 0;
+  display: none;
+  pointer-events: none;
+}
+.receipt[data-additional-data-size="large"] #additionalDetailsTable {
   opacity: 0;
   pointer-events: none;
   transform: translate(-50%, -175px);
 }
-table[data-details-visible="true"] #additionalDetailsTable {
+.receipt[data-details-visible="true"] #additionalDetailsTable {
   opacity: 1;
   pointer-events: all;
 }
-table[data-contract-loaded] #Token {
+.receipt[data-contract-loaded] #Token {
   display: none;
 }
 #rewardAmount a {
@@ -191,36 +206,25 @@ table[data-contract-loaded] #Token {
 #rewardsCount {
   color: #fff;
 }
-table[data-details-visible="false"] #rewardToken .full,
-table[data-details-visible="true"] #rewardToken .short {
+.receipt #rewardToken .short,
+.receipt #rewardRecipient .short {
   display: none;
 }
-table[data-details-visible="false"] #rewardToken .short,
-table[data-details-visible="true"] #rewardToken .full {
+.receipt #rewardToken .full,
+.receipt #rewardRecipient .full {
   display: initial;
 }
-table[data-details-visible="false"] #rewardRecipient .full,
-table[data-details-visible="true"] #rewardRecipient .short {
-  display: none;
-}
-table[data-details-visible="false"] #rewardRecipient .short,
-table[data-details-visible="true"] #rewardRecipient .full {
-  display: initial;
-}
-#To > td,
-#To > th {
+#To > .cell,
+#To > .cell {
   padding-bottom: 24px;
 }
-table[data-make-claim="ok"] thead {
-  opacity: 0;
+.receipt[data-make-claim="ok"] .head {
   pointer-events: none;
-  transform: translate(-50%, -50%);
   /* filter: blur(4px); */
 }
-table[data-make-claim="error"] tbody {
+.receipt[data-make-claim="error"] .body {
   opacity: 0;
   pointer-events: none;
-  transform: translate(-50%, -50%);
   filter: blur(4px);
 }
 #rewardRecipient a div {
@@ -232,34 +236,31 @@ table[data-make-claim="error"] tbody {
 #rewardRecipient div {
   color: #fff;
 }
-table[data-details-visible="true"] #additionalDetails svg.opener {
+.receipt[data-details-visible="true"] #additionalDetails svg.opener {
   display: none;
 }
-table[data-details-visible="false"] #additionalDetails svg.opener {
+.receipt[data-details-visible="false"] #additionalDetails svg.opener {
   display: unset;
 }
-table[data-details-visible="true"] #additionalDetails svg.closer {
+.receipt[data-details-visible="true"] #additionalDetails svg.closer {
   display: unset;
 }
-table[data-details-visible="false"] #additionalDetails svg.closer {
+.receipt[data-details-visible="false"] #additionalDetails svg.closer {
   display: none;
 }
-td#owner > a {
-  word-break: break-all;
-}
-table td {
-  padding-right: 32px;
+.receipt {
+  padding-top: 12px;
   width: 100%;
 }
-table th {
-  padding-left: 32px;
-}
 [data-loader="false"] #claim-loader {
   display: none;
 }
 [data-make-claim="false"] #make-claim {
   display: none;
 }
+[data-make-claim="false"] #claim-card {
+  display: none;
+}
 [data-collect-gift-card="false"] #collect-gift-card {
   display: none;
 }
@@ -309,32 +310,66 @@ table th {
 #claim-loader > svg {
   animation: rotate 1s linear infinite;
 }
-tbody,
-thead {
+
+.receipt * {
+  text-wrap: nowrap;
+}
+
+@keyframes head-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+
+.receipt-container {
   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;
+
+.loading-message {
+  text-align: center;
 }
 
-@keyframes thead-fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
+.row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
 }
 
-thead {
-  animation: thead-fade-in 0.5s ease-in-out;
+.cell {
+  animation: head-fade-in 0.5s ease-in-out;
+  display: flex;
+  flex-direction: row;
+  justify-content: left;
+  align-items: center;
 }
+
+.full > div, .ens > div {
+  padding-right: 24px;
+}
+
+.head {
+  min-width: 110px;
+  width: 110px;
+  justify-content: right;
+  margin-right: 8px;
+}
+
+.body {
+  transition: 1s ease-in-out opacity;
+  height: 125px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
\ No newline at end of file
diff --git a/static/styles/rewards/light-mode.css b/static/styles/rewards/light-mode.css
index 5ceb56a8..3f0d41a1 100644
--- a/static/styles/rewards/light-mode.css
+++ b/static/styles/rewards/light-mode.css
@@ -10,7 +10,7 @@
     background-color: #fff;
     color: #000;
   }
-  table a:hover > div {
+  .receipt a:hover > div {
     color: #000;
   }
   #rewardAmount > a {
@@ -19,23 +19,23 @@
   svg path {
     fill: #000;
   }
-  #logo-icon > svg {
-    fill: #000;
+  #logo-icon {
+    color: #000;
   }
   #logo > div#logo-text > span {
     color: #000;
   }
-  table button div {
+  .receipt button div {
     color: #000;
   }
-  table[data-make-claim-rendered] button:hover > div {
+  .receipt[data-make-claim-rendered] button:hover > div {
     color: #000;
   }
-  table[data-make-claim-rendered] button:hover {
+  .receipt[data-make-claim-rendered] button:hover {
     background-color: #80808018;
   }
-  table a:hover,
-  table a:hover > div {
+  .receipt a:hover,
+  .receipt a:hover > div {
     color: #000;
   }
   div#build > a {
@@ -56,8 +56,7 @@
   background #grid {
     filter: invert(1);
   }
-  table tbody,
-  table thead {
+  .receipt {
     box-shadow: inset 0 0 96px #00000008;
   }
   .notifications .toast {
@@ -72,9 +71,27 @@
   #carousel > div:hover {
     color: #000;
   }
-  tbody,
-  thead {
+
+  .receipt[data-make-claim="error"] {
+    background: linear-gradient(45deg, var(--light-mode-background-color-default) 40%, var(--light-mode-background-color-dark) 50%, var(--light-mode-background-color-default) 60%);  
+    background-size: 300%;
+    background-position-x: 100%;
+  }
+    
+  @keyframes shimmer {
+    to {
+      background-position-x: 0%
+    }
+  }
+
+  .receipt-container {
+    box-shadow: inset 0 0 96px #00000010;
     background-color: #fff;
     border: 1px solid var(--light-mode-border-color);
   }
+
+
+  #card-container {
+    background-color: var(--light-mode-background-color-default);
+  }
 }
diff --git a/static/styles/rewards/media-queries.css b/static/styles/rewards/media-queries.css
index f7be146a..cf47e120 100644
--- a/static/styles/rewards/media-queries.css
+++ b/static/styles/rewards/media-queries.css
@@ -1,5 +1,5 @@
 @media screen and (max-width: 640px) {
-  table {
+  .receipt {
     border-left-width: 0;
     border-right-width: 0;
   }
diff --git a/static/styles/rewards/pay.css b/static/styles/rewards/pay.css
index 770b7eef..fa6e90d5 100644
--- a/static/styles/rewards/pay.css
+++ b/static/styles/rewards/pay.css
@@ -26,6 +26,10 @@ a {
   color: #808080;
 }
 
+body, html {
+  height: 100%;
+}
+
 body,
 main {
   max-width: 100vw;
@@ -45,6 +49,12 @@ a {
   text-decoration: none;
 }
 
+header {
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+
 #logo a {
   display: block;
   border: 1px solid transparent;
@@ -67,6 +77,10 @@ a {
   text-rendering: geometricPrecision;
 }
 
+#logo-icon {
+  color: #fff;
+}
+
 #logo-icon > svg {
   height: 28px;
   display: block;
@@ -74,7 +88,6 @@ a {
   width: 28px;
   padding: 0;
   margin-right: 6px;
-  fill: #fff;
 }
 
 #logo > div#logo-text {
@@ -123,15 +136,18 @@ main {
   display: flex;
   flex-direction: column;
 }
-
-main div.receipt-container {
-  height: 120px;
-  margin-bottom: 32px;
+.receipt-carrousel-wrapper{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  gap: 20px;
 }
-
 footer {
   width: 100%;
-  position: relative;
+  position: fixed;
+  bottom: 0;
 }
 
 #carousel {
@@ -200,3 +216,57 @@ footer {
   padding: 42px;
   right: 0;
 }
+
+#card-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 40%;
+  background-color: var(--background-color-default);
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  z-index: 1000;
+  overflow-y: scroll;
+  transform: translateY(100%);
+  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+  opacity: 0;
+  pointer-events: none;
+}
+
+#card-container.visible {
+  transform: translateY(0);
+  opacity: 1;
+  pointer-events: auto;
+}
+
+#card-container .content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+  text-align: center;
+}
+
+.content div {
+  word-break: normal;
+}
+
+.drag-handle {
+  z-index: 100;
+  position: absolute;
+  top: 1rem;
+  width: 20%;  
+  max-width: 100px;
+  height: 6px;       
+  background-color: #80808020;
+  border-radius: 3px; 
+  margin: 0.5rem auto;
+  cursor: grab;
+}
+
+.drag-handle:active {
+  cursor: grabbing;
+}
diff --git a/static/styles/rewards/ubiquity-dollar.css b/static/styles/rewards/ubiquity-dollar.css
index 3fdc075f..3d4a9bbf 100644
--- a/static/styles/rewards/ubiquity-dollar.css
+++ b/static/styles/rewards/ubiquity-dollar.css
@@ -13,16 +13,16 @@
   border-radius: 5px;
 }
 
-#ubiquity-dollar-page tbody {
+#ubiquity-dollar-page .body {
   position: inherit;
   transform: none;
 }
 
-#ubiquity-dollar-page table th {
+#ubiquity-dollar-page .receipt .cell {
   padding-left: 0px;
   padding: 12px;
 }
 
-#ubiquity-dollar-page table td {
+#ubiquity-dollar-page .receipt .cell {
   padding: 12px;
 }