diff --git a/src/app/(dashboard)/dashboard/commits/add/page.tsx b/src/app/(dashboard)/dashboard/commits/add/page.tsx
index 1c7ef85..be2fe15 100644
--- a/src/app/(dashboard)/dashboard/commits/add/page.tsx
+++ b/src/app/(dashboard)/dashboard/commits/add/page.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
@@ -25,7 +27,11 @@ export default function Page() {
             </CardHeader>
 
             <CardContent>
-              <CommitForm />
+              <CommitForm
+                onSubmit={() => {}}
+                btn1_content="Create"
+                btn2_content="Create and add another"
+              />
             </CardContent>
           </Card>
         </div>
diff --git a/src/app/(dashboard)/dashboard/commits/edit/[id]/page.tsx b/src/app/(dashboard)/dashboard/commits/edit/[id]/page.tsx
new file mode 100644
index 0000000..84130d4
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/commits/edit/[id]/page.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import Breadcrumb from "@/components/breadcrumb";
+import { dummyCommits } from "@/constants/data";
+import { Commit } from "@/types/commit";
+import CommitForm from "@/components/commit-form";
+
+const breadcrumbItems = [
+  { title: "Dashboard", link: "/dashboard" },
+  { title: "Commits", link: "/dashboard/commits" },
+  { title: "Edit" },
+];
+
+export default function Page({ params }: { params: { id: string } }) {
+  const commit = dummyCommits.find((commit) => commit.id === params.id);
+  
+  console.log(commit)
+  return (
+    <ScrollArea className="h-[calc(100vh-53px)]">
+      <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
+        <Breadcrumb items={breadcrumbItems} />
+        <div className="w-full h-full flex justify-center items-center">
+          <Card className="max-w-[700px] w-full">
+            <CardHeader>
+              <CardTitle className="mb-4 font-bold text-xl">
+                Edit Commit
+              </CardTitle>
+              <Separator />
+            </CardHeader>
+
+            <CardContent>
+              <CommitForm
+                commit={commit as Commit}
+                onSubmit={() => {}}
+                btn1_content="Save and continue editing"
+                btn2_content="Save changes"
+              />
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+      <ScrollBar />
+    </ScrollArea>
+  );
+}
diff --git a/src/components/commit-form.tsx b/src/components/commit-form.tsx
index 7117d11..5d8d680 100644
--- a/src/components/commit-form.tsx
+++ b/src/components/commit-form.tsx
@@ -27,6 +27,7 @@ import {
 import { cn } from "@/lib/utils";
 import { CommandList } from "cmdk";
 import { useState } from "react";
+import { Commit } from "@/types/commit";
 
 const statuses = [
   "new",
@@ -69,14 +70,34 @@ const defaultValues: Partial<DisplayFormValues> = {
   commitDate: "",
 };
 
-export default function CommitForm() {
+type Props = {
+  commit?: Commit;
+  onSubmit: () => void;
+  btn1_content: string;
+  btn2_content: string;
+};
+
+export default function CommitForm({
+  commit,
+  onSubmit: onFormSubmit,
+  btn1_content,
+  btn2_content,
+}: Props) {
   const [isStatusPopoverOpen, setIsStatusPopoverOpen] = useState(false);
   const [isTypePopoverOpen, setIsTypePopoverOpen] = useState(false);
   const [isEvaluationPopoverOpen, setIsEvaluationPopoverOpen] = useState(false);
 
   const form = useForm<DisplayFormValues>({
     resolver: zodResolver(displayFormSchema),
-    defaultValues,
+    defaultValues: {
+      id: commit?.id || "",
+      hash: commit?.hash || "",
+      status: commit?.status || "",
+      retryCount: commit?.retryCount || "",
+      type: commit?.type || "",
+      evaluation: commit?.evaluation || "",
+      commitDate: commit?.commitDate || "",
+    },
   });
 
   function onSubmit(data: DisplayFormValues) {
@@ -88,6 +109,8 @@ export default function CommitForm() {
         </pre>
       ),
     });
+
+    onFormSubmit();
   }
 
   return (
@@ -348,10 +371,10 @@ export default function CommitForm() {
 
         <div className="flex items-center gap-4 flex-col sm:flex-row">
           <Button className="w-full" size="lg">
-            Create
+            {btn1_content}
           </Button>
           <Button variant="secondary" className="w-full" size="lg">
-            Create and add another
+            {btn2_content}
           </Button>
         </div>
       </form>
diff --git a/src/constants/data.ts b/src/constants/data.ts
index d1bad04..be796c5 100644
--- a/src/constants/data.ts
+++ b/src/constants/data.ts
@@ -299,10 +299,10 @@ export const dummyEvaluations: Evaluation[] = [
 
 export const dummyCommits: Commit[] = [
   {
-    id: 1,
+    id: "1",
     hash: "9998211595b05c7f8555e4a129d7792bce7a8dd6_1",
     status: "skills_extracted",
-    retryCount: 0,
+    retryCount: "0",
     type: "code",
     evaluation:
       "Uploaded at: 2023-09-20 00:00:00 - Uploader: jschultz@php.net - Developer: fabien@potencier.org - Status: finished",
diff --git a/src/types/commit.ts b/src/types/commit.ts
index 9c7151f..4e6cba4 100644
--- a/src/types/commit.ts
+++ b/src/types/commit.ts
@@ -1,8 +1,8 @@
 export interface Commit {
-    id: number;
+    id: string;
     hash: string;
     status: string;
-    retryCount: number;
+    retryCount: string;
     type: string;
     evaluation: string;
     commitDate: string;