diff --git a/src/app/components/create-task-sheet.tsx b/src/app/components/create-task-sheet.tsx
deleted file mode 100644
index c8c21521..00000000
--- a/src/app/components/create-task-sheet.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Loader, Plus } from "lucide-react";
-import * as React from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-
-import { Button } from "@/registry/bases/radix/ui/button";
-import {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "@/registry/bases/radix/ui/sheet";
-
-import type { CreateTaskSchema } from "../lib/validations";
-
-import { createTask } from "../lib/actions";
-import { createTaskSchema } from "../lib/validations";
-import { TaskForm } from "./task-form";
-
-export function CreateTaskSheet() {
-  const [open, setOpen] = React.useState(false);
-  const [isPending, startTransition] = React.useTransition();
-
-  const form = useForm<CreateTaskSchema>({
-    resolver: zodResolver(createTaskSchema),
-  });
-
-  function onSubmit(input: CreateTaskSchema) {
-    startTransition(async () => {
-      const { error } = await createTask(input);
-
-      if (error) {
-        toast.error(error);
-        return;
-      }
-
-      form.reset();
-      setOpen(false);
-      toast.success("Task created");
-    });
-  }
-
-  return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <SheetTrigger asChild>
-        <Button variant="outline">
-          <Plus />
-          New task
-        </Button>
-      </SheetTrigger>
-      <SheetContent className="flex flex-col gap-6 sm:max-w-md">
-        <SheetHeader className="text-left">
-          <SheetTitle>Create task</SheetTitle>
-          <SheetDescription>
-            Fill in the details below to create a new task
-          </SheetDescription>
-        </SheetHeader>
-        <TaskForm form={form} onSubmit={onSubmit}>
-          <SheetFooter className="gap-2 pt-2 sm:space-x-0">
-            <SheetClose asChild>
-              <Button type="button" variant="outline">
-                Cancel
-              </Button>
-            </SheetClose>
-            <Button disabled={isPending}>
-              {isPending && <Loader className="animate-spin" />}
-              Create
-            </Button>
-          </SheetFooter>
-        </TaskForm>
-      </SheetContent>
-    </Sheet>
-  );
-}
diff --git a/src/app/components/task-form.tsx b/src/app/components/task-form.tsx
deleted file mode 100644
index b0d34d42..00000000
--- a/src/app/components/task-form.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-"use client";
-
-import type * as React from "react";
-import type { FieldPath, FieldValues, UseFormReturn } from "react-hook-form";
-
-import { tasks } from "@/db/schema";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/registry/bases/radix/ui/form";
-import { Input } from "@/registry/bases/radix/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/bases/radix/ui/select";
-import { Textarea } from "@/registry/bases/radix/ui/textarea";
-
-interface TaskFormProps<T extends FieldValues> extends Omit<
-  React.ComponentPropsWithRef<"form">,
-  "onSubmit"
-> {
-  children: React.ReactNode;
-  form: UseFormReturn<T>;
-  onSubmit: (data: T) => void;
-}
-
-export function TaskForm<T extends FieldValues>({
-  form,
-  onSubmit,
-  children,
-}: TaskFormProps<T>) {
-  return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        className="flex flex-col gap-4 px-4"
-      >
-        <FormField
-          control={form.control}
-          name={"title" as FieldPath<T>}
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Title</FormLabel>
-              <FormControl>
-                <Textarea
-                  placeholder="Do a kickflip"
-                  className="resize-none"
-                  {...field}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name={"label" as FieldPath<T>}
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Label</FormLabel>
-              <Select onValueChange={field.onChange} defaultValue={field.value}>
-                <FormControl>
-                  <SelectTrigger className="capitalize">
-                    <SelectValue placeholder="Select a label" />
-                  </SelectTrigger>
-                </FormControl>
-                <SelectContent>
-                  <SelectGroup>
-                    {tasks.label.enumValues.map((item) => (
-                      <SelectItem
-                        key={item}
-                        value={item}
-                        className="capitalize"
-                      >
-                        {item}
-                      </SelectItem>
-                    ))}
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name={"status" as FieldPath<T>}
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Status</FormLabel>
-              <Select onValueChange={field.onChange} defaultValue={field.value}>
-                <FormControl>
-                  <SelectTrigger className="capitalize">
-                    <SelectValue placeholder="Select a status" />
-                  </SelectTrigger>
-                </FormControl>
-                <SelectContent>
-                  <SelectGroup>
-                    {tasks.status.enumValues.map((item) => (
-                      <SelectItem
-                        key={item}
-                        value={item}
-                        className="capitalize"
-                      >
-                        {item}
-                      </SelectItem>
-                    ))}
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name={"priority" as FieldPath<T>}
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Priority</FormLabel>
-              <Select onValueChange={field.onChange} defaultValue={field.value}>
-                <FormControl>
-                  <SelectTrigger className="capitalize">
-                    <SelectValue placeholder="Select a priority" />
-                  </SelectTrigger>
-                </FormControl>
-                <SelectContent>
-                  <SelectGroup>
-                    {tasks.priority.enumValues.map((item) => (
-                      <SelectItem
-                        key={item}
-                        value={item}
-                        className="capitalize"
-                      >
-                        {item}
-                      </SelectItem>
-                    ))}
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name={"estimatedHours" as FieldPath<T>}
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Estimated Hours</FormLabel>
-              <FormControl>
-                <Input
-                  type="number"
-                  placeholder="Enter estimated hours"
-                  step="0.5"
-                  min="0"
-                  {...field}
-                  onChange={(event) =>
-                    field.onChange(event.target.valueAsNumber)
-                  }
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        {children}
-      </form>
-    </Form>
-  );
-}
diff --git a/src/app/components/tasks-table-toolbar-actions.tsx b/src/app/components/tasks-table-toolbar-actions.tsx
deleted file mode 100644
index 7c473b2f..00000000
--- a/src/app/components/tasks-table-toolbar-actions.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-"use client";
-
-import { Subscribe, type Table } from "@tanstack/react-table";
-import { Download } from "lucide-react";
-
-import type { Task } from "@/db/schema";
-import type { DataTableFeatures } from "@/lib/data-table-features";
-
-import { exportTableToCSV } from "@/lib/export";
-import { Button } from "@/registry/bases/radix/ui/button";
-
-import { CreateTaskSheet } from "./create-task-sheet";
-import { DeleteTasksDialog } from "./delete-tasks-dialog";
-
-interface TasksTableToolbarActionsProps {
-  table: Table<DataTableFeatures, Task>;
-}
-
-export function TasksTableToolbarActions({
-  table,
-}: TasksTableToolbarActionsProps) {
-  return (
-    <div className="flex items-center gap-2">
-      <Subscribe source={table.atoms.rowSelection}>
-        {() => {
-          const selectedTasks = table
-            .getSelectedRowModel()
-            .rows.map((row) => row.original);
-
-          return selectedTasks.length > 0 ? (
-            <DeleteTasksDialog
-              tasks={selectedTasks}
-              onSuccess={() => table.resetRowSelection(true)}
-            />
-          ) : null;
-        }}
-      </Subscribe>
-      <CreateTaskSheet />
-      <Button
-        variant="outline"
-        onClick={() =>
-          exportTableToCSV(table, {
-            filename: "tasks",
-            excludeColumns: ["select", "actions"],
-          })
-        }
-      >
-        <Download />
-        Export
-      </Button>
-      {/**
-       * Other actions can be added here.
-       * For example, import, view, etc.
-       */}
-    </div>
-  );
-}
diff --git a/src/app/components/update-task-sheet.tsx b/src/app/components/update-task-sheet.tsx
index ce119d40..b7461b2d 100644
--- a/src/app/components/update-task-sheet.tsx
+++ b/src/app/components/update-task-sheet.tsx
@@ -6,9 +6,25 @@ import * as React from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 
-import type { Task } from "@/db/schema";
-
+import { type Task, tasks } from "@/db/schema";
 import { Button } from "@/registry/bases/radix/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/registry/bases/radix/ui/form";
