diff --git a/app/(app)/dashboard/header/Header.tsx b/app/(app)/dashboard/header/Header.tsx
index 5aa6359..26545b6 100644
--- a/app/(app)/dashboard/header/Header.tsx
+++ b/app/(app)/dashboard/header/Header.tsx
@@ -5,11 +5,11 @@
 
 "use client";
 
-import { Sparkles } from "lucide-react";
+import { Plus, Sparkles } from "lucide-react";
 import TrashLink from "./TrashLink";
-import NewTaskButton from "./NewTaskButton";
 import { useState } from "react";
 import ActionDropZones from "./ActionDropZones";
+import { ActionButton } from "@/app/components/ui/buttons/ActionButton";
 
 /**
  * Renders the dashboard header section featuring title text, drop zones,
@@ -46,7 +46,9 @@ export default function Header({
         />
         {!isDraggingActive && (
           <div className="flex items-center gap-3 animate-in fade-in duration-200">
-            <NewTaskButton />
+            <ActionButton href="/tasks?task=new" variant="primary" icon={Plus}>
+              New Task
+            </ActionButton>
             <TrashLink />
           </div>
         )}
diff --git a/app/(app)/dashboard/header/NewTaskButton.tsx b/app/(app)/dashboard/header/NewTaskButton.tsx
deleted file mode 100644
index 235e22b..0000000
--- a/app/(app)/dashboard/header/NewTaskButton.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * @file app/(app)/dashboard/header/NewTaskButton.tsx
- * @description Client component rendering an interactive trigger button for creating new tasks.
- */
-
-"use client";
-
-import { Plus } from "lucide-react";
-import { useRouter } from "next/navigation";
-
-/**
- * Renders a stylized button component with an icon and active state animations to initiate task creation.
- *
- * @returns {JSX.Element} The rendered new task button component.
- */
-export default function NewTaskButton() {
-  const router = useRouter();
-
-  return (
-    <button
-      onClick={() => router.push("/tasks?task=new")}
-      className="inline-flex items-center justify-center gap-2 px-3.5 py-2.5 rounded-xl font-medium text-sm text-black hover:text-foreground bg-primary hover:bg-primary-hover border border-black hover:border-foreground active:scale-95 transition-colors duration-200 cursor-pointer"
-    >
-      <Plus size={18} />
-      <span>New Task</span>
-    </button>
-  );
-}
diff --git a/app/(app)/tasks/TaskForm.tsx b/app/(app)/tasks/TaskForm.tsx
index 4cfc62d..ea76753 100644
--- a/app/(app)/tasks/TaskForm.tsx
+++ b/app/(app)/tasks/TaskForm.tsx
@@ -5,8 +5,7 @@
 
 "use client";
 
-import { AlertCircle } from "lucide-react";
-import Link from "next/link";
+import { AlertCircle, X } from "lucide-react";
 import { DbTask, TaskStatus } from "@/lib/types/task";
 import { useTaskForm } from "./useTaskForm";
 import TaskHeader from "./task/TaskHeader";
@@ -14,6 +13,7 @@ import TaskBasicInfo from "./task/TaskBasicInfo";
 import TaskOptions from "./task/TaskOptions";
 import TaskAssignees from "./task/TaskAssignees";
 import TaskDateTime from "./task/TaskDateTime";
+import { ActionButton } from "@/app/components/ui/buttons/ActionButton";
 
 /**
  * Properties for the TaskForm component.
@@ -95,12 +95,9 @@ export default function TaskForm({
       </div>
 
       <div className="flex items-center justify-end gap-3">
-        <Link
-          href="/dashboard"
-          className="px-4 py-2.5 rounded-xl font-medium text-sm border border-border hover:bg-background-muted transition-colors"
-        >
+        <ActionButton href="/dashboard" variant="secondary" icon={X}>
           Cancel
-        </Link>
+        </ActionButton>
         <button
           type="submit"
           className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl font-medium text-sm text-black bg-primary hover:bg-primary-hover active:scale-95 transition-all duration-200 cursor-pointer disabled:opacity-50"