diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100644
index 0000000..3867a0f
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1 @@
+npm run lint
diff --git a/package.json b/package.json
index 230fd80..a3bc873 100644
--- a/package.json
+++ b/package.json
@@ -6,17 +6,21 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "prepare": "husky"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
     "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",
@@ -24,11 +28,14 @@
     "@tanstack/react-table": "^8.20.5",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "cmdk": "1.0.0",
+    "date-fns": "^4.0.0",
     "lucide-react": "^0.439.0",
     "next": "14.2.9",
     "next-auth": "5.0.0-beta.20",
     "next-themes": "^0.3.0",
     "react": "^18",
+    "react-day-picker": "8.10.1",
     "react-dom": "^18",
     "react-hook-form": "^7.53.0",
     "sot": "file:",
@@ -42,6 +49,7 @@
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "14.2.9",
+    "husky": "^9.1.6",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
diff --git a/src/app/app/(main)/_components/create-service-order-workshop-dialog.tsx b/src/app/app/(main)/_components/create-service-order-workshop-dialog.tsx
new file mode 100644
index 0000000..f172a84
--- /dev/null
+++ b/src/app/app/(main)/_components/create-service-order-workshop-dialog.tsx
@@ -0,0 +1,218 @@
+"use client"
+
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
+import { FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription, Form } from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { PropsWithChildren, useRef, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { CreateNewWorkshopServiceOrder, createNewWorkshopServiceOrderSchema } from '../schema'
+import { createNewWorkshopServiceOrder } from '../action'
+import { toast } from '@/hooks/use-toast'
+import { Checkbox } from '@/components/ui/checkbox'
+import { useRouter } from 'next/navigation'
+import { CheckIcon } from '@radix-ui/react-icons'
+
+export default function CreateServiceOrderWorkshopDialog({ children }: PropsWithChildren) {
+    const ref = useRef<HTMLDivElement>(null)
+    const [open, setOpen] = useState(false)
+    const form = useForm<CreateNewWorkshopServiceOrder>({
+        resolver: zodResolver(createNewWorkshopServiceOrderSchema),
+        defaultValues: {
+            automaker: '',
+            project: '',
+            isIntern: true,
+            model: '',
+            chassis: '',
+            fleet: '',
+            vehicleLocation: '',
+            keyLocation: '',
+            serviceInformations: null,
+            deliveryDate: '',
+            requestedBy: ''
+        },
+    })
+    const router = useRouter()
+    async function onSubmit(values: CreateNewWorkshopServiceOrder) {
+        await createNewWorkshopServiceOrder(values)
+        setOpen(false)
+        router.refresh()
+        toast({
+            description: (
+                <div className="w-full flex items-center">
+                    <CheckIcon className="mr-2 w-4 h-4" />
+                    <span className="first-letter:capitalize">Ordem de serviço da oficina criada com sucesso.</span>
+                </div>
+            )
+        })
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+                <div ref={ref}>{children}</div>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-[600px] md:max-w-[700px] lg:max-w-[800px] xl:max-w-[900px]">
+                <DialogHeader>
+                    <DialogTitle>Criar ordem de serviço da oficina</DialogTitle>
+                    <DialogDescription>
+                        Insira os detalhes da ordem de serviço abaixo.
+                    </DialogDescription>
+                </DialogHeader>
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="automaker"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Montadora</FormLabel>
+                                        <FormControl>
+                                            <Input placeholder="Automaker" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="project"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Projeto</FormLabel>
+                                        <FormControl>
+                                            <Input placeholder="Project" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="model"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Modelo</FormLabel>
+                                        <FormControl>
+                                            <Input placeholder="Model" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="chassis"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Chassi</FormLabel>
+                                        <FormControl>
+                                            <Input placeholder="Chassis" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="fleet"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Frota</FormLabel>
+                                        <FormControl>
+                                            <Input placeholder="Fleet" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="vehicleLocation"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Localização do veículo</FormLabel>
+                                        <FormControl>
+                                            <Input placeholder="Vehicle Location" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="keyLocation"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Localização da chave</FormLabel>
+                                        <FormControl>
+                                            <Input placeholder="Key Location" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="deliveryDate"
+                                render={({ field }) => (
+                                    <FormItem className="flex flex-col">
+                                        <FormLabel>Data de entrega</FormLabel>
+                                        <FormControl>
+                                            <Input type="date" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+                        <FormField
+                            control={form.control}
+                            name="isIntern"
+                            render={({ field }) => (
+                                <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
+                                    <FormControl>
+                                        <Checkbox
+                                            checked={field.value}
+                                            onCheckedChange={field.onChange}
+                                        />
+                                    </FormControl>
+                                    <div className="space-y-1 leading-none">
+                                        <FormLabel>
+                                            Interno
+                                        </FormLabel>
+                                        <FormDescription>
+                                            Marque se o projeto for interno
+                                        </FormDescription>
+                                    </div>
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="serviceInformations"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Informações do serviço</FormLabel>
+                                    <FormControl>
+                                        <Textarea
+                                            placeholder="Service Informations"
+                                            {...field}
+                                            value={field.value || ''}
+                                            onChange={(e) => field.onChange(e.target.value || null)}
+                                        />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <Button type="submit">Criar</Button>
+                    </form>
+                </Form>
+            </DialogContent>
+        </Dialog>
+    )
+}
diff --git a/src/app/app/(main)/_components/data-table-faceted-filter.tsx b/src/app/app/(main)/_components/data-table-faceted-filter.tsx
new file mode 100644
index 0000000..801de2f
--- /dev/null
+++ b/src/app/app/(main)/_components/data-table-faceted-filter.tsx
@@ -0,0 +1,131 @@
+import * as React from "react"
+import { CheckIcon, PlusCircledIcon } from "@radix-ui/react-icons"
+import { Column } from "@tanstack/react-table"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Separator } from "@/components/ui/separator"
+import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover"
+import { CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, Command } from "@/components/ui/command"
+import { Badge } from "@/components/ui/badge"
+
+interface DataTableFacetedFilterProps<TData, TValue> {
+  column?: Column<TData, TValue>
+  title?: string
+  options: {
+    label: string
+    value: string
+  }[]
+}
+
+export function DataTableFacetedFilter<TData, TValue>({
+  column,
+  title,
+  options,
+}: DataTableFacetedFilterProps<TData, TValue>) {
+  const facets = column?.getFacetedUniqueValues()
+  const selectedValues = new Set(column?.getFilterValue() as string[])
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm" className="h-8 border-dashed">
+          <PlusCircledIcon className="mr-2 h-4 w-4" />
+          {title}
+          {selectedValues?.size > 0 && (
+            <>
+              <Separator orientation="vertical" className="mx-2 h-4" />
+              <Badge
+                variant="secondary"
+                className="rounded-sm px-1 font-normal lg:hidden"
+              >
+                {selectedValues.size}
+              </Badge>
+              <div className="hidden space-x-1 lg:flex">
+                {selectedValues.size > 2 ? (
+                  <Badge
+                    variant="secondary"
+                    className="rounded-sm px-1 font-normal"
+                  >
+                    {selectedValues.size} selected
+                  </Badge>
+                ) : (
+                  options
+                    .filter((option) => selectedValues.has(option.value))
+                    .map((option) => (
+                      <Badge
+                        variant="secondary"
+                        key={option.value}
+                        className="rounded-sm px-1 font-normal"
+                      >
+                        {option.label}
+                      </Badge>
+                    ))
+                )}
+              </div>
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0 dark:bg-[#1a1a1a]" align="start">
+        <Command>
+          <CommandInput placeholder={title} />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => {
+                const isSelected = selectedValues.has(option.value)
+                return (
+                  <CommandItem
+                    key={option.value}
+                    onSelect={() => {
+                      if (isSelected) {
+                        selectedValues.delete(option.value)
+                      } else {
+                        selectedValues.add(option.value)
+                      }
+                      const filterValues = Array.from(selectedValues)
+                      column?.setFilterValue(
+                        filterValues.length ? filterValues : undefined
+                      )
+                    }}
+                  >
+                    <div
+                      className={cn(
+                        "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                        isSelected
+                          ? "bg-primary text-primary-foreground"
+                          : "opacity-50 [&_svg]:invisible"
+                      )}
+                    >
+                      <CheckIcon className={cn("h-4 w-4")} />
+                    </div>
+                    <span>{option.label}</span>
+                    {facets?.get(option.value) && (
+                      <span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
+                        {facets.get(option.value)}
+                      </span>
+                    )}
+                  </CommandItem>
+                )
+              })}
+            </CommandGroup>
+            {selectedValues.size > 0 && (
+              <>
+                <CommandSeparator />
+                <CommandGroup>
+                  <CommandItem
+                    onSelect={() => column?.setFilterValue(undefined)}
+                    className="justify-center text-center"
+                  >
+                    Limpar filtros
+                  </CommandItem>
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
\ No newline at end of file
diff --git a/src/app/app/(main)/_components/data-table-tool-bar.tsx b/src/app/app/(main)/_components/data-table-tool-bar.tsx
new file mode 100644
index 0000000..7b18c40
--- /dev/null
+++ b/src/app/app/(main)/_components/data-table-tool-bar.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import { Cross2Icon } from "@radix-ui/react-icons"
+import { Table } from "@tanstack/react-table"
+import { statuses } from "./data"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { DataTableFacetedFilter } from "./data-table-faceted-filter"
+import { DataTableViewOptions } from "./data-table-view-options"
+import CreateServiceOrderWorkshopDialog from "./create-service-order-workshop-dialog"
+
+interface DataTableToolbarProps<TData> {
+  table: Table<TData>
+}
+
+export function DataTableToolbar<TData>({
+  table,
+}: DataTableToolbarProps<TData>) {
+  const isFiltered = table.getState().columnFilters.length > 0
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex flex-1 items-center space-x-2">
+        <Input
+          placeholder="Filtrar ordens..."
+          value={(table.getColumn("automaker")?.getFilterValue() as string) ?? ""}
+          onChange={(event) =>
+            table.getColumn("automaker")?.setFilterValue(event.target.value)
+          }
+          className="h-8 w-[150px] lg:w-[250px]"
+        />
+        {table.getColumn("status") && (
+          <DataTableFacetedFilter
+            column={table.getColumn("status")}
+            title="Status"
+            options={statuses}
+          />
+        )}
+        {isFiltered && (
+          <Button
+            variant="ghost"
+            onClick={() => table.resetColumnFilters()}
+            className="h-8 px-2 lg:px-3"
+          >
+            Reset
+            <Cross2Icon className="ml-2 h-4 w-4" />
+          </Button>
+        )}
+        <DataTableViewOptions table={table} />
+      </div>
+      <CreateServiceOrderWorkshopDialog>
+        <Button>Criar ordem</Button>
+      </CreateServiceOrderWorkshopDialog>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/app/app/(main)/_components/data-table-view-options.tsx b/src/app/app/(main)/_components/data-table-view-options.tsx
new file mode 100644
index 0000000..26f1006
--- /dev/null
+++ b/src/app/app/(main)/_components/data-table-view-options.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator } from "@/components/ui/dropdown-menu"
+import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu"
+import { MixerHorizontalIcon } from "@radix-ui/react-icons"
+import { Table } from "@tanstack/react-table"
+
+
+interface DataTableViewOptionsProps<TData> {
+  table: Table<TData>
+}
+
+export function DataTableViewOptions<TData>({
+  table,
+}: DataTableViewOptionsProps<TData>) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="ml-auto hidden h-8 lg:flex"
+        >
+          <MixerHorizontalIcon className="mr-2 h-4 w-4" />
+          Colunas
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[150px]">
+        <DropdownMenuLabel>Selecionar colunas</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {table
+          .getAllColumns()
+          .filter(
+            (column) =>
+              typeof column.accessorFn !== "undefined" && column.getCanHide()
+          )
+          .map((column) => {
+            return (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                className="capitalize"
+                checked={column.getIsVisible()}
+                onCheckedChange={(value) => column.toggleVisibility(!!value)}
+              >
+                {column.id}
+              </DropdownMenuCheckboxItem>
+            )
+          })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
\ No newline at end of file
diff --git a/src/app/app/(main)/_components/data.tsx b/src/app/app/(main)/_components/data.tsx
new file mode 100644
index 0000000..e2ea2a6
--- /dev/null
+++ b/src/app/app/(main)/_components/data.tsx
@@ -0,0 +1,14 @@
+export const statuses = [
+  {
+    value: "pendente",
+    label: "Pendente",
+  },
+  {
+    value: "Finalizado",
+    label: "Finalizado",
+  },
+  {
+    value: "Iniciado",
+    label: "Iniciado",
+  },
+]
diff --git a/src/app/app/(main)/_components/os-data-table.tsx b/src/app/app/(main)/_components/os-data-table.tsx
index e69de29..b3b5b4a 100644
--- a/src/app/app/(main)/_components/os-data-table.tsx
+++ b/src/app/app/(main)/_components/os-data-table.tsx
@@ -0,0 +1,182 @@
+"use client"
+
+import * as React from "react"
+import {
+    ColumnDef,
+    ColumnFiltersState,
+    SortingState,
+    VisibilityState,
+    flexRender,
+    getCoreRowModel,
+    getFilteredRowModel,
+    getPaginationRowModel,
+    getSortedRowModel,
+    useReactTable,
+} from "@tanstack/react-table"
+
+import { Button } from "@/components/ui/button"
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
+import { WorkshopServiceOrder } from "../schema"
+import { Badge } from "@/components/ui/badge"
+import { DataTableToolbar } from "./data-table-tool-bar"
+
+export const columns: ColumnDef<WorkshopServiceOrder>[] = [
+    {
+        accessorKey: "id",
+        header: "ID",
+        cell: ({ row }) => {
+            const { id } = row.original
+
+            return <div>{id}</div>
+        }
+    },
+    {
+        accessorKey: "status",
+        header: () => <div>Status</div>,
+        cell: ({ row }) => {
+            const { status } = row.original
+            const variantStatus = status === "Pendente" ? "outline" : status === "Iniciado" ? "secondary" : "default"
+
+            return <Badge variant={variantStatus}>{status}</Badge>
+        },
+    },
+    {
+        accessorKey: "project",
+        header: () => <div>Projeto</div>,
+        cell: ({ row }) => {
+            const { project } = row.original
+
+            return <div>{project}</div>
+        },
+    },
+    {
+        accessorKey: "automaker",
+        header: "Montadora",
+        cell: ({ row }) => {
+            const { automaker } = row.original
+
+            return <div>{automaker}</div>
+        }
+    },
+]
+
+type WorkshopServiceOrderDataTable = {
+    data: WorkshopServiceOrder[]
+}
+
+export function WorkshopServiceOrderDataTable({ data }: WorkshopServiceOrderDataTable) {
+
+    const [sorting, setSorting] = React.useState<SortingState>([])
+    const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+        []
+    )
+    const [columnVisibility, setColumnVisibility] =
+        React.useState<VisibilityState>({})
+    const [rowSelection, setRowSelection] = React.useState({})
+
+    const table = useReactTable({
+        data,
+        columns,
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        onColumnVisibilityChange: setColumnVisibility,
+        onRowSelectionChange: setRowSelection,
+        state: {
+            sorting,
+            columnFilters,
+            columnVisibility,
+            rowSelection,
+        },
+    })
+
+    return (
+        <div className="space-y-4">
+            <DataTableToolbar table={table} />
+            <div className="rounded-md border">
+                <Table>
+                    <TableHeader>
+                        {table.getHeaderGroups().map((headerGroup) => (
+                            <TableRow key={headerGroup.id}>
+                                {headerGroup.headers.map((header) => {
+                                    return (
+                                        <TableHead key={header.id}>
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                    header.column.columnDef.header,
+                                                    header.getContext()
+                                                )}
+                                        </TableHead>
+                                    )
+                                })}
+                            </TableRow>
+                        ))}
+                    </TableHeader>
+                    <TableBody>
+                        {table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map((row) => (
+                                <TableRow
+                                    key={row.id}
+                                    data-state={row.getIsSelected() && "selected"}
+                                >
+                                    {row.getVisibleCells().map((cell) => (
+                                        <TableCell key={cell.id}>
+                                            {flexRender(
+                                                cell.column.columnDef.cell,
+                                                cell.getContext()
+                                            )}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : (
+                            <TableRow>
+                                <TableCell
+                                    colSpan={columns.length}
+                                    className="h-24 text-center"
+                                >
+                                    No results.
+                                </TableCell>
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            </div>
+            <div className="flex items-center justify-end space-x-2 py-4">
+                <div className="flex-1 text-sm text-muted-foreground">
+                    {table.getFilteredSelectedRowModel().rows.length} of{" "}
+                    {table.getFilteredRowModel().rows.length} row(s) selected.
+                </div>
+                <div className="space-x-2">
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => table.previousPage()}
+                        disabled={!table.getCanPreviousPage()}
+                    >
+                        Voltar
+                    </Button>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => table.nextPage()}
+                        disabled={!table.getCanNextPage()}
+                    >
+                        Próximo
+                    </Button>
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/app/app/(main)/action.ts b/src/app/app/(main)/action.ts
index 6d5aabc..4895495 100644
--- a/src/app/app/(main)/action.ts
+++ b/src/app/app/(main)/action.ts
@@ -1,15 +1,49 @@
 "use server"
 
 import { config } from "@/config"
+import { CreateNewWorkshopServiceOrder } from "./schema"
+import { auth } from "@/auth"
 
-type ServiceOrder = {
-    id: string
+export const getWorkshopServiceOrders = async () => {
+    const apiUrl = config.api.url
+    try {
+        const response = await fetch(`${apiUrl}/service-orders/workshop`,{
+                cache: "no-cache"
+            })
+
+        if (!response.ok) {
+            throw new Error(`Error: ${response.statusText}`)
+        }
+
+        const serviceOrders = await response.json()
+
+        return serviceOrders
+
+    } catch (error) {
+
+    }
 }
+export const getWorkshopServiceOrdersByStatus = async (status: string) => {
+    const apiUrl = config.api.url
+    try {
+        const response = await fetch(`${apiUrl}/service-orders/workshop?status=${status}`)
+
+        if (!response.ok) {
+            throw new Error(`Error: ${response.statusText}`)
+        }
 
-export const getServiceOrders = async () => {
+        const serviceOrders = await response.json()
+
+        return serviceOrders
+
+    } catch (error) {
+
+    }
+}
+export const getWorkshopServiceOrdersByOwner = async (owner: string) => {
     const apiUrl = config.api.url
     try {
-        const response = await fetch(`${apiUrl}/service-orders`)
+        const response = await fetch(`${apiUrl}/service-orders/workshop?requestedBy=${owner}`)
 
         if (!response.ok) {
             throw new Error(`Error: ${response.statusText}`)
@@ -22,4 +56,40 @@ export const getServiceOrders = async () => {
     } catch (error) {
 
     }
+}
+
+export const createNewWorkshopServiceOrder = async (data: CreateNewWorkshopServiceOrder) => {
+    const session = await auth()
+    const apiUrl = config.api.url
+    try {
+        const response = await fetch(`${apiUrl}/service-orders/workshop`, {
+            method: "POST",
+            body: JSON.stringify({
+                automaker: data.automaker,
+                project: data.project,
+                isIntern: data.isIntern,
+                model: data.model,
+                chassis: data.chassis,
+                fleet: data.fleet,
+                vehicleLocation: data.vehicleLocation,
+                keyLocation: data.keyLocation,
+                serviceInformations: data.serviceInformations,
+                deliveryDate: data.deliveryDate,
+                requestedBy: session?.user.name
+            }),
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        })
+
+        if (!response.ok) {
+            throw new Error(`Error ${response.statusText}`)
+        }
+
+    } catch (error) {
+        if (error instanceof Error) {
+            console.error(error.message)
+        }
+        throw error
+    }
 }
\ No newline at end of file
diff --git a/src/app/app/(main)/layout.tsx b/src/app/app/(main)/layout.tsx
new file mode 100644
index 0000000..f981264
--- /dev/null
+++ b/src/app/app/(main)/layout.tsx
@@ -0,0 +1,16 @@
+import { DashboardPage, DashboardPageHeader, DashboardPageHeaderTitle, DashboardPageMain } from '@/components/dashboard/page'
+import { PropsWithChildren } from 'react'
+
+export default function Layout({ children }: PropsWithChildren) {
+    return (
+        <DashboardPage>
+            <DashboardPageHeader>
+                <DashboardPageHeaderTitle>ordens de serviço</DashboardPageHeaderTitle>
+            </DashboardPageHeader>
+            <DashboardPageMain>
+                {children}
+            </DashboardPageMain>
+        </DashboardPage>
+
+    )
+}
diff --git a/src/app/app/(main)/page.tsx b/src/app/app/(main)/page.tsx
index bdc54e9..46e40e5 100644
--- a/src/app/app/(main)/page.tsx
+++ b/src/app/app/(main)/page.tsx
@@ -1,21 +1,61 @@
-import {
-  DashboardPage,
-  DashboardPageHeader,
-  DashboardPageHeaderTitle,
-  DashboardPageMain,
-} from "@/components/dashboard/page";
-
-export default function Page() {
+import { ClockIcon, GearIcon, PersonIcon } from "@radix-ui/react-icons";
+import { WorkshopServiceOrderDataTable } from "./_components/os-data-table";
+import { getWorkshopServiceOrders, getWorkshopServiceOrdersByOwner, getWorkshopServiceOrdersByStatus } from "./action";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { ClipboardList } from "lucide-react";
+import { auth } from "@/auth";
 
+export default async function Page() {
+  const session = await auth()
+  const [allOrders, pendingOrders, finishedOrders, ordersByOwner] = await Promise.all([
+    getWorkshopServiceOrders(), 
+    getWorkshopServiceOrdersByStatus("pendente"), 
+    getWorkshopServiceOrdersByStatus("iniciado"), 
+    getWorkshopServiceOrdersByOwner(session?.user.name as string)
+  ])
 
   return (
-    <DashboardPage>
-      <DashboardPageHeader>
-        <DashboardPageHeaderTitle>Ordens de Serviço</DashboardPageHeaderTitle>
-      </DashboardPageHeader>
-      <DashboardPageMain>
-        <>hello</>
-      </DashboardPageMain>
-    </DashboardPage>
+    <>
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 mb-6">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Todas as ordens</CardTitle>
+            <ClipboardList className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{allOrders?.length}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Minhas ordens</CardTitle>
+            <PersonIcon className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{ordersByOwner?.length}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Ordens pendentes</CardTitle>
+            <ClockIcon className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{pendingOrders?.length}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Ordens iniciadas</CardTitle>
+            <GearIcon className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{finishedOrders?.length}</div>
+          </CardContent>
+        </Card>
+      </div>
+      <WorkshopServiceOrderDataTable data={allOrders} />
+    </>
+
   );
 }
\ No newline at end of file
diff --git a/src/app/app/(main)/schema.ts b/src/app/app/(main)/schema.ts
new file mode 100644
index 0000000..0f97d16
--- /dev/null
+++ b/src/app/app/(main)/schema.ts
@@ -0,0 +1,35 @@
+import { z } from "zod"
+
+export const workshopServiceOrderSchema = z.object({
+    id: z.string().optional(),
+    automaker: z.string(),
+    project: z.string(),
+    model: z.string(),
+    chassis: z.string(),
+    fleet: z.string(),
+    vehicleLocation: z.string(),
+    keyLocation: z.string(),
+    deliveryDate: z.string().refine((date) => {
+        return !isNaN(Date.parse(date));
+    }),
+    status: z.string(),
+    requestedBy: z.string(),
+})
+
+export type WorkshopServiceOrder = z.infer<typeof workshopServiceOrderSchema>
+
+export const createNewWorkshopServiceOrderSchema = z.object({
+    automaker: z.string().min(1, 'É preciso inserir a montadora'),
+    project: z.string().min(1, 'É preciso selecionar o projeto'),
+    isIntern: z.boolean(),
+    model: z.string().min(1, 'É preciso selecionar o modelo'),
+    chassis: z.string().min(1, 'É preciso selecionar o chassi'),
+    fleet: z.string().min(1, 'É preciso selecionar a frota'),
+    vehicleLocation: z.string().min(1, 'É preciso inserir a localização veículo'),
+    keyLocation: z.string().min(1, 'É preciso inserir a localização da chave'),
+    serviceInformations: z.string().nullable(),
+    deliveryDate: z.string({ required_error: "É preciso inserir a data de entrega" }).date(),
+    requestedBy: z.string()
+});
+
+export type CreateNewWorkshopServiceOrder = z.infer<typeof createNewWorkshopServiceOrderSchema>
\ No newline at end of file
diff --git a/src/app/app/_components/user-dropdown.tsx b/src/app/app/_components/user-dropdown.tsx
index e796d27..b1c3d45 100644
--- a/src/app/app/_components/user-dropdown.tsx
+++ b/src/app/app/_components/user-dropdown.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -10,7 +12,6 @@ import {
 } from "@/components/ui/dropdown-menu";
 import {
   ExitIcon,
-  MixerVerticalIcon,
   PersonIcon
 } from "@radix-ui/react-icons";
 import { Session } from "next-auth";
@@ -22,6 +23,7 @@ type UserdropdwonProps = {
 
 export function UserDropdown({ user }: UserdropdwonProps) {
   if (!user) return;
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
diff --git a/src/app/app/projects/(main)/_components/new-project-dialog.tsx b/src/app/app/projects/(main)/_components/new-project-dialog.tsx
index 0bf9f39..b2f5b0a 100644
--- a/src/app/app/projects/(main)/_components/new-project-dialog.tsx
+++ b/src/app/app/projects/(main)/_components/new-project-dialog.tsx
@@ -77,7 +77,7 @@ export function NewProjectDialog({ children }: PropsWithChildren) {
             <DialogTrigger asChild>
                 <div ref={ref}>{children}</div>
             </DialogTrigger>
-            <DialogContent>
+            <DialogContent className="dark:bg-[#1a1a1a]">
                 <DialogHeader>
                     <DialogTitle>Criar um novo projeto</DialogTitle>
                     <DialogDescription>Crie um novo projeto.</DialogDescription>
@@ -101,7 +101,7 @@ export function NewProjectDialog({ children }: PropsWithChildren) {
                                         <FormItem>
                                             <FormLabel>Nome</FormLabel>
                                             <FormControl>
-                                                <Input {...field} />
+                                                <Input {...field} placeholder="Projeto novo" />
                                             </FormControl>
                                             <FormMessage />
                                         </FormItem>
@@ -114,7 +114,7 @@ export function NewProjectDialog({ children }: PropsWithChildren) {
                                         <FormItem>
                                             <FormLabel>Número</FormLabel>
                                             <FormControl>
-                                                <Input {...field} />
+                                                <Input {...field} placeholder="BM-000000001" />
                                             </FormControl>
                                             <FormMessage />
                                         </FormItem>
@@ -127,7 +127,7 @@ export function NewProjectDialog({ children }: PropsWithChildren) {
                                         <FormItem>
                                             <FormLabel>Descritivo (Opcional)</FormLabel>
                                             <FormControl>
-                                                <Textarea {...field} />
+                                                <Textarea {...field} placeholder="Breve descrição sobre o projeto..." />
                                             </FormControl>
                                             <FormMessage />
                                         </FormItem>
@@ -140,7 +140,15 @@ export function NewProjectDialog({ children }: PropsWithChildren) {
                                         <FormItem>
                                             <FormLabel>Cliente</FormLabel>
                                             <FormControl>
-                                                <Input {...field} />
+                                                <Select required onValueChange={field.onChange} value={field.value}>
+                                                    <SelectTrigger>
+                                                        <SelectValue placeholder="Selecione o cliente..." />
+                                                    </SelectTrigger>
+                                                    <SelectContent>
+                                                        <SelectItem value="Bosch BR">Bosch BR</SelectItem>
+                                                        <SelectItem value="Toyota">Toyota</SelectItem>
+                                                    </SelectContent>
+                                                </Select>
                                             </FormControl>
                                             <FormMessage />
                                         </FormItem>
@@ -153,7 +161,15 @@ export function NewProjectDialog({ children }: PropsWithChildren) {
                                         <FormItem>
                                             <FormLabel>Motor</FormLabel>
                                             <FormControl>
-                                                <Input {...field} />
+                                                <Select required onValueChange={field.onChange} value={field.value}>
+                                                    <SelectTrigger>
+                                                        <SelectValue placeholder="Selecione o motor..." />
+                                                    </SelectTrigger>
+                                                    <SelectContent>
+                                                        <SelectItem value="Motor 1">Motor 2</SelectItem>
+                                                        <SelectItem value="Motor 2">Motor 1</SelectItem>
+                                                    </SelectContent>
+                                                </Select>
                                             </FormControl>
                                             <FormMessage />
                                         </FormItem>
@@ -207,7 +223,7 @@ export function NewProjectDialog({ children }: PropsWithChildren) {
                                             <FormControl>
                                                 <Select required onValueChange={field.onChange} value={field.value}>
                                                     <SelectTrigger>
-                                                        <SelectValue placeholder="Selecione o tipo de injeção" />
+                                                        <SelectValue placeholder="Selecione o tipo de aspiração" />
                                                     </SelectTrigger>
                                                     <SelectContent>
                                                         <SelectItem value="direta">Simples</SelectItem>
@@ -224,11 +240,11 @@ export function NewProjectDialog({ children }: PropsWithChildren) {
                                     name="fuel"
                                     render={({ field }) => (
                                         <FormItem>
-                                            <FormLabel>Fuel</FormLabel>
+                                            <FormLabel>Combustível</FormLabel>
                                             <FormControl>
                                                 <Select required onValueChange={field.onChange} value={field.value}>
                                                     <SelectTrigger>
-                                                        <SelectValue placeholder="Selecione o tipo de combustível" />
+                                                        <SelectValue placeholder="Selecione o tipo de combustível..." />
                                                     </SelectTrigger>
                                                     <SelectContent>
                                                         <SelectItem value="gasolina">Gasolina</SelectItem>
@@ -251,7 +267,7 @@ export function NewProjectDialog({ children }: PropsWithChildren) {
                                             <FormControl>
                                                 <Select required onValueChange={field.onChange} value={field.value}>
                                                     <SelectTrigger>
-                                                        <SelectValue placeholder="Selecione o tipo de câmbio" />
+                                                        <SelectValue placeholder="Selecione o tipo de câmbio..." />
                                                     </SelectTrigger>
                                                     <SelectContent>
                                                         <SelectItem value="teste">Teste</SelectItem>
@@ -276,7 +292,7 @@ export function NewProjectDialog({ children }: PropsWithChildren) {
                                             <FormControl>
                                                 <Select required onValueChange={field.onChange} value={field.value}>
                                                     <SelectTrigger>
-                                                        <SelectValue placeholder="Selecione o tipo de injeção" />
+                                                        <SelectValue placeholder="Selecione o tipo de injeção..." />
                                                     </SelectTrigger>
                                                     <SelectContent>
                                                         <SelectItem value="direta">Simples</SelectItem>
@@ -297,7 +313,7 @@ export function NewProjectDialog({ children }: PropsWithChildren) {
                                             <FormControl>
                                                 <Select required onValueChange={field.onChange} value={field.value}>
                                                     <SelectTrigger>
-                                                        <SelectValue placeholder="Selecione o mercado" />
+                                                        <SelectValue placeholder="Selecione o mercado..." />
                                                     </SelectTrigger>
                                                     <SelectContent>
                                                         <SelectItem value="direta">Simples</SelectItem>
@@ -318,7 +334,7 @@ export function NewProjectDialog({ children }: PropsWithChildren) {
                                             <FormControl>
                                                 <Select required onValueChange={field.onChange} value={field.value}>
                                                     <SelectTrigger>
-                                                        <SelectValue placeholder="Selecione a legislação" />
+                                                        <SelectValue placeholder="Selecione a legislação..." />
                                                     </SelectTrigger>
                                                     <SelectContent>
                                                         <SelectItem value="direta">Simples</SelectItem>
@@ -339,7 +355,7 @@ export function NewProjectDialog({ children }: PropsWithChildren) {
                                             <FormControl>
                                                 <Select required onValueChange={field.onChange} value={field.value}>
                                                     <SelectTrigger>
-                                                        <SelectValue placeholder="Selecione o tipo de injeção" />
+                                                        <SelectValue placeholder="Selecione o ciclo..." />
                                                     </SelectTrigger>
                                                     <SelectContent>
                                                         <SelectItem value="direta">Simples</SelectItem>
@@ -360,7 +376,7 @@ export function NewProjectDialog({ children }: PropsWithChildren) {
                                             <FormControl>
                                                 <Select required onValueChange={field.onChange} value={field.value}>
                                                     <SelectTrigger>
-                                                        <SelectValue placeholder="Selecione o tipo de injeção" />
+                                                        <SelectValue placeholder="Selecione a diagnose..." />
                                                     </SelectTrigger>
                                                     <SelectContent>
                                                         <SelectItem value="direta">Simples</SelectItem>
diff --git a/src/app/app/projects/(main)/actions.ts b/src/app/app/projects/(main)/actions.ts
index e2e5a60..86d5757 100644
--- a/src/app/app/projects/(main)/actions.ts
+++ b/src/app/app/projects/(main)/actions.ts
@@ -27,7 +27,6 @@ export const createNewProject = async (data: FormDataCreateProject) => {
 }
 
 export const getProjects = async () => {
-
     try {
         const response = await fetch(`${config.api.url}/projects`, {
             cache: "no-cache"
diff --git a/src/app/app/projects/(main)/schema.ts b/src/app/app/projects/(main)/schema.ts
index aaf5bd4..c156fef 100644
--- a/src/app/app/projects/(main)/schema.ts
+++ b/src/app/app/projects/(main)/schema.ts
@@ -5,18 +5,18 @@ export const createProjectSchema = z.object({
     name: z.string().min(1, { message: "É preciso inserir o nome do projeto" }),
     number: z.string().min(1, { message: "É preciso inserir o número do projeto" }),
     description: z.string().optional(),
-    client: z.string().min(1),
-    motor: z.string().min(1),
-    motorFamily: z.string().min(1),
-    injection: z.string().min(1),
-    aspiration: z.string().min(1),
-    fuel: z.string().min(1),
-    gearBox: z.string().min(1),
-    powertrain: z.string().min(1),
-    market: z.string().min(1),
-    legislation: z.string().min(1),
-    cicle: z.string().min(1),
-    diagnose: z.string().min(1),
+    client: z.string().min(1, { message: "É preciso selecionar um cliente" }),
+    motor: z.string().min(1, { message: "É preciso selecionar o motor" }),
+    motorFamily: z.string().min(1, { message: "É preciso selecionar a família motor" }),
+    injection: z.string().min(1, { message: "É preciso selecionar o tipo de injeção" }),
+    aspiration: z.string().min(1, { message: "É preciso selecionar o tipo de aspiração" }),
+    fuel: z.string().min(1, { message: "É preciso selecionar o tipo da injeção" }),
+    gearBox: z.string().min(1, { message: "É preciso selecionar o câmbio" }),
+    powertrain: z.string().min(1, { message: "É preciso selecionar o powertrain" }),
+    market: z.string().min(1, { message: "É preciso selecionar o mercado" }),
+    legislation: z.string().min(1, { message: "É preciso selecionar a legislação" }),
+    cicle: z.string().min(1, { message: "É preciso selecionar o ciclo" }),
+    diagnose: z.string().min(1, { message: "É preciso selecionar a diagnose" }),
 })
 
 export type FormDataCreateProject = z.infer<typeof createProjectSchema>
\ No newline at end of file
diff --git a/src/app/app/settings/theme/_components/ThemeForm.tsx b/src/app/app/settings/theme/_components/ThemeForm.tsx
index 384b39f..3e65ffa 100644
--- a/src/app/app/settings/theme/_components/ThemeForm.tsx
+++ b/src/app/app/settings/theme/_components/ThemeForm.tsx
@@ -103,8 +103,8 @@ export function ThemeForm() {
 					</CardContent>
 				</Card>
 				<Button disabled={form.formState.isSubmitting} type="submit">
-					{form.formState.isSubmitting && "Salvando..."}
-					{!form.formState.isSubmitting && "Salvar"}
+					{form.formState.isSubmitting && "Atualizando..."}
+					{!form.formState.isSubmitting && "Atualizar"}
 				</Button>
 			</form>
 		</Form >)
diff --git a/src/app/app/vehicles/(main)/_components/edit-vehicle-dialog.tsx b/src/app/app/vehicles/(main)/_components/edit-vehicle-dialog.tsx
index d337cbe..b946581 100644
--- a/src/app/app/vehicles/(main)/_components/edit-vehicle-dialog.tsx
+++ b/src/app/app/vehicles/(main)/_components/edit-vehicle-dialog.tsx
@@ -1,14 +1,12 @@
 "use client"
 
-import { DialogContent, DialogTrigger } from "@/components/ui/dialog";
-import { Dialog } from "@radix-ui/react-dialog";
+import { DialogContent, DialogTrigger, Dialog } from "@/components/ui/dialog";
 import { useRef } from "react";
 
 type EditVehicleDialogProps = {
     children?: React.ReactNode,
     vehicle: {
         automaker: string
-
     }
 }
 
diff --git a/src/app/auth/signin/_components/sign-in-form.tsx b/src/app/auth/signin/_components/sign-in-form.tsx
index 6091f2a..0674894 100644
--- a/src/app/auth/signin/_components/sign-in-form.tsx
+++ b/src/app/auth/signin/_components/sign-in-form.tsx
@@ -19,8 +19,9 @@ export function SignInForm() {
                             Login para funcionários
                         </h2>
                     </div>
-                    <Button className="w-full" type='submit' variant="default">
-                        Bosch Login
+                    <Button className="w-full" type='submit' variant="default" disabled={form.formState.isSubmitting}>
+                        {form.formState.isSubmitting && "Entrando..."}
+                        {!form.formState.isSubmitting && "Bosch Login"}
                     </Button>
                 </form>
             </div>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 4926611..daccfeb 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -26,7 +26,9 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
+
     <html lang="en" >
+      <link rel="icon" href="/favicon.ico" sizes="any" />
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
         suppressHydrationWarning
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..7d2b3c3
--- /dev/null
+++ b/src/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <CheckIcon className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
new file mode 100644
index 0000000..7d07848
--- /dev/null
+++ b/src/components/ui/command.tsx
@@ -0,0 +1,155 @@
+"use client"
+
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons"
+import { Command as CommandPrimitive } from "cmdk"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index 242b07a..ada29b3 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -69,7 +69,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "dark:bg-[#1a1a1a] z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
         "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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
new file mode 100644
index 0000000..29c7bd2
--- /dev/null
+++ b/src/components/ui/popover.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
new file mode 100644
index 0000000..12d81c4
--- /dev/null
+++ b/src/components/ui/separator.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }