diff --git a/packages/nextjs/components/HistoryTable.tsx b/packages/nextjs/components/HistoryTable.tsx
index be6d108..313241b 100644
--- a/packages/nextjs/components/HistoryTable.tsx
+++ b/packages/nextjs/components/HistoryTable.tsx
@@ -26,20 +26,20 @@ export const HistoryTable = () => {
     toastSuccess(message);
   };
 
-  // function getTooltipText(transaction: HistoricalTransaction) {
-  //   switch (transaction.status) {
-  //     case "pending":
-  //       return "Waiting for the transaction to be included in a block";
-  //     case "completed":
-  //       return "Expand for more details";
-  //     case "failed":
-  //       return `Transaction failed: Redeemable at ${new Date(transaction.hashLockTimestamp * 1000).toLocaleString()}`;
-  //     case "refunded":
-  //       return "Transaction refunded";
-  //     default:
-  //       return "";
-  //   }
-  // }
+  function getTooltipText(transaction: HistoricalTransaction) {
+    switch (transaction.status) {
+      case "pending":
+        return "Waiting for the transaction to be included in a block";
+      case "completed":
+        return "Expand for more details";
+      case "failed":
+        return `Transaction failed: Redeemable at ${new Date(transaction.hashLockTimestamp * 1000).toLocaleString()}`;
+      case "refunded":
+        return "Transaction refunded";
+      default:
+        return "";
+    }
+  }
 
   function refund(transaction: HistoricalTransaction) {
     if (transaction.contractId === "") return;
@@ -71,7 +71,7 @@ export const HistoryTable = () => {
   return (
     <div className="card bg-brand-bg text-white">
       <div className="card-body p-4">
-        <h2 className="text-center font-mono text-md ">History</h2>
+        <h2 className="text-center font-mono text-md">History</h2>
         <table className="table table-auto w-full text-sm">
           {transactions.length > 0 && (
             <>
@@ -87,12 +87,14 @@ export const HistoryTable = () => {
                   <React.Fragment key={index}>
                     <tr
                       onClick={() => toggleRow(index)}
-                      className={`cursor-pointer ${
+                      className={`cursor-pointer  ${
                         transaction.status === "failed" ? "bg-red-400" : ""
                       } hover:bg-white hover:bg-opacity-10`}
                     >
                       <td>{transaction.status}</td>
-                      <td>{transaction.date}</td>
+                      <td className="tooltip" data-tip={getTooltipText(transaction)}>
+                        {transaction.date}
+                      </td>
                       <td className="text-right">{transaction.amount} sats</td>
                     </tr>
                     {expandedRow === index && (
diff --git a/packages/nextjs/components/PaymentInvoice.tsx b/packages/nextjs/components/PaymentInvoice.tsx
index bc38a02..2f3c09f 100644
--- a/packages/nextjs/components/PaymentInvoice.tsx
+++ b/packages/nextjs/components/PaymentInvoice.tsx
@@ -65,7 +65,7 @@ export const PaymentInvoice = ({ invoice, submitPayment, cancelPayment, step }:
             <div className="flex flex-col">
               {stepInfo.title}
               &nbsp;
-              {step === index && <span className="loading loading-spinner"></span>}
+              {step === index && <span className="loading loading-dots"></span>}
             </div>
           </li>
         ))}
@@ -75,14 +75,18 @@ export const PaymentInvoice = ({ invoice, submitPayment, cancelPayment, step }:
       {step < 2 ? (
         <div className="w-full flex justify-between">
           <button
-            className={`btn btn-error w-2/5 text-white ${step !== 1 ? "opacity-50 cursor-not-allowed" : ""}`}
+            className={`btn btn-outline btn-error w-2/5 text-white ${
+              step !== 1 ? "opacity-50 cursor-not-allowed" : ""
+            }`}
             onClick={() => cancelPayment()}
             disabled={step == 2 || step == 3}
           >
             Cancel
           </button>
           <button
-            className={`btn btn-success w-2/5 text-white ${step !== 1 ? "opacity-50 cursor-not-allowed" : ""}`}
+            className={`btn btn-success bg-emerald-700 w-2/5 text-white ${
+              step !== 1 ? "opacity-50 cursor-not-allowed" : ""
+            }`}
             onClick={() => submitPayment()}
             disabled={step == 2 || step == 3}
           >
diff --git a/packages/nextjs/hooks/LightningProvider.tsx b/packages/nextjs/hooks/LightningProvider.tsx
index 4dea92d..79be272 100644
--- a/packages/nextjs/hooks/LightningProvider.tsx
+++ b/packages/nextjs/hooks/LightningProvider.tsx
@@ -51,7 +51,6 @@ export const LightningProvider = ({ children }: { children: React.ReactNode }) =
     toast.success(message, {
       position: "top-center",
       autoClose: 5000,
-      theme: "colored",
       toastId: Date.now().toString(),
     });
   };
@@ -60,7 +59,6 @@ export const LightningProvider = ({ children }: { children: React.ReactNode }) =
     toast.error(message, {
       position: "top-center",
       autoClose: 5000,
-      theme: "colored",
       toastId: Date.now().toString(),
     });
   };