diff --git a/apps/app/components/icons/plus-icon.tsx b/apps/app/components/icons/plus-icon.tsx
index d91833d0b..0b958a21d 100644
--- a/apps/app/components/icons/plus-icon.tsx
+++ b/apps/app/components/icons/plus-icon.tsx
@@ -13,7 +13,7 @@ export const PlusIcon: React.FC<Props> = ({ width = "24", height = "24", classNa
     >
       <path
         d="M12 19C11.7833 19 11.6042 18.9292 11.4625 18.7875C11.3208 18.6458 11.25 18.4667 11.25 18.25V12.75H5.75C5.53333 12.75 5.35417 12.6792 5.2125 12.5375C5.07083 12.3958 5 12.2167 5 12C5 11.7833 5.07083 11.6042 5.2125 11.4625C5.35417 11.3208 5.53333 11.25 5.75 11.25H11.25V5.75C11.25 5.53333 11.3208 5.35417 11.4625 5.2125C11.6042 5.07083 11.7833 5 12 5C12.2167 5 12.3958 5.07083 12.5375 5.2125C12.6792 5.35417 12.75 5.53333 12.75 5.75V11.25H18.25C18.4667 11.25 18.6458 11.3208 18.7875 11.4625C18.9292 11.6042 19 11.7833 19 12C19 12.2167 18.9292 12.3958 18.7875 12.5375C18.6458 12.6792 18.4667 12.75 18.25 12.75H12.75V18.25C12.75 18.4667 12.6792 18.6458 12.5375 18.7875C12.3958 18.9292 12.2167 19 12 19Z"
-        fill="#212529"
+        fill="#FFFFFF"
       />
     </svg>
   );
diff --git a/apps/app/components/ui/header-button.tsx b/apps/app/components/ui/header-button.tsx
deleted file mode 100644
index a3b117983..000000000
--- a/apps/app/components/ui/header-button.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from "react";
-
-type HeaderButtonProps = {
-  Icon: any;
-  label: string;
-  disabled?: boolean;
-  onClick: () => void;
-  className?: string;
-  position?: "normal" | "reverse";
-};
-
-export const HeaderButton = ({
-  Icon,
-  label,
-  disabled = false,
-  onClick,
-  className = "",
-  position = "normal",
-}: HeaderButtonProps) => (
-  <>
-    <button
-      type="button"
-      className={`whitespace-nowraps flex w-min items-center gap-x-1 whitespace-nowrap rounded-md border p-2 text-xs font-medium text-gray-600 outline-none hover:bg-gray-100 hover:text-gray-900 ${
-        position === "reverse" && "flex-row-reverse"
-      } ${className}`}
-      disabled={disabled}
-      onClick={onClick}
-    >
-      <Icon className="h-4 w-4" />
-      {label}
-    </button>
-  </>
-);
diff --git a/apps/app/components/ui/index.ts b/apps/app/components/ui/index.ts
index 6af8e45d9..b52c66a00 100644
--- a/apps/app/components/ui/index.ts
+++ b/apps/app/components/ui/index.ts
@@ -8,7 +8,6 @@ export * from "./custom-search-select";
 export * from "./custom-select";
 export * from "./datepicker";
 export * from "./empty-space";
-export * from "./header-button";
 export * from "./loader";
 export * from "./multi-input";
 export * from "./multi-level-select";
diff --git a/apps/app/pages/[workspaceSlug]/me/my-issues.tsx b/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
index ccc5ea7df..0c961f778 100644
--- a/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
@@ -10,7 +10,7 @@ import AppLayout from "layouts/app-layout";
 // hooks
 import useIssues from "hooks/use-issues";
 // ui
-import { Spinner, EmptySpace, EmptySpaceItem, HeaderButton } from "components/ui";
+import { Spinner, EmptySpace, EmptySpaceItem, PrimaryButton } from "components/ui";
 import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
 // hooks
 import useIssuesProperties from "hooks/use-issue-properties";
@@ -95,17 +95,16 @@ const MyIssuesPage: NextPage = () => {
                 )}
               </Popover>
             )}
-            <HeaderButton
-              Icon={PlusIcon}
-              label="Add Issue"
+            <PrimaryButton
+              className="flex items-center gap-2"
               onClick={() => {
-                const e = new KeyboardEvent("keydown", {
-                  key: "c",
-                });
-
+                const e = new KeyboardEvent("keydown", { key: "c" });
                 document.dispatchEvent(e);
               }}
-            />
+            >
+              <PlusIcon className="w-4 h-4" />
+              Add Issue
+            </PrimaryButton>
           </div>
         }
       >
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index 3f34bad1d..0f6dbbf21 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -19,7 +19,7 @@ import AppLayout from "layouts/app-layout";
 // components
 import { CompletedCyclesListProps, CreateUpdateCycleModal, CyclesList } from "components/cycles";
 // ui
