diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx
index a063df5256..880f6f2185 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { DraftIcon } from "@plane/propel/icons";
 import { EIssuesStoreType } from "@plane/types";
 import { Breadcrumbs, Header } from "@plane/ui";
@@ -66,15 +66,16 @@ export const WorkspaceDraftHeader = observer(function WorkspaceDraftHeader() {
 
         <Header.RightItem>
           {joinedProjectIds && joinedProjectIds.length > 0 && (
-            <Button
-              variant="primary"
-              size="lg"
-              className="items-center gap-1"
-              onClick={() => setIsDraftIssueModalOpen(true)}
-              disabled={!isAuthorizedUser}
-            >
-              {t("workspace_draft_issues.draft_an_issue")}
-            </Button>
+            <span className="items-center gap-1">
+              <Button
+                variant="primary"
+                size="md"
+                stretch="auto"
+                label={t("workspace_draft_issues.draft_an_issue")}
+                onClick={() => setIsDraftIssueModalOpen(true)}
+                disabled={!isAuthorizedUser}
+              />
+            </span>
           )}
         </Header.RightItem>
       </Header>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
index f15d767388..572ebe6d2e 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 import { Shapes } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { HomeIcon } from "@plane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
@@ -37,15 +37,16 @@ export const WorkspaceDashboardHeader = observer(function WorkspaceDashboardHead
           </div>
         </Header.LeftItem>
         <Header.RightItem>
-          <Button
-            variant="secondary"
-            size="lg"
-            onClick={() => toggleWidgetSettings(true)}
-            className="my-auto mb-0"
-            prependIcon={<Shapes />}
-          >
-            <div className="hidden sm:hidden md:block">{t("home.manage_widgets")}</div>
-          </Button>
+          <span className="my-auto mb-0">
+            <Button
+              variant="secondary"
+              size="md"
+              stretch="auto"
+              onClick={() => toggleWidgetSettings(true)}
+              icon={<Shapes />}
+              label={t("home.manage_widgets")}
+            />
+          </span>
         </Header.RightItem>
       </Header>
     </>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx
index 7bd93646c2..3696d7e49a 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 // components
 import { PageHead } from "@/components/core/page-title";
 import { DownloadActivityButton } from "@/components/profile/activity/download-button";
@@ -64,9 +64,13 @@ function ProfileActivityPage() {
           {activityPages}
           {pageCount < totalPages && resultsCount !== 0 && (
             <div className="flex w-full items-center justify-center text-11">
-              <Button variant="secondary" onClick={handleLoadMore}>
-                {t("common.load_more")}
-              </Button>
+              <Button
+                variant="secondary"
+                size="sm"
+                stretch="auto"
+                label={t("common.load_more")}
+                onClick={handleLoadMore}
+              />
             </div>
           )}
         </div>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
index 296b780c91..6233e21921 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
@@ -19,7 +19,7 @@ import { ProfileIssuesFilter } from "@/components/profile/profile-issues-filter"
 // hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
 import { useUser, useUserPermissions } from "@/hooks/store/user";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 
 type TUserProfileHeader = {
   userProjectsData: IUserProfileProjectSegregation | undefined;
@@ -96,16 +96,9 @@ export const UserProfileHeader = observer(function UserProfileHeader(props: TUse
             ))}
           </CustomMenu>
           <div className="shrink-0 md:hidden">
-            <Button
-              variant="ghost"
-              size="lg"
-              onClick={() => {
-                toggleProfileSidebar();
-              }}
-              appendIcon={
-                <PanelRight className={!profileSidebarCollapsed ? "text-accent-primary" : "text-secondary"} />
-              }
-            ></Button>
+            <Button variant="ghost" size="md" stretch="auto" onClick={() => toggleProfileSidebar()}>
+              <PanelRight className={!profileSidebarCollapsed ? "text-accent-primary" : "text-secondary"} />
+            </Button>
           </div>
         </div>
       </Header.RightItem>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx
index 592bf09a50..e918a60d40 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx
@@ -9,7 +9,7 @@ import { useRouter } from "next/navigation";
 import useSWR from "swr";
 // ui
 import { Banner } from "@plane/propel/banner";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { ArchiveIcon } from "@plane/propel/icons";
 import { Loader } from "@plane/ui";
 // components
@@ -74,10 +74,11 @@ function ArchivedIssueDetailsPage({ params }: Route.ComponentProps) {
             action={
               <Button
                 variant="secondary"
+                size="sm"
+                stretch="auto"
+                label="Go to archives"
                 onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/archives/issues/`)}
-              >
-                Go to archives
-              </Button>
+              />
             }
             className="border-b border-subtle"
           />
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
index 8f4165010f..fc50b7fda7 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
@@ -8,7 +8,7 @@ import { useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
-import { ChartNoAxesColumn, PanelRight, SlidersHorizontal } from "lucide-react";
+import { PanelRight, SlidersHorizontal } from "lucide-react";
 // plane imports
 import {
   EIssueFilterType,
@@ -18,7 +18,7 @@ import {
 } from "@plane/constants";
 import { usePlatformOS } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { IconButton } from "@plane/propel/icon-button";
 import { CycleIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
@@ -232,22 +232,23 @@ export const CycleIssuesHeader = observer(function CycleIssuesHeader() {
 
             {canUserCreateIssue && (
               <>
-                <Button onClick={() => setAnalyticsModal(true)} variant="secondary" size="lg">
-                  <span className="hidden @4xl:flex">Analytics</span>
-                  <span className="@4xl:hidden">
-                    <ChartNoAxesColumn className="size-3.5" />
-                  </span>
-                </Button>
+                <Button
+                  variant="secondary"
+                  size="md"
+                  stretch="auto"
+                  label="Analytics"
+                  onClick={() => setAnalyticsModal(true)}
+                />
                 {!isCompletedCycle && (
                   <Button
                     variant="primary"
-                    size="lg"
+                    size="md"
+                    stretch="auto"
+                    label={t("issue.add.label")}
                     onClick={() => {
                       toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
                     }}
-                  >
-                    {t("issue.add.label")}
-                  </Button>
+                  />
                 )}
               </>
             )}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
index 5e75728953..83c4e05787 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
@@ -9,7 +9,7 @@ import { useParams } from "next/navigation";
 // ui
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { CycleIcon } from "@plane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
@@ -62,14 +62,13 @@ export const CyclesListHeader = observer(function CyclesListHeader() {
           <CyclesViewHeader projectId={currentProjectDetails.id} />
           <Button
             variant="primary"
-            size="lg"
+            size="md"
+            stretch="auto"
+            label={t("project_cycles.add_cycle")}
             onClick={() => {
               toggleCreateCycleModal(true);
             }}
-          >
-            <div className="block sm:hidden">{t("add")}</div>
-            <div className="hidden sm:block">{t("project_cycles.add_cycle")}</div>
-          </Button>
+          />
         </Header.RightItem>
       ) : (
         <></>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
index 13613d413b..5193cd7f52 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
@@ -8,7 +8,7 @@ import { useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
-import { ChartNoAxesColumn, PanelRight, SlidersHorizontal } from "lucide-react";
+import { PanelRight, SlidersHorizontal } from "lucide-react";
 // plane imports
 import {
   EIssueFilterType,
@@ -16,7 +16,7 @@ import {
   EUserPermissions,
   EUserPermissionsLevel,
 } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { ModuleIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { ICustomSearchSelectOption, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
@@ -227,22 +227,26 @@ export const ModuleIssuesHeader = observer(function ModuleIssuesHeader() {
 
           {canUserCreateIssue ? (
             <>
-              <Button className="hidden md:block" onClick={() => setAnalyticsModal(true)} variant="secondary" size="lg">
-                <span className="hidden @4xl:flex">Analytics</span>
-                <span className="@4xl:hidden">
-                  <ChartNoAxesColumn className="size-3.5" />
-                </span>
-              </Button>
-              <Button
-                variant="primary"
-                size="lg"
-                className="hidden sm:flex"
-                onClick={() => {
-                  toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
-                }}
-              >
-                Add work item
-              </Button>
+              <span className="hidden md:block">
+                <Button
+                  variant="secondary"
+                  size="md"
+                  stretch="auto"
+                  label="Analytics"
+                  onClick={() => setAnalyticsModal(true)}
+                />
+              </span>
+              <span className="hidden sm:flex">
+                <Button
+                  variant="primary"
+                  size="md"
+                  stretch="auto"
+                  label="Add work item"
+                  onClick={() => {
+                    toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
+                  }}
+                />
+              </span>
             </>
           ) : (
             <></>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
index e5497ed82a..e694d35942 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
@@ -10,7 +10,7 @@ import { useParams } from "next/navigation";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { ModuleIcon } from "@plane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
@@ -67,14 +67,13 @@ export const ModulesListHeader = observer(function ModulesListHeader() {
         {canUserCreateModule ? (
           <Button
             variant="primary"
+            size="md"
+            stretch="auto"
+            label={t("project_module.add_module")}
             onClick={() => {
               toggleCreateModuleModal(true);
             }}
-            size="lg"
-          >
-            <div className="block sm:hidden">{t("add")}</div>
-            <div className="hidden sm:block">{t("project_module.add_module")}</div>
-          </Button>
+          />
         ) : (
           <></>
         )}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx
index fc1f76aa5d..6ce20ef868 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx
@@ -9,12 +9,9 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import useSWR from "swr";
 // plane types
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { TSearchEntityRequestPayload, TWebhookConnectionQueryParams } from "@plane/types";
 import { EFileAssetType } from "@plane/types";
-// plane ui
-// plane utils
-import { cn } from "@plane/utils";
 // components
 import { LogoSpinner } from "@/components/common/logo-spinner";
 import { PageHead } from "@/components/core/page-title";
@@ -165,12 +162,16 @@ function PageDetailsPage({ params }: Route.ComponentProps) {
         <p className="mt-3 text-center text-13 text-secondary">
           The page you are trying to access doesn{"'"}t exist or you don{"'"}t have permission to view it.
         </p>
-        <Link
-          href={`/${workspaceSlug}/projects/${projectId}/pages`}
-          className={cn(getButtonStyling("secondary", "base"), "mt-5")}
-        >
-          View other Pages
-        </Link>
+        <span className="mt-5">
+          <Button
+            variant="secondary"
+            size="sm"
+            stretch="auto"
+            label="View other Pages"
+            nativeButton={false}
+            render={<Link href={`/${workspaceSlug}/projects/${projectId}/pages`} />}
+          />
+        </span>
       </div>
     );
 
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx
index a26a539dd6..a5b543260f 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx
@@ -10,7 +10,7 @@ import { useParams, useRouter, useSearchParams } from "next/navigation";
 // constants
 import { EPageAccess } from "@plane/constants";
 // plane types
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { PageIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TPage } from "@plane/types";
@@ -79,9 +79,14 @@ export const PagesListHeader = observer(function PagesListHeader() {
       </Header.LeftItem>
       {canCurrentUserCreatePage && (
         <Header.RightItem>
-          <Button variant="primary" size="lg" onClick={handleCreatePage} loading={isCreatingPage}>
-            {isCreatingPage ? "Adding" : "Add page"}
-          </Button>
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={isCreatingPage ? "Adding" : "Add page"}
+            onClick={handleCreatePage}
+            loading={isCreatingPage}
+          />
         </Header.RightItem>
       )}
     </Header>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
index fa32b71c6a..eee93e62b0 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
@@ -15,7 +15,7 @@ import {
   EUserPermissions,
   EUserPermissionsLevel,
 } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { LockIcon, ViewsIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { ICustomSearchSelectOption, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
@@ -198,13 +198,13 @@ export const ProjectViewIssuesHeader = observer(function ProjectViewIssuesHeader
         {canUserCreateIssue && (
           <Button
             variant="primary"
-            size="lg"
+            size="md"
+            stretch="auto"
+            label="Add work item"
             onClick={() => {
               toggleCreateIssueModal(true, EIssuesStoreType.PROJECT_VIEW);
             }}
-          >
-            Add work item
-          </Button>
+          />
         )}
         <div className="hidden md:block">
           <ViewQuickActions
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx
index 97339cf30d..f0d0c41699 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { ViewsIcon } from "@plane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
@@ -47,9 +47,13 @@ export const ProjectViewsHeader = observer(function ProjectViewsHeader() {
         <Header.RightItem>
           <ViewListHeader />
           <div>
-            <Button variant="primary" size="lg" onClick={() => toggleCreateViewModal(true)}>
-              Add view
-            </Button>
+            <Button
+              variant="primary"
+              size="md"
+              stretch="auto"
+              label="Add view"
+              onClick={() => toggleCreateViewModal(true)}
+            />
           </div>
         </Header.RightItem>
       </Header>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/header.tsx
index 7eab6a4a7f..33ff36ea64 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/header.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { RecentStickyIcon } from "@plane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
@@ -45,15 +45,15 @@ export const WorkspaceStickyHeader = observer(function WorkspaceStickyHeader() {
           <StickySearch />
           <Button
             variant="primary"
-            size="lg"
+            size="md"
+            stretch="auto"
+            label="Add sticky"
             onClick={() => {
               toggleShowNewSticky(true);
               stickyOperations.create();
             }}
             loading={creatingSticky}
-          >
-            Add sticky
-          </Button>
+          />
         </Header.RightItem>
       </Header>
     </>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/header.tsx
index f4fdddc4ed..fe75d32398 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/header.tsx
@@ -10,7 +10,7 @@ import { useParams } from "next/navigation";
 // plane imports
 import { EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_PAGE, DEFAULT_GLOBAL_VIEWS_LIST } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { ViewsIcon } from "@plane/propel/icons";
 import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, ICustomSearchSelectOption } from "@plane/types";
 import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
@@ -143,9 +143,13 @@ export const GlobalIssuesHeader = observer(function GlobalIssuesHeader() {
               />
             </FiltersDropdown>
           )}
-          <Button variant="primary" size="lg" onClick={() => setCreateViewModal(true)}>
-            {t("workspace_views.add_view")}
-          </Button>
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={t("workspace_views.add_view")}
+            onClick={() => setCreateViewModal(true)}
+          />
           <div className="hidden md:block">
             {viewDetails && <WorkspaceViewQuickActions workspaceSlug={workspaceSlug?.toString()} view={viewDetails} />}
             {isDefaultView && defaultViewDetails && (
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx
index 0c7ea4e12a..4e3466a3d9 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // types
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { SearchIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IWorkspaceBulkInviteFormData } from "@plane/types";
@@ -136,9 +136,13 @@ const WorkspaceMembersSettingsPage = observer(function WorkspaceMembersSettingsP
               memberType="workspace"
             />
             {canPerformWorkspaceAdminActions && (
-              <Button variant="primary" size="lg" onClick={() => setInviteModal(true)}>
-                {t("workspace_settings.settings.members.add_member")}
-              </Button>
+              <Button
+                variant="primary"
+                size="md"
+                stretch="auto"
+                label={t("workspace_settings.settings.members.add_member")}
+                onClick={() => setInviteModal(true)}
+              />
             )}
           </div>
         </div>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx
index 099a0ee40a..5a279c7411 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx
@@ -10,7 +10,7 @@ import useSWR from "swr";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 // components
 import { EmptyStateCompact } from "@plane/propel/empty-state";
 import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
@@ -78,9 +78,13 @@ function WebhooksListPage({ params }: Route.ComponentProps) {
           title={t("workspace_settings.settings.webhooks.title")}
           description={t("workspace_settings.settings.webhooks.description")}
           control={
-            <Button variant="primary" size="lg" onClick={() => setShowCreateWebhookModal(true)}>
-              {t("workspace_settings.settings.webhooks.add_webhook")}
-            </Button>
+            <Button
+              variant="primary"
+              size="md"
+              stretch="auto"
+              label={t("workspace_settings.settings.webhooks.add_webhook")}
+              onClick={() => setShowCreateWebhookModal(true)}
+            />
           }
         />
         {Object.keys(webhooks).length > 0 ? (
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx
index 1d381547d4..f6967c3785 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx
@@ -8,8 +8,7 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { useTheme } from "next-themes";
 // plane imports
-import { Button, getButtonStyling } from "@plane/propel/button";
-import { cn } from "@plane/utils";
+import { Button } from "@makeplane/propel/components/button";
 // assets
 import ProjectDarkEmptyState from "@/app/assets/empty-state/project-settings/no-projects-dark.png?url";
 import ProjectLightEmptyState from "@/app/assets/empty-state/project-settings/no-projects-light.png?url";
@@ -31,10 +30,21 @@ function ProjectSettingsPage() {
         need to get things done.
       </div>
       <div className="flex gap-2">
-        <Link href="https://plane.so/" target="_blank" className={cn(getButtonStyling("secondary", "base"))}>
-          Learn more about projects
-        </Link>
-        <Button onClick={() => toggleCreateProjectModal(true)}>Start your first project</Button>
+        <Button
+          variant="secondary"
+          size="sm"
+          stretch="auto"
+          label="Learn more about projects"
+          nativeButton={false}
+          render={<Link href="https://plane.so/" target="_blank" />}
+        />
+        <Button
+          variant="primary"
+          size="sm"
+          stretch="auto"
+          label="Start your first project"
+          onClick={() => toggleCreateProjectModal(true)}
+        />
       </div>
     </div>
   );
diff --git a/apps/web/app/(all)/create-workspace/page.tsx b/apps/web/app/(all)/create-workspace/page.tsx
index 38087189cc..c903e561fb 100644
--- a/apps/web/app/(all)/create-workspace/page.tsx
+++ b/apps/web/app/(all)/create-workspace/page.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button, getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { PlaneLogo } from "@plane/propel/icons";
 import type { IWorkspace } from "@plane/types";
 // assets
@@ -86,12 +86,21 @@ const CreateWorkspacePage = observer(function CreateWorkspacePage() {
                 {t("workspace_creation.errors.creation_disabled.description")}
               </p>
               <div className="mt-6 flex gap-4">
-                <Button variant="primary" onClick={() => router.back()}>
-                  {t("common.go_back")}
-                </Button>
-                <a href={getMailtoHref()} className={getButtonStyling("secondary", "base")}>
-                  {t("workspace_creation.errors.creation_disabled.request_button")}
-                </a>
+                <Button
+                  variant="primary"
+                  size="sm"
+                  stretch="auto"
+                  label={t("common.go_back")}
+                  onClick={() => router.back()}
+                />
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  stretch="auto"
+                  label={t("workspace_creation.errors.creation_disabled.request_button")}
+                  nativeButton={false}
+                  render={<a href={getMailtoHref()} />}
+                />
               </div>
             </div>
           ) : (
diff --git a/apps/web/app/(all)/invitations/page.tsx b/apps/web/app/(all)/invitations/page.tsx
index 0da54f0a88..cbeb829fc0 100644
--- a/apps/web/app/(all)/invitations/page.tsx
+++ b/apps/web/app/(all)/invitations/page.tsx
@@ -14,7 +14,7 @@ import { CheckCircle2 } from "lucide-react";
 import { ROLE } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // types
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { PlaneLogo } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IWorkspaceMemberInvitation } from "@plane/types";
@@ -162,21 +162,22 @@ function UserInvitationsPage() {
                 <div className="flex items-center gap-3">
                   <Button
                     variant="primary"
+                    size="md"
+                    stretch="auto"
+                    label={t("accept_and_join")}
                     type="submit"
-                    size="lg"
                     onClick={submitInvitations}
                     disabled={isJoiningWorkspaces || invitationsRespond.length === 0}
                     loading={isJoiningWorkspaces}
-                  >
-                    {t("accept_and_join")}
-                  </Button>
-                  <Link href={`/${redirectWorkspaceSlug}`}>
-                    <span>
-                      <Button variant="secondary" size="lg">
-                        {t("go_home")}
-                      </Button>
-                    </span>
-                  </Link>
+                  />
+                  <Button
+                    variant="secondary"
+                    size="md"
+                    stretch="auto"
+                    label={t("go_home")}
+                    nativeButton={false}
+                    render={<Link href={`/${redirectWorkspaceSlug}`} />}
+                  />
                 </div>
               </div>
             </div>
diff --git a/apps/web/app/error/dev.tsx b/apps/web/app/error/dev.tsx
index 0269dcbdcb..60d2c18080 100644
--- a/apps/web/app/error/dev.tsx
+++ b/apps/web/app/error/dev.tsx
@@ -7,7 +7,7 @@
 // plane imports
 import { isRouteErrorResponse } from "react-router";
 import { Banner } from "@plane/propel/banner";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { Card, ECardVariant } from "@plane/propel/card";
 import { InfoFillIcon } from "@plane/propel/icons";
 
@@ -19,14 +19,8 @@ interface ErrorActionsProps {
 function ErrorActions({ onGoHome, onReload }: ErrorActionsProps) {
   return (
     <div className="flex gap-3 pt-2">
-      <Button variant="primary" size="lg" onClick={onGoHome}>
-        Go to home
-      </Button>
-      {onReload && (
-        <Button variant="secondary" size="lg" onClick={onReload}>
-          Reload page
-        </Button>
-      )}
+      <Button variant="primary" size="md" stretch="auto" label="Go to home" onClick={onGoHome} />
+      {onReload && <Button variant="secondary" size="md" stretch="auto" label="Reload page" onClick={onReload} />}
     </div>
   );
 }
diff --git a/apps/web/app/error/prod.tsx b/apps/web/app/error/prod.tsx
index a8d61829e3..0b23507bb3 100644
--- a/apps/web/app/error/prod.tsx
+++ b/apps/web/app/error/prod.tsx
@@ -6,7 +6,7 @@
 
 import { useTheme } from "next-themes";
 // plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 // assets
 import maintenanceModeDarkModeImage from "@/app/assets/instance/maintenance-mode-dark.svg?url";
 import maintenanceModeLightModeImage from "@/app/assets/instance/maintenance-mode-light.svg?url";
@@ -80,9 +80,7 @@ export function ProdErrorComponent({ onGoHome }: ProdErrorComponentProps) {
           </div>
 
           <div className="flex items-center justify-start gap-6">
-            <Button variant="primary" size="lg" onClick={onGoHome}>
-              Go to home
-            </Button>
+            <Button variant="primary" size="md" stretch="auto" label="Go to home" onClick={onGoHome} />
           </div>
         </div>
       </div>
diff --git a/apps/web/app/not-found.tsx b/apps/web/app/not-found.tsx
index 13763951ce..651982260f 100644
--- a/apps/web/app/not-found.tsx
+++ b/apps/web/app/not-found.tsx
@@ -6,7 +6,7 @@
 
 import Link from "next/link";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 // images
 import Image404 from "@/app/assets/404.svg?url";
 // types
@@ -32,13 +32,16 @@ function PageNotFound() {
               temporarily unavailable.
             </p>
           </div>
-          <Link href="/">
-            <span className="flex justify-center">
-              <Button variant="secondary" size="lg">
-                Go to Home
-              </Button>
-            </span>
-          </Link>
+          <span className="flex justify-center">
+            <Button
+              variant="secondary"
+              size="md"
+              stretch="auto"
+              label="Go to Home"
+              nativeButton={false}
+              render={<Link href="/" />}
+            />
+          </span>
         </div>
       </div>
     </div>
diff --git a/apps/web/core/components/account/auth-forms/email.tsx b/apps/web/core/components/account/auth-forms/email.tsx
index 2138753aaf..000bddac7e 100644
--- a/apps/web/core/components/account/auth-forms/email.tsx
+++ b/apps/web/core/components/account/auth-forms/email.tsx
@@ -11,7 +11,7 @@ import { observer } from "mobx-react";
 import { CircleAlert, XCircle } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IEmailCheckData } from "@plane/types";
 import { Input, Spinner } from "@plane/ui";
 import { cn, checkEmailValidity } from "@plane/utils";
@@ -100,9 +100,15 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
           </p>
         )}
       </div>
-      <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
-        {isSubmitting ? <Spinner height="20px" width="20px" /> : t("common.continue")}
-      </Button>
+      <Button
+        type="submit"
+        variant="primary"
+        size="lg"
+        disabled={isButtonDisabled}
+        stretch="full"
+        loading={isSubmitting}
+        label={t("common.continue")}
+      />
     </form>
   );
 });
diff --git a/apps/web/core/components/account/auth-forms/forgot-password.tsx b/apps/web/core/components/account/auth-forms/forgot-password.tsx
index ebb9345c35..0744d8f306 100644
--- a/apps/web/core/components/account/auth-forms/forgot-password.tsx
+++ b/apps/web/core/components/account/auth-forms/forgot-password.tsx
@@ -12,10 +12,10 @@ import { Controller, useForm } from "react-hook-form";
 import { CircleCheck } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button, getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Input } from "@plane/ui";
-import { cn, checkEmailValidity } from "@plane/utils";
+import { checkEmailValidity } from "@plane/utils";
 // hooks
 import useTimer from "@/hooks/use-timer";
 // services
@@ -117,20 +117,26 @@ export const ForgotPasswordForm = observer(function ForgotPasswordForm() {
           )}
         </div>
         <Button
-          type="submit"
           variant="primary"
-          className="w-full"
-          size="xl"
+          size="lg"
+          stretch="full"
+          label={
+            resendTimerCode > 0
+              ? t("auth.common.resend_in", { seconds: resendTimerCode })
+              : t("auth.forgot_password.send_reset_link")
+          }
+          type="submit"
           disabled={!isValid}
           loading={isSubmitting || resendTimerCode > 0}
-        >
-          {resendTimerCode > 0
-            ? t("auth.common.resend_in", { seconds: resendTimerCode })
-            : t("auth.forgot_password.send_reset_link")}
-        </Button>
-        <Link href="/" className={cn("w-full", getButtonStyling("link", "lg"))}>
-          {t("auth.common.back_to_sign_in")}
-        </Link>
+        />
+        <Button
+          variant="ghost"
+          size="md"
+          stretch="full"
+          label={t("auth.common.back_to_sign_in")}
+          nativeButton={false}
+          render={<Link href="/" />}
+        />
       </form>
     </FormContainer>
   );
diff --git a/apps/web/core/components/account/auth-forms/password.tsx b/apps/web/core/components/account/auth-forms/password.tsx
index 09ccac02c6..427355d6f8 100644
--- a/apps/web/core/components/account/auth-forms/password.tsx
+++ b/apps/web/core/components/account/auth-forms/password.tsx
@@ -12,7 +12,7 @@ import { Eye, EyeOff, Info, XCircle } from "lucide-react";
 // plane imports
 import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { CloseIcon } from "@plane/propel/icons";
 import { Input, PasswordStrengthIndicator, Spinner } from "@plane/ui";
 import { getPasswordStrength } from "@plane/utils";
@@ -279,31 +279,36 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
         <div className="space-y-2.5">
           {mode === EAuthModes.SIGN_IN ? (
             <>
-              <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
-                {isSubmitting ? (
-                  <Spinner height="20px" width="20px" />
-                ) : isSMTPConfigured ? (
-                  t("common.continue")
-                ) : (
-                  t("common.go_to_workspace")
-                )}
-              </Button>
+              <Button
+                type="submit"
+                variant="primary"
+                size="lg"
+                stretch="full"
+                disabled={isButtonDisabled}
+                loading={isSubmitting}
+                label={isSMTPConfigured ? t("common.continue") : t("common.go_to_workspace")}
+              />
               {isSMTPConfigured && (
                 <Button
+                  variant="secondary"
+                  size="lg"
+                  stretch="full"
+                  label={t("auth.common.sign_in_with_unique_code")}
                   type="button"
                   onClick={redirectToUniqueCodeSignIn}
-                  variant="secondary"
-                  className="w-full"
-                  size="xl"
-                >
-                  {t("auth.common.sign_in_with_unique_code")}
-                </Button>
+                />
               )}
             </>
           ) : (
-            <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
-              {isSubmitting ? <Spinner height="20px" width="20px" /> : "Create account"}
-            </Button>
+            <Button
+              type="submit"
+              variant="primary"
+              size="lg"
+              disabled={isButtonDisabled}
+              stretch="full"
+              loading={isSubmitting}
+              label={"Create account"}
+            />
           )}
         </div>
       </form>
diff --git a/apps/web/core/components/account/auth-forms/reset-password.tsx b/apps/web/core/components/account/auth-forms/reset-password.tsx
index 98283d3505..ed2593a4f1 100644
--- a/apps/web/core/components/account/auth-forms/reset-password.tsx
+++ b/apps/web/core/components/account/auth-forms/reset-password.tsx
@@ -12,7 +12,7 @@ import { Eye, EyeOff } from "lucide-react";
 // ui
 import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { Input, PasswordStrengthIndicator } from "@plane/ui";
 // components
 import { getPasswordStrength } from "@plane/utils";
@@ -195,9 +195,14 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
               <span className="text-13 text-danger-primary">{t("auth.common.password.errors.match")}</span>
             )}
         </div>
-        <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
-          {t("auth.common.password.submit")}
-        </Button>
+        <Button
+          variant="primary"
+          size="lg"
+          stretch="full"
+          label={t("auth.common.password.submit")}
+          type="submit"
+          disabled={isButtonDisabled}
+        />
       </form>
     </FormContainer>
   );
diff --git a/apps/web/core/components/account/auth-forms/set-password.tsx b/apps/web/core/components/account/auth-forms/set-password.tsx
index f16db6650b..a751d6b7b3 100644
--- a/apps/web/core/components/account/auth-forms/set-password.tsx
+++ b/apps/web/core/components/account/auth-forms/set-password.tsx
@@ -13,7 +13,7 @@ import { Eye, EyeOff } from "lucide-react";
 // plane imports
 import { E_PASSWORD_STRENGTH } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Input, PasswordStrengthIndicator } from "@plane/ui";
 // components
@@ -198,9 +198,14 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
               <span className="text-13 text-danger-primary">{t("auth.common.password.errors.match")}</span>
             )}
         </div>
-        <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
-          {t("common.continue")}
-        </Button>
+        <Button
+          variant="primary"
+          size="lg"
+          stretch="full"
+          label={t("common.continue")}
+          type="submit"
+          disabled={isButtonDisabled}
+        />
       </form>
     </FormContainer>
   );
diff --git a/apps/web/core/components/account/auth-forms/unique-code.tsx b/apps/web/core/components/account/auth-forms/unique-code.tsx
index 9c4b8a6c18..75e39aa22d 100644
--- a/apps/web/core/components/account/auth-forms/unique-code.tsx
+++ b/apps/web/core/components/account/auth-forms/unique-code.tsx
@@ -8,7 +8,7 @@ import { useEffect, useState } from "react";
 import { CircleCheck, XCircle } from "lucide-react";
 import { API_BASE_URL } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { Input, Spinner } from "@plane/ui";
 // constants
 // helpers
@@ -162,15 +162,15 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
       </div>
 
       <div className="space-y-2.5">
-        <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
-          {isRequestingNewCode ? (
-            t("auth.common.unique_code.sending_code")
-          ) : isSubmitting ? (
-            <Spinner height="20px" width="20px" />
-          ) : (
-            t("common.continue")
-          )}
-        </Button>
+        <Button
+          type="submit"
+          variant="primary"
+          size="lg"
+          stretch="full"
+          disabled={isButtonDisabled}
+          loading={isSubmitting}
+          label={isRequestingNewCode ? t("auth.common.unique_code.sending_code") : t("common.continue")}
+        />
       </div>
     </form>
   );
diff --git a/apps/web/core/components/account/deactivate-account-modal.tsx b/apps/web/core/components/account/deactivate-account-modal.tsx
index f4dba2a81c..4d3cdeb56e 100644
--- a/apps/web/core/components/account/deactivate-account-modal.tsx
+++ b/apps/web/core/components/account/deactivate-account-modal.tsx
@@ -7,7 +7,7 @@
 import { useState } from "react";
 import { useTranslation } from "@plane/i18n";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TrashIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
@@ -81,12 +81,14 @@ export function DeactivateAccountModal(props: Props) {
         </div>
       </div>
       <div className="mb-2 flex items-center justify-end gap-2 p-4 sm:px-6">
-        <Button variant="secondary" size="lg" onClick={handleClose}>
-          {t("cancel")}
-        </Button>
-        <Button variant="error-fill" size="lg" onClick={handleDeleteAccount}>
-          {isDeactivating ? t("deactivating") : t("confirm")}
-        </Button>
+        <Button variant="secondary" size="md" stretch="auto" label={t("cancel")} onClick={handleClose} />
+        <Button
+          variant="danger"
+          size="md"
+          stretch="auto"
+          label={isDeactivating ? t("deactivating") : t("confirm")}
+          onClick={handleDeleteAccount}
+        />
       </div>
     </ModalCore>
   );
diff --git a/apps/web/core/components/active-cycles/workspace-active-cycles-upgrade.tsx b/apps/web/core/components/active-cycles/workspace-active-cycles-upgrade.tsx
index ff1ee25439..4f3f9b230f 100644
--- a/apps/web/core/components/active-cycles/workspace-active-cycles-upgrade.tsx
+++ b/apps/web/core/components/active-cycles/workspace-active-cycles-upgrade.tsx
@@ -9,7 +9,7 @@ import { AlertOctagon, BarChart4, CircleDashed, Folder, Microscope } from "lucid
 // plane imports
 import { MARKETING_PRICING_PAGE_LINK } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { SearchIcon } from "@plane/propel/icons";
 import { ContentWrapper } from "@plane/ui";
 import { cn } from "@plane/utils";
@@ -91,15 +91,15 @@ export const WorkspaceActiveCyclesUpgrade = observer(function WorkspaceActiveCyc
             <p className="text-14 font-medium text-tertiary">{t("active_cycles_description")}</p>
           </div>
           <div className="flex items-center gap-3">
-            <a
-              className={`${getButtonStyling("primary", "base")} cursor-pointer`}
-              href={MARKETING_PRICING_PAGE_LINK}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <ProIcon className="h-3.5 w-3.5 text-on-color" />
-              {t("upgrade")}
-            </a>
+            <Button
+              variant="primary"
+              size="sm"
+              stretch="auto"
+              label={t("upgrade")}
+              icon={<ProIcon className="h-3.5 w-3.5 text-on-color" />}
+              nativeButton={false}
+              render={<a href={MARKETING_PRICING_PAGE_LINK} target="_blank" rel="noreferrer" />}
+            />
           </div>
           <span className="absolute top-0 left-0">
             <img
diff --git a/apps/web/core/components/analytics/insight-table/root.tsx b/apps/web/core/components/analytics/insight-table/root.tsx
index 9607d6e958..d343e46835 100644
--- a/apps/web/core/components/analytics/insight-table/root.tsx
+++ b/apps/web/core/components/analytics/insight-table/root.tsx
@@ -7,7 +7,7 @@
 import type { ColumnDef, Row, Table } from "@tanstack/react-table";
 import { Download } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { AnalyticsTableDataMap, TAnalyticsTabsBase } from "@plane/types";
 import { DataTable } from "./data-table";
 import { TableLoader } from "./loader";
@@ -39,11 +39,12 @@ export function InsightTable<T extends Exclude<TAnalyticsTabsBase, "overview">>(
         actions={(table: Table<AnalyticsTableDataMap[T]>) => (
           <Button
             variant="secondary"
-            prependIcon={<Download className="h-3.5 w-3.5" />}
+            size="sm"
+            stretch="auto"
+            icon={<Download className="h-3.5 w-3.5" />}
             onClick={() => onExport?.(table.getFilteredRowModel().rows)}
-          >
-            <div>{t("exporter.csv.short_description")}</div>
-          </Button>
+            label={t("exporter.csv.short_description")}
+          />
         )}
       />
     </div>
diff --git a/apps/web/core/components/analytics/select/project.tsx b/apps/web/core/components/analytics/select/project.tsx
index 7bdbbddb36..864637b034 100644
--- a/apps/web/core/components/analytics/select/project.tsx
+++ b/apps/web/core/components/analytics/select/project.tsx
@@ -6,11 +6,10 @@
 
 import { observer } from "mobx-react";
 // plane package imports
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ChevronDownIcon, ProjectIcon } from "@plane/propel/icons";
 import { CustomSearchSelect } from "@plane/ui";
-import { cn } from "@plane/utils";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 
@@ -50,7 +49,7 @@ export const ProjectSelect = observer(function ProjectSelect(props: Props) {
       options={options}
       className="border-none p-0"
       customButton={
-        <div className={cn(getButtonStyling("secondary", "lg"), "gap-2")}>
+        <Button variant="secondary" size="md" stretch="auto" render={<div />}>
           <ProjectIcon className="h-4 w-4" />
           {value && value.length > 3
             ? `3+ projects`
@@ -61,7 +60,7 @@ export const ProjectSelect = observer(function ProjectSelect(props: Props) {
                   .join(", ")
               : "All projects"}
           <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-        </div>
+        </Button>
       }
       customButtonClassName="border-none p-0 bg-transparent hover:bg-transparent w-auto h-auto"
       multiple
diff --git a/apps/web/core/components/analytics/work-items/priority-chart.tsx b/apps/web/core/components/analytics/work-items/priority-chart.tsx
index 942285cab2..dbebdf158d 100644
--- a/apps/web/core/components/analytics/work-items/priority-chart.tsx
+++ b/apps/web/core/components/analytics/work-items/priority-chart.tsx
@@ -15,7 +15,7 @@ import { Download } from "lucide-react";
 import type { ChartXAxisDateGrouping } from "@plane/constants";
 import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES, CHART_COLOR_PALETTES, EChartModels } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { BarChart } from "@plane/propel/charts/bar-chart";
 import { EmptyStateCompact } from "@plane/propel/empty-state";
 import type { TBarItem, TChart, TChartDatum, ChartXAxisProperty, ChartYAxisMetric } from "@plane/types";
@@ -228,11 +228,12 @@ const PriorityChart = observer(function PriorityChart(props: Props) {
             actions={(table: Table<TChartDatum>) => (
               <Button
                 variant="secondary"
-                prependIcon={<Download className="h-3.5 w-3.5" />}
+                size="sm"
+                stretch="auto"
+                icon={<Download className="h-3.5 w-3.5" />}
                 onClick={() => exportCSV(table.getRowModel().rows, [...defaultColumns, ...columns], workspaceSlug)}
-              >
-                <div>{t("exporter.csv.short_description")}</div>
-              </Button>
+                label={t("exporter.csv.short_description")}
+              />
             )}
           />
         </>
diff --git a/apps/web/core/components/api-token/empty-state.tsx b/apps/web/core/components/api-token/empty-state.tsx
index 944d19e34b..c0f0f4c257 100644
--- a/apps/web/core/components/api-token/empty-state.tsx
+++ b/apps/web/core/components/api-token/empty-state.tsx
@@ -6,7 +6,7 @@
 
 import React from "react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 // assets
 import emptyApiTokens from "@/app/assets/empty-state/api-token.svg?url";
 
@@ -27,9 +27,9 @@ export function ApiTokenEmptyState(props: Props) {
         <p className="mb-7 text-tertiary sm:mb-8">
           Create API tokens for safe and easy data sharing with external apps, maintaining control and security.
         </p>
-        <Button className="flex items-center gap-1.5" onClick={onClick}>
-          Add token
-        </Button>
+        <span className="flex items-center gap-1.5">
+          <Button variant="primary" size="sm" stretch="auto" label="Add token" onClick={onClick} />
+        </span>
       </div>
     </div>
   );
diff --git a/apps/web/core/components/api-token/modal/form.tsx b/apps/web/core/components/api-token/modal/form.tsx
index 1e1b96cf90..84814658b9 100644
--- a/apps/web/core/components/api-token/modal/form.tsx
+++ b/apps/web/core/components/api-token/modal/form.tsx
@@ -10,7 +10,7 @@ import { Controller, useForm } from "react-hook-form";
 import { Calendar } from "lucide-react";
 // types
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IApiToken } from "@plane/types";
 // ui
@@ -251,14 +251,19 @@ export function CreateApiTokenForm(props: Props) {
           <span className="text-11">{t("workspace_settings.settings.api_tokens.never_expires")}</span>
         </div>
         <div className="flex items-center gap-2">
-          <Button variant="secondary" onClick={handleClose}>
-            {t("cancel")}
-          </Button>
-          <Button variant="primary" type="submit" loading={isSubmitting}>
-            {isSubmitting
-              ? t("workspace_settings.settings.api_tokens.generating")
-              : t("workspace_settings.settings.api_tokens.generate_token")}
-          </Button>
+          <Button variant="secondary" size="sm" stretch="auto" label={t("cancel")} onClick={handleClose} />
+          <Button
+            variant="primary"
+            size="sm"
+            stretch="auto"
+            label={
+              isSubmitting
+                ? t("workspace_settings.settings.api_tokens.generating")
+                : t("workspace_settings.settings.api_tokens.generate_token")
+            }
+            type="submit"
+            loading={isSubmitting}
+          />
         </div>
       </div>
     </form>
diff --git a/apps/web/core/components/api-token/modal/generated-token-details.tsx b/apps/web/core/components/api-token/modal/generated-token-details.tsx
index aad163191f..1c83ce161e 100644
--- a/apps/web/core/components/api-token/modal/generated-token-details.tsx
+++ b/apps/web/core/components/api-token/modal/generated-token-details.tsx
@@ -5,7 +5,7 @@
  */
 
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { CopyIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
@@ -58,9 +58,7 @@ export function GeneratedTokenDetails(props: Props) {
             ? `Expires ${renderFormattedDate(tokenDetails.expired_at)} at ${renderFormattedTime(tokenDetails.expired_at)}`
             : "Never expires"}
         </p>
-        <Button variant="secondary" onClick={handleClose}>
-          {t("close")}
-        </Button>
+        <Button variant="secondary" size="sm" stretch="auto" label={t("close")} onClick={handleClose} />
       </div>
     </div>
   );
diff --git a/apps/web/core/components/auth-screens/workspace/not-a-member.tsx b/apps/web/core/components/auth-screens/workspace/not-a-member.tsx
index b38603006f..8765e4bee7 100644
--- a/apps/web/core/components/auth-screens/workspace/not-a-member.tsx
+++ b/apps/web/core/components/auth-screens/workspace/not-a-member.tsx
@@ -6,7 +6,7 @@
 
 import Link from "next/link";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 // layouts
 import DefaultLayout from "@/layouts/default-layout";
 
@@ -23,16 +23,22 @@ export function NotAWorkspaceMember() {
             </p>
           </div>
           <div className="flex items-center justify-center gap-2">
-            <Link href="/invitations">
-              <span>
-                <Button variant="secondary">Check pending invites</Button>
-              </span>
-            </Link>
-            <Link href="/create-workspace">
-              <span>
-                <Button variant="primary">Create new workspace</Button>
-              </span>
-            </Link>
+            <Button
+              variant="secondary"
+              size="sm"
+              stretch="auto"
+              label="Check pending invites"
+              nativeButton={false}
+              render={<Link href="/invitations" />}
+            />
+            <Button
+              variant="primary"
+              size="sm"
+              stretch="auto"
+              label="Create new workspace"
+              nativeButton={false}
+              render={<Link href="/create-workspace" />}
+            />
           </div>
         </div>
       </div>
diff --git a/apps/web/core/components/automation/select-month-modal.tsx b/apps/web/core/components/automation/select-month-modal.tsx
index ed847676ac..639be4beb8 100644
--- a/apps/web/core/components/automation/select-month-modal.tsx
+++ b/apps/web/core/components/automation/select-month-modal.tsx
@@ -7,7 +7,7 @@
 import { useParams } from "next/navigation";
 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IProject } from "@plane/types";
 // ui
 import { Input, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
@@ -123,12 +123,15 @@ export function SelectMonthModal({ type, initialValues, isOpen, handleClose, han
           </div>
         </div>
         <div className="mt-5 flex justify-end gap-2">
-          <Button variant="secondary" size="lg" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
-            {isSubmitting ? "Submitting..." : "Submit"}
-          </Button>
+          <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={onClose} />
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={isSubmitting ? "Submitting..." : "Submit"}
+            type="submit"
+            loading={isSubmitting}
+          />
         </div>
       </form>
     </ModalCore>
diff --git a/apps/web/core/components/common/empty-state.tsx b/apps/web/core/components/common/empty-state.tsx
index a5f469deb7..39714252e8 100644
--- a/apps/web/core/components/common/empty-state.tsx
+++ b/apps/web/core/components/common/empty-state.tsx
@@ -7,7 +7,7 @@
 import React from "react";
 
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 
 type Props = {
   title: string;
@@ -33,12 +33,13 @@ export function EmptyState({ title, description, image, primaryButton, secondary
           {primaryButton && (
             <Button
               variant="primary"
-              prependIcon={primaryButton.icon}
+              size="sm"
+              stretch="auto"
+              label={primaryButton.text}
+              icon={primaryButton.icon}
               onClick={primaryButton.onClick}
               disabled={disabled}
-            >
-              {primaryButton.text}
-            </Button>
+            />
           )}
           {secondaryButton}
         </div>
diff --git a/apps/web/core/components/common/layout-error-boundary.tsx b/apps/web/core/components/common/layout-error-boundary.tsx
index 74ef8f3fbb..27e40fe99d 100644
--- a/apps/web/core/components/common/layout-error-boundary.tsx
+++ b/apps/web/core/components/common/layout-error-boundary.tsx
@@ -8,7 +8,7 @@ import { Component, Fragment } from "react";
 import type { ErrorInfo, ReactNode } from "react";
 import { AlertTriangle } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 
 type Props = {
   children: ReactNode;
@@ -26,9 +26,7 @@ function LayoutErrorFallback({ onRetry }: { onRetry: () => void }) {
     <div className="flex h-full w-full flex-col items-center justify-center gap-3 text-center">
       <AlertTriangle className="size-8 text-tertiary" />
       <p className="text-14 text-secondary">{t("something_went_wrong")}</p>
-      <Button variant="secondary" size="sm" onClick={onRetry}>
-        {t("common.retry")}
-      </Button>
+      <Button variant="secondary" size="xs" stretch="auto" label={t("common.retry")} onClick={onRetry} />
     </div>
   );
 }
diff --git a/apps/web/core/components/common/new-empty-state.tsx b/apps/web/core/components/common/new-empty-state.tsx
index 742ea3a6a8..1baaac204f 100644
--- a/apps/web/core/components/common/new-empty-state.tsx
+++ b/apps/web/core/components/common/new-empty-state.tsx
@@ -7,7 +7,7 @@
 import React, { useState } from "react";
 
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 
 type Props = {
   title: string;
@@ -49,14 +49,15 @@ export function NewEmptyState({ title, description, image, primaryButton, disabl
 
           <div className="relative flex items-start justify-center">
             {primaryButton && (
-              <Button
-                className={`relative m-3 max-w-min !px-6 ${comicBox?.direction === "left" ? "flex-row-reverse" : ""}`}
-                size="xl"
-                variant="primary"
-                onClick={primaryButton.onClick}
-                disabled={disabled}
-              >
-                {primaryButton.text}
+              <span className={`relative m-3 max-w-min ${comicBox?.direction === "left" ? "flex-row-reverse" : ""}`}>
+                <Button
+                  size="lg"
+                  stretch="auto"
+                  variant="primary"
+                  onClick={primaryButton.onClick}
+                  disabled={disabled}
+                  label={primaryButton.text}
+                />
                 <div
                   onMouseEnter={handleMouseEnter}
                   onMouseLeave={handleMouseLeave}
@@ -69,7 +70,7 @@ export function NewEmptyState({ title, description, image, primaryButton, disabl
                     comicBox?.direction === "left" ? "left-0 ml-2.5" : "right-0 mr-2.5"
                   } h-1.5 w-1.5 rounded-full`}
                 />
-              </Button>
+              </span>
             )}
             {comicBox &&
               isHovered &&
diff --git a/apps/web/core/components/core/description-versions/modal.tsx b/apps/web/core/components/core/description-versions/modal.tsx
index 854b50922c..aa8715f40c 100644
--- a/apps/web/core/components/core/description-versions/modal.tsx
+++ b/apps/web/core/components/core/description-versions/modal.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // plane imports
 import type { EditorRefApi } from "@plane/editor";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { CopyIcon, ChevronLeftIcon, ChevronRightIcon } from "@plane/propel/icons";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
@@ -160,20 +160,25 @@ export const DescriptionVersionsModal = observer(function DescriptionVersionsMod
             <IconButton type="button" variant="ghost" size="base" onClick={handleCopyMarkdown} icon={CopyIcon} />
           </Tooltip>
           <div className="flex items-center gap-2">
-            <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={1}>
-              {t("common.cancel")}
-            </Button>
+            <Button
+              variant="secondary"
+              size="md"
+              stretch="auto"
+              label={t("common.cancel")}
+              onClick={handleClose}
+              tabIndex={1}
+            />
             {!isRestoreDisabled && (
               <Button
                 variant="primary"
-                size="lg"
+                size="md"
+                stretch="auto"
+                label={t("common.actions.restore")}
                 onClick={() => {
                   handleRestore(activeVersionDescription ?? "<p></p>");
                   handleClose();
                 }}
-              >
-                {t("common.actions.restore")}
-              </Button>
+              />
             )}
           </div>
         </div>
diff --git a/apps/web/core/components/core/filters/date-filter-modal.tsx b/apps/web/core/components/core/filters/date-filter-modal.tsx
index 0f1ac2c53c..4f0a876370 100644
--- a/apps/web/core/components/core/filters/date-filter-modal.tsx
+++ b/apps/web/core/components/core/filters/date-filter-modal.tsx
@@ -5,7 +5,7 @@
  */
 
 import { Controller, useForm } from "react-hook-form";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { Calendar } from "@plane/propel/calendar";
 import { CloseIcon } from "@plane/propel/icons";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
@@ -120,18 +120,16 @@ export function DateFilterModal({ title, handleClose, isOpen, onSelect }: Props)
           </h6>
         )}
         <div className="flex justify-end gap-4">
-          <Button variant="secondary" size="lg" onClick={handleClose}>
-            Cancel
-          </Button>
+          <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={handleClose} />
           <Button
             variant="primary"
-            size="lg"
+            size="md"
+            stretch="auto"
+            label="Apply"
             type="button"
             onClick={handleSubmit(handleFormSubmit)}
             disabled={isInvalid}
-          >
-            Apply
-          </Button>
+          />
         </div>
       </form>
     </ModalCore>
diff --git a/apps/web/core/components/core/image-picker-popover.tsx b/apps/web/core/components/core/image-picker-popover.tsx
index edcf3b948e..410eb9405a 100644
--- a/apps/web/core/components/core/image-picker-popover.tsx
+++ b/apps/web/core/components/core/image-picker-popover.tsx
@@ -16,7 +16,8 @@ import { Popover } from "@headlessui/react";
 import { ACCEPTED_COVER_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
 import { Tabs } from "@plane/propel/tabs";
-import { Button, getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
+import { Button as ButtonElement } from "@makeplane/propel/elements/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EFileAssetType } from "@plane/types";
 import { Input, Loader } from "@plane/ui";
@@ -192,9 +193,15 @@ function ImagePickerPopoverComponent<TFieldValues extends FieldValues = FieldVal
 
   return (
     <Popover className="relative z-19" ref={ref} tabIndex={tabIndex} onKeyDown={handleKeyDown}>
-      <Popover.Button className={getButtonStyling("secondary", "sm")} onClick={handleOnClick} disabled={disabled}>
+      <ButtonElement
+        variant="secondary"
+        size="xs"
+        stretch="auto"
+        disabled={disabled}
+        render={<Popover.Button onClick={handleOnClick} disabled={disabled} />}
+      >
         {label}
-      </Popover.Button>
+      </ButtonElement>
 
       {isOpen && (
         <Popover.Panel
@@ -241,9 +248,13 @@ function ImagePickerPopoverComponent<TFieldValues extends FieldValues = FieldVal
                             />
                           )}
                         />
-                        <Button variant="primary" size="xl" onClick={() => setSearchParams(formData.search)}>
-                          Search
-                        </Button>
+                        <Button
+                          variant="primary"
+                          size="lg"
+                          stretch="auto"
+                          label="Search"
+                          onClick={() => setSearchParams(formData.search)}
+                        />
                       </div>
                       {unsplashImages ? (
                         unsplashImages.length > 0 ? (
@@ -349,22 +360,23 @@ function ImagePickerPopoverComponent<TFieldValues extends FieldValues = FieldVal
                     <div className="flex h-12 items-start justify-end gap-2">
                       <Button
                         variant="secondary"
+                        size="sm"
+                        stretch="auto"
+                        label="Cancel"
                         onClick={() => {
                           setIsOpen(false);
                           setImage(null);
                         }}
-                      >
-                        Cancel
-                      </Button>
+                      />
                       <Button
                         variant="primary"
-                        className="w-full"
+                        size="sm"
+                        stretch="full"
+                        label={isImageUploading ? "Uploading" : "Upload & Save"}
                         onClick={handleSubmit}
                         disabled={!image}
                         loading={isImageUploading}
-                      >
-                        {isImageUploading ? "Uploading" : "Upload & Save"}
-                      </Button>
+                      />
                     </div>
                   </div>
                 </Tabs.Content>
diff --git a/apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx b/apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx
index 1d7b4099a0..66690ebd15 100644
--- a/apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx
+++ b/apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx
@@ -13,7 +13,7 @@ import { useForm } from "react-hook-form";
 import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { SearchIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { ISearchIssueResponse, IUser } from "@plane/types";
@@ -199,12 +199,15 @@ export const BulkDeleteIssuesModal = observer(function BulkDeleteIssuesModal(pro
 
         {issues.length > 0 && (
           <div className="flex items-center justify-end gap-2 p-3">
-            <Button variant="secondary" size="lg" onClick={handleClose}>
-              Cancel
-            </Button>
-            <Button variant="error-fill" size="lg" onClick={handleSubmit(handleDelete)} loading={isSubmitting}>
-              {isSubmitting ? "Deleting..." : "Delete selected work items"}
-            </Button>
+            <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={handleClose} />
+            <Button
+              variant="danger"
+              size="md"
+              stretch="auto"
+              label={isSubmitting ? "Deleting..." : "Delete selected work items"}
+              onClick={handleSubmit(handleDelete)}
+              loading={isSubmitting}
+            />
           </div>
         )}
       </form>
diff --git a/apps/web/core/components/core/modals/change-email-modal.tsx b/apps/web/core/components/core/modals/change-email-modal.tsx
index 944cb52e57..6df7a7dde3 100644
--- a/apps/web/core/components/core/modals/change-email-modal.tsx
+++ b/apps/web/core/components/core/modals/change-email-modal.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Input, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 import { cn } from "@plane/utils";
@@ -201,16 +201,28 @@ export const ChangeEmailModal = observer(function ChangeEmailModal(props: Props)
           </div>
         )}
         <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle py-4">
-          <Button type="button" variant="secondary" size="lg" onClick={handleClose}>
-            {changeEmailT("actions.cancel")}
-          </Button>
-          <Button type="submit" variant="primary" size="lg" disabled={isSubmitting}>
-            {isSubmitting
-              ? changeEmailT("states.sending")
-              : secondStep
-                ? changeEmailT("actions.confirm")
-                : changeEmailT("actions.continue")}
-          </Button>
+          <Button
+            variant="secondary"
+            size="md"
+            stretch="auto"
+            label={changeEmailT("actions.cancel")}
+            type="button"
+            onClick={handleClose}
+          />
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={
+              isSubmitting
+                ? changeEmailT("states.sending")
+                : secondStep
+                  ? changeEmailT("actions.confirm")
+                  : changeEmailT("actions.continue")
+            }
+            type="submit"
+            disabled={isSubmitting}
+          />
         </div>
       </form>
     </ModalCore>
diff --git a/apps/web/core/components/core/modals/existing-issues-list-modal.tsx b/apps/web/core/components/core/modals/existing-issues-list-modal.tsx
index 646ce6c359..e6e06b87f0 100644
--- a/apps/web/core/components/core/modals/existing-issues-list-modal.tsx
+++ b/apps/web/core/components/core/modals/existing-issues-list-modal.tsx
@@ -10,7 +10,7 @@ import { Combobox } from "@headlessui/react";
 // i18n
 import { useTranslation } from "@plane/i18n";
 // types
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { SearchIcon, CloseIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
@@ -313,27 +313,29 @@ export function ExistingIssuesListModal(props: Props) {
         </Combobox.Options>
       </Combobox>
       <div className="flex items-center justify-between p-3">
-        <Button
-          variant="link"
-          onClick={handleSelectIssues}
-          disabled={filteredIssues.length === 0}
-          className={filteredIssues.length === 0 ? "p-0" : ""}
-        >
-          {selectedIssues.length === issues.length ? t("issue.select.deselect_all") : t("issue.select.select_all")}
-        </Button>
+        <span className={filteredIssues.length === 0 ? "p-0" : ""}>
+          <Button
+            variant="ghost"
+            size="sm"
+            stretch="auto"
+            label={
+              selectedIssues.length === issues.length ? t("issue.select.deselect_all") : t("issue.select.select_all")
+            }
+            onClick={handleSelectIssues}
+            disabled={filteredIssues.length === 0}
+          />
+        </span>
         <div className="flex items-center justify-end gap-2">
-          <Button variant="secondary" size="lg" onClick={handleClose}>
-            {t("common.cancel")}
-          </Button>
+          <Button variant="secondary" size="md" stretch="auto" label={t("common.cancel")} onClick={handleClose} />
           <Button
             variant="primary"
-            size="lg"
+            size="md"
+            stretch="auto"
+            label={isSubmitting ? t("common.adding") : t("issue.select.add_selected")}
             onClick={onSubmit}
             loading={isSubmitting}
             disabled={isSubmitting || selectedIssues.length === 0}
-          >
-            {isSubmitting ? t("common.adding") : t("issue.select.add_selected")}
-          </Button>
+          />
         </div>
       </div>
     </ModalCore>
diff --git a/apps/web/core/components/core/modals/gpt-assistant-popover.tsx b/apps/web/core/components/core/modals/gpt-assistant-popover.tsx
index 8b932742c4..a48bd90371 100644
--- a/apps/web/core/components/core/modals/gpt-assistant-popover.tsx
+++ b/apps/web/core/components/core/modals/gpt-assistant-popover.tsx
@@ -13,7 +13,7 @@ import { AlertCircle } from "lucide-react";
 import { Popover, Transition } from "@headlessui/react";
 // plane imports
 import type { EditorRefApi } from "@plane/editor";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Input } from "@plane/ui";
 // components
@@ -180,13 +180,14 @@ export function GptAssistantPopover(props: Props) {
   const responseActionButton = response !== "" && (
     <Button
       variant="primary"
+      size="sm"
+      stretch="auto"
+      label="Use this response"
       onClick={() => {
         onResponse(response);
         onClose();
       }}
-    >
-      Use this response
-    </Button>
+    />
   );
 
   const generateResponseButtonText = isSubmitting
@@ -287,12 +288,15 @@ export function GptAssistantPopover(props: Props) {
               </>
             )}
             <div className="flex items-center gap-2">
-              <Button variant="secondary" onClick={onClose}>
-                Close
-              </Button>
-              <Button variant="primary" onClick={handleSubmit(handleAIResponse)} loading={isSubmitting}>
-                {generateResponseButtonText}
-              </Button>
+              <Button variant="secondary" size="sm" stretch="auto" label="Close" onClick={onClose} />
+              <Button
+                variant="primary"
+                size="sm"
+                stretch="auto"
+                label={generateResponseButtonText}
+                onClick={handleSubmit(handleAIResponse)}
+                loading={isSubmitting}
+              />
             </div>
           </div>
         </Popover.Panel>
diff --git a/apps/web/core/components/core/modals/user-image-upload-modal.tsx b/apps/web/core/components/core/modals/user-image-upload-modal.tsx
index ff688c7285..b591c07ec9 100644
--- a/apps/web/core/components/core/modals/user-image-upload-modal.tsx
+++ b/apps/web/core/components/core/modals/user-image-upload-modal.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { useDropzone } from "react-dropzone";
 // plane imports
 import { ACCEPTED_AVATAR_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { UserCirclePropertyIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EFileAssetType } from "@plane/types";
@@ -143,16 +143,25 @@ export const UserImageUploadModal = observer(function UserImageUploadModal(props
         </div>
         <p className="my-4 text-13 text-secondary">File formats supported- .jpeg, .jpg, .png, .webp</p>
         <div className="flex items-center justify-between">
-          <Button variant="error-fill" size="lg" onClick={handleImageRemove} disabled={!value}>
-            {isRemoving ? "Removing" : "Remove"}
-          </Button>
+          <Button
+            variant="danger"
+            size="md"
+            stretch="auto"
+            label={isRemoving ? "Removing" : "Remove"}
+            onClick={handleImageRemove}
+            disabled={!value}
+          />
           <div className="flex items-center gap-2">
-            <Button variant="secondary" size="lg" onClick={handleClose}>
-              Cancel
-            </Button>
-            <Button variant="primary" size="lg" onClick={handleSubmit} disabled={!image} loading={isImageUploading}>
-              {isImageUploading ? "Uploading" : "Upload & Save"}
-            </Button>
+            <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={handleClose} />
+            <Button
+              variant="primary"
+              size="md"
+              stretch="auto"
+              label={isImageUploading ? "Uploading" : "Upload & Save"}
+              onClick={handleSubmit}
+              disabled={!image}
+              loading={isImageUploading}
+            />
           </div>
         </div>
       </div>
diff --git a/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx b/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx
index c22ce52aad..e491b78463 100644
--- a/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx
+++ b/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx
@@ -10,7 +10,7 @@ import { useParams } from "next/navigation";
 import { useDropzone } from "react-dropzone";
 // plane imports
 import { ACCEPTED_AVATAR_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { UserCirclePropertyIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EFileAssetType } from "@plane/types";
@@ -156,16 +156,26 @@ export const WorkspaceImageUploadModal = observer(function WorkspaceImageUploadM
         </div>
         <p className="my-4 text-13 text-secondary">File formats supported- .jpeg, .jpg, .png, .webp</p>
         <div className="flex items-center justify-between">
-          <Button variant="error-fill" size="lg" onClick={handleImageRemove} disabled={!value} loading={isRemoving}>
-            {isRemoving ? "Removing" : "Remove"}
-          </Button>
+          <Button
+            variant="danger"
+            size="md"
+            stretch="auto"
+            label={isRemoving ? "Removing" : "Remove"}
+            onClick={handleImageRemove}
+            disabled={!value}
+            loading={isRemoving}
+          />
           <div className="flex items-center gap-2">
-            <Button variant="secondary" size="lg" onClick={handleClose}>
-              Cancel
-            </Button>
-            <Button variant="primary" size="lg" onClick={handleSubmit} disabled={!image} loading={isImageUploading}>
-              {isImageUploading ? "Uploading" : "Upload & Save"}
-            </Button>
+            <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={handleClose} />
+            <Button
+              variant="primary"
+              size="md"
+              stretch="auto"
+              label={isImageUploading ? "Uploading" : "Upload & Save"}
+              onClick={handleSubmit}
+              disabled={!image}
+              loading={isImageUploading}
+            />
           </div>
         </div>
       </div>
diff --git a/apps/web/core/components/core/theme/custom-theme-selector.tsx b/apps/web/core/components/core/theme/custom-theme-selector.tsx
index 47307776d8..4dd76e93b4 100644
--- a/apps/web/core/components/core/theme/custom-theme-selector.tsx
+++ b/apps/web/core/components/core/theme/custom-theme-selector.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { useForm } from "react-hook-form";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUserTheme } from "@plane/types";
 import { applyCustomTheme } from "@plane/utils";
@@ -116,9 +116,14 @@ export const CustomThemeSelector = observer(function CustomThemeSelector() {
       </div>
       <div className="mt-5 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         {/* Save Theme Button */}
-        <Button variant="primary" size="lg" type="submit" loading={isSubmitting || isLoadingPalette}>
-          {isSubmitting ? t("common.saving") : isLoadingPalette ? "Generating" : t("set_theme")}
-        </Button>
+        <Button
+          variant="primary"
+          size="md"
+          stretch="auto"
+          label={isSubmitting ? t("common.saving") : isLoadingPalette ? "Generating" : t("set_theme")}
+          type="submit"
+          loading={isSubmitting || isLoadingPalette}
+        />
         {/* Import/Export Section */}
         <CustomThemeDownloadConfigButton getValues={getValues} />
       </div>
diff --git a/apps/web/core/components/core/theme/download-config-button.tsx b/apps/web/core/components/core/theme/download-config-button.tsx
index c2ffc0bc3d..47c2e2ff26 100644
--- a/apps/web/core/components/core/theme/download-config-button.tsx
+++ b/apps/web/core/components/core/theme/download-config-button.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 import type { UseFormGetValues } from "react-hook-form";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import type { IUserTheme } from "@plane/types";
 
@@ -58,8 +58,13 @@ export const CustomThemeDownloadConfigButton = observer(function CustomThemeDown
   };
 
   return (
-    <Button variant="secondary" size="lg" type="button" onClick={handleDownloadConfig}>
-      Download config
-    </Button>
+    <Button
+      variant="secondary"
+      size="md"
+      stretch="auto"
+      label="Download config"
+      type="button"
+      onClick={handleDownloadConfig}
+    />
   );
 });
diff --git a/apps/web/core/components/core/theme/import-config-button.tsx b/apps/web/core/components/core/theme/import-config-button.tsx
index a4586163b4..e2d6e82819 100644
--- a/apps/web/core/components/core/theme/import-config-button.tsx
+++ b/apps/web/core/components/core/theme/import-config-button.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import type { UseFormSetValue } from "react-hook-form";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import type { IUserTheme } from "@plane/types";
 
@@ -93,9 +93,14 @@ export const CustomThemeImportConfigButton = observer(function CustomThemeImport
   return (
     <>
       <input ref={fileInputRef} type="file" accept=".json" onChange={handleUploadConfig} className="hidden" />
-      <Button variant="secondary" size="lg" type="button" onClick={() => fileInputRef.current?.click()}>
-        Import config
-      </Button>
+      <Button
+        variant="secondary"
+        size="md"
+        stretch="auto"
+        label="Import config"
+        type="button"
+        onClick={() => fileInputRef.current?.click()}
+      />
     </>
   );
 });
diff --git a/apps/web/core/components/cycles/archived-cycles/modal.tsx b/apps/web/core/components/cycles/archived-cycles/modal.tsx
index e29c05fed9..86aa946b30 100644
--- a/apps/web/core/components/cycles/archived-cycles/modal.tsx
+++ b/apps/web/core/components/cycles/archived-cycles/modal.tsx
@@ -6,7 +6,7 @@
 
 import { useState } from "react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // hooks
@@ -69,12 +69,16 @@ export function ArchiveCycleModal(props: Props) {
           Are you sure you want to archive the cycle? All your archives can be restored later.
         </p>
         <div className="mt-3 flex justify-end gap-2">
-          <Button variant="secondary" size="lg" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button variant="primary" size="lg" tabIndex={1} onClick={handleArchiveCycle} loading={isArchiving}>
-            {isArchiving ? "Archiving" : "Archive"}
-          </Button>
+          <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={onClose} />
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={isArchiving ? "Archiving" : "Archive"}
+            tabIndex={1}
+            onClick={handleArchiveCycle}
+            loading={isArchiving}
+          />
         </div>
       </div>
     </ModalCore>
diff --git a/apps/web/core/components/cycles/form.tsx b/apps/web/core/components/cycles/form.tsx
index 3d26c0b360..9c97a3b675 100644
--- a/apps/web/core/components/cycles/form.tsx
+++ b/apps/web/core/components/cycles/form.tsx
@@ -10,7 +10,7 @@ import { Controller, useForm } from "react-hook-form";
 import { ETabIndices } from "@plane/constants";
 // types
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { ICycle } from "@plane/types";
 // ui
 import { Input, TextArea } from "@plane/ui";
@@ -184,18 +184,31 @@ export function CycleForm(props: Props) {
         </div>
       </div>
       <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
-        <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={getIndex("cancel")}>
-          {t("common.cancel")}
-        </Button>
-        <Button variant="primary" size="lg" type="submit" loading={isSubmitting} tabIndex={getIndex("submit")}>
-          {data
-            ? isSubmitting
-              ? t("common.updating")
-              : t("project_cycles.update_cycle")
-            : isSubmitting
-              ? t("common.creating")
-              : t("project_cycles.create_cycle")}
-        </Button>
+        <Button
+          variant="secondary"
+          size="md"
+          stretch="auto"
+          label={t("common.cancel")}
+          onClick={handleClose}
+          tabIndex={getIndex("cancel")}
+        />
+        <Button
+          variant="primary"
+          size="md"
+          stretch="auto"
+          label={
+            data
+              ? isSubmitting
+                ? t("common.updating")
+                : t("project_cycles.update_cycle")
+              : isSubmitting
+                ? t("common.creating")
+                : t("project_cycles.create_cycle")
+          }
+          type="submit"
+          loading={isSubmitting}
+          tabIndex={getIndex("submit")}
+        />
       </div>
     </form>
   );
diff --git a/apps/web/core/components/cycles/transfer-issues.tsx b/apps/web/core/components/cycles/transfer-issues.tsx
index adbab83aa4..027d5bbe41 100644
--- a/apps/web/core/components/cycles/transfer-issues.tsx
+++ b/apps/web/core/components/cycles/transfer-issues.tsx
@@ -7,7 +7,7 @@
 import React from "react";
 import { AlertCircle } from "lucide-react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TransferIcon } from "@plane/propel/icons";
 
 type Props = {
@@ -27,9 +27,15 @@ export function TransferIssues(props: Props) {
 
       {canTransferIssues && (
         <div>
-          <Button variant="primary" size="lg" prependIcon={<TransferIcon />} onClick={handleClick} disabled={disabled}>
-            Transfer work items
-          </Button>
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label="Transfer work items"
+            icon={<TransferIcon />}
+            onClick={handleClick}
+            disabled={disabled}
+          />
         </div>
       )}
     </div>
diff --git a/apps/web/core/components/dropdowns/buttons.tsx b/apps/web/core/components/dropdowns/buttons.tsx
index dbee6ab0b4..d8343a7beb 100644
--- a/apps/web/core/components/dropdowns/buttons.tsx
+++ b/apps/web/core/components/dropdowns/buttons.tsx
@@ -6,7 +6,6 @@
 
 import React from "react";
 // helpers
-import { Button } from "@plane/propel/button";
 import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "@plane/utils";
 // types
@@ -78,11 +77,10 @@ function BorderButton(props: ButtonProps) {
       isMobile={isMobile}
       renderByDefault={renderToolTipByDefault}
     >
-      <Button
-        variant="ghost"
-        size="sm"
+      <button
+        type="button"
         className={cn(
-          "flex h-full w-full items-center justify-start gap-1.5 border-[0.5px] border-strong",
+          "inline-flex h-5 w-full items-center justify-start gap-1.5 rounded-sm border-[0.5px] border-strong px-1.5 text-caption-md-medium",
           {
             "bg-layer-transparent-active": isActive,
           },
@@ -90,7 +88,7 @@ function BorderButton(props: ButtonProps) {
         )}
       >
         {children}
-      </Button>
+      </button>
     </Tooltip>
   );
 }
@@ -106,16 +104,15 @@ function BackgroundButton(props: ButtonProps) {
       isMobile={isMobile}
       renderByDefault={renderToolTipByDefault}
     >
-      <Button
-        variant="ghost"
-        size="sm"
+      <button
+        type="button"
         className={cn(
-          "flex h-full w-full items-center justify-between gap-1.5 bg-layer-3 hover:bg-layer-1-hover",
+          "inline-flex h-5 w-full items-center justify-between gap-1.5 rounded-sm bg-layer-3 px-1.5 text-caption-md-medium hover:bg-layer-1-hover",
           className
         )}
       >
         {children}
-      </Button>
+      </button>
     </Tooltip>
   );
 }
@@ -131,11 +128,10 @@ function TransparentButton(props: ButtonProps) {
       isMobile={isMobile}
       renderByDefault={renderToolTipByDefault}
     >
-      <Button
-        variant="ghost"
-        size="sm"
+      <button
+        type="button"
         className={cn(
-          "flex h-full w-full items-center justify-between gap-1.5",
+          "inline-flex h-5 w-full items-center justify-between gap-1.5 rounded-sm px-1.5 text-caption-md-medium",
           {
             "bg-layer-transparent-active": isActive,
           },
@@ -143,7 +139,7 @@ function TransparentButton(props: ButtonProps) {
         )}
       >
         {children}
-      </Button>
+      </button>
     </Tooltip>
   );
 }
diff --git a/apps/web/core/components/dropdowns/layout.tsx b/apps/web/core/components/dropdowns/layout.tsx
index f48b0e9570..4eae331fd9 100644
--- a/apps/web/core/components/dropdowns/layout.tsx
+++ b/apps/web/core/components/dropdowns/layout.tsx
@@ -4,16 +4,15 @@
  * See the LICENSE file for details.
  */
 
-import { useCallback, useMemo } from "react";
+import { useMemo } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { ISSUE_LAYOUT_MAP } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { Button } from "@makeplane/propel/elements/button";
 import { CheckIcon } from "@plane/propel/icons";
 import { EIssueLayoutTypes } from "@plane/types";
-import { getButtonStyling } from "@plane/propel/button";
-import { Dropdown } from "@plane/ui";
-import { cn } from "@plane/utils";
+import { CustomMenu } from "@plane/ui";
 // components
 import { IssueLayoutIcon } from "@/components/issues/issue-layouts/layout-icon";
 
@@ -25,59 +24,37 @@ type TLayoutDropDown = {
 
 export const LayoutDropDown = observer(function LayoutDropDown(props: TLayoutDropDown) {
   const { onChange, value = EIssueLayoutTypes.LIST, disabledLayouts = [] } = props;
-  // plane i18n
   const { t } = useTranslation();
-  // derived values
   const availableLayouts = useMemo(
     () => Object.values(ISSUE_LAYOUT_MAP).filter((layout) => !disabledLayouts.includes(layout.key)),
     [disabledLayouts]
   );
-
-  const options = useMemo(
-    () =>
-      availableLayouts.map((issueLayout) => ({
-        data: issueLayout.key,
-        value: issueLayout.key,
-      })),
-    [availableLayouts]
-  );
-
-  const buttonContent = useCallback((isOpen: boolean, buttonValue: string | string[] | undefined) => {
-    const dropdownValue = ISSUE_LAYOUT_MAP[buttonValue as EIssueLayoutTypes];
-    return (
-      <div className="flex items-center gap-2 text-secondary">
-        <IssueLayoutIcon layout={dropdownValue.key} strokeWidth={2} className={`size-3.5 text-secondary`} />
-        <span className="text-11 font-medium">{t(dropdownValue.i18n_label)}</span>
-      </div>
-    );
-  }, []);
-
-  const itemContent = useCallback((props: { value: string; selected: boolean }) => {
-    const dropdownValue = ISSUE_LAYOUT_MAP[props.value as EIssueLayoutTypes];
-
-    return (
-      <div className={cn("flex w-full items-center justify-between gap-2 text-secondary")}>
-        <div className="flex items-center gap-2">
-          <IssueLayoutIcon layout={dropdownValue.key} strokeWidth={2} className={`size-3 text-secondary`} />
-          <span className="text-11 font-medium">{t(dropdownValue.i18n_label)}</span>
-        </div>
-        {props.selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
-      </div>
-    );
-  }, []);
-
-  const keyExtractor = useCallback((option: any) => option.value, []);
+  const selectedLayout = ISSUE_LAYOUT_MAP[value];
 
   return (
-    <Dropdown
-      onChange={onChange as (value: string) => void}
-      value={value?.toString()}
-      keyExtractor={keyExtractor}
-      options={options}
-      buttonContainerClassName={cn(getButtonStyling("secondary", "lg"))}
-      buttonContent={buttonContent}
-      renderItem={itemContent}
-      disableSearch
-    />
+    <CustomMenu
+      customButton={
+        <Button variant="secondary" size="md" stretch="auto" render={<div />}>
+          <IssueLayoutIcon layout={selectedLayout.key} strokeWidth={2} className="size-3.5 text-secondary" />
+          <span className="text-11 font-medium">{t(selectedLayout.i18n_label)}</span>
+        </Button>
+      }
+      placement="bottom-end"
+      closeOnSelect
+    >
+      {availableLayouts.map((issueLayout) => (
+        <CustomMenu.MenuItem
+          key={issueLayout.key}
+          className="flex items-center justify-between gap-2"
+          onClick={() => onChange(issueLayout.key)}
+        >
+          <div className="flex items-center gap-2">
+            <IssueLayoutIcon layout={issueLayout.key} strokeWidth={2} className="size-3 text-secondary" />
+            <span className="text-11 font-medium">{t(issueLayout.i18n_label)}</span>
+          </div>
+          {value === issueLayout.key && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
+        </CustomMenu.MenuItem>
+      ))}
+    </CustomMenu>
   );
 });
diff --git a/apps/web/core/components/editor/lite-text/toolbar.tsx b/apps/web/core/components/editor/lite-text/toolbar.tsx
index dc955cdded..0420a4b731 100644
--- a/apps/web/core/components/editor/lite-text/toolbar.tsx
+++ b/apps/web/core/components/editor/lite-text/toolbar.tsx
@@ -13,7 +13,7 @@ import type { EditorRefApi } from "@plane/editor";
 // i18n
 import { useTranslation } from "@plane/i18n";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { GlobeIcon, LockIcon } from "@plane/propel/icons";
 import type { ISvgIcons } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
@@ -177,16 +177,18 @@ export function IssueCommentToolbar(props: Props) {
         </div>
         {showSubmitButton && (
           <div className="sticky right-1">
-            <Button
-              type="submit"
-              variant="primary"
-              className="px-2.5 py-1.5 text-11"
-              onClick={handleSubmit}
-              disabled={isSubmitButtonDisabled}
-              loading={isSubmitting}
-            >
-              {t(submitButtonText)}
-            </Button>
+            <span className="px-2.5 py-1.5 text-11">
+              <Button
+                variant="primary"
+                size="sm"
+                stretch="auto"
+                label={t(submitButtonText)}
+                type="submit"
+                onClick={handleSubmit}
+                disabled={isSubmitButtonDisabled}
+                loading={isSubmitting}
+              />
+            </span>
           </div>
         )}
       </div>
diff --git a/apps/web/core/components/empty-state/comic-box-button.tsx b/apps/web/core/components/empty-state/comic-box-button.tsx
index 222e0531f8..7452aaa442 100644
--- a/apps/web/core/components/empty-state/comic-box-button.tsx
+++ b/apps/web/core/components/empty-state/comic-box-button.tsx
@@ -9,7 +9,7 @@ import { Fragment, useState } from "react";
 import { usePopper } from "react-popper";
 import { Popover } from "@headlessui/react";
 // plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 
 type Props = {
   label: string;
@@ -32,7 +32,7 @@ export function ComicBoxButton(props: Props) {
     setIsHovered(false);
   };
 
-  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>();
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: "right-end",
@@ -49,18 +49,25 @@ export function ComicBoxButton(props: Props) {
   return (
     <Popover as="div" className="relative">
       <Popover.Button as={Fragment}>
-        <Button variant="primary" size="lg" ref={setReferenceElement} onClick={onClick} disabled={disabled}>
-          {icon}
-          <span className="leading-4">{label}</span>
+        <span className="relative inline-flex" ref={setReferenceElement}>
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            onClick={onClick}
+            disabled={disabled}
+            icon={icon}
+            label={label}
+          />
           <span className="relative h-2 w-2">
             <div
               onMouseEnter={handleMouseEnter}
               onMouseLeave={handleMouseLeave}
-              className={`bg-blue-300 absolute right-0 z-10 h-2.5 w-2.5 animate-ping rounded-full`}
+              className="bg-blue-300 absolute right-0 z-10 h-2.5 w-2.5 animate-ping rounded-full"
             />
-            <div className={`bg-blue-400/40 absolute right-0 mt-0.5 mr-0.5 h-1.5 w-1.5 rounded-full`} />
+            <div className="bg-blue-400/40 absolute right-0 mt-0.5 mr-0.5 h-1.5 w-1.5 rounded-full" />
           </span>
-        </Button>
+        </span>
       </Popover.Button>
       {isHovered && (
         <Popover.Panel className="fixed z-10" static>
diff --git a/apps/web/core/components/empty-state/detailed-empty-state-root.tsx b/apps/web/core/components/empty-state/detailed-empty-state-root.tsx
index 593e5adda7..3e987ae1bf 100644
--- a/apps/web/core/components/empty-state/detailed-empty-state-root.tsx
+++ b/apps/web/core/components/empty-state/detailed-empty-state-root.tsx
@@ -7,7 +7,7 @@
 import React from "react";
 import { observer } from "mobx-react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 // utils
 import { cn } from "@plane/utils";
 
@@ -50,15 +50,15 @@ function CustomButton({
 }) {
   return (
     <Button
-      variant={variant}
-      size={size}
+      variant="primary"
+      size="sm"
+      stretch="auto"
+      label={config.text}
+      icon={config.appendIcon}
+      iconPosition="end"
       onClick={config.onClick}
-      prependIcon={config.prependIcon}
-      appendIcon={config.appendIcon}
       disabled={config.disabled}
-    >
-      {config.text}
-    </Button>
+    />
   );
 }
 
diff --git a/apps/web/core/components/estimates/create/modal.tsx b/apps/web/core/components/estimates/create/modal.tsx
index 518f666509..3fa1284fc2 100644
--- a/apps/web/core/components/estimates/create/modal.tsx
+++ b/apps/web/core/components/estimates/create/modal.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { EEstimateSystem, ESTIMATE_SYSTEMS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { ChevronLeftIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IEstimateFormData, TEstimateSystemKeys, TEstimatePointsObject, TEstimateTypeError } from "@plane/types";
@@ -200,13 +200,23 @@ export const CreateEstimateModal = observer(function CreateEstimateModal(props:
         </div>
 
         <div className="relative flex items-center justify-end gap-3 border-t border-subtle px-5 pt-5">
-          <Button variant="secondary" size="lg" onClick={handleClose} disabled={buttonLoader}>
-            {t("common.cancel")}
-          </Button>
+          <Button
+            variant="secondary"
+            size="md"
+            stretch="auto"
+            label={t("common.cancel")}
+            onClick={handleClose}
+            disabled={buttonLoader}
+          />
           {estimatePoints && (
-            <Button variant="primary" size="lg" onClick={handleCreateEstimate} disabled={buttonLoader}>
-              {buttonLoader ? t("common.creating") : t("project_settings.estimates.create.label")}
-            </Button>
+            <Button
+              variant="primary"
+              size="md"
+              stretch="auto"
+              label={buttonLoader ? t("common.creating") : t("project_settings.estimates.create.label")}
+              onClick={handleCreateEstimate}
+              disabled={buttonLoader}
+            />
           )}
         </div>
       </div>
diff --git a/apps/web/core/components/estimates/delete/modal.tsx b/apps/web/core/components/estimates/delete/modal.tsx
index e6b39fcdec..99b0511f36 100644
--- a/apps/web/core/components/estimates/delete/modal.tsx
+++ b/apps/web/core/components/estimates/delete/modal.tsx
@@ -7,7 +7,7 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // hooks
@@ -76,12 +76,22 @@ export const DeleteEstimateModal = observer(function DeleteEstimateModal(props:
         </div>
 
         <div className="relative flex items-center justify-end gap-3 border-t border-subtle px-5 pt-5">
-          <Button variant="secondary" size="lg" onClick={handleClose} disabled={buttonLoader}>
-            Cancel
-          </Button>
-          <Button variant="error-fill" size="lg" onClick={handleDeleteEstimate} disabled={buttonLoader}>
-            {buttonLoader ? "Deleting" : "Delete Estimate"}
-          </Button>
+          <Button
+            variant="secondary"
+            size="md"
+            stretch="auto"
+            label="Cancel"
+            onClick={handleClose}
+            disabled={buttonLoader}
+          />
+          <Button
+            variant="danger"
+            size="md"
+            stretch="auto"
+            label={buttonLoader ? "Deleting" : "Delete Estimate"}
+            onClick={handleDeleteEstimate}
+            disabled={buttonLoader}
+          />
         </div>
       </div>
     </ModalCore>
diff --git a/apps/web/core/components/estimates/points/create-root.tsx b/apps/web/core/components/estimates/points/create-root.tsx
index ad3c57e9fd..00927b2df0 100644
--- a/apps/web/core/components/estimates/points/create-root.tsx
+++ b/apps/web/core/components/estimates/points/create-root.tsx
@@ -9,7 +9,7 @@ import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { estimateCount } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { PlusIcon } from "@plane/propel/icons";
 import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeError } from "@plane/types";
 import { Sortable } from "@plane/ui";
@@ -171,9 +171,14 @@ export const EstimatePointCreateRoot = observer(function EstimatePointCreateRoot
           />
         ))}
       {estimatePoints && estimatePoints.length + (estimatePointCreate?.length || 0) <= estimateCount.max - 1 && (
-        <Button variant="link" prependIcon={<PlusIcon />} onClick={handleCreate}>
-          Add {estimateType}
-        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          stretch="auto"
+          icon={<PlusIcon />}
+          onClick={handleCreate}
+          label={`Add ${estimateType}`}
+        />
       )}
     </div>
   );
diff --git a/apps/web/core/components/exporter/export-form.tsx b/apps/web/core/components/exporter/export-form.tsx
index 8fde52e1bf..df8d9c8636 100644
--- a/apps/web/core/components/exporter/export-form.tsx
+++ b/apps/web/core/components/exporter/export-form.tsx
@@ -16,7 +16,7 @@ import {
   // ISSUE_DISPLAY_FILTERS_BY_PAGE,
 } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 // import { Tooltip } from "@plane/propel/tooltip";
 // import { EIssuesStoreType } from "@plane/types";
@@ -208,9 +208,14 @@ export const ExportForm = observer(function ExportForm(props: Props) {
           }
         />
         <div className="px-4 py-3">
-          <Button variant="primary" size="lg" type="submit" loading={exportLoading}>
-            {exportLoading ? `${t("workspace_settings.settings.exports.exporting")}...` : t("export")}
-          </Button>
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={exportLoading ? `${t("workspace_settings.settings.exports.exporting")}...` : t("export")}
+            type="submit"
+            loading={exportLoading}
+          />
         </div>
       </div>
       {/* Rich Filters */}
diff --git a/apps/web/core/components/exporter/export-modal.tsx b/apps/web/core/components/exporter/export-modal.tsx
index 7ca85bca08..2fbf2572b1 100644
--- a/apps/web/core/components/exporter/export-modal.tsx
+++ b/apps/web/core/components/exporter/export-modal.tsx
@@ -10,7 +10,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // types
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUser, IImporterService } from "@plane/types";
 // ui
@@ -153,14 +153,20 @@ export const Exporter = observer(function Exporter(props: Props) {
           onCheckedChange={setMultiple}
         />
         <div className="flex justify-end gap-2">
-          <Button variant="secondary" onClick={handleClose}>
-            {t("cancel")}
-          </Button>
-          <Button variant="primary" onClick={ExportCSVToMail} disabled={exportLoading} loading={exportLoading}>
-            {exportLoading
-              ? `${t("workspace_settings.settings.exports.exporting")}...`
-              : t("workspace_settings.settings.exports.title")}
-          </Button>
+          <Button variant="secondary" size="sm" stretch="auto" label={t("cancel")} onClick={handleClose} />
+          <Button
+            variant="primary"
+            size="sm"
+            stretch="auto"
+            label={
+              exportLoading
+                ? `${t("workspace_settings.settings.exports.exporting")}...`
+                : t("workspace_settings.settings.exports.title")
+            }
+            onClick={ExportCSVToMail}
+            disabled={exportLoading}
+            loading={exportLoading}
+          />
         </div>
       </div>
     </ModalCore>
diff --git a/apps/web/core/components/exporter/prev-exports.tsx b/apps/web/core/components/exporter/prev-exports.tsx
index f3ebedb41f..53880b10ef 100644
--- a/apps/web/core/components/exporter/prev-exports.tsx
+++ b/apps/web/core/components/exporter/prev-exports.tsx
@@ -10,7 +10,7 @@ import useSWR, { mutate } from "swr";
 import { MoveLeft, MoveRight, RefreshCw } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { EmptyStateCompact } from "@plane/propel/empty-state";
 import type { IExportData } from "@plane/types";
 import { Table } from "@plane/ui";
@@ -78,31 +78,38 @@ export const PrevExports = observer(function PrevExports(props: Props) {
       <div className="flex items-center justify-between border-b border-subtle pb-3.5">
         <div className="flex items-center gap-2">
           <h3 className="text-h6-medium text-primary">{t("workspace_settings.settings.exports.previous_exports")}</h3>
-          <Button variant="tertiary" className="shrink-0" onClick={handleRefresh}>
-            <RefreshCw className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />
-            {refreshing ? t("refreshing") : t("refresh_status")}
-          </Button>
+          <span className="shrink-0">
+            <Button
+              variant="tertiary"
+              size="sm"
+              stretch="auto"
+              onClick={handleRefresh}
+              icon={<RefreshCw className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />}
+              label={refreshing ? t("refreshing") : t("refresh_status")}
+            />
+          </span>
         </div>
         {Array.isArray(exporterServices?.results) && exporterServices.results.length > 0 && (
           <div className="flex items-center gap-2 text-11">
             <Button
               variant="secondary"
-              size="sm"
+              size="xs"
+              stretch="auto"
+              label={t("prev")}
+              icon={<MoveLeft />}
               disabled={!exporterServices?.prev_page_results}
               onClick={() => exporterServices?.prev_page_results && setCursor(exporterServices?.prev_cursor)}
-              prependIcon={<MoveLeft />}
-            >
-              {t("prev")}
-            </Button>
+            />
             <Button
               variant="secondary"
-              size="sm"
+              size="xs"
+              stretch="auto"
+              label={t("next")}
+              icon={<MoveRight />}
+              iconPosition="end"
               disabled={!exporterServices?.next_page_results}
               onClick={() => exporterServices?.next_page_results && setCursor(exporterServices?.next_cursor)}
-              appendIcon={<MoveRight />}
-            >
-              {t("next")}
-            </Button>
+            />
           </div>
         )}
       </div>
diff --git a/apps/web/core/components/exporter/single-export.tsx b/apps/web/core/components/exporter/single-export.tsx
index 8bd05281e9..9f67e196c7 100644
--- a/apps/web/core/components/exporter/single-export.tsx
+++ b/apps/web/core/components/exporter/single-export.tsx
@@ -6,7 +6,7 @@
 
 import { useState } from "react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IExportData } from "@plane/types";
 // helpers
 import { getDate, renderFormattedDate } from "@plane/utils";
@@ -66,9 +66,7 @@ export function SingleExport({ service, refreshing }: Props) {
           {service.status == "completed" && (
             <div>
               <a target="_blank" href={service?.url} rel="noopener noreferrer">
-                <Button variant="primary" className="w-full">
-                  {isLoading ? "Downloading..." : "Download"}
-                </Button>
+                <Button variant="primary" size="sm" stretch="full" label={isLoading ? "Downloading..." : "Download"} />
               </a>
             </div>
           )}
diff --git a/apps/web/core/components/global/product-updates/footer.tsx b/apps/web/core/components/global/product-updates/footer.tsx
index 09965aac3e..e2ae29b179 100644
--- a/apps/web/core/components/global/product-updates/footer.tsx
+++ b/apps/web/core/components/global/product-updates/footer.tsx
@@ -6,10 +6,8 @@
 
 import { useTranslation } from "@plane/i18n";
 // ui
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { PlaneLogo } from "@plane/propel/icons";
-// helpers
-import { cn } from "@plane/utils";
 
 export function ProductUpdatesFooter() {
   const { t } = useTranslation();
@@ -58,18 +56,15 @@ export function ProductUpdatesFooter() {
           Forum
         </a>
       </div>
-      <a
-        href="https://plane.so/pages"
-        target="_blank"
-        className={cn(
-          getButtonStyling("secondary", "base"),
-          "flex items-center gap-1.5 text-center font-medium underline-offset-2 outline-none hover:underline"
-        )}
-        rel="noreferrer"
-      >
-        <PlaneLogo className="h-4 w-auto text-primary" />
-        {t("powered_by_plane_pages")}
-      </a>
+      <Button
+        variant="secondary"
+        size="sm"
+        stretch="auto"
+        label={t("powered_by_plane_pages")}
+        icon={<PlaneLogo className="h-4 w-auto text-primary" />}
+        nativeButton={false}
+        render={<a href="https://plane.so/pages" target="_blank" rel="noreferrer" />}
+      />
     </div>
   );
 }
diff --git a/apps/web/core/components/home/widgets/links/create-update-link-modal.tsx b/apps/web/core/components/home/widgets/links/create-update-link-modal.tsx
index 76361332e1..e1c0dcc12c 100644
--- a/apps/web/core/components/home/widgets/links/create-update-link-modal.tsx
+++ b/apps/web/core/components/home/widgets/links/create-update-link-modal.tsx
@@ -10,7 +10,7 @@ import { Controller, useForm } from "react-hook-form";
 // plane types
 // plane ui
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { TLinkEditableFields } from "@plane/types";
 import { Input, ModalCore } from "@plane/ui";
 import type { TLinkOperations } from "./use-links";
@@ -126,13 +126,15 @@ export const LinkCreateUpdateModal = observer(function LinkCreateUpdateModal(pro
           </div>
         </div>
         <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
-          <Button variant="secondary" size="lg" onClick={onClose}>
-            {t("Cancel")}
-          </Button>
-          <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
-            {preloadedData?.id ? (isSubmitting ? t("updating") : t("update")) : isSubmitting ? t("adding") : t("add")}{" "}
-            {t("home.quick_links.title")}
-          </Button>
+          <Button variant="secondary" size="md" stretch="auto" label={t("Cancel")} onClick={onClose} />
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={`${preloadedData?.id ? (isSubmitting ? t("updating") : t("update")) : isSubmitting ? t("adding") : t("add")} ${t("home.quick_links.title")}`}
+            type="submit"
+            loading={isSubmitting}
+          />
         </div>
       </form>
     </ModalCore>
diff --git a/apps/web/core/components/inbox/content/inbox-issue-header.tsx b/apps/web/core/components/inbox/content/inbox-issue-header.tsx
index 5243521731..4e28160c4a 100644
--- a/apps/web/core/components/inbox/content/inbox-issue-header.tsx
+++ b/apps/web/core/components/inbox/content/inbox-issue-header.tsx
@@ -10,7 +10,7 @@ import { Clock, FileStack, MoreHorizontal, MoveRight } from "lucide-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { IconButton, getIconButtonStyling } from "@plane/propel/icon-button";
 import {
   LinkIcon,
@@ -328,7 +328,10 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
             {canMarkAsAccepted && (
               <Button
                 variant="secondary"
-                size="lg"
+                size="md"
+                stretch="auto"
+                icon={<CheckCircleFilledIcon className="size-4 shrink-0 text-success-secondary" />}
+                label={t("inbox_issue.actions.accept")}
                 onClick={() =>
                   handleActionWithPermission(
                     isProjectAdmin,
@@ -336,16 +339,16 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
                     t("inbox_issue.errors.accept_permission")
                   )
                 }
-              >
-                <CheckCircleFilledIcon className="size-4 shrink-0 text-success-secondary" />
-                {t("inbox_issue.actions.accept")}
-              </Button>
+              />
             )}
 
             {canMarkAsDeclined && (
               <Button
                 variant="secondary"
-                size="lg"
+                size="md"
+                stretch="auto"
+                icon={<CloseCircleFilledIcon className="size-4 shrink-0 text-danger-secondary" />}
+                label={t("inbox_issue.actions.decline")}
                 onClick={() =>
                   handleActionWithPermission(
                     isProjectAdmin,
@@ -353,26 +356,27 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
                     t("inbox_issue.errors.decline_permission")
                   )
                 }
-              >
-                <CloseCircleFilledIcon className="size-4 shrink-0 text-danger-secondary" />
-                {t("inbox_issue.actions.decline")}
-              </Button>
+              />
             )}
 
             {isAcceptedOrDeclined ? (
               <div className="flex items-center gap-2">
                 <Button
                   variant="secondary"
-                  size="lg"
-                  prependIcon={<LinkIcon className="h-2.5 w-2.5" />}
+                  size="md"
+                  stretch="auto"
+                  label={t("inbox_issue.actions.copy")}
+                  icon={<LinkIcon className="h-2.5 w-2.5" />}
                   onClick={() => handleCopyIssueLink(workItemLink)}
-                >
-                  {t("inbox_issue.actions.copy")}
-                </Button>
+                />
                 <ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
-                  <Button variant="secondary" size="lg" prependIcon={<NewTabIcon className="h-2.5 w-2.5" />}>
-                    {t("inbox_issue.actions.open")}
-                  </Button>
+                  <Button
+                    variant="secondary"
+                    size="md"
+                    stretch="auto"
+                    label={t("inbox_issue.actions.open")}
+                    icon={<NewTabIcon className="h-2.5 w-2.5" />}
+                  />
                 </ControlLink>
               </div>
             ) : (
diff --git a/apps/web/core/components/inbox/inbox-filter/root.tsx b/apps/web/core/components/inbox/inbox-filter/root.tsx
index 2413ccc382..6a0909af7c 100644
--- a/apps/web/core/components/inbox/inbox-filter/root.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/root.tsx
@@ -5,10 +5,9 @@
  */
 
 import { ListFilter } from "lucide-react";
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 // plane imports
 import { ChevronDownIcon } from "@plane/propel/icons";
-import { cn } from "@plane/utils";
 // components
 import { FiltersDropdown } from "@/components/issues/issue-layouts/filters";
 // hooks
@@ -20,11 +19,11 @@ import { InboxIssueOrderByDropdown } from "./sorting/order-by";
 const smallButton = <ListFilter className="size-3" />;
 
 const largeButton = (
-  <div className={cn(getButtonStyling("secondary", "base"), "px-2 text-tertiary")}>
+  <Button variant="secondary" size="sm" stretch="auto" render={<div />}>
     <ListFilter className="size-3" />
     <span>Filters</span>
     <ChevronDownIcon className="size-3" strokeWidth={2} />
-  </div>
+  </Button>
 );
 export function FiltersRoot() {
   const windowSize = useSize();
diff --git a/apps/web/core/components/inbox/inbox-filter/sorting/order-by.tsx b/apps/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
index ad2e720c71..385a6473f5 100644
--- a/apps/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
@@ -8,13 +8,10 @@ import { observer } from "mobx-react";
 import { ArrowDownWideNarrow, ArrowUpWideNarrow } from "lucide-react";
 import { INBOX_ISSUE_ORDER_BY_OPTIONS, INBOX_ISSUE_SORT_BY_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 import { CheckIcon, ChevronDownIcon } from "@plane/propel/icons";
 import type { TInboxIssueSortingOrderByKeys, TInboxIssueSortingSortByKeys } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
-// constants
-// helpers
-import { cn } from "@plane/utils";
 // hooks
 import { useProjectInbox } from "@/hooks/store/use-project-inbox";
 import useSize from "@/hooks/use-window-size";
@@ -33,7 +30,7 @@ export const InboxIssueOrderByDropdown = observer(function InboxIssueOrderByDrop
       <ArrowDownWideNarrow className="size-3" />
     );
   const largeButton = (
-    <div className={cn(getButtonStyling("secondary", "base"), "px-2 text-tertiary")}>
+    <Button variant="secondary" size="sm" stretch="auto" render={<div />}>
       {inboxSorting?.sort_by === "asc" ? (
         <ArrowUpWideNarrow className="size-3" />
       ) : (
@@ -41,7 +38,7 @@ export const InboxIssueOrderByDropdown = observer(function InboxIssueOrderByDrop
       )}
       {t(orderByDetails?.i18n_label || "inbox_issue.order_by.created_at")}
       <ChevronDownIcon className="size-3" strokeWidth={2} />
-    </div>
+    </Button>
   );
   return (
     <CustomMenu
diff --git a/apps/web/core/components/inbox/modals/create-modal/create-root.tsx b/apps/web/core/components/inbox/modals/create-modal/create-root.tsx
index 8c130a579e..276aab6a9c 100644
--- a/apps/web/core/components/inbox/modals/create-modal/create-root.tsx
+++ b/apps/web/core/components/inbox/modals/create-modal/create-root.tsx
@@ -13,7 +13,7 @@ import { observer } from "mobx-react";
 import { ETabIndices } from "@plane/constants";
 import type { EditorRefApi } from "@plane/editor";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TIssue } from "@plane/types";
 import { Switch } from "@makeplane/propel/components/switch";
@@ -218,7 +218,9 @@ export const InboxIssueCreateRoot = observer(function InboxIssueCreateRoot(props
             <div className="flex items-center gap-3">
               <Button
                 variant="secondary"
-                size="lg"
+                size="md"
+                stretch="auto"
+                label={t("discard")}
                 type="button"
                 onClick={() => {
                   if (descriptionEditorRef.current?.isEditorReadyToDiscard()) {
@@ -232,20 +234,18 @@ export const InboxIssueCreateRoot = observer(function InboxIssueCreateRoot(props
                   }
                 }}
                 tabIndex={getIndex("discard_button")}
-              >
-                {t("discard")}
-              </Button>
+              />
               <Button
                 variant="primary"
+                size="md"
+                stretch="auto"
+                label={formSubmitting ? t("creating") : t("create_work_item")}
                 ref={submitBtnRef}
                 type="submit"
                 loading={formSubmitting}
                 disabled={isTitleLengthMoreThan255Character}
                 tabIndex={getIndex("submit_button")}
-                size="lg"
-              >
-                {formSubmitting ? t("creating") : t("create_work_item")}
-              </Button>
+              />
             </div>
           </div>
         </form>
diff --git a/apps/web/core/components/inbox/modals/snooze-issue-modal.tsx b/apps/web/core/components/inbox/modals/snooze-issue-modal.tsx
index 1ad83a6b0e..700c517ca4 100644
--- a/apps/web/core/components/inbox/modals/snooze-issue-modal.tsx
+++ b/apps/web/core/components/inbox/modals/snooze-issue-modal.tsx
@@ -7,7 +7,7 @@
 import { useState } from "react";
 // ui
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { Calendar } from "@plane/propel/calendar";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 
@@ -52,13 +52,14 @@ export function InboxIssueSnoozeModal(props: InboxIssueSnoozeModalProps) {
         />
         <Button
           variant="primary"
+          size="sm"
+          stretch="auto"
+          label={t("inbox_issue.actions.snooze")}
           onClick={() => {
             handleClose();
             onConfirm(date);
           }}
-        >
-          {t("inbox_issue.actions.snooze")}
-        </Button>
+        />
       </div>
     </ModalCore>
   );
diff --git a/apps/web/core/components/instance/not-ready-view.tsx b/apps/web/core/components/instance/not-ready-view.tsx
index 850d0af2eb..998055c52e 100644
--- a/apps/web/core/components/instance/not-ready-view.tsx
+++ b/apps/web/core/components/instance/not-ready-view.tsx
@@ -11,7 +11,7 @@ import GradientLogo from "@/app/assets/auth/gradient-logo.webp?url";
 import GradientBgLogo from "@/app/assets/auth/gradient-bg-logo.webp?url";
 import DefaultLayout from "@/layouts/default-layout";
 import { PlaneLockup } from "@plane/propel/icons";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 
 export function InstanceNotReady() {
   return (
@@ -46,9 +46,7 @@ export function InstanceNotReady() {
               </div>
             </div>
             <a href={GOD_MODE_URL} className="w-72">
-              <Button variant="primary" className="w-full" size="xl">
-                Get started
-              </Button>
+              <Button variant="primary" size="lg" stretch="full" label="Get started" />
             </a>
           </div>
         </div>
diff --git a/apps/web/core/components/integration/single-integration-card.tsx b/apps/web/core/components/integration/single-integration-card.tsx
index 6f638012ba..dabaaaf18c 100644
--- a/apps/web/core/components/integration/single-integration-card.tsx
+++ b/apps/web/core/components/integration/single-integration-card.tsx
@@ -10,7 +10,7 @@ import { useParams } from "next/navigation";
 import useSWR, { mutate } from "swr";
 import { CheckCircle } from "lucide-react";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IAppIntegration, IWorkspaceIntegration } from "@plane/types";
@@ -144,18 +144,20 @@ export const SingleIntegrationCard = observer(function SingleIntegrationCard({ i
             disabled={isUserAdmin}
             tooltipContent={!isUserAdmin ? "You don't have permission to perform this" : null}
           >
-            <Button
-              className={`${!isUserAdmin ? "hover:cursor-not-allowed" : ""}`}
-              variant="error-fill"
-              onClick={() => {
-                if (!isUserAdmin) return;
-                handleRemoveIntegration();
-              }}
-              disabled={!isUserAdmin}
-              loading={deletingIntegration}
-            >
-              {deletingIntegration ? "Uninstalling..." : "Uninstall"}
-            </Button>
+            <span className={`${!isUserAdmin ? "hover:cursor-not-allowed" : ""}`}>
+              <Button
+                variant="danger"
+                size="sm"
+                stretch="auto"
+                label={deletingIntegration ? "Uninstalling..." : "Uninstall"}
+                onClick={() => {
+                  if (!isUserAdmin) return;
+                  handleRemoveIntegration();
+                }}
+                disabled={!isUserAdmin}
+                loading={deletingIntegration}
+              />
+            </span>
           </Tooltip>
         ) : (
           <Tooltip
@@ -163,17 +165,19 @@ export const SingleIntegrationCard = observer(function SingleIntegrationCard({ i
             disabled={isUserAdmin}
             tooltipContent={!isUserAdmin ? "You don't have permission to perform this" : null}
           >
-            <Button
-              className={`${!isUserAdmin ? "hover:cursor-not-allowed" : ""}`}
-              variant="primary"
-              onClick={() => {
-                if (!isUserAdmin) return;
-                startAuth();
-              }}
-              loading={isInstalling}
-            >
-              {isInstalling ? "Installing..." : "Install"}
-            </Button>
+            <span className={`${!isUserAdmin ? "hover:cursor-not-allowed" : ""}`}>
+              <Button
+                variant="primary"
+                size="sm"
+                stretch="auto"
+                label={isInstalling ? "Installing..." : "Install"}
+                onClick={() => {
+                  if (!isUserAdmin) return;
+                  startAuth();
+                }}
+                loading={isInstalling}
+              />
+            </span>
           </Tooltip>
         )
       ) : (
diff --git a/apps/web/core/components/issues/archive-issue-modal.tsx b/apps/web/core/components/issues/archive-issue-modal.tsx
index ad487abca1..0c848a1d89 100644
--- a/apps/web/core/components/issues/archive-issue-modal.tsx
+++ b/apps/web/core/components/issues/archive-issue-modal.tsx
@@ -8,7 +8,7 @@ import { useState } from "react";
 // i18n
 import { useTranslation } from "@plane/i18n";
 // types
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TDeDupeIssue, TIssue } from "@plane/types";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
@@ -75,12 +75,16 @@ export function ArchiveIssueModal(props: Props) {
         </h3>
         <p className="mt-3 text-13 text-secondary">{t("issue.archive.confirm_message")}</p>
         <div className="mt-3 flex justify-end gap-2">
-          <Button variant="secondary" size="lg" onClick={onClose}>
-            {t("common.cancel")}
-          </Button>
-          <Button variant="primary" size="lg" tabIndex={1} onClick={handleArchiveIssue} loading={isArchiving}>
-            {isArchiving ? t("common.archiving") : t("common.archive")}
-          </Button>
+          <Button variant="secondary" size="md" stretch="auto" label={t("common.cancel")} onClick={onClose} />
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={isArchiving ? t("common.archiving") : t("common.archive")}
+            tabIndex={1}
+            onClick={handleArchiveIssue}
+            loading={isArchiving}
+          />
         </div>
       </div>
     </ModalCore>
diff --git a/apps/web/core/components/issues/bulk-operations/upgrade-banner.tsx b/apps/web/core/components/issues/bulk-operations/upgrade-banner.tsx
index bfd3336902..2db6b84bec 100644
--- a/apps/web/core/components/issues/bulk-operations/upgrade-banner.tsx
+++ b/apps/web/core/components/issues/bulk-operations/upgrade-banner.tsx
@@ -5,7 +5,7 @@
  */
 
 import { MARKETING_PLANE_ONE_PAGE_LINK } from "@plane/constants";
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { cn } from "@plane/utils";
 
 type Props = {
@@ -22,14 +22,16 @@ export function BulkOperationsUpgradeBanner(props: Props) {
           Change state, priority, and more for several work items at once. Save three minutes on an average per
           operation.
         </p>
-        <a
-          href={MARKETING_PLANE_ONE_PAGE_LINK}
-          target="_blank"
-          rel="noopener noreferrer"
-          className={cn(getButtonStyling("primary", "base"), "flex-shrink-0")}
-        >
-          Upgrade to One
-        </a>
+        <span className="flex-shrink-0">
+          <Button
+            variant="primary"
+            size="sm"
+            stretch="auto"
+            label="Upgrade to One"
+            nativeButton={false}
+            render={<a href={MARKETING_PLANE_ONE_PAGE_LINK} target="_blank" rel="noopener noreferrer" />}
+          />
+        </span>
       </div>
     </div>
   );
diff --git a/apps/web/core/components/issues/confirm-issue-discard.tsx b/apps/web/core/components/issues/confirm-issue-discard.tsx
index 9ba05b9afd..9e9afbb223 100644
--- a/apps/web/core/components/issues/confirm-issue-discard.tsx
+++ b/apps/web/core/components/issues/confirm-issue-discard.tsx
@@ -6,7 +6,7 @@
 
 import { useState } from "react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 
 type Props = {
@@ -48,17 +48,18 @@ export function ConfirmIssueDiscard(props: Props) {
       </div>
       <div className="flex justify-between gap-2 p-4 sm:px-6">
         <div>
-          <Button variant="secondary" onClick={onDiscard}>
-            Discard
-          </Button>
+          <Button variant="secondary" size="sm" stretch="auto" label="Discard" onClick={onDiscard} />
         </div>
         <div className="flex items-center gap-2">
-          <Button variant="secondary" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button variant="primary" onClick={handleDeletion} loading={isLoading}>
-            {isLoading ? "Saving" : "Save to Drafts"}
-          </Button>
+          <Button variant="secondary" size="sm" stretch="auto" label="Cancel" onClick={onClose} />
+          <Button
+            variant="primary"
+            size="sm"
+            stretch="auto"
+            label={isLoading ? "Saving" : "Save to Drafts"}
+            onClick={handleDeletion}
+            loading={isLoading}
+          />
         </div>
       </div>
     </ModalCore>
diff --git a/apps/web/core/components/issues/filters.tsx b/apps/web/core/components/issues/filters.tsx
index cbd899e9f2..abee6c9a1a 100644
--- a/apps/web/core/components/issues/filters.tsx
+++ b/apps/web/core/components/issues/filters.tsx
@@ -10,7 +10,7 @@ import { ChartNoAxesColumn, SlidersHorizontal } from "lucide-react";
 // plane imports
 import { EIssueFilterType, ISSUE_STORE_TO_FILTERS_MAP } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
 import { EIssueLayoutTypes, EIssuesStoreType } from "@plane/types";
 // hooks
@@ -126,12 +126,16 @@ export const HeaderFilters = observer(function HeaderFilters(props: Props) {
         />
       </FiltersDropdown>
       {canUserCreateIssue ? (
-        <Button className="hidden px-2 md:block" onClick={() => setAnalyticsModal(true)} variant="secondary" size="lg">
-          <div className="hidden @4xl:flex">{t("common.analytics")}</div>
-          <div className="flex @4xl:hidden">
-            <ChartNoAxesColumn className="size-3.5" />
-          </div>
-        </Button>
+        <span className="hidden px-2 md:block">
+          <Button
+            onClick={() => setAnalyticsModal(true)}
+            variant="secondary"
+            size="md"
+            stretch="auto"
+            icon={<ChartNoAxesColumn className="size-3.5" />}
+            label={t("common.analytics")}
+          />
+        </span>
       ) : (
         <></>
       )}
diff --git a/apps/web/core/components/issues/header.tsx b/apps/web/core/components/issues/header.tsx
index b032f11c11..6ae414f9bf 100644
--- a/apps/web/core/components/issues/header.tsx
+++ b/apps/web/core/components/issues/header.tsx
@@ -11,7 +11,7 @@ import { Circle } from "lucide-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel, SPACE_BASE_PATH, SPACE_BASE_URL } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { NewTabIcon, WorkItemsIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { EIssuesStoreType } from "@plane/types";
@@ -115,14 +115,13 @@ export const IssuesHeader = observer(function IssuesHeader() {
         {canUserCreateIssue && (
           <Button
             variant="primary"
-            size="lg"
+            size="md"
+            stretch="auto"
             onClick={() => {
               toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
             }}
-          >
-            <div className="block sm:hidden">{t("issue.label", { count: 1 })}</div>
-            <div className="hidden sm:block">{t("issue.add.label")}</div>
-          </Button>
+            label={t("issue.add.label")}
+          />
         )}
       </Header.RightItem>
     </Header>
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/root.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/root.tsx
index ef808a1fe7..c48c019266 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/root.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/root.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { ListFilter } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { GroupByColumnTypes, TIssue, TIssueServiceType, TSubIssueOperations } from "@plane/types";
 import { EIssueServiceType, EIssuesStoreType } from "@plane/types";
 // hooks
@@ -102,9 +102,13 @@ export const SubIssuesListRoot = observer(function SubIssuesListRoot(props: Prop
           icon={<ListFilter />}
           customClassName={storeType !== EIssuesStoreType.EPIC ? "border-none" : ""}
           actionElement={
-            <Button variant="secondary" onClick={() => resetFilters(rootIssueId)}>
-              {t("sub_work_item.empty_state.list_filters.action")}
-            </Button>
+            <Button
+              variant="secondary"
+              size="sm"
+              stretch="auto"
+              label={t("sub_work_item.empty_state.list_filters.action")}
+              onClick={() => resetFilters(rootIssueId)}
+            />
           }
         />
       ) : (
diff --git a/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx b/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx
index df2dd31cf5..84fd0c7110 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx
@@ -6,7 +6,7 @@
 
 import React from "react";
 // helpers
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 
 type Props = {
   icon: React.ReactNode;
@@ -16,10 +16,5 @@ type Props = {
 
 export function IssueDetailWidgetButton(props: Props) {
   const { icon, title, disabled = false } = props;
-  return (
-    <Button variant={"secondary"} disabled={disabled} size="lg">
-      {icon && icon}
-      <span className="text-body-xs-medium">{title}</span>
-    </Button>
-  );
+  return <Button variant="secondary" size="md" stretch="auto" disabled={disabled} icon={icon} label={title} />;
 }
diff --git a/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx b/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
index ff2f84f7d4..4c1bf9c930 100644
--- a/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
@@ -5,7 +5,7 @@
  */
 
 import { observer } from "mobx-react";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { CloseIcon, LabelFilledIcon } from "@plane/propel/icons";
 // types
 import { useLabel } from "@/hooks/store/use-label";
@@ -37,10 +37,15 @@ export const LabelListItem = observer(function LabelListItem(props: TLabelListIt
 
   if (!label) return <></>;
   return (
-    <Button variant="tertiary" size="sm" key={labelId} onClick={handleLabel} disabled={disabled}>
-      <LabelFilledIcon className="size-3" color={label.color ?? "#000000"} />
-      <span className="text-body-xs-regular">{label.name}</span>
-      {!disabled && <CloseIcon className="h-2.5 w-2.5 transition-all group-hover:text-danger-primary" />}
-    </Button>
+    <Button
+      variant="tertiary"
+      size="xs"
+      stretch="auto"
+      key={labelId}
+      onClick={handleLabel}
+      disabled={disabled}
+      icon={<LabelFilledIcon className="size-3" color={label.color ?? "#000000"} />}
+      label={label.name}
+    />
   );
 });
diff --git a/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx b/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
index 9c00651461..a4383b3d14 100644
--- a/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
@@ -12,7 +12,7 @@ import { Combobox } from "@headlessui/react";
 // plane imports
 import { EUserPermissionsLevel, getRandomLabelColor } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { CheckIcon, SearchIcon, PlusIcon } from "@plane/propel/icons";
 import type { IIssueLabel } from "@plane/types";
 import { EUserProjectRoles } from "@plane/types";
@@ -92,7 +92,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
 
   const issueLabels = values ?? [];
 
-  const label = <span className="text-body-xs-medium text-placeholder">{t("label.select")}</span>;
+  const label = t("label.select");
 
   const searchInputKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (query !== "" && e.key === "Escape") {
@@ -128,15 +128,15 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
       >
         <Combobox.Button as={Fragment}>
           <Button
+            variant="tertiary"
+            size="xs"
+            stretch="auto"
+            label={label}
+            icon={<PlusIcon />}
             ref={setReferenceElement}
             type="button"
-            variant="tertiary"
-            size="sm"
-            prependIcon={<PlusIcon />}
             onClick={() => !projectLabels && fetchLabels()}
-          >
-            {label}
-          </Button>
+          />
         </Combobox.Button>
 
         <Combobox.Options as="ul" className="fixed z-10">
diff --git a/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx b/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
index ecc11ddcdf..4c99760bc6 100644
--- a/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
+++ b/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "@plane/i18n";
 // plane types
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { TIssueLinkEditableFields, TIssueServiceType } from "@plane/types";
 // plane ui
 import { Input, ModalCore } from "@plane/ui";
@@ -134,11 +134,12 @@ export const IssueLinkCreateUpdateModal = observer(function IssueLinkCreateUpdat
           </div>
         </div>
         <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
-          <Button variant="secondary" size="lg" onClick={onClose}>
-            {t("common.cancel")}
-          </Button>
-          <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
-            {`${
+          <Button variant="secondary" size="md" stretch="auto" label={t("common.cancel")} onClick={onClose} />
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={`${
               preloadedData?.id
                 ? isSubmitting
                   ? t("common.updating")
@@ -147,7 +148,9 @@ export const IssueLinkCreateUpdateModal = observer(function IssueLinkCreateUpdat
                   ? t("common.adding")
                   : t("common.add")
             } ${t("common.link")}`}
-          </Button>
+            type="submit"
+            loading={isSubmitting}
+          />
         </div>
       </form>
     </ModalCore>
diff --git a/apps/web/core/components/issues/issue-detail/subscription.tsx b/apps/web/core/components/issues/issue-detail/subscription.tsx
index d9573d63c6..a06d112565 100644
--- a/apps/web/core/components/issues/issue-detail/subscription.tsx
+++ b/apps/web/core/components/issues/issue-detail/subscription.tsx
@@ -12,7 +12,7 @@ import { Bell, BellOff } from "lucide-react";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // UI
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EIssueServiceType } from "@plane/types";
 import { Loader } from "@plane/ui";
@@ -82,23 +82,15 @@ export const IssueSubscription = observer(function IssueSubscription(props: TIss
   return (
     <div>
       <Button
-        prependIcon={isSubscribed ? <BellOff /> : <Bell className="h-3 w-3" />}
+        icon={isSubscribed ? <BellOff /> : <Bell className="h-3 w-3" />}
         variant="secondary"
-        className="hover:!bg-accent-primary/20"
+        size="md"
+        stretch="auto"
         onClick={handleSubscription}
         disabled={!isEditable || loading}
-        size="lg"
-      >
-        {loading ? (
-          <span>
-            <span className="hidden sm:block">{t("common.loading")}</span>
-          </span>
-        ) : isSubscribed ? (
-          <div className="hidden sm:block">{t("common.actions.unsubscribe")}</div>
-        ) : (
-          <div className="hidden sm:block">{t("common.actions.subscribe")}</div>
-        )}
-      </Button>
+        loading={loading}
+        label={isSubscribed ? t("common.actions.unsubscribe") : t("common.actions.subscribe")}
+      />
     </div>
   );
 });
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
index fdf49f374a..6ecdfab98a 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
@@ -10,7 +10,7 @@ import { usePopper } from "react-popper";
 // headless ui
 import { Popover, Transition } from "@headlessui/react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 
 type Props = {
   children: React.ReactNode;
@@ -55,35 +55,29 @@ export function FiltersDropdown(props: Props) {
               </button>
             ) : (
               <div ref={setReferenceElement}>
-                <div className="hidden @4xl:flex">
+                <div className="relative hidden @4xl:flex">
                   <Button
                     disabled={disabled}
                     variant="secondary"
-                    prependIcon={icon}
+                    size="md"
+                    stretch="auto"
+                    icon={icon}
                     tabIndex={tabIndex}
-                    className="relative"
-                    size="lg"
-                  >
-                    <>
-                      <div className={`${open ? "text-primary" : "text-secondary"}`}>
-                        <span>{title}</span>
-                      </div>
-                      {isFiltersApplied && (
-                        <span className="absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-accent-primary" />
-                      )}
-                    </>
-                  </Button>
+                    label={title ?? ""}
+                  />
+                  {isFiltersApplied && (
+                    <span className="absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-accent-primary" />
+                  )}
                 </div>
                 <div className="flex @4xl:hidden">
                   <Button
-                    disabled={disabled}
-                    ref={setReferenceElement}
                     variant="secondary"
+                    size="md"
+                    stretch="auto"
+                    label={typeof title === "string" ? title : "Filters"}
+                    disabled={disabled}
                     tabIndex={tabIndex}
-                    size="lg"
-                  >
-                    {miniIcon || title}
-                  </Button>
+                  />
                 </div>
               </div>
             )}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx
index 14f7490946..6edf182d77 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx
@@ -6,7 +6,7 @@
 
 import { ISSUE_LAYOUTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { ChevronDownIcon } from "@plane/propel/icons";
 import type { EIssueLayoutTypes } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
@@ -29,12 +29,19 @@ export function MobileLayoutSelection({
       className="flex flex-grow justify-center text-13 text-secondary"
       placement="bottom-start"
       customButton={
-        <Button variant="secondary" className="relative px-2">
-          {activeLayout && (
-            <IssueLayoutIcon layout={activeLayout} size={14} strokeWidth={2} className={`h-3.5 w-3.5`} />
-          )}
-          <ChevronDownIcon className="my-auto size-3 text-secondary" strokeWidth={2} />
-        </Button>
+        <Button
+          variant="secondary"
+          size="md"
+          stretch="auto"
+          icon={
+            activeLayout ? (
+              <IssueLayoutIcon layout={activeLayout} size={14} strokeWidth={2} className="h-3.5 w-3.5" />
+            ) : (
+              <ChevronDownIcon className="my-auto size-3 text-secondary" strokeWidth={2} />
+            )
+          }
+          label={t("common.layout")}
+        />
       }
       customButtonClassName="flex flex-grow justify-center text-secondary text-13"
       closeOnSelect
diff --git a/apps/web/core/components/issues/issue-modal/form.tsx b/apps/web/core/components/issues/issue-modal/form.tsx
index a9ea0faa35..0ed2505fd5 100644
--- a/apps/web/core/components/issues/issue-modal/form.tsx
+++ b/apps/web/core/components/issues/issue-modal/form.tsx
@@ -16,7 +16,7 @@ import { ETabIndices, DEFAULT_WORK_ITEM_FORM_VALUES } from "@plane/constants";
 import type { EditorRefApi } from "@plane/editor";
 // i18n
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TIssue, TWorkspaceDraftIssue } from "@plane/types";
 // hooks
@@ -467,7 +467,9 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
                     <div tabIndex={getIndex("discard_button")}>
                       <Button
                         variant="secondary"
-                        size="lg"
+                        size="md"
+                        stretch="auto"
+                        label={t("discard")}
                         onClick={() => {
                           if (editorRef.current?.isEditorReadyToDiscard()) {
                             onClose();
@@ -479,34 +481,32 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
                             });
                           }
                         }}
-                      >
-                        {t("discard")}
-                      </Button>
+                      />
                     </div>
                     <div tabIndex={isDraft ? getIndex("submit_button") : getIndex("draft_button")}>
                       <Button
-                        variant={moveToIssue ? "secondary" : "primary"}
-                        size="lg"
+                        variant="primary"
+                        size="md"
+                        stretch="auto"
+                        label={isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
                         type="submit"
                         ref={submitBtnRef}
                         loading={isSubmitting}
                         disabled={isDisabled}
-                      >
-                        {isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
-                      </Button>
+                      />
                     </div>
 
                     {moveToIssue && (
                       <Button
                         variant="primary"
+                        size="md"
+                        stretch="auto"
+                        label={t("add_to_project")}
                         type="button"
                         loading={isMoving}
                         onClick={handleMoveToProjects}
                         disabled={isMoving}
-                        size="lg"
-                      >
-                        {t("add_to_project")}
-                      </Button>
+                      />
                     )}
                   </div>
                 </div>
diff --git a/apps/web/core/components/labels/create-update-label-inline.tsx b/apps/web/core/components/labels/create-update-label-inline.tsx
index 6be483cd1a..ac0eb14ab1 100644
--- a/apps/web/core/components/labels/create-update-label-inline.tsx
+++ b/apps/web/core/components/labels/create-update-label-inline.tsx
@@ -13,7 +13,7 @@ import { Popover, Transition } from "@headlessui/react";
 // plane imports
 import { getRandomLabelColor, LABEL_COLOR_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IIssueLabel } from "@plane/types";
 import { Input } from "@plane/ui";
@@ -234,19 +234,18 @@ export const CreateUpdateLabelInline = observer(
               )}
             />
           </div>
-          <Button variant="secondary" onClick={() => handleClose()}>
-            {t("cancel")}
-          </Button>
+          <Button variant="secondary" size="sm" stretch="auto" label={t("cancel")} onClick={() => handleClose()} />
           <Button
             variant="primary"
+            size="sm"
+            stretch="auto"
+            label={isUpdating ? (isSubmitting ? t("updating") : t("update")) : isSubmitting ? t("adding") : t("add")}
             onClick={(e) => {
               e.preventDefault();
               handleSubmit(handleFormSubmit)();
             }}
             loading={isSubmitting}
-          >
-            {isUpdating ? (isSubmitting ? t("updating") : t("update")) : isSubmitting ? t("adding") : t("add")}
-          </Button>
+          />
         </div>
         {errors.name?.message && <p className="p-0.5 pl-8 text-13 text-danger-primary">{errors.name?.message}</p>}
       </>
diff --git a/apps/web/core/components/labels/project-setting-label-list.tsx b/apps/web/core/components/labels/project-setting-label-list.tsx
index 6bb506970a..80c99a264a 100644
--- a/apps/web/core/components/labels/project-setting-label-list.tsx
+++ b/apps/web/core/components/labels/project-setting-label-list.tsx
@@ -10,7 +10,7 @@ import { useParams } from "next/navigation";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { EmptyStateCompact } from "@plane/propel/empty-state";
 import type { IIssueLabel } from "@plane/types";
 import { Loader } from "@plane/ui";
@@ -85,9 +85,7 @@ export const ProjectSettingsLabelList = observer(function ProjectSettingsLabelLi
         description={t("project_settings.labels.description")}
         control={
           isEditable && (
-            <Button variant="primary" size="lg" onClick={newLabel}>
-              {t("common.add_label")}
-            </Button>
+            <Button variant="primary" size="md" stretch="auto" label={t("common.add_label")} onClick={newLabel} />
           )
         }
       />
diff --git a/apps/web/core/components/license/modal/card/checkout-button.tsx b/apps/web/core/components/license/modal/card/checkout-button.tsx
index 01de02caf8..d21d7bcd83 100644
--- a/apps/web/core/components/license/modal/card/checkout-button.tsx
+++ b/apps/web/core/components/license/modal/card/checkout-button.tsx
@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 // plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { EProductSubscriptionEnum, IPaymentProduct, TSubscriptionPrice } from "@plane/types";
 import { Loader } from "@plane/ui";
 // local imports
@@ -73,23 +73,26 @@ export const PlanCheckoutButton = observer(function PlanCheckoutButton(props: Pr
         </Loader>
       ) : (
         <div className="flex w-full flex-col items-center justify-center space-y-4">
-          <Button
-            variant="primary"
-            size="lg"
-            className="w-56"
-            onClick={() => {
-              if (product && price.id) {
-                handleCheckout({
-                  planVariant,
-                  productId: product.id,
-                  priceId: price.id,
-                });
+          <span className="w-56">
+            <Button
+              variant="primary"
+              size="md"
+              stretch="auto"
+              label={
+                upgradeLoaderType === planVariant ? "Redirecting to Stripe" : (upgradeCTA ?? `Upgrade to ${planeName}`)
               }
-            }}
-            disabled={!!upgradeLoaderType}
-          >
-            {upgradeLoaderType === planVariant ? "Redirecting to Stripe" : (upgradeCTA ?? `Upgrade to ${planeName}`)}
-          </Button>
+              onClick={() => {
+                if (product && price.id) {
+                  handleCheckout({
+                    planVariant,
+                    productId: product.id,
+                    priceId: price.id,
+                  });
+                }
+              }}
+              disabled={!!upgradeLoaderType}
+            />
+          </span>
           {isTrialAllowed && !isSelfHosted && (
             <div className="mt-1 h-3">
               {renderTrialButton &&
diff --git a/apps/web/core/components/license/modal/card/talk-to-sales.tsx b/apps/web/core/components/license/modal/card/talk-to-sales.tsx
index c12ee70422..7869d7ddaa 100644
--- a/apps/web/core/components/license/modal/card/talk-to-sales.tsx
+++ b/apps/web/core/components/license/modal/card/talk-to-sales.tsx
@@ -7,10 +7,9 @@
 import { observer } from "mobx-react";
 // types
 // plane imports
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { EProductSubscriptionEnum, IPaymentProduct, TSubscriptionPrice } from "@plane/types";
 import { Loader } from "@plane/ui";
-import { cn } from "@plane/utils";
 // local imports
 import { BasePaidPlanCard } from "./base-paid-plan-card";
 
@@ -72,9 +71,16 @@ export const TalkToSalesCard = observer(function TalkToSalesCard(props: TalkToSa
         </Loader>
       ) : (
         <div className="flex w-full flex-col items-center justify-center">
-          <a href={href} target="_blank" className={cn(getButtonStyling("primary", "lg"), "w-56")} rel="noreferrer">
-            Talk to Sales
-          </a>
+          <span className="w-56">
+            <Button
+              variant="primary"
+              size="md"
+              stretch="full"
+              label="Talk to Sales"
+              nativeButton={false}
+              render={<a href={href} target="_blank" rel="noreferrer" />}
+            />
+          </span>
           {isTrialAllowed && !isSelfHosted && (
             <div className="mt-4 h-4">
               {renderTrialButton &&
diff --git a/apps/web/core/components/modules/archived-modules/modal.tsx b/apps/web/core/components/modules/archived-modules/modal.tsx
index 58067d62c6..5ab959a6d9 100644
--- a/apps/web/core/components/modules/archived-modules/modal.tsx
+++ b/apps/web/core/components/modules/archived-modules/modal.tsx
@@ -6,7 +6,7 @@
 
 import { useState } from "react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // hooks
@@ -69,12 +69,16 @@ export function ArchiveModuleModal(props: Props) {
           Are you sure you want to archive the module? All your archives can be restored later.
         </p>
         <div className="mt-3 flex justify-end gap-2">
-          <Button variant="secondary" size="lg" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button variant="primary" size="lg" tabIndex={1} onClick={handleArchiveModule} loading={isArchiving}>
-            {isArchiving ? "Archiving" : "Archive"}
-          </Button>
+          <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={onClose} />
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={isArchiving ? "Archiving" : "Archive"}
+            tabIndex={1}
+            onClick={handleArchiveModule}
+            loading={isArchiving}
+          />
         </div>
       </div>
     </ModalCore>
diff --git a/apps/web/core/components/modules/dropdowns/order-by.tsx b/apps/web/core/components/modules/dropdowns/order-by.tsx
index b33cf62cd3..0e615d55df 100644
--- a/apps/web/core/components/modules/dropdowns/order-by.tsx
+++ b/apps/web/core/components/modules/dropdowns/order-by.tsx
@@ -7,15 +7,11 @@
 import { ArrowDownWideNarrow, ArrowUpWideNarrow } from "lucide-react";
 import { MODULE_ORDER_BY_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 import { CheckIcon, ChevronDownIcon } from "@plane/propel/icons";
 import type { TModuleOrderByOptions } from "@plane/types";
 // ui
 import { CustomMenu } from "@plane/ui";
-// helpers
-import { cn } from "@plane/utils";
-// types
-// constants
 
 type Props = {
   onChange: (value: TModuleOrderByOptions) => void;
@@ -35,11 +31,11 @@ export function ModuleOrderByDropdown(props: Props) {
   return (
     <CustomMenu
       customButton={
-        <div className={cn(getButtonStyling("secondary", "lg"), "px-2 text-tertiary")}>
+        <Button variant="secondary" size="md" stretch="auto" render={<div />}>
           {!isDescending ? <ArrowUpWideNarrow className="size-3" /> : <ArrowDownWideNarrow className="size-3" />}
           {orderByDetails && t(orderByDetails?.i18n_label)}
           <ChevronDownIcon className="size-3" strokeWidth={2} />
-        </div>
+        </Button>
       }
       placement="bottom-end"
       maxHeight="lg"
diff --git a/apps/web/core/components/modules/form.tsx b/apps/web/core/components/modules/form.tsx
index a958bc486c..c906876020 100644
--- a/apps/web/core/components/modules/form.tsx
+++ b/apps/web/core/components/modules/form.tsx
@@ -9,7 +9,7 @@ import { Controller, useForm } from "react-hook-form";
 // plane imports
 import { ETabIndices } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IModule } from "@plane/types";
 // ui
 import { Input, TextArea } from "@plane/ui";
@@ -233,18 +233,31 @@ export function ModuleForm(props: Props) {
         </div>
       </div>
       <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
-        <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={getIndex("cancel")}>
-          {t("cancel")}
-        </Button>
-        <Button variant="primary" size="lg" type="submit" loading={isSubmitting} tabIndex={getIndex("submit")}>
-          {status
-            ? isSubmitting
-              ? t("updating")
-              : t("project_module.update_module")
-            : isSubmitting
-              ? t("creating")
-              : t("project_module.create_module")}
-        </Button>
+        <Button
+          variant="secondary"
+          size="md"
+          stretch="auto"
+          label={t("cancel")}
+          onClick={handleClose}
+          tabIndex={getIndex("cancel")}
+        />
+        <Button
+          variant="primary"
+          size="md"
+          stretch="auto"
+          label={
+            status
+              ? isSubmitting
+                ? t("updating")
+                : t("project_module.update_module")
+              : isSubmitting
+                ? t("creating")
+                : t("project_module.create_module")
+          }
+          type="submit"
+          loading={isSubmitting}
+          tabIndex={getIndex("submit")}
+        />
       </div>
     </form>
   );
diff --git a/apps/web/core/components/modules/links/create-update-modal.tsx b/apps/web/core/components/modules/links/create-update-modal.tsx
index b99254aefd..e5cf6f9edf 100644
--- a/apps/web/core/components/modules/links/create-update-modal.tsx
+++ b/apps/web/core/components/modules/links/create-update-modal.tsx
@@ -7,7 +7,7 @@
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 // plane types
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { ILinkDetails, ModuleLink } from "@plane/types";
 // plane ui
@@ -137,12 +137,15 @@ export function CreateUpdateModuleLinkModal(props: Props) {
           </div>
         </div>
         <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
-          <Button variant="secondary" size="lg" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
-            {data ? (isSubmitting ? "Updating link" : "Update link") : isSubmitting ? "Adding link" : "Add link"}
-          </Button>
+          <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={onClose} />
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={data ? (isSubmitting ? "Updating link" : "Update link") : isSubmitting ? "Adding link" : "Add link"}
+            type="submit"
+            loading={isSubmitting}
+          />
         </div>
       </form>
     </ModalCore>
diff --git a/apps/web/core/components/onboarding/create-workspace.tsx b/apps/web/core/components/onboarding/create-workspace.tsx
index 34f7a937ce..02a6b0f4b0 100644
--- a/apps/web/core/components/onboarding/create-workspace.tsx
+++ b/apps/web/core/components/onboarding/create-workspace.tsx
@@ -11,7 +11,7 @@ import { Controller, useForm } from "react-hook-form";
 import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
 // types
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUser, IWorkspace, TOnboardingSteps } from "@plane/types";
 // ui
@@ -104,17 +104,15 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
     <div className="space-y-4">
       {!!invitedWorkspaces && (
         <>
-          <Button
-            variant="ghost"
-            size="xl"
-            className="flex w-full items-center gap-2 bg-surface-2 text-14"
-            onClick={handleCurrentViewChange}
-          >
-            I want to join invited workspaces{" "}
-            <span className="flex h-4 w-4 items-center justify-center rounded-xs bg-accent-primary/80 text-11 font-medium text-on-color">
-              {invitedWorkspaces}
-            </span>
-          </Button>
+          <span className="flex w-full items-center gap-2 bg-surface-2 text-14">
+            <Button
+              variant="ghost"
+              size="lg"
+              stretch="full"
+              onClick={handleCurrentViewChange}
+              label={`I want to join invited workspaces (${invitedWorkspaces})`}
+            />
+          </span>
           <div className="mx-auto mt-4 flex items-center sm:w-96">
             <hr className="w-full border-strong" />
             <p className="mx-3 flex-shrink-0 text-center text-13 text-placeholder">or</p>
@@ -264,9 +262,15 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
             )}
           </div>
         </div>
-        <Button variant="primary" type="submit" size="xl" className="w-full" disabled={isButtonDisabled}>
-          {isSubmitting ? <Spinner height="20px" width="20px" /> : t("workspace_creation.button.default")}
-        </Button>
+        <Button
+          variant="primary"
+          type="submit"
+          size="lg"
+          disabled={isButtonDisabled}
+          stretch="full"
+          loading={isSubmitting}
+          label={t("workspace_creation.button.default")}
+        />
       </form>
     </div>
   );
diff --git a/apps/web/core/components/onboarding/invitations.tsx b/apps/web/core/components/onboarding/invitations.tsx
index 09152433c1..70878a4056 100644
--- a/apps/web/core/components/onboarding/invitations.tsx
+++ b/apps/web/core/components/onboarding/invitations.tsx
@@ -8,7 +8,7 @@ import { useState } from "react";
 // plane imports
 import { ROLE } from "@plane/constants";
 // types
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IWorkspaceMemberInvitation } from "@plane/types";
 // ui
 import { Checkbox } from "@makeplane/propel/components/checkbox";
@@ -100,27 +100,28 @@ export function Invitations(props: Props) {
       </div>
       <Button
         variant="primary"
-        size="xl"
-        className="w-full"
+        size="lg"
         onClick={submitInvitations}
         disabled={isJoiningWorkspaces || !invitationsRespond.length}
-      >
-        {isJoiningWorkspaces ? <Spinner height="20px" width="20px" /> : "Continue to workspace"}
-      </Button>
+        stretch="full"
+        loading={isJoiningWorkspaces}
+        label={"Continue to workspace"}
+      />
       <div className="mx-auto mt-4 flex items-center sm:w-96">
         <hr className="w-full border-strong" />
         <p className="mx-3 flex-shrink-0 text-center text-13 text-placeholder">or</p>
         <hr className="w-full border-strong" />
       </div>
-      <Button
-        variant="ghost"
-        size="xl"
-        className="w-full bg-surface-2 text-14"
-        onClick={handleCurrentViewChange}
-        disabled={isJoiningWorkspaces}
-      >
-        Create your own workspace
-      </Button>
+      <span className="w-full bg-surface-2 text-14">
+        <Button
+          variant="ghost"
+          size="lg"
+          stretch="full"
+          label="Create your own workspace"
+          onClick={handleCurrentViewChange}
+          disabled={isJoiningWorkspaces}
+        />
+      </span>
     </div>
   ) : (
     <div>No Invitations found</div>
diff --git a/apps/web/core/components/onboarding/invite-members.tsx b/apps/web/core/components/onboarding/invite-members.tsx
index b73c87bb8b..ec19e57e13 100644
--- a/apps/web/core/components/onboarding/invite-members.tsx
+++ b/apps/web/core/components/onboarding/invite-members.tsx
@@ -24,7 +24,7 @@ import type { EUserPermissions } from "@plane/constants";
 import { ROLE, ROLE_DETAILS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // types
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { PlusIcon, CheckIcon, ChevronDownIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUser, IWorkspace } from "@plane/types";
@@ -386,15 +386,13 @@ export function InviteMembers(props: Props) {
               <Button
                 variant="primary"
                 type="submit"
-                size="xl"
-                className="w-full"
+                size="lg"
                 disabled={isInvitationDisabled || !isValid || isSubmitting}
-              >
-                {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
-              </Button>
-              <Button variant="ghost" size="xl" className="w-full" onClick={nextStep}>
-                I’ll do it later
-              </Button>
+                stretch="full"
+                loading={isSubmitting}
+                label={"Continue"}
+              />
+              <Button variant="ghost" size="lg" stretch="full" label="I’ll do it later" onClick={nextStep} />
             </div>
           </form>
         </div>
diff --git a/apps/web/core/components/onboarding/profile-setup.tsx b/apps/web/core/components/onboarding/profile-setup.tsx
index 1880323e8f..5f2a88718f 100644
--- a/apps/web/core/components/onboarding/profile-setup.tsx
+++ b/apps/web/core/components/onboarding/profile-setup.tsx
@@ -11,7 +11,7 @@ import { Eye, EyeOff } from "lucide-react";
 import { E_PASSWORD_STRENGTH } from "@plane/constants";
 // types
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUser, TUserProfile, TOnboardingSteps } from "@plane/types";
 // ui
@@ -540,9 +540,15 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
               </div>
             </>
           )}
-          <Button variant="primary" type="submit" size="xl" className="w-full" disabled={isButtonDisabled}>
-            {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
-          </Button>
+          <Button
+            variant="primary"
+            type="submit"
+            size="lg"
+            disabled={isButtonDisabled}
+            stretch="full"
+            loading={isSubmitting}
+            label={"Continue"}
+          />
         </form>
       </div>
     </div>
diff --git a/apps/web/core/components/onboarding/steps/profile/root.tsx b/apps/web/core/components/onboarding/steps/profile/root.tsx
index 5e71c802f3..1a58b36ba2 100644
--- a/apps/web/core/components/onboarding/steps/profile/root.tsx
+++ b/apps/web/core/components/onboarding/steps/profile/root.tsx
@@ -10,7 +10,7 @@ import { Controller, useForm } from "react-hook-form";
 import { ImageIcon } from "lucide-react";
 // plane imports
 import { E_PASSWORD_STRENGTH } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUser } from "@plane/types";
 import { EOnboardingSteps } from "@plane/types";
@@ -247,9 +247,7 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
         )}
       </div>
       {/* Continue Button */}
-      <Button variant="primary" type="submit" className="w-full" size="xl" disabled={isButtonDisabled}>
-        Continue
-      </Button>
+      <Button variant="primary" size="lg" stretch="full" label="Continue" type="submit" disabled={isButtonDisabled} />
 
       {/* Marketing Consent */}
       {!instanceConfig?.is_self_managed && (
diff --git a/apps/web/core/components/onboarding/steps/role/root.tsx b/apps/web/core/components/onboarding/steps/role/root.tsx
index 43029d1cfd..358217b378 100644
--- a/apps/web/core/components/onboarding/steps/role/root.tsx
+++ b/apps/web/core/components/onboarding/steps/role/root.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { Box, PenTool, Rocket, Monitor, RefreshCw } from "lucide-react";
 // plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { CheckIcon, ViewsIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TUserProfile } from "@plane/types";
@@ -145,12 +145,10 @@ export const RoleSetupStep = observer(function RoleSetupStep({ handleStepChange
       </div>
       {/* Action Buttons */}
       <div className="space-y-3">
-        <Button variant="primary" type="submit" className="w-full" size="xl" disabled={isButtonDisabled}>
-          Continue
-        </Button>
-        <Button variant="ghost" onClick={handleSkip} className="w-full text-tertiary" size="xl">
-          Skip
-        </Button>
+        <Button variant="primary" size="lg" stretch="full" label="Continue" type="submit" disabled={isButtonDisabled} />
+        <span className="w-full text-tertiary">
+          <Button variant="ghost" size="lg" stretch="full" label="Skip" onClick={handleSkip} />
+        </span>
       </div>
     </form>
   );
diff --git a/apps/web/core/components/onboarding/steps/team/root.tsx b/apps/web/core/components/onboarding/steps/team/root.tsx
index 536110fd03..8c28a9f912 100644
--- a/apps/web/core/components/onboarding/steps/team/root.tsx
+++ b/apps/web/core/components/onboarding/steps/team/root.tsx
@@ -22,7 +22,7 @@ import { Listbox } from "@headlessui/react";
 import type { EUserPermissions } from "@plane/constants";
 import { ROLE, ROLE_DETAILS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { PlusIcon, CheckIcon, ChevronDownIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EOnboardingSteps } from "@plane/types";
@@ -381,15 +381,13 @@ export const InviteTeamStep = observer(function InviteTeamStep(props: Props) {
         <Button
           variant="primary"
           type="submit"
-          size="xl"
-          className="w-full"
+          size="lg"
           disabled={isInvitationDisabled || !isValid || isSubmitting}
-        >
-          {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
-        </Button>
-        <Button variant="ghost" size="xl" className="w-full" onClick={nextStep}>
-          I’ll do it later
-        </Button>
+          stretch="full"
+          loading={isSubmitting}
+          label={"Continue"}
+        />
+        <Button variant="ghost" size="lg" stretch="full" label="I’ll do it later" onClick={nextStep} />
       </div>
     </form>
   );
diff --git a/apps/web/core/components/onboarding/steps/usecase/root.tsx b/apps/web/core/components/onboarding/steps/usecase/root.tsx
index 8908adaf3b..1e0303f079 100644
--- a/apps/web/core/components/onboarding/steps/usecase/root.tsx
+++ b/apps/web/core/components/onboarding/steps/usecase/root.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 // plane imports
 import { USE_CASES } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { CheckIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TUserProfile } from "@plane/types";
@@ -150,12 +150,8 @@ export const UseCaseSetupStep = observer(function UseCaseSetupStep({ handleStepC
 
       {/* Action Buttons */}
       <div className="space-y-3">
-        <Button variant="primary" type="submit" className="w-full" size="xl" disabled={isButtonDisabled}>
-          Continue
-        </Button>
-        <Button variant="ghost" onClick={handleSkip} className="w-full" size="xl">
-          Skip
-        </Button>
+        <Button variant="primary" size="lg" stretch="full" label="Continue" type="submit" disabled={isButtonDisabled} />
+        <Button variant="ghost" size="lg" stretch="full" label="Skip" onClick={handleSkip} />
       </div>
     </form>
   );
diff --git a/apps/web/core/components/onboarding/steps/workspace/create.tsx b/apps/web/core/components/onboarding/steps/workspace/create.tsx
index f9c32a91f2..b94a600b8b 100644
--- a/apps/web/core/components/onboarding/steps/workspace/create.tsx
+++ b/apps/web/core/components/onboarding/steps/workspace/create.tsx
@@ -11,7 +11,7 @@ import { CircleCheck } from "lucide-react";
 // plane imports
 import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUser, IWorkspace } from "@plane/types";
 import { Spinner } from "@plane/ui";
@@ -290,13 +290,23 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
         </div>
       </div>
       <div className="flex flex-col gap-4">
-        <Button variant="primary" type="submit" size="xl" className="w-full" disabled={isButtonDisabled}>
-          {isSubmitting ? <Spinner height="20px" width="20px" /> : t("workspace_creation.button.default")}
-        </Button>
+        <Button
+          variant="primary"
+          type="submit"
+          size="lg"
+          disabled={isButtonDisabled}
+          stretch="full"
+          loading={isSubmitting}
+          label={t("workspace_creation.button.default")}
+        />
         {hasInvitations && (
-          <Button variant="ghost" size="xl" className="w-full" onClick={handleCurrentViewChange}>
-            Join existing workspace
-          </Button>
+          <Button
+            variant="ghost"
+            size="lg"
+            stretch="full"
+            label="Join existing workspace"
+            onClick={handleCurrentViewChange}
+          />
         )}
       </div>
     </form>
diff --git a/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx b/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx
index 92153459c0..fc0b7f2e19 100644
--- a/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx
+++ b/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx
@@ -7,7 +7,7 @@
 import { useState } from "react";
 // plane imports
 import { ROLE } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IWorkspaceMemberInvitation } from "@plane/types";
 import { Checkbox } from "@makeplane/propel/components/checkbox";
 import { Spinner } from "@plane/ui";
@@ -102,22 +102,21 @@ export function WorkspaceJoinInvitesStep(props: Props) {
       <div className="flex flex-col gap-4">
         <Button
           variant="primary"
-          size="xl"
-          className="w-full"
+          size="lg"
           onClick={submitInvitations}
           disabled={isJoiningWorkspaces || !invitationsRespond.length}
-        >
-          {isJoiningWorkspaces ? <Spinner height="20px" width="20px" /> : "Continue"}
-        </Button>
+          stretch="full"
+          loading={isJoiningWorkspaces}
+          label={"Continue"}
+        />
         <Button
           variant="ghost"
-          size="xl"
-          className="w-full"
+          size="lg"
+          stretch="full"
+          label="Create new workspace"
           onClick={handleCurrentViewChange}
           disabled={isJoiningWorkspaces}
-        >
-          Create new workspace
-        </Button>
+        />
       </div>
     </div>
   ) : (
diff --git a/apps/web/core/components/onboarding/switch-account-modal.tsx b/apps/web/core/components/onboarding/switch-account-modal.tsx
index aa80f8e330..2b1a793c33 100644
--- a/apps/web/core/components/onboarding/switch-account-modal.tsx
+++ b/apps/web/core/components/onboarding/switch-account-modal.tsx
@@ -10,7 +10,7 @@ import { useTheme } from "next-themes";
 import { ArrowRightLeft } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 // hooks
 import { useUser } from "@/hooks/store/user";
@@ -104,9 +104,14 @@ export function SwitchAccountModal(props: Props) {
                   </div>
                 </div>
                 <div className="mb-2 flex items-center justify-end gap-3 p-4 sm:px-6">
-                  <Button variant="secondary" size="lg" onClick={handleSwitchAccount} disabled={switchingAccount}>
-                    {switchingAccount ? "Switching..." : "Switch account"}
-                  </Button>
+                  <Button
+                    variant="secondary"
+                    size="md"
+                    stretch="auto"
+                    label={switchingAccount ? "Switching..." : "Switch account"}
+                    onClick={handleSwitchAccount}
+                    disabled={switchingAccount}
+                  />
                 </div>
               </Dialog.Panel>
             </Transition.Child>
diff --git a/apps/web/core/components/onboarding/tour/root.tsx b/apps/web/core/components/onboarding/tour/root.tsx
index db87b7150b..4180221e35 100644
--- a/apps/web/core/components/onboarding/tour/root.tsx
+++ b/apps/web/core/components/onboarding/tour/root.tsx
@@ -7,7 +7,7 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { CloseIcon, PlaneLockup } from "@plane/propel/icons";
 // assets
 import CyclesTour from "@/app/assets/onboarding/cycles.webp?url";
@@ -109,12 +109,13 @@ export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps)
                 <div className="mt-12 flex items-center gap-6">
                   <Button
                     variant="primary"
+                    size="sm"
+                    stretch="auto"
+                    label="Take a Product Tour"
                     onClick={() => {
                       setStep("work-items");
                     }}
-                  >
-                    Take a Product Tour
-                  </Button>
+                  />
                   <button
                     type="button"
                     className="bg-transparent text-11 font-medium text-accent-primary outline-subtle-1"
@@ -153,26 +154,35 @@ export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps)
               <div className="mt-3 flex h-full items-end justify-between gap-4">
                 <div className="flex items-center gap-4">
                   {currentStep?.prevStep && (
-                    <Button variant="secondary" onClick={() => setStep(currentStep.prevStep ?? "welcome")}>
-                      Back
-                    </Button>
+                    <Button
+                      variant="secondary"
+                      size="sm"
+                      stretch="auto"
+                      label="Back"
+                      onClick={() => setStep(currentStep.prevStep ?? "welcome")}
+                    />
                   )}
                   {currentStep?.nextStep && (
-                    <Button variant="primary" onClick={() => setStep(currentStep.nextStep ?? "work-items")}>
-                      Next
-                    </Button>
+                    <Button
+                      variant="primary"
+                      size="sm"
+                      stretch="auto"
+                      label="Next"
+                      onClick={() => setStep(currentStep.nextStep ?? "work-items")}
+                    />
                   )}
                 </div>
                 {currentStepIndex === TOUR_STEPS.length - 1 && (
                   <Button
                     variant="primary"
+                    size="sm"
+                    stretch="auto"
+                    label="Create your first project"
                     onClick={() => {
                       onComplete();
                       toggleCreateProjectModal(true);
                     }}
-                  >
-                    Create your first project
-                  </Button>
+                  />
                 )}
               </div>
             </div>
diff --git a/apps/web/core/components/pages/list/order-by.tsx b/apps/web/core/components/pages/list/order-by.tsx
index 2e9f22f0ad..0fd53c5c86 100644
--- a/apps/web/core/components/pages/list/order-by.tsx
+++ b/apps/web/core/components/pages/list/order-by.tsx
@@ -6,7 +6,7 @@
 
 import { ArrowDownWideNarrow, ArrowUpWideNarrow } from "lucide-react";
 // plane imports
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 // types
 import { CheckIcon } from "@plane/propel/icons";
 import type { TPageFiltersSortBy, TPageFiltersSortKey } from "@plane/types";
@@ -36,10 +36,10 @@ export function PageOrderByDropdown(props: Props) {
   return (
     <CustomMenu
       customButton={
-        <div className={getButtonStyling("secondary", "lg")}>
+        <Button variant="secondary" size="md" stretch="auto" render={<div />}>
           {!isDescending ? <ArrowUpWideNarrow className="size-3" /> : <ArrowDownWideNarrow className="size-3" />}
           {orderByDetails?.label}
-        </div>
+        </Button>
       }
       placement="bottom-end"
       maxHeight="lg"
diff --git a/apps/web/core/components/pages/modals/export-page-modal.tsx b/apps/web/core/components/pages/modals/export-page-modal.tsx
index cd21b2b5fa..90f7e46ae5 100644
--- a/apps/web/core/components/pages/modals/export-page-modal.tsx
+++ b/apps/web/core/components/pages/modals/export-page-modal.tsx
@@ -12,7 +12,7 @@ import { useParams } from "react-router";
 // plane editor
 import type { EditorRefApi } from "@plane/editor";
 // plane ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { CustomSelect, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // components
@@ -282,12 +282,15 @@ export function ExportPageModal(props: Props) {
           </div>
         </div>
         <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
-          <Button variant="secondary" size="lg" onClick={handleClose}>
-            Cancel
-          </Button>
-          <Button variant="primary" size="lg" loading={isExporting} onClick={handleExport}>
-            {isExporting ? "Exporting" : "Export"}
-          </Button>
+          <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={handleClose} />
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={isExporting ? "Exporting" : "Export"}
+            loading={isExporting}
+            onClick={handleExport}
+          />
         </div>
       </div>
     </ModalCore>
diff --git a/apps/web/core/components/pages/modals/page-form.tsx b/apps/web/core/components/pages/modals/page-form.tsx
index 810e838c15..769a775c46 100644
--- a/apps/web/core/components/pages/modals/page-form.tsx
+++ b/apps/web/core/components/pages/modals/page-form.tsx
@@ -11,7 +11,7 @@ import type { LucideIcon } from "lucide-react";
 // plane imports
 import { ETabIndices, EPageAccess } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
 import { GlobeIcon, LockIcon, PageIcon } from "@plane/propel/icons";
 import type { ISvgIcons } from "@plane/propel/icons";
@@ -144,19 +144,24 @@ export function PageForm(props: Props) {
           <h6 className="text-11 font-medium">{t(i18n_access_label || "")}</h6>
         </div>
         <div className="flex items-center justify-end gap-2">
-          <Button variant="secondary" size="lg" onClick={handleModalClose} tabIndex={getIndex("cancel")}>
-            Cancel
-          </Button>
+          <Button
+            variant="secondary"
+            size="md"
+            stretch="auto"
+            label="Cancel"
+            onClick={handleModalClose}
+            tabIndex={getIndex("cancel")}
+          />
           <Button
             variant="primary"
-            size="lg"
+            size="md"
+            stretch="auto"
+            label={isSubmitting ? "Creating" : "Create Page"}
             type="submit"
             loading={isSubmitting}
             disabled={isTitleLengthMoreThan255Character}
             tabIndex={getIndex("submit")}
-          >
-            {isSubmitting ? "Creating" : "Create Page"}
-          </Button>
+          />
         </div>
       </div>
     </form>
diff --git a/apps/web/core/components/pages/version/main-content.tsx b/apps/web/core/components/pages/version/main-content.tsx
index 5cd3b76794..092c55b393 100644
--- a/apps/web/core/components/pages/version/main-content.tsx
+++ b/apps/web/core/components/pages/version/main-content.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import useSWR from "swr";
 import { EyeIcon, TriangleAlert } from "lucide-react";
 // plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TPageVersion } from "@plane/types";
 import { renderFormattedDate, renderFormattedTime } from "@plane/utils";
@@ -93,9 +93,14 @@ export const PageVersionsMainContent = observer(function PageVersionsMainContent
               <h6 className="text-16 font-semibold">Something went wrong!</h6>
               <p className="text-13 text-tertiary">The version could not be loaded, please try again.</p>
             </div>
-            <Button variant="link" onClick={handleRetry} loading={isRetrying}>
-              Try again
-            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              stretch="auto"
+              label="Try again"
+              onClick={handleRetry}
+              loading={isRetrying}
+            />
           </div>
         </div>
       ) : (
@@ -113,9 +118,16 @@ export const PageVersionsMainContent = observer(function PageVersionsMainContent
               </span>
             </div>
             {restoreEnabled && (
-              <Button variant="primary" className="flex-shrink-0" onClick={handleRestoreVersion} loading={isRestoring}>
-                {isRestoring ? "Restoring" : "Restore"}
-              </Button>
+              <span className="flex-shrink-0">
+                <Button
+                  variant="primary"
+                  size="sm"
+                  stretch="auto"
+                  label={isRestoring ? "Restoring" : "Restore"}
+                  onClick={handleRestoreVersion}
+                  loading={isRestoring}
+                />
+              </span>
             )}
           </div>
           <div className="vertical-scrollbar scrollbar-sm h-full overflow-y-scroll pt-8">
diff --git a/apps/web/core/components/profile/activity/download-button.tsx b/apps/web/core/components/profile/activity/download-button.tsx
index d162dbd245..b070508892 100644
--- a/apps/web/core/components/profile/activity/download-button.tsx
+++ b/apps/web/core/components/profile/activity/download-button.tsx
@@ -9,7 +9,7 @@ import { useParams } from "next/navigation";
 // services
 // ui
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 // helpers
 import { renderFormattedPayloadDate } from "@plane/utils";
 import { UserService } from "@/services/user.service";
@@ -58,8 +58,15 @@ export function DownloadActivityButton() {
   };
 
   return (
-    <Button onClick={handleDownload} loading={isDownloading}>
-      {isDownloading ? t("profile.stats.recent_activity.button_loading") : t("profile.stats.recent_activity.button")}
-    </Button>
+    <Button
+      variant="primary"
+      size="sm"
+      stretch="auto"
+      label={
+        isDownloading ? t("profile.stats.recent_activity.button_loading") : t("profile.stats.recent_activity.button")
+      }
+      onClick={handleDownload}
+      loading={isDownloading}
+    />
   );
 }
diff --git a/apps/web/core/components/project-states/create-update/form.tsx b/apps/web/core/components/project-states/create-update/form.tsx
index f3fdec84d6..d41d50ca66 100644
--- a/apps/web/core/components/project-states/create-update/form.tsx
+++ b/apps/web/core/components/project-states/create-update/form.tsx
@@ -6,7 +6,7 @@
 
 import { useEffect, useState } from "react";
 import { TwitterPicker } from "react-color";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IState } from "@plane/types";
 import { Popover, Input, TextArea } from "@plane/ui";
 
@@ -98,12 +98,23 @@ export function StateForm(props: TStateForm) {
         />
 
         <div className="flex items-center space-x-2">
-          <Button onClick={formSubmit} variant="primary" size="lg" disabled={buttonDisabled}>
-            {buttonTitle}
-          </Button>
-          <Button type="button" variant="secondary" size="lg" disabled={buttonDisabled} onClick={onCancel}>
-            Cancel
-          </Button>
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={buttonTitle}
+            onClick={formSubmit}
+            disabled={buttonDisabled}
+          />
+          <Button
+            variant="secondary"
+            size="md"
+            stretch="auto"
+            label="Cancel"
+            type="button"
+            disabled={buttonDisabled}
+            onClick={onCancel}
+          />
         </div>
       </div>
     </div>
diff --git a/apps/web/core/components/project/archive-restore-modal.tsx b/apps/web/core/components/project/archive-restore-modal.tsx
index 0f17ce90f7..de41087a8f 100644
--- a/apps/web/core/components/project/archive-restore-modal.tsx
+++ b/apps/web/core/components/project/archive-restore-modal.tsx
@@ -6,7 +6,7 @@
 
 import { useState } from "react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // hooks
@@ -97,18 +97,16 @@ export function ArchiveRestoreProjectModal(props: Props) {
             : "Restoring a project will activate it and make it visible to all members of the project. Are you sure you want to continue?"}
         </p>
         <div className="mt-3 flex justify-end gap-2">
-          <Button variant="secondary" size="lg" onClick={onClose}>
-            Cancel
-          </Button>
+          <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={onClose} />
           <Button
             variant="primary"
-            size="lg"
+            size="md"
+            stretch="auto"
+            label={archive ? (isLoading ? "Archiving" : "Archive") : isLoading ? "Restoring" : "Restore"}
             tabIndex={1}
             onClick={archive ? handleArchiveProject : handleRestoreProject}
             loading={isLoading}
-          >
-            {archive ? (isLoading ? "Archiving" : "Archive") : isLoading ? "Restoring" : "Restore"}
-          </Button>
+          />
         </div>
       </div>
     </ModalCore>
diff --git a/apps/web/core/components/project/card.tsx b/apps/web/core/components/project/card.tsx
index c9286d15fa..47ab8d1a6a 100644
--- a/apps/web/core/components/project/card.tsx
+++ b/apps/web/core/components/project/card.tsx
@@ -12,7 +12,7 @@ import { ArchiveRestoreIcon, Settings, UserPlus } from "lucide-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel, IS_FAVORITE_MENU_OPEN } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import { LinkIcon, LockIcon, NewTabIcon, TrashIcon, CheckIcon } from "@plane/propel/icons";
 import { setPromiseToast, setToast, TOAST_TYPE } from "@plane/propel/toast";
@@ -353,17 +353,19 @@ export const ProjectCard = observer(function ProjectCard(props: Props) {
                   ))}
                 {!isMemberOfProject && (
                   <div className="flex items-center">
-                    <Button
-                      variant="link"
-                      className="!p-0 font-semibold"
-                      onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        setJoinProjectModal(true);
-                      }}
-                    >
-                      Join
-                    </Button>
+                    <span className="!p-0 font-semibold">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        stretch="auto"
+                        label="Join"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          setJoinProjectModal(true);
+                        }}
+                      />
+                    </span>
                   </div>
                 )}
               </>
diff --git a/apps/web/core/components/project/confirm-project-member-remove.tsx b/apps/web/core/components/project/confirm-project-member-remove.tsx
index 52a7c30600..06cea55a61 100644
--- a/apps/web/core/components/project/confirm-project-member-remove.tsx
+++ b/apps/web/core/components/project/confirm-project-member-remove.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { AlertTriangle } from "lucide-react";
 // types
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IUserLite } from "@plane/types";
 // ui
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
@@ -82,12 +82,18 @@ export const ConfirmProjectMemberRemove = observer(function ConfirmProjectMember
         </div>
       </div>
       <div className="flex justify-end gap-2 p-4 sm:px-6">
-        <Button variant="secondary" size="lg" onClick={handleClose}>
-          Cancel
-        </Button>
-        <Button variant="error-fill" size="lg" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}>
-          {isCurrentUser ? (isDeleteLoading ? "Leaving..." : "Leave") : isDeleteLoading ? "Removing..." : "Remove"}
-        </Button>
+        <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={handleClose} />
+        <Button
+          variant="danger"
+          size="md"
+          stretch="auto"
+          label={
+            isCurrentUser ? (isDeleteLoading ? "Leaving..." : "Leave") : isDeleteLoading ? "Removing..." : "Remove"
+          }
+          tabIndex={1}
+          onClick={handleDeletion}
+          loading={isDeleteLoading}
+        />
       </div>
     </ModalCore>
   );
diff --git a/apps/web/core/components/project/create/project-create-buttons.tsx b/apps/web/core/components/project/create/project-create-buttons.tsx
index ae66ca7191..50a307fcbc 100644
--- a/apps/web/core/components/project/create/project-create-buttons.tsx
+++ b/apps/web/core/components/project/create/project-create-buttons.tsx
@@ -8,7 +8,7 @@ import { useFormContext } from "react-hook-form";
 // plane imports
 import { ETabIndices } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IProject } from "@plane/types";
 // ui
 // helpers
@@ -30,12 +30,23 @@ function ProjectCreateButtons(props: Props) {
 
   return (
     <div className="flex justify-end gap-2 border-t border-subtle py-4">
-      <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={getIndex("cancel")}>
-        {t("common.cancel")}
-      </Button>
-      <Button variant="primary" size="lg" type="submit" loading={isSubmitting} tabIndex={getIndex("submit")}>
-        {isSubmitting ? t("creating") : t("create_project")}
-      </Button>
+      <Button
+        variant="secondary"
+        size="md"
+        stretch="auto"
+        label={t("common.cancel")}
+        onClick={handleClose}
+        tabIndex={getIndex("cancel")}
+      />
+      <Button
+        variant="primary"
+        size="md"
+        stretch="auto"
+        label={isSubmitting ? t("creating") : t("create_project")}
+        type="submit"
+        loading={isSubmitting}
+        tabIndex={getIndex("submit")}
+      />
     </div>
   );
 }
diff --git a/apps/web/core/components/project/delete-project-modal.tsx b/apps/web/core/components/project/delete-project-modal.tsx
index 3155e9f72c..a93eda9775 100644
--- a/apps/web/core/components/project/delete-project-modal.tsx
+++ b/apps/web/core/components/project/delete-project-modal.tsx
@@ -8,7 +8,7 @@ import { useParams } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
 import { AlertTriangle } from "lucide-react";
 // Plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IProject } from "@plane/types";
 import { Input, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
@@ -139,12 +139,16 @@ export function DeleteProjectModal(props: DeleteProjectModal) {
           />
         </div>
         <div className="flex justify-end gap-2">
-          <Button variant="secondary" size="lg" onClick={handleClose}>
-            Cancel
-          </Button>
-          <Button variant="error-fill" size="lg" type="submit" disabled={!canDelete} loading={isSubmitting}>
-            {isSubmitting ? "Deleting" : "Delete project"}
-          </Button>
+          <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={handleClose} />
+          <Button
+            variant="danger"
+            size="md"
+            stretch="auto"
+            label={isSubmitting ? "Deleting" : "Delete project"}
+            type="submit"
+            disabled={!canDelete}
+            loading={isSubmitting}
+          />
         </div>
       </form>
     </ModalCore>
diff --git a/apps/web/core/components/project/dropdowns/filters/member-list.tsx b/apps/web/core/components/project/dropdowns/filters/member-list.tsx
index bb8acd15ec..f50778293e 100644
--- a/apps/web/core/components/project/dropdowns/filters/member-list.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/member-list.tsx
@@ -7,7 +7,7 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { ChevronDownIcon } from "@plane/propel/icons";
 import { EUserProjectRoles, EUserWorkspaceRoles } from "@plane/types";
 // plane ui
@@ -101,10 +101,14 @@ export const MemberListFiltersDropdown = observer(function MemberListFiltersDrop
     <CustomMenu
       customButton={
         <div className="relative">
-          <Button variant="secondary" size="lg" className="flex items-center gap-2">
-            <span>Filters</span>
-            <ChevronDownIcon className="h-3 w-3" />
-          </Button>
+          <Button
+            variant="secondary"
+            size="md"
+            stretch="auto"
+            icon={<ChevronDownIcon className="h-3 w-3" />}
+            iconPosition="end"
+            label="Filters"
+          />
           {appliedFiltersCount > 0 && (
             <div className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-accent-primary" />
           )}
diff --git a/apps/web/core/components/project/dropdowns/order-by.tsx b/apps/web/core/components/project/dropdowns/order-by.tsx
index 5b83e0c287..eb714d0a45 100644
--- a/apps/web/core/components/project/dropdowns/order-by.tsx
+++ b/apps/web/core/components/project/dropdowns/order-by.tsx
@@ -8,7 +8,7 @@ import { ArrowDownWideNarrow } from "lucide-react";
 // plane imports
 import { PROJECT_ORDER_BY_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 import { CheckIcon } from "@plane/propel/icons";
 import type { TProjectOrderByOptions } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
@@ -34,19 +34,10 @@ export function ProjectOrderByDropdown(props: Props) {
     <CustomMenu
       className={`${isMobile ? "flex w-full justify-center" : ""}`}
       customButton={
-        <>
-          {isMobile ? (
-            <div className={getButtonStyling("secondary", "lg")}>
-              <ArrowDownWideNarrow className="size-3.5 shrink-0" strokeWidth={2} />
-              {orderByDetails && t(orderByDetails?.i18n_label)}
-            </div>
-          ) : (
-            <div className={getButtonStyling("secondary", "lg")}>
-              <ArrowDownWideNarrow className="size-3.5 shrink-0" strokeWidth={2} />
-              {orderByDetails && t(orderByDetails?.i18n_label)}
-            </div>
-          )}
-        </>
+        <Button variant="secondary" size="md" stretch={isMobile ? "full" : "auto"} render={<div />}>
+          <ArrowDownWideNarrow className="size-3.5 shrink-0" strokeWidth={2} />
+          {orderByDetails && t(orderByDetails?.i18n_label)}
+        </Button>
       }
       placement="bottom-end"
       closeOnSelect
diff --git a/apps/web/core/components/project/empty-state.tsx b/apps/web/core/components/project/empty-state.tsx
index 4e4bce8388..f12a689bcc 100644
--- a/apps/web/core/components/project/empty-state.tsx
+++ b/apps/web/core/components/project/empty-state.tsx
@@ -6,7 +6,7 @@
 
 import React from "react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 
 type Props = {
   title: string;
@@ -33,14 +33,14 @@ export function EmptyState({ title, description, image, primaryButton, secondary
         <div className="flex items-center gap-4">
           {primaryButton && (
             <Button
-              size="xl"
               variant="primary"
-              prependIcon={primaryButton.icon}
+              size="lg"
+              stretch="auto"
+              label={primaryButton.text}
+              icon={primaryButton.icon}
               onClick={primaryButton.onClick}
               disabled={disabled}
-            >
-              {primaryButton.text}
-            </Button>
+            />
           )}
           {secondaryButton}
         </div>
diff --git a/apps/web/core/components/project/form.tsx b/apps/web/core/components/project/form.tsx
index cfd7ea6e4e..d72e0240b6 100644
--- a/apps/web/core/components/project/form.tsx
+++ b/apps/web/core/components/project/form.tsx
@@ -10,7 +10,7 @@ import { Info } from "lucide-react";
 import { NETWORK_CHOICES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
 import { LockIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
@@ -438,9 +438,15 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
         </div>
         <div className="flex items-center justify-between py-2">
           <>
-            <Button variant="primary" size="lg" type="submit" loading={isLoading} disabled={!isAdmin}>
-              {isLoading ? t("updating") : t("common.update_project")}
-            </Button>
+            <Button
+              variant="primary"
+              size="md"
+              stretch="auto"
+              label={isLoading ? t("updating") : t("common.update_project")}
+              type="submit"
+              loading={isLoading}
+              disabled={!isAdmin}
+            />
             <span className="text-13 text-placeholder italic">
               {t("common.created_on")} {renderFormattedDate(project?.created_at)}
             </span>
diff --git a/apps/web/core/components/project/header.tsx b/apps/web/core/components/project/header.tsx
index e554ab2d19..7776a460f9 100644
--- a/apps/web/core/components/project/header.tsx
+++ b/apps/web/core/components/project/header.tsx
@@ -10,7 +10,7 @@ import { usePathname } from "next/navigation";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { ProjectIcon } from "@plane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
@@ -61,15 +61,13 @@ export const ProjectsBaseHeader = observer(function ProjectsBaseHeader() {
         {isAuthorizedUser && !isArchived ? (
           <Button
             variant="primary"
-            size="lg"
+            size="md"
+            stretch="auto"
             onClick={() => {
               toggleCreateProjectModal(true);
             }}
-            className="items-center gap-1"
-          >
-            <span className="hidden sm:inline-block">{t("workspace_projects.create.label")}</span>
-            <span className="inline-block sm:hidden">{t("workspace_projects.label", { count: 1 })}</span>
-          </Button>
+            label={t("workspace_projects.create.label")}
+          />
         ) : (
           <></>
         )}
diff --git a/apps/web/core/components/project/join-project-modal.tsx b/apps/web/core/components/project/join-project-modal.tsx
index 8d1088440b..ac581d5a81 100644
--- a/apps/web/core/components/project/join-project-modal.tsx
+++ b/apps/web/core/components/project/join-project-modal.tsx
@@ -6,7 +6,7 @@
 
 import { useState } from "react";
 // types
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IProject } from "@plane/types";
 // ui
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
@@ -59,12 +59,17 @@ export function JoinProjectModal(props: TJoinProjectModalProps) {
         <div className="space-y-3" />
       </div>
       <div className="mt-5 flex justify-end gap-2 px-5 pb-8 sm:px-6 sm:pb-6">
-        <Button variant="secondary" size="lg" onClick={handleClose}>
-          Cancel
-        </Button>
-        <Button variant="primary" size="lg" tabIndex={1} type="submit" onClick={handleJoin} loading={isJoiningLoading}>
-          {isJoiningLoading ? "Joining..." : "Join Project"}
-        </Button>
+        <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={handleClose} />
+        <Button
+          variant="primary"
+          size="md"
+          stretch="auto"
+          label={isJoiningLoading ? "Joining..." : "Join Project"}
+          tabIndex={1}
+          type="submit"
+          onClick={handleJoin}
+          loading={isJoiningLoading}
+        />
       </div>
     </ModalCore>
   );
diff --git a/apps/web/core/components/project/leave-project-modal.tsx b/apps/web/core/components/project/leave-project-modal.tsx
index 262a1237be..e6c52d959b 100644
--- a/apps/web/core/components/project/leave-project-modal.tsx
+++ b/apps/web/core/components/project/leave-project-modal.tsx
@@ -9,7 +9,7 @@ import { useParams } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
 import { AlertTriangleIcon } from "lucide-react";
 // Plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IProject } from "@plane/types";
 import { Input, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
@@ -163,12 +163,15 @@ export const LeaveProjectModal = observer(function LeaveProjectModal(props: ILea
           />
         </div>
         <div className="flex justify-end gap-2">
-          <Button variant="secondary" size="lg" onClick={handleClose}>
-            Cancel
-          </Button>
-          <Button variant="error-fill" size="lg" type="submit" loading={isSubmitting}>
-            {isSubmitting ? "Leaving..." : "Leave Project"}
-          </Button>
+          <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={handleClose} />
+          <Button
+            variant="danger"
+            size="md"
+            stretch="auto"
+            label={isSubmitting ? "Leaving..." : "Leave Project"}
+            type="submit"
+            loading={isSubmitting}
+          />
         </div>
       </form>
     </ModalCore>
diff --git a/apps/web/core/components/project/member-list.tsx b/apps/web/core/components/project/member-list.tsx
index e5d2122110..56d8f4ef25 100644
--- a/apps/web/core/components/project/member-list.tsx
+++ b/apps/web/core/components/project/member-list.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { SearchIcon } from "@plane/propel/icons";
 // components
 import { MembersSettingsLoader } from "@/components/ui/loader/settings/members";
@@ -102,12 +102,13 @@ export const ProjectMemberList = observer(function ProjectMemberList(props: TPro
           {isAdmin && (
             <Button
               variant="primary"
+              size="sm"
+              stretch="auto"
+              label={t("add_member")}
               onClick={() => {
                 setInviteModal(true);
               }}
-            >
-              {t("add_member")}
-            </Button>
+            />
           )}
         </div>
       </div>
diff --git a/apps/web/core/components/project/multi-select-modal.tsx b/apps/web/core/components/project/multi-select-modal.tsx
index 8f7952c5ff..ef865d7ad0 100644
--- a/apps/web/core/components/project/multi-select-modal.tsx
+++ b/apps/web/core/components/project/multi-select-modal.tsx
@@ -11,7 +11,7 @@ import { useTheme } from "next-themes";
 import { Combobox } from "@headlessui/react";
 // plane ui
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import { SearchIcon, CloseIcon } from "@plane/propel/icons";
 import { Checkbox } from "@makeplane/propel/components/checkbox";
@@ -179,19 +179,17 @@ export const ProjectMultiSelectModal = observer(function ProjectMultiSelectModal
         </Combobox.Options>
       </Combobox>
       <div className="flex items-center justify-end gap-2 border-t border-subtle p-3">
-        <Button variant="secondary" size="lg" onClick={handleClose}>
-          {t("cancel")}
-        </Button>
+        <Button variant="secondary" size="md" stretch="auto" label={t("cancel")} onClick={handleClose} />
         <Button
-          ref={moveButtonRef}
           variant="primary"
-          size="lg"
+          size="md"
+          stretch="auto"
+          label={isSubmitting ? t("confirming") : t("confirm")}
+          ref={moveButtonRef}
           onClick={handleSubmit}
           loading={isSubmitting}
           disabled={!areSelectedProjectsChanged}
-        >
-          {isSubmitting ? t("confirming") : t("confirm")}
-        </Button>
+        />
       </div>
     </ModalCore>
   );
diff --git a/apps/web/core/components/project/project-feature-update.tsx b/apps/web/core/components/project/project-feature-update.tsx
index 931f36b347..fac59cd8d9 100644
--- a/apps/web/core/components/project/project-feature-update.tsx
+++ b/apps/web/core/components/project/project-feature-update.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { useTranslation } from "@plane/i18n";
 // ui
-import { Button, getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import { Row } from "@plane/ui";
 // components
@@ -46,18 +46,17 @@ export const ProjectFeatureUpdate = observer(function ProjectFeatureUpdate(props
         </div>
         <div className="flex gap-2">
           {/* eslint-disable-next-line jsx-a11y/tabindex-no-positive */}
-          <Button variant="secondary" size="lg" onClick={onClose} tabIndex={1}>
-            {t("close")}
-          </Button>
-          <Link
-            href={`/${workspaceSlug}/projects/${projectId}/issues`}
-            onClick={onClose}
-            className={getButtonStyling("primary", "lg")}
+          <Button variant="secondary" size="md" stretch="auto" label={t("close")} onClick={onClose} tabIndex={1} />
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={t("open_project")}
+            nativeButton={false}
+            render={<Link href={`/${workspaceSlug}/projects/${projectId}/issues`} onClick={onClose} />}
             // oxlint-disable-next-line jsx-a11y/tabindex-no-positive
             tabIndex={2}
-          >
-            {t("open_project")}
-          </Link>
+          />
         </div>
       </div>
     </>
diff --git a/apps/web/core/components/project/publish-project/modal.tsx b/apps/web/core/components/project/publish-project/modal.tsx
index 7bbd38a2c7..a80e49953a 100644
--- a/apps/web/core/components/project/publish-project/modal.tsx
+++ b/apps/web/core/components/project/publish-project/modal.tsx
@@ -11,7 +11,7 @@ import { Controller, useForm } from "react-hook-form";
 
 // types
 import { SPACE_BASE_PATH, SPACE_BASE_URL } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { GlobeIcon, NewTabIcon, CheckIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TProjectPublishLayouts, TProjectPublishSettings } from "@plane/types";
@@ -184,13 +184,13 @@ export const PublishProjectModal = observer(function PublishProjectModal(props:
           <h5 className="text-18 font-medium text-secondary">Publish project</h5>
           {isProjectPublished && (
             <Button
-              variant="error-fill"
-              size="lg"
+              variant="danger"
+              size="md"
+              stretch="auto"
+              label={isUnPublishing ? "Unpublishing" : "Unpublish"}
               onClick={() => handleUnPublishProject(watch("id") ?? "")}
               loading={isUnPublishing}
-            >
-              {isUnPublishing ? "Unpublishing" : "Unpublish"}
-            </Button>
+            />
           )}
         </div>
 
@@ -320,19 +320,27 @@ export const PublishProjectModal = observer(function PublishProjectModal(props:
           </div>
           {!fetchSettingsLoader && (
             <div className="relative flex items-center gap-2">
-              <Button variant="secondary" size="lg" onClick={handleClose}>
-                Cancel
-              </Button>
+              <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={handleClose} />
               {isProjectPublished ? (
                 isDirty && (
-                  <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
-                    {isSubmitting ? "Updating" : "Update settings"}
-                  </Button>
+                  <Button
+                    variant="primary"
+                    size="md"
+                    stretch="auto"
+                    label={isSubmitting ? "Updating" : "Update settings"}
+                    type="submit"
+                    loading={isSubmitting}
+                  />
                 )
               ) : (
-                <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
-                  {isSubmitting ? "Publishing" : "Publish"}
-                </Button>
+                <Button
+                  variant="primary"
+                  size="md"
+                  stretch="auto"
+                  label={isSubmitting ? "Publishing" : "Publish"}
+                  type="submit"
+                  loading={isSubmitting}
+                />
               )}
             </div>
           )}
diff --git a/apps/web/core/components/project/send-project-invitation-modal.tsx b/apps/web/core/components/project/send-project-invitation-modal.tsx
index f57369ac14..33fc9f2a05 100644
--- a/apps/web/core/components/project/send-project-invitation-modal.tsx
+++ b/apps/web/core/components/project/send-project-invitation-modal.tsx
@@ -10,7 +10,7 @@ import { useForm, Controller, useFieldArray } from "react-hook-form";
 // plane imports
 import { ROLE, EUserPermissions } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { PlusIcon, CloseIcon, ChevronDownIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Avatar, CustomSelect, CustomSearchSelect, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
@@ -297,14 +297,19 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
             {t("common.add_more")}
           </button>
           <div className="flex items-center gap-2">
-            <Button variant="secondary" size="lg" onClick={handleClose}>
-              {t("cancel")}
-            </Button>
-            <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
-              {isSubmitting
-                ? `${fields && fields.length > 1 ? `${t("add_members")}...` : `${t("add_member")}...`}`
-                : `${fields && fields.length > 1 ? t("add_members") : t("add_member")}`}
-            </Button>
+            <Button variant="secondary" size="md" stretch="auto" label={t("cancel")} onClick={handleClose} />
+            <Button
+              variant="primary"
+              size="md"
+              stretch="auto"
+              label={
+                isSubmitting
+                  ? `${fields && fields.length > 1 ? `${t("add_members")}...` : `${t("add_member")}...`}`
+                  : `${fields && fields.length > 1 ? t("add_members") : t("add_member")}`
+              }
+              type="submit"
+              loading={isSubmitting}
+            />
           </div>
         </div>
       </form>
diff --git a/apps/web/core/components/project/settings/control-section.tsx b/apps/web/core/components/project/settings/control-section.tsx
index de56790c88..d142d74874 100644
--- a/apps/web/core/components/project/settings/control-section.tsx
+++ b/apps/web/core/components/project/settings/control-section.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { useParams } from "react-router";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 // components
 import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
 // hooks
@@ -61,9 +61,13 @@ export const GeneralProjectSettingsControlSection = observer(function GeneralPro
           title={t("archive")}
           description="Archiving a project will unlist your project from your side navigation although you will still be able to access it from your projects page. You can restore the project or delete it whenever you want."
           control={
-            <Button variant="secondary" onClick={() => setArchiveProject(true)}>
-              {t("archive")}
-            </Button>
+            <Button
+              variant="secondary"
+              size="sm"
+              stretch="auto"
+              label={t("archive")}
+              onClick={() => setArchiveProject(true)}
+            />
           }
         />
         {/* Format Selector */}
@@ -72,9 +76,13 @@ export const GeneralProjectSettingsControlSection = observer(function GeneralPro
           title={t("delete")}
           description="When deleting a project, all of the data and resources within that project will be permanently removed and cannot be recovered."
           control={
-            <Button variant="error-outline" onClick={() => setSelectedProject(currentProjectDetails.id ?? null)}>
-              {t("delete")}
-            </Button>
+            <Button
+              variant="danger-outline"
+              size="sm"
+              stretch="auto"
+              label={t("delete")}
+              onClick={() => setSelectedProject(currentProjectDetails.id ?? null)}
+            />
           }
         />
       </div>
diff --git a/apps/web/core/components/projects/settings/intake/header.tsx b/apps/web/core/components/projects/settings/intake/header.tsx
index f24e43d4c0..268d355a21 100644
--- a/apps/web/core/components/projects/settings/intake/header.tsx
+++ b/apps/web/core/components/projects/settings/intake/header.tsx
@@ -11,7 +11,7 @@ import { RefreshCcw } from "lucide-react";
 // ui
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
@@ -78,9 +78,13 @@ export const ProjectInboxHeader = observer(function ProjectInboxHeader() {
               modalState={createIssueModal}
               handleModalClose={() => setCreateIssueModal(false)}
             />
-            <Button variant="primary" size="lg" onClick={() => setCreateIssueModal(true)}>
-              {t("add_work_item")}
-            </Button>
+            <Button
+              variant="primary"
+              size="md"
+              stretch="auto"
+              label={t("add_work_item")}
+              onClick={() => setCreateIssueModal(true)}
+            />
           </div>
         ) : (
           <></>
diff --git a/apps/web/core/components/rich-filters/add-filters/button.tsx b/apps/web/core/components/rich-filters/add-filters/button.tsx
index 51f58c3750..3a13170b1a 100644
--- a/apps/web/core/components/rich-filters/add-filters/button.tsx
+++ b/apps/web/core/components/rich-filters/add-filters/button.tsx
@@ -8,20 +8,39 @@ import React from "react";
 import { observer } from "mobx-react";
 import { ListFilter } from "lucide-react";
 // plane imports
-import type { TButtonSize, TButtonVariant } from "@plane/propel/button";
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
+import type { ButtonSize, ButtonVariant } from "@makeplane/propel/elements/button";
 import type { IFilterInstance } from "@plane/shared-state";
 import type { TExternalFilter, TFilterProperty, TSupportedOperators } from "@plane/types";
 import { LOGICAL_OPERATOR } from "@plane/types";
-import { cn } from "@plane/utils";
 // local imports
 import { AddFilterDropdown } from "./dropdown";
 
+type TLegacyButtonSize = "sm" | "base" | "lg" | "xl";
+type TLegacyButtonVariant = "primary" | "secondary" | "tertiary" | "ghost" | "link" | "error-fill" | "error-outline";
+
+const ADD_FILTER_BUTTON_SIZE: Record<TLegacyButtonSize, ButtonSize> = {
+  sm: "xs",
+  base: "sm",
+  lg: "md",
+  xl: "lg",
+};
+
+const ADD_FILTER_BUTTON_VARIANT: Record<TLegacyButtonVariant, ButtonVariant> = {
+  primary: "primary",
+  secondary: "secondary",
+  tertiary: "tertiary",
+  ghost: "ghost",
+  link: "ghost",
+  "error-fill": "danger",
+  "error-outline": "danger-outline",
+};
+
 export type TAddFilterButtonProps<P extends TFilterProperty, E extends TExternalFilter> = {
   buttonConfig?: {
     label: string | null;
-    variant?: TButtonVariant;
-    size?: TButtonSize;
+    variant?: TLegacyButtonVariant;
+    size?: TLegacyButtonSize;
     className?: string;
     defaultOpen?: boolean;
     iconConfig?: {
@@ -41,12 +60,10 @@ export const AddFilterButton = observer(function AddFilterButton<P extends TFilt
   const {
     variant = "secondary",
     size = "base",
-    className,
     label,
     iconConfig = { shouldShowIcon: true },
     isDisabled = false,
   } = buttonConfig || {};
-  // derived values
   const FilterIcon = iconConfig.iconComponent || ListFilter;
 
   const handleFilterSelect = (property: P, operator: TSupportedOperators, isNegation: boolean) => {
@@ -68,14 +85,19 @@ export const AddFilterButton = observer(function AddFilterButton<P extends TFilt
       {...props}
       buttonConfig={{
         ...buttonConfig,
-        className: cn(getButtonStyling(variant, size), "py-[5px]", className),
+        className: "border-none bg-transparent p-0 hover:bg-transparent",
       }}
       handleFilterSelect={handleFilterSelect}
       customButton={
-        <div className="flex items-center gap-1">
+        <Button
+          variant={ADD_FILTER_BUTTON_VARIANT[variant]}
+          size={ADD_FILTER_BUTTON_SIZE[size]}
+          stretch="auto"
+          render={<div />}
+        >
           {iconConfig.shouldShowIcon && <FilterIcon className="size-4 text-secondary" />}
           {label}
-        </div>
+        </Button>
       }
     />
   );
diff --git a/apps/web/core/components/rich-filters/filters-row.tsx b/apps/web/core/components/rich-filters/filters-row.tsx
index 5b8aa93318..f415e529cd 100644
--- a/apps/web/core/components/rich-filters/filters-row.tsx
+++ b/apps/web/core/components/rich-filters/filters-row.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { ListFilterPlus } from "lucide-react";
 import { Transition } from "@headlessui/react";
 // plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IFilterInstance } from "@plane/shared-state";
 import type { TExternalFilter, TFilterProperty } from "@plane/types";
 import { cn, EHeaderVariant, Header, Loader } from "@plane/ui";
@@ -79,25 +79,39 @@ export const FiltersRow = observer(function FiltersRow<K extends TFilterProperty
   const rightContent = !disabledAllOperations && (
     <>
       <ElementTransition show={filter.canClearFilters}>
-        <Button variant="secondary" className={COMMON_OPERATION_BUTTON_CLASSNAME} onClick={filter.clearFilters}>
-          {filter.clearFilterOptions?.label ?? "Clear all"}
-        </Button>
+        <span className={COMMON_OPERATION_BUTTON_CLASSNAME}>
+          <Button
+            variant="secondary"
+            size="sm"
+            stretch="auto"
+            label={filter.clearFilterOptions?.label ?? "Clear all"}
+            onClick={filter.clearFilters}
+          />
+        </span>
       </ElementTransition>
       <ElementTransition show={filter.canSaveView}>
-        <Button variant="secondary" className={COMMON_OPERATION_BUTTON_CLASSNAME} onClick={filter.saveView}>
-          {filter.saveViewOptions?.label ?? "Save view"}
-        </Button>
+        <span className={COMMON_OPERATION_BUTTON_CLASSNAME}>
+          <Button
+            variant="secondary"
+            size="sm"
+            stretch="auto"
+            label={filter.saveViewOptions?.label ?? "Save view"}
+            onClick={filter.saveView}
+          />
+        </span>
       </ElementTransition>
       <ElementTransition show={filter.canUpdateView}>
-        <Button
-          variant="secondary"
-          className={COMMON_OPERATION_BUTTON_CLASSNAME}
-          onClick={handleUpdate}
-          loading={isUpdating}
-          disabled={isUpdating}
-        >
-          {isUpdating ? "Confirming" : (filter.updateViewOptions?.label ?? "Update view")}
-        </Button>
+        <span className={COMMON_OPERATION_BUTTON_CLASSNAME}>
+          <Button
+            variant="secondary"
+            size="sm"
+            stretch="auto"
+            label={isUpdating ? "Confirming" : (filter.updateViewOptions?.label ?? "Update view")}
+            onClick={handleUpdate}
+            loading={isUpdating}
+            disabled={isUpdating}
+          />
+        </span>
       </ElementTransition>
     </>
   );
diff --git a/apps/web/core/components/settings/profile/content/pages/api-tokens.tsx b/apps/web/core/components/settings/profile/content/pages/api-tokens.tsx
index 0d7217373a..839b8e7aa6 100644
--- a/apps/web/core/components/settings/profile/content/pages/api-tokens.tsx
+++ b/apps/web/core/components/settings/profile/content/pages/api-tokens.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import useSWR from "swr";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { EmptyStateCompact } from "@plane/propel/empty-state";
 import { APITokenService } from "@plane/services";
 // components
@@ -41,9 +41,13 @@ export const APITokensProfileSettings = observer(function APITokensProfileSettin
         title={t("account_settings.api_tokens.title")}
         description={t("account_settings.api_tokens.description")}
         control={
-          <Button variant="primary" size="lg" onClick={() => setIsCreateTokenModalOpen(true)}>
-            {t("workspace_settings.settings.api_tokens.add_token")}
-          </Button>
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={t("workspace_settings.settings.api_tokens.add_token")}
+            onClick={() => setIsCreateTokenModalOpen(true)}
+          />
         }
       />
       <div className="mt-7">
diff --git a/apps/web/core/components/settings/profile/content/pages/general/form.tsx b/apps/web/core/components/settings/profile/content/pages/general/form.tsx
index e20245f835..e2c493aa7d 100644
--- a/apps/web/core/components/settings/profile/content/pages/general/form.tsx
+++ b/apps/web/core/components/settings/profile/content/pages/general/form.tsx
@@ -10,7 +10,7 @@ import { Controller, useForm } from "react-hook-form";
 import { CircleUserRound } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/propel/toast";
 import { EFileAssetType } from "@plane/types";
 import type { IUser, TUserProfile } from "@plane/types";
@@ -394,9 +394,14 @@ export const GeneralProfileSettingsForm = observer(function GeneralProfileSettin
             </div>
           </div>
           <div>
-            <Button variant="primary" type="submit" loading={isLoading}>
-              {isLoading ? t("saving") : t("save_changes")}
-            </Button>
+            <Button
+              variant="primary"
+              size="sm"
+              stretch="auto"
+              label={isLoading ? t("saving") : t("save_changes")}
+              type="submit"
+              loading={isLoading}
+            />
           </div>
         </div>
       </form>
@@ -405,9 +410,13 @@ export const GeneralProfileSettingsForm = observer(function GeneralProfileSettin
           title={t("deactivate_account")}
           description={t("deactivate_account_description")}
           control={
-            <Button variant="error-outline" onClick={() => setDeactivateAccountModal(true)}>
-              {t("deactivate_account")}
-            </Button>
+            <Button
+              variant="danger-outline"
+              size="sm"
+              stretch="auto"
+              label={t("deactivate_account")}
+              onClick={() => setDeactivateAccountModal(true)}
+            />
           }
         />
       </div>
diff --git a/apps/web/core/components/settings/profile/content/pages/security.tsx b/apps/web/core/components/settings/profile/content/pages/security.tsx
index 869e377c22..2b9656df69 100644
--- a/apps/web/core/components/settings/profile/content/pages/security.tsx
+++ b/apps/web/core/components/settings/profile/content/pages/security.tsx
@@ -11,7 +11,7 @@ import { Eye, EyeOff } from "lucide-react";
 // plane imports
 import { E_PASSWORD_STRENGTH } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Input, PasswordStrengthIndicator } from "@plane/ui";
 import { getPasswordStrength } from "@plane/utils";
@@ -264,11 +264,19 @@ export const SecurityProfileSettings = observer(function SecurityProfileSettings
             </div>
           </div>
           <div>
-            <Button variant="primary" size="xl" type="submit" loading={isSubmitting} disabled={isButtonDisabled}>
-              {isSubmitting
-                ? `${t("auth.common.password.change_password.label.submitting")}`
-                : t("auth.common.password.change_password.label.default")}
-            </Button>
+            <Button
+              variant="primary"
+              size="lg"
+              stretch="auto"
+              label={
+                isSubmitting
+                  ? `${t("auth.common.password.change_password.label.submitting")}`
+                  : t("auth.common.password.change_password.label.default")
+              }
+              type="submit"
+              loading={isSubmitting}
+              disabled={isButtonDisabled}
+            />
           </div>
         </div>
       </form>
diff --git a/apps/web/core/components/sidebar/add-button.tsx b/apps/web/core/components/sidebar/add-button.tsx
index 6db327e363..1ce096c347 100644
--- a/apps/web/core/components/sidebar/add-button.tsx
+++ b/apps/web/core/components/sidebar/add-button.tsx
@@ -4,25 +4,31 @@
  * See the LICENSE file for details.
  */
 
-import { Button } from "@plane/propel/button";
+import type { MouseEventHandler, ReactNode } from "react";
+import { Button } from "@makeplane/propel/components/button";
 
-type Props = React.ComponentProps<"button"> & {
-  label: React.ReactNode;
+type Props = {
+  label: string;
+  icon?: ReactNode;
   onClick: () => void;
+  disabled?: boolean;
+  onMouseEnter?: MouseEventHandler<HTMLSpanElement>;
+  onMouseLeave?: MouseEventHandler<HTMLSpanElement>;
 };
 
 export function SidebarAddButton(props: Props) {
-  const { label, onClick, disabled, ...rest } = props;
+  const { label, icon, onClick, disabled, onMouseEnter, onMouseLeave } = props;
   return (
-    <Button
-      variant={"secondary"}
-      size={"xl"}
-      className="w-full justify-start"
-      onClick={onClick}
-      disabled={disabled}
-      {...rest}
-    >
-      {label}
-    </Button>
+    <span className="w-full justify-start" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+      <Button
+        variant="secondary"
+        size="lg"
+        stretch="full"
+        label={label}
+        icon={icon}
+        onClick={onClick}
+        disabled={disabled}
+      />
+    </span>
   );
 }
diff --git a/apps/web/core/components/views/filters/order-by.tsx b/apps/web/core/components/views/filters/order-by.tsx
index 3336065886..5d80fe8086 100644
--- a/apps/web/core/components/views/filters/order-by.tsx
+++ b/apps/web/core/components/views/filters/order-by.tsx
@@ -8,7 +8,7 @@ import { ArrowDownWideNarrow, ArrowUpWideNarrow } from "lucide-react";
 // plane imports
 import { VIEW_SORT_BY_OPTIONS, VIEW_SORTING_KEY_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 import { CheckIcon } from "@plane/propel/icons";
 import type { TViewFiltersSortBy, TViewFiltersSortKey } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
@@ -27,20 +27,22 @@ export function ViewOrderByDropdown(props: Props) {
   const orderByDetails = VIEW_SORTING_KEY_OPTIONS.find((option) => sortKey === option.key);
   const isDescending = sortBy === "desc";
 
-  const buttonClassName = isMobile
-    ? "flex items-center text-13 text-secondary gap-2 w-full"
-    : getButtonStyling("secondary", "lg");
+  const icon = !isDescending ? <ArrowUpWideNarrow className="size-3" /> : <ArrowDownWideNarrow className="size-3" />;
+  const sortLabel = orderByDetails?.i18n_label ? t(orderByDetails.i18n_label) : "";
 
-  const icon = (
-    <>{!isDescending ? <ArrowUpWideNarrow className="size-3" /> : <ArrowDownWideNarrow className="size-3" />}</>
-  );
   return (
     <CustomMenu
       customButton={
-        <span className={buttonClassName}>
-          {!isMobile && icon}
-          <span className="shrink-0"> {orderByDetails?.i18n_label && t(orderByDetails?.i18n_label)}</span>
-        </span>
+        isMobile ? (
+          <span className="flex w-full items-center gap-2 text-13 text-secondary">
+            <span className="shrink-0">{sortLabel}</span>
+          </span>
+        ) : (
+          <Button variant="secondary" size="md" stretch="auto" render={<div />}>
+            {icon}
+            <span className="shrink-0">{sortLabel}</span>
+          </Button>
+        )
       }
       placement="bottom-end"
       className="flex w-full justify-center"
diff --git a/apps/web/core/components/views/form.tsx b/apps/web/core/components/views/form.tsx
index 10ad919d92..c9022ef291 100644
--- a/apps/web/core/components/views/form.tsx
+++ b/apps/web/core/components/views/form.tsx
@@ -10,7 +10,7 @@ import { Controller, useForm } from "react-hook-form";
 // plane imports
 import { ETabIndices, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
 import { ViewsIcon } from "@plane/propel/icons";
 import type {
@@ -279,18 +279,31 @@ export const ProjectViewForm = observer(function ProjectViewForm(props: Props) {
         </div>
       </div>
       <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
-        <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={getIndex("cancel")}>
-          {t("common.cancel")}
-        </Button>
-        <Button variant="primary" size="lg" type="submit" tabIndex={getIndex("submit")} loading={isSubmitting}>
-          {data
-            ? isSubmitting
-              ? t("common.updating")
-              : t("view.update.label")
-            : isSubmitting
-              ? t("common.creating")
-              : t("view.create.label")}
-        </Button>
+        <Button
+          variant="secondary"
+          size="md"
+          stretch="auto"
+          label={t("common.cancel")}
+          onClick={handleClose}
+          tabIndex={getIndex("cancel")}
+        />
+        <Button
+          variant="primary"
+          size="md"
+          stretch="auto"
+          label={
+            data
+              ? isSubmitting
+                ? t("common.updating")
+                : t("view.update.label")
+              : isSubmitting
+                ? t("common.creating")
+                : t("view.create.label")
+          }
+          type="submit"
+          tabIndex={getIndex("submit")}
+          loading={isSubmitting}
+        />
       </div>
     </form>
   );
diff --git a/apps/web/core/components/web-hooks/empty-state.tsx b/apps/web/core/components/web-hooks/empty-state.tsx
index e79debd069..48fa310650 100644
--- a/apps/web/core/components/web-hooks/empty-state.tsx
+++ b/apps/web/core/components/web-hooks/empty-state.tsx
@@ -6,7 +6,7 @@
 
 import React from "react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 // assets
 import EmptyWebhook from "@/app/assets/empty-state/web-hook.svg?url";
 
@@ -24,9 +24,9 @@ export function WebhooksEmptyState(props: Props) {
         <img src={EmptyWebhook} className="w-52 object-cover sm:w-60" alt="empty" />
         <h6 className="mt-6 mb-3 text-18 font-semibold sm:mt-8">No webhooks</h6>
         <p className="mb-7 text-tertiary sm:mb-8">Create webhooks to receive real-time updates and automate actions</p>
-        <Button className="flex items-center gap-1.5" onClick={onClick}>
-          Add webhook
-        </Button>
+        <span className="flex items-center gap-1.5">
+          <Button variant="primary" size="sm" stretch="auto" label="Add webhook" onClick={onClick} />
+        </span>
       </div>
     </div>
   );
diff --git a/apps/web/core/components/web-hooks/form/delete-section.tsx b/apps/web/core/components/web-hooks/form/delete-section.tsx
index 5b51d78dbd..726b8537a4 100644
--- a/apps/web/core/components/web-hooks/form/delete-section.tsx
+++ b/apps/web/core/components/web-hooks/form/delete-section.tsx
@@ -5,7 +5,7 @@
  */
 
 import { Disclosure, Transition } from "@headlessui/react";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
 
 type Props = {
@@ -41,9 +41,7 @@ export function WebhookDeleteSection(props: Props) {
                   webhook.
                 </span>
                 <div>
-                  <Button variant="error-fill" size="lg" onClick={openDeleteModal}>
-                    Delete webhook
-                  </Button>
+                  <Button variant="danger" size="md" stretch="auto" label="Delete webhook" onClick={openDeleteModal} />
                 </div>
               </div>
             </Disclosure.Panel>
diff --git a/apps/web/core/components/web-hooks/form/form.tsx b/apps/web/core/components/web-hooks/form/form.tsx
index 4800931d00..9d5576fcf7 100644
--- a/apps/web/core/components/web-hooks/form/form.tsx
+++ b/apps/web/core/components/web-hooks/form/form.tsx
@@ -8,7 +8,7 @@ import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IWebhook, TWebhookEventTypes } from "@plane/types";
 // hooks
 import {
@@ -97,19 +97,27 @@ export const WebhookForm = observer(function WebhookForm(props: Props) {
       {data ? (
         <div className="space-y-5 pt-0">
           <WebhookSecretKey data={data} />
-          <Button size="lg" type="submit" loading={isSubmitting}>
-            {isSubmitting ? t("updating") : t("update")}
-          </Button>
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={isSubmitting ? t("updating") : t("update")}
+            type="submit"
+            loading={isSubmitting}
+          />
         </div>
       ) : (
         <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
-          <Button variant="secondary" size="lg" onClick={handleClose}>
-            {t("cancel")}
-          </Button>
+          <Button variant="secondary" size="md" stretch="auto" label={t("cancel")} onClick={handleClose} />
           {!webhookSecretKey && (
-            <Button type="submit" variant="primary" size="lg" loading={isSubmitting} className="capitalize">
-              {isSubmitting ? t("common.creating") : t("common.create")}
-            </Button>
+            <Button
+              variant="primary"
+              size="md"
+              stretch="auto"
+              label={isSubmitting ? t("common.creating") : t("common.create")}
+              type="submit"
+              loading={isSubmitting}
+            />
           )}
         </div>
       )}
diff --git a/apps/web/core/components/web-hooks/form/secret-key.tsx b/apps/web/core/components/web-hooks/form/secret-key.tsx
index 98bf1b73c8..390abfd7bf 100644
--- a/apps/web/core/components/web-hooks/form/secret-key.tsx
+++ b/apps/web/core/components/web-hooks/form/secret-key.tsx
@@ -11,7 +11,7 @@ import { useParams } from "next/navigation";
 // icons
 import { Eye, EyeOff, RefreshCw } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { CopyIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
@@ -134,14 +134,14 @@ export const WebhookSecretKey = observer(function WebhookSecretKey(props: Props)
             {data && (
               <div>
                 <Button
-                  onClick={handleRegenerateSecretKey}
                   variant="secondary"
-                  size="lg"
+                  size="md"
+                  stretch="auto"
+                  label={isRegenerating ? `${t("re_generating")}...` : t("re_generate_key")}
+                  icon={<RefreshCw />}
+                  onClick={handleRegenerateSecretKey}
                   loading={isRegenerating}
-                  prependIcon={<RefreshCw />}
-                >
-                  {isRegenerating ? `${t("re_generating")}...` : t("re_generate_key")}
-                </Button>
+                />
               </div>
             )}
           </div>
diff --git a/apps/web/core/components/web-hooks/generated-hook-details.tsx b/apps/web/core/components/web-hooks/generated-hook-details.tsx
index 03755264a4..795066bc4c 100644
--- a/apps/web/core/components/web-hooks/generated-hook-details.tsx
+++ b/apps/web/core/components/web-hooks/generated-hook-details.tsx
@@ -7,7 +7,7 @@
 // components
 // ui
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IWebhook } from "@plane/types";
 // types
 import { WebhookSecretKey } from "./form";
@@ -31,9 +31,7 @@ export function GeneratedHookDetails(props: Props) {
         <WebhookSecretKey data={webhookDetails} />
       </div>
       <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
-        <Button variant="secondary" size="lg" onClick={handleClose}>
-          Close
-        </Button>
+        <Button variant="secondary" size="md" stretch="auto" label="Close" onClick={handleClose} />
       </div>
     </>
   );
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx
index 02e8c353c3..5c74b155c7 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx
@@ -8,7 +8,7 @@ import { useParams } from "next/navigation";
 import { useForm, Controller } from "react-hook-form";
 // plane imports
 import { allTimeIn30MinutesInterval12HoursFormat } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { CloseIcon } from "@plane/propel/icons";
 import { CustomSelect, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // components
@@ -215,12 +215,15 @@ export function NotificationSnoozeModal(props: TNotificationSnoozeModal) {
 
         <div className="mt-5 flex items-center justify-between gap-2">
           <div className="flex w-full items-center justify-end gap-2">
-            <Button variant="secondary" size="lg" onClick={handleClose}>
-              Cancel
-            </Button>
-            <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
-              {isSubmitting ? "Submitting..." : "Submit"}
-            </Button>
+            <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={handleClose} />
+            <Button
+              variant="primary"
+              size="md"
+              stretch="auto"
+              label={isSubmitting ? "Submitting..." : "Submit"}
+              type="submit"
+              loading={isSubmitting}
+            />
           </div>
         </div>
       </form>
diff --git a/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx b/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
index e8f1d63288..d1611cd0b2 100644
--- a/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
+++ b/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
@@ -8,7 +8,7 @@ import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { AlertTriangle } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { useUser } from "@/hooks/store/user";
 import type { Props } from "./confirm-workspace-member-remove";
 
@@ -88,18 +88,24 @@ export const ConfirmWorkspaceMemberRemove = observer(function ConfirmWorkspaceMe
                   </div>
                 </div>
                 <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="secondary" onClick={handleClose}>
-                    Cancel
-                  </Button>
-                  <Button variant="error-fill" tabIndex={1} onClick={handleDeletion} loading={isRemoving}>
-                    {currentUser?.id === userDetails.id
-                      ? isRemoving
-                        ? "Leaving"
-                        : "Leave"
-                      : isRemoving
-                        ? "Removing"
-                        : "Remove"}
-                  </Button>
+                  <Button variant="secondary" size="sm" stretch="auto" label="Cancel" onClick={handleClose} />
+                  <Button
+                    variant="danger"
+                    size="sm"
+                    stretch="auto"
+                    label={
+                      currentUser?.id === userDetails.id
+                        ? isRemoving
+                          ? "Leaving"
+                          : "Leave"
+                        : isRemoving
+                          ? "Removing"
+                          : "Remove"
+                    }
+                    tabIndex={1}
+                    onClick={handleDeletion}
+                    loading={isRemoving}
+                  />
                 </div>
               </Dialog.Panel>
             </Transition.Child>
diff --git a/apps/web/core/components/workspace/billing/comparison/base.tsx b/apps/web/core/components/workspace/billing/comparison/base.tsx
index b09965a028..4c98178b65 100644
--- a/apps/web/core/components/workspace/billing/comparison/base.tsx
+++ b/apps/web/core/components/workspace/billing/comparison/base.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 import { ArrowDown, ArrowUp } from "lucide-react";
 // plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { cn } from "@plane/utils";
 // constants
 import type { TPlanePlans } from "@/components/workspace/billing/comparison/plans";
@@ -127,13 +127,15 @@ export const PlansComparisonBase = observer(function PlansComparisonBase(props:
         <div className="my-4 flex items-center justify-center gap-1 pb-2">
           <Button
             variant="ghost"
+            size="sm"
+            stretch="auto"
+            label={isCompareAllFeaturesSectionOpen ? "Collapse comparison" : "Compare all features"}
+            icon={isCompareAllFeaturesSectionOpen ? <ArrowUp /> : <ArrowDown />}
+            iconPosition="end"
             onClick={() => {
               setIsCompareAllFeaturesSectionOpen(!isCompareAllFeaturesSectionOpen);
             }}
-            appendIcon={isCompareAllFeaturesSectionOpen ? <ArrowUp /> : <ArrowDown />}
-          >
-            {isCompareAllFeaturesSectionOpen ? "Collapse comparison" : "Compare all features"}
-          </Button>
+          />
         </div>
       </div>
     </div>
diff --git a/apps/web/core/components/workspace/billing/comparison/plan-detail.tsx b/apps/web/core/components/workspace/billing/comparison/plan-detail.tsx
index 27d2b8cf14..c0b62c1ce6 100644
--- a/apps/web/core/components/workspace/billing/comparison/plan-detail.tsx
+++ b/apps/web/core/components/workspace/billing/comparison/plan-detail.tsx
@@ -12,7 +12,7 @@ import {
   TALK_TO_SALES_URL,
 } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { TBillingFrequency } from "@plane/types";
 import { EProductSubscriptionEnum } from "@plane/types";
 import { getSubscriptionName } from "@plane/utils";
@@ -100,9 +100,13 @@ export const PlanDetail = observer(function PlanDetail(props: TPlanDetailProps)
 
       {/* Subscription button */}
       <div className="flex flex-col items-start gap-1 py-3">
-        <Button variant="primary" size="lg" onClick={handleRedirection} className="w-full">
-          {isSubscriptionActive ? `Upgrade to ${subscriptionName}` : t("common.upgrade_cta.talk_to_sales")}
-        </Button>
+        <Button
+          variant="primary"
+          size="md"
+          stretch="full"
+          label={isSubscriptionActive ? `Upgrade to ${subscriptionName}` : t("common.upgrade_cta.talk_to_sales")}
+          onClick={handleRedirection}
+        />
       </div>
     </div>
   );
diff --git a/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx b/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx
index 9ec6dc4280..76c9660463 100644
--- a/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx
+++ b/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { AlertTriangle } from "lucide-react";
 // ui
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // hooks
 import { useUser } from "@/hooks/store/user";
@@ -73,18 +73,24 @@ export const ConfirmWorkspaceMemberRemove = observer(function ConfirmWorkspaceMe
         </div>
       </div>
       <div className="flex justify-end gap-2 p-4 sm:px-6">
-        <Button variant="secondary" size="lg" onClick={handleClose}>
-          {t("cancel")}
-        </Button>
-        <Button variant="error-fill" size="lg" tabIndex={1} onClick={handleDeletion} loading={isRemoving}>
-          {currentUser?.id === userDetails.id
-            ? isRemoving
-              ? t("leaving")
-              : t("leave")
-            : isRemoving
-              ? t("removing")
-              : t("remove")}
-        </Button>
+        <Button variant="secondary" size="md" stretch="auto" label={t("cancel")} onClick={handleClose} />
+        <Button
+          variant="danger"
+          size="md"
+          stretch="auto"
+          label={
+            currentUser?.id === userDetails.id
+              ? isRemoving
+                ? t("leaving")
+                : t("leave")
+              : isRemoving
+                ? t("removing")
+                : t("remove")
+          }
+          tabIndex={1}
+          onClick={handleDeletion}
+          loading={isRemoving}
+        />
       </div>
     </ModalCore>
   );
diff --git a/apps/web/core/components/workspace/create-workspace-form.tsx b/apps/web/core/components/workspace/create-workspace-form.tsx
index 2274f1832b..71a6da59d9 100644
--- a/apps/web/core/components/workspace/create-workspace-form.tsx
+++ b/apps/web/core/components/workspace/create-workspace-form.tsx
@@ -10,7 +10,7 @@ import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IWorkspace } from "@plane/types";
 // ui
@@ -241,13 +241,24 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
       </div>
       <div className="flex items-center gap-4">
         {secondaryButton}
-        <Button variant="primary" type="submit" size="xl" disabled={!isValid} loading={isSubmitting}>
-          {isSubmitting ? t(primaryButtonText.loading) : t(primaryButtonText.default)}
-        </Button>
+        <Button
+          variant="primary"
+          size="lg"
+          stretch="auto"
+          label={isSubmitting ? t(primaryButtonText.loading) : t(primaryButtonText.default)}
+          type="submit"
+          disabled={!isValid}
+          loading={isSubmitting}
+        />
         {!secondaryButton && (
-          <Button variant="secondary" type="button" size="xl" onClick={() => router.back()}>
-            {t("common.go_back")}
-          </Button>
+          <Button
+            variant="secondary"
+            size="lg"
+            stretch="auto"
+            label={t("common.go_back")}
+            type="button"
+            onClick={() => router.back()}
+          />
         )}
       </div>
     </form>
diff --git a/apps/web/core/components/workspace/delete-workspace-form.tsx b/apps/web/core/components/workspace/delete-workspace-form.tsx
index 4d9196b16f..0d86064b8c 100644
--- a/apps/web/core/components/workspace/delete-workspace-form.tsx
+++ b/apps/web/core/components/workspace/delete-workspace-form.tsx
@@ -9,7 +9,7 @@ import { Controller, useForm } from "react-hook-form";
 import { AlertTriangle } from "lucide-react";
 // Plane Imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IWorkspace } from "@plane/types";
 import { Input } from "@plane/ui";
@@ -151,12 +151,16 @@ export const DeleteWorkspaceForm = observer(function DeleteWorkspaceForm(props:
       </div>
 
       <div className="flex justify-end gap-2">
-        <Button variant="secondary" size="lg" onClick={handleClose}>
-          {t("cancel")}
-        </Button>
-        <Button variant="error-fill" size="lg" type="submit" disabled={!canDelete} loading={isSubmitting}>
-          {isSubmitting ? t("deleting") : t("confirm")}
-        </Button>
+        <Button variant="secondary" size="md" stretch="auto" label={t("cancel")} onClick={handleClose} />
+        <Button
+          variant="danger"
+          size="md"
+          stretch="auto"
+          label={isSubmitting ? t("deleting") : t("confirm")}
+          type="submit"
+          disabled={!canDelete}
+          loading={isSubmitting}
+        />
       </div>
     </form>
   );
diff --git a/apps/web/core/components/workspace/delete-workspace-section.tsx b/apps/web/core/components/workspace/delete-workspace-section.tsx
index 6a6f845d07..e8c561c545 100644
--- a/apps/web/core/components/workspace/delete-workspace-section.tsx
+++ b/apps/web/core/components/workspace/delete-workspace-section.tsx
@@ -8,7 +8,7 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IWorkspace } from "@plane/types";
 // components
 import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
@@ -37,9 +37,13 @@ export const DeleteWorkspaceSection = observer(function DeleteWorkspaceSection(p
         title={t("workspace_settings.settings.general.delete_workspace")}
         description={t("workspace_settings.settings.general.delete_workspace_description")}
         control={
-          <Button variant="error-outline" onClick={() => setDeleteWorkspaceModal(true)}>
-            {t("delete")}
-          </Button>
+          <Button
+            variant="danger-outline"
+            size="sm"
+            stretch="auto"
+            label={t("delete")}
+            onClick={() => setDeleteWorkspaceModal(true)}
+          />
         }
       />
     </>
diff --git a/apps/web/core/components/workspace/edition-badge.tsx b/apps/web/core/components/workspace/edition-badge.tsx
index b11e850b4e..ec181c924c 100644
--- a/apps/web/core/components/workspace/edition-badge.tsx
+++ b/apps/web/core/components/workspace/edition-badge.tsx
@@ -13,7 +13,7 @@ import { Tooltip } from "@plane/propel/tooltip";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 import packageJson from "package.json";
 // local components
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { PaidPlanUpgradeModal } from "@/components/license/modal/upgrade-modal";
 
 export const WorkspaceEditionBadge = observer(function WorkspaceEditionBadge() {
@@ -33,13 +33,13 @@ export const WorkspaceEditionBadge = observer(function WorkspaceEditionBadge() {
       <Tooltip tooltipContent={`Version: v${packageJson.version}`} isMobile={isMobile}>
         <Button
           variant="tertiary"
-          size="lg"
+          size="md"
+          stretch="auto"
+          label="Community"
           onClick={() => setIsPaidPlanPurchaseModalOpen(true)}
           aria-haspopup="dialog"
           aria-label={t("aria_labels.projects_sidebar.edition_badge")}
-        >
-          Community
-        </Button>
+        />
       </Tooltip>
     </>
   );
diff --git a/apps/web/core/components/workspace/invite-modal/actions.tsx b/apps/web/core/components/workspace/invite-modal/actions.tsx
index 23b5f4d0dd..f524971030 100644
--- a/apps/web/core/components/workspace/invite-modal/actions.tsx
+++ b/apps/web/core/components/workspace/invite-modal/actions.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { PlusIcon } from "@plane/propel/icons";
 import { cn } from "@plane/utils";
 
@@ -57,14 +57,26 @@ export const InvitationModalActions = observer(function InvitationModalActions(p
         {addMoreButtonText || t("common.add_more")}
       </button>
       <div className="flex items-center gap-2">
-        <Button variant="secondary" size="lg" onClick={handleClose}>
-          {cancelButtonText || t("cancel")}
-        </Button>
-        <Button variant="primary" size="lg" type="submit" loading={isSubmitting} disabled={isInviteDisabled}>
-          {isSubmitting
-            ? submitButtonText?.loading || t("workspace_settings.settings.members.modal.button_loading")
-            : submitButtonText?.default || t("workspace_settings.settings.members.modal.button")}
-        </Button>
+        <Button
+          variant="secondary"
+          size="md"
+          stretch="auto"
+          label={cancelButtonText || t("cancel")}
+          onClick={handleClose}
+        />
+        <Button
+          variant="primary"
+          size="md"
+          stretch="auto"
+          label={
+            isSubmitting
+              ? submitButtonText?.loading || t("workspace_settings.settings.members.modal.button_loading")
+              : submitButtonText?.default || t("workspace_settings.settings.members.modal.button")
+          }
+          type="submit"
+          loading={isSubmitting}
+          disabled={isInviteDisabled}
+        />
       </div>
     </div>
   );
diff --git a/apps/web/core/components/workspace/settings/workspace-details.tsx b/apps/web/core/components/workspace/settings/workspace-details.tsx
index e8c27a60ed..02849492d3 100644
--- a/apps/web/core/components/workspace/settings/workspace-details.tsx
+++ b/apps/web/core/components/workspace/settings/workspace-details.tsx
@@ -10,7 +10,7 @@ import { Controller, useForm } from "react-hook-form";
 // Plane Imports
 import { ORGANIZATION_SIZE, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { EditIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IWorkspace } from "@plane/types";
@@ -285,14 +285,14 @@ export const WorkspaceDetails = observer(function WorkspaceDetails() {
           <div className="flex items-center justify-between py-2">
             <Button
               variant="primary"
-              size="lg"
+              size="md"
+              stretch="auto"
+              label={isLoading ? t("updating") : t("workspace_settings.settings.general.update_workspace")}
               onClick={(e) => {
                 void handleSubmit(onSubmit)(e);
               }}
               loading={isLoading}
-            >
-              {isLoading ? t("updating") : t("workspace_settings.settings.general.update_workspace")}
-            </Button>
+            />
           </div>
         )}
       </div>
diff --git a/apps/web/core/components/workspace/sidebar/quick-actions.tsx b/apps/web/core/components/workspace/sidebar/quick-actions.tsx
index f1d6bd80ae..e9a32f8890 100644
--- a/apps/web/core/components/workspace/sidebar/quick-actions.tsx
+++ b/apps/web/core/components/workspace/sidebar/quick-actions.tsx
@@ -79,12 +79,8 @@ export const SidebarQuickActions = observer(function SidebarQuickActions() {
       />
       <div className="flex cursor-pointer items-center justify-between gap-2">
         <SidebarAddButton
-          label={
-            <>
-              <AddWorkItemIcon className="size-4" />
-              <span className="max-w-[145px] truncate text-13 font-medium">{t("sidebar.new_work_item")}</span>
-            </>
-          }
+          label={t("sidebar.new_work_item")}
+          icon={<AddWorkItemIcon className="size-4" />}
           onClick={() => toggleCreateIssueModal(true)}
           disabled={disabled}
           onMouseEnter={handleMouseEnter}
diff --git a/apps/web/core/components/workspace/views/form.tsx b/apps/web/core/components/workspace/views/form.tsx
index d980acee04..3b8c094246 100644
--- a/apps/web/core/components/workspace/views/form.tsx
+++ b/apps/web/core/components/workspace/views/form.tsx
@@ -9,7 +9,7 @@ import { Controller, useForm } from "react-hook-form";
 // plane imports
 import { ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, IWorkspaceView, IIssueFilters } from "@plane/types";
 import { EViewAccess, EIssueLayoutTypes, EIssuesStoreType } from "@plane/types";
 import { Input, TextArea } from "@plane/ui";
@@ -184,18 +184,23 @@ export const WorkspaceViewForm = observer(function WorkspaceViewForm(props: Prop
         </div>
       </div>
       <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
-        <Button variant="secondary" onClick={handleClose}>
-          {t("common.cancel")}
-        </Button>
-        <Button variant="primary" type="submit" loading={isSubmitting}>
-          {data
-            ? isSubmitting
-              ? t("common.updating")
-              : t("view.update.label")
-            : isSubmitting
-              ? t("common.creating")
-              : t("view.create.label")}
-        </Button>
+        <Button variant="secondary" size="sm" stretch="auto" label={t("common.cancel")} onClick={handleClose} />
+        <Button
+          variant="primary"
+          size="sm"
+          stretch="auto"
+          label={
+            data
+              ? isSubmitting
+                ? t("common.updating")
+                : t("view.update.label")
+              : isSubmitting
+                ? t("common.creating")
+                : t("view.create.label")
+          }
+          type="submit"
+          loading={isSubmitting}
+        />
       </div>
     </form>
   );
diff --git a/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx b/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
index e74dfd55db..0366613f3e 100644
--- a/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
+++ b/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
@@ -12,11 +12,10 @@ import useSWR from "swr";
 // ui
 import { LogOut } from "lucide-react";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
-import { Button, getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { PlaneLogo } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
-import { cn } from "@plane/utils";
 // assets
 import WorkSpaceNotAvailable from "@/app/assets/workspace/workspace-not-available.png?url";
 // components
@@ -179,19 +178,34 @@ export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props
             </p>
             <div className="flex items-center justify-center gap-2 pt-4">
               {allWorkspaces && allWorkspaces.length > 0 && (
-                <Link href="/" className={cn(getButtonStyling("primary", "base"))}>
-                  Go Home
-                </Link>
+                <Button
+                  variant="primary"
+                  size="sm"
+                  stretch="auto"
+                  label="Go Home"
+                  nativeButton={false}
+                  render={<Link href="/" />}
+                />
               )}
               {allWorkspaces?.length > 0 && (
-                <Link href="/settings/profile/general/" className={cn(getButtonStyling("secondary", "base"))}>
-                  Visit Profile
-                </Link>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  stretch="auto"
+                  label="Visit Profile"
+                  nativeButton={false}
+                  render={<Link href="/settings/profile/general/" />}
+                />
               )}
               {allWorkspaces && allWorkspaces.length === 0 && (
-                <Link href="/create-workspace/" className={cn(getButtonStyling("secondary", "base"))}>
-                  Create new workspace
-                </Link>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  stretch="auto"
+                  label="Create new workspace"
+                  nativeButton={false}
+                  render={<Link href="/create-workspace/" />}
+                />
               )}
             </div>
           </div>
@@ -216,16 +230,22 @@ export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props
               </p>
             </div>
             <div className="flex items-center justify-center gap-2">
-              <Link href="/invitations">
-                <span>
-                  <Button variant="secondary">Check pending invites</Button>
-                </span>
-              </Link>
-              <Link href="/create-workspace">
-                <span>
-                  <Button variant="primary">Create new workspace</Button>
-                </span>
-              </Link>
+              <Button
+                variant="secondary"
+                size="sm"
+                stretch="auto"
+                label="Check pending invites"
+                nativeButton={false}
+                render={<Link href="/invitations" />}
+              />
+              <Button
+                variant="primary"
+                size="sm"
+                stretch="auto"
+                label="Create new workspace"
+                nativeButton={false}
+                render={<Link href="/create-workspace" />}
+              />
             </div>
           </div>
         </div>