diff --git a/components/CoverLetterDialog.tsx b/components/CoverLetterDialog.tsx
new file mode 100644
index 0000000..90eac9b
--- /dev/null
+++ b/components/CoverLetterDialog.tsx
@@ -0,0 +1,70 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { SetStateAction, useState } from "react";
+import { Textarea } from "./ui/textarea";
+import { Button } from "./ui/button";
+import { useToast } from "./ui/use-toast";
+
+type Props = {
+  setIsResponseGenerated: React.Dispatch<SetStateAction<boolean>>;
+  setResponse: React.Dispatch<SetStateAction<string>>;
+  isResponseGenerated: boolean;
+  response: string;
+  isError: boolean;
+};
+
+export default function CoverLetterDialog({
+  isResponseGenerated,
+  setIsResponseGenerated,
+  response,
+  setResponse,
+  isError,
+}: Props) {
+  const { toast } = useToast();
+  const copyHandler = () => {
+    navigator.clipboard.writeText(response);
+    toast({
+      title: "Cover Letter",
+      description: "Text Copied!!",
+    });
+  };
+
+  return (
+    <Dialog open={isResponseGenerated} onOpenChange={setIsResponseGenerated}>
+      <DialogTrigger></DialogTrigger>
+      <DialogContent className="sm:w-[700px]">
+        {!isError && (
+          <>
+            <DialogHeader className="flex flex-row w-full items-center justify-between">
+              <DialogTitle>Cover Letter</DialogTitle>
+            </DialogHeader>
+
+            <Textarea
+              className="w-full sm:h-[550px] h-[400px]"
+              value={response}
+              onChange={(e) => setResponse(e.target.value)}
+            ></Textarea>
+
+            <Button onClick={() => copyHandler()}>Copy!</Button>
+          </>
+        )}
+        {isError && (
+          <>
+            <DialogHeader className="flex flex-row w-full items-center justify-between">
+              <DialogTitle>Error</DialogTitle>
+            </DialogHeader>
+            <DialogDescription>
+              Error Occured!! Please try again later.
+            </DialogDescription>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/CoverLetterForm.tsx b/components/CoverLetterForm.tsx
index d507951..c27e308 100644
--- a/components/CoverLetterForm.tsx
+++ b/components/CoverLetterForm.tsx
@@ -13,8 +13,10 @@ import {
 } from "@/components/ui/form";
 import { Textarea } from "./ui/textarea";
 import { ArrowRightIcon } from "@radix-ui/react-icons";
-import { SetStateAction } from "react";
+import { SetStateAction, useState } from "react";
 import { getCoverLetter } from "@/utils/Gemini";
+import Loader from "./Loader";
+
 
 const formSchema = z.object({
   jobDescription: z
@@ -52,6 +54,8 @@ export default function CoverLetterForm({
   setIsError,
   setResponse,
 }: Props) {
+  const [isLoading, setIsLoading] = useState(false);
+
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -83,9 +87,8 @@ export default function CoverLetterForm({
   }
 
   const onSubmit = async (values: z.infer<typeof formSchema>) => {
-    // Do something with the form values.
-    // ✅ This will be type-safe and validated.
     const { jobDescription, project, skills, experience } = values;
+    setIsLoading(true);
 
     try {
       const res = await getCoverLetter({
@@ -95,10 +98,14 @@ export default function CoverLetterForm({
         experience,
       });
 
-      console.log(res);
+      if (res) {
+        setIsResponseGenerated(true);
+        setResponse(res);
+      }
     } catch (err) {
       setIsError(true);
     }
+    setIsLoading(false);
   };
 
   return (
@@ -223,7 +230,7 @@ export default function CoverLetterForm({
               name="skills"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Projects</FormLabel>
+                  <FormLabel>Skills</FormLabel>
                   <FormControl>
                     <Textarea
                       className="h-[100px]"
@@ -269,8 +276,12 @@ export default function CoverLetterForm({
                 </FormItem>
               )}
             />
-            <Button className="flex gap-1 text-white" type="submit">
-              Submit
+            <Button
+              disabled={isLoading}
+              className="flex gap-1 text-white"
+              type="submit"
+            >
+              {isLoading ? <Loader /> : "Submit"}
             </Button>
           </>
         )}
diff --git a/components/Loader.tsx b/components/Loader.tsx
new file mode 100644
index 0000000..e79fe7e
--- /dev/null
+++ b/components/Loader.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+export default function Loader() {
+  return (
+    <div className="flex gap-2 justify-center items-center">
+      <span className="sr-only">Loading...</span>
+      <div className="h-2 w-2 bg-black rounded-full animate-pulse [animation-delay:-0.3s]"></div>
+      <div className="h-2 w-2 bg-black rounded-full animate-pulse [animation-delay:-0.15s]"></div>
+      <div className="h-2 w-2 bg-black rounded-full animate-pulse"></div>
+    </div>
+  );
+}
diff --git a/components/cover-letter.tsx b/components/cover-letter.tsx
index 8dbd4e0..4acc963 100644
--- a/components/cover-letter.tsx
+++ b/components/cover-letter.tsx
@@ -4,6 +4,7 @@ import { useRouter } from "next/navigation";
 import React, { useState } from "react";
 import { Button } from "./ui/button";
 import CoverLetterForm from "./CoverLetterForm";
+import CoverLetterDialog from "./CoverLetterDialog";
 
 type Props = {
   user: User | null;
@@ -76,6 +77,13 @@ export default function CoverLetter({ user }: Props) {
             setIsSubmit={setIsSubmit}
           />
         </div>
+        <CoverLetterDialog
+          setResponse={setResponse}
+          isResponseGenerated={isResponseGenerated}
+          setIsResponseGenerated={setIsResponseGenerated}
+          response={response}
+          isError={isError}
+        />
       </div>
     </div>
   );