make this dialog look better
the existing code is
export default function CorrectResponseDialog({
isOpen,
setIsOpen,
chatId,
chatTitle,
}: Readonly<CorrectResponseDialogProps>) {
console.log(chatId, "chat id");
const { mutate: handleAdminResponse, isPending } = useAdminResponse();
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
const response = formData.get("response") as string;

if (response) {  
  handleAdminResponse(  
    {  
      query: chatTitle,  
      admin_response: response,  
      chatId: chatId,  
    },  
    { onSettled: () => setIsOpen(false) }  
  );  
}  

};

return (
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>Craft an Accurate Response</DialogTitle>
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-2">
<p className="text-sm text-gray-800">
Submit the correct response to the query.
</p>
<Textarea name="response" placeholder="Write response..." required />
</div>
<div className="flex justify-end ">
<Button className="cursor-pointer" type="submit">
{isPending ? (
<>
<Loader2 className="h-8 w-8 animate-spin text-white" />
Submitting
</>
) : (
"Submit"
)}
</Button>
</div>
</form>
</DialogContent>
</Dialog>
);
}