diff --git a/components/CoverLetterForm.tsx b/components/CoverLetterForm.tsx
index 0e20619..4eccb55 100644
--- a/components/CoverLetterForm.tsx
+++ b/components/CoverLetterForm.tsx
@@ -6,23 +6,20 @@ import { Button } from "@/components/ui/button";
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
 import { Textarea } from "./ui/textarea";
 import { ArrowRightIcon } from "@radix-ui/react-icons";
-import { IconArrowBigRight } from "@tabler/icons-react";
 import { SetStateAction } from "react";
 
 const formSchema = z.object({
   jobDescription: z
     .string()
     .min(10, { message: "Detailed job description required!!" })
-    .max(1000),
+    .max(10000),
   project: z.string().min(10, { message: "Project required!!" }).max(1000),
   skills: z.string().min(10, { message: "Skills required!!" }).max(1000),
   experience: z
@@ -251,7 +248,7 @@ export default function CoverLetterForm({
                 </FormItem>
               )}
             />
-            <Button className="flex gap-1" type="submit">
+            <Button className="flex gap-1 text-white" type="submit">
               Submit
             </Button>
           </>
diff --git a/components/cover-letter.tsx b/components/cover-letter.tsx
index 39e6db7..b750803 100644
--- a/components/cover-letter.tsx
+++ b/components/cover-letter.tsx
@@ -22,11 +22,13 @@ export default function CoverLetter({ user }: Props) {
   return (
     <div className="flex flex-col items-center justify-center">
       <div className="w-full p-2">
-        <div className="flex w-full items-center justify-center">
+        <div className="flex w-full my-10 items-center justify-center">
           <div className="border-[#B1B2FF] w-[10%] border-0 border-b-2" />
           <Button
             className={`${
-              !isJobDescription ? "bg-[#051129] border-gray-400 border" : ""
+              !isJobDescription
+                ? "dark:bg-[#051129] bg-blue-400 border-gray-400 border"
+                : ""
             }`}
             variant={"newDefault"}
           >
@@ -35,7 +37,9 @@ export default function CoverLetter({ user }: Props) {
           <div className="border-[#B1B2FF] w-[10%] border-0 border-b-2" />
           <Button
             className={`${
-              !isResume ? "bg-[#051129] border-gray-400 border" : ""
+              !isResume
+                ? "dark:bg-[#051129] bg-blue-400 border-gray-400 border"
+                : ""
             }`}
             variant={"newDefault"}
           >
@@ -44,7 +48,9 @@ export default function CoverLetter({ user }: Props) {
           <div className="border-[#B1B2FF] w-[10%] border-0 border-b-2" />
           <Button
             className={`${
-              !isSubmit ? "bg-[#051129] border-gray-400 border" : ""
+              !isSubmit
+                ? "dark:bg-[#051129] bg-blue-400 border-gray-400 border"
+                : ""
             }`}
             variant={"newDefault"}
           >