diff --git a/components/TxSummaryDialog/index.tsx b/components/TxSummaryDialog/index.tsx
index 21e65685..c1fe8f08 100644
--- a/components/TxSummaryDialog/index.tsx
+++ b/components/TxSummaryDialog/index.tsx
@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   Dialog,
+  DialogClose,
   DialogContent,
   Flex,
   keyframes,
@@ -9,7 +10,6 @@ import {
 } from "@livepeer/design-system";
 import { sentenceCase } from "change-case";
 import { useExplorerStore } from "hooks";
-import CloseIcon from "../../public/img/close.svg";
 
 const rotate = keyframes({
   "100%": { transform: "rotate(360deg)" },
@@ -23,29 +23,15 @@ const Index = () => {
   }
 
   return (
-    <Dialog open={true}>
-      <DialogContent
-        css={{ minWidth: 370 }}
-        onPointerDownOutside={clearLatestTransaction}
-      >
-        <Flex
-          css={{
-            justifyContent: "flex-end",
-          }}
-        >
-          <Box
-            as={CloseIcon}
-            css={{
-              zIndex: 1,
-              right: 20,
-              cursor: "pointer",
-              top: 20,
-              color: "$white",
-            }}
-            onClick={clearLatestTransaction}
-          />
-        </Flex>
-
+    <Dialog 
+      open={true}
+      onOpenChange={(open) => {
+        if (!open) {
+          clearLatestTransaction();
+        }
+      }}
+    >
+      <DialogContent css={{ minWidth: 370 }}>
         {latestTransaction?.error ? (
           <Box />
         ) : (
@@ -92,14 +78,15 @@ const Index = () => {
                   ? `${sentenceCase(latestTransaction?.error)}.`
                   : "Error with transaction, please check your inputs and try again."}
               </Text>
-              <Button
-                onClick={clearLatestTransaction}
-                variant="primary"
-                size="4"
-                css={{ width: "100%" }}
-              >
-                Close
-              </Button>
+              <DialogClose asChild>
+                <Button
+                 size="4"
+                 variant="primary"
+                 css={{ width: "100%" }}>
+
+                  Close
+                </Button>
+              </DialogClose>
             </>
           ) : (
             <Text>Confirm latest transaction in your wallet.</Text>