diff --git a/examples/privy-next-yield-demo/src/app/globals.css b/examples/privy-next-yield-demo/src/app/globals.css
index dccdaa7..a9eb2f4 100644
--- a/examples/privy-next-yield-demo/src/app/globals.css
+++ b/examples/privy-next-yield-demo/src/app/globals.css
@@ -35,20 +35,6 @@ button, a, input, select, textarea {
            text-sm leading-5 cursor-pointer;
   }
 
-  .button {
-    @apply flex flex-row items-center
-           px-3 py-2 gap-3 cursor-pointer
-           bg-white border border-[#E2E3F0] rounded-xl
-           text-[#040217] font-normal text-base leading-6
-           hover:bg-gray-50 hover:border-gray-300
-           focus:bg-gray-50 focus:border-gray-300
-           active:bg-gray-100
-           focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2
-           transition-all duration-200 ease-in-out
-           disabled:opacity-50 disabled:cursor-not-allowed
-           box-border;
-  }
-
   .text-primary {
     @apply text-[#5B4FFF];
   }
diff --git a/examples/privy-next-yield-demo/src/components/FeeRecipientCard.tsx b/examples/privy-next-yield-demo/src/components/FeeRecipientCard.tsx
index 3b7dfca..f64c30c 100644
--- a/examples/privy-next-yield-demo/src/components/FeeRecipientCard.tsx
+++ b/examples/privy-next-yield-demo/src/components/FeeRecipientCard.tsx
@@ -50,8 +50,8 @@ export function FeeRecipientCard() {
 
   if (isLoading) {
     return (
-      <div className="rounded-2xl p-6 bg-white">
-        <h3 className="text-lg font-semibold text-[#040217] mb-4">Vault Info</h3>
+      <div className="rounded-2xl p-6 bg-white border border-[#E2E3F0]">
+        <h3 className="text-lg font-semibold text-[#040217] mb-4">Vault info</h3>
         <div className="space-y-3">
           <div className="h-6 w-24 bg-white/50 rounded animate-pulse" />
           <div className="h-8 w-32 bg-white/50 rounded animate-pulse" />
@@ -62,8 +62,8 @@ export function FeeRecipientCard() {
 
   if (error) {
     return (
-      <div className="rounded-2xl p-6 bg-white">
-        <h3 className="text-lg font-semibold text-[#040217] mb-4">Vault Info</h3>
+      <div className="rounded-2xl p-6 bg-white border border-[#E2E3F0]">
+        <h3 className="text-lg font-semibold text-[#040217] mb-4">Vault info</h3>
         <p className="text-sm text-[#991B1B]">{error}</p>
       </div>
     );
@@ -71,17 +71,17 @@ export function FeeRecipientCard() {
 
   if (!vaultInfo || !vaultId) {
     return (
-      <div className="rounded-2xl p-6 bg-white">
-        <h3 className="text-lg font-semibold text-[#040217] mb-4">Vault Info</h3>
+      <div className="rounded-2xl p-6 bg-white border border-[#E2E3F0]">
+        <h3 className="text-lg font-semibold text-[#040217] mb-4">Vault info</h3>
         <p className="text-sm text-[#64668B]">Vault not configured</p>
       </div>
     );
   }
 
   return (
-    <div className="rounded-2xl p-6 bg-white">
+    <div className="rounded-2xl p-6 bg-white border border-[#E2E3F0]">
       <div className="flex items-start justify-between mb-4">
-        <h3 className="text-lg font-semibold text-[#040217]">Vault Info</h3>
+        <h3 className="text-lg font-semibold text-[#040217]">Vault info</h3>
       </div>
 
       <div>
diff --git a/examples/privy-next-yield-demo/src/components/PositionDisplay.tsx b/examples/privy-next-yield-demo/src/components/PositionDisplay.tsx
index d9a4125..6b1f530 100644
--- a/examples/privy-next-yield-demo/src/components/PositionDisplay.tsx
+++ b/examples/privy-next-yield-demo/src/components/PositionDisplay.tsx
@@ -62,8 +62,8 @@ export function PositionDisplay({ walletId }: { walletId?: string } = {}) {
 
   if (isLoading) {
     return (
-      <div className="rounded-2xl p-6 bg-white">
-        <h3 className="text-lg font-semibold text-[#040217] mb-4">Your Position</h3>
+      <div className="rounded-2xl p-6 bg-white border border-[#E2E3F0]">
+        <h3 className="text-lg font-semibold text-[#040217] mb-4">Your position</h3>
         <div className="space-y-3">
           <div className="h-6 w-32 bg-white/50 rounded animate-pulse" />
           <div className="h-10 w-40 bg-white/50 rounded animate-pulse" />
@@ -75,8 +75,8 @@ export function PositionDisplay({ walletId }: { walletId?: string } = {}) {
 
   if (error) {
     return (
-      <div className="rounded-2xl p-6 bg-white">
-        <h3 className="text-lg font-semibold text-[#040217] mb-4">Your Position</h3>
+      <div className="rounded-2xl p-6 bg-white border border-[#E2E3F0]">
+        <h3 className="text-lg font-semibold text-[#040217] mb-4">Your position</h3>
         <p className="text-sm text-[#991B1B]">{error}</p>
       </div>
     );
@@ -84,8 +84,8 @@ export function PositionDisplay({ walletId }: { walletId?: string } = {}) {
 
   if (!position || !vaultId) {
     return (
-      <div className="rounded-2xl p-6 bg-white">
-        <h3 className="text-lg font-semibold text-[#040217] mb-4">Your Position</h3>
+      <div className="rounded-2xl p-6 bg-white border border-[#E2E3F0]">
+        <h3 className="text-lg font-semibold text-[#040217] mb-4">Your position</h3>
         <p className="text-sm text-[#64668B]">
           {!vaultId ? 'Vault not configured' : 'No active position'}
         </p>
@@ -94,9 +94,9 @@ export function PositionDisplay({ walletId }: { walletId?: string } = {}) {
   }
 
   return (
-    <div className="rounded-2xl p-6 bg-white">
+    <div className="rounded-2xl p-6 bg-white border border-[#E2E3F0]">
       <div className="flex items-start justify-between mb-4">
-        <h3 className="text-lg font-semibold text-[#040217]">Your Position</h3>
+        <h3 className="text-lg font-semibold text-[#040217]">Your position</h3>
       </div>
 
       <div className="space-y-4">
diff --git a/examples/privy-next-yield-demo/src/components/TransactionHistory.tsx b/examples/privy-next-yield-demo/src/components/TransactionHistory.tsx
index 6f0c526..9149e10 100644
--- a/examples/privy-next-yield-demo/src/components/TransactionHistory.tsx
+++ b/examples/privy-next-yield-demo/src/components/TransactionHistory.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState, useCallback } from "react";
 import { usePrivy } from "@privy-io/react-auth";
-import { formatUSDC, truncateAddress } from "@/lib/constants";
+import { formatUSDC } from "@/lib/constants";
 
 interface Transaction {
   id: string;
@@ -17,45 +17,37 @@ interface Transaction {
   updated_at: number;
 }
 
-function formatTimestamp(unixSeconds: number): string {
-  const date = new Date(unixSeconds * 1000);
-  return date.toLocaleDateString("en-US", {
-    month: "short",
-    day: "numeric",
-    hour: "2-digit",
-    minute: "2-digit",
-  });
-}
-
-function TypeBadge({ type }: { type: string }) {
-  const isDeposit = type === "deposit";
-  return (
-    <span
-      className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${
-        isDeposit
-          ? "bg-[#DCFCE7] text-[#135638]"
-          : "bg-[#FEE2E2] text-[#991B1B]"
-      }`}
-    >
-      {isDeposit ? "Deposit" : "Withdrawal"}
-    </span>
-  );
+function formatTimestamp(timestamp: number): string {
+  // Handle both seconds and milliseconds: if > 1e12, it's already ms
+  const ms = timestamp > 1e12 ? timestamp : timestamp * 1000;
+  const date = new Date(ms);
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  const year = String(date.getFullYear()).slice(-2);
+  const hours = date.getHours();
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  const ampm = hours >= 12 ? "PM" : "AM";
+  const displayHours = String(hours % 12 || 12).padStart(2, "0");
+  return `${month}/${day}/${year} ${displayHours}:${minutes} ${ampm}`;
 }
 
 function StatusBadge({ status }: { status: string }) {
-  const styles: Record<string, string> = {
-    pending: "bg-[#FEF3C7] text-[#906218]",
-    confirmed: "bg-[#DCFCE7] text-[#135638]",
-    failed: "bg-[#FEE2E2] text-[#991B1B]",
+  const config: Record<string, { style: string; label: string }> = {
+    pending: { style: "bg-[#FEF3C7] text-[#906218]", label: "Pending" },
+    confirmed: { style: "bg-[#DCFCE7] text-[#135638]", label: "Successful" },
+    failed: { style: "bg-[#FEE2E2] text-[#991B1B]", label: "Failed" },
+  };
+
+  const { style, label } = config[status] ?? {
+    style: "bg-[#F1F2F9] text-[#64668B]",
+    label: status,
   };
 
   return (
     <span
-      className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium capitalize ${
-        styles[status] ?? "bg-[#F1F2F9] text-[#64668B]"
-      }`}
+      className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${style}`}
     >
-      {status}
+      {label}
     </span>
   );
 }
@@ -114,9 +106,9 @@ export function TransactionHistory({
 
   if (isLoading) {
     return (
-      <div className="rounded-2xl p-6 bg-white">
+      <div className="rounded-2xl p-6 bg-white border border-[#E2E3F0]">
         <h3 className="text-lg font-semibold text-[#040217] mb-4">
-          Transaction History
+          Transaction history
         </h3>
         <div className="space-y-3">
           <div className="h-12 w-full bg-white/50 rounded-xl animate-pulse" />
@@ -129,9 +121,9 @@ export function TransactionHistory({
 
   if (error) {
     return (
-      <div className="rounded-2xl p-6 bg-white">
+      <div className="rounded-2xl p-6 bg-white border border-[#E2E3F0]">
         <h3 className="text-lg font-semibold text-[#040217] mb-4">
-          Transaction History
+          Transaction history
         </h3>
         <p className="text-sm text-[#991B1B]">{error}</p>
       </div>
@@ -140,9 +132,9 @@ export function TransactionHistory({
 
   if (transactions.length === 0) {
     return (
-      <div className="rounded-2xl p-6 bg-white">
+      <div className="rounded-2xl p-6 bg-white border border-[#E2E3F0]">
         <h3 className="text-lg font-semibold text-[#040217] mb-4">
-          Transaction History
+          Transaction history
         </h3>
         <p className="text-sm text-[#64668B]">
           No transactions yet. Make a deposit or withdrawal to get started.
@@ -152,37 +144,32 @@ export function TransactionHistory({
   }
 
   return (
-    <div className="rounded-2xl p-6 bg-white">
+    <div className="rounded-2xl p-6 bg-white border border-[#E2E3F0]">
       <h3 className="text-lg font-semibold text-[#040217] mb-4">
-        Transaction History
+        Transaction history
       </h3>
 
-      <div className="space-y-2">
-        {transactions.map((tx) => {
+      <div>
+        {transactions.map((tx, index) => {
           const isDeposit = tx.type === "deposit";
-          const sign = isDeposit ? "+" : "-";
 
           return (
             <div
               key={tx.id}
-              className="bg-white rounded-xl p-4 border border-[#E2E3F0] flex items-center justify-between gap-3"
+              className={`flex items-center justify-between py-3 ${
+                index < transactions.length - 1
+                  ? "border-b border-[#E2E3F0]"
+                  : ""
+              }`}
             >
-              <div className="flex items-center gap-3 min-w-0">
-                <div className="flex flex-col gap-1">
-                  <div className="flex items-center gap-2">
-                    <TypeBadge type={tx.type} />
-                    <StatusBadge status={tx.status} />
-                  </div>
-                </div>
-              </div>
-
-              <span
-                className={`text-sm font-medium whitespace-nowrap ${
-                  isDeposit ? "text-[#135638]" : "text-[#991B1B]"
-                }`}
-              >
-                {sign}${formatUSDC(tx.asset_amount)} USDC
+              <span className="text-sm font-semibold text-[#040217]">
+                {isDeposit ? "Deposited" : "Withdrew"} $
+                {formatUSDC(tx.asset_amount)} USDC
+              </span>
+              <span className="text-sm text-[#64668B]">
+                {formatTimestamp(tx.created_at)}
               </span>
+              <StatusBadge status={tx.status} />
             </div>
           );
         })}
diff --git a/examples/privy-next-yield-demo/src/components/WalletCard.tsx b/examples/privy-next-yield-demo/src/components/WalletCard.tsx
index aa369e1..8e1cefa 100644
--- a/examples/privy-next-yield-demo/src/components/WalletCard.tsx
+++ b/examples/privy-next-yield-demo/src/components/WalletCard.tsx
@@ -78,10 +78,10 @@ export function WalletCard() {
   };
 
   return (
-    <div className="rounded-2xl p-6 bg-white">
+    <div className="rounded-2xl p-6 bg-white border border-[#E2E3F0]">
       <div className="flex items-start justify-between mb-4">
         <div>
-          <h2 className="text-sm font-medium text-[#64668B]">Your Wallet</h2>
+          <h2 className="text-sm font-medium text-[#64668B]">Your wallet</h2>
           <div className="flex items-center gap-2 mt-1">
             <span className="text-sm font-mono text-[#040217]">
               {walletAddress ? truncateAddress(walletAddress) : 'No wallet'}
diff --git a/examples/privy-next-yield-demo/src/components/ui/fullscreen-loader.tsx b/examples/privy-next-yield-demo/src/components/ui/fullscreen-loader.tsx
index 8270059..df9449a 100644
--- a/examples/privy-next-yield-demo/src/components/ui/fullscreen-loader.tsx
+++ b/examples/privy-next-yield-demo/src/components/ui/fullscreen-loader.tsx
@@ -18,7 +18,7 @@ export const FullScreenLoader = () => {
             d="M 28.746094 0.015625 C 28.359375 0.03125 27.722656 0.0703125 27.363281 0.105469 C 22.929688 0.515625 18.730469 2.207031 15.242188 4.992188 C 10.347656 8.894531 7.28125 14.597656 6.730469 20.804688 C 6.667969 21.515625 6.648438 21.972656 6.648438 22.863281 C 6.648438 23.753906 6.667969 24.207031 6.730469 24.929688 C 7.152344 29.683594 9.066406 34.183594 12.210938 37.816406 C 13.949219 39.832031 16.046875 41.53125 18.394531 42.84375 C 18.953125 43.15625 19.9375 43.636719 20.53125 43.890625 C 22.722656 44.820312 25.042969 45.40625 27.398438 45.617188 C 28.769531 45.746094 30.207031 45.746094 31.578125 45.617188 C 35.304688 45.28125 38.875 44.035156 42.035156 41.964844 C 43.890625 40.75 45.613281 39.210938 47.058594 37.476562 C 49.902344 34.066406 51.683594 29.910156 52.1875 25.5 C 52.386719 23.769531 52.386719 21.882812 52.179688 20.144531 C 51.65625 15.714844 49.839844 11.539062 46.96875 8.132812 C 46.183594 7.207031 45.144531 6.164062 44.21875 5.382812 C 42.054688 3.558594 39.523438 2.128906 36.859375 1.222656 C 34.933594 0.570312 33.109375 0.207031 31.019531 0.0585938 C 30.558594 0.0234375 29.148438 -0.00390625 28.746094 0.015625 Z M 28.746094 0.015625 "
           />
           <path
-            className="animate-blobby-pulse"
+            className="animate-pulse"
             stroke="none"
             fillRule="nonzero"
             fill="#E1E4FF"
diff --git a/examples/privy-next-yield-demo/src/components/ui/header.tsx b/examples/privy-next-yield-demo/src/components/ui/header.tsx
index e722e3c..c3414e9 100644
--- a/examples/privy-next-yield-demo/src/components/ui/header.tsx
+++ b/examples/privy-next-yield-demo/src/components/ui/header.tsx
@@ -20,7 +20,7 @@ export function Header({ authenticated, onLogout }: HeaderProps) {
           : "bg-transparent border-none backdrop-blur-none"
       }`}
     >
-      <div className="flex flex-row items-center gap-4 h-[26px] font-[family-name:var(--font-inter)]">
+      <div className="flex flex-row items-center gap-4 h-[26px]">
         <Image
           src={authenticated ? "./privy-logo-black.svg" : "./privy-logo-white.svg"}
           alt="Privy Logo"
@@ -32,11 +32,7 @@ export function Header({ authenticated, onLogout }: HeaderProps) {
 
         {authenticated && (
           <div
-            className={`text-medium flex h-[22px] items-center justify-center rounded-[11px] border px-[0.375rem] text-[0.75rem] ${
-              authenticated
-                ? "border-primary text-primary"
-                : "border-white text-white"
-            }`}
+            className="font-medium flex h-[22px] items-center justify-center rounded-[11px] border px-[0.375rem] text-[0.75rem] border-primary text-primary"
           >
             Yield Demo
           </div>
@@ -78,7 +74,7 @@ export function Header({ authenticated, onLogout }: HeaderProps) {
         </nav>
       )}
 
-      <div className="flex flex-row justify-end items-center gap-4 h-9 font-[family-name:var(--font-inter)]">
+      <div className="flex flex-row justify-end items-center gap-4 h-9">
         <a
           className={`flex flex-row items-center gap-1 text-sm font-medium cursor-pointer ${
             authenticated ? "text-primary" : "text-white"
diff --git a/examples/privy-next-yield-demo/src/lib/constants.ts b/examples/privy-next-yield-demo/src/lib/constants.ts
index 09fc0ab..b2bac02 100644
--- a/examples/privy-next-yield-demo/src/lib/constants.ts
+++ b/examples/privy-next-yield-demo/src/lib/constants.ts
@@ -2,8 +2,6 @@ import { base } from 'viem/chains';
 
 // Network Configuration
 export const CHAIN = base;
-export const CHAIN_ID = base.id; // 8453
-
 // USDC on Base Mainnet
 export const USDC_ADDRESS = '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913' as const;
 export const USDC_DECIMALS = 6;