diff --git a/frontend/src/components/TransactionItem.tsx b/frontend/src/components/TransactionItem.tsx
index ed589387..60e8bf4d 100644
--- a/frontend/src/components/TransactionItem.tsx
+++ b/frontend/src/components/TransactionItem.tsx
@@ -15,6 +15,7 @@ import {
   CredenzaContent,
   CredenzaFooter,
   CredenzaHeader,
+  CredenzaProvider,
   CredenzaTitle,
   CredenzaTrigger,
 } from "src/components/ui/credenza";
@@ -41,188 +42,190 @@ function TransactionItem({ tx }: Props) {
   };
 
   return (
-    <Credenza
-      onOpenChange={(open) => {
-        if (!open) {
-          setShowDetails(false);
-        }
-      }}
-    >
-      <CredenzaTrigger
-        asChild
-        className="p-3 mb-4 hover:bg-muted/50 data-[state=selected]:bg-muted cursor-pointer rounded-md slashed-zero transaction sensitive ph-no-capture"
+    <CredenzaProvider>
+      <Credenza
+        onOpenChange={(open) => {
+          if (!open) {
+            setShowDetails(false);
+          }
+        }}
       >
-        <div className="flex gap-3">
-          <div className="flex items-center">
-            <div
-              className={cn(
-                "flex justify-center items-center rounded-full w-10 h-10 md:w-14 md:h-14",
-                type === "outgoing"
-                  ? "bg-orange-100 dark:bg-orange-950"
-                  : "bg-green-100 dark:bg-emerald-950"
-              )}
-            >
-              <Icon
-                strokeWidth={3}
+        <CredenzaTrigger
+          asChild
+          className="p-3 mb-4 hover:bg-muted/50 data-[state=selected]:bg-muted cursor-pointer rounded-md slashed-zero transaction sensitive ph-no-capture"
+        >
+          <div className="flex gap-3">
+            <div className="flex items-center">
+              <div
                 className={cn(
-                  "w-6 h-6 md:w-8 md:h-8",
+                  "flex justify-center items-center rounded-full w-10 h-10 md:w-14 md:h-14",
                   type === "outgoing"
-                    ? "stroke-orange-400 dark:stroke-amber-600"
-                    : "stroke-green-400 dark:stroke-emerald-500"
+                    ? "bg-orange-100 dark:bg-orange-950"
+                    : "bg-green-100 dark:bg-emerald-950"
                 )}
-              />
+              >
+                <Icon
+                  strokeWidth={3}
+                  className={cn(
+                    "w-6 h-6 md:w-8 md:h-8",
+                    type === "outgoing"
+                      ? "stroke-orange-400 dark:stroke-amber-600"
+                      : "stroke-green-400 dark:stroke-emerald-500"
+                  )}
+                />
+              </div>
             </div>
-          </div>
-          <div className="overflow-hidden mr-3">
-            <div className="flex items-center gap-2 truncate">
-              <p className="text-lg md:text-xl font-semibold">
-                {type == "incoming" ? "Received" : "Sent"}
-              </p>
-              <p className="text-sm md:text-base truncate text-muted-foreground">
-                {dayjs(tx.settled_at * 1000).fromNow()}
+            <div className="overflow-hidden mr-3">
+              <div className="flex items-center gap-2 truncate">
+                <p className="text-lg md:text-xl font-semibold">
+                  {type == "incoming" ? "Received" : "Sent"}
+                </p>
+                <p className="text-sm md:text-base truncate text-muted-foreground">
+                  {dayjs(tx.settled_at * 1000).fromNow()}
+                </p>
+              </div>
+              <p className="text-sm md:text-base text-muted-foreground">
+                {tx.description || "Lightning invoice"}
               </p>
             </div>
-            <p className="text-sm md:text-base text-muted-foreground">
-              {tx.description || "Lightning invoice"}
-            </p>
-          </div>
-          <div className="flex ml-auto text-right space-x-3 shrink-0">
-            <div className="flex items-center gap-2 text-xl">
-              <p
-                className={cn(
-                  "font-semibold",
-                  type == "incoming" && "text-green-600 dark:text-emerald-500"
-                )}
-              >
-                {type == "outgoing" ? "-" : "+"}
-                {new Intl.NumberFormat(undefined, {}).format(
-                  Math.floor(tx.amount / 1000)
-                )}{" "}
-              </p>
-              <p className="text-muted-foreground">
-                {Math.floor(tx.amount / 1000) == 1 ? "sat" : "sats"}
-              </p>
+            <div className="flex ml-auto text-right space-x-3 shrink-0">
+              <div className="flex items-center gap-2 text-xl">
+                <p
+                  className={cn(
+                    "font-semibold",
+                    type == "incoming" && "text-green-600 dark:text-emerald-500"
+                  )}
+                >
+                  {type == "outgoing" ? "-" : "+"}
+                  {new Intl.NumberFormat(undefined, {}).format(
+                    Math.floor(tx.amount / 1000)
+                  )}{" "}
+                </p>
+                <p className="text-muted-foreground">
+                  {Math.floor(tx.amount / 1000) == 1 ? "sat" : "sats"}
+                </p>
 
-              {/* {!!tx.totalAmountFiat && (
+                {/* {!!tx.totalAmountFiat && (
                 <p className="text-xs text-muted-foreground">
                   ~{tx.totalAmountFiat}
                 </p>
               )} */}
+              </div>
             </div>
           </div>
-        </div>
-      </CredenzaTrigger>
-      <CredenzaContent className="slashed-zero">
-        <CredenzaHeader>
-          <CredenzaTitle>
-            {`${type == "outgoing" ? "Sent" : "Received"} Bitcoin`}
-          </CredenzaTitle>
-        </CredenzaHeader>
-        <CredenzaBody>
-          <div className="flex items-center mt-6">
-            <div
-              className={cn(
-                "flex justify-center items-center rounded-full w-10 h-10 md:w-14 md:h-14",
-                type === "outgoing"
-                  ? "bg-orange-100 dark:bg-orange-950"
-                  : "bg-green-100 dark:bg-emerald-950"
-              )}
-            >
-              <Icon
-                strokeWidth={3}
+        </CredenzaTrigger>
+        <CredenzaContent className="slashed-zero">
+          <CredenzaHeader>
+            <CredenzaTitle>
+              {`${type == "outgoing" ? "Sent" : "Received"} Bitcoin`}
+            </CredenzaTitle>
+          </CredenzaHeader>
+          <CredenzaBody>
+            <div className="flex items-center mt-6">
+              <div
                 className={cn(
-                  "w-6 h-6 md:w-8 md:h-8",
+                  "flex justify-center items-center rounded-full w-10 h-10 md:w-14 md:h-14",
                   type === "outgoing"
-                    ? "stroke-orange-400 dark:stroke-amber-600"
-                    : "stroke-green-400 dark:stroke-emerald-500"
+                    ? "bg-orange-100 dark:bg-orange-950"
+                    : "bg-green-100 dark:bg-emerald-950"
                 )}
-              />
-            </div>
-            <div className="ml-4">
-              <p className="text-xl md:text-2xl font-semibold">
-                {new Intl.NumberFormat(undefined, {}).format(
-                  Math.floor(tx.amount / 1000)
-                )}{" "}
-                {Math.floor(tx.amount / 1000) == 1 ? "sat" : "sats"}
-              </p>
-              {/* <p className="text-sm md:text-base text-muted-foreground">
+              >
+                <Icon
+                  strokeWidth={3}
+                  className={cn(
+                    "w-6 h-6 md:w-8 md:h-8",
+                    type === "outgoing"
+                      ? "stroke-orange-400 dark:stroke-amber-600"
+                      : "stroke-green-400 dark:stroke-emerald-500"
+                  )}
+                />
+              </div>
+              <div className="ml-4">
+                <p className="text-xl md:text-2xl font-semibold">
+                  {new Intl.NumberFormat(undefined, {}).format(
+                    Math.floor(tx.amount / 1000)
+                  )}{" "}
+                  {Math.floor(tx.amount / 1000) == 1 ? "sat" : "sats"}
+                </p>
+                {/* <p className="text-sm md:text-base text-muted-foreground">
                 Fiat Amount
               </p> */}
+              </div>
             </div>
-          </div>
-          <div className="mt-8">
-            <p>Date & Time</p>
-            <p className="text-muted-foreground">
-              {dayjs(tx.settled_at * 1000)
-                .tz(dayjs.tz.guess())
-                .format("D MMMM YYYY, HH:mm")}
-            </p>
-          </div>
-          {type == "outgoing" && (
-            <div className="mt-6">
-              <p>Fee</p>
+            <div className="mt-8">
+              <p>Date & Time</p>
               <p className="text-muted-foreground">
-                {new Intl.NumberFormat(undefined, {}).format(
-                  Math.floor(tx.fees_paid / 1000)
-                )}{" "}
-                {Math.floor(tx.fees_paid / 1000) == 1 ? "sat" : "sats"}
+                {dayjs(tx.settled_at * 1000)
+                  .tz(dayjs.tz.guess())
+                  .format("D MMMM YYYY, HH:mm")}
               </p>
             </div>
-          )}
-          {tx.description && (
-            <div className="mt-6">
-              <p>Description</p>
-              <p className="text-muted-foreground">{tx.description}</p>
-            </div>
-          )}
-        </CredenzaBody>
-        <CredenzaFooter className="!justify-start mt-4 !flex-col">
-          <div
-            className="flex items-center gap-2 cursor-pointer"
-            onClick={() => setShowDetails(!showDetails)}
-          >
-            Details
-            {showDetails ? (
-              <ChevronUp className="w-4 h-4" />
-            ) : (
-              <ChevronDown className="w-4 h-4" />
+            {type == "outgoing" && (
+              <div className="mt-6">
+                <p>Fee</p>
+                <p className="text-muted-foreground">
+                  {new Intl.NumberFormat(undefined, {}).format(
+                    Math.floor(tx.fees_paid / 1000)
+                  )}{" "}
+                  {Math.floor(tx.fees_paid / 1000) == 1 ? "sat" : "sats"}
+                </p>
+              </div>
             )}
-          </div>
-          {showDetails && (
-            <>
-              <div className="mt-6 !ml-0">
-                <p>Preimage</p>
-                <div className="flex items-center gap-4">
-                  <p className="text-muted-foreground break-all">
-                    {tx.preimage}
-                  </p>
-                  <CopyIcon
-                    className="cursor-pointer text-muted-foreground w-6 h-6"
-                    onClick={() => {
-                      copy(tx.preimage);
-                    }}
-                  />
-                </div>
+            {tx.description && (
+              <div className="mt-6">
+                <p>Description</p>
+                <p className="text-muted-foreground">{tx.description}</p>
               </div>
-              <div className="mt-6 !ml-0">
-                <p>Hash</p>
-                <div className="flex items-center gap-4">
-                  <p className="text-muted-foreground break-all">
-                    {tx.payment_hash}
-                  </p>
-                  <CopyIcon
-                    className="cursor-pointer text-muted-foreground w-6 h-6"
-                    onClick={() => {
-                      copy(tx.payment_hash);
-                    }}
-                  />
+            )}
+          </CredenzaBody>
+          <CredenzaFooter className="!justify-start mt-4 !flex-col">
+            <div
+              className="flex items-center gap-2 cursor-pointer"
+              onClick={() => setShowDetails(!showDetails)}
+            >
+              Details
+              {showDetails ? (
+                <ChevronUp className="w-4 h-4" />
+              ) : (
+                <ChevronDown className="w-4 h-4" />
+              )}
+            </div>
+            {showDetails && (
+              <>
+                <div className="mt-6 !ml-0">
+                  <p>Preimage</p>
+                  <div className="flex items-center gap-4">
+                    <p className="text-muted-foreground break-all">
+                      {tx.preimage}
+                    </p>
+                    <CopyIcon
+                      className="cursor-pointer text-muted-foreground w-6 h-6"
+                      onClick={() => {
+                        copy(tx.preimage);
+                      }}
+                    />
+                  </div>
                 </div>
-              </div>
-            </>
-          )}
-        </CredenzaFooter>
-      </CredenzaContent>
-    </Credenza>
+                <div className="mt-6 !ml-0">
+                  <p>Hash</p>
+                  <div className="flex items-center gap-4">
+                    <p className="text-muted-foreground break-all">
+                      {tx.payment_hash}
+                    </p>
+                    <CopyIcon
+                      className="cursor-pointer text-muted-foreground w-6 h-6"
+                      onClick={() => {
+                        copy(tx.payment_hash);
+                      }}
+                    />
+                  </div>
+                </div>
+              </>
+            )}
+          </CredenzaFooter>
+        </CredenzaContent>
+      </Credenza>
+    </CredenzaProvider>
   );
 }
 
diff --git a/frontend/src/components/ui/credenza.tsx b/frontend/src/components/ui/credenza.tsx
index 587515fd..63068eac 100644
--- a/frontend/src/components/ui/credenza.tsx
+++ b/frontend/src/components/ui/credenza.tsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-
 import { useMediaQuery } from "src/hooks/useMediaQuery";
 import { cn } from "src/lib/utils";
 import {
@@ -39,15 +38,30 @@ interface CredenzaProps extends BaseProps {
 
 const desktop = "(min-width: 768px)";
 
-const Credenza = ({ children, ...props }: RootCredenzaProps) => {
+const CredenzaContext = React.createContext(false);
+
+const CredenzaProvider = ({ children }: BaseProps) => {
   const isDesktop = useMediaQuery(desktop);
+  return (
+    <CredenzaContext.Provider value={isDesktop}>
+      {children}
+    </CredenzaContext.Provider>
+  );
+};
+
+const useCredenzaContext = () => {
+  return React.useContext(CredenzaContext);
+};
+
+const Credenza = ({ children, ...props }: RootCredenzaProps) => {
+  const isDesktop = useCredenzaContext();
   const Credenza = isDesktop ? Dialog : Drawer;
 
   return <Credenza {...props}>{children}</Credenza>;
 };
 
 const CredenzaTrigger = ({ className, children, ...props }: CredenzaProps) => {
-  const isDesktop = useMediaQuery(desktop);
+  const isDesktop = useCredenzaContext();
   const CredenzaTrigger = isDesktop ? DialogTrigger : DrawerTrigger;
 
   return (
@@ -58,7 +72,7 @@ const CredenzaTrigger = ({ className, children, ...props }: CredenzaProps) => {
 };
 
 const CredenzaClose = ({ className, children, ...props }: CredenzaProps) => {
-  const isDesktop = useMediaQuery(desktop);
+  const isDesktop = useCredenzaContext();
   const CredenzaClose = isDesktop ? DialogClose : DrawerClose;
 
   return (
@@ -69,7 +83,7 @@ const CredenzaClose = ({ className, children, ...props }: CredenzaProps) => {
 };
 
 const CredenzaContent = ({ className, children, ...props }: CredenzaProps) => {
-  const isDesktop = useMediaQuery(desktop);
+  const isDesktop = useCredenzaContext();
   const CredenzaContent = isDesktop ? DialogContent : DrawerContent;
 
   return (
@@ -84,7 +98,7 @@ const CredenzaDescription = ({
   children,
   ...props
 }: CredenzaProps) => {
-  const isDesktop = useMediaQuery(desktop);
+  const isDesktop = useCredenzaContext();
   const CredenzaDescription = isDesktop ? DialogDescription : DrawerDescription;
 
   return (
@@ -95,7 +109,7 @@ const CredenzaDescription = ({
 };
 
 const CredenzaHeader = ({ className, children, ...props }: CredenzaProps) => {
-  const isDesktop = useMediaQuery(desktop);
+  const isDesktop = useCredenzaContext();
   const CredenzaHeader = isDesktop ? DialogHeader : DrawerHeader;
 
   return (
@@ -106,7 +120,7 @@ const CredenzaHeader = ({ className, children, ...props }: CredenzaProps) => {
 };
 
 const CredenzaTitle = ({ className, children, ...props }: CredenzaProps) => {
-  const isDesktop = useMediaQuery(desktop);
+  const isDesktop = useCredenzaContext();
   const CredenzaTitle = isDesktop ? DialogTitle : DrawerTitle;
 
   return (
@@ -125,7 +139,7 @@ const CredenzaBody = ({ className, children, ...props }: CredenzaProps) => {
 };
 
 const CredenzaFooter = ({ className, children, ...props }: CredenzaProps) => {
-  const isDesktop = useMediaQuery(desktop);
+  const isDesktop = useCredenzaContext();
   const CredenzaFooter = isDesktop ? DialogFooter : DrawerFooter;
 
   return (
@@ -143,6 +157,7 @@ export {
   CredenzaDescription,
   CredenzaFooter,
   CredenzaHeader,
+  CredenzaProvider,
   CredenzaTitle,
   CredenzaTrigger,
 };