-import { HeaderButton, Loader } from "components/ui";
+import { Loader, PrimaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 // types
@@ -94,16 +94,16 @@ const ProjectCycles: NextPage<UserAuth> = (props) => {
         </Breadcrumbs>
       }
       right={
-        <HeaderButton
-          Icon={PlusIcon}
-          label="Add Cycle"
+        <PrimaryButton
+          className="flex items-center gap-2"
           onClick={() => {
-            const e = new KeyboardEvent("keydown", {
-              key: "q",
-            });
+            const e = new KeyboardEvent("keydown", { key: "q" });
             document.dispatchEvent(e);
           }}
-        />
+        >
+          <PlusIcon className="w-4 h-4" />
+          Add Cycle
+        </PrimaryButton>
       }
     >
       <CreateUpdateCycleModal
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
index 3bb7aa810..951ffce4c 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
@@ -13,7 +13,7 @@ import { IssueViewContextProvider } from "contexts/issue-view.context";
 // components
 import { IssuesFilterView, IssuesView } from "components/core";
 // ui
-import { HeaderButton } from "components/ui";
+import { PrimaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -47,16 +47,16 @@ const ProjectIssues: NextPage<UserAuth> = (props) => {
         right={
           <div className="flex items-center gap-2">
             <IssuesFilterView />
-            <HeaderButton
-              Icon={PlusIcon}
-              label="Add Issue"
+            <PrimaryButton
+              className="flex items-center gap-2"
               onClick={() => {
-                const e = new KeyboardEvent("keydown", {
-                  key: "c",
-                });
+                const e = new KeyboardEvent("keydown", { key: "c" });
                 document.dispatchEvent(e);
               }}
-            />
+            >
+              <PlusIcon className="w-4 h-4" />
+              Add Issue
+            </PrimaryButton>
           </div>
         }
       >
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
index dd4dfb23f..1806c68dd 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -16,7 +16,7 @@ import modulesService from "services/modules.service";
 // components
 import { CreateUpdateModuleModal, SingleModuleCard } from "components/modules";
 // ui
-import { EmptyState, HeaderButton, Loader } from "components/ui";
+import { EmptyState, Loader, PrimaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 // types
@@ -72,16 +72,16 @@ const ProjectModules: NextPage<UserAuth> = (props) => {
         </Breadcrumbs>
       }
       right={
-        <HeaderButton
-          Icon={PlusIcon}
-          label="Add Module"
+        <PrimaryButton
+          className="flex items-center gap-2"
           onClick={() => {
-            const e = new KeyboardEvent("keydown", {
-              key: "m",
-            });
+            const e = new KeyboardEvent("keydown", { key: "m" });
             document.dispatchEvent(e);
           }}
-        />
+        >
+          <PlusIcon className="w-4 h-4" />
+          Add Module
+        </PrimaryButton>
       }
     >
       <CreateUpdateModuleModal
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
index f7e795dbf..b8ff04572 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -24,7 +24,7 @@ import AppLayout from "layouts/app-layout";
 // components
 import { RecentPagesList, CreateUpdatePageModal, TPagesListProps } from "components/pages";
 // ui
-import { HeaderButton, Input, PrimaryButton } from "components/ui";
+import { Input, PrimaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { ListBulletIcon, RectangleGroupIcon } from "@heroicons/react/20/solid";
@@ -164,11 +164,13 @@ const ProjectPages: NextPage<UserAuth> = (props) => {
           </Breadcrumbs>
         }
         right={
-          <HeaderButton
-            Icon={PlusIcon}
-            label="Create Page"
+          <PrimaryButton
+            className="flex items-center gap-2"
             onClick={() => setCreateUpdatePageModal(true)}
-          />
+          >
+            <PlusIcon className="w-4 h-4" />
+            Create Page
+          </PrimaryButton>
         }
       >
         <div className="space-y-4">
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
index 89a1ad373..f9302e0fd 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
@@ -13,13 +13,13 @@ import AppLayout from "layouts/app-layout";
 // contexts
 import { IssueViewContextProvider } from "contexts/issue-view.context";
 // ui
+import { CustomMenu, PrimaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // types
 import { UserAuth } from "types";
 // fetch-keys
 import { PROJECT_DETAILS, VIEWS_LIST, VIEW_DETAILS } from "constants/fetch-keys";
 import { IssuesFilterView, IssuesView } from "components/core";
-import { CustomMenu, HeaderButton } from "components/ui";
 import { PlusIcon } from "@heroicons/react/24/outline";
 import { truncateText } from "helpers/string.helper";
 import { StackedLayersIcon } from "components/icons";
@@ -91,16 +91,16 @@ const SingleView: React.FC<UserAuth> = (props) => {
         right={
           <div className="flex items-center gap-2">
             <IssuesFilterView />
-            <HeaderButton
-              Icon={PlusIcon}
-              label="Add Issue"
+            <PrimaryButton
+              className="flex items-center gap-2"
               onClick={() => {
-                const e = new KeyboardEvent("keydown", {
-                  key: "c",
-                });
+                const e = new KeyboardEvent("keydown", { key: "c" });
                 document.dispatchEvent(e);
               }}
-            />
+            >
+              <PlusIcon className="w-4 h-4" />
+              Add Issue
+            </PrimaryButton>
           </div>
         }
       >
diff --git a/apps/app/pages/[workspaceSlug]/projects/index.tsx b/apps/app/pages/[workspaceSlug]/projects/index.tsx
index 65b6ce720..93d318def 100644
--- a/apps/app/pages/[workspaceSlug]/projects/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/index.tsx
@@ -14,7 +14,7 @@ import AppLayout from "layouts/app-layout";
 import { JoinProjectModal } from "components/project/join-project-modal";
 import { DeleteProjectModal, SingleProjectCard } from "components/project";
 // ui
-import { HeaderButton, Loader, EmptyState } from "components/ui";
+import { Loader, EmptyState, PrimaryButton } from "components/ui";
 import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -44,14 +44,16 @@ const ProjectsPage: NextPage = () => {
         </Breadcrumbs>
       }
       right={
-        <HeaderButton
-          Icon={PlusIcon}
-          label="Add Project"
+        <PrimaryButton
+          className="flex items-center gap-2"
           onClick={() => {
             const e = new KeyboardEvent("keydown", { key: "p" });
             document.dispatchEvent(e);
           }}
-        />
+        >
+          <PlusIcon className="w-4 h-4" />
+          Add Project
+        </PrimaryButton>
       }
     >
       <JoinProjectModal