diff --git a/src/app/(dashboard)/dashboard/commits/add/page.tsx b/src/app/(dashboard)/dashboard/commits/add/page.tsx
new file mode 100644
index 0000000..3bbcd70
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/commits/add/page.tsx
@@ -0,0 +1,36 @@
+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 CommitForm from "@/components/commit-form";
+
+const breadcrumbItems = [
+  { title: "Dashboard", link: "/dashboard" },
+  { title: "Commits", link: "/dashboard/commits" },
+  { title: "Create Commit" },
+];
+
+export default function SettingsDisplayPage() {
+  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 mb-8">
+            <CardHeader>
+              <CardTitle className="mb-4 font-bold text-xl">
+                Create Commit
+              </CardTitle>
+              <Separator />
+            </CardHeader>
+
+            <CardContent>
+              <CommitForm />
+            </CardContent>
+          </Card>
+        </div>
+        <ScrollBar />
+      </div>
+    </ScrollArea>
+  );
+}
diff --git a/src/components/commit-form.tsx b/src/components/commit-form.tsx
new file mode 100644
index 0000000..7117d11
--- /dev/null
+++ b/src/components/commit-form.tsx
@@ -0,0 +1,360 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { toast } from "@/components/ui/use-toast";
+import { Input } from "./ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "./ui/command";
+import { cn } from "@/lib/utils";
+import { CommandList } from "cmdk";
+import { useState } from "react";
+
+const statuses = [
+  "new",
+  "running",
+  "retry",
+  "skills_extracted",
+  "failed",
+  "too_big",
+] as const;
+
+const evaluations = [
+  "Uploaded at: 2023-09-20 00:00:00 - Uploader: jschultz@php.net - Developer: fabien@potencier.org - Status: finished",
+  "Uploaded at: 2023-09-27 00:00:00 - Uploader: jschultz@php.net - Developer: gamemaker0042@gmail.com - Status: finished",
+] as const;
+
+const types = ["code", "merge"] as const;
+
+const displayFormSchema = z.object({
+  id: z.string().trim().min(1, "ID is required"),
+  hash: z.string().trim().min(1, "Hash is required"),
+  status: z.string().trim().min(1, "Status is required"),
+  retryCount: z.string().trim().min(1, "Retry count is required"),
+  type: z.string().trim().min(1, "Type is required"),
+  evaluation: z.string().trim().min(1, "Evaluation is required"),
+  commitDate: z.string().refine((value) => /^\d{4}-\d{2}-\d{2}$/.test(value), {
+    message: "Commit date should be in the format YYYY-MM-DD",
+  }),
+});
+
+type DisplayFormValues = z.infer<typeof displayFormSchema>;
+
+// This can come from your database or API.
+const defaultValues: Partial<DisplayFormValues> = {
+  id: "",
+  hash: "",
+  status: "",
+  retryCount: "",
+  type: "",
+  evaluation: "",
+  commitDate: "",
+};
+
+export default function CommitForm() {
+  const [isStatusPopoverOpen, setIsStatusPopoverOpen] = useState(false);
+  const [isTypePopoverOpen, setIsTypePopoverOpen] = useState(false);
+  const [isEvaluationPopoverOpen, setIsEvaluationPopoverOpen] = useState(false);
+
+  const form = useForm<DisplayFormValues>({
+    resolver: zodResolver(displayFormSchema),
+    defaultValues,
+  });
+
+  function onSubmit(data: DisplayFormValues) {
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    });
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="id"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>ID</FormLabel>
+              <Input placeholder="Enter ID..." {...field} />
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="hash"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Hash</FormLabel>
+              <Input placeholder="Enter hash..." {...field} />
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="status"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Status</FormLabel>
+              <Popover
+                open={isStatusPopoverOpen}
+                onOpenChange={setIsStatusPopoverOpen}
+              >
+                <PopoverTrigger
+                  asChild
+                  onClick={() => setIsStatusPopoverOpen(true)}
+                >
+                  <FormControl>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      className={cn(
+                        "w-full justify-between",
+                        !field.value && "text-muted-foreground"
+                      )}
+                    >
+                      {field.value
+                        ? statuses.find((status) => status === field.value)
+                        : "Select Status"}
+                      <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </FormControl>
+                </PopoverTrigger>
+                <PopoverContent className="w-[300px]  md:w-[650px] p-0">
+                  <Command>
+                    <CommandList>
+                      <CommandInput
+                        placeholder="Search status..."
+                        className="h-9"
+                      />
+                      <CommandEmpty>No status found.</CommandEmpty>
+                      <CommandGroup>
+                        {statuses.map((status) => (
+                          <CommandItem
+                            value={status}
+                            key={status}
+                            onSelect={() => {
+                              form.setValue("status", status);
+                              setIsStatusPopoverOpen(false);
+                            }}
+                          >
+                            {status}
+                            <CheckIcon
+                              className={cn(
+                                "ml-auto h-4 w-4",
+                                status === field.value
+                                  ? "opacity-100"
+                                  : "opacity-0"
+                              )}
+                            />
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="retryCount"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Retry Count</FormLabel>
+              <Input placeholder="Enter retry count..." {...field} />
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="type"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Type</FormLabel>
+              <Popover
+                open={isTypePopoverOpen}
+                onOpenChange={setIsTypePopoverOpen}
+              >
+                <PopoverTrigger asChild>
+                  <FormControl>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      className={cn(
+                        "w-full justify-between",
+                        !field.value && "text-muted-foreground"
+                      )}
+                    >
+                      {field.value
+                        ? types.find((type) => type === field.value)
+                        : "Select Type"}
+                      <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </FormControl>
+                </PopoverTrigger>
+                <PopoverContent className="w-[300px]  md:w-[650px] p-0">
+                  <Command>
+                    <CommandList>
+                      <CommandInput
+                        placeholder="Search type..."
+                        className="h-9"
+                      />
+                      <CommandEmpty>No type found.</CommandEmpty>
+                      <CommandGroup>
+                        {types.map((type) => (
+                          <CommandItem
+                            value={type}
+                            key={type}
+                            onSelect={() => {
+                              form.setValue("type", type);
+                              setIsTypePopoverOpen(false);
+                            }}
+                          >
+                            {type}
+                            <CheckIcon
+                              className={cn(
+                                "ml-auto h-4 w-4",
+                                type === field.value
+                                  ? "opacity-100"
+                                  : "opacity-0"
+                              )}
+                            />
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="evaluation"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Evaluation</FormLabel>
+              <Popover
+                open={isEvaluationPopoverOpen}
+                onOpenChange={setIsEvaluationPopoverOpen}
+              >
+                <PopoverTrigger asChild>
+                  <FormControl>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      className={cn(
+                        "w-full justify-between",
+                        !field.value && "text-muted-foreground"
+                      )}
+                    >
+                      <p className="truncate">
+                        {field.value
+                          ? evaluations.find(
+                              (evaluation) => evaluation === field.value
+                            )
+                          : "Select Evaluation"}
+                      </p>
+                      <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </FormControl>
+                </PopoverTrigger>
+                <PopoverContent className="w-[300px]  md:w-[650px] p-0">
+                  <Command>
+                    <CommandList>
+                      <CommandInput
+                        placeholder="Search evaluation..."
+                        className="h-9"
+                      />
+                      <CommandEmpty>No evaluation found.</CommandEmpty>
+                      <CommandGroup>
+                        {evaluations.map((evaluation) => (
+                          <CommandItem
+                            value={evaluation}
+                            key={evaluation}
+                            onSelect={() => {
+                              form.setValue("evaluation", evaluation);
+                              setIsEvaluationPopoverOpen(false);
+                            }}
+                          >
+                            {evaluation}
+                            <CheckIcon
+                              className={cn(
+                                "ml-auto h-4 w-4",
+                                evaluation === field.value
+                                  ? "opacity-100"
+                                  : "opacity-0"
+                              )}
+                            />
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="commitDate"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Commit Date</FormLabel>
+              <FormControl>
+                <Input type="date" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div className="flex items-center gap-4 flex-col sm:flex-row">
+          <Button className="w-full" size="lg">
+            Create
+          </Button>
+          <Button variant="secondary" className="w-full" size="lg">
+            Create and add another
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+}
diff --git a/src/components/commits-table/tools-table.tsx b/src/components/commits-table/tools-table.tsx
index dd80345..b73413a 100644
--- a/src/components/commits-table/tools-table.tsx
+++ b/src/components/commits-table/tools-table.tsx
@@ -19,7 +19,7 @@ const ToolsTable = ({ commitsData }: { commitsData: Commit[] }) => {
           description="Manage Commits"
         />
         <Link
-          href="#"
+          href="/dashboard/commits/add"
           className={buttonVariants({
             variant: "default",
             // size: "sm",