diff --git a/src/components/atoms/ConfirmationBox.tsx b/src/components/atoms/ConfirmationBox.tsx
index bd967f85..b317c191 100644
--- a/src/components/atoms/ConfirmationBox.tsx
+++ b/src/components/atoms/ConfirmationBox.tsx
@@ -4,34 +4,27 @@ import { Box, Button, IconButton, Stack, Typography } from "@mui/material";
 
 interface ConfirmationBoxProps {
   selector: string;
-  onClose: () => void;
+  onYes: () => void;
+  onNo: () => void;
 }
 
-const ConfirmationBox = ({ selector, onClose }: ConfirmationBoxProps) => {
+export const ConfirmationBox = ({ selector, onYes, onNo }: ConfirmationBoxProps) => {
   return (
-    <React.Fragment>
-      <Typography>
-        Do you want to proceed?
-      </Typography>
-      <Box style={{ marginTop: '4px' }}>
-        Selector: {selector}
-        <pre>{selector}</pre>
+      <Box sx={{ textAlign: 'center' }}>
+          <Typography variant="h6" component="h2" gutterBottom>
+              Confirmation
+          </Typography>
+          <Typography variant="body1" gutterBottom>
+              Do you want to interact with the element: {selector}?
+          </Typography>
+          <Box sx={{ mt: 2, display: 'flex', justifyContent: 'center', gap: 2 }}>
+              <Button variant="contained" color="primary" onClick={onYes}>
+                  Yes
+              </Button>
+              <Button variant="contained" color="secondary" onClick={onNo}>
+                  No
+              </Button>
+          </Box>
       </Box>
-    </React.Fragment>
   );
-};
-
-const ConfirmationBoxContainer = styled.div`
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background: white;
-    border: 1px solid #ccc;
-    padding: 20px;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-    z-index: 2147483648; /* Ensure it's above the highlighter */
-    text-align: center;
-`;
-
-export default ConfirmationBox;
+};
\ No newline at end of file