+import { Input } from "@/registry/bases/radix/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/bases/radix/ui/select";
 import {
   Sheet,
   SheetClose,
@@ -18,34 +34,62 @@ import {
   SheetHeader,
   SheetTitle,
 } from "@/registry/bases/radix/ui/sheet";
+import { Textarea } from "@/registry/bases/radix/ui/textarea";
 
 import { updateTask } from "../lib/actions";
 import { type UpdateTaskSchema, updateTaskSchema } from "../lib/validations";
-import { TaskForm } from "./task-form";
 
-interface UpdateTaskSheetProps extends React.ComponentPropsWithRef<
-  typeof Sheet
-> {
+interface UpdateTaskSheetProps extends React.ComponentProps<typeof Sheet> {
   task: Task | null;
 }
 
-export function UpdateTaskSheet({ task, ...props }: UpdateTaskSheetProps) {
+export function UpdateTaskSheet({
+  task,
+  onOpenChange,
+  ...props
+}: UpdateTaskSheetProps) {
+  return (
+    <Sheet onOpenChange={onOpenChange} {...props}>
+      <SheetContent className="flex flex-col gap-6 sm:max-w-md">
+        <SheetHeader className="text-left">
+          <SheetTitle>Update task</SheetTitle>
+          <SheetDescription>
+            Update the task details and save the changes
+          </SheetDescription>
+        </SheetHeader>
+        {task ? (
+          <UpdateTaskForm
+            key={task.id}
+            task={task}
+            onSuccess={() => onOpenChange?.(false)}
+          />
+        ) : null}
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+interface UpdateTaskFormProps {
+  task: Task;
+  onSuccess: () => void;
+}
+
+function UpdateTaskForm({ task, onSuccess }: UpdateTaskFormProps) {
   const [isPending, startTransition] = React.useTransition();
 
   const form = useForm<UpdateTaskSchema>({
     resolver: zodResolver(updateTaskSchema),
     defaultValues: {
-      title: task?.title ?? "",
-      label: task?.label,
-      status: task?.status,
-      priority: task?.priority,
+      title: task.title ?? "",
+      label: task.label,
+      status: task.status,
+      priority: task.priority,
+      estimatedHours: task.estimatedHours,
     },
   });
 
   function onSubmit(input: UpdateTaskSchema) {
     startTransition(async () => {
-      if (!task) return;
-
       const { error } = await updateTask({
         id: task.id,
         ...input,
@@ -57,39 +101,158 @@ export function UpdateTaskSheet({ task, ...props }: UpdateTaskSheetProps) {
       }
 
       form.reset(input);
-      props.onOpenChange?.(false);
+      onSuccess();
       toast.success("Task updated");
     });
   }
 
   return (
-    <Sheet {...props}>
-      <SheetContent className="flex flex-col gap-6 sm:max-w-md">
-        <SheetHeader className="text-left">
-          <SheetTitle>Update task</SheetTitle>
-          <SheetDescription>
-            Update the task details and save the changes
-          </SheetDescription>
-        </SheetHeader>
-        <TaskForm<UpdateTaskSchema> form={form} onSubmit={onSubmit}>
-          <SheetFooter className="gap-2 pt-2 sm:space-x-0">
-            <SheetClose asChild>
-              <Button type="button" variant="outline">
-                Cancel
-              </Button>
-            </SheetClose>
-            <Button disabled={isPending}>
-              {isPending && (
-                <Loader
-                  className="mr-2 size-4 animate-spin"
-                  aria-hidden="true"
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex flex-1 flex-col gap-4 px-4"
+      >
+        <FormField
+          control={form.control}
+          name="title"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Title</FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder="Do a kickflip"
+                  className="resize-none"
+                  {...field}
                 />
-              )}
-              Save
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="label"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Label</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger className="w-full capitalize">
+                    <SelectValue placeholder="Select a label" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectGroup>
+                    {tasks.label.enumValues.map((item) => (
+                      <SelectItem
+                        key={item}
+                        value={item}
+                        className="capitalize"
+                      >
+                        {item}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="status"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Status</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger className="w-full capitalize">
+                    <SelectValue placeholder="Select a status" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectGroup>
+                    {tasks.status.enumValues.map((item) => (
+                      <SelectItem
+                        key={item}
+                        value={item}
+                        className="capitalize"
+                      >
+                        {item}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="priority"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Priority</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger className="w-full capitalize">
+                    <SelectValue placeholder="Select a priority" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectGroup>
+                    {tasks.priority.enumValues.map((item) => (
+                      <SelectItem
+                        key={item}
+                        value={item}
+                        className="capitalize"
+                      >
+                        {item}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="estimatedHours"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Estimated Hours</FormLabel>
+              <FormControl>
+                <Input
+                  type="number"
+                  placeholder="Enter estimated hours"
+                  step="0.5"
+                  min="0"
+                  {...field}
+                  onChange={(event) =>
+                    field.onChange(event.target.valueAsNumber)
+                  }
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <SheetFooter className="px-0">
+          <Button disabled={isPending}>
+            {isPending && <Loader className="size-4 animate-spin" />}
+            Save
+          </Button>
+          <SheetClose asChild>
+            <Button type="button" variant="outline">
+              Cancel
             </Button>
-          </SheetFooter>
-        </TaskForm>
-      </SheetContent>
-    </Sheet>
+          </SheetClose>
+        </SheetFooter>
+      </form>
+    </Form>
   );
 }
diff --git a/src/app/lib/actions.ts b/src/app/lib/actions.ts
index a6d87439..1c28c585 100644
--- a/src/app/lib/actions.ts
+++ b/src/app/lib/actions.ts
@@ -94,6 +94,7 @@ export async function updateTask(input: UpdateTaskSchema & { id: string }) {
         label: input.label,
         status: input.status,
         priority: input.priority,
+        estimatedHours: input.estimatedHours,
       })
       .where(eq(tasks.id, input.id))
       .returning({
diff --git a/src/registry/bases/base/ui/dialog.tsx b/src/registry/bases/base/ui/dialog.tsx
index 9673f2e5..da1dec8c 100644
--- a/src/registry/bases/base/ui/dialog.tsx
+++ b/src/registry/bases/base/ui/dialog.tsx
@@ -67,12 +67,12 @@ function DialogContent({
                 variant="ghost"
                 className="absolute top-2 right-2"
                 size="icon-sm"
-              />
+              >
+                <XIcon />
+                <span className="sr-only">Close</span>
+              </Button>
             }
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
+          />
         )}
       </DialogPrimitive.Popup>
     </DialogPortal>
@@ -108,9 +108,9 @@ function DialogFooter({
     >
       {children}
       {showCloseButton && (
-        <DialogPrimitive.Close render={<Button variant="outline" />}>
-          Close
-        </DialogPrimitive.Close>
+        <DialogPrimitive.Close
+          render={<Button variant="outline">Close</Button>}
+        />
       )}
     </div>
   );
@@ -121,7 +121,7 @@ function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
     <DialogPrimitive.Title
       data-slot="dialog-title"
       className={cn(
-        "font-heading text-base leading-none font-medium",
+        "cn-font-heading text-base leading-none font-medium",
         className,
       )}
       {...props}
diff --git a/src/registry/bases/radix/ui/dialog.tsx b/src/registry/bases/radix/ui/dialog.tsx
index ddf74aee..36ca2cb7 100644
--- a/src/registry/bases/radix/ui/dialog.tsx
+++ b/src/registry/bases/radix/ui/dialog.tsx
@@ -1,10 +1,9 @@
 "use client";
 
-import type * as React from "react";
-
 import { cn } from "cn";
 import { XIcon } from "lucide-react";
 import { Dialog as DialogPrimitive } from "radix-ui";
+import * as React from "react";
 
 import { Button } from "@/registry/bases/radix/ui/button";
 
@@ -130,7 +129,7 @@ function DialogTitle({
     <DialogPrimitive.Title
       data-slot="dialog-title"
       className={cn(
-        "font-heading text-base leading-none font-medium",
+        "cn-font-heading text-base leading-none font-medium",
         className,
       )}
       {...props}
diff --git a/src/registry/bases/radix/ui/sheet.tsx b/src/registry/bases/radix/ui/sheet.tsx
index 319bb7e7..40f2b20e 100644
--- a/src/registry/bases/radix/ui/sheet.tsx
+++ b/src/registry/bases/radix/ui/sheet.tsx
@@ -1,10 +1,9 @@
 "use client";
 
-import type * as React from "react";
-
 import { cn } from "cn";
 import { XIcon } from "lucide-react";
 import { Dialog as SheetPrimitive } from "radix-ui";
+import * as React from "react";
 
 import { Button } from "@/registry/bases/radix/ui/button";
 
@@ -114,7 +113,7 @@ function SheetTitle({
     <SheetPrimitive.Title
       data-slot="sheet-title"
       className={cn(
-        "font-heading text-base font-medium text-foreground",
+        "cn-font-heading text-base font-medium text-foreground",
         className,
       )}
       {...props}
@@ -137,11 +136,11 @@ function SheetDescription({
 
 export {
   Sheet,
+  SheetTrigger,
   SheetClose,
   SheetContent,
-  SheetDescription,
-  SheetFooter,
   SheetHeader,
+  SheetFooter,
   SheetTitle,
-  SheetTrigger,
+  SheetDescription,
 };