diff --git a/app/layout.tsx b/app/layout.tsx
index e782031..989f034 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -69,8 +69,9 @@ export default function RootLayout({
                     buttonVariants({
                       variant: "outline",
                       size: "icon",
-                      className: "rounded-full w-10 h-10 overflow-hidden sm:block hidden",
-                    })
+                      className:
+                        "rounded-full w-10 h-10 overflow-hidden sm:block hidden",
+                    }),
                   )}
                 >
                   <Image
@@ -96,7 +97,7 @@ export default function RootLayout({
                       variant: "outline",
                       size: "icon",
                       className: "rounded-full mx-2 w-10 h-10 sm:flex hidden",
-                    })
+                    }),
                   )}
                 >
                   <GitHubLogoIcon className="w-6 h-6" />
diff --git a/app/page.tsx b/app/page.tsx
index e43a363..eb25a1f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -27,7 +27,7 @@ export default function Home() {
   const [error, setError] = React.useState<string | null>(null);
   const [commitChanges, setcommitChanges] = React.useState<string | null>(null);
   const [commitMessages, setcommitMessages] = React.useState<string | null>(
-    null
+    null,
   );
 
   const { toast } = useToast();
@@ -62,7 +62,7 @@ export default function Home() {
                 toastVariants({
                   variant: "destructive",
                   className: "w-fit m-0 p-2 text-xs hover:bg-[#815305]/35",
-                })
+                }),
               )}
               onClick={() => handelSubmit({ suggestion })}
             >
