diff --git a/ui/src/components/Player/DetectionDialog.tsx b/ui/src/components/Player/DetectionDialog.tsx
index d1182433..e6214c02 100644
--- a/ui/src/components/Player/DetectionDialog.tsx
+++ b/ui/src/components/Player/DetectionDialog.tsx
@@ -1,3 +1,4 @@
+import CloseIcon from "@mui/icons-material/Close";
import {
Box,
Button,
@@ -5,10 +6,12 @@ import {
DialogActions,
DialogContent,
DialogTitle,
+ IconButton,
Paper,
TextField,
ToggleButton,
ToggleButtonGroup,
+ Typography,
useMediaQuery,
} from "@mui/material";
import { useTheme } from "@mui/material/styles";
@@ -126,9 +129,43 @@ export default function DetectionDialog({
onClose={handleClose}
aria-labelledby="form-dialog-title"
>
-
- {!submitted ? "Report what you heard" : "Thanks for submitting!"}
-
+ theme.palette.grey[500],
+ }}
+ >
+
+
+
+ {!submitted ? (
+
+ Report what you heard
+
+ ) : (
+ <>
+ theme.palette.primary.main,
+ }}
+ >
+ Thank you for reporting
+
+
+ Check out our reports to see how your support contributed to our
+ mission for marine conservation.
+
+ >
+ )}
+
{!submitted && (
) : (
-
-
-
+ <>
+
+
+
+
+ >
)}
>