diff --git a/src/App.jsx b/src/App.jsx
index 45f1667b..83b99519 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -538,8 +538,7 @@ export default function App() {
             />
 
           </Card>
-          {/* Cards KPI */}
-          {cards.map((card) => {
+          {/* {cards.map((card) => {
             const Icon = card.icon;
             const bar_data = [
               { label: "Invoiced", invoiced: card.amountInvoiced },
@@ -573,12 +572,84 @@ export default function App() {
                   barRadius={9}
                 />
 
-                {/* <button onClick={card.action} className="mt-4 text-xs text-teal-600 underline">
+                <button onClick={card.action} className="mt-4 text-xs text-teal-600 underline">
                   View details
-                </button> */}
+                </button>
               </Card>
             );
-          })}
+          })} */}
+          <Card className="p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-md bg-white dark:bg-gray-800">
+            <div className="flex justify-between items-center mb-4">
+              <Title className="text-base">Sale Invoices</Title>
+              <HandCoins className="w-6 h-6" />
+            </div>
+
+            <div className="grid grid-rows-2 gap-3">
+
+              {/* TO VALIDATE */}
+              <button
+                onClick={() => openInTryton("account.move", undefined, ["tree","form"], [["state","=","draft"]])}
+                className="group rounded-lg border border-gray-200 dark:border-gray-600 p-4 flex flex-col items-center justify-center hover:bg-teal-50 dark:hover:bg-gray-700 transition hover:-translate-y-0.5 hover:shadow-md"
+              >
+                <span className="text-3xl font-bold text-gray-700 dark:text-white transition-transform group-hover:scale-110">
+                  {move_cash}
+                </span>
+                <span className="mt-1 text-sm font-bold uppercase tracking-wide text-teal-600">
+                  Paid
+                </span>
+              </button>
+
+              {/* POSTED */}
+              <button
+                onClick={() => openInTryton("account.move", undefined, ["tree","form"], [["state","=","posted"]])}
+                className="group rounded-lg border border-gray-200 dark:border-gray-600 p-4 flex flex-col items-center justify-center hover:bg-sky-50 dark:hover:bg-gray-700 transition hover:-translate-y-0.5 hover:shadow-md"
+              >
+                <span className="text-3xl font-bold text-gray-700 dark:text-white transition-transform group-hover:scale-110">
+                  {move_cash}
+                </span>
+                <span className="mt-1 text-sm font-bold uppercase tracking-wide text-sky-600">
+                  Not Paid
+                </span>
+              </button>
+
+            </div>
+          </Card>
+          <Card className="p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-md bg-white dark:bg-gray-800">
+            <div className="flex justify-between items-center mb-4">
+              <Title className="text-base">Purchase Invoices</Title>
+              <HandCoins className="w-6 h-6" />
+            </div>
+
+            <div className="grid grid-rows-2 gap-3">
+
+              {/* TO VALIDATE */}
+              <button
+                onClick={() => openInTryton("account.move", undefined, ["tree","form"], [["state","=","draft"]])}
+                className="group rounded-lg border border-gray-200 dark:border-gray-600 p-4 flex flex-col items-center justify-center hover:bg-teal-50 dark:hover:bg-gray-700 transition hover:-translate-y-0.5 hover:shadow-md"
+              >
+                <span className="text-3xl font-bold text-gray-700 dark:text-white transition-transform group-hover:scale-110">
+                  {move_cash}
+                </span>
+                <span className="mt-1 text-sm font-bold uppercase tracking-wide text-teal-600">
+                  Paid
+                </span>
+              </button>
+
+              {/* POSTED */}
+              <button
+                onClick={() => openInTryton("account.move", undefined, ["tree","form"], [["state","=","posted"]])}
+                className="group rounded-lg border border-gray-200 dark:border-gray-600 p-4 flex flex-col items-center justify-center hover:bg-sky-50 dark:hover:bg-gray-700 transition hover:-translate-y-0.5 hover:shadow-md"
+              >
+                <span className="text-3xl font-bold text-gray-700 dark:text-white transition-transform group-hover:scale-110">
+                  {move_cash}
+                </span>
+                <span className="mt-1 text-sm font-bold uppercase tracking-wide text-sky-600">
+                  Not Paid
+                </span>
+              </button>
+
+            </div>
+          </Card>
           <Card className="p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-md bg-white dark:bg-gray-800">
             <div className="flex justify-between items-center mb-4">
               <Title className="text-base">Payments</Title>