@@ -86,7 +86,7 @@ export default function Home() {
 
   const submitForm = (
     e: React.FormEvent<HTMLFormElement>,
-    message: string | null
+    message: string | null,
   ): void => {
     e.preventDefault();
     handelSubmit({ suggestion: message || "" });
@@ -115,6 +115,7 @@ export default function Home() {
                   <ListSuggestion
                     suggestions={commitMessages!}
                     commitChanges={commitChanges || ""}
+                    submitForm={submitForm}
                   />
                 ) : (
                   <div className="w-full flex items-center justify-center">
@@ -153,7 +154,7 @@ export default function Home() {
                 disabled={isLoading}
               >
                 {isLoading && <Spinner className="size-4" />}
-                  Generate
+                Generate
                 <CornerDownLeft className="size-3.5" />
               </Button>
             </div>
diff --git a/components/emptyScreen.tsx b/components/emptyScreen.tsx
index bc46eb6..874252b 100644
--- a/components/emptyScreen.tsx
+++ b/components/emptyScreen.tsx
@@ -43,15 +43,17 @@ const EmptyScreen = ({
           {randomMessage}
         </CardHeader>
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-3 mx-3 sm:mx-14 mt-4">
-          {randomSuggestions.slice(0, suggestionCount).map((suggestion, index) => (
-            <Card
-              className="p-4 flex items-center w-full rounded-lg cursor-pointer hover:border-primary hover:bg-primary-foreground"
-              key={index}
-              onClick={() => onSubmit({ suggestion })}
-            >
-              <p className="text-sm ">{suggestion}</p>
-            </Card>
-          ))}
+          {randomSuggestions
+            .slice(0, suggestionCount)
+            .map((suggestion, index) => (
+              <Card
+                className="p-4 flex items-center w-full rounded-lg cursor-pointer hover:border-primary hover:bg-primary-foreground"
+                key={index}
+                onClick={() => onSubmit({ suggestion })}
+              >
+                <p className="text-sm ">{suggestion}</p>
+              </Card>
+            ))}
         </div>
       </div>
     </div>
diff --git a/components/listSuggestion.tsx b/components/listSuggestion.tsx
index 61fd26a..2b21604 100644
--- a/components/listSuggestion.tsx
+++ b/components/listSuggestion.tsx
@@ -1,16 +1,89 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import MarkdownReader from "./md-components";
+import { CheckIcon, Cross1Icon, Pencil1Icon } from "@radix-ui/react-icons";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
 
 const ListSuggestion = ({
   suggestions,
   commitChanges,
+  submitForm,
 }: {
   suggestions: string;
   commitChanges: string;
+  submitForm: (
+    e: React.FormEvent<HTMLFormElement>,
+    message: string | null,
+  ) => void;
 }) => {
+  const [isEditMode, setIsEditMode] = useState<boolean>(false);
+  const [updatedMessage, setUpdatedMessage] = useState(commitChanges);
+
+  useEffect(() => {
+    setIsEditMode(false);
+  }, [commitChanges, suggestions]);
+
+  const toggelEditMode = () => {
+    setIsEditMode((pre) => !pre);
+  };
+
   return (
-    <div className="mx-4 md:mx-10">
-      <h1 className="text-xl font-bold">{commitChanges}</h1>
+    <div className="mx-4 md:mx-10 pt-1">
+      {isEditMode ? (
+        <form
+          onSubmit={(e) => submitForm(e, updatedMessage)}
+          className="flex gap-2 w-full items-center justify-between "
+        >
+          <Input
+            className="w-full"
+            value={updatedMessage}
+            autoComplete="off"
+            onChange={(e) => {
+              setUpdatedMessage(e.target.value);
+            }}
+            autoFocus
+            required
+          ></Input>
+          <Button
+            variant={"outline"}
+            size={"icon"}
+            type="submit"
+            className={
+              "bg-primary-foreground text-muted-foreground border hover:bg-primary-foreground"
+            }
+            disabled={
+              updatedMessage === commitChanges || updatedMessage.trim() === ""
+            }
+          >
+            <CheckIcon />
+          </Button>
+          <Button
+            variant={"outline"}
+            size={"icon"}
+            type="button"
+            className={
+              "bg-primary-foreground text-muted-foreground border hover:bg-primary-foreground"
+            }
+            onClick={toggelEditMode}
+          >
+            <Cross1Icon />
+          </Button>
+        </form>
+      ) : (
+        <div className="flex w-full items-center justify-between ">
+          <h1 className="text-xl font-bold">{commitChanges}</h1>
+          <Button
+            variant={"outline"}
+            size={"icon"}
+            className={
+              "bg-primary-foreground text-muted-foreground border hover:bg-primary-foreground"
+            }
+            onClick={toggelEditMode}
+          >
+            <Pencil1Icon />
+          </Button>
+        </div>
+      )}
       <MarkdownReader markdown={suggestions} />
     </div>
   );
diff --git a/components/md-components.tsx b/components/md-components.tsx
index 0cba319..771b2ac 100644
--- a/components/md-components.tsx
+++ b/components/md-components.tsx
@@ -22,7 +22,7 @@ const components = {
     <h1
       className={cn(
         "group font-heading mt-2 scroll-m-20 text-4xl font-bold",
-        className
+        className,
       )}
       {...props}
     />
@@ -31,7 +31,7 @@ const components = {
     <h2
       className={cn(
         "group font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0",
-        className
+        className,
       )}
       {...props}
     />
@@ -40,7 +40,7 @@ const components = {
     <h3
       className={cn(
         "group font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight",
-        className
+        className,
       )}
       {...props}
     />
@@ -49,7 +49,7 @@ const components = {
     <h4
       className={cn(
         "group font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight",
-        className
+        className,
       )}
       {...props}
     />
@@ -58,7 +58,7 @@ const components = {
     <h5
       className={cn(
         "group mt-8 scroll-m-20 text-lg font-semibold tracking-tight",
-        className
+        className,
       )}
       {...props}
     />
@@ -67,7 +67,7 @@ const components = {
     <h6
       className={cn(
         "group mt-8 scroll-m-20 text-base font-semibold tracking-tight",
-        className
+        className,
       )}
       {...props}
     />
@@ -125,7 +125,7 @@ const components = {
     <th
       className={cn(
         "border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
-        className
+        className,
       )}
       {...props}
     />
@@ -134,7 +134,7 @@ const components = {
     <td
       className={cn(
         "border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
-        className
+        className,
       )}
       {...props}
     />
@@ -163,7 +163,7 @@ const components = {
         <pre
           className={cn(
             "mb-4 mt-6 max-h-[650px] shadow overflow-x-auto rounded-lg border bg-primary-foreground/70 font-semibold",
-            className
+            className,
           )}
           {...props}
         />
@@ -214,7 +214,7 @@ const components = {
       <code
         className={cn(
           "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-semibold text-sm",
-          className
+          className,
         )}
         {...props}
       />
diff --git a/components/md/copy-button.tsx b/components/md/copy-button.tsx
index 61c7b77..756f0b7 100644
--- a/components/md/copy-button.tsx
+++ b/components/md/copy-button.tsx
@@ -39,10 +39,7 @@ export function CopyButton({
     <Button
       size="icon"
       variant="ghost"
-      className={cn(
-        "relative z-10 h-6 w-6 bg-card border",
-        className,
-      )}
+      className={cn("relative z-10 h-6 w-6 bg-card border", className)}
       onClick={() => {
         copyToClipboardWithMeta(
           value,
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 225e113..032560c 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -24,7 +24,7 @@ const buttonVariants = cva(
         default: "h-9 px-4 py-2",
         sm: "h-8 rounded-md px-3 text-xs",
         lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
+        icon: "h-8 w-8",
       },
     },
     defaultVariants: {
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index 88adf87..b0d841f 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -20,7 +20,7 @@ const DialogOverlay = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
     )}
     {...props}
   />
@@ -37,7 +37,7 @@ const DialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
+        className,
       )}
       {...props}
     >
@@ -54,7 +54,7 @@ const DialogHeader = ({
   <div
     className={cn(
       "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
@@ -68,7 +68,7 @@ const DialogFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
@@ -83,7 +83,7 @@ const DialogTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-lg font-semibold leading-none tracking-tight",
-      className
+      className,
     )}
     {...props}
   />
diff --git a/components/ui/toast.tsx b/components/ui/toast.tsx
index 1cf0648..128b447 100644
--- a/components/ui/toast.tsx
+++ b/components/ui/toast.tsx
@@ -30,8 +30,7 @@ export const toastVariants = cva(
     variants: {
       variant: {
         default: "border bg-background text-foreground",
-        destructive:
-          "border-[#5b3b04] bg-[#191001] text-[#e5d07b]",
+        destructive: "border-[#5b3b04] bg-[#191001] text-[#e5d07b]",
       },
     },
     defaultVariants: {