diff --git a/AGENTS.md b/AGENTS.md
index f6e2b9dd3a4..5dabb62afab 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -9,7 +9,6 @@
 - `pnpm check:types` - TypeScript type checking
 - `pnpm fix` - Auto-fix format and lint issues
 - `pnpm turbo run <command> --filter=<package>` - Target specific package/app
-- `pnpm --filter=@plane/ui storybook` - Start Storybook on port 6006
 
 ## Code Style
 
@@ -21,7 +20,7 @@
 - **Error Handling**: Use try-catch with proper error types, log errors appropriately
 - **State Management**: MobX stores in `packages/shared-state`, reactive patterns
 - **Testing**: All features require unit tests, use existing test framework per package
-- **Components**: Build in `@plane/ui` with Storybook for isolated development
+- **Components**: Primitives come from the published `@makeplane/propel` npm package (`@makeplane/propel/components/*`, `elements/*`, `icons`); composite/Plane-specific components live in `@plane/blocks` (`packages/blocks`, subpath imports only, e.g. `@plane/blocks/toast`)
 
 ## Backend tests (Docker)
 
diff --git a/apps/admin/components/common/skeleton.tsx b/apps/admin/components/common/skeleton.tsx
index 8652a3fefb0..48982f3649a 100644
--- a/apps/admin/components/common/skeleton.tsx
+++ b/apps/admin/components/common/skeleton.tsx
@@ -9,7 +9,7 @@ import React from "react";
 import { cn } from "@plane/utils";
 
 // Loading-placeholder skeleton. @makeplane/propel has no skeleton component yet;
-// this matches the API the workspace @plane/propel skeleton exposed.
+// this matches the API the legacy workspace skeleton component exposed.
 
 type SkeletonProps = {
   children: React.ReactNode;
diff --git a/apps/admin/providers/toast.tsx b/apps/admin/providers/toast.tsx
index 1042dd90bdc..ed98cb91ff2 100644
--- a/apps/admin/providers/toast.tsx
+++ b/apps/admin/providers/toast.tsx
@@ -10,7 +10,7 @@ import { IconButton } from "@makeplane/propel/components/icon-button";
 import { Icon } from "@makeplane/propel/components/icon";
 import { CloseOutline } from "@makeplane/propel/icons";
 
-// Keep the call-site API the workspace @plane/propel toast exposed, backed by
+// Keep the call-site API the legacy workspace toast exposed, backed by
 // @makeplane/propel's toast manager, so consumers only change their import path.
 export enum TOAST_TYPE {
   SUCCESS = "success",
diff --git a/apps/space/app/error.tsx b/apps/space/app/error.tsx
index 87aa8dc1992..38322466c41 100644
--- a/apps/space/app/error.tsx
+++ b/apps/space/app/error.tsx
@@ -5,7 +5,7 @@
  */
 
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 
 function ErrorPage() {
   const handleRetry = () => {
@@ -31,9 +31,7 @@ function ErrorPage() {
           </p>
         </div>
         <div className="flex items-center justify-center gap-2">
-          <Button variant="primary" size="lg" onClick={handleRetry}>
-            Refresh
-          </Button>
+          <Button variant="primary" size="md" stretch="auto" label="Refresh" onClick={handleRetry} />
           {/* <Button variant="secondary" size="lg" onClick={() => {}}>
             Sign out
           </Button> */}
diff --git a/apps/space/components/account/auth-forms/auth-root.tsx b/apps/space/components/account/auth-forms/auth-root.tsx
index d31649f789e..aa9cb54e399 100644
--- a/apps/space/components/account/auth-forms/auth-root.tsx
+++ b/apps/space/components/account/auth-forms/auth-root.tsx
@@ -10,7 +10,7 @@ import { useSearchParams } from "next/navigation";
 // plane imports
 import { SitesAuthService } from "@plane/services";
 import type { IEmailCheckData } from "@plane/types";
-import { OAuthOptions } from "@plane/ui";
+import { OAuthOptions } from "@plane/blocks/oauth";
 // helpers
 import type { TAuthErrorInfo } from "@/helpers/authentication.helper";
 import { EErrorAlertType, authErrorHandler, EAuthenticationErrorCodes } from "@/helpers/authentication.helper";
diff --git a/apps/space/components/account/auth-forms/email.tsx b/apps/space/components/account/auth-forms/email.tsx
index 997c3df7d3f..bfc80c23a0b 100644
--- a/apps/space/components/account/auth-forms/email.tsx
+++ b/apps/space/components/account/auth-forms/email.tsx
@@ -10,10 +10,11 @@ import { observer } from "mobx-react";
 // icons
 import { CloseCircleOutline, WarningCircleOutline } from "@makeplane/propel/icons";
 // types
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 import type { IEmailCheckData } from "@plane/types";
 // ui
-import { Input, Spinner } from "@plane/ui";
+import { Input } from "@plane/blocks/form-fields";
+import { Spinner } from "@plane/blocks/spinner";
 // helpers
 import { cn } from "@plane/utils";
 import { checkEmailValidity } from "@/helpers/string.helper";
@@ -100,7 +101,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
           </p>
         )}
       </div>
-      <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
+      <Button type="submit" variant="primary" size="lg" stretch="full" disabled={isButtonDisabled}>
         {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
       </Button>
     </form>
diff --git a/apps/space/components/account/auth-forms/password.tsx b/apps/space/components/account/auth-forms/password.tsx
index 3b17cdf18f9..1f91dd8ad2a 100644
--- a/apps/space/components/account/auth-forms/password.tsx
+++ b/apps/space/components/account/auth-forms/password.tsx
@@ -9,9 +9,11 @@ import { observer } from "mobx-react";
 import { CloseCircleOutline, HideOutline, ShowOutline } from "@makeplane/propel/icons";
 // plane imports
 import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
+import { Button as ButtonElement } from "@makeplane/propel/elements/button";
 import { AuthService } from "@plane/services";
-import { Input, Spinner, PasswordStrengthIndicator } from "@plane/ui";
+import { Input, PasswordStrengthIndicator } from "@plane/blocks/form-fields";
+import { Spinner } from "@plane/blocks/spinner";
 import { getPasswordStrength } from "@plane/utils";
 // types
 import { EAuthModes, EAuthSteps } from "@/types/auth";
@@ -236,7 +238,7 @@ 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}>
+            <ButtonElement type="submit" variant="primary" size="lg" stretch="full" disabled={isButtonDisabled}>
               {isSubmitting ? (
                 <Spinner height="20px" width="20px" />
               ) : isSMTPConfigured ? (
@@ -244,23 +246,22 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
               ) : (
                 "Go to workspace"
               )}
-            </Button>
+            </ButtonElement>
             {isSMTPConfigured && (
               <Button
                 type="button"
-                onClick={redirectToUniqueCodeSignIn}
                 variant="secondary"
-                className="w-full"
-                size="xl"
-              >
-                Sign in with unique code
-              </Button>
+                size="lg"
+                stretch="full"
+                label="Sign in with unique code"
+                onClick={redirectToUniqueCodeSignIn}
+              />
             )}
           </>
         ) : (
-          <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
+          <ButtonElement type="submit" variant="primary" size="lg" stretch="full" disabled={isButtonDisabled}>
             {isSubmitting ? <Spinner height="20px" width="20px" /> : "Create account"}
-          </Button>
+          </ButtonElement>
         )}
       </div>
     </form>
diff --git a/apps/space/components/account/auth-forms/unique-code.tsx b/apps/space/components/account/auth-forms/unique-code.tsx
index 61f05872659..045cf2f7b76 100644
--- a/apps/space/components/account/auth-forms/unique-code.tsx
+++ b/apps/space/components/account/auth-forms/unique-code.tsx
@@ -8,9 +8,10 @@ import React, { useEffect, useState } from "react";
 import { CloseCircleOutline, TickCircleOutline } from "@makeplane/propel/icons";
 // plane imports
 import { API_BASE_URL } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 import { AuthService } from "@plane/services";
-import { Input, Spinner } from "@plane/ui";
+import { Input } from "@plane/blocks/form-fields";
+import { Spinner } from "@plane/blocks/spinner";
 // hooks
 import useTimer from "@/hooks/use-timer";
 // types
@@ -153,7 +154,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
       </div>
 
       <div className="space-y-2.5">
-        <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
+        <Button type="submit" variant="primary" size="lg" stretch="full" disabled={isButtonDisabled}>
           {isRequestingNewCode ? "Sending code" : isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
         </Button>
       </div>
diff --git a/apps/space/components/account/user-logged-in.tsx b/apps/space/components/account/user-logged-in.tsx
index 42815b013b4..5b7814f3c8c 100644
--- a/apps/space/components/account/user-logged-in.tsx
+++ b/apps/space/components/account/user-logged-in.tsx
@@ -5,7 +5,7 @@
  */
 
 import { observer } from "mobx-react";
-import { PlaneLockup } from "@plane/propel/icons";
+import { PlaneLockup } from "@plane/blocks/icons";
 // assets
 import UserLoggedInImage from "@/app/assets/user-logged-in.svg?url";
 // components
diff --git a/apps/space/components/common/powered-by.tsx b/apps/space/components/common/powered-by.tsx
index 05da512100b..8e636cbf11b 100644
--- a/apps/space/components/common/powered-by.tsx
+++ b/apps/space/components/common/powered-by.tsx
@@ -6,7 +6,7 @@
 
 import { WEBSITE_URL } from "@plane/constants";
 // assets
-import { PlaneLogo } from "@plane/propel/icons";
+import { PlaneLogo } from "@plane/blocks/icons";
 
 type TPoweredBy = {
   disabled?: boolean;
diff --git a/apps/space/components/editor/toolbar.tsx b/apps/space/components/editor/toolbar.tsx
index ce2a0a2c6b7..4f86fec0454 100644
--- a/apps/space/components/editor/toolbar.tsx
+++ b/apps/space/components/editor/toolbar.tsx
@@ -8,8 +8,8 @@ import React, { useEffect, useState, useCallback } from "react";
 // plane imports
 import { TOOLBAR_ITEMS } from "@plane/editor";
 import type { ToolbarMenuItem, EditorRefApi } from "@plane/editor";
-import { Button } from "@plane/propel/button";
-import { Tooltip } from "@plane/propel/tooltip";
+import { Button } from "@makeplane/propel/components/button";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
 import { cn } from "@plane/utils";
 
 type Props = {
@@ -70,12 +70,8 @@ export function IssueCommentToolbar(props: Props) {
                 return (
                   <Tooltip
                     key={item.renderKey}
-                    tooltipContent={
-                      <p className="flex flex-col gap-1 text-center text-11">
-                        <span className="font-medium">{item.name}</span>
-                        {item.shortcut && <kbd className="text-placeholder">{item.shortcut.join(" + ")}</kbd>}
-                      </p>
-                    }
+                    label={item.name}
+                    shortcut={item.shortcut ? item.shortcut.join(" + ") : undefined}
                   >
                     <button
                       type="button"
@@ -105,12 +101,13 @@ export function IssueCommentToolbar(props: Props) {
             <Button
               type="button"
               variant="primary"
+              size="sm"
+              stretch="auto"
+              label="Comment"
               onClick={handleSubmit}
               disabled={isCommentEmpty}
               loading={isSubmitting}
-            >
-              Comment
-            </Button>
+            />
           </div>
         )}
       </div>
diff --git a/apps/space/components/instance/instance-failure-view.tsx b/apps/space/components/instance/instance-failure-view.tsx
index 2bf810e9d01..92c82b94464 100644
--- a/apps/space/components/instance/instance-failure-view.tsx
+++ b/apps/space/components/instance/instance-failure-view.tsx
@@ -5,7 +5,7 @@
  */
 
 import { useTheme } from "next-themes";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 // assets
 import InstanceFailureDarkImage from "@/app/assets/instance/instance-failure-dark.svg?url";
 import InstanceFailureImage from "@/app/assets/instance/instance-failure.svg?url";
@@ -31,9 +31,7 @@ export function InstanceFailureView() {
           </p>
         </div>
         <div className="flex justify-center">
-          <Button size="lg" onClick={handleRetry}>
-            Retry
-          </Button>
+          <Button variant="primary" size="md" stretch="auto" label="Retry" onClick={handleRetry} />
         </div>
       </div>
     </div>
diff --git a/apps/space/components/issues/filters/applied-filters/priority.tsx b/apps/space/components/issues/filters/applied-filters/priority.tsx
index 1b3a03a85e4..203db5665a2 100644
--- a/apps/space/components/issues/filters/applied-filters/priority.tsx
+++ b/apps/space/components/issues/filters/applied-filters/priority.tsx
@@ -4,9 +4,9 @@
  * See the LICENSE file for details.
  */
 
-import { PriorityIcon } from "@plane/propel/icons";
+import { PriorityIcon } from "@plane/blocks/icons";
 import { CloseOutline } from "@makeplane/propel/icons";
-import type { TIssuePriorities } from "@plane/propel/icons";
+import type { TIssuePriorities } from "@plane/blocks/icons";
 
 type Props = {
   handleRemove: (val: string) => void;
diff --git a/apps/space/components/issues/filters/applied-filters/state.tsx b/apps/space/components/issues/filters/applied-filters/state.tsx
index 1a37861f2da..290f7ea6742 100644
--- a/apps/space/components/issues/filters/applied-filters/state.tsx
+++ b/apps/space/components/issues/filters/applied-filters/state.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 // plane imports
 import { EIconSize } from "@plane/constants";
-import { StateGroupIcon } from "@plane/propel/icons";
+import { StateGroupIcon } from "@plane/blocks/icons";
 import { CloseOutline } from "@makeplane/propel/icons";
 // hooks
 import { useStates } from "@/hooks/store/use-state";
diff --git a/apps/space/components/issues/filters/helpers/dropdown.tsx b/apps/space/components/issues/filters/helpers/dropdown.tsx
index 17f7ca66b8f..89c3a1abad8 100644
--- a/apps/space/components/issues/filters/helpers/dropdown.tsx
+++ b/apps/space/components/issues/filters/helpers/dropdown.tsx
@@ -9,7 +9,7 @@ import type { Placement } from "@popperjs/core";
 import { usePopper } from "react-popper";
 import { Popover, Transition } from "@headlessui/react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 
 type Props = {
   children: React.ReactNode;
@@ -35,7 +35,7 @@ export function FiltersDropdown(props: Props) {
         return (
           <>
             <Popover.Button as={React.Fragment}>
-              <Button ref={setReferenceElement} variant="secondary">
+              <Button ref={setReferenceElement} variant="secondary" size="sm" stretch="auto">
                 <div className={`${open ? "text-primary" : "text-secondary"}`}>
                   <span>{title}</span>
                 </div>
diff --git a/apps/space/components/issues/filters/labels.tsx b/apps/space/components/issues/filters/labels.tsx
index db235c5b798..157d24c01dc 100644
--- a/apps/space/components/issues/filters/labels.tsx
+++ b/apps/space/components/issues/filters/labels.tsx
@@ -6,7 +6,7 @@
 
 import React, { useState } from "react";
 // plane imports
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // types
 import type { IIssueLabel } from "@/types/issue";
 // local imports
diff --git a/apps/space/components/issues/filters/priority.tsx b/apps/space/components/issues/filters/priority.tsx
index 06e4a532a81..935078e08e5 100644
--- a/apps/space/components/issues/filters/priority.tsx
+++ b/apps/space/components/issues/filters/priority.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { ISSUE_PRIORITY_FILTERS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { PriorityIcon } from "@plane/propel/icons";
+import { PriorityIcon } from "@plane/blocks/icons";
 // local imports
 import { FilterHeader } from "./helpers/filter-header";
 import { FilterOption } from "./helpers/filter-option";
diff --git a/apps/space/components/issues/filters/state.tsx b/apps/space/components/issues/filters/state.tsx
index f9275a2d24e..819c4eb0b8b 100644
--- a/apps/space/components/issues/filters/state.tsx
+++ b/apps/space/components/issues/filters/state.tsx
@@ -8,8 +8,8 @@ import React, { useState } from "react";
 import { observer } from "mobx-react";
 // ui
 import { EIconSize } from "@plane/constants";
-import { StateGroupIcon } from "@plane/propel/icons";
-import { Loader } from "@plane/ui";
+import { StateGroupIcon } from "@plane/blocks/icons";
+import { Loader } from "@plane/blocks/loader";
 // hooks
 import { useStates } from "@/hooks/store/use-state";
 // local imports
diff --git a/apps/space/components/issues/issue-layouts/kanban/block.tsx b/apps/space/components/issues/issue-layouts/kanban/block.tsx
index 3ad4c719172..ee7f9bbe131 100644
--- a/apps/space/components/issues/issue-layouts/kanban/block.tsx
+++ b/apps/space/components/issues/issue-layouts/kanban/block.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { Link } from "react-router";
 import { useParams, useSearchParams } from "next/navigation";
 // plane types
-import { Tooltip } from "@plane/propel/tooltip";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { IIssueDisplayProperties } from "@plane/types";
 // plane ui
 // plane utils
@@ -57,7 +57,7 @@ const KanbanIssueDetailsBlock = observer(function KanbanIssueDetailsBlock(props:
       </WithDisplayPropertiesHOC>
 
       <div className="mb-1.5 line-clamp-1 w-full text-13 text-primary">
-        <Tooltip tooltipContent={issue.name}>
+        <Tooltip label={issue.name}>
           <span>{issue.name}</span>
         </Tooltip>
       </div>
diff --git a/apps/space/components/issues/issue-layouts/list/block.tsx b/apps/space/components/issues/issue-layouts/list/block.tsx
index 24fc5f27e83..98af524db2b 100644
--- a/apps/space/components/issues/issue-layouts/list/block.tsx
+++ b/apps/space/components/issues/issue-layouts/list/block.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { Link } from "react-router";
 import { useParams, useSearchParams } from "next/navigation";
 // plane types
-import { Tooltip } from "@plane/propel/tooltip";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { IIssueDisplayProperties } from "@plane/types";
 // plane ui
 // plane utils
@@ -79,7 +79,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
             onClick={handleIssuePeekOverview}
             className="w-full cursor-pointer truncate text-13 text-primary"
           >
-            <Tooltip tooltipContent={issue.name} position="top-start">
+            <Tooltip label={issue.name} side="top" align="start">
               <p className="truncate">{issue.name}</p>
             </Tooltip>
           </Link>
diff --git a/apps/space/components/issues/issue-layouts/properties/all-properties.tsx b/apps/space/components/issues/issue-layouts/properties/all-properties.tsx
index 728ccd4c820..5ee0808ea17 100644
--- a/apps/space/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/apps/space/components/issues/issue-layouts/properties/all-properties.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 import { AttachOutline, LinkOutline, ViewsOutline } from "@makeplane/propel/icons";
 // plane imports
-import { Tooltip } from "@plane/propel/tooltip";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { IIssueDisplayProperties } from "@plane/types";
 import { cn } from "@plane/utils";
 // components
@@ -137,7 +137,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
         displayPropertyKey="sub_issue_count"
         shouldRenderProperty={(properties) => !!properties.sub_issue_count && !!issue.sub_issues_count}
       >
-        <Tooltip tooltipHeading="Sub-work items" tooltipContent={`${issue.sub_issues_count}`}>
+        <Tooltip label={`Sub-work items: ${issue.sub_issues_count}`}>
           <div
             className={cn(
               "flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1",
@@ -158,7 +158,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
         displayPropertyKey="attachment_count"
         shouldRenderProperty={(properties) => !!properties.attachment_count && !!issue.attachment_count}
       >
-        <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
+        <Tooltip label={`Attachments: ${issue.attachment_count}`}>
           <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1">
             <AttachOutline className="h-3 w-3 flex-shrink-0" />
             <div className="text-11">{issue.attachment_count}</div>
@@ -172,7 +172,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
         displayPropertyKey="link"
         shouldRenderProperty={(properties) => !!properties.link && !!issue.link_count}
       >
-        <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
+        <Tooltip label={`Links: ${issue.link_count}`}>
           <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1">
             <LinkOutline className="h-3 w-3 flex-shrink-0" />
             <div className="text-11">{issue.link_count}</div>
diff --git a/apps/space/components/issues/issue-layouts/properties/cycle.tsx b/apps/space/components/issues/issue-layouts/properties/cycle.tsx
index 7f67aee1723..14a535e17b2 100644
--- a/apps/space/components/issues/issue-layouts/properties/cycle.tsx
+++ b/apps/space/components/issues/issue-layouts/properties/cycle.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 // plane ui
 import { CyclesOutline } from "@makeplane/propel/icons";
-import { Tooltip } from "@plane/propel/tooltip";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
 // plane utils
 import { cn } from "@plane/utils";
 //hooks
@@ -24,7 +24,7 @@ export const IssueBlockCycle = observer(function IssueBlockCycle({ cycleId, shou
   const cycle = getCycleById(cycleId);
 
   return (
-    <Tooltip tooltipHeading="Cycle" tooltipContent={cycle?.name ?? "No Cycle"}>
+    <Tooltip label={`Cycle: ${cycle?.name ?? "No Cycle"}`}>
       <div
         className={cn(
           "flex h-full w-full items-center justify-between gap-1 rounded-sm px-2.5 py-1 text-11 duration-300 focus:outline-none",
diff --git a/apps/space/components/issues/issue-layouts/properties/due-date.tsx b/apps/space/components/issues/issue-layouts/properties/due-date.tsx
index b3d291c30d9..fea4fb9d620 100644
--- a/apps/space/components/issues/issue-layouts/properties/due-date.tsx
+++ b/apps/space/components/issues/issue-layouts/properties/due-date.tsx
@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 import { DueDateOutline } from "@makeplane/propel/icons";
-import { Tooltip } from "@plane/propel/tooltip";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
 import { cn } from "@plane/utils";
 // helpers
 import { renderFormattedDate } from "@/helpers/date-time.helper";
@@ -30,7 +30,7 @@ export const IssueBlockDate = observer(function IssueBlockDate(props: Props) {
   const formattedDate = renderFormattedDate(due_date);
 
   return (
-    <Tooltip tooltipHeading="Due Date" tooltipContent={formattedDate}>
+    <Tooltip label={`Due Date: ${formattedDate ?? "No Date"}`}>
       <div
         className={cn("flex h-full items-center gap-1 rounded-sm px-2.5 py-1 text-11 text-primary", {
           "text-danger-primary": shouldHighLight && due_date && shouldHighlightIssueDueDate(due_date, state?.group),
diff --git a/apps/space/components/issues/issue-layouts/properties/labels.tsx b/apps/space/components/issues/issue-layouts/properties/labels.tsx
index 909c71629c1..d936477bb73 100644
--- a/apps/space/components/issues/issue-layouts/properties/labels.tsx
+++ b/apps/space/components/issues/issue-layouts/properties/labels.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 import { LabelsOutline } from "@makeplane/propel/icons";
 // plane imports
-import { Tooltip } from "@plane/propel/tooltip";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
 // hooks
 import { useLabel } from "@/hooks/store/use-label";
 
@@ -25,7 +25,7 @@ export const IssueBlockLabels = observer(function IssueBlockLabels({ labelIds, s
 
   if (labels.length <= 0)
     return (
-      <Tooltip position="top" tooltipHeading="Labels" tooltipContent="None">
+      <Tooltip side="top" label="Labels: None">
         <div
           className={`flex h-full items-center justify-center gap-2 rounded-sm border-[0.5px] border-strong px-2.5 py-1 text-11`}
         >
@@ -40,7 +40,7 @@ export const IssueBlockLabels = observer(function IssueBlockLabels({ labelIds, s
       {labels.length <= 2 ? (
         <>
           {labels.map((label) => (
-            <Tooltip key={label.id} position="top" tooltipHeading="Labels" tooltipContent={label?.name ?? ""}>
+            <Tooltip key={label.id} side="top" label={`Labels: ${label?.name ?? ""}`}>
               <div
                 key={label?.id}
                 className={`flex h-full max-w-full flex-shrink-0 items-center overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1 text-11`}
@@ -62,7 +62,7 @@ export const IssueBlockLabels = observer(function IssueBlockLabels({ labelIds, s
         <div
           className={`cursor-not-allowed" flex h-full flex-shrink-0 items-center rounded-sm border-[0.5px] border-strong px-2.5 py-1 text-11`}
         >
-          <Tooltip position="top" tooltipHeading="Labels" tooltipContent={labelsString}>
+          <Tooltip side="top" label={`Labels: ${labelsString}`}>
             <div className="flex h-full items-center gap-1.5 text-secondary">
               <span className="h-2 w-2 flex-shrink-0 rounded-full bg-accent-primary" />
               {`${labels.length} Labels`}
diff --git a/apps/space/components/issues/issue-layouts/properties/member.tsx b/apps/space/components/issues/issue-layouts/properties/member.tsx
index c6c5cc35616..d846ebc8fc0 100644
--- a/apps/space/components/issues/issue-layouts/properties/member.tsx
+++ b/apps/space/components/issues/issue-layouts/properties/member.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import type { LucideIcon } from "lucide-react";
 import { MembersOutline } from "@makeplane/propel/icons";
 // plane ui
-import { Avatar, AvatarGroup } from "@plane/ui";
+import { Avatar, AvatarGroup } from "@plane/blocks/avatar";
 // plane utils
 import { cn } from "@plane/utils";
 // hooks
diff --git a/apps/space/components/issues/issue-layouts/properties/modules.tsx b/apps/space/components/issues/issue-layouts/properties/modules.tsx
index bd610a49767..448060fc5e2 100644
--- a/apps/space/components/issues/issue-layouts/properties/modules.tsx
+++ b/apps/space/components/issues/issue-layouts/properties/modules.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 // plane ui
 import { ModuleOutline } from "@makeplane/propel/icons";
-import { Tooltip } from "@plane/propel/tooltip";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
 // plane utils
 import { cn } from "@plane/utils";
 // hooks
@@ -27,7 +27,7 @@ export const IssueBlockModules = observer(function IssueBlockModules({ moduleIds
 
   return (
     <div className="relative flex h-full flex-wrap items-center gap-1">
-      <Tooltip tooltipHeading="Modules" tooltipContent={modulesString}>
+      <Tooltip label={`Modules: ${modulesString || "None"}`}>
         {modules.length <= 1 ? (
           <div
             key={modules?.[0]?.id}
diff --git a/apps/space/components/issues/issue-layouts/properties/priority.tsx b/apps/space/components/issues/issue-layouts/properties/priority.tsx
index 9b4dc3d0176..448a1b0c2df 100644
--- a/apps/space/components/issues/issue-layouts/properties/priority.tsx
+++ b/apps/space/components/issues/issue-layouts/properties/priority.tsx
@@ -7,8 +7,8 @@
 import { SignalHigh } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
 // types
-import { PriorityIcon } from "@plane/propel/icons";
-import { Tooltip } from "@plane/propel/tooltip";
+import { PriorityIcon } from "@plane/blocks/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { TIssuePriorities } from "@plane/types";
 // constants
 import { cn, getIssuePriorityFilters } from "@plane/utils";
@@ -35,7 +35,7 @@ export function IssueBlockPriority({
   if (priority_detail === null) return <></>;
 
   return (
-    <Tooltip tooltipHeading="Priority" tooltipContent={t(priority_detail?.titleTranslationKey || "")}>
+    <Tooltip label={`Priority: ${t(priority_detail?.titleTranslationKey || "")}`}>
       <div
         className={cn(
           "flex h-full items-center gap-1.5 rounded-sm border-[0.5px] px-2 py-0.5 text-11",
diff --git a/apps/space/components/issues/issue-layouts/properties/state.tsx b/apps/space/components/issues/issue-layouts/properties/state.tsx
index de159697967..bdb8f663da2 100644
--- a/apps/space/components/issues/issue-layouts/properties/state.tsx
+++ b/apps/space/components/issues/issue-layouts/properties/state.tsx
@@ -6,8 +6,8 @@
 
 import { observer } from "mobx-react";
 // plane ui
-import { StateGroupIcon } from "@plane/propel/icons";
-import { Tooltip } from "@plane/propel/tooltip";
+import { StateGroupIcon } from "@plane/blocks/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { TStateGroups } from "@plane/types";
 // plane utils
 import { cn } from "@plane/utils";
@@ -37,7 +37,7 @@ export const IssueBlockState = observer(function IssueBlockState(props: Props) {
   if (!state) return null;
 
   return (
-    <Tooltip tooltipHeading="State" tooltipContent={state.name}>
+    <Tooltip label={`State: ${state.name}`}>
       <div
         className={cn("flex h-full w-full items-center justify-between gap-1 rounded-sm px-2.5 py-1 text-11", {
           "border-[0.5px] border-strong": shouldShowBorder,
diff --git a/apps/space/components/issues/issue-layouts/utils.tsx b/apps/space/components/issues/issue-layouts/utils.tsx
index 116ceee7ac7..198211a42f4 100644
--- a/apps/space/components/issues/issue-layouts/utils.tsx
+++ b/apps/space/components/issues/issue-layouts/utils.tsx
@@ -7,7 +7,7 @@
 import { isNil } from "lodash-es";
 // types
 import { EIconSize, ISSUE_PRIORITIES } from "@plane/constants";
-import { CycleGroupIcon, PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
+import { CycleGroupIcon, PriorityIcon, StateGroupIcon } from "@plane/blocks/icons";
 import { CyclesOutline, ModuleOutline } from "@makeplane/propel/icons";
 import type {
   GroupByColumnTypes,
@@ -17,7 +17,7 @@ import type {
   TGroupedIssues,
 } from "@plane/types";
 // ui
-import { Avatar } from "@plane/ui";
+import { Avatar } from "@plane/blocks/avatar";
 // components
 // constants
 // stores
diff --git a/apps/space/components/issues/navbar/layout-icon.tsx b/apps/space/components/issues/navbar/layout-icon.tsx
index d3951d4aa32..537e032d1d6 100644
--- a/apps/space/components/issues/navbar/layout-icon.tsx
+++ b/apps/space/components/issues/navbar/layout-icon.tsx
@@ -6,7 +6,7 @@
 
 import type { TIssueLayout } from "@plane/constants";
 import { BoardOutline, ListOutline } from "@makeplane/propel/icons";
-import type { ISvgIcons } from "@plane/propel/icons";
+import type { ISvgIcons } from "@plane/blocks/icons";
 
 export function IssueLayoutIcon({
   layout,
diff --git a/apps/space/components/issues/navbar/layout-selection.tsx b/apps/space/components/issues/navbar/layout-selection.tsx
index 927fd7d13cc..985dbd6bb93 100644
--- a/apps/space/components/issues/navbar/layout-selection.tsx
+++ b/apps/space/components/issues/navbar/layout-selection.tsx
@@ -10,7 +10,7 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { SITES_ISSUE_LAYOUTS } from "@plane/constants";
 // plane i18n
 import { useTranslation } from "@plane/i18n";
-import { Tooltip } from "@plane/propel/tooltip";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
 // helpers
 import { queryParamGenerator } from "@/helpers/query-param-generator";
 // hooks
@@ -53,7 +53,7 @@ export const IssuesLayoutSelection = observer(function IssuesLayoutSelection(pro
         if (!layoutOptions[layout.key]) return;
 
         return (
-          <Tooltip key={layout.key} tooltipContent={t(layout.titleTranslationKey)}>
+          <Tooltip key={layout.key} label={t(layout.titleTranslationKey)}>
             <button
               type="button"
               className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded-sm bg-layer-transparent transition-all hover:bg-layer-transparent-hover ${
diff --git a/apps/space/components/issues/navbar/user-avatar.tsx b/apps/space/components/issues/navbar/user-avatar.tsx
index c3557fd6c10..49a25eb3500 100644
--- a/apps/space/components/issues/navbar/user-avatar.tsx
+++ b/apps/space/components/issues/navbar/user-avatar.tsx
@@ -13,9 +13,9 @@ import { LogOutOutline } from "@makeplane/propel/icons";
 import { Popover, Transition } from "@headlessui/react";
 // plane imports
 import { API_BASE_URL } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { AuthService } from "@plane/services";
-import { Avatar } from "@plane/ui";
+import { Avatar } from "@plane/blocks/avatar";
 import { getFileURL } from "@plane/utils";
 // helpers
 import { queryParamGenerator } from "@/helpers/query-param-generator";
@@ -119,7 +119,7 @@ export const UserAvatar = observer(function UserAvatar() {
       ) : (
         <div className="flex-shrink-0">
           <Link to={`/?next_path=${pathName}?${queryParam}`}>
-            <Button variant="secondary">Sign in</Button>
+            <Button variant="secondary" size="sm" stretch="auto" label="Sign in" />
           </Link>
         </div>
       )}
diff --git a/apps/space/components/issues/peek-overview/comment/add-comment.tsx b/apps/space/components/issues/peek-overview/comment/add-comment.tsx
index acd86cdd5cf..1e2eaa2dda3 100644
--- a/apps/space/components/issues/peek-overview/comment/add-comment.tsx
+++ b/apps/space/components/issues/peek-overview/comment/add-comment.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { useForm, Controller } from "react-hook-form";
 // plane imports
 import type { EditorRefApi } from "@plane/editor";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { SitesFileService } from "@plane/services";
 import type { TIssuePublicComment } from "@plane/types";
 // editor components
diff --git a/apps/space/components/issues/peek-overview/comment/comment-reactions.tsx b/apps/space/components/issues/peek-overview/comment/comment-reactions.tsx
index be6a6fb48b8..cffcd6907d7 100644
--- a/apps/space/components/issues/peek-overview/comment/comment-reactions.tsx
+++ b/apps/space/components/issues/peek-overview/comment/comment-reactions.tsx
@@ -8,9 +8,9 @@ import React, { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 // plane imports
-import { stringToEmoji } from "@plane/propel/emoji-icon-picker";
-import { EmojiReactionGroup, EmojiReactionPicker } from "@plane/propel/emoji-reaction";
-import type { EmojiReactionType } from "@plane/propel/emoji-reaction";
+import { stringToEmoji } from "@plane/blocks/emoji-icon-picker";
+import { EmojiReactionGroup, EmojiReactionPicker } from "@plane/blocks/emoji-reaction";
+import type { EmojiReactionType } from "@plane/blocks/emoji-reaction";
 // helpers
 import { groupReactions } from "@/helpers/emoji.helper";
 import { queryParamGenerator } from "@/helpers/query-param-generator";
diff --git a/apps/space/components/issues/peek-overview/full-screen-peek-view.tsx b/apps/space/components/issues/peek-overview/full-screen-peek-view.tsx
index 4cf425ba876..ebad7a4c024 100644
--- a/apps/space/components/issues/peek-overview/full-screen-peek-view.tsx
+++ b/apps/space/components/issues/peek-overview/full-screen-peek-view.tsx
@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 // plane imports
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // types
 import type { IIssue } from "@/types/issue";
 // local imports
diff --git a/apps/space/components/issues/peek-overview/header.tsx b/apps/space/components/issues/peek-overview/header.tsx
index 7543eccc916..99f50b4881a 100644
--- a/apps/space/components/issues/peek-overview/header.tsx
+++ b/apps/space/components/issues/peek-overview/header.tsx
@@ -15,7 +15,7 @@ import {
 } from "@makeplane/propel/icons";
 import { Listbox, Transition } from "@headlessui/react";
 // ui
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 // helpers
 import { copyTextToClipboard } from "@/helpers/string.helper";
 // hooks
diff --git a/apps/space/components/issues/peek-overview/issue-activity.tsx b/apps/space/components/issues/peek-overview/issue-activity.tsx
index 3519dc5cc3f..2ba8f34933d 100644
--- a/apps/space/components/issues/peek-overview/issue-activity.tsx
+++ b/apps/space/components/issues/peek-overview/issue-activity.tsx
@@ -9,7 +9,7 @@ import { Link } from "react-router";
 import { usePathname } from "next/navigation";
 import { LockOutline } from "@makeplane/propel/icons";
 // plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 // components
 import { AddComment } from "@/components/issues/peek-overview/comment/add-comment";
 import { CommentCard } from "@/components/issues/peek-overview/comment/comment-detail-card";
@@ -63,7 +63,7 @@ export const PeekOverviewIssueActivity = observer(function PeekOverviewIssueActi
                 Sign in to add your comment
               </p>
               <Link to={`/?next_path=${pathname}`}>
-                <Button variant="primary">Sign in</Button>
+                <Button variant="primary" size="sm" stretch="auto" label="Sign in" />
               </Link>
             </div>
           ))}
diff --git a/apps/space/components/issues/peek-overview/issue-properties.tsx b/apps/space/components/issues/peek-overview/issue-properties.tsx
index 2e5eb5c3797..31d2b205f5b 100644
--- a/apps/space/components/issues/peek-overview/issue-properties.tsx
+++ b/apps/space/components/issues/peek-overview/issue-properties.tsx
@@ -8,9 +8,9 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { StateGroupIcon, PriorityIcon } from "@plane/propel/icons";
+import { StateGroupIcon, PriorityIcon } from "@plane/blocks/icons";
 import { DueDateOutline, LinkOutline, PriorityOutline, StateOutline } from "@makeplane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { cn, getIssuePriorityFilters } from "@plane/utils";
 // helpers
 import { renderFormattedDate } from "@/helpers/date-time.helper";
diff --git a/apps/space/components/issues/peek-overview/side-peek-view.tsx b/apps/space/components/issues/peek-overview/side-peek-view.tsx
index aa981d8d943..3275c660e30 100644
--- a/apps/space/components/issues/peek-overview/side-peek-view.tsx
+++ b/apps/space/components/issues/peek-overview/side-peek-view.tsx
@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 // plane imports
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // store hooks
 import { usePublish } from "@/hooks/store/publish";
 // types
diff --git a/apps/space/components/issues/reactions/issue-emoji-reactions.tsx b/apps/space/components/issues/reactions/issue-emoji-reactions.tsx
index 7727ec90bde..c9cc9addca8 100644
--- a/apps/space/components/issues/reactions/issue-emoji-reactions.tsx
+++ b/apps/space/components/issues/reactions/issue-emoji-reactions.tsx
@@ -8,9 +8,9 @@ import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 // lib
-import { stringToEmoji } from "@plane/propel/emoji-icon-picker";
-import { EmojiReactionGroup, EmojiReactionPicker } from "@plane/propel/emoji-reaction";
-import type { EmojiReactionType } from "@plane/propel/emoji-reaction";
+import { stringToEmoji } from "@plane/blocks/emoji-icon-picker";
+import { EmojiReactionGroup, EmojiReactionPicker } from "@plane/blocks/emoji-reaction";
+import type { EmojiReactionType } from "@plane/blocks/emoji-reaction";
 // helpers
 import { groupReactions } from "@/helpers/emoji.helper";
 import { queryParamGenerator } from "@/helpers/query-param-generator";
diff --git a/apps/space/components/issues/reactions/issue-vote-reactions.tsx b/apps/space/components/issues/reactions/issue-vote-reactions.tsx
index 7dd41d391a7..58eee5948eb 100644
--- a/apps/space/components/issues/reactions/issue-vote-reactions.tsx
+++ b/apps/space/components/issues/reactions/issue-vote-reactions.tsx
@@ -9,7 +9,7 @@ import { ArrowDownOutline, TopArrowOutline } from "@makeplane/propel/icons";
 import { observer } from "mobx-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 // plane imports
-import { Tooltip } from "@plane/propel/tooltip";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
 import { cn } from "@plane/utils";
 // helpers
 import { queryParamGenerator } from "@/helpers/query-param-generator";
@@ -81,20 +81,13 @@ export const IssueVotes = observer(function IssueVotes(props: TIssueVotes) {
     <div className="flex items-center gap-2">
       {/* upvote button 👇 */}
       <Tooltip
-        tooltipContent={
-          <div>
-            {allUpVotes.length > 0 ? (
-              <>
-                {allUpVotes
-                  .map((r) => r.actor_details?.display_name)
-                  .splice(0, VOTES_LIMIT)
-                  .join(", ")}
-                {allUpVotes.length > VOTES_LIMIT && " and " + (allUpVotes.length - VOTES_LIMIT) + " more"}
-              </>
-            ) : (
-              "No upvotes yet"
-            )}
-          </div>
+        label={
+          allUpVotes.length > 0
+            ? allUpVotes
+                .map((r) => r.actor_details?.display_name)
+                .slice(0, VOTES_LIMIT)
+                .join(", ") + (allUpVotes.length > VOTES_LIMIT ? ` and ${allUpVotes.length - VOTES_LIMIT} more` : "")
+            : "No upvotes yet"
         }
       >
         <button
@@ -122,20 +115,14 @@ export const IssueVotes = observer(function IssueVotes(props: TIssueVotes) {
 
       {/* downvote button 👇 */}
       <Tooltip
-        tooltipContent={
-          <div>
-            {allDownVotes.length > 0 ? (
-              <>
-                {allDownVotes
-                  .map((r) => r.actor_details.display_name)
-                  .splice(0, VOTES_LIMIT)
-                  .join(", ")}
-                {allDownVotes.length > VOTES_LIMIT && " and " + (allDownVotes.length - VOTES_LIMIT) + " more"}
-              </>
-            ) : (
-              "No downvotes yet"
-            )}
-          </div>
+        label={
+          allDownVotes.length > 0
+            ? allDownVotes
+                .map((r) => r.actor_details.display_name)
+                .slice(0, VOTES_LIMIT)
+                .join(", ") +
+              (allDownVotes.length > VOTES_LIMIT ? ` and ${allDownVotes.length - VOTES_LIMIT} more` : "")
+            : "No downvotes yet"
         }
       >
         <button
diff --git a/apps/space/components/views/header.tsx b/apps/space/components/views/header.tsx
index dc2dabed070..5807f8c0c8c 100644
--- a/apps/space/components/views/header.tsx
+++ b/apps/space/components/views/header.tsx
@@ -6,7 +6,7 @@
 
 import React from "react";
 import { Link } from "react-router";
-import { PlaneLockup } from "@plane/propel/icons";
+import { PlaneLockup } from "@plane/blocks/icons";
 
 export function AuthHeader() {
   return (
diff --git a/apps/space/helpers/string.helper.ts b/apps/space/helpers/string.helper.ts
index 674a4bac984..7787fc3658f 100644
--- a/apps/space/helpers/string.helper.ts
+++ b/apps/space/helpers/string.helper.ts
@@ -47,7 +47,7 @@ export const checkEmailValidity = (email: string): boolean => {
   if (!email) return false;
 
   const isEmailValid =
-    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
       email
     );
 
diff --git a/apps/space/lib/instance-provider.tsx b/apps/space/lib/instance-provider.tsx
index bd18f816409..d0c0aa183a0 100644
--- a/apps/space/lib/instance-provider.tsx
+++ b/apps/space/lib/instance-provider.tsx
@@ -10,7 +10,7 @@ import { useTheme } from "next-themes";
 import useSWR from "swr";
 // plane imports
 import { SPACE_BASE_PATH } from "@plane/constants";
-import { PlaneLockup } from "@plane/propel/icons";
+import { PlaneLockup } from "@plane/blocks/icons";
 // assets
 import PlaneBackgroundPatternDark from "@/app/assets/auth/background-pattern-dark.svg?url";
 import PlaneBackgroundPattern from "@/app/assets/auth/background-pattern.svg?url";
diff --git a/apps/space/lib/toast-provider.tsx b/apps/space/lib/toast-provider.tsx
index 420c8011318..a8e4858c012 100644
--- a/apps/space/lib/toast-provider.tsx
+++ b/apps/space/lib/toast-provider.tsx
@@ -6,7 +6,7 @@
 
 import { useTheme } from "next-themes";
 // plane imports
-import { Toast } from "@plane/propel/toast";
+import { Toast } from "@plane/blocks/toast";
 import { resolveGeneralTheme } from "@plane/utils";
 
 export function ToastProvider({ children }: { children: React.ReactNode }) {
diff --git a/apps/space/package.json b/apps/space/package.json
index ea56f37d7f8..4be11648a46 100644
--- a/apps/space/package.json
+++ b/apps/space/package.json
@@ -23,13 +23,12 @@
     "@fontsource/material-symbols-rounded": "catalog:",
     "@headlessui/react": "catalog:",
     "@makeplane/propel": "catalog:",
+    "@plane/blocks": "workspace:*",
     "@plane/constants": "workspace:*",
     "@plane/editor": "workspace:*",
     "@plane/i18n": "workspace:*",
-    "@plane/propel": "workspace:*",
     "@plane/services": "workspace:*",
     "@plane/types": "workspace:*",
-    "@plane/ui": "workspace:*",
     "@plane/utils": "workspace:*",
     "@popperjs/core": "catalog:",
     "@react-router/node": "catalog:",
diff --git a/apps/space/store/issue-detail.store.ts b/apps/space/store/issue-detail.store.ts
index 6cbb6c867b3..407a25b49f1 100644
--- a/apps/space/store/issue-detail.store.ts
+++ b/apps/space/store/issue-detail.store.ts
@@ -246,7 +246,7 @@ export class IssueDetailStore implements IIssueDetailStore {
       return res;
     } catch (error) {
       console.log("Error in uploading comment asset:", error);
-      throw new Error("Asset upload failed. Please try again later.");
+      throw new Error("Asset upload failed. Please try again later.", { cause: error });
     }
   };
 
@@ -263,7 +263,7 @@ export class IssueDetailStore implements IIssueDetailStore {
       return res;
     } catch (error) {
       console.log("Error in uploading comment asset:", error);
-      throw new Error("Asset upload failed. Please try again later.");
+      throw new Error("Asset upload failed. Please try again later.", { cause: error });
     }
   };
 
diff --git a/apps/space/styles/globals.css b/apps/space/styles/globals.css
index 4cddab58710..90b68e1db82 100644
--- a/apps/space/styles/globals.css
+++ b/apps/space/styles/globals.css
@@ -1,6 +1,5 @@
 @import "@plane/tailwind-config/index.css";
 @import "@plane/editor/styles";
-@import "@plane/propel/styles/react-day-picker.css";
 @plugin "@tailwindcss/typography";
 
 /* stickies and editor colors
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx
index 48a37bce4f1..d0cd1fdf674 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx
@@ -8,7 +8,8 @@ import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 // ui
 import { CyclesOutline } from "@makeplane/propel/icons";
-import { Breadcrumbs, Header } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
+import { Header } from "@plane/blocks/header";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 // plane web components
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/header.tsx
index 992476e6d3d..fd527681607 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/header.tsx
@@ -8,7 +8,8 @@ import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import { AnalyticsOutline } from "@makeplane/propel/icons";
 // plane imports
-import { Breadcrumbs, Header } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
+import { Header } from "@plane/blocks/header";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
index e1e985e1d4d..19dcec84201 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
@@ -10,7 +10,7 @@ import { useRouter } from "next/navigation";
 // plane package imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { EmptyStateDetailed } from "@plane/blocks/empty-state";
 import { Tab, Tabs, TabsList, TabsPanel } from "@makeplane/propel/components/tabs";
 // components
 import { cn } from "@plane/utils";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/header.tsx
index 88df260539d..0fef8e722e1 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/header.tsx
@@ -7,7 +7,8 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { Header, Row } from "@plane/ui";
+import { Header } from "@plane/blocks/header";
+import { Row } from "@plane/blocks/row";
 import { cn } from "@plane/utils";
 // components
 import { AppHeader } from "@/components/core/app-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx
index a644c40b6e6..e36bd272fe7 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx
@@ -12,7 +12,7 @@ import useSWR from "swr";
 import { useTranslation } from "@plane/i18n";
 import type { TIssue } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // assets
 import emptyIssueDark from "@/app/assets/empty-state/search/issues-dark.webp?url";
 import emptyIssueLight from "@/app/assets/empty-state/search/issues-light.webp?url";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/work-item-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/work-item-header.tsx
index 4b7111e9753..40dd7530655 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/work-item-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/work-item-header.tsx
@@ -9,7 +9,8 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane ui
 import { WorkItemsOutline } from "@makeplane/propel/icons";
-import { Breadcrumbs, Header } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
+import { Header } from "@plane/blocks/header";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { IssueDetailQuickActions } from "@/components/issues/issue-detail/issue-detail-quick-actions";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx
index 027b8edd7d7..dfce0b89514 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx
@@ -9,10 +9,11 @@ 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 { DraftsOutline } from "@makeplane/propel/icons";
 import { EIssuesStoreType } from "@plane/types";
-import { Breadcrumbs, Header } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
+import { Header } from "@plane/blocks/header";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { CountChip } from "@/components/common/count-chip";
@@ -68,13 +69,13 @@ export const WorkspaceDraftHeader = observer(function WorkspaceDraftHeader() {
           {joinedProjectIds && joinedProjectIds.length > 0 && (
             <Button
               variant="primary"
-              size="lg"
-              className="items-center gap-1"
+              size="md"
+              stretch="auto"
+              label={t("workspace_draft_issues.draft_an_issue")}
+              render={<button className="items-center gap-1" />}
               onClick={() => setIsDraftIssueModalOpen(true)}
               disabled={!isAuthorizedUser}
-            >
-              {t("workspace_draft_issues.draft_an_issue")}
-            </Button>
+            />
           )}
         </Header.RightItem>
       </Header>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
index 5d7c69f0852..0df7937090f 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
@@ -10,9 +10,9 @@ import { useParams } from "next/navigation";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateCompact } from "@plane/propel/empty-state";
+import { EmptyStateCompact } from "@plane/blocks/empty-state";
 import { AddOutline, SearchOutline } from "@makeplane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import { copyUrlToClipboard, orderJoinedProjects } from "@plane/utils";
 // components
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
index ce784524694..34e6998c37b 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
@@ -8,8 +8,9 @@ import { observer } from "mobx-react";
 import { HomeOutline, WidgetOutline } from "@makeplane/propel/icons";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { Breadcrumbs, Header } from "@plane/ui";
+import { Button } from "@makeplane/propel/elements/button";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
+import { Header } from "@plane/blocks/header";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 // hooks
@@ -38,11 +39,12 @@ export const WorkspaceDashboardHeader = observer(function WorkspaceDashboardHead
         <Header.RightItem>
           <Button
             variant="secondary"
-            size="lg"
+            size="md"
+            stretch="auto"
             onClick={() => toggleWidgetSettings(true)}
-            className="my-auto mb-0"
-            prependIcon={<WidgetOutline />}
+            render={<button className="my-auto mb-0" />}
           >
+            <WidgetOutline />
             <div className="hidden sm:hidden md:block">{t("home.manage_widgets")}</div>
           </Button>
         </Header.RightItem>
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 7bd93646c28..3696d7e49a3 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 28f415bdde1..9998a520531 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
@@ -11,14 +11,16 @@ import { ChevronDownOutline, RightSidePaneOutline, YourWorkOutline } from "@make
 import { PROFILE_VIEWER_TAB, PROFILE_ADMINS_TAB, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import type { IUserProfileProjectSegregation } from "@plane/types";
-import { Breadcrumbs, Header, CustomMenu } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
+import { CustomMenu } from "@plane/blocks/dropdowns";
+import { Header } from "@plane/blocks/header";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 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;
@@ -97,14 +99,14 @@ export const UserProfileHeader = observer(function UserProfileHeader(props: TUse
           <div className="shrink-0 md:hidden">
             <Button
               variant="ghost"
-              size="lg"
+              size="md"
+              stretch="auto"
               onClick={() => {
                 toggleProfileSidebar();
               }}
-              appendIcon={
-                <RightSidePaneOutline className={!profileSidebarCollapsed ? "text-accent-primary" : "text-secondary"} />
-              }
-            ></Button>
+            >
+              <RightSidePaneOutline className={!profileSidebarCollapsed ? "text-accent-primary" : "text-secondary"} />
+            </Button>
           </div>
         </div>
       </Header.RightItem>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
index fa8b73dbbf3..6636e9bf3eb 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
@@ -22,7 +22,7 @@ import type {
 } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
 // ui
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 // components
 import { DisplayFiltersSelection, FiltersDropdown } from "@/components/issues/issue-layouts/filters";
 import { IssueLayoutIcon } from "@/components/issues/issue-layouts/layout-icon";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
index 4d99983dd74..69265554da2 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
@@ -9,7 +9,7 @@ import { useParams, usePathname } from "next/navigation";
 // plane imports
 import { PROFILE_VIEWER_TAB, PROFILE_ADMINS_TAB } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Header, EHeaderVariant } from "@plane/ui";
+import { Header, EHeaderVariant } from "@plane/blocks/header";
 import { cn } from "@plane/utils";
 
 type Props = {
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/page.tsx
index 6118a867ab1..04087cda3fa 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/page.tsx
@@ -9,7 +9,7 @@ import useSWR from "swr";
 import { GROUP_CHOICES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import type { IUserStateDistribution, TStateGroups } from "@plane/types";
-import { ContentWrapper } from "@plane/ui";
+import { ContentWrapper } from "@plane/blocks/content-wrapper";
 // components
 import { PageHead } from "@/components/core/page-title";
 import { ProfileActivity } from "@/components/profile/overview/activity";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
index fcfdfe3b715..e5ab8082e33 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
@@ -10,7 +10,8 @@ import { ArchiveOutline, CyclesOutline, ModuleOutline, WorkItemsOutline } from "
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import { EIssuesStoreType } from "@plane/types";
 // ui
-import { Breadcrumbs, Header } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
+import { Header } from "@plane/blocks/header";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 // hooks
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 135167d96ef..8bd432e5d8f 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
@@ -11,8 +11,8 @@ import useSWR from "swr";
 import { Banner } from "@makeplane/propel/components/banner";
 import { ArchiveOutline } from "@makeplane/propel/icons";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { Loader } from "@plane/ui";
+import { Button } from "@makeplane/propel/components/button";
+import { Loader } from "@plane/blocks/loader";
 // components
 import { PageHead } from "@/components/core/page-title";
 import { IssueDetailRoot } from "@/components/issues/issue-detail";
@@ -77,10 +77,11 @@ function ArchivedIssueDetailsPage({ params }: Route.ComponentProps) {
             actions={
               <Button
                 variant="secondary"
+                size="sm"
+                stretch="auto"
+                label={t("issue.archive.go_to_archives")}
                 onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/archives/issues/`)}
-              >
-                {t("issue.archive.go_to_archives")}
-              </Button>
+              />
             }
           />
           <div className="flex h-full overflow-hidden">
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx
index dca11117aca..515cd710728 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx
@@ -9,7 +9,8 @@ import { useParams } from "next/navigation";
 import useSWR from "swr";
 // ui
 import { ArchiveOutline, WorkItemsOutline } from "@makeplane/propel/icons";
-import { Breadcrumbs, Header } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
+import { Header } from "@plane/blocks/header";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { IssueDetailQuickActions } from "@/components/issues/issue-detail/issue-detail-quick-actions";
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 cb5425b95e3..4a59076608d 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
@@ -18,12 +18,15 @@ import {
 } from "@plane/constants";
 import { usePlatformOS } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { IconButton } from "@plane/propel/icon-button";
+import { Button } from "@makeplane/propel/components/button";
+import { Button as ButtonElement } from "@makeplane/propel/elements/button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { ICustomSearchSelectOption, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
 import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
-import { Breadcrumbs, BreadcrumbNavigationSearchDropdown, Header } from "@plane/ui";
+import { Breadcrumbs, BreadcrumbNavigationSearchDropdown } from "@plane/blocks/breadcrumbs";
+import { Header } from "@plane/blocks/header";
 import { cn } from "@plane/utils";
 // components
 import { WorkItemsModal } from "@/components/analytics/work-items/modal";
@@ -230,33 +233,38 @@ export const CycleIssuesHeader = observer(function CycleIssuesHeader() {
 
             {canUserCreateIssue && (
               <>
-                <Button onClick={() => setAnalyticsModal(true)} variant="secondary" size="lg">
+                <ButtonElement variant="secondary" size="md" stretch="auto" onClick={() => setAnalyticsModal(true)}>
                   <span className="hidden @4xl:flex">Analytics</span>
                   <span className="@4xl:hidden">
                     <BarOutline className="size-3.5" />
                   </span>
-                </Button>
+                </ButtonElement>
                 {!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>
+                  />
                 )}
               </>
             )}
             <IconButton
               variant="tertiary"
-              size="lg"
-              icon={RightSidePaneOutline}
+              size="md"
+              icon={<Icon icon={RightSidePaneOutline} />}
+              aria-label="Toggle sidebar"
               onClick={toggleSidebar}
-              className={cn({
-                "bg-accent-subtle text-accent-primary": !isSidebarCollapsed,
-              })}
+              render={
+                <button
+                  className={cn({
+                    "bg-accent-subtle text-accent-primary": !isSidebarCollapsed,
+                  })}
+                />
+              }
             />
             <CycleQuickActions
               parentRef={parentRef}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
index 4c005147128..b7afe92e80a 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
@@ -13,7 +13,7 @@ import { useTranslation } from "@plane/i18n";
 import { BoardOutline, CalendarOutline, ChevronDownOutline, ListOutline } from "@makeplane/propel/icons";
 import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, EIssueLayoutTypes } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 // components
 import { WorkItemsModal } from "@/components/analytics/work-items/modal";
 import { DisplayFiltersSelection, FiltersDropdown } from "@/components/issues/issue-layouts/filters";
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 2f871518ffe..53d33d114e8 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,9 +9,10 @@ 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/elements/button";
 import { CyclesOutline } from "@makeplane/propel/icons";
-import { Breadcrumbs, Header } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
+import { Header } from "@plane/blocks/header";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { CyclesViewHeader } from "@/components/cycles/cycles-view-header";
@@ -62,7 +63,8 @@ export const CyclesListHeader = observer(function CyclesListHeader() {
           <CyclesViewHeader projectId={currentProjectDetails.id} />
           <Button
             variant="primary"
-            size="lg"
+            size="md"
+            stretch="auto"
             onClick={() => {
               toggleCreateCycleModal(true);
             }}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx
index 6784458772b..6ebde9210ce 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx
@@ -7,11 +7,11 @@
 import type React from "react";
 import { observer } from "mobx-react";
 // ui
-import type { ISvgIcons } from "@plane/propel/icons";
+import type { ISvgIcons } from "@plane/blocks/icons";
 import { GridOutline, ListOutline, TimelineOutline } from "@makeplane/propel/icons";
 // plane package imports
 import type { TCycleLayoutOptions } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 // hooks
 import { useCycleFilter } from "@/hooks/store/use-cycle-filter";
 import { useProject } from "@/hooks/store/use-project";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx
index c430e1622f5..cf9f29e63ce 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx
@@ -10,11 +10,11 @@ import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
 import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { EmptyStateDetailed } from "@plane/blocks/empty-state";
 import type { TCycleFilters } from "@plane/types";
 import { EUserProjectRoles } from "@plane/types";
 // components
-import { Header, EHeaderVariant } from "@plane/ui";
+import { Header, EHeaderVariant } from "@plane/blocks/header";
 import { calculateTotalFilters } from "@plane/utils";
 // assets
 import darkEmptyState from "@/app/assets/empty-state/disabled-feature/cycles-dark.webp?url";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/layout.tsx
index e43b6eb92bf..e04a4381ad5 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/layout.tsx
@@ -7,7 +7,8 @@
 import { observer } from "mobx-react";
 import { Outlet } from "react-router";
 // plane imports
-import { Header, Row } from "@plane/ui";
+import { Header } from "@plane/blocks/header";
+import { Row } from "@plane/blocks/row";
 import { cn } from "@plane/utils";
 // components
 import { TabNavigationRoot } from "@/components/navigation/tab-navigation-root";
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 2a0e462c9c4..655f9eed753 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
@@ -16,11 +16,12 @@ import {
   EUserPermissions,
   EUserPermissionsLevel,
 } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { ICustomSearchSelectOption, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
 import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
-import { Breadcrumbs, Header, BreadcrumbNavigationSearchDropdown } from "@plane/ui";
+import { Breadcrumbs, BreadcrumbNavigationSearchDropdown } from "@plane/blocks/breadcrumbs";
+import { Header } from "@plane/blocks/header";
 import { cn } from "@plane/utils";
 // components
 import { WorkItemsModal } from "@/components/analytics/work-items/modal";
@@ -46,7 +47,8 @@ import useLocalStorage from "@/hooks/use-local-storage";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web imports
 import { CommonProjectBreadcrumbs } from "@/components/breadcrumbs/common";
-import { IconButton } from "@plane/propel/icon-button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 
 export const ModuleIssuesHeader = observer(function ModuleIssuesHeader() {
   // refs
@@ -225,7 +227,13 @@ export const ModuleIssuesHeader = observer(function ModuleIssuesHeader() {
 
           {canUserCreateIssue ? (
             <>
-              <Button className="hidden md:block" onClick={() => setAnalyticsModal(true)} variant="secondary" size="lg">
+              <Button
+                variant="secondary"
+                size="md"
+                stretch="auto"
+                render={<button className="hidden md:block" />}
+                onClick={() => setAnalyticsModal(true)}
+              >
                 <span className="hidden @4xl:flex">Analytics</span>
                 <span className="@4xl:hidden">
                   <BarOutline className="size-3.5" />
@@ -233,8 +241,9 @@ export const ModuleIssuesHeader = observer(function ModuleIssuesHeader() {
               </Button>
               <Button
                 variant="primary"
-                size="lg"
-                className="hidden sm:flex"
+                size="md"
+                stretch="auto"
+                render={<button className="hidden sm:flex" />}
                 onClick={() => {
                   toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
                 }}
@@ -247,12 +256,17 @@ export const ModuleIssuesHeader = observer(function ModuleIssuesHeader() {
           )}
           <IconButton
             variant="tertiary"
-            size="lg"
-            icon={RightSidePaneOutline}
+            size="md"
+            icon={<Icon icon={RightSidePaneOutline} />}
+            aria-label="Toggle sidebar"
             onClick={toggleSidebar}
-            className={cn({
-              "bg-accent-subtle text-accent-primary": !isSidebarCollapsed,
-            })}
+            render={
+              <button
+                className={cn({
+                  "bg-accent-subtle text-accent-primary": !isSidebarCollapsed,
+                })}
+              />
+            }
           />
           {moduleId && (
             <ModuleQuickActions
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx
index b6a5c670f88..bdfa6466c42 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx
@@ -13,7 +13,7 @@ import { useTranslation } from "@plane/i18n";
 import { BoardOutline, CalendarOutline, ChevronDownOutline, ListOutline } from "@makeplane/propel/icons";
 import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, EIssueLayoutTypes } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 // components
 import { WorkItemsModal } from "@/components/analytics/work-items/modal";
 import { DisplayFiltersSelection, FiltersDropdown } from "@/components/issues/issue-layouts/filters";
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 41d166695cd..d9fb9429b8b 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,9 +10,10 @@ 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/elements/button";
 import { ModuleOutline } from "@makeplane/propel/icons";
-import { Breadcrumbs, Header } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
+import { Header } from "@plane/blocks/header";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { ModuleViewHeader } from "@/components/modules";
@@ -67,10 +68,11 @@ export const ModulesListHeader = observer(function ModulesListHeader() {
         {canUserCreateModule ? (
           <Button
             variant="primary"
+            size="md"
+            stretch="auto"
             onClick={() => {
               toggleCreateModuleModal(true);
             }}
-            size="lg"
           >
             <div className="block sm:hidden">{t("add")}</div>
             <div className="hidden sm:block">{t("project_module.add_module")}</div>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx
index 414579284e3..7fe2ee16033 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx
@@ -8,7 +8,8 @@ import { observer } from "mobx-react";
 import { MODULE_VIEW_LAYOUTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { ChevronDownOutline } from "@makeplane/propel/icons";
-import { CustomMenu, Row } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
+import { Row } from "@plane/blocks/row";
 import { ModuleLayoutIcon } from "@/components/modules";
 import { useModuleFilter } from "@/hooks/store/use-module-filter";
 import { useProject } from "@/hooks/store/use-project";
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 fc1f76aa5d4..0ab3e6c8b7c 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,11 @@ 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/elements/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 +164,14 @@ 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")}
+        <Button
+          variant="secondary"
+          size="sm"
+          stretch="auto"
+          render={<Link href={`/${workspaceSlug}/projects/${projectId}/pages`} className="mt-5" />}
         >
           View other Pages
-        </Link>
+        </Button>
       </div>
     );
 
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
index d005cfb009b..3c238a47264 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
@@ -9,7 +9,8 @@ import { useParams } from "next/navigation";
 // plane imports
 import { PagesOutline } from "@makeplane/propel/icons";
 import type { ICustomSearchSelectOption } from "@plane/types";
-import { Breadcrumbs, Header, BreadcrumbNavigationSearchDropdown } from "@plane/ui";
+import { Breadcrumbs, BreadcrumbNavigationSearchDropdown } from "@plane/blocks/breadcrumbs";
+import { Header } from "@plane/blocks/header";
 import { getPageName } from "@plane/utils";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
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 7105d1cd733..663fbc6e20d 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,12 +10,13 @@ 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 { PagesOutline } from "@makeplane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TPage } from "@plane/types";
 // plane ui
-import { Breadcrumbs, Header } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
+import { Header } from "@plane/blocks/header";
 // helpers
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 // hooks
@@ -79,9 +80,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 5db2b2fccd0..e94344c5df7 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,12 +15,13 @@ import {
   EUserPermissions,
   EUserPermissionsLevel,
 } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { LockOutline, ViewsOutline } from "@makeplane/propel/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { ICustomSearchSelectOption, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
 import { EIssuesStoreType, EViewAccess, EIssueLayoutTypes } from "@plane/types";
-import { Breadcrumbs, Header, BreadcrumbNavigationSearchDropdown } from "@plane/ui";
+import { Breadcrumbs, BreadcrumbNavigationSearchDropdown } from "@plane/blocks/breadcrumbs";
+import { Header } from "@plane/blocks/header";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { SwitcherIcon, SwitcherLabel } from "@/components/common/switcher-label";
@@ -198,13 +199,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 a4304aab663..8cce410998b 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,9 +7,10 @@
 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 { ViewsOutline } from "@makeplane/propel/icons";
-import { Breadcrumbs, Header } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
+import { Header } from "@plane/blocks/header";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { ViewListHeader } from "@/components/views/view-list-header";
@@ -47,9 +48,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)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx
index bbe4d131aad..c5425051e0d 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // icons
 import { ChevronDownOutline, FilterOutline } from "@makeplane/propel/icons";
 // components
-import { Row } from "@plane/ui";
+import { Row } from "@plane/blocks/row";
 import { FiltersDropdown } from "@/components/issues/issue-layouts/filters";
 import { ViewFiltersSelection } from "@/components/views/filters/filter-selection";
 import { ViewOrderByDropdown } from "@/components/views/filters/order-by";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx
index b8f7f3688b4..f6cda679360 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx
@@ -12,7 +12,7 @@ import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import type { EViewAccess, TViewFilterProps } from "@plane/types";
 import { EUserProjectRoles } from "@plane/types";
-import { Header, EHeaderVariant } from "@plane/ui";
+import { Header, EHeaderVariant } from "@plane/blocks/header";
 import { calculateTotalFilters } from "@plane/utils";
 // assets
 import darkViewsAsset from "@/app/assets/empty-state/disabled-feature/views-dark.webp?url";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/header.tsx
index aef45ee768b..e325570d0ba 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/header.tsx
@@ -7,9 +7,10 @@
 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 { MultipleStickyOutline } from "@makeplane/propel/icons";
-import { Breadcrumbs, Header } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
+import { Header } from "@plane/blocks/header";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { StickySearch } from "@/components/stickies/modal/search";
@@ -45,15 +46,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 c852b4d535c..813f791b41f 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/header.tsx
@@ -10,11 +10,12 @@ 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 { ViewsOutline } from "@makeplane/propel/icons";
 import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, ICustomSearchSelectOption } from "@plane/types";
 import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
-import { Breadcrumbs, Header, BreadcrumbNavigationSearchDropdown } from "@plane/ui";
+import { Breadcrumbs, BreadcrumbNavigationSearchDropdown } from "@plane/blocks/breadcrumbs";
+import { Header } from "@plane/blocks/header";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { SwitcherLabel } from "@/components/common/switcher-label";
@@ -145,9 +146,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)/billing/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/billing/header.tsx
index 61725678064..55e68fc6308 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/billing/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/billing/header.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { WORKSPACE_SETTINGS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Breadcrumbs } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { SettingsPageHeader } from "@/components/settings/page-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/exports/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/exports/header.tsx
index 2cc08a4bfda..7e8dfd99b8e 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/exports/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/exports/header.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { WORKSPACE_SETTINGS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Breadcrumbs } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { SettingsPageHeader } from "@/components/settings/page-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/header.tsx
index 7a69bb295ba..269ce70d3f1 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/header.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { WORKSPACE_SETTINGS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Breadcrumbs } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { SettingsPageHeader } from "@/components/settings/page-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/header.tsx
index 243f8da7b70..b69def554dc 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/header.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { WORKSPACE_SETTINGS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Breadcrumbs } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { SettingsPageHeader } from "@/components/settings/page-header";
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 142f7b31c04..9637766bda0 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,9 +9,9 @@ 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 { SearchOutline } from "@makeplane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IWorkspaceBulkInviteFormData } from "@plane/types";
 import { cn } from "@plane/utils";
 // components
@@ -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/[webhookId]/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/header.tsx
index 7c24c6ba549..7b4f4597f3f 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/header.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { WORKSPACE_SETTINGS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Breadcrumbs } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { SettingsPageHeader } from "@/components/settings/page-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/page.tsx
index 5cb9d3c17eb..a157b08b65a 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/page.tsx
@@ -8,7 +8,7 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IWebhook } from "@plane/types";
 // ui
 // components
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/header.tsx
index 0916bf9f05f..5a0393f4dc1 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/header.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { WORKSPACE_SETTINGS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Breadcrumbs } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { SettingsPageHeader } from "@/components/settings/page-header";
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 099a0ee40aa..813af56a24c 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,9 +10,9 @@ 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 { EmptyStateCompact } from "@plane/blocks/empty-state";
 import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
 import { PageHead } from "@/components/core/page-title";
 import { SettingsHeading } from "@/components/settings/heading";
@@ -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/[projectId]/automations/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/header.tsx
index df9ae6e9e2f..5ed1332f225 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/header.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { PROJECT_SETTINGS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Breadcrumbs } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { SettingsPageHeader } from "@/components/settings/page-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/page.tsx
index 3a8b98631c8..56c6f14e841 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/page.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IProject } from "@plane/types";
 import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
 import { AutoArchiveAutomation, AutoCloseAutomation } from "@/components/automation";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/estimates/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/estimates/header.tsx
index 447f925a025..f59370add02 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/estimates/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/estimates/header.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { PROJECT_SETTINGS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Breadcrumbs } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { SettingsPageHeader } from "@/components/settings/page-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/cycles/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/cycles/header.tsx
index c2fa9dee50d..8ca38c8f128 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/cycles/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/cycles/header.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { PROJECT_SETTINGS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Breadcrumbs } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { SettingsPageHeader } from "@/components/settings/page-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/intake/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/intake/header.tsx
index 5f81d40afc5..3ab4a4e9df3 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/intake/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/intake/header.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { PROJECT_SETTINGS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Breadcrumbs } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { SettingsPageHeader } from "@/components/settings/page-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/modules/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/modules/header.tsx
index baf32b2b909..e4f408b78e0 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/modules/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/modules/header.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { PROJECT_SETTINGS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Breadcrumbs } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { SettingsPageHeader } from "@/components/settings/page-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/pages/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/pages/header.tsx
index fa7a40e2864..6d3f9252168 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/pages/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/pages/header.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { PROJECT_SETTINGS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Breadcrumbs } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { SettingsPageHeader } from "@/components/settings/page-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/views/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/views/header.tsx
index c8429d90c94..06547eb4a10 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/views/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/views/header.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { PROJECT_SETTINGS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Breadcrumbs } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { SettingsPageHeader } from "@/components/settings/page-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/header.tsx
index 95d47205112..c86b03f9b78 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/header.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { PROJECT_SETTINGS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Breadcrumbs } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { SettingsPageHeader } from "@/components/settings/page-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/labels/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/labels/header.tsx
index b9daaae1e56..52556075158 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/labels/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/labels/header.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { PROJECT_SETTINGS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Breadcrumbs } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { SettingsPageHeader } from "@/components/settings/page-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/header.tsx
index e8e3c4fe406..fa314cb2afb 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/header.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { PROJECT_SETTINGS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Breadcrumbs } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { SettingsPageHeader } from "@/components/settings/page-header";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/states/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/states/header.tsx
index 957632b25c9..2b3f8a0eca7 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/states/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/states/header.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { PROJECT_SETTINGS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Breadcrumbs } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { SettingsPageHeader } from "@/components/settings/page-header";
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 1d381547d45..a74926e7819 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,8 @@ 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";
+import { Button as ButtonElement } from "@makeplane/propel/elements/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 +31,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"))}>
+        <ButtonElement
+          variant="secondary"
+          size="sm"
+          stretch="auto"
+          render={<Link href="https://plane.so/" target="_blank" />}
+        >
           Learn more about projects
-        </Link>
-        <Button onClick={() => toggleCreateProjectModal(true)}>Start your first project</Button>
+        </ButtonElement>
+        <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 38087189cc3..f371fe06cfa 100644
--- a/apps/web/app/(all)/create-workspace/page.tsx
+++ b/apps/web/app/(all)/create-workspace/page.tsx
@@ -9,8 +9,9 @@ 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 { PlaneLogo } from "@plane/propel/icons";
+import { Button } from "@makeplane/propel/components/button";
+import { Button as ButtonElement } from "@makeplane/propel/elements/button";
+import { PlaneLogo } from "@plane/blocks/icons";
 import type { IWorkspace } from "@plane/types";
 // assets
 import WorkspaceCreationDisabled from "@/app/assets/workspace/workspace-creation-disabled.png?url";
@@ -86,12 +87,16 @@ 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")}>
+                <Button
+                  variant="primary"
+                  size="sm"
+                  stretch="auto"
+                  label={t("common.go_back")}
+                  onClick={() => router.back()}
+                />
+                <ButtonElement variant="secondary" size="sm" stretch="auto" render={<a href={getMailtoHref()} />}>
                   {t("workspace_creation.errors.creation_disabled.request_button")}
-                </a>
+                </ButtonElement>
               </div>
             </div>
           ) : (
diff --git a/apps/web/app/(all)/invitations/page.tsx b/apps/web/app/(all)/invitations/page.tsx
index f325f27ebd1..7252eaee1fe 100644
--- a/apps/web/app/(all)/invitations/page.tsx
+++ b/apps/web/app/(all)/invitations/page.tsx
@@ -14,9 +14,9 @@ import { TickCircleOutline } from "@makeplane/propel/icons";
 import { ROLE } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // types
-import { Button } from "@plane/propel/button";
-import { PlaneLogo } from "@plane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { PlaneLogo } from "@plane/blocks/icons";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IWorkspaceMemberInvitation } from "@plane/types";
 import { truncateText } from "@plane/utils";
 // assets
@@ -163,18 +163,16 @@ function UserInvitationsPage() {
                   <Button
                     variant="primary"
                     type="submit"
-                    size="lg"
+                    size="md"
+                    stretch="auto"
+                    label={t("accept_and_join")}
                     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>
+                      <Button variant="secondary" size="md" stretch="auto" label={t("go_home")} />
                     </span>
                   </Link>
                 </div>
diff --git a/apps/web/app/error/dev.tsx b/apps/web/app/error/dev.tsx
index b9b1d4843ce..960a7fabc0b 100644
--- a/apps/web/app/error/dev.tsx
+++ b/apps/web/app/error/dev.tsx
@@ -8,8 +8,8 @@
 import { isRouteErrorResponse } from "react-router";
 import { Banner } from "@makeplane/propel/components/banner";
 import { InfoFilled } from "@makeplane/propel/icons";
-import { Button } from "@plane/propel/button";
-import { Card, ECardVariant } from "@plane/propel/card";
+import { Button } from "@makeplane/propel/components/button";
+import { Card, ECardVariant } from "@plane/blocks/card";
 
 interface ErrorActionsProps {
   onGoHome: () => void;
@@ -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 a8d61829e35..0b23507bb3a 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 13763951ce1..0f3ee7a62b1 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
@@ -34,9 +34,7 @@ function PageNotFound() {
           </div>
           <Link href="/">
             <span className="flex justify-center">
-              <Button variant="secondary" size="lg">
-                Go to Home
-              </Button>
+              <Button variant="secondary" size="md" stretch="auto" label="Go to Home" />
             </span>
           </Link>
         </div>
diff --git a/apps/web/app/provider.tsx b/apps/web/app/provider.tsx
index 016b66c0e4b..d2f716bb129 100644
--- a/apps/web/app/provider.tsx
+++ b/apps/web/app/provider.tsx
@@ -10,7 +10,7 @@ import { SWRConfig } from "swr";
 // Plane Imports
 import { WEB_SWR_CONFIG } from "@plane/constants";
 import { TranslationProvider } from "@plane/i18n";
-import { Toast } from "@plane/propel/toast";
+import { Toast } from "@plane/blocks/toast";
 // helpers
 import { resolveGeneralTheme } from "@plane/utils";
 // mobx store provider
diff --git a/apps/web/core/components/account/auth-forms/auth-root.tsx b/apps/web/core/components/account/auth-forms/auth-root.tsx
index 46ae2c46157..c3a1e046057 100644
--- a/apps/web/core/components/account/auth-forms/auth-root.tsx
+++ b/apps/web/core/components/account/auth-forms/auth-root.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
 // plane imports
 import { Banner } from "@makeplane/propel/components/banner";
-import { OAuthOptions } from "@plane/ui";
+import { OAuthOptions } from "@plane/blocks/oauth";
 // helpers
 import type { TAuthErrorInfo } from "@/helpers/authentication.helper";
 import {
diff --git a/apps/web/core/components/account/auth-forms/email.tsx b/apps/web/core/components/account/auth-forms/email.tsx
index 0fb17c2d8b6..e477624dd3e 100644
--- a/apps/web/core/components/account/auth-forms/email.tsx
+++ b/apps/web/core/components/account/auth-forms/email.tsx
@@ -13,9 +13,9 @@ import { CloseCircleOutline, WarningCircleOutline } from "@makeplane/propel/icon
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 import type { IEmailCheckData } from "@plane/types";
-import { Spinner } from "@plane/ui";
+import { Spinner } from "@plane/blocks/spinner";
 import { checkEmailValidity } from "@plane/utils";
 // helpers
 type TAuthEmailForm = {
@@ -101,7 +101,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
           </p>
         )}
       </div>
-      <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
+      <Button type="submit" variant="primary" size="lg" stretch="full" disabled={isButtonDisabled}>
         {isSubmitting ? <Spinner height="20px" width="20px" /> : t("common.continue")}
       </Button>
     </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 71ad47169f0..9846ded9d3f 100644
--- a/apps/web/core/components/account/auth-forms/forgot-password.tsx
+++ b/apps/web/core/components/account/auth-forms/forgot-password.tsx
@@ -14,10 +14,11 @@ import { TickCircleOutline } from "@makeplane/propel/icons";
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { useTranslation } from "@plane/i18n";
-import { Button, getButtonStyling } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { Button as ButtonElement } from "@makeplane/propel/elements/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 
-import { cn, checkEmailValidity } from "@plane/utils";
+import { checkEmailValidity } from "@plane/utils";
 // hooks
 import useTimer from "@/hooks/use-timer";
 // services
@@ -124,18 +125,24 @@ export const ForgotPasswordForm = observer(function ForgotPasswordForm() {
         <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")
+          }
           disabled={!isValid}
           loading={isSubmitting || resendTimerCode > 0}
+        />
+        <ButtonElement
+          variant="ghost"
+          size="md"
+          stretch="auto"
+          render={<Link href="/" className="w-full px-0 text-link-primary underline" />}
         >
-          {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>
+        </ButtonElement>
       </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 9b8684cebc6..d0d893d33cc 100644
--- a/apps/web/core/components/account/auth-forms/password.tsx
+++ b/apps/web/core/components/account/auth-forms/password.tsx
@@ -14,8 +14,10 @@ import { Banner } from "@makeplane/propel/components/banner";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { PasswordStrengthIndicator, Spinner } from "@plane/ui";
+import { Button } from "@makeplane/propel/components/button";
+import { Button as ButtonElement } from "@makeplane/propel/elements/button";
+import { PasswordStrengthIndicator } from "@plane/blocks/form-fields";
+import { Spinner } from "@plane/blocks/spinner";
 import { getPasswordStrength } from "@plane/utils";
 // components
 import { ForgotPasswordPopover } from "@/components/account/auth-forms/forgot-password-popover";
@@ -271,7 +273,7 @@ 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}>
+              <ButtonElement type="submit" variant="primary" size="lg" stretch="full" disabled={isButtonDisabled}>
                 {isSubmitting ? (
                   <Spinner height="20px" width="20px" />
                 ) : isSMTPConfigured ? (
@@ -279,23 +281,22 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
                 ) : (
                   t("common.go_to_workspace")
                 )}
-              </Button>
+              </ButtonElement>
               {isSMTPConfigured && (
                 <Button
                   type="button"
                   onClick={redirectToUniqueCodeSignIn}
                   variant="secondary"
-                  className="w-full"
-                  size="xl"
-                >
-                  {t("auth.common.sign_in_with_unique_code")}
-                </Button>
+                  size="lg"
+                  stretch="full"
+                  label={t("auth.common.sign_in_with_unique_code")}
+                />
               )}
             </>
           ) : (
-            <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
+            <ButtonElement type="submit" variant="primary" size="lg" stretch="full" disabled={isButtonDisabled}>
               {isSubmitting ? <Spinner height="20px" width="20px" /> : "Create account"}
-            </Button>
+            </ButtonElement>
           )}
         </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 a11b05beacb..e20f00dcd09 100644
--- a/apps/web/core/components/account/auth-forms/reset-password.tsx
+++ b/apps/web/core/components/account/auth-forms/reset-password.tsx
@@ -14,8 +14,8 @@ import { Banner } from "@makeplane/propel/components/banner";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { PasswordStrengthIndicator } from "@plane/ui";
+import { Button } from "@makeplane/propel/components/button";
+import { PasswordStrengthIndicator } from "@plane/blocks/form-fields";
 // components
 import { getPasswordStrength } from "@plane/utils";
 // helpers
@@ -202,9 +202,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
+          type="submit"
+          variant="primary"
+          size="lg"
+          stretch="full"
+          label={t("auth.common.password.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 044d9b084d5..95ee7d8abcc 100644
--- a/apps/web/core/components/account/auth-forms/set-password.tsx
+++ b/apps/web/core/components/account/auth-forms/set-password.tsx
@@ -14,9 +14,9 @@ import { HideOutline, ShowOutline } from "@makeplane/propel/icons";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { E_PASSWORD_STRENGTH } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { PasswordStrengthIndicator } from "@plane/ui";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
+import { PasswordStrengthIndicator } from "@plane/blocks/form-fields";
 // components
 import { getPasswordStrength } from "@plane/utils";
 // hooks
@@ -199,9 +199,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
+          type="submit"
+          variant="primary"
+          size="lg"
+          stretch="full"
+          label={t("common.continue")}
+          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 d3a4569d5c1..40c60b0cc0e 100644
--- a/apps/web/core/components/account/auth-forms/unique-code.tsx
+++ b/apps/web/core/components/account/auth-forms/unique-code.tsx
@@ -9,8 +9,8 @@ import { CloseCircleOutline, TickCircleOutline } from "@makeplane/propel/icons";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { API_BASE_URL } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { Spinner } from "@plane/ui";
+import { Button } from "@makeplane/propel/elements/button";
+import { Spinner } from "@plane/blocks/spinner";
 // constants
 // helpers
 import { EAuthModes } from "@/helpers/authentication.helper";
@@ -165,7 +165,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
       </div>
 
       <div className="space-y-2.5">
-        <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
+        <Button type="submit" variant="primary" size="lg" stretch="full" disabled={isButtonDisabled}>
           {isRequestingNewCode ? (
             t("auth.common.unique_code.sending_code")
           ) : isSubmitting ? (
diff --git a/apps/web/core/components/account/deactivate-account-modal.tsx b/apps/web/core/components/account/deactivate-account-modal.tsx
index ed18aba5947..83d0f2bf936 100644
--- a/apps/web/core/components/account/deactivate-account-modal.tsx
+++ b/apps/web/core/components/account/deactivate-account-modal.tsx
@@ -7,10 +7,10 @@
 import { useState } from "react";
 import { useTranslation } from "@plane/i18n";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { DeleteOutline } from "@makeplane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // hooks
 import { useUser } from "@/hooks/store/user";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -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 6977d894c00..dc38cf30b1d 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
@@ -10,8 +10,8 @@ import { AlertOctagonOutline, BarOutline, FolderOutline, SearchOutline } from "@
 // plane imports
 import { MARKETING_PRICING_PAGE_LINK } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { getButtonStyling } from "@plane/propel/button";
-import { ContentWrapper } from "@plane/ui";
+import { Button } from "@makeplane/propel/elements/button";
+import { ContentWrapper } from "@plane/blocks/content-wrapper";
 import { cn } from "@plane/utils";
 // assets
 import ctaL1Dark from "@/app/assets/workspace-active-cycles/cta-l-1-dark.webp?url";
@@ -91,15 +91,17 @@ 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"
+            <Button
+              variant="primary"
+              size="sm"
+              stretch="auto"
+              render={
+                <a href={MARKETING_PRICING_PAGE_LINK} target="_blank" rel="noreferrer" className="cursor-pointer" />
+              }
             >
               <ProIcon className="h-3.5 w-3.5 text-on-color" />
               {t("upgrade")}
-            </a>
+            </Button>
           </div>
           <span className="absolute top-0 left-0">
             <img
diff --git a/apps/web/core/components/analytics/insight-card.tsx b/apps/web/core/components/analytics/insight-card.tsx
index d8a30a1c91c..c312e0dba04 100644
--- a/apps/web/core/components/analytics/insight-card.tsx
+++ b/apps/web/core/components/analytics/insight-card.tsx
@@ -7,7 +7,7 @@
 // plane package imports
 import React from "react";
 import type { IAnalyticsResponseFields } from "@plane/types";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 
 export type InsightCardProps = {
   data?: IAnalyticsResponseFields;
diff --git a/apps/web/core/components/analytics/insight-table/data-table.tsx b/apps/web/core/components/analytics/insight-table/data-table.tsx
index 679e98afd74..94eff706969 100644
--- a/apps/web/core/components/analytics/insight-table/data-table.tsx
+++ b/apps/web/core/components/analytics/insight-table/data-table.tsx
@@ -23,10 +23,11 @@ import {
 } from "@tanstack/react-table";
 
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateCompact } from "@plane/propel/empty-state";
+import { EmptyStateCompact } from "@plane/blocks/empty-state";
 import { CloseOutline, SearchOutline } from "@makeplane/propel/icons";
 // plane package imports
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@plane/propel/table";
+import { Table, TableBody, TableHeader, TableRow } from "@makeplane/propel/components/table";
+import { TableCell, TableHead } from "@makeplane/propel/elements/table";
 import { cn } from "@plane/utils";
 // plane web components
 
@@ -130,12 +131,18 @@ export function DataTable<TData, TValue>({ columns, data, searchPlaceholder, act
       </div>
 
       <div className="rounded-md">
-        <Table>
+        <Table variant="table">
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (
-                  <TableHead key={header.id} colSpan={header.colSpan} className="whitespace-nowrap">
+                  <TableHead
+                    key={header.id}
+                    colSpan={header.colSpan}
+                    variant="table"
+                    pinned="none"
+                    render={<th className="whitespace-nowrap" />}
+                  >
                     {header.isPlaceholder
                       ? null
                       : (flexRender(header.column.columnDef.header, header.getContext()) as any)}
@@ -149,7 +156,7 @@ export function DataTable<TData, TValue>({ columns, data, searchPlaceholder, act
               table.getRowModel().rows.map((row) => (
                 <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
                   {row.getVisibleCells().map((cell) => (
-                    <TableCell key={cell.id}>
+                    <TableCell key={cell.id} variant="table" pinned="none" padding="cell">
                       {flexRender(cell.column.columnDef.cell, cell.getContext()) as any}
                     </TableCell>
                   ))}
@@ -157,7 +164,7 @@ export function DataTable<TData, TValue>({ columns, data, searchPlaceholder, act
               ))
             ) : (
               <TableRow>
-                <TableCell colSpan={columns.length} className="p-0">
+                <TableCell colSpan={columns.length} variant="table" pinned="none" padding="trigger">
                   <EmptyStateCompact
                     assetKey="unknown"
                     assetClassName="size-20"
diff --git a/apps/web/core/components/analytics/insight-table/loader.tsx b/apps/web/core/components/analytics/insight-table/loader.tsx
index e07da237466..463fc57366b 100644
--- a/apps/web/core/components/analytics/insight-table/loader.tsx
+++ b/apps/web/core/components/analytics/insight-table/loader.tsx
@@ -6,8 +6,8 @@
 
 import * as React from "react";
 import type { ColumnDef } from "@tanstack/react-table";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@plane/propel/table";
-import { Loader } from "@plane/ui";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@makeplane/propel/components/table";
+import { Loader } from "@plane/blocks/loader";
 
 interface TableSkeletonProps {
   columns: ColumnDef<any>[];
@@ -16,13 +16,15 @@ interface TableSkeletonProps {
 
 export function TableLoader({ columns, rows }: TableSkeletonProps) {
   return (
-    <Table>
+    <Table variant="table">
       <TableHeader>
         <TableRow>
           {columns.map((column, index) => (
-            <TableHead key={column.header?.toString() ?? index}>
-              {typeof column.header === "string" ? column.header : ""}
-            </TableHead>
+            <TableHead
+              key={column.header?.toString() ?? index}
+              pinned="none"
+              label={typeof column.header === "string" ? column.header : ""}
+            />
           ))}
         </TableRow>
       </TableHeader>
@@ -30,7 +32,7 @@ export function TableLoader({ columns, rows }: TableSkeletonProps) {
         {Array.from({ length: rows }).map((_, rowIndex) => (
           <TableRow key={rowIndex}>
             {columns.map((_, colIndex) => (
-              <TableCell key={colIndex}>
+              <TableCell key={colIndex} pinned="none" padding="cell">
                 <Loader.Item height="20px" width="100%" />
               </TableCell>
             ))}
diff --git a/apps/web/core/components/analytics/insight-table/root.tsx b/apps/web/core/components/analytics/insight-table/root.tsx
index 4a368be04b7..666ad586923 100644
--- a/apps/web/core/components/analytics/insight-table/root.tsx
+++ b/apps/web/core/components/analytics/insight-table/root.tsx
@@ -7,7 +7,8 @@
 import type { ColumnDef, Row, Table } from "@tanstack/react-table";
 import { DownloadOutline } from "@makeplane/propel/icons";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
+import { Icon } from "@makeplane/propel/components/icon";
 import type { AnalyticsTableDataMap, TAnalyticsTabsBase } from "@plane/types";
 import { DataTable } from "./data-table";
 import { TableLoader } from "./loader";
@@ -39,11 +40,13 @@ export function InsightTable<T extends Exclude<TAnalyticsTabsBase, "overview">>(
         actions={(table: Table<AnalyticsTableDataMap[T]>) => (
           <Button
             variant="secondary"
-            prependIcon={<DownloadOutline className="h-3.5 w-3.5" />}
+            size="sm"
+            stretch="auto"
+            label={t("exporter.csv.short_description")}
+            icon={<Icon icon={DownloadOutline} />}
+            iconPosition="start"
             onClick={() => onExport?.(table.getFilteredRowModel().rows)}
-          >
-            <div>{t("exporter.csv.short_description")}</div>
-          </Button>
+          />
         )}
       />
     </div>
diff --git a/apps/web/core/components/analytics/loaders.tsx b/apps/web/core/components/analytics/loaders.tsx
index c298dd00158..0075294c7be 100644
--- a/apps/web/core/components/analytics/loaders.tsx
+++ b/apps/web/core/components/analytics/loaders.tsx
@@ -4,7 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 
 export function ProjectInsightsLoader() {
   return (
diff --git a/apps/web/core/components/analytics/overview/active-project-item.tsx b/apps/web/core/components/analytics/overview/active-project-item.tsx
index 14e97fd0faa..2af4daeadab 100644
--- a/apps/web/core/components/analytics/overview/active-project-item.tsx
+++ b/apps/web/core/components/analytics/overview/active-project-item.tsx
@@ -5,7 +5,7 @@
  */
 
 // plane package imports
-import { Logo } from "@plane/propel/emoji-icon-picker";
+import { Logo } from "@plane/blocks/emoji-icon-picker";
 import { ProjectsOutline } from "@makeplane/propel/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import { cn } from "@plane/utils";
diff --git a/apps/web/core/components/analytics/overview/active-projects.tsx b/apps/web/core/components/analytics/overview/active-projects.tsx
index 1ad22dc5423..2c0cc3c8318 100644
--- a/apps/web/core/components/analytics/overview/active-projects.tsx
+++ b/apps/web/core/components/analytics/overview/active-projects.tsx
@@ -10,7 +10,7 @@ import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane package imports
 import { useTranslation } from "@plane/i18n";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // plane web hooks
 import { useAnalytics } from "@/hooks/store/use-analytics";
 import { useProject } from "@/hooks/store/use-project";
diff --git a/apps/web/core/components/analytics/overview/project-insights.tsx b/apps/web/core/components/analytics/overview/project-insights.tsx
index 6987ce19450..01f630193a6 100644
--- a/apps/web/core/components/analytics/overview/project-insights.tsx
+++ b/apps/web/core/components/analytics/overview/project-insights.tsx
@@ -10,7 +10,7 @@ import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane package imports
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateCompact } from "@plane/propel/empty-state";
+import { EmptyStateCompact } from "@plane/blocks/empty-state";
 import type { TChartData } from "@plane/types";
 // hooks
 import { useAnalytics } from "@/hooks/store/use-analytics";
@@ -21,7 +21,7 @@ import AnalyticsSectionWrapper from "../analytics-section-wrapper";
 import { ProjectInsightsLoader } from "../loaders";
 
 const RadarChart = lazy(function RadarChart() {
-  return import("@plane/propel/charts/radar-chart").then((mod) => ({
+  return import("@plane/blocks/charts/radar-chart").then((mod) => ({
     default: mod.RadarChart,
   }));
 });
diff --git a/apps/web/core/components/analytics/select/duration.tsx b/apps/web/core/components/analytics/select/duration.tsx
index 7748484fc43..d32a099fe16 100644
--- a/apps/web/core/components/analytics/select/duration.tsx
+++ b/apps/web/core/components/analytics/select/duration.tsx
@@ -11,7 +11,7 @@ import { CalendarOutline } from "@makeplane/propel/icons";
 // plane package imports
 import { ANALYTICS_DURATION_FILTER_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { CustomSearchSelect } from "@plane/ui";
+import { CustomSearchSelect } from "@plane/blocks/dropdowns";
 // types
 import type { TDropdownProps } from "@/components/dropdowns/types";
 
diff --git a/apps/web/core/components/analytics/select/project.tsx b/apps/web/core/components/analytics/select/project.tsx
index cc0896c8683..8208eec088e 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 { Logo } from "@plane/propel/emoji-icon-picker";
+import { Button } from "@makeplane/propel/elements/button";
+import { Logo } from "@plane/blocks/emoji-icon-picker";
 import { ChevronDownOutline, ProjectsOutline } from "@makeplane/propel/icons";
-import { CustomSearchSelect } from "@plane/ui";
-import { cn } from "@plane/utils";
+import { CustomSearchSelect } from "@plane/blocks/dropdowns";
 // 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 className="gap-2" />}>
           <ProjectsOutline 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"}
           <ChevronDownOutline 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/select/select-x-axis.tsx b/apps/web/core/components/analytics/select/select-x-axis.tsx
index 6effcfa4da1..031e5e94e8e 100644
--- a/apps/web/core/components/analytics/select/select-x-axis.tsx
+++ b/apps/web/core/components/analytics/select/select-x-axis.tsx
@@ -6,7 +6,7 @@
 
 // plane package imports
 import type { ChartXAxisProperty } from "@plane/types";
-import { CustomSelect } from "@plane/ui";
+import { CustomSelect } from "@plane/blocks/dropdowns";
 
 type Props = {
   value?: ChartXAxisProperty;
diff --git a/apps/web/core/components/analytics/select/select-y-axis.tsx b/apps/web/core/components/analytics/select/select-y-axis.tsx
index 0d0470eebbd..8d1e7020be8 100644
--- a/apps/web/core/components/analytics/select/select-y-axis.tsx
+++ b/apps/web/core/components/analytics/select/select-y-axis.tsx
@@ -10,7 +10,7 @@ import { EEstimateSystem } from "@plane/constants";
 import { ProjectsOutline } from "@makeplane/propel/icons";
 import type { ChartYAxisMetric } from "@plane/types";
 // plane package imports
-import { CustomSelect } from "@plane/ui";
+import { CustomSelect } from "@plane/blocks/dropdowns";
 // hooks
 import { useProjectEstimates } from "@/hooks/store/estimates";
 // plane web constants
diff --git a/apps/web/core/components/analytics/work-items/created-vs-resolved.tsx b/apps/web/core/components/analytics/work-items/created-vs-resolved.tsx
index c4723c07b39..375304c0680 100644
--- a/apps/web/core/components/analytics/work-items/created-vs-resolved.tsx
+++ b/apps/web/core/components/analytics/work-items/created-vs-resolved.tsx
@@ -10,8 +10,8 @@ import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane package imports
 import { useTranslation } from "@plane/i18n";
-import { AreaChart } from "@plane/propel/charts/area-chart";
-import { EmptyStateCompact } from "@plane/propel/empty-state";
+import { AreaChart } from "@plane/blocks/charts/area-chart";
+import { EmptyStateCompact } from "@plane/blocks/empty-state";
 import type { IChartResponse, TChartData } from "@plane/types";
 import { renderFormattedDate } from "@plane/utils";
 // hooks
diff --git a/apps/web/core/components/analytics/work-items/modal/content.tsx b/apps/web/core/components/analytics/work-items/modal/content.tsx
index 259dec20cac..097590cefe5 100644
--- a/apps/web/core/components/analytics/work-items/modal/content.tsx
+++ b/apps/web/core/components/analytics/work-items/modal/content.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { Tab } from "@headlessui/react";
 // plane package imports
 import type { ICycle, IModule, IProject } from "@plane/types";
-import { Spinner } from "@plane/ui";
+import { Spinner } from "@plane/blocks/spinner";
 // hooks
 import { useAnalytics } from "@/hooks/store/use-analytics";
 // plane web components
diff --git a/apps/web/core/components/analytics/work-items/modal/index.tsx b/apps/web/core/components/analytics/work-items/modal/index.tsx
index a284ba93c89..99cdc976b26 100644
--- a/apps/web/core/components/analytics/work-items/modal/index.tsx
+++ b/apps/web/core/components/analytics/work-items/modal/index.tsx
@@ -7,7 +7,7 @@
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 // plane package imports
-import { ModalPortal, EPortalWidth, EPortalPosition } from "@plane/propel/portal";
+import { ModalPortal, EPortalWidth, EPortalPosition } from "@plane/blocks/portal";
 import type { ICycle, IModule, IProject } from "@plane/types";
 import { useAnalytics } from "@/hooks/store/use-analytics";
 // plane web components
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 97adc633aed..f1c97b53021 100644
--- a/apps/web/core/components/analytics/work-items/priority-chart.tsx
+++ b/apps/web/core/components/analytics/work-items/priority-chart.tsx
@@ -15,9 +15,10 @@ import { DownloadOutline } from "@makeplane/propel/icons";
 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 { BarChart } from "@plane/propel/charts/bar-chart";
-import { EmptyStateCompact } from "@plane/propel/empty-state";
+import { Button } from "@makeplane/propel/components/button";
+import { Icon } from "@makeplane/propel/components/icon";
+import { BarChart } from "@plane/blocks/charts/bar-chart";
+import { EmptyStateCompact } from "@plane/blocks/empty-state";
 import type { TBarItem, TChart, TChartDatum, ChartXAxisProperty, ChartYAxisMetric } from "@plane/types";
 // plane web components
 import { generateExtendedColors, parseChartData } from "@/components/chart/utils";
@@ -228,11 +229,13 @@ const PriorityChart = observer(function PriorityChart(props: Props) {
             actions={(table: Table<TChartDatum>) => (
               <Button
                 variant="secondary"
-                prependIcon={<DownloadOutline className="h-3.5 w-3.5" />}
+                size="sm"
+                stretch="auto"
+                label={t("exporter.csv.short_description")}
+                icon={<Icon icon={DownloadOutline} />}
+                iconPosition="start"
                 onClick={() => exportCSV(table.getRowModel().rows, [...defaultColumns, ...columns], workspaceSlug)}
-              >
-                <div>{t("exporter.csv.short_description")}</div>
-              </Button>
+              />
             )}
           />
         </>
diff --git a/apps/web/core/components/analytics/work-items/workitems-insight-table.tsx b/apps/web/core/components/analytics/work-items/workitems-insight-table.tsx
index 60dbef70dc5..47010d424e6 100644
--- a/apps/web/core/components/analytics/work-items/workitems-insight-table.tsx
+++ b/apps/web/core/components/analytics/work-items/workitems-insight-table.tsx
@@ -12,7 +12,7 @@ import useSWR from "swr";
 import { ProjectsOutline, UserOutline } from "@makeplane/propel/icons";
 import { Avatar } from "@makeplane/propel/components/avatar";
 import { useTranslation } from "@plane/i18n";
-import { Logo } from "@plane/propel/emoji-icon-picker";
+import { Logo } from "@plane/blocks/emoji-icon-picker";
 // plane package imports
 import type { AnalyticsTableDataMap, WorkItemInsightColumns } from "@plane/types";
 // plane web components
diff --git a/apps/web/core/components/api-token/delete-token-modal.tsx b/apps/web/core/components/api-token/delete-token-modal.tsx
index 58a93394c1a..07a4af6e1f5 100644
--- a/apps/web/core/components/api-token/delete-token-modal.tsx
+++ b/apps/web/core/components/api-token/delete-token-modal.tsx
@@ -8,11 +8,11 @@ import { useState } from "react";
 import { mutate } from "swr";
 // types
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { APITokenService } from "@plane/services";
 import type { IApiToken } from "@plane/types";
 // ui
-import { AlertModalCore } from "@plane/ui";
+import { AlertModalCore } from "@plane/blocks/modals";
 // fetch-keys
 import { API_TOKENS_LIST } from "@plane/constants";
 
diff --git a/apps/web/core/components/api-token/empty-state.tsx b/apps/web/core/components/api-token/empty-state.tsx
index 944d19e34be..c2a3470f941 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,14 @@ 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>
+        <Button
+          variant="primary"
+          size="sm"
+          stretch="auto"
+          label="Add token"
+          render={<button className="flex items-center gap-1.5" />}
+          onClick={onClick}
+        />
       </div>
     </div>
   );
diff --git a/apps/web/core/components/api-token/modal/create-token-modal.tsx b/apps/web/core/components/api-token/modal/create-token-modal.tsx
index f9d4872d3f1..e8dfb8222d7 100644
--- a/apps/web/core/components/api-token/modal/create-token-modal.tsx
+++ b/apps/web/core/components/api-token/modal/create-token-modal.tsx
@@ -7,10 +7,10 @@
 import { useState } from "react";
 import { mutate } from "swr";
 // plane imports
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { APITokenService } from "@plane/services";
 import type { IApiToken } from "@plane/types";
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 import { renderFormattedDate, csvDownload } from "@plane/utils";
 // constants
 import { API_TOKENS_LIST } from "@plane/constants";
diff --git a/apps/web/core/components/api-token/modal/form.tsx b/apps/web/core/components/api-token/modal/form.tsx
index 3cd99030013..a242cc7d9e0 100644
--- a/apps/web/core/components/api-token/modal/form.tsx
+++ b/apps/web/core/components/api-token/modal/form.tsx
@@ -13,12 +13,12 @@ import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IApiToken } from "@plane/types";
 // ui
 import { Switch } from "@makeplane/propel/components/switch";
-import { CustomSelect } from "@plane/ui";
+import { CustomSelect } from "@plane/blocks/dropdowns";
 import { cn, renderFormattedDate, renderFormattedTime } from "@plane/utils";
 // components
 import { DateDropdown } from "@/components/dropdowns/date";
@@ -264,14 +264,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"
+            type="submit"
+            size="sm"
+            stretch="auto"
+            label={
+              isSubmitting
+                ? t("workspace_settings.settings.api_tokens.generating")
+                : t("workspace_settings.settings.api_tokens.generate_token")
+            }
+            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 d5784eb1bd9..b1a828a4ced 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,9 +5,9 @@
  */
 
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { CopyOutline } from "@makeplane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { IApiToken } from "@plane/types";
 // ui
@@ -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/appearance/theme-switcher.tsx b/apps/web/core/components/appearance/theme-switcher.tsx
index 38cecb644e9..1dc1988a32b 100644
--- a/apps/web/core/components/appearance/theme-switcher.tsx
+++ b/apps/web/core/components/appearance/theme-switcher.tsx
@@ -11,7 +11,7 @@ import { useTheme } from "next-themes";
 import type { I_THEME_OPTION } from "@plane/constants";
 import { THEME_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { setPromiseToast } from "@plane/propel/toast";
+import { setPromiseToast } from "@plane/blocks/toast";
 import { applyCustomTheme } from "@plane/utils";
 // components
 import { CustomThemeSelector } from "@/components/core/theme/custom-theme-selector";
diff --git a/apps/web/core/components/auth-screens/footer.tsx b/apps/web/core/components/auth-screens/footer.tsx
index 7ed0b4e7e5e..ae444dc2bbb 100644
--- a/apps/web/core/components/auth-screens/footer.tsx
+++ b/apps/web/core/components/auth-screens/footer.tsx
@@ -5,7 +5,7 @@
  */
 
 import React from "react";
-import { AccentureLogo, DolbyLogo, SonyLogo, ZerodhaLogo } from "@plane/propel/icons";
+import { AccentureLogo, DolbyLogo, SonyLogo, ZerodhaLogo } from "@plane/blocks/icons";
 
 const BRAND_LOGOS: {
   id: string;
diff --git a/apps/web/core/components/auth-screens/header.tsx b/apps/web/core/components/auth-screens/header.tsx
index 2c6da9b6625..44eae9f3408 100644
--- a/apps/web/core/components/auth-screens/header.tsx
+++ b/apps/web/core/components/auth-screens/header.tsx
@@ -8,7 +8,7 @@ import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useTranslation } from "@plane/i18n";
-import { PlaneLockup } from "@plane/propel/icons";
+import { PlaneLockup } from "@plane/blocks/icons";
 import { PageHead } from "@/components/core/page-title";
 import { EAuthModes } from "@/helpers/authentication.helper";
 import { useInstance } from "@/hooks/store/use-instance";
diff --git a/apps/web/core/components/auth-screens/project/project-access-restriction.tsx b/apps/web/core/components/auth-screens/project/project-access-restriction.tsx
index 9110f88dca0..1ba0cf279b5 100644
--- a/apps/web/core/components/auth-screens/project/project-access-restriction.tsx
+++ b/apps/web/core/components/auth-screens/project/project-access-restriction.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { EmptyStateDetailed } from "@plane/blocks/empty-state";
 
 type TProps = {
   isWorkspaceAdmin: boolean;
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 b38603006f4..541f50e78e9 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";
 
@@ -25,12 +25,12 @@ export function NotAWorkspaceMember() {
           <div className="flex items-center justify-center gap-2">
             <Link href="/invitations">
               <span>
-                <Button variant="secondary">Check pending invites</Button>
+                <Button variant="secondary" size="sm" stretch="auto" label="Check pending invites" />
               </span>
             </Link>
             <Link href="/create-workspace">
               <span>
-                <Button variant="primary">Create new workspace</Button>
+                <Button variant="primary" size="sm" stretch="auto" label="Create new workspace" />
               </span>
             </Link>
           </div>
diff --git a/apps/web/core/components/automation/auto-archive-automation.tsx b/apps/web/core/components/automation/auto-archive-automation.tsx
index cb0ee841bf7..cf0433cf429 100644
--- a/apps/web/core/components/automation/auto-archive-automation.tsx
+++ b/apps/web/core/components/automation/auto-archive-automation.tsx
@@ -13,7 +13,8 @@ import { PROJECT_AUTOMATION_MONTHS, EUserPermissions, EUserPermissionsLevel } fr
 import { useTranslation } from "@plane/i18n";
 import type { IProject } from "@plane/types";
 import { Switch } from "@makeplane/propel/components/switch";
-import { CustomSelect, Loader } from "@plane/ui";
+import { CustomSelect } from "@plane/blocks/dropdowns";
+import { Loader } from "@plane/blocks/loader";
 // component
 import { SelectMonthModal } from "@/components/automation";
 import { SettingsControlItem } from "@/components/settings/control-item";
diff --git a/apps/web/core/components/automation/auto-close-automation.tsx b/apps/web/core/components/automation/auto-close-automation.tsx
index bf8c5301b3d..e174c65aacf 100644
--- a/apps/web/core/components/automation/auto-close-automation.tsx
+++ b/apps/web/core/components/automation/auto-close-automation.tsx
@@ -11,10 +11,11 @@ import { AutoCloseOutline, StateOutline } from "@makeplane/propel/icons";
 // plane imports
 import { PROJECT_AUTOMATION_MONTHS, EUserPermissions, EUserPermissionsLevel, EIconSize } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { StateGroupIcon } from "@plane/propel/icons";
+import { StateGroupIcon } from "@plane/blocks/icons";
 import type { IProject } from "@plane/types";
 import { Switch } from "@makeplane/propel/components/switch";
-import { CustomSelect, CustomSearchSelect, Loader } from "@plane/ui";
+import { CustomSelect, CustomSearchSelect } from "@plane/blocks/dropdowns";
+import { Loader } from "@plane/blocks/loader";
 import { SelectMonthModal } from "@/components/automation";
 import { SettingsControlItem } from "@/components/settings/control-item";
 // hooks
diff --git a/apps/web/core/components/automation/select-month-modal.tsx b/apps/web/core/components/automation/select-month-modal.tsx
index b557934c49a..a628670d844 100644
--- a/apps/web/core/components/automation/select-month-modal.tsx
+++ b/apps/web/core/components/automation/select-month-modal.tsx
@@ -9,10 +9,10 @@ import { useParams } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
-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";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // types
 type Props = {
   isOpen: boolean;
@@ -130,12 +130,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"
+            type="submit"
+            label={isSubmitting ? "Submitting..." : "Submit"}
+            loading={isSubmitting}
+          />
         </div>
       </form>
     </ModalCore>
diff --git a/apps/web/core/components/base-layouts/gantt/sidebar.tsx b/apps/web/core/components/base-layouts/gantt/sidebar.tsx
index 85f1e5b70cb..c71fb93963d 100644
--- a/apps/web/core/components/base-layouts/gantt/sidebar.tsx
+++ b/apps/web/core/components/base-layouts/gantt/sidebar.tsx
@@ -8,7 +8,8 @@ import type { RefObject } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
 import type { IBaseLayoutsBaseItem, IBlockUpdateData } from "@plane/types";
-import { Loader, Row } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
+import { Row } from "@plane/blocks/row";
 import { cn } from "@plane/utils";
 import RenderIfVisible from "@/components/core/render-if-visible-HOC";
 import { BLOCK_HEIGHT } from "@/components/gantt-chart/constants";
diff --git a/apps/web/core/components/base-layouts/list/group.tsx b/apps/web/core/components/base-layouts/list/group.tsx
index a11ae4a7769..46ec6374d5f 100644
--- a/apps/web/core/components/base-layouts/list/group.tsx
+++ b/apps/web/core/components/base-layouts/list/group.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import type { IBaseLayoutsListItem, IBaseLayoutsListGroupProps } from "@plane/types";
-import { cn } from "@plane/ui";
+import { cn } from "@plane/blocks/utils";
 import { useGroupDropTarget } from "../hooks/use-group-drop-target";
 import { GroupHeader } from "./group-header";
 import { BaseListItem } from "./item";
diff --git a/apps/web/core/components/base-layouts/list/layout.tsx b/apps/web/core/components/base-layouts/list/layout.tsx
index 288d356f940..71c9dad14e4 100644
--- a/apps/web/core/components/base-layouts/list/layout.tsx
+++ b/apps/web/core/components/base-layouts/list/layout.tsx
@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 import type { IBaseLayoutsListItem, IBaseLayoutsListProps } from "@plane/types";
-import { cn } from "@plane/ui";
+import { cn } from "@plane/blocks/utils";
 import { useLayoutState } from "../hooks/use-layout-state";
 import { BaseListGroup } from "./group";
 
diff --git a/apps/web/core/components/breadcrumbs/project.tsx b/apps/web/core/components/breadcrumbs/project.tsx
index 3bd941c5c38..18a1868b31f 100644
--- a/apps/web/core/components/breadcrumbs/project.tsx
+++ b/apps/web/core/components/breadcrumbs/project.tsx
@@ -5,11 +5,11 @@
  */
 
 import { observer } from "mobx-react";
-import { Logo } from "@plane/propel/emoji-icon-picker";
+import { Logo } from "@plane/blocks/emoji-icon-picker";
 import { ProjectsOutline } from "@makeplane/propel/icons";
 // plane imports
 import type { ICustomSearchSelectOption } from "@plane/types";
-import { BreadcrumbNavigationSearchDropdown, Breadcrumbs } from "@plane/ui";
+import { BreadcrumbNavigationSearchDropdown, Breadcrumbs } from "@plane/blocks/breadcrumbs";
 import { SwitcherLabel } from "@/components/common/switcher-label";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
diff --git a/apps/web/core/components/comments/card/display.tsx b/apps/web/core/components/comments/card/display.tsx
index ecb527ee293..4cde93afc8e 100644
--- a/apps/web/core/components/comments/card/display.tsx
+++ b/apps/web/core/components/comments/card/display.tsx
@@ -22,7 +22,7 @@ import { LiteTextEditor } from "@/components/editor/lite-text";
 // local imports
 import { CommentReactions } from "../comment-reaction";
 import { CommentCardEditForm } from "./edit-form";
-import { EmojiReactionButton, EmojiReactionPicker } from "@plane/propel/emoji-reaction";
+import { EmojiReactionButton, EmojiReactionPicker } from "@plane/blocks/emoji-reaction";
 import { useMember } from "@/hooks/store/use-member";
 
 export type TCommentCardDisplayProps = {
diff --git a/apps/web/core/components/comments/comment-reaction.tsx b/apps/web/core/components/comments/comment-reaction.tsx
index 709de31e81b..a76b324df1b 100644
--- a/apps/web/core/components/comments/comment-reaction.tsx
+++ b/apps/web/core/components/comments/comment-reaction.tsx
@@ -7,9 +7,9 @@
 import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { stringToEmoji } from "@plane/propel/emoji-icon-picker";
-import { EmojiReactionGroup, EmojiReactionPicker } from "@plane/propel/emoji-reaction";
-import type { EmojiReactionType } from "@plane/propel/emoji-reaction";
+import { stringToEmoji } from "@plane/blocks/emoji-icon-picker";
+import { EmojiReactionGroup, EmojiReactionPicker } from "@plane/blocks/emoji-reaction";
+import type { EmojiReactionType } from "@plane/blocks/emoji-reaction";
 import type { TCommentsOperations, TIssueComment } from "@plane/types";
 // helpers
 // local imports
diff --git a/apps/web/core/components/comments/quick-actions.tsx b/apps/web/core/components/comments/quick-actions.tsx
index 154ca32a56b..e54cdbd33ec 100644
--- a/apps/web/core/components/comments/quick-actions.tsx
+++ b/apps/web/core/components/comments/quick-actions.tsx
@@ -17,10 +17,11 @@ import {
 // plane imports
 import { EIssueCommentAccessSpecifier } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { IconButton } from "@plane/propel/icon-button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 import type { TIssueComment, TCommentsOperations } from "@plane/types";
-import type { TContextMenuItem } from "@plane/ui";
-import { CustomMenu } from "@plane/ui";
+import type { TContextMenuItem } from "@plane/blocks/dropdowns";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 import { cn } from "@plane/utils";
 // hooks
 import { useUser } from "@/hooks/store/user";
@@ -92,7 +93,17 @@ export const CommentQuickActions = observer(function CommentQuickActions(props:
   if (MENU_ITEMS.length === 0) return null;
 
   return (
-    <CustomMenu customButton={<IconButton icon={MoreHorizontalOutline} variant="ghost" size="sm" />} closeOnSelect>
+    <CustomMenu
+      customButton={
+        <IconButton
+          icon={<Icon icon={MoreHorizontalOutline} />}
+          aria-label="Comment actions"
+          variant="ghost"
+          size="xs"
+        />
+      }
+      closeOnSelect
+    >
       {MENU_ITEMS.map((item) => (
         <CustomMenu.MenuItem
           key={item.key}
diff --git a/apps/web/core/components/common/access-field.tsx b/apps/web/core/components/common/access-field.tsx
index d332fcdfcda..5c42237bf1d 100644
--- a/apps/web/core/components/common/access-field.tsx
+++ b/apps/web/core/components/common/access-field.tsx
@@ -7,7 +7,7 @@
 import type { LucideIcon } from "lucide-react";
 // plane ui
 import { useTranslation } from "@plane/i18n";
-import type { ISvgIcons } from "@plane/propel/icons";
+import type { ISvgIcons } from "@plane/blocks/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 // plane utils
 import { cn } from "@plane/utils";
diff --git a/apps/web/core/components/common/avatar-group-overflow.tsx b/apps/web/core/components/common/avatar-group-overflow.tsx
index 368612521c3..1e3a0af48ad 100644
--- a/apps/web/core/components/common/avatar-group-overflow.tsx
+++ b/apps/web/core/components/common/avatar-group-overflow.tsx
@@ -27,7 +27,7 @@ type Props = {
  * An overlapping avatar stack that collapses the tail into a `+N` counter.
  *
  * Propel's `AvatarGroup` renders every child it is given, so the capping behaviour that
- * `@plane/ui`'s `AvatarGroup` provided through `max` lives here as app chrome. The overflow
+ * * the legacy `@plane/ui` `AvatarGroup` provided through `max` lives here as app chrome. The overflow
  * indicator is a Propel `Avatar` with a `fallback`, matching the Avatar Group overflow pattern.
  */
 export function AvatarGroupOverflow(props: Props) {
diff --git a/apps/web/core/components/common/breadcrumb-link.tsx b/apps/web/core/components/common/breadcrumb-link.tsx
index dd7567997d8..4b347eb024c 100644
--- a/apps/web/core/components/common/breadcrumb-link.tsx
+++ b/apps/web/core/components/common/breadcrumb-link.tsx
@@ -7,7 +7,7 @@
 import React, { useMemo } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { Breadcrumbs } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type Props = {
diff --git a/apps/web/core/components/common/empty-state.tsx b/apps/web/core/components/common/empty-state.tsx
index a5f469deb7d..a50a9e69eea 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,14 @@ 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}
+              iconPosition="start"
               onClick={primaryButton.onClick}
               disabled={disabled}
-            >
-              {primaryButton.text}
-            </Button>
+            />
           )}
           {secondaryButton}
         </div>
diff --git a/apps/web/core/components/common/filters/created-by.tsx b/apps/web/core/components/common/filters/created-by.tsx
index f70cef7ae5c..840482c2ac4 100644
--- a/apps/web/core/components/common/filters/created-by.tsx
+++ b/apps/web/core/components/common/filters/created-by.tsx
@@ -9,7 +9,7 @@ import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 // ui
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
diff --git a/apps/web/core/components/common/layout-error-boundary.tsx b/apps/web/core/components/common/layout-error-boundary.tsx
index ead42f58794..d94cc029e14 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 { WarningTriangleOutline } from "@makeplane/propel/icons";
 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">
       <WarningTriangleOutline 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 742ea3a6a88..232bc13f35d 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/elements/button";
 
 type Props = {
   title: string;
@@ -50,9 +50,14 @@ 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"
+                size="lg"
+                stretch="auto"
+                render={
+                  <button
+                    className={`relative m-3 max-w-min !px-6 ${comicBox?.direction === "left" ? "flex-row-reverse" : ""}`}
+                  />
+                }
                 onClick={primaryButton.onClick}
                 disabled={disabled}
               >
diff --git a/apps/web/core/components/common/quick-actions-factory.tsx b/apps/web/core/components/common/quick-actions-factory.tsx
index 0c234e8a48f..dbaac7e8f4d 100644
--- a/apps/web/core/components/common/quick-actions-factory.tsx
+++ b/apps/web/core/components/common/quick-actions-factory.tsx
@@ -13,7 +13,7 @@ import {
   RestoreOutline,
 } from "@makeplane/propel/icons";
 import { useTranslation } from "@plane/i18n";
-import type { TContextMenuItem } from "@plane/ui";
+import type { TContextMenuItem } from "@plane/blocks/dropdowns";
 
 /**
  * Unified factory for creating menu items across all entities (cycles, modules, views, epics)
diff --git a/apps/web/core/components/common/quick-actions-helper.tsx b/apps/web/core/components/common/quick-actions-helper.tsx
index fdc4808c000..192eb0d5848 100644
--- a/apps/web/core/components/common/quick-actions-helper.tsx
+++ b/apps/web/core/components/common/quick-actions-helper.tsx
@@ -8,7 +8,7 @@
 import type { JSX } from "react";
 // types
 import type { ICycle, IModule, IProjectView, IWorkspaceView } from "@plane/types";
-import type { TContextMenuItem } from "@plane/ui";
+import type { TContextMenuItem } from "@plane/blocks/dropdowns";
 // hooks
 import { useQuickActionsFactory } from "@/components/common/quick-actions-factory";
 
diff --git a/apps/web/core/components/common/switcher-label.tsx b/apps/web/core/components/common/switcher-label.tsx
index e19d23278da..e59724e6b85 100644
--- a/apps/web/core/components/common/switcher-label.tsx
+++ b/apps/web/core/components/common/switcher-label.tsx
@@ -5,8 +5,8 @@
  */
 
 import type { FC } from "react";
-import { Logo } from "@plane/propel/emoji-icon-picker";
-import type { ISvgIcons } from "@plane/propel/icons";
+import { Logo } from "@plane/blocks/emoji-icon-picker";
+import type { ISvgIcons } from "@plane/blocks/icons";
 import type { TLogoProps } from "@plane/types";
 import { getFileURL, truncateText } from "@plane/utils";
 
diff --git a/apps/web/core/components/core/activity.tsx b/apps/web/core/components/core/activity.tsx
index 60be41d062d..bd890062377 100644
--- a/apps/web/core/components/core/activity.tsx
+++ b/apps/web/core/components/core/activity.tsx
@@ -27,7 +27,7 @@ import {
   RelatesToOutline,
   WorkItemsOutline,
 } from "@makeplane/propel/icons";
-import { BlockedIcon, BlockerIcon } from "@plane/propel/icons";
+import { BlockedIcon, BlockerIcon } from "@plane/blocks/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { IIssueActivity } from "@plane/types";
 import { renderFormattedDate, generateWorkItemLink, capitalizeFirstLetter } from "@plane/utils";
diff --git a/apps/web/core/components/core/app-header.tsx b/apps/web/core/components/core/app-header.tsx
index 13d13712054..28652448b6e 100644
--- a/apps/web/core/components/core/app-header.tsx
+++ b/apps/web/core/components/core/app-header.tsx
@@ -7,7 +7,7 @@
 import type { ReactNode } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { Row } from "@plane/ui";
+import { Row } from "@plane/blocks/row";
 // components
 import { cn } from "@plane/utils";
 import { ExtendedAppHeader } from "@/components/common/extended-app-header";
diff --git a/apps/web/core/components/core/description-versions/dropdown-item.tsx b/apps/web/core/components/core/description-versions/dropdown-item.tsx
index 3c64f2b5d6a..6de2f0c1cd3 100644
--- a/apps/web/core/components/core/description-versions/dropdown-item.tsx
+++ b/apps/web/core/components/core/description-versions/dropdown-item.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { Avatar } from "@makeplane/propel/components/avatar";
 import { useTranslation } from "@plane/i18n";
 import type { TDescriptionVersion } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 import { calculateTimeAgo, getFileURL } from "@plane/utils";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
diff --git a/apps/web/core/components/core/description-versions/dropdown.tsx b/apps/web/core/components/core/description-versions/dropdown.tsx
index 4f684b02305..9c13a9b59f3 100644
--- a/apps/web/core/components/core/description-versions/dropdown.tsx
+++ b/apps/web/core/components/core/description-versions/dropdown.tsx
@@ -9,7 +9,7 @@ import { HistoryOutline } from "@makeplane/propel/icons";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import type { TDescriptionVersion } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 import { calculateTimeAgo } from "@plane/utils";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
diff --git a/apps/web/core/components/core/description-versions/modal.tsx b/apps/web/core/components/core/description-versions/modal.tsx
index 6ded29e8200..5016edf0cb7 100644
--- a/apps/web/core/components/core/description-versions/modal.tsx
+++ b/apps/web/core/components/core/description-versions/modal.tsx
@@ -10,19 +10,21 @@ import { observer } from "mobx-react";
 import { Avatar } from "@makeplane/propel/components/avatar";
 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 { ChevronLeftOutline, ChevronRightOutline, CopyOutline } from "@makeplane/propel/icons";
-import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { setToast, TOAST_TYPE } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { TDescriptionVersion } from "@plane/types";
-import { EModalPosition, EModalWidth, Loader, ModalCore } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 import { calculateTimeAgo, cn, getFileURL } from "@plane/utils";
 // components
 import { RichTextEditor } from "@/components/editor/rich-text";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
 import { useWorkspace } from "@/hooks/store/use-workspace";
-import { IconButton } from "@plane/propel/icon-button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 
 type Props = {
   activeVersionDescription: string | undefined;
@@ -159,23 +161,35 @@ export const DescriptionVersionsModal = observer(function DescriptionVersionsMod
         {/* Footer */}
         <div className="flex items-center justify-between gap-2 border-t-[0.5px] border-subtle pt-4">
           <Tooltip label={t("common.actions.copy_markdown")}>
-            <IconButton type="button" variant="ghost" size="base" onClick={handleCopyMarkdown} icon={CopyOutline} />
+            <IconButton
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={handleCopyMarkdown}
+              icon={<Icon icon={CopyOutline} />}
+              aria-label={t("common.actions.copy_markdown")}
+            />
           </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 1fcbecbd79b..98a4e460b71 100644
--- a/apps/web/core/components/core/filters/date-filter-modal.tsx
+++ b/apps/web/core/components/core/filters/date-filter-modal.tsx
@@ -5,10 +5,10 @@
  */
 
 import { Controller, useForm } from "react-hook-form";
-import { Button } from "@plane/propel/button";
-import { Calendar } from "@plane/propel/calendar";
+import { Button } from "@makeplane/propel/components/button";
+import { Calendar } from "@makeplane/propel/components/calendar";
 import { CloseOutline } from "@makeplane/propel/icons";
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 import { renderFormattedPayloadDate, renderFormattedDate, getDate } from "@plane/utils";
 import { DateFilterSelect } from "./date-filter-select";
 type Props = {
@@ -72,8 +72,6 @@ export function DateFilterModal({ title, handleClose, isOpen, onSelect }: Props)
               const date2Value = getDate(watch("date2"));
               return (
                 <Calendar
-                  className="rounded-md border border-subtle p-3"
-                  captionLayout="dropdown"
                   selected={dateValue}
                   defaultMonth={dateValue}
                   onSelect={(date: Date | undefined) => {
@@ -81,6 +79,7 @@ export function DateFilterModal({ title, handleClose, isOpen, onSelect }: Props)
                     onChange(date);
                   }}
                   mode="single"
+                  showOutsideDays
                   disabled={date2Value ? [{ after: date2Value }] : undefined}
                 />
               );
@@ -95,8 +94,6 @@ export function DateFilterModal({ title, handleClose, isOpen, onSelect }: Props)
                 const date1Value = getDate(watch("date1"));
                 return (
                   <Calendar
-                    className="rounded-md border border-subtle p-3"
-                    captionLayout="dropdown"
                     selected={dateValue}
                     defaultMonth={dateValue}
                     onSelect={(date: Date | undefined) => {
@@ -104,6 +101,7 @@ export function DateFilterModal({ title, handleClose, isOpen, onSelect }: Props)
                       onChange(date);
                     }}
                     mode="single"
+                    showOutsideDays
                     disabled={date1Value ? [{ before: date1Value }] : undefined}
                   />
                 );
@@ -120,18 +118,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"
             type="button"
+            label="Apply"
             onClick={handleSubmit(handleFormSubmit)}
             disabled={isInvalid}
-          >
-            Apply
-          </Button>
+          />
         </div>
       </form>
     </ModalCore>
diff --git a/apps/web/core/components/core/filters/date-filter-select.tsx b/apps/web/core/components/core/filters/date-filter-select.tsx
index 13c18350476..81faa5ed1e8 100644
--- a/apps/web/core/components/core/filters/date-filter-select.tsx
+++ b/apps/web/core/components/core/filters/date-filter-select.tsx
@@ -7,8 +7,8 @@
 import React from "react";
 import { CalendarOutline } from "@makeplane/propel/icons";
 // ui
-import { CalendarAfterIcon, CalendarBeforeIcon } from "@plane/propel/icons";
-import { CustomSelect } from "@plane/ui";
+import { CalendarAfterIcon, CalendarBeforeIcon } from "@plane/blocks/icons";
+import { CustomSelect } from "@plane/blocks/dropdowns";
 
 type Props = {
   title: string;
diff --git a/apps/web/core/components/core/image-picker-popover.tsx b/apps/web/core/components/core/image-picker-popover.tsx
index 7b235890cc6..f4517a36026 100644
--- a/apps/web/core/components/core/image-picker-popover.tsx
+++ b/apps/web/core/components/core/image-picker-popover.tsx
@@ -17,10 +17,11 @@ import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { Tab, Tabs, TabsList, TabsPanel } from "@makeplane/propel/components/tabs";
 import { ACCEPTED_COVER_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
-import { Button, getButtonStyling } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { Button as ButtonElement } from "@makeplane/propel/elements/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { EFileAssetType } from "@plane/types";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // helpers
 import { STATIC_COVER_IMAGES, getCoverImageDisplayURL } from "@/helpers/cover-image.helper";
 // hooks
@@ -193,9 +194,14 @@ 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"
+        render={<Popover.Button onClick={handleOnClick} disabled={disabled} />}
+      >
         {label}
-      </Popover.Button>
+      </ButtonElement>
 
       {isOpen && (
         <Popover.Panel
@@ -249,9 +255,13 @@ function ImagePickerPopoverComponent<TFieldValues extends FieldValues = FieldVal
                                   </InputGroup>
                                 )}
                               />
-                              <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 ? (
@@ -358,22 +368,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>
                     </TabsPanel>
diff --git a/apps/web/core/components/core/list/list-item.tsx b/apps/web/core/components/core/list/list-item.tsx
index 49b49e8167f..6a42196a4b7 100644
--- a/apps/web/core/components/core/list/list-item.tsx
+++ b/apps/web/core/components/core/list/list-item.tsx
@@ -7,7 +7,8 @@
 import React from "react";
 // ui
 import { Tooltip } from "@makeplane/propel/components/tooltip";
-import { ControlLink, Row } from "@plane/ui";
+import { ControlLink } from "@plane/blocks/control-link";
+import { Row } from "@plane/blocks/row";
 // helpers
 import { cn } from "@plane/utils";
 // hooks
diff --git a/apps/web/core/components/core/list/list-root.tsx b/apps/web/core/components/core/list/list-root.tsx
index efe787e6472..66c83a9af61 100644
--- a/apps/web/core/components/core/list/list-root.tsx
+++ b/apps/web/core/components/core/list/list-root.tsx
@@ -5,7 +5,7 @@
  */
 
 import React from "react";
-import { Row, ERowVariant } from "@plane/ui";
+import { Row, ERowVariant } from "@plane/blocks/row";
 
 interface IListContainer {
   children: React.ReactNode;
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 0c89899a29a..1b895a406fa 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,12 +13,13 @@ 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 { SearchOutline } from "@makeplane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { ISearchIssueResponse, IUser } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
-import { Loader, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // assets
 import darkIssuesAsset from "@/app/assets/empty-state/search/issues-dark.webp?url";
 import lightIssuesAsset from "@/app/assets/empty-state/search/issues-light.webp?url";
@@ -199,12 +200,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 73cd2e546d2..85ffb294ac2 100644
--- a/apps/web/core/components/core/modals/change-email-modal.tsx
+++ b/apps/web/core/components/core/modals/change-email-modal.tsx
@@ -11,9 +11,9 @@ import { Controller, useForm } from "react-hook-form";
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 import { cn } from "@plane/utils";
 // helpers
 import { authErrorHandler } from "@/helpers/authentication.helper";
@@ -205,16 +205,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
+            type="button"
+            variant="secondary"
+            size="md"
+            stretch="auto"
+            label={changeEmailT("actions.cancel")}
+            onClick={handleClose}
+          />
+          <Button
+            type="submit"
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={
+              isSubmitting
+                ? changeEmailT("states.sending")
+                : secondStep
+                  ? changeEmailT("actions.confirm")
+                  : changeEmailT("actions.continue")
+            }
+            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 f0967c87e04..1ae04ac58a5 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,13 +10,14 @@ import { Combobox } from "@headlessui/react";
 // i18n
 import { useTranslation } from "@plane/i18n";
 // types
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { ISearchIssueResponse, TProjectIssuesSearchParams } from "@plane/types";
 // ui
 import { Switch } from "@makeplane/propel/components/switch";
-import { Loader, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 import { generateWorkItemLink, getTabIndex } from "@plane/utils";
 // helpers
 // hooks
@@ -313,26 +314,27 @@ export function ExistingIssuesListModal(props: Props) {
       </Combobox>
       <div className="flex items-center justify-between p-3">
         <Button
-          variant="link"
+          variant="ghost"
+          size="sm"
+          stretch="auto"
+          label={
+            selectedIssues.length === issues.length ? t("issue.select.deselect_all") : t("issue.select.select_all")
+          }
+          render={<button className={`px-0 text-link-primary underline ${filteredIssues.length === 0 ? "p-0" : ""}`} />}
           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>
+        />
         <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 58423c5f93f..2945f9b3547 100644
--- a/apps/web/core/components/core/modals/gpt-assistant-popover.tsx
+++ b/apps/web/core/components/core/modals/gpt-assistant-popover.tsx
@@ -14,8 +14,8 @@ import { Popover, Transition } from "@headlessui/react";
 // plane imports
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import type { EditorRefApi } from "@plane/editor";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 
 // components
 import { RichTextEditor } from "@/components/editor/rich-text";
@@ -181,13 +181,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
@@ -290,12 +291,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 5bca711edc0..66ced8d1d2a 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,11 +9,11 @@ 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 { UserOutline } from "@makeplane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { EFileAssetType } from "@plane/types";
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 import { getAssetIdFromUrl, getFileURL, checkURLValidity } from "@plane/utils";
 // services
 import { FileService } from "@/services/file.service";
@@ -69,7 +69,7 @@ export const UserImageUploadModal = observer(function UserImageUploadModal(props
         title: "Error!",
         message: error?.toString() ?? "Something went wrong. Please try again.",
       });
-      throw new Error("Error in uploading file.");
+      throw new Error("Error in uploading file.", { cause: error });
     } finally {
       setIsImageUploading(false);
     }
@@ -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 2eead1677e7..73797ae1b25 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,11 +10,11 @@ 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 { UserOutline } from "@makeplane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { EFileAssetType } from "@plane/types";
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 import { getAssetIdFromUrl, getFileURL, checkURLValidity } from "@plane/utils";
 // hooks
 import { useWorkspace } from "@/hooks/store/use-workspace";
@@ -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/sidebar/progress-chart.tsx b/apps/web/core/components/core/sidebar/progress-chart.tsx
index a5b99a9cddf..c64b34888c0 100644
--- a/apps/web/core/components/core/sidebar/progress-chart.tsx
+++ b/apps/web/core/components/core/sidebar/progress-chart.tsx
@@ -6,7 +6,7 @@
 
 import React from "react";
 // plane imports
-import { AreaChart } from "@plane/propel/charts/area-chart";
+import { AreaChart } from "@plane/blocks/charts/area-chart";
 import type { TChartData, TModuleCompletionChartDistribution } from "@plane/types";
 import { renderFormattedDateWithoutYear } from "@plane/utils";
 
diff --git a/apps/web/core/components/core/sidebar/progress-stats/state_group.tsx b/apps/web/core/components/core/sidebar/progress-stats/state_group.tsx
index bcc4fdb7657..bf5b4c29390 100644
--- a/apps/web/core/components/core/sidebar/progress-stats/state_group.tsx
+++ b/apps/web/core/components/core/sidebar/progress-stats/state_group.tsx
@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 // plane imports
-import { StateGroupIcon } from "@plane/propel/icons";
+import { StateGroupIcon } from "@plane/blocks/icons";
 import type { TStateGroups } from "@plane/types";
 // components
 import { SingleProgressStats } from "@/components/core/sidebar/single-progress-stats";
diff --git a/apps/web/core/components/core/theme/color-inputs.tsx b/apps/web/core/components/core/theme/color-inputs.tsx
index bb3f7995279..c617ba17b8c 100644
--- a/apps/web/core/components/core/theme/color-inputs.tsx
+++ b/apps/web/core/components/core/theme/color-inputs.tsx
@@ -9,7 +9,7 @@ import type { Control } from "react-hook-form";
 import { Controller } from "react-hook-form";
 // plane imports
 import type { IUserTheme } from "@plane/types";
-import { InputColorPicker } from "@plane/ui";
+import { InputColorPicker } from "@plane/blocks/form-fields";
 
 type Props = {
   control: Control<IUserTheme>;
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 47307776d85..b1e38bad6c4 100644
--- a/apps/web/core/components/core/theme/custom-theme-selector.tsx
+++ b/apps/web/core/components/core/theme/custom-theme-selector.tsx
@@ -9,8 +9,8 @@ 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 { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IUserTheme } from "@plane/types";
 import { applyCustomTheme } from "@plane/utils";
 // components
@@ -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"
+          type="submit"
+          label={isSubmitting ? t("common.saving") : isLoadingPalette ? "Generating" : t("set_theme")}
+          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 c2ffc0bc3d8..61d753095b0 100644
--- a/apps/web/core/components/core/theme/download-config-button.tsx
+++ b/apps/web/core/components/core/theme/download-config-button.tsx
@@ -8,8 +8,8 @@ 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 { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { setToast, TOAST_TYPE } from "@plane/blocks/toast";
 import type { IUserTheme } from "@plane/types";
 
 type Props = {
@@ -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"
+      type="button"
+      label="Download config"
+      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 a4586163b4e..d6415b8dc87 100644
--- a/apps/web/core/components/core/theme/import-config-button.tsx
+++ b/apps/web/core/components/core/theme/import-config-button.tsx
@@ -9,8 +9,8 @@ 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 { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { setToast, TOAST_TYPE } from "@plane/blocks/toast";
 import type { IUserTheme } from "@plane/types";
 
 type Props = {
@@ -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"
+        type="button"
+        label="Import config"
+        onClick={() => fileInputRef.current?.click()}
+      />
     </>
   );
 });
diff --git a/apps/web/core/components/core/theme/theme-switch.tsx b/apps/web/core/components/core/theme/theme-switch.tsx
index b9de9bc5dc5..efa45629fe6 100644
--- a/apps/web/core/components/core/theme/theme-switch.tsx
+++ b/apps/web/core/components/core/theme/theme-switch.tsx
@@ -9,7 +9,7 @@ import type { I_THEME_OPTION } from "@plane/constants";
 import { THEME_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // constants
-import { CustomSelect } from "@plane/ui";
+import { CustomSelect } from "@plane/blocks/dropdowns";
 // ui
 
 type Props = {
diff --git a/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx b/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
index 493f4dc5826..4ac9a0e6eb0 100644
--- a/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
+++ b/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
@@ -14,13 +14,13 @@ import { Tab } from "@headlessui/react";
 // plane imports
 import { Avatar } from "@makeplane/propel/components/avatar";
 import { useTranslation } from "@plane/i18n";
-import { PriorityIcon } from "@plane/propel/icons";
+import { PriorityIcon } from "@plane/blocks/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { TWorkItemFilterCondition } from "@plane/shared-state";
 import type { ICycle } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
 // ui
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 import { cn, renderFormattedDate, renderFormattedDateWithoutYear, getFileURL } from "@plane/utils";
 // assets
 import darkAssigneeAsset from "@/app/assets/empty-state/active-cycle/assignee-dark.webp?url";
diff --git a/apps/web/core/components/cycles/active-cycle/productivity.tsx b/apps/web/core/components/cycles/active-cycle/productivity.tsx
index c3ebdfcbe8f..98141bed298 100644
--- a/apps/web/core/components/cycles/active-cycle/productivity.tsx
+++ b/apps/web/core/components/cycles/active-cycle/productivity.tsx
@@ -11,7 +11,7 @@ import { useTheme } from "next-themes";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import type { ICycle, TCycleEstimateType } from "@plane/types";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // assets
 import darkChartAsset from "@/app/assets/empty-state/active-cycle/chart-dark.webp?url";
 import lightChartAsset from "@/app/assets/empty-state/active-cycle/chart-light.webp?url";
diff --git a/apps/web/core/components/cycles/active-cycle/progress.tsx b/apps/web/core/components/cycles/active-cycle/progress.tsx
index d5d402c4ac2..3c649235f1c 100644
--- a/apps/web/core/components/cycles/active-cycle/progress.tsx
+++ b/apps/web/core/components/cycles/active-cycle/progress.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from "@plane/i18n";
 import type { TWorkItemFilterCondition } from "@plane/shared-state";
 import { LinearProgress } from "@makeplane/propel/components/linear-progress";
 import type { ICycle } from "@plane/types";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // assets
 import darkProgressAsset from "@/app/assets/empty-state/active-cycle/progress-dark.webp?url";
 import lightProgressAsset from "@/app/assets/empty-state/active-cycle/progress-light.webp?url";
diff --git a/apps/web/core/components/cycles/active-cycle/root.tsx b/apps/web/core/components/cycles/active-cycle/root.tsx
index ab413b8b0a4..d3a9e01581f 100644
--- a/apps/web/core/components/cycles/active-cycle/root.tsx
+++ b/apps/web/core/components/cycles/active-cycle/root.tsx
@@ -7,11 +7,11 @@
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
 import { Disclosure } from "@headlessui/react";
-import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { EmptyStateDetailed } from "@plane/blocks/empty-state";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import type { ICycle } from "@plane/types";
-import { Row } from "@plane/ui";
+import { Row } from "@plane/blocks/row";
 // assets
 import darkActiveCycleAsset from "@/app/assets/empty-state/cycle/active-dark.webp?url";
 import lightActiveCycleAsset from "@/app/assets/empty-state/cycle/active-light.webp?url";
diff --git a/apps/web/core/components/cycles/analytics-sidebar/root.tsx b/apps/web/core/components/cycles/analytics-sidebar/root.tsx
index 7c84e4daeac..88eb1de5bab 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/root.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/root.tsx
@@ -7,7 +7,7 @@
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // local imports
 import useCyclesDetails from "../active-cycle/use-cycles-details";
 import { CycleAnalyticsProgress } from "./issue-progress";
diff --git a/apps/web/core/components/cycles/analytics-sidebar/sidebar-chart.tsx b/apps/web/core/components/cycles/analytics-sidebar/sidebar-chart.tsx
index 9467ec63afc..f8f882f65c3 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/sidebar-chart.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/sidebar-chart.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import type { TCycleEstimateType } from "@plane/types";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 import { getDate } from "@plane/utils";
 // components
 import ProgressChart from "@/components/core/sidebar/progress-chart";
diff --git a/apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx b/apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
index 634cd11721d..04e767e12b3 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
@@ -11,7 +11,7 @@ import { Controller, useForm } from "react-hook-form";
 import { CYCLE_STATUS, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { ChevronRightOutline } from "@makeplane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { ICycle } from "@plane/types";
 import { getDate, renderFormattedPayloadDate } from "@plane/utils";
 // components
diff --git a/apps/web/core/components/cycles/applied-filters/root.tsx b/apps/web/core/components/cycles/applied-filters/root.tsx
index 4ec777c6ef2..8e88abd17fe 100644
--- a/apps/web/core/components/cycles/applied-filters/root.tsx
+++ b/apps/web/core/components/cycles/applied-filters/root.tsx
@@ -25,7 +25,7 @@ type Props = {
   alwaysAllowEditing?: boolean;
 };
 
-const DATE_FILTERS = ["start_date", "end_date"];
+const DATE_FILTERS = new Set(["start_date", "end_date"]);
 
 export const CycleAppliedFiltersList = observer(function CycleAppliedFiltersList(props: Props) {
   const { appliedFilters, handleClearAllFilters, handleRemoveFilter, alwaysAllowEditing } = props;
@@ -63,7 +63,7 @@ export const CycleAppliedFiltersList = observer(function CycleAppliedFiltersList
                   values={value}
                 />
               )}
-              {DATE_FILTERS.includes(filterKey) && (
+              {DATE_FILTERS.has(filterKey) && (
                 <AppliedDateFilters
                   editable={isEditingAllowed}
                   handleRemove={(val) => handleRemoveFilter(filterKey, val)}
diff --git a/apps/web/core/components/cycles/archived-cycles/modal.tsx b/apps/web/core/components/cycles/archived-cycles/modal.tsx
index e29c05fed9c..a23fd1a54fe 100644
--- a/apps/web/core/components/cycles/archived-cycles/modal.tsx
+++ b/apps/web/core/components/cycles/archived-cycles/modal.tsx
@@ -6,9 +6,9 @@
 
 import { useState } from "react";
 // ui
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // hooks
 import { useCycle } from "@/hooks/store/use-cycle";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -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" onClick={onClose} label="Cancel" />
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            tabIndex={1}
+            onClick={handleArchiveCycle}
+            loading={isArchiving}
+            label={isArchiving ? "Archiving" : "Archive"}
+          />
         </div>
       </div>
     </ModalCore>
diff --git a/apps/web/core/components/cycles/archived-cycles/root.tsx b/apps/web/core/components/cycles/archived-cycles/root.tsx
index fdb0ad0e366..e5e02348f43 100644
--- a/apps/web/core/components/cycles/archived-cycles/root.tsx
+++ b/apps/web/core/components/cycles/archived-cycles/root.tsx
@@ -10,7 +10,7 @@ import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { EmptyStateDetailed } from "@plane/blocks/empty-state";
 import type { TCycleFilters } from "@plane/types";
 import { calculateTotalFilters } from "@plane/utils";
 // components
diff --git a/apps/web/core/components/cycles/cycles-view-header.tsx b/apps/web/core/components/cycles/cycles-view-header.tsx
index a242c1a8e58..921e795c400 100644
--- a/apps/web/core/components/cycles/cycles-view-header.tsx
+++ b/apps/web/core/components/cycles/cycles-view-header.tsx
@@ -9,7 +9,8 @@ import { observer } from "mobx-react";
 import { CloseOutline, FilterOutline, SearchOutline } from "@makeplane/propel/icons";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
-import { IconButton } from "@plane/propel/icon-button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 import { useTranslation } from "@plane/i18n";
 import type { TCycleFilters } from "@plane/types";
 import { cn, calculateTotalFilters } from "@plane/utils";
@@ -79,12 +80,13 @@ export const CyclesViewHeader = observer(function CyclesViewHeader(props: Props)
       {!isSearchOpen ? (
         <IconButton
           variant="ghost"
-          size="lg"
+          size="md"
           onClick={() => {
             setIsSearchOpen(true);
             inputRef.current?.focus();
           }}
-          icon={SearchOutline}
+          icon={<Icon icon={SearchOutline} />}
+          aria-label="Search"
         />
       ) : (
         <div
diff --git a/apps/web/core/components/cycles/delete-modal.tsx b/apps/web/core/components/cycles/delete-modal.tsx
index 04f99b27b6d..0e687fcbe79 100644
--- a/apps/web/core/components/cycles/delete-modal.tsx
+++ b/apps/web/core/components/cycles/delete-modal.tsx
@@ -10,10 +10,10 @@ import { useParams, useSearchParams } from "next/navigation";
 // types
 import { PROJECT_ERROR_MESSAGES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { ICycle } from "@plane/types";
 // ui
-import { AlertModalCore } from "@plane/ui";
+import { AlertModalCore } from "@plane/blocks/modals";
 // hooks
 import { useCycle } from "@/hooks/store/use-cycle";
 import { useAppRouter } from "@/hooks/use-app-router";
diff --git a/apps/web/core/components/cycles/dropdowns/estimate-type-dropdown.tsx b/apps/web/core/components/cycles/dropdowns/estimate-type-dropdown.tsx
index 510457097d3..bffc40cf5d3 100644
--- a/apps/web/core/components/cycles/dropdowns/estimate-type-dropdown.tsx
+++ b/apps/web/core/components/cycles/dropdowns/estimate-type-dropdown.tsx
@@ -8,7 +8,7 @@ import React from "react";
 import { observer } from "mobx-react";
 import type { TCycleEstimateType } from "@plane/types";
 import { EEstimateSystem } from "@plane/types";
-import { CustomSelect } from "@plane/ui";
+import { CustomSelect } from "@plane/blocks/dropdowns";
 import { useProjectEstimates } from "@/hooks/store/estimates";
 import { useCycle } from "@/hooks/store/use-cycle";
 // local imports
diff --git a/apps/web/core/components/cycles/form.tsx b/apps/web/core/components/cycles/form.tsx
index a6bb0eae298..2d0d72cc3e0 100644
--- a/apps/web/core/components/cycles/form.tsx
+++ b/apps/web/core/components/cycles/form.tsx
@@ -13,7 +13,7 @@ import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area"
 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";
 import { getDate, renderFormattedPayloadDate, getTabIndex } from "@plane/utils";
 // components
@@ -194,18 +194,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"
+          onClick={handleClose}
+          tabIndex={getIndex("cancel")}
+          label={t("common.cancel")}
+        />
+        <Button
+          variant="primary"
+          size="md"
+          stretch="auto"
+          type="submit"
+          loading={isSubmitting}
+          tabIndex={getIndex("submit")}
+          label={
+            data
+              ? isSubmitting
+                ? t("common.updating")
+                : t("project_cycles.update_cycle")
+              : isSubmitting
+                ? t("common.creating")
+                : t("project_cycles.create_cycle")
+          }
+        />
       </div>
     </form>
   );
diff --git a/apps/web/core/components/cycles/list/cycle-list-group-header.tsx b/apps/web/core/components/cycles/list/cycle-list-group-header.tsx
index e9189d051ff..22a209ab1a5 100644
--- a/apps/web/core/components/cycles/list/cycle-list-group-header.tsx
+++ b/apps/web/core/components/cycles/list/cycle-list-group-header.tsx
@@ -6,11 +6,11 @@
 
 import React from "react";
 // types
-import { CycleGroupIcon } from "@plane/propel/icons";
+import { CycleGroupIcon } from "@plane/blocks/icons";
 import { ChevronDownOutline } from "@makeplane/propel/icons";
 import type { TCycleGroups } from "@plane/types";
 // icons
-import { Row } from "@plane/ui";
+import { Row } from "@plane/blocks/row";
 // helpers
 import { cn } from "@plane/utils";
 
diff --git a/apps/web/core/components/cycles/list/cycle-list-item-action.tsx b/apps/web/core/components/cycles/list/cycle-list-item-action.tsx
index 985bdc6b66e..137ee1213d7 100644
--- a/apps/web/core/components/cycles/list/cycle-list-item-action.tsx
+++ b/apps/web/core/components/cycles/list/cycle-list-item-action.tsx
@@ -21,10 +21,10 @@ import { EUserPermissions, EUserPermissionsLevel, IS_FAVORITE_MENU_OPEN } from "
 import { useLocalStorage } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { setPromiseToast } from "@plane/propel/toast";
+import { setPromiseToast } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { ICycle, TCycleGroups } from "@plane/types";
-import { FavoriteStar } from "@plane/ui";
+import { FavoriteStar } from "@plane/blocks/favorite-star";
 import { getDate, getFileURL, generateQueryParams } from "@plane/utils";
 // components
 import { AvatarGroupOverflow } from "@/components/common/avatar-group-overflow";
diff --git a/apps/web/core/components/cycles/list/cycle-list-project-group-header.tsx b/apps/web/core/components/cycles/list/cycle-list-project-group-header.tsx
index 7720eee8a04..2fa74dc4dd9 100644
--- a/apps/web/core/components/cycles/list/cycle-list-project-group-header.tsx
+++ b/apps/web/core/components/cycles/list/cycle-list-project-group-header.tsx
@@ -6,10 +6,10 @@
 
 import React from "react";
 import { observer } from "mobx-react";
-import { Logo } from "@plane/propel/emoji-icon-picker";
+import { Logo } from "@plane/blocks/emoji-icon-picker";
 import { ChevronRightOutline } from "@makeplane/propel/icons";
 // icons
-import { Row } from "@plane/ui";
+import { Row } from "@plane/blocks/row";
 // helpers
 import { cn } from "@plane/utils";
 import { useProject } from "@/hooks/store/use-project";
diff --git a/apps/web/core/components/cycles/list/root.tsx b/apps/web/core/components/cycles/list/root.tsx
index 6831f616e90..9b9ded4abca 100644
--- a/apps/web/core/components/cycles/list/root.tsx
+++ b/apps/web/core/components/cycles/list/root.tsx
@@ -9,7 +9,8 @@ import { observer } from "mobx-react";
 import { Disclosure } from "@headlessui/react";
 // components
 import { useTranslation } from "@plane/i18n";
-import { ContentWrapper, ERowVariant } from "@plane/ui";
+import { ContentWrapper } from "@plane/blocks/content-wrapper";
+import { ERowVariant } from "@plane/blocks/row";
 import { ListLayout } from "@/components/core/list";
 // local imports
 import { CyclePeekOverview } from "../cycle-peek-overview";
diff --git a/apps/web/core/components/cycles/modal.tsx b/apps/web/core/components/cycles/modal.tsx
index 582489ced59..d0b2cfa2345 100644
--- a/apps/web/core/components/cycles/modal.tsx
+++ b/apps/web/core/components/cycles/modal.tsx
@@ -7,10 +7,10 @@
 import { useEffect, useState } from "react";
 import { mutate } from "swr";
 // types
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { CycleDateCheckData, ICycle, TCycleTabOptions } from "@plane/types";
 // ui
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // hooks
 import { renderFormattedPayloadDate } from "@plane/utils";
 import { useCycle } from "@/hooks/store/use-cycle";
diff --git a/apps/web/core/components/cycles/quick-actions.tsx b/apps/web/core/components/cycles/quick-actions.tsx
index 8a9978be52b..1196eba9dba 100644
--- a/apps/web/core/components/cycles/quick-actions.tsx
+++ b/apps/web/core/components/cycles/quick-actions.tsx
@@ -10,10 +10,11 @@ import { MoreHorizontalOutline } from "@makeplane/propel/icons";
 // ui
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { IconButton } from "@plane/propel/icon-button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { TContextMenuItem } from "@plane/ui";
-import { ContextMenu, CustomMenu } from "@plane/ui";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
+import type { TContextMenuItem } from "@plane/blocks/dropdowns";
+import { ContextMenu, CustomMenu } from "@plane/blocks/dropdowns";
 import { copyUrlToClipboard, cn } from "@plane/utils";
 // hooks
 import { useCycleMenuItems } from "@/components/common/quick-actions-helper";
@@ -140,7 +141,14 @@ export const CycleQuickActions = observer(function CycleQuickActions(props: Prop
       )}
       <ContextMenu parentRef={parentRef} items={CONTEXT_MENU_ITEMS} />
       <CustomMenu
-        customButton={<IconButton variant="tertiary" size="lg" icon={MoreHorizontalOutline} />}
+        customButton={
+          <IconButton
+            variant="tertiary"
+            size="md"
+            icon={<Icon icon={MoreHorizontalOutline} />}
+            aria-label="Quick actions"
+          />
+        }
         placement="bottom-end"
         closeOnSelect
         maxHeight="lg"
diff --git a/apps/web/core/components/cycles/transfer-issues-modal.tsx b/apps/web/core/components/cycles/transfer-issues-modal.tsx
index 5bc87eb53db..76b4dc850ea 100644
--- a/apps/web/core/components/cycles/transfer-issues-modal.tsx
+++ b/apps/web/core/components/cycles/transfer-issues-modal.tsx
@@ -14,9 +14,9 @@ import {
   TransferWorkItemOutline,
   WarningCircleOutline,
 } from "@makeplane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { EIssuesStoreType } from "@plane/types";
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 import { useCycle } from "@/hooks/store/use-cycle";
 import { useIssues } from "@/hooks/store/use-issues";
 
diff --git a/apps/web/core/components/cycles/transfer-issues.tsx b/apps/web/core/components/cycles/transfer-issues.tsx
index e4315b43e6e..415d149f9b6 100644
--- a/apps/web/core/components/cycles/transfer-issues.tsx
+++ b/apps/web/core/components/cycles/transfer-issues.tsx
@@ -5,9 +5,9 @@
  */
 
 import React from "react";
+import { Button } from "@makeplane/propel/components/button";
+import { Icon } from "@makeplane/propel/components/icon";
 import { TransferWorkItemOutline, WarningCircleOutline } from "@makeplane/propel/icons";
-// ui
-import { Button } from "@plane/propel/button";
 
 type Props = {
   handleClick: () => void;
@@ -28,13 +28,14 @@ export function TransferIssues(props: Props) {
         <div>
           <Button
             variant="primary"
-            size="lg"
-            prependIcon={<TransferWorkItemOutline />}
+            size="md"
+            stretch="auto"
+            icon={<Icon icon={TransferWorkItemOutline} />}
+            iconPosition="start"
             onClick={handleClick}
             disabled={disabled}
-          >
-            Transfer work items
-          </Button>
+            label="Transfer work items"
+          />
         </div>
       )}
     </div>
diff --git a/apps/web/core/components/dropdowns/buttons.tsx b/apps/web/core/components/dropdowns/buttons.tsx
index 6bd59d701e2..7f3f8392396 100644
--- a/apps/web/core/components/dropdowns/buttons.tsx
+++ b/apps/web/core/components/dropdowns/buttons.tsx
@@ -6,7 +6,7 @@
 
 import React from "react";
 // helpers
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import { cn } from "@plane/utils";
 // types
@@ -78,14 +78,20 @@ function BorderButton(props: ButtonProps) {
     >
       <Button
         variant="ghost"
-        size="sm"
-        className={cn(
-          "flex h-full w-full items-center justify-start gap-1.5 border-[0.5px] border-strong",
-          {
-            "bg-layer-transparent-active": isActive,
-          },
-          className
-        )}
+        size="xs"
+        stretch="full"
+        render={
+          <button
+            type="button"
+            className={cn(
+              "flex h-full items-center justify-start gap-1.5 border-[0.5px] border-strong",
+              {
+                "bg-layer-transparent-active": isActive,
+              },
+              className
+            )}
+          />
+        }
       >
         {children}
       </Button>
@@ -104,11 +110,17 @@ function BackgroundButton(props: ButtonProps) {
     >
       <Button
         variant="ghost"
-        size="sm"
-        className={cn(
-          "flex h-full w-full items-center justify-between gap-1.5 bg-layer-3 hover:bg-layer-1-hover",
-          className
-        )}
+        size="xs"
+        stretch="full"
+        render={
+          <button
+            type="button"
+            className={cn(
+              "flex h-full items-center justify-between gap-1.5 bg-layer-3 hover:bg-layer-1-hover",
+              className
+            )}
+          />
+        }
       >
         {children}
       </Button>
@@ -127,14 +139,20 @@ function TransparentButton(props: ButtonProps) {
     >
       <Button
         variant="ghost"
-        size="sm"
-        className={cn(
-          "flex h-full w-full items-center justify-between gap-1.5",
-          {
-            "bg-layer-transparent-active": isActive,
-          },
-          className
-        )}
+        size="xs"
+        stretch="full"
+        render={
+          <button
+            type="button"
+            className={cn(
+              "flex h-full items-center justify-between gap-1.5",
+              {
+                "bg-layer-transparent-active": isActive,
+              },
+              className
+            )}
+          />
+        }
       >
         {children}
       </Button>
diff --git a/apps/web/core/components/dropdowns/cycle/cycle-options.tsx b/apps/web/core/components/dropdowns/cycle/cycle-options.tsx
index a34998ffd56..04e4f82fd2d 100644
--- a/apps/web/core/components/dropdowns/cycle/cycle-options.tsx
+++ b/apps/web/core/components/dropdowns/cycle/cycle-options.tsx
@@ -14,7 +14,7 @@ import { Combobox } from "@headlessui/react";
 // i18n
 import { useTranslation } from "@plane/i18n";
 // icon
-import { CycleGroupIcon } from "@plane/propel/icons";
+import { CycleGroupIcon } from "@plane/blocks/icons";
 import { CyclesOutline, SearchOutline, TickOutline } from "@makeplane/propel/icons";
 import type { TCycleGroups } from "@plane/types";
 // ui
diff --git a/apps/web/core/components/dropdowns/cycle/index.tsx b/apps/web/core/components/dropdowns/cycle/index.tsx
index 9d0b90ee18b..7e681670f6f 100644
--- a/apps/web/core/components/dropdowns/cycle/index.tsx
+++ b/apps/web/core/components/dropdowns/cycle/index.tsx
@@ -10,7 +10,7 @@ import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 // ui
 import { ChevronDownOutline, CyclesOutline } from "@makeplane/propel/icons";
-import { ComboDropDown } from "@plane/ui";
+import { ComboDropDown } from "@plane/blocks/dropdowns";
 // helpers
 import { cn } from "@plane/utils";
 // hooks
diff --git a/apps/web/core/components/dropdowns/date-range.tsx b/apps/web/core/components/dropdowns/date-range.tsx
index 87c842b27e0..b2af2059072 100644
--- a/apps/web/core/components/dropdowns/date-range.tsx
+++ b/apps/web/core/components/dropdowns/date-range.tsx
@@ -14,9 +14,8 @@ import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 // ui
-import type { DateRange, Matcher } from "@plane/propel/calendar";
-import { Calendar } from "@plane/propel/calendar";
-import { ComboDropDown } from "@plane/ui";
+import { Calendar } from "@makeplane/propel/components/calendar";
+import { ComboDropDown } from "@plane/blocks/dropdowns";
 import { cn, renderFormattedDate } from "@plane/utils";
 // helpers
 // hooks
@@ -28,6 +27,10 @@ import { MergedDateDisplay } from "./merged-date";
 // types
 import type { TButtonVariants } from "./types";
 
+// react-day-picker types used by this dropdown (not re-exported by @makeplane/propel)
+type DateRange = { from: Date | undefined; to?: Date | undefined };
+type Matcher = { before: Date } | { after: Date };
+
 type Props = {
   applyButtonText?: string;
   bothRequired?: boolean;
@@ -263,8 +266,6 @@ export const DateRangeDropdown = observer(function DateRangeDropdown(props: Prop
         {...attributes.popper}
       >
         <Calendar
-          className="rounded-md border border-subtle p-3 text-12"
-          captionLayout="dropdown"
           selected={dateRange}
           onSelect={(val: DateRange | undefined) => {
             onSelect?.(val);
@@ -274,7 +275,7 @@ export const DateRangeDropdown = observer(function DateRangeDropdown(props: Prop
           showOutsideDays
           fixedWeeks
           weekStartsOn={startOfWeek}
-          initialFocus
+          autoFocus
         />
       </div>
     </Combobox.Options>
diff --git a/apps/web/core/components/dropdowns/date.tsx b/apps/web/core/components/dropdowns/date.tsx
index 2deffeba084..2eed600439f 100644
--- a/apps/web/core/components/dropdowns/date.tsx
+++ b/apps/web/core/components/dropdowns/date.tsx
@@ -11,9 +11,8 @@ import { usePopper } from "react-popper";
 import { CalendarOutline, CloseOutline } from "@makeplane/propel/icons";
 import { Combobox } from "@headlessui/react";
 // ui
-import type { Matcher } from "@plane/propel/calendar";
-import { Calendar } from "@plane/propel/calendar";
-import { ComboDropDown } from "@plane/ui";
+import { Calendar } from "@makeplane/propel/components/calendar";
+import { ComboDropDown } from "@plane/blocks/dropdowns";
 import { cn, renderFormattedDate, getDate } from "@plane/utils";
 // helpers
 // hooks
@@ -26,6 +25,9 @@ import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
 // types
 import type { TDropdownProps } from "./types";
 
+// react-day-picker matcher subset used to disable days outside the min/max range
+type Matcher = { before: Date } | { after: Date };
+
 type Props = TDropdownProps & {
   clearIconClassName?: string;
   defaultOpen?: boolean;
@@ -191,15 +193,13 @@ export const DateDropdown = observer(function DateDropdown(props: Props) {
               {...attributes.popper}
             >
               <Calendar
-                className="rounded-md border border-subtle p-3"
-                captionLayout="dropdown"
                 selected={getDate(value)}
                 defaultMonth={getDate(value)}
                 onSelect={(date: Date | undefined) => {
                   dropdownOnChange(date ?? null);
                 }}
                 showOutsideDays
-                initialFocus
+                autoFocus
                 disabled={disabledDays}
                 mode="single"
                 fixedWeeks
diff --git a/apps/web/core/components/dropdowns/estimate.tsx b/apps/web/core/components/dropdowns/estimate.tsx
index be37908e139..3befaae6ead 100644
--- a/apps/web/core/components/dropdowns/estimate.tsx
+++ b/apps/web/core/components/dropdowns/estimate.tsx
@@ -14,7 +14,7 @@ import { Combobox } from "@headlessui/react";
 import { useTranslation } from "@plane/i18n";
 import { ChevronDownOutline, EstimateOutline, SearchOutline, TickOutline } from "@makeplane/propel/icons";
 import { EEstimateSystem } from "@plane/types";
-import { ComboDropDown } from "@plane/ui";
+import { ComboDropDown } from "@plane/blocks/dropdowns";
 import { convertMinutesToHoursMinutesString, cn } from "@plane/utils";
 // hooks
 import { useProjectEstimates } from "@/hooks/store/estimates";
diff --git a/apps/web/core/components/dropdowns/intake-state/base.tsx b/apps/web/core/components/dropdowns/intake-state/base.tsx
index 8f11176d024..2290e321460 100644
--- a/apps/web/core/components/dropdowns/intake-state/base.tsx
+++ b/apps/web/core/components/dropdowns/intake-state/base.tsx
@@ -11,10 +11,11 @@ import { usePopper } from "react-popper";
 import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { IntakeStateGroupIcon } from "@plane/propel/icons";
+import { IntakeStateGroupIcon } from "@plane/blocks/icons";
 import { ChevronDownOutline, SearchOutline } from "@makeplane/propel/icons";
 import type { IIntakeState } from "@plane/types";
-import { ComboDropDown, Spinner } from "@plane/ui";
+import { ComboDropDown } from "@plane/blocks/dropdowns";
+import { Spinner } from "@plane/blocks/spinner";
 import { cn } from "@plane/utils";
 // components
 import { DropdownButton } from "@/components/dropdowns/buttons";
diff --git a/apps/web/core/components/dropdowns/layout.tsx b/apps/web/core/components/dropdowns/layout.tsx
index 8695f2adc00..d380621e5eb 100644
--- a/apps/web/core/components/dropdowns/layout.tsx
+++ b/apps/web/core/components/dropdowns/layout.tsx
@@ -11,8 +11,8 @@ import { ISSUE_LAYOUT_MAP } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { TickOutline } from "@makeplane/propel/icons";
 import { EIssueLayoutTypes } from "@plane/types";
-import { getButtonStyling } from "@plane/propel/button";
-import { Dropdown } from "@plane/ui";
+import { Button } from "@makeplane/propel/elements/button";
+import { Dropdown } from "@plane/blocks/dropdowns";
 import { cn } from "@plane/utils";
 // components
 import { IssueLayoutIcon } from "@/components/issues/issue-layouts/layout-icon";
@@ -45,10 +45,12 @@ export const LayoutDropDown = observer(function LayoutDropDown(props: TLayoutDro
   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>
+      <Button variant="secondary" size="md" stretch="auto" render={<div />}>
+        <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>
+      </Button>
     );
   }, []);
 
@@ -74,7 +76,6 @@ export const LayoutDropDown = observer(function LayoutDropDown(props: TLayoutDro
       value={value?.toString()}
       keyExtractor={keyExtractor}
       options={options}
-      buttonContainerClassName={cn(getButtonStyling("secondary", "lg"))}
       buttonContent={buttonContent}
       renderItem={itemContent}
       disableSearch
diff --git a/apps/web/core/components/dropdowns/member/base.tsx b/apps/web/core/components/dropdowns/member/base.tsx
index 7a8e9d7ca8f..4abcd1ade90 100644
--- a/apps/web/core/components/dropdowns/member/base.tsx
+++ b/apps/web/core/components/dropdowns/member/base.tsx
@@ -11,7 +11,7 @@ import { useTranslation } from "@plane/i18n";
 import { ChevronDownOutline } from "@makeplane/propel/icons";
 // plane imports
 import type { IUserLite } from "@plane/types";
-import { ComboDropDown } from "@plane/ui";
+import { ComboDropDown } from "@plane/blocks/dropdowns";
 // helpers
 import { cn } from "@plane/utils";
 // hooks
diff --git a/apps/web/core/components/dropdowns/member/member-options.tsx b/apps/web/core/components/dropdowns/member/member-options.tsx
index 987aac87840..6e89682a8c3 100644
--- a/apps/web/core/components/dropdowns/member/member-options.tsx
+++ b/apps/web/core/components/dropdowns/member/member-options.tsx
@@ -15,7 +15,7 @@ import { Combobox } from "@headlessui/react";
 import { Avatar } from "@makeplane/propel/components/avatar";
 import { useTranslation } from "@plane/i18n";
 import { DeactivatedUserOutline, SearchOutline, TickOutline } from "@makeplane/propel/icons";
-import { EPillSize, EPillVariant, Pill } from "@plane/propel/pill";
+import { Badge } from "@makeplane/propel/components/badge";
 import type { IUserLite } from "@plane/types";
 import { cn, getFileURL, sortByCurrentUserThenSelected } from "@plane/utils";
 // hooks
@@ -183,9 +183,7 @@ export const MemberOptions = observer(function MemberOptions(props: Props) {
                           <span className="flex-grow truncate">{option.content}</span>
                           {selected && <TickOutline className="h-3.5 w-3.5 flex-shrink-0" />}
                           {isUserSuspended(option.value, workspaceSlug?.toString()) && (
-                            <Pill variant={EPillVariant.DEFAULT} size={EPillSize.XS} className="border-none">
-                              Suspended
-                            </Pill>
+                            <Badge variant="neutral" size="xs" label="Suspended" />
                           )}
                         </>
                       )}
diff --git a/apps/web/core/components/dropdowns/module/base.tsx b/apps/web/core/components/dropdowns/module/base.tsx
index 19e0e646121..37f7c3aa9c1 100644
--- a/apps/web/core/components/dropdowns/module/base.tsx
+++ b/apps/web/core/components/dropdowns/module/base.tsx
@@ -10,7 +10,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import type { IModule } from "@plane/types";
-import { ComboDropDown } from "@plane/ui";
+import { ComboDropDown } from "@plane/blocks/dropdowns";
 import { cn } from "@plane/utils";
 // hooks
 import { useDropdown } from "@/hooks/use-dropdown";
diff --git a/apps/web/core/components/dropdowns/priority.tsx b/apps/web/core/components/dropdowns/priority.tsx
index 28c252a8376..7ecf72013ba 100644
--- a/apps/web/core/components/dropdowns/priority.tsx
+++ b/apps/web/core/components/dropdowns/priority.tsx
@@ -12,12 +12,12 @@ import { Combobox } from "@headlessui/react";
 import { ISSUE_PRIORITIES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // types
-import { PriorityIcon } from "@plane/propel/icons";
+import { PriorityIcon } from "@plane/blocks/icons";
 import { ChevronDownOutline, SearchOutline, TickOutline } from "@makeplane/propel/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { TIssuePriorities } from "@plane/types";
 // ui
-import { ComboDropDown } from "@plane/ui";
+import { ComboDropDown } from "@plane/blocks/dropdowns";
 // helpers
 import { cn } from "@plane/utils";
 // hooks
diff --git a/apps/web/core/components/dropdowns/project/base.tsx b/apps/web/core/components/dropdowns/project/base.tsx
index 064b19236ab..0c34aae143e 100644
--- a/apps/web/core/components/dropdowns/project/base.tsx
+++ b/apps/web/core/components/dropdowns/project/base.tsx
@@ -11,9 +11,9 @@ import { usePopper } from "react-popper";
 import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Logo } from "@plane/propel/emoji-icon-picker";
+import { Logo } from "@plane/blocks/emoji-icon-picker";
 import { ChevronDownOutline, ProjectsOutline, SearchOutline, TickOutline } from "@makeplane/propel/icons";
-import { ComboDropDown } from "@plane/ui";
+import { ComboDropDown } from "@plane/blocks/dropdowns";
 import { cn, sortBySelectedFirst } from "@plane/utils";
 // components
 // hooks
diff --git a/apps/web/core/components/dropdowns/state/base.tsx b/apps/web/core/components/dropdowns/state/base.tsx
index 19570dcd9fa..04c11d25414 100644
--- a/apps/web/core/components/dropdowns/state/base.tsx
+++ b/apps/web/core/components/dropdowns/state/base.tsx
@@ -11,10 +11,11 @@ import { usePopper } from "react-popper";
 import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { StateGroupIcon } from "@plane/propel/icons";
+import { StateGroupIcon } from "@plane/blocks/icons";
 import { ChevronDownOutline, SearchOutline } from "@makeplane/propel/icons";
 import type { IState } from "@plane/types";
-import { ComboDropDown, Spinner } from "@plane/ui";
+import { ComboDropDown } from "@plane/blocks/dropdowns";
+import { Spinner } from "@plane/blocks/spinner";
 import { cn } from "@plane/utils";
 // components
 import { DropdownButton } from "@/components/dropdowns/buttons";
diff --git a/apps/web/core/components/editor/embeds/mentions/user.tsx b/apps/web/core/components/editor/embeds/mentions/user.tsx
index 7264570c660..396867141df 100644
--- a/apps/web/core/components/editor/embeds/mentions/user.tsx
+++ b/apps/web/core/components/editor/embeds/mentions/user.tsx
@@ -10,7 +10,7 @@ import { Link } from "react-router";
 // plane imports
 import { Avatar } from "@makeplane/propel/components/avatar";
 import { ROLE } from "@plane/constants";
-import { Popover } from "@plane/propel/popover";
+import { Popover, PopoverContent, PopoverTrigger } from "@makeplane/propel/components/popover";
 import { cn, getFileURL } from "@plane/utils";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
@@ -54,11 +54,9 @@ export const EditorUserMention = observer(function EditorUserMention(props: Prop
         }
       )}
     >
-      <Popover delay={100} openOnHover>
-        <Popover.Button>
-          <Link to={profileLink}>@{userDetails?.display_name}</Link>
-        </Popover.Button>
-        <Popover.Panel side="bottom" align="start">
+      <Popover>
+        <PopoverTrigger openOnHover delay={100} render={<Link to={profileLink}>@{userDetails?.display_name}</Link>} />
+        <PopoverContent side="bottom" align="start" sideOffset={8}>
           <div className="w-60 rounded-lg border-[0.5px] border-strong bg-surface-1 p-3 shadow-raised-200">
             <div className="flex items-center gap-3">
               <div className="grid size-10 flex-shrink-0 place-items-center">
@@ -77,7 +75,7 @@ export const EditorUserMention = observer(function EditorUserMention(props: Prop
               </div>
             </div>
           </div>
-        </Popover.Panel>
+        </PopoverContent>
       </Popover>
     </div>
   );
diff --git a/apps/web/core/components/editor/lite-text/toolbar.tsx b/apps/web/core/components/editor/lite-text/toolbar.tsx
index e67e2fc55ba..9dae6b9966e 100644
--- a/apps/web/core/components/editor/lite-text/toolbar.tsx
+++ b/apps/web/core/components/editor/lite-text/toolbar.tsx
@@ -13,9 +13,9 @@ 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 { GlobeOutline, LockOutline } from "@makeplane/propel/icons";
-import type { ISvgIcons } from "@plane/propel/icons";
+import type { ISvgIcons } from "@plane/blocks/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 // constants
 import { cn } from "@plane/utils";
@@ -172,13 +172,14 @@ export function IssueCommentToolbar(props: Props) {
             <Button
               type="submit"
               variant="primary"
-              className="px-2.5 py-1.5 text-11"
+              size="sm"
+              stretch="auto"
+              label={t(submitButtonText)}
+              render={<button className="px-2.5 py-1.5 text-11" />}
               onClick={handleSubmit}
               disabled={isSubmitButtonDisabled}
               loading={isSubmitting}
-            >
-              {t(submitButtonText)}
-            </Button>
+            />
           </div>
         )}
       </div>
diff --git a/apps/web/core/components/editor/rich-text/description-input/loader.tsx b/apps/web/core/components/editor/rich-text/description-input/loader.tsx
index 8be09783740..4259e552b9c 100644
--- a/apps/web/core/components/editor/rich-text/description-input/loader.tsx
+++ b/apps/web/core/components/editor/rich-text/description-input/loader.tsx
@@ -5,7 +5,7 @@
  */
 
 // plane imports
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 import { cn } from "@plane/utils";
 
 type Props = {
diff --git a/apps/web/core/components/editor/rich-text/description-input/root.tsx b/apps/web/core/components/editor/rich-text/description-input/root.tsx
index ac2a39bebdc..6475903721e 100644
--- a/apps/web/core/components/editor/rich-text/description-input/root.tsx
+++ b/apps/web/core/components/editor/rich-text/description-input/root.tsx
@@ -274,7 +274,7 @@ export const DescriptionInput = observer(function DescriptionInput(props: Props)
               return asset_id;
             } catch (error) {
               console.log("Error in uploading asset:", error);
-              throw new Error("Asset upload failed. Please try again later.");
+              throw new Error("Asset upload failed. Please try again later.", { cause: error });
             }
           }}
           duplicateFile={async (assetId: string) => {
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 222e0531f84..b8fa0c5efc3 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/elements/button";
 
 type Props = {
   label: string;
@@ -49,7 +49,14 @@ 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}>
+        <Button
+          variant="primary"
+          size="md"
+          stretch="auto"
+          ref={setReferenceElement}
+          onClick={onClick}
+          disabled={disabled}
+        >
           {icon}
           <span className="leading-4">{label}</span>
           <span className="relative h-2 w-2">
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 593e5adda74..2dcaf25dd7a 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,8 @@
 import React from "react";
 import { observer } from "mobx-react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
+import { Icon } from "@makeplane/propel/components/icon";
 // utils
 import { cn } from "@plane/utils";
 
@@ -39,6 +40,12 @@ const sizeClasses = {
   lg: "md:min-w-[30rem] max-w-[60rem]",
 } as const;
 
+const buttonSizes = {
+  sm: "xs",
+  base: "sm",
+  lg: "md",
+} as const;
+
 function CustomButton({
   config,
   variant,
@@ -51,14 +58,20 @@ function CustomButton({
   return (
     <Button
       variant={variant}
-      size={size}
+      size={buttonSizes[size]}
+      stretch="auto"
+      label={config.text}
       onClick={config.onClick}
-      prependIcon={config.prependIcon}
-      appendIcon={config.appendIcon}
+      icon={
+        config.appendIcon ? (
+          <Icon icon={config.appendIcon} />
+        ) : config.prependIcon ? (
+          <Icon icon={config.prependIcon} />
+        ) : undefined
+      }
+      iconPosition={config.appendIcon && !config.prependIcon ? "end" : "start"}
       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 2ef7ce6f2c5..7653d838c84 100644
--- a/apps/web/core/components/estimates/create/modal.tsx
+++ b/apps/web/core/components/estimates/create/modal.tsx
@@ -9,11 +9,11 @@ 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 { ChevronLeftOutline } from "@makeplane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IEstimateFormData, TEstimateSystemKeys, TEstimatePointsObject, TEstimateTypeError } from "@plane/types";
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // hooks
 import { useProjectEstimates } from "@/hooks/store/estimates";
 // local imports
@@ -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"
+            onClick={handleClose}
+            disabled={buttonLoader}
+            label={t("common.cancel")}
+          />
           {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"
+              onClick={handleCreateEstimate}
+              disabled={buttonLoader}
+              label={buttonLoader ? t("common.creating") : t("project_settings.estimates.create.label")}
+            />
           )}
         </div>
       </div>
diff --git a/apps/web/core/components/estimates/delete/modal.tsx b/apps/web/core/components/estimates/delete/modal.tsx
index e6b39fcdec2..f56d14e52a3 100644
--- a/apps/web/core/components/estimates/delete/modal.tsx
+++ b/apps/web/core/components/estimates/delete/modal.tsx
@@ -7,9 +7,9 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 // ui
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // hooks
 import { useProjectEstimates } from "@/hooks/store/estimates";
 import { useEstimate } from "@/hooks/store/estimates/use-estimate";
@@ -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"
+            onClick={handleClose}
+            disabled={buttonLoader}
+            label="Cancel"
+          />
+          <Button
+            variant="danger"
+            size="md"
+            stretch="auto"
+            onClick={handleDeleteEstimate}
+            disabled={buttonLoader}
+            label={buttonLoader ? "Deleting" : "Delete Estimate"}
+          />
         </div>
       </div>
     </ModalCore>
diff --git a/apps/web/core/components/estimates/estimate-disable-switch.tsx b/apps/web/core/components/estimates/estimate-disable-switch.tsx
index dbe77908ef5..805a9bd4ffd 100644
--- a/apps/web/core/components/estimates/estimate-disable-switch.tsx
+++ b/apps/web/core/components/estimates/estimate-disable-switch.tsx
@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { Switch } from "@makeplane/propel/components/switch";
 // hooks
 import { useProjectEstimates } from "@/hooks/store/estimates";
diff --git a/apps/web/core/components/estimates/loader-screen.tsx b/apps/web/core/components/estimates/loader-screen.tsx
index d858df1d971..22d41ee10cb 100644
--- a/apps/web/core/components/estimates/loader-screen.tsx
+++ b/apps/web/core/components/estimates/loader-screen.tsx
@@ -4,7 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 
 export function EstimateLoaderScreen() {
   return (
diff --git a/apps/web/core/components/estimates/points/create-root.tsx b/apps/web/core/components/estimates/points/create-root.tsx
index ab3e984339e..b41f08d4bca 100644
--- a/apps/web/core/components/estimates/points/create-root.tsx
+++ b/apps/web/core/components/estimates/points/create-root.tsx
@@ -9,10 +9,11 @@ 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 { Icon } from "@makeplane/propel/components/icon";
 import { AddOutline } from "@makeplane/propel/icons";
 import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeError } from "@plane/types";
-import { Sortable } from "@plane/ui";
+import { Sortable } from "@plane/blocks/sortable";
 // local imports
 import { EstimatePointCreate } from "./create";
 import { EstimatePointItemPreview } from "./preview";
@@ -171,9 +172,16 @@ export const EstimatePointCreateRoot = observer(function EstimatePointCreateRoot
           />
         ))}
       {estimatePoints && estimatePoints.length + (estimatePointCreate?.length || 0) <= estimateCount.max - 1 && (
-        <Button variant="link" prependIcon={<AddOutline />} onClick={handleCreate}>
-          Add {estimateType}
-        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          stretch="auto"
+          label={`Add ${estimateType}`}
+          icon={<Icon icon={AddOutline} />}
+          iconPosition="start"
+          onClick={handleCreate}
+          render={<button className="px-0 text-link-primary underline" />}
+        />
       )}
     </div>
   );
diff --git a/apps/web/core/components/estimates/points/create.tsx b/apps/web/core/components/estimates/points/create.tsx
index cc81a86a1ab..107945c0017 100644
--- a/apps/web/core/components/estimates/points/create.tsx
+++ b/apps/web/core/components/estimates/points/create.tsx
@@ -10,10 +10,10 @@ import { observer } from "mobx-react";
 import { CloseOutline, InfoOutline, TickOutline } from "@makeplane/propel/icons";
 import { EEstimateSystem, MAX_ESTIMATE_POINT_INPUT_LENGTH } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeErrorObject } from "@plane/types";
-import { Spinner } from "@plane/ui";
+import { Spinner } from "@plane/blocks/spinner";
 import { cn, isEstimatePointValuesRepeated } from "@plane/utils";
 import { EstimateInputRoot } from "@/components/estimates/inputs/root";
 // helpers
diff --git a/apps/web/core/components/estimates/points/update.tsx b/apps/web/core/components/estimates/points/update.tsx
index 593c0232166..24e821964fe 100644
--- a/apps/web/core/components/estimates/points/update.tsx
+++ b/apps/web/core/components/estimates/points/update.tsx
@@ -10,10 +10,10 @@ import { observer } from "mobx-react";
 import { CloseOutline, InfoOutline, TickOutline } from "@makeplane/propel/icons";
 import { EEstimateSystem, MAX_ESTIMATE_POINT_INPUT_LENGTH } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeErrorObject } from "@plane/types";
-import { Spinner } from "@plane/ui";
+import { Spinner } from "@plane/blocks/spinner";
 import { cn, isEstimatePointValuesRepeated } from "@plane/utils";
 import { EstimateInputRoot } from "@/components/estimates/inputs/root";
 // helpers
diff --git a/apps/web/core/components/estimates/root.tsx b/apps/web/core/components/estimates/root.tsx
index 036fa1a8ff0..7c71bee145e 100644
--- a/apps/web/core/components/estimates/root.tsx
+++ b/apps/web/core/components/estimates/root.tsx
@@ -13,7 +13,7 @@ import { useTranslation } from "@plane/i18n";
 import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
 import { SettingsHeading } from "@/components/settings/heading";
 // hooks
-import { EmptyStateCompact } from "@plane/propel/empty-state";
+import { EmptyStateCompact } from "@plane/blocks/empty-state";
 import { useProjectEstimates } from "@/hooks/store/estimates";
 import { useProject } from "@/hooks/store/use-project";
 // local imports
diff --git a/apps/web/core/components/exporter/export-form.tsx b/apps/web/core/components/exporter/export-form.tsx
index da05c85c2b8..8820947d888 100644
--- a/apps/web/core/components/exporter/export-form.tsx
+++ b/apps/web/core/components/exporter/export-form.tsx
@@ -16,12 +16,12 @@ import {
   // ISSUE_DISPLAY_FILTERS_BY_PAGE,
 } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 // import { Tooltip } from "@makeplane/propel/components/tooltip";
 // import { EIssuesStoreType } from "@plane/types";
 import type { TWorkItemFilterExpression } from "@plane/types";
-import { CustomSearchSelect, CustomSelect } from "@plane/ui";
+import { CustomSearchSelect, CustomSelect } from "@plane/blocks/dropdowns";
 // import { WorkspaceLevelWorkItemFiltersHOC } from "@/components/work-item-filters/filters-hoc/workspace-level";
 // import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
 import { useProject } from "@/hooks/store/use-project";
@@ -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"
+            type="submit"
+            loading={exportLoading}
+            label={exportLoading ? `${t("workspace_settings.settings.exports.exporting")}...` : t("export")}
+          />
         </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 7ca85bca085..bf68b3973f3 100644
--- a/apps/web/core/components/exporter/export-modal.tsx
+++ b/apps/web/core/components/exporter/export-modal.tsx
@@ -10,12 +10,13 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // types
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IUser, IImporterService } from "@plane/types";
 // ui
 import { Checkbox } from "@makeplane/propel/components/checkbox";
-import { CustomSearchSelect, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { CustomSearchSelect } from "@plane/blocks/dropdowns";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 import { useUser } from "@/hooks/store/user";
@@ -153,14 +154,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" onClick={handleClose} label={t("cancel")} />
+          <Button
+            variant="primary"
+            size="sm"
+            stretch="auto"
+            onClick={ExportCSVToMail}
+            disabled={exportLoading}
+            loading={exportLoading}
+            label={
+              exportLoading
+                ? `${t("workspace_settings.settings.exports.exporting")}...`
+                : t("workspace_settings.settings.exports.title")
+            }
+          />
         </div>
       </div>
     </ModalCore>
diff --git a/apps/web/core/components/exporter/prev-exports.tsx b/apps/web/core/components/exporter/prev-exports.tsx
index 088881a0741..a88359304ca 100644
--- a/apps/web/core/components/exporter/prev-exports.tsx
+++ b/apps/web/core/components/exporter/prev-exports.tsx
@@ -10,10 +10,12 @@ import useSWR, { mutate } from "swr";
 import { ArrowNarrowLeftOutline, ArrowNarrowRightOutline, RefreshOutline } from "@makeplane/propel/icons";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { EmptyStateCompact } from "@plane/propel/empty-state";
+import { Button } from "@makeplane/propel/components/button";
+import { Button as ButtonElement } from "@makeplane/propel/elements/button";
+import { Icon } from "@makeplane/propel/components/icon";
+import { EmptyStateCompact } from "@plane/blocks/empty-state";
 import type { IExportData } from "@plane/types";
-import { Table } from "@plane/ui";
+import { Table } from "@plane/blocks/tables";
 // components
 import { ImportExportSettingsLoader } from "@/components/ui/loader/settings/import-and-export";
 // constants
@@ -78,31 +80,39 @@ 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}>
+          <ButtonElement
+            variant="tertiary"
+            size="sm"
+            stretch="auto"
+            onClick={handleRefresh}
+            render={<button type="button" className="shrink-0" />}
+          >
             <RefreshOutline className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />
             {refreshing ? t("refreshing") : t("refresh_status")}
-          </Button>
+          </ButtonElement>
         </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"
               disabled={!exporterServices?.prev_page_results}
               onClick={() => exporterServices?.prev_page_results && setCursor(exporterServices?.prev_cursor)}
-              prependIcon={<ArrowNarrowLeftOutline />}
-            >
-              {t("prev")}
-            </Button>
+              icon={<Icon icon={ArrowNarrowLeftOutline} />}
+              iconPosition="start"
+              label={t("prev")}
+            />
             <Button
               variant="secondary"
-              size="sm"
+              size="xs"
+              stretch="auto"
               disabled={!exporterServices?.next_page_results}
               onClick={() => exporterServices?.next_page_results && setCursor(exporterServices?.next_cursor)}
-              appendIcon={<ArrowNarrowRightOutline />}
-            >
-              {t("next")}
-            </Button>
+              icon={<Icon icon={ArrowNarrowRightOutline} />}
+              iconPosition="end"
+              label={t("next")}
+            />
           </div>
         )}
       </div>
diff --git a/apps/web/core/components/exporter/single-export.tsx b/apps/web/core/components/exporter/single-export.tsx
index 8bd05281e93..9f67e196c7e 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/gantt-chart/chart/header.tsx b/apps/web/core/components/gantt-chart/chart/header.tsx
index 9fcd7cf322a..9f8beb35c87 100644
--- a/apps/web/core/components/gantt-chart/chart/header.tsx
+++ b/apps/web/core/components/gantt-chart/chart/header.tsx
@@ -9,7 +9,7 @@ import { ArrowCollapseOutline, FullScreenOutline } from "@makeplane/propel/icons
 import { useTranslation } from "@plane/i18n";
 // plane
 import type { TGanttViews } from "@plane/types";
-import { Row } from "@plane/ui";
+import { Row } from "@plane/blocks/row";
 // components
 import { cn } from "@plane/utils";
 import { VIEWS_LIST } from "@/components/gantt-chart/data";
diff --git a/apps/web/core/components/gantt-chart/helpers/blockResizables/use-gantt-resizable.ts b/apps/web/core/components/gantt-chart/helpers/blockResizables/use-gantt-resizable.ts
index cb52f14ba56..96335eeb2fd 100644
--- a/apps/web/core/components/gantt-chart/helpers/blockResizables/use-gantt-resizable.ts
+++ b/apps/web/core/components/gantt-chart/helpers/blockResizables/use-gantt-resizable.ts
@@ -6,7 +6,7 @@
 
 import { useRef, useState } from "react";
 // Plane
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IBlockUpdateDependencyData, IGanttBlock } from "@plane/types";
 // hooks
 import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
diff --git a/apps/web/core/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx b/apps/web/core/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx
index fe4bf0bc5e5..feeb67091a9 100644
--- a/apps/web/core/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx
@@ -10,8 +10,8 @@ import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-d
 import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import { observer } from "mobx-react";
 import { useOutsideClickDetector } from "@plane/hooks";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { DropIndicator } from "@plane/ui";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
+import { DropIndicator } from "@plane/blocks/sortable";
 import { HIGHLIGHT_WITH_LINE, highlightIssueOnDrop } from "@/components/issues/issue-layouts/utils";
 
 type Props = {
@@ -94,7 +94,7 @@ export const GanttDnDHOC = observer(function GanttDnDHOC(props: Props) {
         },
       })
     );
-  }, [blockRef?.current, isLastChild, onDrop]);
+  }, [isLastChild, onDrop]);
 
   useOutsideClickDetector(blockRef, () => blockRef?.current?.classList?.remove(HIGHLIGHT_WITH_LINE));
 
diff --git a/apps/web/core/components/gantt-chart/sidebar/issues/block.tsx b/apps/web/core/components/gantt-chart/sidebar/issues/block.tsx
index e7b4f279a37..651f106de6e 100644
--- a/apps/web/core/components/gantt-chart/sidebar/issues/block.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/issues/block.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 // plane imports
 import type { IGanttBlock } from "@plane/types";
-import { Row } from "@plane/ui";
+import { Row } from "@plane/blocks/row";
 import { cn } from "@plane/utils";
 // components
 import { MultipleSelectEntityAction } from "@/components/core/multiple-select";
diff --git a/apps/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx b/apps/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
index 7178f054769..0b37fab630e 100644
--- a/apps/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
@@ -10,7 +10,7 @@ import { observer } from "mobx-react";
 // ui
 import { GANTT_TIMELINE_TYPE } from "@plane/types";
 import type { IBlockUpdateData } from "@plane/types";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // components
 import RenderIfVisible from "@/components/core/render-if-visible-HOC";
 import { GanttLayoutListItemLoader } from "@/components/ui/loader/layouts/gantt-layout-loader";
diff --git a/apps/web/core/components/gantt-chart/sidebar/modules/block.tsx b/apps/web/core/components/gantt-chart/sidebar/modules/block.tsx
index 78ec85453e8..cc61def7a2f 100644
--- a/apps/web/core/components/gantt-chart/sidebar/modules/block.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/modules/block.tsx
@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 // Plane
-import { Row } from "@plane/ui";
+import { Row } from "@plane/blocks/row";
 // components
 import { cn } from "@plane/utils";
 import { BLOCK_HEIGHT } from "@/components/gantt-chart/constants";
diff --git a/apps/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx b/apps/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
index 0bfaa7c80b5..8e8d20a9a0e 100644
--- a/apps/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // ui
 import { GANTT_TIMELINE_TYPE } from "@plane/types";
 import type { IBlockUpdateData } from "@plane/types";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // components
 // hooks
 import { useTimeLineChart } from "@/hooks/use-timeline-chart";
diff --git a/apps/web/core/components/gantt-chart/sidebar/root.tsx b/apps/web/core/components/gantt-chart/sidebar/root.tsx
index 6d55bb3f049..cfc923ab56e 100644
--- a/apps/web/core/components/gantt-chart/sidebar/root.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/root.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 // components
 import type { IBlockUpdateData } from "@plane/types";
-import { Row, ERowVariant } from "@plane/ui";
+import { Row, ERowVariant } from "@plane/blocks/row";
 import { cn } from "@plane/utils";
 import { MultipleSelectGroupAction } from "@/components/core/multiple-select";
 // helpers
diff --git a/apps/web/core/components/global/product-updates/changelog.tsx b/apps/web/core/components/global/product-updates/changelog.tsx
index cfddb2af4f2..4dcf7a7492a 100644
--- a/apps/web/core/components/global/product-updates/changelog.tsx
+++ b/apps/web/core/components/global/product-updates/changelog.tsx
@@ -7,7 +7,7 @@
 import { useState, useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 // hooks
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 import { ProductUpdatesFallback } from "@/components/global/product-updates/fallback";
 import { useInstance } from "@/hooks/store/use-instance";
 
diff --git a/apps/web/core/components/global/product-updates/fallback.tsx b/apps/web/core/components/global/product-updates/fallback.tsx
index 57ed75f9583..56ff87d1e4a 100644
--- a/apps/web/core/components/global/product-updates/fallback.tsx
+++ b/apps/web/core/components/global/product-updates/fallback.tsx
@@ -4,7 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { EmptyStateDetailed } from "@plane/blocks/empty-state";
 
 type TProductUpdatesFallbackProps = {
   description: string;
diff --git a/apps/web/core/components/global/product-updates/footer.tsx b/apps/web/core/components/global/product-updates/footer.tsx
index 09965aac3e3..0713542dd11 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 { PlaneLogo } from "@plane/propel/icons";
-// helpers
-import { cn } from "@plane/utils";
+import { Button } from "@makeplane/propel/elements/button";
+import { PlaneLogo } from "@plane/blocks/icons";
 
 export function ProductUpdatesFooter() {
   const { t } = useTranslation();
@@ -58,18 +56,22 @@ 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"
+      <Button
+        variant="secondary"
+        size="sm"
+        stretch="auto"
+        render={
+          <a
+            href="https://plane.so/pages"
+            target="_blank"
+            className="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>
     </div>
   );
 }
diff --git a/apps/web/core/components/global/product-updates/modal.tsx b/apps/web/core/components/global/product-updates/modal.tsx
index 44100facb58..0cdb62b5707 100644
--- a/apps/web/core/components/global/product-updates/modal.tsx
+++ b/apps/web/core/components/global/product-updates/modal.tsx
@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 // ui
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // components
 import { ProductUpdatesFooter } from "@/components/global";
 // plane web components
diff --git a/apps/web/core/components/global/timezone-select.tsx b/apps/web/core/components/global/timezone-select.tsx
index a4d692a5574..2a2d826b987 100644
--- a/apps/web/core/components/global/timezone-select.tsx
+++ b/apps/web/core/components/global/timezone-select.tsx
@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 // plane imports
-import { CustomSearchSelect } from "@plane/ui";
+import { CustomSearchSelect } from "@plane/blocks/dropdowns";
 import { cn } from "@plane/utils";
 // hooks
 import useTimezone from "@/hooks/use-timezone";
diff --git a/apps/web/core/components/home/root.tsx b/apps/web/core/components/home/root.tsx
index e01028f8f97..f57623192c1 100644
--- a/apps/web/core/components/home/root.tsx
+++ b/apps/web/core/components/home/root.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane imports
-import { ContentWrapper } from "@plane/ui";
+import { ContentWrapper } from "@plane/blocks/content-wrapper";
 // hooks
 import { useHome } from "@/hooks/store/use-home";
 import { useUserProfile, useUser } from "@/hooks/store/user";
diff --git a/apps/web/core/components/home/widgets/empty-states/links.tsx b/apps/web/core/components/home/widgets/empty-states/links.tsx
index bd0350c6923..c5ae347e8c6 100644
--- a/apps/web/core/components/home/widgets/empty-states/links.tsx
+++ b/apps/web/core/components/home/widgets/empty-states/links.tsx
@@ -5,7 +5,7 @@
  */
 
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateCompact } from "@plane/propel/empty-state";
+import { EmptyStateCompact } from "@plane/blocks/empty-state";
 
 export function LinksEmptyState() {
   const { t } = useTranslation();
diff --git a/apps/web/core/components/home/widgets/empty-states/recents.tsx b/apps/web/core/components/home/widgets/empty-states/recents.tsx
index 0b219f60f86..f6c4d6f1b0f 100644
--- a/apps/web/core/components/home/widgets/empty-states/recents.tsx
+++ b/apps/web/core/components/home/widgets/empty-states/recents.tsx
@@ -5,8 +5,8 @@
  */
 
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateCompact } from "@plane/propel/empty-state";
-import type { CompactAssetType } from "@plane/propel/empty-state";
+import { EmptyStateCompact } from "@plane/blocks/empty-state";
+import type { CompactAssetType } from "@plane/blocks/empty-state";
 
 const getDisplayContent = (type: string): { assetKey: CompactAssetType; text: string } => {
   switch (type) {
diff --git a/apps/web/core/components/home/widgets/empty-states/stickies.tsx b/apps/web/core/components/home/widgets/empty-states/stickies.tsx
index d8798dc4f52..6f661533f9c 100644
--- a/apps/web/core/components/home/widgets/empty-states/stickies.tsx
+++ b/apps/web/core/components/home/widgets/empty-states/stickies.tsx
@@ -5,7 +5,7 @@
  */
 
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateCompact } from "@plane/propel/empty-state";
+import { EmptyStateCompact } from "@plane/blocks/empty-state";
 
 export function StickiesEmptyState() {
   const { t } = useTranslation();
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 e79933fa7a5..448bda5c64d 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
@@ -12,9 +12,9 @@ import { Controller, useForm } from "react-hook-form";
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 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 { ModalCore } from "@plane/ui";
+import { ModalCore } from "@plane/blocks/modals";
 import type { TLinkOperations } from "./use-links";
 
 export type TLinkOperationsModal = Exclude<TLinkOperations, "remove">;
@@ -134,13 +134,17 @@ 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" onClick={onClose} label={t("Cancel")} />
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            type="submit"
+            loading={isSubmitting}
+            label={`${
+              preloadedData?.id ? (isSubmitting ? t("updating") : t("update")) : isSubmitting ? t("adding") : t("add")
+            } ${t("home.quick_links.title")}`}
+          />
         </div>
       </form>
     </ModalCore>
diff --git a/apps/web/core/components/home/widgets/links/link-detail.tsx b/apps/web/core/components/home/widgets/links/link-detail.tsx
index 23918166421..bbae5a5ec1a 100644
--- a/apps/web/core/components/home/widgets/links/link-detail.tsx
+++ b/apps/web/core/components/home/widgets/links/link-detail.tsx
@@ -9,9 +9,9 @@ import { observer } from "mobx-react";
 
 import { useTranslation } from "@plane/i18n";
 import { DeleteOutline, EditOutline, LinkOutline, NewTabOutline } from "@makeplane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { TContextMenuItem } from "@plane/ui";
-import { LinkItemBlock } from "@plane/ui";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
+import type { TContextMenuItem } from "@plane/blocks/dropdowns";
+import { LinkItemBlock } from "@plane/blocks/link";
 // plane utils
 import { copyTextToClipboard } from "@plane/utils";
 // hooks
diff --git a/apps/web/core/components/home/widgets/links/use-links.tsx b/apps/web/core/components/home/widgets/links/use-links.tsx
index 72da254219e..39f55ee1b32 100644
--- a/apps/web/core/components/home/widgets/links/use-links.tsx
+++ b/apps/web/core/components/home/widgets/links/use-links.tsx
@@ -6,7 +6,7 @@
 
 import { useMemo } from "react";
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TProjectLink } from "@plane/types";
 import { useHome } from "@/hooks/store/use-home";
 
diff --git a/apps/web/core/components/home/widgets/loaders/home-loader.tsx b/apps/web/core/components/home/widgets/loaders/home-loader.tsx
index 571ef807335..59d0716769f 100644
--- a/apps/web/core/components/home/widgets/loaders/home-loader.tsx
+++ b/apps/web/core/components/home/widgets/loaders/home-loader.tsx
@@ -6,7 +6,7 @@
 
 import { range } from "lodash-es";
 // ui
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 
 export function HomeLoader() {
   return (
diff --git a/apps/web/core/components/home/widgets/loaders/quick-links.tsx b/apps/web/core/components/home/widgets/loaders/quick-links.tsx
index 4a12645af8b..1df20ee48a4 100644
--- a/apps/web/core/components/home/widgets/loaders/quick-links.tsx
+++ b/apps/web/core/components/home/widgets/loaders/quick-links.tsx
@@ -6,7 +6,7 @@
 
 import { range } from "lodash-es";
 // ui
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 
 export function QuickLinksWidgetLoader() {
   return (
diff --git a/apps/web/core/components/home/widgets/loaders/recent-activity.tsx b/apps/web/core/components/home/widgets/loaders/recent-activity.tsx
index 0b513f117f3..fa4a69b7a3a 100644
--- a/apps/web/core/components/home/widgets/loaders/recent-activity.tsx
+++ b/apps/web/core/components/home/widgets/loaders/recent-activity.tsx
@@ -6,7 +6,7 @@
 
 import { range } from "lodash-es";
 // ui
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 
 export function RecentActivityWidgetLoader() {
   return (
diff --git a/apps/web/core/components/home/widgets/manage/index.tsx b/apps/web/core/components/home/widgets/manage/index.tsx
index 9df07e8e680..db6f7271ef6 100644
--- a/apps/web/core/components/home/widgets/manage/index.tsx
+++ b/apps/web/core/components/home/widgets/manage/index.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // plane types
 // plane ui
 import { useTranslation } from "@plane/i18n";
-import { EModalWidth, ModalCore } from "@plane/ui";
+import { EModalWidth, ModalCore } from "@plane/blocks/modals";
 import { WidgetList } from "./widget-list";
 
 export type TProps = {
diff --git a/apps/web/core/components/home/widgets/manage/widget-item-drag-handle.tsx b/apps/web/core/components/home/widgets/manage/widget-item-drag-handle.tsx
index fd02106f5d8..d95d363428b 100644
--- a/apps/web/core/components/home/widgets/manage/widget-item-drag-handle.tsx
+++ b/apps/web/core/components/home/widgets/manage/widget-item-drag-handle.tsx
@@ -7,7 +7,7 @@
 import React from "react";
 import { observer } from "mobx-react";
 // ui
-import { DragHandle } from "@plane/ui";
+import { DragHandle } from "@plane/blocks/sortable";
 // helper
 import { cn } from "@plane/utils";
 
diff --git a/apps/web/core/components/home/widgets/manage/widget-item.tsx b/apps/web/core/components/home/widgets/manage/widget-item.tsx
index a1f1ab4af98..88c7cf202cf 100644
--- a/apps/web/core/components/home/widgets/manage/widget-item.tsx
+++ b/apps/web/core/components/home/widgets/manage/widget-item.tsx
@@ -23,7 +23,7 @@ import { useTranslation } from "@plane/i18n";
 import type { InstructionType } from "@plane/types";
 // plane ui
 import { Switch } from "@makeplane/propel/components/switch";
-import { DropIndicator } from "@plane/ui";
+import { DropIndicator } from "@plane/blocks/sortable";
 // plane utils
 import { cn } from "@plane/utils";
 // hooks
diff --git a/apps/web/core/components/home/widgets/manage/widget-list.tsx b/apps/web/core/components/home/widgets/manage/widget-list.tsx
index 972c7691b63..9aa654e506a 100644
--- a/apps/web/core/components/home/widgets/manage/widget-list.tsx
+++ b/apps/web/core/components/home/widgets/manage/widget-list.tsx
@@ -11,7 +11,7 @@ import type {
 } from "@atlaskit/pragmatic-drag-and-drop/dist/types/internal-types";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { useHome } from "@/hooks/store/use-home";
 import { WidgetItem } from "./widget-item";
 import type { TargetData } from "./widget.helpers";
diff --git a/apps/web/core/components/home/widgets/recents/filters.tsx b/apps/web/core/components/home/widgets/recents/filters.tsx
index 3dac629b960..2450e12eced 100644
--- a/apps/web/core/components/home/widgets/recents/filters.tsx
+++ b/apps/web/core/components/home/widgets/recents/filters.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import { ChevronDownOutline } from "@makeplane/propel/icons";
 import type { TRecentActivityFilterKeys } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 import { cn } from "@plane/utils";
 
 export type TFiltersDropdown = {
diff --git a/apps/web/core/components/home/widgets/recents/issue.tsx b/apps/web/core/components/home/widgets/recents/issue.tsx
index 83aa3642ce5..a4b9d6539ae 100644
--- a/apps/web/core/components/home/widgets/recents/issue.tsx
+++ b/apps/web/core/components/home/widgets/recents/issue.tsx
@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 // plane types
-import { PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
+import { PriorityIcon, StateGroupIcon } from "@plane/blocks/icons";
 import { WorkItemsOutline } from "@makeplane/propel/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { TActivityEntityData, TIssueEntityData } from "@plane/types";
diff --git a/apps/web/core/components/home/widgets/recents/page.tsx b/apps/web/core/components/home/widgets/recents/page.tsx
index f3e0563c138..8366a97c017 100644
--- a/apps/web/core/components/home/widgets/recents/page.tsx
+++ b/apps/web/core/components/home/widgets/recents/page.tsx
@@ -6,7 +6,7 @@
 
 import { useRouter } from "next/navigation";
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Logo } from "@plane/propel/emoji-icon-picker";
+import { Logo } from "@plane/blocks/emoji-icon-picker";
 import { PagesOutline } from "@makeplane/propel/icons";
 // plane import
 import type { TActivityEntityData, TPageEntityData } from "@plane/types";
diff --git a/apps/web/core/components/home/widgets/recents/project.tsx b/apps/web/core/components/home/widgets/recents/project.tsx
index cb5fa3f5c02..b8b896c0ecf 100644
--- a/apps/web/core/components/home/widgets/recents/project.tsx
+++ b/apps/web/core/components/home/widgets/recents/project.tsx
@@ -6,7 +6,7 @@
 
 import { useRouter } from "next/navigation";
 // plane types
-import { Logo } from "@plane/propel/emoji-icon-picker";
+import { Logo } from "@plane/blocks/emoji-icon-picker";
 import type { TActivityEntityData, TProjectEntityData } from "@plane/types";
 import { calculateTimeAgo } from "@plane/utils";
 // components
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 5531638ae9b..624403d6a13 100644
--- a/apps/web/core/components/inbox/content/inbox-issue-header.tsx
+++ b/apps/web/core/components/inbox/content/inbox-issue-header.tsx
@@ -23,12 +23,16 @@ import {
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { IconButton, getIconButtonStyling } from "@plane/propel/icon-button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { Button as ButtonElement } from "@makeplane/propel/elements/button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TNameDescriptionLoader } from "@plane/types";
 import { EInboxIssueStatus } from "@plane/types";
-import { ControlLink, CustomMenu, Row } from "@plane/ui";
+import { ControlLink } from "@plane/blocks/control-link";
+import { CustomMenu } from "@plane/blocks/dropdowns";
+import { Row } from "@plane/blocks/row";
 import { copyUrlToClipboard, findHowManyDaysLeft, generateWorkItemLink } from "@plane/utils";
 // components
 import { CreateUpdateIssueModal } from "@/components/issues/issue-modal/modal";
@@ -312,15 +316,15 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
             <div className="flex items-center gap-x-2">
               <IconButton
                 variant="secondary"
-                size="lg"
-                icon={ChevronUpOutline}
+                size="md"
+                icon={<Icon icon={ChevronUpOutline} />}
                 aria-label="Previous work item"
                 onClick={() => handleInboxIssueNavigation("prev")}
               />
               <IconButton
                 variant="secondary"
-                size="lg"
-                icon={ChevronDownOutline}
+                size="md"
+                icon={<Icon icon={ChevronDownOutline} />}
                 aria-label="Next work item"
                 onClick={() => handleInboxIssueNavigation("next")}
               />
@@ -329,9 +333,11 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
 
           <div className="flex flex-wrap items-center gap-2">
             {canMarkAsAccepted && (
-              <Button
+              <ButtonElement
                 variant="secondary"
-                size="lg"
+                size="md"
+                stretch="auto"
+                type="button"
                 onClick={() =>
                   handleActionWithPermission(
                     isProjectAdmin,
@@ -342,13 +348,15 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
               >
                 <TickCircleFilled className="size-4 shrink-0 text-success-secondary" />
                 {t("inbox_issue.actions.accept")}
-              </Button>
+              </ButtonElement>
             )}
 
             {canMarkAsDeclined && (
-              <Button
+              <ButtonElement
                 variant="secondary"
-                size="lg"
+                size="md"
+                stretch="auto"
+                type="button"
                 onClick={() =>
                   handleActionWithPermission(
                     isProjectAdmin,
@@ -359,31 +367,43 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
               >
                 <CloseCircleFilled className="size-4 shrink-0 text-danger-secondary" />
                 {t("inbox_issue.actions.decline")}
-              </Button>
+              </ButtonElement>
             )}
 
             {isAcceptedOrDeclined ? (
               <div className="flex items-center gap-2">
                 <Button
                   variant="secondary"
-                  size="lg"
-                  prependIcon={<LinkOutline className="h-2.5 w-2.5" />}
+                  size="md"
+                  stretch="auto"
+                  icon={<Icon icon={LinkOutline} />}
+                  iconPosition="start"
                   onClick={() => handleCopyIssueLink(workItemLink)}
-                >
-                  {t("inbox_issue.actions.copy")}
-                </Button>
+                  label={t("inbox_issue.actions.copy")}
+                />
                 <ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
-                  <Button variant="secondary" size="lg" prependIcon={<NewTabOutline className="h-2.5 w-2.5" />}>
-                    {t("inbox_issue.actions.open")}
-                  </Button>
+                  <Button
+                    variant="secondary"
+                    size="md"
+                    stretch="auto"
+                    icon={<Icon icon={NewTabOutline} />}
+                    iconPosition="start"
+                    label={t("inbox_issue.actions.open")}
+                  />
                 </ControlLink>
               </div>
             ) : (
               <>
                 {isAllowed && (
                   <CustomMenu
-                    customButton={<MoreHorizontalOutline className="size-4" />}
-                    customButtonClassName={getIconButtonStyling("secondary", "lg")}
+                    customButton={
+                      <IconButton
+                        variant="secondary"
+                        size="md"
+                        icon={<Icon icon={MoreHorizontalOutline} />}
+                        aria-label="Work item actions"
+                      />
+                    }
                     placement="bottom-start"
                   >
                     {canMarkAsAccepted && (
diff --git a/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx b/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
index b1e191d22b4..d67571ee5bc 100644
--- a/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
+++ b/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
@@ -19,10 +19,12 @@ import {
   NewTabOutline,
   TickCircleFilled,
 } from "@makeplane/propel/icons";
-import { IconButton, getIconButtonStyling } from "@plane/propel/icon-button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 import type { TNameDescriptionLoader } from "@plane/types";
 
-import { Header, CustomMenu, EHeaderVariant } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
+import { Header, EHeaderVariant } from "@plane/blocks/header";
 import { cn, findHowManyDaysLeft, generateWorkItemLink } from "@plane/utils";
 // components
 import { NameDescriptionUpdateStatus } from "@/components/issues/issue-update-status";
@@ -118,15 +120,15 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions
         <div className="flex items-center gap-x-2">
           <IconButton
             variant="secondary"
-            size="lg"
-            icon={ChevronUpOutline}
+            size="md"
+            icon={<Icon icon={ChevronUpOutline} />}
             aria-label="Previous work item"
             onClick={() => handleInboxIssueNavigation("prev")}
           />
           <IconButton
             variant="secondary"
-            size="lg"
-            icon={ChevronDownOutline}
+            size="md"
+            icon={<Icon icon={ChevronDownOutline} />}
             aria-label="Next work item"
             onClick={() => handleInboxIssueNavigation("next")}
           />
@@ -139,8 +141,14 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions
         </div>
         <div className="ml-auto">
           <CustomMenu
-            customButton={<MoreHorizontalOutline className="size-4" />}
-            customButtonClassName={getIconButtonStyling("secondary", "lg")}
+            customButton={
+              <IconButton
+                variant="secondary"
+                size="md"
+                icon={<Icon icon={MoreHorizontalOutline} />}
+                aria-label="Work item actions"
+              />
+            }
             placement="bottom-start"
           >
             {isAcceptedOrDeclined && (
diff --git a/apps/web/core/components/inbox/content/issue-properties.tsx b/apps/web/core/components/inbox/content/issue-properties.tsx
index f8b0c36421c..2da44f880e8 100644
--- a/apps/web/core/components/inbox/content/issue-properties.tsx
+++ b/apps/web/core/components/inbox/content/issue-properties.tsx
@@ -15,7 +15,7 @@ import {
 } from "@makeplane/propel/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { TInboxDuplicateIssueDetails, TIssue } from "@plane/types";
-import { ControlLink } from "@plane/ui";
+import { ControlLink } from "@plane/blocks/control-link";
 import { getDate, renderFormattedPayloadDate, generateWorkItemLink } from "@plane/utils";
 // components
 import { DateDropdown } from "@/components/dropdowns/date";
diff --git a/apps/web/core/components/inbox/content/issue-root.tsx b/apps/web/core/components/inbox/content/issue-root.tsx
index 64e1e1a08e3..42b5f76587c 100644
--- a/apps/web/core/components/inbox/content/issue-root.tsx
+++ b/apps/web/core/components/inbox/content/issue-root.tsx
@@ -9,7 +9,7 @@ import { useEffect, useMemo, useRef } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import type { EditorRefApi } from "@plane/editor";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TIssue, TNameDescriptionLoader } from "@plane/types";
 import { EFileAssetType, EInboxIssueSource, EInboxIssueStatus } from "@plane/types";
 // components
diff --git a/apps/web/core/components/inbox/content/root.tsx b/apps/web/core/components/inbox/content/root.tsx
index 995d83b072d..5558ad6e722 100644
--- a/apps/web/core/components/inbox/content/root.tsx
+++ b/apps/web/core/components/inbox/content/root.tsx
@@ -10,7 +10,7 @@ import useSWR from "swr";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import type { TNameDescriptionLoader } from "@plane/types";
 // components
-import { ContentWrapper } from "@plane/ui";
+import { ContentWrapper } from "@plane/blocks/content-wrapper";
 // hooks
 import { useProjectInbox } from "@/hooks/store/use-project-inbox";
 import { useUser, useUserPermissions } from "@/hooks/store/user";
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx
index 85069f8909e..be9ea18f756 100644
--- a/apps/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 import { ISSUE_PRIORITIES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { PriorityIcon } from "@plane/propel/icons";
+import { PriorityIcon } from "@plane/blocks/icons";
 import { CloseOutline } from "@makeplane/propel/icons";
 import type { TIssuePriorities } from "@plane/types";
 // hooks
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/root.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/root.tsx
index 99283e6c2c9..3d7900a139b 100644
--- a/apps/web/core/components/inbox/inbox-filter/applied-filters/root.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/root.tsx
@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 // plane imports
-import { Header, EHeaderVariant } from "@plane/ui";
+import { Header, EHeaderVariant } from "@plane/blocks/header";
 // hooks
 import { useProjectInbox } from "@/hooks/store/use-project-inbox";
 // local imports
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/state.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/state.tsx
index 26a416a5486..83e01b3424b 100644
--- a/apps/web/core/components/inbox/inbox-filter/applied-filters/state.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/state.tsx
@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 import { EIconSize } from "@plane/constants";
-import { StateGroupIcon } from "@plane/propel/icons";
+import { StateGroupIcon } from "@plane/blocks/icons";
 import { CloseOutline } from "@makeplane/propel/icons";
 // hooks
 import { useProjectInbox } from "@/hooks/store/use-project-inbox";
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx b/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx
index 23e338b1d31..28025a39a08 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx
@@ -7,7 +7,7 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 import type { IIssueLabel } from "@plane/types";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // components
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
 // hooks
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/members.tsx b/apps/web/core/components/inbox/inbox-filter/filters/members.tsx
index 497a49f65ee..41ad98df756 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/members.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/members.tsx
@@ -11,7 +11,7 @@ import { observer } from "mobx-react";
 import { Avatar } from "@makeplane/propel/components/avatar";
 import type { TInboxIssueFilterMemberKeys } from "@plane/types";
 // plane ui
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/priority.tsx b/apps/web/core/components/inbox/inbox-filter/filters/priority.tsx
index 5272e368b24..23363c0bd85 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/priority.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/priority.tsx
@@ -8,7 +8,7 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import { ISSUE_PRIORITIES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { PriorityIcon } from "@plane/propel/icons";
+import { PriorityIcon } from "@plane/blocks/icons";
 import type { TIssuePriorities } from "@plane/types";
 // plane constants
 // components
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/state.tsx b/apps/web/core/components/inbox/inbox-filter/filters/state.tsx
index 4a4af021fce..de1cf15cde6 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/state.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/state.tsx
@@ -7,9 +7,9 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { EIconSize } from "@plane/constants";
-import { StateGroupIcon } from "@plane/propel/icons";
+import { StateGroupIcon } from "@plane/blocks/icons";
 import type { IState } from "@plane/types";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // components
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
 // hooks
diff --git a/apps/web/core/components/inbox/inbox-filter/root.tsx b/apps/web/core/components/inbox/inbox-filter/root.tsx
index 5e830e3a22c..776778eee37 100644
--- a/apps/web/core/components/inbox/inbox-filter/root.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/root.tsx
@@ -5,9 +5,8 @@
  */
 
 import { ChevronDownOutline, FilterOutline } from "@makeplane/propel/icons";
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 // plane imports
-import { cn } from "@plane/utils";
 // components
 import { FiltersDropdown } from "@/components/issues/issue-layouts/filters";
 // hooks
@@ -19,11 +18,11 @@ import { InboxIssueOrderByDropdown } from "./sorting/order-by";
 const smallButton = <FilterOutline className="size-3" />;
 
 const largeButton = (
-  <div className={cn(getButtonStyling("secondary", "base"), "px-2 text-tertiary")}>
+  <Button variant="secondary" size="sm" stretch="auto" render={<div className="px-2 text-tertiary" />}>
     <FilterOutline className="size-3" />
     <span>Filters</span>
     <ChevronDownOutline className="size-3" />
-  </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 da18a8bbb6b..efcf2b0a3f1 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,12 +8,10 @@ import { observer } from "mobx-react";
 import { ChevronDownOutline, SortAscendingOutline, SortDescendingOutline, TickOutline } from "@makeplane/propel/icons";
 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 type { TInboxIssueSortingOrderByKeys, TInboxIssueSortingSortByKeys } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 // constants
-// helpers
-import { cn } from "@plane/utils";
 // hooks
 import { useProjectInbox } from "@/hooks/store/use-project-inbox";
 import useSize from "@/hooks/use-window-size";
@@ -32,7 +30,7 @@ export const InboxIssueOrderByDropdown = observer(function InboxIssueOrderByDrop
       <SortDescendingOutline className="size-3" />
     );
   const largeButton = (
-    <div className={cn(getButtonStyling("secondary", "base"), "px-2 text-tertiary")}>
+    <Button variant="secondary" size="sm" stretch="auto" render={<div className="px-2 text-tertiary" />}>
       {inboxSorting?.sort_by === "asc" ? (
         <SortAscendingOutline className="size-3" />
       ) : (
@@ -40,7 +38,7 @@ export const InboxIssueOrderByDropdown = observer(function InboxIssueOrderByDrop
       )}
       {t(orderByDetails?.i18n_label || "inbox_issue.order_by.created_at")}
       <ChevronDownOutline className="size-3" />
-    </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 8c130a579e4..c0f876640b2 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,8 +13,8 @@ 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 { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TIssue } from "@plane/types";
 import { Switch } from "@makeplane/propel/components/switch";
 import { renderFormattedPayloadDate, getTabIndex } from "@plane/utils";
@@ -218,7 +218,8 @@ export const InboxIssueCreateRoot = observer(function InboxIssueCreateRoot(props
             <div className="flex items-center gap-3">
               <Button
                 variant="secondary"
-                size="lg"
+                size="md"
+                stretch="auto"
                 type="button"
                 onClick={() => {
                   if (descriptionEditorRef.current?.isEditorReadyToDiscard()) {
@@ -232,9 +233,8 @@ export const InboxIssueCreateRoot = observer(function InboxIssueCreateRoot(props
                   }
                 }}
                 tabIndex={getIndex("discard_button")}
-              >
-                {t("discard")}
-              </Button>
+                label={t("discard")}
+              />
               <Button
                 variant="primary"
                 ref={submitBtnRef}
@@ -242,10 +242,10 @@ export const InboxIssueCreateRoot = observer(function InboxIssueCreateRoot(props
                 loading={formSubmitting}
                 disabled={isTitleLengthMoreThan255Character}
                 tabIndex={getIndex("submit_button")}
-                size="lg"
-              >
-                {formSubmitting ? t("creating") : t("create_work_item")}
-              </Button>
+                size="md"
+                stretch="auto"
+                label={formSubmitting ? t("creating") : t("create_work_item")}
+              />
             </div>
           </div>
         </form>
diff --git a/apps/web/core/components/inbox/modals/create-modal/issue-description.tsx b/apps/web/core/components/inbox/modals/create-modal/issue-description.tsx
index 12d514e9dbc..808baffc4d5 100644
--- a/apps/web/core/components/inbox/modals/create-modal/issue-description.tsx
+++ b/apps/web/core/components/inbox/modals/create-modal/issue-description.tsx
@@ -12,7 +12,7 @@ import type { EditorRefApi } from "@plane/editor";
 import { useTranslation } from "@plane/i18n";
 import type { TIssue } from "@plane/types";
 import { EFileAssetType } from "@plane/types";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 import { getDescriptionPlaceholderI18n, getTabIndex } from "@plane/utils";
 // components
 import { RichTextEditor } from "@/components/editor/rich-text/editor";
@@ -103,7 +103,7 @@ export const InboxIssueDescription = observer(function InboxIssueDescription(pro
           return asset_id;
         } catch (error) {
           console.log("Error in uploading work item asset:", error);
-          throw new Error("Asset upload failed. Please try again later.");
+          throw new Error("Asset upload failed. Please try again later.", { cause: error });
         }
       }}
       duplicateFile={async (assetId: string) => {
diff --git a/apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx b/apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx
index c0f76b46342..5968e8008c0 100644
--- a/apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx
+++ b/apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { ETabIndices } from "@plane/constants";
 import { ParentOutline } from "@makeplane/propel/icons";
 import type { ISearchIssueResponse, TIssue } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 import { renderFormattedPayloadDate, getDate, getTabIndex } from "@plane/utils";
 // components
 import { CycleDropdown } from "@/components/dropdowns/cycle";
diff --git a/apps/web/core/components/inbox/modals/create-modal/modal.tsx b/apps/web/core/components/inbox/modals/create-modal/modal.tsx
index 85b8a14c0ea..b51fe42dc17 100644
--- a/apps/web/core/components/inbox/modals/create-modal/modal.tsx
+++ b/apps/web/core/components/inbox/modals/create-modal/modal.tsx
@@ -6,7 +6,7 @@
 
 import { useState } from "react";
 // plane imports
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // hooks
 import useKeypress from "@/hooks/use-keypress";
 // local imports
diff --git a/apps/web/core/components/inbox/modals/decline-issue-modal.tsx b/apps/web/core/components/inbox/modals/decline-issue-modal.tsx
index 7fe5a07affd..72d1630a8f7 100644
--- a/apps/web/core/components/inbox/modals/decline-issue-modal.tsx
+++ b/apps/web/core/components/inbox/modals/decline-issue-modal.tsx
@@ -9,7 +9,7 @@ import React, { useState } from "react";
 import { useTranslation } from "@plane/i18n";
 import type { TIssue } from "@plane/types";
 // ui
-import { AlertModalCore } from "@plane/ui";
+import { AlertModalCore } from "@plane/blocks/modals";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 
diff --git a/apps/web/core/components/inbox/modals/delete-issue-modal.tsx b/apps/web/core/components/inbox/modals/delete-issue-modal.tsx
index c31bf98003e..dc74bf12bae 100644
--- a/apps/web/core/components/inbox/modals/delete-issue-modal.tsx
+++ b/apps/web/core/components/inbox/modals/delete-issue-modal.tsx
@@ -9,10 +9,10 @@ import { observer } from "mobx-react";
 // types
 import { PROJECT_ERROR_MESSAGES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TIssue } from "@plane/types";
 // ui
-import { AlertModalCore } from "@plane/ui";
+import { AlertModalCore } from "@plane/blocks/modals";
 // constants
 // hooks
 import { useProject } from "@/hooks/store/use-project";
diff --git a/apps/web/core/components/inbox/modals/select-duplicate.tsx b/apps/web/core/components/inbox/modals/select-duplicate.tsx
index 1482226608d..0aba4dff52e 100644
--- a/apps/web/core/components/inbox/modals/select-duplicate.tsx
+++ b/apps/web/core/components/inbox/modals/select-duplicate.tsx
@@ -11,9 +11,10 @@ import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { SearchOutline } from "@makeplane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { ISearchIssueResponse } from "@plane/types";
-import { Loader, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // assets
 import darkIssuesAsset from "@/app/assets/empty-state/search/issues-dark.webp?url";
 import lightIssuesAsset from "@/app/assets/empty-state/search/issues-light.webp?url";
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 1ad83a6b0e5..f5be4e47060 100644
--- a/apps/web/core/components/inbox/modals/snooze-issue-modal.tsx
+++ b/apps/web/core/components/inbox/modals/snooze-issue-modal.tsx
@@ -7,9 +7,9 @@
 import { useState } from "react";
 // ui
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { Calendar } from "@plane/propel/calendar";
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { Button } from "@makeplane/propel/components/button";
+import { Calendar } from "@makeplane/propel/components/calendar";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 
 export type InboxIssueSnoozeModalProps = {
   isOpen: boolean;
@@ -35,8 +35,6 @@ export function InboxIssueSnoozeModal(props: InboxIssueSnoozeModalProps) {
     >
       <div className="flex h-full w-full flex-col gap-y-1 px-5 py-8 sm:p-6">
         <Calendar
-          className="rounded-md border border-subtle p-3"
-          captionLayout="dropdown"
           selected={date ? new Date(date) : undefined}
           defaultMonth={date ? new Date(date) : undefined}
           onSelect={(date: Date | undefined) => {
@@ -44,6 +42,7 @@ export function InboxIssueSnoozeModal(props: InboxIssueSnoozeModalProps) {
             setDate(date);
           }}
           mode="single"
+          showOutsideDays
           disabled={[
             {
               before: new Date(),
@@ -52,13 +51,14 @@ export function InboxIssueSnoozeModal(props: InboxIssueSnoozeModalProps) {
         />
         <Button
           variant="primary"
+          size="sm"
+          stretch="auto"
           onClick={() => {
             handleClose();
             onConfirm(date);
           }}
-        >
-          {t("inbox_issue.actions.snooze")}
-        </Button>
+          label={t("inbox_issue.actions.snooze")}
+        />
       </div>
     </ModalCore>
   );
diff --git a/apps/web/core/components/inbox/root.tsx b/apps/web/core/components/inbox/root.tsx
index 130d19b03cc..af0b091393b 100644
--- a/apps/web/core/components/inbox/root.tsx
+++ b/apps/web/core/components/inbox/root.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { IntakeOutline, LeftSidePaneOutline } from "@makeplane/propel/icons";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateCompact } from "@plane/propel/empty-state";
+import { EmptyStateCompact } from "@plane/blocks/empty-state";
 import { EInboxIssueCurrentTab } from "@plane/types";
 import { cn } from "@plane/utils";
 // components
diff --git a/apps/web/core/components/inbox/sidebar/inbox-list-item.tsx b/apps/web/core/components/inbox/sidebar/inbox-list-item.tsx
index ee577512629..a82963b44a8 100644
--- a/apps/web/core/components/inbox/sidebar/inbox-list-item.tsx
+++ b/apps/web/core/components/inbox/sidebar/inbox-list-item.tsx
@@ -10,9 +10,9 @@ import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 // plane imports
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { PriorityIcon } from "@plane/propel/icons";
+import { PriorityIcon } from "@plane/blocks/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
-import { Row } from "@plane/ui";
+import { Row } from "@plane/blocks/row";
 import { cn, renderFormattedDate } from "@plane/utils";
 // components
 import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
diff --git a/apps/web/core/components/inbox/sidebar/root.tsx b/apps/web/core/components/inbox/sidebar/root.tsx
index e378c766d56..149404a673b 100644
--- a/apps/web/core/components/inbox/sidebar/root.tsx
+++ b/apps/web/core/components/inbox/sidebar/root.tsx
@@ -7,11 +7,12 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { EmptyStateDetailed } from "@plane/blocks/empty-state";
 import type { TInboxIssueCurrentTab } from "@plane/types";
 import { EInboxIssueCurrentTab } from "@plane/types";
 // plane imports
-import { Header, Loader, EHeaderVariant } from "@plane/ui";
+import { Header, EHeaderVariant } from "@plane/blocks/header";
+import { Loader } from "@plane/blocks/loader";
 import { cn } from "@plane/utils";
 // components
 import { InboxSidebarLoader } from "@/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader";
diff --git a/apps/web/core/components/instance/not-ready-view.tsx b/apps/web/core/components/instance/not-ready-view.tsx
index 850d0af2ebc..4bb38474ec7 100644
--- a/apps/web/core/components/instance/not-ready-view.tsx
+++ b/apps/web/core/components/instance/not-ready-view.tsx
@@ -10,8 +10,8 @@ import { GOD_MODE_URL } from "@plane/constants";
 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 { PlaneLockup } from "@plane/blocks/icons";
+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" stretch="full" size="lg" label="Get started" />
             </a>
           </div>
         </div>
diff --git a/apps/web/core/components/integration/github/select-repository.tsx b/apps/web/core/components/integration/github/select-repository.tsx
index bcfa001a949..c89380ccc1e 100644
--- a/apps/web/core/components/integration/github/select-repository.tsx
+++ b/apps/web/core/components/integration/github/select-repository.tsx
@@ -10,7 +10,7 @@ import useSWRInfinite from "swr/infinite";
 import type { IWorkspaceIntegration } from "@plane/types";
 // services
 // ui
-import { CustomSearchSelect } from "@plane/ui";
+import { CustomSearchSelect } from "@plane/blocks/dropdowns";
 // helpers
 import { truncateText } from "@plane/utils";
 import { ProjectService } from "@/services/project";
@@ -47,7 +47,7 @@ export function SelectRepository(props: Props) {
 
   const { data: paginatedData, size, setSize, isValidating } = useSWRInfinite(getKey, fetchGithubRepos);
 
-  let userRepositories = (paginatedData ?? []).map((data) => data.repositories).flat();
+  let userRepositories = (paginatedData ?? []).flatMap((data) => data.repositories);
   userRepositories = userRepositories.filter((data) => data?.id);
 
   const totalCount = paginatedData && paginatedData.length > 0 ? paginatedData[0].total_count : 0;
diff --git a/apps/web/core/components/integration/single-integration-card.tsx b/apps/web/core/components/integration/single-integration-card.tsx
index 889e6b70de0..a53a03cdb6c 100644
--- a/apps/web/core/components/integration/single-integration-card.tsx
+++ b/apps/web/core/components/integration/single-integration-card.tsx
@@ -10,12 +10,12 @@ import { useParams } from "next/navigation";
 import useSWR, { mutate } from "swr";
 import { TickCircleOutline } from "@makeplane/propel/icons";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { IAppIntegration, IWorkspaceIntegration } from "@plane/types";
 // ui
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // assets
 import GithubLogo from "@/app/assets/services/github.png?url";
 import SlackLogo from "@/app/assets/services/slack.png?url";
@@ -145,17 +145,18 @@ export const SingleIntegrationCard = observer(function SingleIntegrationCard({ i
             disabled={isUserAdmin || isMobile}
           >
             <Button
-              className={`${!isUserAdmin ? "hover:cursor-not-allowed" : ""}`}
-              variant="error-fill"
+              render={<button className={!isUserAdmin ? "hover:cursor-not-allowed" : ""} />}
+              variant="danger"
+              size="sm"
+              stretch="auto"
               onClick={() => {
                 if (!isUserAdmin) return;
                 handleRemoveIntegration();
               }}
               disabled={!isUserAdmin}
               loading={deletingIntegration}
-            >
-              {deletingIntegration ? "Uninstalling..." : "Uninstall"}
-            </Button>
+              label={deletingIntegration ? "Uninstalling..." : "Uninstall"}
+            />
           </Tooltip>
         ) : (
           <Tooltip
@@ -164,16 +165,17 @@ export const SingleIntegrationCard = observer(function SingleIntegrationCard({ i
             disabled={isUserAdmin || isMobile}
           >
             <Button
-              className={`${!isUserAdmin ? "hover:cursor-not-allowed" : ""}`}
+              render={<button className={!isUserAdmin ? "hover:cursor-not-allowed" : ""} />}
               variant="primary"
+              size="sm"
+              stretch="auto"
               onClick={() => {
                 if (!isUserAdmin) return;
                 startAuth();
               }}
               loading={isInstalling}
-            >
-              {isInstalling ? "Installing..." : "Install"}
-            </Button>
+              label={isInstalling ? "Installing..." : "Install"}
+            />
           </Tooltip>
         )
       ) : (
diff --git a/apps/web/core/components/integration/slack/select-channel.tsx b/apps/web/core/components/integration/slack/select-channel.tsx
index 3838329220b..ce4fa428372 100644
--- a/apps/web/core/components/integration/slack/select-channel.tsx
+++ b/apps/web/core/components/integration/slack/select-channel.tsx
@@ -11,7 +11,7 @@ import useSWR, { mutate } from "swr";
 // types
 import type { IWorkspaceIntegration, ISlackIntegration } from "@plane/types";
 // ui
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // fetch-keys
 import { SLACK_CHANNEL_INFO } from "@plane/constants";
 // hooks
diff --git a/apps/web/core/components/issues/archive-issue-modal.tsx b/apps/web/core/components/issues/archive-issue-modal.tsx
index ad487abca11..1ccc115b0ff 100644
--- a/apps/web/core/components/issues/archive-issue-modal.tsx
+++ b/apps/web/core/components/issues/archive-issue-modal.tsx
@@ -8,10 +8,10 @@ import { useState } from "react";
 // i18n
 import { useTranslation } from "@plane/i18n";
 // types
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TDeDupeIssue, TIssue } from "@plane/types";
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // hooks
 import { useIssues } from "@/hooks/store/use-issues";
 import { useProject } from "@/hooks/store/use-project";
@@ -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" onClick={onClose} label={t("common.cancel")} />
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            tabIndex={1}
+            onClick={handleArchiveIssue}
+            loading={isArchiving}
+            label={isArchiving ? t("common.archiving") : t("common.archive")}
+          />
         </div>
       </div>
     </ModalCore>
diff --git a/apps/web/core/components/issues/archived-issues-header.tsx b/apps/web/core/components/issues/archived-issues-header.tsx
index 8190b45853d..c4cbe4e540c 100644
--- a/apps/web/core/components/issues/archived-issues-header.tsx
+++ b/apps/web/core/components/issues/archived-issues-header.tsx
@@ -11,7 +11,7 @@ import { EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constant
 import { useTranslation } from "@plane/i18n";
 import type { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
-import { EHeaderVariant, Header } from "@plane/ui";
+import { EHeaderVariant, Header } from "@plane/blocks/header";
 // components
 import { ArchiveTabsList } from "@/components/archives";
 import { DisplayFiltersSelection, FiltersDropdown } from "@/components/issues/issue-layouts/filters";
diff --git a/apps/web/core/components/issues/attachment/attachment-item-list.tsx b/apps/web/core/components/issues/attachment/attachment-item-list.tsx
index 4473b16f084..4933fa4739d 100644
--- a/apps/web/core/components/issues/attachment/attachment-item-list.tsx
+++ b/apps/web/core/components/issues/attachment/attachment-item-list.tsx
@@ -10,7 +10,7 @@ import type { FileRejection } from "react-dropzone";
 import { useDropzone } from "react-dropzone";
 import { UploadOutline } from "@makeplane/propel/icons";
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TIssueServiceType } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
 // hooks
diff --git a/apps/web/core/components/issues/attachment/attachment-list-item.tsx b/apps/web/core/components/issues/attachment/attachment-list-item.tsx
index 962d25e4b3f..3c334aa873f 100644
--- a/apps/web/core/components/issues/attachment/attachment-list-item.tsx
+++ b/apps/web/core/components/issues/attachment/attachment-list-item.tsx
@@ -12,7 +12,7 @@ import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { TIssueServiceType } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
 // ui
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 import { convertBytesToSize, getFileExtension, getFileName, getFileURL, renderFormattedDate } from "@plane/utils";
 // components
 //
diff --git a/apps/web/core/components/issues/attachment/delete-attachment-modal.tsx b/apps/web/core/components/issues/attachment/delete-attachment-modal.tsx
index 676f4e38290..f9fd9d512dc 100644
--- a/apps/web/core/components/issues/attachment/delete-attachment-modal.tsx
+++ b/apps/web/core/components/issues/attachment/delete-attachment-modal.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from "@plane/i18n";
 import type { TIssueServiceType } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
 // ui
-import { AlertModalCore } from "@plane/ui";
+import { AlertModalCore } from "@plane/blocks/modals";
 // helper
 import { getFileName } from "@plane/utils";
 // hooks
diff --git a/apps/web/core/components/issues/confirm-issue-discard.tsx b/apps/web/core/components/issues/confirm-issue-discard.tsx
index 9ba05b9afd8..22eaae9b0fc 100644
--- a/apps/web/core/components/issues/confirm-issue-discard.tsx
+++ b/apps/web/core/components/issues/confirm-issue-discard.tsx
@@ -6,8 +6,8 @@
 
 import { useState } from "react";
 // ui
-import { Button } from "@plane/propel/button";
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { Button } from "@makeplane/propel/components/button";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 
 type Props = {
   isOpen: boolean;
@@ -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" onClick={onDiscard} label="Discard" />
         </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" onClick={onClose} label="Cancel" />
+          <Button
+            variant="primary"
+            size="sm"
+            stretch="auto"
+            onClick={handleDeletion}
+            loading={isLoading}
+            label={isLoading ? "Saving" : "Save to Drafts"}
+          />
         </div>
       </div>
     </ModalCore>
diff --git a/apps/web/core/components/issues/delete-issue-modal.tsx b/apps/web/core/components/issues/delete-issue-modal.tsx
index 9b70e5c7478..5188aa0d4df 100644
--- a/apps/web/core/components/issues/delete-issue-modal.tsx
+++ b/apps/web/core/components/issues/delete-issue-modal.tsx
@@ -10,10 +10,10 @@ import { useParams } from "next/navigation";
 // types
 import { PROJECT_ERROR_MESSAGES, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TDeDupeIssue, TIssue } from "@plane/types";
 // ui
-import { AlertModalCore } from "@plane/ui";
+import { AlertModalCore } from "@plane/blocks/modals";
 // hooks
 import { useIssues } from "@/hooks/store/use-issues";
 import { useProject } from "@/hooks/store/use-project";
diff --git a/apps/web/core/components/issues/filters.tsx b/apps/web/core/components/issues/filters.tsx
index 6d0fb1b40b0..28fcd2ca422 100644
--- a/apps/web/core/components/issues/filters.tsx
+++ b/apps/web/core/components/issues/filters.tsx
@@ -10,7 +10,7 @@ import { BarOutline, PreferencesOutline } from "@makeplane/propel/icons";
 // 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/elements/button";
 import type { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
 import { EIssueLayoutTypes, EIssuesStoreType } from "@plane/types";
 // hooks
@@ -126,7 +126,13 @@ export const HeaderFilters = observer(function HeaderFilters(props: Props) {
         />
       </FiltersDropdown>
       {canUserCreateIssue ? (
-        <Button className="hidden px-2 md:block" onClick={() => setAnalyticsModal(true)} variant="secondary" size="lg">
+        <Button
+          variant="secondary"
+          size="md"
+          stretch="auto"
+          onClick={() => setAnalyticsModal(true)}
+          render={<button type="button" className="hidden px-2 md:block" />}
+        >
           <div className="hidden @4xl:flex">{t("common.analytics")}</div>
           <div className="flex @4xl:hidden">
             <BarOutline className="size-3.5" />
diff --git a/apps/web/core/components/issues/header.tsx b/apps/web/core/components/issues/header.tsx
index dcd86d300ee..dd0e9f35290 100644
--- a/apps/web/core/components/issues/header.tsx
+++ b/apps/web/core/components/issues/header.tsx
@@ -11,11 +11,12 @@ 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/elements/button";
 import { NewTabOutline, WorkItemsOutline } from "@makeplane/propel/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import { EIssuesStoreType } from "@plane/types";
-import { Breadcrumbs, Header } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
+import { Header } from "@plane/blocks/header";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { CountChip } from "@/components/common/count-chip";
@@ -116,7 +117,9 @@ export const IssuesHeader = observer(function IssuesHeader() {
         {canUserCreateIssue && (
           <Button
             variant="primary"
-            size="lg"
+            size="md"
+            stretch="auto"
+            type="button"
             onClick={() => {
               toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
             }}
diff --git a/apps/web/core/components/issues/issue-detail-widgets/attachments/helper.tsx b/apps/web/core/components/issues/issue-detail-widgets/attachments/helper.tsx
index e32dfbbd098..6c2f0744506 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/attachments/helper.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/attachments/helper.tsx
@@ -5,7 +5,7 @@
  */
 
 import { useMemo } from "react";
-import { setPromiseToast, TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { setPromiseToast, TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TIssueServiceType } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
 // hooks
diff --git a/apps/web/core/components/issues/issue-detail-widgets/attachments/quick-action-button.tsx b/apps/web/core/components/issues/issue-detail-widgets/attachments/quick-action-button.tsx
index ff88b1aef57..950b273bb8b 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/attachments/quick-action-button.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/attachments/quick-action-button.tsx
@@ -10,7 +10,7 @@ import type { FileRejection } from "react-dropzone";
 import { useDropzone } from "react-dropzone";
 import { AddOutline } from "@makeplane/propel/icons";
 // plane imports
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TIssueServiceType } from "@plane/types";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
diff --git a/apps/web/core/components/issues/issue-detail-widgets/issue-detail-widget-modals.tsx b/apps/web/core/components/issues/issue-detail-widgets/issue-detail-widget-modals.tsx
index 9071e3eb61d..8797670f791 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/issue-detail-widget-modals.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/issue-detail-widget-modals.tsx
@@ -6,7 +6,7 @@
 
 import React from "react";
 import { observer } from "mobx-react";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { ISearchIssueResponse, TIssue, TIssueServiceType, TWorkItemWidgets } from "@plane/types";
 // components
 import { ExistingIssuesListModal } from "@/components/core/modals/existing-issues-list-modal";
diff --git a/apps/web/core/components/issues/issue-detail-widgets/links/helper.tsx b/apps/web/core/components/issues/issue-detail-widgets/links/helper.tsx
index c1bb10f2e28..ca9aed03690 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/links/helper.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/links/helper.tsx
@@ -7,7 +7,7 @@
 import { useMemo } from "react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TIssueLink, TIssueServiceType } from "@plane/types";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
diff --git a/apps/web/core/components/issues/issue-detail-widgets/relations/helper.tsx b/apps/web/core/components/issues/issue-detail-widgets/relations/helper.tsx
index 4842a9d177e..641c7a38adc 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/relations/helper.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/relations/helper.tsx
@@ -7,7 +7,7 @@
 import { useMemo } from "react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TIssue, TIssueServiceType } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
 import { copyUrlToClipboard } from "@plane/utils";
diff --git a/apps/web/core/components/issues/issue-detail-widgets/relations/quick-action-button.tsx b/apps/web/core/components/issues/issue-detail-widgets/relations/quick-action-button.tsx
index c70f7da2aad..80bce464d64 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/relations/quick-action-button.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/relations/quick-action-button.tsx
@@ -11,7 +11,7 @@ import { useTranslation } from "@plane/i18n";
 import { AddOutline } from "@makeplane/propel/icons";
 // plane imports
 import type { TIssueServiceType } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 // components
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/helper.ts b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/helper.ts
index 8cf524ed9a8..f30aa6af37a 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/helper.ts
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/helper.ts
@@ -7,7 +7,7 @@
 import { useMemo } from "react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TIssueServiceType, TSubIssueOperations } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
 import { copyUrlToClipboard } from "@plane/utils";
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-item.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-item.tsx
index b62b56af7a7..2a3e0fd2478 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-item.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-item.tsx
@@ -11,7 +11,8 @@ import { ChevronRightOutline, CloseOutline, DeleteOutline, EditOutline, LinkOutl
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { TIssue, TIssueServiceType, TSubIssueOperations } from "@plane/types";
 import { EIssueServiceType, EIssuesStoreType } from "@plane/types";
-import { ControlLink, CustomMenu } from "@plane/ui";
+import { ControlLink } from "@plane/blocks/control-link";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 import { cn, generateWorkItemLink } from "@plane/utils";
 // helpers
 import { useSubIssueOperations } from "@/components/issues/issue-detail-widgets/sub-issues/helper";
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 1b509f151df..6c9681664a3 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 { FilterOutline } from "@makeplane/propel/icons";
 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={<FilterOutline />}
           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"
+              onClick={() => resetFilters(rootIssueId)}
+              label={t("sub_work_item.empty_state.list_filters.action")}
+            />
           }
         />
       ) : (
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx
index eb6dbfa8626..51e21f7979d 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx
@@ -10,7 +10,7 @@ import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import { AddOutline, WorkItemsOutline } from "@makeplane/propel/icons";
 import type { TIssue, TIssueServiceType } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 
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 df2dd31cf5d..9d0f6b66c4b 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/elements/button";
 
 type Props = {
   icon: React.ReactNode;
@@ -17,7 +17,7 @@ type Props = {
 export function IssueDetailWidgetButton(props: Props) {
   const { icon, title, disabled = false } = props;
   return (
-    <Button variant={"secondary"} disabled={disabled} size="lg">
+    <Button variant="secondary" disabled={disabled} size="md" stretch="auto" type="button">
       {icon && icon}
       <span className="text-body-xs-medium">{title}</span>
     </Button>
diff --git a/apps/web/core/components/issues/issue-detail/identifier-text.tsx b/apps/web/core/components/issues/issue-detail/identifier-text.tsx
index 25945c4130b..89de52656b9 100644
--- a/apps/web/core/components/issues/issue-detail/identifier-text.tsx
+++ b/apps/web/core/components/issues/issue-detail/identifier-text.tsx
@@ -4,7 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { setToast, TOAST_TYPE } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { TIdentifierTextProps, TIdentifierTextVariant, TIssueIdentifierSize } from "@plane/types";
 import { cn } from "@plane/utils";
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx
index 1b4f094a738..60dd6eb8166 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx
@@ -9,8 +9,9 @@ import { FilterOutline, TickOutline } from "@makeplane/propel/icons";
 // plane imports
 import type { TActivityFilters, TActivityFilterOption } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { IconButton } from "@plane/propel/icon-button";
-import { PopoverMenu } from "@plane/ui";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
+import { PopoverMenu } from "@plane/blocks/popovers";
 // helper
 import { cn } from "@plane/utils";
 // constants
@@ -31,7 +32,7 @@ export const ActivityFilter = observer(function ActivityFilter(props: TActivityF
       buttonClassName="outline-none"
       button={
         <>
-          <IconButton variant="tertiary" icon={FilterOutline} />
+          <IconButton variant="tertiary" size="sm" icon={<Icon icon={FilterOutline} />} aria-label="Filter activity" />
           {selectedFilters.length < filterOptions.length && (
             <span className="absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-accent-primary" />
           )}
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/helper.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/helper.tsx
index 8f13d0f5044..bf5c5a159b5 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/helper.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/helper.tsx
@@ -6,7 +6,7 @@
 
 import { useMemo } from "react";
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { EFileAssetType } from "@plane/types";
 import type { TCommentsOperations } from "@plane/types";
 import { copyUrlToClipboard, formatTextList, generateWorkItemLink } from "@plane/utils";
@@ -139,7 +139,7 @@ export const useWorkItemCommentOperations = (
           return res;
         } catch (error) {
           console.log("Error in uploading comment asset:", error);
-          throw new Error(t("issue.comments.upload.error"));
+          throw new Error(t("issue.comments.upload.error"), { cause: error });
         }
       },
       duplicateCommentAsset: async (assetId, commentId) => {
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/loader.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/loader.tsx
index 0e5c3347d60..87904ddcc65 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/loader.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/loader.tsx
@@ -5,7 +5,7 @@
  */
 
 // plane imports
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 
 export function IssueActivityLoader() {
   return (
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/sort-root.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/sort-root.tsx
index daba50e14ae..895f56ac54c 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/sort-root.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/sort-root.tsx
@@ -8,7 +8,8 @@ import { memo } from "react";
 import { SortAscendingOutline, SortDescendingOutline } from "@makeplane/propel/icons";
 // plane package imports
 import { E_SORT_ORDER } from "@plane/constants";
-import { IconButton } from "@plane/propel/icon-button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 
 export type TActivitySortRoot = {
   sortOrder: E_SORT_ORDER;
@@ -16,7 +17,15 @@ export type TActivitySortRoot = {
 };
 export const ActivitySortRoot = memo(function ActivitySortRoot(props: TActivitySortRoot) {
   const SortIcon = props.sortOrder === E_SORT_ORDER.ASC ? SortAscendingOutline : SortDescendingOutline;
-  return <IconButton variant="tertiary" icon={SortIcon} onClick={props.toggleSort} />;
+  return (
+    <IconButton
+      variant="tertiary"
+      size="sm"
+      icon={<Icon icon={SortIcon} />}
+      aria-label="Toggle sort order"
+      onClick={props.toggleSort}
+    />
+  );
 });
 
 ActivitySortRoot.displayName = "ActivitySortRoot";
diff --git a/apps/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx b/apps/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx
index 6c9cc4aa0e3..26129f503d0 100644
--- a/apps/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx
@@ -9,8 +9,9 @@ import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { LinkOutline } from "@makeplane/propel/icons";
-import { IconButton } from "@plane/propel/icon-button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import { EIssuesStoreType } from "@plane/types";
 import { generateWorkItemLink, copyTextToClipboard } from "@plane/utils";
@@ -148,7 +149,13 @@ export const IssueDetailQuickActions = observer(function IssueDetailQuickActions
           )}
           <div className="flex flex-wrap items-center gap-2 text-tertiary">
             <Tooltip label={t("common.actions.copy_link")} disabled={isMobile}>
-              <IconButton variant="secondary" size="lg" onClick={handleCopyText} icon={LinkOutline} />
+              <IconButton
+                variant="secondary"
+                size="md"
+                onClick={handleCopyText}
+                icon={<Icon icon={LinkOutline} />}
+                aria-label={t("common.actions.copy_link")}
+              />
             </Tooltip>
             <WorkItemDetailQuickActions
               parentRef={parentRef}
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 bb11041dc21..9848da3c7e7 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/elements/button";
 import { CloseOutline, LabelsFilled } from "@makeplane/propel/icons";
 // types
 import { useLabel } from "@/hooks/store/use-label";
@@ -37,7 +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}>
+    <Button
+      variant="tertiary"
+      size="xs"
+      stretch="auto"
+      type="button"
+      key={labelId}
+      onClick={handleLabel}
+      disabled={disabled}
+    >
       <LabelsFilled className="size-3" color={label.color ?? "#000000"} />
       <span className="text-body-xs-regular">{label.name}</span>
       {!disabled && <CloseOutline className="h-2.5 w-2.5 transition-all group-hover:text-danger-primary" />}
diff --git a/apps/web/core/components/issues/issue-detail/label/root.tsx b/apps/web/core/components/issues/issue-detail/label/root.tsx
index b205c56d5c0..eb1f2b8289e 100644
--- a/apps/web/core/components/issues/issue-detail/label/root.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/root.tsx
@@ -7,7 +7,7 @@
 import { useMemo } from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IIssueLabel, TIssue, TIssueServiceType } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
 // components
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 07cfe84276c..47de2231277 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,8 @@ 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/elements/button";
+import { Icon } from "@makeplane/propel/components/icon";
 import type { IIssueLabel } from "@plane/types";
 import { EUserProjectRoles } from "@plane/types";
 // helpers
@@ -130,10 +131,11 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
             ref={setReferenceElement}
             type="button"
             variant="tertiary"
-            size="sm"
-            prependIcon={<AddOutline />}
+            size="xs"
+            stretch="auto"
             onClick={() => !projectLabels && fetchLabels()}
           >
+            <Icon icon={AddOutline} />
             {label}
           </Button>
         </Combobox.Button>
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 91c3e4f403c..27e81e096a0 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
@@ -11,10 +11,10 @@ import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 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 { ModalCore } from "@plane/ui";
+import { ModalCore } from "@plane/blocks/modals";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 // types
@@ -142,11 +142,14 @@ 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" onClick={onClose} label={t("common.cancel")} />
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            type="submit"
+            loading={isSubmitting}
+            label={`${
               preloadedData?.id
                 ? isSubmitting
                   ? t("common.updating")
@@ -155,7 +158,7 @@ export const IssueLinkCreateUpdateModal = observer(function IssueLinkCreateUpdat
                   ? t("common.adding")
                   : t("common.add")
             } ${t("common.link")}`}
-          </Button>
+          />
         </div>
       </form>
     </ModalCore>
diff --git a/apps/web/core/components/issues/issue-detail/links/link-detail.tsx b/apps/web/core/components/issues/issue-detail/links/link-detail.tsx
index 4666eeac4d2..dfa62f949d0 100644
--- a/apps/web/core/components/issues/issue-detail/links/link-detail.tsx
+++ b/apps/web/core/components/issues/issue-detail/links/link-detail.tsx
@@ -5,7 +5,7 @@
  */
 
 import { DeleteOutline, EditOutline, NewTabOutline } from "@makeplane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import { getIconForLink, copyTextToClipboard, calculateTimeAgo } from "@plane/utils";
 // hooks
diff --git a/apps/web/core/components/issues/issue-detail/links/link-item.tsx b/apps/web/core/components/issues/issue-detail/links/link-item.tsx
index f0b9e1bf7b3..e01ebecc056 100644
--- a/apps/web/core/components/issues/issue-detail/links/link-item.tsx
+++ b/apps/web/core/components/issues/issue-detail/links/link-item.tsx
@@ -8,12 +8,12 @@ import { observer } from "mobx-react";
 
 import { useTranslation } from "@plane/i18n";
 import { CopyOutline, DeleteOutline, EditOutline, LinkOutline } from "@makeplane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { TIssueServiceType } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
 // ui
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 import { calculateTimeAgo, copyTextToClipboard } from "@plane/utils";
 // helpers
 // hooks
diff --git a/apps/web/core/components/issues/issue-detail/links/root.tsx b/apps/web/core/components/issues/issue-detail/links/root.tsx
index 038353a5cad..da8e61362b1 100644
--- a/apps/web/core/components/issues/issue-detail/links/root.tsx
+++ b/apps/web/core/components/issues/issue-detail/links/root.tsx
@@ -8,7 +8,7 @@ import { useCallback, useMemo, useState } from "react";
 
 import { AddOutline } from "@makeplane/propel/icons";
 // plane imports
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TIssueLink } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
 // hooks
diff --git a/apps/web/core/components/issues/issue-detail/parent/root.tsx b/apps/web/core/components/issues/issue-detail/parent/root.tsx
index 1de73eb3b22..ac115038afd 100644
--- a/apps/web/core/components/issues/issue-detail/parent/root.tsx
+++ b/apps/web/core/components/issues/issue-detail/parent/root.tsx
@@ -12,7 +12,8 @@ import type { TIssue } from "@plane/types";
 // component
 import { IssueIdentifier } from "@/components/issues/issue-detail/issue-identifier";
 // ui
-import { ControlLink, CustomMenu } from "@plane/ui";
+import { ControlLink } from "@plane/blocks/control-link";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 // helpers
 import { generateWorkItemLink } from "@plane/utils";
 // hooks
diff --git a/apps/web/core/components/issues/issue-detail/parent/sibling-item.tsx b/apps/web/core/components/issues/issue-detail/parent/sibling-item.tsx
index 4b9b6a1b92e..160435e34ef 100644
--- a/apps/web/core/components/issues/issue-detail/parent/sibling-item.tsx
+++ b/apps/web/core/components/issues/issue-detail/parent/sibling-item.tsx
@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 // ui
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 // helpers
 import { generateWorkItemLink } from "@plane/utils";
 // hooks
diff --git a/apps/web/core/components/issues/issue-detail/reactions/issue-comment.tsx b/apps/web/core/components/issues/issue-detail/reactions/issue-comment.tsx
index 2ece8b9b7ee..51b5bcf08a2 100644
--- a/apps/web/core/components/issues/issue-detail/reactions/issue-comment.tsx
+++ b/apps/web/core/components/issues/issue-detail/reactions/issue-comment.tsx
@@ -6,10 +6,10 @@
 
 import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
-import { stringToEmoji } from "@plane/propel/emoji-icon-picker";
-import { EmojiReactionGroup, EmojiReactionPicker } from "@plane/propel/emoji-reaction";
-import type { EmojiReactionType } from "@plane/propel/emoji-reaction";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { stringToEmoji } from "@plane/blocks/emoji-icon-picker";
+import { EmojiReactionGroup, EmojiReactionPicker } from "@plane/blocks/emoji-reaction";
+import type { EmojiReactionType } from "@plane/blocks/emoji-reaction";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IUser } from "@plane/types";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
diff --git a/apps/web/core/components/issues/issue-detail/reactions/issue.tsx b/apps/web/core/components/issues/issue-detail/reactions/issue.tsx
index ac1f944102b..261684542a3 100644
--- a/apps/web/core/components/issues/issue-detail/reactions/issue.tsx
+++ b/apps/web/core/components/issues/issue-detail/reactions/issue.tsx
@@ -6,10 +6,10 @@
 
 import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
-import { stringToEmoji } from "@plane/propel/emoji-icon-picker";
-import { EmojiReactionGroup, EmojiReactionPicker } from "@plane/propel/emoji-reaction";
-import type { EmojiReactionType } from "@plane/propel/emoji-reaction";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { stringToEmoji } from "@plane/blocks/emoji-icon-picker";
+import { EmojiReactionGroup, EmojiReactionPicker } from "@plane/blocks/emoji-reaction";
+import type { EmojiReactionType } from "@plane/blocks/emoji-reaction";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IUser } from "@plane/types";
 // hooks
 // ui
diff --git a/apps/web/core/components/issues/issue-detail/relation-select.tsx b/apps/web/core/components/issues/issue-detail/relation-select.tsx
index da0d59b3fde..82527503956 100644
--- a/apps/web/core/components/issues/issue-detail/relation-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/relation-select.tsx
@@ -10,7 +10,7 @@ import Link from "next/link";
 
 import { CloseOutline, EditOutline } from "@makeplane/propel/icons";
 // Plane
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { ISearchIssueResponse } from "@plane/types";
 import { cn, generateWorkItemLink } from "@plane/utils";
diff --git a/apps/web/core/components/issues/issue-detail/root.tsx b/apps/web/core/components/issues/issue-detail/root.tsx
index 72484c696ba..375be1b86c9 100644
--- a/apps/web/core/components/issues/issue-detail/root.tsx
+++ b/apps/web/core/components/issues/issue-detail/root.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/blocks/toast";
 import type { TIssue } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
 // assets
diff --git a/apps/web/core/components/issues/issue-detail/subscription.tsx b/apps/web/core/components/issues/issue-detail/subscription.tsx
index 6b59dce9d88..cfe15f8ebd3 100644
--- a/apps/web/core/components/issues/issue-detail/subscription.tsx
+++ b/apps/web/core/components/issues/issue-detail/subscription.tsx
@@ -12,10 +12,11 @@ import { SubscribeOutline, UnsubscribeOutline } from "@makeplane/propel/icons";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // UI
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/elements/button";
+import { Icon } from "@makeplane/propel/components/icon";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { EIssueServiceType } from "@plane/types";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { useUserPermissions } from "@/hooks/store/user";
@@ -82,13 +83,14 @@ export const IssueSubscription = observer(function IssueSubscription(props: TIss
   return (
     <div>
       <Button
-        prependIcon={isSubscribed ? <UnsubscribeOutline /> : <SubscribeOutline className="h-3 w-3" />}
         variant="secondary"
-        className="hover:!bg-accent-primary/20"
+        size="md"
+        stretch="auto"
+        render={<button type="button" className="hover:!bg-accent-primary/20" />}
         onClick={handleSubscription}
         disabled={!isEditable || loading}
-        size="lg"
       >
+        <Icon icon={isSubscribed ? UnsubscribeOutline : SubscribeOutline} />
         {loading ? (
           <span>
             <span className="hidden sm:block">{t("common.loading")}</span>
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/base-calendar-root.tsx b/apps/web/core/components/issues/issue-layouts/calendar/base-calendar-root.tsx
index 3f4eef8de59..01035721a7b 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/base-calendar-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/base-calendar-root.tsx
@@ -10,7 +10,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
 import { EIssueGroupByToServerOptions, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TGroupedIssues } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
 // hooks
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/calendar.tsx b/apps/web/core/components/issues/issue-layouts/calendar/calendar.tsx
index 1edd03f746d..cb55a5d4141 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/calendar.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/calendar.tsx
@@ -21,7 +21,7 @@ import type {
 } from "@plane/types";
 import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
 // ui
-import { Spinner } from "@plane/ui";
+import { Spinner } from "@plane/blocks/spinner";
 import { renderFormattedPayloadDate, cn } from "@plane/utils";
 // constants
 import { MONTHS_LIST } from "@plane/constants";
@@ -122,7 +122,7 @@ export const CalendarChart = observer(function CalendarChart(props: Props) {
         element,
       })
     );
-  }, [scrollableContainerRef?.current]);
+  }, []);
 
   if (!calendarPayload || !formattedDatePayload)
     return (
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/day-tile.tsx b/apps/web/core/components/issues/issue-layouts/calendar/day-tile.tsx
index eaf99f2080b..7bad8050322 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/day-tile.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/day-tile.tsx
@@ -9,7 +9,7 @@ import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
 import { observer } from "mobx-react";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TGroupedIssues, TIssue, TIssueMap, TPaginationData, ICalendarDate } from "@plane/types";
 // types
 // ui
@@ -129,7 +129,7 @@ export const CalendarDayTile = observer(function CalendarDayTile(props: Props) {
         },
       })
     );
-  }, [dayTileRef?.current, formattedDatePayload]);
+  }, [formattedDatePayload]);
 
   if (!formattedDatePayload) return null;
   const issueIds = groupedIssueIds?.[formattedDatePayload];
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/header.tsx b/apps/web/core/components/issues/issue-layouts/calendar/header.tsx
index 58ea8bab8e9..fe744b5b7b8 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/header.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/header.tsx
@@ -11,7 +11,7 @@ import type { TSupportedFilterTypeForUpdate } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { ChevronLeftOutline, ChevronRightOutline } from "@makeplane/propel/icons";
 import type { TSupportedFilterForUpdate } from "@plane/types";
-import { Row } from "@plane/ui";
+import { Row } from "@plane/blocks/row";
 // icons
 import { useCalendarView } from "@/hooks/store/use-calendar-view";
 import type { ICycleIssuesFilter } from "@/store/issue/cycle";
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/issue-block-root.tsx b/apps/web/core/components/issues/issue-layouts/calendar/issue-block-root.tsx
index d2aaf6f38b5..7eaa003683e 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/issue-block-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/issue-block-root.tsx
@@ -57,7 +57,7 @@ export const CalendarIssueBlockRoot = observer(function CalendarIssueBlockRoot(p
         },
       })
     );
-  }, [issueRef?.current, issue, canDrag]);
+  }, [issue, canDrag]);
 
   useOutsideClickDetector(issueRef, () => {
     issueRef?.current?.classList?.remove(HIGHLIGHT_CLASS);
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/issue-block.tsx b/apps/web/core/components/issues/issue-layouts/calendar/issue-block.tsx
index 8a7afcda824..e6d5aab49b2 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/issue-block.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/issue-block.tsx
@@ -10,9 +10,9 @@ import { useParams } from "next/navigation";
 import { MoreHorizontalOutline } from "@makeplane/propel/icons";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
-import { Popover } from "@plane/propel/popover";
+import { Popover, PopoverContent, PopoverTrigger } from "@makeplane/propel/components/popover";
 import type { TIssue } from "@plane/types";
-import { ControlLink } from "@plane/ui";
+import { ControlLink } from "@plane/blocks/control-link";
 import { cn, generateWorkItemLink } from "@plane/utils";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
@@ -96,9 +96,10 @@ export const CalendarIssueBlock = observer(
     });
 
     return (
-      <Popover delay={100} openOnHover>
-        <Popover.Button
-          className="w-full"
+      <Popover>
+        <PopoverTrigger
+          openOnHover
+          delay={100}
           render={
             <ControlLink
               id={`issue-${issue.id}`}
@@ -167,19 +168,17 @@ export const CalendarIssueBlock = observer(
             </ControlLink>
           }
         />
-        <Popover.Panel side="bottom" align="start">
-          <>
-            {issue.project_id && (
-              <WorkItemPreviewCard
-                projectId={issue.project_id}
-                stateDetails={{
-                  id: issue.state_id ?? undefined,
-                }}
-                workItem={issue}
-              />
-            )}
-          </>
-        </Popover.Panel>
+        <PopoverContent side="bottom" align="start" sideOffset={8}>
+          {issue.project_id && (
+            <WorkItemPreviewCard
+              projectId={issue.project_id}
+              stateDetails={{
+                id: issue.state_id ?? undefined,
+              }}
+              workItem={issue}
+            />
+          )}
+        </PopoverContent>
       </Popover>
     );
   })
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/quick-add-issue-actions.tsx b/apps/web/core/components/issues/issue-layouts/calendar/quick-add-issue-actions.tsx
index 20b4eecccbc..aa882e81bbb 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/quick-add-issue-actions.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/quick-add-issue-actions.tsx
@@ -12,10 +12,10 @@ import { useParams } from "next/navigation";
 import { useTranslation } from "@plane/i18n";
 // plane imports
 import { AddOutline } from "@makeplane/propel/icons";
-import { setPromiseToast } from "@plane/propel/toast";
+import { setPromiseToast } from "@plane/blocks/toast";
 import type { ISearchIssueResponse, TIssue } from "@plane/types";
 import { EIssueLayoutTypes } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 import { cn } from "@plane/utils";
 // components
 import { ExistingIssuesListModal } from "@/components/core/modals/existing-issues-list-modal";
diff --git a/apps/web/core/components/issues/issue-layouts/empty-states/archived-issues.tsx b/apps/web/core/components/issues/issue-layouts/empty-states/archived-issues.tsx
index 8ae22d842f7..07878b01a38 100644
--- a/apps/web/core/components/issues/issue-layouts/empty-states/archived-issues.tsx
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/archived-issues.tsx
@@ -9,7 +9,7 @@ import { useParams } from "next/navigation";
 // plane imports
 import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { EmptyStateDetailed } from "@plane/blocks/empty-state";
 import { EIssuesStoreType, EUserProjectRoles } from "@plane/types";
 // hooks
 import { useUserPermissions } from "@/hooks/store/user";
diff --git a/apps/web/core/components/issues/issue-layouts/empty-states/cycle.tsx b/apps/web/core/components/issues/issue-layouts/empty-states/cycle.tsx
index e6d143f3432..258c62558d6 100644
--- a/apps/web/core/components/issues/issue-layouts/empty-states/cycle.tsx
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/cycle.tsx
@@ -11,8 +11,8 @@ import { useParams } from "next/navigation";
 // plane imports
 import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateDetailed } from "@plane/propel/empty-state";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { EmptyStateDetailed } from "@plane/blocks/empty-state";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { ISearchIssueResponse } from "@plane/types";
 import { EIssuesStoreType, EUserProjectRoles } from "@plane/types";
 // components
diff --git a/apps/web/core/components/issues/issue-layouts/empty-states/global-view.tsx b/apps/web/core/components/issues/issue-layouts/empty-states/global-view.tsx
index 9be06fa7a09..37c4f3e9b88 100644
--- a/apps/web/core/components/issues/issue-layouts/empty-states/global-view.tsx
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/global-view.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { EmptyStateDetailed } from "@plane/blocks/empty-state";
 import { EIssuesStoreType, EUserWorkspaceRoles } from "@plane/types";
 // hooks
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
diff --git a/apps/web/core/components/issues/issue-layouts/empty-states/module.tsx b/apps/web/core/components/issues/issue-layouts/empty-states/module.tsx
index 6c0022d269f..6a8049e3f3b 100644
--- a/apps/web/core/components/issues/issue-layouts/empty-states/module.tsx
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/module.tsx
@@ -10,8 +10,8 @@ import { useParams } from "next/navigation";
 // plane imports
 import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateDetailed } from "@plane/propel/empty-state";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { EmptyStateDetailed } from "@plane/blocks/empty-state";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { ISearchIssueResponse } from "@plane/types";
 import { EIssuesStoreType, EUserProjectRoles } from "@plane/types";
 // components
diff --git a/apps/web/core/components/issues/issue-layouts/empty-states/profile-view.tsx b/apps/web/core/components/issues/issue-layouts/empty-states/profile-view.tsx
index 9d6283ab25c..1078166fc97 100644
--- a/apps/web/core/components/issues/issue-layouts/empty-states/profile-view.tsx
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/profile-view.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // components
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { EmptyStateDetailed } from "@plane/blocks/empty-state";
 
 // TODO: If projectViewId changes, everything breaks. Figure out a better way to handle this.
 export const ProfileViewEmptyState = observer(function ProfileViewEmptyState() {
diff --git a/apps/web/core/components/issues/issue-layouts/empty-states/project-issues.tsx b/apps/web/core/components/issues/issue-layouts/empty-states/project-issues.tsx
index dd9ab174f01..099f76381a5 100644
--- a/apps/web/core/components/issues/issue-layouts/empty-states/project-issues.tsx
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/project-issues.tsx
@@ -9,7 +9,7 @@ import { useParams } from "next/navigation";
 // plane imports
 import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { EmptyStateDetailed } from "@plane/blocks/empty-state";
 import { EIssuesStoreType, EUserProjectRoles } from "@plane/types";
 // hooks
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
diff --git a/apps/web/core/components/issues/issue-layouts/empty-states/project-view.tsx b/apps/web/core/components/issues/issue-layouts/empty-states/project-view.tsx
index 4bcfa8fb977..98081126d40 100644
--- a/apps/web/core/components/issues/issue-layouts/empty-states/project-view.tsx
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/project-view.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 // components
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
-import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { EmptyStateDetailed } from "@plane/blocks/empty-state";
 import { EIssuesStoreType } from "@plane/types";
 // hooks
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/cycle.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
index 5ee18b05488..17aba1ffd28 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
@@ -5,7 +5,7 @@
  */
 
 import { observer } from "mobx-react";
-import { CycleGroupIcon } from "@plane/propel/icons";
+import { CycleGroupIcon } from "@plane/blocks/icons";
 import { CloseOutline } from "@makeplane/propel/icons";
 import type { TCycleGroups } from "@plane/types";
 // hooks
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/priority.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/priority.tsx
index 7f9f11306ba..88240a06005 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/priority.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/priority.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 
 // icons
-import { PriorityIcon } from "@plane/propel/icons";
+import { PriorityIcon } from "@plane/blocks/icons";
 import { CloseOutline } from "@makeplane/propel/icons";
 import type { TIssuePriorities } from "@plane/types";
 // types
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsx
index 0baaccd76f3..c9b1b5d3e5f 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsx
@@ -5,7 +5,7 @@
  */
 
 import { observer } from "mobx-react";
-import { Logo } from "@plane/propel/emoji-icon-picker";
+import { Logo } from "@plane/blocks/emoji-icon-picker";
 import { CloseOutline } from "@makeplane/propel/icons";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state-group.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
index 9abdf66cb44..b83d5a2198f 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 
 // icons
 import { EIconSize } from "@plane/constants";
-import { StateGroupIcon } from "@plane/propel/icons";
+import { StateGroupIcon } from "@plane/blocks/icons";
 import { CloseOutline } from "@makeplane/propel/icons";
 import type { TStateGroups } from "@plane/types";
 
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state.tsx
index 5b04e9b6e8b..798c9378af8 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // icons
 // plane imports
 import { EIconSize } from "@plane/constants";
-import { StateGroupIcon } from "@plane/propel/icons";
+import { StateGroupIcon } from "@plane/blocks/icons";
 import { CloseOutline } from "@makeplane/propel/icons";
 import type { IState } from "@plane/types";
 
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx
index 33d324551b4..dafd0e8cf93 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx
@@ -9,7 +9,7 @@ import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 // plane ui
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx
index f6267432f3a..40da63b8fbd 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx
@@ -9,7 +9,7 @@ import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 // plane ui
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx
index 1368fee3f1d..e1b009a29a7 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx
@@ -8,10 +8,10 @@ import React, { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { CycleGroupIcon } from "@plane/propel/icons";
+import { CycleGroupIcon } from "@plane/blocks/icons";
 import type { TCycleGroups } from "@plane/types";
 // components
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
 import { useCycle } from "@/hooks/store/use-cycle";
 // ui
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx
index f68b7755c6a..ef33a577827 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx
@@ -9,7 +9,7 @@ import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 import type { IIssueLabel } from "@plane/types";
 // components
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
 
 // ui
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx
index d872a33e3c7..2e3138431b8 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx
@@ -9,7 +9,7 @@ import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 // plane ui
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx
index 2757c507822..d5900d06e69 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx
@@ -10,7 +10,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // components
 import { ModuleOutline } from "@makeplane/propel/icons";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
 import { useModule } from "@/hooks/store/use-module";
 // ui
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/priority.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/priority.tsx
index e3325d580d8..f545249f9c0 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/priority.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/priority.tsx
@@ -10,7 +10,7 @@ import { observer } from "mobx-react";
 import { ISSUE_PRIORITIES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // ui
-import { PriorityIcon } from "@plane/propel/icons";
+import { PriorityIcon } from "@plane/blocks/icons";
 
 // components
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx
index 843ac016e86..95660c9b0db 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx
@@ -8,8 +8,8 @@ import React, { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 // ui
-import { Logo } from "@plane/propel/emoji-icon-picker";
-import { Loader } from "@plane/ui";
+import { Logo } from "@plane/blocks/emoji-icon-picker";
+import { Loader } from "@plane/blocks/loader";
 // components
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
 // hooks
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx
index 99e8c1dafcd..7ffe6d968cd 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx
@@ -8,7 +8,7 @@ import React, { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { STATE_GROUPS } from "@plane/constants";
-import { StateGroupIcon } from "@plane/propel/icons";
+import { StateGroupIcon } from "@plane/blocks/icons";
 // components
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
 
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx
index 825a15a1819..83ed929aa0d 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx
@@ -8,10 +8,10 @@ import React, { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 import { EIconSize } from "@plane/constants";
-import { StateGroupIcon } from "@plane/propel/icons";
+import { StateGroupIcon } from "@plane/blocks/icons";
 import type { IState } from "@plane/types";
 // components
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
 // ui
 // types
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 fdf49f374a8..00d5bf32ce9 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/elements/button";
 
 type Props = {
   children: React.ReactNode;
@@ -59,11 +59,12 @@ export function FiltersDropdown(props: Props) {
                   <Button
                     disabled={disabled}
                     variant="secondary"
-                    prependIcon={icon}
+                    size="md"
+                    stretch="auto"
                     tabIndex={tabIndex}
-                    className="relative"
-                    size="lg"
+                    render={<button type="button" className="relative" />}
                   >
+                    {icon}
                     <>
                       <div className={`${open ? "text-primary" : "text-secondary"}`}>
                         <span>{title}</span>
@@ -79,8 +80,10 @@ export function FiltersDropdown(props: Props) {
                     disabled={disabled}
                     ref={setReferenceElement}
                     variant="secondary"
+                    size="md"
+                    stretch="auto"
+                    type="button"
                     tabIndex={tabIndex}
-                    size="lg"
                   >
                     {miniIcon || title}
                   </Button>
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 f4b1d338f5e..d265352f738 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,10 +6,10 @@
 
 import { ISSUE_LAYOUTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 import { ChevronDownOutline } from "@makeplane/propel/icons";
 import type { EIssueLayoutTypes } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 import { IssueLayoutIcon } from "../../layout-icon";
 
 export function MobileLayoutSelection({
@@ -29,7 +29,12 @@ export function MobileLayoutSelection({
       className="flex flex-grow justify-center text-13 text-secondary"
       placement="bottom-start"
       customButton={
-        <Button variant="secondary" className="relative px-2">
+        <Button
+          variant="secondary"
+          size="sm"
+          stretch="auto"
+          render={<button type="button" className="relative px-2" />}
+        >
           {activeLayout && (
             <IssueLayoutIcon layout={activeLayout} size={14} strokeWidth={2} className={`h-3.5 w-3.5`} />
           )}
diff --git a/apps/web/core/components/issues/issue-layouts/gantt/base-gantt-root.tsx b/apps/web/core/components/issues/issue-layouts/gantt/base-gantt-root.tsx
index 6eff5cdffbf..c6865bb75e2 100644
--- a/apps/web/core/components/issues/issue-layouts/gantt/base-gantt-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/gantt/base-gantt-root.tsx
@@ -10,7 +10,7 @@ import { useParams } from "next/navigation";
 // plane imports
 import { ALL_ISSUES, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { EIssuesStoreType, IBlockUpdateData, TIssue } from "@plane/types";
 import { EIssueLayoutTypes, GANTT_TIMELINE_TYPE } from "@plane/types";
 import { renderFormattedPayloadDate } from "@plane/utils";
diff --git a/apps/web/core/components/issues/issue-layouts/gantt/blocks.tsx b/apps/web/core/components/issues/issue-layouts/gantt/blocks.tsx
index 9d475d31c13..8fb25246fc0 100644
--- a/apps/web/core/components/issues/issue-layouts/gantt/blocks.tsx
+++ b/apps/web/core/components/issues/issue-layouts/gantt/blocks.tsx
@@ -7,9 +7,9 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { Popover } from "@plane/propel/popover";
+import { Popover, PopoverContent, PopoverTrigger } from "@makeplane/propel/components/popover";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
-import { ControlLink } from "@plane/ui";
+import { ControlLink } from "@plane/blocks/control-link";
 import { findTotalDaysInRange, generateWorkItemLink } from "@plane/utils";
 // components
 import { SIDEBAR_WIDTH } from "@/components/gantt-chart/constants";
@@ -58,9 +58,10 @@ export const IssueGanttBlock = observer(function IssueGanttBlock(props: Props) {
   const duration = findTotalDaysInRange(issueDetails?.start_date, issueDetails?.target_date) || 0;
 
   return (
-    <Popover delay={100} openOnHover>
-      <Popover.Button
-        className="w-full"
+    <Popover>
+      <PopoverTrigger
+        openOnHover
+        delay={100}
         render={
           // oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions
           <div
@@ -79,19 +80,17 @@ export const IssueGanttBlock = observer(function IssueGanttBlock(props: Props) {
           </div>
         }
       />
-      <Popover.Panel side="bottom" align="start">
-        <>
-          {issueDetails && issueDetails?.project_id && (
-            <WorkItemPreviewCard
-              projectId={issueDetails.project_id}
-              stateDetails={{
-                id: issueDetails.state_id ?? undefined,
-              }}
-              workItem={issueDetails}
-            />
-          )}
-        </>
-      </Popover.Panel>
+      <PopoverContent side="bottom" align="start" sideOffset={8}>
+        {issueDetails && issueDetails?.project_id && (
+          <WorkItemPreviewCard
+            projectId={issueDetails.project_id}
+            stateDetails={{
+              id: issueDetails.state_id ?? undefined,
+            }}
+            workItem={issueDetails}
+          />
+        )}
+      </PopoverContent>
     </Popover>
   );
 });
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/block.tsx b/apps/web/core/components/issues/issue-layouts/kanban/block.tsx
index e64e356c703..ce733635e7f 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/block.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/block.tsx
@@ -14,12 +14,13 @@ import { useParams } from "next/navigation";
 import { MoreHorizontalOutline } from "@makeplane/propel/icons";
 import { useOutsideClickDetector } from "@plane/hooks";
 // types
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { TIssue, IIssueDisplayProperties, IIssueMap } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
 // ui
-import { ControlLink, DropIndicator } from "@plane/ui";
+import { ControlLink } from "@plane/blocks/control-link";
+import { DropIndicator } from "@plane/blocks/sortable";
 import { cn, generateWorkItemLink } from "@plane/utils";
 // components
 import RenderIfVisible from "@/components/core/render-if-visible-HOC";
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/default.tsx b/apps/web/core/components/issues/issue-layouts/kanban/default.tsx
index d63cf00ab8e..5be8f37d062 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/default.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/default.tsx
@@ -19,7 +19,7 @@ import type {
   TIssueOrderByOptions,
 } from "@plane/types";
 // constants
-import { ContentWrapper } from "@plane/ui";
+import { ContentWrapper } from "@plane/blocks/content-wrapper";
 // components
 import RenderIfVisible from "@/components/core/render-if-visible-HOC";
 import { KanbanColumnLoader } from "@/components/ui/loader/layouts/kanban-layout-loader";
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx b/apps/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
index c3ce5841a87..059c5fc3656 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
@@ -10,10 +10,10 @@ import { useParams } from "next/navigation";
 // lucide icons
 import { Circle } from "lucide-react";
 import { AddOutline, ArrowCollapseOutline, FullScreenOutline } from "@makeplane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TIssue, ISearchIssueResponse, TIssueKanbanFilters, TIssueGroupByOptions } from "@plane/types";
 // ui
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 // components
 import { ExistingIssuesListModal } from "@/components/core/modals/existing-issues-list-modal";
 import { CreateUpdateIssueModal } from "@/components/issues/issue-modal/modal";
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx b/apps/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx
index a3dbcb1fe0f..f3f074df30e 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx
@@ -15,7 +15,7 @@ import { DRAG_ALLOWED_GROUPS } from "@plane/constants";
 // i18n
 import { useTranslation } from "@plane/i18n";
 //types
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type {
   TGroupedIssues,
   TIssue,
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx b/apps/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx
index 9a93e0e6191..c3c9bb6d818 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -19,7 +19,7 @@ import type {
   TIssueGroupByOptions,
   TIssueOrderByOptions,
 } from "@plane/types";
-import { Row } from "@plane/ui";
+import { Row } from "@plane/blocks/row";
 // hooks
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 // plane web imports
diff --git a/apps/web/core/components/issues/issue-layouts/layout-icon.tsx b/apps/web/core/components/issues/issue-layouts/layout-icon.tsx
index 04a90895509..7a2fe03ed3b 100644
--- a/apps/web/core/components/issues/issue-layouts/layout-icon.tsx
+++ b/apps/web/core/components/issues/issue-layouts/layout-icon.tsx
@@ -5,7 +5,7 @@
  */
 
 import { BoardOutline, CalendarOutline, ListOutline, TableOutline, TimelineOutline } from "@makeplane/propel/icons";
-import type { ISvgIcons } from "@plane/propel/icons";
+import type { ISvgIcons } from "@plane/blocks/icons";
 import { EIssueLayoutTypes } from "@plane/types";
 
 export function IssueLayoutIcon({
diff --git a/apps/web/core/components/issues/issue-layouts/list/block-root.tsx b/apps/web/core/components/issues/issue-layouts/list/block-root.tsx
index 443d84612b7..8cd708d4ee2 100644
--- a/apps/web/core/components/issues/issue-layouts/list/block-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/block-root.tsx
@@ -16,7 +16,7 @@ import { useOutsideClickDetector } from "@plane/hooks";
 import type { IIssueDisplayProperties, TIssue, TIssueMap } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
 // components
-import { DropIndicator } from "@plane/ui";
+import { DropIndicator } from "@plane/blocks/sortable";
 import RenderIfVisible from "@/components/core/render-if-visible-HOC";
 import { ListLoaderItemRow } from "@/components/ui/loader/layouts/list-layout-loader";
 // hooks
diff --git a/apps/web/core/components/issues/issue-layouts/list/block.tsx b/apps/web/core/components/issues/issue-layouts/list/block.tsx
index 976d6d41c1d..980c53feea7 100644
--- a/apps/web/core/components/issues/issue-layouts/list/block.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/block.tsx
@@ -12,12 +12,14 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { ChevronRightOutline } from "@makeplane/propel/icons";
 // types
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { TIssue, IIssueDisplayProperties, TIssueMap } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
 // ui
-import { Spinner, ControlLink, Row } from "@plane/ui";
+import { ControlLink } from "@plane/blocks/control-link";
+import { Row } from "@plane/blocks/row";
+import { Spinner } from "@plane/blocks/spinner";
 import { cn, generateWorkItemLink } from "@plane/utils";
 // components
 import { MultipleSelectEntityAction } from "@/components/core/multiple-select";
diff --git a/apps/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx b/apps/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
index 2e004431b23..c3fbe952f41 100644
--- a/apps/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
@@ -10,10 +10,10 @@ import { useParams } from "next/navigation";
 import { CircleDashed } from "lucide-react";
 import { AddOutline } from "@makeplane/propel/icons";
 // types
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TIssue, ISearchIssueResponse, TIssueGroupByOptions } from "@plane/types";
 // ui
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 // components
 import { cn } from "@plane/utils";
 import { ExistingIssuesListModal } from "@/components/core/modals/existing-issues-list-modal";
diff --git a/apps/web/core/components/issues/issue-layouts/list/list-group.tsx b/apps/web/core/components/issues/issue-layouts/list/list-group.tsx
index 548918f3a0f..ac5a015541d 100644
--- a/apps/web/core/components/issues/issue-layouts/list/list-group.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/list-group.tsx
@@ -12,7 +12,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { DRAG_ALLOWED_GROUPS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type {
   IGroupByColumn,
   TIssueMap,
@@ -23,7 +23,7 @@ import type {
   TIssueKanbanFilters,
 } from "@plane/types";
 import { EIssueLayoutTypes } from "@plane/types";
-import { Row } from "@plane/ui";
+import { Row } from "@plane/blocks/row";
 import { cn } from "@plane/utils";
 // components
 import { ListLoaderItemRow } from "@/components/ui/loader/layouts/list-layout-loader";
diff --git a/apps/web/core/components/issues/issue-layouts/list/list-view-types.d.ts b/apps/web/core/components/issues/issue-layouts/list/list-view-types.d.ts
index da33c2cd86e..34070bf0f96 100644
--- a/apps/web/core/components/issues/issue-layouts/list/list-view-types.d.ts
+++ b/apps/web/core/components/issues/issue-layouts/list/list-view-types.d.ts
@@ -1,4 +1,4 @@
-import type { TPlacement } from "@plane/propel/utils/placement";
+import type { TPlacement } from "@plane/blocks/utils/placement";
 import type { TIssue } from "@plane/types";
 
 export interface IQuickActionProps {
diff --git a/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx b/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx
index 98b018ff9a8..d6101fc200f 100644
--- a/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx
+++ b/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx
@@ -18,7 +18,7 @@ import { useTranslation } from "@plane/i18n";
 import type { IIssueLabel } from "@plane/types";
 import { EUserProjectRoles } from "@plane/types";
 // components
-import { ComboDropDown } from "@plane/ui";
+import { ComboDropDown } from "@plane/blocks/dropdowns";
 import { sortBySelectedFirst } from "@plane/utils";
 // hooks
 import { useLabel } from "@/hooks/store/use-label";
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
index aea7af3108f..d168dd7331a 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
@@ -12,7 +12,7 @@ import { useParams } from "next/navigation";
 import { ARCHIVABLE_STATE_GROUPS } from "@plane/constants";
 import type { TIssue } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
-import { ContextMenu, CustomMenu } from "@plane/ui";
+import { ContextMenu, CustomMenu } from "@plane/blocks/dropdowns";
 import { cn } from "@plane/utils";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
index beb885bddd7..fb79290f271 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
@@ -10,7 +10,7 @@ import { useParams } from "next/navigation";
 // ui
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { EIssuesStoreType } from "@plane/types";
-import { ContextMenu, CustomMenu } from "@plane/ui";
+import { ContextMenu, CustomMenu } from "@plane/blocks/dropdowns";
 import { cn } from "@plane/utils";
 // hooks
 import { useIssues } from "@/hooks/store/use-issues";
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/copy-menu-helper.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/copy-menu-helper.tsx
index ecea63ccb5e..c53942425d4 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/copy-menu-helper.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/copy-menu-helper.tsx
@@ -4,8 +4,8 @@
  * See the LICENSE file for details.
  */
 
-import type { ISvgIcons } from "@plane/propel/icons";
-import type { TContextMenuItem } from "@plane/ui";
+import type { ISvgIcons } from "@plane/blocks/icons";
+import type { TContextMenuItem } from "@plane/blocks/dropdowns";
 
 export interface CopyMenuHelperProps {
   baseItem: {
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
index 256f3681429..4e2515309d5 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
@@ -12,7 +12,7 @@ import { useParams } from "next/navigation";
 import { ARCHIVABLE_STATE_GROUPS, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import type { TIssue } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
-import { ContextMenu, CustomMenu } from "@plane/ui";
+import { ContextMenu, CustomMenu } from "@plane/blocks/dropdowns";
 import { cn } from "@plane/utils";
 // hooks
 import { useIssues } from "@/hooks/store/use-issues";
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/helper.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/helper.tsx
index 0e15c8aa5a1..e06b0ab264b 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/helper.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/helper.tsx
@@ -17,9 +17,9 @@ import {
 } from "@makeplane/propel/icons";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { EIssuesStoreType, TIssue } from "@plane/types";
-import type { TContextMenuItem } from "@plane/ui";
+import type { TContextMenuItem } from "@plane/blocks/dropdowns";
 import { copyUrlToClipboard, generateWorkItemLink } from "@plane/utils";
 import { createCopyMenuWithDuplication } from "./copy-menu-helper";
 
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx
index 879dde4d5ff..8267b491f6e 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx
@@ -13,7 +13,7 @@ import { MoreHorizontalOutline } from "@makeplane/propel/icons";
 import { ARCHIVABLE_STATE_GROUPS, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import type { TIssue } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
-import { ContextMenu, CustomMenu } from "@plane/ui";
+import { ContextMenu, CustomMenu } from "@plane/blocks/dropdowns";
 import { cn } from "@plane/utils";
 // hooks
 import { useIssues } from "@/hooks/store/use-issues";
@@ -27,7 +27,8 @@ import { CreateUpdateIssueModal } from "../../issue-modal/modal";
 import type { IQuickActionProps } from "../list/list-view-types";
 import type { MenuItemFactoryProps } from "./helper";
 import { useWorkItemDetailMenuItems } from "./helper";
-import { IconButton } from "@plane/propel/icon-button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 
 type TWorkItemDetailQuickActionProps = IQuickActionProps & {
   toggleEditIssueModal?: (value: boolean) => void;
@@ -228,7 +229,14 @@ export const WorkItemDetailQuickActions = observer(function WorkItemDetailQuickA
       <CustomMenu
         ellipsis
         placement={placements}
-        customButton={<IconButton size="lg" variant="secondary" icon={MoreHorizontalOutline} />}
+        customButton={
+          <IconButton
+            size="md"
+            variant="secondary"
+            icon={<Icon icon={MoreHorizontalOutline} />}
+            aria-label="Work item actions"
+          />
+        }
         portalElement={portalElement}
         menuItemsClassName="z-[14]"
         maxHeight="lg"
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
index dc08ea7b216..21fc4cdf68f 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
@@ -12,7 +12,7 @@ import { useParams } from "next/navigation";
 import { ARCHIVABLE_STATE_GROUPS, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import type { TIssue } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
-import { ContextMenu, CustomMenu } from "@plane/ui";
+import { ContextMenu, CustomMenu } from "@plane/blocks/dropdowns";
 import { cn } from "@plane/utils";
 // hooks
 import { useIssues } from "@/hooks/store/use-issues";
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
index e1b2a4c659d..ac9a2a39c1b 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
@@ -12,7 +12,7 @@ import { useParams } from "next/navigation";
 import { ARCHIVABLE_STATE_GROUPS, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import type { TIssue } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
-import { ContextMenu, CustomMenu } from "@plane/ui";
+import { ContextMenu, CustomMenu } from "@plane/blocks/dropdowns";
 import { cn } from "@plane/utils";
 // hooks
 import { useIssues } from "@/hooks/store/use-issues";
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/button/gantt.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/button/gantt.tsx
index 6645e3514ac..9c2db26bf98 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/button/gantt.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/button/gantt.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 
 import { useTranslation } from "@plane/i18n";
 import { AddOutline } from "@makeplane/propel/icons";
-import { Row } from "@plane/ui";
+import { Row } from "@plane/blocks/row";
 import type { TQuickAddIssueButton } from "../root";
 
 export const GanttQuickAddIssueButton = observer(function GanttQuickAddIssueButton(props: TQuickAddIssueButton) {
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/button/list.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/button/list.tsx
index 51826e72fa5..de05b70dca3 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/button/list.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/button/list.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 
 import { useTranslation } from "@plane/i18n";
 import { AddOutline } from "@makeplane/propel/icons";
-import { Row } from "@plane/ui";
+import { Row } from "@plane/blocks/row";
 import type { TQuickAddIssueButton } from "../root";
 
 export const ListQuickAddIssueButton = observer(function ListQuickAddIssueButton(props: TQuickAddIssueButton) {
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx
index fb991a2a719..d746d644ef2 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx
@@ -13,7 +13,7 @@ import { useForm } from "react-hook-form";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { AddOutline } from "@makeplane/propel/icons";
-import { setPromiseToast } from "@plane/propel/toast";
+import { setPromiseToast } from "@plane/blocks/toast";
 import type { IProject, TIssue, EIssueLayoutTypes } from "@plane/types";
 import { cn, createIssuePayload } from "@plane/utils";
 // local imports
diff --git a/apps/web/core/components/issues/issue-layouts/roots/all-issue-layout-root.tsx b/apps/web/core/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
index a8659b6afec..6884d3257c2 100644
--- a/apps/web/core/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
@@ -10,7 +10,7 @@ import { useParams, useSearchParams } from "next/navigation";
 import useSWR from "swr";
 // plane imports
 import { ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
-import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { EmptyStateDetailed } from "@plane/blocks/empty-state";
 import type { EIssueLayoutTypes } from "@plane/types";
 import { EIssuesStoreType, STATIC_VIEW_TYPES } from "@plane/types";
 // assets
diff --git a/apps/web/core/components/issues/issue-layouts/roots/module-layout-root.tsx b/apps/web/core/components/issues/issue-layouts/roots/module-layout-root.tsx
index a167c46c685..e04f8257619 100644
--- a/apps/web/core/components/issues/issue-layouts/roots/module-layout-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/roots/module-layout-root.tsx
@@ -11,7 +11,7 @@ import useSWR from "swr";
 // plane imports
 import { ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
 import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
-import { Row, ERowVariant } from "@plane/ui";
+import { Row, ERowVariant } from "@plane/blocks/row";
 // hooks
 import { ProjectLevelWorkItemFiltersHOC } from "@/components/work-item-filters/filters-hoc/project-level";
 import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
diff --git a/apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx b/apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx
index 4655c0464b7..8e56cfdc001 100644
--- a/apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx
@@ -10,7 +10,7 @@ import useSWR from "swr";
 // plane constants
 import { ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
 import { EIssueLayoutTypes, EIssuesStoreType } from "@plane/types";
-import { Spinner } from "@plane/ui";
+import { Spinner } from "@plane/blocks/spinner";
 // components
 import { ProjectLevelWorkItemFiltersHOC } from "@/components/work-item-filters/filters-hoc/project-level";
 import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
index 2ec3a94b38d..18fee892e0a 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
@@ -8,7 +8,7 @@ import React from "react";
 import { observer } from "mobx-react";
 // types
 import type { TIssue } from "@plane/types";
-import { Row } from "@plane/ui";
+import { Row } from "@plane/blocks/row";
 
 type Props = {
   issue: TIssue;
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
index 824132072f5..ed6a17996eb 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // types
 import type { TIssue } from "@plane/types";
 // helpers
-import { Row } from "@plane/ui";
+import { Row } from "@plane/blocks/row";
 import { renderFormattedDate } from "@plane/utils";
 
 type Props = {
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
index fb30e89c5f1..e18062408c2 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
@@ -19,7 +19,8 @@ import { SPREADSHEET_PROPERTY_DETAILS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // types
 import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssueOrderByOptions } from "@plane/types";
-import { CustomMenu, Row } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
+import { Row } from "@plane/blocks/row";
 import useLocalStorage from "@/hooks/use-local-storage";
 import { SpreadSheetPropertyIcon } from "../../utils";
 
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
index 305a2624c12..c4832741d36 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
@@ -8,7 +8,7 @@ import React from "react";
 import { observer } from "mobx-react";
 // types
 import type { TIssue } from "@plane/types";
-import { Row } from "@plane/ui";
+import { Row } from "@plane/blocks/row";
 
 type Props = {
   issue: TIssue;
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
index 2121101e80c..b756edb72fd 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
@@ -10,7 +10,7 @@ import { useParams } from "next/navigation";
 // types
 import type { TIssue } from "@plane/types";
 // helpers
-import { Row } from "@plane/ui";
+import { Row } from "@plane/blocks/row";
 import { cn } from "@plane/utils";
 // hooks
 import { useAppRouter } from "@/hooks/use-app-router";
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
index f099eddcb63..55dea36def2 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // types
 import type { TIssue } from "@plane/types";
 // helpers
-import { Row } from "@plane/ui";
+import { Row } from "@plane/blocks/row";
 import { renderFormattedDate } from "@plane/utils";
 
 type Props = {
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
index 7adaa6295b8..879a7c2f4f2 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
@@ -17,7 +17,8 @@ import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { IIssueDisplayProperties, TIssue } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
 // ui
-import { ControlLink, Row } from "@plane/ui";
+import { ControlLink } from "@plane/blocks/control-link";
+import { Row } from "@plane/blocks/row";
 import { cn, generateWorkItemLink } from "@plane/utils";
 // components
 import { MultipleSelectEntityAction } from "@/components/core/multiple-select";
diff --git a/apps/web/core/components/issues/issue-layouts/utils.tsx b/apps/web/core/components/issues/issue-layouts/utils.tsx
index e14a7c47a0c..35d3f92e569 100644
--- a/apps/web/core/components/issues/issue-layouts/utils.tsx
+++ b/apps/web/core/components/issues/issue-layouts/utils.tsx
@@ -28,9 +28,9 @@ import {
 // plane types
 import { Avatar } from "@makeplane/propel/components/avatar";
 import { EIconSize, ISSUE_PRIORITIES, STATE_GROUPS } from "@plane/constants";
-import { Logo } from "@plane/propel/emoji-icon-picker";
-import type { ISvgIcons } from "@plane/propel/icons";
-import { CycleGroupIcon, PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
+import { Logo } from "@plane/blocks/emoji-icon-picker";
+import type { ISvgIcons } from "@plane/blocks/icons";
+import { CycleGroupIcon, PriorityIcon, StateGroupIcon } from "@plane/blocks/icons";
 import type {
   GroupByColumnTypes,
   IGroupByColumn,
diff --git a/apps/web/core/components/issues/issue-modal/base.tsx b/apps/web/core/components/issues/issue-modal/base.tsx
index 80a04f20e9d..aa3b73e9563 100644
--- a/apps/web/core/components/issues/issue-modal/base.tsx
+++ b/apps/web/core/components/issues/issue-modal/base.tsx
@@ -10,10 +10,10 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // Plane imports
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TBaseIssue, TIssue } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // hooks
 import { useIssueModal } from "@/hooks/context/use-issue-modal";
 import { useCycle } from "@/hooks/store/use-cycle";
diff --git a/apps/web/core/components/issues/issue-modal/components/default-properties.tsx b/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
index 2119c4087d7..ad89aaf251c 100644
--- a/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
+++ b/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
@@ -14,7 +14,7 @@ import { ParentOutline } from "@makeplane/propel/icons";
 // types
 import type { ISearchIssueResponse, TIssue } from "@plane/types";
 // ui
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 import { getDate, renderFormattedPayloadDate, getTabIndex } from "@plane/utils";
 // components
 import { CycleDropdown } from "@/components/dropdowns/cycle";
diff --git a/apps/web/core/components/issues/issue-modal/components/description-editor.tsx b/apps/web/core/components/issues/issue-modal/components/description-editor.tsx
index 36098a176dc..3963fa8197c 100644
--- a/apps/web/core/components/issues/issue-modal/components/description-editor.tsx
+++ b/apps/web/core/components/issues/issue-modal/components/description-editor.tsx
@@ -13,10 +13,10 @@ import { AiStar1Outline } from "@makeplane/propel/icons";
 import { ETabIndices } from "@plane/constants";
 import type { EditorRefApi } from "@plane/editor";
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TIssue } from "@plane/types";
 import { EFileAssetType } from "@plane/types";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 import { getDescriptionPlaceholderI18n, getTabIndex } from "@plane/utils";
 // components
 import { GptAssistantPopover } from "@/components/core/modals/gpt-assistant-popover";
@@ -222,7 +222,7 @@ export const IssueDescriptionEditor = observer(function IssueDescriptionEditor(p
                     return asset_id;
                   } catch (error) {
                     console.log("Error in uploading issue asset:", error);
-                    throw new Error("Asset upload failed. Please try again later.");
+                    throw new Error("Asset upload failed. Please try again later.", { cause: error });
                   }
                 }}
                 duplicateFile={async (assetId: string) => {
diff --git a/apps/web/core/components/issues/issue-modal/draft-issue-layout.tsx b/apps/web/core/components/issues/issue-modal/draft-issue-layout.tsx
index af8ba950221..ec66e34a5b7 100644
--- a/apps/web/core/components/issues/issue-modal/draft-issue-layout.tsx
+++ b/apps/web/core/components/issues/issue-modal/draft-issue-layout.tsx
@@ -10,7 +10,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // Plane imports
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TIssue } from "@plane/types";
 import { isEmptyHtmlString } from "@plane/utils";
 // hooks
diff --git a/apps/web/core/components/issues/issue-modal/form.tsx b/apps/web/core/components/issues/issue-modal/form.tsx
index a9ea0faa355..f91f0bc5bea 100644
--- a/apps/web/core/components/issues/issue-modal/form.tsx
+++ b/apps/web/core/components/issues/issue-modal/form.tsx
@@ -16,8 +16,8 @@ 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 { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TIssue, TWorkspaceDraftIssue } from "@plane/types";
 // hooks
 import { Switch } from "@makeplane/propel/components/switch";
@@ -467,7 +467,8 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
                     <div tabIndex={getIndex("discard_button")}>
                       <Button
                         variant="secondary"
-                        size="lg"
+                        size="md"
+                        stretch="auto"
                         onClick={() => {
                           if (editorRef.current?.isEditorReadyToDiscard()) {
                             onClose();
@@ -479,21 +480,20 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
                             });
                           }
                         }}
-                      >
-                        {t("discard")}
-                      </Button>
+                        label={t("discard")}
+                      />
                     </div>
                     <div tabIndex={isDraft ? getIndex("submit_button") : getIndex("draft_button")}>
                       <Button
                         variant={moveToIssue ? "secondary" : "primary"}
-                        size="lg"
+                        size="md"
+                        stretch="auto"
                         type="submit"
                         ref={submitBtnRef}
                         loading={isSubmitting}
                         disabled={isDisabled}
-                      >
-                        {isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
-                      </Button>
+                        label={isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
+                      />
                     </div>
 
                     {moveToIssue && (
@@ -503,10 +503,10 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
                         loading={isMoving}
                         onClick={handleMoveToProjects}
                         disabled={isMoving}
-                        size="lg"
-                      >
-                        {t("add_to_project")}
-                      </Button>
+                        size="md"
+                        stretch="auto"
+                        label={t("add_to_project")}
+                      />
                     )}
                   </div>
                 </div>
diff --git a/apps/web/core/components/issues/layout-quick-actions.tsx b/apps/web/core/components/issues/layout-quick-actions.tsx
index 5a326108d3f..442ba404f92 100644
--- a/apps/web/core/components/issues/layout-quick-actions.tsx
+++ b/apps/web/core/components/issues/layout-quick-actions.tsx
@@ -5,13 +5,14 @@
  */
 
 import { observer } from "mobx-react";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { TContextMenuItem } from "@plane/ui";
-import { CustomMenu } from "@plane/ui";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
+import type { TContextMenuItem } from "@plane/blocks/dropdowns";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 import { copyUrlToClipboard, cn } from "@plane/utils";
 import { useLayoutMenuItems } from "@/components/common/quick-actions-helper";
 import { MoreHorizontalOutline } from "@makeplane/propel/icons";
-import { IconButton } from "@plane/propel/icon-button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 
 type Props = {
   workspaceSlug: string;
@@ -55,7 +56,14 @@ export const LayoutQuickActions = observer(function LayoutQuickActions(props: Pr
         closeOnSelect
         maxHeight="lg"
         className="flex size-[26px] flex-shrink-0 items-center justify-center rounded"
-        customButton={<IconButton size="lg" variant="tertiary" icon={MoreHorizontalOutline} />}
+        customButton={
+          <IconButton
+            size="md"
+            variant="tertiary"
+            icon={<Icon icon={MoreHorizontalOutline} />}
+            aria-label="Quick actions"
+          />
+        }
       >
         {MENU_ITEMS.map((item) => {
           if (item.shouldRender === false) return null;
diff --git a/apps/web/core/components/issues/parent-issues-list-modal.tsx b/apps/web/core/components/issues/parent-issues-list-modal.tsx
index b96be7b0902..880e7e039d3 100644
--- a/apps/web/core/components/issues/parent-issues-list-modal.tsx
+++ b/apps/web/core/components/issues/parent-issues-list-modal.tsx
@@ -15,7 +15,8 @@ import { useTranslation } from "@plane/i18n";
 // types
 import type { ISearchIssueResponse } from "@plane/types";
 // ui
-import { Loader, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 import { generateWorkItemLink, getTabIndex } from "@plane/utils";
 // components
 import { IssueSearchModalEmptyState } from "@/components/core/modals/issue-search-modal-empty-state";
diff --git a/apps/web/core/components/issues/parent-select-root.tsx b/apps/web/core/components/issues/parent-select-root.tsx
index d82c770f325..0e70fc6944e 100644
--- a/apps/web/core/components/issues/parent-select-root.tsx
+++ b/apps/web/core/components/issues/parent-select-root.tsx
@@ -9,7 +9,7 @@ import React from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 // components
 import type { TIssueOperations } from "@/components/issues/issue-detail";
 import { IssueParentSelect } from "@/components/issues/issue-detail/parent-select";
diff --git a/apps/web/core/components/issues/peek-overview/header.tsx b/apps/web/core/components/issues/peek-overview/header.tsx
index 1ba6f471d19..b53da715c4b 100644
--- a/apps/web/core/components/issues/peek-overview/header.tsx
+++ b/apps/web/core/components/issues/peek-overview/header.tsx
@@ -17,11 +17,11 @@ import {
 } from "@makeplane/propel/icons";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { TNameDescriptionLoader } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
-import { CustomSelect } from "@plane/ui";
+import { CustomSelect } from "@plane/blocks/dropdowns";
 import { copyUrlToClipboard, generateWorkItemLink } from "@plane/utils";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
@@ -33,7 +33,8 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
 import { IssueSubscription } from "../issue-detail/subscription";
 import { WorkItemDetailQuickActions } from "../issue-layouts/quick-action-dropdowns";
 import { NameDescriptionUpdateStatus } from "../issue-update-status";
-import { IconButton } from "@plane/propel/icon-button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 
 export type TPeekModes = "side-peek" | "modal" | "full-screen";
 
@@ -212,7 +213,13 @@ export const IssuePeekOverviewHeader = observer(function IssuePeekOverviewHeader
             <IssueSubscription workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
           )}
           <Tooltip label={t("common.actions.copy_link")} disabled={isMobile}>
-            <IconButton variant="secondary" size="lg" onClick={handleCopyText} icon={LinkOutline} />
+            <IconButton
+              variant="secondary"
+              size="md"
+              onClick={handleCopyText}
+              icon={<Icon icon={LinkOutline} />}
+              aria-label={t("common.actions.copy_link")}
+            />
           </Tooltip>
           {issueDetails && (
             <WorkItemDetailQuickActions
diff --git a/apps/web/core/components/issues/peek-overview/loader.tsx b/apps/web/core/components/issues/peek-overview/loader.tsx
index 51323d55588..42e294a00f2 100644
--- a/apps/web/core/components/issues/peek-overview/loader.tsx
+++ b/apps/web/core/components/issues/peek-overview/loader.tsx
@@ -6,7 +6,7 @@
 
 import { ArrowNarrowRightOutline } from "@makeplane/propel/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // hooks
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
diff --git a/apps/web/core/components/issues/peek-overview/root.tsx b/apps/web/core/components/issues/peek-overview/root.tsx
index b607158d802..37b0d61f44f 100644
--- a/apps/web/core/components/issues/peek-overview/root.tsx
+++ b/apps/web/core/components/issues/peek-overview/root.tsx
@@ -11,7 +11,7 @@ import { usePathname } from "next/navigation";
 import useSWR from "swr";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/blocks/toast";
 import type { IWorkItemPeekOverview, TIssue } from "@plane/types";
 import { EIssueServiceType, EIssuesStoreType } from "@plane/types";
 // hooks
diff --git a/apps/web/core/components/issues/preview-card/root.tsx b/apps/web/core/components/issues/preview-card/root.tsx
index b3aa466ed52..a3e4915b573 100644
--- a/apps/web/core/components/issues/preview-card/root.tsx
+++ b/apps/web/core/components/issues/preview-card/root.tsx
@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 // plane imports
-import { PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
+import { PriorityIcon, StateGroupIcon } from "@plane/blocks/icons";
 import type { TIssue, TStateGroups } from "@plane/types";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
diff --git a/apps/web/core/components/issues/relations/issue-list-item.tsx b/apps/web/core/components/issues/relations/issue-list-item.tsx
index 58db2db88b2..18e8d3f742e 100644
--- a/apps/web/core/components/issues/relations/issue-list-item.tsx
+++ b/apps/web/core/components/issues/relations/issue-list-item.tsx
@@ -13,7 +13,8 @@ import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { TIssueRelationTypes } from "@plane/types";
 import type { TIssue, TIssueServiceType } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
-import { ControlLink, CustomMenu } from "@plane/ui";
+import { ControlLink } from "@plane/blocks/control-link";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 import { generateWorkItemLink } from "@plane/utils";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
diff --git a/apps/web/core/components/issues/workspace-draft/delete-modal.tsx b/apps/web/core/components/issues/workspace-draft/delete-modal.tsx
index 1b0634c2c01..5e4f1d14005 100644
--- a/apps/web/core/components/issues/workspace-draft/delete-modal.tsx
+++ b/apps/web/core/components/issues/workspace-draft/delete-modal.tsx
@@ -8,10 +8,10 @@ import { useEffect, useState } from "react";
 // types
 import { PROJECT_ERROR_MESSAGES, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TWorkspaceDraftIssue } from "@plane/types";
 // ui
-import { AlertModalCore } from "@plane/ui";
+import { AlertModalCore } from "@plane/blocks/modals";
 // constants
 // hooks
 import { useIssues } from "@/hooks/store/use-issues";
diff --git a/apps/web/core/components/issues/workspace-draft/draft-issue-block.tsx b/apps/web/core/components/issues/workspace-draft/draft-issue-block.tsx
index d863534670f..7cbd2288459 100644
--- a/apps/web/core/components/issues/workspace-draft/draft-issue-block.tsx
+++ b/apps/web/core/components/issues/workspace-draft/draft-issue-block.tsx
@@ -13,8 +13,8 @@ import { CopyOutline, DeleteOutline, EditOutline } from "@makeplane/propel/icons
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { TWorkspaceDraftIssue } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
-import type { TContextMenuItem } from "@plane/ui";
-import { Row } from "@plane/ui";
+import type { TContextMenuItem } from "@plane/blocks/dropdowns";
+import { Row } from "@plane/blocks/row";
 import { cn } from "@plane/utils";
 // hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
diff --git a/apps/web/core/components/issues/workspace-draft/empty-state.tsx b/apps/web/core/components/issues/workspace-draft/empty-state.tsx
index a5d4f84c8b6..30cb923a554 100644
--- a/apps/web/core/components/issues/workspace-draft/empty-state.tsx
+++ b/apps/web/core/components/issues/workspace-draft/empty-state.tsx
@@ -9,7 +9,7 @@ import { Fragment, useState } from "react";
 import { observer } from "mobx-react";
 import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { EmptyStateDetailed } from "@plane/blocks/empty-state";
 import { EIssuesStoreType, EUserWorkspaceRoles } from "@plane/types";
 import { CreateUpdateIssueModal } from "@/components/issues/issue-modal/modal";
 // constants
diff --git a/apps/web/core/components/issues/workspace-draft/quick-action.tsx b/apps/web/core/components/issues/workspace-draft/quick-action.tsx
index 50b4ed498e1..686a8cc7fe5 100644
--- a/apps/web/core/components/issues/workspace-draft/quick-action.tsx
+++ b/apps/web/core/components/issues/workspace-draft/quick-action.tsx
@@ -7,8 +7,8 @@
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 // ui
-import type { TContextMenuItem } from "@plane/ui";
-import { ContextMenu, CustomMenu } from "@plane/ui";
+import type { TContextMenuItem } from "@plane/blocks/dropdowns";
+import { ContextMenu, CustomMenu } from "@plane/blocks/dropdowns";
 // helpers
 import { cn } from "@plane/utils";
 
diff --git a/apps/web/core/components/issues/workspace-draft/root.tsx b/apps/web/core/components/issues/workspace-draft/root.tsx
index b620a95af3f..722b5375274 100644
--- a/apps/web/core/components/issues/workspace-draft/root.tsx
+++ b/apps/web/core/components/issues/workspace-draft/root.tsx
@@ -10,7 +10,7 @@ import useSWR from "swr";
 // plane imports
 import { EUserPermissionsLevel, EDraftIssuePaginationType } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { EmptyStateDetailed } from "@plane/blocks/empty-state";
 import { EUserWorkspaceRoles } from "@plane/types";
 // components
 import { cn } from "@plane/utils";
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 70be4ca9198..58b0496b6d7 100644
--- a/apps/web/core/components/labels/create-update-label-inline.tsx
+++ b/apps/web/core/components/labels/create-update-label-inline.tsx
@@ -15,8 +15,8 @@ import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { getRandomLabelColor, LABEL_COLOR_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IIssueLabel } from "@plane/types";
 
 // error codes
@@ -238,19 +238,18 @@ export const CreateUpdateLabelInline = observer(
               )}
             />
           </div>
-          <Button variant="secondary" onClick={() => handleClose()}>
-            {t("cancel")}
-          </Button>
+          <Button variant="secondary" size="sm" stretch="auto" onClick={() => handleClose()} label={t("cancel")} />
           <Button
             variant="primary"
+            size="sm"
+            stretch="auto"
             onClick={(e) => {
               e.preventDefault();
               handleSubmit(handleFormSubmit)();
             }}
             loading={isSubmitting}
-          >
-            {isUpdating ? (isSubmitting ? t("updating") : t("update")) : isSubmitting ? t("adding") : t("add")}
-          </Button>
+            label={isUpdating ? (isSubmitting ? t("updating") : t("update")) : isSubmitting ? t("adding") : t("add")}
+          />
         </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/delete-label-modal.tsx b/apps/web/core/components/labels/delete-label-modal.tsx
index 9adc238349e..bb062ac97f8 100644
--- a/apps/web/core/components/labels/delete-label-modal.tsx
+++ b/apps/web/core/components/labels/delete-label-modal.tsx
@@ -8,10 +8,10 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // types
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IIssueLabel } from "@plane/types";
 // ui
-import { AlertModalCore } from "@plane/ui";
+import { AlertModalCore } from "@plane/blocks/modals";
 // hooks
 import { useLabel } from "@/hooks/store/use-label";
 
diff --git a/apps/web/core/components/labels/label-block/label-item-block.tsx b/apps/web/core/components/labels/label-block/label-item-block.tsx
index 4dcf69237c3..6955189636f 100644
--- a/apps/web/core/components/labels/label-block/label-item-block.tsx
+++ b/apps/web/core/components/labels/label-block/label-item-block.tsx
@@ -9,12 +9,13 @@ import { useRef, useState } from "react";
 import type { LucideIcon } from "lucide-react";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
-import type { ISvgIcons } from "@plane/propel/icons";
+import type { ISvgIcons } from "@plane/blocks/icons";
 import { CloseOutline } from "@makeplane/propel/icons";
 // types
 import type { IIssueLabel } from "@plane/types";
 // ui
-import { CustomMenu, DragHandle } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
+import { DragHandle } from "@plane/blocks/sortable";
 // helpers
 import { cn } from "@plane/utils";
 // components
diff --git a/apps/web/core/components/labels/label-drag-n-drop-HOC.tsx b/apps/web/core/components/labels/label-drag-n-drop-HOC.tsx
index 483e2cfebc0..56accd60fda 100644
--- a/apps/web/core/components/labels/label-drag-n-drop-HOC.tsx
+++ b/apps/web/core/components/labels/label-drag-n-drop-HOC.tsx
@@ -17,7 +17,7 @@ import { createRoot } from "react-dom/client";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import type { IIssueLabel, InstructionType } from "@plane/types";
 // ui
-import { DropIndicator } from "@plane/ui";
+import { DropIndicator } from "@plane/blocks/sortable";
 // components
 import { useUserPermissions } from "@/hooks/store/user";
 import { LabelName } from "./label-block/label-name";
@@ -160,7 +160,7 @@ export const LabelDndHOC = observer(function LabelDndHOC(props: Props) {
         },
       })
     );
-  }, [labelRef?.current, dragHandleRef?.current, label, isChild, isGroup, isLastChild, onDrop]);
+  }, [labelRef?.current, label, isChild, isGroup, isLastChild, onDrop]);
 
   const isMakeChild = instruction == "make-child";
 
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 6bb506970ae..92d0d0fa04c 100644
--- a/apps/web/core/components/labels/project-setting-label-list.tsx
+++ b/apps/web/core/components/labels/project-setting-label-list.tsx
@@ -10,10 +10,10 @@ 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 { EmptyStateCompact } from "@plane/propel/empty-state";
+import { Button } from "@makeplane/propel/components/button";
+import { EmptyStateCompact } from "@plane/blocks/empty-state";
 import type { IIssueLabel } from "@plane/types";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 import type { TLabelOperationsCallbacks } from "@/components/labels";
 import {
   CreateUpdateLabelInline,
@@ -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" onClick={newLabel} label={t("common.add_label")} />
           )
         }
       />
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 01de02caf85..f1c3de1b64a 100644
--- a/apps/web/core/components/license/modal/card/checkout-button.tsx
+++ b/apps/web/core/components/license/modal/card/checkout-button.tsx
@@ -6,9 +6,9 @@
 
 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";
+import { Loader } from "@plane/blocks/loader";
 // local imports
 import { DiscountInfo } from "./discount-info";
 
@@ -75,8 +75,9 @@ export const PlanCheckoutButton = observer(function PlanCheckoutButton(props: Pr
         <div className="flex w-full flex-col items-center justify-center space-y-4">
           <Button
             variant="primary"
-            size="lg"
-            className="w-56"
+            size="md"
+            stretch="auto"
+            render={<button className="w-56" />}
             onClick={() => {
               if (product && price.id) {
                 handleCheckout({
@@ -87,9 +88,10 @@ export const PlanCheckoutButton = observer(function PlanCheckoutButton(props: Pr
               }
             }}
             disabled={!!upgradeLoaderType}
-          >
-            {upgradeLoaderType === planVariant ? "Redirecting to Stripe" : (upgradeCTA ?? `Upgrade to ${planeName}`)}
-          </Button>
+            label={
+              upgradeLoaderType === planVariant ? "Redirecting to Stripe" : (upgradeCTA ?? `Upgrade to ${planeName}`)
+            }
+          />
           {isTrialAllowed && !isSelfHosted && (
             <div className="mt-1 h-3">
               {renderTrialButton &&
diff --git a/apps/web/core/components/license/modal/card/discount-info.tsx b/apps/web/core/components/license/modal/card/discount-info.tsx
index 7f25a2a0e3b..b49661cc416 100644
--- a/apps/web/core/components/license/modal/card/discount-info.tsx
+++ b/apps/web/core/components/license/modal/card/discount-info.tsx
@@ -21,7 +21,7 @@ type TDiscountInfoProps = {
   subscriptionType: EProductSubscriptionEnum;
 };
 
-const PLANS_WITH_DISCOUNT = [EProductSubscriptionEnum.PRO];
+const PLANS_WITH_DISCOUNT = new Set([EProductSubscriptionEnum.PRO]);
 
 const getActualPrice = (frequency: TBillingFrequency, subscriptionType: EProductSubscriptionEnum): number | null => {
   switch (subscriptionType) {
@@ -37,7 +37,7 @@ export function DiscountInfo({ className, currency, frequency, price, subscripti
   // derived values
   const actualPrice = getActualPrice(frequency, subscriptionType);
 
-  if (!PLANS_WITH_DISCOUNT.includes(subscriptionType)) {
+  if (!PLANS_WITH_DISCOUNT.has(subscriptionType)) {
     return (
       <>
         {currency}
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 c12ee704229..0e4fdd98280 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";
+import { Loader } from "@plane/blocks/loader";
 // local imports
 import { BasePaidPlanCard } from "./base-paid-plan-card";
 
@@ -72,9 +71,14 @@ 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>
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            nativeButton={false}
+            render={<a href={href} target="_blank" className="w-56" rel="noreferrer" />}
+            label="Talk to Sales"
+          />
           {isTrialAllowed && !isSelfHosted && (
             <div className="mt-4 h-4">
               {renderTrialButton &&
diff --git a/apps/web/core/components/license/modal/upgrade-modal.tsx b/apps/web/core/components/license/modal/upgrade-modal.tsx
index 236d2824282..87d8119d468 100644
--- a/apps/web/core/components/license/modal/upgrade-modal.tsx
+++ b/apps/web/core/components/license/modal/upgrade-modal.tsx
@@ -16,7 +16,7 @@ import {
   TALK_TO_SALES_URL,
 } from "@plane/constants";
 import { EProductSubscriptionEnum } from "@plane/types";
-import { EModalWidth, ModalCore } from "@plane/ui";
+import { EModalWidth, ModalCore } from "@plane/blocks/modals";
 import { cn } from "@plane/utils";
 // components
 import { FreePlanCard, PlanUpgradeCard } from "@/components/license";
diff --git a/apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx b/apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx
index bbec9a47571..7d0bfa0ee8d 100644
--- a/apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx
+++ b/apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx
@@ -13,7 +13,8 @@ import { EEstimateSystem } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import type { TModulePlotType } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
-import { CustomSelect, Spinner } from "@plane/ui";
+import { CustomSelect } from "@plane/blocks/dropdowns";
+import { Spinner } from "@plane/blocks/spinner";
 // components
 // constants
 // helpers
diff --git a/apps/web/core/components/modules/analytics-sidebar/root.tsx b/apps/web/core/components/modules/analytics-sidebar/root.tsx
index ad8edb03a4d..7a6fd65832e 100644
--- a/apps/web/core/components/modules/analytics-sidebar/root.tsx
+++ b/apps/web/core/components/modules/analytics-sidebar/root.tsx
@@ -22,11 +22,12 @@ import { Disclosure, Transition } from "@headlessui/react";
 import { MODULE_STATUS, EUserPermissions, EUserPermissionsLevel, EEstimateSystem } from "@plane/constants";
 // plane types
 import { useTranslation } from "@plane/i18n";
-import { ModuleStatusIcon } from "@plane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { ModuleStatusIcon } from "@plane/blocks/icons";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { ILinkDetails, IModule, ModuleLink } from "@plane/types";
 // plane ui
-import { Loader, CustomSelect } from "@plane/ui";
+import { CustomSelect } from "@plane/blocks/dropdowns";
+import { Loader } from "@plane/blocks/loader";
 import { TextArea } from "@makeplane/propel/components/text-area";
 // components
 // helpers
diff --git a/apps/web/core/components/modules/applied-filters/root.tsx b/apps/web/core/components/modules/applied-filters/root.tsx
index e2db827ad32..36e7c8b20b8 100644
--- a/apps/web/core/components/modules/applied-filters/root.tsx
+++ b/apps/web/core/components/modules/applied-filters/root.tsx
@@ -9,7 +9,7 @@ import { PillButton } from "@makeplane/propel/components/pill";
 import { CloseOutline } from "@makeplane/propel/icons";
 import type { TModuleDisplayFilters, TModuleFilters } from "@plane/types";
 // components
-import { Header, EHeaderVariant } from "@plane/ui";
+import { Header, EHeaderVariant } from "@plane/blocks/header";
 import { replaceUnderscoreIfSnakeCase } from "@plane/utils";
 import { AppliedDateFilters, AppliedMembersFilters, AppliedStatusFilters } from "@/components/modules";
 // helpers
@@ -25,7 +25,7 @@ type Props = {
   isArchived?: boolean;
 };
 
-const MEMBERS_FILTERS = ["lead", "members"];
+const MEMBERS_FILTERS = new Set(["lead", "members"]);
 const DATE_FILTERS = ["start_date", "target_date"];
 
 export function ModuleAppliedFiltersList(props: Props) {
@@ -75,7 +75,7 @@ export function ModuleAppliedFiltersList(props: Props) {
                     values={value}
                   />
                 )}
-                {MEMBERS_FILTERS.includes(filterKey) && (
+                {MEMBERS_FILTERS.has(filterKey) && (
                   <AppliedMembersFilters
                     editable={isEditingAllowed}
                     handleRemove={(val) => handleRemoveFilter(filterKey, val)}
diff --git a/apps/web/core/components/modules/applied-filters/status.tsx b/apps/web/core/components/modules/applied-filters/status.tsx
index 7fdfa710e51..07b901863ed 100644
--- a/apps/web/core/components/modules/applied-filters/status.tsx
+++ b/apps/web/core/components/modules/applied-filters/status.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // ui
 import { MODULE_STATUS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { ModuleStatusIcon } from "@plane/propel/icons";
+import { ModuleStatusIcon } from "@plane/blocks/icons";
 import { CloseOutline } from "@makeplane/propel/icons";
 // constants
 
diff --git a/apps/web/core/components/modules/archived-modules/modal.tsx b/apps/web/core/components/modules/archived-modules/modal.tsx
index 58067d62c64..a0d13984d16 100644
--- a/apps/web/core/components/modules/archived-modules/modal.tsx
+++ b/apps/web/core/components/modules/archived-modules/modal.tsx
@@ -6,9 +6,9 @@
 
 import { useState } from "react";
 // ui
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // hooks
 import { useModule } from "@/hooks/store/use-module";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -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" onClick={onClose} label="Cancel" />
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            tabIndex={1}
+            onClick={handleArchiveModule}
+            loading={isArchiving}
+            label={isArchiving ? "Archiving" : "Archive"}
+          />
         </div>
       </div>
     </ModalCore>
diff --git a/apps/web/core/components/modules/archived-modules/root.tsx b/apps/web/core/components/modules/archived-modules/root.tsx
index 716ccbcdf12..d78ec22a50d 100644
--- a/apps/web/core/components/modules/archived-modules/root.tsx
+++ b/apps/web/core/components/modules/archived-modules/root.tsx
@@ -10,7 +10,7 @@ import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { EmptyStateDetailed } from "@plane/blocks/empty-state";
 import type { TModuleFilters } from "@plane/types";
 // components
 import { calculateTotalFilters } from "@plane/utils";
diff --git a/apps/web/core/components/modules/delete-module-modal.tsx b/apps/web/core/components/modules/delete-module-modal.tsx
index f3bfe380cbc..64dea0ee717 100644
--- a/apps/web/core/components/modules/delete-module-modal.tsx
+++ b/apps/web/core/components/modules/delete-module-modal.tsx
@@ -10,10 +10,10 @@ import { useParams } from "next/navigation";
 // types
 import { PROJECT_ERROR_MESSAGES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IModule } from "@plane/types";
 // ui
-import { AlertModalCore } from "@plane/ui";
+import { AlertModalCore } from "@plane/blocks/modals";
 // constants
 // hooks
 import { useModule } from "@/hooks/store/use-module";
diff --git a/apps/web/core/components/modules/dropdowns/filters/lead.tsx b/apps/web/core/components/modules/dropdowns/filters/lead.tsx
index b47ec8c3678..9cc6ec30b55 100644
--- a/apps/web/core/components/modules/dropdowns/filters/lead.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/lead.tsx
@@ -9,7 +9,7 @@ import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 // plane ui
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
diff --git a/apps/web/core/components/modules/dropdowns/filters/members.tsx b/apps/web/core/components/modules/dropdowns/filters/members.tsx
index b13b7e35886..f3fdc96818c 100644
--- a/apps/web/core/components/modules/dropdowns/filters/members.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/members.tsx
@@ -9,7 +9,7 @@ import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 // plane ui
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
diff --git a/apps/web/core/components/modules/dropdowns/filters/root.tsx b/apps/web/core/components/modules/dropdowns/filters/root.tsx
index 857ea730028..d1dff27c414 100644
--- a/apps/web/core/components/modules/dropdowns/filters/root.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/root.tsx
@@ -6,7 +6,7 @@
 
 import { useState } from "react";
 import { observer } from "mobx-react";
-import type { TModuleStatus } from "@plane/propel/icons";
+import type { TModuleStatus } from "@plane/blocks/icons";
 // plane imports
 import { CloseOutline, SearchOutline } from "@makeplane/propel/icons";
 import type { TModuleDisplayFilters, TModuleFilters } from "@plane/types";
diff --git a/apps/web/core/components/modules/dropdowns/filters/status.tsx b/apps/web/core/components/modules/dropdowns/filters/status.tsx
index c6759089fd9..0517eafdad0 100644
--- a/apps/web/core/components/modules/dropdowns/filters/status.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/status.tsx
@@ -8,7 +8,7 @@ import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { MODULE_STATUS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { ModuleStatusIcon } from "@plane/propel/icons";
+import { ModuleStatusIcon } from "@plane/blocks/icons";
 import type { TModuleStatus } from "@plane/types";
 // components
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
diff --git a/apps/web/core/components/modules/dropdowns/order-by.tsx b/apps/web/core/components/modules/dropdowns/order-by.tsx
index cc64d76f25b..046802585fa 100644
--- a/apps/web/core/components/modules/dropdowns/order-by.tsx
+++ b/apps/web/core/components/modules/dropdowns/order-by.tsx
@@ -7,12 +7,10 @@
 import { ChevronDownOutline, SortAscendingOutline, SortDescendingOutline, TickOutline } from "@makeplane/propel/icons";
 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 type { TModuleOrderByOptions } from "@plane/types";
 // ui
-import { CustomMenu } from "@plane/ui";
-// helpers
-import { cn } from "@plane/utils";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 // types
 // constants
 
@@ -34,11 +32,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 className="px-2 text-tertiary" />}>
           {!isDescending ? <SortAscendingOutline className="size-3" /> : <SortDescendingOutline className="size-3" />}
           {orderByDetails && t(orderByDetails?.i18n_label)}
           <ChevronDownOutline className="size-3" />
-        </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 c799e56c03e..278b3e8a9f5 100644
--- a/apps/web/core/components/modules/form.tsx
+++ b/apps/web/core/components/modules/form.tsx
@@ -12,7 +12,7 @@ import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
 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";
 import { getDate, renderFormattedPayloadDate, getTabIndex } from "@plane/utils";
 // components
@@ -243,18 +243,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"
+          onClick={handleClose}
+          tabIndex={getIndex("cancel")}
+          label={t("cancel")}
+        />
+        <Button
+          variant="primary"
+          size="md"
+          stretch="auto"
+          type="submit"
+          loading={isSubmitting}
+          tabIndex={getIndex("submit")}
+          label={
+            status
+              ? isSubmitting
+                ? t("updating")
+                : t("project_module.update_module")
+              : isSubmitting
+                ? t("creating")
+                : t("project_module.create_module")
+          }
+        />
       </div>
     </form>
   );
diff --git a/apps/web/core/components/modules/gantt-chart/blocks.tsx b/apps/web/core/components/modules/gantt-chart/blocks.tsx
index 9a7b4b8679c..85b1b359a3a 100644
--- a/apps/web/core/components/modules/gantt-chart/blocks.tsx
+++ b/apps/web/core/components/modules/gantt-chart/blocks.tsx
@@ -9,7 +9,7 @@ import Link from "next/link";
 import { useParams } from "next/navigation";
 // ui
 import { MODULE_STATUS } from "@plane/constants";
-import { ModuleStatusIcon } from "@plane/propel/icons";
+import { ModuleStatusIcon } from "@plane/blocks/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 // components
 import { SIDEBAR_WIDTH } from "@/components/gantt-chart/constants";
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 3d437a07e01..8761c830955 100644
--- a/apps/web/core/components/modules/links/create-update-modal.tsx
+++ b/apps/web/core/components/modules/links/create-update-modal.tsx
@@ -9,11 +9,11 @@ import { Controller, useForm } from "react-hook-form";
 // plane types
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { ILinkDetails, ModuleLink } from "@plane/types";
 // plane ui
-import { ModalCore } from "@plane/ui";
+import { ModalCore } from "@plane/blocks/modals";
 type Props = {
   createLink: (formData: ModuleLink) => Promise<void>;
   data?: ILinkDetails | null;
@@ -144,12 +144,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" onClick={onClose} label="Cancel" />
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            type="submit"
+            loading={isSubmitting}
+            label={data ? (isSubmitting ? "Updating link" : "Update link") : isSubmitting ? "Adding link" : "Add link"}
+          />
         </div>
       </form>
     </ModalCore>
diff --git a/apps/web/core/components/modules/links/list-item.tsx b/apps/web/core/components/modules/links/list-item.tsx
index 3bf9367547f..a84cec07bf3 100644
--- a/apps/web/core/components/modules/links/list-item.tsx
+++ b/apps/web/core/components/modules/links/list-item.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 
 import { CopyOutline, DeleteOutline, EditOutline } from "@makeplane/propel/icons";
 // plane types
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { ILinkDetails } from "@plane/types";
 // plane ui
diff --git a/apps/web/core/components/modules/modal.tsx b/apps/web/core/components/modules/modal.tsx
index 621bfa07585..75c136e57a9 100644
--- a/apps/web/core/components/modules/modal.tsx
+++ b/apps/web/core/components/modules/modal.tsx
@@ -8,9 +8,9 @@ import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useForm } from "react-hook-form";
 // Plane imports
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IModule } from "@plane/types";
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // components
 import { ModuleForm } from "@/components/modules";
 // hooks
diff --git a/apps/web/core/components/modules/module-card-item.tsx b/apps/web/core/components/modules/module-card-item.tsx
index f657d6645df..55398c6f2cb 100644
--- a/apps/web/core/components/modules/module-card-item.tsx
+++ b/apps/web/core/components/modules/module-card-item.tsx
@@ -14,10 +14,11 @@ import { InfoOutline, UserAltOutline, WorkItemsOutline } from "@makeplane/propel
 import { MODULE_STATUS, EUserPermissions, EUserPermissionsLevel, IS_FAVORITE_MENU_OPEN } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
 import { LinearProgress } from "@makeplane/propel/components/linear-progress";
-import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { IModule } from "@plane/types";
-import { Card, FavoriteStar } from "@plane/ui";
+import { Card } from "@plane/blocks/card";
+import { FavoriteStar } from "@plane/blocks/favorite-star";
 import { getDate, renderFormattedPayloadDate, generateQueryParams } from "@plane/utils";
 // components
 import { DateRangeDropdown } from "@/components/dropdowns/date-range";
diff --git a/apps/web/core/components/modules/module-list-item-action.tsx b/apps/web/core/components/modules/module-list-item-action.tsx
index 34c9f8db567..27f20647ae1 100644
--- a/apps/web/core/components/modules/module-list-item-action.tsx
+++ b/apps/web/core/components/modules/module-list-item-action.tsx
@@ -12,10 +12,10 @@ import { UserAltOutline } from "@makeplane/propel/icons";
 import { MODULE_STATUS, EUserPermissions, EUserPermissionsLevel, IS_FAVORITE_MENU_OPEN } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { IModule } from "@plane/types";
-import { FavoriteStar } from "@plane/ui";
+import { FavoriteStar } from "@plane/blocks/favorite-star";
 import { renderFormattedPayloadDate, getDate } from "@plane/utils";
 // components
 import { DateRangeDropdown } from "@/components/dropdowns/date-range";
diff --git a/apps/web/core/components/modules/module-status-dropdown.tsx b/apps/web/core/components/modules/module-status-dropdown.tsx
index ef532e68b16..380debfb5e7 100644
--- a/apps/web/core/components/modules/module-status-dropdown.tsx
+++ b/apps/web/core/components/modules/module-status-dropdown.tsx
@@ -8,10 +8,10 @@ import React from "react";
 import { observer } from "mobx-react";
 import { MODULE_STATUS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import type { TModuleStatus } from "@plane/propel/icons";
-import { ModuleStatusIcon } from "@plane/propel/icons";
+import type { TModuleStatus } from "@plane/blocks/icons";
+import { ModuleStatusIcon } from "@plane/blocks/icons";
 import type { IModule } from "@plane/types";
-import { CustomSelect } from "@plane/ui";
+import { CustomSelect } from "@plane/blocks/dropdowns";
 
 type Props = {
   isDisabled: boolean;
diff --git a/apps/web/core/components/modules/module-view-header.tsx b/apps/web/core/components/modules/module-view-header.tsx
index 9f20e1efe90..d0ef2f7cbc4 100644
--- a/apps/web/core/components/modules/module-view-header.tsx
+++ b/apps/web/core/components/modules/module-view-header.tsx
@@ -28,7 +28,8 @@ import { useMember } from "@/hooks/store/use-member";
 import { useModuleFilter } from "@/hooks/store/use-module-filter";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 import { ModuleLayoutIcon } from "./module-layout-icon";
-import { IconButton } from "@plane/propel/icon-button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 // i18n
 
 export const ModuleViewHeader = observer(function ModuleViewHeader() {
@@ -103,13 +104,14 @@ export const ModuleViewHeader = observer(function ModuleViewHeader() {
         {!isSearchOpen && (
           <IconButton
             variant="ghost"
-            size="lg"
-            className="p- -mr-1"
+            size="md"
+            render={<button className="p- -mr-1" />}
             onClick={() => {
               setIsSearchOpen(true);
               inputRef.current?.focus();
             }}
-            icon={SearchOutline}
+            icon={<Icon icon={SearchOutline} />}
+            aria-label="Search"
           />
         )}
         <div
diff --git a/apps/web/core/components/modules/modules-list-view.tsx b/apps/web/core/components/modules/modules-list-view.tsx
index 0a5b1abdc47..fd8770728b7 100644
--- a/apps/web/core/components/modules/modules-list-view.tsx
+++ b/apps/web/core/components/modules/modules-list-view.tsx
@@ -9,9 +9,10 @@ import { useParams, useSearchParams } from "next/navigation";
 // components
 import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { EmptyStateDetailed } from "@plane/blocks/empty-state";
 import { EUserProjectRoles } from "@plane/types";
-import { ContentWrapper, Row, ERowVariant } from "@plane/ui";
+import { ContentWrapper } from "@plane/blocks/content-wrapper";
+import { Row, ERowVariant } from "@plane/blocks/row";
 // components
 import { ListLayout } from "@/components/core/list";
 import { ModuleCardItem, ModuleListItem, ModulePeekOverview, ModulesListGanttChartView } from "@/components/modules";
diff --git a/apps/web/core/components/modules/quick-actions.tsx b/apps/web/core/components/modules/quick-actions.tsx
index ae112bf7e50..8b3fd0262b2 100644
--- a/apps/web/core/components/modules/quick-actions.tsx
+++ b/apps/web/core/components/modules/quick-actions.tsx
@@ -9,10 +9,11 @@ import { observer } from "mobx-react";
 import { MoreHorizontalOutline } from "@makeplane/propel/icons";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
-import { IconButton } from "@plane/propel/icon-button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { TContextMenuItem } from "@plane/ui";
-import { ContextMenu, CustomMenu } from "@plane/ui";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
+import type { TContextMenuItem } from "@plane/blocks/dropdowns";
+import { ContextMenu, CustomMenu } from "@plane/blocks/dropdowns";
 import { copyUrlToClipboard, cn } from "@plane/utils";
 // components
 import { useModuleMenuItems } from "@/components/common/quick-actions-helper";
@@ -135,7 +136,14 @@ export const ModuleQuickActions = observer(function ModuleQuickActions(props: Pr
       )}
       <ContextMenu parentRef={parentRef} items={CONTEXT_MENU_ITEMS} />
       <CustomMenu
-        customButton={<IconButton variant="tertiary" size="lg" icon={MoreHorizontalOutline} />}
+        customButton={
+          <IconButton
+            variant="tertiary"
+            size="md"
+            icon={<Icon icon={MoreHorizontalOutline} />}
+            aria-label="Module actions"
+          />
+        }
         placement="bottom-end"
         closeOnSelect
         buttonClassName={customClassName}
diff --git a/apps/web/core/components/modules/select/status.tsx b/apps/web/core/components/modules/select/status.tsx
index 8f5817e301a..a9e670dfe45 100644
--- a/apps/web/core/components/modules/select/status.tsx
+++ b/apps/web/core/components/modules/select/status.tsx
@@ -11,11 +11,11 @@ import type { FieldError, Control } from "react-hook-form";
 import { Controller } from "react-hook-form";
 import { MODULE_STATUS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { ModuleStatusIcon } from "@plane/propel/icons";
+import { ModuleStatusIcon } from "@plane/blocks/icons";
 import { StateOutline } from "@makeplane/propel/icons";
 import type { IModule } from "@plane/types";
 // ui
-import { CustomSelect } from "@plane/ui";
+import { CustomSelect } from "@plane/blocks/dropdowns";
 // types
 // constants
 
diff --git a/apps/web/core/components/modules/sidebar-select/select-status.tsx b/apps/web/core/components/modules/sidebar-select/select-status.tsx
index 72e034931ee..765c1cf6dfb 100644
--- a/apps/web/core/components/modules/sidebar-select/select-status.tsx
+++ b/apps/web/core/components/modules/sidebar-select/select-status.tsx
@@ -14,7 +14,7 @@ import { useTranslation } from "@plane/i18n";
 import { StateOutline } from "@makeplane/propel/icons";
 import type { IModule } from "@plane/types";
 // ui
-import { CustomSelect } from "@plane/ui";
+import { CustomSelect } from "@plane/blocks/dropdowns";
 // types
 // common
 // constants
diff --git a/apps/web/core/components/navigation/app-rail-hoc.tsx b/apps/web/core/components/navigation/app-rail-hoc.tsx
index 82f25e1f68d..5232d934581 100644
--- a/apps/web/core/components/navigation/app-rail-hoc.tsx
+++ b/apps/web/core/components/navigation/app-rail-hoc.tsx
@@ -8,7 +8,7 @@
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { PlaneNewIcon } from "@plane/propel/icons";
+import { PlaneNewIcon } from "@plane/blocks/icons";
 import type { AppSidebarItemData } from "@/components/sidebar/sidebar-item";
 import { useWorkspacePaths } from "@/hooks/use-workspace-paths";
 
diff --git a/apps/web/core/components/navigation/app-rail-root.tsx b/apps/web/core/components/navigation/app-rail-root.tsx
index a7cd6199e22..9f90330e9c3 100644
--- a/apps/web/core/components/navigation/app-rail-root.tsx
+++ b/apps/web/core/components/navigation/app-rail-root.tsx
@@ -8,7 +8,13 @@
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
 import { SettingsOutline, TickOutline } from "@makeplane/propel/icons";
-import { ContextMenu } from "@plane/propel/context-menu";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@makeplane/propel/components/context-menu";
 import { cn } from "@plane/utils";
 // components
 import { AppSidebarItem } from "@/components/sidebar/sidebar-item";
@@ -39,7 +45,7 @@ export const AppRailRoot = observer(() => {
       }}
     >
       <ContextMenu>
-        <ContextMenu.Trigger className="h-full">
+        <ContextMenuTrigger render={<div className="h-full" />}>
           <div className="flex h-full flex-col justify-between gap-4 px-2 py-3">
             <div
               className={cn("flex flex-col", {
@@ -60,27 +66,21 @@ export const AppRailRoot = observer(() => {
               />
             </div>
           </div>
-        </ContextMenu.Trigger>
-        <ContextMenu.Portal>
-          <ContextMenu.Content positionerClassName="z-30" className="outline-none">
-            <ContextMenu.Item onClick={() => updateDisplayMode("icon_only")}>
-              <div className="flex w-full items-center justify-between gap-2">
-                <span className="text-11">Icon only</span>
-                {preferences.displayMode === "icon_only" && <TickOutline className="size-3.5" />}
-              </div>
-            </ContextMenu.Item>
-            <ContextMenu.Item onClick={() => updateDisplayMode("icon_with_label")}>
-              <div className="flex w-full items-center justify-between gap-2">
-                <span className="text-11">Icon with name</span>
-                {preferences.displayMode === "icon_with_label" && <TickOutline className="size-3.5" />}
-              </div>
-            </ContextMenu.Item>
-            <ContextMenu.Separator />
-            <ContextMenu.Item onClick={toggleAppRail}>
-              <span className="text-11">{isCollapsed ? "Dock App Rail" : "Undock App Rail"}</span>
-            </ContextMenu.Item>
-          </ContextMenu.Content>
-        </ContextMenu.Portal>
+        </ContextMenuTrigger>
+        <ContextMenuContent>
+          <ContextMenuItem
+            onClick={() => updateDisplayMode("icon_only")}
+            label="Icon only"
+            trailing={preferences.displayMode === "icon_only" ? <TickOutline className="size-3.5" /> : undefined}
+          />
+          <ContextMenuItem
+            onClick={() => updateDisplayMode("icon_with_label")}
+            label="Icon with name"
+            trailing={preferences.displayMode === "icon_with_label" ? <TickOutline className="size-3.5" /> : undefined}
+          />
+          <ContextMenuSeparator />
+          <ContextMenuItem onClick={toggleAppRail} label={isCollapsed ? "Dock App Rail" : "Undock App Rail"} />
+        </ContextMenuContent>
       </ContextMenu>
     </div>
   );
diff --git a/apps/web/core/components/navigation/customize-navigation-dialog.tsx b/apps/web/core/components/navigation/customize-navigation-dialog.tsx
index 2682023b337..a73cf858408 100644
--- a/apps/web/core/components/navigation/customize-navigation-dialog.tsx
+++ b/apps/web/core/components/navigation/customize-navigation-dialog.tsx
@@ -12,7 +12,8 @@ import { CloseOutline, DragDropOutline } from "@makeplane/propel/icons";
 import { WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Checkbox } from "@makeplane/propel/components/checkbox";
-import { EModalPosition, EModalWidth, ModalCore, Sortable } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
+import { Sortable } from "@plane/blocks/sortable";
 import { cn } from "@plane/utils";
 // hooks
 import { useUserPermissions } from "@/hooks/store/user";
diff --git a/apps/web/core/components/navigation/project-actions-menu.tsx b/apps/web/core/components/navigation/project-actions-menu.tsx
index 51b99f63077..30e29a13f02 100644
--- a/apps/web/core/components/navigation/project-actions-menu.tsx
+++ b/apps/web/core/components/navigation/project-actions-menu.tsx
@@ -16,7 +16,7 @@ import {
 } from "@makeplane/propel/icons";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 
 type Props = {
   workspaceSlug: string;
diff --git a/apps/web/core/components/navigation/project-header-button.tsx b/apps/web/core/components/navigation/project-header-button.tsx
index bb9c87ba9e2..511bfb05a39 100644
--- a/apps/web/core/components/navigation/project-header-button.tsx
+++ b/apps/web/core/components/navigation/project-header-button.tsx
@@ -6,7 +6,7 @@
 
 import type { TPartialProject } from "@plane/types";
 // plane propel imports
-import { Logo } from "@plane/propel/emoji-icon-picker";
+import { Logo } from "@plane/blocks/emoji-icon-picker";
 import { ChevronDownOutline } from "@makeplane/propel/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 
diff --git a/apps/web/core/components/navigation/project-header.tsx b/apps/web/core/components/navigation/project-header.tsx
index e7c7fd24e44..0b72b779777 100644
--- a/apps/web/core/components/navigation/project-header.tsx
+++ b/apps/web/core/components/navigation/project-header.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { ProjectsOutline } from "@makeplane/propel/icons";
 import type { ICustomSearchSelectOption } from "@plane/types";
-import { CustomSearchSelect } from "@plane/ui";
+import { CustomSearchSelect } from "@plane/blocks/dropdowns";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 import { useUserPermissions } from "@/hooks/store/user";
diff --git a/apps/web/core/components/navigation/tab-navigation-overflow-menu.tsx b/apps/web/core/components/navigation/tab-navigation-overflow-menu.tsx
index 4375deb72b3..1fdaace612f 100644
--- a/apps/web/core/components/navigation/tab-navigation-overflow-menu.tsx
+++ b/apps/web/core/components/navigation/tab-navigation-overflow-menu.tsx
@@ -9,7 +9,7 @@ import { Link } from "react-router";
 import { DefaultTabOutline, MoreHorizontalOutline, PinOutline } from "@makeplane/propel/icons";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Menu } from "@plane/propel/menu";
+import { Menu, MenuContent, MenuItem, MenuTrigger } from "@makeplane/propel/components/menu";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import { cn } from "@plane/utils";
 // local imports
@@ -33,67 +33,65 @@ export function TabNavigationOverflowMenu({ overflowItems, isActive, tabPreferen
   const { t } = useTranslation();
 
   return (
-    <Menu
-      ellipsis
-      buttonClassName="!p-1.5"
-      optionsClassName="min-w-[200px] space-y-1"
-      customButton={
-        <div className="flex items-center justify-center rounded-md p-1 transition-colors hover:bg-layer-1">
-          <MoreHorizontalOutline className="h-4 w-4 text-secondary" />
-        </div>
-      }
-    >
-      {overflowItems.map((item) => {
-        const itemIsActive = isActive(item);
-        // isHidden = true only for user-hidden items (not space-constrained overflow)
-        const isHidden = tabPreferences.hiddenTabs.includes(item.key);
-        const isDefault = item.key === tabPreferences.defaultTab;
+    <Menu>
+      <MenuTrigger
+        render={<div className="flex items-center justify-center rounded-md p-1 transition-colors hover:bg-layer-1" />}
+      >
+        <MoreHorizontalOutline className="h-4 w-4 text-secondary" />
+      </MenuTrigger>
+      <MenuContent>
+        {overflowItems.map((item) => {
+          const itemIsActive = isActive(item);
+          // isHidden = true only for user-hidden items (not space-constrained overflow)
+          const isHidden = tabPreferences.hiddenTabs.includes(item.key);
+          const isDefault = item.key === tabPreferences.defaultTab;
 
-        return (
-          <Menu.MenuItem key={`${item.key}-overflow-${itemIsActive ? "active" : "inactive"}`} className="w-full p-0">
-            <div className="group/menu-item flex w-full items-center justify-between">
-              <Link to={item.href} className="w-full min-w-0 flex-1 p-1">
-                <span className="text-11">{t(item.i18n_key)}</span>
-              </Link>
-              <div className="flex items-center">
-                {/* Show Eye icon ONLY for user-hidden items */}
-                {isHidden && (
-                  <button
-                    type="button"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      e.preventDefault();
-                      onShow(item.key);
-                    }}
-                    className="invisible rounded-sm p-1 text-tertiary transition-colors group-hover/menu-item:visible hover:text-primary"
-                    title="Show"
-                  >
-                    <PinOutline className="size-3" />
-                  </button>
-                )}
-                <Tooltip label={isDefault ? "Clear default" : "Set as default"}>
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      e.preventDefault();
-                      onToggleDefault(item.key);
-                    }}
-                    className={cn(
-                      "invisible rounded-sm p-1 text-tertiary transition-colors group-hover/menu-item:visible hover:text-primary",
-                      {
-                        visible: isDefault,
-                      }
-                    )}
-                    title={isDefault ? "Clear default" : "Set as default"}
-                  >
-                    <DefaultTabOutline className="size-3" />
-                  </button>
-                </Tooltip>
-              </div>
-            </div>
-          </Menu.MenuItem>
-        );
-      })}
+          return (
+            <MenuItem
+              key={`${item.key}-overflow-${itemIsActive ? "active" : "inactive"}`}
+              render={<Link to={item.href} className="group/menu-item" />}
+              label={t(item.i18n_key)}
+              trailing={
+                <div className="flex items-center">
+                  {/* Show Eye icon ONLY for user-hidden items */}
+                  {isHidden && (
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        onShow(item.key);
+                      }}
+                      className="invisible rounded-sm p-1 text-tertiary transition-colors group-hover/menu-item:visible hover:text-primary"
+                      title="Show"
+                    >
+                      <PinOutline className="size-3" />
+                    </button>
+                  )}
+                  <Tooltip label={isDefault ? "Clear default" : "Set as default"}>
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        onToggleDefault(item.key);
+                      }}
+                      className={cn(
+                        "invisible rounded-sm p-1 text-tertiary transition-colors group-hover/menu-item:visible hover:text-primary",
+                        {
+                          visible: isDefault,
+                        }
+                      )}
+                      title={isDefault ? "Clear default" : "Set as default"}
+                    >
+                      <DefaultTabOutline className="size-3" />
+                    </button>
+                  </Tooltip>
+                </div>
+              }
+            />
+          );
+        })}
+      </MenuContent>
     </Menu>
   );
 }
diff --git a/apps/web/core/components/navigation/tab-navigation-root.tsx b/apps/web/core/components/navigation/tab-navigation-root.tsx
index 26c670df03a..45f36f59e50 100644
--- a/apps/web/core/components/navigation/tab-navigation-root.tsx
+++ b/apps/web/core/components/navigation/tab-navigation-root.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { useParams, useLocation, Link, useNavigate } from "react-router";
 import { EUserPermissionsLevel, EUserPermissions } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { TabNavigationList, TabNavigationItem } from "@plane/propel/tab-navigation";
+import { TabNavigationList, TabNavigationItem } from "@plane/blocks/tab-navigation";
 import type { EUserProjectRoles } from "@plane/types";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
diff --git a/apps/web/core/components/navigation/tab-navigation-visible-item.tsx b/apps/web/core/components/navigation/tab-navigation-visible-item.tsx
index 3a32d49635a..ed807cef2d0 100644
--- a/apps/web/core/components/navigation/tab-navigation-visible-item.tsx
+++ b/apps/web/core/components/navigation/tab-navigation-visible-item.tsx
@@ -8,8 +8,13 @@ import { Link } from "react-router";
 import { DefaultTabOutline, UnpinOutline } from "@makeplane/propel/icons";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { ContextMenu } from "@plane/propel/context-menu";
-import { TabNavigationItem } from "@plane/propel/tab-navigation";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@makeplane/propel/components/context-menu";
+import { TabNavigationItem } from "@plane/blocks/tab-navigation";
 // local imports
 import type { TNavigationItem } from "./tab-navigation-root";
 import type { TTabPreferences } from "./tab-navigation-utils";
@@ -45,37 +50,31 @@ export function TabNavigationVisibleItem({
       )}
       <div key={`${item.key}-measure`} ref={itemRef}>
         <ContextMenu>
-          <ContextMenu.Trigger>
+          <ContextMenuTrigger>
             <Link key={`${item.key}-${isActive ? "active" : "inactive"}`} to={item.href}>
               <TabNavigationItem isActive={isActive}>
                 <span>{t(item.i18n_key)}</span>
               </TabNavigationItem>
             </Link>
-          </ContextMenu.Trigger>
-          <ContextMenu.Portal>
-            <ContextMenu.Content positionerClassName="z-30">
-              <ContextMenu.Item
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onToggleDefault(item.key);
-                }}
-                className="flex cursor-pointer items-center gap-2 text-secondary transition-colors"
-              >
-                <DefaultTabOutline className="size-3 shrink-0" />
-                <span className="text-11">{isDefault ? "Clear default" : "Set as default"}</span>
-              </ContextMenu.Item>
-              <ContextMenu.Item
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onHide(item.key);
-                }}
-                className="flex cursor-pointer items-center gap-2 text-secondary transition-colors"
-              >
-                <UnpinOutline className="size-3 shrink-0" />
-                <span className="text-11">Hide in more menu</span>
-              </ContextMenu.Item>
-            </ContextMenu.Content>
-          </ContextMenu.Portal>
+          </ContextMenuTrigger>
+          <ContextMenuContent>
+            <ContextMenuItem
+              onClick={(e) => {
+                e.stopPropagation();
+                onToggleDefault(item.key);
+              }}
+              icon={<DefaultTabOutline className="size-3 shrink-0" />}
+              label={isDefault ? "Clear default" : "Set as default"}
+            />
+            <ContextMenuItem
+              onClick={(e) => {
+                e.stopPropagation();
+                onHide(item.key);
+              }}
+              icon={<UnpinOutline className="size-3 shrink-0" />}
+              label="Hide in more menu"
+            />
+          </ContextMenuContent>
         </ContextMenu>
       </div>
     </div>
diff --git a/apps/web/core/components/navigation/use-project-actions.ts b/apps/web/core/components/navigation/use-project-actions.ts
index 1b881278dbb..9347d52c692 100644
--- a/apps/web/core/components/navigation/use-project-actions.ts
+++ b/apps/web/core/components/navigation/use-project-actions.ts
@@ -5,7 +5,7 @@
  */
 
 import { useCallback, useState } from "react";
-import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { setToast, TOAST_TYPE } from "@plane/blocks/toast";
 import { copyUrlToClipboard } from "@plane/utils";
 import type { TNavigationItem } from "@/components/navigation/tab-navigation-root";
 
diff --git a/apps/web/core/components/navigation/use-tab-preferences.ts b/apps/web/core/components/navigation/use-tab-preferences.ts
index a29829eea9b..d8f79131536 100644
--- a/apps/web/core/components/navigation/use-tab-preferences.ts
+++ b/apps/web/core/components/navigation/use-tab-preferences.ts
@@ -5,7 +5,7 @@
  */
 
 import { useMemo } from "react";
-import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { setToast, TOAST_TYPE } from "@plane/blocks/toast";
 import { useMember } from "@/hooks/store/use-member";
 import { useUser } from "@/hooks/store/user";
 import { DEFAULT_TAB_KEY } from "./tab-navigation-utils";
diff --git a/apps/web/core/components/onboarding/create-workspace.tsx b/apps/web/core/components/onboarding/create-workspace.tsx
index b7eae164897..f4f0705b999 100644
--- a/apps/web/core/components/onboarding/create-workspace.tsx
+++ b/apps/web/core/components/onboarding/create-workspace.tsx
@@ -13,11 +13,12 @@ import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
 // types
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/elements/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IUser, IWorkspace, TOnboardingSteps } from "@plane/types";
 // ui
-import { CustomSelect, Spinner } from "@plane/ui";
+import { CustomSelect } from "@plane/blocks/dropdowns";
+import { Spinner } from "@plane/blocks/spinner";
 import { validateWorkspaceName, validateSlug } from "@plane/utils";
 // hooks
 import { useWorkspace } from "@/hooks/store/use-workspace";
@@ -108,9 +109,10 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
         <>
           <Button
             variant="ghost"
-            size="xl"
-            className="flex w-full items-center gap-2 bg-surface-2 text-14"
+            size="lg"
+            stretch="full"
             onClick={handleCurrentViewChange}
+            render={<button type="button" className="flex items-center gap-2 bg-surface-2 text-14" />}
           >
             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">
@@ -266,7 +268,7 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
             )}
           </div>
         </div>
-        <Button variant="primary" type="submit" size="xl" className="w-full" disabled={isButtonDisabled}>
+        <Button variant="primary" type="submit" size="lg" stretch="full" disabled={isButtonDisabled}>
           {isSubmitting ? <Spinner height="20px" width="20px" /> : t("workspace_creation.button.default")}
         </Button>
       </form>
diff --git a/apps/web/core/components/onboarding/header.tsx b/apps/web/core/components/onboarding/header.tsx
index 4bb35e0be98..9fe1c9706fb 100644
--- a/apps/web/core/components/onboarding/header.tsx
+++ b/apps/web/core/components/onboarding/header.tsx
@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 // plane imports
-import { PlaneLockup } from "@plane/propel/icons";
+import { PlaneLockup } from "@plane/blocks/icons";
 import { ChevronLeftOutline } from "@makeplane/propel/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { TOnboardingStep } from "@plane/types";
diff --git a/apps/web/core/components/onboarding/invitations.tsx b/apps/web/core/components/onboarding/invitations.tsx
index 09152433c15..4feaf4eb8cd 100644
--- a/apps/web/core/components/onboarding/invitations.tsx
+++ b/apps/web/core/components/onboarding/invitations.tsx
@@ -8,11 +8,12 @@ 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 { Button as ButtonElement } from "@makeplane/propel/elements/button";
 import type { IWorkspaceMemberInvitation } from "@plane/types";
 // ui
 import { Checkbox } from "@makeplane/propel/components/checkbox";
-import { Spinner } from "@plane/ui";
+import { Spinner } from "@plane/blocks/spinner";
 import { truncateText } from "@plane/utils";
 // constants
 // helpers
@@ -98,15 +99,16 @@ export function Invitations(props: Props) {
             );
           })}
       </div>
-      <Button
+      <ButtonElement
         variant="primary"
-        size="xl"
-        className="w-full"
+        size="lg"
+        stretch="full"
+        type="button"
         onClick={submitInvitations}
         disabled={isJoiningWorkspaces || !invitationsRespond.length}
       >
         {isJoiningWorkspaces ? <Spinner height="20px" width="20px" /> : "Continue to workspace"}
-      </Button>
+      </ButtonElement>
       <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>
@@ -114,13 +116,13 @@ export function Invitations(props: Props) {
       </div>
       <Button
         variant="ghost"
-        size="xl"
-        className="w-full bg-surface-2 text-14"
+        size="lg"
+        stretch="full"
+        render={<button type="button" className="bg-surface-2 text-14" />}
         onClick={handleCurrentViewChange}
         disabled={isJoiningWorkspaces}
-      >
-        Create your own workspace
-      </Button>
+        label="Create your own workspace"
+      />
     </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 e83e5606a1a..749983cad31 100644
--- a/apps/web/core/components/onboarding/invite-members.tsx
+++ b/apps/web/core/components/onboarding/invite-members.tsx
@@ -26,11 +26,12 @@ 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 { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { Button as ButtonElement } from "@makeplane/propel/elements/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IUser, IWorkspace } from "@plane/types";
 // ui
-import { Spinner } from "@plane/ui";
+import { Spinner } from "@plane/blocks/spinner";
 // services
 import { WorkspaceService } from "@/services/workspace.service";
 // components
@@ -387,18 +388,16 @@ export function InviteMembers(props: Props) {
               </button>
             </div>
             <div className="mx-auto flex w-full max-w-96 flex-col items-center justify-center gap-4 px-8 sm:px-2">
-              <Button
+              <ButtonElement
                 variant="primary"
                 type="submit"
-                size="xl"
-                className="w-full"
+                size="lg"
+                stretch="full"
                 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>
+              </ButtonElement>
+              <Button variant="ghost" size="lg" stretch="full" onClick={nextStep} label="I’ll do it later" />
             </div>
           </form>
         </div>
diff --git a/apps/web/core/components/onboarding/profile-setup.tsx b/apps/web/core/components/onboarding/profile-setup.tsx
index d789d195ef9..de4d99be1f2 100644
--- a/apps/web/core/components/onboarding/profile-setup.tsx
+++ b/apps/web/core/components/onboarding/profile-setup.tsx
@@ -13,11 +13,12 @@ import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { E_PASSWORD_STRENGTH } from "@plane/constants";
 // types
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/elements/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IUser, TUserProfile, TOnboardingSteps } from "@plane/types";
 // ui
-import { PasswordStrengthIndicator, Spinner } from "@plane/ui";
+import { PasswordStrengthIndicator } from "@plane/blocks/form-fields";
+import { Spinner } from "@plane/blocks/spinner";
 // components
 import { cn, getFileURL, getPasswordStrength, validatePersonName } from "@plane/utils";
 import { UserImageUploadModal } from "@/components/core/modals/user-image-upload-modal";
@@ -552,7 +553,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
               </div>
             </>
           )}
-          <Button variant="primary" type="submit" size="xl" className="w-full" disabled={isButtonDisabled}>
+          <Button variant="primary" type="submit" size="lg" stretch="full" disabled={isButtonDisabled}>
             {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
           </Button>
         </form>
diff --git a/apps/web/core/components/onboarding/root.tsx b/apps/web/core/components/onboarding/root.tsx
index 395e19b0957..8d9c3c6812e 100644
--- a/apps/web/core/components/onboarding/root.tsx
+++ b/apps/web/core/components/onboarding/root.tsx
@@ -7,7 +7,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IWorkspaceMemberInvitation, TOnboardingStep, TOnboardingSteps, TUserProfile } from "@plane/types";
 import { EOnboardingSteps } from "@plane/types";
 // hooks
diff --git a/apps/web/core/components/onboarding/steps/profile/root.tsx b/apps/web/core/components/onboarding/steps/profile/root.tsx
index 1b165d40bdf..1a89ad12a1f 100644
--- a/apps/web/core/components/onboarding/steps/profile/root.tsx
+++ b/apps/web/core/components/onboarding/steps/profile/root.tsx
@@ -10,8 +10,8 @@ import { Controller, useForm } from "react-hook-form";
 import { ImageOutline } from "@makeplane/propel/icons";
 // plane imports
 import { E_PASSWORD_STRENGTH } from "@plane/constants";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IUser } from "@plane/types";
 import { EOnboardingSteps } from "@plane/types";
 import { cn, getFileURL, getPasswordStrength, validatePersonName } from "@plane/utils";
@@ -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" type="submit" stretch="full" size="lg" disabled={isButtonDisabled} label="Continue" />
 
       {/* Marketing Consent */}
       {!instanceConfig?.is_self_managed && (
diff --git a/apps/web/core/components/onboarding/steps/profile/set-password.tsx b/apps/web/core/components/onboarding/steps/profile/set-password.tsx
index 3851f59f451..8395f913455 100644
--- a/apps/web/core/components/onboarding/steps/profile/set-password.tsx
+++ b/apps/web/core/components/onboarding/steps/profile/set-password.tsx
@@ -6,7 +6,7 @@
 
 import React, { useState, useCallback, useMemo } from "react";
 import { ChevronDownOutline, LockOutline } from "@makeplane/propel/icons";
-import { PasswordInput, PasswordStrengthIndicator } from "@plane/ui";
+import { PasswordInput, PasswordStrengthIndicator } from "@plane/blocks/form-fields";
 import { cn } from "@plane/utils";
 
 interface PasswordState {
diff --git a/apps/web/core/components/onboarding/steps/role/root.tsx b/apps/web/core/components/onboarding/steps/role/root.tsx
index cf542f1782f..535038f68fc 100644
--- a/apps/web/core/components/onboarding/steps/role/root.tsx
+++ b/apps/web/core/components/onboarding/steps/role/root.tsx
@@ -16,8 +16,8 @@ import {
   ViewsOutline,
 } from "@makeplane/propel/icons";
 // plane imports
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TUserProfile } from "@plane/types";
 import { EOnboardingSteps } from "@plane/types";
 // hooks
@@ -66,10 +66,7 @@ export const RoleSetupStep = observer(function RoleSetupStep({ handleStepChange
       role: formData.role,
     };
     try {
-      await Promise.all([
-        updateUserProfile(profileUpdatePayload),
-        // totalSteps > 2 && stepChange({ profile_complete: true }),
-      ]);
+      [await updateUserProfile(profileUpdatePayload)];
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Success",
@@ -152,12 +149,15 @@ 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" type="submit" stretch="full" size="lg" disabled={isButtonDisabled} label="Continue" />
+        <Button
+          variant="ghost"
+          onClick={handleSkip}
+          stretch="full"
+          size="lg"
+          render={<button type="button" className="text-tertiary" />}
+          label="Skip"
+        />
       </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 77b08093e0c..9bfb57a7811 100644
--- a/apps/web/core/components/onboarding/steps/team/root.tsx
+++ b/apps/web/core/components/onboarding/steps/team/root.tsx
@@ -24,10 +24,11 @@ import { Input, InputGroup } from "@makeplane/propel/components/input";
 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 { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { Button as ButtonElement } from "@makeplane/propel/elements/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { EOnboardingSteps } from "@plane/types";
-import { Spinner } from "@plane/ui";
+import { Spinner } from "@plane/blocks/spinner";
 // hooks
 import { useWorkspace } from "@/hooks/store/use-workspace";
 // services
@@ -382,18 +383,16 @@ export const InviteTeamStep = observer(function InviteTeamStep(props: Props) {
         </button>
       </div>
       <div className="mx-auto flex w-full flex-col items-center justify-center gap-4 px-8 sm:px-2">
-        <Button
+        <ButtonElement
           variant="primary"
           type="submit"
-          size="xl"
-          className="w-full"
+          size="lg"
+          stretch="full"
           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>
+        </ButtonElement>
+        <Button variant="ghost" size="lg" stretch="full" onClick={nextStep} label="I’ll do it later" />
       </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 4f4b2ef4aeb..0a50328dd81 100644
--- a/apps/web/core/components/onboarding/steps/usecase/root.tsx
+++ b/apps/web/core/components/onboarding/steps/usecase/root.tsx
@@ -8,9 +8,9 @@ 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 { TickOutline } from "@makeplane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TUserProfile } from "@plane/types";
 import { EOnboardingSteps } from "@plane/types";
 import { cn } from "@plane/utils";
@@ -50,10 +50,7 @@ export const UseCaseSetupStep = observer(function UseCaseSetupStep({ handleStepC
       use_case: formData.use_case && formData.use_case.length > 0 ? formData.use_case.join(". ") : undefined,
     };
     try {
-      await Promise.all([
-        updateUserProfile(profileUpdatePayload),
-        // totalSteps > 2 && stepChange({ profile_complete: true }),
-      ]);
+      [await updateUserProfile(profileUpdatePayload)];
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Success",
@@ -150,12 +147,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" type="submit" stretch="full" size="lg" disabled={isButtonDisabled} label="Continue" />
+        <Button variant="ghost" onClick={handleSkip} stretch="full" size="lg" label="Skip" />
       </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 9d2bcf030ac..d899af1fb47 100644
--- a/apps/web/core/components/onboarding/steps/workspace/create.tsx
+++ b/apps/web/core/components/onboarding/steps/workspace/create.tsx
@@ -11,10 +11,11 @@ import { TickCircleOutline } from "@makeplane/propel/icons";
 // plane imports
 import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { Button as ButtonElement } from "@makeplane/propel/elements/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IUser, IWorkspace } from "@plane/types";
-import { Spinner } from "@plane/ui";
+import { Spinner } from "@plane/blocks/spinner";
 import { cn, validateWorkspaceName, validateSlug } from "@plane/utils";
 // hooks
 import { useInstance } from "@/hooks/store/use-instance";
@@ -290,13 +291,17 @@ 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}>
+        <ButtonElement variant="primary" type="submit" size="lg" stretch="full" disabled={isButtonDisabled}>
           {isSubmitting ? <Spinner height="20px" width="20px" /> : t("workspace_creation.button.default")}
-        </Button>
+        </ButtonElement>
         {hasInvitations && (
-          <Button variant="ghost" size="xl" className="w-full" onClick={handleCurrentViewChange}>
-            Join existing workspace
-          </Button>
+          <Button
+            variant="ghost"
+            size="lg"
+            stretch="full"
+            onClick={handleCurrentViewChange}
+            label="Join existing workspace"
+          />
         )}
       </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 92153459c07..c775f0514f5 100644
--- a/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx
+++ b/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx
@@ -7,10 +7,11 @@
 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 { Button as ButtonElement } from "@makeplane/propel/elements/button";
 import type { IWorkspaceMemberInvitation } from "@plane/types";
 import { Checkbox } from "@makeplane/propel/components/checkbox";
-import { Spinner } from "@plane/ui";
+import { Spinner } from "@plane/blocks/spinner";
 import { truncateText } from "@plane/utils";
 // constants
 import { WorkspaceLogo } from "@/components/workspace/logo";
@@ -100,24 +101,23 @@ export function WorkspaceJoinInvitesStep(props: Props) {
           })}
       </div>
       <div className="flex flex-col gap-4">
-        <Button
+        <ButtonElement
           variant="primary"
-          size="xl"
-          className="w-full"
+          size="lg"
+          stretch="full"
           onClick={submitInvitations}
           disabled={isJoiningWorkspaces || !invitationsRespond.length}
         >
           {isJoiningWorkspaces ? <Spinner height="20px" width="20px" /> : "Continue"}
-        </Button>
+        </ButtonElement>
         <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 aa80f8e330a..3de0d48d420 100644
--- a/apps/web/core/components/onboarding/switch-account-modal.tsx
+++ b/apps/web/core/components/onboarding/switch-account-modal.tsx
@@ -10,8 +10,8 @@ import { useTheme } from "next-themes";
 import { ArrowRightLeft } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
 // ui
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 // hooks
 import { useUser } from "@/hooks/store/user";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -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 a5c3389fc68..1a165f2e9a1 100644
--- a/apps/web/core/components/onboarding/tour/root.tsx
+++ b/apps/web/core/components/onboarding/tour/root.tsx
@@ -7,8 +7,8 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { Button } from "@plane/propel/button";
-import { PlaneLockup } from "@plane/propel/icons";
+import { Button } from "@makeplane/propel/components/button";
+import { PlaneLockup } from "@plane/blocks/icons";
 import { CloseOutline } from "@makeplane/propel/icons";
 // assets
 import CyclesTour from "@/app/assets/onboarding/cycles.webp?url";
@@ -110,12 +110,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"
@@ -154,26 +155,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/onboarding/tour/sidebar.tsx b/apps/web/core/components/onboarding/tour/sidebar.tsx
index 8ba1848e4a2..0e017e6fb79 100644
--- a/apps/web/core/components/onboarding/tour/sidebar.tsx
+++ b/apps/web/core/components/onboarding/tour/sidebar.tsx
@@ -6,7 +6,7 @@
 
 // plane imports
 import { CyclesOutline, ModuleOutline, PagesOutline, ViewsOutline, WorkItemsOutline } from "@makeplane/propel/icons";
-import type { ISvgIcons } from "@plane/propel/icons";
+import type { ISvgIcons } from "@plane/blocks/icons";
 // types
 import type { TTourSteps } from "./root";
 
diff --git a/apps/web/core/components/pages/dropdowns/actions.tsx b/apps/web/core/components/pages/dropdowns/actions.tsx
index e67f64f0299..bd159e2434c 100644
--- a/apps/web/core/components/pages/dropdowns/actions.tsx
+++ b/apps/web/core/components/pages/dropdowns/actions.tsx
@@ -24,8 +24,8 @@ import {
 import { EPageAccess } from "@plane/constants";
 // plane editor
 // plane ui
-import type { TContextMenuItem } from "@plane/ui";
-import { ContextMenu, CustomMenu } from "@plane/ui";
+import type { TContextMenuItem } from "@plane/blocks/dropdowns";
+import { ContextMenu, CustomMenu } from "@plane/blocks/dropdowns";
 // components
 import { cn } from "@plane/utils";
 import { DeletePageModal } from "@/components/pages/modals/delete-page-modal";
diff --git a/apps/web/core/components/pages/editor/editor-body.tsx b/apps/web/core/components/pages/editor/editor-body.tsx
index 0e4facc0fd6..41d8f360131 100644
--- a/apps/web/core/components/pages/editor/editor-body.tsx
+++ b/apps/web/core/components/pages/editor/editor-body.tsx
@@ -21,7 +21,7 @@ import type {
 } from "@plane/editor";
 import { useTranslation } from "@plane/i18n";
 import type { TSearchEntityRequestPayload, TSearchResponse, TWebhookConnectionQueryParams } from "@plane/types";
-import { ERowVariant, Row } from "@plane/ui";
+import { ERowVariant, Row } from "@plane/blocks/row";
 import { cn, generateRandomColor, hslToHex } from "@plane/utils";
 // components
 import { EditorMentionsRoot } from "@/components/editor/embeds/mentions";
diff --git a/apps/web/core/components/pages/editor/header/logo-picker.tsx b/apps/web/core/components/pages/editor/header/logo-picker.tsx
index 1f037fd6ddc..6aa04b57fb1 100644
--- a/apps/web/core/components/pages/editor/header/logo-picker.tsx
+++ b/apps/web/core/components/pages/editor/header/logo-picker.tsx
@@ -7,7 +7,7 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
+import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/blocks/emoji-icon-picker";
 import { cn } from "@plane/utils";
 // store
 import type { TPageInstance } from "@/store/pages/base-page";
diff --git a/apps/web/core/components/pages/editor/header/root.tsx b/apps/web/core/components/pages/editor/header/root.tsx
index 05296b79478..b32a65744eb 100644
--- a/apps/web/core/components/pages/editor/header/root.tsx
+++ b/apps/web/core/components/pages/editor/header/root.tsx
@@ -8,7 +8,7 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import { ReactionOutline } from "@makeplane/propel/icons";
 // plane imports
-import { EmojiPicker, EmojiIconPickerTypes } from "@plane/propel/emoji-icon-picker";
+import { EmojiPicker, EmojiIconPickerTypes } from "@plane/blocks/emoji-icon-picker";
 import { cn } from "@plane/utils";
 // store
 import type { TPageInstance } from "@/store/pages/base-page";
diff --git a/apps/web/core/components/pages/editor/toolbar/options-dropdown.tsx b/apps/web/core/components/pages/editor/toolbar/options-dropdown.tsx
index cafe0421e62..8dd5ff04693 100644
--- a/apps/web/core/components/pages/editor/toolbar/options-dropdown.tsx
+++ b/apps/web/core/components/pages/editor/toolbar/options-dropdown.tsx
@@ -8,7 +8,7 @@ import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { ClipboardOutline, ExportOutline, HistoryOutline } from "@makeplane/propel/icons";
 // plane imports
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { Switch } from "@makeplane/propel/components/switch";
 // hooks
 import { useAppRouter } from "@/hooks/use-app-router";
diff --git a/apps/web/core/components/pages/editor/toolbar/toolbar.tsx b/apps/web/core/components/pages/editor/toolbar/toolbar.tsx
index 92a0371c522..f9f369f8c67 100644
--- a/apps/web/core/components/pages/editor/toolbar/toolbar.tsx
+++ b/apps/web/core/components/pages/editor/toolbar/toolbar.tsx
@@ -9,7 +9,7 @@ import type { EditorRefApi } from "@plane/editor";
 // plane imports
 import { ChevronDownOutline, TickOutline } from "@makeplane/propel/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 import { cn } from "@plane/utils";
 // constants
 import type { ToolbarMenuItem } from "@plane/editor";
diff --git a/apps/web/core/components/pages/header/copy-link-control.tsx b/apps/web/core/components/pages/header/copy-link-control.tsx
index 4773d9b418c..a1f56b54dbd 100644
--- a/apps/web/core/components/pages/header/copy-link-control.tsx
+++ b/apps/web/core/components/pages/header/copy-link-control.tsx
@@ -10,7 +10,8 @@ import { observer } from "mobx-react";
 import { LinkOutline, TickOutline } from "@makeplane/propel/icons";
 // plane imports
 import { Tooltip } from "@makeplane/propel/components/tooltip";
-import { IconButton } from "@plane/propel/icon-button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 import { cn } from "@plane/utils";
 // hooks
 import { usePageOperations } from "@/hooks/use-page-operations";
@@ -60,11 +61,11 @@ export const PageCopyLinkControl = observer(function PageCopyLinkControl({ page
     <Tooltip label={isCopied ? "Copied!" : "Copy link"} side="bottom">
       <IconButton
         variant="ghost"
-        size="lg"
-        icon={isCopied ? TickOutline : LinkOutline}
+        size="md"
+        icon={<Icon icon={isCopied ? TickOutline : LinkOutline} />}
         onClick={handleCopy}
         aria-label={isCopied ? "Copied link" : "Copy link"}
-        className={cn(isCopied && "text-success-primary")}
+        render={<button className={cn(isCopied && "text-success-primary")} />}
       />
     </Tooltip>
   );
diff --git a/apps/web/core/components/pages/header/favorite-control.tsx b/apps/web/core/components/pages/header/favorite-control.tsx
index e87886e4ca4..87f3c5f9ff5 100644
--- a/apps/web/core/components/pages/header/favorite-control.tsx
+++ b/apps/web/core/components/pages/header/favorite-control.tsx
@@ -7,7 +7,8 @@
 import { observer } from "mobx-react";
 import { StarOutline } from "@makeplane/propel/icons";
 // ui
-import { IconButton } from "@plane/propel/icon-button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 // hooks
 import { usePageOperations } from "@/hooks/use-page-operations";
 // store
@@ -30,14 +31,18 @@ export const PageFavoriteControl = observer(function PageFavoriteControl({ page
   return (
     <IconButton
       variant="ghost"
-      size="lg"
-      icon={StarOutline}
+      size="md"
+      icon={<Icon icon={StarOutline} />}
       onClick={() => {
         pageOperations.toggleFavorite();
       }}
       aria-label={is_favorite ? "Remove favorite" : "Add to favorites"}
-      className={
-        is_favorite ? "[&_svg]:fill-(--color-label-yellow-icon) [&_svg]:stroke-(--color-label-yellow-icon)" : ""
+      render={
+        <button
+          className={
+            is_favorite ? "[&_svg]:fill-(--color-label-yellow-icon) [&_svg]:stroke-(--color-label-yellow-icon)" : ""
+          }
+        />
       }
     />
   );
diff --git a/apps/web/core/components/pages/header/root.tsx b/apps/web/core/components/pages/header/root.tsx
index 200add7efeb..9dee3188aa1 100644
--- a/apps/web/core/components/pages/header/root.tsx
+++ b/apps/web/core/components/pages/header/root.tsx
@@ -10,7 +10,7 @@ import { FilterOutline } from "@makeplane/propel/icons";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import type { TPageFilterProps, TPageNavigationTabs } from "@plane/types";
-import { Header, EHeaderVariant } from "@plane/ui";
+import { Header, EHeaderVariant } from "@plane/blocks/header";
 import { calculateTotalFilters } from "@plane/utils";
 // components
 import { FiltersDropdown } from "@/components/issues/issue-layouts/filters";
diff --git a/apps/web/core/components/pages/header/syncing-badge.tsx b/apps/web/core/components/pages/header/syncing-badge.tsx
index f84648f7fb6..074ebfa963c 100644
--- a/apps/web/core/components/pages/header/syncing-badge.tsx
+++ b/apps/web/core/components/pages/header/syncing-badge.tsx
@@ -7,7 +7,7 @@
 import { useState, useEffect } from "react";
 import { CloudOff, Dot } from "lucide-react";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
-import { Badge } from "@plane/propel/badge";
+import { Badge } from "@makeplane/propel/components/badge";
 
 type Props = {
   syncStatus: "syncing" | "synced" | "error";
@@ -54,11 +54,10 @@ export function PageSyncingBadge({ syncStatus }: Props) {
       <span className="animate-quickFadeIn">
         <Badge
           variant={syncStatus === "syncing" ? "brand" : "danger"}
-          size="lg"
-          prependIcon={syncStatus === "syncing" ? <Dot /> : <CloudOff />}
-        >
-          {content.label}
-        </Badge>
+          size="sm"
+          startIcon={syncStatus === "syncing" ? <Dot className="size-4" /> : <CloudOff className="size-4" />}
+          label={content.label}
+        />
       </span>
     </Tooltip>
   );
diff --git a/apps/web/core/components/pages/list/applied-filters/root.tsx b/apps/web/core/components/pages/list/applied-filters/root.tsx
index 62a1609ca87..6c6a513cf13 100644
--- a/apps/web/core/components/pages/list/applied-filters/root.tsx
+++ b/apps/web/core/components/pages/list/applied-filters/root.tsx
@@ -21,7 +21,7 @@ type Props = {
   alwaysAllowEditing?: boolean;
 };
 
-const MEMBERS_FILTERS = ["created_by"];
+const MEMBERS_FILTERS = new Set(["created_by"]);
 const DATE_FILTERS = ["created_at"];
 
 export function PageAppliedFiltersList(props: Props) {
@@ -55,7 +55,7 @@ export function PageAppliedFiltersList(props: Props) {
                   values={Array.isArray(value) ? value : []}
                 />
               )}
-              {MEMBERS_FILTERS.includes(filterKey) && (
+              {MEMBERS_FILTERS.has(filterKey) && (
                 <AppliedMembersFilters
                   editable={isEditingAllowed}
                   handleRemove={(val) => handleRemoveFilter(filterKey, val)}
diff --git a/apps/web/core/components/pages/list/block-item-action.tsx b/apps/web/core/components/pages/list/block-item-action.tsx
index 5de1af132b2..c8f8cbb7aa6 100644
--- a/apps/web/core/components/pages/list/block-item-action.tsx
+++ b/apps/web/core/components/pages/list/block-item-action.tsx
@@ -9,7 +9,7 @@ import { GlobeOutline, InfoOutline, LockOutline, MinusOutline } from "@makeplane
 // plane imports
 import { Avatar } from "@makeplane/propel/components/avatar";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
-import { FavoriteStar } from "@plane/ui";
+import { FavoriteStar } from "@plane/blocks/favorite-star";
 import { renderFormattedDate, getFileURL } from "@plane/utils";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
diff --git a/apps/web/core/components/pages/list/block.tsx b/apps/web/core/components/pages/list/block.tsx
index 622569dda58..09388284aba 100644
--- a/apps/web/core/components/pages/list/block.tsx
+++ b/apps/web/core/components/pages/list/block.tsx
@@ -6,7 +6,7 @@
 
 import { useRef } from "react";
 import { observer } from "mobx-react";
-import { Logo } from "@plane/propel/emoji-icon-picker";
+import { Logo } from "@plane/blocks/emoji-icon-picker";
 import { PagesOutline } from "@makeplane/propel/icons";
 // plane imports
 import { getPageName } from "@plane/utils";
diff --git a/apps/web/core/components/pages/list/order-by.tsx b/apps/web/core/components/pages/list/order-by.tsx
index be5a3b7d408..7658c9d4e1a 100644
--- a/apps/web/core/components/pages/list/order-by.tsx
+++ b/apps/web/core/components/pages/list/order-by.tsx
@@ -6,10 +6,10 @@
 
 import { SortAscendingOutline, SortDescendingOutline, TickOutline } from "@makeplane/propel/icons";
 // plane imports
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 // types
 import type { TPageFiltersSortBy, TPageFiltersSortKey } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 
 type Props = {
   onChange: (value: { key?: TPageFiltersSortKey; order?: TPageFiltersSortBy }) => void;
@@ -35,10 +35,10 @@ export function PageOrderByDropdown(props: Props) {
   return (
     <CustomMenu
       customButton={
-        <div className={getButtonStyling("secondary", "lg")}>
+        <Button variant="secondary" size="md" stretch="auto" render={<div />}>
           {!isDescending ? <SortAscendingOutline className="size-3" /> : <SortDescendingOutline className="size-3" />}
           {orderByDetails?.label}
-        </div>
+        </Button>
       }
       placement="bottom-end"
       maxHeight="lg"
diff --git a/apps/web/core/components/pages/list/search-input.tsx b/apps/web/core/components/pages/list/search-input.tsx
index e90d67f3bc2..9e679956251 100644
--- a/apps/web/core/components/pages/list/search-input.tsx
+++ b/apps/web/core/components/pages/list/search-input.tsx
@@ -7,7 +7,8 @@
 import { useRef, useState } from "react";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
-import { IconButton } from "@plane/propel/icon-button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 import { CloseOutline, SearchOutline } from "@makeplane/propel/icons";
 import { cn } from "@plane/utils";
 
@@ -43,13 +44,14 @@ export function PageSearchInput(props: Props) {
       {!isSearchOpen && (
         <IconButton
           variant="ghost"
-          size="lg"
-          className="my-auto -mr-1 shrink-0"
+          size="md"
+          render={<button className="my-auto -mr-1 shrink-0" />}
           onClick={() => {
             setIsSearchOpen(true);
             inputRef.current?.focus();
           }}
-          icon={SearchOutline}
+          icon={<Icon icon={SearchOutline} />}
+          aria-label="Search pages"
         />
       )}
       <div
diff --git a/apps/web/core/components/pages/loaders/page-content-loader.tsx b/apps/web/core/components/pages/loaders/page-content-loader.tsx
index e7f8cc2682e..ca9f986043b 100644
--- a/apps/web/core/components/pages/loaders/page-content-loader.tsx
+++ b/apps/web/core/components/pages/loaders/page-content-loader.tsx
@@ -5,7 +5,7 @@
  */
 
 // plane imports
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 import { cn } from "@plane/utils";
 
 type Props = {
diff --git a/apps/web/core/components/pages/loaders/page-loader.tsx b/apps/web/core/components/pages/loaders/page-loader.tsx
index 8e7b9025b99..b63944a4423 100644
--- a/apps/web/core/components/pages/loaders/page-loader.tsx
+++ b/apps/web/core/components/pages/loaders/page-loader.tsx
@@ -5,7 +5,7 @@
  */
 
 import { range } from "lodash-es";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 
 export function PageLoader() {
   return (
diff --git a/apps/web/core/components/pages/modals/create-page-modal.tsx b/apps/web/core/components/pages/modals/create-page-modal.tsx
index 027ea7d65f9..493cde9cbb8 100644
--- a/apps/web/core/components/pages/modals/create-page-modal.tsx
+++ b/apps/web/core/components/pages/modals/create-page-modal.tsx
@@ -9,7 +9,7 @@ import { useEffect, useState } from "react";
 import type { EPageAccess } from "@plane/constants";
 import type { TPage } from "@plane/types";
 // ui
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // hooks
 import { useAppRouter } from "@/hooks/use-app-router";
 // plane web hooks
diff --git a/apps/web/core/components/pages/modals/delete-page-modal.tsx b/apps/web/core/components/pages/modals/delete-page-modal.tsx
index d498bbb0bb7..9c849c519a1 100644
--- a/apps/web/core/components/pages/modals/delete-page-modal.tsx
+++ b/apps/web/core/components/pages/modals/delete-page-modal.tsx
@@ -8,8 +8,8 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 // ui
 import { useParams } from "next/navigation";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { AlertModalCore } from "@plane/ui";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
+import { AlertModalCore } from "@plane/blocks/modals";
 import { getPageName } from "@plane/utils";
 // constants
 // plane web hooks
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 cd21b2b5fa7..295f774c92b 100644
--- a/apps/web/core/components/pages/modals/export-page-modal.tsx
+++ b/apps/web/core/components/pages/modals/export-page-modal.tsx
@@ -12,9 +12,10 @@ import { useParams } from "react-router";
 // plane editor
 import type { EditorRefApi } from "@plane/editor";
 // plane ui
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { CustomSelect, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
+import { CustomSelect } from "@plane/blocks/dropdowns";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // components
 import { PDFDocument } from "@/components/editor/pdf";
 // hooks
@@ -156,7 +157,7 @@ export function ExportPageModal(props: Props) {
       const blob = await pdf(<PDFDocument content={parsedPageContent} pageFormat={selectedPageFormat} />).toBlob();
       initiateDownload(blob, `${fileName}-${selectedPageFormat.toString().toLowerCase()}.pdf`);
     } catch (error) {
-      throw new Error(`Error in exporting as a PDF: ${error}`);
+      throw new Error(`Error in exporting as a PDF: ${error}`, { cause: error });
     }
   };
   // handle export as markdown
@@ -171,7 +172,7 @@ export function ExportPageModal(props: Props) {
       const blob = new Blob([parsedMarkdownContent], { type: "text/markdown" });
       initiateDownload(blob, `${fileName}.md`);
     } catch (error) {
-      throw new Error(`Error in exporting as markdown: ${error}`);
+      throw new Error(`Error in exporting as markdown: ${error}`, { cause: error });
     }
   };
   // handle export
@@ -282,12 +283,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 c234e91d41d..3dcc23d0b58 100644
--- a/apps/web/core/components/pages/modals/page-form.tsx
+++ b/apps/web/core/components/pages/modals/page-form.tsx
@@ -12,10 +12,10 @@ import type { LucideIcon } from "lucide-react";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { ETabIndices, EPageAccess } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
+import { Button } from "@makeplane/propel/components/button";
+import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/blocks/emoji-icon-picker";
 import { GlobeOutline, LockOutline, PagesOutline } from "@makeplane/propel/icons";
-import type { ISvgIcons } from "@plane/propel/icons";
+import type { ISvgIcons } from "@plane/blocks/icons";
 import type { TPage } from "@plane/types";
 
 import { getTabIndex } from "@plane/utils";
@@ -147,19 +147,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"
             type="submit"
+            label={isSubmitting ? "Creating" : "Create Page"}
             loading={isSubmitting}
             disabled={isTitleLengthMoreThan255Character}
             tabIndex={getIndex("submit")}
-          >
-            {isSubmitting ? "Creating" : "Create Page"}
-          </Button>
+          />
         </div>
       </div>
     </form>
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx
index cb012339e61..5674df8908b 100644
--- a/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx
@@ -5,7 +5,7 @@
  */
 
 // plane imports
-import { ScrollArea } from "@plane/propel/scrollarea";
+import { ScrollArea } from "@makeplane/propel/components/scroll-area";
 // store
 import type { TPageInstance } from "@/store/pages/base-page";
 // local imports
@@ -24,18 +24,16 @@ export function PageNavigationPaneOutlineTabPanel(props: Props) {
   } = page;
 
   return (
-    <ScrollArea
-      orientation="vertical"
-      size="sm"
-      scrollType="hover"
-      className="hide-scrollbar size-full overflow-y-auto"
-      viewportClassName="px-4"
-    >
-      <PageContentBrowser
-        className="mt-0"
-        editorRef={editorRef}
-        emptyState={<PageNavigationPaneOutlineTabEmptyState />}
-      />
-    </ScrollArea>
+    <div className="flex size-full flex-col overflow-hidden">
+      <ScrollArea orientation="vertical">
+        <div className="px-4">
+          <PageContentBrowser
+            className="mt-0"
+            editorRef={editorRef}
+            emptyState={<PageNavigationPaneOutlineTabEmptyState />}
+          />
+        </div>
+      </ScrollArea>
+    </div>
   );
 }
diff --git a/apps/web/core/components/pages/pages-list-main-content.tsx b/apps/web/core/components/pages/pages-list-main-content.tsx
index d835df658a8..10a1290b505 100644
--- a/apps/web/core/components/pages/pages-list-main-content.tsx
+++ b/apps/web/core/components/pages/pages-list-main-content.tsx
@@ -10,8 +10,8 @@ import { observer } from "mobx-react";
 import { useParams, useRouter } from "next/navigation";
 import { EUserPermissionsLevel, EPageAccess } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateDetailed } from "@plane/propel/empty-state";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { EmptyStateDetailed } from "@plane/blocks/empty-state";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TPage, TPageNavigationTabs } from "@plane/types";
 import { EUserProjectRoles } from "@plane/types";
 // components
diff --git a/apps/web/core/components/pages/version/editor.tsx b/apps/web/core/components/pages/version/editor.tsx
index e9b36ebdd43..cba92e95f29 100644
--- a/apps/web/core/components/pages/version/editor.tsx
+++ b/apps/web/core/components/pages/version/editor.tsx
@@ -9,7 +9,7 @@ import { useParams } from "next/navigation";
 // plane imports
 import type { TDisplayConfig } from "@plane/editor";
 import type { JSONContent, TPageVersion } from "@plane/types";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 import { isJSONContentEmpty } from "@plane/utils";
 // components
 import { DocumentEditor } from "@/components/editor/document/editor";
diff --git a/apps/web/core/components/pages/version/main-content.tsx b/apps/web/core/components/pages/version/main-content.tsx
index bd978efd1ed..483faa434d0 100644
--- a/apps/web/core/components/pages/version/main-content.tsx
+++ b/apps/web/core/components/pages/version/main-content.tsx
@@ -9,8 +9,8 @@ import { observer } from "mobx-react";
 import useSWR from "swr";
 import { ShowOutline, WarningTriangleOutline } from "@makeplane/propel/icons";
 // plane imports
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TPageVersion } from "@plane/types";
 import { renderFormattedDate, renderFormattedTime } from "@plane/utils";
 // helpers
@@ -93,9 +93,15 @@ 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}
+              render={<button className="px-0 text-link-primary underline" />}
+            />
           </div>
         </div>
       ) : (
@@ -113,9 +119,15 @@ export const PageVersionsMainContent = observer(function PageVersionsMainContent
               </span>
             </div>
             {restoreEnabled && (
-              <Button variant="primary" className="flex-shrink-0" onClick={handleRestoreVersion} loading={isRestoring}>
-                {isRestoring ? "Restoring" : "Restore"}
-              </Button>
+              <Button
+                variant="primary"
+                size="sm"
+                stretch="auto"
+                label={isRestoring ? "Restoring" : "Restore"}
+                onClick={handleRestoreVersion}
+                loading={isRestoring}
+                render={<button className="flex-shrink-0" />}
+              />
             )}
           </div>
           <div className="vertical-scrollbar scrollbar-sm h-full overflow-y-scroll pt-8">
diff --git a/apps/web/core/components/power-k/config/account-commands.ts b/apps/web/core/components/power-k/config/account-commands.ts
index e726a30a87d..2636178282f 100644
--- a/apps/web/core/components/power-k/config/account-commands.ts
+++ b/apps/web/core/components/power-k/config/account-commands.ts
@@ -8,7 +8,7 @@ import { useCallback } from "react";
 import { LogOutOutline, MailOutline } from "@makeplane/propel/icons";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { setToast, TOAST_TYPE } from "@plane/blocks/toast";
 // components
 import type { TPowerKCommandConfig } from "@/components/power-k/core/types";
 // hooks
diff --git a/apps/web/core/components/power-k/config/miscellaneous-commands.ts b/apps/web/core/components/power-k/config/miscellaneous-commands.ts
index 2432a4b0599..bd37fd06b4e 100644
--- a/apps/web/core/components/power-k/config/miscellaneous-commands.ts
+++ b/apps/web/core/components/power-k/config/miscellaneous-commands.ts
@@ -8,7 +8,7 @@ import { useCallback } from "react";
 import { LeftSidePaneOutline, LinkOutline, SearchOutline } from "@makeplane/propel/icons";
 import { useTranslation } from "@plane/i18n";
 // plane imports
-import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { setToast, TOAST_TYPE } from "@plane/blocks/toast";
 import { copyTextToClipboard } from "@plane/utils";
 // components
 import type { TPowerKCommandConfig } from "@/components/power-k/core/types";
diff --git a/apps/web/core/components/power-k/config/preferences-commands.ts b/apps/web/core/components/power-k/config/preferences-commands.ts
index 499db1cd6e8..55475fe08f1 100644
--- a/apps/web/core/components/power-k/config/preferences-commands.ts
+++ b/apps/web/core/components/power-k/config/preferences-commands.ts
@@ -10,7 +10,7 @@ import { Languages } from "lucide-react";
 import { CalendarOutline, GlobeOutline, PaletteOutline } from "@makeplane/propel/icons";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { setToast, TOAST_TYPE } from "@plane/blocks/toast";
 import type { EStartOfTheWeek, TUserProfile } from "@plane/types";
 // components
 import type { TPowerKCommandConfig } from "@/components/power-k/core/types";
diff --git a/apps/web/core/components/power-k/menus/modules.tsx b/apps/web/core/components/power-k/menus/modules.tsx
index 8c17a5fcda1..112b1632164 100644
--- a/apps/web/core/components/power-k/menus/modules.tsx
+++ b/apps/web/core/components/power-k/menus/modules.tsx
@@ -7,7 +7,7 @@
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { ModuleStatusIcon } from "@plane/propel/icons";
+import { ModuleStatusIcon } from "@plane/blocks/icons";
 import type { IModule } from "@plane/types";
 // local imports
 import { PowerKMenuBuilder } from "./builder";
diff --git a/apps/web/core/components/power-k/menus/projects.tsx b/apps/web/core/components/power-k/menus/projects.tsx
index a2a7d982fa1..5f09232edc4 100644
--- a/apps/web/core/components/power-k/menus/projects.tsx
+++ b/apps/web/core/components/power-k/menus/projects.tsx
@@ -6,7 +6,7 @@
 
 import React from "react";
 // components
-import { Logo } from "@plane/propel/emoji-icon-picker";
+import { Logo } from "@plane/blocks/emoji-icon-picker";
 // plane imports
 import type { TPartialProject } from "@plane/types";
 // local imports
diff --git a/apps/web/core/components/power-k/ui/modal/shortcuts-root.tsx b/apps/web/core/components/power-k/ui/modal/shortcuts-root.tsx
index 97971429a24..b6f48bbe76c 100644
--- a/apps/web/core/components/power-k/ui/modal/shortcuts-root.tsx
+++ b/apps/web/core/components/power-k/ui/modal/shortcuts-root.tsx
@@ -9,7 +9,7 @@ import { Dialog, Transition } from "@headlessui/react";
 // plane imports
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { CloseOutline, SearchOutline } from "@makeplane/propel/icons";
-import { ScrollArea } from "@plane/propel/scrollarea";
+import { ScrollArea } from "@makeplane/propel/components/scroll-area";
 
 // hooks
 import { usePowerK } from "@/hooks/store/use-power-k";
@@ -88,9 +88,11 @@ export function ShortcutsModal(props: Props) {
                     </InputGroup>
                   </div>
 
-                  <ScrollArea size="sm" rootClassName="overflow-y-scroll px-5">
-                    <ShortcutRenderer searchQuery={query} commands={allCommandsWithShortcuts} />
-                  </ScrollArea>
+                  <div className="flex min-h-0 flex-1 flex-col overflow-hidden px-5">
+                    <ScrollArea orientation="vertical">
+                      <ShortcutRenderer searchQuery={query} commands={allCommandsWithShortcuts} />
+                    </ScrollArea>
+                  </div>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/cycle/commands.ts b/apps/web/core/components/power-k/ui/pages/context-based/cycle/commands.ts
index a86c79f6c6b..d5eaeae32ea 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/cycle/commands.ts
+++ b/apps/web/core/components/power-k/ui/pages/context-based/cycle/commands.ts
@@ -11,7 +11,7 @@ import { LinkOutline, StarOutline } from "@makeplane/propel/icons";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { setToast, TOAST_TYPE } from "@plane/blocks/toast";
 import { copyTextToClipboard } from "@plane/utils";
 // components
 import type { TPowerKCommandConfig } from "@/components/power-k/core/types";
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/module/commands.tsx b/apps/web/core/components/power-k/ui/pages/context-based/module/commands.tsx
index 28a910219e1..4a3e3a36d35 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/module/commands.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/module/commands.tsx
@@ -11,8 +11,8 @@ import { LinkOutline, MembersOutline, StarOutline } from "@makeplane/propel/icon
 // plane imports
 import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { ModuleStatusIcon } from "@plane/propel/icons";
-import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { ModuleStatusIcon } from "@plane/blocks/icons";
+import { setToast, TOAST_TYPE } from "@plane/blocks/toast";
 import type { IModule, TModuleStatus } from "@plane/types";
 import { EUserPermissions } from "@plane/types";
 import { copyTextToClipboard } from "@plane/utils";
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/module/status-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/module/status-menu.tsx
index 38291cb6f85..95ea227538c 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/module/status-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/module/status-menu.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { MODULE_STATUS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { ModuleStatusIcon } from "@plane/propel/icons";
+import { ModuleStatusIcon } from "@plane/blocks/icons";
 import type { TModuleStatus } from "@plane/types";
 // local imports
 import { PowerKModalCommandItem } from "../../../modal/command-item";
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/page/commands.ts b/apps/web/core/components/power-k/ui/pages/context-based/page/commands.ts
index ecede47deb1..34e22e5c27c 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/page/commands.ts
+++ b/apps/web/core/components/power-k/ui/pages/context-based/page/commands.ts
@@ -19,7 +19,7 @@ import {
 } from "@makeplane/propel/icons";
 import { useTranslation } from "@plane/i18n";
 // plane imports
-import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { setToast, TOAST_TYPE } from "@plane/blocks/toast";
 import { EPageAccess } from "@plane/types";
 import { copyTextToClipboard } from "@plane/utils";
 // components
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/commands.ts b/apps/web/core/components/power-k/ui/pages/context-based/work-item/commands.ts
index 4c7e58a22ef..b41d2c041b9 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/work-item/commands.ts
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/commands.ts
@@ -24,7 +24,7 @@ import {
 // plane imports
 import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { setToast, TOAST_TYPE } from "@plane/blocks/toast";
 import type { ICycle, IIssueLabel, IModule, TIssue, TIssuePriorities } from "@plane/types";
 import { EIssueServiceType, EUserPermissions } from "@plane/types";
 import { copyTextToClipboard } from "@plane/utils";
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/cycles-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/cycles-menu.tsx
index a43374b1fcf..a3be19fd847 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/work-item/cycles-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/cycles-menu.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 // plane types
 import type { ICycle, TIssue } from "@plane/types";
-import { Spinner } from "@plane/ui";
+import { Spinner } from "@plane/blocks/spinner";
 // components
 import { PowerKCyclesMenu } from "@/components/power-k/menus/cycles";
 // hooks
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/estimates-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/estimates-menu.tsx
index fa9cd018da9..a60973a56d9 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/work-item/estimates-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/estimates-menu.tsx
@@ -11,7 +11,7 @@ import { Triangle } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
 import { EEstimateSystem } from "@plane/types";
 import type { TIssue } from "@plane/types";
-import { Spinner } from "@plane/ui";
+import { Spinner } from "@plane/blocks/spinner";
 import { convertMinutesToHoursMinutesString } from "@plane/utils";
 // hooks
 import { useEstimate, useProjectEstimates } from "@/hooks/store/estimates";
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/labels-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/labels-menu.tsx
index 42a5f61f5ba..4d914f94ebf 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/work-item/labels-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/labels-menu.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 // plane types
 import type { IIssueLabel, TIssue } from "@plane/types";
-import { Spinner } from "@plane/ui";
+import { Spinner } from "@plane/blocks/spinner";
 // components
 import { PowerKLabelsMenu } from "@/components/power-k/menus/labels";
 // hooks
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/modules-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/modules-menu.tsx
index d780f8c5a32..b842fed44cc 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/work-item/modules-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/modules-menu.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 // plane types
 import type { IModule, TIssue } from "@plane/types";
-import { Spinner } from "@plane/ui";
+import { Spinner } from "@plane/blocks/spinner";
 // components
 import { PowerKModulesMenu } from "@/components/power-k/menus/modules";
 // hooks
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/priorities-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/priorities-menu.tsx
index 1ea30ebd19e..881a43780c5 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/work-item/priorities-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/priorities-menu.tsx
@@ -8,7 +8,7 @@ import { Command } from "cmdk";
 import { observer } from "mobx-react";
 // plane imports
 import { ISSUE_PRIORITIES } from "@plane/constants";
-import { PriorityIcon } from "@plane/propel/icons";
+import { PriorityIcon } from "@plane/blocks/icons";
 import type { TIssue, TIssuePriorities } from "@plane/types";
 // local imports
 import { PowerKModalCommandItem } from "../../../modal/command-item";
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/state-menu-item.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/state-menu-item.tsx
index a407f3d851f..1cf0fe8554c 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/work-item/state-menu-item.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/state-menu-item.tsx
@@ -5,7 +5,7 @@
  */
 
 import { observer } from "mobx-react";
-import { StateGroupIcon } from "@plane/propel/icons";
+import { StateGroupIcon } from "@plane/blocks/icons";
 import type { IState } from "@plane/types";
 // components
 import { PowerKModalCommandItem } from "@/components/power-k/ui/modal/command-item";
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/states-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/states-menu.tsx
index 749ddf5daf0..079f42381a4 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/work-item/states-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/states-menu.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // plane types
 import { useParams } from "next/navigation";
 import type { TIssue } from "@plane/types";
-import { Spinner } from "@plane/ui";
+import { Spinner } from "@plane/blocks/spinner";
 // hooks
 import { useProjectState } from "@/hooks/store/use-project-state";
 // local imports
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/project-cycles-menu.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/project-cycles-menu.tsx
index 0b2b7fdb766..7f6a7c01841 100644
--- a/apps/web/core/components/power-k/ui/pages/open-entity/project-cycles-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/project-cycles-menu.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 // plane types
 import type { ICycle } from "@plane/types";
-import { Spinner } from "@plane/ui";
+import { Spinner } from "@plane/blocks/spinner";
 // components
 import type { TPowerKContext } from "@/components/power-k/core/types";
 import { PowerKCyclesMenu } from "@/components/power-k/menus/cycles";
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/project-modules-menu.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/project-modules-menu.tsx
index b359501d565..f01db45e86d 100644
--- a/apps/web/core/components/power-k/ui/pages/open-entity/project-modules-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/project-modules-menu.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 // plane types
 import type { IModule } from "@plane/types";
-import { Spinner } from "@plane/ui";
+import { Spinner } from "@plane/blocks/spinner";
 // components
 import type { TPowerKContext } from "@/components/power-k/core/types";
 import { PowerKModulesMenu } from "@/components/power-k/menus/modules";
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/project-views-menu.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/project-views-menu.tsx
index 16a04530f88..5251a3349e9 100644
--- a/apps/web/core/components/power-k/ui/pages/open-entity/project-views-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/project-views-menu.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 // plane types
 import type { IProjectView } from "@plane/types";
-import { Spinner } from "@plane/ui";
+import { Spinner } from "@plane/blocks/spinner";
 // components
 import type { TPowerKContext } from "@/components/power-k/core/types";
 // hooks
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/projects-menu.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/projects-menu.tsx
index a1d48b5d9a8..604db668c1b 100644
--- a/apps/web/core/components/power-k/ui/pages/open-entity/projects-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/projects-menu.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 // plane types
 import type { IPartialProject } from "@plane/types";
-import { Spinner } from "@plane/ui";
+import { Spinner } from "@plane/blocks/spinner";
 // components
 import { PowerKProjectsMenu } from "@/components/power-k/menus/projects";
 // hooks
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/workspaces-menu.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/workspaces-menu.tsx
index 70df60e4b0e..63efae1e383 100644
--- a/apps/web/core/components/power-k/ui/pages/open-entity/workspaces-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/workspaces-menu.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 // plane types
 import type { IWorkspace } from "@plane/types";
-import { Spinner } from "@plane/ui";
+import { Spinner } from "@plane/blocks/spinner";
 // components
 import { PowerKWorkspacesMenu } from "@/components/power-k/menus/workspaces";
 // hooks
diff --git a/apps/web/core/components/profile/activity/download-button.tsx b/apps/web/core/components/profile/activity/download-button.tsx
index d162dbd2455..b0705088923 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/profile/overview/activity.tsx b/apps/web/core/components/profile/overview/activity.tsx
index 95350412afe..f6e5f1d9c8b 100644
--- a/apps/web/core/components/profile/overview/activity.tsx
+++ b/apps/web/core/components/profile/overview/activity.tsx
@@ -9,9 +9,10 @@ import { useParams } from "next/navigation";
 import useSWR from "swr";
 // ui
 import { useTranslation } from "@plane/i18n";
-import { Avatar } from "@plane/propel/avatar";
-import { EmptyStateCompact } from "@plane/propel/empty-state";
-import { Loader, Card } from "@plane/ui";
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { EmptyStateCompact } from "@plane/blocks/empty-state";
+import { Card } from "@plane/blocks/card";
+import { Loader } from "@plane/blocks/loader";
 import { calculateTimeAgo, getFileURL } from "@plane/utils";
 // components
 import { ActivityMessage, IssueLink } from "@/components/core/activity";
@@ -58,10 +59,10 @@ export const ProfileActivity = observer(function ProfileActivity() {
             {userProfileActivity.results.map((activity) => (
               <div key={activity.id} className="flex gap-3">
                 <Avatar
-                  name={activity.actor_detail?.display_name}
+                  alt={activity.actor_detail?.display_name}
+                  tooltip={activity.actor_detail?.display_name}
                   src={getFileURL(activity.actor_detail?.avatar_url)}
-                  size="base"
-                  shape="square"
+                  size="sm"
                 />
                 <div className="-mt-1 w-4/5 break-words">
                   <p className="inline text-13 text-secondary">
diff --git a/apps/web/core/components/profile/overview/priority-distribution.tsx b/apps/web/core/components/profile/overview/priority-distribution.tsx
index 1128e82670a..99659862de3 100644
--- a/apps/web/core/components/profile/overview/priority-distribution.tsx
+++ b/apps/web/core/components/profile/overview/priority-distribution.tsx
@@ -6,10 +6,11 @@
 
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { BarChart } from "@plane/propel/charts/bar-chart";
-import { EmptyStateCompact } from "@plane/propel/empty-state";
+import { BarChart } from "@plane/blocks/charts/bar-chart";
+import { EmptyStateCompact } from "@plane/blocks/empty-state";
 import type { IUserProfileData } from "@plane/types";
-import { Loader, Card } from "@plane/ui";
+import { Card } from "@plane/blocks/card";
+import { Loader } from "@plane/blocks/loader";
 import { capitalizeFirstLetter } from "@plane/utils";
 
 type Props = {
diff --git a/apps/web/core/components/profile/overview/state-distribution.tsx b/apps/web/core/components/profile/overview/state-distribution.tsx
index 457e55808b8..39f0a7ed237 100644
--- a/apps/web/core/components/profile/overview/state-distribution.tsx
+++ b/apps/web/core/components/profile/overview/state-distribution.tsx
@@ -7,10 +7,10 @@
 // plane imports
 import { STATE_GROUPS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { PieChart } from "@plane/propel/charts/pie-chart";
-import { EmptyStateCompact } from "@plane/propel/empty-state";
+import { PieChart } from "@plane/blocks/charts/pie-chart";
+import { EmptyStateCompact } from "@plane/blocks/empty-state";
 import type { IUserProfileData, IUserStateDistribution } from "@plane/types";
-import { Card } from "@plane/ui";
+import { Card } from "@plane/blocks/card";
 import { capitalizeFirstLetter } from "@plane/utils";
 
 type Props = {
diff --git a/apps/web/core/components/profile/overview/stats.tsx b/apps/web/core/components/profile/overview/stats.tsx
index c4ac86ecc2d..ea9c90b1268 100644
--- a/apps/web/core/components/profile/overview/stats.tsx
+++ b/apps/web/core/components/profile/overview/stats.tsx
@@ -9,10 +9,11 @@ import { useParams } from "next/navigation";
 
 // ui
 import { useTranslation } from "@plane/i18n";
-import { LayerStackIcon } from "@plane/propel/icons";
+import { LayerStackIcon } from "@plane/blocks/icons";
 import { AddOutline, UserOutline } from "@makeplane/propel/icons";
 import type { IUserProfileData } from "@plane/types";
-import { Loader, Card, ECardSpacing, ECardDirection } from "@plane/ui";
+import { Card, ECardSpacing, ECardDirection } from "@plane/blocks/card";
+import { Loader } from "@plane/blocks/loader";
 // types
 
 type Props = {
diff --git a/apps/web/core/components/profile/overview/workload.tsx b/apps/web/core/components/profile/overview/workload.tsx
index 89112cc8460..b0b11702b63 100644
--- a/apps/web/core/components/profile/overview/workload.tsx
+++ b/apps/web/core/components/profile/overview/workload.tsx
@@ -9,7 +9,7 @@ import { STATE_GROUPS } from "@plane/constants";
 // types
 import { useTranslation } from "@plane/i18n";
 import type { IUserStateDistribution } from "@plane/types";
-import { Card, ECardDirection, ECardSpacing } from "@plane/ui";
+import { Card, ECardDirection, ECardSpacing } from "@plane/blocks/card";
 // constants
 
 type Props = {
diff --git a/apps/web/core/components/profile/sidebar.tsx b/apps/web/core/components/profile/sidebar.tsx
index 4bb2cbed6c0..3f5bc9e0a11 100644
--- a/apps/web/core/components/profile/sidebar.tsx
+++ b/apps/web/core/components/profile/sidebar.tsx
@@ -11,12 +11,13 @@ import { Disclosure, Transition } from "@headlessui/react";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
-import { Logo } from "@plane/propel/emoji-icon-picker";
-import { IconButton } from "@plane/propel/icon-button";
+import { Logo } from "@plane/blocks/emoji-icon-picker";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 import { ChevronDownOutline, EditOutline } from "@makeplane/propel/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { IUserProfileProjectSegregation } from "@plane/types";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 import { cn, renderFormattedDate, getFileURL } from "@plane/utils";
 // components
 import { CoverImage } from "@/components/common/cover-image";
@@ -99,7 +100,9 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
               <div className="absolute top-3.5 right-3.5">
                 <IconButton
                   variant="secondary"
-                  icon={EditOutline}
+                  size="sm"
+                  icon={<Icon icon={EditOutline} />}
+                  aria-label="Edit profile"
                   onClick={() =>
                     toggleProfileSettingsModal({
                       activeTab: "general",
diff --git a/apps/web/core/components/profile/start-of-week-preference.tsx b/apps/web/core/components/profile/start-of-week-preference.tsx
index 93893b4ce86..c1259c37b1e 100644
--- a/apps/web/core/components/profile/start-of-week-preference.tsx
+++ b/apps/web/core/components/profile/start-of-week-preference.tsx
@@ -7,9 +7,9 @@
 import { observer } from "mobx-react";
 // plane imports
 import { START_OF_THE_WEEK_OPTIONS } from "@plane/constants";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { EStartOfTheWeek } from "@plane/types";
-import { CustomSelect } from "@plane/ui";
+import { CustomSelect } from "@plane/blocks/dropdowns";
 // components
 import { SettingsControlItem } from "@/components/settings/control-item";
 // hooks
diff --git a/apps/web/core/components/project-states/create-update/create.tsx b/apps/web/core/components/project-states/create-update/create.tsx
index 5945fc11357..6662712badf 100644
--- a/apps/web/core/components/project-states/create-update/create.tsx
+++ b/apps/web/core/components/project-states/create-update/create.tsx
@@ -7,7 +7,7 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { STATE_GROUPS } from "@plane/constants";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IState, TStateGroups, TStateOperationsCallbacks } from "@plane/types";
 // components
 import { StateForm } from "@/components/project-states";
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 4f4e6aac9b0..60628658fc1 100644
--- a/apps/web/core/components/project-states/create-update/form.tsx
+++ b/apps/web/core/components/project-states/create-update/form.tsx
@@ -9,9 +9,9 @@ import { TwitterPicker } from "react-color";
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IState } from "@plane/types";
-import { Popover } from "@plane/ui";
+import { Popover } from "@plane/blocks/popovers";
 type TStateForm = {
   data: Partial<IState>;
   onSubmit: (formData: Partial<IState>) => Promise<{ status: string }>;
@@ -109,12 +109,23 @@ export function StateForm(props: TStateForm) {
         </Field>
 
         <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
+            type="button"
+            variant="secondary"
+            size="md"
+            stretch="auto"
+            label="Cancel"
+            disabled={buttonDisabled}
+            onClick={onCancel}
+          />
         </div>
       </div>
     </div>
diff --git a/apps/web/core/components/project-states/create-update/update.tsx b/apps/web/core/components/project-states/create-update/update.tsx
index f64fd11a7eb..40426653e8d 100644
--- a/apps/web/core/components/project-states/create-update/update.tsx
+++ b/apps/web/core/components/project-states/create-update/update.tsx
@@ -6,7 +6,7 @@
 
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IState, TStateOperationsCallbacks } from "@plane/types";
 // components
 import { StateForm } from "@/components/project-states";
diff --git a/apps/web/core/components/project-states/group-item.tsx b/apps/web/core/components/project-states/group-item.tsx
index ca8bca366d9..c6078577d27 100644
--- a/apps/web/core/components/project-states/group-item.tsx
+++ b/apps/web/core/components/project-states/group-item.tsx
@@ -10,7 +10,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { EIconSize } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { StateGroupIcon } from "@plane/propel/icons";
+import { StateGroupIcon } from "@plane/blocks/icons";
 import { AddOutline, ChevronDownOutline } from "@makeplane/propel/icons";
 import type { IState, TStateGroups, TStateOperationsCallbacks } from "@plane/types";
 import { cn } from "@plane/utils";
diff --git a/apps/web/core/components/project-states/loader.tsx b/apps/web/core/components/project-states/loader.tsx
index 876110c8e37..b18d4e7bf60 100644
--- a/apps/web/core/components/project-states/loader.tsx
+++ b/apps/web/core/components/project-states/loader.tsx
@@ -4,7 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 
 export function ProjectStateLoader() {
   return (
diff --git a/apps/web/core/components/project-states/options/delete.tsx b/apps/web/core/components/project-states/options/delete.tsx
index 44747afaf32..90f308005c8 100644
--- a/apps/web/core/components/project-states/options/delete.tsx
+++ b/apps/web/core/components/project-states/options/delete.tsx
@@ -8,10 +8,10 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import { CloseOutline, LoadingOutline } from "@makeplane/propel/icons";
 // plane imports
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { IState, TStateOperationsCallbacks } from "@plane/types";
-import { AlertModalCore } from "@plane/ui";
+import { AlertModalCore } from "@plane/blocks/modals";
 import { cn } from "@plane/utils";
 // hooks
 import { usePlatformOS } from "@/hooks/use-platform-os";
diff --git a/apps/web/core/components/project-states/state-delete-modal.tsx b/apps/web/core/components/project-states/state-delete-modal.tsx
index c1b04d45539..62fe35100b7 100644
--- a/apps/web/core/components/project-states/state-delete-modal.tsx
+++ b/apps/web/core/components/project-states/state-delete-modal.tsx
@@ -8,10 +8,10 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // Plane imports
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IState } from "@plane/types";
 // ui
-import { AlertModalCore } from "@plane/ui";
+import { AlertModalCore } from "@plane/blocks/modals";
 // hooks
 import { useProjectState } from "@/hooks/store/use-project-state";
 
diff --git a/apps/web/core/components/project-states/state-item-title.tsx b/apps/web/core/components/project-states/state-item-title.tsx
index da953ffff0e..dca7779adfd 100644
--- a/apps/web/core/components/project-states/state-item-title.tsx
+++ b/apps/web/core/components/project-states/state-item-title.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { DragDropOutline, EditOutline } from "@makeplane/propel/icons";
 import { EIconSize } from "@plane/constants";
 // plane imports
-import { StateGroupIcon } from "@plane/propel/icons";
+import { StateGroupIcon } from "@plane/blocks/icons";
 import type { IState, TStateOperationsCallbacks } from "@plane/types";
 // local imports
 import { useProjectState } from "@/hooks/store/use-project-state";
diff --git a/apps/web/core/components/project-states/state-item.tsx b/apps/web/core/components/project-states/state-item.tsx
index fa0fb15a3d7..cca1b003624 100644
--- a/apps/web/core/components/project-states/state-item.tsx
+++ b/apps/web/core/components/project-states/state-item.tsx
@@ -12,7 +12,7 @@ import { observer } from "mobx-react";
 // Plane
 import type { TDraggableData } from "@plane/constants";
 import type { IState, TStateGroups, TStateOperationsCallbacks } from "@plane/types";
-import { DropIndicator } from "@plane/ui";
+import { DropIndicator } from "@plane/blocks/sortable";
 import { cn, getCurrentStateSequence } from "@plane/utils";
 // components
 import { StateItemTitle, StateUpdate } from "@/components/project-states";
diff --git a/apps/web/core/components/project/applied-filters/root.tsx b/apps/web/core/components/project/applied-filters/root.tsx
index 330058e08aa..caf00c9229f 100644
--- a/apps/web/core/components/project/applied-filters/root.tsx
+++ b/apps/web/core/components/project/applied-filters/root.tsx
@@ -10,7 +10,7 @@ import { CloseOutline } from "@makeplane/propel/icons";
 // plane imports
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { TProjectAppliedDisplayFilterKeys, TProjectFilters } from "@plane/types";
-import { EHeaderVariant, Header } from "@plane/ui";
+import { EHeaderVariant, Header } from "@plane/blocks/header";
 import { replaceUnderscoreIfSnakeCase } from "@plane/utils";
 // local imports
 import { AppliedAccessFilters } from "./access";
@@ -29,7 +29,7 @@ type Props = {
   totalProjects: number;
 };
 
-const MEMBERS_FILTERS = ["lead", "members"];
+const MEMBERS_FILTERS = new Set(["lead", "members"]);
 const DATE_FILTERS = ["created_at"];
 
 export function ProjectAppliedFiltersList(props: Props) {
@@ -80,7 +80,7 @@ export function ProjectAppliedFiltersList(props: Props) {
                   values={value}
                 />
               )}
-              {MEMBERS_FILTERS.includes(filterKey) && (
+              {MEMBERS_FILTERS.has(filterKey) && (
                 <AppliedMembersFilters
                   editable={isEditingAllowed}
                   handleRemove={(val) => handleRemoveFilter(filterKey, val)}
diff --git a/apps/web/core/components/project/archive-restore-modal.tsx b/apps/web/core/components/project/archive-restore-modal.tsx
index 0f17ce90f7c..1e3dbed13d4 100644
--- a/apps/web/core/components/project/archive-restore-modal.tsx
+++ b/apps/web/core/components/project/archive-restore-modal.tsx
@@ -6,9 +6,9 @@
 
 import { useState } from "react";
 // ui
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -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-list.tsx b/apps/web/core/components/project/card-list.tsx
index 961045d6489..358a30c1b82 100644
--- a/apps/web/core/components/project/card-list.tsx
+++ b/apps/web/core/components/project/card-list.tsx
@@ -8,8 +8,8 @@ import { observer } from "mobx-react";
 // plane imports
 import { EUserPermissionsLevel, EUserPermissions } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateDetailed } from "@plane/propel/empty-state";
-import { ContentWrapper } from "@plane/ui";
+import { EmptyStateDetailed } from "@plane/blocks/empty-state";
+import { ContentWrapper } from "@plane/blocks/content-wrapper";
 // components
 import { calculateTotalFilters } from "@plane/utils";
 import { ProjectsLoader } from "@/components/ui/loader/projects-loader";
diff --git a/apps/web/core/components/project/card.tsx b/apps/web/core/components/project/card.tsx
index 45dbcb1ae86..0bc5cf141c5 100644
--- a/apps/web/core/components/project/card.tsx
+++ b/apps/web/core/components/project/card.tsx
@@ -22,13 +22,14 @@ import {
 import { EUserPermissions, EUserPermissionsLevel, IS_FAVORITE_MENU_OPEN } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Button } from "@plane/propel/button";
-import { Logo } from "@plane/propel/emoji-icon-picker";
-import { setPromiseToast, setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { Logo } from "@plane/blocks/emoji-icon-picker";
+import { setPromiseToast, setToast, TOAST_TYPE } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { IProject } from "@plane/types";
-import type { TContextMenuItem } from "@plane/ui";
-import { ContextMenu, FavoriteStar } from "@plane/ui";
+import type { TContextMenuItem } from "@plane/blocks/dropdowns";
+import { ContextMenu } from "@plane/blocks/dropdowns";
+import { FavoriteStar } from "@plane/blocks/favorite-star";
 import { copyUrlToClipboard, cn, getFileURL, renderFormattedDate } from "@plane/utils";
 // components
 // hooks
@@ -366,16 +367,17 @@ export const ProjectCard = observer(function ProjectCard(props: Props) {
                 {!isMemberOfProject && (
                   <div className="flex items-center">
                     <Button
-                      variant="link"
-                      className="!p-0 font-semibold"
+                      variant="ghost"
+                      size="sm"
+                      stretch="auto"
+                      label="Join"
                       onClick={(e) => {
                         e.preventDefault();
                         e.stopPropagation();
                         setJoinProjectModal(true);
                       }}
-                    >
-                      Join
-                    </Button>
+                      render={<button className="!p-0 font-semibold text-link-primary underline" />}
+                    />
                   </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 04145f1a87e..f8b3e2d3028 100644
--- a/apps/web/core/components/project/confirm-project-member-remove.tsx
+++ b/apps/web/core/components/project/confirm-project-member-remove.tsx
@@ -9,10 +9,10 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { WarningTriangleOutline } from "@makeplane/propel/icons";
 // 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";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 import { useUser } from "@/hooks/store/user";
@@ -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-modal.tsx b/apps/web/core/components/project/create-project-modal.tsx
index 45e2ed517d2..6b814c154b0 100644
--- a/apps/web/core/components/project/create-project-modal.tsx
+++ b/apps/web/core/components/project/create-project-modal.tsx
@@ -5,7 +5,7 @@
  */
 
 import { useEffect, useState } from "react";
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 import { getAssetIdFromUrl, checkURLValidity } from "@plane/utils";
 // plane ui
 // helpers
diff --git a/apps/web/core/components/project/create/header.tsx b/apps/web/core/components/project/create/header.tsx
index 356ec1c56e2..99a056c90f4 100644
--- a/apps/web/core/components/project/create/header.tsx
+++ b/apps/web/core/components/project/create/header.tsx
@@ -9,7 +9,7 @@ import { Controller, useFormContext } from "react-hook-form";
 // plane imports
 import { ETabIndices } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
+import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/blocks/emoji-icon-picker";
 import { CloseOutline } from "@makeplane/propel/icons";
 // plane types
 import type { IProject } from "@plane/types";
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 ae66ca71919..f0eb5000d06 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"
+        type="submit"
+        label={isSubmitting ? t("creating") : t("create_project")}
+        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 b4ee30a64da..769214081b1 100644
--- a/apps/web/core/components/project/delete-project-modal.tsx
+++ b/apps/web/core/components/project/delete-project-modal.tsx
@@ -10,10 +10,10 @@ import { WarningTriangleOutline } from "@makeplane/propel/icons";
 // Plane imports
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IProject } from "@plane/types";
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -147,12 +147,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"
+            type="submit"
+            label={isSubmitting ? "Deleting" : "Delete project"}
+            disabled={!canDelete}
+            loading={isSubmitting}
+          />
         </div>
       </form>
     </ModalCore>
diff --git a/apps/web/core/components/project/dropdowns/filters/lead.tsx b/apps/web/core/components/project/dropdowns/filters/lead.tsx
index b47ec8c3678..9cc6ec30b55 100644
--- a/apps/web/core/components/project/dropdowns/filters/lead.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/lead.tsx
@@ -9,7 +9,7 @@ import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 // plane ui
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
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 5489554a3b4..938ebdcb5ff 100644
--- a/apps/web/core/components/project/dropdowns/filters/member-list.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/member-list.tsx
@@ -7,11 +7,11 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 import { ChevronDownOutline } from "@makeplane/propel/icons";
 import { EUserProjectRoles, EUserWorkspaceRoles } from "@plane/types";
 // plane ui
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 // components
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
 
@@ -101,7 +101,7 @@ export const MemberListFiltersDropdown = observer(function MemberListFiltersDrop
     <CustomMenu
       customButton={
         <div className="relative">
-          <Button variant="secondary" size="lg" className="flex items-center gap-2">
+          <Button variant="secondary" size="md" stretch="auto" render={<button className="flex items-center gap-2" />}>
             <span>Filters</span>
             <ChevronDownOutline className="h-3 w-3" />
           </Button>
diff --git a/apps/web/core/components/project/dropdowns/filters/members.tsx b/apps/web/core/components/project/dropdowns/filters/members.tsx
index b13b7e35886..f3fdc96818c 100644
--- a/apps/web/core/components/project/dropdowns/filters/members.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/members.tsx
@@ -9,7 +9,7 @@ import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 // plane ui
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
diff --git a/apps/web/core/components/project/dropdowns/order-by.tsx b/apps/web/core/components/project/dropdowns/order-by.tsx
index 1a363d1230c..b65692d4db5 100644
--- a/apps/web/core/components/project/dropdowns/order-by.tsx
+++ b/apps/web/core/components/project/dropdowns/order-by.tsx
@@ -8,9 +8,9 @@ import { SortDescendingOutline, TickOutline } from "@makeplane/propel/icons";
 // 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 type { TProjectOrderByOptions } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 
 type Props = {
   onChange: (value: TProjectOrderByOptions) => void;
@@ -18,7 +18,7 @@ type Props = {
   isMobile?: boolean;
 };
 
-const DISABLED_ORDERING_OPTIONS = ["sort_order"];
+const DISABLED_ORDERING_OPTIONS = new Set(["sort_order"]);
 
 export function ProjectOrderByDropdown(props: Props) {
   const { onChange, value, isMobile = false } = props;
@@ -27,7 +27,7 @@ export function ProjectOrderByDropdown(props: Props) {
   const orderByDetails = PROJECT_ORDER_BY_OPTIONS.find((option) => value?.includes(option.key));
 
   const isDescending = value?.[0] === "-";
-  const isOrderingDisabled = !!value && DISABLED_ORDERING_OPTIONS.includes(value);
+  const isOrderingDisabled = !!value && DISABLED_ORDERING_OPTIONS.has(value);
 
   return (
     <CustomMenu
@@ -35,15 +35,15 @@ export function ProjectOrderByDropdown(props: Props) {
       customButton={
         <>
           {isMobile ? (
-            <div className={getButtonStyling("secondary", "lg")}>
+            <Button variant="secondary" size="md" stretch="auto" render={<div />}>
               <SortDescendingOutline className="size-3.5 shrink-0" />
               {orderByDetails && t(orderByDetails?.i18n_label)}
-            </div>
+            </Button>
           ) : (
-            <div className={getButtonStyling("secondary", "lg")}>
+            <Button variant="secondary" size="md" stretch="auto" render={<div />}>
               <SortDescendingOutline className="size-3.5 shrink-0" />
               {orderByDetails && t(orderByDetails?.i18n_label)}
-            </div>
+            </Button>
           )}
         </>
       }
diff --git a/apps/web/core/components/project/empty-state.tsx b/apps/web/core/components/project/empty-state.tsx
index 4e4bce83880..66b269b5d77 100644
--- a/apps/web/core/components/project/empty-state.tsx
+++ b/apps/web/core/components/project/empty-state.tsx
@@ -6,7 +6,8 @@
 
 import React from "react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
+import { Icon } from "@makeplane/propel/components/icon";
 
 type Props = {
   title: string;
@@ -33,14 +34,15 @@ 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 ? <Icon icon={primaryButton.icon} /> : undefined}
+              iconPosition="start"
               onClick={primaryButton.onClick}
               disabled={disabled}
-            >
-              {primaryButton.text}
-            </Button>
+            />
           )}
           {secondaryButton}
         </div>
diff --git a/apps/web/core/components/project/form-loader.tsx b/apps/web/core/components/project/form-loader.tsx
index a78d4d134c1..35aa315f606 100644
--- a/apps/web/core/components/project/form-loader.tsx
+++ b/apps/web/core/components/project/form-loader.tsx
@@ -5,7 +5,7 @@
  */
 
 // components
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 
 export function ProjectDetailsFormLoader() {
   return (
diff --git a/apps/web/core/components/project/form.tsx b/apps/web/core/components/project/form.tsx
index e5aaab47bce..67f4ffbf2ee 100644
--- a/apps/web/core/components/project/form.tsx
+++ b/apps/web/core/components/project/form.tsx
@@ -13,13 +13,13 @@ import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area"
 import { NETWORK_CHOICES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // plane imports
-import { Button } from "@plane/propel/button";
-import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/blocks/emoji-icon-picker";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import { EFileAssetType } from "@plane/types";
 import type { IProject, IWorkspace } from "@plane/types";
-import { CustomSelect } from "@plane/ui";
+import { CustomSelect } from "@plane/blocks/dropdowns";
 import { renderFormattedDate } from "@plane/utils";
 import { CoverImage } from "@/components/common/cover-image";
 import { ImagePickerPopover } from "@/components/core/image-picker-popover";
@@ -452,9 +452,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"
+              type="submit"
+              label={isLoading ? t("updating") : t("common.update_project")}
+              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 15503bda5b3..06ad8b7e4fb 100644
--- a/apps/web/core/components/project/header.tsx
+++ b/apps/web/core/components/project/header.tsx
@@ -10,9 +10,10 @@ 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/elements/button";
 import { ProjectsOutline } from "@makeplane/propel/icons";
-import { Breadcrumbs, Header } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
+import { Header } from "@plane/blocks/header";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 // hooks
@@ -61,11 +62,12 @@ 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"
+            render={<button 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>
diff --git a/apps/web/core/components/project/integration-card.tsx b/apps/web/core/components/project/integration-card.tsx
index e4cd4e05341..124b8cbf8f4 100644
--- a/apps/web/core/components/project/integration-card.tsx
+++ b/apps/web/core/components/project/integration-card.tsx
@@ -6,7 +6,7 @@
 
 import { useParams } from "next/navigation";
 import useSWR, { mutate } from "swr";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IWorkspaceIntegration } from "@plane/types";
 // assets
 import GithubLogo from "@/app/assets/logos/github-square.png?url";
diff --git a/apps/web/core/components/project/join-project-modal.tsx b/apps/web/core/components/project/join-project-modal.tsx
index 8d1088440b2..0c89fd870c9 100644
--- a/apps/web/core/components/project/join-project-modal.tsx
+++ b/apps/web/core/components/project/join-project-modal.tsx
@@ -6,10 +6,10 @@
 
 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";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // hooks
 import { useUserPermissions } from "@/hooks/store/user";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -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 addd3c3d2bb..9429e61c682 100644
--- a/apps/web/core/components/project/leave-project-modal.tsx
+++ b/apps/web/core/components/project/leave-project-modal.tsx
@@ -11,10 +11,10 @@ import { WarningTriangleOutline } from "@makeplane/propel/icons";
 // Plane imports
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IProject } from "@plane/types";
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // hooks
 import { useUserPermissions } from "@/hooks/store/user";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -171,12 +171,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"
+            type="submit"
+            label={isSubmitting ? "Leaving..." : "Leave Project"}
+            loading={isSubmitting}
+          />
         </div>
       </form>
     </ModalCore>
diff --git a/apps/web/core/components/project/member-header-column.tsx b/apps/web/core/components/project/member-header-column.tsx
index d333fe8c701..b29cb650a90 100644
--- a/apps/web/core/components/project/member-header-column.tsx
+++ b/apps/web/core/components/project/member-header-column.tsx
@@ -20,7 +20,7 @@ import { MEMBER_PROPERTY_DETAILS } from "@plane/constants";
 // i18n
 import { useTranslation } from "@plane/i18n";
 // types
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 import type { IMemberFilters } from "@/store/member/utils";
 
 interface Props {
diff --git a/apps/web/core/components/project/member-list-item.tsx b/apps/web/core/components/project/member-list-item.tsx
index 19256901897..b29c63161fc 100644
--- a/apps/web/core/components/project/member-list-item.tsx
+++ b/apps/web/core/components/project/member-list-item.tsx
@@ -6,8 +6,8 @@
 
 import { observer } from "mobx-react";
 // plane imports
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { Table } from "@plane/ui";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
+import { Table } from "@plane/blocks/tables";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
 import { useUser, useUserPermissions } from "@/hooks/store/user";
diff --git a/apps/web/core/components/project/member-list.tsx b/apps/web/core/components/project/member-list.tsx
index d6c04a1a0d5..c92b54649f2 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 { SearchOutline } from "@makeplane/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/member-select.tsx b/apps/web/core/components/project/member-select.tsx
index d813297d155..34e50188fa7 100644
--- a/apps/web/core/components/project/member-select.tsx
+++ b/apps/web/core/components/project/member-select.tsx
@@ -11,7 +11,7 @@ import { Ban } from "lucide-react";
 import { Avatar } from "@makeplane/propel/components/avatar";
 import { EUserProjectRoles } from "@plane/types";
 // plane ui
-import { CustomSearchSelect } from "@plane/ui";
+import { CustomSearchSelect } from "@plane/blocks/dropdowns";
 // helpers
 import { getFileURL } from "@plane/utils";
 // hooks
diff --git a/apps/web/core/components/project/multi-select-modal.tsx b/apps/web/core/components/project/multi-select-modal.tsx
index ca0eeee0e93..9ded0c0e7ae 100644
--- a/apps/web/core/components/project/multi-select-modal.tsx
+++ b/apps/web/core/components/project/multi-select-modal.tsx
@@ -11,11 +11,11 @@ import { useTheme } from "next-themes";
 import { Combobox } from "@headlessui/react";
 // plane ui
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { Logo } from "@plane/propel/emoji-icon-picker";
+import { Button } from "@makeplane/propel/components/button";
+import { Logo } from "@plane/blocks/emoji-icon-picker";
 import { CloseOutline, SearchOutline } from "@makeplane/propel/icons";
 import { Checkbox } from "@makeplane/propel/components/checkbox";
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 import { cn } from "@plane/utils";
 // assets
 import darkProjectAsset from "@/app/assets/empty-state/search/project-dark.webp?url";
@@ -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")}
           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 931f36b3476..98104356a43 100644
--- a/apps/web/core/components/project/project-feature-update.tsx
+++ b/apps/web/core/components/project/project-feature-update.tsx
@@ -8,9 +8,9 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { useTranslation } from "@plane/i18n";
 // ui
-import { Button, getButtonStyling } from "@plane/propel/button";
-import { Logo } from "@plane/propel/emoji-icon-picker";
-import { Row } from "@plane/ui";
+import { Button } from "@makeplane/propel/elements/button";
+import { Logo } from "@plane/blocks/emoji-icon-picker";
+import { Row } from "@plane/blocks/row";
 // components
 // hooks
 import { useProject } from "@/hooks/store/use-project";
@@ -46,18 +46,24 @@ 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}>
+          <Button variant="secondary" size="md" stretch="auto" onClick={onClose} tabIndex={1}>
             {t("close")}
           </Button>
-          <Link
-            href={`/${workspaceSlug}/projects/${projectId}/issues`}
-            onClick={onClose}
-            className={getButtonStyling("primary", "lg")}
-            // oxlint-disable-next-line jsx-a11y/tabindex-no-positive
-            tabIndex={2}
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            render={
+              <Link
+                href={`/${workspaceSlug}/projects/${projectId}/issues`}
+                onClick={onClose}
+                // oxlint-disable-next-line jsx-a11y/tabindex-no-positive
+                tabIndex={2}
+              />
+            }
           >
             {t("open_project")}
-          </Link>
+          </Button>
         </div>
       </div>
     </>
diff --git a/apps/web/core/components/project/project-settings-member-defaults.tsx b/apps/web/core/components/project/project-settings-member-defaults.tsx
index f15d6c08bc8..c18d43378d7 100644
--- a/apps/web/core/components/project/project-settings-member-defaults.tsx
+++ b/apps/web/core/components/project/project-settings-member-defaults.tsx
@@ -12,10 +12,10 @@ import useSWR from "swr";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IProject, IUserLite, IWorkspace } from "@plane/types";
 import { Switch } from "@makeplane/propel/components/switch";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // constants
 import { PROJECT_DETAILS } from "@plane/constants";
 // hooks
diff --git a/apps/web/core/components/project/publish-project/modal.tsx b/apps/web/core/components/project/publish-project/modal.tsx
index c0674da21be..6202a172471 100644
--- a/apps/web/core/components/project/publish-project/modal.tsx
+++ b/apps/web/core/components/project/publish-project/modal.tsx
@@ -11,13 +11,15 @@ 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 { GlobeOutline, NewTabOutline, TickOutline } from "@makeplane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { TProjectPublishLayouts, TProjectPublishSettings } from "@plane/types";
 // ui
 import { Switch } from "@makeplane/propel/components/switch";
-import { Loader, CustomSelect, ModalCore, EModalWidth } from "@plane/ui";
+import { CustomSelect } from "@plane/blocks/dropdowns";
+import { Loader } from "@plane/blocks/loader";
+import { ModalCore, EModalWidth } from "@plane/blocks/modals";
 // helpers
 import { copyTextToClipboard } from "@plane/utils";
 // hooks
@@ -184,13 +186,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 +322,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"
+                    type="submit"
+                    label={isSubmitting ? "Updating" : "Update settings"}
+                    loading={isSubmitting}
+                  />
                 )
               ) : (
-                <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
-                  {isSubmitting ? "Publishing" : "Publish"}
-                </Button>
+                <Button
+                  variant="primary"
+                  size="md"
+                  stretch="auto"
+                  type="submit"
+                  label={isSubmitting ? "Publishing" : "Publish"}
+                  loading={isSubmitting}
+                />
               )}
             </div>
           )}
diff --git a/apps/web/core/components/project/search-projects.tsx b/apps/web/core/components/project/search-projects.tsx
index 402f88b20d8..a744ef5cb68 100644
--- a/apps/web/core/components/project/search-projects.tsx
+++ b/apps/web/core/components/project/search-projects.tsx
@@ -15,7 +15,8 @@ import { CloseOutline, SearchOutline } from "@makeplane/propel/icons";
 import { cn } from "@plane/utils";
 // hooks
 import { useProjectFilter } from "@/hooks/store/use-project-filter";
-import { IconButton } from "@plane/propel/icon-button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 
 export const ProjectSearch = observer(function ProjectSearch() {
   // i18n
@@ -43,13 +44,14 @@ export const ProjectSearch = observer(function ProjectSearch() {
       {!isSearchOpen && (
         <IconButton
           variant="ghost"
-          size="lg"
-          className="-mr-1"
+          size="md"
+          render={<button className="-mr-1" />}
           onClick={() => {
             setIsSearchOpen(true);
             inputRef.current?.focus();
           }}
-          icon={SearchOutline}
+          icon={<Icon icon={SearchOutline} />}
+          aria-label={t("common.search.label")}
         />
       )}
       <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 e2906fb10b1..efcb3dc2a71 100644
--- a/apps/web/core/components/project/send-project-invitation-modal.tsx
+++ b/apps/web/core/components/project/send-project-invitation-modal.tsx
@@ -11,10 +11,11 @@ import { useForm, Controller, useFieldArray } from "react-hook-form";
 import { Avatar } from "@makeplane/propel/components/avatar";
 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 { AddOutline, ChevronDownOutline, CloseOutline } from "@makeplane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { CustomSelect, CustomSearchSelect, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
+import { CustomSelect, CustomSearchSelect } from "@plane/blocks/dropdowns";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // helpers
 import { getFileURL } from "@plane/utils";
 // hooks
@@ -305,14 +306,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"
+              type="submit"
+              label={
+                isSubmitting
+                  ? `${fields && fields.length > 1 ? `${t("add_members")}...` : `${t("add_member")}...`}`
+                  : `${fields && fields.length > 1 ? t("add_members") : t("add_member")}`
+              }
+              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 de56790c885..d142d74874a 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/project/settings/features-list.tsx b/apps/web/core/components/project/settings/features-list.tsx
index f4411c2b05d..0092eb75582 100644
--- a/apps/web/core/components/project/settings/features-list.tsx
+++ b/apps/web/core/components/project/settings/features-list.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { setPromiseToast } from "@plane/propel/toast";
+import { setPromiseToast } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { IProject } from "@plane/types";
 import { CyclesOutline, IntakeOutline, ModuleOutline, PagesOutline, ViewsOutline } from "@makeplane/propel/icons";
diff --git a/apps/web/core/components/project/settings/helper.tsx b/apps/web/core/components/project/settings/helper.tsx
index 06714115547..e9020c8611b 100644
--- a/apps/web/core/components/project/settings/helper.tsx
+++ b/apps/web/core/components/project/settings/helper.tsx
@@ -6,7 +6,7 @@
 
 import Link from "next/link";
 import { ChevronRightOutline } from "@makeplane/propel/icons";
-import { EPillVariant, Pill, EPillSize } from "@plane/propel/pill";
+import { Badge } from "@makeplane/propel/components/badge";
 import { Switch } from "@makeplane/propel/components/switch";
 import { joinUrlPath } from "@plane/utils";
 
@@ -24,13 +24,7 @@ export function ProjectFeatureToggle(props: Props) {
   return featureItem?.href ? (
     <Link href={joinUrlPath(workspaceSlug, "settings", "projects", projectId, "features", featureItem?.href)}>
       <div className="flex items-center gap-2">
-        <Pill
-          variant={value ? EPillVariant.PRIMARY : EPillVariant.DEFAULT}
-          size={EPillSize.SM}
-          className="rounded-lg border-none"
-        >
-          {value ? "Enabled" : "Disabled"}
-        </Pill>
+        <Badge variant={value ? "brand" : "neutral"} size="sm" label={value ? "Enabled" : "Disabled"} />
         <ChevronRightOutline className="h-4 w-4 text-tertiary" />
       </div>
     </Link>
diff --git a/apps/web/core/components/project/settings/member-columns.tsx b/apps/web/core/components/project/settings/member-columns.tsx
index 8a99a73809d..ced84bd582e 100644
--- a/apps/web/core/components/project/settings/member-columns.tsx
+++ b/apps/web/core/components/project/settings/member-columns.tsx
@@ -11,9 +11,9 @@ import { CircleMinus } from "lucide-react";
 import { Disclosure } from "@headlessui/react";
 // plane imports
 import { ROLE, EUserPermissions } from "@plane/constants";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { EUserProjectRoles, IUser, IWorkspaceMember, TProjectMembership } from "@plane/types";
-import { CustomMenu, CustomSelect } from "@plane/ui";
+import { CustomMenu, CustomSelect } from "@plane/blocks/dropdowns";
 import { getFileURL } from "@plane/utils";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
diff --git a/apps/web/core/components/projects/create/attributes.tsx b/apps/web/core/components/projects/create/attributes.tsx
index b5dd64e69ec..0e70d3eaf45 100644
--- a/apps/web/core/components/projects/create/attributes.tsx
+++ b/apps/web/core/components/projects/create/attributes.tsx
@@ -9,7 +9,7 @@ import { Controller, useFormContext } from "react-hook-form";
 import { NETWORK_CHOICES, ETabIndices } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import type { IProject } from "@plane/types";
-import { CustomSelect } from "@plane/ui";
+import { CustomSelect } from "@plane/blocks/dropdowns";
 import { getTabIndex } from "@plane/utils";
 // components
 import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
diff --git a/apps/web/core/components/projects/create/root.tsx b/apps/web/core/components/projects/create/root.tsx
index 87fe51caa4e..423734d45c7 100644
--- a/apps/web/core/components/projects/create/root.tsx
+++ b/apps/web/core/components/projects/create/root.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { FormProvider, useForm } from "react-hook-form";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { EFileAssetType } from "@plane/types";
 // components
 import ProjectCommonAttributes from "@/components/project/create/common-attributes";
diff --git a/apps/web/core/components/projects/settings/intake/header.tsx b/apps/web/core/components/projects/settings/intake/header.tsx
index a46617c0a05..a02350dc902 100644
--- a/apps/web/core/components/projects/settings/intake/header.tsx
+++ b/apps/web/core/components/projects/settings/intake/header.tsx
@@ -11,8 +11,9 @@ import { IntakeOutline, RefreshOutline } from "@makeplane/propel/icons";
 // ui
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { Breadcrumbs, Header } from "@plane/ui";
+import { Button } from "@makeplane/propel/components/button";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
+import { Header } from "@plane/blocks/header";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { InboxIssueCreateModalRoot } from "@/components/inbox/modals/create-modal";
@@ -77,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/readonly/priority.tsx b/apps/web/core/components/readonly/priority.tsx
index c3343ace4e4..7777d491c1b 100644
--- a/apps/web/core/components/readonly/priority.tsx
+++ b/apps/web/core/components/readonly/priority.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { ISSUE_PRIORITIES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { PriorityIcon } from "@plane/propel/icons";
+import { PriorityIcon } from "@plane/blocks/icons";
 import type { TIssuePriorities } from "@plane/types";
 import { cn } from "@plane/utils";
 
diff --git a/apps/web/core/components/readonly/state.tsx b/apps/web/core/components/readonly/state.tsx
index f041dcbfaff..e9f03e528a6 100644
--- a/apps/web/core/components/readonly/state.tsx
+++ b/apps/web/core/components/readonly/state.tsx
@@ -8,8 +8,8 @@ import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { StateGroupIcon } from "@plane/propel/icons";
-import { Loader } from "@plane/ui";
+import { StateGroupIcon } from "@plane/blocks/icons";
+import { Loader } from "@plane/blocks/loader";
 import { cn } from "@plane/utils";
 // hooks
 import { useProjectState } from "@/hooks/store/use-project-state";
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 3d7d4f6c87e..723add7a99b 100644
--- a/apps/web/core/components/rich-filters/add-filters/button.tsx
+++ b/apps/web/core/components/rich-filters/add-filters/button.tsx
@@ -8,8 +8,8 @@ import React from "react";
 import { observer } from "mobx-react";
 import { FilterOutline } from "@makeplane/propel/icons";
 // plane imports
-import type { TButtonSize, TButtonVariant } from "@plane/propel/button";
-import { getButtonStyling } from "@plane/propel/button";
+import type { ButtonSize, ButtonVariant } from "@makeplane/propel/components/button";
+import { Button } 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";
@@ -20,8 +20,8 @@ import { AddFilterDropdown } from "./dropdown";
 export type TAddFilterButtonProps<P extends TFilterProperty, E extends TExternalFilter> = {
   buttonConfig?: {
     label: string | null;
-    variant?: TButtonVariant;
-    size?: TButtonSize;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
     className?: string;
     defaultOpen?: boolean;
     iconConfig?: {
@@ -40,7 +40,7 @@ export const AddFilterButton = observer(function AddFilterButton<P extends TFilt
   const { filter, buttonConfig, onFilterSelect } = props;
   const {
     variant = "secondary",
-    size = "base",
+    size = "sm",
     className,
     label,
     iconConfig = { shouldShowIcon: true },
@@ -68,14 +68,19 @@ export const AddFilterButton = observer(function AddFilterButton<P extends TFilt
       {...props}
       buttonConfig={{
         ...buttonConfig,
-        className: cn(getButtonStyling(variant, size), "py-[5px]", className),
+        className: undefined,
       }}
       handleFilterSelect={handleFilterSelect}
       customButton={
-        <div className="flex items-center gap-1">
+        <Button
+          variant={variant}
+          size={size}
+          stretch="auto"
+          render={<div className={cn("flex items-center gap-1 py-[5px]", className)} />}
+        >
           {iconConfig.shouldShowIcon && <FilterIcon className="size-4 text-secondary" />}
           {label}
-        </div>
+        </Button>
       }
     />
   );
diff --git a/apps/web/core/components/rich-filters/add-filters/dropdown.tsx b/apps/web/core/components/rich-filters/add-filters/dropdown.tsx
index 505162b3493..36894d15dec 100644
--- a/apps/web/core/components/rich-filters/add-filters/dropdown.tsx
+++ b/apps/web/core/components/rich-filters/add-filters/dropdown.tsx
@@ -7,10 +7,10 @@
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { setToast, TOAST_TYPE } from "@plane/blocks/toast";
 import type { IFilterInstance } from "@plane/shared-state";
 import type { TExternalFilter, TFilterProperty, TSupportedOperators } from "@plane/types";
-import { CustomSearchSelect } from "@plane/ui";
+import { CustomSearchSelect } from "@plane/blocks/dropdowns";
 import { getOperatorForPayload } from "@plane/utils";
 
 export type TAddFilterDropdownProps<P extends TFilterProperty, E extends TExternalFilter> = {
diff --git a/apps/web/core/components/rich-filters/filter-item/container.tsx b/apps/web/core/components/rich-filters/filter-item/container.tsx
index d956a89ad0b..05b57476a2a 100644
--- a/apps/web/core/components/rich-filters/filter-item/container.tsx
+++ b/apps/web/core/components/rich-filters/filter-item/container.tsx
@@ -7,7 +7,7 @@
 import { useEffect, useRef } from "react";
 // plane imports
 import { Tooltip } from "@makeplane/propel/components/tooltip";
-import { cn } from "@plane/propel/utils";
+import { cn } from "@plane/blocks/utils";
 import type { SingleOrArray, TFilterValue } from "@plane/types";
 import { hasValidValue } from "@plane/utils";
 
diff --git a/apps/web/core/components/rich-filters/filter-item/loader.tsx b/apps/web/core/components/rich-filters/filter-item/loader.tsx
index 508d7546c37..0e929bbff04 100644
--- a/apps/web/core/components/rich-filters/filter-item/loader.tsx
+++ b/apps/web/core/components/rich-filters/filter-item/loader.tsx
@@ -4,7 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 
 export function FilterItemLoader() {
   return (
diff --git a/apps/web/core/components/rich-filters/filter-item/property.tsx b/apps/web/core/components/rich-filters/filter-item/property.tsx
index 8cbdefaea4a..8eea4b37018 100644
--- a/apps/web/core/components/rich-filters/filter-item/property.tsx
+++ b/apps/web/core/components/rich-filters/filter-item/property.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 // plane imports
 import { Tooltip } from "@makeplane/propel/components/tooltip";
-import { cn } from "@plane/propel/utils";
+import { cn } from "@plane/blocks/utils";
 import type { IFilterInstance } from "@plane/shared-state";
 import type { TExternalFilter, TFilterProperty, TSupportedOperators } from "@plane/types";
 // local imports
diff --git a/apps/web/core/components/rich-filters/filter-item/root.tsx b/apps/web/core/components/rich-filters/filter-item/root.tsx
index 0970d89b844..84903202284 100644
--- a/apps/web/core/components/rich-filters/filter-item/root.tsx
+++ b/apps/web/core/components/rich-filters/filter-item/root.tsx
@@ -16,7 +16,7 @@ import type {
   TFilterConditionNodeForDisplay,
   TAllAvailableOperatorsForDisplay,
 } from "@plane/types";
-import { CustomSearchSelect } from "@plane/ui";
+import { CustomSearchSelect } from "@plane/blocks/dropdowns";
 import { cn, getOperatorForPayload } from "@plane/utils";
 // local imports
 import { FilterValueInput } from "../filter-value-input/root";
diff --git a/apps/web/core/components/rich-filters/filter-value-input/select/multi.tsx b/apps/web/core/components/rich-filters/filter-value-input/select/multi.tsx
index 2c5fb409fa8..d1939f8eb49 100644
--- a/apps/web/core/components/rich-filters/filter-value-input/select/multi.tsx
+++ b/apps/web/core/components/rich-filters/filter-value-input/select/multi.tsx
@@ -14,7 +14,7 @@ import type {
   TMultiSelectFilterFieldConfig,
   TFilterConditionNodeForDisplay,
 } from "@plane/types";
-import { CustomSearchSelect } from "@plane/ui";
+import { CustomSearchSelect } from "@plane/blocks/dropdowns";
 import { toFilterArray, getFilterValueLength } from "@plane/utils";
 // local imports
 import { SelectedOptionsDisplay } from "./selected-options-display";
diff --git a/apps/web/core/components/rich-filters/filter-value-input/select/single.tsx b/apps/web/core/components/rich-filters/filter-value-input/select/single.tsx
index 2e525b5d6e5..2131bb43b6c 100644
--- a/apps/web/core/components/rich-filters/filter-value-input/select/single.tsx
+++ b/apps/web/core/components/rich-filters/filter-value-input/select/single.tsx
@@ -13,7 +13,7 @@ import type {
   TSingleSelectFilterFieldConfig,
   TFilterConditionNodeForDisplay,
 } from "@plane/types";
-import { CustomSearchSelect } from "@plane/ui";
+import { CustomSearchSelect } from "@plane/blocks/dropdowns";
 // local imports
 import { SelectedOptionsDisplay } from "./selected-options-display";
 import { getCommonCustomSearchSelectProps, getFormattedOptions, loadOptions } from "./shared";
diff --git a/apps/web/core/components/rich-filters/filters-row.tsx b/apps/web/core/components/rich-filters/filters-row.tsx
index 9a836fcafe6..40f60d0c4fd 100644
--- a/apps/web/core/components/rich-filters/filters-row.tsx
+++ b/apps/web/core/components/rich-filters/filters-row.tsx
@@ -9,10 +9,12 @@ import { observer } from "mobx-react";
 import { AddFilterOutline } from "@makeplane/propel/icons";
 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";
+import { EHeaderVariant, Header } from "@plane/blocks/header";
+import { Loader } from "@plane/blocks/loader";
+import { cn } from "@plane/blocks/utils";
 // local imports
 import type { TAddFilterButtonProps } from "./add-filters/button";
 import { AddFilterButton } from "./add-filters/button";
@@ -64,7 +66,7 @@ export const FiltersRow = observer(function FiltersRow<K extends TFilterProperty
         buttonConfig={{
           label: null,
           ...(variant === "modal" ? modalButtonConfig : headerButtonConfig),
-          size: "lg",
+          size: "md",
           iconConfig: {
             shouldShowIcon: true,
             iconComponent: AddFilterOutline,
@@ -79,25 +81,36 @@ 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>
+        <Button
+          variant="secondary"
+          size="sm"
+          stretch="auto"
+          label={filter.clearFilterOptions?.label ?? "Clear all"}
+          onClick={filter.clearFilters}
+          render={<button className={COMMON_OPERATION_BUTTON_CLASSNAME} />}
+        />
       </ElementTransition>
       <ElementTransition show={filter.canSaveView}>
-        <Button variant="secondary" className={COMMON_OPERATION_BUTTON_CLASSNAME} onClick={filter.saveView}>
-          {filter.saveViewOptions?.label ?? "Save view"}
-        </Button>
+        <Button
+          variant="secondary"
+          size="sm"
+          stretch="auto"
+          label={filter.saveViewOptions?.label ?? "Save view"}
+          onClick={filter.saveView}
+          render={<button className={COMMON_OPERATION_BUTTON_CLASSNAME} />}
+        />
       </ElementTransition>
       <ElementTransition show={filter.canUpdateView}>
         <Button
           variant="secondary"
-          className={COMMON_OPERATION_BUTTON_CLASSNAME}
+          size="sm"
+          stretch="auto"
+          label={isUpdating ? "Confirming" : (filter.updateViewOptions?.label ?? "Update view")}
           onClick={handleUpdate}
           loading={isUpdating}
           disabled={isUpdating}
-        >
-          {isUpdating ? "Confirming" : (filter.updateViewOptions?.label ?? "Update view")}
-        </Button>
+          render={<button className={COMMON_OPERATION_BUTTON_CLASSNAME} />}
+        />
       </ElementTransition>
     </>
   );
diff --git a/apps/web/core/components/rich-filters/filters-toggle.tsx b/apps/web/core/components/rich-filters/filters-toggle.tsx
index cbc7bcff9ea..856c1aa1b01 100644
--- a/apps/web/core/components/rich-filters/filters-toggle.tsx
+++ b/apps/web/core/components/rich-filters/filters-toggle.tsx
@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 // plane imports
-import { IconButton } from "@plane/propel/icon-button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
 import { FilterOutline, SelectedFilterOutline } from "@makeplane/propel/icons";
 import { cn } from "@plane/utils";
 import type { IFilterInstance } from "@plane/shared-state";
@@ -77,14 +77,16 @@ export const FiltersToggle = observer(function FiltersToggle<P extends TFilterPr
     );
   }
 
+  const FilterIcon = showFilterRowChangesPill ? SelectedFilterOutline : FilterOutline;
+
   return (
     <IconButton
-      size="lg"
+      size="md"
       variant="secondary"
-      icon={showFilterRowChangesPill ? SelectedFilterOutline : FilterOutline}
+      icon={<FilterIcon className={cn("size-4", iconClassName)} />}
       onClick={handleToggleFilter}
-      className={buttonClassName}
-      iconClassName={iconClassName}
+      aria-label="Toggle filters"
+      render={<button className={buttonClassName} />}
     />
   );
 });
diff --git a/apps/web/core/components/settings/content-wrapper.tsx b/apps/web/core/components/settings/content-wrapper.tsx
index 3c982922a6b..efefa57aba2 100644
--- a/apps/web/core/components/settings/content-wrapper.tsx
+++ b/apps/web/core/components/settings/content-wrapper.tsx
@@ -5,7 +5,7 @@
  */
 
 // plane imports
-import { ScrollArea } from "@plane/propel/scrollarea";
+import { ScrollArea } from "@makeplane/propel/components/scroll-area";
 import { cn } from "@plane/utils";
 // components
 import { AppHeader } from "@/components/core/app-header";
@@ -26,7 +26,7 @@ export function SettingsContentWrapper(props: Props) {
           <AppHeader header={header} />
         </div>
       )}
-      <ScrollArea scrollType="hover" orientation="vertical" size="sm" className="size-full grow overflow-y-scroll">
+      <ScrollArea orientation="vertical">
         <div
           className={cn("py-9", {
             "w-full px-page-x lg:px-12": hugging,
diff --git a/apps/web/core/components/settings/heading.tsx b/apps/web/core/components/settings/heading.tsx
index 32656f2882d..dd18a28909f 100644
--- a/apps/web/core/components/settings/heading.tsx
+++ b/apps/web/core/components/settings/heading.tsx
@@ -5,7 +5,7 @@
  */
 
 // plane imports
-import { cn } from "@plane/ui";
+import { cn } from "@plane/blocks/utils";
 
 type Props = {
   className?: string;
diff --git a/apps/web/core/components/settings/mobile/nav.tsx b/apps/web/core/components/settings/mobile/nav.tsx
index 3e5767ad32a..bfa7de2e75d 100644
--- a/apps/web/core/components/settings/mobile/nav.tsx
+++ b/apps/web/core/components/settings/mobile/nav.tsx
@@ -11,7 +11,8 @@ import { useOutsideClickDetector } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
 import { ChevronRightOutline } from "@makeplane/propel/icons";
 import { useUserSettings } from "@/hooks/store/user";
-import { IconButton } from "@plane/propel/icon-button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 
 type Props = {
   hamburgerContent: React.ComponentType<{ className?: string; isMobile?: boolean }>;
@@ -38,7 +39,14 @@ export const SettingsMobileNav = observer(function SettingsMobileNav(props: Prop
             <HamburgerContent className="max-h-100 rounded-lg border border-subtle pb-3" />
           </div>
         )}
-        <IconButton variant="secondary" className="group z-50 shrink-0" icon={Menu} onClick={() => toggleSidebar()} />
+        <IconButton
+          variant="secondary"
+          size="sm"
+          render={<button className="group z-50 shrink-0" />}
+          icon={<Icon icon={Menu} />}
+          aria-label="Toggle settings menu"
+          onClick={() => toggleSidebar()}
+        />
       </div>
       {/* path */}
       <div className="flex items-center gap-2">
diff --git a/apps/web/core/components/settings/page-header.tsx b/apps/web/core/components/settings/page-header.tsx
index 2b3328a78b6..af7b08b9141 100644
--- a/apps/web/core/components/settings/page-header.tsx
+++ b/apps/web/core/components/settings/page-header.tsx
@@ -4,7 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import { Header } from "@plane/ui";
+import { Header } from "@plane/blocks/header";
 
 type Props = {
   leftItem?: React.ReactNode;
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 0d7217373a1..bd36b2bb458 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,8 +9,8 @@ import { observer } from "mobx-react";
 import useSWR from "swr";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { EmptyStateCompact } from "@plane/propel/empty-state";
+import { Button } from "@makeplane/propel/components/button";
+import { EmptyStateCompact } from "@plane/blocks/empty-state";
 import { APITokenService } from "@plane/services";
 // components
 import { CreateApiTokenModal } from "@/components/api-token/modal/create-token-modal";
@@ -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 7ece5a8a541..0f7ec129d67 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
@@ -12,8 +12,8 @@ import { UserOutline } from "@makeplane/propel/icons";
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/blocks/toast";
 import { EFileAssetType } from "@plane/types";
 import type { IUser, TUserProfile } from "@plane/types";
 
@@ -406,9 +406,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"
+              type="submit"
+              label={isLoading ? t("saving") : t("save_changes")}
+              loading={isLoading}
+            />
           </div>
         </div>
       </form>
@@ -417,9 +422,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/notifications/email-notification-form.tsx b/apps/web/core/components/settings/profile/content/pages/notifications/email-notification-form.tsx
index 006ec1f3ee2..66a1fb86bdd 100644
--- a/apps/web/core/components/settings/profile/content/pages/notifications/email-notification-form.tsx
+++ b/apps/web/core/components/settings/profile/content/pages/notifications/email-notification-form.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 { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IUserEmailNotificationSettings } from "@plane/types";
 import { Switch } from "@makeplane/propel/components/switch";
 // components
diff --git a/apps/web/core/components/settings/profile/content/pages/preferences/language-and-timezone-list.tsx b/apps/web/core/components/settings/profile/content/pages/preferences/language-and-timezone-list.tsx
index 5ec822a95c9..7e6e2df5f08 100644
--- a/apps/web/core/components/settings/profile/content/pages/preferences/language-and-timezone-list.tsx
+++ b/apps/web/core/components/settings/profile/content/pages/preferences/language-and-timezone-list.tsx
@@ -7,8 +7,8 @@
 import { observer } from "mobx-react";
 // plane imports
 import { SUPPORTED_LANGUAGES, useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { CustomSelect } from "@plane/ui";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
+import { CustomSelect } from "@plane/blocks/dropdowns";
 // components
 import { TimezoneSelect } from "@/components/global";
 import { StartOfWeekPreference } from "@/components/profile/start-of-week-preference";
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 dfb6dfd2ed2..242f8d37755 100644
--- a/apps/web/core/components/settings/profile/content/pages/security.tsx
+++ b/apps/web/core/components/settings/profile/content/pages/security.tsx
@@ -13,9 +13,9 @@ import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { E_PASSWORD_STRENGTH } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { PasswordStrengthIndicator } from "@plane/ui";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
+import { PasswordStrengthIndicator } from "@plane/blocks/form-fields";
 import { getPasswordStrength } from "@plane/utils";
 // components
 import { ProfileSettingsHeading } from "@/components/settings/profile/heading";
@@ -272,11 +272,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"
+              type="submit"
+              label={
+                isSubmitting
+                  ? `${t("auth.common.password.change_password.label.submitting")}`
+                  : t("auth.common.password.change_password.label.default")
+              }
+              loading={isSubmitting}
+              disabled={isButtonDisabled}
+            />
           </div>
         </div>
       </form>
diff --git a/apps/web/core/components/settings/profile/content/root.tsx b/apps/web/core/components/settings/profile/content/root.tsx
index c407d2b1daa..5e3265a0cb1 100644
--- a/apps/web/core/components/settings/profile/content/root.tsx
+++ b/apps/web/core/components/settings/profile/content/root.tsx
@@ -7,7 +7,7 @@
 import { Suspense } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { ScrollArea } from "@plane/propel/scrollarea";
+import { ScrollArea } from "@makeplane/propel/components/scroll-area";
 import type { TProfileSettingsTabs } from "@plane/types";
 import { cn } from "@plane/utils";
 // local imports
@@ -23,16 +23,14 @@ export const ProfileSettingsContent = observer(function ProfileSettingsContent(p
   const PageComponent = PROFILE_SETTINGS_PAGES_MAP[activeTab];
 
   return (
-    <ScrollArea
-      className={cn("shrink-0 overflow-y-scroll bg-surface-1", className)}
-      viewportClassName="px-8 py-9"
-      scrollType="hover"
-      orientation="vertical"
-      size="sm"
-    >
-      <Suspense>
-        <PageComponent />
-      </Suspense>
-    </ScrollArea>
+    <div className={cn("flex shrink-0 flex-col overflow-hidden bg-surface-1", className)}>
+      <ScrollArea orientation="vertical">
+        <div className="px-8 py-9">
+          <Suspense>
+            <PageComponent />
+          </Suspense>
+        </div>
+      </ScrollArea>
+    </div>
   );
 });
diff --git a/apps/web/core/components/settings/profile/heading.tsx b/apps/web/core/components/settings/profile/heading.tsx
index 017b2c10edd..b5db430db6c 100644
--- a/apps/web/core/components/settings/profile/heading.tsx
+++ b/apps/web/core/components/settings/profile/heading.tsx
@@ -5,7 +5,7 @@
  */
 
 // plane imports
-import { cn } from "@plane/ui";
+import { cn } from "@plane/blocks/utils";
 
 type Props = {
   className?: string;
diff --git a/apps/web/core/components/settings/profile/modal.tsx b/apps/web/core/components/settings/profile/modal.tsx
index ed45a87eb3d..54f31c2caa6 100644
--- a/apps/web/core/components/settings/profile/modal.tsx
+++ b/apps/web/core/components/settings/profile/modal.tsx
@@ -8,8 +8,9 @@ import { useCallback } from "react";
 import { CloseOutline } from "@makeplane/propel/icons";
 import { observer } from "mobx-react";
 // plane imports
-import { IconButton } from "@plane/propel/icon-button";
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // hooks
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
 // local imports
@@ -51,7 +52,13 @@ export const ProfileSettingsModal = observer(function ProfileSettingsModal() {
           <ProfileSettingsContent activeTab={activeTab} className="flex-1 rounded-r-xl" />
         </div>
         <div className="absolute top-3.5 right-3.5">
-          <IconButton size="base" variant="tertiary" icon={CloseOutline} onClick={handleClose} />
+          <IconButton
+            size="sm"
+            variant="tertiary"
+            icon={<Icon icon={CloseOutline} />}
+            aria-label="Close"
+            onClick={handleClose}
+          />
         </div>
       </div>
     </ModalCore>
diff --git a/apps/web/core/components/settings/profile/sidebar/item-categories.tsx b/apps/web/core/components/settings/profile/sidebar/item-categories.tsx
index 5de5f282d24..1ebfdd83108 100644
--- a/apps/web/core/components/settings/profile/sidebar/item-categories.tsx
+++ b/apps/web/core/components/settings/profile/sidebar/item-categories.tsx
@@ -16,7 +16,7 @@ import {
   PROFILE_SETTINGS_CATEGORY_LABELS,
 } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import type { ISvgIcons } from "@plane/propel/icons";
+import type { ISvgIcons } from "@plane/blocks/icons";
 import type { TProfileSettingsTabs } from "@plane/types";
 // local imports
 import { SettingsSidebarItem } from "../../sidebar/item";
diff --git a/apps/web/core/components/settings/profile/sidebar/root.tsx b/apps/web/core/components/settings/profile/sidebar/root.tsx
index bef2b9928ee..be32b85b309 100644
--- a/apps/web/core/components/settings/profile/sidebar/root.tsx
+++ b/apps/web/core/components/settings/profile/sidebar/root.tsx
@@ -5,7 +5,7 @@
  */
 
 // plane imports
-import { ScrollArea } from "@plane/propel/scrollarea";
+import { ScrollArea } from "@makeplane/propel/components/scroll-area";
 import type { TProfileSettingsTabs } from "@plane/types";
 import { cn } from "@plane/utils";
 // local imports
@@ -22,14 +22,16 @@ export function ProfileSettingsSidebarRoot(props: Props) {
   const { activeTab, className, updateActiveTab } = props;
 
   return (
-    <ScrollArea
-      scrollType="hover"
-      orientation="vertical"
-      size="sm"
-      rootClassName={cn("shrink-0 overflow-y-scroll border-r border-r-subtle bg-surface-2 px-3 py-4", className)}
+    <div
+      className={cn(
+        "flex shrink-0 flex-col overflow-hidden border-r border-r-subtle bg-surface-2 px-3 py-4",
+        className
+      )}
     >
-      <ProfileSettingsSidebarHeader />
-      <ProfileSettingsSidebarItemCategories activeTab={activeTab} updateActiveTab={updateActiveTab} />
-    </ScrollArea>
+      <ScrollArea orientation="vertical">
+        <ProfileSettingsSidebarHeader />
+        <ProfileSettingsSidebarItemCategories activeTab={activeTab} updateActiveTab={updateActiveTab} />
+      </ScrollArea>
+    </div>
   );
 }
diff --git a/apps/web/core/components/settings/project/content/feature-control-item.tsx b/apps/web/core/components/settings/project/content/feature-control-item.tsx
index ae5c8eb400a..61649918063 100644
--- a/apps/web/core/components/settings/project/content/feature-control-item.tsx
+++ b/apps/web/core/components/settings/project/content/feature-control-item.tsx
@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 // plane imports
-import { setPromiseToast } from "@plane/propel/toast";
+import { setPromiseToast } from "@plane/blocks/toast";
 import type { IProject } from "@plane/types";
 import { Switch } from "@makeplane/propel/components/switch";
 // components
diff --git a/apps/web/core/components/settings/project/sidebar/header.tsx b/apps/web/core/components/settings/project/sidebar/header.tsx
index e257aefd842..95b52304a58 100644
--- a/apps/web/core/components/settings/project/sidebar/header.tsx
+++ b/apps/web/core/components/settings/project/sidebar/header.tsx
@@ -9,8 +9,9 @@ import { observer } from "mobx-react";
 // plane imports
 import { ROLE_DETAILS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Logo } from "@plane/propel/emoji-icon-picker";
-import { IconButton } from "@plane/propel/icon-button";
+import { Logo } from "@plane/blocks/emoji-icon-picker";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 // hooks
 import { useUserPermissions } from "@/hooks/store/user";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -44,8 +45,9 @@ export const ProjectSettingsSidebarHeader = observer(function ProjectSettingsSid
       <div className="flex items-center gap-1 py-3 pr-5 pl-4 text-body-md-medium">
         <IconButton
           variant="ghost"
-          size="base"
-          icon={ArrowNarrowLeftOutline}
+          size="sm"
+          icon={<Icon icon={ArrowNarrowLeftOutline} />}
+          aria-label="Back to project"
           onClick={() => router.push(`/${currentWorkspace?.slug}/projects/${projectId}/issues/`)}
         />
         <p>Project settings</p>
diff --git a/apps/web/core/components/settings/project/sidebar/item-icon.tsx b/apps/web/core/components/settings/project/sidebar/item-icon.tsx
index a58928a7a73..f1ec2a4af00 100644
--- a/apps/web/core/components/settings/project/sidebar/item-icon.tsx
+++ b/apps/web/core/components/settings/project/sidebar/item-icon.tsx
@@ -18,7 +18,7 @@ import {
   ViewsOutline,
 } from "@makeplane/propel/icons";
 // plane imports
-import type { ISvgIcons } from "@plane/propel/icons";
+import type { ISvgIcons } from "@plane/blocks/icons";
 import type { TProjectSettingsTabs } from "@plane/types";
 // components
 import { SettingIcon } from "@/components/icons/attachment";
diff --git a/apps/web/core/components/settings/project/sidebar/root.tsx b/apps/web/core/components/settings/project/sidebar/root.tsx
index 1352b0fd9b3..1c12dd0f489 100644
--- a/apps/web/core/components/settings/project/sidebar/root.tsx
+++ b/apps/web/core/components/settings/project/sidebar/root.tsx
@@ -5,7 +5,7 @@
  */
 
 // plane imports
-import { ScrollArea } from "@plane/propel/scrollarea";
+import { ScrollArea } from "@makeplane/propel/components/scroll-area";
 // local imports
 import { ProjectSettingsSidebarHeader } from "./header";
 import { ProjectSettingsSidebarItemCategories } from "./item-categories";
@@ -18,15 +18,13 @@ export function ProjectSettingsSidebarRoot(props: Props) {
   const { projectId } = props;
 
   return (
-    <ScrollArea
-      scrollType="hover"
-      orientation="vertical"
-      size="sm"
-      rootClassName="shrink-0 animate-fade-in h-full w-[250px] bg-surface-1 border-r border-r-subtle overflow-y-scroll"
-      viewportClassName="pb-5"
-    >
-      <ProjectSettingsSidebarHeader projectId={projectId} />
-      <ProjectSettingsSidebarItemCategories projectId={projectId} />
-    </ScrollArea>
+    <div className="flex h-full w-[250px] shrink-0 animate-fade-in flex-col overflow-hidden border-r border-r-subtle bg-surface-1">
+      <ScrollArea orientation="vertical">
+        <div className="pb-5">
+          <ProjectSettingsSidebarHeader projectId={projectId} />
+          <ProjectSettingsSidebarItemCategories projectId={projectId} />
+        </div>
+      </ScrollArea>
+    </div>
   );
 }
diff --git a/apps/web/core/components/settings/sidebar/item.tsx b/apps/web/core/components/settings/sidebar/item.tsx
index 47937c37847..2df09405967 100644
--- a/apps/web/core/components/settings/sidebar/item.tsx
+++ b/apps/web/core/components/settings/sidebar/item.tsx
@@ -9,7 +9,7 @@ import Link from "next/link";
 // plane imports
 import { cn } from "@plane/utils";
 import type { LucideIcon } from "lucide-react";
-import type { ISvgIcons } from "@plane/propel/icons";
+import type { ISvgIcons } from "@plane/blocks/icons";
 
 type Props = {
   isActive: boolean;
diff --git a/apps/web/core/components/settings/workspace/sidebar/header.tsx b/apps/web/core/components/settings/workspace/sidebar/header.tsx
index 754d62c4a29..9c9508632f3 100644
--- a/apps/web/core/components/settings/workspace/sidebar/header.tsx
+++ b/apps/web/core/components/settings/workspace/sidebar/header.tsx
@@ -9,7 +9,8 @@ import { observer } from "mobx-react";
 // plane imports
 import { ROLE_DETAILS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { IconButton } from "@plane/propel/icon-button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 // components
 import { WorkspaceLogo } from "@/components/workspace/logo";
 // hooks
@@ -37,8 +38,9 @@ export const WorkspaceSettingsSidebarHeader = observer(function WorkspaceSetting
       <div className="flex items-center gap-1 py-3 pr-5 pl-4 text-body-md-medium">
         <IconButton
           variant="ghost"
-          size="base"
-          icon={ArrowNarrowLeftOutline}
+          size="sm"
+          icon={<Icon icon={ArrowNarrowLeftOutline} />}
+          aria-label="Back to workspace"
           onClick={() => router.push(`/${currentWorkspace?.slug}/`)}
         />
         <p>Workspace settings</p>
diff --git a/apps/web/core/components/settings/workspace/sidebar/item-icon.tsx b/apps/web/core/components/settings/workspace/sidebar/item-icon.tsx
index b4afebb7c4b..74296ba25e7 100644
--- a/apps/web/core/components/settings/workspace/sidebar/item-icon.tsx
+++ b/apps/web/core/components/settings/workspace/sidebar/item-icon.tsx
@@ -13,7 +13,7 @@ import {
   WebhooksOutline,
 } from "@makeplane/propel/icons";
 // plane imports
-import type { ISvgIcons } from "@plane/propel/icons";
+import type { ISvgIcons } from "@plane/blocks/icons";
 import type { TWorkspaceSettingsTabs } from "@plane/types";
 
 export const WORKSPACE_SETTINGS_ICONS: Record<TWorkspaceSettingsTabs, LucideIcon | React.FC<ISvgIcons>> = {
diff --git a/apps/web/core/components/settings/workspace/sidebar/root.tsx b/apps/web/core/components/settings/workspace/sidebar/root.tsx
index e6d8b637cfa..9bb4e9aeed2 100644
--- a/apps/web/core/components/settings/workspace/sidebar/root.tsx
+++ b/apps/web/core/components/settings/workspace/sidebar/root.tsx
@@ -5,7 +5,7 @@
  */
 
 // plane imports
-import { ScrollArea } from "@plane/propel/scrollarea";
+import { ScrollArea } from "@makeplane/propel/components/scroll-area";
 import { cn } from "@plane/utils";
 // local imports
 import { WorkspaceSettingsSidebarHeader } from "./header";
@@ -19,17 +19,16 @@ export function WorkspaceSettingsSidebarRoot(props: Props) {
   const { className } = props;
 
   return (
-    <ScrollArea
-      scrollType="hover"
-      orientation="vertical"
-      size="sm"
-      rootClassName={cn(
-        "h-full w-[250px] shrink-0 animate-fade-in overflow-y-scroll border-r border-r-subtle bg-surface-1",
+    <div
+      className={cn(
+        "flex h-full w-[250px] shrink-0 animate-fade-in flex-col overflow-hidden border-r border-r-subtle bg-surface-1",
         className
       )}
     >
-      <WorkspaceSettingsSidebarHeader />
-      <WorkspaceSettingsSidebarItemCategories />
-    </ScrollArea>
+      <ScrollArea orientation="vertical">
+        <WorkspaceSettingsSidebarHeader />
+        <WorkspaceSettingsSidebarItemCategories />
+      </ScrollArea>
+    </div>
   );
 }
diff --git a/apps/web/core/components/sidebar/add-button.tsx b/apps/web/core/components/sidebar/add-button.tsx
index 6db327e363b..3b9bb91b5a6 100644
--- a/apps/web/core/components/sidebar/add-button.tsx
+++ b/apps/web/core/components/sidebar/add-button.tsx
@@ -4,7 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 
 type Props = React.ComponentProps<"button"> & {
   label: React.ReactNode;
@@ -15,11 +15,12 @@ export function SidebarAddButton(props: Props) {
   const { label, onClick, disabled, ...rest } = props;
   return (
     <Button
-      variant={"secondary"}
-      size={"xl"}
-      className="w-full justify-start"
+      variant="secondary"
+      size="lg"
+      stretch="full"
       onClick={onClick}
       disabled={disabled}
+      render={<button className="justify-start" />}
       {...rest}
     >
       {label}
diff --git a/apps/web/core/components/sidebar/sidebar-toggle-button.tsx b/apps/web/core/components/sidebar/sidebar-toggle-button.tsx
index 4c3e9ef7128..4d283ea5cc5 100644
--- a/apps/web/core/components/sidebar/sidebar-toggle-button.tsx
+++ b/apps/web/core/components/sidebar/sidebar-toggle-button.tsx
@@ -8,7 +8,8 @@ import { observer } from "mobx-react";
 import { LeftSidePaneOutline } from "@makeplane/propel/icons";
 // hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
-import { IconButton } from "@plane/propel/icon-button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 
 export const AppSidebarToggleButton = observer(function AppSidebarToggleButton() {
   // store hooks
@@ -16,9 +17,10 @@ export const AppSidebarToggleButton = observer(function AppSidebarToggleButton()
 
   return (
     <IconButton
-      size="base"
+      size="sm"
       variant="ghost"
-      icon={LeftSidePaneOutline}
+      icon={<Icon icon={LeftSidePaneOutline} />}
+      aria-label="Toggle sidebar"
       onClick={() => {
         if (sidebarPeek) toggleSidebarPeek(false);
         toggleSidebar();
diff --git a/apps/web/core/components/sidebar/sidebar-wrapper.tsx b/apps/web/core/components/sidebar/sidebar-wrapper.tsx
index 7e8700ab67d..dfdee9e15b7 100644
--- a/apps/web/core/components/sidebar/sidebar-wrapper.tsx
+++ b/apps/web/core/components/sidebar/sidebar-wrapper.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
 import { PreferencesOutline } from "@makeplane/propel/icons";
-import { ScrollArea } from "@plane/propel/scrollarea";
+import { ScrollArea } from "@makeplane/propel/components/scroll-area";
 // components
 import { CustomizeNavigationDialog } from "@/components/navigation/customize-navigation-dialog";
 // hooks
@@ -18,7 +18,8 @@ import useSize from "@/hooks/use-window-size";
 // plane web components
 import { WorkspaceEditionBadge } from "@/components/workspace/edition-badge";
 import { AppSidebarToggleButton } from "./sidebar-toggle-button";
-import { IconButton } from "@plane/propel/icon-button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 
 type TSidebarWrapperProps = {
   title: string;
@@ -59,9 +60,10 @@ export const SidebarWrapper = observer(function SidebarWrapper(props: TSidebarWr
             <div className="flex items-center gap-2">
               {title === "Projects" && (
                 <IconButton
-                  size="base"
+                  size="sm"
                   variant="ghost"
-                  icon={PreferencesOutline}
+                  icon={<Icon icon={PreferencesOutline} />}
+                  aria-label="Customize navigation"
                   onClick={() => setIsCustomizeNavDialogOpen(true)}
                 />
               )}
@@ -72,14 +74,8 @@ export const SidebarWrapper = observer(function SidebarWrapper(props: TSidebarWr
           {quickActions}
         </div>
 
-        <ScrollArea
-          orientation="vertical"
-          scrollType="hover"
-          size="sm"
-          rootClassName="size-full overflow-x-hidden overflow-y-auto"
-          viewportClassName="flex flex-col gap-3 overflow-x-hidden h-full w-full overflow-y-auto px-3 pt-3 pb-0.5"
-        >
-          {children}
+        <ScrollArea orientation="vertical">
+          <div className="flex flex-col gap-3 overflow-x-hidden px-3 pt-3 pb-0.5">{children}</div>
         </ScrollArea>
         {/* Help Section */}
         <div className="flex h-12 items-center justify-between border-t border-subtle bg-surface-1 p-3">
diff --git a/apps/web/core/components/stickies/delete-modal.tsx b/apps/web/core/components/stickies/delete-modal.tsx
index e26c0ebd04b..913e9bdb0b0 100644
--- a/apps/web/core/components/stickies/delete-modal.tsx
+++ b/apps/web/core/components/stickies/delete-modal.tsx
@@ -8,8 +8,8 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 // ui
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { AlertModalCore } from "@plane/ui";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
+import { AlertModalCore } from "@plane/blocks/modals";
 
 interface IStickyDelete {
   isOpen: boolean;
diff --git a/apps/web/core/components/stickies/layout/stickies-infinite.tsx b/apps/web/core/components/stickies/layout/stickies-infinite.tsx
index ea7029af056..3104d02464e 100644
--- a/apps/web/core/components/stickies/layout/stickies-infinite.tsx
+++ b/apps/web/core/components/stickies/layout/stickies-infinite.tsx
@@ -9,7 +9,8 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 import { STICKIES_PER_PAGE } from "@plane/constants";
-import { ContentWrapper, Loader } from "@plane/ui";
+import { ContentWrapper } from "@plane/blocks/content-wrapper";
+import { Loader } from "@plane/blocks/loader";
 import { cn } from "@plane/utils";
 import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
 import { useSticky } from "@/hooks/use-stickies";
diff --git a/apps/web/core/components/stickies/layout/stickies-loader.tsx b/apps/web/core/components/stickies/layout/stickies-loader.tsx
index f1666fc37c5..8c3a50c683f 100644
--- a/apps/web/core/components/stickies/layout/stickies-loader.tsx
+++ b/apps/web/core/components/stickies/layout/stickies-loader.tsx
@@ -5,7 +5,7 @@
  */
 
 // plane ui
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 
 export function StickiesLoader() {
   return (
diff --git a/apps/web/core/components/stickies/modal/index.tsx b/apps/web/core/components/stickies/modal/index.tsx
index 5dff0bb5070..da702f02f33 100644
--- a/apps/web/core/components/stickies/modal/index.tsx
+++ b/apps/web/core/components/stickies/modal/index.tsx
@@ -4,7 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import { EModalWidth, ModalCore } from "@plane/ui";
+import { EModalWidth, ModalCore } from "@plane/blocks/modals";
 import { Stickies } from "./stickies";
 
 type TProps = {
diff --git a/apps/web/core/components/stickies/modal/search.tsx b/apps/web/core/components/stickies/modal/search.tsx
index dfed3db8730..08c91c32b09 100644
--- a/apps/web/core/components/stickies/modal/search.tsx
+++ b/apps/web/core/components/stickies/modal/search.tsx
@@ -15,7 +15,8 @@ import { useTranslation } from "@plane/i18n";
 import { CloseOutline, SearchOutline } from "@makeplane/propel/icons";
 import { cn } from "@plane/utils";
 import { useSticky } from "@/hooks/use-stickies";
-import { IconButton } from "@plane/propel/icon-button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 
 export const StickySearch = observer(function StickySearch() {
   // router
@@ -57,9 +58,10 @@ export const StickySearch = observer(function StickySearch() {
       {!isSearchOpen && (
         <IconButton
           variant="ghost"
-          size="lg"
-          className="-mr-2"
-          icon={SearchOutline}
+          size="md"
+          render={<button className="-mr-2" />}
+          icon={<Icon icon={SearchOutline} />}
+          aria-label={t("stickies.search_placeholder")}
           onClick={() => {
             setIsSearchOpen(true);
             inputRef.current?.focus();
diff --git a/apps/web/core/components/stickies/sticky/sticky-item-drag-handle.tsx b/apps/web/core/components/stickies/sticky/sticky-item-drag-handle.tsx
index 289bb1f4c37..2afe563e45b 100644
--- a/apps/web/core/components/stickies/sticky/sticky-item-drag-handle.tsx
+++ b/apps/web/core/components/stickies/sticky/sticky-item-drag-handle.tsx
@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 // ui
-import { DragHandle } from "@plane/ui";
+import { DragHandle } from "@plane/blocks/sortable";
 // helper
 import { cn } from "@plane/utils";
 
diff --git a/apps/web/core/components/stickies/sticky/use-operations.tsx b/apps/web/core/components/stickies/sticky/use-operations.tsx
index c1177ecb9a2..987e0b6ffd8 100644
--- a/apps/web/core/components/stickies/sticky/use-operations.tsx
+++ b/apps/web/core/components/stickies/sticky/use-operations.tsx
@@ -7,7 +7,7 @@
 import { useMemo } from "react";
 // plane types
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { InstructionType, TSticky } from "@plane/types";
 // plane utils
 import { isCommentEmpty } from "@plane/utils";
diff --git a/apps/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
index f188ffd30c8..f1da0ef0997 100644
--- a/apps/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
@@ -5,7 +5,7 @@
  */
 
 import { range } from "lodash-es";
-import { Row } from "@plane/ui";
+import { Row } from "@plane/blocks/row";
 import { BLOCK_HEIGHT } from "@/components/gantt-chart/constants";
 import { getRandomLength } from "../utils";
 
diff --git a/apps/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
index e20c01c5e3c..016f6edef2f 100644
--- a/apps/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
@@ -7,7 +7,7 @@
 import { forwardRef } from "react";
 import { range } from "lodash-es";
 // plane ui
-import { ContentWrapper } from "@plane/ui";
+import { ContentWrapper } from "@plane/blocks/content-wrapper";
 // plane utils
 import { cn } from "@plane/utils";
 
diff --git a/apps/web/core/components/ui/loader/layouts/list-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/list-layout-loader.tsx
index a6828910788..b18f57fb480 100644
--- a/apps/web/core/components/ui/loader/layouts/list-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/list-layout-loader.tsx
@@ -7,7 +7,7 @@
 import { Fragment, forwardRef } from "react";
 import { range } from "lodash-es";
 // plane ui
-import { Row } from "@plane/ui";
+import { Row } from "@plane/blocks/row";
 // plane utils
 import { cn } from "@plane/utils";
 import { getRandomInt, getRandomLength } from "../utils";
diff --git a/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx
index 41b09d13de2..00b108f85c8 100644
--- a/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx
@@ -6,7 +6,7 @@
 
 import React from "react";
 // ui
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 import { InboxSidebarLoader } from "./inbox-sidebar-loader";
 
 export function InboxLayoutLoader() {
diff --git a/apps/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
index e4a4d6839b1..12d824581a6 100644
--- a/apps/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
@@ -5,7 +5,7 @@
  */
 
 import { range } from "lodash-es";
-import { Row } from "@plane/ui";
+import { Row } from "@plane/blocks/row";
 import { getRandomLength } from "../utils";
 
 export function SpreadsheetIssueRowLoader(props: { columnCount: number }) {
diff --git a/apps/web/core/components/views/applied-filters/root.tsx b/apps/web/core/components/views/applied-filters/root.tsx
index 2f58af48243..87c450f486b 100644
--- a/apps/web/core/components/views/applied-filters/root.tsx
+++ b/apps/web/core/components/views/applied-filters/root.tsx
@@ -23,7 +23,7 @@ type Props = {
   alwaysAllowEditing?: boolean;
 };
 
-const MEMBERS_FILTERS = ["owned_by"];
+const MEMBERS_FILTERS = new Set(["owned_by"]);
 const DATE_FILTERS = ["created_at"];
 const VIEW_ACCESS_FILTERS = ["view_type"];
 
@@ -64,7 +64,7 @@ export function ViewAppliedFiltersList(props: Props) {
                 values={Array.isArray(value) ? (value as string[]) : []}
               />
             )}
-            {MEMBERS_FILTERS.includes(filterKey) && (
+            {MEMBERS_FILTERS.has(filterKey) && (
               <AppliedMembersFilters
                 editable={isEditingAllowed}
                 handleRemove={(val) => handleRemoveFilter(filterKey, val)}
diff --git a/apps/web/core/components/views/delete-view-modal.tsx b/apps/web/core/components/views/delete-view-modal.tsx
index fa6f448edee..69b95133653 100644
--- a/apps/web/core/components/views/delete-view-modal.tsx
+++ b/apps/web/core/components/views/delete-view-modal.tsx
@@ -9,10 +9,10 @@ import { observer } from "mobx-react";
 import { useParams, useRouter } from "next/navigation";
 // types
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IProjectView } from "@plane/types";
 // ui
-import { AlertModalCore } from "@plane/ui";
+import { AlertModalCore } from "@plane/blocks/modals";
 // hooks
 import { useProjectView } from "@/hooks/store/use-project-view";
 
diff --git a/apps/web/core/components/views/filters/order-by.tsx b/apps/web/core/components/views/filters/order-by.tsx
index 1ea41f7b987..3fb95178c19 100644
--- a/apps/web/core/components/views/filters/order-by.tsx
+++ b/apps/web/core/components/views/filters/order-by.tsx
@@ -8,9 +8,9 @@ import { SortAscendingOutline, SortDescendingOutline, TickOutline } from "@makep
 // 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 type { TViewFiltersSortBy, TViewFiltersSortKey } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 
 type Props = {
   onChange: (value: { key?: TViewFiltersSortKey; order?: TViewFiltersSortBy }) => void;
@@ -26,20 +26,27 @@ 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 ? <SortAscendingOutline className="size-3" /> : <SortDescendingOutline className="size-3" />}</>
   );
+
+  const buttonContent = (
+    <>
+      {!isMobile && icon}
+      <span className="shrink-0"> {orderByDetails?.i18n_label && t(orderByDetails?.i18n_label)}</span>
+    </>
+  );
+
   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">{buttonContent}</span>
+        ) : (
+          <Button variant="secondary" size="md" stretch="auto" render={<span />}>
+            {buttonContent}
+          </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 2f58541a351..3022a151266 100644
--- a/apps/web/core/components/views/form.tsx
+++ b/apps/web/core/components/views/form.tsx
@@ -13,8 +13,8 @@ import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
 import { ETabIndices, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
+import { Button } from "@makeplane/propel/components/button";
+import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/blocks/emoji-icon-picker";
 import { ViewsOutline } from "@makeplane/propel/icons";
 import type {
   IIssueDisplayFilterOptions,
@@ -290,18 +290,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"
+          type="submit"
+          label={
+            data
+              ? isSubmitting
+                ? t("common.updating")
+                : t("view.update.label")
+              : isSubmitting
+                ? t("common.creating")
+                : t("view.create.label")
+          }
+          tabIndex={getIndex("submit")}
+          loading={isSubmitting}
+        />
       </div>
     </form>
   );
diff --git a/apps/web/core/components/views/modal.tsx b/apps/web/core/components/views/modal.tsx
index 0d16de1ceaf..d682b7d396a 100644
--- a/apps/web/core/components/views/modal.tsx
+++ b/apps/web/core/components/views/modal.tsx
@@ -6,11 +6,11 @@
 
 import { observer } from "mobx-react";
 // types
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IProjectView } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
 // ui
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // hooks
 import { useIssues } from "@/hooks/store/use-issues";
 import { useProjectView } from "@/hooks/store/use-project-view";
diff --git a/apps/web/core/components/views/quick-actions.tsx b/apps/web/core/components/views/quick-actions.tsx
index 94d8ba948d6..4b54649ad9e 100644
--- a/apps/web/core/components/views/quick-actions.tsx
+++ b/apps/web/core/components/views/quick-actions.tsx
@@ -9,12 +9,13 @@ import { observer } from "mobx-react";
 import { MoreHorizontalOutline } from "@makeplane/propel/icons";
 // types
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
-import { IconButton } from "@plane/propel/icon-button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IProjectView } from "@plane/types";
 // ui
-import type { TContextMenuItem } from "@plane/ui";
-import { ContextMenu, CustomMenu } from "@plane/ui";
+import type { TContextMenuItem } from "@plane/blocks/dropdowns";
+import { ContextMenu, CustomMenu } from "@plane/blocks/dropdowns";
 import { copyUrlToClipboard, cn } from "@plane/utils";
 // helpers
 import { useViewMenuItems } from "@/components/common/quick-actions-helper";
@@ -99,7 +100,14 @@ export const ViewQuickActions = observer(function ViewQuickActions(props: Props)
       {additionalModals}
       <ContextMenu parentRef={parentRef} items={CONTEXT_MENU_ITEMS} />
       <CustomMenu
-        customButton={<IconButton variant="tertiary" size="lg" icon={MoreHorizontalOutline} />}
+        customButton={
+          <IconButton
+            variant="tertiary"
+            size="md"
+            icon={<Icon icon={MoreHorizontalOutline} />}
+            aria-label="View actions"
+          />
+        }
         placement="bottom-end"
         closeOnSelect
         buttonClassName={customClassName}
diff --git a/apps/web/core/components/views/view-list-header.tsx b/apps/web/core/components/views/view-list-header.tsx
index bc5e79d97e4..1881690bfc2 100644
--- a/apps/web/core/components/views/view-list-header.tsx
+++ b/apps/web/core/components/views/view-list-header.tsx
@@ -18,7 +18,8 @@ import { useProjectView } from "@/hooks/store/use-project-view";
 import { FiltersDropdown } from "../issues/issue-layouts/filters";
 import { ViewFiltersSelection } from "./filters/filter-selection";
 import { ViewOrderByDropdown } from "./filters/order-by";
-import { IconButton } from "@plane/propel/icon-button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 
 export const ViewListHeader = observer(function ViewListHeader() {
   // states
@@ -58,13 +59,14 @@ export const ViewListHeader = observer(function ViewListHeader() {
         {!isSearchOpen && (
           <IconButton
             variant="ghost"
-            size="lg"
-            className="-mr-1"
+            size="md"
+            render={<button className="-mr-1" />}
             onClick={() => {
               setIsSearchOpen(true);
               inputRef.current?.focus();
             }}
-            icon={SearchOutline}
+            icon={<Icon icon={SearchOutline} />}
+            aria-label="Search"
           />
         )}
         <div
diff --git a/apps/web/core/components/views/view-list-item-action.tsx b/apps/web/core/components/views/view-list-item-action.tsx
index d526bc656ae..d17c0aa3072 100644
--- a/apps/web/core/components/views/view-list-item-action.tsx
+++ b/apps/web/core/components/views/view-list-item-action.tsx
@@ -14,7 +14,7 @@ import { useLocalStorage } from "@plane/hooks";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { IProjectView } from "@plane/types";
 import { EViewAccess } from "@plane/types";
-import { FavoriteStar } from "@plane/ui";
+import { FavoriteStar } from "@plane/blocks/favorite-star";
 import { getPublishViewLink } from "@plane/utils";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
diff --git a/apps/web/core/components/views/view-list-item.tsx b/apps/web/core/components/views/view-list-item.tsx
index 011b4738934..886751dde8e 100644
--- a/apps/web/core/components/views/view-list-item.tsx
+++ b/apps/web/core/components/views/view-list-item.tsx
@@ -7,7 +7,7 @@
 import { useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { Logo } from "@plane/propel/emoji-icon-picker";
+import { Logo } from "@plane/blocks/emoji-icon-picker";
 import { ViewsOutline } from "@makeplane/propel/icons";
 // types
 import type { IProjectView } from "@plane/types";
diff --git a/apps/web/core/components/views/views-list.tsx b/apps/web/core/components/views/views-list.tsx
index 727f616cdb2..b6fc0a55263 100644
--- a/apps/web/core/components/views/views-list.tsx
+++ b/apps/web/core/components/views/views-list.tsx
@@ -9,7 +9,7 @@ import { useParams } from "next/navigation";
 // plane imports
 import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { EmptyStateDetailed } from "@plane/blocks/empty-state";
 import { EUserProjectRoles } from "@plane/types";
 // components
 import { ListLayout } from "@/components/core/list";
diff --git a/apps/web/core/components/web-hooks/create-webhook-modal.tsx b/apps/web/core/components/web-hooks/create-webhook-modal.tsx
index ccde260ee10..dcf8a4e7d68 100644
--- a/apps/web/core/components/web-hooks/create-webhook-modal.tsx
+++ b/apps/web/core/components/web-hooks/create-webhook-modal.tsx
@@ -8,10 +8,10 @@ import { useState } from "react";
 import { useParams } from "next/navigation";
 // types
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IWebhook, IWorkspace, TWebhookEventTypes } from "@plane/types";
 // ui
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // helpers
 import { csvDownload } from "@plane/utils";
 // hooks
diff --git a/apps/web/core/components/web-hooks/delete-webhook-modal.tsx b/apps/web/core/components/web-hooks/delete-webhook-modal.tsx
index 1e13fde0bc8..1c826bf5271 100644
--- a/apps/web/core/components/web-hooks/delete-webhook-modal.tsx
+++ b/apps/web/core/components/web-hooks/delete-webhook-modal.tsx
@@ -7,8 +7,8 @@
 import { useState } from "react";
 import { useParams } from "next/navigation";
 // ui
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { AlertModalCore } from "@plane/ui";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
+import { AlertModalCore } from "@plane/blocks/modals";
 // hooks
 import { useWebhook } from "@/hooks/store/use-webhook";
 import { useAppRouter } from "@/hooks/use-app-router";
diff --git a/apps/web/core/components/web-hooks/empty-state.tsx b/apps/web/core/components/web-hooks/empty-state.tsx
index e79debd0690..28a95fd13b6 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,14 @@ 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>
+        <Button
+          variant="primary"
+          size="sm"
+          stretch="auto"
+          label="Add webhook"
+          onClick={onClick}
+          render={<button className="flex items-center gap-1.5" />}
+        />
       </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 ef4f5bd1aa4..77427fccb5e 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 { ChevronDownOutline, ChevronUpOutline } from "@makeplane/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 4800931d004..7dbfa56fdde 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,28 @@ 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"
+            type="submit"
+            label={isSubmitting ? t("updating") : t("update")}
+            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
+              type="submit"
+              variant="primary"
+              size="md"
+              stretch="auto"
+              label={isSubmitting ? t("common.creating") : t("common.create")}
+              loading={isSubmitting}
+              render={<button className="capitalize" />}
+            />
           )}
         </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 a4fe3055c2c..7d3bfdddb6c 100644
--- a/apps/web/core/components/web-hooks/form/secret-key.tsx
+++ b/apps/web/core/components/web-hooks/form/secret-key.tsx
@@ -11,8 +11,9 @@ import { useParams } from "next/navigation";
 // icons
 import { CopyOutline, HideOutline, RefreshOutline, ShowOutline } from "@makeplane/propel/icons";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { Icon } from "@makeplane/propel/components/icon";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { IWebhook } from "@plane/types";
 // ui
@@ -133,14 +134,15 @@ 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")}
+                  onClick={handleRegenerateSecretKey}
                   loading={isRegenerating}
-                  prependIcon={<RefreshOutline />}
-                >
-                  {isRegenerating ? `${t("re_generating")}...` : t("re_generate_key")}
-                </Button>
+                  icon={<Icon icon={RefreshOutline} />}
+                  iconPosition="start"
+                />
               </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 03755264a46..795066bc4c9 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/work-item-filters/filters-hoc/project-level.tsx b/apps/web/core/components/work-item-filters/filters-hoc/project-level.tsx
index 5e583aaee74..431eece488a 100644
--- a/apps/web/core/components/work-item-filters/filters-hoc/project-level.tsx
+++ b/apps/web/core/components/work-item-filters/filters-hoc/project-level.tsx
@@ -9,7 +9,7 @@ import { isEqual, cloneDeep } from "lodash-es";
 import { observer } from "mobx-react";
 // plane imports
 import { EUserPermissionsLevel } from "@plane/constants";
-import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { setToast, TOAST_TYPE } from "@plane/blocks/toast";
 import type { IProjectView, TWorkItemFilterExpression } from "@plane/types";
 import { EUserProjectRoles, EViewAccess } from "@plane/types";
 // components
diff --git a/apps/web/core/components/work-item-filters/filters-hoc/workspace-level.tsx b/apps/web/core/components/work-item-filters/filters-hoc/workspace-level.tsx
index bf09fd70c00..02b1bc96a22 100644
--- a/apps/web/core/components/work-item-filters/filters-hoc/workspace-level.tsx
+++ b/apps/web/core/components/work-item-filters/filters-hoc/workspace-level.tsx
@@ -9,7 +9,7 @@ import { isEqual, cloneDeep } from "lodash-es";
 import { observer } from "mobx-react";
 // plane imports
 import { DEFAULT_GLOBAL_VIEWS_LIST, EUserPermissionsLevel } from "@plane/constants";
-import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { setToast, TOAST_TYPE } from "@plane/blocks/toast";
 import type { IWorkspaceView, TWorkItemFilterExpression } from "@plane/types";
 import { EUserProjectRoles, EViewAccess } from "@plane/types";
 // components
diff --git a/apps/web/core/components/workspace-notifications/root.tsx b/apps/web/core/components/workspace-notifications/root.tsx
index 6a9012021c2..b8e6239cd1a 100644
--- a/apps/web/core/components/workspace-notifications/root.tsx
+++ b/apps/web/core/components/workspace-notifications/root.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import useSWR from "swr";
 // plane imports
 import { ENotificationLoader, ENotificationQueryParamType } from "@plane/constants";
-import { EmptyStateCompact } from "@plane/propel/empty-state";
+import { EmptyStateCompact } from "@plane/blocks/empty-state";
 import { cn } from "@plane/utils";
 // components
 import { LogoSpinner } from "@/components/common/logo-spinner";
diff --git a/apps/web/core/components/workspace-notifications/sidebar/empty-state.tsx b/apps/web/core/components/workspace-notifications/sidebar/empty-state.tsx
index aed3b4a0c29..743cb296ab7 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/empty-state.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/empty-state.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { ENotificationTab } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateCompact } from "@plane/propel/empty-state";
+import { EmptyStateCompact } from "@plane/blocks/empty-state";
 
 type TNotificationEmptyStateProps = {
   currentNotificationTab: ENotificationTab;
diff --git a/apps/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx b/apps/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx
index 71198f63715..1f320989ff3 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx
@@ -10,7 +10,7 @@ import { ENotificationFilterType, FILTER_TYPE_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { PillButton } from "@makeplane/propel/components/pill";
 import { CloseOutline } from "@makeplane/propel/icons";
-import { Header, EHeaderVariant } from "@plane/ui";
+import { Header, EHeaderVariant } from "@plane/blocks/header";
 // hooks
 import { useWorkspaceNotifications } from "@/hooks/store/notifications";
 
diff --git a/apps/web/core/components/workspace-notifications/sidebar/filters/menu/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/filters/menu/root.tsx
index 789827cc41c..123b8c80a82 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/filters/menu/root.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/filters/menu/root.tsx
@@ -11,12 +11,13 @@ import type { ENotificationFilterType } from "@plane/constants";
 import { FILTER_TYPE_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
-import { PopoverMenu } from "@plane/ui";
+import { PopoverMenu } from "@plane/blocks/popovers";
 // hooks
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // local imports
 import { NotificationFilterOptionItem } from "./menu-option-item";
-import { IconButton } from "@plane/propel/icon-button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 
 export const NotificationFilter = observer(function NotificationFilter() {
   // hooks
@@ -33,7 +34,12 @@ export const NotificationFilter = observer(function NotificationFilter() {
       data={translatedFilterTypeOptions}
       button={
         <Tooltip label={t("notification.options.filters")} side="bottom" disabled={isMobile}>
-          <IconButton size="base" variant="ghost" icon={FilterOutline} />
+          <IconButton
+            size="sm"
+            variant="ghost"
+            icon={<Icon icon={FilterOutline} />}
+            aria-label={t("notification.options.filters")}
+          />
         </Tooltip>
       }
       keyExtractor={(item: { label: string; value: ENotificationFilterType }) => item.value}
diff --git a/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx
index 39cd2deaad3..458946f1a87 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx
@@ -16,12 +16,13 @@ import {
 import { useTranslation } from "@plane/i18n";
 // plane imports
 import type { TNotificationFilter } from "@plane/types";
-import { PopoverMenu } from "@plane/ui";
+import { PopoverMenu } from "@plane/blocks/popovers";
 // hooks
 import { useWorkspaceNotifications } from "@/hooks/store/notifications";
 // local imports
 import { NotificationMenuOptionItem } from "./menu-item";
-import { IconButton } from "@plane/propel/icon-button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 
 export type TPopoverMenuOptions = {
   key: string;
@@ -84,7 +85,14 @@ export const NotificationHeaderMenuOption = observer(function NotificationHeader
   return (
     <PopoverMenu
       data={popoverMenuOptions}
-      button={<IconButton size="base" variant="ghost" icon={MoreVerticalOutline} />}
+      button={
+        <IconButton
+          size="sm"
+          variant="ghost"
+          icon={<Icon icon={MoreVerticalOutline} />}
+          aria-label="Notification options"
+        />
+      }
       keyExtractor={(item: TPopoverMenuOptions) => item.key}
       panelClassName="p-0 py-2 rounded-md border border-subtle bg-surface-1 space-y-1"
       render={(item: TPopoverMenuOptions) => <NotificationMenuOptionItem {...item} />}
diff --git a/apps/web/core/components/workspace-notifications/sidebar/header/options/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/header/options/root.tsx
index 02784ee4047..0e500781996 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/header/options/root.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/header/options/root.tsx
@@ -10,14 +10,15 @@ import { CheckDoneOutline, RefreshOutline } from "@makeplane/propel/icons";
 import { ENotificationLoader, ENotificationQueryParamType } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
-import { Spinner } from "@plane/ui";
+import { Spinner } from "@plane/blocks/spinner";
 // hooks
 import { useWorkspaceNotifications } from "@/hooks/store/notifications";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // local imports
 import { NotificationFilter } from "../../filters/menu";
 import { NotificationHeaderMenuOption } from "./menu-option";
-import { IconButton } from "@plane/propel/icon-button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 
 type TNotificationSidebarHeaderOptions = {
   workspaceSlug: string;
@@ -56,9 +57,10 @@ export const NotificationSidebarHeaderOptions = observer(function NotificationSi
       {/* mark all notifications as read*/}
       <Tooltip label={t("notification.options.mark_all_as_read")} side="bottom" disabled={isMobile}>
         <IconButton
-          size="base"
+          size="sm"
           variant="ghost"
-          icon={loader === ENotificationLoader.MARK_ALL_AS_READY ? Spinner : CheckDoneOutline}
+          icon={loader === ENotificationLoader.MARK_ALL_AS_READY ? <Spinner /> : <Icon icon={CheckDoneOutline} />}
+          aria-label={t("notification.options.mark_all_as_read")}
           onClick={() => {
             handleMarkAllNotificationsAsRead();
           }}
@@ -68,10 +70,11 @@ export const NotificationSidebarHeaderOptions = observer(function NotificationSi
       {/* refetch current notifications */}
       <Tooltip label={t("notification.options.refresh")} side="bottom" disabled={isMobile}>
         <IconButton
-          size="base"
+          size="sm"
           variant="ghost"
-          icon={RefreshOutline}
-          className={loader === ENotificationLoader.MUTATION_LOADER ? "animate-spin" : ""}
+          icon={<Icon icon={RefreshOutline} />}
+          aria-label={t("notification.options.refresh")}
+          render={<button className={loader === ENotificationLoader.MUTATION_LOADER ? "animate-spin" : ""} />}
           onClick={refreshNotifications}
         />
       </Tooltip>
diff --git a/apps/web/core/components/workspace-notifications/sidebar/header/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/header/root.tsx
index c2440ea8f4f..52b709bd34a 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/header/root.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/header/root.tsx
@@ -8,7 +8,8 @@ import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { InboxOutline } from "@makeplane/propel/icons";
-import { Breadcrumbs, Header } from "@plane/ui";
+import { Breadcrumbs } from "@plane/blocks/breadcrumbs";
+import { Header } from "@plane/blocks/header";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 // local imports
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx
index b00e18a697a..f544cd97854 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { ClockOutline } from "@makeplane/propel/icons";
 // plane imports
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Row } from "@plane/ui";
+import { Row } from "@plane/blocks/row";
 import { cn, calculateTimeAgo, renderFormattedDate, renderFormattedTime, getFileURL } from "@plane/utils";
 // hooks
 import { useWorkspaceNotifications } from "@/hooks/store/notifications";
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/archive.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/archive.tsx
index 5a436663056..aa172aea18d 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/archive.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/archive.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 import { ArchiveOutline, RestoreOutline } from "@makeplane/propel/icons";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 // store
 import type { INotification } from "@/store/notifications/notification";
 // local imports
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/read.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/read.tsx
index f2f7f9c5f19..5911f7a159e 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/read.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/read.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 import { ChatOutline } from "@makeplane/propel/icons";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 // store
 import type { INotification } from "@/store/notifications/notification";
 // local imports
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 b1eadc51e6a..5639a37238b 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,9 +8,10 @@ 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 { CloseOutline } from "@makeplane/propel/icons";
-import { CustomSelect, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { CustomSelect } from "@plane/blocks/dropdowns";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // components
 import { getDate, cn } from "@plane/utils";
 import { DateDropdown } from "@/components/dropdowns/date";
@@ -215,12 +216,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"
+              type="submit"
+              label={isSubmitting ? "Submitting..." : "Submit"}
+              loading={isSubmitting}
+            />
           </div>
         </div>
       </form>
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx
index 71299f9477c..b655eafff10 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx
@@ -12,7 +12,7 @@ import { Popover, Transition } from "@headlessui/react";
 // plane imports
 import { NOTIFICATION_SNOOZE_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import { cn } from "@plane/utils";
 // hooks
diff --git a/apps/web/core/components/workspace-notifications/sidebar/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/root.tsx
index 2a3285a02a3..7dfd2f767c8 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/root.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/root.tsx
@@ -11,7 +11,9 @@ import { useParams } from "next/navigation";
 import type { TNotificationTab } from "@plane/constants";
 import { NOTIFICATION_TABS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Header, Row, ERowVariant, EHeaderVariant, ContentWrapper } from "@plane/ui";
+import { ContentWrapper } from "@plane/blocks/content-wrapper";
+import { Header, EHeaderVariant } from "@plane/blocks/header";
+import { Row, ERowVariant } from "@plane/blocks/row";
 import { cn, getNumberCount } from "@plane/utils";
 // components
 import { CountChip } from "@/components/common/count-chip";
diff --git a/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx b/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
index 4037c5963ae..d4e5b6ce0cd 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 { WarningTriangleOutline } from "@makeplane/propel/icons";
 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 f36cad4f445..2f5a9faa979 100644
--- a/apps/web/core/components/workspace/billing/comparison/base.tsx
+++ b/apps/web/core/components/workspace/billing/comparison/base.tsx
@@ -7,7 +7,8 @@
 import { observer } from "mobx-react";
 import { ArrowDownOutline, TopArrowOutline } from "@makeplane/propel/icons";
 // plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
+import { Icon } from "@makeplane/propel/components/icon";
 import { cn } from "@plane/utils";
 // constants
 import type { TPlanePlans } from "@/components/workspace/billing/comparison/plans";
@@ -127,13 +128,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"}
             onClick={() => {
               setIsCompareAllFeaturesSectionOpen(!isCompareAllFeaturesSectionOpen);
             }}
-            appendIcon={isCompareAllFeaturesSectionOpen ? <TopArrowOutline /> : <ArrowDownOutline />}
-          >
-            {isCompareAllFeaturesSectionOpen ? "Collapse comparison" : "Compare all features"}
-          </Button>
+            icon={<Icon icon={isCompareAllFeaturesSectionOpen ? TopArrowOutline : ArrowDownOutline} />}
+            iconPosition="end"
+          />
         </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 27d2b8cf141..c0b62c1ce6a 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 274b65ffff2..535efb1438d 100644
--- a/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx
+++ b/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx
@@ -9,8 +9,8 @@ import { observer } from "mobx-react";
 import { WarningTriangleOutline } from "@makeplane/propel/icons";
 // ui
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { Button } from "@makeplane/propel/components/button";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // 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 ae73a70f7d9..a34f179fdc9 100644
--- a/apps/web/core/components/workspace/create-workspace-form.tsx
+++ b/apps/web/core/components/workspace/create-workspace-form.tsx
@@ -12,11 +12,11 @@ import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IWorkspace } from "@plane/types";
 // ui
-import { CustomSelect } from "@plane/ui";
+import { CustomSelect } from "@plane/blocks/dropdowns";
 import { validateWorkspaceName, validateSlug } from "@plane/utils";
 // hooks
 import { useWorkspace } from "@/hooks/store/use-workspace";
@@ -247,13 +247,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"
+          type="submit"
+          size="lg"
+          stretch="auto"
+          label={isSubmitting ? t(primaryButtonText.loading) : t(primaryButtonText.default)}
+          disabled={!isValid}
+          loading={isSubmitting}
+        />
         {!secondaryButton && (
-          <Button variant="secondary" type="button" size="xl" onClick={() => router.back()}>
-            {t("common.go_back")}
-          </Button>
+          <Button
+            variant="secondary"
+            type="button"
+            size="lg"
+            stretch="auto"
+            label={t("common.go_back")}
+            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 1a837c5d830..e8bdf3cb531 100644
--- a/apps/web/core/components/workspace/delete-workspace-form.tsx
+++ b/apps/web/core/components/workspace/delete-workspace-form.tsx
@@ -11,8 +11,8 @@ import { WarningTriangleOutline } from "@makeplane/propel/icons";
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IWorkspace } from "@plane/types";
 
 import { cn } from "@plane/utils";
@@ -159,12 +159,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"
+          type="submit"
+          label={isSubmitting ? t("deleting") : t("confirm")}
+          disabled={!canDelete}
+          loading={isSubmitting}
+        />
       </div>
     </form>
   );
diff --git a/apps/web/core/components/workspace/delete-workspace-modal.tsx b/apps/web/core/components/workspace/delete-workspace-modal.tsx
index 19e5e5b24db..778085d502a 100644
--- a/apps/web/core/components/workspace/delete-workspace-modal.tsx
+++ b/apps/web/core/components/workspace/delete-workspace-modal.tsx
@@ -8,7 +8,7 @@ import React from "react";
 import { observer } from "mobx-react";
 import type { IWorkspace } from "@plane/types";
 // ui
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // constants
 // hooks
 
diff --git a/apps/web/core/components/workspace/delete-workspace-section.tsx b/apps/web/core/components/workspace/delete-workspace-section.tsx
index 6a6f845d077..e8c561c545d 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 b4bebe7a368..4f1cd018d1e 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 "@makeplane/propel/components/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 label={`Version: v${packageJson.version}`} disabled={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 17a800f1e88..fe4156759f5 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 { AddOutline } from "@makeplane/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"
+          type="submit"
+          label={
+            isSubmitting
+              ? submitButtonText?.loading || t("workspace_settings.settings.members.modal.button_loading")
+              : submitButtonText?.default || t("workspace_settings.settings.members.modal.button")
+          }
+          loading={isSubmitting}
+          disabled={isInviteDisabled}
+        />
       </div>
     </div>
   );
diff --git a/apps/web/core/components/workspace/invite-modal/fields.tsx b/apps/web/core/components/workspace/invite-modal/fields.tsx
index b73f4356c9b..134fa3784d2 100644
--- a/apps/web/core/components/workspace/invite-modal/fields.tsx
+++ b/apps/web/core/components/workspace/invite-modal/fields.tsx
@@ -13,7 +13,7 @@ import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { ROLE } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { CloseOutline } from "@makeplane/propel/icons";
-import { CustomSelect } from "@plane/ui";
+import { CustomSelect } from "@plane/blocks/dropdowns";
 import { cn } from "@plane/utils";
 // hooks
 import { useUserPermissions } from "@/hooks/store/user";
diff --git a/apps/web/core/components/workspace/members/invite-modal.tsx b/apps/web/core/components/workspace/members/invite-modal.tsx
index 5e97a69d929..5637b99385d 100644
--- a/apps/web/core/components/workspace/members/invite-modal.tsx
+++ b/apps/web/core/components/workspace/members/invite-modal.tsx
@@ -10,7 +10,7 @@ import { useParams } from "next/navigation";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import type { IWorkspaceBulkInviteFormData } from "@plane/types";
-import { EModalWidth, EModalPosition, ModalCore } from "@plane/ui";
+import { EModalWidth, EModalPosition, ModalCore } from "@plane/blocks/modals";
 // components
 import { InvitationModalActions } from "@/components/workspace/invite-modal/actions";
 import { InvitationFields } from "@/components/workspace/invite-modal/fields";
diff --git a/apps/web/core/components/workspace/settings/invitations-list-item.tsx b/apps/web/core/components/workspace/settings/invitations-list-item.tsx
index 708b63d30a0..ebeae2e14db 100644
--- a/apps/web/core/components/workspace/settings/invitations-list-item.tsx
+++ b/apps/web/core/components/workspace/settings/invitations-list-item.tsx
@@ -11,9 +11,9 @@ import { useParams } from "next/navigation";
 import { ROLE, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { ChevronDownOutline, DeleteOutline, LinkOutline } from "@makeplane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { TContextMenuItem } from "@plane/ui";
-import { CustomSelect, CustomMenu } from "@plane/ui";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
+import type { TContextMenuItem } from "@plane/blocks/dropdowns";
+import { CustomSelect, CustomMenu } from "@plane/blocks/dropdowns";
 import { cn, copyTextToClipboard } from "@plane/utils";
 // components
 import { ConfirmWorkspaceMemberRemove } from "@/components/workspace/confirm-workspace-member-remove";
diff --git a/apps/web/core/components/workspace/settings/member-columns.tsx b/apps/web/core/components/workspace/settings/member-columns.tsx
index 54e711804a2..522649bb2b8 100644
--- a/apps/web/core/components/workspace/settings/member-columns.tsx
+++ b/apps/web/core/components/workspace/settings/member-columns.tsx
@@ -12,11 +12,12 @@ import { Disclosure } from "@headlessui/react";
 // plane imports
 import { ROLE, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { DeactivatedUserOutline, DeleteOutline } from "@makeplane/propel/icons";
-import { Pill, EPillVariant, EPillSize } from "@plane/propel/pill";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Badge } from "@makeplane/propel/components/badge";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IUser, IWorkspaceMember } from "@plane/types";
 // plane ui
-import { CustomSelect, PopoverMenu } from "@plane/ui";
+import { CustomSelect } from "@plane/blocks/dropdowns";
+import { PopoverMenu } from "@plane/blocks/popovers";
 // helpers
 import { getFileURL } from "@plane/utils";
 // hooks
@@ -136,9 +137,7 @@ export const AccountTypeColumn = observer(function AccountTypeColumn(props: Acco
     <>
       {isSuspended ? (
         <div className="flex w-32">
-          <Pill variant={EPillVariant.DEFAULT} size={EPillSize.SM} className="border-none">
-            Suspended
-          </Pill>
+          <Badge variant="neutral" size="sm" label="Suspended" />
         </div>
       ) : isRoleNonEditable ? (
         <div className="flex w-32">
diff --git a/apps/web/core/components/workspace/settings/members-list-item.tsx b/apps/web/core/components/workspace/settings/members-list-item.tsx
index 8ae6651fe03..bd8fadb98f3 100644
--- a/apps/web/core/components/workspace/settings/members-list-item.tsx
+++ b/apps/web/core/components/workspace/settings/members-list-item.tsx
@@ -8,9 +8,9 @@ import { isEmpty } from "lodash-es";
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IWorkspaceMember } from "@plane/types";
-import { Table } from "@plane/ui";
+import { Table } from "@plane/blocks/tables";
 // components
 import { MembersLayoutLoader } from "@/components/ui/loader/layouts/members-layout-loader";
 import { ConfirmWorkspaceMemberRemove } from "@/components/workspace/confirm-workspace-member-remove";
diff --git a/apps/web/core/components/workspace/settings/workspace-details.tsx b/apps/web/core/components/workspace/settings/workspace-details.tsx
index bf96889351b..62d8fad5630 100644
--- a/apps/web/core/components/workspace/settings/workspace-details.tsx
+++ b/apps/web/core/components/workspace/settings/workspace-details.tsx
@@ -12,11 +12,11 @@ import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 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 { EditOutline } from "@makeplane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IWorkspace } from "@plane/types";
-import { CustomSelect } from "@plane/ui";
+import { CustomSelect } from "@plane/blocks/dropdowns";
 import { cn, copyUrlToClipboard, getFileURL, validateWorkspaceName } from "@plane/utils";
 // components
 import { WorkspaceImageUploadModal } from "@/components/core/modals/workspace-image-upload-modal";
@@ -293,14 +293,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/extended-sidebar-item.tsx b/apps/web/core/components/workspace/sidebar/extended-sidebar-item.tsx
index 952c651af61..b02a059ca27 100644
--- a/apps/web/core/components/workspace/sidebar/extended-sidebar-item.tsx
+++ b/apps/web/core/components/workspace/sidebar/extended-sidebar-item.tsx
@@ -17,7 +17,7 @@ import type { IWorkspaceSidebarNavigationItem } from "@plane/constants";
 import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
-import { DragHandle, DropIndicator } from "@plane/ui";
+import { DragHandle, DropIndicator } from "@plane/blocks/sortable";
 import { cn } from "@plane/utils";
 // components
 import { SidebarNavItem } from "@/components/sidebar/sidebar-navigation";
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
index d87cb4f696b..1f0c3df553a 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
@@ -30,10 +30,11 @@ import { Disclosure, Transition } from "@headlessui/react";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
-import { FavoriteFolderIcon } from "@plane/propel/icons";
+import { FavoriteFolderIcon } from "@plane/blocks/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { IFavorite, InstructionType } from "@plane/types";
-import { CustomMenu, DropIndicator, DragHandle } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
+import { DropIndicator, DragHandle } from "@plane/blocks/sortable";
 // helpers
 import { cn } from "@plane/utils";
 // hooks
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-drag-handle.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-drag-handle.tsx
index 2ae959f245b..923ae50da9b 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-drag-handle.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-drag-handle.tsx
@@ -8,7 +8,7 @@ import React from "react";
 import { observer } from "mobx-react";
 // ui
 import { Tooltip } from "@makeplane/propel/components/tooltip";
-import { DragHandle } from "@plane/ui";
+import { DragHandle } from "@plane/blocks/sortable";
 // helper
 import { cn } from "@plane/utils";
 // hooks
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-icon.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-icon.tsx
index a4255352efa..f0d05c8ddce 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-icon.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-icon.tsx
@@ -7,10 +7,10 @@
 import type { LucideIcon } from "lucide-react";
 // plane imports
 import type { TLogoProps } from "@plane/types";
-import { FavoriteFolderIcon } from "@plane/propel/icons";
+import { FavoriteFolderIcon } from "@plane/blocks/icons";
 import { CyclesOutline, ModuleOutline, PagesOutline, ProjectsOutline, ViewsOutline } from "@makeplane/propel/icons";
-import type { ISvgIcons } from "@plane/propel/icons";
-import { Logo } from "@plane/propel/emoji-icon-picker";
+import type { ISvgIcons } from "@plane/blocks/icons";
+import { Logo } from "@plane/blocks/emoji-icon-picker";
 
 const ICON_MAP: Record<string, React.FC<ISvgIcons> | LucideIcon> = {
   page: PagesOutline,
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-quick-action.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-quick-action.tsx
index 75dd830d5f7..f1ad44182a8 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-quick-action.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-quick-action.tsx
@@ -10,7 +10,7 @@ import { MoreHorizontalOutline, StarFilled } from "@makeplane/propel/icons";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import type { IFavorite } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 // helpers
 import { cn } from "@plane/utils";
 
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
index 2ecba7a48fc..ae5edbfd522 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
@@ -20,7 +20,7 @@ import { createRoot } from "react-dom/client";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
 import type { IFavorite, InstructionType } from "@plane/types";
-import { DropIndicator } from "@plane/ui";
+import { DropIndicator } from "@plane/blocks/sortable";
 // hooks
 import { useFavoriteItemDetails } from "@/hooks/use-favorite-item-details";
 // local imports
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
index fb0eec8ce14..954fd5656fc 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
@@ -20,7 +20,7 @@ import { Disclosure, Transition } from "@headlessui/react";
 import { IS_FAVORITE_MENU_OPEN } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // ui
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { IFavorite } from "@plane/types";
 // helpers
@@ -34,7 +34,8 @@ import { FavoriteRoot } from "./favorite-items";
 import type { TargetData } from "./favorites.helpers";
 import { getInstructionFromPayload } from "./favorites.helpers";
 import { NewFavoriteFolder } from "./new-fav-folder";
-import { IconButton } from "@plane/propel/icon-button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 
 export const SidebarFavoritesMenu = observer(function SidebarFavoritesMenu() {
   // states
@@ -208,13 +209,13 @@ export const SidebarFavoritesMenu = observer(function SidebarFavoritesMenu() {
             <Tooltip label={t("create_folder")}>
               <IconButton
                 variant="ghost"
-                size="sm"
+                size="xs"
                 onClick={() => {
                   setCreateNewFolder(true);
                   if (!isFavoriteMenuOpen) toggleFavoriteMenu(!isFavoriteMenuOpen);
                 }}
                 aria-label={t("aria_labels.projects_sidebar.create_favorites_folder")}
-                icon={CreateFolderOutline}
+                icon={<Icon icon={CreateFolderOutline} />}
               />
             </Tooltip>
             <Disclosure.Button
diff --git a/apps/web/core/components/workspace/sidebar/favorites/new-fav-folder.tsx b/apps/web/core/components/workspace/sidebar/favorites/new-fav-folder.tsx
index 20d6181f1eb..569918a3c4b 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/new-fav-folder.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/new-fav-folder.tsx
@@ -14,8 +14,8 @@ import { useOutsideClickDetector } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
 // plane helpers
 // plane ui
-import { FavoriteFolderIcon } from "@plane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { FavoriteFolderIcon } from "@plane/blocks/icons";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 
 // hooks
 import { useFavorite } from "@/hooks/store/use-favorite";
diff --git a/apps/web/core/components/workspace/sidebar/help-section/root.tsx b/apps/web/core/components/workspace/sidebar/help-section/root.tsx
index 6b23af1b2f4..d802a95564b 100644
--- a/apps/web/core/components/workspace/sidebar/help-section/root.tsx
+++ b/apps/web/core/components/workspace/sidebar/help-section/root.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { HelpOutline, PagesOutline, UserOutline } from "@makeplane/propel/icons";
 import { useTranslation } from "@plane/i18n";
 // ui
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 // components
 import { ProductUpdatesModal } from "@/components/global";
 import { AppSidebarItem } from "@/components/sidebar/sidebar-item";
diff --git a/apps/web/core/components/workspace/sidebar/projects-list-item.tsx b/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
index 9d0fa86c042..23fcbfddb1a 100644
--- a/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
+++ b/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
@@ -28,10 +28,13 @@ import { Disclosure, Transition } from "@headlessui/react";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
-import { Logo } from "@plane/propel/emoji-icon-picker";
-import { IconButton } from "@plane/propel/icon-button";
+import { Logo } from "@plane/blocks/emoji-icon-picker";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
-import { CustomMenu, DropIndicator, DragHandle, ControlLink } from "@plane/ui";
+import { ControlLink } from "@plane/blocks/control-link";
+import { CustomMenu } from "@plane/blocks/dropdowns";
+import { DropIndicator, DragHandle } from "@plane/blocks/sortable";
 import { cn } from "@plane/utils";
 // components
 import { DEFAULT_TAB_KEY, getTabUrl } from "@/components/navigation/tab-navigation-utils";
@@ -362,10 +365,11 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
                     <IconButton
                       ref={actionSectionRef}
                       variant="ghost"
-                      size="sm"
-                      icon={MoreHorizontalOutline}
+                      size="xs"
+                      icon={<Icon icon={MoreHorizontalOutline} />}
                       onClick={() => setIsMenuActive(!isMenuActive)}
-                      className="text-placeholder"
+                      aria-label={t("aria_labels.projects_sidebar.toggle_quick_actions_menu")}
+                      render={<button className="text-placeholder" />}
                     />
                   }
                   className={cn(
@@ -449,15 +453,22 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
                 {isAccordionMode && (
                   <IconButton
                     variant="ghost"
-                    size="sm"
-                    icon={ChevronRightOutline}
+                    size="xs"
+                    icon={
+                      <ChevronRightOutline
+                        className={cn("size-3.5 transition-transform", {
+                          "rotate-90": isProjectListOpen,
+                        })}
+                      />
+                    }
                     onClick={() => setIsProjectListOpen(!isProjectListOpen)}
-                    className={cn("hidden text-placeholder group-hover/project-item:inline-flex", {
-                      "inline-flex": isMenuActive,
-                    })}
-                    iconClassName={cn("transition-transform", {
-                      "rotate-90": isProjectListOpen,
-                    })}
+                    render={
+                      <button
+                        className={cn("hidden text-placeholder group-hover/project-item:inline-flex", {
+                          "inline-flex": isMenuActive,
+                        })}
+                      />
+                    }
                     aria-label={t(
                       isProjectListOpen
                         ? "aria_labels.projects_sidebar.close_project_menu"
diff --git a/apps/web/core/components/workspace/sidebar/projects-list.tsx b/apps/web/core/components/workspace/sidebar/projects-list.tsx
index 4f96a2a5b2e..3dd2d66738d 100644
--- a/apps/web/core/components/workspace/sidebar/projects-list.tsx
+++ b/apps/web/core/components/workspace/sidebar/projects-list.tsx
@@ -14,10 +14,11 @@ import { Disclosure, Transition } from "@headlessui/react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { IconButton } from "@plane/propel/icon-button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { IconButton } from "@makeplane/propel/components/icon-button";
+import { Icon } from "@makeplane/propel/components/icon";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 import { copyUrlToClipboard, cn, orderJoinedProjects } from "@plane/utils";
 // components
 import { CreateProjectModal } from "@/components/project/create-project-modal";
@@ -189,25 +190,28 @@ export const SidebarProjectsList = observer(function SidebarProjectsList() {
                   <Tooltip label={t("create_project")}>
                     <IconButton
                       variant="ghost"
-                      size="sm"
-                      icon={AddOutline}
+                      size="xs"
+                      icon={<Icon icon={AddOutline} />}
                       onClick={() => {
                         setIsProjectModalOpen(true);
                       }}
-                      className="hidden text-placeholder group-hover:inline-flex"
+                      render={<button className="hidden text-placeholder group-hover:inline-flex" />}
                       aria-label={t("aria_labels.projects_sidebar.create_new_project")}
                     />
                   </Tooltip>
                 )}
                 <IconButton
                   variant="ghost"
-                  size="sm"
-                  icon={ChevronRightOutline}
+                  size="xs"
+                  icon={
+                    <ChevronRightOutline
+                      className={cn("size-3.5 transition-transform", {
+                        "rotate-90": isAllProjectsListOpen,
+                      })}
+                    />
+                  }
                   onClick={() => toggleListDisclosure(!isAllProjectsListOpen)}
-                  className="text-placeholder"
-                  iconClassName={cn("transition-transform", {
-                    "rotate-90": isAllProjectsListOpen,
-                  })}
+                  render={<button className="text-placeholder" />}
                   aria-label={t(
                     isAllProjectsListOpen
                       ? "aria_labels.projects_sidebar.close_projects_menu"
diff --git a/apps/web/core/components/workspace/sidebar/user-menu-root.tsx b/apps/web/core/components/workspace/sidebar/user-menu-root.tsx
index 95b78f56ec6..1eb50af6f97 100644
--- a/apps/web/core/components/workspace/sidebar/user-menu-root.tsx
+++ b/apps/web/core/components/workspace/sidebar/user-menu-root.tsx
@@ -12,8 +12,8 @@ import { LogOutOutline, SettingsOutline } from "@makeplane/propel/icons";
 import { Avatar } from "@makeplane/propel/components/avatar";
 import { GOD_MODE_URL } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { CustomMenu } from "@plane/ui";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 import { getFileURL } from "@plane/utils";
 // components
 import { CoverImage } from "@/components/common/cover-image";
diff --git a/apps/web/core/components/workspace/sidebar/user-menu.tsx b/apps/web/core/components/workspace/sidebar/user-menu.tsx
index a7835fc74c9..a3d2a2738bd 100644
--- a/apps/web/core/components/workspace/sidebar/user-menu.tsx
+++ b/apps/web/core/components/workspace/sidebar/user-menu.tsx
@@ -8,7 +8,7 @@ import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { PiChatLogo } from "@plane/propel/icons";
+import { PiChatLogo } from "@plane/blocks/icons";
 import { DashboardsOutline, DraftsOutline, HomeOutline, YourWorkOutline } from "@makeplane/propel/icons";
 import { EUserWorkspaceRoles } from "@plane/types";
 // hooks
diff --git a/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx b/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx
index 57bb83afd5b..3f531d0bba3 100644
--- a/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx
@@ -14,7 +14,7 @@ import { EUserPermissionsLevel } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
 import { EUserWorkspaceRoles } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 import { cn } from "@plane/utils";
 // store hooks
 import { useUserPermissions } from "@/hooks/store/user";
diff --git a/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx b/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
index be082f40c58..327a8849b9d 100644
--- a/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
@@ -13,9 +13,9 @@ import { ChevronDownOutline, LogOutOutline, MailOutline, PlusCircleOutline } fro
 import { Menu, Transition } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IWorkspace } from "@plane/types";
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 import { orderWorkspacesList, cn } from "@plane/utils";
 // helpers
 import { AppSidebarItem } from "@/components/sidebar/sidebar-item";
diff --git a/apps/web/core/components/workspace/views/default-view-quick-action.tsx b/apps/web/core/components/workspace/views/default-view-quick-action.tsx
index 732134b510b..84b79d0ab65 100644
--- a/apps/web/core/components/workspace/views/default-view-quick-action.tsx
+++ b/apps/web/core/components/workspace/views/default-view-quick-action.tsx
@@ -9,11 +9,11 @@ import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 // plane imports
 import { LinkOutline, NewTabOutline } from "@makeplane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 // ui
 import type { TStaticViewTypes } from "@plane/types";
-import type { TContextMenuItem } from "@plane/ui";
-import { CustomMenu } from "@plane/ui";
+import type { TContextMenuItem } from "@plane/blocks/dropdowns";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 import { copyUrlToClipboard, cn } from "@plane/utils";
 // helpers
 type Props = {
diff --git a/apps/web/core/components/workspace/views/delete-view-modal.tsx b/apps/web/core/components/workspace/views/delete-view-modal.tsx
index 3659062063e..d62c8b144f9 100644
--- a/apps/web/core/components/workspace/views/delete-view-modal.tsx
+++ b/apps/web/core/components/workspace/views/delete-view-modal.tsx
@@ -9,9 +9,9 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // Plane Imports
 import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IWorkspaceView } from "@plane/types";
-import { AlertModalCore } from "@plane/ui";
+import { AlertModalCore } from "@plane/blocks/modals";
 // hooks
 import { useGlobalView } from "@/hooks/store/use-global-view";
 
diff --git a/apps/web/core/components/workspace/views/form.tsx b/apps/web/core/components/workspace/views/form.tsx
index 1d896252972..02910ab3b26 100644
--- a/apps/web/core/components/workspace/views/form.tsx
+++ b/apps/web/core/components/workspace/views/form.tsx
@@ -12,7 +12,7 @@ import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
 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 { getComputedDisplayFilters, getComputedDisplayProperties } from "@plane/utils";
@@ -195,18 +195,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"
+          type="submit"
+          label={
+            data
+              ? isSubmitting
+                ? t("common.updating")
+                : t("view.update.label")
+              : isSubmitting
+                ? t("common.creating")
+                : t("view.create.label")
+          }
+          loading={isSubmitting}
+        />
       </div>
     </form>
   );
diff --git a/apps/web/core/components/workspace/views/header.tsx b/apps/web/core/components/workspace/views/header.tsx
index 0ad9effc026..e79f2f32ad5 100644
--- a/apps/web/core/components/workspace/views/header.tsx
+++ b/apps/web/core/components/workspace/views/header.tsx
@@ -12,7 +12,7 @@ import { useParams } from "next/navigation";
 import { DEFAULT_GLOBAL_VIEWS_LIST, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { AddOutline } from "@makeplane/propel/icons";
 import type { TStaticViewTypes } from "@plane/types";
-import { Header, EHeaderVariant } from "@plane/ui";
+import { Header, EHeaderVariant } from "@plane/blocks/header";
 // hooks
 import { useGlobalView } from "@/hooks/store/use-global-view";
 import { useUserPermissions } from "@/hooks/store/user";
diff --git a/apps/web/core/components/workspace/views/modal.tsx b/apps/web/core/components/workspace/views/modal.tsx
index 8f9be46fac6..bc16325f108 100644
--- a/apps/web/core/components/workspace/views/modal.tsx
+++ b/apps/web/core/components/workspace/views/modal.tsx
@@ -7,10 +7,10 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IWorkspaceView } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 // hooks
 import { useGlobalView } from "@/hooks/store/use-global-view";
 import { useWorkItemFilters } from "@/hooks/store/work-item-filters/use-work-item-filters";
diff --git a/apps/web/core/components/workspace/views/quick-action.tsx b/apps/web/core/components/workspace/views/quick-action.tsx
index 6e24f79cfab..0cea02ba4e3 100644
--- a/apps/web/core/components/workspace/views/quick-action.tsx
+++ b/apps/web/core/components/workspace/views/quick-action.tsx
@@ -8,9 +8,9 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { IWorkspaceView } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 import { copyUrlToClipboard, cn } from "@plane/utils";
 // helpers
 import { useViewMenuItems } from "@/components/common/quick-actions-helper";
diff --git a/apps/web/core/components/workspace/views/view-list-item.tsx b/apps/web/core/components/workspace/views/view-list-item.tsx
index f30956a31df..0c1215cf20c 100644
--- a/apps/web/core/components/workspace/views/view-list-item.tsx
+++ b/apps/web/core/components/workspace/views/view-list-item.tsx
@@ -10,7 +10,7 @@ import Link from "next/link";
 import { useParams } from "next/navigation";
 // plane imports
 import { DeleteOutline, EditOutline } from "@makeplane/propel/icons";
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "@plane/blocks/dropdowns";
 import { truncateText } from "@plane/utils";
 // hooks
 import { useGlobalView } from "@/hooks/store/use-global-view";
diff --git a/apps/web/core/hooks/use-collaborative-page-actions.tsx b/apps/web/core/hooks/use-collaborative-page-actions.tsx
index d212b47da65..0b2ac026b90 100644
--- a/apps/web/core/hooks/use-collaborative-page-actions.tsx
+++ b/apps/web/core/hooks/use-collaborative-page-actions.tsx
@@ -8,7 +8,7 @@ import { useState, useEffect, useCallback, useMemo } from "react";
 import type { TDocumentEventsServer } from "@plane/editor";
 import type { TDocumentEventsClient } from "@plane/editor/lib";
 import { DocumentCollaborativeEvents, getServerEventName } from "@plane/editor/lib";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 // store
 import type { TPageInstance } from "@/store/pages/base-page";
 
diff --git a/apps/web/core/hooks/use-group-dragndrop.ts b/apps/web/core/hooks/use-group-dragndrop.ts
index b21cdcbe10d..ff1035afc95 100644
--- a/apps/web/core/hooks/use-group-dragndrop.ts
+++ b/apps/web/core/hooks/use-group-dragndrop.ts
@@ -5,7 +5,7 @@
  */
 
 import { useParams } from "next/navigation";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import type { EIssuesStoreType, TIssue, TIssueGroupByOptions, TIssueOrderByOptions } from "@plane/types";
 import type { GroupDropLocation } from "@/components/issues/issue-layouts/utils";
 import { handleGroupDragDrop } from "@/components/issues/issue-layouts/utils";
diff --git a/apps/web/core/hooks/use-local-storage.tsx b/apps/web/core/hooks/use-local-storage.tsx
index e62c8947900..a708b0c1bce 100644
--- a/apps/web/core/hooks/use-local-storage.tsx
+++ b/apps/web/core/hooks/use-local-storage.tsx
@@ -7,7 +7,7 @@
 import { useState, useEffect, useCallback } from "react";
 
 export const getValueFromLocalStorage = (key: string, defaultValue: any) => {
-  if (typeof window === undefined || typeof window === "undefined") return defaultValue;
+  if (typeof window === "undefined" || typeof window === "undefined") return defaultValue;
   try {
     const item = window.localStorage.getItem(key);
     return item ? JSON.parse(item) : defaultValue;
@@ -18,7 +18,7 @@ export const getValueFromLocalStorage = (key: string, defaultValue: any) => {
 };
 
 export const setValueIntoLocalStorage = (key: string, value: any) => {
-  if (typeof window === undefined || typeof window === "undefined") return false;
+  if (typeof window === "undefined" || typeof window === "undefined") return false;
   try {
     window.localStorage.setItem(key, JSON.stringify(value));
     return true;
diff --git a/apps/web/core/hooks/use-multiple-select.ts b/apps/web/core/hooks/use-multiple-select.ts
index cb55c1c92c2..b6725910103 100644
--- a/apps/web/core/hooks/use-multiple-select.ts
+++ b/apps/web/core/hooks/use-multiple-select.ts
@@ -71,14 +71,12 @@ export const useMultipleSelect = (props: Props) => {
 
   const entitiesList: TEntityDetails[] = useMemo(
     () =>
-      groups
-        ?.map((groupID) =>
-          entities?.[groupID]?.map((entityID) => ({
-            entityID,
-            groupID,
-          }))
-        )
-        .flat(1),
+      groups?.flatMap((groupID) =>
+        entities?.[groupID]?.map((entityID) => ({
+          entityID,
+          groupID,
+        }))
+      ),
     [entities, groups]
   );
 
diff --git a/apps/web/core/hooks/use-page-operations.ts b/apps/web/core/hooks/use-page-operations.ts
index 13b38443ef2..82faaa88537 100644
--- a/apps/web/core/hooks/use-page-operations.ts
+++ b/apps/web/core/hooks/use-page-operations.ts
@@ -7,7 +7,7 @@
 import { useMemo } from "react";
 // plane imports
 import { IS_FAVORITE_MENU_OPEN } from "@plane/constants";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { EPageAccess } from "@plane/types";
 import { copyUrlToClipboard } from "@plane/utils";
 // hooks
diff --git a/apps/web/core/hooks/use-realtime-page-events.tsx b/apps/web/core/hooks/use-realtime-page-events.tsx
index ac0cbdc2dad..c4591b3df3c 100644
--- a/apps/web/core/hooks/use-realtime-page-events.tsx
+++ b/apps/web/core/hooks/use-realtime-page-events.tsx
@@ -7,7 +7,7 @@
 import { useCallback, useMemo } from "react";
 // plane imports
 import type { EventToPayloadMap } from "@plane/editor";
-import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { setToast, TOAST_TYPE } from "@plane/blocks/toast";
 // types
 import type { IUserLite } from "@plane/types";
 // components
diff --git a/apps/web/core/hooks/work-item-filters/use-work-item-filters-config.tsx b/apps/web/core/hooks/work-item-filters/use-work-item-filters-config.tsx
index 6a6bb189764..256071b6e23 100644
--- a/apps/web/core/hooks/work-item-filters/use-work-item-filters-config.tsx
+++ b/apps/web/core/hooks/work-item-filters/use-work-item-filters-config.tsx
@@ -21,8 +21,8 @@ import {
 } from "@makeplane/propel/icons";
 // plane imports
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Logo } from "@plane/propel/emoji-icon-picker";
-import { CycleGroupIcon, PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
+import { Logo } from "@plane/blocks/emoji-icon-picker";
+import { CycleGroupIcon, PriorityIcon, StateGroupIcon } from "@plane/blocks/icons";
 import type {
   ICycle,
   IState,
diff --git a/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx b/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
index c730c1ceb18..087fee5d8ff 100644
--- a/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
+++ b/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
@@ -12,11 +12,11 @@ import useSWR from "swr";
 // ui
 import { LogOutOutline } from "@makeplane/propel/icons";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
-import { Button, getButtonStyling } from "@plane/propel/button";
-import { PlaneLogo } from "@plane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button } from "@makeplane/propel/components/button";
+import { Button as ButtonElement } from "@makeplane/propel/elements/button";
+import { PlaneLogo } from "@plane/blocks/icons";
+import { TOAST_TYPE, setToast } from "@plane/blocks/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
-import { cn } from "@plane/utils";
 // assets
 import WorkSpaceNotAvailable from "@/app/assets/workspace/workspace-not-available.png?url";
 // components
@@ -179,19 +179,24 @@ 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"))}>
+                <ButtonElement variant="primary" size="sm" stretch="auto" render={<Link href="/" />}>
                   Go Home
-                </Link>
+                </ButtonElement>
               )}
               {allWorkspaces?.length > 0 && (
-                <Link href="/settings/profile/general/" className={cn(getButtonStyling("secondary", "base"))}>
+                <ButtonElement
+                  variant="secondary"
+                  size="sm"
+                  stretch="auto"
+                  render={<Link href="/settings/profile/general/" />}
+                >
                   Visit Profile
-                </Link>
+                </ButtonElement>
               )}
               {allWorkspaces && allWorkspaces.length === 0 && (
-                <Link href="/create-workspace/" className={cn(getButtonStyling("secondary", "base"))}>
+                <ButtonElement variant="secondary" size="sm" stretch="auto" render={<Link href="/create-workspace/" />}>
                   Create new workspace
-                </Link>
+                </ButtonElement>
               )}
             </div>
           </div>
@@ -218,12 +223,12 @@ export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props
             <div className="flex items-center justify-center gap-2">
               <Link href="/invitations">
                 <span>
-                  <Button variant="secondary">Check pending invites</Button>
+                  <Button variant="secondary" size="sm" stretch="auto" label="Check pending invites" />
                 </span>
               </Link>
               <Link href="/create-workspace">
                 <span>
-                  <Button variant="primary">Create new workspace</Button>
+                  <Button variant="primary" size="sm" stretch="auto" label="Create new workspace" />
                 </span>
               </Link>
             </div>
diff --git a/apps/web/core/lib/local-storage.ts b/apps/web/core/lib/local-storage.ts
index b68c1221722..7d303558fc1 100644
--- a/apps/web/core/lib/local-storage.ts
+++ b/apps/web/core/lib/local-storage.ts
@@ -8,7 +8,7 @@ import { isEmpty } from "lodash-es";
 
 export const storage = {
   set: (key: string, value: object | string | boolean): void => {
-    if (typeof window === undefined || typeof window === "undefined" || !key || !value) return undefined;
+    if (typeof window === "undefined" || typeof window === "undefined" || !key || !value) return undefined;
     const tempValue: string | undefined = value
       ? ["string", "boolean"].includes(typeof value)
         ? value.toString()
@@ -21,13 +21,13 @@ export const storage = {
   },
 
   get: (key: string): string | undefined => {
-    if (typeof window === undefined || typeof window === "undefined") return undefined;
+    if (typeof window === "undefined" || typeof window === "undefined") return undefined;
     const item = window.localStorage.getItem(key);
     return item ? item : undefined;
   },
 
   remove: (key: string): void => {
-    if (typeof window === undefined || typeof window === "undefined" || !key) return undefined;
+    if (typeof window === "undefined" || typeof window === "undefined" || !key) return undefined;
     window.localStorage.removeItem(key);
   },
 };
diff --git a/apps/web/core/store/issue/workspace-draft/issue.store.ts b/apps/web/core/store/issue/workspace-draft/issue.store.ts
index 850a9e03e31..9a699e42ebc 100644
--- a/apps/web/core/store/issue/workspace-draft/issue.store.ts
+++ b/apps/web/core/store/issue/workspace-draft/issue.store.ts
@@ -292,7 +292,7 @@ export class WorkspaceDraftIssues implements IWorkspaceDraftIssues {
         set(this.issuesMap, [issueId], {
           ...issueBeforeUpdate,
           ...payload,
-          ...{ updated_at: getCurrentDateTimeInISO() },
+          updated_at: getCurrentDateTimeInISO(),
         });
       });
       const response = await workspaceDraftService.updateIssue(workspaceSlug, issueId, payload);
diff --git a/apps/web/core/store/pages/base-page.ts b/apps/web/core/store/pages/base-page.ts
index 1936a6bd2c3..27fa8b0de75 100644
--- a/apps/web/core/store/pages/base-page.ts
+++ b/apps/web/core/store/pages/base-page.ts
@@ -8,7 +8,7 @@ import { set } from "lodash-es";
 import { action, computed, makeObservable, observable, reaction, runInAction } from "mobx";
 // plane imports
 import { EPageAccess } from "@plane/constants";
-import type { TChangeHandlerProps } from "@plane/propel/emoji-icon-picker";
+import type { TChangeHandlerProps } from "@plane/blocks/emoji-icon-picker";
 import type { TDocumentPayload, TLogoProps, TNameDescriptionLoader, TPage } from "@plane/types";
 // plane web store
 import { ExtendedBasePage } from "@/store/pages/extended-base-page";
diff --git a/apps/web/core/store/sticky/sticky.store.ts b/apps/web/core/store/sticky/sticky.store.ts
index 09833214505..889eda23455 100644
--- a/apps/web/core/store/sticky/sticky.store.ts
+++ b/apps/web/core/store/sticky/sticky.store.ts
@@ -205,7 +205,7 @@ export class StickyStore implements IStickyStore {
     } catch (error) {
       console.error("Error in updating sticky:", error);
       this.stickies[id] = sticky;
-      throw new Error();
+      throw new Error("", { cause: error });
     }
   };
 
diff --git a/apps/web/helpers/views.helper.ts b/apps/web/helpers/views.helper.ts
index b4ca7ca5d97..18cae3a871e 100644
--- a/apps/web/helpers/views.helper.ts
+++ b/apps/web/helpers/views.helper.ts
@@ -8,7 +8,7 @@ import type { LucideIcon } from "lucide-react";
 import { VIEW_ACCESS_SPECIFIERS as VIEW_ACCESS_SPECIFIERS_CONSTANTS } from "@plane/constants";
 import { GlobeOutline, LockOutline } from "@makeplane/propel/icons";
 
-import type { ISvgIcons } from "@plane/propel/icons";
+import type { ISvgIcons } from "@plane/blocks/icons";
 import { EViewAccess } from "@plane/types";
 
 const VIEW_ACCESS_ICONS = {
diff --git a/apps/web/package.json b/apps/web/package.json
index 8394394e10a..fe10ce6bd7e 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -26,15 +26,14 @@
     "@fontsource/material-symbols-rounded": "catalog:",
     "@headlessui/react": "catalog:",
     "@makeplane/propel": "catalog:",
+    "@plane/blocks": "workspace:*",
     "@plane/constants": "workspace:*",
     "@plane/editor": "workspace:*",
     "@plane/hooks": "workspace:*",
     "@plane/i18n": "workspace:*",
-    "@plane/propel": "workspace:*",
     "@plane/services": "workspace:*",
     "@plane/shared-state": "workspace:*",
     "@plane/types": "workspace:*",
-    "@plane/ui": "workspace:*",
     "@plane/utils": "workspace:*",
     "@popperjs/core": "catalog:",
     "@react-pdf/renderer": "catalog:",
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index 156a0fb61f8..aa573543acf 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -1,6 +1,5 @@
 @import "@plane/tailwind-config/index.css";
 @import "@plane/editor/styles";
-@import "@plane/propel/styles/react-day-picker.css";
 @import "./power-k.css";
 @import "./emoji.css";
 @plugin "@tailwindcss/typography";
diff --git a/docs/linting.md b/docs/linting.md
index d5cdd754573..a246d502874 100644
--- a/docs/linting.md
+++ b/docs/linting.md
@@ -23,7 +23,7 @@ pnpm fix:lint
 To lint a specific package:
 
 ```bash
-pnpm turbo run check:lint --filter=@plane/ui
+pnpm turbo run check:lint --filter=@plane/blocks
 ```
 
 ## VS Code Integration
diff --git a/packages/propel/package.json b/packages/blocks/package.json
similarity index 54%
rename from packages/propel/package.json
rename to packages/blocks/package.json
index 6226ec3ea9b..bc02e5478f0 100644
--- a/packages/propel/package.json
+++ b/packages/blocks/package.json
@@ -1,17 +1,16 @@
 {
-  "name": "@plane/propel",
+  "name": "@plane/blocks",
   "version": "1.4.2",
   "private": true,
+  "description": "Composite components and Plane-specific building blocks, built on top of @makeplane/propel primitives",
   "license": "AGPL-3.0",
   "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
-    "./accordion": "./dist/accordion/index.js",
-    "./animated-counter": "./dist/animated-counter/index.js",
     "./avatar": "./dist/avatar/index.js",
-    "./badge": "./dist/badge/index.js",
-    "./banner": "./dist/banner/index.js",
-    "./button": "./dist/button/index.js",
-    "./calendar": "./dist/calendar/index.js",
+    "./breadcrumbs": "./dist/breadcrumbs/index.js",
     "./card": "./dist/card/index.js",
     "./charts/area-chart": "./dist/charts/area-chart/index.js",
     "./charts/bar-chart": "./dist/charts/bar-chart/index.js",
@@ -20,65 +19,61 @@
     "./charts/radar-chart": "./dist/charts/radar-chart/index.js",
     "./charts/scatter-chart": "./dist/charts/scatter-chart/index.js",
     "./charts/tree-map": "./dist/charts/tree-map/index.js",
-    "./collapsible": "./dist/collapsible/index.js",
-    "./combobox": "./dist/combobox/index.js",
-    "./command": "./dist/command/index.js",
-    "./context-menu": "./dist/context-menu/index.js",
-    "./dialog": "./dist/dialog/index.js",
+    "./content-wrapper": "./dist/content-wrapper/index.js",
+    "./control-link": "./dist/control-link/index.js",
+    "./dropdowns": "./dist/dropdowns/index.js",
     "./emoji-icon-picker": "./dist/emoji-icon-picker/index.js",
     "./emoji-reaction": "./dist/emoji-reaction/index.js",
     "./empty-state": "./dist/empty-state/index.js",
-    "./icon-button": "./dist/icon-button/index.js",
+    "./favorite-star": "./dist/favorite-star/index.js",
+    "./form-fields": "./dist/form-fields/index.js",
+    "./header": "./dist/header/index.js",
     "./icons": "./dist/icons/index.js",
-    "./input": "./dist/input/index.js",
-    "./menu": "./dist/menu/index.js",
-    "./pill": "./dist/pill/index.js",
-    "./popover": "./dist/popover/index.js",
+    "./link": "./dist/link/index.js",
+    "./loader": "./dist/loader/index.js",
+    "./modals": "./dist/modals/index.js",
+    "./oauth": "./dist/oauth/index.js",
+    "./popovers": "./dist/popovers/index.js",
     "./portal": "./dist/portal/index.js",
-    "./scrollarea": "./dist/scrollarea/index.js",
-    "./skeleton": "./dist/skeleton/index.js",
-    "./spinners": "./dist/spinners/index.js",
-    "./switch": "./dist/switch/index.js",
+    "./row": "./dist/row/index.js",
+    "./sortable": "./dist/sortable/index.js",
+    "./spinner": "./dist/spinner/index.js",
     "./tab-navigation": "./dist/tab-navigation/index.js",
-    "./table": "./dist/table/index.js",
-    "./tabs": "./dist/tabs/index.js",
+    "./tables": "./dist/tables/index.js",
     "./toast": "./dist/toast/index.js",
-    "./toolbar": "./dist/toolbar/index.js",
-    "./tooltip": "./dist/tooltip/index.js",
     "./utils": "./dist/utils/index.js",
-    "./package.json": "./package.json",
-    "./styles/react-day-picker.css": "./dist/styles/react-day-picker.css",
-    "./styles/react-day-picker": "./dist/styles/react-day-picker.css"
+    "./package.json": "./package.json"
   },
   "scripts": {
     "dev": "tsdown --watch --no-clean",
     "build": "tsdown",
-    "check:lint": "oxlint --max-warnings=3605 .",
+    "check:lint": "oxlint .",
     "check:types": "tsc --noEmit",
     "check:format": "oxfmt --check .",
     "fix:lint": "oxlint --fix .",
     "fix:format": "oxfmt .",
-    "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "catalog:",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "catalog:",
     "@base-ui-components/react": "catalog:",
+    "@headlessui/react": "catalog:",
     "@makeplane/propel": "catalog:",
     "@plane/constants": "workspace:*",
     "@plane/hooks": "workspace:*",
     "@plane/types": "workspace:*",
     "@plane/utils": "workspace:*",
-    "@tanstack/react-table": "catalog:",
-    "class-variance-authority": "catalog:",
+    "@popperjs/core": "catalog:",
     "clsx": "catalog:",
-    "cmdk": "catalog:",
     "framer-motion": "catalog:",
     "frimousse": "catalog:",
+    "lodash-es": "catalog:",
     "lucide-react": "catalog:",
     "react": "catalog:",
-    "react-day-picker": "catalog:",
+    "react-color": "catalog:",
     "react-dom": "catalog:",
+    "react-popper": "catalog:",
     "recharts": "catalog:",
     "tailwind-merge": "catalog:",
     "use-font-face-observer": "catalog:"
@@ -86,13 +81,15 @@
   "devDependencies": {
     "@plane/tailwind-config": "workspace:*",
     "@plane/typescript-config": "workspace:*",
-    "@storybook/addon-designs": "catalog:",
-    "@storybook/addon-docs": "catalog:",
-    "@storybook/react-vite": "catalog:",
+    "@types/lodash-es": "catalog:",
     "@types/react": "catalog:",
+    "@types/react-color": "catalog:",
     "@types/react-dom": "catalog:",
-    "storybook": "catalog:",
     "tsdown": "catalog:",
     "typescript": "catalog:"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   }
 }
diff --git a/packages/propel/src/animated-counter/animated-counter.tsx b/packages/blocks/src/animated-counter/animated-counter.tsx
similarity index 100%
rename from packages/propel/src/animated-counter/animated-counter.tsx
rename to packages/blocks/src/animated-counter/animated-counter.tsx
diff --git a/packages/propel/src/animated-counter/index.ts b/packages/blocks/src/animated-counter/index.ts
similarity index 100%
rename from packages/propel/src/animated-counter/index.ts
rename to packages/blocks/src/animated-counter/index.ts
diff --git a/packages/ui/src/avatar/avatar-group.tsx b/packages/blocks/src/avatar/avatar-group.tsx
similarity index 95%
rename from packages/ui/src/avatar/avatar-group.tsx
rename to packages/blocks/src/avatar/avatar-group.tsx
index 963d4400d72..decac35379c 100644
--- a/packages/ui/src/avatar/avatar-group.tsx
+++ b/packages/blocks/src/avatar/avatar-group.tsx
@@ -6,7 +6,7 @@
 
 import React from "react";
 // ui
-import { Tooltip } from "@plane/propel/tooltip";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
 // helpers
 import { cn } from "../utils";
 // types
@@ -71,7 +71,7 @@ export function AvatarGroup(props: Props) {
         </div>
       ))}
       {maxAvatarsToRender < totalAvatars && (
-        <Tooltip tooltipContent={`${totalAvatars} total`} disabled={!showTooltip}>
+        <Tooltip label={`${totalAvatars} total`} disabled={!showTooltip}>
           <div
             className={cn(
               "grid place-items-center rounded-full border border-subtle-1 bg-accent-subtle text-9 text-accent-primary",
diff --git a/packages/ui/src/avatar/avatar.tsx b/packages/blocks/src/avatar/avatar.tsx
similarity index 94%
rename from packages/ui/src/avatar/avatar.tsx
rename to packages/blocks/src/avatar/avatar.tsx
index 7cc82712be9..cd45410346d 100644
--- a/packages/ui/src/avatar/avatar.tsx
+++ b/packages/blocks/src/avatar/avatar.tsx
@@ -5,7 +5,7 @@
  */
 
 // ui
-import { Tooltip } from "@plane/propel/tooltip";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
 // helpers
 import { cn } from "../utils";
 import type { TAvatarSize } from "./helper";
@@ -72,7 +72,7 @@ export function Avatar(props: Props) {
   const sizeInfo = getSizeInfo(size);
 
   return (
-    <Tooltip tooltipContent={fallbackText ?? name ?? "?"} disabled={!showTooltip}>
+    <Tooltip label={fallbackText ?? name ?? "?"} disabled={!showTooltip}>
       <div
         className={cn("grid place-items-center overflow-hidden", getBorderRadius(shape), {
           [sizeInfo.avatarSize]: !isAValidNumber(size),
diff --git a/packages/ui/src/avatar/helper.tsx b/packages/blocks/src/avatar/helper.tsx
similarity index 100%
rename from packages/ui/src/avatar/helper.tsx
rename to packages/blocks/src/avatar/helper.tsx
diff --git a/packages/ui/src/avatar/index.ts b/packages/blocks/src/avatar/index.ts
similarity index 100%
rename from packages/ui/src/avatar/index.ts
rename to packages/blocks/src/avatar/index.ts
diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.tsx b/packages/blocks/src/breadcrumbs/breadcrumbs.tsx
similarity index 97%
rename from packages/ui/src/breadcrumbs/breadcrumbs.tsx
rename to packages/blocks/src/breadcrumbs/breadcrumbs.tsx
index 5ef2b50d114..cb68ce9c6f0 100644
--- a/packages/ui/src/breadcrumbs/breadcrumbs.tsx
+++ b/packages/blocks/src/breadcrumbs/breadcrumbs.tsx
@@ -6,7 +6,7 @@
 
 import * as React from "react";
 import { ChevronRightOutline } from "@makeplane/propel/icons";
-import { Tooltip } from "@plane/propel/tooltip";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
 import { cn } from "../utils";
 
 type BreadcrumbsProps = {
@@ -173,7 +173,7 @@ type BreadcrumbItemWrapperProps = {
 function BreadcrumbItemWrapper(props: BreadcrumbItemWrapperProps) {
   const { label, disableTooltip = false, children, className, type = "link", isLast = false } = props;
   return (
-    <Tooltip tooltipContent={label} position="bottom" disabled={!label || label === "" || disableTooltip}>
+    <Tooltip label={label ?? ""} side="bottom" disabled={!label || label === "" || disableTooltip}>
       <div
         className={cn(
           "group flex h-full cursor-default items-center gap-2 rounded-sm px-1.5 py-1 text-13 font-medium",
diff --git a/packages/ui/src/breadcrumbs/index.ts b/packages/blocks/src/breadcrumbs/index.ts
similarity index 100%
rename from packages/ui/src/breadcrumbs/index.ts
rename to packages/blocks/src/breadcrumbs/index.ts
diff --git a/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx b/packages/blocks/src/breadcrumbs/navigation-search-dropdown.tsx
similarity index 96%
rename from packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx
rename to packages/blocks/src/breadcrumbs/navigation-search-dropdown.tsx
index 8f270e9fd13..2be0adebb2d 100644
--- a/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx
+++ b/packages/blocks/src/breadcrumbs/navigation-search-dropdown.tsx
@@ -6,7 +6,7 @@
 
 import * as React from "react";
 import { useState } from "react";
-import { Tooltip } from "@plane/propel/tooltip";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { ICustomSearchSelectOption } from "@plane/types";
 import { CustomSearchSelect } from "../dropdowns";
 import { cn } from "../utils";
@@ -57,7 +57,7 @@ export function BreadcrumbNavigationSearchDropdown(props: TBreadcrumbNavigationS
       }}
       customButton={
         <>
-          <Tooltip tooltipContent={title} position="bottom">
+          <Tooltip label={title ?? ""} side="bottom" disabled={!title}>
             <button
               onClick={(e) => {
                 if (!isLast) {
diff --git a/packages/propel/src/card/card.tsx b/packages/blocks/src/card/card.tsx
similarity index 100%
rename from packages/propel/src/card/card.tsx
rename to packages/blocks/src/card/card.tsx
diff --git a/packages/propel/src/card/helper.tsx b/packages/blocks/src/card/helper.tsx
similarity index 100%
rename from packages/propel/src/card/helper.tsx
rename to packages/blocks/src/card/helper.tsx
diff --git a/packages/propel/src/card/index.ts b/packages/blocks/src/card/index.ts
similarity index 100%
rename from packages/propel/src/card/index.ts
rename to packages/blocks/src/card/index.ts
diff --git a/packages/propel/src/charts/area-chart/index.ts b/packages/blocks/src/charts/area-chart/index.ts
similarity index 100%
rename from packages/propel/src/charts/area-chart/index.ts
rename to packages/blocks/src/charts/area-chart/index.ts
diff --git a/packages/propel/src/charts/area-chart/root.tsx b/packages/blocks/src/charts/area-chart/root.tsx
similarity index 100%
rename from packages/propel/src/charts/area-chart/root.tsx
rename to packages/blocks/src/charts/area-chart/root.tsx
diff --git a/packages/propel/src/charts/bar-chart/bar.tsx b/packages/blocks/src/charts/bar-chart/bar.tsx
similarity index 100%
rename from packages/propel/src/charts/bar-chart/bar.tsx
rename to packages/blocks/src/charts/bar-chart/bar.tsx
diff --git a/packages/propel/src/charts/bar-chart/index.ts b/packages/blocks/src/charts/bar-chart/index.ts
similarity index 100%
rename from packages/propel/src/charts/bar-chart/index.ts
rename to packages/blocks/src/charts/bar-chart/index.ts
diff --git a/packages/propel/src/charts/bar-chart/root.tsx b/packages/blocks/src/charts/bar-chart/root.tsx
similarity index 100%
rename from packages/propel/src/charts/bar-chart/root.tsx
rename to packages/blocks/src/charts/bar-chart/root.tsx
diff --git a/packages/propel/src/charts/components/legend.tsx b/packages/blocks/src/charts/components/legend.tsx
similarity index 100%
rename from packages/propel/src/charts/components/legend.tsx
rename to packages/blocks/src/charts/components/legend.tsx
diff --git a/packages/propel/src/charts/components/tick.tsx b/packages/blocks/src/charts/components/tick.tsx
similarity index 100%
rename from packages/propel/src/charts/components/tick.tsx
rename to packages/blocks/src/charts/components/tick.tsx
diff --git a/packages/propel/src/charts/components/tooltip.tsx b/packages/blocks/src/charts/components/tooltip.tsx
similarity index 100%
rename from packages/propel/src/charts/components/tooltip.tsx
rename to packages/blocks/src/charts/components/tooltip.tsx
diff --git a/packages/propel/src/charts/line-chart/index.ts b/packages/blocks/src/charts/line-chart/index.ts
similarity index 100%
rename from packages/propel/src/charts/line-chart/index.ts
rename to packages/blocks/src/charts/line-chart/index.ts
diff --git a/packages/propel/src/charts/line-chart/root.tsx b/packages/blocks/src/charts/line-chart/root.tsx
similarity index 100%
rename from packages/propel/src/charts/line-chart/root.tsx
rename to packages/blocks/src/charts/line-chart/root.tsx
diff --git a/packages/propel/src/charts/pie-chart/active-shape.tsx b/packages/blocks/src/charts/pie-chart/active-shape.tsx
similarity index 100%
rename from packages/propel/src/charts/pie-chart/active-shape.tsx
rename to packages/blocks/src/charts/pie-chart/active-shape.tsx
diff --git a/packages/propel/src/charts/pie-chart/index.ts b/packages/blocks/src/charts/pie-chart/index.ts
similarity index 100%
rename from packages/propel/src/charts/pie-chart/index.ts
rename to packages/blocks/src/charts/pie-chart/index.ts
diff --git a/packages/propel/src/charts/pie-chart/root.tsx b/packages/blocks/src/charts/pie-chart/root.tsx
similarity index 100%
rename from packages/propel/src/charts/pie-chart/root.tsx
rename to packages/blocks/src/charts/pie-chart/root.tsx
diff --git a/packages/propel/src/charts/pie-chart/tooltip.tsx b/packages/blocks/src/charts/pie-chart/tooltip.tsx
similarity index 100%
rename from packages/propel/src/charts/pie-chart/tooltip.tsx
rename to packages/blocks/src/charts/pie-chart/tooltip.tsx
diff --git a/packages/propel/src/charts/radar-chart/index.ts b/packages/blocks/src/charts/radar-chart/index.ts
similarity index 100%
rename from packages/propel/src/charts/radar-chart/index.ts
rename to packages/blocks/src/charts/radar-chart/index.ts
diff --git a/packages/propel/src/charts/radar-chart/root.tsx b/packages/blocks/src/charts/radar-chart/root.tsx
similarity index 100%
rename from packages/propel/src/charts/radar-chart/root.tsx
rename to packages/blocks/src/charts/radar-chart/root.tsx
diff --git a/packages/propel/src/charts/scatter-chart/index.ts b/packages/blocks/src/charts/scatter-chart/index.ts
similarity index 100%
rename from packages/propel/src/charts/scatter-chart/index.ts
rename to packages/blocks/src/charts/scatter-chart/index.ts
diff --git a/packages/propel/src/charts/scatter-chart/root.tsx b/packages/blocks/src/charts/scatter-chart/root.tsx
similarity index 100%
rename from packages/propel/src/charts/scatter-chart/root.tsx
rename to packages/blocks/src/charts/scatter-chart/root.tsx
diff --git a/packages/propel/src/charts/tree-map/index.ts b/packages/blocks/src/charts/tree-map/index.ts
similarity index 100%
rename from packages/propel/src/charts/tree-map/index.ts
rename to packages/blocks/src/charts/tree-map/index.ts
diff --git a/packages/propel/src/charts/tree-map/map-content.tsx b/packages/blocks/src/charts/tree-map/map-content.tsx
similarity index 100%
rename from packages/propel/src/charts/tree-map/map-content.tsx
rename to packages/blocks/src/charts/tree-map/map-content.tsx
diff --git a/packages/propel/src/charts/tree-map/root.tsx b/packages/blocks/src/charts/tree-map/root.tsx
similarity index 100%
rename from packages/propel/src/charts/tree-map/root.tsx
rename to packages/blocks/src/charts/tree-map/root.tsx
diff --git a/packages/propel/src/charts/tree-map/tooltip.tsx b/packages/blocks/src/charts/tree-map/tooltip.tsx
similarity index 100%
rename from packages/propel/src/charts/tree-map/tooltip.tsx
rename to packages/blocks/src/charts/tree-map/tooltip.tsx
diff --git a/packages/ui/src/content-wrapper/content-wrapper.tsx b/packages/blocks/src/content-wrapper/content-wrapper.tsx
similarity index 100%
rename from packages/ui/src/content-wrapper/content-wrapper.tsx
rename to packages/blocks/src/content-wrapper/content-wrapper.tsx
diff --git a/packages/ui/src/content-wrapper/index.ts b/packages/blocks/src/content-wrapper/index.ts
similarity index 100%
rename from packages/ui/src/content-wrapper/index.ts
rename to packages/blocks/src/content-wrapper/index.ts
diff --git a/packages/ui/src/control-link/control-link.tsx b/packages/blocks/src/control-link/control-link.tsx
similarity index 100%
rename from packages/ui/src/control-link/control-link.tsx
rename to packages/blocks/src/control-link/control-link.tsx
diff --git a/packages/ui/src/control-link/index.ts b/packages/blocks/src/control-link/index.ts
similarity index 100%
rename from packages/ui/src/control-link/index.ts
rename to packages/blocks/src/control-link/index.ts
diff --git a/packages/ui/src/dropdowns/combo-box.tsx b/packages/blocks/src/dropdowns/combo-box.tsx
similarity index 100%
rename from packages/ui/src/dropdowns/combo-box.tsx
rename to packages/blocks/src/dropdowns/combo-box.tsx
diff --git a/packages/ui/src/dropdowns/context-menu/index.ts b/packages/blocks/src/dropdowns/context-menu/index.ts
similarity index 100%
rename from packages/ui/src/dropdowns/context-menu/index.ts
rename to packages/blocks/src/dropdowns/context-menu/index.ts
diff --git a/packages/ui/src/dropdowns/context-menu/item.tsx b/packages/blocks/src/dropdowns/context-menu/item.tsx
similarity index 100%
rename from packages/ui/src/dropdowns/context-menu/item.tsx
rename to packages/blocks/src/dropdowns/context-menu/item.tsx
diff --git a/packages/ui/src/dropdowns/context-menu/root.tsx b/packages/blocks/src/dropdowns/context-menu/root.tsx
similarity index 99%
rename from packages/ui/src/dropdowns/context-menu/root.tsx
rename to packages/blocks/src/dropdowns/context-menu/root.tsx
index e29cba0bfcc..a8d162659d3 100644
--- a/packages/ui/src/dropdowns/context-menu/root.tsx
+++ b/packages/blocks/src/dropdowns/context-menu/root.tsx
@@ -90,11 +90,11 @@ function ContextMenuWithoutPortal(props: ContextMenuProps) {
     };
   }, []);
 
-  const handleClose = () => {
+  const handleClose = React.useCallback(() => {
     closeAllSubmenus();
     setIsOpen(false);
     setActiveItemIndex(0);
-  };
+  }, [closeAllSubmenus]);
 
   // calculate position of context menu
   useEffect(() => {
diff --git a/packages/ui/src/dropdowns/custom-menu.tsx b/packages/blocks/src/dropdowns/custom-menu.tsx
similarity index 100%
rename from packages/ui/src/dropdowns/custom-menu.tsx
rename to packages/blocks/src/dropdowns/custom-menu.tsx
diff --git a/packages/ui/src/dropdowns/custom-search-select.tsx b/packages/blocks/src/dropdowns/custom-search-select.tsx
similarity index 98%
rename from packages/ui/src/dropdowns/custom-search-select.tsx
rename to packages/blocks/src/dropdowns/custom-search-select.tsx
index 78eed100b4f..3936b3ebf30 100644
--- a/packages/ui/src/dropdowns/custom-search-select.tsx
+++ b/packages/blocks/src/dropdowns/custom-search-select.tsx
@@ -12,7 +12,7 @@ import { usePopper } from "react-popper";
 import { useOutsideClickDetector } from "@plane/hooks";
 // plane imports
 // local imports
-import { Tooltip } from "@plane/propel/tooltip";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
 import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 import { cn } from "../utils";
 import type { ICustomSearchSelectProps } from "./helper";
@@ -200,7 +200,7 @@ export function CustomSearchSelect(props: ICustomSearchSelectProps) {
                                   {option.tooltip && (
                                     <>
                                       {typeof option.tooltip === "string" ? (
-                                        <Tooltip tooltipContent={option.tooltip}>
+                                        <Tooltip label={option.tooltip}>
                                           <InfoOutline className="h-3.5 w-3.5 flex-shrink-0 cursor-pointer text-secondary" />
                                         </Tooltip>
                                       ) : (
diff --git a/packages/ui/src/dropdowns/custom-select.tsx b/packages/blocks/src/dropdowns/custom-select.tsx
similarity index 100%
rename from packages/ui/src/dropdowns/custom-select.tsx
rename to packages/blocks/src/dropdowns/custom-select.tsx
diff --git a/packages/ui/src/dropdown/common/button.tsx b/packages/blocks/src/dropdowns/dropdown/common/button.tsx
similarity index 96%
rename from packages/ui/src/dropdown/common/button.tsx
rename to packages/blocks/src/dropdowns/dropdown/common/button.tsx
index fa47da583c7..7b73070422e 100644
--- a/packages/ui/src/dropdown/common/button.tsx
+++ b/packages/blocks/src/dropdowns/dropdown/common/button.tsx
@@ -7,7 +7,7 @@
 import { Combobox } from "@headlessui/react";
 import React, { Fragment } from "react";
 // helper
-import { cn } from "../../utils";
+import { cn } from "../../../utils";
 import type { IMultiSelectDropdownButton, ISingleSelectDropdownButton } from "../dropdown";
 
 export function DropdownButton(props: IMultiSelectDropdownButton | ISingleSelectDropdownButton) {
diff --git a/packages/ui/src/dropdown/common/index.ts b/packages/blocks/src/dropdowns/dropdown/common/index.ts
similarity index 100%
rename from packages/ui/src/dropdown/common/index.ts
rename to packages/blocks/src/dropdowns/dropdown/common/index.ts
diff --git a/packages/ui/src/dropdown/common/input-search.tsx b/packages/blocks/src/dropdowns/dropdown/common/input-search.tsx
similarity index 98%
rename from packages/ui/src/dropdown/common/input-search.tsx
rename to packages/blocks/src/dropdowns/dropdown/common/input-search.tsx
index c52602473de..05b62387cd9 100644
--- a/packages/ui/src/dropdown/common/input-search.tsx
+++ b/packages/blocks/src/dropdowns/dropdown/common/input-search.tsx
@@ -8,7 +8,7 @@ import { Combobox } from "@headlessui/react";
 import React, { useEffect, useRef } from "react";
 import { SearchOutline } from "@makeplane/propel/icons";
 // helpers
-import { cn } from "../../utils";
+import { cn } from "../../../utils";
 
 interface IInputSearch {
   isOpen: boolean;
diff --git a/packages/ui/src/dropdown/common/loader.tsx b/packages/blocks/src/dropdowns/dropdown/common/loader.tsx
similarity index 100%
rename from packages/ui/src/dropdown/common/loader.tsx
rename to packages/blocks/src/dropdowns/dropdown/common/loader.tsx
diff --git a/packages/ui/src/dropdown/common/options.tsx b/packages/blocks/src/dropdowns/dropdown/common/options.tsx
similarity index 98%
rename from packages/ui/src/dropdown/common/options.tsx
rename to packages/blocks/src/dropdowns/dropdown/common/options.tsx
index d161e257522..aadf0b99ead 100644
--- a/packages/ui/src/dropdown/common/options.tsx
+++ b/packages/blocks/src/dropdowns/dropdown/common/options.tsx
@@ -9,7 +9,7 @@ import { Combobox } from "@headlessui/react";
 import React from "react";
 import { TickOutline } from "@makeplane/propel/icons";
 // helpers
-import { cn } from "../../utils";
+import { cn } from "../../../utils";
 // types
 import type { IMultiSelectDropdownOptions, ISingleSelectDropdownOptions } from "../dropdown";
 // components
diff --git a/packages/ui/src/dropdown/dropdown.d.ts b/packages/blocks/src/dropdowns/dropdown/dropdown.d.ts
similarity index 100%
rename from packages/ui/src/dropdown/dropdown.d.ts
rename to packages/blocks/src/dropdowns/dropdown/dropdown.d.ts
diff --git a/packages/ui/src/dropdown/index.ts b/packages/blocks/src/dropdowns/dropdown/index.ts
similarity index 100%
rename from packages/ui/src/dropdown/index.ts
rename to packages/blocks/src/dropdowns/dropdown/index.ts
diff --git a/packages/ui/src/dropdown/single-select.tsx b/packages/blocks/src/dropdowns/dropdown/single-select.tsx
similarity index 97%
rename from packages/ui/src/dropdown/single-select.tsx
rename to packages/blocks/src/dropdowns/dropdown/single-select.tsx
index 3603512fd5a..fbd9ac2096a 100644
--- a/packages/ui/src/dropdown/single-select.tsx
+++ b/packages/blocks/src/dropdowns/dropdown/single-select.tsx
@@ -11,8 +11,8 @@ import { usePopper } from "react-popper";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
 // local imports
-import { useDropdownKeyPressed } from "../hooks/use-dropdown-key-pressed";
-import { cn } from "../utils";
+import { useDropdownKeyPressed } from "../../hooks/use-dropdown-key-pressed";
+import { cn } from "../../utils";
 import { DropdownButton } from "./common";
 import { DropdownOptions } from "./common/options";
 import type { ISingleSelectDropdown } from "./dropdown";
diff --git a/packages/ui/src/dropdowns/helper.tsx b/packages/blocks/src/dropdowns/helper.tsx
similarity index 100%
rename from packages/ui/src/dropdowns/helper.tsx
rename to packages/blocks/src/dropdowns/helper.tsx
diff --git a/packages/ui/src/dropdowns/index.ts b/packages/blocks/src/dropdowns/index.ts
similarity index 91%
rename from packages/ui/src/dropdowns/index.ts
rename to packages/blocks/src/dropdowns/index.ts
index 3f0340afe5c..2292525a776 100644
--- a/packages/ui/src/dropdowns/index.ts
+++ b/packages/blocks/src/dropdowns/index.ts
@@ -9,3 +9,5 @@ export * from "./custom-menu";
 export * from "./custom-select";
 export * from "./custom-search-select";
 export * from "./combo-box";
+
+export * from "./dropdown";
diff --git a/packages/propel/src/emoji-icon-picker/emoji-picker.tsx b/packages/blocks/src/emoji-icon-picker/emoji-picker.tsx
similarity index 73%
rename from packages/propel/src/emoji-icon-picker/emoji-picker.tsx
rename to packages/blocks/src/emoji-icon-picker/emoji-picker.tsx
index 9fc781276d1..dbd06a6ed3f 100644
--- a/packages/propel/src/emoji-icon-picker/emoji-picker.tsx
+++ b/packages/blocks/src/emoji-icon-picker/emoji-picker.tsx
@@ -6,7 +6,7 @@
 
 import { useMemo, useCallback } from "react";
 import { Tabs } from "@base-ui-components/react";
-import { Popover } from "../popover";
+import { Popover, PopoverContent, PopoverTrigger } from "@makeplane/propel/components/popover";
 import { cn } from "../utils/classname";
 import { convertPlacementToSideAndAlign } from "../utils/placement";
 import { EmojiRoot } from "./emoji/emoji";
@@ -101,12 +101,10 @@ export function EmojiPicker(props: TCustomEmojiPicker) {
 
   return (
     <Popover open={isOpen} onOpenChange={handleToggle}>
-      <Popover.Button className={cn("outline-none", buttonClassName)} disabled={disabled}>
+      <PopoverTrigger render={<button className={cn("outline-none", buttonClassName)} />} disabled={disabled}>
         {label}
-      </Popover.Button>
-      <Popover.Panel
-        positionerClassName="z-50"
-        className={cn("w-80 overflow-hidden rounded-md border-[0.5px] border-strong bg-surface-1", dropdownClassName)}
+      </PopoverTrigger>
+      <PopoverContent
         side={finalSide}
         align={finalAlign}
         sideOffset={8}
@@ -125,30 +123,34 @@ export function EmojiPicker(props: TCustomEmojiPicker) {
           e.stopPropagation();
         }}
       >
-        <Tabs.Root defaultValue={defaultOpen}>
-          <Tabs.List className="grid grid-cols-2 gap-1 px-3.5 pt-3">
+        <div
+          className={cn("w-80 overflow-hidden rounded-md border-[0.5px] border-strong bg-surface-1", dropdownClassName)}
+        >
+          <Tabs.Root defaultValue={defaultOpen}>
+            <Tabs.List className="grid grid-cols-2 gap-1 px-3.5 pt-3">
+              {tabs.map((tab) => (
+                <Tabs.Tab
+                  key={tab.key}
+                  value={tab.key}
+                  className={({ selected }) =>
+                    cn("rounded-sm border border-subtle bg-layer-1 py-1 text-13", {
+                      "bg-surface-1 text-primary": selected,
+                      "text-placeholder hover:bg-layer-1/60 hover:text-tertiary": !selected,
+                    })
+                  }
+                >
+                  {tab.label}
+                </Tabs.Tab>
+              ))}
+            </Tabs.List>
             {tabs.map((tab) => (
-              <Tabs.Tab
-                key={tab.key}
-                value={tab.key}
-                className={({ selected }) =>
-                  cn("rounded-sm border border-subtle bg-layer-1 py-1 text-13", {
-                    "bg-surface-1 text-primary": selected,
-                    "text-placeholder hover:bg-layer-1/60 hover:text-tertiary": !selected,
-                  })
-                }
-              >
-                {tab.label}
-              </Tabs.Tab>
+              <Tabs.Panel key={tab.key} value={tab.key} className="h-80 overflow-hidden overflow-y-auto">
+                {tab.content}
+              </Tabs.Panel>
             ))}
-          </Tabs.List>
-          {tabs.map((tab) => (
-            <Tabs.Panel key={tab.key} value={tab.key} className="h-80 overflow-hidden overflow-y-auto">
-              {tab.content}
-            </Tabs.Panel>
-          ))}
-        </Tabs.Root>
-      </Popover.Panel>
+          </Tabs.Root>
+        </div>
+      </PopoverContent>
     </Popover>
   );
 }
diff --git a/packages/propel/src/emoji-icon-picker/emoji/emoji.tsx b/packages/blocks/src/emoji-icon-picker/emoji/emoji.tsx
similarity index 100%
rename from packages/propel/src/emoji-icon-picker/emoji/emoji.tsx
rename to packages/blocks/src/emoji-icon-picker/emoji/emoji.tsx
diff --git a/packages/propel/src/emoji-icon-picker/emoji/index.ts b/packages/blocks/src/emoji-icon-picker/emoji/index.ts
similarity index 100%
rename from packages/propel/src/emoji-icon-picker/emoji/index.ts
rename to packages/blocks/src/emoji-icon-picker/emoji/index.ts
diff --git a/packages/propel/src/emoji-icon-picker/helper.tsx b/packages/blocks/src/emoji-icon-picker/helper.tsx
similarity index 100%
rename from packages/propel/src/emoji-icon-picker/helper.tsx
rename to packages/blocks/src/emoji-icon-picker/helper.tsx
diff --git a/packages/propel/src/emoji-icon-picker/icon/icon-root.tsx b/packages/blocks/src/emoji-icon-picker/icon/icon-root.tsx
similarity index 97%
rename from packages/propel/src/emoji-icon-picker/icon/icon-root.tsx
rename to packages/blocks/src/emoji-icon-picker/icon/icon-root.tsx
index 9e61a8d4e07..cb43460544e 100644
--- a/packages/propel/src/emoji-icon-picker/icon/icon-root.tsx
+++ b/packages/blocks/src/emoji-icon-picker/icon/icon-root.tsx
@@ -6,7 +6,7 @@
 
 import React, { useEffect, useState } from "react";
 import { InfoIcon } from "lucide-react";
-import { SearchIcon } from "../../icons";
+import { SearchOutline } from "@makeplane/propel/icons";
 import { cn } from "../../utils/classname";
 import { adjustColorForContrast, DEFAULT_COLORS } from "../helper";
 import { LucideIconsList } from "./lucide-root";
@@ -49,7 +49,7 @@ export function IconRoot(props: IconRootProps) {
               onFocus={() => setIsInputFocused(true)}
               onBlur={() => setIsInputFocused(false)}
             >
-              <SearchIcon className="absolute bottom-3 left-2.5 h-3.5 w-3.5 text-placeholder" />
+              <SearchOutline className="absolute bottom-3 left-2.5 h-3.5 w-3.5 text-placeholder" />
 
               <input
                 placeholder="Search"
diff --git a/packages/propel/src/emoji-icon-picker/icon/index.ts b/packages/blocks/src/emoji-icon-picker/icon/index.ts
similarity index 100%
rename from packages/propel/src/emoji-icon-picker/icon/index.ts
rename to packages/blocks/src/emoji-icon-picker/icon/index.ts
diff --git a/packages/propel/src/emoji-icon-picker/icon/lucide-root.tsx b/packages/blocks/src/emoji-icon-picker/icon/lucide-root.tsx
similarity index 100%
rename from packages/propel/src/emoji-icon-picker/icon/lucide-root.tsx
rename to packages/blocks/src/emoji-icon-picker/icon/lucide-root.tsx
diff --git a/packages/propel/src/emoji-icon-picker/icon/material-root.tsx b/packages/blocks/src/emoji-icon-picker/icon/material-root.tsx
similarity index 100%
rename from packages/propel/src/emoji-icon-picker/icon/material-root.tsx
rename to packages/blocks/src/emoji-icon-picker/icon/material-root.tsx
diff --git a/packages/propel/src/emoji-icon-picker/index.ts b/packages/blocks/src/emoji-icon-picker/index.ts
similarity index 100%
rename from packages/propel/src/emoji-icon-picker/index.ts
rename to packages/blocks/src/emoji-icon-picker/index.ts
diff --git a/packages/propel/src/emoji-icon-picker/logo.tsx b/packages/blocks/src/emoji-icon-picker/logo.tsx
similarity index 100%
rename from packages/propel/src/emoji-icon-picker/logo.tsx
rename to packages/blocks/src/emoji-icon-picker/logo.tsx
diff --git a/packages/propel/src/emoji-icon-picker/lucide-icons.tsx b/packages/blocks/src/emoji-icon-picker/lucide-icons.tsx
similarity index 100%
rename from packages/propel/src/emoji-icon-picker/lucide-icons.tsx
rename to packages/blocks/src/emoji-icon-picker/lucide-icons.tsx
diff --git a/packages/propel/src/emoji-icon-picker/material-icons.tsx b/packages/blocks/src/emoji-icon-picker/material-icons.tsx
similarity index 100%
rename from packages/propel/src/emoji-icon-picker/material-icons.tsx
rename to packages/blocks/src/emoji-icon-picker/material-icons.tsx
diff --git a/packages/propel/src/emoji-reaction/emoji-reaction-picker.tsx b/packages/blocks/src/emoji-reaction/emoji-reaction-picker.tsx
similarity index 79%
rename from packages/propel/src/emoji-reaction/emoji-reaction-picker.tsx
rename to packages/blocks/src/emoji-reaction/emoji-reaction-picker.tsx
index 4e3b326e6cf..2547d0df12c 100644
--- a/packages/propel/src/emoji-reaction/emoji-reaction-picker.tsx
+++ b/packages/blocks/src/emoji-reaction/emoji-reaction-picker.tsx
@@ -7,7 +7,7 @@
 import React, { useMemo, useCallback } from "react";
 import { EmojiRoot } from "../emoji-icon-picker/emoji/emoji";
 import { emojiToString } from "../emoji-icon-picker/helper";
-import { Popover } from "../popover";
+import { Popover, PopoverContent, PopoverTrigger } from "@makeplane/propel/components/popover";
 import { cn } from "../utils/classname";
 import { convertPlacementToSideAndAlign } from "../utils/placement";
 import type { TPlacement, TSide, TAlign } from "../utils/placement";
@@ -65,25 +65,23 @@ export function EmojiReactionPicker(props: EmojiReactionPickerProps) {
 
   return (
     <Popover open={isOpen} onOpenChange={handleToggle}>
-      <Popover.Button className={cn("outline-none", buttonClassName)} disabled={disabled}>
+      <PopoverTrigger render={<button className={cn("outline-none", buttonClassName)} />} disabled={disabled}>
         {label}
-      </Popover.Button>
-      <Popover.Panel
-        positionerClassName="z-50"
-        className={cn("w-80 overflow-hidden rounded-md border-[0.5px] border-strong bg-surface-1", dropdownClassName)}
-        side={finalSide}
-        align={finalAlign}
-        sideOffset={8}
-        data-prevent-outside-click="true"
-      >
-        <div className="h-80 overflow-hidden overflow-y-auto">
+      </PopoverTrigger>
+      <PopoverContent side={finalSide} align={finalAlign} sideOffset={8} data-prevent-outside-click="true">
+        <div
+          className={cn(
+            "h-80 w-80 overflow-hidden overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1",
+            dropdownClassName
+          )}
+        >
           <EmojiRoot
             onChange={handleEmojiChange}
             searchPlaceholder={searchPlaceholder}
             searchDisabled={searchDisabled}
           />
         </div>
-      </Popover.Panel>
+      </PopoverContent>
     </Popover>
   );
 }
diff --git a/packages/propel/src/emoji-reaction/emoji-reaction.tsx b/packages/blocks/src/emoji-reaction/emoji-reaction.tsx
similarity index 85%
rename from packages/propel/src/emoji-reaction/emoji-reaction.tsx
rename to packages/blocks/src/emoji-reaction/emoji-reaction.tsx
index c5898285e72..388bc14e827 100644
--- a/packages/propel/src/emoji-reaction/emoji-reaction.tsx
+++ b/packages/blocks/src/emoji-reaction/emoji-reaction.tsx
@@ -8,9 +8,10 @@ import * as React from "react";
 import { AnimatedCounter } from "../animated-counter";
 import { stringToEmoji } from "../emoji-icon-picker";
 import { ReactionOutline } from "@makeplane/propel/icons";
-import { Tooltip } from "../tooltip";
+import { Icon } from "@makeplane/propel/components/icon";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { IconButton } from "@makeplane/propel/components/icon-button";
 import { cn } from "../utils";
-import { IconButton } from "../icon-button";
 
 export interface EmojiReactionType {
   emoji: string;
@@ -60,21 +61,13 @@ const EmojiReaction = React.forwardRef(function EmojiReaction(
     onReactionClick?.(emoji);
   };
 
-  const tooltipContent = React.useMemo(() => {
+  const tooltipLabel = React.useMemo(() => {
     if (!users.length) return null;
 
     const displayUsers = users.slice(0, 5);
     const remainingCount = users.length - displayUsers.length;
 
-    return (
-      <div className="text-11">
-        <div className="mb-1 font-medium">{stringToEmoji(emoji)}</div>
-        <div>
-          {displayUsers.join(", ")}
-          {remainingCount > 0 && ` and ${remainingCount} more`}
-        </div>
-      </div>
-    );
+    return `${stringToEmoji(emoji)}: ${displayUsers.join(", ")}${remainingCount > 0 ? ` and ${remainingCount} more` : ""}`;
   }, [emoji, users]);
 
   const button = (
@@ -95,8 +88,12 @@ const EmojiReaction = React.forwardRef(function EmojiReaction(
     </button>
   );
 
-  if (tooltipContent && users.length > 0) {
-    return <Tooltip tooltipContent={tooltipContent}>{button}</Tooltip>;
+  if (tooltipLabel && users.length > 0) {
+    return (
+      <Tooltip label={tooltipLabel} layout="stacked">
+        {button}
+      </Tooltip>
+    );
   }
 
   return button;
@@ -107,14 +104,15 @@ const EmojiReactionButton = React.forwardRef(function EmojiReactionButton(
   ref: React.ForwardedRef<HTMLButtonElement>
 ) {
   return (
-    <Tooltip tooltipContent="Add reaction">
+    <Tooltip label="Add reaction">
       <IconButton
         ref={ref}
-        icon={ReactionOutline}
+        render={<button className={className} />}
+        aria-label="Add reaction"
+        icon={<Icon icon={ReactionOutline} />}
         variant="ghost"
         size="sm"
         onClick={onAddReaction}
-        className={className}
         {...props}
       />
     </Tooltip>
diff --git a/packages/propel/src/emoji-reaction/index.ts b/packages/blocks/src/emoji-reaction/index.ts
similarity index 100%
rename from packages/propel/src/emoji-reaction/index.ts
rename to packages/blocks/src/emoji-reaction/index.ts
diff --git a/packages/propel/src/empty-state/assets/asset-registry.tsx b/packages/blocks/src/empty-state/assets/asset-registry.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/asset-registry.tsx
rename to packages/blocks/src/empty-state/assets/asset-registry.tsx
diff --git a/packages/propel/src/empty-state/assets/asset-types.ts b/packages/blocks/src/empty-state/assets/asset-types.ts
similarity index 100%
rename from packages/propel/src/empty-state/assets/asset-types.ts
rename to packages/blocks/src/empty-state/assets/asset-types.ts
diff --git a/packages/propel/src/empty-state/assets/helper.tsx b/packages/blocks/src/empty-state/assets/helper.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/helper.tsx
rename to packages/blocks/src/empty-state/assets/helper.tsx
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/constant.tsx b/packages/blocks/src/empty-state/assets/horizontal-stack/constant.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/horizontal-stack/constant.tsx
rename to packages/blocks/src/empty-state/assets/horizontal-stack/constant.tsx
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/customer.tsx b/packages/blocks/src/empty-state/assets/horizontal-stack/customer.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/horizontal-stack/customer.tsx
rename to packages/blocks/src/empty-state/assets/horizontal-stack/customer.tsx
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/epic.tsx b/packages/blocks/src/empty-state/assets/horizontal-stack/epic.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/horizontal-stack/epic.tsx
rename to packages/blocks/src/empty-state/assets/horizontal-stack/epic.tsx
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/estimate.tsx b/packages/blocks/src/empty-state/assets/horizontal-stack/estimate.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/horizontal-stack/estimate.tsx
rename to packages/blocks/src/empty-state/assets/horizontal-stack/estimate.tsx
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/export.tsx b/packages/blocks/src/empty-state/assets/horizontal-stack/export.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/horizontal-stack/export.tsx
rename to packages/blocks/src/empty-state/assets/horizontal-stack/export.tsx
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/index.ts b/packages/blocks/src/empty-state/assets/horizontal-stack/index.ts
similarity index 100%
rename from packages/propel/src/empty-state/assets/horizontal-stack/index.ts
rename to packages/blocks/src/empty-state/assets/horizontal-stack/index.ts
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/intake.tsx b/packages/blocks/src/empty-state/assets/horizontal-stack/intake.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/horizontal-stack/intake.tsx
rename to packages/blocks/src/empty-state/assets/horizontal-stack/intake.tsx
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/label.tsx b/packages/blocks/src/empty-state/assets/horizontal-stack/label.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/horizontal-stack/label.tsx
rename to packages/blocks/src/empty-state/assets/horizontal-stack/label.tsx
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/link.tsx b/packages/blocks/src/empty-state/assets/horizontal-stack/link.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/horizontal-stack/link.tsx
rename to packages/blocks/src/empty-state/assets/horizontal-stack/link.tsx
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/members.tsx b/packages/blocks/src/empty-state/assets/horizontal-stack/members.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/horizontal-stack/members.tsx
rename to packages/blocks/src/empty-state/assets/horizontal-stack/members.tsx
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/note.tsx b/packages/blocks/src/empty-state/assets/horizontal-stack/note.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/horizontal-stack/note.tsx
rename to packages/blocks/src/empty-state/assets/horizontal-stack/note.tsx
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/priority.tsx b/packages/blocks/src/empty-state/assets/horizontal-stack/priority.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/horizontal-stack/priority.tsx
rename to packages/blocks/src/empty-state/assets/horizontal-stack/priority.tsx
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/project.tsx b/packages/blocks/src/empty-state/assets/horizontal-stack/project.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/horizontal-stack/project.tsx
rename to packages/blocks/src/empty-state/assets/horizontal-stack/project.tsx
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/settings.tsx b/packages/blocks/src/empty-state/assets/horizontal-stack/settings.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/horizontal-stack/settings.tsx
rename to packages/blocks/src/empty-state/assets/horizontal-stack/settings.tsx
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/state.tsx b/packages/blocks/src/empty-state/assets/horizontal-stack/state.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/horizontal-stack/state.tsx
rename to packages/blocks/src/empty-state/assets/horizontal-stack/state.tsx
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/template.tsx b/packages/blocks/src/empty-state/assets/horizontal-stack/template.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/horizontal-stack/template.tsx
rename to packages/blocks/src/empty-state/assets/horizontal-stack/template.tsx
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/token.tsx b/packages/blocks/src/empty-state/assets/horizontal-stack/token.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/horizontal-stack/token.tsx
rename to packages/blocks/src/empty-state/assets/horizontal-stack/token.tsx
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/unknown.tsx b/packages/blocks/src/empty-state/assets/horizontal-stack/unknown.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/horizontal-stack/unknown.tsx
rename to packages/blocks/src/empty-state/assets/horizontal-stack/unknown.tsx
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/update.tsx b/packages/blocks/src/empty-state/assets/horizontal-stack/update.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/horizontal-stack/update.tsx
rename to packages/blocks/src/empty-state/assets/horizontal-stack/update.tsx
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/webhook.tsx b/packages/blocks/src/empty-state/assets/horizontal-stack/webhook.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/horizontal-stack/webhook.tsx
rename to packages/blocks/src/empty-state/assets/horizontal-stack/webhook.tsx
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/work-item.tsx b/packages/blocks/src/empty-state/assets/horizontal-stack/work-item.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/horizontal-stack/work-item.tsx
rename to packages/blocks/src/empty-state/assets/horizontal-stack/work-item.tsx
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/worklog.tsx b/packages/blocks/src/empty-state/assets/horizontal-stack/worklog.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/horizontal-stack/worklog.tsx
rename to packages/blocks/src/empty-state/assets/horizontal-stack/worklog.tsx
diff --git a/packages/propel/src/empty-state/assets/illustration/constant.tsx b/packages/blocks/src/empty-state/assets/illustration/constant.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/illustration/constant.tsx
rename to packages/blocks/src/empty-state/assets/illustration/constant.tsx
diff --git a/packages/propel/src/empty-state/assets/illustration/inbox.tsx b/packages/blocks/src/empty-state/assets/illustration/inbox.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/illustration/inbox.tsx
rename to packages/blocks/src/empty-state/assets/illustration/inbox.tsx
diff --git a/packages/propel/src/empty-state/assets/illustration/index.ts b/packages/blocks/src/empty-state/assets/illustration/index.ts
similarity index 100%
rename from packages/propel/src/empty-state/assets/illustration/index.ts
rename to packages/blocks/src/empty-state/assets/illustration/index.ts
diff --git a/packages/propel/src/empty-state/assets/illustration/search.tsx b/packages/blocks/src/empty-state/assets/illustration/search.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/illustration/search.tsx
rename to packages/blocks/src/empty-state/assets/illustration/search.tsx
diff --git a/packages/propel/src/empty-state/assets/index.ts b/packages/blocks/src/empty-state/assets/index.ts
similarity index 100%
rename from packages/propel/src/empty-state/assets/index.ts
rename to packages/blocks/src/empty-state/assets/index.ts
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/404-error.tsx b/packages/blocks/src/empty-state/assets/vertical-stack/404-error.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/vertical-stack/404-error.tsx
rename to packages/blocks/src/empty-state/assets/vertical-stack/404-error.tsx
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/archived-cycle.tsx b/packages/blocks/src/empty-state/assets/vertical-stack/archived-cycle.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/vertical-stack/archived-cycle.tsx
rename to packages/blocks/src/empty-state/assets/vertical-stack/archived-cycle.tsx
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/archived-module.tsx b/packages/blocks/src/empty-state/assets/vertical-stack/archived-module.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/vertical-stack/archived-module.tsx
rename to packages/blocks/src/empty-state/assets/vertical-stack/archived-module.tsx
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/archived-work-item.tsx b/packages/blocks/src/empty-state/assets/vertical-stack/archived-work-item.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/vertical-stack/archived-work-item.tsx
rename to packages/blocks/src/empty-state/assets/vertical-stack/archived-work-item.tsx
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/changelog.tsx b/packages/blocks/src/empty-state/assets/vertical-stack/changelog.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/vertical-stack/changelog.tsx
rename to packages/blocks/src/empty-state/assets/vertical-stack/changelog.tsx
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/constant.tsx b/packages/blocks/src/empty-state/assets/vertical-stack/constant.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/vertical-stack/constant.tsx
rename to packages/blocks/src/empty-state/assets/vertical-stack/constant.tsx
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/customer.tsx b/packages/blocks/src/empty-state/assets/vertical-stack/customer.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/vertical-stack/customer.tsx
rename to packages/blocks/src/empty-state/assets/vertical-stack/customer.tsx
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/cycle.tsx b/packages/blocks/src/empty-state/assets/vertical-stack/cycle.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/vertical-stack/cycle.tsx
rename to packages/blocks/src/empty-state/assets/vertical-stack/cycle.tsx
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/dashboard.tsx b/packages/blocks/src/empty-state/assets/vertical-stack/dashboard.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/vertical-stack/dashboard.tsx
rename to packages/blocks/src/empty-state/assets/vertical-stack/dashboard.tsx
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/draft.tsx b/packages/blocks/src/empty-state/assets/vertical-stack/draft.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/vertical-stack/draft.tsx
rename to packages/blocks/src/empty-state/assets/vertical-stack/draft.tsx
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/epic.tsx b/packages/blocks/src/empty-state/assets/vertical-stack/epic.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/vertical-stack/epic.tsx
rename to packages/blocks/src/empty-state/assets/vertical-stack/epic.tsx
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/index.ts b/packages/blocks/src/empty-state/assets/vertical-stack/index.ts
similarity index 100%
rename from packages/propel/src/empty-state/assets/vertical-stack/index.ts
rename to packages/blocks/src/empty-state/assets/vertical-stack/index.ts
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/initiative.tsx b/packages/blocks/src/empty-state/assets/vertical-stack/initiative.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/vertical-stack/initiative.tsx
rename to packages/blocks/src/empty-state/assets/vertical-stack/initiative.tsx
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/invalid-link.tsx b/packages/blocks/src/empty-state/assets/vertical-stack/invalid-link.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/vertical-stack/invalid-link.tsx
rename to packages/blocks/src/empty-state/assets/vertical-stack/invalid-link.tsx
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/module.tsx b/packages/blocks/src/empty-state/assets/vertical-stack/module.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/vertical-stack/module.tsx
rename to packages/blocks/src/empty-state/assets/vertical-stack/module.tsx
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/no-access.tsx b/packages/blocks/src/empty-state/assets/vertical-stack/no-access.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/vertical-stack/no-access.tsx
rename to packages/blocks/src/empty-state/assets/vertical-stack/no-access.tsx
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/page.tsx b/packages/blocks/src/empty-state/assets/vertical-stack/page.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/vertical-stack/page.tsx
rename to packages/blocks/src/empty-state/assets/vertical-stack/page.tsx
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/project.tsx b/packages/blocks/src/empty-state/assets/vertical-stack/project.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/vertical-stack/project.tsx
rename to packages/blocks/src/empty-state/assets/vertical-stack/project.tsx
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/server-error.tsx b/packages/blocks/src/empty-state/assets/vertical-stack/server-error.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/vertical-stack/server-error.tsx
rename to packages/blocks/src/empty-state/assets/vertical-stack/server-error.tsx
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/teamspace.tsx b/packages/blocks/src/empty-state/assets/vertical-stack/teamspace.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/vertical-stack/teamspace.tsx
rename to packages/blocks/src/empty-state/assets/vertical-stack/teamspace.tsx
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/view.tsx b/packages/blocks/src/empty-state/assets/vertical-stack/view.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/vertical-stack/view.tsx
rename to packages/blocks/src/empty-state/assets/vertical-stack/view.tsx
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/work-item.tsx b/packages/blocks/src/empty-state/assets/vertical-stack/work-item.tsx
similarity index 100%
rename from packages/propel/src/empty-state/assets/vertical-stack/work-item.tsx
rename to packages/blocks/src/empty-state/assets/vertical-stack/work-item.tsx
diff --git a/packages/blocks/src/empty-state/button.tsx b/packages/blocks/src/empty-state/button.tsx
new file mode 100644
index 00000000000..6659639218f
--- /dev/null
+++ b/packages/blocks/src/empty-state/button.tsx
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Button } from "@makeplane/propel/components/button";
+import type { ButtonVariant } from "@makeplane/propel/components/button";
+import type { TButtonVariant } from "./types";
+
+/** Maps the legacy empty-state action variants onto @makeplane/propel Button variants. */
+export const getButtonVariant = (variant?: TButtonVariant): ButtonVariant => {
+  switch (variant) {
+    case "error-fill":
+      return "danger";
+    case "error-outline":
+      return "danger-outline";
+    case "secondary":
+      return "secondary";
+    case "tertiary":
+      return "tertiary";
+    case "ghost":
+    case "link":
+      return "ghost";
+    case "primary":
+    default:
+      return "primary";
+  }
+};
+
+export { Button };
diff --git a/packages/propel/src/empty-state/compact-empty-state.tsx b/packages/blocks/src/empty-state/compact-empty-state.tsx
similarity index 86%
rename from packages/propel/src/empty-state/compact-empty-state.tsx
rename to packages/blocks/src/empty-state/compact-empty-state.tsx
index 7f13486e23c..36cdef99171 100644
--- a/packages/propel/src/empty-state/compact-empty-state.tsx
+++ b/packages/blocks/src/empty-state/compact-empty-state.tsx
@@ -5,7 +5,7 @@
  */
 
 import React from "react";
-import { Button } from "../button/button";
+import { Button, getButtonVariant } from "./button";
 import { cn } from "../utils/classname";
 import { getCompactAsset } from "./assets/asset-registry";
 import type { CompactAssetType } from "./assets/asset-types";
@@ -54,9 +54,14 @@ export function EmptyStateCompact({
                   {actions.map((action, index) => {
                     const { label, variant, ...rest } = action;
                     return (
-                      <Button key={index} variant={variant} size="base" {...rest}>
-                        {label}
-                      </Button>
+                      <Button
+                        key={index}
+                        variant={getButtonVariant(variant)}
+                        size="sm"
+                        stretch="auto"
+                        label={label}
+                        {...rest}
+                      />
                     );
                   })}
                 </div>
diff --git a/packages/propel/src/empty-state/detailed-empty-state.tsx b/packages/blocks/src/empty-state/detailed-empty-state.tsx
similarity index 86%
rename from packages/propel/src/empty-state/detailed-empty-state.tsx
rename to packages/blocks/src/empty-state/detailed-empty-state.tsx
index be6d2255fc5..ad70b63b047 100644
--- a/packages/propel/src/empty-state/detailed-empty-state.tsx
+++ b/packages/blocks/src/empty-state/detailed-empty-state.tsx
@@ -5,7 +5,7 @@
  */
 
 // local imports
-import { Button } from "../button/button";
+import { Button, getButtonVariant } from "./button";
 import { cn } from "../utils/classname";
 import { getDetailedAsset } from "./assets/asset-registry";
 import type { DetailedAssetType } from "./assets/asset-types";
@@ -59,9 +59,14 @@ export function EmptyStateDetailed({
                   {actions.map((action, index) => {
                     const { label, variant, ...rest } = action;
                     return (
-                      <Button key={index} variant={variant} size="xl" {...rest}>
-                        {label}
-                      </Button>
+                      <Button
+                        key={index}
+                        variant={getButtonVariant(variant)}
+                        size="lg"
+                        stretch="auto"
+                        label={label}
+                        {...rest}
+                      />
                     );
                   })}
                 </div>
diff --git a/packages/propel/src/empty-state/empty-state.tsx b/packages/blocks/src/empty-state/empty-state.tsx
similarity index 100%
rename from packages/propel/src/empty-state/empty-state.tsx
rename to packages/blocks/src/empty-state/empty-state.tsx
diff --git a/packages/propel/src/empty-state/index.ts b/packages/blocks/src/empty-state/index.ts
similarity index 100%
rename from packages/propel/src/empty-state/index.ts
rename to packages/blocks/src/empty-state/index.ts
diff --git a/packages/propel/src/empty-state/types.ts b/packages/blocks/src/empty-state/types.ts
similarity index 73%
rename from packages/propel/src/empty-state/types.ts
rename to packages/blocks/src/empty-state/types.ts
index c1cd894f546..86a3eade780 100644
--- a/packages/propel/src/empty-state/types.ts
+++ b/packages/blocks/src/empty-state/types.ts
@@ -4,10 +4,16 @@
  * See the LICENSE file for details.
  */
 
-import type { TButtonVariant } from "../button/helper";
 import type { TAlign } from "../utils/placement";
 import type { CompactAssetType, DetailedAssetType } from "./assets/asset-types";
 
+/**
+ * Legacy button variants accepted by empty-state actions. Mapped internally onto
+ * `@makeplane/propel` Button variants (`error-fill` → `danger`, `error-outline` →
+ * `danger-outline`, `link` → `ghost`).
+ */
+export type TButtonVariant = "primary" | "error-fill" | "error-outline" | "secondary" | "tertiary" | "ghost" | "link";
+
 export interface ActionButton extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
   label: string;
   variant?: TButtonVariant;
diff --git a/packages/ui/src/favorite-star.tsx b/packages/blocks/src/favorite-star/favorite-star.tsx
similarity index 97%
rename from packages/ui/src/favorite-star.tsx
rename to packages/blocks/src/favorite-star/favorite-star.tsx
index e6bb3c1c638..99a30d00623 100644
--- a/packages/ui/src/favorite-star.tsx
+++ b/packages/blocks/src/favorite-star/favorite-star.tsx
@@ -7,7 +7,7 @@
 import { StarFilled, StarOutline } from "@makeplane/propel/icons";
 import React from "react";
 // helpers
-import { cn } from "./utils";
+import { cn } from "../utils";
 
 type Props = {
   buttonClassName?: string;
diff --git a/packages/propel/src/collapsible/index.ts b/packages/blocks/src/favorite-star/index.ts
similarity index 82%
rename from packages/propel/src/collapsible/index.ts
rename to packages/blocks/src/favorite-star/index.ts
index 7528e0d586a..2cf7a9af4ba 100644
--- a/packages/propel/src/collapsible/index.ts
+++ b/packages/blocks/src/favorite-star/index.ts
@@ -4,4 +4,4 @@
  * See the LICENSE file for details.
  */
 
-export * from "./collapsible";
+export * from "./favorite-star";
diff --git a/packages/ui/src/form-fields/index.ts b/packages/blocks/src/form-fields/index.ts
similarity index 100%
rename from packages/ui/src/form-fields/index.ts
rename to packages/blocks/src/form-fields/index.ts
diff --git a/packages/ui/src/form-fields/input-color-picker.tsx b/packages/blocks/src/form-fields/input-color-picker.tsx
similarity index 92%
rename from packages/ui/src/form-fields/input-color-picker.tsx
rename to packages/blocks/src/form-fields/input-color-picker.tsx
index e71d3c3f53c..024c4940ff1 100644
--- a/packages/ui/src/form-fields/input-color-picker.tsx
+++ b/packages/blocks/src/form-fields/input-color-picker.tsx
@@ -10,7 +10,6 @@ import * as ColorPicker from "react-color";
 import type { ColorResult } from "react-color";
 import { usePopper } from "react-popper";
 // helpers
-import { Button } from "../button/button";
 import { cn } from "../utils";
 // components
 import { Input } from "./input";
@@ -62,7 +61,11 @@ export function InputColorPicker(props: InputColorPickerProps) {
         {() => (
           <>
             <Popover.Button as={React.Fragment}>
-              <Button ref={setReferenceElement} variant="neutral-primary" className="border-none !bg-transparent">
+              <button
+                ref={setReferenceElement}
+                type="button"
+                className="grid size-5 place-items-center border-none !bg-transparent text-secondary hover:bg-surface-2 focus:bg-surface-2 focus:text-tertiary"
+              >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   width="14"
@@ -81,7 +84,7 @@ export function InputColorPicker(props: InputColorPickerProps) {
                   <circle cx="6.5" cy="12.5" r=".5" />
                   <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" />
                 </svg>
-              </Button>
+              </button>
             </Popover.Button>
             <Transition
               as={React.Fragment}
diff --git a/packages/ui/src/form-fields/input.tsx b/packages/blocks/src/form-fields/input.tsx
similarity index 100%
rename from packages/ui/src/form-fields/input.tsx
rename to packages/blocks/src/form-fields/input.tsx
diff --git a/packages/ui/src/form-fields/password/helper.tsx b/packages/blocks/src/form-fields/password/helper.tsx
similarity index 100%
rename from packages/ui/src/form-fields/password/helper.tsx
rename to packages/blocks/src/form-fields/password/helper.tsx
diff --git a/packages/ui/src/form-fields/password/index.ts b/packages/blocks/src/form-fields/password/index.ts
similarity index 100%
rename from packages/ui/src/form-fields/password/index.ts
rename to packages/blocks/src/form-fields/password/index.ts
diff --git a/packages/ui/src/form-fields/password/indicator.tsx b/packages/blocks/src/form-fields/password/indicator.tsx
similarity index 100%
rename from packages/ui/src/form-fields/password/indicator.tsx
rename to packages/blocks/src/form-fields/password/indicator.tsx
diff --git a/packages/ui/src/form-fields/password/password-input.tsx b/packages/blocks/src/form-fields/password/password-input.tsx
similarity index 94%
rename from packages/ui/src/form-fields/password/password-input.tsx
rename to packages/blocks/src/form-fields/password/password-input.tsx
index 248d8852727..05188547b9d 100644
--- a/packages/ui/src/form-fields/password/password-input.tsx
+++ b/packages/blocks/src/form-fields/password/password-input.tsx
@@ -6,7 +6,7 @@
 
 import { HideOutline, ShowOutline } from "@makeplane/propel/icons";
 import { useState } from "react";
-import { Tooltip } from "@plane/propel/tooltip";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
 import { cn } from "@plane/utils";
 
 type TPasswordInputProps = {
@@ -50,7 +50,7 @@ export function PasswordInput({
         autoComplete={autoComplete}
       />
       {showToggle && (
-        <Tooltip tooltipContent={showPassword ? "Hide password" : "Show password"} position="top">
+        <Tooltip label={showPassword ? "Hide password" : "Show password"} side="top">
           <button
             type="button"
             onClick={() => setShowPassword(!showPassword)}
diff --git a/packages/ui/src/form-fields/textarea.tsx b/packages/blocks/src/form-fields/textarea.tsx
similarity index 100%
rename from packages/ui/src/form-fields/textarea.tsx
rename to packages/blocks/src/form-fields/textarea.tsx
diff --git a/packages/ui/src/header/header.tsx b/packages/blocks/src/header/header.tsx
similarity index 100%
rename from packages/ui/src/header/header.tsx
rename to packages/blocks/src/header/header.tsx
diff --git a/packages/ui/src/header/helper.tsx b/packages/blocks/src/header/helper.tsx
similarity index 100%
rename from packages/ui/src/header/helper.tsx
rename to packages/blocks/src/header/helper.tsx
diff --git a/packages/ui/src/header/index.ts b/packages/blocks/src/header/index.ts
similarity index 100%
rename from packages/ui/src/header/index.ts
rename to packages/blocks/src/header/index.ts
diff --git a/packages/ui/src/hooks/use-auto-resize-textarea.ts b/packages/blocks/src/hooks/use-auto-resize-textarea.ts
similarity index 100%
rename from packages/ui/src/hooks/use-auto-resize-textarea.ts
rename to packages/blocks/src/hooks/use-auto-resize-textarea.ts
diff --git a/packages/ui/src/hooks/use-dropdown-key-down.tsx b/packages/blocks/src/hooks/use-dropdown-key-down.tsx
similarity index 100%
rename from packages/ui/src/hooks/use-dropdown-key-down.tsx
rename to packages/blocks/src/hooks/use-dropdown-key-down.tsx
diff --git a/packages/ui/src/hooks/use-dropdown-key-pressed.ts b/packages/blocks/src/hooks/use-dropdown-key-pressed.ts
similarity index 100%
rename from packages/ui/src/hooks/use-dropdown-key-pressed.ts
rename to packages/blocks/src/hooks/use-dropdown-key-pressed.ts
diff --git a/packages/ui/src/hooks/use-platform-os.ts b/packages/blocks/src/hooks/use-platform-os.ts
similarity index 100%
rename from packages/ui/src/hooks/use-platform-os.ts
rename to packages/blocks/src/hooks/use-platform-os.ts
diff --git a/packages/propel/src/icons/blocked-icon.tsx b/packages/blocks/src/icons/blocked-icon.tsx
similarity index 100%
rename from packages/propel/src/icons/blocked-icon.tsx
rename to packages/blocks/src/icons/blocked-icon.tsx
diff --git a/packages/propel/src/icons/blocker-icon.tsx b/packages/blocks/src/icons/blocker-icon.tsx
similarity index 100%
rename from packages/propel/src/icons/blocker-icon.tsx
rename to packages/blocks/src/icons/blocker-icon.tsx
diff --git a/packages/propel/src/icons/brand/accenture-logo.tsx b/packages/blocks/src/icons/brand/accenture-logo.tsx
similarity index 100%
rename from packages/propel/src/icons/brand/accenture-logo.tsx
rename to packages/blocks/src/icons/brand/accenture-logo.tsx
diff --git a/packages/propel/src/icons/brand/dolby-logo.tsx b/packages/blocks/src/icons/brand/dolby-logo.tsx
similarity index 100%
rename from packages/propel/src/icons/brand/dolby-logo.tsx
rename to packages/blocks/src/icons/brand/dolby-logo.tsx
diff --git a/packages/propel/src/icons/brand/plane-lockup.tsx b/packages/blocks/src/icons/brand/plane-lockup.tsx
similarity index 100%
rename from packages/propel/src/icons/brand/plane-lockup.tsx
rename to packages/blocks/src/icons/brand/plane-lockup.tsx
diff --git a/packages/propel/src/icons/brand/plane-logo.tsx b/packages/blocks/src/icons/brand/plane-logo.tsx
similarity index 100%
rename from packages/propel/src/icons/brand/plane-logo.tsx
rename to packages/blocks/src/icons/brand/plane-logo.tsx
diff --git a/packages/propel/src/icons/brand/sony-logo.tsx b/packages/blocks/src/icons/brand/sony-logo.tsx
similarity index 100%
rename from packages/propel/src/icons/brand/sony-logo.tsx
rename to packages/blocks/src/icons/brand/sony-logo.tsx
diff --git a/packages/propel/src/icons/brand/zerodha-logo.tsx b/packages/blocks/src/icons/brand/zerodha-logo.tsx
similarity index 100%
rename from packages/propel/src/icons/brand/zerodha-logo.tsx
rename to packages/blocks/src/icons/brand/zerodha-logo.tsx
diff --git a/packages/propel/src/icons/calendar-after-icon.tsx b/packages/blocks/src/icons/calendar-after-icon.tsx
similarity index 100%
rename from packages/propel/src/icons/calendar-after-icon.tsx
rename to packages/blocks/src/icons/calendar-after-icon.tsx
diff --git a/packages/propel/src/icons/calendar-before-icon.tsx b/packages/blocks/src/icons/calendar-before-icon.tsx
similarity index 100%
rename from packages/propel/src/icons/calendar-before-icon.tsx
rename to packages/blocks/src/icons/calendar-before-icon.tsx
diff --git a/packages/propel/src/icons/cycle/circle-dot-full-icon.tsx b/packages/blocks/src/icons/cycle/circle-dot-full-icon.tsx
similarity index 100%
rename from packages/propel/src/icons/cycle/circle-dot-full-icon.tsx
rename to packages/blocks/src/icons/cycle/circle-dot-full-icon.tsx
diff --git a/packages/propel/src/icons/cycle/cycle-group-icon.tsx b/packages/blocks/src/icons/cycle/cycle-group-icon.tsx
similarity index 100%
rename from packages/propel/src/icons/cycle/cycle-group-icon.tsx
rename to packages/blocks/src/icons/cycle/cycle-group-icon.tsx
diff --git a/packages/propel/src/icons/cycle/helper.tsx b/packages/blocks/src/icons/cycle/helper.tsx
similarity index 100%
rename from packages/propel/src/icons/cycle/helper.tsx
rename to packages/blocks/src/icons/cycle/helper.tsx
diff --git a/packages/propel/src/icons/favorite-folder-icon.tsx b/packages/blocks/src/icons/favorite-folder-icon.tsx
similarity index 100%
rename from packages/propel/src/icons/favorite-folder-icon.tsx
rename to packages/blocks/src/icons/favorite-folder-icon.tsx
diff --git a/packages/propel/src/icons/icon-wrapper.tsx b/packages/blocks/src/icons/icon-wrapper.tsx
similarity index 100%
rename from packages/propel/src/icons/icon-wrapper.tsx
rename to packages/blocks/src/icons/icon-wrapper.tsx
diff --git a/packages/blocks/src/icons/index.ts b/packages/blocks/src/icons/index.ts
new file mode 100644
index 00000000000..9ebf79dcf80
--- /dev/null
+++ b/packages/blocks/src/icons/index.ts
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type { ISvgIcons } from "./type";
+export type { TIssuePriorities } from "./priority-icon";
+export { PriorityIcon } from "./priority-icon";
+export { BlockedIcon } from "./blocked-icon";
+export { BlockerIcon } from "./blocker-icon";
+export { CalendarAfterIcon } from "./calendar-after-icon";
+export { CalendarBeforeIcon } from "./calendar-before-icon";
+export { FavoriteFolderIcon } from "./favorite-folder-icon";
+export { LayerStackIcon } from "./layer-stack";
+export { MonospaceIcon } from "./monospace-icon";
+export { SansSerifIcon } from "./sans-serif-icon";
+export { SerifIcon } from "./serif-icon";
+export { AccentureLogo } from "./brand/accenture-logo";
+export { DolbyLogo } from "./brand/dolby-logo";
+export { PlaneLockup } from "./brand/plane-lockup";
+export { PlaneLogo } from "./brand/plane-logo";
+export { SonyLogo } from "./brand/sony-logo";
+export { ZerodhaLogo } from "./brand/zerodha-logo";
+export { PiChatLogo } from "./sub-brand/pi-chat";
+export { PlaneNewIcon } from "./sub-brand/plane-icon";
+export { CycleGroupIcon } from "./cycle/cycle-group-icon";
+export { ModuleStatusIcon } from "./module/module-status-icon";
+export type { TModuleStatus } from "./module/module-status-icon";
+export { StateGroupIcon } from "./state/state-group-icon";
+export { IntakeStateGroupIcon } from "./state/intake-state-group-icon";
diff --git a/packages/propel/src/icons/layer-stack.tsx b/packages/blocks/src/icons/layer-stack.tsx
similarity index 100%
rename from packages/propel/src/icons/layer-stack.tsx
rename to packages/blocks/src/icons/layer-stack.tsx
diff --git a/packages/propel/src/icons/module/backlog.tsx b/packages/blocks/src/icons/module/backlog.tsx
similarity index 100%
rename from packages/propel/src/icons/module/backlog.tsx
rename to packages/blocks/src/icons/module/backlog.tsx
diff --git a/packages/propel/src/icons/module/cancelled.tsx b/packages/blocks/src/icons/module/cancelled.tsx
similarity index 100%
rename from packages/propel/src/icons/module/cancelled.tsx
rename to packages/blocks/src/icons/module/cancelled.tsx
diff --git a/packages/propel/src/icons/module/completed.tsx b/packages/blocks/src/icons/module/completed.tsx
similarity index 100%
rename from packages/propel/src/icons/module/completed.tsx
rename to packages/blocks/src/icons/module/completed.tsx
diff --git a/packages/propel/src/icons/module/in-progress.tsx b/packages/blocks/src/icons/module/in-progress.tsx
similarity index 100%
rename from packages/propel/src/icons/module/in-progress.tsx
rename to packages/blocks/src/icons/module/in-progress.tsx
diff --git a/packages/propel/src/icons/module/module-status-icon.tsx b/packages/blocks/src/icons/module/module-status-icon.tsx
similarity index 100%
rename from packages/propel/src/icons/module/module-status-icon.tsx
rename to packages/blocks/src/icons/module/module-status-icon.tsx
diff --git a/packages/propel/src/icons/module/paused.tsx b/packages/blocks/src/icons/module/paused.tsx
similarity index 100%
rename from packages/propel/src/icons/module/paused.tsx
rename to packages/blocks/src/icons/module/paused.tsx
diff --git a/packages/propel/src/icons/module/planned.tsx b/packages/blocks/src/icons/module/planned.tsx
similarity index 100%
rename from packages/propel/src/icons/module/planned.tsx
rename to packages/blocks/src/icons/module/planned.tsx
diff --git a/packages/propel/src/icons/monospace-icon.tsx b/packages/blocks/src/icons/monospace-icon.tsx
similarity index 100%
rename from packages/propel/src/icons/monospace-icon.tsx
rename to packages/blocks/src/icons/monospace-icon.tsx
diff --git a/packages/propel/src/icons/priority-icon.tsx b/packages/blocks/src/icons/priority-icon.tsx
similarity index 100%
rename from packages/propel/src/icons/priority-icon.tsx
rename to packages/blocks/src/icons/priority-icon.tsx
diff --git a/packages/propel/src/icons/project/cycle-icon.tsx b/packages/blocks/src/icons/project/cycle-icon.tsx
similarity index 100%
rename from packages/propel/src/icons/project/cycle-icon.tsx
rename to packages/blocks/src/icons/project/cycle-icon.tsx
diff --git a/packages/propel/src/icons/sans-serif-icon.tsx b/packages/blocks/src/icons/sans-serif-icon.tsx
similarity index 100%
rename from packages/propel/src/icons/sans-serif-icon.tsx
rename to packages/blocks/src/icons/sans-serif-icon.tsx
diff --git a/packages/propel/src/icons/serif-icon.tsx b/packages/blocks/src/icons/serif-icon.tsx
similarity index 100%
rename from packages/propel/src/icons/serif-icon.tsx
rename to packages/blocks/src/icons/serif-icon.tsx
diff --git a/packages/propel/src/icons/state/backlog-group-icon.tsx b/packages/blocks/src/icons/state/backlog-group-icon.tsx
similarity index 100%
rename from packages/propel/src/icons/state/backlog-group-icon.tsx
rename to packages/blocks/src/icons/state/backlog-group-icon.tsx
diff --git a/packages/propel/src/icons/state/cancelled-group-icon.tsx b/packages/blocks/src/icons/state/cancelled-group-icon.tsx
similarity index 100%
rename from packages/propel/src/icons/state/cancelled-group-icon.tsx
rename to packages/blocks/src/icons/state/cancelled-group-icon.tsx
diff --git a/packages/propel/src/icons/state/completed-group-icon.tsx b/packages/blocks/src/icons/state/completed-group-icon.tsx
similarity index 100%
rename from packages/propel/src/icons/state/completed-group-icon.tsx
rename to packages/blocks/src/icons/state/completed-group-icon.tsx
diff --git a/packages/propel/src/icons/state/dashed-circle.tsx b/packages/blocks/src/icons/state/dashed-circle.tsx
similarity index 100%
rename from packages/propel/src/icons/state/dashed-circle.tsx
rename to packages/blocks/src/icons/state/dashed-circle.tsx
diff --git a/packages/propel/src/icons/state/helper.tsx b/packages/blocks/src/icons/state/helper.tsx
similarity index 100%
rename from packages/propel/src/icons/state/helper.tsx
rename to packages/blocks/src/icons/state/helper.tsx
diff --git a/packages/propel/src/icons/state/intake-state-group-icon.tsx b/packages/blocks/src/icons/state/intake-state-group-icon.tsx
similarity index 100%
rename from packages/propel/src/icons/state/intake-state-group-icon.tsx
rename to packages/blocks/src/icons/state/intake-state-group-icon.tsx
diff --git a/packages/propel/src/icons/state/progress-circle.tsx b/packages/blocks/src/icons/state/progress-circle.tsx
similarity index 100%
rename from packages/propel/src/icons/state/progress-circle.tsx
rename to packages/blocks/src/icons/state/progress-circle.tsx
diff --git a/packages/propel/src/icons/state/started-group-icon.tsx b/packages/blocks/src/icons/state/started-group-icon.tsx
similarity index 100%
rename from packages/propel/src/icons/state/started-group-icon.tsx
rename to packages/blocks/src/icons/state/started-group-icon.tsx
diff --git a/packages/propel/src/icons/state/state-group-icon.tsx b/packages/blocks/src/icons/state/state-group-icon.tsx
similarity index 100%
rename from packages/propel/src/icons/state/state-group-icon.tsx
rename to packages/blocks/src/icons/state/state-group-icon.tsx
diff --git a/packages/propel/src/icons/state/triage-group-icon.tsx b/packages/blocks/src/icons/state/triage-group-icon.tsx
similarity index 100%
rename from packages/propel/src/icons/state/triage-group-icon.tsx
rename to packages/blocks/src/icons/state/triage-group-icon.tsx
diff --git a/packages/propel/src/icons/state/unstarted-group-icon.tsx b/packages/blocks/src/icons/state/unstarted-group-icon.tsx
similarity index 100%
rename from packages/propel/src/icons/state/unstarted-group-icon.tsx
rename to packages/blocks/src/icons/state/unstarted-group-icon.tsx
diff --git a/packages/propel/src/icons/sub-brand/pi-chat.tsx b/packages/blocks/src/icons/sub-brand/pi-chat.tsx
similarity index 100%
rename from packages/propel/src/icons/sub-brand/pi-chat.tsx
rename to packages/blocks/src/icons/sub-brand/pi-chat.tsx
diff --git a/packages/propel/src/icons/sub-brand/plane-icon.tsx b/packages/blocks/src/icons/sub-brand/plane-icon.tsx
similarity index 100%
rename from packages/propel/src/icons/sub-brand/plane-icon.tsx
rename to packages/blocks/src/icons/sub-brand/plane-icon.tsx
diff --git a/packages/propel/src/icons/type.ts b/packages/blocks/src/icons/type.ts
similarity index 100%
rename from packages/propel/src/icons/type.ts
rename to packages/blocks/src/icons/type.ts
diff --git a/packages/ui/src/link/block.tsx b/packages/blocks/src/link/block.tsx
similarity index 100%
rename from packages/ui/src/link/block.tsx
rename to packages/blocks/src/link/block.tsx
diff --git a/packages/ui/src/link/index.ts b/packages/blocks/src/link/index.ts
similarity index 100%
rename from packages/ui/src/link/index.ts
rename to packages/blocks/src/link/index.ts
diff --git a/packages/propel/src/popover/index.ts b/packages/blocks/src/loader/index.ts
similarity index 85%
rename from packages/propel/src/popover/index.ts
rename to packages/blocks/src/loader/index.ts
index d980334597b..879c460e5c0 100644
--- a/packages/propel/src/popover/index.ts
+++ b/packages/blocks/src/loader/index.ts
@@ -4,4 +4,4 @@
  * See the LICENSE file for details.
  */
 
-export * from "./root";
+export * from "./loader";
diff --git a/packages/ui/src/loader.tsx b/packages/blocks/src/loader/loader.tsx
similarity index 96%
rename from packages/ui/src/loader.tsx
rename to packages/blocks/src/loader/loader.tsx
index 836a412bbb0..ec97b8d4afd 100644
--- a/packages/ui/src/loader.tsx
+++ b/packages/blocks/src/loader/loader.tsx
@@ -6,7 +6,7 @@
 
 import React from "react";
 // helpers
-import { cn } from "./utils";
+import { cn } from "../utils";
 
 type Props = {
   children: React.ReactNode;
diff --git a/packages/ui/src/modals/alert-modal.tsx b/packages/blocks/src/modals/alert-modal.tsx
similarity index 80%
rename from packages/ui/src/modals/alert-modal.tsx
rename to packages/blocks/src/modals/alert-modal.tsx
index b9941934133..9310a75fa9b 100644
--- a/packages/ui/src/modals/alert-modal.tsx
+++ b/packages/blocks/src/modals/alert-modal.tsx
@@ -7,8 +7,8 @@
 import { InfoOutline, WarningTriangleOutline } from "@makeplane/propel/icons";
 import React from "react";
 // components
-import type { TButtonVariant } from "@plane/propel/button";
-import { Button } from "@plane/propel/button";
+import type { ButtonVariant } from "@makeplane/propel/components/button";
+import { Button } from "@makeplane/propel/components/button";
 import { cn } from "../utils";
 import { EModalPosition, EModalWidth } from "./constants";
 import { ModalCore } from "./modal-core";
@@ -41,8 +41,8 @@ const VARIANT_ICONS: Record<TModalVariant, React.ComponentType<React.SVGProps<SV
   primary: InfoOutline,
 };
 
-const BUTTON_VARIANTS: Record<TModalVariant, TButtonVariant> = {
-  danger: "error-fill",
+const BUTTON_VARIANTS: Record<TModalVariant, ButtonVariant> = {
+  danger: "danger",
   primary: "primary",
 };
 
@@ -92,12 +92,16 @@ export function AlertModalCore(props: Props) {
         </div>
       </div>
       <div className="flex flex-col-reverse gap-2 border-t-[0.5px] border-subtle px-5 py-4 sm:flex-row sm:justify-end">
-        <Button variant="secondary" onClick={handleClose}>
-          {secondaryButtonText}
-        </Button>
-        <Button variant={BUTTON_VARIANTS[variant]} tabIndex={1} onClick={handleSubmit} loading={isSubmitting}>
-          {isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
-        </Button>
+        <Button variant="secondary" size="lg" stretch="auto" onClick={handleClose} label={secondaryButtonText} />
+        <Button
+          variant={BUTTON_VARIANTS[variant]}
+          size="lg"
+          stretch="auto"
+          tabIndex={1}
+          onClick={handleSubmit}
+          loading={isSubmitting}
+          label={isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
+        />
       </div>
     </ModalCore>
   );
diff --git a/packages/ui/src/modals/constants.ts b/packages/blocks/src/modals/constants.ts
similarity index 100%
rename from packages/ui/src/modals/constants.ts
rename to packages/blocks/src/modals/constants.ts
diff --git a/packages/ui/src/modals/index.ts b/packages/blocks/src/modals/index.ts
similarity index 100%
rename from packages/ui/src/modals/index.ts
rename to packages/blocks/src/modals/index.ts
diff --git a/packages/ui/src/modals/modal-core.tsx b/packages/blocks/src/modals/modal-core.tsx
similarity index 100%
rename from packages/ui/src/modals/modal-core.tsx
rename to packages/blocks/src/modals/modal-core.tsx
diff --git a/packages/ui/src/oauth/index.ts b/packages/blocks/src/oauth/index.ts
similarity index 100%
rename from packages/ui/src/oauth/index.ts
rename to packages/blocks/src/oauth/index.ts
diff --git a/packages/ui/src/oauth/oauth-button.tsx b/packages/blocks/src/oauth/oauth-button.tsx
similarity index 100%
rename from packages/ui/src/oauth/oauth-button.tsx
rename to packages/blocks/src/oauth/oauth-button.tsx
diff --git a/packages/ui/src/oauth/oauth-options.tsx b/packages/blocks/src/oauth/oauth-options.tsx
similarity index 100%
rename from packages/ui/src/oauth/oauth-options.tsx
rename to packages/blocks/src/oauth/oauth-options.tsx
diff --git a/packages/ui/src/popovers/index.ts b/packages/blocks/src/popovers/index.ts
similarity index 100%
rename from packages/ui/src/popovers/index.ts
rename to packages/blocks/src/popovers/index.ts
diff --git a/packages/ui/src/popovers/popover-menu.tsx b/packages/blocks/src/popovers/popover-menu.tsx
similarity index 100%
rename from packages/ui/src/popovers/popover-menu.tsx
rename to packages/blocks/src/popovers/popover-menu.tsx
diff --git a/packages/ui/src/popovers/popover.tsx b/packages/blocks/src/popovers/popover.tsx
similarity index 100%
rename from packages/ui/src/popovers/popover.tsx
rename to packages/blocks/src/popovers/popover.tsx
diff --git a/packages/ui/src/popovers/types.ts b/packages/blocks/src/popovers/types.ts
similarity index 100%
rename from packages/ui/src/popovers/types.ts
rename to packages/blocks/src/popovers/types.ts
diff --git a/packages/propel/src/portal/constants.ts b/packages/blocks/src/portal/constants.ts
similarity index 100%
rename from packages/propel/src/portal/constants.ts
rename to packages/blocks/src/portal/constants.ts
diff --git a/packages/propel/src/portal/index.ts b/packages/blocks/src/portal/index.ts
similarity index 100%
rename from packages/propel/src/portal/index.ts
rename to packages/blocks/src/portal/index.ts
diff --git a/packages/propel/src/portal/modal-portal.tsx b/packages/blocks/src/portal/modal-portal.tsx
similarity index 100%
rename from packages/propel/src/portal/modal-portal.tsx
rename to packages/blocks/src/portal/modal-portal.tsx
diff --git a/packages/propel/src/portal/portal-wrapper.tsx b/packages/blocks/src/portal/portal-wrapper.tsx
similarity index 100%
rename from packages/propel/src/portal/portal-wrapper.tsx
rename to packages/blocks/src/portal/portal-wrapper.tsx
diff --git a/packages/propel/src/portal/types.ts b/packages/blocks/src/portal/types.ts
similarity index 100%
rename from packages/propel/src/portal/types.ts
rename to packages/blocks/src/portal/types.ts
diff --git a/packages/ui/src/row/helper.tsx b/packages/blocks/src/row/helper.tsx
similarity index 100%
rename from packages/ui/src/row/helper.tsx
rename to packages/blocks/src/row/helper.tsx
diff --git a/packages/ui/src/row/index.ts b/packages/blocks/src/row/index.ts
similarity index 100%
rename from packages/ui/src/row/index.ts
rename to packages/blocks/src/row/index.ts
diff --git a/packages/ui/src/row/row.tsx b/packages/blocks/src/row/row.tsx
similarity index 100%
rename from packages/ui/src/row/row.tsx
rename to packages/blocks/src/row/row.tsx
diff --git a/packages/ui/src/drag-handle.tsx b/packages/blocks/src/sortable/drag-handle.tsx
similarity index 97%
rename from packages/ui/src/drag-handle.tsx
rename to packages/blocks/src/sortable/drag-handle.tsx
index dc67d087b33..917ca34e826 100644
--- a/packages/ui/src/drag-handle.tsx
+++ b/packages/blocks/src/sortable/drag-handle.tsx
@@ -7,7 +7,7 @@
 import { MoreVerticalOutline } from "@makeplane/propel/icons";
 import React, { forwardRef } from "react";
 // helpers
-import { cn } from "./utils";
+import { cn } from "../utils";
 
 interface IDragHandle {
   className?: string;
diff --git a/packages/ui/src/sortable/draggable.tsx b/packages/blocks/src/sortable/draggable.tsx
similarity index 98%
rename from packages/ui/src/sortable/draggable.tsx
rename to packages/blocks/src/sortable/draggable.tsx
index 0d369e1069e..f37b62a0992 100644
--- a/packages/ui/src/sortable/draggable.tsx
+++ b/packages/blocks/src/sortable/draggable.tsx
@@ -18,7 +18,7 @@ import {
 } from "@atlaskit/pragmatic-drag-and-drop-hitbox/dist/cjs/closest-edge.js";
 import { isEqual } from "lodash-es";
 import React, { useEffect, useRef, useState } from "react";
-import { DropIndicator } from "../drop-indicator";
+import { DropIndicator } from "./drop-indicator";
 import { cn } from "../utils";
 
 type Props = {
diff --git a/packages/ui/src/drop-indicator.tsx b/packages/blocks/src/sortable/drop-indicator.tsx
similarity index 96%
rename from packages/ui/src/drop-indicator.tsx
rename to packages/blocks/src/sortable/drop-indicator.tsx
index 007b3245f93..5f3c83ae5ff 100644
--- a/packages/ui/src/drop-indicator.tsx
+++ b/packages/blocks/src/sortable/drop-indicator.tsx
@@ -5,7 +5,7 @@
  */
 
 import React from "react";
-import { cn } from "./utils";
+import { cn } from "../utils";
 
 type Props = {
   isVisible: boolean;
diff --git a/packages/ui/src/sortable/index.ts b/packages/blocks/src/sortable/index.ts
similarity index 66%
rename from packages/ui/src/sortable/index.ts
rename to packages/blocks/src/sortable/index.ts
index 02e96af1331..defe59d8d6a 100644
--- a/packages/ui/src/sortable/index.ts
+++ b/packages/blocks/src/sortable/index.ts
@@ -5,3 +5,6 @@
  */
 
 export * from "./sortable";
+export * from "./draggable";
+export * from "./drag-handle";
+export * from "./drop-indicator";
diff --git a/packages/ui/src/sortable/sortable.tsx b/packages/blocks/src/sortable/sortable.tsx
similarity index 95%
rename from packages/ui/src/sortable/sortable.tsx
rename to packages/blocks/src/sortable/sortable.tsx
index ceb94de85fe..cd6a885442e 100644
--- a/packages/ui/src/sortable/sortable.tsx
+++ b/packages/blocks/src/sortable/sortable.tsx
@@ -6,7 +6,7 @@
 
 // @ts-expect-error Due to live server dependencies
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/element/adapter.js";
-import React, { Fragment, useEffect, useMemo } from "react";
+import React, { Fragment, useEffect, useId, useMemo } from "react";
 import { Draggable } from "./draggable";
 
 type TEnhancedData<T> = T & { __uuid__?: string };
@@ -85,10 +85,12 @@ export function Sortable<T>({ data, render, onChange, keyExtractor, containerCla
     };
   }, [data, keyExtractor, onChange]);
 
+  const generatedId = useId();
+
   const enhancedData = useMemo(() => {
-    const uuid = id ? id : Math.random().toString(36).substring(7);
+    const uuid = id ? id : generatedId;
     return data.map((item) => ({ ...item, __uuid__: uuid }));
-  }, [data, id]);
+  }, [data, id, generatedId]);
 
   return (
     <>
diff --git a/packages/propel/src/spinners/circular-bar-spinner.tsx b/packages/blocks/src/spinner/circular-bar-spinner.tsx
similarity index 100%
rename from packages/propel/src/spinners/circular-bar-spinner.tsx
rename to packages/blocks/src/spinner/circular-bar-spinner.tsx
diff --git a/packages/propel/src/spinners/circular-spinner.tsx b/packages/blocks/src/spinner/circular-spinner.tsx
similarity index 100%
rename from packages/propel/src/spinners/circular-spinner.tsx
rename to packages/blocks/src/spinner/circular-spinner.tsx
diff --git a/packages/propel/src/spinners/index.ts b/packages/blocks/src/spinner/index.ts
similarity index 100%
rename from packages/propel/src/spinners/index.ts
rename to packages/blocks/src/spinner/index.ts
diff --git a/packages/propel/src/tab-navigation/index.ts b/packages/blocks/src/tab-navigation/index.ts
similarity index 100%
rename from packages/propel/src/tab-navigation/index.ts
rename to packages/blocks/src/tab-navigation/index.ts
diff --git a/packages/propel/src/tab-navigation/tab-navigation-item.tsx b/packages/blocks/src/tab-navigation/tab-navigation-item.tsx
similarity index 100%
rename from packages/propel/src/tab-navigation/tab-navigation-item.tsx
rename to packages/blocks/src/tab-navigation/tab-navigation-item.tsx
diff --git a/packages/propel/src/tab-navigation/tab-navigation-list.tsx b/packages/blocks/src/tab-navigation/tab-navigation-list.tsx
similarity index 100%
rename from packages/propel/src/tab-navigation/tab-navigation-list.tsx
rename to packages/blocks/src/tab-navigation/tab-navigation-list.tsx
diff --git a/packages/propel/src/tab-navigation/tab-navigation-types.ts b/packages/blocks/src/tab-navigation/tab-navigation-types.ts
similarity index 100%
rename from packages/propel/src/tab-navigation/tab-navigation-types.ts
rename to packages/blocks/src/tab-navigation/tab-navigation-types.ts
diff --git a/packages/ui/src/tables/index.ts b/packages/blocks/src/tables/index.ts
similarity index 100%
rename from packages/ui/src/tables/index.ts
rename to packages/blocks/src/tables/index.ts
diff --git a/packages/ui/src/tables/table.tsx b/packages/blocks/src/tables/table.tsx
similarity index 100%
rename from packages/ui/src/tables/table.tsx
rename to packages/blocks/src/tables/table.tsx
diff --git a/packages/ui/src/tables/types.ts b/packages/blocks/src/tables/types.ts
similarity index 100%
rename from packages/ui/src/tables/types.ts
rename to packages/blocks/src/tables/types.ts
diff --git a/packages/propel/src/toast/index.ts b/packages/blocks/src/toast/index.ts
similarity index 100%
rename from packages/propel/src/toast/index.ts
rename to packages/blocks/src/toast/index.ts
diff --git a/packages/propel/src/toast/toast.tsx b/packages/blocks/src/toast/toast.tsx
similarity index 99%
rename from packages/propel/src/toast/toast.tsx
rename to packages/blocks/src/toast/toast.tsx
index 9985261f202..4ffe3b20898 100644
--- a/packages/propel/src/toast/toast.tsx
+++ b/packages/blocks/src/toast/toast.tsx
@@ -8,7 +8,7 @@ import * as React from "react";
 import { Toast as BaseToast } from "@base-ui-components/react/toast";
 import { CloseOutline, InfoOutline, TickOutline, WarningTriangleOutline } from "@makeplane/propel/icons";
 // spinner
-import { CircularBarSpinner } from "../spinners/circular-bar-spinner";
+import { CircularBarSpinner } from "../spinner/circular-bar-spinner";
 import { cn } from "../utils/classname";
 
 export enum TOAST_TYPE {
diff --git a/packages/propel/src/utils/classname.tsx b/packages/blocks/src/utils/classname.tsx
similarity index 97%
rename from packages/propel/src/utils/classname.tsx
rename to packages/blocks/src/utils/classname.tsx
index 6d0ca1c4828..7de3f12d2b1 100644
--- a/packages/propel/src/utils/classname.tsx
+++ b/packages/blocks/src/utils/classname.tsx
@@ -20,7 +20,7 @@ const isCustomTypography = (value: string) =>
 const isCustomFontSize = (value: string) => /^(9|10|11|12|13|14|16|18|20|24|28|32|40)$/.test(value);
 
 // Matches custom text color classes: text-primary, text-on-color, text-secondary, etc.
-const CUSTOM_TEXT_COLORS = [
+const CUSTOM_TEXT_COLORS = new Set([
   "primary",
   "secondary",
   "tertiary",
@@ -40,8 +40,8 @@ const CUSTOM_TEXT_COLORS = [
   "danger",
   "danger-primary",
   "danger-secondary",
-];
-const isCustomTextColor = (value: string) => CUSTOM_TEXT_COLORS.includes(value);
+]);
+const isCustomTextColor = (value: string) => CUSTOM_TEXT_COLORS.has(value);
 
 const twMerge = extendTailwindMerge<"custom-typography" | "custom-text-color">({
   override: {
diff --git a/packages/propel/src/utils/index.ts b/packages/blocks/src/utils/index.ts
similarity index 100%
rename from packages/propel/src/utils/index.ts
rename to packages/blocks/src/utils/index.ts
diff --git a/packages/propel/src/utils/placement.ts b/packages/blocks/src/utils/placement.ts
similarity index 100%
rename from packages/propel/src/utils/placement.ts
rename to packages/blocks/src/utils/placement.ts
diff --git a/packages/propel/tsconfig.json b/packages/blocks/tsconfig.json
similarity index 100%
rename from packages/propel/tsconfig.json
rename to packages/blocks/tsconfig.json
diff --git a/packages/ui/tsdown.config.ts b/packages/blocks/tsdown.config.ts
similarity index 70%
rename from packages/ui/tsdown.config.ts
rename to packages/blocks/tsdown.config.ts
index 92959eaf716..0964ad185e5 100644
--- a/packages/ui/tsdown.config.ts
+++ b/packages/blocks/tsdown.config.ts
@@ -1,9 +1,8 @@
 import { defineConfig } from "tsdown";
 
 export default defineConfig({
-  entry: ["src/index.ts"],
+  entry: ["src/*/index.ts", "src/charts/*/index.ts"],
   format: ["esm"],
   dts: true,
   platform: "neutral",
-  exports: true,
 });
diff --git a/packages/codemods/tests/remove-directives.spec.ts b/packages/codemods/tests/remove-directives.spec.ts
index 231236ac483..f159b3aa3e9 100644
--- a/packages/codemods/tests/remove-directives.spec.ts
+++ b/packages/codemods/tests/remove-directives.spec.ts
@@ -195,7 +195,7 @@ describe("remove-directives", () => {
       import type { FC } from "react";
       import { useState } from "react";
       // plane imports
-      import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+      import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 
       export function MyComponent() {
         return <div>Hello</div>;
@@ -208,7 +208,7 @@ describe("remove-directives", () => {
       "import type { FC } from "react";
             import { useState } from "react";
             // plane imports
-            import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+            import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
 
             export function MyComponent() {
               return <div>Hello</div>;
@@ -248,7 +248,7 @@ describe("remove-directives", () => {
       import type { FC } from "react";
       import { useState } from "react";
       // plane imports
-      import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+      import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
       // hooks
       import useKeypress from "@/hooks/use-keypress";
       // local imports
@@ -273,7 +273,7 @@ describe("remove-directives", () => {
       "import type { FC } from "react";
             import { useState } from "react";
             // plane imports
-            import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+            import { EModalPosition, EModalWidth, ModalCore } from "@plane/blocks/modals";
             // hooks
             import useKeypress from "@/hooks/use-keypress";
             // local imports
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 8f71154da72..b32326c905c 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -38,11 +38,10 @@
     "@headlessui/react": "catalog:",
     "@hocuspocus/provider": "catalog:",
     "@makeplane/propel": "catalog:",
+    "@plane/blocks": "workspace:*",
     "@plane/constants": "workspace:*",
     "@plane/hooks": "workspace:*",
-    "@plane/propel": "workspace:*",
     "@plane/types": "workspace:*",
-    "@plane/ui": "workspace:*",
     "@plane/utils": "workspace:*",
     "@tiptap/core": "catalog:",
     "@tiptap/extension-blockquote": "catalog:",
diff --git a/packages/editor/src/components/editors/document/loader.tsx b/packages/editor/src/components/editors/document/loader.tsx
index c4f50f8a46f..3228f4ac9de 100644
--- a/packages/editor/src/components/editors/document/loader.tsx
+++ b/packages/editor/src/components/editors/document/loader.tsx
@@ -5,7 +5,7 @@
  */
 
 // plane imports
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 import { cn } from "@plane/utils";
 
 type Props = {
diff --git a/packages/editor/src/components/menus/block-menu.tsx b/packages/editor/src/components/menus/block-menu.tsx
index d50feae2b28..af9df68e454 100644
--- a/packages/editor/src/components/menus/block-menu.tsx
+++ b/packages/editor/src/components/menus/block-menu.tsx
@@ -18,7 +18,7 @@ import type { Editor } from "@tiptap/react";
 import type { LucideIcon } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { CopyOutline, DeleteOutline } from "@makeplane/propel/icons";
-import type { ISvgIcons } from "@plane/propel/icons";
+import type { ISvgIcons } from "@plane/blocks/icons";
 import { cn } from "@plane/utils";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
diff --git a/packages/editor/src/constants/common.ts b/packages/editor/src/constants/common.ts
index a202ab5624e..83bed8ef4ce 100644
--- a/packages/editor/src/constants/common.ts
+++ b/packages/editor/src/constants/common.ts
@@ -28,7 +28,7 @@ import {
   ToDoOutline,
   UnderlineOutline,
 } from "@makeplane/propel/icons";
-import { MonospaceIcon, SansSerifIcon, SerifIcon } from "@plane/propel/icons";
+import { MonospaceIcon, SansSerifIcon, SerifIcon } from "@plane/blocks/icons";
 import type { TCommandExtraProps, TEditorCommands, TEditorFontStyle } from "@/types";
 
 export type TEditorTypes = "lite" | "document" | "sticky";
diff --git a/packages/editor/src/extensions/callout/extension-config.ts b/packages/editor/src/extensions/callout/extension-config.ts
index dd5ab7834be..941732c16aa 100644
--- a/packages/editor/src/extensions/callout/extension-config.ts
+++ b/packages/editor/src/extensions/callout/extension-config.ts
@@ -29,18 +29,15 @@ export const CustomCalloutExtensionConfig: CustomCalloutExtensionType = Node.cre
   content: "block+",
 
   addAttributes() {
-    const attributes = {
-      // Reduce instead of map to accumulate the attributes directly into an object
-      ...Object.values(ECalloutAttributeNames).reduce(
-        (acc, value) => {
-          acc[value] = {
-            default: DEFAULT_CALLOUT_BLOCK_ATTRIBUTES[value],
-          };
-          return acc;
-        },
-        {} as Record<ECalloutAttributeNames, { default: TCalloutBlockAttributes[ECalloutAttributeNames] }>
-      ),
-    };
+    const attributes = Object.values(ECalloutAttributeNames).reduce(
+      (acc, value) => {
+        acc[value] = {
+          default: DEFAULT_CALLOUT_BLOCK_ATTRIBUTES[value],
+        };
+        return acc;
+      },
+      {} as Record<ECalloutAttributeNames, { default: TCalloutBlockAttributes[ECalloutAttributeNames] }>
+    );
 
     return attributes;
   },
diff --git a/packages/editor/src/extensions/callout/logo-selector.tsx b/packages/editor/src/extensions/callout/logo-selector.tsx
index a12c1373f98..7db64834051 100644
--- a/packages/editor/src/extensions/callout/logo-selector.tsx
+++ b/packages/editor/src/extensions/callout/logo-selector.tsx
@@ -5,7 +5,7 @@
  */
 
 // plane imports
-import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
+import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/blocks/emoji-icon-picker";
 import type { TLogoProps } from "@plane/types";
 import { cn } from "@plane/utils";
 // types
diff --git a/packages/editor/src/extensions/code/code-block-node-view.tsx b/packages/editor/src/extensions/code/code-block-node-view.tsx
index 4a1acf3949c..e576b1829a6 100644
--- a/packages/editor/src/extensions/code/code-block-node-view.tsx
+++ b/packages/editor/src/extensions/code/code-block-node-view.tsx
@@ -11,7 +11,7 @@ import { common, createLowlight } from "lowlight";
 import { CopyOutline, TickOutline } from "@makeplane/propel/icons";
 import { useState } from "react";
 // ui
-import { Tooltip } from "@plane/propel/tooltip";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
 // plane utils
 import { cn } from "@plane/utils";
 // types
@@ -45,7 +45,7 @@ export function CodeBlockComponent({ node }: Props) {
 
   return (
     <NodeViewWrapper key={attrs[ECodeBlockAttributeNames.ID]} className="code-block group/code relative">
-      <Tooltip tooltipContent="Copy code">
+      <Tooltip label="Copy code">
         <button
           type="button"
           className={cn(
diff --git a/packages/editor/src/extensions/code/lowlight-plugin.ts b/packages/editor/src/extensions/code/lowlight-plugin.ts
index 6471f05989b..f9e25cf0c0c 100644
--- a/packages/editor/src/extensions/code/lowlight-plugin.ts
+++ b/packages/editor/src/extensions/code/lowlight-plugin.ts
@@ -13,20 +13,18 @@ import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import highlight from "highlight.js/lib/core";
 
 function parseNodes(nodes: any[], className: string[] = []): { text: string; classes: string[] }[] {
-  return nodes
-    .map((node) => {
-      const classes = [...className, ...(node.properties ? node.properties.className : [])];
+  return nodes.flatMap((node) => {
+    const classes = [...className, ...(node.properties ? node.properties.className : [])];
 
-      if (node.children) {
-        return parseNodes(node.children, classes);
-      }
+    if (node.children) {
+      return parseNodes(node.children, classes);
+    }
 
-      return {
-        text: node.value,
-        classes,
-      };
-    })
-    .flat();
+    return {
+      text: node.value,
+      classes,
+    };
+  });
 }
 
 function getHighlightNodes(result: any) {
diff --git a/packages/editor/src/extensions/custom-image/components/toolbar/alignment.tsx b/packages/editor/src/extensions/custom-image/components/toolbar/alignment.tsx
index 2b8602b4abb..f0f16cddacc 100644
--- a/packages/editor/src/extensions/custom-image/components/toolbar/alignment.tsx
+++ b/packages/editor/src/extensions/custom-image/components/toolbar/alignment.tsx
@@ -8,7 +8,7 @@ import { useEffect, useRef, useState } from "react";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
 import { ChevronDownOutline } from "@makeplane/propel/icons";
-import { Tooltip } from "@plane/propel/tooltip";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
 // local imports
 import type { TCustomImageAlignment } from "../../types";
 import { IMAGE_ALIGNMENT_OPTIONS } from "../../utils";
@@ -37,7 +37,7 @@ export function ImageAlignmentAction(props: Props) {
 
   return (
     <div ref={dropdownRef} className="relative h-full">
-      <Tooltip disabled={isTouchDevice} tooltipContent="Align">
+      <Tooltip disabled={isTouchDevice} label="Align">
         <button
           type="button"
           className="flex h-full items-center gap-1 text-white/60 transition-colors hover:text-white"
@@ -50,7 +50,7 @@ export function ImageAlignmentAction(props: Props) {
       {isDropdownOpen && (
         <div className="absolute top-full left-1/2 mt-0.5 flex h-7 -translate-x-1/2 items-center gap-2 rounded-sm bg-black/80 px-2">
           {IMAGE_ALIGNMENT_OPTIONS.map((option) => (
-            <Tooltip disabled={isTouchDevice} key={option.value} tooltipContent={option.label}>
+            <Tooltip disabled={isTouchDevice} key={option.value} label={option.label}>
               <button
                 type="button"
                 className="grid h-full flex-shrink-0 place-items-center text-white/60 transition-colors hover:text-white"
diff --git a/packages/editor/src/extensions/custom-image/components/toolbar/download.tsx b/packages/editor/src/extensions/custom-image/components/toolbar/download.tsx
index 9230989ee3e..5f41003c572 100644
--- a/packages/editor/src/extensions/custom-image/components/toolbar/download.tsx
+++ b/packages/editor/src/extensions/custom-image/components/toolbar/download.tsx
@@ -6,7 +6,7 @@
 
 import { DownloadOutline } from "@makeplane/propel/icons";
 // plane imports
-import { Tooltip } from "@plane/propel/tooltip";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
 
 type Props = {
   src: string;
@@ -16,7 +16,7 @@ export function ImageDownloadAction(props: Props) {
   const { src } = props;
 
   return (
-    <Tooltip tooltipContent="Download">
+    <Tooltip label="Download">
       <button
         type="button"
         onClick={() => window.open(src, "_blank")}
diff --git a/packages/editor/src/extensions/custom-image/components/toolbar/full-screen/root.tsx b/packages/editor/src/extensions/custom-image/components/toolbar/full-screen/root.tsx
index 5baa86b4ccb..503a98a096f 100644
--- a/packages/editor/src/extensions/custom-image/components/toolbar/full-screen/root.tsx
+++ b/packages/editor/src/extensions/custom-image/components/toolbar/full-screen/root.tsx
@@ -7,7 +7,7 @@
 import { FullScreenOutline } from "@makeplane/propel/icons";
 import { useEffect, useState } from "react";
 // plane imports
-import { Tooltip } from "@plane/propel/tooltip";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
 // local imports
 import { ImageFullScreenModal } from "./modal";
 
@@ -45,7 +45,7 @@ export function ImageFullScreenActionRoot(props: Props) {
         width={width}
         toggleFullScreenMode={setIsFullScreenEnabled}
       />
-      <Tooltip tooltipContent="View in full screen" disabled={isTouchDevice}>
+      <Tooltip label="View in full screen" disabled={isTouchDevice}>
         <button
           type="button"
           onClick={(e) => {
diff --git a/packages/editor/src/extensions/emoji/emoji.ts b/packages/editor/src/extensions/emoji/emoji.ts
index 63d0ee9d389..bcfe0fe9f62 100644
--- a/packages/editor/src/extensions/emoji/emoji.ts
+++ b/packages/editor/src/extensions/emoji/emoji.ts
@@ -282,10 +282,7 @@ export const Emoji = Node.create<EmojiOptions, EmojiStorage>({
 
     if (this.options.enableEmoticons) {
       // get the list of supported emoticons
-      const emoticons = this.options.emojis
-        .map((item) => item.emoticons)
-        .flat()
-        .filter((item) => item) as string[];
+      const emoticons = this.options.emojis.flatMap((item) => item.emoticons).filter((item) => item) as string[];
 
       const emoticonRegex = new RegExp(`(?:^|\\s)(${emoticons.map((item) => escapeForRegEx(item)).join("|")}) $`);
 
diff --git a/packages/editor/src/extensions/table/plugins/drag-handles/column/dropdown.tsx b/packages/editor/src/extensions/table/plugins/drag-handles/column/dropdown.tsx
index 2dc43bc840c..f5e69f92d4c 100644
--- a/packages/editor/src/extensions/table/plugins/drag-handles/column/dropdown.tsx
+++ b/packages/editor/src/extensions/table/plugins/drag-handles/column/dropdown.tsx
@@ -16,7 +16,7 @@ import {
 } from "@makeplane/propel/icons";
 import type { LucideIcon } from "lucide-react";
 // extensions
-import type { ISvgIcons } from "@plane/propel/icons";
+import type { ISvgIcons } from "@plane/blocks/icons";
 import { findTable, getSelectedColumns } from "@/extensions/table/table/utilities/helpers";
 // local imports
 import { duplicateColumns } from "../actions";
diff --git a/packages/editor/src/extensions/table/plugins/drag-handles/row/dropdown.tsx b/packages/editor/src/extensions/table/plugins/drag-handles/row/dropdown.tsx
index 1ad0b762034..4d23e5d6663 100644
--- a/packages/editor/src/extensions/table/plugins/drag-handles/row/dropdown.tsx
+++ b/packages/editor/src/extensions/table/plugins/drag-handles/row/dropdown.tsx
@@ -16,7 +16,7 @@ import {
 } from "@makeplane/propel/icons";
 import type { LucideIcon } from "lucide-react";
 // extensions
-import type { ISvgIcons } from "@plane/propel/icons";
+import type { ISvgIcons } from "@plane/blocks/icons";
 import { findTable, getSelectedRows } from "@/extensions/table/table/utilities/helpers";
 // local imports
 import { duplicateRows } from "../actions";
diff --git a/packages/propel/.prettierignore b/packages/propel/.prettierignore
deleted file mode 100644
index b0b8bc622a7..00000000000
--- a/packages/propel/.prettierignore
+++ /dev/null
@@ -1,10 +0,0 @@
-.next/
-.react-router/
-.turbo/
-.vite/
-build/
-dist/
-node_modules/
-out/
-pnpm-lock.yaml
-storybook-static/
diff --git a/packages/propel/.storybook/main.ts b/packages/propel/.storybook/main.ts
deleted file mode 100644
index 79a396c35a4..00000000000
--- a/packages/propel/.storybook/main.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { StorybookConfig } from "@storybook/react-vite";
-
-import { createRequire } from "module";
-import { join, dirname } from "path";
-
-const require = createRequire(import.meta.url);
-
-/*
- * This function is used to resolve the absolute path of a package.
- * It is needed in projects that use Yarn PnP or are set up within a monorepo.
- */
-function getAbsolutePath(value: string) {
-  return dirname(require.resolve(join(value, "package.json")));
-}
-const config: StorybookConfig = {
-  stories: ["../src/**/*.stories.@(ts|tsx)"],
-  addons: [getAbsolutePath("@storybook/addon-designs"), getAbsolutePath("@storybook/addon-docs")],
-  framework: {
-    name: getAbsolutePath("@storybook/react-vite"),
-    options: {},
-  },
-};
-export default config;
diff --git a/packages/propel/.storybook/manager.ts b/packages/propel/.storybook/manager.ts
deleted file mode 100644
index 014936f59db..00000000000
--- a/packages/propel/.storybook/manager.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { addons } from "storybook/manager-api";
-import { create } from "storybook/theming";
-
-const planeTheme = create({
-  base: "dark",
-  brandTitle: "Plane UI",
-  brandUrl: "https://plane.so",
-  brandImage: "plane-lockup-light.svg",
-  brandTarget: "_self",
-});
-
-addons.setConfig({
-  theme: planeTheme,
-});
diff --git a/packages/propel/.storybook/preview.ts b/packages/propel/.storybook/preview.ts
deleted file mode 100644
index bf9957c54a4..00000000000
--- a/packages/propel/.storybook/preview.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Preview } from "@storybook/react-vite";
-import "./tailwind.css";
-
-const parameters: Preview["parameters"] = {
-  controls: {
-    matchers: {},
-  },
-};
-
-const preview: Preview = {
-  parameters,
-  tags: ["autodocs"],
-};
-export default preview;
diff --git a/packages/propel/.storybook/tailwind.css b/packages/propel/.storybook/tailwind.css
deleted file mode 100644
index aca4ed08ea0..00000000000
--- a/packages/propel/.storybook/tailwind.css
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "@plane/tailwind-config/index.css";
-@import "../src/styles/react-day-picker.css";
diff --git a/packages/propel/postcss.config.js b/packages/propel/postcss.config.js
deleted file mode 100644
index 3ad28f15f35..00000000000
--- a/packages/propel/postcss.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import postcssConfig from "@plane/tailwind-config/postcss.config.js";
-
-export default postcssConfig;
diff --git a/packages/propel/public/plane-lockup-light.svg b/packages/propel/public/plane-lockup-light.svg
deleted file mode 100644
index d319a79eb6c..00000000000
--- a/packages/propel/public/plane-lockup-light.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="253" height="53" viewBox="0 0 253 53" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
-  <g clip-path="url(#clip0_27_76)">
-    <path d="M217.077 51.4468H210.972L210.98 31.4317C210.717 27.7545 208.786 25.1545 205.03 24.6199C198.587 23.7006 194.663 27.8828 194.21 34.0258L194.218 51.4468H188.041V20.2543H192.158L194.255 26.8846H194.6C195.825 22.8701 198.684 20.4831 202.898 19.5757C210.126 18.0231 216.643 22.2724 217.079 29.8239V51.4468H217.077Z" fill="#ffffff"/>
-    <path d="M163.812 19.7315C158.03 20.9566 153.67 25.2354 153.222 31.264H159.395C159.669 28.3484 161.561 25.9969 164.267 24.9553C167.418 23.7401 172.805 23.8881 175.178 26.6005C176.774 28.4253 177.305 31.5816 175.212 33.2249C172.675 35.2173 166.39 34.6117 163.214 34.7636C158.631 34.9826 154.141 36.8429 153.183 41.7727C151.1 52.5042 165.035 54.9267 171.902 49.8963C174.095 48.2885 175.672 45.8443 176.261 43.1792H176.577L178.788 51.4508H182.61V29.964C182.517 20.3214 171.462 18.108 163.81 19.7315H163.812ZM174.847 41.2637C172.484 45.649 166.958 49.0441 162.218 47.3318C158.44 45.9686 158.268 40.4095 161.973 38.9181C165.613 37.4524 173.732 38.9694 176.368 34.949C176.275 37.0855 175.906 39.2989 174.849 41.2637H174.847Z" fill="#ffffff"/>
-    <path d="M113.082 35.5652V51.4475H106.611V9.00063H124.863C125.007 8.99274 125.141 9.06178 125.283 9.06967C133.732 9.53129 139.297 13.601 139.104 22.6025C138.928 30.7991 132.663 35.2199 124.934 35.5671H113.082V35.5652ZM113.082 14.4828V30.2941H124.088C129.595 29.8956 133.071 27.1022 132.491 21.265C131.967 15.9781 127.802 14.6544 123.107 14.4788C119.795 14.3546 116.402 14.5795 113.082 14.4808V14.4828Z" fill="#ffffff"/>
-    <path d="M148.647 9H142.529V51.4468H148.647V9Z" fill="#ffffff"/>
-    <path d="M245.872 42.418C244.911 44.4953 243.138 46.1603 240.934 46.8981C238.368 47.7562 234.479 47.5431 232.083 46.2569C228.67 44.4263 227.145 40.6485 227.137 36.8984H251.891C252.194 33.6908 251.902 30.3648 250.496 27.4333C247.083 20.3177 238.859 17.7236 231.513 19.9429C222.868 22.5568 220.165 31.4162 221.462 39.6543C222.86 48.5611 230.197 52.976 238.958 52.3585C244.884 51.9423 250.271 48.1192 251.788 42.4161H245.874L245.872 42.418ZM227.208 32.4381C227.778 26.2457 233.347 23.2018 239.163 24.4269C243.361 25.3107 245.75 28.9523 245.842 33.1068H227.145C227.145 33.1068 227.19 32.6255 227.208 32.4401V32.4381Z" fill="#ffffff"/>
-    <path d="M44.3223 2.9264C44.3223 0.754665 46.6083 -0.65811 48.5508 0.313121L80.4551 16.2653C82.9294 17.5024 84.4922 20.0321 84.4922 22.7985V48.2487C84.4922 50.4204 82.2071 51.833 80.2646 50.8619L62.3281 41.8932V22.7975C62.3281 20.0311 60.7653 17.5015 58.291 16.2643L44.3223 9.27992V2.9264ZM0 2.92543C8.01645e-05 0.753753 2.28609 -0.659069 4.22852 0.312144L22.1582 9.27699V28.3766C22.1582 31.1428 23.7213 33.6716 26.1953 34.9088L40.1699 41.8952V48.2487C40.1697 50.4202 37.8847 51.832 35.9424 50.861L4.03711 34.9088C1.56305 33.6716 0 31.1428 0 28.3766V2.92543ZM22.1582 2.92543C22.1583 0.753753 24.4443 -0.659069 26.3867 0.312144L44.3223 9.27992V28.3776C44.3223 31.1439 45.8861 33.6727 48.3604 34.9098L62.3281 41.8932V48.2487C62.3279 50.4202 60.0429 51.832 58.1006 50.861L40.1699 41.8952V22.7975C40.1699 20.0311 38.6071 17.5015 36.1328 16.2643L22.1582 9.27699V2.92543Z" fill="#ffffff"/>
-  </g>
-  <defs>
-    <clipPath id="clip0_27_76">
-      <rect width="252" height="53" fill="white"/>
-    </clipPath>
-  </defs>
-</svg>
diff --git a/packages/propel/src/accordion/accordion.stories.tsx b/packages/propel/src/accordion/accordion.stories.tsx
deleted file mode 100644
index 4f1dbd1d263..00000000000
--- a/packages/propel/src/accordion/accordion.stories.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Accordion } from "./accordion";
-
-const meta = {
-  title: "Components/Accordion",
-  component: Accordion.Root,
-  parameters: {
-    layout: "centered",
-    controls: { disable: true },
-  },
-  tags: ["autodocs"],
-  subcomponents: {
-    Item: Accordion.Item,
-    Trigger: Accordion.Trigger,
-    Content: Accordion.Content,
-  },
-  args: {
-    children: null,
-  },
-} satisfies Meta<typeof Accordion.Root>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render() {
-    return (
-      <Accordion.Root className="w-96">
-        <Accordion.Item value="item-1">
-          <Accordion.Trigger>What is Plane?</Accordion.Trigger>
-          <Accordion.Content>
-            Plane is an open-source project management tool designed for developers and teams to plan, track, and manage
-            their work efficiently.
-          </Accordion.Content>
-        </Accordion.Item>
-        <Accordion.Item value="item-2">
-          <Accordion.Trigger>How do I get started?</Accordion.Trigger>
-          <Accordion.Content>
-            You can get started by signing up for an account, creating your first workspace, and inviting your team
-            members to collaborate.
-          </Accordion.Content>
-        </Accordion.Item>
-        <Accordion.Item value="item-3">
-          <Accordion.Trigger>Is it free to use?</Accordion.Trigger>
-          <Accordion.Content>
-            Plane offers both free and paid plans. The free plan includes essential features for small teams, while paid
-            plans unlock advanced functionality.
-          </Accordion.Content>
-        </Accordion.Item>
-      </Accordion.Root>
-    );
-  },
-};
-
-export const SingleOpen: Story = {
-  render() {
-    return (
-      <Accordion.Root defaultValue={["item-1"]} className="w-96">
-        <Accordion.Item value="item-1">
-          <Accordion.Trigger>Section 1</Accordion.Trigger>
-          <Accordion.Content>Content for section 1. Only one section can be open at a time.</Accordion.Content>
-        </Accordion.Item>
-        <Accordion.Item value="item-2">
-          <Accordion.Trigger>Section 2</Accordion.Trigger>
-          <Accordion.Content>Content for section 2.</Accordion.Content>
-        </Accordion.Item>
-        <Accordion.Item value="item-3">
-          <Accordion.Trigger>Section 3</Accordion.Trigger>
-          <Accordion.Content>Content for section 3.</Accordion.Content>
-        </Accordion.Item>
-      </Accordion.Root>
-    );
-  },
-};
-
-export const AllowMultiple: Story = {
-  render() {
-    return (
-      <Accordion.Root allowMultiple defaultValue={["item-1", "item-2"]} className="w-96">
-        <Accordion.Item value="item-1">
-          <Accordion.Trigger>First Section</Accordion.Trigger>
-          <Accordion.Content>Multiple sections can be open at the same time.</Accordion.Content>
-        </Accordion.Item>
-        <Accordion.Item value="item-2">
-          <Accordion.Trigger>Second Section</Accordion.Trigger>
-          <Accordion.Content>This section is also open by default.</Accordion.Content>
-        </Accordion.Item>
-        <Accordion.Item value="item-3">
-          <Accordion.Trigger>Third Section</Accordion.Trigger>
-          <Accordion.Content>You can open this section while keeping the others open.</Accordion.Content>
-        </Accordion.Item>
-      </Accordion.Root>
-    );
-  },
-};
-
-export const WithDisabledItem: Story = {
-  render() {
-    return (
-      <Accordion.Root className="w-96">
-        <Accordion.Item value="item-1">
-          <Accordion.Trigger>Enabled Section</Accordion.Trigger>
-          <Accordion.Content>This section can be toggled.</Accordion.Content>
-        </Accordion.Item>
-        <Accordion.Item value="item-2" disabled>
-          <Accordion.Trigger>Disabled Section</Accordion.Trigger>
-          <Accordion.Content>This content cannot be accessed.</Accordion.Content>
-        </Accordion.Item>
-        <Accordion.Item value="item-3">
-          <Accordion.Trigger>Another Enabled Section</Accordion.Trigger>
-          <Accordion.Content>This section can also be toggled.</Accordion.Content>
-        </Accordion.Item>
-      </Accordion.Root>
-    );
-  },
-};
-
-export const CustomIcon: Story = {
-  render() {
-    return (
-      <Accordion.Root className="w-96">
-        <Accordion.Item value="item-1">
-          <Accordion.Trigger
-            icon={
-              <svg
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                className="transition-transform group-data-[panel-open]:rotate-180"
-              >
-                <path d="m6 9 6 6 6-6" />
-              </svg>
-            }
-          >
-            Custom Chevron Icon
-          </Accordion.Trigger>
-          <Accordion.Content>
-            This accordion uses a custom chevron icon instead of the default plus icon.
-          </Accordion.Content>
-        </Accordion.Item>
-        <Accordion.Item value="item-2">
-          <Accordion.Trigger
-            icon={
-              <svg
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                className="transition-transform group-data-[panel-open]:rotate-180"
-              >
-                <path d="m6 9 6 6 6-6" />
-              </svg>
-            }
-          >
-            Another Section
-          </Accordion.Trigger>
-          <Accordion.Content>All items in this accordion use the custom icon.</Accordion.Content>
-        </Accordion.Item>
-      </Accordion.Root>
-    );
-  },
-};
-
-export const AsChildTrigger: Story = {
-  render() {
-    return (
-      <Accordion.Root className="w-96">
-        <Accordion.Item value="item-1">
-          <Accordion.Trigger asChild>
-            <button className="bg-blue-500 hover:bg-blue-600 w-full rounded-md px-4 py-2 text-left text-on-color">
-              Custom Button Trigger
-            </button>
-          </Accordion.Trigger>
-          <Accordion.Content>
-            When using asChild, you can completely customize the trigger element without the default icon wrapper.
-          </Accordion.Content>
-        </Accordion.Item>
-        <Accordion.Item value="item-2">
-          <Accordion.Trigger asChild>
-            <button className="bg-green-500 hover:bg-green-600 w-full rounded-md px-4 py-2 text-left text-on-color">
-              Another Custom Trigger
-            </button>
-          </Accordion.Trigger>
-          <Accordion.Content>This gives you full control over the trigger styling and behavior.</Accordion.Content>
-        </Accordion.Item>
-      </Accordion.Root>
-    );
-  },
-};
diff --git a/packages/propel/src/accordion/accordion.tsx b/packages/propel/src/accordion/accordion.tsx
deleted file mode 100644
index ac5071cf6d9..00000000000
--- a/packages/propel/src/accordion/accordion.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-import { Accordion as BaseAccordion } from "@base-ui-components/react";
-
-import { AddOutline } from "@makeplane/propel/icons";
-
-export interface AccordionRootProps {
-  defaultValue?: string[];
-  allowMultiple?: boolean;
-  className?: string;
-  children: React.ReactNode;
-}
-
-export interface AccordionItemProps {
-  value: string;
-  disabled?: boolean;
-  className?: string;
-  children: React.ReactNode;
-}
-
-export interface AccordionTriggerProps {
-  className?: string;
-  icon?: React.ReactNode;
-  children: React.ReactNode;
-  asChild?: boolean;
-  iconClassName?: string;
-}
-
-export interface AccordionContentProps {
-  className?: string;
-  contentWrapperClassName?: string;
-  children: React.ReactNode;
-}
-
-function AccordionRoot({ defaultValue = [], allowMultiple = false, className = "", children }: AccordionRootProps) {
-  return (
-    <BaseAccordion.Root defaultValue={defaultValue} openMultiple={allowMultiple} className={`text-14 ${className}`}>
-      {children}
-    </BaseAccordion.Root>
-  );
-}
-
-function AccordionItem({ value, disabled, className = "", children }: AccordionItemProps) {
-  return (
-    <BaseAccordion.Item value={value} disabled={disabled} className={`relative ${className}`}>
-      {children}
-    </BaseAccordion.Item>
-  );
-}
-
-function AccordionTrigger({
-  className = "",
-  icon = <AddOutline aria-hidden="true" className="transition-all ease-out group-data-[panel-open]:rotate-45" />,
-  iconClassName = "",
-  children,
-  asChild = false,
-}: AccordionTriggerProps) {
-  return (
-    <BaseAccordion.Header>
-      {asChild ? (
-        <BaseAccordion.Trigger className={`w-full py-2 ${className}`}>{children}</BaseAccordion.Trigger>
-      ) : (
-        <BaseAccordion.Trigger className={`flex w-full items-center justify-between gap-2 py-2 ${className}`}>
-          {children}
-          <span aria-hidden="true" className={`flex-shrink-0 ${iconClassName}`}>
-            {icon}
-          </span>
-        </BaseAccordion.Trigger>
-      )}
-    </BaseAccordion.Header>
-  );
-}
-
-function AccordionContent({ className = "", contentWrapperClassName = "", children }: AccordionContentProps) {
-  return (
-    <BaseAccordion.Panel
-      className={`h-[var(--accordion-panel-height)] overflow-hidden transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0 ${className}`}
-    >
-      <div className={`py-2 ${contentWrapperClassName}`}>{children}</div>
-    </BaseAccordion.Panel>
-  );
-}
-
-export const Accordion = {
-  Root: AccordionRoot,
-  Item: AccordionItem,
-  Trigger: AccordionTrigger,
-  Content: AccordionContent,
-};
diff --git a/packages/propel/src/accordion/index.ts b/packages/propel/src/accordion/index.ts
deleted file mode 100644
index d0ab5a8dbf1..00000000000
--- a/packages/propel/src/accordion/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./accordion";
diff --git a/packages/propel/src/animated-counter/animated-counter.stories.tsx b/packages/propel/src/animated-counter/animated-counter.stories.tsx
deleted file mode 100644
index 5a1a64fa68d..00000000000
--- a/packages/propel/src/animated-counter/animated-counter.stories.tsx
+++ /dev/null
@@ -1,334 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { useState, useEffect } from "react";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { AnimatedCounter } from "./animated-counter";
-
-const meta = {
-  title: "Components/AnimatedCounter",
-  component: AnimatedCounter,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: {
-    size: "md",
-    count: 0,
-  },
-} satisfies Meta<typeof AnimatedCounter>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render(args) {
-    const [count, setCount] = useState(0);
-
-    return (
-      <div className="space-y-6 p-4">
-        <div className="flex items-center justify-center gap-6">
-          <button
-            className="bg-red-500 hover:bg-red-600 shadow-md rounded-lg px-4 py-2 font-medium text-on-color transition-colors focus:ring-2 focus:ring-danger-strong focus:ring-offset-2 focus:outline-none"
-            onClick={() => setCount((prev) => Math.max(0, prev - 1))}
-          >
-            -1
-          </button>
-          <div className="bg-gray-50 border-gray-200 flex h-12 min-w-[60px] items-center justify-center rounded-lg border">
-            <AnimatedCounter {...args} count={count} />
-          </div>
-          <button
-            className="bg-green-500 hover:bg-green-600 shadow-md rounded-lg px-4 py-2 font-medium text-on-color transition-colors focus:ring-2 focus:ring-success-strong focus:ring-offset-2 focus:outline-none"
-            onClick={() => setCount((prev) => prev + 1)}
-          >
-            +1
-          </button>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const Sizes: Story = {
-  render() {
-    const [count, setCount] = useState(42);
-
-    return (
-      <div className="space-y-6 p-4">
-        <div className="flex items-center gap-4">
-          <button
-            className="rounded-sm bg-layer-1 px-3 py-1 text-13 hover:bg-surface-2"
-            onClick={() => setCount((prev) => Math.max(0, prev - 1))}
-          >
-            -1
-          </button>
-          <button
-            className="rounded-sm bg-layer-1 px-3 py-1 text-13 hover:bg-surface-2"
-            onClick={() => setCount((prev) => prev + 1)}
-          >
-            +1
-          </button>
-        </div>
-        <div className="flex flex-col gap-4">
-          <div className="flex items-center gap-4">
-            <span className="w-20 text-13 text-placeholder">Small:</span>
-            <div className="flex h-8 min-w-[40px] items-center justify-center rounded-sm border border-subtle bg-layer-1">
-              <AnimatedCounter count={count} size="sm" />
-            </div>
-          </div>
-          <div className="flex items-center gap-4">
-            <span className="w-20 text-13 text-placeholder">Medium:</span>
-            <div className="flex h-10 min-w-[50px] items-center justify-center rounded-sm border border-subtle bg-layer-1">
-              <AnimatedCounter count={count} size="md" />
-            </div>
-          </div>
-          <div className="flex items-center gap-4">
-            <span className="w-20 text-13 text-placeholder">Large:</span>
-            <div className="flex h-12 min-w-[60px] items-center justify-center rounded-sm border border-subtle bg-layer-1">
-              <AnimatedCounter count={count} size="lg" />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const LargeNumbers: Story = {
-  render() {
-    const [count, setCount] = useState(1234567);
-
-    return (
-      <div className="space-y-6 p-4">
-        <div className="flex items-center gap-4">
-          <button
-            className="bg-red-500 hover:bg-red-600 rounded-sm px-3 py-1 text-13 text-on-color"
-            onClick={() => setCount((prev) => Math.max(0, prev - 1000))}
-          >
-            -1000
-          </button>
-          <button
-            className="bg-green-500 hover:bg-green-600 rounded-sm px-3 py-1 text-13 text-on-color"
-            onClick={() => setCount((prev) => prev + 1000)}
-          >
-            +1000
-          </button>
-        </div>
-        <div className="flex h-12 min-w-[100px] items-center justify-center rounded-lg border border-subtle bg-layer-1">
-          <AnimatedCounter count={count} size="lg" />
-        </div>
-      </div>
-    );
-  },
-};
-
-export const Countdown: Story = {
-  render() {
-    const [count, setCount] = useState(10);
-    const [isRunning, setIsRunning] = useState(false);
-
-    useEffect(() => {
-      if (isRunning && count > 0) {
-        const timer = setTimeout(() => setCount((prev) => prev - 1), 1000);
-        return () => clearTimeout(timer);
-      }
-      if (count === 0) {
-        setIsRunning(false);
-      }
-    }, [count, isRunning]);
-
-    const handleStart = () => {
-      setCount(10);
-      setIsRunning(true);
-    };
-
-    return (
-      <div className="space-y-6 p-4">
-        <div className="flex flex-col items-center gap-4">
-          <div className="flex h-16 min-w-[60px] items-center justify-center rounded-lg border-2 border-subtle bg-layer-1">
-            <AnimatedCounter count={count} size="lg" className="text-20" />
-          </div>
-          <button
-            className="rounded-lg bg-accent-primary px-6 py-2 font-medium text-on-color hover:bg-accent-primary/80"
-            onClick={handleStart}
-            disabled={isRunning}
-          >
-            {isRunning ? "Counting..." : "Start Countdown"}
-          </button>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const LiveCounter: Story = {
-  render() {
-    const [count, setCount] = useState(0);
-    const [isRunning, setIsRunning] = useState(false);
-
-    useEffect(() => {
-      if (isRunning) {
-        const timer = setInterval(() => setCount((prev) => prev + 1), 500);
-        return () => clearInterval(timer);
-      }
-    }, [isRunning]);
-
-    return (
-      <div className="space-y-6 p-4">
-        <div className="flex flex-col items-center gap-4">
-          <div className="flex h-16 min-w-[80px] items-center justify-center rounded-lg border-2 border-subtle bg-layer-1">
-            <AnimatedCounter count={count} size="lg" className="text-20" />
-          </div>
-          <div className="flex gap-2">
-            <button
-              className="bg-green-500 hover:bg-green-600 rounded-sm px-4 py-2 font-medium text-on-color"
-              onClick={() => setIsRunning(true)}
-              disabled={isRunning}
-            >
-              Start
-            </button>
-            <button
-              className="bg-red-500 hover:bg-red-600 rounded-sm px-4 py-2 font-medium text-on-color"
-              onClick={() => setIsRunning(false)}
-              disabled={!isRunning}
-            >
-              Stop
-            </button>
-            <button
-              className="bg-gray-500 hover:bg-gray-600 rounded-sm px-4 py-2 font-medium text-on-color"
-              onClick={() => {
-                setIsRunning(false);
-                setCount(0);
-              }}
-            >
-              Reset
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const MultipleCounters: Story = {
-  render() {
-    const [likes, setLikes] = useState(42);
-    const [comments, setComments] = useState(15);
-    const [shares, setShares] = useState(8);
-
-    return (
-      <div className="space-y-6 p-4">
-        <div className="max-w-md rounded-lg border border-subtle p-4">
-          <div className="mb-4 flex items-center justify-between">
-            <h3 className="font-medium">Engagement Stats</h3>
-          </div>
-          <div className="flex gap-4">
-            <div className="flex flex-1 flex-col items-center gap-2">
-              <div className="text-13 text-placeholder">Likes</div>
-              <div className="flex items-center gap-2">
-                <button
-                  className="flex h-8 w-8 items-center justify-center rounded-sm bg-layer-1 hover:bg-surface-2"
-                  onClick={() => setLikes((prev) => prev + 1)}
-                >
-                  +
-                </button>
-                <div className="flex h-10 min-w-[40px] items-center justify-center rounded-sm border border-subtle bg-layer-1">
-                  <AnimatedCounter count={likes} size="md" />
-                </div>
-              </div>
-            </div>
-            <div className="flex flex-1 flex-col items-center gap-2">
-              <div className="text-13 text-placeholder">Comments</div>
-              <div className="flex items-center gap-2">
-                <button
-                  className="flex h-8 w-8 items-center justify-center rounded-sm bg-layer-1 hover:bg-surface-2"
-                  onClick={() => setComments((prev) => prev + 1)}
-                >
-                  +
-                </button>
-                <div className="flex h-10 min-w-[40px] items-center justify-center rounded-sm border border-subtle bg-layer-1">
-                  <AnimatedCounter count={comments} size="md" />
-                </div>
-              </div>
-            </div>
-            <div className="flex flex-1 flex-col items-center gap-2">
-              <div className="text-13 text-placeholder">Shares</div>
-              <div className="flex items-center gap-2">
-                <button
-                  className="flex h-8 w-8 items-center justify-center rounded-sm bg-layer-1 hover:bg-surface-2"
-                  onClick={() => setShares((prev) => prev + 1)}
-                >
-                  +
-                </button>
-                <div className="flex h-10 min-w-[40px] items-center justify-center rounded-sm border border-subtle bg-layer-1">
-                  <AnimatedCounter count={shares} size="md" />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const InBadge: Story = {
-  render() {
-    const [notifications, setNotifications] = useState(3);
-
-    return (
-      <div className="space-y-6 p-4">
-        <div className="flex flex-col items-center gap-4">
-          <div className="relative">
-            <button className="rounded-lg border border-subtle bg-layer-1 px-4 py-2">Notifications</button>
-            <div className="bg-red-500 absolute -top-2 -right-2 flex h-6 min-w-[24px] items-center justify-center rounded-full px-1.5 text-on-color">
-              <AnimatedCounter count={notifications} size="sm" className="text-11 font-medium" />
-            </div>
-          </div>
-          <button
-            className="rounded-sm bg-accent-primary px-4 py-2 text-on-color hover:bg-accent-primary/80"
-            onClick={() => setNotifications((prev) => prev + 1)}
-          >
-            Add Notification
-          </button>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const FastAnimation: Story = {
-  render() {
-    const [count, setCount] = useState(0);
-
-    const incrementFast = () => {
-      for (let i = 1; i <= 10; i++) {
-        setTimeout(() => setCount((prev) => prev + 1), i * 50);
-      }
-    };
-
-    return (
-      <div className="space-y-6 p-4">
-        <div className="flex flex-col items-center gap-4">
-          <div className="flex h-12 min-w-[60px] items-center justify-center rounded-lg border border-subtle bg-layer-1">
-            <AnimatedCounter count={count} size="lg" />
-          </div>
-          <div className="flex gap-2">
-            <button
-              className="rounded-sm bg-accent-primary px-4 py-2 text-on-color hover:bg-accent-primary/80"
-              onClick={incrementFast}
-            >
-              +10 Fast
-            </button>
-            <button className="rounded-sm bg-layer-1 px-4 py-2 hover:bg-surface-2" onClick={() => setCount(0)}>
-              Reset
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
diff --git a/packages/propel/src/avatar/avatar.stories.tsx b/packages/propel/src/avatar/avatar.stories.tsx
deleted file mode 100644
index dac386ed962..00000000000
--- a/packages/propel/src/avatar/avatar.stories.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Avatar } from "./avatar";
-
-const meta = {
-  title: "Components/Avatar",
-  component: Avatar,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: {
-    name: "John Doe",
-    src: "https://i.pravatar.cc/150?img=1",
-  },
-} satisfies Meta<typeof Avatar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const WithName: Story = {
-  args: {
-    name: "Jane Smith",
-    src: "https://i.pravatar.cc/150?img=5",
-  },
-};
-
-export const Fallback: Story = {
-  args: {
-    name: "Alice Johnson",
-    src: "invalid-url",
-  },
-};
-
-export const FallbackWithCustomColor: Story = {
-  args: {
-    name: "Bob Wilson",
-    src: "invalid-url",
-    fallbackBackgroundColor: "#3b82f6",
-    fallbackTextColor: "#ffffff",
-  },
-};
-
-export const FallbackWithCustomText: Story = {
-  args: {
-    fallbackText: "AB",
-    src: "invalid-url",
-    fallbackBackgroundColor: "#10b981",
-    fallbackTextColor: "#ffffff",
-  },
-};
-
-export const Small: Story = {
-  args: {
-    name: "Small Avatar",
-    src: "https://i.pravatar.cc/150?img=2",
-    size: "sm",
-  },
-};
-
-export const Medium: Story = {
-  args: {
-    name: "Medium Avatar",
-    src: "https://i.pravatar.cc/150?img=3",
-    size: "md",
-  },
-};
-
-export const Base: Story = {
-  args: {
-    name: "Base Avatar",
-    src: "https://i.pravatar.cc/150?img=4",
-    size: "base",
-  },
-};
-
-export const Large: Story = {
-  args: {
-    name: "Large Avatar",
-    src: "https://i.pravatar.cc/150?img=6",
-    size: "lg",
-  },
-};
-
-export const CircleShape: Story = {
-  args: {
-    name: "Circle Avatar",
-    src: "https://i.pravatar.cc/150?img=7",
-    shape: "circle",
-  },
-};
-
-export const SquareShape: Story = {
-  args: {
-    name: "Square Avatar",
-    src: "https://i.pravatar.cc/150?img=8",
-    shape: "square",
-  },
-};
-
-export const AllSizes: Story = {
-  parameters: {
-    controls: { disable: true },
-  },
-  render() {
-    return (
-      <div className="flex items-center gap-4">
-        <Avatar name="Small" src="https://i.pravatar.cc/150?img=10" size="sm" />
-        <Avatar name="Medium" src="https://i.pravatar.cc/150?img=11" size="md" />
-        <Avatar name="Base" src="https://i.pravatar.cc/150?img=12" size="base" />
-        <Avatar name="Large" src="https://i.pravatar.cc/150?img=13" size="lg" />
-      </div>
-    );
-  },
-};
-
-export const AllShapes: Story = {
-  parameters: {
-    controls: { disable: true },
-  },
-  render() {
-    return (
-      <div className="flex items-center gap-4">
-        <Avatar name="Circle" src="https://i.pravatar.cc/150?img=14" shape="circle" />
-        <Avatar name="Square" src="https://i.pravatar.cc/150?img=15" shape="square" />
-      </div>
-    );
-  },
-};
-
-export const FallbackVariations: Story = {
-  parameters: {
-    controls: { disable: true },
-  },
-  render() {
-    return (
-      <div className="flex items-center gap-4">
-        <Avatar name="Alice" src="invalid-url" fallbackBackgroundColor="#ef4444" fallbackTextColor="#ffffff" />
-        <Avatar name="Bob" src="invalid-url" fallbackBackgroundColor="#f59e0b" fallbackTextColor="#ffffff" />
-        <Avatar name="Charlie" src="invalid-url" fallbackBackgroundColor="#10b981" fallbackTextColor="#ffffff" />
-        <Avatar name="David" src="invalid-url" fallbackBackgroundColor="#3b82f6" fallbackTextColor="#ffffff" />
-        <Avatar name="Eve" src="invalid-url" fallbackBackgroundColor="#8b5cf6" fallbackTextColor="#ffffff" />
-      </div>
-    );
-  },
-};
-
-export const AvatarGroup: Story = {
-  parameters: {
-    controls: { disable: true },
-  },
-  render() {
-    return (
-      <div className="flex -space-x-2">
-        <Avatar name="User 1" src="https://i.pravatar.cc/150?img=20" size="md" className="ring-2 ring-white" />
-        <Avatar name="User 2" src="https://i.pravatar.cc/150?img=21" size="md" className="ring-2 ring-white" />
-        <Avatar name="User 3" src="https://i.pravatar.cc/150?img=22" size="md" className="ring-2 ring-white" />
-        <Avatar name="User 4" src="https://i.pravatar.cc/150?img=23" size="md" className="ring-2 ring-white" />
-        <Avatar
-          fallbackText="+5"
-          src="invalid-url"
-          size="md"
-          fallbackBackgroundColor="#6b7280"
-          fallbackTextColor="#ffffff"
-          className="ring-2 ring-white"
-        />
-      </div>
-    );
-  },
-};
diff --git a/packages/propel/src/avatar/avatar.tsx b/packages/propel/src/avatar/avatar.tsx
deleted file mode 100644
index 3f59a692ca2..00000000000
--- a/packages/propel/src/avatar/avatar.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import React from "react";
-import { Avatar as AvatarPrimitive } from "@base-ui-components/react/avatar";
-import { cn } from "../utils/classname";
-
-export type TAvatarSize = "sm" | "md" | "base" | "lg" | number;
-
-type Props = {
-  name?: string; //The name of the avatar which will be displayed on the tooltip
-  fallbackBackgroundColor?: string; //The background color if the avatar image fails to load
-  fallbackText?: string;
-  fallbackTextColor?: string; //The text color if the avatar image fails to load
-  showTooltip?: boolean;
-  size?: TAvatarSize; //The size of the avatars
-  shape?: "circle" | "square";
-  src?: string; //The source of the avatar image
-  className?: string;
-};
-
-/**
- * Get the size details based on the size prop
- * @param size The size of the avatar
- * @returns The size details
- */
-export const getSizeInfo = (size: TAvatarSize) => {
-  switch (size) {
-    case "sm":
-      return {
-        avatarSize: "h-4 w-4",
-        fontSize: "text-11",
-        spacing: "-space-x-1",
-      };
-    case "md":
-      return {
-        avatarSize: "h-5 w-5",
-        fontSize: "text-11",
-        spacing: "-space-x-1",
-      };
-    case "base":
-      return {
-        avatarSize: "h-6 w-6",
-        fontSize: "text-13",
-        spacing: "-space-x-1.5",
-      };
-    case "lg":
-      return {
-        avatarSize: "h-7 w-7",
-        fontSize: "text-13",
-        spacing: "-space-x-1.5",
-      };
-    default:
-      return {
-        avatarSize: "h-5 w-5",
-        fontSize: "text-11",
-        spacing: "-space-x-1",
-      };
-  }
-};
-
-/**
- * Get the border radius based on the shape prop
- * @param shape The shape of the avatar
- * @returns The border radius
- */
-export const getBorderRadius = (shape: "circle" | "square") => {
-  switch (shape) {
-    case "circle":
-      return "rounded-full";
-    case "square":
-      return "rounded-sm";
-    default:
-      return "rounded-full";
-  }
-};
-
-/**
- * Check if the value is a valid number
- * @param value The value to check
- * @returns Whether the value is a valid number or not
- */
-export const isAValidNumber = (value: unknown): value is number => typeof value === "number" && !Number.isNaN(value);
-
-export function Avatar(props: Props) {
-  const {
-    name,
-    fallbackBackgroundColor,
-    fallbackText,
-    fallbackTextColor,
-    size = "md",
-    shape = "circle",
-    src,
-    className = "",
-  } = props;
-
-  // get size details based on the size prop
-  const sizeInfo = getSizeInfo(size);
-
-  const fallbackLetter = name?.[0]?.toUpperCase() ?? fallbackText ?? "?";
-  return (
-    <div
-      className={cn("grid place-items-center overflow-hidden", getBorderRadius(shape), {
-        [sizeInfo.avatarSize]: !isAValidNumber(size),
-      })}
-      style={
-        isAValidNumber(size)
-          ? {
-              height: `${size}px`,
-              width: `${size}px`,
-            }
-          : {}
-      }
-      tabIndex={-1}
-    >
-      <AvatarPrimitive.Root className={cn("h-full w-full", getBorderRadius(shape), className)}>
-        <AvatarPrimitive.Image src={src} width="48" height="48" />
-        <AvatarPrimitive.Fallback
-          className={cn(sizeInfo.fontSize, "grid h-full w-full place-items-center", getBorderRadius(shape), className)}
-          style={{
-            backgroundColor: fallbackBackgroundColor ?? "var(--background-color-accent-primary)",
-            color: fallbackTextColor ?? "var(--text-color-on-color)",
-          }}
-        >
-          {fallbackLetter}
-        </AvatarPrimitive.Fallback>
-      </AvatarPrimitive.Root>
-    </div>
-  );
-}
diff --git a/packages/propel/src/avatar/index.ts b/packages/propel/src/avatar/index.ts
deleted file mode 100644
index 522264e6de8..00000000000
--- a/packages/propel/src/avatar/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./avatar";
diff --git a/packages/propel/src/badge/badge.stories.tsx b/packages/propel/src/badge/badge.stories.tsx
deleted file mode 100644
index 75e34e96d8f..00000000000
--- a/packages/propel/src/badge/badge.stories.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Badge } from "./badge";
-
-const meta = {
-  title: "Components/Badge",
-  component: Badge,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: {
-    children: "Badge",
-  },
-} satisfies Meta<typeof Badge>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Neutral: Story = {
-  args: {
-    variant: "neutral",
-    children: "Neutral Badge",
-  },
-};
-
-export const Brand: Story = {
-  args: {
-    variant: "brand",
-    children: "Brand Badge",
-  },
-};
-
-export const Warning: Story = {
-  args: {
-    variant: "warning",
-    children: "Warning Badge",
-  },
-};
-
-export const Success: Story = {
-  args: {
-    variant: "success",
-    children: "Success Badge",
-  },
-};
-
-export const Danger: Story = {
-  args: {
-    variant: "danger",
-    children: "Danger Badge",
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: "sm",
-    children: "Small Badge",
-  },
-};
-
-export const Base: Story = {
-  args: {
-    size: "base",
-    children: "Base Badge",
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: "lg",
-    children: "Large Badge",
-  },
-};
-
-export const WithPrependIcon: Story = {
-  args: {
-    prependIcon: (
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <path d="M12 5v14m-7-7h14" />
-      </svg>
-    ),
-    children: "With Prepend Icon",
-  },
-};
-
-export const WithAppendIcon: Story = {
-  args: {
-    appendIcon: (
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <path d="M9 5l7 7-7 7" />
-      </svg>
-    ),
-    children: "With Append Icon",
-  },
-};
-
-export const AllVariants: Story = {
-  render() {
-    return (
-      <div className="space-y-4">
-        <div className="space-y-2">
-          <h3 className="text-16 font-semibold">Primary Variants</h3>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="neutral">Neutral</Badge>
-            <Badge variant="brand">Brand</Badge>
-            <Badge variant="warning">Warning</Badge>
-            <Badge variant="success">Success</Badge>
-            <Badge variant="danger">Danger</Badge>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const AllSizes: Story = {
-  render() {
-    return (
-      <div className="space-y-4">
-        <div className="flex items-center gap-2">
-          <Badge size="sm">Small</Badge>
-          <Badge size="base">Base</Badge>
-          <Badge size="lg">Large</Badge>
-        </div>
-      </div>
-    );
-  },
-};
diff --git a/packages/propel/src/badge/badge.tsx b/packages/propel/src/badge/badge.tsx
deleted file mode 100644
index 3d34ba702c6..00000000000
--- a/packages/propel/src/badge/badge.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-import { cn } from "../utils";
-import type { BadgeProps } from "./helper";
-import { getBadgeIconStyling, badgeVariants } from "./helper";
-
-const Badge = React.forwardRef(function Badge(props: BadgeProps, ref: React.ForwardedRef<HTMLSpanElement>) {
-  const { variant = "neutral", size = "base", prependIcon = null, appendIcon = null, children, ...rest } = props;
-
-  const badgeIconStyle = getBadgeIconStyling(size ?? "base");
-
-  return (
-    <span ref={ref} className={cn(badgeVariants({ variant, size }))} {...rest}>
-      {prependIcon && React.cloneElement(prependIcon, { className: cn("shrink-0", badgeIconStyle), strokeWidth: 2 })}
-      {children}
-      {appendIcon && React.cloneElement(appendIcon, { className: cn("shrink-0", badgeIconStyle), strokeWidth: 2 })}
-    </span>
-  );
-});
-
-Badge.displayName = "plane-ui-badge";
-
-export { Badge };
diff --git a/packages/propel/src/badge/helper.tsx b/packages/propel/src/badge/helper.tsx
deleted file mode 100644
index c339d69e1da..00000000000
--- a/packages/propel/src/badge/helper.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority";
-
-export const badgeVariants = cva("inline-flex items-center justify-center gap-1 whitespace-nowrap transition-colors", {
-  variants: {
-    variant: {
-      neutral: "bg-layer-3 text-tertiary",
-      brand: "bg-accent-subtle-hover text-accent-primary",
-      warning: "bg-warning-subtle text-warning-primary",
-      success: "bg-success-subtle-1 text-success-primary",
-      danger: "bg-danger-subtle text-danger-primary",
-    },
-    size: {
-      sm: "h-4 rounded-sm px-1 text-caption-sm-medium",
-      base: "h-5 rounded-md px-1.5 text-caption-sm-medium",
-      lg: "h-6 rounded-md px-2 text-caption-md-medium",
-    },
-  },
-  defaultVariants: {
-    variant: "neutral",
-    size: "base",
-  },
-});
-
-export type BadgeProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "className"> &
-  VariantProps<typeof badgeVariants> & {
-    // React 19 defaults ReactElement's props to `unknown`, which would force every
-    // caller to redeclare the icon's props. `any` keeps the React 18 behaviour these
-    // props already had, so cloneElement below still injects className/strokeWidth.
-    appendIcon?: React.ReactElement<any>;
-    prependIcon?: React.ReactElement<any>;
-  };
-
-export type TBadgeVariant = NonNullable<BadgeProps["variant"]>;
-export type TBadgeSize = NonNullable<BadgeProps["size"]>;
-
-const badgeIconStyling: Record<TBadgeSize, string> = {
-  sm: "size-3.5",
-  base: "size-3.5",
-  lg: "size-4",
-};
-
-export function getBadgeIconStyling(size: TBadgeSize): string {
-  return badgeIconStyling[size];
-}
-
-export function getBadgeStyling(variant: TBadgeVariant, size: TBadgeSize): string {
-  return badgeVariants({ variant, size });
-}
diff --git a/packages/propel/src/badge/index.ts b/packages/propel/src/badge/index.ts
deleted file mode 100644
index 7372c7cb45a..00000000000
--- a/packages/propel/src/badge/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export { Badge } from "./badge";
-export { getBadgeStyling } from "./helper";
-export type { BadgeProps, TBadgeVariant, TBadgeSize } from "./helper";
diff --git a/packages/propel/src/banner/banner.stories.tsx b/packages/propel/src/banner/banner.stories.tsx
deleted file mode 100644
index abf347360aa..00000000000
--- a/packages/propel/src/banner/banner.stories.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Banner } from "./banner";
-
-const meta = {
-  title: "Components/Banner",
-  component: Banner,
-  parameters: {
-    layout: "fullscreen",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["success", "error", "warning", "info"],
-      description: "Visual variant of the banner",
-    },
-    title: {
-      control: "text",
-      description: "Banner message text",
-    },
-    icon: {
-      control: false,
-      description: "Icon element to display before the title",
-    },
-    action: {
-      control: false,
-      description: "Action element(s) to display on the right side",
-    },
-  },
-} satisfies Meta<typeof Banner>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Sample icons for different variants
-function SuccessIcon() {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="text-success-primary"
-    >
-      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
-      <polyline points="22 4 12 14.01 9 11.01" />
-    </svg>
-  );
-}
-
-function ErrorIcon() {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="text-danger-primary"
-    >
-      <circle cx="12" cy="12" r="10" />
-      <line x1="15" y1="9" x2="9" y2="15" />
-      <line x1="9" y1="9" x2="15" y2="15" />
-    </svg>
-  );
-}
-
-function WarningIcon() {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="text-yellow-600"
-    >
-      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
-      <line x1="12" y1="9" x2="12" y2="13" />
-      <line x1="12" y1="17" x2="12.01" y2="17" />
-    </svg>
-  );
-}
-
-function InfoIcon() {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="text-blue-600"
-    >
-      <circle cx="12" cy="12" r="10" />
-      <line x1="12" y1="16" x2="12" y2="12" />
-      <line x1="12" y1="8" x2="12.01" y2="8" />
-    </svg>
-  );
-}
-
-function CloseButton({ onClick }: { onClick?: () => void }) {
-  return (
-    <button
-      onClick={onClick}
-      className="rounded-sm p-1 transition-colors hover:bg-black/5 dark:hover:bg-white/5"
-      aria-label="Dismiss"
-    >
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        className="text-text-secondary"
-      >
-        <line x1="18" y1="6" x2="6" y2="18" />
-        <line x1="6" y1="6" x2="18" y2="18" />
-      </svg>
-    </button>
-  );
-}
-
-// ============================================================================
-// Interactive Stories
-// ============================================================================
-
-export const Interactive: Story = {
-  args: {
-    variant: "info",
-    title: "This is an interactive banner. Use the controls to customize it.",
-    icon: <InfoIcon />,
-    dismissible: true,
-  },
-};
-
-// ============================================================================
-// Main Variants
-// ============================================================================
-
-export const Success: Story = {
-  args: {
-    variant: "success",
-    title: "Operation completed successfully",
-    icon: <SuccessIcon />,
-    action: <CloseButton />,
-  },
-};
-
-export const Error: Story = {
-  args: {
-    variant: "error",
-    title: "An error occurred while processing your request",
-    icon: <ErrorIcon />,
-    action: <CloseButton />,
-  },
-};
-
-export const Warning: Story = {
-  args: {
-    variant: "warning",
-    title: "Your session will expire in 5 minutes",
-    icon: <WarningIcon />,
-    action: <CloseButton />,
-  },
-};
-
-export const Info: Story = {
-  args: {
-    variant: "info",
-    title: "New features are available. Check out what's new!",
-    icon: <InfoIcon />,
-    action: <CloseButton />,
-  },
-};
diff --git a/packages/propel/src/banner/banner.tsx b/packages/propel/src/banner/banner.tsx
deleted file mode 100644
index 6afab1248f3..00000000000
--- a/packages/propel/src/banner/banner.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import React from "react";
-import { cn } from "../utils";
-import type { TBannerVariant } from "./helper";
-import {
-  getBannerStyling,
-  getBannerTitleStyling,
-  getBannerActionStyling,
-  getBannerDismissStyling,
-  getBannerDismissIconStyling,
-} from "./helper";
-
-export interface BannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
-  /** Visual variant of the banner */
-  variant?: TBannerVariant;
-  /** Icon to display before the title */
-  icon?: React.ReactNode;
-  /** Banner title/message */
-  title?: React.ReactNode;
-  /** Action elements to display on the right side */
-  action?: React.ReactNode;
-  /** Whether the banner can be dismissed */
-  dismissible?: boolean;
-  /** Callback when banner is dismissed */
-  onDismiss?: () => void;
-  /** Whether to show the banner */
-  visible?: boolean;
-  /** Animation duration for show/hide */
-  animationDuration?: number;
-}
-
-export const Banner = React.forwardRef(function Banner(
-  {
-    icon,
-    title,
-    action,
-    variant = "info",
-    dismissible = false,
-    onDismiss,
-    visible = true,
-    animationDuration = 200,
-    className,
-    children,
-    ...props
-  }: BannerProps,
-  ref: React.ForwardedRef<HTMLDivElement>
-) {
-  // Handle dismissal
-  const handleDismiss = () => {
-    if (onDismiss) {
-      onDismiss();
-    }
-  };
-
-  // Don't render if not visible
-  if (!visible) {
-    return null;
-  }
-
-  // Get styling using helper functions
-  const containerStyling = getBannerStyling(variant);
-  const iconStyling = "flex items-center justify-center flex-shrink-0 size-5";
-  const titleStyling = getBannerTitleStyling();
-  const actionStyling = getBannerActionStyling();
-  const dismissStyling = getBannerDismissStyling();
-  const dismissIconStyling = getBannerDismissIconStyling();
-
-  // Render custom icon component if provided
-  const renderIcon = () => {
-    if (icon) {
-      return <div className={cn(iconStyling)}>{icon}</div>;
-    }
-    return null;
-  };
-
-  // Render dismiss button if dismissible
-  const renderDismissButton = () => {
-    if (!dismissible) return null;
-
-    return (
-      <button onClick={handleDismiss} className={cn(dismissStyling)} aria-label="Dismiss banner">
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          className={cn(dismissIconStyling)}
-        >
-          <line x1="18" y1="6" x2="6" y2="18" />
-          <line x1="6" y1="6" x2="18" y2="18" />
-        </svg>
-      </button>
-    );
-  };
-
-  return (
-    <div
-      ref={ref}
-      className={cn(containerStyling, className)}
-      style={{
-        transitionDuration: `${animationDuration}ms`,
-      }}
-      {...props}
-    >
-      {/* Left side: Icon and Title */}
-      <div className="flex min-w-0 flex-1 items-center gap-3">
-        {renderIcon()}
-        {title && <div className={cn(titleStyling)}>{title}</div>}
-        {children}
-      </div>
-
-      {/* Right side: Actions */}
-      {(action || dismissible) && (
-        <div className={cn(actionStyling)}>
-          {action}
-          {renderDismissButton()}
-        </div>
-      )}
-    </div>
-  );
-});
-
-Banner.displayName = "Banner";
-
-// Export variant types for external use
-export type BannerVariant = TBannerVariant;
diff --git a/packages/propel/src/banner/helper.tsx b/packages/propel/src/banner/helper.tsx
deleted file mode 100644
index 1384b3109be..00000000000
--- a/packages/propel/src/banner/helper.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export type TBannerVariant = "success" | "error" | "warning" | "info";
-
-export interface IBannerStyling {
-  [key: string]: string;
-}
-
-export const bannerSizeStyling = {
-  container: "py-3 px-6 h-12",
-  icon: "w-5 h-5",
-  title: "text-13",
-  action: "gap-2",
-};
-
-// TODO: update this with new color once its implemented
-// Banner variant styling
-export const bannerStyling: IBannerStyling = {
-  success: "bg-success-subtle",
-  error: "bg-danger-subtle",
-  warning: "bg-yellow-500/10",
-  info: "bg-blue-500/10",
-};
-
-// Base banner styles
-export const bannerBaseStyles = "flex items-center justify-between w-full transition-all duration-200";
-
-// Get banner container styling
-export const getBannerStyling = (variant: TBannerVariant): string => {
-  const variantStyles = bannerStyling[variant];
-  const sizeStyles = bannerSizeStyling.container;
-
-  return `${bannerBaseStyles} ${variantStyles} ${sizeStyles}`;
-};
-
-// Get title styling
-export const getBannerTitleStyling = (): string =>
-  `font-medium text-secondary flex-1 min-w-0 ${bannerSizeStyling.title}`;
-
-// Get action container styling
-export const getBannerActionStyling = (): string => `flex items-center flex-shrink-0 ${bannerSizeStyling.action}`;
-
-// Get dismiss button styling
-export const getBannerDismissStyling = (): string =>
-  "rounded-sm p-1 hover:bg-surface-2 transition-colors flex-shrink-0";
-
-// Get dismiss icon styling
-export const getBannerDismissIconStyling = (): string => "text-secondary";
diff --git a/packages/propel/src/banner/index.ts b/packages/propel/src/banner/index.ts
deleted file mode 100644
index 1b8f7995e0d..00000000000
--- a/packages/propel/src/banner/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export { Banner } from "./banner";
-export type { BannerProps, BannerVariant } from "./banner";
-export type { TBannerVariant } from "./helper";
diff --git a/packages/propel/src/button/button.stories.tsx b/packages/propel/src/button/button.stories.tsx
deleted file mode 100644
index 3a42c93520b..00000000000
--- a/packages/propel/src/button/button.stories.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Button } from "./button";
-
-const meta = {
-  title: "Components/Button",
-  component: Button,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: {
-    children: "Button",
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Primary: Story = {
-  args: {
-    variant: "primary",
-    children: "Primary Button",
-  },
-};
-
-export const ErrorFill: Story = {
-  args: {
-    variant: "error-fill",
-    children: "Error Button",
-  },
-};
-
-export const ErrorOutline: Story = {
-  args: {
-    variant: "error-outline",
-    children: "Error Outline Button",
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    variant: "secondary",
-    children: "Secondary Button",
-  },
-};
-
-export const Tertiary: Story = {
-  args: {
-    variant: "tertiary",
-    children: "Tertiary Button",
-  },
-};
-
-export const Ghost: Story = {
-  args: {
-    variant: "ghost",
-    children: "Ghost Button",
-  },
-};
-
-export const Link: Story = {
-  args: {
-    variant: "link",
-    children: "Link Button",
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: "sm",
-    children: "Small Button",
-  },
-};
-
-export const Base: Story = {
-  args: {
-    size: "base",
-    children: "Base Button",
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: "lg",
-    children: "Large Button",
-  },
-};
-
-export const ExtraLarge: Story = {
-  args: {
-    size: "xl",
-    children: "Extra Large Button",
-  },
-};
-
-export const Loading: Story = {
-  args: {
-    loading: true,
-    children: "Loading Button",
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-    children: "Disabled Button",
-  },
-};
-
-export const WithPrependIcon: Story = {
-  args: {
-    prependIcon: (
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <path d="M12 5v14m-7-7h14" />
-      </svg>
-    ),
-    children: "With Prepend Icon",
-  },
-};
-
-export const WithAppendIcon: Story = {
-  args: {
-    appendIcon: (
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <path d="M9 5l7 7-7 7" />
-      </svg>
-    ),
-    children: "With Append Icon",
-  },
-};
-
-export const AllVariants: Story = {
-  render() {
-    return (
-      <div className="space-y-4">
-        <div className="space-y-2">
-          <h3 className="text-16 font-semibold">Primary Variants</h3>
-          <div className="flex flex-wrap gap-2">
-            <Button variant="primary">Primary</Button>
-            <Button variant="error-fill">Error Fill</Button>
-            <Button variant="error-outline">Error Outline</Button>
-            <Button variant="secondary">Secondary</Button>
-            <Button variant="tertiary">Tertiary</Button>
-            <Button variant="ghost">Ghost</Button>
-            <Button variant="link">Link</Button>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const AllSizes: Story = {
-  render() {
-    return (
-      <div className="space-y-4">
-        <div className="flex items-center gap-2">
-          <Button size="sm">Small</Button>
-          <Button size="base">Base</Button>
-          <Button size="lg">Large</Button>
-          <Button size="xl">Extra Large</Button>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const AllStates: Story = {
-  render() {
-    return (
-      <div className="space-y-4">
-        <div className="space-y-2">
-          <h3 className="text-16 font-semibold">Button States</h3>
-          <div className="flex flex-wrap gap-2">
-            <Button>Default</Button>
-            <Button loading>Loading</Button>
-            <Button disabled>Disabled</Button>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
diff --git a/packages/propel/src/button/button.tsx b/packages/propel/src/button/button.tsx
deleted file mode 100644
index 6055c75d83b..00000000000
--- a/packages/propel/src/button/button.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-import { cn } from "../utils";
-import type { ButtonProps } from "./helper";
-import { getIconStyling, buttonVariants } from "./helper";
-
-const Button = React.forwardRef(function Button(props: ButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) {
-  const {
-    variant = "primary",
-    size = "base",
-    className = "",
-    type = "button",
-    loading = false,
-    disabled = false,
-    prependIcon = null,
-    appendIcon = null,
-    children,
-    ...rest
-  } = props;
-
-  const buttonIconStyle = getIconStyling(size ?? "base");
-
-  return (
-    <button
-      ref={ref}
-      type={type}
-      className={cn(buttonVariants({ variant, size }), className)}
-      disabled={disabled || loading}
-      {...rest}
-    >
-      {prependIcon && React.cloneElement(prependIcon, { className: cn("shrink-0", buttonIconStyle), strokeWidth: 2 })}
-      {children}
-      {appendIcon && React.cloneElement(appendIcon, { className: cn("shrink-0", buttonIconStyle), strokeWidth: 2 })}
-    </button>
-  );
-});
-
-Button.displayName = "plane-ui-button";
-
-export { Button };
diff --git a/packages/propel/src/button/helper.tsx b/packages/propel/src/button/helper.tsx
deleted file mode 100644
index 3ab55f59cba..00000000000
--- a/packages/propel/src/button/helper.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority";
-
-export const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-1 whitespace-nowrap transition-colors focus-visible:outline-none disabled:pointer-events-none",
-  {
-    variants: {
-      variant: {
-        primary:
-          "bg-accent-primary text-on-color hover:bg-accent-primary-hover active:bg-accent-primary-active disabled:bg-layer-disabled disabled:text-on-color-disabled",
-        "error-fill":
-          "bg-danger-primary text-on-color hover:bg-danger-primary-hover active:bg-danger-primary-active disabled:bg-layer-disabled disabled:text-disabled",
-        "error-outline":
-          "border border-danger-strong bg-layer-2 text-danger-secondary hover:bg-danger-subtle active:bg-danger-subtle-hover disabled:border-subtle-1 disabled:bg-layer-2 disabled:text-disabled",
-        secondary:
-          "border border-strong bg-layer-2 text-secondary shadow-raised-100 hover:bg-layer-2-hover active:bg-layer-2-active disabled:border-subtle-1 disabled:bg-layer-transparent disabled:text-disabled",
-        tertiary:
-          "bg-layer-3 text-secondary hover:bg-layer-3-hover active:bg-layer-3-active disabled:bg-layer-transparent disabled:text-disabled",
-        ghost:
-          "bg-layer-transparent text-secondary hover:bg-layer-transparent-hover focus:bg-layer-transparent-active active:bg-layer-transparent-active disabled:bg-layer-transparent disabled:text-disabled",
-        link: "px-0 text-link-primary underline hover:text-link-primary-hover focus:text-link-primary-hover active:text-link-primary-hover disabled:text-disabled",
-      },
-      size: {
-        sm: "h-5 rounded-sm px-1.5 text-caption-md-medium",
-        base: "h-6 rounded-md px-2 text-body-xs-medium",
-        lg: "h-7 rounded-md px-2 text-body-xs-medium",
-        xl: "h-8 rounded-md px-2 text-body-sm-medium",
-      },
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "base",
-    },
-  }
-);
-
-export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
-  VariantProps<typeof buttonVariants> & {
-    // React 19 defaults ReactElement's props to `unknown`, which would force every
-    // caller to redeclare the icon's props. `any` keeps the React 18 behaviour these
-    // props already had, so cloneElement below still injects className/strokeWidth.
-    appendIcon?: React.ReactElement<any>;
-    loading?: boolean;
-    prependIcon?: React.ReactElement<any>;
-  };
-
-export type TButtonVariant = NonNullable<ButtonProps["variant"]>;
-export type TButtonSize = NonNullable<ButtonProps["size"]>;
-
-const buttonIconStyling: Record<TButtonSize, string> = {
-  sm: "size-3.5",
-  base: "size-3.5",
-  lg: "size-4",
-  xl: "size-4 ",
-};
-
-export function getIconStyling(size: TButtonSize): string {
-  return buttonIconStyling[size];
-}
-
-export function getButtonStyling(variant: TButtonVariant, size: TButtonSize): string {
-  return buttonVariants({ variant, size });
-}
diff --git a/packages/propel/src/button/index.ts b/packages/propel/src/button/index.ts
deleted file mode 100644
index 95ba2dab4e3..00000000000
--- a/packages/propel/src/button/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export { Button } from "./button";
-export { getButtonStyling } from "./helper";
-export type { ButtonProps, TButtonVariant, TButtonSize } from "./helper";
diff --git a/packages/propel/src/calendar/calendar.stories.tsx b/packages/propel/src/calendar/calendar.stories.tsx
deleted file mode 100644
index a6a7a7a3fd0..00000000000
--- a/packages/propel/src/calendar/calendar.stories.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import type { DateRange } from "react-day-picker";
-import { Calendar } from "./root";
-
-const meta = {
-  title: "Components/Calendar",
-  component: Calendar,
-  parameters: {
-    layout: "centered",
-  },
-  args: {
-    showOutsideDays: true,
-  },
-} satisfies Meta<typeof Calendar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const SingleDate: Story = {
-  render(args) {
-    const [date, setDate] = useState<Date | undefined>(new Date());
-
-    return (
-      <div className="p-4">
-        <Calendar {...args} mode="single" selected={date} onSelect={setDate} className="rounded-md border" />
-      </div>
-    );
-  },
-};
-
-export const MultipleDates: Story = {
-  render(args) {
-    const [dates, setDates] = useState<Date[] | undefined>([
-      new Date(2024, 0, 15),
-      new Date(2024, 0, 20),
-      new Date(2024, 0, 25),
-    ]);
-
-    return (
-      <div className="p-4">
-        <Calendar {...args} mode="multiple" selected={dates} onSelect={setDates} className="rounded-md border" />
-      </div>
-    );
-  },
-};
-
-export const RangeSelection: Story = {
-  render(args) {
-    const [range, setRange] = useState<DateRange | undefined>({
-      from: new Date(2024, 0, 10),
-      to: new Date(2024, 0, 20),
-    });
-
-    return (
-      <div className="p-4">
-        <Calendar {...args} mode="range" selected={range} onSelect={setRange} className="rounded-md border" />
-      </div>
-    );
-  },
-};
-
-export const DisabledDates: Story = {
-  render(args) {
-    const [date, setDate] = useState<Date | undefined>();
-    const disabledDays = [new Date(2024, 0, 5), new Date(2024, 0, 12), new Date(2024, 0, 19), new Date(2024, 0, 26)];
-
-    return (
-      <div className="p-4">
-        <Calendar
-          {...args}
-          mode="single"
-          selected={date}
-          onSelect={setDate}
-          disabled={disabledDays}
-          className="rounded-md border"
-        />
-      </div>
-    );
-  },
-};
-
-export const DisabledWeekends: Story = {
-  render(args) {
-    const [date, setDate] = useState<Date | undefined>();
-
-    return (
-      <div className="p-4">
-        <Calendar
-          {...args}
-          mode="single"
-          selected={date}
-          onSelect={setDate}
-          disabled={(date) => date.getDay() === 0 || date.getDay() === 6}
-          className="rounded-md border"
-        />
-      </div>
-    );
-  },
-};
-
-export const MinMaxDates: Story = {
-  render(args) {
-    const [date, setDate] = useState<Date | undefined>();
-    const today = new Date();
-    const tenDaysAgo = new Date(today);
-    tenDaysAgo.setDate(today.getDate() - 10);
-    const tenDaysFromNow = new Date(today);
-    tenDaysFromNow.setDate(today.getDate() + 10);
-
-    return (
-      <div className="p-4">
-        <Calendar
-          {...args}
-          mode="single"
-          selected={date}
-          onSelect={setDate}
-          disabled={(date) => date < tenDaysAgo || date > tenDaysFromNow}
-          className="rounded-md border"
-        />
-      </div>
-    );
-  },
-};
-
-export const WeekStartsOnMonday: Story = {
-  render(args) {
-    const [date, setDate] = useState<Date | undefined>(new Date());
-
-    return (
-      <div className="p-4">
-        <Calendar
-          {...args}
-          mode="single"
-          selected={date}
-          onSelect={setDate}
-          weekStartsOn={1}
-          className="rounded-md border"
-        />
-      </div>
-    );
-  },
-};
-
-export const WithoutOutsideDays: Story = {
-  render(args) {
-    const [date, setDate] = useState<Date | undefined>(new Date());
-
-    return (
-      <div className="p-4">
-        <Calendar
-          {...args}
-          mode="single"
-          selected={date}
-          onSelect={setDate}
-          showOutsideDays={false}
-          className="rounded-md border"
-        />
-      </div>
-    );
-  },
-};
-
-export const TwoMonths: Story = {
-  render(args) {
-    const [range, setRange] = useState<DateRange | undefined>({
-      from: new Date(2024, 0, 10),
-      to: new Date(2024, 1, 15),
-    });
-
-    return (
-      <div className="p-4">
-        <Calendar
-          {...args}
-          mode="range"
-          selected={range}
-          onSelect={setRange}
-          numberOfMonths={2}
-          className="rounded-md border"
-        />
-      </div>
-    );
-  },
-};
-
-export const Uncontrolled: Story = {
-  render() {
-    return (
-      <div className="p-4">
-        <Calendar mode="single" defaultMonth={new Date(2024, 0)} showOutsideDays className="rounded-md border" />
-      </div>
-    );
-  },
-};
diff --git a/packages/propel/src/calendar/index.ts b/packages/propel/src/calendar/index.ts
deleted file mode 100644
index dc603cd89e3..00000000000
--- a/packages/propel/src/calendar/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./root";
-export type { Matcher, DateRange } from "react-day-picker";
diff --git a/packages/propel/src/calendar/root.tsx b/packages/propel/src/calendar/root.tsx
deleted file mode 100644
index 13f18b3f9f6..00000000000
--- a/packages/propel/src/calendar/root.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-import { DayPicker } from "react-day-picker";
-import { ChevronLeftOutline } from "@makeplane/propel/icons";
-
-import { cn } from "../utils";
-
-export type CalendarProps = React.ComponentProps<typeof DayPicker>;
-
-export function Calendar({ className, showOutsideDays = true, ...props }: CalendarProps) {
-  const currentYear = new Date().getFullYear();
-  const thirtyYearsAgoFirstDay = new Date(currentYear - 30, 0, 1);
-  const thirtyYearsFromNowFirstDay = new Date(currentYear + 30, 11, 31);
-
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
-      weekStartsOn={props.weekStartsOn}
-      components={{
-        Chevron: ({ className, ...props }) => (
-          <ChevronLeftOutline
-            className={cn(
-              "size-4",
-              { "rotate-180": props.orientation === "right", "-rotate-90": props.orientation === "down" },
-              className
-            )}
-            {...props}
-          />
-        ),
-      }}
-      startMonth={thirtyYearsAgoFirstDay}
-      endMonth={thirtyYearsFromNowFirstDay}
-      {...props}
-    />
-  );
-}
diff --git a/packages/propel/src/card/card.stories.tsx b/packages/propel/src/card/card.stories.tsx
deleted file mode 100644
index 03927c21aea..00000000000
--- a/packages/propel/src/card/card.stories.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Card, ECardVariant, ECardSpacing, ECardDirection } from "./card";
-
-const meta = {
-  title: "Components/Card",
-  component: Card,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: {
-    children: (
-      <>
-        <h3 className="text-16 font-semibold">Card Title</h3>
-        <p className="text-gray-600 text-13">This is a default card with shadow and large spacing.</p>
-      </>
-    ),
-  },
-} satisfies Meta<typeof Card>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const WithShadow: Story = {
-  args: {
-    variant: ECardVariant.WITH_SHADOW,
-    children: (
-      <>
-        <h3 className="text-16 font-semibold">Card with Shadow</h3>
-        <p className="text-gray-600 text-13">Hover over this card to see the shadow effect.</p>
-      </>
-    ),
-  },
-};
-
-export const WithoutShadow: Story = {
-  args: {
-    variant: ECardVariant.WITHOUT_SHADOW,
-    children: (
-      <>
-        <h3 className="text-16 font-semibold">Card without Shadow</h3>
-        <p className="text-gray-600 text-13">This card has no shadow effect on hover.</p>
-      </>
-    ),
-  },
-};
-
-export const SmallSpacing: Story = {
-  args: {
-    spacing: ECardSpacing.SM,
-    children: (
-      <>
-        <h3 className="text-16 font-semibold">Small Spacing</h3>
-        <p className="text-gray-600 text-13">This card uses small spacing (p-4).</p>
-      </>
-    ),
-  },
-};
-
-export const LargeSpacing: Story = {
-  args: {
-    spacing: ECardSpacing.LG,
-    children: (
-      <>
-        <h3 className="text-16 font-semibold">Large Spacing</h3>
-        <p className="text-gray-600 text-13">This card uses large spacing (p-6).</p>
-      </>
-    ),
-  },
-};
-
-export const ColumnDirection: Story = {
-  args: {
-    direction: ECardDirection.COLUMN,
-    children: (
-      <>
-        <h3 className="text-16 font-semibold">Column Direction</h3>
-        <p className="text-gray-600 text-13">Content is arranged vertically.</p>
-        <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Action</button>
-      </>
-    ),
-  },
-};
-
-export const RowDirection: Story = {
-  args: {
-    direction: ECardDirection.ROW,
-    children: (
-      <>
-        <div className="flex-shrink-0">
-          <div className="bg-blue-500 h-12 w-12 rounded-sm" />
-        </div>
-        <div className="flex-1">
-          <h3 className="text-16 font-semibold">Row Direction</h3>
-          <p className="text-gray-600 text-13">Content is arranged horizontally.</p>
-        </div>
-      </>
-    ),
-  },
-};
-
-export const ProductCard: Story = {
-  args: {
-    variant: ECardVariant.WITH_SHADOW,
-    spacing: ECardSpacing.LG,
-    direction: ECardDirection.COLUMN,
-    children: (
-      <>
-        <div className="bg-gray-200 h-48 w-full rounded-sm" />
-        <h3 className="text-18 font-bold">Product Name</h3>
-        <p className="text-gray-600 text-13">A brief description of the product goes here.</p>
-        <div className="flex items-center justify-between">
-          <span className="text-16 font-semibold">$99.99</span>
-          <button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">Add to Cart</button>
-        </div>
-      </>
-    ),
-  },
-};
-
-export const UserCard: Story = {
-  args: {
-    variant: ECardVariant.WITH_SHADOW,
-    spacing: ECardSpacing.LG,
-    direction: ECardDirection.ROW,
-    children: (
-      <>
-        <div className="bg-blue-500 h-16 w-16 flex-shrink-0 rounded-full" />
-        <div className="flex-1">
-          <h3 className="text-16 font-semibold">John Doe</h3>
-          <p className="text-gray-600 text-13">Software Engineer</p>
-          <p className="text-gray-500 text-11">john.doe@example.com</p>
-        </div>
-      </>
-    ),
-  },
-};
-
-export const NotificationCard: Story = {
-  args: {
-    variant: ECardVariant.WITHOUT_SHADOW,
-    spacing: ECardSpacing.SM,
-    direction: ECardDirection.COLUMN,
-    children: (
-      <>
-        <div className="flex items-start justify-between">
-          <h4 className="font-semibold">New Message</h4>
-          <span className="text-gray-500 text-11">2m ago</span>
-        </div>
-        <p className="text-gray-600 text-13">You have received a new message from Alice.</p>
-      </>
-    ),
-  },
-};
-
-export const AllVariants: Story = {
-  render() {
-    return (
-      <div className="space-y-4">
-        <Card variant={ECardVariant.WITH_SHADOW}>
-          <h3 className="font-semibold">With Shadow</h3>
-          <p className="text-gray-600 text-13">Hover to see the shadow effect</p>
-        </Card>
-        <Card variant={ECardVariant.WITHOUT_SHADOW}>
-          <h3 className="font-semibold">Without Shadow</h3>
-          <p className="text-gray-600 text-13">No shadow on hover</p>
-        </Card>
-      </div>
-    );
-  },
-};
-
-export const AllSpacings: Story = {
-  render() {
-    return (
-      <div className="space-y-4">
-        <Card spacing={ECardSpacing.SM}>
-          <h3 className="font-semibold">Small Spacing (p-4)</h3>
-          <p className="text-gray-600 text-13">Compact padding</p>
-        </Card>
-        <Card spacing={ECardSpacing.LG}>
-          <h3 className="font-semibold">Large Spacing (p-6)</h3>
-          <p className="text-gray-600 text-13">More generous padding</p>
-        </Card>
-      </div>
-    );
-  },
-};
-
-export const AllDirections: Story = {
-  render() {
-    return (
-      <div className="space-y-4">
-        <Card direction={ECardDirection.COLUMN}>
-          <h3 className="font-semibold">Column Direction</h3>
-          <p className="text-gray-600 text-13">Vertical layout</p>
-          <button className="bg-blue-500 w-fit rounded-sm px-4 py-2 text-on-color">Button</button>
-        </Card>
-        <Card direction={ECardDirection.ROW}>
-          <div className="bg-blue-500 h-12 w-12 flex-shrink-0 rounded-sm" />
-          <div>
-            <h3 className="font-semibold">Row Direction</h3>
-            <p className="text-gray-600 text-13">Horizontal layout</p>
-          </div>
-        </Card>
-      </div>
-    );
-  },
-};
diff --git a/packages/propel/src/collapsible/collapsible.stories.tsx b/packages/propel/src/collapsible/collapsible.stories.tsx
deleted file mode 100644
index bc6b4e7ec9b..00000000000
--- a/packages/propel/src/collapsible/collapsible.stories.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useArgs } from "storybook/preview-api";
-import { ChevronDownOutline } from "@makeplane/propel/icons";
-import { Collapsible } from "./collapsible";
-
-const meta = {
-  title: "Components/Collapsible",
-  component: Collapsible.CollapsibleRoot,
-  subcomponents: {
-    CollapsibleTrigger: Collapsible.CollapsibleTrigger,
-    CollapsibleContent: Collapsible.CollapsibleContent,
-  },
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: {
-    children: null,
-    isOpen: false,
-    onToggle: () => {},
-  },
-  render(args) {
-    const [{ isOpen }, updateArgs] = useArgs();
-    const toggleOpen = () => updateArgs({ isOpen: !isOpen });
-
-    return (
-      <Collapsible.CollapsibleRoot {...args} isOpen={isOpen} onToggle={toggleOpen} className="w-96">
-        <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
-          <span className="font-semibold">Click to toggle</span>
-          <ChevronDownOutline className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
-        </Collapsible.CollapsibleTrigger>
-        <Collapsible.CollapsibleContent className="mt-2">
-          <div className="border-gray-200 rounded-md border p-4">
-            <p className="text-13">This is the collapsible content that can be shown or hidden.</p>
-          </div>
-        </Collapsible.CollapsibleContent>
-      </Collapsible.CollapsibleRoot>
-    );
-  },
-} satisfies Meta<typeof Collapsible.CollapsibleRoot>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const DefaultOpen: Story = {
-  args: { isOpen: true },
-};
-
-export const Controlled: Story = {
-  render() {
-    const [isOpen, setIsOpen] = useState(false);
-
-    return (
-      <div className="space-y-4">
-        <div className="flex gap-2">
-          <button onClick={() => setIsOpen(true)} className="bg-blue-500 rounded-sm px-4 py-2 text-13 text-on-color">
-            Open
-          </button>
-          <button onClick={() => setIsOpen(false)} className="bg-gray-500 rounded-sm px-4 py-2 text-13 text-on-color">
-            Close
-          </button>
-          <button
-            onClick={() => setIsOpen(!isOpen)}
-            className="bg-green-500 rounded-sm px-4 py-2 text-13 text-on-color"
-          >
-            Toggle
-          </button>
-        </div>
-        <Collapsible.CollapsibleRoot isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)} className="w-96">
-          <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
-            <span className="font-semibold">Controlled Collapsible</span>
-            <ChevronDownOutline className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
-          </Collapsible.CollapsibleTrigger>
-          <Collapsible.CollapsibleContent className="mt-2">
-            <div className="border-gray-200 rounded-md border p-4">
-              <p className="text-13">This collapsible is controlled by external state.</p>
-              <p className="mt-2 text-13">Current state: {isOpen ? "Open" : "Closed"}</p>
-            </div>
-          </Collapsible.CollapsibleContent>
-        </Collapsible.CollapsibleRoot>
-      </div>
-    );
-  },
-};
-
-export const NestedContent: Story = {
-  render(args) {
-    const [isOpen, setIsOpen] = useState(args.isOpen);
-    return (
-      <Collapsible.CollapsibleRoot {...args} isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)} className="w-96">
-        <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
-          <span className="font-semibold">Collapsible with Nested Content</span>
-          <ChevronDownOutline className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
-        </Collapsible.CollapsibleTrigger>
-        <Collapsible.CollapsibleContent className="mt-2">
-          <div className="border-gray-200 space-y-2 rounded-md border p-4">
-            <h4 className="font-semibold">Section 1</h4>
-            <p className="text-13">This is some content in the first section.</p>
-            <h4 className="font-semibold">Section 2</h4>
-            <p className="text-13">This is some content in the second section.</p>
-            <ul className="list-inside list-disc text-13">
-              <li>Item 1</li>
-              <li>Item 2</li>
-              <li>Item 3</li>
-            </ul>
-          </div>
-        </Collapsible.CollapsibleContent>
-      </Collapsible.CollapsibleRoot>
-    );
-  },
-};
-
-export const CustomStyling: Story = {
-  render(args) {
-    const [isOpen, setIsOpen] = useState(args.isOpen);
-    return (
-      <Collapsible.CollapsibleRoot {...args} isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)} className="w-96">
-        <Collapsible.CollapsibleTrigger className="from-purple-500 to-pink-500 shadow-lg hover:shadow-xl flex w-full items-center justify-between rounded-lg bg-gradient-to-r px-6 py-3 text-on-color transition-all">
-          <span className="text-16 font-bold">Custom Styled Trigger</span>
-          <ChevronDownOutline className="h-5 w-5 transition-transform group-data-[panel-open]:rotate-180" />
-        </Collapsible.CollapsibleTrigger>
-        <Collapsible.CollapsibleContent className="mt-4">
-          <div className="from-purple-100 to-pink-100 shadow-md rounded-lg bg-gradient-to-br p-6">
-            <p className="text-purple-900">This collapsible has custom styling with gradients, shadows, and colors.</p>
-          </div>
-        </Collapsible.CollapsibleContent>
-      </Collapsible.CollapsibleRoot>
-    );
-  },
-};
-
-export const MultipleCollapsibles: Story = {
-  render() {
-    return (
-      <div className="w-96 space-y-2">
-        <Collapsible.CollapsibleRoot>
-          <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
-            <span className="font-semibold">First Item</span>
-            <ChevronDownOutline className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
-          </Collapsible.CollapsibleTrigger>
-          <Collapsible.CollapsibleContent className="mt-2">
-            <div className="border-gray-200 rounded-md border p-4">
-              <p className="text-13">Content for the first item.</p>
-            </div>
-          </Collapsible.CollapsibleContent>
-        </Collapsible.CollapsibleRoot>
-
-        <Collapsible.CollapsibleRoot>
-          <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
-            <span className="font-semibold">Second Item</span>
-            <ChevronDownOutline className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
-          </Collapsible.CollapsibleTrigger>
-          <Collapsible.CollapsibleContent className="mt-2">
-            <div className="border-gray-200 rounded-md border p-4">
-              <p className="text-13">Content for the second item.</p>
-            </div>
-          </Collapsible.CollapsibleContent>
-        </Collapsible.CollapsibleRoot>
-
-        <Collapsible.CollapsibleRoot>
-          <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
-            <span className="font-semibold">Third Item</span>
-            <ChevronDownOutline className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
-          </Collapsible.CollapsibleTrigger>
-          <Collapsible.CollapsibleContent className="mt-2">
-            <div className="border-gray-200 rounded-md border p-4">
-              <p className="text-13">Content for the third item.</p>
-            </div>
-          </Collapsible.CollapsibleContent>
-        </Collapsible.CollapsibleRoot>
-      </div>
-    );
-  },
-};
diff --git a/packages/propel/src/collapsible/collapsible.tsx b/packages/propel/src/collapsible/collapsible.tsx
deleted file mode 100644
index a92b16463fd..00000000000
--- a/packages/propel/src/collapsible/collapsible.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import React, { useState, useEffect, useCallback, createContext, useContext } from "react";
-import { Collapsible as BaseCollapsible } from "@base-ui-components/react/collapsible";
-import clsx from "clsx";
-
-// Types
-type CollapsibleContextType = {
-  isOpen: boolean;
-  onToggle: () => void;
-};
-
-type RootProps = {
-  children: React.ReactNode;
-  className?: string;
-  isOpen?: boolean;
-  onToggle?: () => void;
-  defaultOpen?: boolean;
-};
-
-type TriggerProps = {
-  children: React.ReactNode;
-  className?: string;
-  buttonRef?: React.RefObject<HTMLButtonElement | null>;
-};
-
-type ContentProps = {
-  children: React.ReactNode;
-  className?: string;
-};
-
-// Context
-const CollapsibleContext = createContext<CollapsibleContextType | undefined>(undefined);
-
-// Hook
-const useCollapsible = () => {
-  const context = useContext(CollapsibleContext);
-  if (!context) {
-    throw new Error("Collapsible compound components cannot be rendered outside the Collapsible component");
-  }
-  return context;
-};
-
-// Components
-function Root({ children, className, isOpen: controlledIsOpen, onToggle, defaultOpen }: RootProps) {
-  const [localIsOpen, setLocalIsOpen] = useState<boolean>(controlledIsOpen || defaultOpen || false);
-
-  useEffect(() => {
-    if (controlledIsOpen !== undefined) {
-      setLocalIsOpen(controlledIsOpen);
-    }
-  }, [controlledIsOpen]);
-
-  const handleToggle = useCallback(() => {
-    if (controlledIsOpen !== undefined) {
-      onToggle?.();
-    } else {
-      setLocalIsOpen((prev) => !prev);
-    }
-  }, [controlledIsOpen, onToggle]);
-
-  return (
-    <CollapsibleContext.Provider value={{ isOpen: localIsOpen, onToggle: handleToggle }}>
-      <BaseCollapsible.Root
-        className={clsx(className)}
-        defaultOpen={defaultOpen}
-        open={localIsOpen}
-        onOpenChange={handleToggle}
-      >
-        {children}
-      </BaseCollapsible.Root>
-    </CollapsibleContext.Provider>
-  );
-}
-
-function Trigger({ children, className, buttonRef }: TriggerProps) {
-  const { isOpen } = useCollapsible();
-
-  return (
-    <BaseCollapsible.Trigger data-panel-open={isOpen} ref={buttonRef} className={className}>
-      {children}
-    </BaseCollapsible.Trigger>
-  );
-}
-
-function Content({ children, className }: ContentProps) {
-  return (
-    <BaseCollapsible.Panel
-      className={clsx(
-        "flex h-[var(--collapsible-panel-height)] flex-col overflow-hidden text-13 transition-all ease-out data-[ending-style]:h-0 data-[starting-style]:h-0",
-        className
-      )}
-    >
-      {children}
-    </BaseCollapsible.Panel>
-  );
-}
-
-// Compound Component
-export const Collapsible = {
-  CollapsibleRoot: Root,
-  CollapsibleTrigger: Trigger,
-  CollapsibleContent: Content,
-};
diff --git a/packages/propel/src/combobox/combobox.stories.tsx b/packages/propel/src/combobox/combobox.stories.tsx
deleted file mode 100644
index 2db76f698d0..00000000000
--- a/packages/propel/src/combobox/combobox.stories.tsx
+++ /dev/null
@@ -1,266 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ChevronExpandOutline, TickOutline } from "@makeplane/propel/icons";
-import { useArgs } from "storybook/preview-api";
-import { Combobox } from "./combobox";
-
-const frameworks = [
-  { value: "react", label: "React" },
-  { value: "vue", label: "Vue" },
-  { value: "angular", label: "Angular" },
-  { value: "svelte", label: "Svelte" },
-  { value: "solid", label: "Solid" },
-  { value: "next", label: "Next.js" },
-  { value: "nuxt", label: "Nuxt" },
-  { value: "remix", label: "Remix" },
-];
-
-const meta = {
-  title: "Components/Combobox",
-  component: Combobox,
-  subcomponents: {
-    ComboboxButton: Combobox.Button,
-    ComboboxOptions: Combobox.Options,
-    ComboboxOption: Combobox.Option,
-  },
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: {
-    children: null,
-    value: "",
-    onValueChange: () => {},
-  },
-  render(args) {
-    const [{ value }, updateArgs] = useArgs();
-    const setValue = (newValue: string | string[]) => updateArgs({ value: newValue });
-    return (
-      <Combobox {...args} value={value} onValueChange={(v) => setValue(v as string)}>
-        <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
-          <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
-          <ChevronExpandOutline className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Combobox.Button>
-        <Combobox.Options showSearch searchPlaceholder="Search framework..." className="w-72">
-          {frameworks.map((framework) => (
-            <Combobox.Option
-              key={framework.value}
-              value={framework.value}
-              className="flex items-center gap-2 px-4 py-2"
-            >
-              {value === framework.value && <TickOutline className="h-4 w-4" />}
-              <span>{framework.label}</span>
-            </Combobox.Option>
-          ))}
-        </Combobox.Options>
-      </Combobox>
-    );
-  },
-} satisfies Meta<typeof Combobox>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const WithoutSearch: Story = {
-  render() {
-    const [value, setValue] = useState("");
-    return (
-      <Combobox value={value} onValueChange={(v) => setValue(v as string)}>
-        <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
-          <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
-          <ChevronExpandOutline className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Combobox.Button>
-        <Combobox.Options className="w-72">
-          {frameworks.map((framework) => (
-            <Combobox.Option
-              key={framework.value}
-              value={framework.value}
-              className="flex items-center gap-2 px-4 py-2"
-            >
-              {value === framework.value && <TickOutline className="h-4 w-4" />}
-              <span>{framework.label}</span>
-            </Combobox.Option>
-          ))}
-        </Combobox.Options>
-      </Combobox>
-    );
-  },
-};
-
-export const MultiSelect: Story = {
-  render() {
-    const [value, setValue] = useState<string[]>([]);
-
-    return (
-      <Combobox multiSelect value={value} onValueChange={(v) => setValue(v as string[])}>
-        <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
-          <span className="truncate">{value.length > 0 ? `${value.length} selected` : "Select frameworks..."}</span>
-          <ChevronExpandOutline className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Combobox.Button>
-        <Combobox.Options showSearch searchPlaceholder="Search framework..." className="w-72">
-          {frameworks.map((framework) => (
-            <Combobox.Option
-              key={framework.value}
-              value={framework.value}
-              className="flex items-center gap-2 px-4 py-2"
-            >
-              {value.includes(framework.value) && <TickOutline className="h-4 w-4" />}
-              <span>{framework.label}</span>
-            </Combobox.Option>
-          ))}
-        </Combobox.Options>
-      </Combobox>
-    );
-  },
-};
-
-export const MultiSelectWithLimit: Story = {
-  render() {
-    const [value, setValue] = useState<string[]>([]);
-
-    return (
-      <div className="space-y-2">
-        <Combobox multiSelect maxSelections={3} value={value} onValueChange={(v) => setValue(v as string[])}>
-          <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
-            <span className="truncate">
-              {value.length > 0 ? `${value.length}/3 selected` : "Select up to 3 frameworks..."}
-            </span>
-            <ChevronExpandOutline className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-          </Combobox.Button>
-          <Combobox.Options showSearch searchPlaceholder="Search framework..." className="w-72">
-            {frameworks.map((framework) => (
-              <Combobox.Option
-                key={framework.value}
-                value={framework.value}
-                className="flex items-center gap-2 px-4 py-2"
-              >
-                {value.includes(framework.value) && <TickOutline className="h-4 w-4" />}
-                <span>{framework.label}</span>
-              </Combobox.Option>
-            ))}
-          </Combobox.Options>
-        </Combobox>
-        <p className="text-gray-500 text-11">Maximum 3 selections allowed</p>
-      </div>
-    );
-  },
-};
-
-export const Disabled: Story = {
-  args: { disabled: true },
-  render() {
-    const [value, setValue] = useState("");
-    return (
-      <Combobox disabled value={value} onValueChange={(v) => setValue(v as string)}>
-        <Combobox.Button className="border-gray-300 bg-gray-100 flex w-72 items-center justify-between rounded-md border px-4 py-2 opacity-50">
-          <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
-          <ChevronExpandOutline className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Combobox.Button>
-        <Combobox.Options showSearch searchPlaceholder="Search framework..." className="w-72">
-          {frameworks.map((framework) => (
-            <Combobox.Option
-              key={framework.value}
-              value={framework.value}
-              className="flex items-center gap-2 px-4 py-2"
-            >
-              {value === framework.value && <TickOutline className="h-4 w-4" />}
-              <span>{framework.label}</span>
-            </Combobox.Option>
-          ))}
-        </Combobox.Options>
-      </Combobox>
-    );
-  },
-};
-
-export const DisabledOptions: Story = {
-  render() {
-    const [value, setValue] = useState("");
-    return (
-      <Combobox value={value} onValueChange={(v) => setValue(v as string)}>
-        <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
-          <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
-          <ChevronExpandOutline className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Combobox.Button>
-        <Combobox.Options showSearch searchPlaceholder="Search framework..." className="w-72">
-          {frameworks.map((framework) => (
-            <Combobox.Option
-              key={framework.value}
-              value={framework.value}
-              disabled={framework.value === "angular" || framework.value === "svelte"}
-              className="flex items-center gap-2 px-4 py-2"
-            >
-              {value === framework.value && <TickOutline className="h-4 w-4" />}
-              <span>{framework.label}</span>
-            </Combobox.Option>
-          ))}
-        </Combobox.Options>
-      </Combobox>
-    );
-  },
-};
-
-export const CustomMaxHeight: Story = {
-  render() {
-    const [value, setValue] = useState("");
-    return (
-      <Combobox value={value} onValueChange={(v) => setValue(v as string)}>
-        <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
-          <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
-          <ChevronExpandOutline className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Combobox.Button>
-        <Combobox.Options showSearch searchPlaceholder="Search framework..." maxHeight="sm" className="w-72">
-          {frameworks.map((framework) => (
-            <Combobox.Option
-              key={framework.value}
-              value={framework.value}
-              className="flex items-center gap-2 px-4 py-2"
-            >
-              {value === framework.value && <TickOutline className="h-4 w-4" />}
-              <span>{framework.label}</span>
-            </Combobox.Option>
-          ))}
-        </Combobox.Options>
-      </Combobox>
-    );
-  },
-};
-
-export const CustomEmptyMessage: Story = {
-  render() {
-    const [value, setValue] = useState("");
-    return (
-      <Combobox value={value} onValueChange={(v) => setValue(v as string)}>
-        <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
-          <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
-          <ChevronExpandOutline className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Combobox.Button>
-        <Combobox.Options
-          showSearch
-          searchPlaceholder="Search framework..."
-          emptyMessage="No frameworks found. Try a different search."
-          className="w-72"
-        >
-          {frameworks.map((framework) => (
-            <Combobox.Option
-              key={framework.value}
-              value={framework.value}
-              className="flex items-center gap-2 px-4 py-2"
-            >
-              {value === framework.value && <TickOutline className="h-4 w-4" />}
-              <span>{framework.label}</span>
-            </Combobox.Option>
-          ))}
-        </Combobox.Options>
-      </Combobox>
-    );
-  },
-};
diff --git a/packages/propel/src/combobox/combobox.tsx b/packages/propel/src/combobox/combobox.tsx
deleted file mode 100644
index c4e83c0568d..00000000000
--- a/packages/propel/src/combobox/combobox.tsx
+++ /dev/null
@@ -1,237 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-import { Combobox as BaseCombobox } from "@base-ui-components/react/combobox";
-import { SearchOutline } from "@makeplane/propel/icons";
-import { cn } from "../utils/classname";
-
-// Type definitions
-type TMaxHeight = "lg" | "md" | "rg" | "sm";
-
-export interface ComboboxProps {
-  value?: string | string[];
-  defaultValue?: string | string[];
-  onValueChange?: (value: string | string[]) => void;
-  multiSelect?: boolean;
-  maxSelections?: number;
-  disabled?: boolean;
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  children: React.ReactNode;
-}
-
-export interface ComboboxButtonProps {
-  disabled?: boolean;
-  children?: React.ReactNode;
-  className?: string;
-  ref?: React.Ref<HTMLButtonElement>;
-}
-
-export interface ComboboxOptionsProps {
-  searchPlaceholder?: string;
-  emptyMessage?: string;
-  showSearch?: boolean;
-  className?: string;
-  children?: React.ReactNode;
-  maxHeight?: TMaxHeight;
-  inputClassName?: string;
-  optionsContainerClassName?: string;
-  positionerClassName?: string;
-  searchQuery?: string;
-  onSearchQueryChange?: (query: string) => void;
-  onSearchQueryKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-  dataPreventOutsideClick?: boolean;
-}
-
-export interface ComboboxOptionProps {
-  value: string;
-  disabled?: boolean;
-  children?: React.ReactNode;
-  className?: string;
-}
-
-// Constants
-const MAX_HEIGHT_CLASSES: Record<TMaxHeight, string> = {
-  lg: "max-h-60",
-  md: "max-h-48",
-  rg: "max-h-36",
-  sm: "max-h-28",
-} as const;
-
-// Root component
-function ComboboxRoot({
-  value,
-  defaultValue,
-  onValueChange,
-  multiSelect = false,
-  disabled = false,
-  open,
-  onOpenChange,
-  children,
-}: ComboboxProps) {
-  const handleValueChange = React.useCallback(
-    (newValue: string | string[]) => {
-      onValueChange?.(newValue);
-    },
-    [onValueChange]
-  );
-
-  return (
-    <BaseCombobox.Root
-      value={value}
-      defaultValue={defaultValue}
-      onValueChange={handleValueChange}
-      multiple={multiSelect}
-      disabled={disabled}
-      open={open}
-      onOpenChange={onOpenChange}
-    >
-      {children}
-    </BaseCombobox.Root>
-  );
-}
-
-// Trigger button component
-const ComboboxButton = React.forwardRef(function ComboboxButton(
-  { className, children, disabled = false }: ComboboxButtonProps,
-  ref: React.ForwardedRef<HTMLButtonElement>
-) {
-  return (
-    <BaseCombobox.Trigger ref={ref} disabled={disabled} className={className}>
-      {children}
-    </BaseCombobox.Trigger>
-  );
-});
-
-// Options popup component
-function ComboboxOptions({
-  children,
-  showSearch = false,
-  searchPlaceholder,
-  maxHeight = "lg",
-  className,
-  inputClassName,
-  optionsContainerClassName,
-  emptyMessage = "No results found",
-  positionerClassName,
-  searchQuery: controlledSearchQuery,
-  onSearchQueryChange,
-  onSearchQueryKeyDown,
-  dataPreventOutsideClick,
-}: ComboboxOptionsProps) {
-  // const [searchQuery, setSearchQuery] = React.useState("");
-  const [internalSearchQuery, setInternalSearchQuery] = React.useState("");
-
-  const searchQuery = controlledSearchQuery !== undefined ? controlledSearchQuery : internalSearchQuery;
-
-  const setSearchQuery = React.useCallback(
-    (query: string) => {
-      if (onSearchQueryChange) {
-        onSearchQueryChange(query);
-      } else {
-        setInternalSearchQuery(query);
-      }
-    },
-    [onSearchQueryChange]
-  );
-
-  // Filter children based on search query
-  const filteredChildren = React.useMemo(() => {
-    if (!showSearch || !searchQuery) return children;
-
-    return React.Children.toArray(children).filter((child) => {
-      // React 19 defaults ReactElement's props to `unknown`; name the shape read below.
-      if (!React.isValidElement<{ children?: React.ReactNode; value?: string }>(child)) return true;
-
-      // Only filter ComboboxOption components, leave other elements (like additional content) unfiltered
-      if (child.type !== ComboboxOption) return true;
-
-      // Extract text content from child to search against
-      const getTextContent = (node: React.ReactNode): string => {
-        if (typeof node === "string") return node;
-        if (typeof node === "number") return String(node);
-        if (React.isValidElement<{ children?: React.ReactNode }>(node) && node.props.children) {
-          return getTextContent(node.props.children);
-        }
-        if (Array.isArray(node)) {
-          return node.map(getTextContent).join(" ");
-        }
-        return "";
-      };
-
-      const textContent = getTextContent(child.props.children);
-      const value = child.props.value || "";
-
-      const searchLower = searchQuery.toLowerCase();
-      return textContent.toLowerCase().includes(searchLower) || String(value).toLowerCase().includes(searchLower);
-    });
-  }, [children, searchQuery, showSearch]);
-
-  return (
-    <BaseCombobox.Portal>
-      <BaseCombobox.Positioner sideOffset={8} className={positionerClassName}>
-        <BaseCombobox.Popup
-          className={cn("shadow-lg rounded-md border border-subtle bg-surface-1 p-1", className)}
-          data-prevent-outside-click={dataPreventOutsideClick}
-        >
-          <div className="flex flex-col gap-1">
-            {showSearch && (
-              <div className="relative">
-                <SearchOutline className="absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2 text-placeholder" />
-                <input
-                  type="text"
-                  placeholder={searchPlaceholder}
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  onKeyDown={onSearchQueryKeyDown}
-                  className={cn(
-                    "w-full rounded-sm border border-subtle bg-surface-2 py-1.5 pr-2 pl-8 text-13 outline-none placeholder:text-placeholder",
-                    inputClassName
-                  )}
-                />
-              </div>
-            )}
-            <BaseCombobox.List
-              className={cn("overflow-auto outline-none", MAX_HEIGHT_CLASSES[maxHeight], optionsContainerClassName)}
-            >
-              {filteredChildren}
-              {showSearch &&
-                emptyMessage &&
-                React.Children.count(
-                  React.Children.toArray(filteredChildren).filter(
-                    (child) => React.isValidElement(child) && child.type === ComboboxOption
-                  )
-                ) === 0 && <div className="px-2 py-1.5 text-13 text-placeholder">{emptyMessage}</div>}
-            </BaseCombobox.List>
-          </div>
-        </BaseCombobox.Popup>
-      </BaseCombobox.Positioner>
-    </BaseCombobox.Portal>
-  );
-}
-
-// Individual option component
-function ComboboxOption({ value, children, disabled, className }: ComboboxOptionProps) {
-  return (
-    <BaseCombobox.Item
-      value={value}
-      disabled={disabled}
-      className={cn("cursor-pointer rounded-sm px-2 py-1.5 text-13 transition-colors outline-none", className)}
-    >
-      {children}
-    </BaseCombobox.Item>
-  );
-}
-
-// Compound component export
-const Combobox = Object.assign(ComboboxRoot, {
-  Button: ComboboxButton,
-  Options: ComboboxOptions,
-  Option: ComboboxOption,
-});
-
-export { Combobox };
diff --git a/packages/propel/src/combobox/index.ts b/packages/propel/src/combobox/index.ts
deleted file mode 100644
index 8004ba5ec4e..00000000000
--- a/packages/propel/src/combobox/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./combobox";
diff --git a/packages/propel/src/command/command.stories.tsx b/packages/propel/src/command/command.stories.tsx
deleted file mode 100644
index ab440d8b141..00000000000
--- a/packages/propel/src/command/command.stories.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { FileOutline, FolderOutline, SettingsOutline, UserOutline } from "@makeplane/propel/icons";
-import { Command } from "./command";
-
-const meta = {
-  title: "Components/Command",
-  component: Command,
-  subcomponents: {
-    CommandInput: Command.Input,
-    CommandList: Command.List,
-    CommandItem: Command.Item,
-    CommandEmpty: Command.Empty,
-  },
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Command>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render() {
-    return (
-      <Command className="border-gray-200 w-96 rounded-lg border p-2">
-        <Command.Input placeholder="Search..." className="h-9 w-full bg-transparent py-3 text-13 outline-none" />
-        <Command.List className="max-h-80 overflow-auto py-2">
-          <Command.Item className="hover:bg-gray-100 cursor-pointer rounded-sm px-3 py-2">Item 1</Command.Item>
-          <Command.Item className="hover:bg-gray-100 cursor-pointer rounded-sm px-3 py-2">Item 2</Command.Item>
-          <Command.Item className="hover:bg-gray-100 cursor-pointer rounded-sm px-3 py-2">Item 3</Command.Item>
-        </Command.List>
-        <Command.Empty className="text-gray-500 py-6 text-center text-13">No results found.</Command.Empty>
-      </Command>
-    );
-  },
-};
-
-export const WithIcons: Story = {
-  render() {
-    return (
-      <Command className="border-gray-200 w-96 rounded-lg border p-2">
-        <Command.Input
-          placeholder="Search files and folders..."
-          className="h-9 w-full bg-transparent py-3 text-13 outline-none"
-        />
-        <Command.List className="max-h-80 overflow-auto py-2">
-          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
-            <FolderOutline className="h-4 w-4" />
-            <span>Documents</span>
-          </Command.Item>
-          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
-            <FolderOutline className="h-4 w-4" />
-            <span>Downloads</span>
-          </Command.Item>
-          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
-            <FileOutline className="h-4 w-4" />
-            <span>README.md</span>
-          </Command.Item>
-          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
-            <FileOutline className="h-4 w-4" />
-            <span>package.json</span>
-          </Command.Item>
-        </Command.List>
-        <Command.Empty className="text-gray-500 py-6 text-center text-13">No files or folders found.</Command.Empty>
-      </Command>
-    );
-  },
-};
-
-export const WithCategories: Story = {
-  render() {
-    return (
-      <Command className="border-gray-200 w-96 rounded-lg border p-2">
-        <Command.Input
-          placeholder="Search commands..."
-          className="h-9 w-full bg-transparent py-3 text-13 outline-none"
-        />
-        <Command.List className="max-h-80 overflow-auto py-2">
-          <div className="text-gray-500 px-2 py-1.5 text-11 font-semibold">User</div>
-          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
-            <UserOutline className="h-4 w-4" />
-            <span>Profile</span>
-          </Command.Item>
-          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
-            <SettingsOutline className="h-4 w-4" />
-            <span>Settings</span>
-          </Command.Item>
-
-          <div className="text-gray-500 mt-2 px-2 py-1.5 text-11 font-semibold">Files</div>
-          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
-            <FolderOutline className="h-4 w-4" />
-            <span>Open Folder</span>
-          </Command.Item>
-          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
-            <FileOutline className="h-4 w-4" />
-            <span>New File</span>
-          </Command.Item>
-        </Command.List>
-        <Command.Empty className="text-gray-500 py-6 text-center text-13">No commands found.</Command.Empty>
-      </Command>
-    );
-  },
-};
-
-export const EmptyState: Story = {
-  render() {
-    return (
-      <Command className="border-gray-200 w-96 rounded-lg border p-2">
-        <Command.Input placeholder="Search..." className="h-9 w-full bg-transparent py-3 text-13 outline-none" />
-        <Command.List className="max-h-80 overflow-auto py-2">{/* No items - will show empty state */}</Command.List>
-        <Command.Empty className="text-gray-500 py-6 text-center text-13">
-          <p className="font-semibold">No results found</p>
-          <p className="mt-1 text-11">Try searching for something else</p>
-        </Command.Empty>
-      </Command>
-    );
-  },
-};
-
-export const LongList: Story = {
-  render() {
-    return (
-      <Command className="border-gray-200 w-96 rounded-lg border p-2">
-        <Command.Input placeholder="Search items..." className="h-9 w-full bg-transparent py-3 text-13 outline-none" />
-        <Command.List className="max-h-60 overflow-auto py-2">
-          {Array.from({ length: 20 }, (_, i) => (
-            <Command.Item key={i} className="hover:bg-gray-100 cursor-pointer rounded-sm px-3 py-2">
-              Item {i + 1}
-            </Command.Item>
-          ))}
-        </Command.List>
-        <Command.Empty className="text-gray-500 py-6 text-center text-13">No results found.</Command.Empty>
-      </Command>
-    );
-  },
-};
-
-export const WithoutSearch: Story = {
-  render() {
-    return (
-      <Command className="border-gray-200 w-96 rounded-lg border p-2">
-        <Command.List className="max-h-80 overflow-auto py-2">
-          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
-            <UserOutline className="h-4 w-4" />
-            <span>Profile</span>
-          </Command.Item>
-          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
-            <SettingsOutline className="h-4 w-4" />
-            <span>Settings</span>
-          </Command.Item>
-          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
-            <FolderOutline className="h-4 w-4" />
-            <span>Files</span>
-          </Command.Item>
-        </Command.List>
-      </Command>
-    );
-  },
-};
-
-export const CustomStyling: Story = {
-  render() {
-    return (
-      <Command className="border-blue-300 bg-blue-50 shadow-lg w-96 rounded-lg border-2 p-2">
-        <Command.Input
-          placeholder="Search with custom styling..."
-          className="text-blue-900 placeholder:text-blue-400 h-9 w-full bg-transparent py-3 text-13 outline-none"
-        />
-        <Command.List className="max-h-80 overflow-auto py-2">
-          <Command.Item className="text-blue-900 hover:bg-blue-200 cursor-pointer rounded-sm px-3 py-2">
-            Custom Item 1
-          </Command.Item>
-          <Command.Item className="text-blue-900 hover:bg-blue-200 cursor-pointer rounded-sm px-3 py-2">
-            Custom Item 2
-          </Command.Item>
-          <Command.Item className="text-blue-900 hover:bg-blue-200 cursor-pointer rounded-sm px-3 py-2">
-            Custom Item 3
-          </Command.Item>
-        </Command.List>
-        <Command.Empty className="text-blue-500 py-6 text-center text-13">No matching items found.</Command.Empty>
-      </Command>
-    );
-  },
-};
-
-export const DisabledItems: Story = {
-  render() {
-    return (
-      <Command className="border-gray-200 w-96 rounded-lg border p-2">
-        <Command.Input placeholder="Search..." className="h-9 w-full bg-transparent py-3 text-13 outline-none" />
-        <Command.List className="max-h-80 overflow-auto py-2">
-          <Command.Item className="hover:bg-gray-100 cursor-pointer rounded-sm px-3 py-2">Active Item 1</Command.Item>
-          <Command.Item disabled className="cursor-not-allowed rounded-sm px-3 py-2 opacity-50">
-            Disabled Item
-          </Command.Item>
-          <Command.Item className="hover:bg-gray-100 cursor-pointer rounded-sm px-3 py-2">Active Item 2</Command.Item>
-        </Command.List>
-        <Command.Empty className="text-gray-500 py-6 text-center text-13">No results found.</Command.Empty>
-      </Command>
-    );
-  },
-};
diff --git a/packages/propel/src/command/command.tsx b/packages/propel/src/command/command.tsx
deleted file mode 100644
index 3d9496930cb..00000000000
--- a/packages/propel/src/command/command.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-import { Command as CommandPrimitive } from "cmdk";
-import { SearchOutline } from "@makeplane/propel/icons";
-import { cn } from "../utils/classname";
-
-function CommandComponent({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
-  return <CommandPrimitive data-slot="command" className={cn("", className)} {...props} />;
-}
-
-function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
-  return (
-    <div
-      data-slot="command-input-wrapper"
-      className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2"
-    >
-      <SearchOutline className="size-3.5 flex-shrink-0 text-placeholder" />
-      <CommandPrimitive.Input data-slot="command-input" className={cn(className)} {...props} />
-    </div>
-  );
-}
-
-function CommandList({ ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
-  return <CommandPrimitive.List data-slot="command-list" {...props} />;
-}
-
-function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-  return <CommandPrimitive.Empty data-slot="command-empty" {...props} />;
-}
-
-function CommandItem({ ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
-  return <CommandPrimitive.Item data-slot="command-item" {...props} />;
-}
-
-const Command = Object.assign(CommandComponent, {
-  Input: CommandInput,
-  List: CommandList,
-  Empty: CommandEmpty,
-  Item: CommandItem,
-});
-
-export { Command };
diff --git a/packages/propel/src/command/index.ts b/packages/propel/src/command/index.ts
deleted file mode 100644
index 0fc4f85f987..00000000000
--- a/packages/propel/src/command/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./command";
diff --git a/packages/propel/src/context-menu/context-menu.stories.tsx b/packages/propel/src/context-menu/context-menu.stories.tsx
deleted file mode 100644
index c7069a0dcc4..00000000000
--- a/packages/propel/src/context-menu/context-menu.stories.tsx
+++ /dev/null
@@ -1,391 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import {
-  ArchiveOutline,
-  ChevronRightOutline,
-  CopyOutline,
-  DeleteOutline,
-  DownloadOutline,
-  EditOutline,
-  ShareOutline,
-  StarOutline,
-} from "@makeplane/propel/icons";
-import { ContextMenu } from "./context-menu";
-
-// cannot use satisfies here because base-ui does not have portable types.
-const meta: Meta<typeof ContextMenu> = {
-  title: "Components/ContextMenu",
-  component: ContextMenu,
-  subcomponents: {
-    ContextMenuTrigger: ContextMenu.Trigger,
-    ContextMenuPortal: ContextMenu.Portal,
-    ContextMenuContent: ContextMenu.Content,
-    ContextMenuItem: ContextMenu.Item,
-    ContextMenuSeparator: ContextMenu.Separator,
-    ContextMenuSubmenu: ContextMenu.Submenu,
-    ContextMenuSubmenuTrigger: ContextMenu.SubmenuTrigger,
-  },
-  args: {
-    children: null,
-  },
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render() {
-    return (
-      <ContextMenu>
-        <ContextMenu.Trigger>
-          <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-strong text-13">
-            Right click here
-          </div>
-        </ContextMenu.Trigger>
-        <ContextMenu.Portal>
-          <ContextMenu.Content>
-            <ContextMenu.Item>Back</ContextMenu.Item>
-            <ContextMenu.Item>Forward</ContextMenu.Item>
-            <ContextMenu.Item>Reload</ContextMenu.Item>
-            <ContextMenu.Separator />
-            <ContextMenu.Item>More Tools</ContextMenu.Item>
-          </ContextMenu.Content>
-        </ContextMenu.Portal>
-      </ContextMenu>
-    );
-  },
-};
-
-export const WithIcons: Story = {
-  render() {
-    return (
-      <ContextMenu>
-        <ContextMenu.Trigger>
-          <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-strong text-13">
-            Right click here
-          </div>
-        </ContextMenu.Trigger>
-        <ContextMenu.Portal>
-          <ContextMenu.Content>
-            <ContextMenu.Item>
-              <CopyOutline className="mr-2 h-4 w-4" />
-              Copy
-            </ContextMenu.Item>
-            <ContextMenu.Item>
-              <EditOutline className="mr-2 h-4 w-4" />
-              Edit
-            </ContextMenu.Item>
-            <ContextMenu.Item>
-              <DownloadOutline className="mr-2 h-4 w-4" />
-              Download
-            </ContextMenu.Item>
-            <ContextMenu.Separator />
-            <ContextMenu.Item>
-              <ShareOutline className="mr-2 h-4 w-4" />
-              Share
-            </ContextMenu.Item>
-            <ContextMenu.Item>
-              <DeleteOutline className="mr-2 h-4 w-4 text-danger-primary" />
-              <span className="text-danger-primary">Delete</span>
-            </ContextMenu.Item>
-          </ContextMenu.Content>
-        </ContextMenu.Portal>
-      </ContextMenu>
-    );
-  },
-};
-
-export const WithSubmenus: Story = {
-  render() {
-    return (
-      <ContextMenu>
-        <ContextMenu.Trigger>
-          <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-strong text-13">
-            Right click here
-          </div>
-        </ContextMenu.Trigger>
-        <ContextMenu.Portal>
-          <ContextMenu.Content>
-            <ContextMenu.Item>
-              <CopyOutline className="mr-2 h-4 w-4" />
-              Copy
-            </ContextMenu.Item>
-            <ContextMenu.Item>
-              <EditOutline className="mr-2 h-4 w-4" />
-              Edit
-            </ContextMenu.Item>
-            <ContextMenu.Separator />
-            <ContextMenu.Submenu>
-              <ContextMenu.SubmenuTrigger>
-                <ShareOutline className="mr-2 h-4 w-4" />
-                Share
-                <ChevronRightOutline className="ml-auto h-4 w-4" />
-              </ContextMenu.SubmenuTrigger>
-              <ContextMenu.Portal>
-                <ContextMenu.Content>
-                  <ContextMenu.Item>Email</ContextMenu.Item>
-                  <ContextMenu.Item>Message</ContextMenu.Item>
-                  <ContextMenu.Item>Copy Link</ContextMenu.Item>
-                </ContextMenu.Content>
-              </ContextMenu.Portal>
-            </ContextMenu.Submenu>
-            <ContextMenu.Separator />
-            <ContextMenu.Item>
-              <DeleteOutline className="mr-2 h-4 w-4 text-danger-primary" />
-              <span className="text-danger-primary">Delete</span>
-            </ContextMenu.Item>
-          </ContextMenu.Content>
-        </ContextMenu.Portal>
-      </ContextMenu>
-    );
-  },
-};
-
-export const DisabledItems: Story = {
-  render() {
-    return (
-      <ContextMenu>
-        <ContextMenu.Trigger>
-          <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-strong text-13">
-            Right click here
-          </div>
-        </ContextMenu.Trigger>
-        <ContextMenu.Portal>
-          <ContextMenu.Content>
-            <ContextMenu.Item>
-              <CopyOutline className="mr-2 h-4 w-4" />
-              Copy
-            </ContextMenu.Item>
-            <ContextMenu.Item disabled>
-              <EditOutline className="mr-2 h-4 w-4" />
-              Edit (Disabled)
-            </ContextMenu.Item>
-            <ContextMenu.Item>
-              <DownloadOutline className="mr-2 h-4 w-4" />
-              Download
-            </ContextMenu.Item>
-            <ContextMenu.Separator />
-            <ContextMenu.Item disabled>
-              <ShareOutline className="mr-2 h-4 w-4" />
-              Share (Disabled)
-            </ContextMenu.Item>
-            <ContextMenu.Item>
-              <DeleteOutline className="mr-2 h-4 w-4 text-danger-primary" />
-              <span className="text-danger-primary">Delete</span>
-            </ContextMenu.Item>
-          </ContextMenu.Content>
-        </ContextMenu.Portal>
-      </ContextMenu>
-    );
-  },
-};
-
-export const OnFileCard: Story = {
-  render() {
-    return (
-      <ContextMenu>
-        <ContextMenu.Trigger>
-          <div className="w-64 cursor-pointer rounded-lg border border-subtle p-4 hover:bg-layer-1">
-            <div className="flex items-center gap-3">
-              <div className="flex h-12 w-12 items-center justify-center rounded-sm bg-accent-primary text-16 text-on-color">
-                📄
-              </div>
-              <div className="flex-1">
-                <div className="font-medium">Document.pdf</div>
-                <div className="text-13 text-placeholder">2.4 MB</div>
-              </div>
-            </div>
-          </div>
-        </ContextMenu.Trigger>
-        <ContextMenu.Portal>
-          <ContextMenu.Content>
-            <ContextMenu.Item>
-              <DownloadOutline className="mr-2 h-4 w-4" />
-              Download
-            </ContextMenu.Item>
-            <ContextMenu.Item>
-              <CopyOutline className="mr-2 h-4 w-4" />
-              Copy Link
-            </ContextMenu.Item>
-            <ContextMenu.Item>
-              <StarOutline className="mr-2 h-4 w-4" />
-              Add to Favorites
-            </ContextMenu.Item>
-            <ContextMenu.Separator />
-            <ContextMenu.Item>
-              <ArchiveOutline className="mr-2 h-4 w-4" />
-              Archive
-            </ContextMenu.Item>
-            <ContextMenu.Item>
-              <DeleteOutline className="mr-2 h-4 w-4 text-danger-primary" />
-              <span className="text-danger-primary">Delete</span>
-            </ContextMenu.Item>
-          </ContextMenu.Content>
-        </ContextMenu.Portal>
-      </ContextMenu>
-    );
-  },
-};
-
-export const OnImage: Story = {
-  render() {
-    return (
-      <ContextMenu>
-        <ContextMenu.Trigger>
-          <div className="relative h-56 w-80 cursor-pointer overflow-hidden rounded-lg bg-layer-1">
-            <div className="absolute inset-0 flex items-center justify-center text-placeholder">Image Placeholder</div>
-          </div>
-        </ContextMenu.Trigger>
-        <ContextMenu.Portal>
-          <ContextMenu.Content>
-            <ContextMenu.Item>
-              <DownloadOutline className="mr-2 h-4 w-4" />
-              Save Image
-            </ContextMenu.Item>
-            <ContextMenu.Item>
-              <CopyOutline className="mr-2 h-4 w-4" />
-              Copy Image
-            </ContextMenu.Item>
-            <ContextMenu.Item>
-              <CopyOutline className="mr-2 h-4 w-4" />
-              Copy Image URL
-            </ContextMenu.Item>
-            <ContextMenu.Separator />
-            <ContextMenu.Item>Open Image in New Tab</ContextMenu.Item>
-          </ContextMenu.Content>
-        </ContextMenu.Portal>
-      </ContextMenu>
-    );
-  },
-};
-
-export const OnText: Story = {
-  render() {
-    return (
-      <ContextMenu>
-        <ContextMenu.Trigger>
-          <div className="w-96 rounded-lg border border-subtle p-6">
-            <h3 className="mb-2 text-16 font-semibold">Context Menu on Text</h3>
-            <p className="text-tertiary">
-              Right click anywhere on this text area to see the context menu. This demonstrates how context menus can be
-              applied to text content areas.
-            </p>
-          </div>
-        </ContextMenu.Trigger>
-        <ContextMenu.Portal>
-          <ContextMenu.Content>
-            <ContextMenu.Item>
-              <CopyOutline className="mr-2 h-4 w-4" />
-              Copy
-            </ContextMenu.Item>
-            <ContextMenu.Item>
-              <EditOutline className="mr-2 h-4 w-4" />
-              Edit
-            </ContextMenu.Item>
-            <ContextMenu.Separator />
-            <ContextMenu.Item>Select All</ContextMenu.Item>
-          </ContextMenu.Content>
-        </ContextMenu.Portal>
-      </ContextMenu>
-    );
-  },
-};
-
-export const NestedSubmenus: Story = {
-  render() {
-    return (
-      <ContextMenu>
-        <ContextMenu.Trigger>
-          <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-strong text-13">
-            Right click here
-          </div>
-        </ContextMenu.Trigger>
-        <ContextMenu.Portal>
-          <ContextMenu.Content>
-            <ContextMenu.Item>New File</ContextMenu.Item>
-            <ContextMenu.Item>New Folder</ContextMenu.Item>
-            <ContextMenu.Separator />
-            <ContextMenu.Submenu>
-              <ContextMenu.SubmenuTrigger>
-                Import
-                <ChevronRightOutline className="ml-auto h-4 w-4" />
-              </ContextMenu.SubmenuTrigger>
-              <ContextMenu.Portal>
-                <ContextMenu.Content>
-                  <ContextMenu.Item>From File</ContextMenu.Item>
-                  <ContextMenu.Item>From URL</ContextMenu.Item>
-                  <ContextMenu.Submenu>
-                    <ContextMenu.SubmenuTrigger>
-                      From Cloud
-                      <ChevronRightOutline className="ml-auto h-4 w-4" />
-                    </ContextMenu.SubmenuTrigger>
-                    <ContextMenu.Portal>
-                      <ContextMenu.Content>
-                        <ContextMenu.Item>Google Drive</ContextMenu.Item>
-                        <ContextMenu.Item>Dropbox</ContextMenu.Item>
-                        <ContextMenu.Item>OneDrive</ContextMenu.Item>
-                      </ContextMenu.Content>
-                    </ContextMenu.Portal>
-                  </ContextMenu.Submenu>
-                </ContextMenu.Content>
-              </ContextMenu.Portal>
-            </ContextMenu.Submenu>
-            <ContextMenu.Separator />
-            <ContextMenu.Item>
-              <DeleteOutline className="mr-2 h-4 w-4 text-danger-primary" />
-              <span className="text-danger-primary">Delete</span>
-            </ContextMenu.Item>
-          </ContextMenu.Content>
-        </ContextMenu.Portal>
-      </ContextMenu>
-    );
-  },
-};
-
-export const WithKeyboardShortcuts: Story = {
-  render() {
-    return (
-      <ContextMenu>
-        <ContextMenu.Trigger>
-          <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-strong text-13">
-            Right click here
-          </div>
-        </ContextMenu.Trigger>
-        <ContextMenu.Portal>
-          <ContextMenu.Content>
-            <ContextMenu.Item>
-              <CopyOutline className="mr-2 h-4 w-4" />
-              Copy
-              <span className="ml-auto text-11 text-placeholder">⌘C</span>
-            </ContextMenu.Item>
-            <ContextMenu.Item>
-              <EditOutline className="mr-2 h-4 w-4" />
-              Edit
-              <span className="ml-auto text-11 text-placeholder">⌘E</span>
-            </ContextMenu.Item>
-            <ContextMenu.Item>
-              <DownloadOutline className="mr-2 h-4 w-4" />
-              Download
-              <span className="ml-auto text-11 text-placeholder">⌘D</span>
-            </ContextMenu.Item>
-            <ContextMenu.Separator />
-            <ContextMenu.Item>
-              <DeleteOutline className="mr-2 h-4 w-4 text-danger-primary" />
-              <span className="text-danger-primary">Delete</span>
-              <span className="ml-auto text-11 text-placeholder">⌘⌫</span>
-            </ContextMenu.Item>
-          </ContextMenu.Content>
-        </ContextMenu.Portal>
-      </ContextMenu>
-    );
-  },
-};
diff --git a/packages/propel/src/context-menu/context-menu.tsx b/packages/propel/src/context-menu/context-menu.tsx
deleted file mode 100644
index e5d0211a8cb..00000000000
--- a/packages/propel/src/context-menu/context-menu.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-import { ContextMenu as ContextMenuPrimitive } from "@base-ui-components/react/context-menu";
-import { cn } from "../utils";
-
-export interface ContextMenuProps extends React.ComponentProps<typeof ContextMenuPrimitive.Root> {
-  children: React.ReactNode;
-}
-
-export interface ContextMenuTriggerProps extends React.ComponentProps<typeof ContextMenuPrimitive.Trigger> {
-  children: React.ReactNode;
-  className?: string;
-}
-
-export interface ContextMenuContentProps extends React.ComponentProps<typeof ContextMenuPrimitive.Positioner> {
-  children: React.ReactNode;
-  className?: string;
-  side?: "top" | "right" | "bottom" | "left";
-  sideOffset?: number;
-  positionerClassName?: string;
-}
-
-export interface ContextMenuItemProps extends React.ComponentProps<typeof ContextMenuPrimitive.Item> {
-  children: React.ReactNode;
-  className?: string;
-  disabled?: boolean;
-}
-
-const ContextMenuRoot = React.forwardRef(function ContextMenuRoot(
-  { children, ...props }: ContextMenuProps,
-  _ref: React.ForwardedRef<React.ElementRef<typeof ContextMenuPrimitive.Root>>
-) {
-  return <ContextMenuPrimitive.Root {...props}>{children}</ContextMenuPrimitive.Root>;
-});
-
-const ContextMenuTrigger = React.forwardRef(function ContextMenuTrigger(
-  { className, children, ...props }: ContextMenuTriggerProps,
-  ref: React.ForwardedRef<React.ElementRef<typeof ContextMenuPrimitive.Trigger>>
-) {
-  return (
-    <ContextMenuPrimitive.Trigger ref={ref} className={cn("outline-none", className)} {...props}>
-      {children}
-    </ContextMenuPrimitive.Trigger>
-  );
-});
-
-const ContextMenuPortal = ContextMenuPrimitive.Portal;
-
-const ContextMenuContent = React.forwardRef(function ContextMenuContent(
-  { positionerClassName, className, children, side = "bottom", sideOffset = 4, ...props }: ContextMenuContentProps,
-  ref: React.ForwardedRef<React.ElementRef<typeof ContextMenuPrimitive.Positioner>>
-) {
-  return (
-    <ContextMenuPrimitive.Positioner
-      ref={ref}
-      side={side}
-      sideOffset={sideOffset}
-      {...props}
-      className={positionerClassName}
-    >
-      <ContextMenuPrimitive.Popup
-        className={cn(
-          "shadow-md z-50 min-w-32 overflow-hidden rounded-md border border-subtle bg-surface-1 p-1",
-          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-          "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
-          "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-          className
-        )}
-      >
-        {children}
-      </ContextMenuPrimitive.Popup>
-    </ContextMenuPrimitive.Positioner>
-  );
-});
-
-const ContextMenuItem = React.forwardRef(function ContextMenuItem(
-  { className, disabled, children, ...props }: ContextMenuItemProps,
-  ref: React.ForwardedRef<React.ElementRef<typeof ContextMenuPrimitive.Item>>
-) {
-  return (
-    <ContextMenuPrimitive.Item
-      ref={ref}
-      className={cn(
-        "relative flex cursor-default items-center rounded-xs px-2 py-1.5 text-13 outline-none select-none",
-        "focus:bg-surface-2 focus:text-primary",
-        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        className
-      )}
-      disabled={disabled}
-      {...props}
-    >
-      {children}
-    </ContextMenuPrimitive.Item>
-  );
-});
-
-const ContextMenuSeparator = React.forwardRef(function ContextMenuSeparator(
-  { className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>,
-  ref: React.ForwardedRef<React.ElementRef<typeof ContextMenuPrimitive.Separator>>
-) {
-  return (
-    <ContextMenuPrimitive.Separator ref={ref} className={cn("bg-subtle-1 -mx-1 my-1 h-px", className)} {...props} />
-  );
-});
-
-const ContextMenuSubmenu = ContextMenuPrimitive.SubmenuRoot;
-
-const ContextMenuSubmenuTrigger = React.forwardRef(function ContextMenuSubmenuTrigger(
-  { className, children, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubmenuTrigger>,
-  ref: React.ForwardedRef<React.ElementRef<typeof ContextMenuPrimitive.SubmenuTrigger>>
-) {
-  return (
-    <ContextMenuPrimitive.SubmenuTrigger
-      ref={ref}
-      className={cn(
-        "flex cursor-default items-center rounded-xs px-2 py-1.5 text-13 outline-none select-none focus:outline-none",
-        "focus:bg-surface-2 data-[state=open]:bg-surface-2",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </ContextMenuPrimitive.SubmenuTrigger>
-  );
-});
-
-ContextMenuRoot.displayName = "ContextMenu";
-ContextMenuTrigger.displayName = "ContextMenuTrigger";
-ContextMenuContent.displayName = "ContextMenuContent";
-ContextMenuItem.displayName = "ContextMenuItem";
-ContextMenuSeparator.displayName = "ContextMenuSeparator";
-ContextMenuSubmenuTrigger.displayName = "ContextMenuSubmenuTrigger";
-
-// compound components
-const ContextMenu = Object.assign(ContextMenuRoot, {
-  Trigger: ContextMenuTrigger,
-  Portal: ContextMenuPortal,
-  Content: ContextMenuContent,
-  Item: ContextMenuItem,
-  Separator: ContextMenuSeparator,
-  Submenu: ContextMenuSubmenu,
-  SubmenuTrigger: ContextMenuSubmenuTrigger,
-});
-
-export { ContextMenu };
diff --git a/packages/propel/src/context-menu/index.ts b/packages/propel/src/context-menu/index.ts
deleted file mode 100644
index ff80b8eae68..00000000000
--- a/packages/propel/src/context-menu/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export { ContextMenu } from "./context-menu";
-export type {
-  ContextMenuProps,
-  ContextMenuTriggerProps,
-  ContextMenuContentProps,
-  ContextMenuItemProps,
-} from "./context-menu";
diff --git a/packages/propel/src/design-system/design-system-philosophy.stories.tsx b/packages/propel/src/design-system/design-system-philosophy.stories.tsx
deleted file mode 100644
index e6a2167cd69..00000000000
--- a/packages/propel/src/design-system/design-system-philosophy.stories.tsx
+++ /dev/null
@@ -1,434 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-const meta = {
-  title: "Design System/Philosophy",
-  parameters: {
-    layout: "fullscreen",
-    docs: {
-      description: {
-        component: `
-# Design System Philosophy
-
-Reusable, composable Storybook stories that demonstrate Canvas, Surface, and Layer concepts.
-
-Key concepts and rules are preserved, but the implementation is componentized for DRYness and clarity.
-        `,
-      },
-    },
-  },
-  tags: ["autodocs"],
-} satisfies Meta;
-
-export default meta;
-export type Story = StoryObj<typeof meta>;
-
-/* -----------------------------
-   Reusable UI building blocks
-   -----------------------------*/
-
-type ContainerProps = {
-  children?: React.ReactNode;
-  className?: string;
-};
-
-const DemoRoot: React.FC<ContainerProps> = ({ children, className = "" }) => (
-  <div className={`p-8 ${className}`}>{children}</div>
-);
-
-const Info: React.FC<{ title: string; children?: React.ReactNode; tone?: "info" | "warn" }> = ({
-  title,
-  children,
-  tone = "info",
-}) => (
-  <div
-    className={`mb-4 rounded-md border ${tone === "warn" ? "bg-red-50 border-danger-strong p-4" : "border-subtle bg-layer-1 p-4"}`}
-  >
-    <h3 className={`mb-2 text-16 font-semibold text-primary`}>{title}</h3>
-    <div className="text-13 text-secondary">{children}</div>
-  </div>
-);
-
-const Surface: React.FC<ContainerProps> = ({ children, className = "bg-surface-1 rounded-md p-6" }) => (
-  <div className={className}>{children}</div>
-);
-
-const Layer: React.FC<ContainerProps & { hover?: boolean }> = ({
-  children,
-  className = "bg-layer-1 hover:bg-layer-1-hover rounded-md p-4",
-}) => <div className={`${className} transition-colors`}>{children}</div>;
-
-/* Small helpers to keep stories concise */
-const TwoColGrid: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <div className="grid grid-cols-2 gap-6">{children}</div>
-);
-
-/* -----------------------------
-   Stories (using the building blocks)
-   -----------------------------*/
-
-export const ApplicationRoot: Story = {
-  render: () => (
-    <DemoRoot>
-      <Info title="✅ Application Root Pattern">
-        This is the <strong>bg-canvas</strong> - the application-level background. It should only appear{" "}
-        <strong>once</strong> in your entire application at the root level.
-      </Info>
-
-      <Surface>
-        <h4 className="mb-2 font-semibold text-primary">Page Content (bg-surface-1)</h4>
-        <p className="text-13 text-secondary">Pages use surfaces, not canvas. This is a typical page layout.</p>
-      </Surface>
-    </DemoRoot>
-  ),
-};
-
-export const SurfaceSiblings: Story = {
-  render: () => (
-    <DemoRoot>
-      <Info title="✅ Surface Siblings Pattern">
-        Surfaces are <strong>siblings</strong>, not nested.
-      </Info>
-
-      <TwoColGrid>
-        <Surface>
-          <h4 className="mb-2 font-semibold text-primary">Surface 1</h4>
-          <p className="text-13 text-secondary">This is bg-surface-1 - a primary surface</p>
-        </Surface>
-
-        <Surface className="rounded-md bg-surface-2 p-6">
-          <h4 className="mb-2 font-semibold text-primary">Surface 2</h4>
-          <p className="text-13 text-secondary">This is bg-surface-2 - a secondary surface (sibling to surface-1)</p>
-        </Surface>
-      </TwoColGrid>
-    </DemoRoot>
-  ),
-};
-
-export const LayerStacking: Story = {
-  render: () => (
-    <DemoRoot>
-      <Info title="✅ Layer Stacking Pattern">Layers stack to create depth: Surface → Layer 1 → Layer 2 → Layer 3</Info>
-
-      <Surface>
-        <h4 className="mb-3 font-semibold text-primary">Surface 1</h4>
-
-        <Layer className="mb-4 rounded-md bg-layer-1 p-4 hover:bg-layer-1-hover">
-          <h5 className="mb-2 font-medium text-primary">Layer 1 (First level of depth)</h5>
-          <p className="mb-3 text-13 text-secondary">Hover over me to see the hover state</p>
-
-          <Layer className="rounded-md bg-layer-2 p-3 hover:bg-layer-2-hover">
-            <h6 className="mb-2 text-13 font-medium text-primary">Layer 2 (Second level)</h6>
-            <p className="mb-2 text-13 text-secondary">Nested within Layer 1</p>
-
-            <Layer className="rounded-md bg-layer-3 p-2 hover:bg-layer-3-hover" hover>
-              <p className="text-11 font-medium text-primary">Layer 3 (Third level)</p>
-              <p className="text-11 text-secondary">Deepest nesting level</p>
-            </Layer>
-          </Layer>
-        </Layer>
-      </Surface>
-    </DemoRoot>
-  ),
-};
-
-export const SurfaceLayerAssociation: Story = {
-  render: () => (
-    <DemoRoot>
-      <Info title="✅ Surface-Layer Association">
-        Each surface should use its corresponding layer: surface-1 → layer-1, surface-2 → layer-2. Very rare exception:
-        inputs/buttons can go one level above for visual separation.
-      </Info>
-
-      <TwoColGrid>
-        <Surface>
-          <h4 className="mb-3 font-semibold text-primary">Surface 1</h4>
-          <Layer className="rounded-md bg-layer-1 p-4 hover:bg-layer-1-hover">
-            <h5 className="mb-1 font-medium text-primary">Layer 1</h5>
-            <p className="text-13 text-secondary">Correctly using layer-1 with surface-1</p>
-          </Layer>
-        </Surface>
-
-        <Surface className="rounded-md bg-surface-2 p-6">
-          <h4 className="mb-3 font-semibold text-primary">Surface 2</h4>
-          <Layer className="rounded-md bg-layer-2 p-4 hover:bg-layer-2-hover">
-            <h5 className="mb-1 font-medium text-primary">Layer 2</h5>
-            <p className="text-13 text-secondary">Correctly using layer-2 with surface-2</p>
-          </Layer>
-        </Surface>
-      </TwoColGrid>
-
-      <div className="mt-6">
-        <Info title="✅ Rare Exception: Visual Separation for Form Elements">
-          In very rare cases, form elements (inputs, buttons, switches) can use one level above for visual separation.
-        </Info>
-        <Surface>
-          <h4 className="mb-3 font-semibold text-primary">Modal with Input (Rare Exception)</h4>
-          <div className="space-y-3">
-            <div>
-              <label htmlFor="example-input" className="text-13 text-secondary">
-                Name
-              </label>
-              <input
-                id="example-input"
-                className="mt-1 w-full rounded-md border border-subtle bg-layer-2 px-3 py-2 text-primary"
-                placeholder="Input uses layer-2 for visual separation"
-              />
-              <p className="mt-1 text-11 text-tertiary">
-                Input uses bg-layer-2 (one level above) for visual separation from modal surface
-              </p>
-            </div>
-          </div>
-        </Surface>
-      </div>
-    </DemoRoot>
-  ),
-};
-
-export const ModalException: Story = {
-  render: () => (
-    <DemoRoot>
-      <Info title="✅ Modal Exception Pattern">
-        Modals exist on a <strong>different plane</strong>, so they can use surfaces even when there&apos;s a surface
-        below
-      </Info>
-
-      <Surface>
-        <h4 className="mb-2 font-semibold text-primary">Main Page Content</h4>
-        <p className="text-13 text-secondary">This is the main page using bg-surface-1</p>
-      </Surface>
-
-      <div className="fixed inset-0 z-50 flex items-center justify-center">
-        <div className="absolute inset-0 bg-backdrop" />
-        <div className="shadow-lg relative z-10 max-w-md rounded-lg bg-surface-1 p-6">
-          <h4 className="mb-3 font-semibold text-primary">Modal Dialog</h4>
-          <p className="mb-4 text-13 text-secondary">
-            This modal uses bg-surface-1 even though the page below also uses bg-surface-1. This is allowed because
-            they&apos;re on different planes.
-          </p>
-
-          <Layer className="rounded-md bg-layer-1 p-3 hover:bg-layer-1-hover">
-            <p className="text-13 text-primary">Modal content can use layers as normal</p>
-          </Layer>
-        </div>
-      </div>
-    </DemoRoot>
-  ),
-};
-
-export const CardListPattern: Story = {
-  render: () => (
-    <DemoRoot>
-      <Info title="✅ Card List Pattern">Common pattern: Surface containing multiple layer-1 cards</Info>
-
-      <Surface>
-        <h4 className="mb-4 font-semibold text-primary">Task List</h4>
-        <div className="space-y-3">
-          {[1, 2, 3].map((item) => (
-            <Layer key={item} className="rounded-md bg-layer-1 p-4 hover:bg-layer-1-hover">
-              <h5 className="mb-1 font-medium text-primary">Task {item}</h5>
-              <p className="text-13 text-secondary">This is a task card using bg-layer-1 with hover state</p>
-            </Layer>
-          ))}
-        </div>
-      </Surface>
-    </DemoRoot>
-  ),
-};
-
-export const SidebarLayoutPattern: Story = {
-  render: () => (
-    <DemoRoot>
-      <Info title="✅ Sidebar Layout Pattern">
-        Sidebar and main content are both part of the same surface. Sidebar menu items use transparent backgrounds with
-        hover states.
-      </Info>
-
-      <Surface className="flex rounded-md bg-surface-1">
-        <aside className="w-64 border-r border-subtle p-4">
-          <h4 className="mb-3 font-semibold text-primary">Sidebar</h4>
-          <div className="space-y-2">
-            {["Home", "Projects", "Settings"].map((item) => (
-              <div key={item} className="rounded-md p-2 transition-colors hover:bg-layer-1-hover">
-                <p className="text-13 text-primary">{item}</p>
-              </div>
-            ))}
-          </div>
-        </aside>
-
-        <main className="flex-1 p-6">
-          <h4 className="mb-3 font-semibold text-primary">Main Content</h4>
-          <Layer className="rounded-md bg-layer-1 p-4 hover:bg-layer-1-hover">
-            <p className="text-primary">Content card using layer-1</p>
-          </Layer>
-        </main>
-      </Surface>
-    </DemoRoot>
-  ),
-};
-
-export const StateVariants: Story = {
-  render: () => (
-    <DemoRoot>
-      <Info title="✅ State Variants">Demonstrating hover, active, and selected states</Info>
-
-      <Surface>
-        <div className="space-y-4">
-          <Layer className="rounded-md bg-layer-1 p-4 hover:bg-layer-1-hover">
-            <h5 className="mb-1 font-medium text-primary">Hover State</h5>
-            <p className="text-13 text-secondary">Hover over me to see bg-layer-1-hover</p>
-          </Layer>
-
-          <div className="rounded-md bg-layer-1-active p-4">
-            <h5 className="mb-1 font-medium text-primary">Active State</h5>
-            <p className="text-13 text-secondary">Using bg-layer-1-active (pressed/active)</p>
-          </div>
-
-          <div className="rounded-md bg-layer-1-selected p-4">
-            <h5 className="mb-1 font-medium text-primary">Selected State</h5>
-            <p className="text-13 text-secondary">Using bg-layer-1-selected (when selected)</p>
-          </div>
-        </div>
-      </Surface>
-    </DemoRoot>
-  ),
-};
-
-export const TextColorHierarchy: Story = {
-  render: () => (
-    <DemoRoot>
-      <Info title="✅ Text Color Hierarchy">Semantic text colors for different importance levels</Info>
-
-      <Surface>
-        <div className="rounded-md bg-layer-1 p-4">
-          <h4 className="mb-3 text-16 font-semibold text-primary">Primary Text</h4>
-          <p className="mb-3 text-secondary">Secondary text for descriptions and supporting content</p>
-          <p className="mb-3 text-13 text-tertiary">Tertiary text for labels and metadata</p>
-          <input
-            className="rounded border border-subtle px-3 py-2 placeholder-(--text-color-placeholder)"
-            placeholder="Placeholder text for inputs"
-          />
-        </div>
-      </Surface>
-    </DemoRoot>
-  ),
-};
-
-export const CompleteExample: Story = {
-  render: () => (
-    <DemoRoot>
-      <Info title="✅ Complete Example">A realistic dashboard layout using all design system concepts</Info>
-
-      <div className="mb-6 rounded-md bg-surface-1">
-        <div className="border-b border-subtle p-4">
-          <h1 className="text-18 font-bold text-primary">Dashboard</h1>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-3 gap-6">
-        {[
-          { label: "Total Users", value: "1,234" },
-          { label: "Active Projects", value: "42" },
-          { label: "Completed Tasks", value: "856" },
-        ].map((stat, idx) => (
-          <Surface key={idx}>
-            <Layer className="rounded-md bg-layer-1 p-4 hover:bg-layer-1-hover">
-              <p className="mb-1 text-13 text-tertiary">{stat.label}</p>
-              <p className="text-20 font-bold text-primary">{stat.value}</p>
-            </Layer>
-          </Surface>
-        ))}
-      </div>
-
-      <div className="mt-6 grid grid-cols-2 gap-6">
-        <Surface>
-          <h3 className="mb-4 font-semibold text-primary">Recent Activity</h3>
-          <div className="space-y-2">
-            {[1, 2, 3].map((item) => (
-              <Layer key={item} className="rounded-md bg-layer-1 p-3 hover:bg-layer-1-hover">
-                <p className="mb-1 text-13 font-medium text-primary">Activity {item}</p>
-                <p className="text-11 text-secondary">Description of the activity</p>
-              </Layer>
-            ))}
-          </div>
-        </Surface>
-
-        <Surface className="rounded-md bg-surface-2 p-6">
-          <h3 className="mb-4 font-semibold text-primary">Quick Actions</h3>
-          <div className="space-y-2">
-            {["Create Project", "Invite Team", "View Reports"].map((action) => (
-              <Layer key={action} className="rounded-md bg-layer-2 p-3 hover:bg-layer-2-hover">
-                <p className="text-13 text-primary">{action}</p>
-              </Layer>
-            ))}
-          </div>
-        </Surface>
-      </div>
-    </DemoRoot>
-  ),
-};
-
-export const CommonMistakes: Story = {
-  render: () => (
-    <DemoRoot>
-      <Info title="❌ Common Mistakes to Avoid" tone="warn">
-        These examples show incorrect usage patterns
-      </Info>
-
-      <div className="space-y-6">
-        <div className="rounded-md border-2 border-danger-strong p-4">
-          <h4 className="mb-2 font-semibold text-primary">❌ Mistake 1: Nested Surfaces (Same Plane)</h4>
-          <Surface>
-            <p className="mb-2 text-13 text-secondary">Surface 1</p>
-            <div className="rounded-md bg-surface-2 p-4">
-              <p className="text-13 text-secondary">Surface 2 nested inside Surface 1 - WRONG!</p>
-            </div>
-          </Surface>
-          <p className="mt-2 text-11 text-tertiary">
-            ✅ Fix: Use bg-layer-1 for nested elements, or make them sibling surfaces
-          </p>
-        </div>
-
-        <div className="rounded-md border-2 border-danger-strong p-4">
-          <h4 className="mb-2 font-semibold text-primary">❌ Mistake 2: Wrong Layer-Surface Association</h4>
-          <Surface>
-            <p className="mb-2 text-13 text-secondary">Surface 1</p>
-            <div className="rounded-md bg-layer-2 p-4">
-              <p className="text-13 text-secondary">Using layer-2 with surface-1 for content box - WRONG!</p>
-            </div>
-          </Surface>
-          <p className="mt-2 text-11 text-tertiary">
-            ✅ Fix: Use bg-layer-1 with bg-surface-1 for content boxes. Exception: Very rare cases for inputs/buttons
-            that need visual separation (e.g., input in modal can use bg-layer-2 for separation).
-          </p>
-        </div>
-
-        <div className="rounded-md border-2 border-danger-strong p-4">
-          <h4 className="mb-2 font-semibold text-primary">❌ Mistake 3: Mismatched Hover State</h4>
-          <Surface>
-            <div className="rounded-md bg-layer-1 p-4 transition-colors hover:bg-layer-2-hover">
-              <p className="text-13 text-secondary">bg-layer-1 with hover:bg-layer-2-hover - WRONG!</p>
-            </div>
-          </Surface>
-          <p className="mt-2 text-11 text-tertiary">✅ Fix: Use bg-layer-1 hover:bg-layer-1-hover</p>
-        </div>
-
-        <div className="rounded-md border-2 border-danger-strong p-4">
-          <h4 className="mb-2 font-semibold text-primary">❌ Mistake 4: Canvas for Pages</h4>
-          <div className="rounded-md bg-canvas p-4">
-            <p className="text-13 text-secondary">Using bg-canvas for a page or component - WRONG!</p>
-          </div>
-          <p className="mt-2 text-11 text-tertiary">
-            ✅ Fix: Canvas should only be at application root. Use bg-surface-1 for pages
-          </p>
-        </div>
-      </div>
-    </DemoRoot>
-  ),
-};
diff --git a/packages/propel/src/dialog/dialog.stories.tsx b/packages/propel/src/dialog/dialog.stories.tsx
deleted file mode 100644
index 36281bf5d8b..00000000000
--- a/packages/propel/src/dialog/dialog.stories.tsx
+++ /dev/null
@@ -1,432 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useArgs } from "storybook/preview-api";
-import { CloseOutline } from "@makeplane/propel/icons";
-import { Dialog, EDialogWidth } from "./root";
-
-const meta = {
-  title: "Components/Dialog",
-  component: Dialog,
-  subcomponents: {
-    DialogPanel: Dialog.Panel,
-    DialogTitle: Dialog.Title,
-  },
-  args: {
-    children: null,
-    open: false,
-    onOpenChange: () => {},
-  },
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  render(args) {
-    const [{ open }, updateArgs] = useArgs();
-    const setOpen = (value: boolean) => updateArgs({ open: value });
-
-    return (
-      <>
-        <button
-          onClick={() => setOpen(true)}
-          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
-        >
-          Open Dialog
-        </button>
-        {open && (
-          <Dialog {...args} open={open} onOpenChange={setOpen}>
-            <Dialog.Panel>
-              <div className="p-6">
-                <Dialog.Title>Dialog Title</Dialog.Title>
-                <div className="mt-4">
-                  <p className="text-gray-600 text-13">This is the dialog content. You can put any content here.</p>
-                </div>
-                <div className="mt-6 flex justify-end gap-2">
-                  <button
-                    onClick={() => setOpen(false)}
-                    className="bg-gray-200 hover:bg-gray-300 rounded-sm px-4 py-2 text-13"
-                  >
-                    Cancel
-                  </button>
-                  <button
-                    onClick={() => setOpen(false)}
-                    className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
-                  >
-                    Confirm
-                  </button>
-                </div>
-              </div>
-            </Dialog.Panel>
-          </Dialog>
-        )}
-      </>
-    );
-  },
-} satisfies Meta<typeof Dialog>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    children: null,
-  },
-};
-
-export const TopPosition: Story = {
-  render(args) {
-    const [open, setOpen] = useState(args.open);
-    return (
-      <>
-        <button
-          onClick={() => setOpen(true)}
-          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
-        >
-          Open Dialog (Top)
-        </button>
-        {open && (
-          <Dialog {...args} open={open} onOpenChange={setOpen}>
-            <Dialog.Panel position="top">
-              <div className="p-6">
-                <Dialog.Title>Top Positioned Dialog</Dialog.Title>
-                <div className="mt-4">
-                  <p className="text-gray-600 text-13">
-                    This dialog appears at the top of the screen instead of centered.
-                  </p>
-                </div>
-                <div className="mt-6 flex justify-end gap-2">
-                  <button
-                    onClick={() => setOpen(false)}
-                    className="bg-gray-200 hover:bg-gray-300 rounded-sm px-4 py-2 text-13"
-                  >
-                    Close
-                  </button>
-                </div>
-              </div>
-            </Dialog.Panel>
-          </Dialog>
-        )}
-      </>
-    );
-  },
-};
-
-export const SmallWidth: Story = {
-  render(args) {
-    const [open, setOpen] = useState(args.open);
-    return (
-      <>
-        <button
-          onClick={() => setOpen(true)}
-          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
-        >
-          Open Small Dialog
-        </button>
-        {open && (
-          <Dialog {...args} open={open} onOpenChange={setOpen}>
-            <Dialog.Panel width={EDialogWidth.SM}>
-              <div className="p-6">
-                <Dialog.Title>Small Dialog</Dialog.Title>
-                <div className="mt-4">
-                  <p className="text-gray-600 text-13">This is a small dialog.</p>
-                </div>
-                <div className="mt-6 flex justify-end">
-                  <button
-                    onClick={() => setOpen(false)}
-                    className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
-                  >
-                    Close
-                  </button>
-                </div>
-              </div>
-            </Dialog.Panel>
-          </Dialog>
-        )}
-      </>
-    );
-  },
-};
-
-export const LargeWidth: Story = {
-  render(args) {
-    const [open, setOpen] = useState(args.open);
-    return (
-      <>
-        <button
-          onClick={() => setOpen(true)}
-          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
-        >
-          Open Large Dialog
-        </button>
-        {open && (
-          <Dialog {...args} open={open} onOpenChange={setOpen}>
-            <Dialog.Panel width={EDialogWidth.XXXXL}>
-              <div className="p-6">
-                <Dialog.Title>Large Dialog</Dialog.Title>
-                <div className="mt-4">
-                  <p className="text-gray-600 text-13">
-                    This is a large dialog with more horizontal space for content.
-                  </p>
-                </div>
-                <div className="mt-6 flex justify-end">
-                  <button
-                    onClick={() => setOpen(false)}
-                    className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
-                  >
-                    Close
-                  </button>
-                </div>
-              </div>
-            </Dialog.Panel>
-          </Dialog>
-        )}
-      </>
-    );
-  },
-};
-
-export const WithCloseButton: Story = {
-  render(args) {
-    const [open, setOpen] = useState(args.open);
-    return (
-      <>
-        <button
-          onClick={() => setOpen(true)}
-          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
-        >
-          Open Dialog with Close Button
-        </button>
-        {open && (
-          <Dialog {...args} open={open} onOpenChange={setOpen}>
-            <Dialog.Panel>
-              <div className="p-6">
-                <div className="flex items-start justify-between">
-                  <Dialog.Title>Dialog with Close Button</Dialog.Title>
-                  <button onClick={() => setOpen(false)} className="hover:bg-gray-100 rounded-full p-1">
-                    <CloseOutline className="h-4 w-4" />
-                  </button>
-                </div>
-                <div className="mt-4">
-                  <p className="text-gray-600 text-13">This dialog has a close button in the header.</p>
-                </div>
-              </div>
-            </Dialog.Panel>
-          </Dialog>
-        )}
-      </>
-    );
-  },
-};
-
-export const ConfirmationDialog: Story = {
-  render(args) {
-    const [open, setOpen] = useState(args.open);
-    const handleConfirm = () => {
-      alert("Confirmed!");
-      setOpen(false);
-    };
-    return (
-      <>
-        <button
-          onClick={() => setOpen(true)}
-          className="bg-red-500 hover:bg-red-600 rounded-sm px-4 py-2 text-on-color"
-        >
-          Delete Item
-        </button>
-        {open && (
-          <Dialog {...args} open={open} onOpenChange={setOpen}>
-            <Dialog.Panel width={EDialogWidth.SM}>
-              <div className="p-6">
-                <Dialog.Title>Confirm Deletion</Dialog.Title>
-                <div className="mt-4">
-                  <p className="text-gray-600 text-13">
-                    Are you sure you want to delete this item? This action cannot be undone.
-                  </p>
-                </div>
-                <div className="mt-6 flex justify-end gap-2">
-                  <button
-                    onClick={() => setOpen(false)}
-                    className="bg-gray-200 hover:bg-gray-300 rounded-sm px-4 py-2 text-13"
-                  >
-                    Cancel
-                  </button>
-                  <button
-                    onClick={handleConfirm}
-                    className="bg-red-500 hover:bg-red-600 rounded-sm px-4 py-2 text-13 text-on-color"
-                  >
-                    Delete
-                  </button>
-                </div>
-              </div>
-            </Dialog.Panel>
-          </Dialog>
-        )}
-      </>
-    );
-  },
-};
-
-export const FormDialog: Story = {
-  render(args) {
-    const [open, setOpen] = useState(args.open);
-    const handleSubmit = (e: React.FormEvent) => {
-      e.preventDefault();
-      alert("Form submitted!");
-      setOpen(false);
-    };
-    return (
-      <>
-        <button
-          onClick={() => setOpen(true)}
-          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
-        >
-          Open Form
-        </button>
-        {open && (
-          <Dialog {...args} open={open} onOpenChange={setOpen}>
-            <Dialog.Panel width={EDialogWidth.MD}>
-              <form onSubmit={handleSubmit} className="p-6">
-                <Dialog.Title>Create New Item</Dialog.Title>
-                <div className="mt-4 space-y-4">
-                  <div>
-                    <label htmlFor="name" className="text-gray-700 block text-13 font-medium">
-                      Name
-                    </label>
-                    <input
-                      type="text"
-                      id="name"
-                      className="border-gray-300 mt-1 w-full rounded-sm border px-3 py-2 text-13"
-                      placeholder="Enter name"
-                    />
-                  </div>
-                  <div>
-                    <label htmlFor="description" className="text-gray-700 block text-13 font-medium">
-                      Description
-                    </label>
-                    <textarea
-                      id="description"
-                      rows={3}
-                      className="border-gray-300 mt-1 w-full rounded-sm border px-3 py-2 text-13"
-                      placeholder="Enter description"
-                    />
-                  </div>
-                </div>
-                <div className="mt-6 flex justify-end gap-2">
-                  <button
-                    type="button"
-                    onClick={() => setOpen(false)}
-                    className="bg-gray-200 hover:bg-gray-300 rounded-sm px-4 py-2 text-13"
-                  >
-                    Cancel
-                  </button>
-                  <button
-                    type="submit"
-                    className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
-                  >
-                    Create
-                  </button>
-                </div>
-              </form>
-            </Dialog.Panel>
-          </Dialog>
-        )}
-      </>
-    );
-  },
-};
-
-export const ScrollableContent: Story = {
-  render(args) {
-    const [open, setOpen] = useState(args.open);
-    return (
-      <>
-        <button
-          onClick={() => setOpen(true)}
-          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
-        >
-          Open Scrollable Dialog
-        </button>
-        {open && (
-          <Dialog {...args} open={open} onOpenChange={setOpen}>
-            <Dialog.Panel width={EDialogWidth.MD}>
-              <div className="p-6">
-                <Dialog.Title>Scrollable Content</Dialog.Title>
-                <div className="mt-4 max-h-96 overflow-y-auto">
-                  {Array.from({ length: 20 }, (_, i) => (
-                    <p key={i} className="text-gray-600 mb-2 text-13">
-                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
-                      labore et dolore magna aliqua.
-                    </p>
-                  ))}
-                </div>
-                <div className="mt-6 flex justify-end">
-                  <button
-                    onClick={() => setOpen(false)}
-                    className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
-                  >
-                    Close
-                  </button>
-                </div>
-              </div>
-            </Dialog.Panel>
-          </Dialog>
-        )}
-      </>
-    );
-  },
-};
-
-export const AllWidths: Story = {
-  render() {
-    const [openWidth, setOpenWidth] = useState<EDialogWidth | null>(null);
-
-    const widths = [
-      { width: EDialogWidth.SM, label: "Small" },
-      { width: EDialogWidth.MD, label: "Medium" },
-      { width: EDialogWidth.LG, label: "Large" },
-      { width: EDialogWidth.XL, label: "XL" },
-      { width: EDialogWidth.XXL, label: "2XL" },
-      { width: EDialogWidth.XXXL, label: "3XL" },
-      { width: EDialogWidth.XXXXL, label: "4XL" },
-    ];
-
-    return (
-      <div className="flex flex-wrap gap-2">
-        {widths.map(({ width, label }) => (
-          <button
-            key={width}
-            onClick={() => setOpenWidth(width)}
-            className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
-          >
-            {label}
-          </button>
-        ))}
-        {widths.map(({ width, label }) => (
-          <Dialog key={width} open={openWidth === width} onOpenChange={() => setOpenWidth(null)}>
-            <Dialog.Panel width={width}>
-              <div className="p-6">
-                <Dialog.Title>{label} Dialog</Dialog.Title>
-                <div className="mt-4">
-                  <p className="text-gray-600 text-13">This dialog uses the {label} width variant.</p>
-                </div>
-                <div className="mt-6 flex justify-end">
-                  <button
-                    onClick={() => setOpenWidth(null)}
-                    className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
-                  >
-                    Close
-                  </button>
-                </div>
-              </div>
-            </Dialog.Panel>
-          </Dialog>
-        ))}
-      </div>
-    );
-  },
-};
diff --git a/packages/propel/src/dialog/index.ts b/packages/propel/src/dialog/index.ts
deleted file mode 100644
index d980334597b..00000000000
--- a/packages/propel/src/dialog/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./root";
diff --git a/packages/propel/src/dialog/root.tsx b/packages/propel/src/dialog/root.tsx
deleted file mode 100644
index 3a917b2c0e6..00000000000
--- a/packages/propel/src/dialog/root.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { forwardRef, memo, useMemo } from "react";
-import { Dialog as BaseDialog } from "@base-ui-components/react";
-import { cn } from "../utils/classname";
-
-// enums
-
-export enum EDialogWidth {
-  SM = "sm:max-w-sm",
-  MD = "sm:max-w-md",
-  LG = "sm:max-w-lg",
-  XL = "sm:max-w-xl",
-  XXL = "sm:max-w-2xl",
-  XXXL = "sm:max-w-3xl",
-  XXXXL = "sm:max-w-4xl",
-  VXL = "sm:max-w-5xl",
-  VIXL = "sm:max-w-6xl",
-  VIIXL = "sm:max-w-7xl",
-}
-
-// Types
-export type DialogPosition = "center" | "top";
-
-export interface DialogProps extends React.ComponentProps<typeof BaseDialog.Root> {
-  children: React.ReactNode;
-}
-
-export interface DialogPanelProps extends React.ComponentProps<typeof BaseDialog.Popup> {
-  width?: EDialogWidth;
-  position?: DialogPosition;
-  children: React.ReactNode;
-}
-
-export interface DialogTitleProps extends React.ComponentProps<typeof BaseDialog.Title> {
-  children: React.ReactNode;
-}
-
-// Constants
-const OVERLAY_CLASSNAME = cn("fixed inset-0 z-90 bg-backdrop");
-const BASE_CLASSNAME = "relative text-left bg-surface-1 rounded-lg shadow-md w-full z-100 border border-subtle";
-
-// Utility functions
-const getPositionClassNames = (position: DialogPosition) =>
-  cn("fixed isolate z-100", {
-    "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2": position === "center",
-    "top-8 left-1/2 -translate-x-1/2": position === "top",
-  });
-
-const DialogPortal = memo(function DialogPortal({
-  children,
-  ...props
-}: React.ComponentProps<typeof BaseDialog.Portal>) {
-  return (
-    <BaseDialog.Portal data-slot="dialog-portal" {...props}>
-      {children}
-    </BaseDialog.Portal>
-  );
-});
-DialogPortal.displayName = "DialogPortal";
-
-const DialogOverlay = memo(function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof BaseDialog.Backdrop>) {
-  return <BaseDialog.Backdrop data-slot="dialog-overlay" className={cn(OVERLAY_CLASSNAME, className)} {...props} />;
-});
-DialogOverlay.displayName = "DialogOverlay";
-
-const DialogComponent = memo(function DialogComponent({ children, ...props }: DialogProps) {
-  return (
-    <BaseDialog.Root data-slot="dialog" {...props}>
-      {children}
-    </BaseDialog.Root>
-  );
-});
-DialogComponent.displayName = "Dialog";
-
-const DialogTrigger = memo(function DialogTrigger({
-  children,
-  ...props
-}: React.ComponentProps<typeof BaseDialog.Trigger>) {
-  return (
-    <BaseDialog.Trigger data-slot="dialog-trigger" {...props}>
-      {children}
-    </BaseDialog.Trigger>
-  );
-});
-DialogTrigger.displayName = "DialogTrigger";
-
-const DialogPanel = forwardRef(function DialogPanel(
-  { className, width = EDialogWidth.XXL, children, position = "center", ...props }: DialogPanelProps,
-  ref: React.ForwardedRef<React.ElementRef<typeof BaseDialog.Popup>>
-) {
-  const positionClassNames = useMemo(() => getPositionClassNames(position), [position]);
-  return (
-    <DialogPortal>
-      <DialogOverlay />
-      <BaseDialog.Popup
-        ref={ref}
-        data-slot="dialog-content"
-        className={cn(BASE_CLASSNAME, positionClassNames, width, className)}
-        role="dialog"
-        aria-modal="true"
-        {...props}
-      >
-        {children}
-      </BaseDialog.Popup>
-    </DialogPortal>
-  );
-});
-DialogPanel.displayName = "DialogPanel";
-
-const DialogTitle = memo(function DialogTitle({ className, children, ...props }: DialogTitleProps) {
-  return (
-    <BaseDialog.Title
-      data-slot="dialog-title"
-      className={cn("text-16 leading-none font-semibold", className)}
-      {...props}
-    >
-      {children}
-    </BaseDialog.Title>
-  );
-});
-
-DialogTitle.displayName = "DialogTitle";
-
-// Create the compound Dialog component with proper typing
-const Dialog = Object.assign(DialogComponent, {
-  Panel: DialogPanel,
-  Title: DialogTitle,
-}) as typeof DialogComponent & {
-  Panel: typeof DialogPanel;
-  Title: typeof DialogTitle;
-};
-
-export { Dialog, DialogTitle, DialogPanel };
diff --git a/packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx b/packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx
deleted file mode 100644
index da03ba4a4cf..00000000000
--- a/packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx
+++ /dev/null
@@ -1,442 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { EmojiPicker } from "./emoji-picker";
-import type { TChangeHandlerProps } from "./helper";
-import { EmojiIconPickerTypes } from "./helper";
-
-const meta = {
-  title: "Components/Emoji/EmojiPicker",
-  component: EmojiPicker,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof EmojiPicker>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    isOpen: false,
-    handleToggle: () => {},
-    onChange: () => {},
-    label: "Default",
-  },
-  render() {
-    const [isOpen, setIsOpen] = useState(false);
-    const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
-
-    return (
-      <div className="space-y-4 p-4">
-        <EmojiPicker
-          isOpen={isOpen}
-          handleToggle={setIsOpen}
-          onChange={setSelectedValue}
-          label="😊 Pick an emoji or icon"
-          defaultOpen={EmojiIconPickerTypes.EMOJI}
-          closeOnSelect
-        />
-        {selectedValue && (
-          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">
-            <div className="mb-2 font-medium">Selected:</div>
-            <pre className="text-11">{JSON.stringify(selectedValue, null, 2)}</pre>
-          </div>
-        )}
-      </div>
-    );
-  },
-};
-
-export const OpenToEmojiTab: Story = {
-  args: {
-    isOpen: false,
-    handleToggle: () => {},
-    onChange: () => {},
-    label: "Emoji Tab",
-  },
-  render() {
-    const [isOpen, setIsOpen] = useState(false);
-    const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
-
-    return (
-      <div className="space-y-4 p-4">
-        <EmojiPicker
-          isOpen={isOpen}
-          handleToggle={setIsOpen}
-          onChange={setSelectedValue}
-          label="😊 Choose Emoji"
-          defaultOpen={EmojiIconPickerTypes.EMOJI}
-          closeOnSelect
-        />
-        {selectedValue && (
-          <div className="text-13">Selected: {selectedValue.type === "emoji" ? selectedValue.value : "Icon"}</div>
-        )}
-      </div>
-    );
-  },
-};
-
-export const OpenToIconTab: Story = {
-  args: {
-    isOpen: false,
-    handleToggle: () => {},
-    onChange: () => {},
-    label: "Icon Tab",
-  },
-  render() {
-    const [isOpen, setIsOpen] = useState(false);
-    const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
-
-    return (
-      <div className="space-y-4 p-4">
-        <EmojiPicker
-          isOpen={isOpen}
-          handleToggle={setIsOpen}
-          onChange={setSelectedValue}
-          label="🎨 Choose Icon"
-          defaultOpen={EmojiIconPickerTypes.ICON}
-          closeOnSelect
-        />
-        {selectedValue && (
-          <div className="text-13">
-            Selected:{" "}
-            {selectedValue.type === "icon" && typeof selectedValue.value === "object"
-              ? selectedValue.value.name
-              : "Emoji"}
-          </div>
-        )}
-      </div>
-    );
-  },
-};
-
-export const LucideIcons: Story = {
-  args: {
-    isOpen: false,
-    handleToggle: () => {},
-    onChange: () => {},
-    label: "Lucide Icons",
-  },
-  render() {
-    const [isOpen, setIsOpen] = useState(false);
-    const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
-
-    return (
-      <div className="space-y-4 p-4">
-        <EmojiPicker
-          isOpen={isOpen}
-          handleToggle={setIsOpen}
-          onChange={setSelectedValue}
-          label="Lucide Icons"
-          defaultOpen={EmojiIconPickerTypes.ICON}
-          closeOnSelect
-          iconType="lucide"
-        />
-        {selectedValue && (
-          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">
-            <div className="mb-2 font-medium">Selected Icon:</div>
-            <pre className="text-11">{JSON.stringify(selectedValue, null, 2)}</pre>
-          </div>
-        )}
-      </div>
-    );
-  },
-};
-
-export const MaterialIcons: Story = {
-  args: {
-    isOpen: false,
-    handleToggle: () => {},
-    onChange: () => {},
-    label: "Material Icons",
-  },
-  render() {
-    const [isOpen, setIsOpen] = useState(false);
-    const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
-
-    return (
-      <div className="space-y-4 p-4">
-        <EmojiPicker
-          isOpen={isOpen}
-          handleToggle={setIsOpen}
-          onChange={setSelectedValue}
-          label="Material Icons"
-          defaultOpen={EmojiIconPickerTypes.ICON}
-          closeOnSelect
-          iconType="material"
-        />
-        {selectedValue && (
-          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">
-            <div className="mb-2 font-medium">Selected Icon:</div>
-            <pre className="text-11">{JSON.stringify(selectedValue, null, 2)}</pre>
-          </div>
-        )}
-      </div>
-    );
-  },
-};
-
-export const CloseOnSelectDisabled: Story = {
-  args: {
-    isOpen: false,
-    handleToggle: () => {},
-    onChange: () => {},
-    label: "Close On Select Disabled",
-  },
-  render() {
-    const [isOpen, setIsOpen] = useState(false);
-    const [selectedValues, setSelectedValues] = useState<TChangeHandlerProps[]>([]);
-
-    const handleChange = (value: TChangeHandlerProps) => {
-      setSelectedValues((prev) => [...prev, value]);
-    };
-
-    return (
-      <div className="space-y-4 p-4">
-        <div className="flex items-center gap-2">
-          <EmojiPicker
-            isOpen={isOpen}
-            handleToggle={setIsOpen}
-            onChange={handleChange}
-            label="Select Multiple (Stays Open)"
-            defaultOpen={EmojiIconPickerTypes.EMOJI}
-            closeOnSelect={false}
-          />
-          <button
-            className="rounded-sm bg-layer-1 px-3 py-1.5 text-13 hover:bg-surface-2"
-            onClick={() => setSelectedValues([])}
-          >
-            Clear
-          </button>
-        </div>
-        {selectedValues.length > 0 && (
-          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">
-            <div className="mb-2 font-medium">Selected ({selectedValues.length}):</div>
-            <div className="flex flex-wrap gap-2">
-              {selectedValues.map((val, idx) => (
-                <span key={idx} className="text-16">
-                  {val.type === "emoji" ? val.value : "🎨"}
-                </span>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    );
-  },
-};
-
-export const CustomSearchPlaceholder: Story = {
-  args: {
-    isOpen: false,
-    handleToggle: () => {},
-    onChange: () => {},
-    label: "Custom Search",
-  },
-  render() {
-    const [isOpen, setIsOpen] = useState(false);
-    const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
-
-    return (
-      <div className="space-y-4 p-4">
-        <EmojiPicker
-          isOpen={isOpen}
-          handleToggle={setIsOpen}
-          onChange={setSelectedValue}
-          label="Custom Search"
-          defaultOpen={EmojiIconPickerTypes.EMOJI}
-          closeOnSelect
-          searchPlaceholder="Type to find emojis..."
-        />
-        {selectedValue && <div className="text-13">Selected: {JSON.stringify(selectedValue)}</div>}
-      </div>
-    );
-  },
-};
-
-export const SearchDisabled: Story = {
-  args: {
-    isOpen: false,
-    handleToggle: () => {},
-    onChange: () => {},
-    label: "Search Disabled",
-  },
-  render() {
-    const [isOpen, setIsOpen] = useState(false);
-    const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
-
-    return (
-      <div className="space-y-4 p-4">
-        <EmojiPicker
-          isOpen={isOpen}
-          handleToggle={setIsOpen}
-          onChange={setSelectedValue}
-          label="No Search"
-          defaultOpen={EmojiIconPickerTypes.EMOJI}
-          closeOnSelect
-          searchDisabled
-        />
-        {selectedValue && <div className="text-13">Selected: {JSON.stringify(selectedValue)}</div>}
-      </div>
-    );
-  },
-};
-
-export const CustomIconColor: Story = {
-  args: {
-    isOpen: false,
-    handleToggle: () => {},
-    onChange: () => {},
-    label: "Custom Icon Color",
-  },
-  render() {
-    const [isOpen, setIsOpen] = useState(false);
-    const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
-
-    return (
-      <div className="space-y-4 p-4">
-        <EmojiPicker
-          isOpen={isOpen}
-          handleToggle={setIsOpen}
-          onChange={setSelectedValue}
-          label="Custom Icon Color"
-          defaultOpen={EmojiIconPickerTypes.ICON}
-          closeOnSelect
-          defaultIconColor="#FF5733"
-        />
-        {selectedValue && (
-          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">
-            <pre className="text-11">{JSON.stringify(selectedValue, null, 2)}</pre>
-          </div>
-        )}
-      </div>
-    );
-  },
-};
-
-export const DifferentPlacements: Story = {
-  args: {
-    isOpen: false,
-    handleToggle: () => {},
-    onChange: () => {},
-    label: "Different Placements",
-  },
-  render() {
-    const [isOpen1, setIsOpen1] = useState(false);
-    const [isOpen2, setIsOpen2] = useState(false);
-    const [isOpen3, setIsOpen3] = useState(false);
-    const [isOpen4, setIsOpen4] = useState(false);
-
-    return (
-      <div className="space-y-8 p-8">
-        <div className="flex items-center gap-4">
-          <span className="w-32 text-13">Bottom Start:</span>
-          <EmojiPicker
-            isOpen={isOpen1}
-            handleToggle={setIsOpen1}
-            onChange={() => {}}
-            label="Bottom Start"
-            placement="bottom-start"
-          />
-        </div>
-        <div className="flex items-center gap-4">
-          <span className="w-32 text-13">Bottom End:</span>
-          <EmojiPicker
-            isOpen={isOpen2}
-            handleToggle={setIsOpen2}
-            onChange={() => {}}
-            label="Bottom End"
-            placement="bottom-end"
-          />
-        </div>
-        <div className="flex items-center gap-4">
-          <span className="w-32 text-13">Top Start:</span>
-          <EmojiPicker
-            isOpen={isOpen3}
-            handleToggle={setIsOpen3}
-            onChange={() => {}}
-            label="Top Start"
-            placement="top-start"
-          />
-        </div>
-        <div className="flex items-center gap-4">
-          <span className="w-32 text-13">Top End:</span>
-          <EmojiPicker
-            isOpen={isOpen4}
-            handleToggle={setIsOpen4}
-            onChange={() => {}}
-            label="Top End"
-            placement="top-end"
-          />
-        </div>
-      </div>
-    );
-  },
-};
-
-export const InFormContext: Story = {
-  args: {
-    isOpen: false,
-    handleToggle: () => {},
-    onChange: () => {},
-    label: "In Form Context",
-  },
-  render() {
-    const [isOpen, setIsOpen] = useState(false);
-    const [formData, setFormData] = useState({
-      title: "",
-      emoji: null as TChangeHandlerProps | null,
-    });
-
-    const handleEmojiChange = (value: TChangeHandlerProps) => {
-      setFormData((prev) => ({ ...prev, emoji: value }));
-    };
-
-    const handleSubmit = (e: React.FormEvent) => {
-      e.preventDefault();
-      alert(`Form submitted:\n${JSON.stringify(formData, null, 2)}`);
-    };
-
-    return (
-      <div className="max-w-md p-4">
-        <form onSubmit={handleSubmit} className="space-y-4 rounded-lg border border-subtle p-6">
-          <div>
-            <label className="mb-2 block text-13 font-medium">Project Title</label>
-            <input
-              type="text"
-              value={formData.title}
-              onChange={(e) => setFormData((prev) => ({ ...prev, title: e.target.value }))}
-              className="w-full rounded-sm border border-subtle bg-layer-1 px-3 py-2"
-              placeholder="Enter project title"
-            />
-          </div>
-          <div>
-            <label className="mb-2 block text-13 font-medium">Project Icon</label>
-            <EmojiPicker
-              isOpen={isOpen}
-              handleToggle={setIsOpen}
-              onChange={handleEmojiChange}
-              label={formData.emoji && formData.emoji.type === "emoji" ? formData.emoji.value : "Click to select icon"}
-              defaultOpen={EmojiIconPickerTypes.EMOJI}
-              closeOnSelect
-              buttonClassName="px-4 py-2 bg-layer-1 border border-subtle rounded-sm hover:bg-surface-2 w-full text-left"
-            />
-          </div>
-          <button
-            type="submit"
-            className="w-full rounded-sm bg-accent-primary px-4 py-2 text-on-color hover:bg-accent-primary/80"
-          >
-            Create Project
-          </button>
-        </form>
-      </div>
-    );
-  },
-};
diff --git a/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx b/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx
deleted file mode 100644
index 537473966f7..00000000000
--- a/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx
+++ /dev/null
@@ -1,396 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ReactionOutline } from "@makeplane/propel/icons";
-import { stringToEmoji } from "../emoji-icon-picker";
-import type { EmojiReactionType } from "./emoji-reaction";
-import { EmojiReactionGroup } from "./emoji-reaction";
-import { EmojiReactionPicker } from "./emoji-reaction-picker";
-
-const meta = {
-  title: "Components/Emoji/EmojiReactionPicker",
-  component: EmojiReactionPicker,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof EmojiReactionPicker>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    isOpen: false,
-    handleToggle: () => {},
-    onChange: () => {},
-    label: "Pick Emoji",
-  },
-  render() {
-    const [isOpen, setIsOpen] = useState(false);
-    const [selectedEmoji, setSelectedEmoji] = useState<string | null>(null);
-
-    return (
-      <div className="space-y-4 p-4">
-        <EmojiReactionPicker
-          isOpen={isOpen}
-          handleToggle={setIsOpen}
-          onChange={setSelectedEmoji}
-          closeOnSelect
-          label={
-            <span className="flex size-8 items-center justify-center rounded-md px-2 text-18">
-              {selectedEmoji ? stringToEmoji(selectedEmoji) : <ReactionOutline className="h-6 text-primary" />}
-            </span>
-          }
-        />
-        {selectedEmoji && (
-          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">Selected: {selectedEmoji}</div>
-        )}
-      </div>
-    );
-  },
-};
-
-export const WithCustomLabel: Story = {
-  args: {
-    isOpen: false,
-    handleToggle: () => {},
-    onChange: () => {},
-    label: "Add Reaction",
-  },
-  render() {
-    const [isOpen, setIsOpen] = useState(false);
-    const [selectedEmoji, setSelectedEmoji] = useState<string | null>(null);
-
-    return (
-      <div className="space-y-4 p-4">
-        <EmojiReactionPicker
-          isOpen={isOpen}
-          handleToggle={setIsOpen}
-          onChange={setSelectedEmoji}
-          closeOnSelect
-          label={
-            <button className="flex items-center gap-2 rounded-sm border border-subtle bg-layer-1 px-4 py-2 hover:bg-surface-2">
-              {selectedEmoji ? stringToEmoji(selectedEmoji) : <ReactionOutline className="h-4 w-4" />}
-              <span className="text-13">Add Reaction</span>
-            </button>
-          }
-        />
-        {selectedEmoji && <div className="text-13">Selected: {selectedEmoji}</div>}
-      </div>
-    );
-  },
-};
-
-export const InlineReactions: Story = {
-  args: {
-    isOpen: false,
-    handleToggle: () => {},
-    onChange: () => {},
-    label: "Add",
-  },
-  render() {
-    const [isOpen, setIsOpen] = useState(false);
-    const [reactions, setReactions] = useState<EmojiReactionType[]>([
-      { emoji: "👍", count: 3, reacted: false, users: ["Alice", "Bob", "Charlie"] },
-      { emoji: "❤️", count: 2, reacted: true, users: ["You", "David"] },
-    ]);
-
-    const handleReactionAdd = (emoji: string) => {
-      setReactions((prev) => {
-        const existing = prev.find((r) => r.emoji === emoji);
-        if (existing) {
-          return prev.map((r) => (r.emoji === emoji ? { ...r, count: r.count + 1, reacted: true } : r));
-        }
-        return [...prev, { emoji, count: 1, reacted: true, users: ["You"] }];
-      });
-    };
-
-    const handleReactionClick = (emoji: string) => {
-      setReactions((prev) =>
-        prev.map((r) => {
-          if (r.emoji === emoji) {
-            return {
-              ...r,
-              reacted: !r.reacted,
-              count: r.reacted ? r.count - 1 : r.count + 1,
-            };
-          }
-          return r;
-        })
-      );
-    };
-
-    return (
-      <div className="p-4">
-        <EmojiReactionGroup
-          reactions={reactions}
-          onReactionClick={handleReactionClick}
-          onAddReaction={() => setIsOpen(true)}
-          showAddButton={false}
-        />
-        <EmojiReactionPicker
-          isOpen={isOpen}
-          handleToggle={setIsOpen}
-          onChange={handleReactionAdd}
-          closeOnSelect
-          label={
-            <button className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-dashed border-strong bg-surface-1 text-placeholder transition-all duration-200 hover:border-accent-strong hover:bg-accent-primary/5 hover:text-accent-primary">
-              <ReactionOutline className="h-3.5 w-3.5" />
-            </button>
-          }
-        />
-      </div>
-    );
-  },
-};
-
-export const DifferentPlacements: Story = {
-  args: {
-    isOpen: false,
-    handleToggle: () => {},
-    onChange: () => {},
-    label: "Placements",
-  },
-  render() {
-    const [isOpen1, setIsOpen1] = useState(false);
-    const [isOpen2, setIsOpen2] = useState(false);
-    const [isOpen3, setIsOpen3] = useState(false);
-    const [isOpen4, setIsOpen4] = useState(false);
-
-    return (
-      <div className="space-y-8 p-8">
-        <div className="flex items-center gap-4">
-          <span className="w-32 text-13">Bottom Start:</span>
-          <EmojiReactionPicker
-            isOpen={isOpen1}
-            handleToggle={setIsOpen1}
-            onChange={() => {}}
-            placement="bottom-start"
-            label={<ReactionOutline className="h-6 w-6" />}
-          />
-        </div>
-        <div className="flex items-center gap-4">
-          <span className="w-32 text-13">Bottom End:</span>
-          <EmojiReactionPicker
-            isOpen={isOpen2}
-            handleToggle={setIsOpen2}
-            onChange={() => {}}
-            placement="bottom-end"
-            label={<ReactionOutline className="h-6 w-6" />}
-          />
-        </div>
-        <div className="flex items-center gap-4">
-          <span className="w-32 text-13">Top Start:</span>
-          <EmojiReactionPicker
-            isOpen={isOpen3}
-            handleToggle={setIsOpen3}
-            onChange={() => {}}
-            placement="top-start"
-            label={<ReactionOutline className="h-6 w-6" />}
-          />
-        </div>
-        <div className="flex items-center gap-4">
-          <span className="w-32 text-13">Top End:</span>
-          <EmojiReactionPicker
-            isOpen={isOpen4}
-            handleToggle={setIsOpen4}
-            onChange={() => {}}
-            placement="top-end"
-            label={<ReactionOutline className="h-6 w-6" />}
-          />
-        </div>
-      </div>
-    );
-  },
-};
-
-export const SearchDisabled: Story = {
-  args: {
-    isOpen: false,
-    handleToggle: () => {},
-    onChange: () => {},
-    label: "No Search",
-  },
-  render() {
-    const [isOpen, setIsOpen] = useState(false);
-    const [selectedEmoji, setSelectedEmoji] = useState<string | null>(null);
-
-    return (
-      <div className="space-y-4 p-4">
-        <EmojiReactionPicker
-          isOpen={isOpen}
-          handleToggle={setIsOpen}
-          onChange={setSelectedEmoji}
-          closeOnSelect
-          searchDisabled
-          label={
-            <button className="rounded-sm border border-subtle bg-layer-1 px-4 py-2 hover:bg-surface-2">
-              No Search
-            </button>
-          }
-        />
-        {selectedEmoji && <div className="text-13">Selected: {selectedEmoji}</div>}
-      </div>
-    );
-  },
-};
-
-export const CustomSearchPlaceholder: Story = {
-  args: {
-    isOpen: false,
-    handleToggle: () => {},
-    onChange: () => {},
-    label: "Custom Search",
-  },
-  render() {
-    const [isOpen, setIsOpen] = useState(false);
-    const [selectedEmoji, setSelectedEmoji] = useState<string | null>(null);
-
-    return (
-      <div className="space-y-4 p-4">
-        <EmojiReactionPicker
-          isOpen={isOpen}
-          handleToggle={setIsOpen}
-          onChange={setSelectedEmoji}
-          closeOnSelect
-          searchPlaceholder="Find your emoji..."
-          label={
-            <button className="rounded-sm border border-subtle bg-layer-1 px-4 py-2 hover:bg-surface-2">
-              Custom Search
-            </button>
-          }
-        />
-        {selectedEmoji && <div className="text-13">Selected: {selectedEmoji}</div>}
-      </div>
-    );
-  },
-};
-
-export const CloseOnSelectDisabled: Story = {
-  args: {
-    isOpen: false,
-    handleToggle: () => {},
-    onChange: () => {},
-    label: "Select Multiple",
-  },
-  render() {
-    const [isOpen, setIsOpen] = useState(false);
-    const [selectedEmojis, setSelectedEmojis] = useState<string[]>([]);
-
-    const handleChange = (emoji: string) => {
-      setSelectedEmojis((prev) => [...prev, emoji]);
-    };
-
-    return (
-      <div className="space-y-4 p-4">
-        <div className="flex items-center gap-2">
-          <EmojiReactionPicker
-            isOpen={isOpen}
-            handleToggle={setIsOpen}
-            onChange={handleChange}
-            closeOnSelect={false}
-            label={
-              <button className="rounded-sm border border-subtle bg-layer-1 px-4 py-2 hover:bg-surface-2">
-                Select Multiple (Stays Open)
-              </button>
-            }
-          />
-          <button
-            className="rounded-sm bg-layer-1 px-3 py-1.5 text-13 hover:bg-surface-2"
-            onClick={() => setSelectedEmojis([])}
-          >
-            Clear
-          </button>
-        </div>
-        {selectedEmojis.length > 0 && (
-          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">
-            <div className="mb-2 font-medium">Selected ({selectedEmojis.length}):</div>
-            <div className="flex flex-wrap gap-2">
-              {selectedEmojis.map((emoji, idx) => (
-                <span key={idx} className="text-18">
-                  {emoji}
-                </span>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    );
-  },
-};
-
-export const InMessageContext: Story = {
-  args: {
-    isOpen: false,
-    handleToggle: () => {},
-    onChange: () => {},
-    label: "Message",
-  },
-  render() {
-    const [isOpen, setIsOpen] = useState(false);
-    const [reactions, setReactions] = useState<EmojiReactionType[]>([
-      { emoji: "👍", count: 5, reacted: false, users: ["Alice", "Bob", "Charlie"] },
-    ]);
-
-    const handleReactionAdd = (emoji: string) => {
-      setReactions((prev) => {
-        const existing = prev.find((r) => r.emoji === emoji);
-        if (existing) {
-          return prev.map((r) => (r.emoji === emoji ? { ...r, count: r.count + 1, reacted: true } : r));
-        }
-        return [...prev, { emoji, count: 1, reacted: true, users: ["You"] }];
-      });
-    };
-
-    const handleReactionClick = (emoji: string) => {
-      setReactions((prev) =>
-        prev.map((r) => {
-          if (r.emoji === emoji) {
-            return {
-              ...r,
-              reacted: !r.reacted,
-              count: r.reacted ? r.count - 1 : r.count + 1,
-            };
-          }
-          return r;
-        })
-      );
-    };
-
-    return (
-      <div className="max-w-md space-y-3 rounded-lg border border-subtle p-4">
-        <div className="flex items-start gap-3">
-          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-accent-primary text-13 text-on-color">
-            AB
-          </div>
-          <div className="flex-1">
-            <div className="text-13 font-medium">Alice Brown</div>
-            <div className="mt-1 text-13 text-tertiary">
-              Just finished the design for the new dashboard! Would love to hear your thoughts.
-            </div>
-          </div>
-        </div>
-        <div className="flex gap-2">
-          <EmojiReactionGroup reactions={reactions} onReactionClick={handleReactionClick} showAddButton={false} />
-          <EmojiReactionPicker
-            isOpen={isOpen}
-            handleToggle={setIsOpen}
-            onChange={handleReactionAdd}
-            closeOnSelect
-            label={
-              <button className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-dashed border-strong bg-surface-1 text-placeholder transition-all duration-200 hover:border-accent-strong hover:bg-accent-primary/5 hover:text-accent-primary">
-                <ReactionOutline className="h-3.5 w-3.5" />
-              </button>
-            }
-          />
-        </div>
-      </div>
-    );
-  },
-};
diff --git a/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx b/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx
deleted file mode 100644
index ebfb2a67c3c..00000000000
--- a/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx
+++ /dev/null
@@ -1,241 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import type { EmojiReactionType } from "./emoji-reaction";
-import { EmojiReaction, EmojiReactionGroup, EmojiReactionButton } from "./emoji-reaction";
-
-const meta = {
-  title: "Components/Emoji/EmojiReaction",
-  component: EmojiReaction,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof EmojiReaction>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Single: Story = {
-  args: {
-    emoji: "👍",
-    count: 5,
-    reacted: false,
-    users: ["Alice", "Bob", "Charlie"],
-  },
-};
-
-export const Reacted: Story = {
-  args: {
-    emoji: "❤️",
-    count: 12,
-    reacted: true,
-    users: ["Alice", "Bob", "Charlie", "David", "Emma", "Frank"],
-  },
-};
-
-export const Interactive: Story = {
-  args: {
-    emoji: "👍",
-    count: 0,
-  },
-  render() {
-    const [reacted, setReacted] = useState(false);
-    const [count, setCount] = useState(5);
-
-    const handleClick = () => {
-      setReacted(!reacted);
-      setCount(reacted ? count - 1 : count + 1);
-    };
-
-    return (
-      <div className="flex flex-col items-center gap-4">
-        <EmojiReaction
-          emoji="👍"
-          count={count}
-          reacted={reacted}
-          users={["Alice", "Bob", "Charlie"]}
-          onReactionClick={handleClick}
-        />
-        <p className="text-13 text-placeholder">Click to toggle reaction</p>
-      </div>
-    );
-  },
-};
-
-export const WithTooltip: Story = {
-  args: {
-    emoji: "🎉",
-    count: 8,
-    reacted: false,
-    users: ["Alice", "Bob", "Charlie", "David", "Emma", "Frank", "Grace", "Henry"],
-  },
-};
-
-export const WithoutCount: Story = {
-  args: {
-    emoji: "🔥",
-    count: 0,
-    reacted: false,
-    showCount: false,
-  },
-};
-
-export const MultipleReactions: Story = {
-  args: {
-    emoji: "👍",
-    count: 0,
-  },
-  render() {
-    const [reactions, setReactions] = useState<EmojiReactionType[]>([
-      { emoji: "👍", count: 5, reacted: false, users: ["Alice", "Bob", "Charlie"] },
-      { emoji: "❤️", count: 12, reacted: true, users: ["David", "Emma", "Frank"] },
-      { emoji: "🎉", count: 3, reacted: false, users: ["Grace"] },
-    ]);
-
-    const handleReactionClick = (emoji: string) => {
-      setReactions((prev) =>
-        prev.map((r) => {
-          if (r.emoji === emoji) {
-            return {
-              ...r,
-              reacted: !r.reacted,
-              count: r.reacted ? r.count - 1 : r.count + 1,
-            };
-          }
-          return r;
-        })
-      );
-    };
-
-    return (
-      <div className="flex gap-2">
-        {reactions.map((reaction) => (
-          <EmojiReaction
-            key={reaction.emoji}
-            emoji={reaction.emoji}
-            count={reaction.count}
-            reacted={reaction.reacted}
-            users={reaction.users}
-            onReactionClick={handleReactionClick}
-          />
-        ))}
-      </div>
-    );
-  },
-};
-
-export const AddButton: Story = {
-  args: {
-    emoji: "➕",
-    count: 0,
-  },
-  render() {
-    const handleAdd = () => {
-      alert("Add reaction clicked");
-    };
-
-    return <EmojiReactionButton onAddReaction={handleAdd} />;
-  },
-};
-
-export const ReactionGroup: Story = {
-  args: {
-    emoji: "👍",
-    count: 0,
-  },
-  render() {
-    const [reactions, setReactions] = useState<EmojiReactionType[]>([
-      { emoji: "👍", count: 5, reacted: false, users: ["Alice", "Bob", "Charlie"] },
-      { emoji: "❤️", count: 12, reacted: true, users: ["David", "Emma", "Frank"] },
-      { emoji: "🎉", count: 3, reacted: false, users: ["Grace"] },
-      { emoji: "🔥", count: 8, reacted: false, users: ["Henry", "Ivy"] },
-    ]);
-
-    const handleReactionClick = (emoji: string) => {
-      setReactions((prev) =>
-        prev.map((r) => {
-          if (r.emoji === emoji) {
-            return {
-              ...r,
-              reacted: !r.reacted,
-              count: r.reacted ? r.count - 1 : r.count + 1,
-            };
-          }
-          return r;
-        })
-      );
-    };
-
-    const handleAddReaction = () => {
-      alert("Add reaction clicked");
-    };
-
-    return (
-      <EmojiReactionGroup
-        reactions={reactions}
-        onReactionClick={handleReactionClick}
-        onAddReaction={handleAddReaction}
-      />
-    );
-  },
-};
-
-export const InMessageContext: Story = {
-  args: {
-    emoji: "👍",
-    count: 0,
-  },
-  render() {
-    const [reactions, setReactions] = useState<EmojiReactionType[]>([
-      { emoji: "👍", count: 5, reacted: false, users: ["Alice", "Bob", "Charlie"] },
-      { emoji: "❤️", count: 2, reacted: true, users: ["You", "David"] },
-    ]);
-
-    const handleReactionClick = (emoji: string) => {
-      setReactions((prev) =>
-        prev.map((r) => {
-          if (r.emoji === emoji) {
-            return {
-              ...r,
-              reacted: !r.reacted,
-              count: r.reacted ? r.count - 1 : r.count + 1,
-            };
-          }
-          return r;
-        })
-      );
-    };
-
-    return (
-      <div className="max-w-md space-y-3 rounded-lg border border-subtle p-4">
-        <div className="flex items-start gap-3">
-          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-accent-primary text-13 text-on-color">
-            AB
-          </div>
-          <div className="flex-1">
-            <div className="text-13 font-medium">Alice Brown</div>
-            <div className="mt-1 text-13 text-tertiary">
-              Hey everyone! Just wanted to share some exciting news about our project launch next week!
-            </div>
-          </div>
-        </div>
-        <EmojiReactionGroup reactions={reactions} onReactionClick={handleReactionClick} />
-      </div>
-    );
-  },
-};
-
-export const ManyUsers: Story = {
-  args: {
-    emoji: "🎉",
-    count: 47,
-    reacted: true,
-    users: ["Alice", "Bob", "Charlie", "David", "Emma", "Frank", "Grace", "Henry", "Ivy", "Jack", "Kate", "Liam"],
-  },
-};
diff --git a/packages/propel/src/empty-state/assets-showcase.stories.tsx b/packages/propel/src/empty-state/assets-showcase.stories.tsx
deleted file mode 100644
index ca4d7c16238..00000000000
--- a/packages/propel/src/empty-state/assets-showcase.stories.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { HorizontalStackAssetsMap } from "./assets/horizontal-stack/constant";
-import { IllustrationMap } from "./assets/illustration/constant";
-import { VerticalStackAssetsMap } from "./assets/vertical-stack/constant";
-
-// Meta for asset showcase
-const meta: Meta = {
-  title: "Components/EmptyState/Assets Showcase",
-  parameters: {
-    layout: "fullscreen",
-    docs: {
-      description: {
-        component: "Visual catalog of all available empty state assets organized by type.",
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj;
-
-export const HorizontalStackAssets: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Horizontal stack assets designed for compact empty states. These are optimized for smaller, inline empty state scenarios.",
-      },
-    },
-  },
-  render: () => (
-    <div className="p-8">
-      <div className="mb-6">
-        <h2 className="text-18 font-semibold text-primary">Horizontal Stack Assets</h2>
-        <p className="text-13 text-tertiary">Used primarily in EmptyStateCompact component</p>
-      </div>
-      <div className="grid w-full grid-cols-12 gap-6">
-        {HorizontalStackAssetsMap.map((item) => (
-          <div
-            key={item.title}
-            className="col-span-6 flex flex-col items-center justify-center gap-3 rounded-lg border border-subtle bg-surface-1 p-6 sm:col-span-4 lg:col-span-3"
-          >
-            <div className="flex h-24 w-24 items-center justify-center">{item.asset}</div>
-            <p className="text-center text-11 font-medium text-secondary">{item.title}</p>
-            <code className="rounded-sm bg-layer-1 px-2 py-1 text-11 text-tertiary">
-              {item.title.toLowerCase().replace(/\s+/g, "-")}
-            </code>
-          </div>
-        ))}
-      </div>
-    </div>
-  ),
-};
-
-export const VerticalStackAssets: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Vertical stack assets designed for detailed empty states. These are larger and more prominent, suitable for feature-specific empty states.",
-      },
-    },
-  },
-  render: () => (
-    <div className="p-8">
-      <div className="mb-6">
-        <h2 className="text-18 font-semibold text-primary">Vertical Stack Assets</h2>
-        <p className="text-13 text-tertiary">Used primarily in EmptyStateDetailed component</p>
-      </div>
-      <div className="grid w-full grid-cols-12 gap-6">
-        {VerticalStackAssetsMap.map((item) => (
-          <div
-            key={item.title}
-            className="col-span-6 flex flex-col items-center justify-center gap-3 rounded-lg border border-subtle bg-surface-1 p-6 sm:col-span-4 lg:col-span-3"
-          >
-            <div className="flex h-32 w-32 items-center justify-center">{item.asset}</div>
-            <p className="text-center text-11 font-medium text-secondary">
-              {item.title.replace(/VerticalStackIllustration$/, "")}
-            </p>
-            <code className="rounded-sm bg-layer-1 px-2 py-1 text-11 text-tertiary">
-              {item.title
-                .replace(/VerticalStackIllustration$/, "")
-                .replace(/([A-Z])/g, "-$1")
-                .toLowerCase()
-                .slice(1)}
-            </code>
-          </div>
-        ))}
-      </div>
-    </div>
-  ),
-};
-
-export const IllustrationAssets: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story: "Illustration assets available for both compact and detailed empty states.",
-      },
-    },
-  },
-  render: () => (
-    <div className="p-8">
-      <div className="mb-6">
-        <h2 className="text-18 font-semibold text-primary">Illustration Assets</h2>
-        <p className="text-13 text-tertiary">Available in both EmptyStateCompact and EmptyStateDetailed</p>
-      </div>
-      <div className="grid w-full grid-cols-12 gap-6">
-        {IllustrationMap.map((item) => (
-          <div
-            key={item.title}
-            className="col-span-6 flex flex-col items-center justify-center gap-3 rounded-lg border border-subtle bg-surface-1 p-6 sm:col-span-4 lg:col-span-3"
-          >
-            <div className="flex h-24 w-24 items-center justify-center">{item.asset}</div>
-            <p className="text-center text-11 font-medium text-secondary">{item.title}</p>
-            <code className="rounded-sm bg-layer-1 px-2 py-1 text-11 text-tertiary">{item.title.toLowerCase()}</code>
-          </div>
-        ))}
-      </div>
-    </div>
-  ),
-};
-
-export const AllAssets: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story: "Complete catalog of all available empty state assets.",
-      },
-    },
-  },
-  render: () => (
-    <div className="space-y-12 p-8">
-      {/* Horizontal Stack */}
-      <div>
-        <div className="mb-6">
-          <h2 className="text-18 font-semibold text-primary">Horizontal Stack Assets</h2>
-          <p className="text-13 text-tertiary">For EmptyStateCompact - {HorizontalStackAssetsMap.length} assets</p>
-        </div>
-        <div className="grid w-full grid-cols-12 gap-4">
-          {HorizontalStackAssetsMap.map((item) => (
-            <div
-              key={item.title}
-              className="col-span-6 flex flex-col items-center justify-center gap-2 rounded-sm border border-subtle bg-surface-1 p-4 sm:col-span-3 lg:col-span-2"
-            >
-              <div className="flex h-16 w-16 items-center justify-center">{item.asset}</div>
-              <code className="text-10 text-placeholder">{item.title.toLowerCase().replace(/\s+/g, "-")}</code>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Vertical Stack */}
-      <div>
-        <div className="mb-6">
-          <h2 className="text-18 font-semibold text-primary">Vertical Stack Assets</h2>
-          <p className="text-13 text-tertiary">For EmptyStateDetailed - {VerticalStackAssetsMap.length} assets</p>
-        </div>
-        <div className="grid w-full grid-cols-12 gap-4">
-          {VerticalStackAssetsMap.map((item) => (
-            <div
-              key={item.title}
-              className="col-span-6 flex flex-col items-center justify-center gap-2 rounded-sm border border-subtle bg-surface-1 p-4 sm:col-span-3 lg:col-span-2"
-            >
-              <div className="flex h-20 w-20 items-center justify-center">{item.asset}</div>
-              <code className="text-center text-10 text-placeholder">
-                {item.title
-                  .replace(/VerticalStackIllustration$/, "")
-                  .replace(/([A-Z])/g, "-$1")
-                  .toLowerCase()
-                  .slice(1)}
-              </code>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Illustrations */}
-      <div>
-        <div className="mb-6">
-          <h2 className="text-18 font-semibold text-primary">Illustration Assets</h2>
-          <p className="text-13 text-tertiary">For both components - {IllustrationMap.length} assets</p>
-        </div>
-        <div className="grid w-full grid-cols-12 gap-4">
-          {IllustrationMap.map((item) => (
-            <div
-              key={item.title}
-              className="col-span-6 flex flex-col items-center justify-center gap-2 rounded-sm border border-subtle bg-surface-1 p-4 sm:col-span-3 lg:col-span-2"
-            >
-              <div className="flex h-16 w-16 items-center justify-center">{item.asset}</div>
-              <code className="text-10 text-placeholder">{item.title.toLowerCase()}</code>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  ),
-};
diff --git a/packages/propel/src/empty-state/compact-empty-state.stories.tsx b/packages/propel/src/empty-state/compact-empty-state.stories.tsx
deleted file mode 100644
index 4020b424fd8..00000000000
--- a/packages/propel/src/empty-state/compact-empty-state.stories.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { EmptyStateCompact } from "./compact-empty-state";
-import type { BaseEmptyStateCommonProps } from "./types";
-
-const meta: Meta<BaseEmptyStateCommonProps> = {
-  title: "Components/EmptyState/Compact",
-  component: EmptyStateCompact,
-  parameters: {
-    layout: "centered",
-    docs: {
-      description: {
-        component:
-          "A compact empty state component with centered title, asset, and action buttons. Best used for simple, space-constrained empty states. Supports horizontal stack and illustration assets via `assetKey`.",
-      },
-    },
-  },
-  argTypes: {
-    title: {
-      control: "text",
-      description: "The main title text for the empty state",
-    },
-    assetKey: {
-      control: "select",
-      options: [
-        "customer",
-        "epic",
-        "estimate",
-        "export",
-        "intake",
-        "label",
-        "link",
-        "members",
-        "note",
-        "priority",
-        "project",
-        "settings",
-        "state",
-        "template",
-        "token",
-        "unknown",
-        "update",
-        "webhook",
-        "work-item",
-        "worklog",
-        "inbox",
-      ],
-      description: "Predefined asset key (horizontal-stack or illustration)",
-    },
-    className: {
-      control: "text",
-      description: "Additional CSS classes to apply to the content wrapper",
-    },
-    rootClassName: {
-      control: "text",
-      description: "Additional CSS classes to apply to the root container",
-    },
-    assetClassName: {
-      control: "text",
-      description: "Additional CSS classes to apply to the asset",
-    },
-    asset: {
-      control: false,
-      description: "Custom React node to display as the visual asset (use this for full control instead of assetKey)",
-    },
-    actions: {
-      control: false,
-      description: "Array of action buttons to display",
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<BaseEmptyStateCommonProps>;
-
-// Using assetKey (recommended approach)
-export const WithAssetKey: Story = {
-  args: {
-    assetKey: "work-item",
-    assetClassName: "size-20",
-    title: "There're no progress metrics to show yet.",
-  },
-};
-
-export const WithAssetKeyAndAction: Story = {
-  args: {
-    assetKey: "project",
-    assetClassName: "size-20",
-    title: "No projects found",
-    actions: [
-      {
-        label: "Create Project",
-        onClick: () => console.log("create-clicked"),
-        variant: "primary",
-      },
-    ],
-  },
-};
-
-export const WithAssetKeyAndMultipleActions: Story = {
-  args: {
-    assetKey: "members",
-    assetClassName: "size-20",
-    title: "Get started with your workspace",
-    actions: [
-      {
-        label: "Create Project",
-        onClick: () => console.log("create-clicked"),
-        variant: "primary",
-      },
-      {
-        label: "Import",
-        onClick: () => console.log("import-clicked"),
-        variant: "secondary",
-      },
-    ],
-  },
-};
-
-// Using custom asset (legacy approach)
-export const WithCustomAsset: Story = {
-  args: {
-    asset: (
-      <svg className="h-40 w-40" viewBox="0 0 160 180" fill="none">
-        <rect width="160" height="180" fill="#F3F4F6" rx="8" />
-      </svg>
-    ),
-    title: "No items found",
-    actions: [
-      {
-        label: "Create Item",
-        onClick: () => console.log("create-clicked"),
-        variant: "primary",
-      },
-    ],
-  },
-};
-
-export const TitleOnly: Story = {
-  args: {
-    title: "No results found",
-  },
-};
diff --git a/packages/propel/src/empty-state/detailed-empty-state.stories.tsx b/packages/propel/src/empty-state/detailed-empty-state.stories.tsx
deleted file mode 100644
index 1e3e923688a..00000000000
--- a/packages/propel/src/empty-state/detailed-empty-state.stories.tsx
+++ /dev/null
@@ -1,301 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { EmptyStateDetailed } from "./detailed-empty-state";
-import type { BaseEmptyStateCommonProps } from "./types";
-
-const meta: Meta<BaseEmptyStateCommonProps> = {
-  title: "Components/EmptyState/Detailed",
-  component: EmptyStateDetailed,
-  parameters: {
-    layout: "centered",
-    docs: {
-      description: {
-        component:
-          "A detailed empty state component with title, description, asset, and action buttons. Best used for feature-specific empty states that need more context. Supports vertical stack and illustration assets via `assetKey`.",
-      },
-    },
-  },
-  argTypes: {
-    title: {
-      control: "text",
-      description: "The main title text for the empty state",
-    },
-    description: {
-      control: "text",
-      description: "Optional description text that appears below the title",
-    },
-    assetKey: {
-      control: "select",
-      options: [
-        "archived-cycle",
-        "archived-module",
-        "archived-work-item",
-        "customer",
-        "cycle",
-        "dashboard",
-        "draft",
-        "epic",
-        "error-404",
-        "invalid-link",
-        "module",
-        "no-access",
-        "page",
-        "project",
-        "server-error",
-        "teamspace",
-        "view",
-        "work-item",
-        "inbox",
-      ],
-      description: "Predefined asset key (vertical-stack or illustration)",
-    },
-    className: {
-      control: "text",
-      description: "Additional CSS classes to apply to the content wrapper",
-    },
-    rootClassName: {
-      control: "text",
-      description: "Additional CSS classes to apply to the root container",
-    },
-    assetClassName: {
-      control: "text",
-      description: "Additional CSS classes to apply to the asset",
-    },
-    asset: {
-      control: false,
-      description: "Custom React node to display as the visual asset (use this for full control instead of assetKey)",
-    },
-    actions: {
-      control: false,
-      description: "Array of action buttons to display",
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<BaseEmptyStateCommonProps>;
-
-// Primary story - showcases the most common usage
-export const Default: Story = {
-  args: {
-    assetKey: "epic",
-    assetClassName: "w-40 h-45",
-    title: "Create an epic and split work into smaller goals",
-    description: "For larger bodies of work that span several cycles and can live across modules, create an epic.",
-    actions: [
-      {
-        label: "Create an Epic",
-        onClick: () => console.log("primary-action-clicked"),
-        variant: "primary",
-      },
-    ],
-  },
-};
-
-export const WithSingleAction: Story = {
-  args: {
-    assetKey: "project",
-    assetClassName: "w-40 h-45",
-    title: "No projects found",
-    description: "Get started by creating your first project to organize your work.",
-    actions: [
-      {
-        label: "Create Project",
-        onClick: () => console.log("create-clicked"),
-        variant: "primary",
-      },
-    ],
-  },
-};
-
-export const WithMultipleActions: Story = {
-  args: {
-    assetKey: "module",
-    assetClassName: "w-40 h-45",
-    title: "No modules found",
-    description: "Get started by creating your first module or import existing ones.",
-    actions: [
-      {
-        label: "Create Module",
-        onClick: () => console.log("create-clicked"),
-        variant: "primary",
-      },
-      {
-        label: "Import Modules",
-        onClick: () => console.log("import-clicked"),
-        variant: "secondary",
-      },
-    ],
-  },
-};
-
-export const WithoutActions: Story = {
-  args: {
-    assetKey: "dashboard",
-    assetClassName: "w-40 h-45",
-    title: "No activity yet",
-    description: "Your activity feed will show up here once you start using the platform.",
-  },
-};
-
-export const ErrorState: Story = {
-  args: {
-    assetKey: "error-404",
-    assetClassName: "w-40 h-45",
-    title: "Page not found",
-    description: "The page you're looking for doesn't exist or has been moved.",
-    actions: [
-      {
-        label: "Go to Home",
-        onClick: () => console.log("home-clicked"),
-        variant: "primary",
-      },
-    ],
-  },
-};
-
-export const ServerErrorState: Story = {
-  name: "Error - Server",
-  args: {
-    assetKey: "server-error",
-    assetClassName: "w-40 h-45",
-    title: "Something went wrong",
-    description: "We're experiencing technical difficulties. Please try again later.",
-    actions: [
-      {
-        label: "Retry",
-        onClick: () => console.log("retry-clicked"),
-        variant: "primary",
-      },
-      {
-        label: "Contact Support",
-        onClick: () => console.log("support-clicked"),
-        variant: "secondary",
-      },
-    ],
-  },
-};
-
-export const NoAccessState: Story = {
-  name: "Access Denied",
-  args: {
-    assetKey: "no-access",
-    assetClassName: "w-40 h-45",
-    title: "You don't have access",
-    description: "Contact your workspace admin to request access to this resource.",
-  },
-};
-
-export const ArchivedState: Story = {
-  name: "Archived Content",
-  args: {
-    assetKey: "archived-work-item",
-    assetClassName: "w-40 h-45",
-    title: "No archived items",
-    description: "Archived items will appear here when you archive them.",
-  },
-};
-
-export const CycleState: Story = {
-  name: "Cycles",
-  args: {
-    assetKey: "cycle",
-    assetClassName: "w-40 h-45",
-    title: "No cycles found",
-    description: "Create cycles to organize your work into time-boxed iterations.",
-    actions: [
-      {
-        label: "Create Cycle",
-        onClick: () => console.log("create-cycle-clicked"),
-        variant: "primary",
-      },
-    ],
-  },
-};
-
-export const ModuleState: Story = {
-  name: "Modules",
-  args: {
-    assetKey: "module",
-    assetClassName: "w-40 h-45",
-    title: "No modules found",
-    description: "Modules help you organize related work items into logical groups.",
-    actions: [
-      {
-        label: "Create Module",
-        onClick: () => console.log("create-module-clicked"),
-        variant: "primary",
-      },
-    ],
-  },
-};
-
-export const ViewState: Story = {
-  name: "Views",
-  args: {
-    assetKey: "view",
-    assetClassName: "w-40 h-45",
-    title: "No saved views",
-    description: "Create custom views to filter and organize your work items.",
-    actions: [
-      {
-        label: "Create View",
-        onClick: () => console.log("create-view-clicked"),
-        variant: "primary",
-      },
-    ],
-  },
-};
-
-export const PageState: Story = {
-  name: "Pages",
-  args: {
-    assetKey: "page",
-    assetClassName: "w-40 h-45",
-    title: "No pages found",
-    description: "Create pages to document your project, share knowledge, and collaborate.",
-    actions: [
-      {
-        label: "Create Page",
-        onClick: () => console.log("create-page-clicked"),
-        variant: "primary",
-      },
-    ],
-  },
-};
-
-// Using custom asset (for special cases)
-export const WithCustomAsset: Story = {
-  name: "Custom Asset",
-  args: {
-    asset: (
-      <svg className="h-45 w-40" viewBox="0 0 160 180" fill="none">
-        <rect width="160" height="180" fill="#F3F4F6" rx="8" />
-        <circle cx="80" cy="90" r="30" fill="#E5E7EB" />
-      </svg>
-    ),
-    title: "Custom asset example",
-    description: "This example uses a custom SVG asset instead of predefined assetKey.",
-    actions: [
-      {
-        label: "Get Started",
-        onClick: () => console.log("action-clicked"),
-        variant: "primary",
-      },
-    ],
-  },
-};
-
-// Minimal example
-export const Minimal: Story = {
-  name: "Minimal - Text Only",
-  args: {
-    title: "No data available",
-    description: "Data will appear here once available.",
-  },
-};
diff --git a/packages/propel/src/icon-button/helper.tsx b/packages/propel/src/icon-button/helper.tsx
deleted file mode 100644
index a4e421cb9bb..00000000000
--- a/packages/propel/src/icon-button/helper.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority";
-import type React from "react";
-
-export const iconButtonVariants = cva(
-  "inline-flex aspect-square items-center justify-center gap-1 whitespace-nowrap transition-colors focus-visible:outline-none disabled:pointer-events-none",
-  {
-    variants: {
-      variant: {
-        primary:
-          "bg-accent-primary text-on-color hover:bg-accent-primary-hover focus:bg-accent-primary-active active:bg-accent-primary-active disabled:bg-layer-disabled disabled:text-on-color-disabled",
-        "error-fill":
-          "bg-danger-primary text-on-color hover:bg-danger-primary-hover focus:bg-danger-primary-active active:bg-danger-primary-active disabled:bg-layer-disabled disabled:text-disabled",
-        "error-outline":
-          "border border-danger-strong bg-layer-2 text-danger-primary hover:bg-danger-subtle focus:bg-danger-subtle-hover active:bg-danger-subtle-hover disabled:border-subtle-1 disabled:bg-layer-2 disabled:text-disabled",
-        secondary:
-          "border border-strong bg-layer-2 text-secondary shadow-raised-100 hover:bg-layer-2-hover focus:bg-layer-2-active active:bg-layer-2-active disabled:border-subtle-1 disabled:bg-layer-transparent disabled:text-disabled",
-        tertiary:
-          "bg-layer-3 text-secondary hover:bg-layer-3-hover focus:bg-layer-3-active active:bg-layer-3-active disabled:bg-layer-transparent disabled:text-disabled",
-        ghost:
-          "bg-layer-transparent text-secondary hover:bg-layer-transparent-hover focus:bg-layer-transparent-active active:bg-layer-transparent-active disabled:bg-layer-transparent disabled:text-disabled",
-      },
-      size: {
-        sm: "size-5 rounded-sm",
-        base: "size-6 rounded-md",
-        lg: "size-7 rounded-md",
-        xl: "size-8 rounded-md",
-      },
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "base",
-    },
-  }
-);
-
-type IconButtonPropsWithChildren = React.ButtonHTMLAttributes<HTMLButtonElement> &
-  VariantProps<typeof iconButtonVariants> & {
-    icon: React.FC<{ className?: string }>;
-    loading?: boolean;
-    iconClassName?: string;
-  };
-export type IconButtonProps = Omit<IconButtonPropsWithChildren, "children">;
-
-export function getIconButtonStyling(
-  variant: NonNullable<IconButtonProps["variant"]>,
-  size: NonNullable<IconButtonProps["size"]>
-): string {
-  return iconButtonVariants({ variant, size });
-}
diff --git a/packages/propel/src/icon-button/icon-button.stories.tsx b/packages/propel/src/icon-button/icon-button.stories.tsx
deleted file mode 100644
index c23aad60b59..00000000000
--- a/packages/propel/src/icon-button/icon-button.stories.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { IconButton } from "./icon-button";
-
-const icon = () => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  >
-    <path d="M12 5v14m-7-7h14" />
-  </svg>
-);
-
-const meta = {
-  title: "Components/IconButton",
-  component: IconButton,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: {
-    icon,
-  },
-} satisfies Meta<typeof IconButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    icon,
-  },
-};
-
-export const Primary: Story = {
-  args: {
-    variant: "primary",
-    icon,
-  },
-};
-
-export const ErrorFill: Story = {
-  args: {
-    variant: "error-fill",
-    icon,
-  },
-};
-
-export const ErrorOutline: Story = {
-  args: {
-    variant: "error-outline",
-    icon,
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    variant: "secondary",
-    icon,
-  },
-};
-
-export const Tertiary: Story = {
-  args: {
-    variant: "tertiary",
-    icon,
-  },
-};
-
-export const Ghost: Story = {
-  args: {
-    variant: "ghost",
-    icon,
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: "sm",
-    icon,
-  },
-};
-
-export const Base: Story = {
-  args: {
-    size: "base",
-    icon,
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: "lg",
-    icon,
-  },
-};
-
-export const ExtraLarge: Story = {
-  args: {
-    size: "xl",
-    icon,
-  },
-};
-
-export const Loading: Story = {
-  args: {
-    loading: true,
-    icon,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-    icon,
-  },
-};
-
-export const AllVariants: Story = {
-  render() {
-    return (
-      <div className="space-y-4">
-        <div className="space-y-2">
-          <h3 className="text-16 font-semibold">Primary Variants</h3>
-          <div className="flex flex-wrap gap-2">
-            <IconButton variant="primary" icon={icon} />
-            <IconButton variant="error-fill" icon={icon} />
-            <IconButton variant="error-outline" icon={icon} />
-            <IconButton variant="secondary" icon={icon} />
-            <IconButton variant="tertiary" icon={icon} />
-            <IconButton variant="ghost" icon={icon} />
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const AllSizes: Story = {
-  render() {
-    return (
-      <div className="space-y-4">
-        <div className="flex items-center gap-2">
-          <IconButton size="sm" icon={icon} />
-          <IconButton size="base" icon={icon} />
-          <IconButton size="lg" icon={icon} />
-          <IconButton size="xl" icon={icon} />
-        </div>
-      </div>
-    );
-  },
-};
-
-export const AllStates: Story = {
-  render() {
-    return (
-      <div className="space-y-4">
-        <div className="space-y-2">
-          <h3 className="text-16 font-semibold">Button States</h3>
-          <div className="flex flex-wrap gap-2">
-            <IconButton icon={icon} />
-            <IconButton loading icon={icon} />
-            <IconButton disabled icon={icon} />
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
diff --git a/packages/propel/src/icon-button/icon-button.tsx b/packages/propel/src/icon-button/icon-button.tsx
deleted file mode 100644
index 626d9826cd5..00000000000
--- a/packages/propel/src/icon-button/icon-button.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-import { cn } from "../utils";
-import type { IconButtonProps } from "./helper";
-import { iconButtonVariants } from "./helper";
-
-const IconButton = React.forwardRef(function IconButton(
-  props: IconButtonProps,
-  ref: React.ForwardedRef<HTMLButtonElement>
-) {
-  const {
-    variant = "primary",
-    size = "base",
-    className = "",
-    type = "button",
-    loading = false,
-    disabled = false,
-    icon: Icon,
-    iconClassName = "",
-    ...rest
-  } = props;
-
-  return (
-    <button
-      ref={ref}
-      type={type}
-      className={cn(iconButtonVariants({ variant, size }), className)}
-      disabled={disabled || loading}
-      {...rest}
-    >
-      <Icon
-        className={cn(
-          {
-            "size-3.5": size === "sm",
-            "size-4": size === "base" || size === "lg",
-            "size-5": size === "xl",
-          },
-          iconClassName
-        )}
-      />
-    </button>
-  );
-});
-
-IconButton.displayName = "plane-ui-icon-button";
-
-export { IconButton };
diff --git a/packages/propel/src/icon-button/index.ts b/packages/propel/src/icon-button/index.ts
deleted file mode 100644
index 3788f834ec1..00000000000
--- a/packages/propel/src/icon-button/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export { IconButton } from "./icon-button";
-export { getIconButtonStyling } from "./helper";
-export type { IconButtonProps } from "./helper";
diff --git a/packages/propel/src/icons/actions/add-circle-icon.tsx b/packages/propel/src/icons/actions/add-circle-icon.tsx
deleted file mode 100644
index 2fcf3df1a21..00000000000
--- a/packages/propel/src/icons/actions/add-circle-icon.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function AddCircleIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  const clipPathId = React.useId();
-
-  return (
-    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
-      <path
-        d="M14.0413 8C14.0413 4.66339 11.3368 1.95818 8.00024 1.95801C4.66352 1.95801 1.95825 4.66328 1.95825 8C1.95843 11.3366 4.66363 14.041 8.00024 14.041C11.3367 14.0408 14.0411 11.3365 14.0413 8ZM7.37524 10.666V8.625H5.33325C4.98818 8.625 4.70843 8.34503 4.70825 8C4.70825 7.65482 4.98807 7.375 5.33325 7.375H7.37524V5.33301C7.37524 4.98783 7.65507 4.70801 8.00024 4.70801C8.34527 4.70818 8.62524 4.98794 8.62524 5.33301V7.375H10.6663C11.0114 7.375 11.2913 7.65482 11.2913 8C11.2911 8.34503 11.0113 8.625 10.6663 8.625H8.62524V10.666C8.62524 11.0111 8.34527 11.2908 8.00024 11.291C7.65507 11.291 7.37524 11.0112 7.37524 10.666ZM15.2913 8C15.2911 12.0268 12.0271 15.2908 8.00024 15.291C3.97328 15.291 0.708428 12.0269 0.708252 8C0.708252 3.97292 3.97317 0.708008 8.00024 0.708008C12.0272 0.708184 15.2913 3.97303 15.2913 8Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/actions/add-icon.tsx b/packages/propel/src/icons/actions/add-icon.tsx
deleted file mode 100644
index 2ec08e4f0b3..00000000000
--- a/packages/propel/src/icons/actions/add-icon.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function AddIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  const clipPathId = React.useId();
-
-  return (
-    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
-      <path
-        d="M14.0413 8C14.0413 4.66339 11.3368 1.95818 8.00024 1.95801C4.66352 1.95801 1.95825 4.66328 1.95825 8C1.95843 11.3366 4.66363 14.041 8.00024 14.041C11.3367 14.0408 14.0411 11.3365 14.0413 8ZM7.37524 10.666V8.625H5.33325C4.98818 8.625 4.70843 8.34503 4.70825 8C4.70825 7.65482 4.98807 7.375 5.33325 7.375H7.37524V5.33301C7.37524 4.98783 7.65507 4.70801 8.00024 4.70801C8.34527 4.70818 8.62524 4.98794 8.62524 5.33301V7.375H10.6663C11.0114 7.375 11.2913 7.65482 11.2913 8C11.2911 8.34503 11.0113 8.625 10.6663 8.625H8.62524V10.666C8.62524 11.0111 8.34527 11.2908 8.00024 11.291C7.65507 11.291 7.37524 11.0112 7.37524 10.666ZM15.2913 8C15.2911 12.0268 12.0271 15.2908 8.00024 15.291C3.97328 15.291 0.708428 12.0269 0.708252 8C0.708252 3.97292 3.97317 0.708008 8.00024 0.708008C12.0272 0.708184 15.2913 3.97303 15.2913 8Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/actions/add-reaction-icon.tsx b/packages/propel/src/icons/actions/add-reaction-icon.tsx
deleted file mode 100644
index 6942f8327af..00000000000
--- a/packages/propel/src/icons/actions/add-reaction-icon.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function AddReactionIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  const clipPathId = React.useId();
-
-  return (
-    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
-      <path
-        d="M7.74205 1.11803C8.08705 1.11822 8.36704 1.39797 8.36705 1.74303C8.36705 2.08808 8.08706 2.36783 7.74205 2.36803C6.19489 2.36804 4.64941 2.95774 3.46959 4.13756C1.11022 6.49693 1.11033 10.3221 3.46959 12.6815C5.829 15.0409 9.65407 15.0409 12.0135 12.6815C13.424 11.271 13.9923 9.33686 13.7157 7.50279C13.6644 7.16166 13.899 6.84336 14.2401 6.79185C14.5814 6.74037 14.8995 6.97593 14.951 7.31725C15.2842 9.52673 14.6003 11.8624 12.8973 13.5653C10.0497 16.4129 5.43337 16.4129 2.5858 13.5653C-0.261624 10.7177 -0.26172 6.10129 2.5858 3.25377C4.00945 1.83012 5.87693 1.11804 7.74205 1.11803ZM5.57408 9.36705C5.57469 9.36783 5.57576 9.36938 5.57701 9.37096C5.58126 9.37632 5.58935 9.38606 5.60045 9.39928C5.62309 9.42625 5.65949 9.4679 5.70884 9.51939C5.80839 9.62327 5.9578 9.76446 6.15123 9.90514C6.54052 10.1882 7.08107 10.452 7.74205 10.452C8.40303 10.4519 8.94362 10.1882 9.33287 9.90514C9.52624 9.76448 9.67573 9.62324 9.77525 9.51939C9.82463 9.46786 9.86106 9.42619 9.88365 9.39928C9.89492 9.38584 9.90289 9.37626 9.90709 9.37096C9.90903 9.36851 9.90964 9.36657 9.91002 9.36607L9.90904 9.36705C10.1164 9.09209 10.5074 9.03728 10.7831 9.244C11.0248 9.42531 11.098 9.74773 10.9735 10.0106L10.9081 10.119L10.9051 10.1229C10.9039 10.1246 10.902 10.1265 10.9003 10.1288C10.8967 10.1334 10.8921 10.1393 10.8866 10.1463C10.8753 10.1606 10.86 10.18 10.8407 10.203C10.8021 10.2489 10.7477 10.3114 10.6776 10.3846C10.5376 10.5308 10.3321 10.7232 10.0672 10.9159C9.53994 11.2993 8.74724 11.7019 7.74205 11.702C6.73657 11.702 5.94323 11.2994 5.41588 10.9159C5.15117 10.7234 4.94653 10.5307 4.8065 10.3846C4.73627 10.3113 4.681 10.2489 4.64244 10.203C4.62313 10.18 4.6078 10.1606 4.59654 10.1463C4.59098 10.1393 4.58643 10.1334 4.58287 10.1288C4.58108 10.1264 4.57927 10.1246 4.57798 10.1229C4.57738 10.1221 4.57653 10.1216 4.57603 10.121L4.57506 10.119C4.36799 9.84291 4.42405 9.45114 4.70006 9.244C4.9759 9.03712 5.3668 9.09167 5.57408 9.36705ZM5.8397 5.45689C6.32285 5.50596 6.69989 5.91397 6.70006 6.41002C6.70006 6.93918 6.27117 7.36883 5.74205 7.369C5.21278 7.369 4.78306 6.93929 4.78306 6.41002C4.78324 5.8809 5.21288 5.45201 5.74205 5.45201L5.8397 5.45689ZM9.8397 5.45689C10.3228 5.50596 10.6999 5.91395 10.7001 6.41002C10.7001 6.93921 10.2711 7.36883 9.74205 7.369C9.21284 7.369 8.78306 6.93932 8.78306 6.41002C8.78324 5.88087 9.21294 5.45201 9.74205 5.45201L9.8397 5.45689Z"
-        fill={color}
-      />
-      <path
-        d="M12.2486 4.875V3.5H10.8736C10.5284 3.5 10.2486 3.22018 10.2486 2.875C10.2486 2.52982 10.5284 2.25 10.8736 2.25H12.2486V0.875C12.2486 0.529822 12.5284 0.25 12.8736 0.25C13.2188 0.25 13.4986 0.529822 13.4986 0.875V2.25H14.8736C15.2188 2.25 15.4986 2.52982 15.4986 2.875C15.4986 3.22018 15.2188 3.5 14.8736 3.5H13.4986V4.875C13.4986 5.22018 13.2188 5.5 12.8736 5.5C12.5284 5.5 12.2486 5.22018 12.2486 4.875Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/actions/add-workitem-icon.tsx b/packages/propel/src/icons/actions/add-workitem-icon.tsx
deleted file mode 100644
index 83668de375e..00000000000
--- a/packages/propel/src/icons/actions/add-workitem-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function AddWorkItemIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M9.36189 1.34266C9.55577 1.26718 9.77503 1.29228 9.94587 1.41102C10.1167 1.52976 10.2166 1.72643 10.2135 1.93446L10.1724 4.62782L12.6832 3.65125C12.8771 3.57578 13.0963 3.60087 13.2672 3.71961C13.438 3.83836 13.5379 4.03503 13.5347 4.24305L13.5084 5.98914C13.5031 6.33428 13.2187 6.60964 12.8736 6.60438C12.5287 6.59891 12.2532 6.31549 12.2584 5.97059L12.2711 5.15223L6.77497 7.29188L6.68611 13.1395L8.18904 12.4725C8.50447 12.3324 8.87409 12.4745 9.01423 12.7899C9.15435 13.1054 9.01231 13.475 8.69685 13.6151L6.30037 14.6796C6.10549 14.7661 5.87962 14.7473 5.70173 14.6298C5.52385 14.5122 5.41821 14.3117 5.42146 14.0985L5.46248 11.4042L2.95173 12.3817C2.75801 12.4571 2.5395 12.4319 2.36873 12.3134C2.19789 12.1946 2.097 11.998 2.10017 11.7899L2.20662 4.8036C2.2073 4.7586 2.20144 4.57678 2.26423 4.41004C2.31399 4.278 2.39516 4.16094 2.50154 4.06825L2.60701 3.9911C2.71394 3.92493 2.81844 3.88917 2.85017 3.87684L9.36189 1.34266ZM10.7476 12.1024V10.954L9.70759 11.4393C9.39475 11.5852 9.02242 11.4494 8.87654 11.1366C8.73095 10.8238 8.86656 10.4523 9.17927 10.3065L10.7476 9.57411V7.84364C10.7476 7.4986 11.0276 7.21887 11.3726 7.21864C11.7178 7.21864 11.9976 7.49846 11.9976 7.84364V8.9911L13.0386 8.50672C13.3514 8.36087 13.7238 8.49578 13.8697 8.80848C14.0156 9.12132 13.8798 9.49366 13.567 9.63953L11.9976 10.371V12.1024C11.9976 12.4476 11.7178 12.7274 11.3726 12.7274C11.0276 12.7272 10.7476 12.4475 10.7476 12.1024ZM3.45369 4.98328L3.36384 10.8798L5.48298 10.0546L5.5279 7.11219C5.52859 7.06717 5.52273 6.88538 5.58552 6.71864L5.62849 6.62196C5.6773 6.52916 5.74317 6.44626 5.82283 6.37684L5.9283 6.29969C6.03518 6.23354 6.13963 6.19779 6.17146 6.18543L8.91462 5.11805L8.9488 2.84364L3.45369 4.98328Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/actions/check-icon.tsx b/packages/propel/src/icons/actions/check-icon.tsx
deleted file mode 100644
index cc32efaf8fe..00000000000
--- a/packages/propel/src/icons/actions/check-icon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export const CheckIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M12.9746 3.78242C13.2185 3.53862 13.6143 3.53873 13.8584 3.78242C14.1024 4.0265 14.1024 4.42311 13.8584 4.66719L6.52534 12.0002C6.28132 12.2442 5.88565 12.2441 5.64155 12.0002L2.30757 8.66719C2.06349 8.42311 2.06349 8.0265 2.30757 7.78242C2.55165 7.53835 2.94826 7.53835 3.19234 7.78242L6.08296 10.674L12.9746 3.78242Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
diff --git a/packages/propel/src/icons/actions/close-icon.tsx b/packages/propel/src/icons/actions/close-icon.tsx
deleted file mode 100644
index aaeaff96a4d..00000000000
--- a/packages/propel/src/icons/actions/close-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function CloseIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
-      <path
-        d="M10.8501 4.18306C11.094 3.93925 11.4898 3.93936 11.7338 4.18306C11.9779 4.42714 11.9779 4.82375 11.7338 5.06782L8.84224 7.95845L11.7338 10.8501C11.9779 11.0941 11.9779 11.4898 11.7338 11.7338C11.4898 11.9779 11.0941 11.9779 10.8501 11.7338L7.95845 8.84224L5.06782 11.7338C4.82375 11.9779 4.42714 11.9779 4.18306 11.7338C3.93936 11.4898 3.93925 11.094 4.18306 10.8501L7.07368 7.95845L4.18306 5.06782C3.93898 4.82375 3.93898 4.42714 4.18306 4.18306C4.42714 3.93898 4.82375 3.93898 5.06782 4.18306L7.95845 7.07368L10.8501 4.18306Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/actions/copy-icon.tsx b/packages/propel/src/icons/actions/copy-icon.tsx
deleted file mode 100644
index 7d3aaf193cf..00000000000
--- a/packages/propel/src/icons/actions/copy-icon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export const CopyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M12.8751 8.13965C12.8751 7.73983 12.8748 7.46942 12.8614 7.26075C12.8483 7.05591 12.8244 6.95774 12.7999 6.89649C12.735 6.73455 12.6426 6.63099 12.5597 6.57715C12.5561 6.57481 12.528 6.55459 12.3976 6.54102C12.254 6.52612 12.0611 6.52539 11.7403 6.52539H8.11045C7.78934 6.52539 7.5959 6.52608 7.45225 6.54102C7.32361 6.5544 7.29534 6.57436 7.29112 6.57715C7.20815 6.63096 7.11485 6.73431 7.04991 6.89649C7.02538 6.95774 7.00153 7.05591 6.98838 7.26075C6.975 7.46942 6.97471 7.73985 6.97471 8.13965V12.7598C6.97471 13.1599 6.97498 13.4309 6.98838 13.6397C7.0015 13.8439 7.02545 13.9417 7.04991 14.0029C7.11485 14.1652 7.20813 14.2694 7.29112 14.3232C7.29593 14.3264 7.32527 14.3462 7.45225 14.3594C7.5959 14.3743 7.78934 14.375 8.11045 14.375H11.7403C12.061 14.375 12.254 14.3743 12.3976 14.3594C12.528 14.3458 12.5561 14.3256 12.5597 14.3232C12.6426 14.2694 12.735 14.1651 12.7999 14.0029C12.8244 13.9417 12.8483 13.844 12.8614 13.6397C12.8748 13.4309 12.8751 13.1599 12.8751 12.7598V8.13965ZM9.02549 3.09961C9.02549 2.39729 9.01698 2.19651 8.97178 2.05762C8.90057 1.8389 8.77938 1.71171 8.67979 1.65918C8.67912 1.65883 8.67283 1.6557 8.65538 1.65137C8.63581 1.64655 8.60298 1.64052 8.54795 1.63574C8.42783 1.62531 8.26723 1.625 8.0001 1.625H4.25987C3.93918 1.625 3.74622 1.62573 3.60264 1.64063C3.47216 1.6542 3.44414 1.67442 3.44053 1.67676C3.35757 1.73059 3.26522 1.8349 3.2003 1.99707C3.17582 2.05833 3.1519 2.15596 3.13877 2.36035C3.12537 2.56912 3.1251 2.84008 3.1251 3.24024V8C3.1251 8.70196 3.13274 8.90309 3.17784 9.042C3.24905 9.26082 3.37119 9.38792 3.4708 9.44043C3.47181 9.44097 3.4776 9.44411 3.49424 9.44825C3.51376 9.45308 3.5472 9.45906 3.60264 9.46387C3.72273 9.47427 3.88361 9.47461 4.15049 9.47461C4.49536 9.47482 4.77528 9.75474 4.77549 10.0996C4.77549 10.4447 4.49549 10.7244 4.15049 10.7246C3.90511 10.7246 3.68091 10.7252 3.49424 10.709C3.29805 10.692 3.0914 10.6532 2.8878 10.5459C2.4484 10.3142 2.14142 9.89594 1.98936 9.42871C1.86727 9.05317 1.8751 8.60175 1.8751 8V3.24024C1.8751 2.85632 1.87513 2.53842 1.8917 2.28028C1.90853 2.01827 1.94479 1.7704 2.04014 1.53223C2.18612 1.16761 2.42988 0.842556 2.76084 0.627932C2.99239 0.477856 3.23654 0.422046 3.47276 0.397464C3.6959 0.37426 3.96501 0.375002 4.25987 0.375003H8.0001C8.24551 0.375003 8.46967 0.374417 8.65635 0.390628C8.85246 0.407678 9.0593 0.446434 9.2628 0.553714C9.7021 0.785394 10.0082 1.20375 10.1603 1.6709C10.2825 2.04646 10.2755 2.49781 10.2755 3.09961C10.2755 3.44466 9.99549 3.7244 9.65049 3.72461C9.30531 3.72461 9.02549 3.44479 9.02549 3.09961ZM14.1251 12.7598C14.1251 13.1437 14.1251 13.4616 14.1085 13.7197C14.0917 13.9817 14.0554 14.2296 13.9601 14.4678C13.8141 14.8324 13.5703 15.1574 13.2394 15.3721C13.0078 15.5221 12.7637 15.578 12.5274 15.6025C12.3043 15.6257 12.0352 15.625 11.7403 15.625H8.11045C7.81566 15.625 7.54647 15.6257 7.32334 15.6025C7.08697 15.578 6.84215 15.5223 6.61045 15.3721C6.27949 15.1574 6.03573 14.8324 5.88975 14.4678C5.79443 14.2296 5.75814 13.9817 5.74131 13.7197C5.72474 13.4616 5.72471 13.1437 5.72471 12.7598V8.13965C5.72471 7.756 5.72476 7.43869 5.74131 7.18067C5.75814 6.91859 5.79438 6.66987 5.88975 6.43164C6.03572 6.06725 6.2797 5.74288 6.61045 5.52832C6.84215 5.37807 7.08697 5.32243 7.32334 5.29785C7.54648 5.27468 7.81565 5.27539 8.11045 5.27539H11.7403C12.0352 5.27539 12.3043 5.27465 12.5274 5.29785C12.7637 5.32245 13.0078 5.37817 13.2394 5.52832C13.5702 5.74285 13.8141 6.06723 13.9601 6.43164C14.0554 6.66987 14.0917 6.91859 14.1085 7.18067C14.1251 7.43869 14.1251 7.75599 14.1251 8.13965V12.7598Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
diff --git a/packages/propel/src/icons/actions/copy-link.tsx b/packages/propel/src/icons/actions/copy-link.tsx
deleted file mode 100644
index acbb3cc1d6e..00000000000
--- a/packages/propel/src/icons/actions/copy-link.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function CopyLinkIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
-      <path
-        d="M3.30277 7.07328C3.54686 6.8296 3.94261 6.82939 4.18656 7.07328C4.43064 7.31736 4.43064 7.71397 4.18656 7.95805L3.2432 8.90043C2.18575 9.95806 2.18572 11.6729 3.2432 12.7305C4.30081 13.7882 6.01563 13.788 7.07328 12.7305L8.01664 11.7881C8.26073 11.5441 8.65636 11.544 8.90043 11.7881C9.14426 12.0322 9.14443 12.4279 8.90043 12.6719L7.95707 13.6143C6.41125 15.16 3.90517 15.1601 2.35941 13.6143C0.813772 12.0685 0.813807 9.56242 2.35941 8.01664L3.30277 7.07328ZM9.87797 5.21195C10.122 4.96788 10.5187 4.96787 10.7627 5.21195C11.0064 5.45601 11.0066 5.85177 10.7627 6.09574L6.09574 10.7618C5.85166 11.0058 5.45603 11.0058 5.21195 10.7618C4.96799 10.5177 4.96791 10.122 5.21195 9.87797L9.87797 5.21195ZM8.01664 2.35941C9.56242 0.813804 12.0685 0.813775 13.6143 2.35941C15.16 3.90517 15.1599 6.41121 13.6143 7.95707L12.6719 8.90043C12.4279 9.14442 12.0322 9.14425 11.7881 8.90043C11.544 8.65635 11.544 8.26072 11.7881 8.01664L12.7305 7.07328C13.788 6.01556 13.7881 4.3008 12.7305 3.2432C11.6729 2.18572 9.95805 2.18575 8.90043 3.2432L7.95707 4.18656C7.71296 4.4303 7.31724 4.43053 7.07328 4.18656C6.82935 3.94259 6.82956 3.54686 7.07328 3.30277L8.01664 2.35941Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/actions/edit-icon.tsx b/packages/propel/src/icons/actions/edit-icon.tsx
deleted file mode 100644
index a260d498b2a..00000000000
--- a/packages/propel/src/icons/actions/edit-icon.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export const EditIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
-  const clipPathId = React.useId();
-  return (
-    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
-      <path
-        d="M10.7494 1.63573C11.7299 0.655278 13.3197 0.655278 14.3002 1.63573C15.2806 2.61619 15.2807 4.20607 14.3002 5.18651L5.49553 13.9902C5.31697 14.1688 5.16873 14.3209 4.99065 14.4385C4.84347 14.5355 4.68368 14.6127 4.51604 14.667C4.31301 14.7326 4.10085 14.7533 3.85002 14.7812L1.59416 15.0322C1.40546 15.0532 1.2167 14.9868 1.08244 14.8525C0.948476 14.7183 0.882789 14.5303 0.903733 14.3418L1.15471 12.0859C1.18258 11.8351 1.2032 11.6231 1.26897 11.4199C1.3233 11.2521 1.39958 11.0924 1.49651 10.9453C1.61409 10.7669 1.76748 10.6187 1.94573 10.4404L10.7494 1.63573ZM2.82951 11.3242C2.61594 11.5378 2.57192 11.5851 2.54045 11.6328C2.50525 11.6862 2.47707 11.7441 2.45744 11.8047C2.43982 11.8591 2.43027 11.9232 2.3969 12.2236L2.23186 13.7031L3.71233 13.539C3.86263 13.5223 3.95375 13.5118 4.01408 13.5029L4.13127 13.4775C4.19171 13.4579 4.24916 13.4304 4.30217 13.3955C4.35014 13.3638 4.39813 13.32 4.61174 13.1064L10.974 6.74413L9.19084 4.96092L2.82951 11.3242ZM13.4164 2.51952C12.9241 2.02721 12.1255 2.02721 11.6332 2.51952L10.0746 4.07713L11.8578 5.86034L13.4164 4.30272C13.9087 3.81043 13.9087 3.01182 13.4164 2.51952Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-};
diff --git a/packages/propel/src/icons/actions/filter-applied-icon.tsx b/packages/propel/src/icons/actions/filter-applied-icon.tsx
deleted file mode 100644
index 5dae6e5e70f..00000000000
--- a/packages/propel/src/icons/actions/filter-applied-icon.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function FilterAppliedIcon({ color = "text-icon-brand", ...rest }: ISvgIcons) {
-  const clipPathId = React.useId();
-
-  return (
-    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
-      <path
-        d="M15.3 3.65C15.3 5.11355 14.1136 6.3 12.65 6.3C11.1864 6.3 10 5.11355 10 3.65C10 2.18645 11.1864 1 12.65 1C14.1136 1 15.3 2.18645 15.3 3.65Z"
-        fill={color}
-      />
-      <path
-        d="M9.99984 12.3333C10.368 12.3333 10.6665 12.6318 10.6665 13C10.6665 13.3682 10.368 13.6667 9.99984 13.6667H5.99984C5.63165 13.6667 5.33317 13.3682 5.33317 13C5.33317 12.6318 5.63165 12.3333 5.99984 12.3333H9.99984ZM11.9998 7.66667C12.368 7.66667 12.6665 7.96514 12.6665 8.33333C12.6665 8.70152 12.368 9 11.9998 9H3.99984C3.63165 9 3.33317 8.70152 3.33317 8.33333C3.33317 7.96514 3.63165 7.66667 3.99984 7.66667H11.9998ZM7.99984 3C8.36803 3 8.6665 3.29848 8.6665 3.66667C8.6665 4.03486 8.36803 4.33333 7.99984 4.33333H1.33317C0.964981 4.33333 0.666504 4.03486 0.666504 3.66667C0.666504 3.29848 0.964981 3 1.33317 3H7.99984Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/actions/filter-icon.tsx b/packages/propel/src/icons/actions/filter-icon.tsx
deleted file mode 100644
index 8243d2eff65..00000000000
--- a/packages/propel/src/icons/actions/filter-icon.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function FilterIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  const clipPathId = React.useId();
-
-  return (
-    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
-      <path
-        d="M9.9751 11.3496C10.3203 11.3496 10.6001 11.6294 10.6001 11.9746C10.6001 12.3198 10.3203 12.5996 9.9751 12.5996H5.9751C5.62992 12.5996 5.3501 12.3198 5.3501 11.9746C5.3501 11.6294 5.62992 11.3496 5.9751 11.3496H9.9751ZM11.9751 7.34961C12.3203 7.34961 12.6001 7.62943 12.6001 7.97461C12.6001 8.31979 12.3203 8.59961 11.9751 8.59961H3.9751C3.62992 8.59961 3.3501 8.31979 3.3501 7.97461C3.3501 7.62943 3.62992 7.34961 3.9751 7.34961H11.9751ZM13.9751 3.34961C14.3203 3.34961 14.6001 3.62943 14.6001 3.97461C14.6001 4.31979 14.3203 4.59961 13.9751 4.59961H1.9751C1.62992 4.59961 1.3501 4.31979 1.3501 3.97461C1.3501 3.62943 1.62992 3.34961 1.9751 3.34961H13.9751Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/actions/globe-icon.tsx b/packages/propel/src/icons/actions/globe-icon.tsx
deleted file mode 100644
index 1ed2cf379e1..00000000000
--- a/packages/propel/src/icons/actions/globe-icon.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export const GlobeIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
-  const clipPathId = React.useId();
-  return (
-    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
-      <path
-        d="M8.00195 0.709961C12.0288 0.710137 15.293 3.97498 15.293 8.00195C15.2928 12.0287 12.0287 15.2928 8.00195 15.293C3.97498 15.293 0.710137 12.0288 0.709961 8.00195C0.709961 3.97488 3.97488 0.709961 8.00195 0.709961ZM1.99219 8.62695C2.25614 11.1937 4.12706 13.2827 6.58203 13.874C5.52513 12.3194 4.88848 10.5118 4.74219 8.62695H1.99219ZM11.2607 8.62695C11.1145 10.5117 10.4787 12.3194 9.42188 13.874C11.8765 13.2825 13.7468 11.1935 14.0107 8.62695H11.2607ZM5.99609 8.62695C6.15854 10.4767 6.85546 12.2382 8.00098 13.6982C9.14679 12.2381 9.84438 10.4769 10.0068 8.62695H5.99609ZM9.42188 2.12891C10.4789 3.68372 11.1146 5.49193 11.2607 7.37695H14.0107C13.747 4.81011 11.8768 2.72047 9.42188 2.12891ZM8.00098 2.30469C6.85524 3.7649 6.15844 5.5269 5.99609 7.37695H10.0068C9.84448 5.52664 9.14701 3.76502 8.00098 2.30469ZM6.58105 2.12891C4.12629 2.72057 2.25586 4.81019 1.99219 7.37695H4.74219C4.88837 5.49198 5.52413 3.6837 6.58105 2.12891Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-};
diff --git a/packages/propel/src/icons/actions/index.ts b/packages/propel/src/icons/actions/index.ts
deleted file mode 100644
index b097611319d..00000000000
--- a/packages/propel/src/icons/actions/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./add-circle-icon";
-export * from "./add-icon";
-export * from "./add-workitem-icon";
-export * from "./add-reaction-icon";
-export * from "./check-icon";
-export * from "./close-icon";
-export * from "./filter-icon";
-export * from "./filter-applied-icon";
-export * from "./copy-icon";
-export * from "./edit-icon";
-export * from "./globe-icon";
-export * from "./link-icon";
-export * from "./lock-icon";
-export * from "./new-tab-icon";
-export * from "./search-icon";
-export * from "./plus-icon";
-export * from "./preferences-icon";
-export * from "./copy-link";
-export * from "./upgrade-icon";
-export * from "./trash-icon";
diff --git a/packages/propel/src/icons/actions/link-icon.tsx b/packages/propel/src/icons/actions/link-icon.tsx
deleted file mode 100644
index 907e76f3159..00000000000
--- a/packages/propel/src/icons/actions/link-icon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export const LinkIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M3.30277 7.07328C3.54686 6.8296 3.94261 6.82939 4.18656 7.07328C4.43064 7.31736 4.43064 7.71397 4.18656 7.95805L3.2432 8.90043C2.18575 9.95806 2.18572 11.6729 3.2432 12.7305C4.30081 13.7882 6.01563 13.788 7.07328 12.7305L8.01664 11.7881C8.26073 11.5441 8.65636 11.544 8.90043 11.7881C9.14426 12.0322 9.14443 12.4279 8.90043 12.6719L7.95707 13.6143C6.41125 15.16 3.90517 15.1601 2.35941 13.6143C0.813772 12.0685 0.813807 9.56242 2.35941 8.01664L3.30277 7.07328ZM9.87797 5.21195C10.122 4.96788 10.5187 4.96787 10.7627 5.21195C11.0064 5.45601 11.0066 5.85177 10.7627 6.09574L6.09574 10.7618C5.85166 11.0058 5.45603 11.0058 5.21195 10.7618C4.96799 10.5177 4.96791 10.122 5.21195 9.87797L9.87797 5.21195ZM8.01664 2.35941C9.56242 0.813804 12.0685 0.813775 13.6143 2.35941C15.16 3.90517 15.1599 6.41121 13.6143 7.95707L12.6719 8.90043C12.4279 9.14442 12.0322 9.14425 11.7881 8.90043C11.544 8.65635 11.544 8.26072 11.7881 8.01664L12.7305 7.07328C13.788 6.01556 13.7881 4.3008 12.7305 3.2432C11.6729 2.18572 9.95805 2.18575 8.90043 3.2432L7.95707 4.18656C7.71296 4.4303 7.31724 4.43053 7.07328 4.18656C6.82935 3.94259 6.82956 3.54686 7.07328 3.30277L8.01664 2.35941Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
diff --git a/packages/propel/src/icons/actions/lock-icon.tsx b/packages/propel/src/icons/actions/lock-icon.tsx
deleted file mode 100644
index 0248dd52dc8..00000000000
--- a/packages/propel/src/icons/actions/lock-icon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export const LockIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M13.3501 10.5078C13.3501 9.9375 13.3494 9.54724 13.3247 9.24512C13.3006 8.95048 13.2573 8.79472 13.2007 8.68359C13.0689 8.42488 12.8578 8.21482 12.5991 8.08301C12.488 8.0264 12.3323 7.98209 12.0376 7.95801C11.7355 7.93334 11.3452 7.93262 10.7749 7.93262H5.17529C4.60506 7.93262 4.21472 7.93334 3.9126 7.95801C3.61782 7.98209 3.46218 8.02641 3.35107 8.08301C3.09235 8.21483 2.88133 8.42488 2.74951 8.68359C2.69292 8.79472 2.64957 8.95048 2.62549 9.24512C2.6008 9.54724 2.6001 9.9375 2.6001 10.5078V10.7744C2.6001 11.3447 2.60082 11.735 2.62549 12.0371C2.64955 12.3316 2.69298 12.4875 2.74951 12.5986C2.88133 12.8573 3.09235 13.0684 3.35107 13.2002C3.46216 13.2567 3.61805 13.3002 3.9126 13.3242C4.21472 13.3489 4.60504 13.3496 5.17529 13.3496H10.7749C11.3452 13.3496 11.7355 13.3489 12.0376 13.3242C12.3321 13.3002 12.488 13.2567 12.5991 13.2002C12.8578 13.0684 13.0689 12.8573 13.2007 12.5986C13.2572 12.4875 13.3006 12.3316 13.3247 12.0371C13.3494 11.735 13.3501 11.3447 13.3501 10.7744V10.5078ZM10.6831 5.30762C10.6829 3.812 9.47075 2.59961 7.9751 2.59961C6.47944 2.59961 5.26727 3.812 5.26709 5.30762V6.68262H10.6831V5.30762ZM11.9331 6.69922C12.0046 6.7028 12.0733 6.70654 12.1392 6.71191C12.5112 6.74231 12.8499 6.80753 13.1665 6.96875C13.6604 7.2204 14.0623 7.62227 14.314 8.11621L14.3696 8.23633C14.4906 8.51833 14.5442 8.81795 14.5708 9.14355C14.6006 9.50836 14.6001 9.95818 14.6001 10.5078V10.7744C14.6001 11.3239 14.6006 11.7739 14.5708 12.1387C14.5404 12.5107 14.4752 12.8494 14.314 13.166C14.0623 13.66 13.6605 14.0618 13.1665 14.3135C12.8499 14.4747 12.5112 14.5399 12.1392 14.5703C11.7744 14.6001 11.3244 14.5996 10.7749 14.5996H5.17529C4.62577 14.5996 4.17582 14.6001 3.81104 14.5703C3.43898 14.5399 3.10032 14.4748 2.78369 14.3135C2.28977 14.0618 1.88791 13.66 1.63623 13.166C1.47496 12.8494 1.40979 12.5107 1.3794 12.1387C1.34962 11.7739 1.3501 11.3239 1.3501 10.7744V10.5078C1.3501 9.95817 1.3496 9.50836 1.3794 9.14355C1.4098 8.7714 1.47488 8.43292 1.63623 8.11621L1.73779 7.93555C1.99002 7.52435 2.35152 7.18894 2.78369 6.96875C3.10029 6.80752 3.43903 6.74231 3.81104 6.71191C3.87691 6.70654 3.94559 6.7028 4.01709 6.69922V5.30762C4.01727 3.12164 5.78908 1.34961 7.9751 1.34961C10.1611 1.34961 11.9329 3.12164 11.9331 5.30762V6.69922Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
diff --git a/packages/propel/src/icons/actions/new-tab-icon.tsx b/packages/propel/src/icons/actions/new-tab-icon.tsx
deleted file mode 100644
index 281f517e941..00000000000
--- a/packages/propel/src/icons/actions/new-tab-icon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export const NewTabIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M1.3501 10.7744V6.50781C1.3501 5.95818 1.3496 5.50837 1.3794 5.14355C1.4098 4.7714 1.47486 4.43291 1.63623 4.11621C1.8879 3.62229 2.28977 3.22041 2.78369 2.96875C3.10029 2.80752 3.43903 2.74231 3.81104 2.71191C4.17581 2.68214 4.62578 2.68262 5.17529 2.68262H6.64209C6.98701 2.68279 7.26691 2.9627 7.26709 3.30762C7.26709 3.65269 6.98712 3.93244 6.64209 3.93262H5.17529C4.60506 3.93262 4.21472 3.93334 3.9126 3.95801C3.61782 3.98209 3.46219 4.02641 3.35107 4.08301C3.09235 4.21483 2.88134 4.42487 2.74951 4.68359C2.69293 4.79469 2.64958 4.95043 2.62549 5.24512C2.6008 5.54724 2.6001 5.93752 2.6001 6.50781V10.7744C2.6001 11.3447 2.60082 11.735 2.62549 12.0371C2.64955 12.3316 2.69298 12.4875 2.74951 12.5986C2.88133 12.8573 3.09235 13.0684 3.35107 13.2002C3.46216 13.2567 3.61805 13.3002 3.9126 13.3242C4.21472 13.3489 4.60504 13.3496 5.17529 13.3496H9.4419C10.0122 13.3496 10.4025 13.3489 10.7046 13.3242C10.9992 13.3001 11.155 13.2568 11.2661 13.2002C11.5248 13.0684 11.7349 12.8573 11.8667 12.5986C11.9233 12.4875 11.9676 12.3318 11.9917 12.0371C12.0164 11.735 12.0171 11.3447 12.0171 10.7744V9.30762C12.0173 8.96259 12.297 8.68262 12.6421 8.68262C12.987 8.68279 13.2669 8.9627 13.2671 9.30762V10.7744C13.2671 11.3239 13.2676 11.7739 13.2378 12.1387C13.2074 12.5107 13.1422 12.8494 12.981 13.166C12.7608 13.5982 12.4253 13.9597 12.0142 14.2119L11.8335 14.3135C11.5168 14.4748 11.1783 14.5399 10.8062 14.5703C10.4413 14.6001 9.99153 14.5996 9.4419 14.5996H5.17529C4.62577 14.5996 4.17582 14.6001 3.81104 14.5703C3.43898 14.5399 3.10032 14.4748 2.78369 14.3135C2.28977 14.0618 1.88791 13.66 1.63623 13.166C1.47496 12.8494 1.40979 12.5107 1.3794 12.1387C1.34962 11.7739 1.3501 11.3239 1.3501 10.7744ZM14.6001 5.97461C14.6001 6.31979 14.3203 6.59961 13.9751 6.59961C13.6299 6.59961 13.3501 6.31979 13.3501 5.97461V3.4834L9.0835 7.75C8.83941 7.99391 8.44373 7.99402 8.19971 7.75C7.95568 7.50598 7.95579 7.1103 8.19971 6.86621L12.4653 2.59961H9.9751C9.62992 2.59961 9.3501 2.31979 9.3501 1.97461C9.3501 1.62943 9.62992 1.34961 9.9751 1.34961H13.9751C14.3203 1.34961 14.6001 1.62943 14.6001 1.97461V5.97461Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
diff --git a/packages/propel/src/icons/actions/plus-icon.tsx b/packages/propel/src/icons/actions/plus-icon.tsx
deleted file mode 100644
index 9e09c0a0f82..00000000000
--- a/packages/propel/src/icons/actions/plus-icon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export const PlusIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M7.37549 12.666V8.625H3.3335C2.98843 8.625 2.70867 8.34503 2.7085 8C2.7085 7.65482 2.98832 7.375 3.3335 7.375H7.37549V3.33301C7.37549 2.98783 7.65531 2.70801 8.00049 2.70801C8.34552 2.70818 8.62549 2.98794 8.62549 3.33301V7.375H12.6665C13.0117 7.375 13.2915 7.65482 13.2915 8C13.2913 8.34503 13.0116 8.625 12.6665 8.625H8.62549V12.666C8.62549 13.0111 8.34552 13.2908 8.00049 13.291C7.65531 13.291 7.37549 13.0112 7.37549 12.666Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
diff --git a/packages/propel/src/icons/actions/preferences-icon.tsx b/packages/propel/src/icons/actions/preferences-icon.tsx
deleted file mode 100644
index de08dc8b6d0..00000000000
--- a/packages/propel/src/icons/actions/preferences-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function PreferencesIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M14 13.292L9.95801 13.292L9.95801 14.667C9.95801 15.0122 9.67819 15.292 9.33301 15.292C8.98798 15.2918 8.70801 15.0121 8.70801 14.667L8.70801 10.667C8.70801 10.3219 8.98798 10.0422 9.33301 10.042C9.67819 10.042 9.95801 10.3218 9.95801 10.667L9.95801 12.042L14 12.042C14.3452 12.042 14.625 12.3218 14.625 12.667C14.625 13.0122 14.3452 13.292 14 13.292ZM14 8.625L8 8.625C7.65482 8.625 7.375 8.34518 7.375 8C7.37518 7.65497 7.65493 7.375 8 7.375L14 7.375C14.3451 7.375 14.6248 7.65497 14.625 8C14.625 8.34518 14.3452 8.625 14 8.625ZM14 3.95898L11.292 3.95898L11.292 5.33398C11.2918 5.6789 11.0119 5.95881 10.667 5.95898C10.3219 5.95898 10.0422 5.67901 10.042 5.33398L10.042 1.33398C10.042 0.988806 10.3218 0.708984 10.667 0.708984C11.012 0.709159 11.292 0.988914 11.292 1.33398L11.292 2.70898L14 2.70898C14.3452 2.70898 14.625 2.98881 14.625 3.33398C14.6248 3.67901 14.3451 3.95898 14 3.95898ZM8 3.95898L2 3.95898C1.65493 3.95898 1.37517 3.67901 1.375 3.33398C1.375 2.98881 1.65482 2.70898 2 2.70898L8 2.70898C8.34518 2.70898 8.625 2.98881 8.625 3.33398C8.62482 3.67901 8.34507 3.95898 8 3.95898ZM6.66699 13.292L2 13.292C1.65482 13.292 1.375 13.0122 1.375 12.667C1.375 12.3218 1.65482 12.042 2 12.042L6.66699 12.042C7.01202 12.0422 7.29199 12.3219 7.29199 12.667C7.29199 13.0121 7.01202 13.2918 6.66699 13.292ZM2 8.625C1.65482 8.625 1.375 8.34518 1.375 8C1.37518 7.65497 1.65493 7.375 2 7.375L4.70801 7.375L4.70801 6C4.70818 5.65508 4.98809 5.37518 5.33301 5.375C5.67808 5.375 5.95783 5.65497 5.95801 6L5.95801 10C5.95801 10.3452 5.67819 10.625 5.33301 10.625C4.98798 10.6248 4.70801 10.3451 4.70801 10L4.70801 8.625L2 8.625Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/actions/search-icon.tsx b/packages/propel/src/icons/actions/search-icon.tsx
deleted file mode 100644
index 6cd03244ea9..00000000000
--- a/packages/propel/src/icons/actions/search-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function SearchIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M10.458 6.41699C10.458 4.18495 8.649 2.37518 6.41699 2.375C4.18484 2.375 2.375 4.18484 2.375 6.41699C2.37518 8.649 4.18495 10.458 6.41699 10.458C8.64889 10.4578 10.4578 8.64889 10.458 6.41699ZM11.708 6.41699C11.7079 7.65259 11.2831 8.78796 10.5732 9.68848L14.1924 13.3076C14.4365 13.5517 14.4365 13.9483 14.1924 14.1924C13.9483 14.4365 13.5517 14.4365 13.3076 14.1924L9.68848 10.5732C8.78796 11.2831 7.65259 11.7079 6.41699 11.708C3.4946 11.708 1.12518 9.33935 1.125 6.41699C1.125 3.49449 3.49449 1.125 6.41699 1.125C9.33935 1.12518 11.708 3.4946 11.708 6.41699Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/actions/trash-icon.tsx b/packages/propel/src/icons/actions/trash-icon.tsx
deleted file mode 100644
index d6262bd8233..00000000000
--- a/packages/propel/src/icons/actions/trash-icon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export const TrashIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M13.9751 3.40039C14.3203 3.40039 14.6001 3.68021 14.6001 4.02539C14.6001 4.37057 14.3203 4.65039 13.9751 4.65039H13.2261L12.7974 11.0801C12.763 11.596 12.7354 12.0193 12.6851 12.3623C12.6336 12.713 12.553 13.0307 12.3853 13.3252C12.1227 13.7861 11.7258 14.1564 11.2485 14.3877C10.9437 14.5354 10.6222 14.595 10.269 14.623C9.92331 14.6505 9.49827 14.6504 8.98096 14.6504H6.96924C6.45193 14.6504 6.02688 14.6505 5.68115 14.623C5.32804 14.595 5.00647 14.5354 4.70166 14.3877C4.22433 14.1564 3.82754 13.7861 3.56494 13.3252C3.39718 13.0307 3.31662 12.713 3.26514 12.3623C3.21479 12.0193 3.18625 11.596 3.15186 11.0801L2.72412 4.65039H1.9751C1.62992 4.65039 1.3501 4.37057 1.3501 4.02539C1.3501 3.68021 1.62992 3.40039 1.9751 3.40039H13.9751ZM4.3999 10.9971C4.4356 11.5326 4.46 11.8981 4.50146 12.1807C4.54186 12.4558 4.59237 12.6016 4.65186 12.7061C4.78941 12.9474 4.99659 13.1415 5.24658 13.2627C5.35474 13.3151 5.50355 13.3549 5.78076 13.377C6.06553 13.3995 6.43224 13.4004 6.96924 13.4004H8.98096C9.51795 13.4004 9.88467 13.3995 10.1694 13.377C10.4466 13.355 10.5955 13.3151 10.7036 13.2627C10.9536 13.1415 11.1608 12.9474 11.2983 12.7061C11.3578 12.6017 11.4083 12.4558 11.4487 12.1807C11.4902 11.8981 11.5146 11.5326 11.5503 10.9971L11.9731 4.65039H3.97705L4.3999 10.9971ZM6.01709 10.3584V7.02539C6.01709 6.68021 6.29691 6.40039 6.64209 6.40039C6.98712 6.40057 7.26709 6.68032 7.26709 7.02539V10.3584C7.26709 10.7035 6.98712 10.9832 6.64209 10.9834C6.29691 10.9834 6.01709 10.7036 6.01709 10.3584ZM8.68311 10.3584V7.02539C8.68311 6.68032 8.96308 6.40057 9.30811 6.40039C9.65328 6.40039 9.93311 6.68021 9.93311 7.02539V10.3584C9.93311 10.7036 9.65328 10.9834 9.30811 10.9834C8.96308 10.9832 8.68311 10.7035 8.68311 10.3584ZM9.9751 1.40039C10.3203 1.40039 10.6001 1.68021 10.6001 2.02539C10.6001 2.37057 10.3203 2.65039 9.9751 2.65039H5.9751C5.62992 2.65039 5.3501 2.37057 5.3501 2.02539C5.3501 1.68021 5.62992 1.40039 5.9751 1.40039H9.9751Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
diff --git a/packages/propel/src/icons/actions/upgrade-icon.tsx b/packages/propel/src/icons/actions/upgrade-icon.tsx
deleted file mode 100644
index 9c8b9d47a27..00000000000
--- a/packages/propel/src/icons/actions/upgrade-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function UpgradeIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1ZM5.00457 7.55003L7.55003 5.00457C7.79853 4.75605 8.20147 4.75605 8.44997 5.00457L10.9954 7.55003C11.2439 7.79853 11.2439 8.20147 10.9954 8.44997C10.7469 8.69847 10.344 8.69847 10.0955 8.44997L8.63636 6.99085V10.5455C8.63636 10.8969 8.35146 11.1818 8 11.1818C7.64854 11.1818 7.36364 10.8969 7.36364 10.5455V6.99085L5.90452 8.44997C5.65601 8.69847 5.25309 8.69847 5.00457 8.44997C4.75605 8.20147 4.75605 7.79853 5.00457 7.55003Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/activity-icon.tsx b/packages/propel/src/icons/activity-icon.tsx
deleted file mode 100644
index 304500589e2..00000000000
--- a/packages/propel/src/icons/activity-icon.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { ISvgIcons } from "./type";
-
-export function ActivityIcon({ className = "text-current", ...rest }: ISvgIcons) {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-      {...rest}
-    >
-      <g clipPath="url(#clip0_15681_9387)">
-        <path
-          d="M14.6666 8.00001H13.0133C12.7219 7.99939 12.4384 8.09421 12.206 8.26999C11.9736 8.44576 11.8053 8.69281 11.7266 8.97334L10.1599 14.5467C10.1498 14.5813 10.1288 14.6117 10.0999 14.6333C10.0711 14.655 10.036 14.6667 9.99992 14.6667C9.96386 14.6667 9.92877 14.655 9.89992 14.6333C9.87107 14.6117 9.85002 14.5813 9.83992 14.5467L6.15992 1.45334C6.14982 1.41872 6.12877 1.38831 6.09992 1.36668C6.07107 1.34504 6.03598 1.33334 5.99992 1.33334C5.96386 1.33334 5.92877 1.34504 5.89992 1.36668C5.87107 1.38831 5.85002 1.41872 5.83992 1.45334L4.27325 7.02668C4.1949 7.30611 4.02751 7.55235 3.79649 7.72802C3.56548 7.90368 3.28347 7.99918 2.99325 8.00001H1.33325"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_15681_9387">
-          <rect width="16" height="16" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/ai-icon.tsx b/packages/propel/src/icons/ai-icon.tsx
deleted file mode 100644
index 0c12a6e32b3..00000000000
--- a/packages/propel/src/icons/ai-icon.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function AiIcon({ width = "16", height = "16", className, color = "currentColor" }: ISvgIcons) {
-  return (
-    <svg
-      width={width}
-      height={height}
-      viewBox="0 0 16 16"
-      fill={color}
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <g clipPath="url(#clip0_888_35571)">
-        <path
-          d="M14.2082 0H1.79185C0.801553 0 0 0.801553 0 1.79185V14.2093C0 15.1984 0.801553 16.0012 1.79185 16.0012H14.2093C15.1984 16.0012 16.0012 15.1996 16.0012 14.2093V1.79185C16.0012 0.802748 15.1996 0 14.2093 0H14.2082ZM13.1032 11.5276C13.1032 12.3984 12.3972 13.1032 11.5276 13.1032H4.47245C3.60161 13.1032 2.89682 12.3972 2.89682 11.5276V4.47245C2.89682 3.60161 3.60281 2.89682 4.47245 2.89682H11.5276C12.3984 2.89682 13.1032 3.60281 13.1032 4.47245V11.5276Z"
-          fill={color}
-        />
-        <path
-          d="M9.61291 4.94336H6.38759C5.58996 4.94336 4.94336 5.58996 4.94336 6.38759V9.61291C4.94336 10.4105 5.58996 11.0571 6.38759 11.0571H9.61291C10.4105 11.0571 11.0571 10.4105 11.0571 9.61291V6.38759C11.0571 5.58996 10.4105 4.94336 9.61291 4.94336Z"
-          fill={color}
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_888_35571">
-          <rect width="16" height="16" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/arrows/chevron-down.tsx b/packages/propel/src/icons/arrows/chevron-down.tsx
deleted file mode 100644
index 8869c94591e..00000000000
--- a/packages/propel/src/icons/arrows/chevron-down.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function ChevronDownIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
-      <path
-        d="M11.5576 5.55708C11.8016 5.313 12.1983 5.313 12.4423 5.55708C12.6864 5.80116 12.6864 6.19777 12.4423 6.44185L8.44234 10.4418C8.19826 10.6859 7.80165 10.6859 7.55757 10.4418L3.55757 6.44185C3.31349 6.19777 3.31349 5.80116 3.55757 5.55708C3.80165 5.313 4.19826 5.313 4.44234 5.55708L7.99995 9.1147L11.5576 5.55708Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/arrows/chevron-left.tsx b/packages/propel/src/icons/arrows/chevron-left.tsx
deleted file mode 100644
index 1b34ed3b43e..00000000000
--- a/packages/propel/src/icons/arrows/chevron-left.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function ChevronLeftIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
-      <path
-        d="M9.55757 3.55708C9.80165 3.313 10.1983 3.313 10.4423 3.55708C10.6864 3.80116 10.6864 4.19777 10.4423 4.44185L6.88472 7.99946L10.4423 11.5571C10.6864 11.8012 10.6864 12.1978 10.4423 12.4418C10.1983 12.6859 9.80165 12.6859 9.55757 12.4418L5.55757 8.44185C5.31349 8.19777 5.31349 7.80116 5.55757 7.55708L9.55757 3.55708Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/arrows/chevron-right.tsx b/packages/propel/src/icons/arrows/chevron-right.tsx
deleted file mode 100644
index 22c8b2a1320..00000000000
--- a/packages/propel/src/icons/arrows/chevron-right.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function ChevronRightIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
-      <path
-        d="M5.55757 3.55708C5.80165 3.313 6.19826 3.313 6.44234 3.55708L10.4423 7.55708C10.6864 7.80116 10.6864 8.19777 10.4423 8.44185L6.44234 12.4418C6.19826 12.6859 5.80165 12.6859 5.55757 12.4418C5.31349 12.1978 5.31349 11.8012 5.55757 11.5571L9.11519 7.99946L5.55757 4.44185C5.31349 4.19777 5.31349 3.80116 5.55757 3.55708Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/arrows/chevron-up.tsx b/packages/propel/src/icons/arrows/chevron-up.tsx
deleted file mode 100644
index c176d1d9e83..00000000000
--- a/packages/propel/src/icons/arrows/chevron-up.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function ChevronUpIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
-      <path
-        d="M7.6562 5.47785C7.89877 5.3179 8.22886 5.34445 8.44234 5.55793L12.4423 9.55793C12.6864 9.80201 12.6864 10.1986 12.4423 10.4427C12.1983 10.6868 11.8016 10.6868 11.5576 10.4427L7.99995 6.88508L4.44234 10.4427C4.19826 10.6868 3.80165 10.6868 3.55757 10.4427C3.31349 10.1986 3.31349 9.80201 3.55757 9.55793L7.55757 5.55793L7.6562 5.47785Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/arrows/index.ts b/packages/propel/src/icons/arrows/index.ts
deleted file mode 100644
index 736f5146dc8..00000000000
--- a/packages/propel/src/icons/arrows/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./chevron-down";
-export * from "./chevron-left";
-export * from "./chevron-right";
-export * from "./chevron-up";
-export * from "./reply-icon";
diff --git a/packages/propel/src/icons/arrows/reply-icon.tsx b/packages/propel/src/icons/arrows/reply-icon.tsx
deleted file mode 100644
index 08a828e6eea..00000000000
--- a/packages/propel/src/icons/arrows/reply-icon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function ReplyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
-      <path
-        d="M5.52865 4.19526C5.789 3.93491 6.211 3.93491 6.47135 4.19526C6.73168 4.45561 6.7317 4.87763 6.47135 5.13797L4.27604 7.33328H10.6667C11.5507 7.33328 12.3983 7.68472 13.0234 8.30985C13.6485 8.93496 14 9.78257 14 10.6666V11.9999C14 12.3681 13.7015 12.6666 13.3333 12.6666C12.9652 12.6666 12.6667 12.3681 12.6667 11.9999V10.6666C12.6667 10.1362 12.4558 9.62762 12.0807 9.25255C11.7526 8.92442 11.3223 8.72189 10.8646 8.67638L10.6667 8.66662H4.27604L6.47135 10.8619C6.73168 11.1223 6.7317 11.5443 6.47135 11.8046C6.21101 12.065 5.78899 12.065 5.52865 11.8046L2.19531 8.4713C2.1642 8.4402 2.13648 8.40583 2.11198 8.36909C2.09464 8.3431 2.07971 8.31603 2.06641 8.28836C2.05178 8.25798 2.03859 8.22669 2.02865 8.19396C2.02526 8.18281 2.02297 8.17139 2.02018 8.16011C2.0075 8.10875 2 8.05523 2 7.99995C2 7.94683 2.00649 7.89518 2.01823 7.84565C2.02148 7.83195 2.02452 7.81815 2.02865 7.80464C2.03858 7.77214 2.05185 7.74107 2.06641 7.71089C2.07918 7.68436 2.09353 7.65841 2.11003 7.63341C2.13495 7.59564 2.16344 7.56047 2.19531 7.5286L5.52865 4.19526Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/at-risk-icon.tsx b/packages/propel/src/icons/at-risk-icon.tsx
deleted file mode 100644
index 3ffe0354201..00000000000
--- a/packages/propel/src/icons/at-risk-icon.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function AtRiskIcon({ width = "16", height = "16" }: ISvgIcons) {
-  return (
-    <svg width={width} height={height} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g clipPath="url(#clip0_365_7561)">
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M2.03658 7.33335H2.66663C3.03482 7.33335 3.33329 7.63183 3.33329 8.00002C3.33329 8.36821 3.03482 8.66669 2.66663 8.66669H2.03658C2.36821 11.6667 4.91159 14 7.99996 14C11.0883 14 13.6317 11.6667 13.9633 8.66669H13.3333C12.9651 8.66669 12.6666 8.36821 12.6666 8.00002C12.6666 7.63183 12.9651 7.33335 13.3333 7.33335H13.9633C13.6317 4.33339 11.0883 2.00002 7.99996 2.00002C4.91159 2.00002 2.36821 4.33339 2.03658 7.33335ZM0.666626 8.00002C0.666626 3.94993 3.94987 0.666687 7.99996 0.666687C12.05 0.666687 15.3333 3.94993 15.3333 8.00002C15.3333 12.0501 12.05 15.3334 7.99996 15.3334C3.94987 15.3334 0.666626 12.0501 0.666626 8.00002ZM7.99996 4.66669C8.36815 4.66669 8.66663 4.96516 8.66663 5.33335V8.00002C8.66663 8.36821 8.36815 8.66669 7.99996 8.66669C7.63177 8.66669 7.33329 8.36821 7.33329 8.00002V5.33335C7.33329 4.96516 7.63177 4.66669 7.99996 4.66669ZM7.33329 10.6667C7.33329 10.2985 7.63177 10 7.99996 10H8.00663C8.37482 10 8.67329 10.2985 8.67329 10.6667C8.67329 11.0349 8.37482 11.3334 8.00663 11.3334H7.99996C7.63177 11.3334 7.33329 11.0349 7.33329 10.6667Z"
-          fill="#CC7700"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_365_7561">
-          <rect width="16" height="16" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/attachments/audio-file-icon.tsx b/packages/propel/src/icons/attachments/audio-file-icon.tsx
deleted file mode 100644
index 1640c292242..00000000000
--- a/packages/propel/src/icons/attachments/audio-file-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function AudioFileIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M7.33325 13.9999V1.99992C7.33325 1.63173 7.63173 1.33325 7.99992 1.33325C8.36811 1.33325 8.66659 1.63173 8.66659 1.99992V13.9999C8.66659 14.3681 8.36811 14.6666 7.99992 14.6666C7.63173 14.6666 7.33325 14.3681 7.33325 13.9999ZM4.33325 11.9999V3.99992C4.33325 3.63173 4.63173 3.33325 4.99992 3.33325C5.36811 3.33325 5.66659 3.63173 5.66659 3.99992V11.9999C5.66659 12.3681 5.36811 12.6666 4.99992 12.6666C4.63173 12.6666 4.33325 12.3681 4.33325 11.9999ZM10.3333 11.9999V3.99992C10.3333 3.63173 10.6317 3.33325 10.9999 3.33325C11.3681 3.33325 11.6666 3.63173 11.6666 3.99992V11.9999C11.6666 12.3681 11.3681 12.6666 10.9999 12.6666C10.6317 12.6666 10.3333 12.3681 10.3333 11.9999ZM1.33325 9.33325V6.66659C1.33325 6.2984 1.63173 5.99992 1.99992 5.99992C2.36811 5.99992 2.66659 6.2984 2.66659 6.66659V9.33325C2.66659 9.70144 2.36811 9.99992 1.99992 9.99992C1.63173 9.99992 1.33325 9.70144 1.33325 9.33325ZM13.3333 9.33325V6.66659C13.3333 6.2984 13.6317 5.99992 13.9999 5.99992C14.3681 5.99992 14.6666 6.2984 14.6666 6.66659V9.33325C14.6666 9.70144 14.3681 9.99992 13.9999 9.99992C13.6317 9.99992 13.3333 9.70144 13.3333 9.33325Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/attachments/code-file-icon.tsx b/packages/propel/src/icons/attachments/code-file-icon.tsx
deleted file mode 100644
index e4d3e2c29e6..00000000000
--- a/packages/propel/src/icons/attachments/code-file-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function CodeFileIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M9.4687 1.39001C9.8056 1.46493 10.0182 1.79918 9.94331 2.1361L7.27632 14.1361C7.20136 14.473 6.86713 14.6856 6.53023 14.6107C6.19351 14.5357 5.98174 14.2014 6.05659 13.8646L8.72261 1.86462C8.79753 1.52772 9.13178 1.31514 9.4687 1.39001ZM4.22456 4.22497C4.46865 3.98105 4.86433 3.98095 5.10835 4.22497C5.35237 4.46899 5.35227 4.86467 5.10835 5.10876L2.21675 8.00036L5.10835 10.892C5.35227 11.1361 5.35237 11.5317 5.10835 11.7758C4.86433 12.0198 4.46865 12.0197 4.22456 11.7758L0.890578 8.44274C0.6465 8.19866 0.6465 7.80205 0.890578 7.55798L4.22456 4.22497ZM10.8906 4.22497C11.1347 3.98089 11.5313 3.98089 11.7753 4.22497L15.1084 7.55798C15.3524 7.80205 15.3524 8.19866 15.1084 8.44274L11.7753 11.7758C11.5313 12.0198 11.1347 12.0198 10.8906 11.7758C10.6468 11.5318 10.6469 11.136 10.8906 10.892L13.7822 8.00036L10.8906 5.10876C10.6469 4.86471 10.6468 4.46895 10.8906 4.22497Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/attachments/document-file-icon.tsx b/packages/propel/src/icons/attachments/document-file-icon.tsx
deleted file mode 100644
index a0264505382..00000000000
--- a/packages/propel/src/icons/attachments/document-file-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function DocumentFileIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M2.04175 11.4666V4.533C2.04175 3.98348 2.04127 3.53353 2.07105 3.16874C2.10144 2.79669 2.1666 2.45803 2.32788 2.1414C2.57955 1.64747 2.98141 1.24561 3.47534 0.99394C3.79198 0.832661 4.13063 0.767502 4.50269 0.737104C4.86747 0.707329 5.31742 0.707807 5.86694 0.707807H8.00757C8.46696 0.707807 8.79907 0.703532 9.11792 0.780072C9.26977 0.816533 9.41679 0.868859 9.55933 0.93144C9.57519 0.93761 9.59002 0.945526 9.60523 0.952924C9.63564 0.966985 9.66715 0.978716 9.69702 0.99394L9.87671 1.09453L10.0798 1.23613C10.278 1.39031 10.4692 1.58448 10.7126 1.82792L12.8376 3.9539C13.1626 4.2788 13.4007 4.51024 13.572 4.78984C13.6272 4.87997 13.6747 4.97428 13.7185 5.07011C13.7232 5.08016 13.728 5.09005 13.7322 5.10038C13.7961 5.24493 13.8485 5.39451 13.8855 5.54863C13.962 5.86738 13.9587 6.19877 13.9587 6.658V11.4666C13.9587 12.0161 13.9592 12.4661 13.9294 12.8309C13.899 13.2029 13.8339 13.5415 13.6726 13.8582C13.4524 14.2904 13.1171 14.6519 12.7058 14.9041L12.5251 15.0047C12.2084 15.166 11.87 15.2311 11.4978 15.2615C11.133 15.2913 10.6832 15.2908 10.1335 15.2908H5.86694C5.31741 15.2908 4.86747 15.2913 4.50269 15.2615C4.13058 15.2311 3.79201 15.166 3.47534 15.0047C2.9815 14.7531 2.57957 14.352 2.32788 13.8582C2.16656 13.5415 2.10146 13.2029 2.07105 12.8309C2.04124 12.4661 2.04175 12.0161 2.04175 11.4666ZM3.29175 11.4666C3.29175 12.0367 3.29246 12.4272 3.31714 12.7293C3.34124 13.0238 3.38456 13.1797 3.44116 13.2908C3.57298 13.5495 3.78405 13.7596 4.04273 13.8914C4.15382 13.948 4.30958 13.9923 4.60425 14.0164C4.90636 14.0411 5.29672 14.0408 5.86694 14.0408H10.1335C10.7039 14.0408 11.0941 14.0411 11.3962 14.0164C11.691 13.9923 11.8466 13.948 11.9578 13.8914C12.2164 13.7597 12.4265 13.5494 12.5584 13.2908C12.615 13.1797 12.6593 13.0238 12.6834 12.7293C12.708 12.4272 12.7087 12.0367 12.7087 11.4666V6.658C12.7087 6.27204 12.7063 6.08602 12.6912 5.95781H10.4001C10.2238 5.95781 10.0534 5.95871 9.91089 5.94706C9.76121 5.93481 9.5877 5.90574 9.41382 5.81718C9.17068 5.69331 8.97316 5.49555 8.84937 5.25273C8.76065 5.07863 8.73172 4.9045 8.71948 4.75468C8.70786 4.61227 8.70874 4.44258 8.70874 4.2664V1.97441C8.58046 1.95924 8.39393 1.95781 8.00757 1.95781H5.86694C5.29669 1.95781 4.90637 1.95853 4.60425 1.9832C4.3097 2.00726 4.15382 2.05069 4.04273 2.10722C3.784 2.23905 3.57299 2.45006 3.44116 2.70878C3.38463 2.81988 3.3412 2.97576 3.31714 3.27031C3.29247 3.57243 3.29175 3.96275 3.29175 4.533V11.4666ZM9.96558 4.65312C9.96701 4.67068 9.96918 4.68335 9.97046 4.69218L9.97339 4.69609C9.98224 4.69738 9.99547 4.6995 10.0134 4.70097C10.0932 4.70746 10.2034 4.70781 10.4001 4.70781H11.824L9.95874 2.8416V4.2664C9.95874 4.46323 9.95906 4.57334 9.96558 4.65312Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/attachments/image-file-icon.tsx b/packages/propel/src/icons/attachments/image-file-icon.tsx
deleted file mode 100644
index cf458b7e9b2..00000000000
--- a/packages/propel/src/icons/attachments/image-file-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function ImageFileIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M13.375 10.2598L10.9785 7.86328C10.8392 7.72401 10.7612 7.64557 10.7002 7.59375C10.6869 7.58245 10.676 7.57561 10.6689 7.57031C10.6672 7.57021 10.6658 7.5702 10.6641 7.57031C10.657 7.57563 10.6461 7.58247 10.6328 7.59375C10.5718 7.64558 10.4938 7.72399 10.3545 7.86328L4.84277 13.373C4.9535 13.3734 5.07242 13.375 5.2002 13.375H10.7998C11.3701 13.375 11.7604 13.3743 12.0625 13.3496C12.357 13.3255 12.5129 13.2821 12.624 13.2256C12.8827 13.0938 13.0938 12.8827 13.2256 12.624C13.2821 12.5129 13.3255 12.357 13.3496 12.0625C13.3743 11.7604 13.375 11.3701 13.375 10.7998V10.2598ZM6.375 5.66699C6.375 5.2759 6.05805 4.95818 5.66699 4.95801C5.27579 4.95801 4.95801 5.27579 4.95801 5.66699C4.95818 6.05805 5.2759 6.375 5.66699 6.375C6.05794 6.37482 6.37482 6.05794 6.375 5.66699ZM13.375 5.2002C13.375 4.62994 13.3743 4.23962 13.3496 3.9375C13.3255 3.64295 13.2821 3.48707 13.2256 3.37598C13.0938 3.11725 12.8827 2.90623 12.624 2.77441C12.5129 2.71788 12.357 2.67445 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62994 2.625 4.23962 2.62572 3.9375 2.65039C3.64296 2.67446 3.48707 2.71788 3.37598 2.77441C3.11725 2.90624 2.90624 3.11725 2.77441 3.37598C2.71788 3.48707 2.67446 3.64296 2.65039 3.9375C2.62572 4.23962 2.625 4.62994 2.625 5.2002V10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67445 12.357 2.71788 12.5129 2.77441 12.624C2.89654 12.8637 3.08734 13.0607 3.32031 13.1934C3.36428 13.122 3.40913 13.0651 3.44238 13.0254C3.53706 12.9123 3.66771 12.7815 3.80176 12.6475L9.4707 6.97852C9.59527 6.85395 9.7153 6.73407 9.82422 6.6416C9.93879 6.54434 10.0817 6.44122 10.2676 6.38086L10.3652 6.35352C10.5962 6.29805 10.8392 6.30699 11.0664 6.38086C11.2524 6.44121 11.3952 6.54433 11.5098 6.6416C11.6187 6.7341 11.7387 6.85398 11.8633 6.97852L13.375 8.49023V5.2002ZM7.625 5.66699C7.62482 6.74829 6.74829 7.62482 5.66699 7.625C4.58554 7.625 3.70818 6.7484 3.70801 5.66699C3.70801 4.58543 4.58543 3.70801 5.66699 3.70801C6.7484 3.70818 7.625 4.58554 7.625 5.66699ZM14.625 10.7998C14.625 11.3493 14.6255 11.7993 14.5957 12.1641C14.5653 12.5361 14.5001 12.8748 14.3389 13.1914C14.0872 13.6854 13.6854 14.0872 13.1914 14.3389C12.8748 14.5001 12.5361 14.5653 12.1641 14.5957C11.7993 14.6255 11.3493 14.625 10.7998 14.625H4.62109C4.43152 14.625 4.24652 14.6253 4.09961 14.6123C4.09609 14.612 4.09257 14.6107 4.08887 14.6104C4.00037 14.6064 3.91608 14.6022 3.83594 14.5957C3.46388 14.5653 3.12523 14.5002 2.80859 14.3389C2.31467 14.0872 1.91281 13.6854 1.66113 13.1914C1.49987 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65067 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49985 3.12523 1.66113 2.80859C1.9128 2.31466 2.31466 1.9128 2.80859 1.66113C3.12523 1.49985 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65067 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49987 13.1914 1.66113C13.6854 1.91281 14.0872 2.31467 14.3389 2.80859C14.5002 3.12523 14.5653 3.46388 14.5957 3.83594C14.6255 4.20072 14.625 4.65067 14.625 5.2002V10.7998Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/attachments/index.ts b/packages/propel/src/icons/attachments/index.ts
deleted file mode 100644
index dd8e0d8f1c5..00000000000
--- a/packages/propel/src/icons/attachments/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./audio-file-icon";
-export * from "./code-file-icon";
-export * from "./document-file-icon";
-export * from "./image-file-icon";
-export * from "./video-file-icon";
diff --git a/packages/propel/src/icons/attachments/video-file-icon.tsx b/packages/propel/src/icons/attachments/video-file-icon.tsx
deleted file mode 100644
index a0613b78fa5..00000000000
--- a/packages/propel/src/icons/attachments/video-file-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function VideoFileIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M8.13281 2.70801C8.68235 2.70801 9.13229 2.70753 9.49707 2.73731C9.86914 2.7677 10.2078 2.83287 10.5244 2.99414C11.0184 3.24582 11.4202 3.64768 11.6719 4.1416C11.8332 4.45823 11.8983 4.79689 11.9287 5.16895C11.9577 5.52422 11.957 5.96009 11.957 6.49023L13.3135 5.13477C13.4475 5.00076 13.5783 4.87006 13.6914 4.77539C13.7887 4.69397 13.9861 4.53702 14.2578 4.51563L14.3721 4.51367C14.6367 4.52445 14.8872 4.64455 15.0615 4.84863C15.2385 5.05589 15.2681 5.30626 15.2793 5.43262C15.2923 5.57953 15.291 5.76453 15.291 5.9541V10.0449C15.291 10.2344 15.2923 10.4195 15.2793 10.5664C15.2681 10.6927 15.2386 10.9431 15.0615 11.1504C14.8872 11.3546 14.6367 11.4745 14.3721 11.4854L14.2578 11.4834C13.9864 11.462 13.7888 11.3061 13.6914 11.2246C13.5783 11.1299 13.4475 10.9983 13.3135 10.8643L11.957 9.50781C11.957 10.0388 11.9578 10.4754 11.9287 10.8311C11.8983 11.2031 11.8332 11.5417 11.6719 11.8584C11.4202 12.3522 11.0183 12.7533 10.5244 13.0049C10.2077 13.1662 9.86919 13.2313 9.49707 13.2617C9.13229 13.2915 8.68236 13.291 8.13281 13.291H4.5332C3.98367 13.291 3.53373 13.2915 3.16895 13.2617C2.79684 13.2313 2.45827 13.1662 2.1416 13.0049C1.64776 12.7533 1.24583 12.3522 0.994141 11.8584C0.832817 11.5417 0.76772 11.2031 0.737305 10.8311C0.707503 10.4663 0.708008 10.0163 0.708008 9.4668V6.5332C0.708008 5.98368 0.707531 5.53373 0.737305 5.16895C0.767704 4.79689 0.832862 4.45824 0.994141 4.1416C1.24581 3.64767 1.64767 3.24581 2.1416 2.99414C2.45824 2.83286 2.79689 2.7677 3.16895 2.73731C3.53373 2.70753 3.98368 2.70801 4.5332 2.70801H8.13281ZM12.2168 7.99902L14.041 9.82324V6.17578L12.2168 7.99902ZM1.95801 9.4668C1.95801 10.0369 1.95872 10.4274 1.9834 10.7295C2.0075 11.024 2.05082 11.1799 2.10742 11.291C2.23924 11.5497 2.45031 11.7598 2.70898 11.8916C2.82008 11.9482 2.97584 11.9925 3.27051 12.0166C3.57262 12.0413 3.96298 12.041 4.5332 12.041H8.13281C8.70305 12.041 9.0934 12.0413 9.39551 12.0166C9.69012 11.9925 9.84589 11.9482 9.95703 11.8916C10.2157 11.7598 10.4268 11.5497 10.5586 11.291C10.6152 11.1799 10.6585 11.024 10.6826 10.7295C10.7073 10.4274 10.708 10.0369 10.708 9.4668V6.5332C10.708 5.96295 10.7073 5.57263 10.6826 5.27051C10.6586 4.97596 10.6151 4.82008 10.5586 4.70898C10.4268 4.45026 10.2157 4.23924 9.95703 4.10742C9.8459 4.05089 9.69 4.00746 9.39551 3.9834C9.09339 3.95873 8.70308 3.95801 8.13281 3.95801H4.5332C3.96295 3.95801 3.57263 3.95873 3.27051 3.9834C2.97596 4.00746 2.82008 4.05089 2.70898 4.10742C2.45026 4.23925 2.23925 4.45026 2.10742 4.70898C2.05089 4.82008 2.00746 4.97596 1.9834 5.27051C1.95873 5.57263 1.95801 5.96295 1.95801 6.5332V9.4668Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/bar-icon.tsx b/packages/propel/src/icons/bar-icon.tsx
deleted file mode 100644
index 16ae988e29a..00000000000
--- a/packages/propel/src/icons/bar-icon.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function BarIcon({ className = "", ...rest }: ISvgIcons) {
-  return (
-    <svg className={className} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...rest}>
-      <path
-        d="M0 12.5859C0 11.4814 0.89543 10.5859 2 10.5859H3.64706C4.75163 10.5859 5.64706 11.4814 5.64706 12.5859V23.9977H0V12.5859Z"
-        fill="currentColor"
-      />
-      <path
-        d="M9.17773 2C9.17773 0.89543 10.0732 0 11.1777 0H12.8248C13.9294 0 14.8248 0.895431 14.8248 2V24H9.17773V2Z"
-        fill="currentColor"
-      />
-      <path
-        d="M18.3535 8.35156C18.3535 7.247 19.2489 6.35156 20.3535 6.35156H22.0006C23.1051 6.35156 24.0006 7.24699 24.0006 8.35156V23.9986H18.3535V8.35156Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/brand/index.ts b/packages/propel/src/icons/brand/index.ts
deleted file mode 100644
index 6e6ba6e07d5..00000000000
--- a/packages/propel/src/icons/brand/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./accenture-logo";
-export * from "./dolby-logo";
-export * from "./sony-logo";
-export * from "./zerodha-logo";
-export * from "./plane-lockup";
-export * from "./plane-logo";
-export * from "./plane-wordmark";
diff --git a/packages/propel/src/icons/brand/plane-wordmark.tsx b/packages/propel/src/icons/brand/plane-wordmark.tsx
deleted file mode 100644
index e3554585e43..00000000000
--- a/packages/propel/src/icons/brand/plane-wordmark.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "../type";
-
-export function PlaneWordmark({ width = "146", height = "44", className, color = "currentColor" }: ISvgIcons) {
-  return (
-    <svg
-      width={width}
-      height={height}
-      viewBox="0 0 146 44"
-      fill={color}
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <path
-        d="M111.077 42.4468H104.972L104.98 22.4317C104.717 18.7545 102.786 16.1545 99.03 15.6199C92.587 14.7006 88.663 18.8828 88.21 25.0258L88.218 42.4468H82.041V11.2543H86.158L88.255 17.8846H88.6C89.825 13.8701 92.684 11.4831 96.898 10.5757C104.126 9.0231 110.643 13.2724 111.079 20.8239V42.4468H111.077Z"
-        fill={color}
-      />
-      <path
-        d="M57.812 10.7315C52.03 11.9566 47.67 16.2354 47.222 22.264H53.395C53.669 19.3484 55.561 16.9969 58.267 15.9553C61.418 14.7401 66.805 14.8881 69.178 17.6005C70.774 19.4253 71.305 22.5816 69.212 24.2249C66.675 26.2173 60.39 25.6117 57.214 25.7636C52.631 25.9826 48.141 27.8429 47.183 32.7727C45.1 43.5042 59.035 45.9267 65.902 40.8963C68.095 39.2885 69.672 36.8443 70.261 34.1792H70.577L72.788 42.4508H76.61V20.964C76.517 11.3214 65.462 9.108 57.81 10.7315H57.812ZM68.847 32.2637C66.484 36.649 60.958 40.0441 56.218 38.3318C52.44 36.9686 52.268 31.4095 55.973 29.9181C59.613 28.4524 67.732 29.9694 70.368 25.949C70.275 28.0855 69.906 30.2989 68.849 32.2637H68.847Z"
-        fill={color}
-      />
-      <path
-        d="M7.08199 26.5652V42.4475H0.610992V0.000626947H18.863C19.007 -0.00726305 19.141 0.0617763 19.283 0.0696663C27.732 0.531286 33.297 4.601 33.104 13.6025C32.928 21.7991 26.663 26.2199 18.934 26.5671H7.08199V26.5652ZM7.08199 5.4828V21.2941H18.088C23.595 20.8956 27.071 18.1022 26.491 12.265C25.967 6.9781 21.802 5.6544 17.107 5.4788C13.795 5.3546 10.402 5.5795 7.08199 5.4808V5.4828Z"
-        fill={color}
-      />
-      <path d="M42.647 0H36.529V42.4468H42.647V0Z" fill={color} />
-      <path
-        d="M139.872 33.418C138.911 35.4953 137.138 37.1603 134.934 37.8981C132.368 38.7562 128.479 38.5431 126.083 37.2569C122.67 35.4263 121.145 31.6485 121.137 27.8984H145.891C146.194 24.6908 145.902 21.3648 144.496 18.4333C141.083 11.3177 132.859 8.7236 125.513 10.9429C116.868 13.5568 114.165 22.4162 115.462 30.6543C116.86 39.5611 124.197 43.976 132.958 43.3585C138.884 42.9423 144.271 39.1192 145.788 33.4161H139.874L139.872 33.418ZM121.208 23.4381C121.778 17.2457 127.347 14.2018 133.163 15.4269C137.361 16.3107 139.75 19.9523 139.842 24.1068H121.145C121.145 24.1068 121.19 23.6255 121.208 23.4401V23.4381Z"
-        fill={color}
-      />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/center-panel-icon.tsx b/packages/propel/src/icons/center-panel-icon.tsx
deleted file mode 100644
index 6278b5da11d..00000000000
--- a/packages/propel/src/icons/center-panel-icon.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function CenterPanelIcon({ className = "text-current", ...rest }: ISvgIcons) {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      className={`${className} stroke-2`}
-      stroke="currentColor"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...rest}
-    >
-      <path
-        d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M15.1111 8.00009H8.8001C8.33334 8.00007 8.00003 8.0001 8.00012 8.88897V15.1111C8.00012 16 8.00012 16 8.8001 16H15.1111C16 16 16 16 16 15.1111V8.88897C16 8.00009 16 8.00009 15.1111 8.00009H15.1111Z"
-        fill="currentColor"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/comment-fill-icon.tsx b/packages/propel/src/icons/comment-fill-icon.tsx
deleted file mode 100644
index 76be517dc39..00000000000
--- a/packages/propel/src/icons/comment-fill-icon.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function CommentFillIcon({ className = "text-current", ...rest }: ISvgIcons) {
-  return (
-    <svg viewBox="0 0 24 24" className={`${className}`} xmlns="http://www.w3.org/2000/svg" {...rest}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M4.848 2.771C7.21613 2.4234 9.60649 2.24927 12 2.25C14.43 2.25 16.817 2.428 19.152 2.77C21.13 3.062 22.5 4.794 22.5 6.74V12.76C22.5 14.706 21.13 16.438 19.152 16.73C17.212 17.014 15.236 17.185 13.23 17.235C13.1303 17.2369 13.0351 17.277 12.964 17.347L8.78 21.53C8.67511 21.6348 8.54153 21.7061 8.39614 21.735C8.25074 21.7638 8.10004 21.749 7.96308 21.6923C7.82611 21.6356 7.70903 21.5395 7.62661 21.4163C7.54419 21.2931 7.50013 21.1482 7.5 21V17.045C6.61329 16.9639 5.72895 16.8585 4.848 16.729C2.87 16.439 1.5 14.705 1.5 12.759V6.741C1.5 4.795 2.87 3.061 4.848 2.771Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/constants.tsx b/packages/propel/src/icons/constants.tsx
deleted file mode 100644
index b668b9b6efa..00000000000
--- a/packages/propel/src/icons/constants.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { Icon } from "./icon";
-export const ActionsIconsMap = [
-  { icon: <Icon name="action.add" />, title: "AddIcon" },
-  { icon: <Icon name="action.add-workitem" />, title: "AddWorkItemIcon" },
-  { icon: <Icon name="action.add-reaction" />, title: "AddReactionIcon" },
-  { icon: <Icon name="action.check" />, title: "CheckIcon" },
-  { icon: <Icon name="action.close" />, title: "CloseIcon" },
-  { icon: <Icon name="action.copy" />, title: "CopyIcon" },
-  { icon: <Icon name="action.edit" />, title: "EditIcon" },
-  { icon: <Icon name="action.globe" />, title: "GlobeIcon" },
-  { icon: <Icon name="action.link" />, title: "LinkIcon" },
-  { icon: <Icon name="action.lock" />, title: "LockIcon" },
-  { icon: <Icon name="action.new-tab" />, title: "NewTabIcon" },
-  { icon: <Icon name="action.filter" />, title: "FilterIcon" },
-  { icon: <Icon name="action.filter-applied" />, title: "FilterAppliedIcon" },
-  { icon: <Icon name="action.search" />, title: "SearchIcon" },
-  { icon: <Icon name="action.plus" />, title: "PlusIcon" },
-  { icon: <Icon name="action.preferences" />, title: "PreferencesIcon" },
-  { icon: <Icon name="action.trash" />, title: "TrashIcon" },
-  { icon: <Icon name="action.copy-link" />, title: "CopyLinkIcon" },
-  { icon: <Icon name="action.upgrade" />, title: "UpgradeIcon" },
-];
-
-export const ArrowsIconsMap = [
-  { icon: <Icon name="arrow.chevron-down" />, title: "ChevronDownIcon" },
-  { icon: <Icon name="arrow.chevron-left" />, title: "ChevronLeftIcon" },
-  { icon: <Icon name="arrow.chevron-right" />, title: "ChevronRightIcon" },
-  { icon: <Icon name="arrow.chevron-up" />, title: "ChevronUpIcon" },
-  { icon: <Icon name="arrow.reply" />, title: "ReplyIcon" },
-];
-
-export const WorkspaceIconsMap = [
-  { icon: <Icon name="workspace.analytics" />, title: "AnalyticsIcon" },
-  { icon: <Icon name="workspace.archive" />, title: "ArchiveIcon" },
-  { icon: <Icon name="workspace.dashboard" />, title: "DashboardIcon" },
-  { icon: <Icon name="workspace.draft" />, title: "DraftIcon" },
-  { icon: <Icon name="workspace.home" />, title: "HomeIcon" },
-  { icon: <Icon name="workspace.inbox" />, title: "InboxIcon" },
-  { icon: <Icon name="workspace.multiple-sticky" />, title: "MultipleStickyIcon" },
-  { icon: <Icon name="workspace.project" />, title: "ProjectIcon" },
-  { icon: <Icon name="workspace.your-work" />, title: "YourWorkIcon" },
-];
-
-export const ProjectIconsMap = [
-  { icon: <Icon name="project.cycle" />, title: "CycleIcon" },
-  { icon: <Icon name="project.epic" />, title: "EpicIcon" },
-  { icon: <Icon name="project.intake" />, title: "IntakeIcon" },
-  { icon: <Icon name="project.module" />, title: "ModuleIcon" },
-  { icon: <Icon name="project.page" />, title: "PageIcon" },
-  { icon: <Icon name="project.view" />, title: "ViewIcon" },
-  { icon: <Icon name="project.work-items" />, title: "WorkItemsIcon" },
-];
-
-export const SubBrandIconsMap = [
-  { icon: <Icon name="sub-brand.pi-chat" />, title: "PiChatLogo" },
-  { icon: <Icon name="sub-brand.plane" />, title: "PlaneIcon" },
-  { icon: <Icon name="sub-brand.wiki" />, title: "WikiIcon" },
-];
-
-export const LayoutIconsMap = [
-  { icon: <Icon name="layout.calendar" />, title: "CalendarLayoutIcon" },
-  { icon: <Icon name="layout.card" />, title: "CardLayoutIcon" },
-  { icon: <Icon name="layout.timeline" />, title: "TimelineLayoutIcon" },
-  { icon: <Icon name="layout.grid" />, title: "GridLayoutIcon" },
-  { icon: <Icon name="layout.board" />, title: "BoardLayoutIcon" },
-  { icon: <Icon name="layout.list" />, title: "ListLayoutIcon" },
-  { icon: <Icon name="layout.sheet" />, title: "SheetLayoutIcon" },
-];
-
-export const PropertyIconsMap = [
-  { icon: <Icon name="property.boolean" />, title: "BooleanPropertyIcon" },
-  { icon: <Icon name="property.dropdown" />, title: "DropdownPropertyIcon" },
-  { icon: <Icon name="property.due-date" />, title: "DueDatePropertyIcon" },
-  { icon: <Icon name="property.duplicate" />, title: "DuplicatePropertyIcon" },
-  { icon: <Icon name="property.estimate" />, title: "EstimatePropertyIcon" },
-  { icon: <Icon name="property.hash" />, title: "HashPropertyIcon" },
-  { icon: <Icon name="property.label" />, title: "LabelPropertyIcon" },
-  { icon: <Icon name="property.members" />, title: "MembersPropertyIcon" },
-  { icon: <Icon name="property.overdue-date" />, title: "OverdueDatePropertyIcon" },
-  { icon: <Icon name="property.parent" />, title: "ParentPropertyIcon" },
-  { icon: <Icon name="property.priority" />, title: "PriorityPropertyIcon" },
-  { icon: <Icon name="property.relates-to" />, title: "RelatesToPropertyIcon" },
-  { icon: <Icon name="property.relation" />, title: "RelationPropertyIcon" },
-  { icon: <Icon name="property.scope" />, title: "ScopePropertyIcon" },
-  { icon: <Icon name="property.start-date" />, title: "StartDatePropertyIcon" },
-  { icon: <Icon name="property.state" />, title: "StatePropertyIcon" },
-  { icon: <Icon name="property.user-circle" />, title: "UserCirclePropertyIcon" },
-  { icon: <Icon name="property.user" />, title: "UserPropertyIcon" },
-  { icon: <Icon name="property.user-square" />, title: "UserSquarePropertyIcon" },
-  { icon: <Icon name="property.workflows" />, title: "WorkflowsPropertyIcon" },
-  { icon: <Icon name="property.label-filled" />, title: "LabelFilledIcon" },
-];
-
-export const MiscIconsMap = [{ icon: <Icon name="misc.info" />, title: "InfoIcon" }];
diff --git a/packages/propel/src/icons/create-icon.tsx b/packages/propel/src/icons/create-icon.tsx
deleted file mode 100644
index fa9da400266..00000000000
--- a/packages/propel/src/icons/create-icon.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function CreateIcon({ className = "text-current", ...rest }: ISvgIcons) {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      className={`${className} stroke-2`}
-      stroke="currentColor"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...rest}
-    >
-      <path
-        d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H12"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path d="M16 5H22" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M19 2V8" strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/cycle/contrast-icon.tsx b/packages/propel/src/icons/cycle/contrast-icon.tsx
deleted file mode 100644
index 8392fe841f0..00000000000
--- a/packages/propel/src/icons/cycle/contrast-icon.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "../type";
-
-export function ContrastIcon({ className = "text-current", ...rest }: ISvgIcons) {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      className={`${className} stroke-2`}
-      stroke="currentColor"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...rest}
-    >
-      <path
-        d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M12 18C13.5913 18 15.1174 17.3679 16.2426 16.2426C17.3679 15.1174 18 13.5913 18 12C18 10.4087 17.3679 8.88258 16.2426 7.75736C15.1174 6.63214 13.5913 6 12 6V18Z"
-        fill="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/cycle/double-circle-icon.tsx b/packages/propel/src/icons/cycle/double-circle-icon.tsx
deleted file mode 100644
index d034a1a17a5..00000000000
--- a/packages/propel/src/icons/cycle/double-circle-icon.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "../type";
-
-export function DoubleCircleIcon({ className = "text-current", ...rest }: ISvgIcons) {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      className={`${className} stroke-2`}
-      stroke="currentColor"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...rest}
-    >
-      <circle cx="12" cy="12" r="9" />
-      <circle cx="12" cy="12" r="5.625" />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/cycle/index.ts b/packages/propel/src/icons/cycle/index.ts
deleted file mode 100644
index 3dfff06ca08..00000000000
--- a/packages/propel/src/icons/cycle/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./circle-dot-full-icon";
-export * from "./contrast-icon";
-export * from "./cycle-group-icon";
-export * from "./double-circle-icon";
-export * from "./helper";
diff --git a/packages/propel/src/icons/default-icon.tsx b/packages/propel/src/icons/default-icon.tsx
deleted file mode 100644
index 0c05c0f1ba3..00000000000
--- a/packages/propel/src/icons/default-icon.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "./icon-wrapper";
-import type { ISvgIcons } from "./type";
-
-export function DefaultIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <rect x="4" y="4" width="8" height="8" rx="1" fill={color} />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/dice-icon.tsx b/packages/propel/src/icons/dice-icon.tsx
deleted file mode 100644
index 9d93e1bcc36..00000000000
--- a/packages/propel/src/icons/dice-icon.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function DiceIcon({ className = "text-current", ...rest }: ISvgIcons) {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      className={`${className} stroke-2`}
-      stroke="currentColor"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...rest}
-    >
-      <path
-        d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M8.77778 7H7.22222C7.09949 7 7 7.09949 7 7.22222V8.77778C7 8.90051 7.09949 9 7.22222 9H8.77778C8.90051 9 9 8.90051 9 8.77778V7.22222C9 7.09949 8.90051 7 8.77778 7Z"
-        fill="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M8.77778 15H7.22222C7.09949 15 7 15.0995 7 15.2222V16.7778C7 16.9005 7.09949 17 7.22222 17H8.77778C8.90051 17 9 16.9005 9 16.7778V15.2222C9 15.0995 8.90051 15 8.77778 15Z"
-        fill="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M16.7778 7H15.2222C15.0995 7 15 7.09949 15 7.22222V8.77778C15 8.90051 15.0995 9 15.2222 9H16.7778C16.9005 9 17 8.90051 17 8.77778V7.22222C17 7.09949 16.9005 7 16.7778 7Z"
-        fill="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M16.7778 15H15.2222C15.0995 15 15 15.0995 15 15.2222V16.7778C15 16.9005 15.0995 17 15.2222 17H16.7778C16.9005 17 17 16.9005 17 16.7778V15.2222C17 15.0995 16.9005 15 16.7778 15Z"
-        fill="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/display-properties.tsx b/packages/propel/src/icons/display-properties.tsx
deleted file mode 100644
index 8c7caf1fa77..00000000000
--- a/packages/propel/src/icons/display-properties.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function DisplayPropertiesIcon({ className = "text-current", ...rest }: ISvgIcons) {
-  return (
-    <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest} className={className}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M2.93934 0.93934C3.22064 0.658035 3.60218 0.5 4 0.5C4.39782 0.5 4.77936 0.658035 5.06066 0.93934C5.22036 1.09904 5.34033 1.29105 5.41421 1.5H11.5C11.7761 1.5 12 1.72386 12 2C12 2.27614 11.7761 2.5 11.5 2.5H5.41421C5.34033 2.70895 5.22036 2.90096 5.06066 3.06066C4.77936 3.34197 4.39782 3.5 4 3.5C3.60218 3.5 3.22064 3.34197 2.93934 3.06066C2.77964 2.90096 2.65967 2.70895 2.58579 2.5H0.5C0.223858 2.5 0 2.27614 0 2C0 1.72386 0.223858 1.5 0.5 1.5H2.58579C2.65967 1.29105 2.77964 1.09904 2.93934 0.93934ZM4 1.5C3.86739 1.5 3.74021 1.55268 3.64645 1.64645C3.55268 1.74021 3.5 1.86739 3.5 2C3.5 2.13261 3.55268 2.25979 3.64645 2.35355C3.74021 2.44732 3.86739 2.5 4 2.5C4.13261 2.5 4.25979 2.44732 4.35355 2.35355C4.44732 2.25979 4.5 2.13261 4.5 2C4.5 1.86739 4.44732 1.74021 4.35355 1.64645C4.25979 1.55268 4.13261 1.5 4 1.5ZM6.93934 4.93934C7.22064 4.65804 7.60218 4.5 8 4.5C8.39783 4.5 8.77936 4.65804 9.06066 4.93934C9.22036 5.09904 9.34033 5.29105 9.41422 5.5H11.5C11.7761 5.5 12 5.72386 12 6C12 6.27614 11.7761 6.5 11.5 6.5H9.41422C9.34033 6.70895 9.22036 6.90096 9.06066 7.06066C8.77936 7.34196 8.39783 7.5 8 7.5C7.60218 7.5 7.22064 7.34196 6.93934 7.06066C6.77964 6.90096 6.65967 6.70895 6.58579 6.5H0.5C0.223858 6.5 0 6.27614 0 6C0 5.72386 0.223858 5.5 0.5 5.5H6.58579C6.65967 5.29105 6.77964 5.09904 6.93934 4.93934ZM8 5.5C7.86739 5.5 7.74021 5.55268 7.64645 5.64645C7.55268 5.74021 7.5 5.86739 7.5 6C7.5 6.13261 7.55268 6.25979 7.64645 6.35355C7.74021 6.44732 7.86739 6.5 8 6.5C8.13261 6.5 8.25978 6.44732 8.35355 6.35355C8.44732 6.25979 8.5 6.13261 8.5 6C8.5 5.86739 8.44732 5.74022 8.35355 5.64645C8.25978 5.55268 8.13261 5.5 8 5.5ZM2.93934 8.93934C3.22064 8.65804 3.60217 8.5 4 8.5C4.39783 8.5 4.77936 8.65804 5.06066 8.93934C5.22036 9.09904 5.34033 9.29105 5.41421 9.5H11.5C11.7761 9.5 12 9.72386 12 10C12 10.2761 11.7761 10.5 11.5 10.5H5.41421C5.34033 10.709 5.22036 10.901 5.06066 11.0607C4.77936 11.342 4.39783 11.5 4 11.5C3.60217 11.5 3.22064 11.342 2.93934 11.0607C2.77964 10.901 2.65967 10.709 2.58579 10.5H0.5C0.223858 10.5 0 10.2761 0 10C0 9.72386 0.223858 9.5 0.5 9.5H2.58579C2.65967 9.29105 2.77964 9.09904 2.93934 8.93934ZM4 9.5C3.86739 9.5 3.74022 9.55268 3.64645 9.64645C3.55268 9.74022 3.5 9.86739 3.5 10C3.5 10.1326 3.55268 10.2598 3.64645 10.3536C3.74022 10.4473 3.86739 10.5 4 10.5C4.13261 10.5 4.25979 10.4473 4.35355 10.3536C4.44732 10.2598 4.5 10.1326 4.5 10C4.5 9.86739 4.44732 9.74022 4.35355 9.64645C4.25979 9.55268 4.13261 9.5 4 9.5Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/done-icon.tsx b/packages/propel/src/icons/done-icon.tsx
deleted file mode 100644
index fe1b2fa7e3f..00000000000
--- a/packages/propel/src/icons/done-icon.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function DoneState({ width = "10", height = "11", className }: ISvgIcons) {
-  return (
-    <svg
-      width={width}
-      height={height}
-      viewBox="0 0 10 11"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <circle cx="5" cy="5.5" r="4.4" stroke="#15A34A" strokeWidth="1.2" />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M2.5 5.59375L3.82582 6.91957L4.26777 6.47763L2.94194 5.15181L2.5 5.59375ZM4.26777 7.36152L7.36136 4.26793L6.91942 3.82599L3.82583 6.91958L4.26777 7.36152Z"
-        fill="#15A34A"
-      />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/dropdown-icon.tsx b/packages/propel/src/icons/dropdown-icon.tsx
deleted file mode 100644
index 519cde3b2f4..00000000000
--- a/packages/propel/src/icons/dropdown-icon.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function DropdownIcon({ className = "text-current", ...rest }: ISvgIcons) {
-  return (
-    <svg
-      viewBox="0 0 7 5"
-      className={`${className} stroke-2`}
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-      {...rest}
-    >
-      <path d="M2.77267 4.0211L0.457719 1.78653C0.162864 1.50191 0.0961218 1.17467 0.257492 0.8048C0.418861 0.434934 0.70939 0.25 1.12908 0.25H5.72716C6.14685 0.25 6.43738 0.434934 6.59875 0.8048C6.76012 1.17467 6.69338 1.50191 6.39855 1.78653L4.08357 4.0211C3.98662 4.1147 3.88435 4.18329 3.77676 4.22687C3.66918 4.27046 3.55297 4.29225 3.42813 4.29225C3.30328 4.29225 3.18706 4.27046 3.07948 4.22687C2.97191 4.18329 2.86964 4.1147 2.77267 4.0211Z" />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/full-screen-panel-icon.tsx b/packages/propel/src/icons/full-screen-panel-icon.tsx
deleted file mode 100644
index 61cb71e4f1a..00000000000
--- a/packages/propel/src/icons/full-screen-panel-icon.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function FullScreenPanelIcon({ className = "text-current", ...rest }: ISvgIcons) {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      className={`${className} stroke-2`}
-      stroke="currentColor"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...rest}
-    >
-      <path
-        d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M16.6667 6.00001H7.20015C6.50001 5.99999 6.00005 6.00003 6.00017 7.33335C6.00027 8.4402 6.00021 13.8198 6.00018 15.8823L6.00017 16.6667C6.00017 18 6.00017 18 7.20015 18H16.6667C18 18 18 18 18 16.6667V7.33335C18 6.00001 18 6.00001 16.6667 6.00001H16.6667Z"
-        fill="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/github-icon.tsx b/packages/propel/src/icons/github-icon.tsx
deleted file mode 100644
index 175b207a06c..00000000000
--- a/packages/propel/src/icons/github-icon.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function GithubIcon({ width = "24", height = "24", className, color }: ISvgIcons) {
-  return (
-    <svg
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clipPath="url(#clip0_282_232)">
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M10 0C4.475 0 0 4.475 0 10C0 14.425 2.8625 18.1625 6.8375 19.4875C7.3375 19.575 7.525 19.275 7.525 19.0125C7.525 18.775 7.5125 17.9875 7.5125 17.15C5 17.6125 4.35 16.5375 4.15 15.975C4.0375 15.6875 3.55 14.8 3.125 14.5625C2.775 14.375 2.275 13.9125 3.1125 13.9C3.9 13.8875 4.4625 14.625 4.65 14.925C5.55 16.4375 6.9875 16.0125 7.5625 15.75C7.65 15.1 7.9125 14.6625 8.2 14.4125C5.975 14.1625 3.65 13.3 3.65 9.475C3.65 8.3875 4.0375 7.4875 4.675 6.7875C4.575 6.5375 4.225 5.5125 4.775 4.1375C4.775 4.1375 5.6125 3.875 7.525 5.1625C8.325 4.9375 9.175 4.825 10.025 4.825C10.875 4.825 11.725 4.9375 12.525 5.1625C14.4375 3.8625 15.275 4.1375 15.275 4.1375C15.825 5.5125 15.475 6.5375 15.375 6.7875C16.0125 7.4875 16.4 8.375 16.4 9.475C16.4 13.3125 14.0625 14.1625 11.8375 14.4125C12.2 14.725 12.5125 15.325 12.5125 16.2625C12.5125 17.6 12.5 18.675 12.5 19.0125C12.5 19.275 12.6875 19.5875 13.1875 19.4875C15.1726 18.8173 16.8976 17.5414 18.1197 15.8395C19.3418 14.1375 19.9994 12.0952 20 10C20 4.475 15.525 0 10 0Z"
-          fill={color ? color : "var(--text-color-secondary)"}
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_282_232">
-          <rect width={width} height={height} />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/gitlab-icon.tsx b/packages/propel/src/icons/gitlab-icon.tsx
deleted file mode 100644
index 9d8368421c2..00000000000
--- a/packages/propel/src/icons/gitlab-icon.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function GitlabIcon({ width = "24", height = "24", className, color }: ISvgIcons) {
-  return (
-    <svg
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clipPath="url(#clip0_282_232)">
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M10 0C4.475 0 0 4.475 0 10C0 14.425 2.8625 18.1625 6.8375 19.4875C7.3375 19.575 7.525 19.275 7.525 19.0125C7.525 18.775 7.5125 17.9875 7.5125 17.15C5 17.6125 4.35 16.5375 4.15 15.975C4.0375 15.6875 3.55 14.8 3.125 14.5625C2.775 14.375 2.275 13.9125 3.1125 13.9C3.9 13.8875 4.4625 14.625 4.65 14.925C5.55 16.4375 6.9875 16.0125 7.5625 15.75C7.65 15.1 7.9125 14.6625 8.2 14.4125C5.975 14.1625 3.65 13.3 3.65 9.475C3.65 8.3875 4.0375 7.4875 4.675 6.7875C4.575 6.5375 4.225 5.5125 4.775 4.1375C4.775 4.1375 5.6125 3.875 7.525 5.1625C8.325 4.9375 9.175 4.825 10.025 4.825C10.875 4.825 11.725 4.9375 12.525 5.1625C14.4375 3.8625 15.275 4.1375 15.275 4.1375C15.825 5.5125 15.475 6.5375 15.375 6.7875C16.0125 7.4875 16.4 8.375 16.4 9.475C16.4 13.3125 14.0625 14.1625 11.8375 14.4125C12.2 14.725 12.5125 15.325 12.5125 16.2625C12.5125 17.6 12.5 18.675 12.5 19.0125C12.5 19.275 12.6875 19.5875 13.1875 19.4875C15.1726 18.8173 16.8976 17.5414 18.1197 15.8395C19.3418 14.1375 19.9994 12.0952 20 10C20 4.475 15.525 0 10 0Z"
-          fill={color ? color : "var(--text-color-secondary)"}
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_282_232">
-          <rect width={width} height={height} />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/helpers.ts b/packages/propel/src/icons/helpers.ts
deleted file mode 100644
index f717c350a32..00000000000
--- a/packages/propel/src/icons/helpers.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { IconName } from "./registry";
-import { ICON_REGISTRY } from "./registry";
-
-/**
- * Get the icon component by name
- * @param name - The icon name from the registry
- * @returns The icon component or default icon if not found
- */
-export const getIconComponent = (name: IconName) => ICON_REGISTRY[name] || ICON_REGISTRY.default;
-
-/**
- * Check if the icon name exists in the registry
- * @param name - The icon name to check
- * @returns True if the icon exists in the registry
- */
-export const isValidIconName = (name: string): name is IconName => name in ICON_REGISTRY;
-
-/**
- * Get all available icon names
- * @returns Array of all icon names in the registry
- */
-export const getIconNames = (): IconName[] => Object.keys(ICON_REGISTRY) as IconName[];
-
-/**
- * Get icons by category
- * @param category - The category prefix (e.g., 'workspace', 'project')
- * @returns Array of icon names matching the category
- */
-export const getIconsByCategory = (category: string): IconName[] =>
-  getIconNames().filter((name) => name.startsWith(`${category}.`));
diff --git a/packages/propel/src/icons/icon.tsx b/packages/propel/src/icons/icon.tsx
deleted file mode 100644
index e2fe4af1e27..00000000000
--- a/packages/propel/src/icons/icon.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { IconName } from "./registry";
-import { ICON_REGISTRY } from "./registry";
-import type { ISvgIcons } from "./type";
-
-export interface IconProps extends Omit<ISvgIcons, "ref"> {
-  name: IconName;
-}
-
-export function Icon({ name, ...props }: IconProps) {
-  const IconComponent = ICON_REGISTRY[name] || ICON_REGISTRY.default;
-  return <IconComponent {...props} />;
-}
diff --git a/packages/propel/src/icons/icons.stories.tsx b/packages/propel/src/icons/icons.stories.tsx
deleted file mode 100644
index 27c3c46c92c..00000000000
--- a/packages/propel/src/icons/icons.stories.tsx
+++ /dev/null
@@ -1,226 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import {
-  ActionsIconsMap,
-  ArrowsIconsMap,
-  LayoutIconsMap,
-  MiscIconsMap,
-  ProjectIconsMap,
-  PropertyIconsMap,
-  SubBrandIconsMap,
-  WorkspaceIconsMap,
-} from "./constants";
-import { Icon } from "./icon";
-import { CycleIcon } from "./project/cycle-icon";
-import { HomeIcon } from "./workspace/home-icon";
-import { ProjectIcon } from "./workspace/project-icon";
-
-const meta: Meta = {
-  title: "Icons",
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        component:
-          "A comprehensive collection of all icons used throughout the application. Supports both direct imports and registry-based usage.",
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj;
-
-export const AllIcons: Story = {
-  render: () => (
-    <div className="space-y-12">
-      <div className="space-y-4">
-        <h3 className="text-16 font-semibold text-primary">Sub-Brand Icons</h3>
-        <div className="grid w-full grid-cols-12 gap-6">
-          {SubBrandIconsMap.map((item) => (
-            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
-              <div className="text-secondary">{item.icon}</div>
-              <p className="text-center text-11 text-tertiary">{item.title}</p>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <h3 className="text-16 font-semibold text-primary">Workspace Icons</h3>
-        <div className="grid w-full grid-cols-12 gap-6">
-          {WorkspaceIconsMap.map((item) => (
-            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
-              <div className="text-secondary">{item.icon}</div>
-              <p className="text-center text-11 text-tertiary">{item.title}</p>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <h3 className="text-16 font-semibold text-primary">Project Icons</h3>
-        <div className="grid w-full grid-cols-12 gap-6">
-          {ProjectIconsMap.map((item) => (
-            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
-              <div className="text-secondary">{item.icon}</div>
-              <p className="text-center text-11 text-tertiary">{item.title}</p>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <h3 className="text-16 font-semibold text-primary">Layout Icons</h3>
-        <div className="grid w-full grid-cols-12 gap-6">
-          {LayoutIconsMap.map((item) => (
-            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
-              <div className="text-secondary">{item.icon}</div>
-              <p className="text-center text-11 text-tertiary">{item.title}</p>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <h3 className="text-16 font-semibold text-primary">Property Icons</h3>
-        <div className="grid w-full grid-cols-12 gap-6">
-          {PropertyIconsMap.map((item) => (
-            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
-              <div className="text-secondary">{item.icon}</div>
-              <p className="text-center text-11 text-tertiary">{item.title}</p>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <h3 className="text-16 font-semibold text-primary">Actions Icons</h3>
-        <div className="grid w-full grid-cols-12 gap-6">
-          {ActionsIconsMap.map((item) => (
-            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
-              <div className="text-secondary">{item.icon}</div>
-              <p className="text-center text-11 text-tertiary">{item.title}</p>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <h3 className="text-16 font-semibold text-primary">Arrows Icons</h3>
-        <div className="grid w-full grid-cols-12 gap-6">
-          {ArrowsIconsMap.map((item) => (
-            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
-              <div className="text-secondary">{item.icon}</div>
-              <p className="text-center text-11 text-tertiary">{item.title}</p>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <h3 className="text-lg text-custom-text-100 font-semibold">Misc Icons</h3>
-        <div className="grid w-full grid-cols-12 gap-6">
-          {MiscIconsMap.map((item) => (
-            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
-              <div className="text-custom-text-200">{item.icon}</div>
-              <p className="text-xs text-custom-text-300 text-center">{item.title}</p>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-export const RegistryUsage: Story = {
-  render: () => (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h3 className="text-16 font-semibold text-primary">Registry-Based Usage</h3>
-        <p className="text-13 text-tertiary">
-          Use the <code className="rounded-sm bg-layer-1 px-1 py-0.5">Icon</code> component with{" "}
-          <code className="rounded-sm bg-layer-1 px-1 py-0.5">name</code> prop for dynamic icon selection.
-        </p>
-        <div className="grid w-full grid-cols-12 gap-6">
-          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
-            <Icon name="workspace.home" className="text-secondary" />
-            <p className="text-center text-11 text-tertiary">workspace.home</p>
-          </div>
-          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
-            <Icon name="project.cycle" className="text-secondary" />
-            <p className="text-center text-11 text-tertiary">project.cycle</p>
-          </div>
-          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
-            <Icon name="layout.board" className="text-secondary" />
-            <p className="text-center text-11 text-tertiary">layout.board</p>
-          </div>
-          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
-            <Icon name="property.priority" className="text-secondary" />
-            <p className="text-center text-11 text-tertiary">property.priority</p>
-          </div>
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <h3 className="text-16 font-semibold text-primary">Direct Import Usage</h3>
-        <p className="text-13 text-tertiary">
-          Import icon components directly for better tree-shaking and type safety.
-        </p>
-        <div className="grid w-full grid-cols-12 gap-6">
-          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
-            <HomeIcon className="text-secondary" />
-            <p className="text-center text-11 text-tertiary">HomeIcon</p>
-          </div>
-          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
-            <CycleIcon className="text-secondary" />
-            <p className="text-center text-11 text-tertiary">CycleIcon</p>
-          </div>
-          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
-            <ProjectIcon className="text-secondary" />
-            <p className="text-center text-11 text-tertiary">ProjectIcon</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-export const IconSizes: Story = {
-  render: () => (
-    <div className="space-y-6">
-      <div className="space-y-4">
-        <h3 className="text-16 font-semibold text-primary">Icon Sizes</h3>
-        <p className="text-13 text-tertiary">Icons can be rendered in different sizes using width and height props.</p>
-      </div>
-
-      <div className="flex items-end gap-8">
-        <div className="flex flex-col items-center gap-2">
-          <Icon name="workspace.home" width="12" height="12" className="text-secondary" />
-          <p className="text-11 text-tertiary">12x12</p>
-        </div>
-        <div className="flex flex-col items-center gap-2">
-          <Icon name="workspace.home" width="16" height="16" className="text-secondary" />
-          <p className="text-11 text-tertiary">16x16 (default)</p>
-        </div>
-        <div className="flex flex-col items-center gap-2">
-          <Icon name="workspace.home" width="24" height="24" className="text-secondary" />
-          <p className="text-11 text-tertiary">24x24</p>
-        </div>
-        <div className="flex flex-col items-center gap-2">
-          <Icon name="workspace.home" width="32" height="32" className="text-secondary" />
-          <p className="text-11 text-tertiary">32x32</p>
-        </div>
-        <div className="flex flex-col items-center gap-2">
-          <Icon name="workspace.home" width="48" height="48" className="text-secondary" />
-          <p className="text-11 text-tertiary">48x48</p>
-        </div>
-      </div>
-    </div>
-  ),
-};
diff --git a/packages/propel/src/icons/in-progress-icon.tsx b/packages/propel/src/icons/in-progress-icon.tsx
deleted file mode 100644
index fe903567eaa..00000000000
--- a/packages/propel/src/icons/in-progress-icon.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function InProgressState({ width = "10", height = "11", className, color }: ISvgIcons) {
-  return (
-    <svg
-      width={width}
-      height={height}
-      viewBox="0 0 12 13"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <circle cx="6" cy="6.5" r="4.4" stroke={color ?? "#EA8900"} strokeWidth="1.2" />
-      <circle cx="6" cy="6.5" r="2.4" stroke={color ?? "#EA8900"} strokeWidth="1.2" strokeDasharray="4 4" />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/index.ts b/packages/propel/src/icons/index.ts
deleted file mode 100644
index 047df91e1bc..00000000000
--- a/packages/propel/src/icons/index.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export type { ISvgIcons } from "./type";
-export type { IconName } from "./registry";
-export { ICON_REGISTRY } from "./registry";
-export * from "./actions";
-export * from "./activity-icon";
-export * from "./ai-icon";
-export * from "./arrows";
-export * from "./at-risk-icon";
-export * from "./attachments";
-export * from "./bar-icon";
-export * from "./blocked-icon";
-export * from "./blocker-icon";
-export * from "./brand";
-export * from "./calendar-after-icon";
-export * from "./calendar-before-icon";
-export * from "./center-panel-icon";
-export * from "./comment-fill-icon";
-export * from "./create-icon";
-export * from "./cycle";
-export * from "./default-icon";
-export * from "./dice-icon";
-export * from "./display-properties";
-export * from "./done-icon";
-export * from "./dropdown-icon";
-export * from "./favorite-folder-icon";
-export * from "./full-screen-panel-icon";
-export * from "./github-icon";
-export * from "./gitlab-icon";
-export * from "./helpers";
-export * from "./icon-wrapper";
-export * from "./icon";
-export * from "./in-progress-icon";
-export * from "./info-fill-icon";
-export * from "./intake";
-export * from "./layer-stack";
-export * from "./layers-icon";
-export * from "./layouts";
-export * from "./lead-icon";
-export * from "./misc";
-export * from "./module";
-export * from "./monospace-icon";
-export * from "./multiple-sticky";
-export * from "./off-track-icon";
-export * from "./on-track-icon";
-export * from "./overview-icon";
-export * from "./pending-icon";
-export * from "./photo-filter-icon";
-export * from "./planned-icon";
-export * from "./priority-icon";
-export * from "./project";
-export * from "./properties";
-export * from "./related-icon";
-export * from "./sans-serif-icon";
-export * from "./serif-icon";
-export * from "./set-as-default-icon";
-export * from "./side-panel-icon";
-export * from "./state";
-export * from "./sticky-note-icon";
-export * from "./sub-brand";
-export * from "./suspended-user";
-export * from "./teams";
-export * from "./transfer-icon";
-export * from "./tree-map-icon";
-export * from "./updates-icon";
-export * from "./user-activity-icon";
-export * from "./workspace-icon";
-export * from "./workspace";
diff --git a/packages/propel/src/icons/info-fill-icon.tsx b/packages/propel/src/icons/info-fill-icon.tsx
deleted file mode 100644
index 3cc649a78e3..00000000000
--- a/packages/propel/src/icons/info-fill-icon.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function InfoFillIcon({ className = "text-current", ...rest }: ISvgIcons) {
-  return (
-    <svg viewBox="0 0 24 24" className={`${className}`} xmlns="http://www.w3.org/2000/svg" {...rest}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M2.25 12C2.25 6.615 6.615 2.25 12 2.25C17.385 2.25 21.75 6.615 21.75 12C21.75 17.385 17.385 21.75 12 21.75C6.615 21.75 2.25 17.385 2.25 12ZM10.956 10.558C12.102 9.985 13.393 11.021 13.082 12.264L12.373 15.1L12.415 15.08C12.5912 15.0025 12.7905 14.9958 12.9715 15.0612C13.1526 15.1265 13.3016 15.259 13.3877 15.4312C13.4737 15.6033 13.4903 15.802 13.434 15.9861C13.3777 16.1702 13.2527 16.3255 13.085 16.42L13.045 16.442C11.898 17.015 10.607 15.979 10.918 14.736L11.628 11.9L11.586 11.92C11.4975 11.9692 11.4 11.9999 11.2994 12.0104C11.1987 12.0209 11.097 12.0109 11.0003 11.981C10.9036 11.9511 10.8139 11.902 10.7367 11.8366C10.6595 11.7711 10.5964 11.6907 10.551 11.6002C10.5057 11.5098 10.4792 11.411 10.4731 11.31C10.4669 11.209 10.4813 11.1078 10.5153 11.0124C10.5493 10.9171 10.6022 10.8297 10.6709 10.7553C10.7396 10.681 10.8226 10.6214 10.915 10.58L10.956 10.558ZM12 9C12.1989 9 12.3897 8.92098 12.5303 8.78033C12.671 8.63968 12.75 8.44891 12.75 8.25C12.75 8.05109 12.671 7.86032 12.5303 7.71967C12.3897 7.57902 12.1989 7.5 12 7.5C11.8011 7.5 11.6103 7.57902 11.4697 7.71967C11.329 7.86032 11.25 8.05109 11.25 8.25C11.25 8.44891 11.329 8.63968 11.4697 8.78033C11.6103 8.92098 11.8011 9 12 9Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/intake.tsx b/packages/propel/src/icons/intake.tsx
deleted file mode 100644
index 4471dd06083..00000000000
--- a/packages/propel/src/icons/intake.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function Intake({ className = "text-current", ...rest }: ISvgIcons) {
-  return (
-    <svg
-      viewBox="0 0 16 16"
-      className={`${className}`}
-      stroke="currentColor"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      strokeWidth="1.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...rest}
-    >
-      <path d="M12.1599 3.59961V9.60688L8.04358 12.0796V6.04325L12.1599 3.59961Z" />
-      <path d="M5.98547 10.8657V4.82938L10.1018 2.38574" />
-      <path d="M3.89087 9.60695V3.57059L8.00723 1.12695" />
-      <path d="M1.06909 8.77051V13.3887C1.06909 14.1814 1.71636 14.8287 2.50909 14.8287H13.4909C14.2836 14.8287 14.9309 14.1814 14.9309 13.3887V8.77051" />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/layers-icon.tsx b/packages/propel/src/icons/layers-icon.tsx
deleted file mode 100644
index ba54ea73d66..00000000000
--- a/packages/propel/src/icons/layers-icon.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function LayersIcon({ className = "text-current", ...rest }: ISvgIcons) {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      className={`${className} stroke-2`}
-      stroke="currentColor"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...rest}
-    >
-      <g clipPath="url(#clip0_7258_81938)">
-        <path
-          d="M16.5953 6.69606L16.6072 5.17376L6.85812 8.92381L6.85812 19.4238L9.00319 18.6961"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M12.0953 3.69606L12.1072 2.17376L2.35812 5.92381L2.35812 16.4238L4.50319 15.6961"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M21.7438 17.9461L21.7511 7.44434L12.0021 11.1944L12.0021 21.6944L21.7438 17.9461Z"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_7258_81938">
-          <rect width="24" height="24" fill="white" transform="translate(24) rotate(90)" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/layouts/board-icon.tsx b/packages/propel/src/icons/layouts/board-icon.tsx
deleted file mode 100644
index 9bdebaf8f30..00000000000
--- a/packages/propel/src/icons/layouts/board-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function BoardLayoutIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M13.375 5.19922C13.375 4.62897 13.3743 4.23865 13.3496 3.93652C13.3255 3.64197 13.2821 3.48609 13.2256 3.375C13.0938 3.11627 12.8827 2.90526 12.624 2.77344C12.5129 2.7169 12.357 2.67348 12.0625 2.64941C11.7604 2.62474 11.3701 2.62402 10.7998 2.62402H10.625V13.374H10.7998C11.3701 13.374 11.7604 13.3733 12.0625 13.3486C12.357 13.3246 12.5129 13.2811 12.624 13.2246C12.8827 13.0928 13.0938 12.8818 13.2256 12.623C13.2821 12.5119 13.3255 12.356 13.3496 12.0615C13.3743 11.7594 13.375 11.3691 13.375 10.7988V5.19922ZM6.625 13.374H9.375V2.62402H6.625V13.374ZM2.625 10.7988C2.625 11.3691 2.62572 11.7594 2.65039 12.0615C2.67445 12.356 2.71788 12.5119 2.77441 12.623C2.90623 12.8818 3.11725 13.0928 3.37598 13.2246C3.48707 13.2811 3.64295 13.3246 3.9375 13.3486C4.23962 13.3733 4.62994 13.374 5.2002 13.374H5.375V2.62402H5.2002C4.62994 2.62402 4.23962 2.62474 3.9375 2.64941C3.64296 2.67348 3.48707 2.71691 3.37598 2.77344C3.11725 2.90526 2.90624 3.11628 2.77441 3.375C2.71788 3.48609 2.67446 3.64198 2.65039 3.93652C2.62572 4.23865 2.625 4.62897 2.625 5.19922V10.7988ZM14.625 10.7988C14.625 11.3484 14.6255 11.7983 14.5957 12.1631C14.5653 12.5351 14.5001 12.8738 14.3389 13.1904C14.0872 13.6844 13.6854 14.0862 13.1914 14.3379C12.8748 14.4992 12.5361 14.5643 12.1641 14.5947C11.7993 14.6245 11.3493 14.624 10.7998 14.624H5.2002C4.65067 14.624 4.20072 14.6245 3.83594 14.5947C3.46388 14.5643 3.12523 14.4992 2.80859 14.3379C2.31467 14.0862 1.91281 13.6844 1.66113 13.1904C1.49987 12.8738 1.4347 12.5352 1.4043 12.1631C1.37452 11.7983 1.375 11.3484 1.375 10.7988V5.19922C1.375 4.64969 1.37452 4.19974 1.4043 3.83496C1.4347 3.4629 1.49985 3.12425 1.66113 2.80762C1.9128 2.31369 2.31466 1.91182 2.80859 1.66016C3.12523 1.49888 3.46388 1.43372 3.83594 1.40332C4.20072 1.37355 4.65067 1.37402 5.2002 1.37402H10.7998C11.3493 1.37402 11.7993 1.37355 12.1641 1.40332C12.5361 1.43372 12.8748 1.49889 13.1914 1.66016C13.6854 1.91183 14.0872 2.31369 14.3389 2.80762C14.5002 3.12425 14.5653 3.46291 14.5957 3.83496C14.6255 4.19974 14.625 4.6497 14.625 5.19922V10.7988Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/layouts/calendar-icon.tsx b/packages/propel/src/icons/layouts/calendar-icon.tsx
deleted file mode 100644
index f88ae3a92ce..00000000000
--- a/packages/propel/src/icons/layouts/calendar-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function CalendarLayoutIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M13.375 7.29102H2.625V11.4668C2.625 12.0369 2.62571 12.4274 2.65039 12.7295C2.67449 13.024 2.71781 13.1799 2.77441 13.291C2.90624 13.5497 3.1173 13.7598 3.37598 13.8916C3.48708 13.9482 3.64284 13.9925 3.9375 14.0166C4.23962 14.0413 4.62998 14.041 5.2002 14.041H10.7998C11.37 14.041 11.7604 14.0413 12.0625 14.0166C12.3571 13.9925 12.5129 13.9482 12.624 13.8916C12.8827 13.7598 13.0938 13.5497 13.2256 13.291C13.2822 13.1799 13.3255 13.024 13.3496 12.7295C13.3743 12.4274 13.375 12.0369 13.375 11.4668V7.29102ZM10.042 4V3.29102H5.95801V4C5.95783 4.34503 5.67808 4.625 5.33301 4.625C4.98809 4.62482 4.70818 4.34492 4.70801 4V3.29297C4.39072 3.29481 4.14362 3.29958 3.9375 3.31641C3.64272 3.34049 3.48709 3.38481 3.37598 3.44141C3.11725 3.57323 2.90624 3.78327 2.77441 4.04199C2.71783 4.15308 2.67448 4.30883 2.65039 4.60352C2.62571 4.90564 2.625 5.29592 2.625 5.86621V6.04102H13.375V5.86621C13.375 5.29591 13.3743 4.90564 13.3496 4.60352C13.3255 4.30883 13.2822 4.15308 13.2256 4.04199C13.0938 3.78327 12.8827 3.57322 12.624 3.44141C12.5129 3.38481 12.3572 3.34049 12.0625 3.31641C11.8564 3.29958 11.6093 3.29481 11.292 3.29297V4C11.2918 4.34492 11.0119 4.62482 10.667 4.625C10.3219 4.625 10.0422 4.34503 10.042 4ZM14.625 11.4668C14.625 12.0163 14.6255 12.4663 14.5957 12.8311C14.5653 13.2031 14.5002 13.5417 14.3389 13.8584C14.0872 14.3522 13.6853 14.7533 13.1914 15.0049C12.8747 15.1662 12.5362 15.2313 12.1641 15.2617C11.7993 15.2915 11.3494 15.291 10.7998 15.291H5.2002C4.65066 15.291 4.20073 15.2915 3.83594 15.2617C3.46383 15.2313 3.12526 15.1662 2.80859 15.0049C2.31476 14.7533 1.91282 14.3522 1.66113 13.8584C1.49981 13.5417 1.43471 13.2031 1.4043 12.8311C1.3745 12.4663 1.375 12.0163 1.375 11.4668V5.86621C1.375 5.31658 1.3745 4.86676 1.4043 4.50195C1.4347 4.1298 1.49976 3.79131 1.66113 3.47461C1.9128 2.98069 2.31467 2.57881 2.80859 2.32715C3.12519 2.16592 3.46393 2.10071 3.83594 2.07031C4.08533 2.04996 4.37446 2.04486 4.70801 2.04297V1.33301C4.70801 0.987938 4.98798 0.708184 5.33301 0.708008C5.67819 0.708008 5.95801 0.98783 5.95801 1.33301V2.04102H10.042V1.33301C10.042 0.98783 10.3218 0.708008 10.667 0.708008C11.012 0.708183 11.292 0.987938 11.292 1.33301V2.04297C11.6255 2.04486 11.9147 2.04996 12.1641 2.07031C12.5361 2.10071 12.8748 2.16593 13.1914 2.32715C13.6854 2.57882 14.0872 2.9807 14.3389 3.47461L14.3945 3.59473C14.5155 3.87672 14.5691 4.17636 14.5957 4.50195C14.6255 4.86677 14.625 5.31659 14.625 5.86621V11.4668Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/layouts/card-icon.tsx b/packages/propel/src/icons/layouts/card-icon.tsx
deleted file mode 100644
index fa7c54687a7..00000000000
--- a/packages/propel/src/icons/layouts/card-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function CardLayoutIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M13.375 11.4668C13.375 11.0832 13.375 10.8326 13.3594 10.6416C13.3519 10.5499 13.3409 10.4857 13.3301 10.4395L13.2979 10.3447C13.2469 10.2448 13.1729 10.1591 13.083 10.0938L12.9883 10.0352C12.9485 10.0149 12.8751 9.98864 12.6914 9.97363C12.5004 9.95804 12.2498 9.95801 11.8662 9.95801H4.13379C3.7502 9.95801 3.49956 9.95804 3.30859 9.97363C3.21688 9.98113 3.15268 9.99208 3.10645 10.0029L3.01172 10.0352C2.87851 10.103 2.77007 10.2114 2.70215 10.3447C2.68187 10.3845 2.65563 10.4579 2.64063 10.6416C2.62503 10.8326 2.625 11.0832 2.625 11.4668V11.8662C2.625 12.2499 2.62502 12.5004 2.64063 12.6914C2.65564 12.875 2.68188 12.9485 2.70215 12.9883C2.77008 13.1215 2.87859 13.23 3.01172 13.2979L3.10645 13.3301C3.15267 13.3409 3.21693 13.3509 3.30859 13.3584C3.49956 13.374 3.75016 13.375 4.13379 13.375H11.8662C12.2498 13.375 12.5004 13.374 12.6914 13.3584C12.8749 13.3434 12.9485 13.3181 12.9883 13.2979L13.083 13.2393C13.1729 13.1739 13.2469 13.0882 13.2979 12.9883C13.3181 12.9485 13.3444 12.875 13.3594 12.6914C13.375 12.5004 13.375 12.2499 13.375 11.8662V11.4668ZM13.375 4.13379C13.375 3.7502 13.375 3.49956 13.3594 3.30859C13.3519 3.21688 13.3409 3.15268 13.3301 3.10645L13.2979 3.01172C13.23 2.8785 13.1216 2.77007 12.9883 2.70215C12.9485 2.68187 12.8751 2.65563 12.6914 2.64063C12.5004 2.62503 12.2498 2.625 11.8662 2.625H4.13379C3.7502 2.625 3.49956 2.62503 3.30859 2.64063C3.12491 2.65563 3.05153 2.68186 3.01172 2.70215C2.87844 2.77005 2.77005 2.87844 2.70215 3.01172C2.68186 3.05153 2.65563 3.12491 2.64063 3.30859C2.62503 3.49956 2.625 3.7502 2.625 4.13379V4.5332C2.625 4.91688 2.62502 5.16742 2.64063 5.3584C2.65564 5.54194 2.68187 5.61548 2.70215 5.65527C2.77006 5.78843 2.87853 5.89698 3.01172 5.96484C3.05156 5.98512 3.12509 6.0104 3.30859 6.02539C3.49956 6.04099 3.75016 6.04199 4.13379 6.04199H11.8662C12.2498 6.04199 12.5004 6.04099 12.6914 6.02539C12.8749 6.0104 12.9485 5.98511 12.9883 5.96484C13.1215 5.89696 13.23 5.78839 13.2979 5.65527C13.3181 5.61548 13.3444 5.54194 13.3594 5.3584C13.375 5.16742 13.375 4.91689 13.375 4.5332V4.13379ZM14.625 11.8662C14.625 12.2293 14.6252 12.5393 14.6045 12.793C14.5832 13.054 14.5362 13.3103 14.4111 13.5557C14.2234 13.924 13.924 14.2235 13.5557 14.4111C13.3103 14.5362 13.0539 14.5832 12.793 14.6045C12.5393 14.6252 12.2291 14.625 11.8662 14.625H4.13379C3.77089 14.625 3.46066 14.6252 3.20703 14.6045C2.94605 14.5832 2.68973 14.5362 2.44434 14.4111C2.07591 14.2235 1.77661 13.9239 1.58887 13.5557C1.46382 13.3103 1.41683 13.054 1.39551 12.793C1.37478 12.5393 1.375 12.2293 1.375 11.8662V11.4668C1.375 11.1039 1.37481 10.7937 1.39551 10.54C1.41683 10.2791 1.46382 10.0227 1.58887 9.77734C1.77657 9.40901 2.07589 9.10961 2.44434 8.92188C2.68974 8.79683 2.94604 8.74984 3.20703 8.72852C3.46067 8.70781 3.77088 8.70801 4.13379 8.70801H11.8662C12.2291 8.70801 12.5393 8.70781 12.793 8.72852C13.054 8.74984 13.3103 8.79682 13.5557 8.92188C13.9241 9.10958 14.2234 9.40896 14.4111 9.77734C14.5362 10.0227 14.5832 10.2791 14.6045 10.54C14.6252 10.7937 14.625 11.1039 14.625 11.4668V11.8662ZM14.625 4.5332C14.625 4.89626 14.6252 5.20627 14.6045 5.45996C14.5832 5.72094 14.5362 5.97726 14.4111 6.22266C14.2234 6.59102 13.924 6.89046 13.5557 7.07812C13.3103 7.20316 13.0539 7.25016 12.793 7.27148C12.5393 7.29218 12.2291 7.29199 11.8662 7.29199H4.13379C3.77089 7.29199 3.46066 7.29218 3.20703 7.27148C2.94605 7.25016 2.68973 7.20316 2.44434 7.07812C2.07597 6.89044 1.77663 6.59098 1.58887 6.22266C1.46383 5.97726 1.41683 5.72094 1.39551 5.45996C1.37478 5.20627 1.375 4.89626 1.375 4.5332V4.13379C1.375 3.77088 1.37481 3.46067 1.39551 3.20703C1.41683 2.94604 1.46383 2.68974 1.58887 2.44434C1.7766 2.07594 2.07594 1.7766 2.44434 1.58887C2.68974 1.46383 2.94604 1.41683 3.20703 1.39551C3.46067 1.37481 3.77088 1.375 4.13379 1.375H11.8662C12.2291 1.375 12.5393 1.37481 12.793 1.39551C13.054 1.41683 13.3103 1.46382 13.5557 1.58887C13.924 1.77658 14.2234 2.0759 14.4111 2.44434C14.5362 2.68974 14.5832 2.94604 14.6045 3.20703C14.6252 3.46067 14.625 3.77088 14.625 4.13379V4.5332Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/layouts/grid-icon.tsx b/packages/propel/src/icons/layouts/grid-icon.tsx
deleted file mode 100644
index af7af36213d..00000000000
--- a/packages/propel/src/icons/layouts/grid-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function GridLayoutIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M6.0342 10.0127C6.0327 9.99439 6.02964 9.98153 6.02834 9.97267C6.02717 9.97146 6.02672 9.96984 6.02541 9.96877C6.01667 9.96752 6.0042 9.96624 5.98732 9.96486C5.90751 9.95834 5.79662 9.95802 5.59963 9.95802H3.06642C2.86959 9.95802 2.75948 9.95834 2.6797 9.96486C2.66216 9.96629 2.64947 9.96847 2.64064 9.96974C2.63917 9.97102 2.638 9.97219 2.63673 9.97365C2.63546 9.98248 2.63328 9.99518 2.63185 10.0127C2.62534 10.0925 2.62502 10.2026 2.62502 10.3994V12.9326C2.62502 13.1296 2.62533 13.2405 2.63185 13.3203C2.63324 13.3372 2.63451 13.3497 2.63576 13.3584C2.63683 13.3597 2.63844 13.3602 2.63966 13.3613C2.64851 13.3627 2.66138 13.3657 2.6797 13.3672C2.75948 13.3737 2.86959 13.375 3.06642 13.375H5.59963C5.79662 13.375 5.90751 13.3737 5.98732 13.3672C6.00495 13.3658 6.0176 13.3636 6.02638 13.3623C6.02747 13.3613 6.02834 13.3605 6.02931 13.3594C6.03059 13.3506 6.03275 13.338 6.0342 13.3203C6.04072 13.2405 6.04201 13.1296 6.04201 12.9326V10.3994C6.04201 10.2026 6.04071 10.0925 6.0342 10.0127ZM13.3682 10.0127C13.3667 9.99442 13.3636 9.98153 13.3623 9.97267C13.3613 9.97161 13.3605 9.9707 13.3594 9.96974C13.3506 9.96847 13.3378 9.96628 13.3203 9.96486C13.2405 9.95835 13.1304 9.95802 12.9336 9.95802H10.4004C10.2034 9.95802 10.0925 9.95834 10.0127 9.96486C9.99519 9.9663 9.98241 9.96749 9.97365 9.96877C9.97239 9.96985 9.97184 9.97145 9.97072 9.97267C9.96942 9.98152 9.96733 9.99449 9.96584 10.0127C9.95932 10.0925 9.959 10.2026 9.959 10.3994V12.9326C9.959 13.1296 9.95932 13.2405 9.96584 13.3203C9.96728 13.3379 9.96944 13.3506 9.97072 13.3594C9.97169 13.3605 9.97257 13.3613 9.97365 13.3623C9.98241 13.3636 9.99506 13.3658 10.0127 13.3672C10.0925 13.3737 10.2034 13.375 10.4004 13.375H12.9336C13.1305 13.375 13.2405 13.3737 13.3203 13.3672C13.3386 13.3657 13.3515 13.3626 13.3604 13.3613C13.3612 13.3605 13.3625 13.3603 13.3633 13.3594C13.3646 13.3506 13.3667 13.3379 13.3682 13.3203C13.3747 13.2405 13.375 13.1296 13.375 12.9326V10.3994C13.375 10.2026 13.3747 10.0925 13.3682 10.0127ZM6.0342 2.6797C6.0327 2.66138 6.02964 2.64852 6.02834 2.63966C6.02717 2.63844 6.02671 2.63683 6.02541 2.63576C6.01666 2.63451 6.00419 2.63324 5.98732 2.63185C5.90751 2.62533 5.79662 2.62502 5.59963 2.62502H3.06642C2.8696 2.62502 2.75948 2.62533 2.6797 2.63185C2.66216 2.63329 2.64947 2.63546 2.64064 2.63673C2.63918 2.63801 2.63801 2.63918 2.63673 2.64064C2.63546 2.64947 2.63329 2.66216 2.63185 2.6797C2.62533 2.75948 2.62502 2.8696 2.62502 3.06642V5.59963C2.62502 5.79662 2.62533 5.90751 2.63185 5.98732C2.63324 6.00419 2.63451 6.01666 2.63576 6.02541C2.63683 6.02671 2.63844 6.02717 2.63966 6.02834C2.64852 6.02964 2.66138 6.0327 2.6797 6.0342C2.75948 6.04071 2.86959 6.04201 3.06642 6.04201H5.59963C5.79662 6.04201 5.90751 6.04072 5.98732 6.0342C6.00494 6.03275 6.0176 6.03059 6.02638 6.02931C6.02747 6.02834 6.02834 6.02747 6.02931 6.02638C6.03059 6.0176 6.03275 6.00494 6.0342 5.98732C6.04072 5.90751 6.04201 5.79662 6.04201 5.59963V3.06642C6.04201 2.86959 6.04071 2.75948 6.0342 2.6797ZM13.3682 2.6797C13.3667 2.66217 13.3646 2.64947 13.3633 2.64064C13.362 2.63917 13.3608 2.638 13.3594 2.63673C13.3506 2.63546 13.3379 2.63329 13.3203 2.63185C13.2406 2.62534 13.1304 2.62502 12.9336 2.62502H10.4004C10.2034 2.62502 10.0925 2.62533 10.0127 2.63185C9.99523 2.63328 9.98244 2.63449 9.97365 2.63576C9.97221 2.63698 9.97101 2.63825 9.96974 2.63966C9.96844 2.64852 9.96634 2.66154 9.96486 2.6797C9.95834 2.75948 9.95802 2.86961 9.95802 3.06642V5.59963C9.95802 5.79662 9.95834 5.90751 9.96486 5.98732C9.96625 6.00427 9.96849 6.01666 9.96974 6.02541C9.971 6.02691 9.97221 6.02801 9.97365 6.02931C9.98244 6.03059 9.9951 6.03275 10.0127 6.0342C10.0925 6.04072 10.2034 6.04201 10.4004 6.04201H12.9336C13.1304 6.04201 13.2406 6.04071 13.3203 6.0342C13.338 6.03275 13.3506 6.02962 13.3594 6.02834C13.3607 6.02717 13.3622 6.02673 13.3633 6.02541C13.3645 6.01666 13.3668 6.00428 13.3682 5.98732C13.3747 5.90751 13.375 5.79662 13.375 5.59963V3.06642C13.375 2.8696 13.3747 2.75948 13.3682 2.6797ZM7.29201 12.9326C7.29201 13.109 7.29193 13.2794 7.28029 13.4219C7.26806 13.5715 7.23984 13.7451 7.15138 13.919C7.02758 14.162 6.82957 14.3596 6.58693 14.4834C6.41294 14.572 6.23862 14.6011 6.08888 14.6133C5.94636 14.6249 5.77599 14.625 5.59963 14.625H3.06642C2.89023 14.625 2.72055 14.6249 2.57814 14.6133C2.42832 14.6011 2.2542 14.5721 2.08009 14.4834C1.83733 14.3596 1.63949 14.1621 1.51564 13.919C1.42712 13.745 1.39799 13.5716 1.38576 13.4219C1.37411 13.2794 1.37502 13.109 1.37502 12.9326V10.3994C1.37502 10.2232 1.37414 10.0535 1.38576 9.91115C1.398 9.76133 1.42693 9.5872 1.51564 9.4131L1.56545 9.32423C1.6896 9.12181 1.86756 8.95697 2.08009 8.84865C2.25419 8.75993 2.42832 8.73101 2.57814 8.71877C2.72054 8.70715 2.89025 8.70802 3.06642 8.70802H5.59963C5.776 8.70802 5.94636 8.70712 6.08888 8.71877C6.23856 8.731 6.41203 8.76013 6.58595 8.84865C6.82872 8.97245 7.02753 9.17 7.15138 9.4131C7.24007 9.58718 7.26805 9.76135 7.28029 9.91115C7.29191 10.0536 7.29201 10.2232 7.29201 10.3994V12.9326ZM14.625 12.9326C14.625 13.109 14.6259 13.2794 14.6143 13.4219C14.602 13.5717 14.5731 13.7459 14.4844 13.9199C14.3606 14.1628 14.1628 14.3596 13.9199 14.4834C13.7458 14.5721 13.5717 14.6011 13.4219 14.6133C13.2795 14.6249 13.1098 14.625 12.9336 14.625H10.4004C10.224 14.625 10.0537 14.6249 9.91115 14.6133C9.76141 14.601 9.58805 14.5721 9.41408 14.4834C9.1712 14.3597 8.97349 14.1628 8.84963 13.9199C8.76093 13.7459 8.73199 13.5717 8.71974 13.4219C8.7081 13.2794 8.709 13.109 8.709 12.9326V10.3994C8.709 10.2232 8.70812 10.0536 8.71974 9.91115C8.73198 9.76132 8.76091 9.5872 8.84963 9.4131L8.89943 9.32423C9.02353 9.12198 9.20147 8.95699 9.41408 8.84865L9.54396 8.79298C9.6732 8.74695 9.79884 8.72795 9.91115 8.71877C10.0537 8.70712 10.224 8.70802 10.4004 8.70802H12.9336C13.1098 8.70802 13.2795 8.70716 13.4219 8.71877C13.5717 8.73101 13.7459 8.75996 13.9199 8.84865C14.163 8.97248 14.3605 9.1701 14.4844 9.4131C14.5731 9.5872 14.602 9.76132 14.6143 9.91115C14.6259 10.0535 14.625 10.2232 14.625 10.3994V12.9326ZM7.29201 5.59963C7.29201 5.776 7.29193 5.94636 7.28029 6.08888C7.26806 6.23851 7.23984 6.4121 7.15138 6.58595C7.02754 6.82898 6.82898 7.02657 6.58595 7.15041C6.4121 7.23886 6.23851 7.26806 6.08888 7.28029C5.94636 7.29193 5.776 7.29201 5.59963 7.29201H3.06642C2.89023 7.29201 2.72055 7.29191 2.57814 7.28029C2.42834 7.26805 2.25418 7.24007 2.08009 7.15138C1.83722 7.02753 1.63942 6.82887 1.51564 6.58595C1.42712 6.41203 1.39799 6.23856 1.38576 6.08888C1.37411 5.94636 1.37502 5.776 1.37502 5.59963V3.06642C1.37502 2.89025 1.37414 2.72054 1.38576 2.57814C1.398 2.42832 1.42694 2.25419 1.51564 2.08009L1.56545 1.99123C1.68954 1.78891 1.86746 1.62401 2.08009 1.51564L2.20998 1.45998C2.33946 1.4138 2.46565 1.39495 2.57814 1.38576C2.72054 1.37414 2.89025 1.37502 3.06642 1.37502H5.59963C5.776 1.37502 5.94636 1.37411 6.08888 1.38576C6.20119 1.39494 6.32682 1.41396 6.45607 1.45998L6.58595 1.51564L6.6758 1.56545C6.87792 1.68948 7.04208 1.86766 7.15041 2.08009C7.23909 2.25418 7.26805 2.42834 7.28029 2.57814C7.29191 2.72055 7.29201 2.89023 7.29201 3.06642V5.59963ZM14.625 5.59963C14.625 5.77599 14.6249 5.94636 14.6133 6.08888C14.6011 6.23853 14.5729 6.41207 14.4844 6.58595C14.3606 6.82872 14.163 7.02753 13.9199 7.15138C13.7458 7.24009 13.5717 7.26805 13.4219 7.28029C13.2795 7.29191 13.1098 7.29201 12.9336 7.29201H10.4004C10.224 7.29201 10.0537 7.29193 9.91115 7.28029C9.76134 7.26805 9.58718 7.24009 9.4131 7.15138C9.17005 7.02751 8.97242 6.82968 8.84865 6.58693C8.76018 6.41306 8.73198 6.23852 8.71974 6.08888C8.7081 5.94636 8.70802 5.776 8.70802 5.59963V3.06642C8.70802 2.89023 8.70812 2.72056 8.71974 2.57814C8.73198 2.42833 8.75995 2.25418 8.84865 2.08009C8.97239 1.83731 9.17005 1.63955 9.4131 1.51564L9.54396 1.45998C9.67321 1.41398 9.79885 1.39493 9.91115 1.38576C10.0537 1.37412 10.224 1.37502 10.4004 1.37502H12.9336C13.1098 1.37502 13.2795 1.37414 13.4219 1.38576C13.5341 1.39493 13.6599 1.41401 13.7891 1.45998L13.9199 1.51564L14.0088 1.56545C14.2112 1.6896 14.3761 1.86758 14.4844 2.08009C14.5731 2.2542 14.6011 2.42832 14.6133 2.57814C14.6249 2.72056 14.625 2.89022 14.625 3.06642V5.59963Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/layouts/index.ts b/packages/propel/src/icons/layouts/index.ts
deleted file mode 100644
index 4bf2f7473fc..00000000000
--- a/packages/propel/src/icons/layouts/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./calendar-icon";
-export * from "./card-icon";
-export * from "./timeline-icon";
-export * from "./grid-icon";
-export * from "./board-icon";
-export * from "./list-icon";
-export * from "./sheet-icon";
diff --git a/packages/propel/src/icons/layouts/list-icon.tsx b/packages/propel/src/icons/layouts/list-icon.tsx
deleted file mode 100644
index 30c44676e94..00000000000
--- a/packages/propel/src/icons/layouts/list-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function ListLayoutIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M14 11.375C14.3452 11.375 14.625 11.6548 14.625 12C14.625 12.3452 14.3452 12.625 14 12.625H2C1.65482 12.625 1.375 12.3452 1.375 12C1.375 11.6548 1.65482 11.375 2 11.375H14ZM14 7.375C14.3452 7.375 14.625 7.65482 14.625 8C14.625 8.34518 14.3452 8.625 14 8.625H2C1.65482 8.625 1.375 8.34518 1.375 8C1.375 7.65482 1.65482 7.375 2 7.375H14ZM14 3.375C14.3452 3.375 14.625 3.65482 14.625 4C14.625 4.34518 14.3452 4.625 14 4.625H2C1.65482 4.625 1.375 4.34518 1.375 4C1.375 3.65482 1.65482 3.375 2 3.375H14Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/layouts/sheet-icon.tsx b/packages/propel/src/icons/layouts/sheet-icon.tsx
deleted file mode 100644
index de1f194bdd8..00000000000
--- a/packages/propel/src/icons/layouts/sheet-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function SheetLayoutIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M13.375 6.625H6.625V13.375H10.7998C11.3701 13.375 11.7604 13.3743 12.0625 13.3496C12.357 13.3255 12.5129 13.2821 12.624 13.2256C12.8827 13.0938 13.0938 12.8827 13.2256 12.624C13.2821 12.5129 13.3255 12.357 13.3496 12.0625C13.3743 11.7604 13.375 11.3701 13.375 10.7998V6.625ZM2.625 10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67445 12.357 2.71788 12.5129 2.77441 12.624C2.90623 12.8827 3.11725 13.0938 3.37598 13.2256C3.48707 13.2821 3.64295 13.3255 3.9375 13.3496C4.23962 13.3743 4.62994 13.375 5.2002 13.375H5.375V6.625H2.625V10.7998ZM13.375 5.2002C13.375 4.62994 13.3743 4.23962 13.3496 3.9375C13.3255 3.64295 13.2821 3.48707 13.2256 3.37598C13.0938 3.11725 12.8827 2.90623 12.624 2.77441C12.5129 2.71788 12.357 2.67445 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62994 2.625 4.23962 2.62572 3.9375 2.65039C3.64296 2.67446 3.48707 2.71788 3.37598 2.77441C3.11725 2.90624 2.90624 3.11725 2.77441 3.37598C2.71788 3.48707 2.67446 3.64296 2.65039 3.9375C2.62572 4.23962 2.625 4.62994 2.625 5.2002V5.375H13.375V5.2002ZM14.625 10.7998C14.625 11.3493 14.6255 11.7993 14.5957 12.1641C14.5653 12.5361 14.5001 12.8748 14.3389 13.1914C14.0872 13.6854 13.6854 14.0872 13.1914 14.3389C12.8748 14.5001 12.5361 14.5653 12.1641 14.5957C11.7993 14.6255 11.3493 14.625 10.7998 14.625H5.2002C4.65067 14.625 4.20072 14.6255 3.83594 14.5957C3.46388 14.5653 3.12523 14.5002 2.80859 14.3389C2.31467 14.0872 1.91281 13.6854 1.66113 13.1914C1.49987 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65067 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49985 3.12523 1.66113 2.80859C1.9128 2.31466 2.31466 1.9128 2.80859 1.66113C3.12523 1.49985 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65067 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49987 13.1914 1.66113C13.6854 1.91281 14.0872 2.31467 14.3389 2.80859C14.5002 3.12523 14.5653 3.46388 14.5957 3.83594C14.6255 4.20072 14.625 4.65067 14.625 5.2002V10.7998Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/layouts/timeline-icon.tsx b/packages/propel/src/icons/layouts/timeline-icon.tsx
deleted file mode 100644
index 5a3e7443fa6..00000000000
--- a/packages/propel/src/icons/layouts/timeline-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function TimelineLayoutIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M13.5415 11.333C13.5415 11.0142 13.5416 10.8062 13.5308 10.6465C13.5203 10.4927 13.5017 10.4293 13.4878 10.3955C13.4159 10.2221 13.2784 10.0837 13.105 10.0117C13.0713 9.99777 13.008 9.98025 12.854 9.96973C12.6943 9.95884 12.4857 9.95802 12.1665 9.95802H6.8335C6.51462 9.95802 6.30666 9.95887 6.14698 9.96973C5.99329 9.98022 5.92974 9.9978 5.896 10.0117C5.72244 10.0836 5.58411 10.222 5.51222 10.3955C5.49828 10.4293 5.48071 10.4928 5.47022 10.6465C5.45935 10.8062 5.4585 11.0141 5.4585 11.333C5.4585 11.6519 5.45935 11.8599 5.47022 12.0195C5.48071 12.1732 5.49828 12.2368 5.51222 12.2705C5.58411 12.4441 5.72244 12.5824 5.896 12.6543C5.92974 12.6682 5.99329 12.6858 6.14698 12.6963C6.30666 12.7072 6.51462 12.708 6.8335 12.708H12.1665C12.4857 12.708 12.6943 12.7072 12.854 12.6963C13.008 12.6858 13.0713 12.6683 13.105 12.6543C13.2784 12.5824 13.4159 12.444 13.4878 12.2705C13.5017 12.2368 13.5203 12.1733 13.5308 12.0195C13.5416 11.8599 13.5415 11.6519 13.5415 11.333ZM10.5415 4.667C10.5415 4.34815 10.5416 4.14015 10.5308 3.98048C10.5203 3.82667 10.5017 3.76324 10.4878 3.7295C10.4159 3.55605 10.2784 3.41765 10.105 3.34571C10.0713 3.33176 10.008 3.31424 9.85401 3.30372C9.69428 3.29282 9.4857 3.292 9.16651 3.292H3.8335C3.51462 3.292 3.30666 3.29285 3.14698 3.30372C2.99329 3.31421 2.92974 3.33178 2.896 3.34571C2.72244 3.4176 2.58411 3.55594 2.51222 3.7295C2.49828 3.76324 2.48071 3.82678 2.47022 3.98048C2.45935 4.14015 2.4585 4.34811 2.4585 4.667C2.4585 4.98589 2.45935 5.19385 2.47022 5.35352C2.48071 5.50722 2.49828 5.57076 2.51222 5.6045C2.58411 5.77806 2.72244 5.9164 2.896 5.98829C2.92974 6.00222 2.99329 6.0198 3.14698 6.03028C3.30666 6.04115 3.51462 6.042 3.8335 6.042H9.16651C9.4857 6.042 9.69428 6.04118 9.85401 6.03028C10.008 6.01976 10.0713 6.00224 10.105 5.98829C10.2784 5.91635 10.4159 5.77795 10.4878 5.6045C10.5017 5.57076 10.5203 5.50733 10.5308 5.35352C10.5416 5.19385 10.5415 4.98585 10.5415 4.667ZM14.7915 11.333C14.7915 11.6351 14.7923 11.8933 14.7778 12.1055C14.763 12.3231 14.7305 12.5378 14.6431 12.749C14.4443 13.2289 14.0623 13.6098 13.5825 13.8086C13.3712 13.8961 13.1567 13.9295 12.939 13.9443C12.7268 13.9588 12.4686 13.958 12.1665 13.958H6.8335C6.53143 13.958 6.27319 13.9588 6.06104 13.9443C5.8434 13.9295 5.62874 13.8961 5.41749 13.8086C4.93769 13.6098 4.55668 13.2288 4.35792 12.749C4.27042 12.5378 4.23704 12.3231 4.22218 12.1055C4.2077 11.8933 4.2085 11.6351 4.2085 11.333C4.2085 11.0309 4.2077 10.7727 4.22218 10.5606C4.23704 10.3429 4.27042 10.1283 4.35792 9.917C4.55668 9.4372 4.93769 9.05619 5.41749 8.85743C5.62874 8.76993 5.8434 8.73656 6.06104 8.72169C6.27319 8.70721 6.53143 8.70802 6.8335 8.70802H12.1665C12.4686 8.70802 12.7268 8.70721 12.939 8.72169C13.1567 8.73654 13.3712 8.76996 13.5825 8.85743C14.0623 9.05618 14.4443 9.43715 14.6431 9.917C14.7305 10.1282 14.763 10.343 14.7778 10.5606C14.7923 10.7727 14.7915 11.0309 14.7915 11.333ZM11.7915 4.667C11.7915 4.96908 11.7923 5.22732 11.7778 5.43946C11.763 5.65705 11.7305 5.87183 11.6431 6.08302C11.4443 6.56287 11.0623 6.94384 10.5825 7.14259C10.3712 7.23005 10.1567 7.26347 9.93897 7.27833C9.72682 7.2928 9.46859 7.292 9.16651 7.292H3.8335C3.53143 7.292 3.27319 7.2928 3.06104 7.27833C2.8434 7.26346 2.62874 7.23009 2.41749 7.14259C1.93769 6.94383 1.55668 6.56281 1.35792 6.08302C1.27042 5.87177 1.23704 5.65711 1.22218 5.43946C1.2077 5.22731 1.2085 4.96908 1.2085 4.667C1.2085 4.36492 1.2077 4.10669 1.22218 3.89454C1.23704 3.67689 1.27042 3.46224 1.35792 3.25098C1.55668 2.77119 1.93769 2.39017 2.41749 2.19141C2.62874 2.10391 2.8434 2.07054 3.06104 2.05567C3.27319 2.0412 3.53143 2.042 3.8335 2.042H9.16651C9.46859 2.042 9.72682 2.0412 9.93897 2.05567C10.1567 2.07053 10.3712 2.10395 10.5825 2.19141C11.0623 2.39017 11.4443 2.77113 11.6431 3.25098C11.7305 3.46218 11.763 3.67695 11.7778 3.89454C11.7923 4.10668 11.7915 4.36492 11.7915 4.667Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/lead-icon.tsx b/packages/propel/src/icons/lead-icon.tsx
deleted file mode 100644
index b7251d731d3..00000000000
--- a/packages/propel/src/icons/lead-icon.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function LeadIcon({ className = "text-current", ...rest }: ISvgIcons) {
-  return (
-    <svg className={className} viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
-      <path
-        d="M0.571533 9C0.571533 4.02944 4.60097 0 9.57153 0C14.5421 0 18.5715 4.02944 18.5715 9C18.5715 13.9706 14.5421 18 9.57153 18C4.60097 18 0.571533 13.9706 0.571533 9Z"
-        fill="#3372FF"
-      />
-      <g clipPath="url(#clip0_8992_2377)">
-        <circle cx="9.57153" cy="6.5" r="2.5" fill="#F5F5FF" />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M8.94653 9.625C6.53029 9.625 4.57153 11.5838 4.57153 14H9.57153H14.5715C14.5715 11.5838 12.6128 9.625 10.1965 9.625H9.82153L10.8215 13.0278L9.57153 14L8.32153 13.0278L9.32153 9.625H8.94653Z"
-          fill="#F5F5FF"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_8992_2377">
-          <rect width="10" height="10" fill="white" transform="translate(4.57153 4)" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/misc/check-circle-filled-icon.tsx b/packages/propel/src/icons/misc/check-circle-filled-icon.tsx
deleted file mode 100644
index c0227cbc38a..00000000000
--- a/packages/propel/src/icons/misc/check-circle-filled-icon.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export const CheckCircleFilledIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
-  const clipPathId = React.useId();
-
-  return (
-    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M7.99984 0.666992C3.94975 0.666992 0.666504 3.95024 0.666504 8.00033C0.666504 12.0504 3.94975 15.3337 7.99984 15.3337C12.0499 15.3337 15.3332 12.0504 15.3332 8.00033C15.3332 3.95024 12.0499 0.666992 7.99984 0.666992ZM11.4712 6.47173C11.7316 6.21138 11.7316 5.78927 11.4712 5.52892C11.2109 5.26857 10.7888 5.26857 10.5284 5.52892L6.99984 9.05752L5.47124 7.52892C5.21089 7.26857 4.78878 7.26857 4.52843 7.52892C4.26808 7.78927 4.26808 8.21138 4.52843 8.47173L6.52843 10.4717C6.78878 10.7321 7.21089 10.7321 7.47124 10.4717L11.4712 6.47173Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-};
diff --git a/packages/propel/src/icons/misc/close-circle-filled-icon.tsx b/packages/propel/src/icons/misc/close-circle-filled-icon.tsx
deleted file mode 100644
index 2b927d62ced..00000000000
--- a/packages/propel/src/icons/misc/close-circle-filled-icon.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export const CloseCircleFilledIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
-  const clipPathId = React.useId();
-
-  return (
-    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M7.99984 0.666992C3.94975 0.666992 0.666504 3.95024 0.666504 8.00033C0.666504 12.0504 3.94975 15.3337 7.99984 15.3337C12.0499 15.3337 15.3332 12.0504 15.3332 8.00033C15.3332 3.95024 12.0499 0.666992 7.99984 0.666992ZM10.4712 5.52892C10.7316 5.78927 10.7316 6.21138 10.4712 6.47173L8.94265 8.00033L10.4712 9.52892C10.7316 9.78927 10.7316 10.2114 10.4712 10.4717C10.2109 10.7321 9.78878 10.7321 9.52843 10.4717L7.99984 8.94313L6.47124 10.4717C6.21089 10.7321 5.78878 10.7321 5.52843 10.4717C5.26808 10.2114 5.26808 9.78927 5.52843 9.52892L7.05703 8.00033L5.52843 6.47173C5.26808 6.21138 5.26808 5.78927 5.52843 5.52892C5.78878 5.26857 6.21089 5.26857 6.47124 5.52892L7.99984 7.05752L9.52843 5.52892C9.78878 5.26857 10.2109 5.26857 10.4712 5.52892Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-};
diff --git a/packages/propel/src/icons/misc/index.ts b/packages/propel/src/icons/misc/index.ts
deleted file mode 100644
index 34716ecbe6e..00000000000
--- a/packages/propel/src/icons/misc/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./check-circle-filled-icon";
-export * from "./close-circle-filled-icon";
-export * from "./info-icon";
diff --git a/packages/propel/src/icons/misc/info-icon.tsx b/packages/propel/src/icons/misc/info-icon.tsx
deleted file mode 100644
index 2e007d3fbdf..00000000000
--- a/packages/propel/src/icons/misc/info-icon.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export const InfoIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
-  const clipPathId = React.useId();
-
-  return (
-    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
-      <path
-        d="M14.041 8C14.041 4.66339 11.3365 1.95818 8 1.95801C4.66328 1.95801 1.95801 4.66328 1.95801 8C1.95818 11.3365 4.66339 14.041 8 14.041C11.3364 14.0408 14.0408 11.3364 14.041 8ZM7.375 10.666V8C7.375 7.65482 7.65482 7.375 8 7.375C8.34503 7.37518 8.625 7.65493 8.625 8V10.666C8.625 11.0111 8.34503 11.2908 8 11.291C7.65482 11.291 7.375 11.0112 7.375 10.666ZM8.00586 4.70801C8.35104 4.70801 8.63086 4.98783 8.63086 5.33301C8.63086 5.67819 8.35104 5.95801 8.00586 5.95801H8C7.65482 5.95801 7.375 5.67819 7.375 5.33301C7.375 4.98783 7.65482 4.70801 8 4.70801H8.00586ZM15.291 8C15.2908 12.0268 12.0268 15.2908 8 15.291C3.97303 15.291 0.708184 12.0269 0.708008 8C0.708008 3.97292 3.97292 0.708008 8 0.708008C12.0269 0.708184 15.291 3.97303 15.291 8Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-};
diff --git a/packages/propel/src/icons/module/index.ts b/packages/propel/src/icons/module/index.ts
deleted file mode 100644
index f4d38c43770..00000000000
--- a/packages/propel/src/icons/module/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./backlog";
-export * from "./cancelled";
-export * from "./completed";
-export * from "./in-progress";
-export * from "./module-status-icon";
-export * from "./paused";
-export * from "./planned";
diff --git a/packages/propel/src/icons/multiple-sticky.tsx b/packages/propel/src/icons/multiple-sticky.tsx
deleted file mode 100644
index f61bdee7af9..00000000000
--- a/packages/propel/src/icons/multiple-sticky.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function RecentStickyIcon({ className = "text-current", ...rest }: ISvgIcons) {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-      {...rest}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M2.23602 12.7638C2.60067 13.1285 3.09525 13.3333 3.61095 13.3333H9.72206C9.94307 13.3333 10.155 13.2455 10.3113 13.0892L13.0891 10.3115C13.2454 10.1552 13.3332 9.94323 13.3332 9.72221V3.6111C13.3332 3.0954 13.1283 2.60083 12.7637 2.23617C12.399 1.87152 11.9044 1.66666 11.3887 1.66666H3.61095C3.09525 1.66666 2.60067 1.87152 2.23602 2.23617C1.87136 2.60083 1.6665 3.0954 1.6665 3.6111V11.3889C1.6665 11.9046 1.87136 12.3992 2.23602 12.7638ZM11.0435 9.99999L9.99984 11.0437V10.2778C9.99984 10.2041 10.0291 10.1334 10.0812 10.0813C10.1333 10.0293 10.2039 9.99999 10.2776 9.99999H11.0435ZM8.33317 11.6667V10.2778C8.33317 9.76207 8.53803 9.26749 8.90269 8.90284C9.26734 8.53819 9.76192 8.33332 10.2776 8.33332H11.6665V3.6111C11.6665 3.53743 11.6372 3.46678 11.5851 3.41468C11.5331 3.36259 11.4624 3.33332 11.3887 3.33332H3.61095C3.53728 3.33332 3.46662 3.36259 3.41453 3.41468C3.36244 3.46678 3.33317 3.53743 3.33317 3.6111V11.3889C3.33317 11.4626 3.36244 11.5332 3.41453 11.5853C3.46662 11.6374 3.53728 11.6667 3.61095 11.6667H8.33317Z"
-        fill="currentColor"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M6.36088 16.832C6.65667 17.2545 7.10816 17.5421 7.61603 17.6317L13.6343 18.6928C13.852 18.7312 14.0759 18.6816 14.257 18.5548L17.4749 16.3016C17.656 16.1748 17.7792 15.9813 17.8176 15.7636L18.8788 9.74538C18.9683 9.23752 18.8525 8.71488 18.5567 8.29244C18.2609 7.87001 17.8094 7.58238 17.3015 7.49283L15.1445 7.11249C14.6913 7.03257 14.2591 7.33521 14.1792 7.78846C14.0992 8.2417 14.4019 8.67392 14.8551 8.75384L17.0121 9.13417C17.0847 9.14697 17.1492 9.18806 17.1914 9.2484C17.2337 9.30875 17.2502 9.38341 17.2374 9.45597L16.4174 14.1064L15.0497 13.8653C14.5418 13.7757 14.0192 13.8916 13.5967 14.1874C13.1743 14.4832 12.8867 14.9347 12.7971 15.4425L12.5559 16.8103L7.90544 15.9903C7.83289 15.9775 7.76839 15.9364 7.72613 15.8761C7.68388 15.8157 7.66733 15.7411 7.68012 15.6685L7.77252 15.1445C7.85244 14.6913 7.5498 14.259 7.09655 14.1791C6.64331 14.0992 6.21109 14.4018 6.13117 14.8551L6.03877 15.3791C5.94922 15.887 6.06509 16.4096 6.36088 16.832ZM14.3054 16.4862L14.4384 15.7319C14.4512 15.6594 14.4923 15.5949 14.5527 15.5526C14.613 15.5104 14.6877 15.4938 14.7602 15.5066L15.5145 15.6396L14.3054 16.4862Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/off-track-icon.tsx b/packages/propel/src/icons/off-track-icon.tsx
deleted file mode 100644
index c26c5ebf30b..00000000000
--- a/packages/propel/src/icons/off-track-icon.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function OffTrackIcon({ width = "16", height = "16" }: ISvgIcons) {
-  return (
-    <svg width={width} height={height} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g clipPath="url(#clip0_365_7595)">
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M2.03658 7.33335H2.66663C3.03482 7.33335 3.33329 7.63183 3.33329 8.00002C3.33329 8.36821 3.03482 8.66669 2.66663 8.66669H2.03658C2.36821 11.6667 4.91159 14 7.99996 14C11.0883 14 13.6317 11.6667 13.9633 8.66669H13.3333C12.9651 8.66669 12.6666 8.36821 12.6666 8.00002C12.6666 7.63183 12.9651 7.33335 13.3333 7.33335H13.9633C13.6317 4.33339 11.0883 2.00002 7.99996 2.00002C4.91159 2.00002 2.36821 4.33339 2.03658 7.33335ZM0.666626 8.00002C0.666626 3.94993 3.94987 0.666687 7.99996 0.666687C12.05 0.666687 15.3333 3.94993 15.3333 8.00002C15.3333 12.0501 12.05 15.3334 7.99996 15.3334C3.94987 15.3334 0.666626 12.0501 0.666626 8.00002ZM6.66663 4.66669C7.03482 4.66669 7.33329 4.96516 7.33329 5.33335V8.00002C7.33329 8.36821 7.03482 8.66669 6.66663 8.66669C6.29844 8.66669 5.99996 8.36821 5.99996 8.00002V5.33335C5.99996 4.96516 6.29844 4.66669 6.66663 4.66669ZM9.33329 4.66669C9.70148 4.66669 9.99996 4.96516 9.99996 5.33335V8.00002C9.99996 8.36821 9.70148 8.66669 9.33329 8.66669C8.9651 8.66669 8.66663 8.36821 8.66663 8.00002V5.33335C8.66663 4.96516 8.9651 4.66669 9.33329 4.66669ZM5.99996 10.6667C5.99996 10.2985 6.29844 10 6.66663 10H6.67329C7.04148 10 7.33996 10.2985 7.33996 10.6667C7.33996 11.0349 7.04148 11.3334 6.67329 11.3334H6.66663C6.29844 11.3334 5.99996 11.0349 5.99996 10.6667ZM8.66663 10.6667C8.66663 10.2985 8.9651 10 9.33329 10H9.33996C9.70815 10 10.0066 10.2985 10.0066 10.6667C10.0066 11.0349 9.70815 11.3334 9.33996 11.3334H9.33329C8.9651 11.3334 8.66663 11.0349 8.66663 10.6667Z"
-          fill="#CC0000"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_365_7595">
-          <rect width="16" height="16" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/on-track-icon.tsx b/packages/propel/src/icons/on-track-icon.tsx
deleted file mode 100644
index b735a993dc2..00000000000
--- a/packages/propel/src/icons/on-track-icon.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function OnTrackIcon({ width = "16", height = "16" }: ISvgIcons) {
-  return (
-    <svg width={width} height={height} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g clipPath="url(#clip0_365_7535)">
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M11.0001 2.80075C9.81139 2.11486 8.42345 1.85723 7.06776 2.07082C5.71206 2.28441 4.47057 2.9563 3.55031 3.97445C2.63004 4.9926 2.08664 6.29547 2.01071 7.66578C1.93479 9.03609 2.33093 10.391 3.13308 11.5046C3.93523 12.6182 5.0949 13.4231 6.4187 13.7852C7.74249 14.1472 9.1504 14.0445 10.4076 13.4941C11.6649 12.9438 12.6954 11.979 13.3274 10.7608C13.9594 9.5426 14.1547 8.14453 13.8807 6.79975C13.8072 6.43897 14.0401 6.08691 14.4009 6.0134C14.7616 5.93988 15.1137 6.17276 15.1872 6.53353C15.5221 8.17715 15.2834 9.88591 14.511 11.3748C13.7385 12.8638 12.4789 14.0429 10.9423 14.7156C9.4057 15.3882 7.68493 15.5138 6.06696 15.0713C4.44898 14.6288 3.03161 13.645 2.05121 12.2839C1.0708 10.9229 0.586626 9.26684 0.679423 7.59202C0.772221 5.91719 1.43638 4.3248 2.56115 3.08039C3.68591 1.83598 5.2033 1.01478 6.86025 0.753732C8.51721 0.492682 10.2136 0.807564 11.6665 1.64587C11.9854 1.82987 12.0947 2.23757 11.9107 2.55648C11.7267 2.8754 11.319 2.98476 11.0001 2.80075ZM15.138 2.19524C15.3984 2.45559 15.3984 2.8777 15.138 3.13805L8.47136 9.80471C8.21101 10.0651 7.7889 10.0651 7.52855 9.80471L5.52856 7.80471C5.26821 7.54436 5.26821 7.12225 5.52856 6.8619C5.7889 6.60155 6.21101 6.60155 6.47136 6.8619L7.99996 8.3905L14.1952 2.19524C14.4556 1.93489 14.8777 1.93489 15.138 2.19524Z"
-          fill="#1FAD40"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M7.99996 15.3333C7.63177 15.3333 7.33329 15.0348x33329 14.6666V13.3333C7.33329 12.9651 7.63177 12.6666 7.99996 12.6666C8.36815 12.6666 8.66663 12.9651 8.66663 13.3333V14.6666C8.66663 15.0348 8.36815 15.3333 7.99996 15.3333Z"
-          fill="#1FAD40"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M7.99996 3.33331C7.63177 3.33331 7.33329 3.03483 7.33329 2.66664V1.33331C7.33329 0.965117 7.63177 0.66664 7.99996 0.66664C8.36815 0.66664 8.66663 0.965117 8.66663 1.33331V2.66664C8.66663 3.03483 8.36815 3.33331 7.99996 3.33331Z"
-          fill="#1FAD40"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M3.33329 7.99997C3.33329 8.36816 3.03482 8.66664 2.66663 8.66664H1.33329C0.965103 8.66664 0.666626 8.36816 0.666626 7.99997C0.666626 7.63178 0.965103 7.33331 1.33329 7.33331H2.66663C3.03482 7.33331 3.33329 7.63178 3.33329 7.99997Z"
-          fill="#1FAD40"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_365_7535">
-          <path
-            d="M0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2Z"
-            fill="white"
-          />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/overview-icon.tsx b/packages/propel/src/icons/overview-icon.tsx
deleted file mode 100644
index 513c1f5dd65..00000000000
--- a/packages/propel/src/icons/overview-icon.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function OverviewIcon({ className = "text-current", ...rest }: ISvgIcons) {
-  return (
-    <svg viewBox="0 0 12 12" className={className} fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M0.5 1C0.5 0.867392 0.552678 0.740215 0.646447 0.646447C0.740215 0.552678 0.867392 0.5 1 0.5H1.5C7.02267 0.5 11.5 4.97733 11.5 10.5V11C11.5 11.1326 11.4473 11.2598 11.3536 11.3536C11.2598 11.4473 11.1326 11.5 11 11.5H10.5C10.3674 11.5 10.2402 11.4473 10.1464 11.3536C10.0527 11.2598 10 11.1326 10 11V10.5C10 5.80533 6.19467 2 1.5 2H1C0.867392 2 0.740215 1.94732 0.646447 1.85355C0.552678 1.75979 0.5 1.63261 0.5 1.5V1ZM0.5 5.5C0.5 5.36739 0.552678 5.24022 0.646447 5.14645C0.740215 5.05268 0.867392 5 1 5H1.5C2.22227 5 2.93747 5.14226 3.60476 5.41866C4.27205 5.69506 4.87837 6.10019 5.38909 6.61091C5.89981 7.12164 6.30494 7.72795 6.58134 8.39524C6.85774 9.06253 7 9.77773 7 10.5V11C7 11.1326 6.94732 11.2598 6.85355 11.3536C6.75978 11.4473 6.63261 11.5 6.5 11.5H6C5.86739 11.5 5.74022 11.4473 5.64645 11.3536C5.55268 11.2598 5.5 11.1326 5.5 11V10.5C5.5 9.43913 5.07857 8.42172 4.32843 7.67157C3.57828 6.92143 2.56087 6.5 1.5 6.5H1C0.867392 6.5 0.740215 6.44732 0.646447 6.35355C0.552678 6.25978 0.5 6.13261 0.5 6V5.5ZM0.5 10.5C0.5 10.2348 0.605357 9.98043 0.792893 9.79289C0.98043 9.60536 1.23478 9.5 1.5 9.5C1.76522 9.5 2.01957 9.60536 2.20711 9.79289C2.39464 9.98043 2.5 10.2348 2.5 10.5C2.5 10.7652 2.39464 11.0196 2.20711 11.2071C2.01957 11.3946 1.76522 11.5 1.5 11.5C1.23478 11.5 0.98043 11.3946 0.792893 11.2071C0.605357 11.0196 0.5 10.7652 0.5 10.5Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/pending-icon.tsx b/packages/propel/src/icons/pending-icon.tsx
deleted file mode 100644
index 6b0b9cb966f..00000000000
--- a/packages/propel/src/icons/pending-icon.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function PendingState({ width = "10", height = "11", className, color = "#455068" }: ISvgIcons) {
-  return (
-    <svg
-      width={width}
-      height={height}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12Z"
-        fill={color}
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M12 5C12.5523 5 13 5.44772 13 6V11.382L16.4472 13.1056C16.9412 13.3526 17.1414 13.9532 16.8944 14.4472C16.6474 14.9412 16.0468 15.1414 15.5528 14.8944L11.5528 12.8944C11.214 12.725 11 12.3788 11 12V6C11 5.44772 11.4477 5 12 5Z"
-        fill={color}
-      />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/photo-filter-icon.tsx b/packages/propel/src/icons/photo-filter-icon.tsx
deleted file mode 100644
index 2043cd34ff5..00000000000
--- a/packages/propel/src/icons/photo-filter-icon.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function PhotoFilterIcon({ className = "text-current", ...rest }: ISvgIcons) {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      className={`${className} stroke-2`}
-      stroke="currentColor"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...rest}
-    >
-      <path
-        d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H12"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M19 3L18.5778 4.28889C18.5562 4.35583 18.519 4.41668 18.4692 4.46643C18.4195 4.51619 18.3587 4.55344 18.2918 4.57511L17 5L18.2889 5.42222C18.3558 5.44384 18.4167 5.48104 18.4664 5.53076C18.5162 5.58048 18.5534 5.6413 18.5751 5.70822L19 7L19.4222 5.71111C19.4438 5.64417 19.481 5.58332 19.5308 5.53357C19.5805 5.48381 19.6413 5.44656 19.7082 5.42489L21 5L19.7111 4.57778C19.6442 4.55616 19.5833 4.51896 19.5336 4.46924C19.4838 4.41952 19.4466 4.3587 19.4249 4.29178L19 3Z"
-        fill="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M12 9L11.3667 10.9333C11.3342 11.0337 11.2784 11.125 11.2039 11.1997C11.1293 11.2743 11.038 11.3302 10.9377 11.3627L9 12L10.9333 12.6333C11.0337 12.6658 11.125 12.7216 11.1997 12.7961C11.2743 12.8707 11.3302 12.962 11.3627 13.0623L12 15L12.6333 13.0667C12.6658 12.9663 12.7216 12.875 12.7961 12.8003C12.8707 12.7257 12.962 12.6698 13.0623 12.6373L15 12L13.0667 11.3667C12.9663 11.3342 12.875 11.2784 12.8003 11.2039C12.7257 11.1293 12.6698 11.038 12.6373 10.9377L12 9Z"
-        fill="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/planned-icon.tsx b/packages/propel/src/icons/planned-icon.tsx
deleted file mode 100644
index 8d579198950..00000000000
--- a/packages/propel/src/icons/planned-icon.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function PlannedState({ width = "10", height = "11", className }: ISvgIcons) {
-  return (
-    <svg
-      width={width}
-      height={height}
-      viewBox="0 0 12 13"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <g clipPath="url(#clip0_3180_28635)">
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M7.11853 4.7C7.20073 4.88749 7.38342 5.01866 7.59656 5.02037C7.88848 5.02271 8.12698 4.7813 8.12925 4.48116L8.13344 3.92962C8.1348 3.74982 8.04958 3.58096 7.90581 3.47859C7.76203 3.37623 7.57832 3.3536 7.41509 3.41815L3.97959 4.77682C3.77547 4.85755 3.64077 5.05919 3.64077 5.28406L3.64077 9.0883C3.64077 9.27834 3.73732 9.45458 3.8954 9.55308C4.05347 9.65157 4.25011 9.65802 4.41396 9.57008L4.90523 9.30643C5.16402 9.16754 5.26431 8.83925 5.12922 8.57317C5.04115 8.39971 4.8748 8.29551 4.69795 8.28247L4.69795 5.65729L7.11853 4.7Z"
-          fill="#455068"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M5.00428 3.06914C5.08648 3.25663 5.26916 3.3878 5.4823 3.38951C5.77422 3.39185 6.01272 3.15044 6.015 2.8503L6.01918 2.29876C6.02054 2.11896 5.93532 1.9501 5.79155 1.84774C5.64777 1.74537 5.46406 1.72274 5.30084 1.78729L1.86534 3.14597C1.66121 3.22669 1.52652 3.42834 1.52652 3.6532L1.52652 7.45745C1.52652 7.64749 1.62307 7.82372 1.78114 7.92222C1.93922 8.02071 2.13585 8.02716 2.29971 7.93922L2.79097 7.67557C3.04977 7.53668 3.15005 7.20839 3.01496 6.94231C2.92689 6.76885 2.76054 6.66465 2.5837 6.65161L2.5837 4.02643L5.00428 3.06914Z"
-          fill="#455068"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M10.473 9.34799C10.4728 9.57269 10.3382 9.77413 10.1342 9.85482L6.70129 11.2129C6.53874 11.2772 6.35582 11.255 6.21225 11.1536C6.06867 11.0523 5.98288 10.8847 5.98288 10.7056L5.98288 6.90139C5.98288 6.67653 6.11757 6.47489 6.3217 6.39416L9.7572 5.03548C9.91981 4.97118 10.1028 4.99338 10.2464 5.09484C10.3899 5.19629 10.4757 5.36397 10.4756 5.5431L10.473 9.34799ZM9.41784 6.33426L7.04006 7.27463L7.04006 9.91423L9.41605 8.97431L9.41784 6.33426Z"
-          fill="#455068"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_3180_28635">
-          <rect width="12" height="12" fill="white" transform="translate(0 0.5)" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/project/epic-icon.tsx b/packages/propel/src/icons/project/epic-icon.tsx
deleted file mode 100644
index 132d9732ff8..00000000000
--- a/packages/propel/src/icons/project/epic-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function EpicIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M6.47557 3.58443C6.25869 3.59252 6.06151 3.70781 5.95506 3.88843L1.45506 11.5276C1.34621 11.7124 1.34883 11.9386 1.46092 12.1216C1.57303 12.3046 1.77799 12.4172 1.99999 12.4172H14C14.2176 12.4172 14.4196 12.3092 14.5332 12.1319C14.6467 11.9548 14.6555 11.734 14.5566 11.5491L11.5566 5.9465C11.4711 5.7869 11.3144 5.67271 11.1308 5.63504C10.9474 5.59752 10.7559 5.64062 10.6094 5.75254L9.14159 6.87343L7.01952 3.84927C6.8987 3.67699 6.69254 3.57638 6.47557 3.58443ZM8.48045 8.07824C8.5777 8.21691 8.73158 8.31005 8.90428 8.33561C9.07718 8.36107 9.254 8.31687 9.39061 8.21252L10.793 7.14106L12.9785 11.2236H3.06932L6.54686 5.31985L8.48045 8.07824Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/project/index.ts b/packages/propel/src/icons/project/index.ts
deleted file mode 100644
index 37be25295c8..00000000000
--- a/packages/propel/src/icons/project/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./cycle-icon";
-export * from "./epic-icon";
-export * from "./intake-icon";
-export * from "./module-icon";
-export * from "./page-icon";
-export * from "./view-icon";
-export * from "./work-items-icon";
diff --git a/packages/propel/src/icons/project/intake-icon.tsx b/packages/propel/src/icons/project/intake-icon.tsx
deleted file mode 100644
index 96d33fb3c80..00000000000
--- a/packages/propel/src/icons/project/intake-icon.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function IntakeIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  const clipPathId = React.useId();
-
-  return (
-    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
-      <path
-        d="M7.37549 4.31474C7.37549 3.34976 7.35622 3.09637 7.12256 2.76591C7.07287 2.69574 6.92103 2.55664 6.69287 2.41826C6.46459 2.27986 6.2704 2.20923 6.18506 2.19755C5.92379 2.16215 5.79263 2.17621 5.6958 2.20146C5.57897 2.23193 5.46473 2.28854 5.21045 2.42119C3.2767 3.42993 1.9585 5.45229 1.9585 7.78154C1.95856 11.1182 4.66381 13.8235 8.00049 13.8235C11.337 13.8234 14.0414 11.1181 14.0415 7.78154C14.0415 5.54611 12.8284 3.59276 11.021 2.54716C10.7222 2.37432 10.6196 1.99243 10.7925 1.69365C10.9653 1.39492 11.3472 1.29338 11.646 1.46611C13.8238 2.72593 15.2915 5.0818 15.2915 7.78154C15.2914 11.8084 12.0273 15.0734 8.00049 15.0735C3.97345 15.0735 0.708561 11.8085 0.708496 7.78154C0.708496 4.96843 2.30195 2.52843 4.63232 1.31279C4.85634 1.19593 5.1006 1.06446 5.38037 0.991498C5.6802 0.913328 5.98443 0.908355 6.35303 0.958295C6.68627 1.00354 7.0524 1.17437 7.34033 1.34892C7.62835 1.52352 7.94882 1.76962 8.14307 2.04423C8.6434 2.75183 8.62549 3.42545 8.62549 4.31474V8.93876L10.2251 7.33915C10.4692 7.09538 10.8649 7.09527 11.1089 7.33915C11.3529 7.58314 11.3527 7.97884 11.1089 8.22294L8.44189 10.8899C8.32477 11.007 8.1661 11.0734 8.00049 11.0735C7.83473 11.0735 7.67532 11.0071 7.55811 10.8899L4.89111 8.22294C4.64748 7.97885 4.64724 7.58309 4.89111 7.33915C5.13519 7.09508 5.5318 7.09508 5.77588 7.33915L7.37549 8.93876V4.31474Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/project/module-icon.tsx b/packages/propel/src/icons/project/module-icon.tsx
deleted file mode 100644
index fae636290d5..00000000000
--- a/packages/propel/src/icons/project/module-icon.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function ModuleIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M13.375 5.2002C13.375 4.62994 13.3743 4.23962 13.3496 3.9375C13.3255 3.64296 13.2821 3.48707 13.2256 3.37598C13.0938 3.11725 12.8827 2.90623 12.624 2.77441C12.5129 2.71788 12.357 2.67445 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62994 2.625 4.23962 2.62572 3.9375 2.65039C3.64296 2.67446 3.48707 2.71788 3.37598 2.77441C3.11725 2.90624 2.90624 3.11725 2.77441 3.37598C2.71788 3.48707 2.67446 3.64296 2.65039 3.9375C2.62572 4.23962 2.625 4.62994 2.625 5.2002V10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67445 12.357 2.71788 12.5129 2.77441 12.624C2.90623 12.8827 3.11725 13.0938 3.37598 13.2256C3.48707 13.2821 3.64295 13.3255 3.9375 13.3496C4.23962 13.3743 4.62994 13.375 5.2002 13.375H10.7998C11.3701 13.375 11.7604 13.3743 12.0625 13.3496C12.357 13.3255 12.5129 13.2821 12.624 13.2256C12.8827 13.0938 13.0938 12.8827 13.2256 12.624C13.2821 12.5129 13.3255 12.357 13.3496 12.0625C13.3743 11.7604 13.375 11.3701 13.375 10.7998V5.2002ZM14.625 10.7998C14.625 11.3493 14.6255 11.7993 14.5957 12.1641C14.5653 12.5361 14.5001 12.8748 14.3389 13.1914C14.0872 13.6854 13.6854 14.0872 13.1914 14.3389C12.8748 14.5001 12.5361 14.5653 12.1641 14.5957C11.7993 14.6255 11.3493 14.625 10.7998 14.625H5.2002C4.65067 14.625 4.20072 14.6255 3.83594 14.5957C3.46388 14.5653 3.12523 14.5002 2.80859 14.3389C2.31467 14.0872 1.91281 13.6854 1.66113 13.1914C1.49987 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65067 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49985 3.12523 1.66113 2.80859C1.9128 2.31466 2.31466 1.9128 2.80859 1.66113C3.12523 1.49985 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65067 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49987 13.1914 1.66113C13.6854 1.91281 14.0872 2.31467 14.3389 2.80859C14.5001 3.12523 14.5653 3.46388 14.5957 3.83594C14.6255 4.20072 14.625 4.65067 14.625 5.2002V10.7998Z"
-        fill={color}
-      />
-      <path
-        d="M6.54286 5H5.45714C5.29713 5 5.21712 5 5.156 5.03114C5.10224 5.05853 5.05853 5.10224 5.03114 5.156C5 5.21712 5 5.29713 5 5.45714V6.54286C5 6.70287 5 6.78288 5.03114 6.844C5.05853 6.89776 5.10224 6.94147 5.156 6.96886C5.21712 7 5.29713 7 5.45714 7H6.54286C6.70287 7 6.78288 7 6.844 6.96886C6.89776 6.94147 6.94147 6.89776 6.96886 6.844C7 6.78288 7 6.70287 7 6.54286V5.45714C7 5.29713 7 5.21712 6.96886 5.156C6.94147 5.10224 6.89776 5.05853 6.844 5.03114C6.78288 5 6.70287 5 6.54286 5Z"
-        fill={color}
-      />
-      <path
-        d="M10.5429 5H9.45714C9.29712 5 9.21711 5 9.156 5.03114C9.10223 5.05853 9.05854 5.10224 9.03114 5.156C9 5.21712 9 5.29713 9 5.45714V6.54286C9 6.70287 9 6.78288 9.03114 6.844C9.05854 6.89776 9.10223 6.94147 9.156 6.96886C9.21711 7 9.29712 7 9.45714 7H10.5429C10.7029 7 10.7829 7 10.844 6.96886C10.8978 6.94147 10.9415 6.89776 10.9689 6.844C11 6.78288 11 6.70287 11 6.54286V5.45714C11 5.29713 11 5.21712 10.9689 5.156C10.9415 5.10224 10.8978 5.05853 10.844 5.03114C10.7829 5 10.7029 5 10.5429 5Z"
-        fill={color}
-      />
-      <path
-        d="M10.5429 9H9.45714C9.29712 9 9.21711 9 9.156 9.03114C9.10223 9.05854 9.05854 9.10223 9.03114 9.156C9 9.21711 9 9.29712 9 9.45714V10.5429C9 10.7029 9 10.7829 9.03114 10.844C9.05854 10.8978 9.10223 10.9415 9.156 10.9689C9.21711 11 9.29712 11 9.45714 11H10.5429C10.7029 11 10.7829 11 10.844 10.9689C10.8978 10.9415 10.9415 10.8978 10.9689 10.844C11 10.7829 11 10.7029 11 10.5429V9.45714C11 9.29712 11 9.21711 10.9689 9.156C10.9415 9.10223 10.8978 9.05854 10.844 9.03114C10.7829 9 10.7029 9 10.5429 9Z"
-        fill={color}
-      />
-      <path
-        d="M6.54286 9H5.45714C5.29713 9 5.21712 9 5.156 9.03114C5.10224 9.05854 5.05853 9.10223 5.03114 9.156C5 9.21711 5 9.29712 5 9.45714V10.5429C5 10.7029 5 10.7829 5.03114 10.844C5.05853 10.8978 5.10224 10.9415 5.156 10.9689C5.21712 11 5.29713 11 5.45714 11H6.54286C6.70287 11 6.78288 11 6.844 10.9689C6.89776 10.9415 6.94147 10.8978 6.96886 10.844C7 10.7829 7 10.7029 7 10.5429V9.45714C7 9.29712 7 9.21711 6.96886 9.156C6.94147 9.10223 6.89776 9.05854 6.844 9.03114C6.78288 9 6.70287 9 6.54286 9Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/project/page-icon.tsx b/packages/propel/src/icons/project/page-icon.tsx
deleted file mode 100644
index feefbb7ef5d..00000000000
--- a/packages/propel/src/icons/project/page-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function PageIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M2.0415 11.4668V4.53325C2.0415 3.98372 2.04103 3.53377 2.0708 3.16899C2.1012 2.79693 2.16636 2.45828 2.32764 2.14164C2.57931 1.64772 2.98117 1.24585 3.4751 0.994184C3.79173 0.832905 4.13038 0.767746 4.50244 0.737348C4.86722 0.707573 5.31717 0.708051 5.8667 0.708051H8.00732C8.46672 0.708051 8.79883 0.703776 9.11768 0.780317C9.26953 0.816778 9.41655 0.869103 9.55908 0.931684C9.57494 0.937854 9.58978 0.945771 9.60498 0.953168C9.6354 0.96723 9.6669 0.97896 9.69678 0.994184L9.87647 1.09477L10.0796 1.23637C10.2777 1.39055 10.4689 1.58472 10.7124 1.82817L12.8374 3.95414C13.1623 4.27904 13.4005 4.51048 13.5718 4.79008C13.627 4.88022 13.6744 4.97452 13.7183 5.07036C13.7229 5.0804 13.7278 5.0903 13.7319 5.10063C13.7959 5.24517 13.8482 5.39475 13.8853 5.54887C13.9618 5.86762 13.9585 6.19902 13.9585 6.65825V11.4668C13.9585 12.0164 13.959 12.4663 13.9292 12.8311C13.8988 13.2032 13.8337 13.5418 13.6724 13.8584C13.4521 14.2907 13.1168 14.6522 12.7056 14.9043L12.5249 15.0049C12.2082 15.1663 11.8697 15.2314 11.4976 15.2618C11.1327 15.2916 10.683 15.2911 10.1333 15.2911H5.8667C5.31716 15.2911 4.86723 15.2915 4.50244 15.2618C4.13034 15.2314 3.79177 15.1663 3.4751 15.0049C2.98126 14.7533 2.57932 14.3523 2.32764 13.8584C2.16631 13.5418 2.10122 13.2032 2.0708 12.8311C2.041 12.4663 2.0415 12.0164 2.0415 11.4668ZM9.3335 10.7081C9.67852 10.7082 9.9585 10.988 9.9585 11.3331C9.9585 11.6781 9.67852 11.9579 9.3335 11.9581H5.3335C4.98832 11.9581 4.7085 11.6782 4.7085 11.3331C4.7085 10.9879 4.98832 10.7081 5.3335 10.7081H9.3335ZM10.6665 8.04106C11.0116 8.04106 11.2913 8.32103 11.2915 8.66606C11.2915 9.01124 11.0117 9.29106 10.6665 9.29106H5.3335C4.98832 9.29106 4.7085 9.01124 4.7085 8.66606C4.70867 8.32103 4.98843 8.04106 5.3335 8.04106H10.6665ZM3.2915 11.4668C3.2915 12.037 3.29222 12.4275 3.3169 12.7295C3.34099 13.0241 3.38432 13.18 3.44092 13.2911C3.57274 13.5497 3.7838 13.7599 4.04248 13.8916C4.15358 13.9482 4.30934 13.9926 4.604 14.0166C4.90612 14.0413 5.29648 14.0411 5.8667 14.0411H10.1333C10.7036 14.0411 11.0939 14.0413 11.396 14.0166C11.6908 13.9926 11.8464 13.9483 11.9575 13.8916C12.2161 13.7599 12.4263 13.5496 12.5581 13.2911C12.6147 13.18 12.659 13.0241 12.6831 12.7295C12.7078 12.4275 12.7085 12.037 12.7085 11.4668V6.65825C12.7085 6.27228 12.7061 6.08627 12.6909 5.95805H10.3999C10.2235 5.95805 10.0532 5.95895 9.91065 5.94731C9.76096 5.93505 9.58746 5.90599 9.41357 5.81743C9.17042 5.69355 8.97292 5.49581 8.84912 5.25297C8.76041 5.07887 8.73148 4.90475 8.71924 4.75493C8.70762 4.61252 8.7085 4.44283 8.7085 4.26664V1.97465C8.58022 1.95949 8.39368 1.95805 8.00732 1.95805H5.8667C5.29645 1.95805 4.90613 1.95877 4.604 1.98344C4.30946 2.00751 4.15357 2.05093 4.04248 2.10747C3.78376 2.23929 3.57274 2.4503 3.44092 2.70903C3.38439 2.82012 3.34096 2.97601 3.3169 3.27055C3.29222 3.57268 3.2915 3.963 3.2915 4.53325V11.4668ZM9.96533 4.65336C9.96677 4.67091 9.96894 4.6836 9.97022 4.69243C9.97133 4.6937 9.97189 4.69521 9.97315 4.69633C9.98199 4.69763 9.99522 4.69975 10.0132 4.70122C10.093 4.70771 10.2032 4.70805 10.3999 4.70805H11.8237L9.9585 2.84184V4.26664C9.9585 4.46349 9.95882 4.57358 9.96533 4.65336Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/project/view-icon.tsx b/packages/propel/src/icons/project/view-icon.tsx
deleted file mode 100644
index 11fb1d39222..00000000000
--- a/packages/propel/src/icons/project/view-icon.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function ViewsIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  const clipPathId = React.useId();
-
-  return (
-    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
-      <path
-        d="M14.3926 10.7735C14.7013 10.6192 15.0771 10.7451 15.2314 11.0538C15.3854 11.3623 15.2604 11.7373 14.9521 11.8917L8.52344 15.1056C8.46846 15.1331 8.33457 15.2069 8.18262 15.2355H8.18164C8.06516 15.2572 7.94558 15.2573 7.8291 15.2355C7.67698 15.2069 7.54234 15.1331 7.4873 15.1056L1.05957 11.8917C0.750903 11.7374 0.626065 11.3625 0.780273 11.0538C0.934594 10.7452 1.30948 10.6194 1.61816 10.7735L8.00488 13.9669L14.3926 10.7735ZM14.3926 7.44054C14.7013 7.28618 15.0771 7.41114 15.2314 7.71983C15.3858 8.02847 15.2607 8.40424 14.9521 8.5587L8.52344 11.7726C8.46839 11.8001 8.33451 11.8739 8.18262 11.9025H8.18164C8.06519 11.9242 7.94554 11.9242 7.8291 11.9025C7.67698 11.8739 7.54234 11.8001 7.4873 11.7726L1.05957 8.5587C0.750834 8.40433 0.625905 8.02857 0.780273 7.71983C0.934713 7.41138 1.30956 7.28634 1.61816 7.44054L8.00488 10.6339L14.3926 7.44054ZM7.91699 0.751084C8.00545 0.742877 8.09504 0.747328 8.18262 0.763779C8.33432 0.79232 8.46833 0.865118 8.52344 0.892686L14.9521 4.10753C15.1636 4.21348 15.2969 4.42959 15.2969 4.66612C15.2969 4.90266 15.1636 5.11875 14.9521 5.22472L8.52344 8.43956C8.46831 8.46714 8.33434 8.53992 8.18262 8.56847H8.18164C8.06513 8.59024 7.94561 8.59028 7.8291 8.56847C7.67698 8.53994 7.54235 8.46708 7.4873 8.43956L1.05957 5.22472C0.84784 5.11884 0.713867 4.90285 0.713867 4.66612C0.713883 4.42941 0.847843 4.21339 1.05957 4.10753L7.4873 0.892686C7.54232 0.865181 7.67699 0.7923 7.8291 0.763779L7.91699 0.751084ZM2.73535 4.66612L8.00488 7.30089L13.2754 4.66612L8.00488 2.03038L2.73535 4.66612Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/project/work-items-icon.tsx b/packages/propel/src/icons/project/work-items-icon.tsx
deleted file mode 100644
index 54eeb067ea3..00000000000
--- a/packages/propel/src/icons/project/work-items-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function WorkItemsIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M14.2779 12.465L14.2045 12.5365L14.1028 12.6109C13.999 12.6752 13.8985 12.7093 13.8745 12.7186L8.09646 14.9677C7.9026 15.0431 7.68376 15.0174 7.51292 14.8987C7.34209 14.7799 7.24168 14.5838 7.24485 14.3758L7.28054 12.0898L5.14952 12.9194C4.95564 12.9949 4.73602 12.9685 4.56518 12.8498C4.39458 12.731 4.29394 12.5348 4.29711 12.3269L4.33279 10.0409L2.20178 10.8705C2.0079 10.946 1.78908 10.9202 1.61824 10.8015C1.44742 10.6828 1.347 10.4866 1.35017 10.2786L1.44444 4.07898C1.44497 4.04466 1.43911 3.86844 1.50017 3.70622C1.54848 3.57794 1.62751 3.46423 1.73091 3.37424C1.86169 3.26043 2.02889 3.20455 2.06088 3.1921L7.83894 0.943026C8.03281 0.867554 8.25164 0.893325 8.42248 1.01205C8.59332 1.13079 8.69372 1.32691 8.69055 1.53494L8.65623 3.82068L10.7859 2.99132C10.9796 2.9159 11.1986 2.94183 11.3694 3.06034C11.5403 3.17909 11.6415 3.37576 11.6383 3.58379L11.604 5.86953L13.7336 5.04017C13.9275 4.96469 14.1463 4.99045 14.3172 5.10919C14.488 5.22794 14.5884 5.42408 14.5852 5.63208L14.491 11.8317C14.4904 11.866 14.4963 12.0422 14.4352 12.2045L14.3939 12.2982C14.3622 12.3584 14.3233 12.4144 14.2779 12.465ZM2.41237 4.09289L2.35605 4.09179L2.45595 4.20643L2.41237 4.09289ZM2.35605 4.09179L2.41237 4.09289L2.45595 4.20643L2.35605 4.09179ZM4.39219 6.12784C4.39271 6.09351 4.38601 5.91676 4.44711 5.75452C4.4954 5.62627 4.57449 5.51251 4.67785 5.42253C4.80863 5.30872 4.97664 5.2534 5.00862 5.24095L7.39924 4.30992L7.42784 2.44478L2.69167 4.28821L2.61504 9.36909L4.35327 8.69224L4.39219 6.12784ZM5.36012 6.14174L5.30379 6.14065L5.4045 6.25584L5.36012 6.14174ZM5.30379 6.14065L5.36012 6.14174L5.4045 6.25584L5.30379 6.14065ZM7.33913 8.17613C7.33965 8.14181 7.3338 7.96558 7.39485 7.80337C7.44316 7.67508 7.52219 7.56138 7.6256 7.47139C7.75637 7.35758 7.92358 7.30169 7.95557 7.28924L10.3456 6.35901L10.3742 4.49387L5.63942 6.33706L5.56254 11.4166L7.30077 10.7397L7.33913 8.17613ZM8.30706 8.19003L8.25073 8.18894L8.35064 8.30357L8.30706 8.19003ZM8.25073 8.18894L8.30706 8.19003L8.35064 8.30357L8.25073 8.18894ZM13.3217 6.54137L8.58636 8.38535L8.50892 13.4657L13.2445 11.623L13.3217 6.54137Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/properties/boolean-icon.tsx b/packages/propel/src/icons/properties/boolean-icon.tsx
deleted file mode 100644
index 7e31ad75b99..00000000000
--- a/packages/propel/src/icons/properties/boolean-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function BooleanPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M14.041 8C14.041 6.13604 12.53 4.625 10.666 4.625H5.33301C3.46905 4.625 1.95801 6.13604 1.95801 8C1.95801 9.86396 3.46905 11.375 5.33301 11.375H10.666C12.53 11.375 14.041 9.86396 14.041 8ZM11.708 8C11.708 7.42471 11.2413 6.95801 10.666 6.95801C10.0909 6.95823 9.625 7.42485 9.625 8C9.62518 8.575 10.091 9.0408 10.666 9.04102C11.2412 9.04102 11.7078 8.57514 11.708 8ZM12.958 8C12.9578 9.26549 11.9316 10.291 10.666 10.291C9.40067 10.2908 8.37518 9.26536 8.375 8C8.375 6.73449 9.40056 5.70823 10.666 5.70801C11.9317 5.70801 12.958 6.73436 12.958 8ZM15.291 8C15.291 10.5543 13.2203 12.625 10.666 12.625H5.33301C2.77869 12.625 0.708008 10.5543 0.708008 8C0.708008 5.44568 2.77869 3.375 5.33301 3.375H10.666C13.2203 3.375 15.291 5.44568 15.291 8Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/properties/comment-reply-icon.tsx b/packages/propel/src/icons/properties/comment-reply-icon.tsx
deleted file mode 100644
index ac7ddb1546e..00000000000
--- a/packages/propel/src/icons/properties/comment-reply-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function CommentReplyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M13.375 8.79981V5.2002C13.375 4.62994 13.3743 4.23962 13.3497 3.9375C13.3256 3.64296 13.2822 3.48707 13.2256 3.37598C13.0938 3.11725 12.8828 2.90624 12.6241 2.77441C12.513 2.71788 12.3571 2.67446 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.20024C4.62999 2.625 4.23967 2.62572 3.93754 2.65039C3.643 2.67446 3.48712 2.71788 3.37602 2.77441C3.1173 2.90624 2.90628 3.11725 2.77446 3.37598C2.71793 3.48707 2.6745 3.64296 2.65044 3.9375C2.62576 4.23962 2.62504 4.62995 2.62504 5.2002V9.33301C2.62504 9.9927 2.63053 10.2007 2.67192 10.3555C2.79906 10.83 3.17007 11.201 3.64458 11.3281C3.79936 11.3695 4.00735 11.375 4.66704 11.375C5.01207 11.3752 5.29204 11.6549 5.29204 12V13.3652L6.73344 12.2129C7.03847 11.9689 7.25663 11.79 7.50688 11.6621C7.7175 11.5545 7.94219 11.4763 8.17387 11.4287C8.44928 11.3722 8.73134 11.375 9.12212 11.375H10.7998C11.3701 11.375 11.7604 11.3743 12.0625 11.3496C12.3571 11.3255 12.513 11.2821 12.6241 11.2256C12.8828 11.0938 13.0938 10.8827 13.2256 10.624C13.2822 10.5129 13.3256 10.357 13.3497 10.0625C13.3743 9.76038 13.375 9.37006 13.375 8.79981ZM14.625 8.79981C14.625 9.34933 14.6255 9.79928 14.5957 10.1641C14.5653 10.5361 14.5002 10.8748 14.3389 11.1914C14.0872 11.6853 13.6854 12.0872 13.1915 12.3389C12.8748 12.5001 12.5362 12.5653 12.1641 12.5957C11.7993 12.6255 11.3494 12.625 10.7998 12.625H9.12212C8.68139 12.625 8.54724 12.6282 8.42485 12.6533C8.30369 12.6782 8.18638 12.7191 8.07622 12.7754C7.96492 12.8322 7.85814 12.9139 7.51372 13.1895L5.92387 14.4619C5.79493 14.5651 5.6641 14.6693 5.55083 14.7441C5.44715 14.8127 5.25268 14.9314 5.00102 14.9316C4.70926 14.9319 4.43308 14.7993 4.25102 14.5713C4.09396 14.3745 4.06499 14.1481 4.05376 14.0244C4.04148 13.8892 4.04204 13.7217 4.04204 13.5566V12.6191C3.76509 12.6115 3.53206 12.5919 3.32036 12.5352C2.41479 12.2924 1.70767 11.5853 1.46489 10.6797C1.37008 10.3258 1.37504 9.91275 1.37504 9.33301V5.2002C1.37504 4.65067 1.37457 4.20072 1.40434 3.83594C1.43474 3.46388 1.4999 3.12523 1.66118 2.80859C1.91285 2.31467 2.31471 1.9128 2.80864 1.66113C3.12527 1.49985 3.46392 1.4347 3.83598 1.4043C4.20076 1.37452 4.65072 1.375 5.20024 1.375H10.7998C11.3494 1.375 11.7993 1.37452 12.1641 1.4043C12.5362 1.4347 12.8748 1.49986 13.1915 1.66113C13.6854 1.9128 14.0872 2.31467 14.3389 2.80859C14.5002 3.12523 14.5653 3.46388 14.5957 3.83594C14.6255 4.20072 14.625 4.65067 14.625 5.2002V8.79981Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/properties/dropdown-icon.tsx b/packages/propel/src/icons/properties/dropdown-icon.tsx
deleted file mode 100644
index b4178aaaf0a..00000000000
--- a/packages/propel/src/icons/properties/dropdown-icon.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function DropdownPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  const clipPathId = React.useId();
-
-  return (
-    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
-      <path
-        d="M14.041 8.00098C14.041 4.66436 11.3365 1.95916 8 1.95898C4.66328 1.95898 1.95801 4.66425 1.95801 8.00098C1.95818 11.3375 4.66339 14.042 8 14.042C11.3364 14.0418 14.0408 11.3374 14.041 8.00098ZM10.2246 6.55859C10.4687 6.31468 10.8644 6.31457 11.1084 6.55859C11.3524 6.80262 11.3523 7.19829 11.1084 7.44238L8.44141 10.1094C8.32429 10.2264 8.16557 10.2919 8 10.292C7.83424 10.292 7.67483 10.2266 7.55762 10.1094L4.89062 7.44238C4.64693 7.19833 4.64682 6.80258 4.89062 6.55859C5.1347 6.31452 5.53131 6.31452 5.77539 6.55859L7.99902 8.7832L10.2246 6.55859ZM15.291 8.00098C15.2908 12.0278 12.0268 15.2918 8 15.292C3.97303 15.292 0.708184 12.0279 0.708008 8.00098C0.708008 3.9739 3.97292 0.708984 8 0.708984C12.0269 0.70916 15.291 3.974 15.291 8.00098Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/properties/due-date-icon.tsx b/packages/propel/src/icons/properties/due-date-icon.tsx
deleted file mode 100644
index 2def4a9018c..00000000000
--- a/packages/propel/src/icons/properties/due-date-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function DueDatePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M13.5576 10.5576C13.8017 10.3135 14.1983 10.3135 14.4424 10.5576C14.6862 10.8016 14.6861 11.1974 14.4424 11.4414L11.4424 14.4414C11.1983 14.6855 10.8017 14.6855 10.5576 14.4414L9.22461 13.1084C8.98059 12.8644 8.9807 12.4687 9.22461 12.2246C9.46869 11.9805 9.86432 11.9805 10.1084 12.2246L10.999 13.1152L13.5576 10.5576ZM10.042 4V3.29102H5.95801V4C5.95783 4.34503 5.67808 4.625 5.33301 4.625C4.98809 4.62482 4.70818 4.34492 4.70801 4V3.29297C4.39072 3.29481 4.14362 3.29958 3.9375 3.31641C3.64272 3.34049 3.48709 3.38481 3.37598 3.44141C3.11725 3.57323 2.90624 3.78327 2.77441 4.04199C2.71783 4.15308 2.67448 4.30883 2.65039 4.60352C2.62571 4.90564 2.625 5.29592 2.625 5.86621V6.04102H13.375V5.86621C13.375 5.29591 13.3743 4.90564 13.3496 4.60352C13.3255 4.30883 13.2822 4.15308 13.2256 4.04199C13.0938 3.78327 12.8827 3.57322 12.624 3.44141C12.5129 3.38481 12.3572 3.34049 12.0625 3.31641C11.8564 3.29958 11.6093 3.29481 11.292 3.29297V4C11.2918 4.34492 11.0119 4.62482 10.667 4.625C10.3219 4.625 10.0422 4.34503 10.042 4ZM14.625 8.33301C14.625 8.67819 14.3452 8.95801 14 8.95801C13.6548 8.95801 13.375 8.67819 13.375 8.33301V7.29102H2.625V11.4668C2.625 12.0369 2.62571 12.4274 2.65039 12.7295C2.67449 13.024 2.71781 13.1799 2.77441 13.291C2.90624 13.5497 3.1173 13.7598 3.37598 13.8916C3.48708 13.9482 3.64284 13.9925 3.9375 14.0166C4.23962 14.0413 4.62998 14.041 5.2002 14.041H8C8.34507 14.041 8.62483 14.321 8.625 14.666C8.625 15.0112 8.34518 15.291 8 15.291H5.2002C4.65066 15.291 4.20073 15.2915 3.83594 15.2617C3.46383 15.2313 3.12526 15.1662 2.80859 15.0049C2.31476 14.7533 1.91282 14.3522 1.66113 13.8584C1.49981 13.5417 1.43471 13.2031 1.4043 12.8311C1.3745 12.4663 1.375 12.0163 1.375 11.4668V5.86621C1.375 5.31658 1.3745 4.86676 1.4043 4.50195C1.4347 4.1298 1.49976 3.79131 1.66113 3.47461C1.9128 2.98069 2.31467 2.57881 2.80859 2.32715C3.12519 2.16592 3.46393 2.10071 3.83594 2.07031C4.08533 2.04996 4.37446 2.04486 4.70801 2.04297V1.33301C4.70801 0.987938 4.98798 0.708184 5.33301 0.708008C5.67819 0.708008 5.95801 0.98783 5.95801 1.33301V2.04102H10.042V1.33301C10.042 0.98783 10.3218 0.708008 10.667 0.708008C11.012 0.708183 11.292 0.987938 11.292 1.33301V2.04297C11.6255 2.04486 11.9147 2.04996 12.1641 2.07031C12.5361 2.10071 12.8748 2.16593 13.1914 2.32715C13.6854 2.57882 14.0872 2.9807 14.3389 3.47461L14.3945 3.59473C14.5155 3.87672 14.5691 4.17636 14.5957 4.50195C14.6255 4.86677 14.625 5.31659 14.625 5.86621V8.33301Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/properties/duplicate-icon.tsx b/packages/propel/src/icons/properties/duplicate-icon.tsx
deleted file mode 100644
index c376fb78c76..00000000000
--- a/packages/propel/src/icons/properties/duplicate-icon.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function DuplicatePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  const clipPathId = React.useId();
-
-  return (
-    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
-      <path
-        d="M14.041 8.13282C14.041 7.74954 14.041 7.4995 14.0254 7.3086C14.0104 7.12507 13.9841 7.05154 13.9639 7.01173C13.896 6.87852 13.7876 6.77008 13.6543 6.70216C13.6145 6.68189 13.541 6.65563 13.3574 6.64063C13.1665 6.62507 12.9165 6.62501 12.5332 6.62501H8.13282C7.74955 6.62501 7.4995 6.62507 7.3086 6.64063C7.12508 6.65563 7.05155 6.68189 7.01173 6.70216C6.87845 6.77006 6.77006 6.87845 6.70216 7.01173C6.68189 7.05155 6.65563 7.12508 6.64063 7.3086C6.62507 7.4995 6.62501 7.74955 6.62501 8.13282V12.5332C6.62501 12.9165 6.62507 13.1665 6.64063 13.3574C6.65563 13.541 6.68189 13.6145 6.70216 13.6543C6.77008 13.7876 6.87852 13.896 7.01173 13.9639C7.05154 13.9841 7.12507 14.0104 7.3086 14.0254C7.4995 14.041 7.74954 14.041 8.13282 14.041H12.5332C12.9165 14.041 13.1665 14.041 13.3574 14.0254C13.541 14.0104 13.6145 13.9841 13.6543 13.9639C13.7875 13.896 13.896 13.7875 13.9639 13.6543C13.9841 13.6145 14.0104 13.541 14.0254 13.3574C14.041 13.1665 14.041 12.9165 14.041 12.5332V8.13282ZM9.70802 12V10.959H8.667C8.32193 10.959 8.04218 10.679 8.042 10.334C8.042 9.98881 8.32182 9.70899 8.667 9.70899H9.70802V8.667C9.70802 8.32188 9.98791 8.04209 10.333 8.042C10.6782 8.042 10.958 8.32182 10.958 8.667V9.70899H12C12.3451 9.70908 12.625 9.98887 12.625 10.334C12.6248 10.679 12.345 10.9589 12 10.959H10.958V12C10.958 12.3452 10.6782 12.625 10.333 12.625C9.98791 12.6249 9.70802 12.3451 9.70802 12ZM9.37501 3.33302C9.37501 3.01415 9.37415 2.80617 9.36329 2.64649C9.35279 2.49251 9.33426 2.42923 9.32032 2.39552C9.24843 2.22197 9.11107 2.08363 8.93751 2.01173C8.90379 1.99777 8.84057 1.98024 8.68653 1.96973C8.52687 1.95885 8.31893 1.95802 8.00001 1.95802H3.4668C3.08321 1.95802 2.83257 1.95805 2.64161 1.97364C2.45792 1.98865 2.38455 2.01488 2.34473 2.03516C2.21146 2.10307 2.10307 2.21146 2.03516 2.34473C2.01488 2.38455 1.98865 2.45792 1.97364 2.64161C1.95805 2.83257 1.95802 3.08321 1.95802 3.4668V8.00001C1.95802 8.31893 1.95885 8.52687 1.96973 8.68653C1.98024 8.84057 1.99777 8.90379 2.01173 8.93751C2.08363 9.11107 2.22197 9.24843 2.39552 9.32032C2.42923 9.33426 2.49251 9.35279 2.64649 9.36329C2.80617 9.37415 3.01415 9.37501 3.33302 9.37501C3.67819 9.37501 3.95802 9.65483 3.95802 10C3.95784 10.345 3.67808 10.625 3.33302 10.625C3.03094 10.625 2.7727 10.6248 2.56055 10.6104C2.34294 10.5955 2.12822 10.5631 1.917 10.4756C1.43725 10.2769 1.05621 9.89565 0.857429 9.41602C0.769896 9.20466 0.736546 8.98926 0.721687 8.77149C0.707239 8.55948 0.708015 8.3018 0.708015 8.00001V3.4668C0.708015 3.10389 0.70782 2.79368 0.728523 2.54005C0.749847 2.27906 0.796841 2.02275 0.921882 1.77735C1.10961 1.40896 1.40896 1.10961 1.77735 0.921882C2.02275 0.796841 2.27906 0.749847 2.54005 0.728523C2.79368 0.70782 3.10389 0.708015 3.4668 0.708015H8.00001C8.3018 0.708015 8.55948 0.707239 8.77149 0.721687C8.98926 0.736546 9.20466 0.769896 9.41602 0.857429C9.89565 1.05621 10.2769 1.43725 10.4756 1.917C10.5631 2.12822 10.5955 2.34294 10.6104 2.56055C10.6248 2.7727 10.625 3.03094 10.625 3.33302C10.625 3.67808 10.345 3.95784 10 3.95802C9.65483 3.95802 9.37501 3.67819 9.37501 3.33302ZM15.291 12.5332C15.291 12.8962 15.2922 13.2063 15.2715 13.46C15.2502 13.7207 15.203 13.9765 15.0781 14.2217C14.8904 14.5902 14.5902 14.8904 14.2217 15.0781C13.9765 15.203 13.7207 15.2502 13.46 15.2715C13.2063 15.2922 12.8962 15.291 12.5332 15.291H8.13282C7.76985 15.291 7.45971 15.2922 7.20606 15.2715C6.94533 15.2502 6.68953 15.203 6.44434 15.0781C6.0758 14.8904 5.77563 14.5901 5.5879 14.2217C5.46306 13.9765 5.41586 13.7207 5.39454 13.46C5.37381 13.2063 5.37501 12.8962 5.37501 12.5332V8.13282C5.37501 7.76985 5.37381 7.45971 5.39454 7.20606C5.41586 6.94533 5.46306 6.68953 5.5879 6.44434C5.77565 6.07587 6.07587 5.77565 6.44434 5.5879C6.68953 5.46306 6.94533 5.41586 7.20606 5.39454C7.45971 5.37381 7.76985 5.37501 8.13282 5.37501H12.5332C12.8962 5.37501 13.2063 5.37381 13.46 5.39454C13.7207 5.41586 13.9765 5.46306 14.2217 5.5879C14.5901 5.77563 14.8904 6.0758 15.0781 6.44434C15.203 6.68953 15.2502 6.94533 15.2715 7.20606C15.2922 7.45971 15.291 7.76985 15.291 8.13282V12.5332Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/properties/estimate-icon.tsx b/packages/propel/src/icons/properties/estimate-icon.tsx
deleted file mode 100644
index 1d1bcc7f840..00000000000
--- a/packages/propel/src/icons/properties/estimate-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function EstimatePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M7.47524 1.48544C7.80936 1.33685 8.19097 1.33692 8.52505 1.48544C8.78091 1.59922 8.94887 1.80061 9.06802 1.96884C9.18892 2.1396 9.31927 2.36541 9.4645 2.6163L14.9469 12.088C15.0927 12.3398 15.225 12.5655 15.3131 12.7559C15.3998 12.9434 15.4906 13.1898 15.4616 13.4688C15.4236 13.8331 15.2332 14.1646 14.9372 14.38C14.7103 14.5449 14.4514 14.5896 14.2458 14.6085C14.0367 14.6277 13.7743 14.627 13.4831 14.627H2.51723C2.22605 14.627 1.96354 14.6277 1.75454 14.6085C1.54891 14.5896 1.29002 14.5449 1.06313 14.38C0.767042 14.1646 0.576704 13.8331 0.538719 13.4688C0.509704 13.1898 0.600447 12.9434 0.687157 12.7559C0.775223 12.5656 0.906677 12.3397 1.05239 12.088L6.53579 2.6163C6.68101 2.36543 6.81136 2.13961 6.93227 1.96884C7.05143 1.80061 7.21939 1.59922 7.47524 1.48544ZM7.95278 2.6915C7.87286 2.80437 7.77538 2.97106 7.61782 3.24325L2.13442 12.714C1.97623 12.9872 1.88024 13.1553 1.82192 13.2813C1.80777 13.3119 1.79966 13.3353 1.7936 13.3517C1.81076 13.3546 1.83498 13.3603 1.8688 13.3634C2.00713 13.3761 2.2014 13.377 2.51723 13.377H13.4831C13.7989 13.377 13.9932 13.3761 14.1315 13.3634C14.1647 13.3603 14.1886 13.3546 14.2057 13.3517C14.1996 13.3353 14.1924 13.3117 14.1784 13.2813C14.1201 13.1553 14.0241 12.9872 13.8659 12.714L8.38247 3.24325C8.22492 2.97108 8.12743 2.80438 8.04751 2.6915C8.02757 2.66335 8.01084 2.64431 7.99966 2.63095C7.98851 2.6443 7.97249 2.66367 7.95278 2.6915Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/properties/hash-icon.tsx b/packages/propel/src/icons/properties/hash-icon.tsx
deleted file mode 100644
index be2ed0186f4..00000000000
--- a/packages/propel/src/icons/properties/hash-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function HashPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M12.1025 1.3836C12.443 1.44034 12.6729 1.76193 12.6162 2.10235L12.1816 4.70782H14C14.3451 4.70782 14.6248 4.98779 14.625 5.33282C14.625 5.678 14.3452 5.95782 14 5.95782H11.9736L11.293 10.0418H13.333C13.6782 10.0418 13.958 10.3216 13.958 10.6668C13.9578 11.0118 13.6781 11.2918 13.333 11.2918H11.085L10.6162 14.1024C10.5595 14.4428 10.2379 14.6727 9.89746 14.616C9.55703 14.5593 9.32714 14.2377 9.38379 13.8973L9.81836 11.2918H5.75195L5.2832 14.1024C5.22646 14.4428 4.90396 14.6728 4.56348 14.616C4.22334 14.5591 3.99325 14.2375 4.0498 13.8973L4.48438 11.2918H2C1.65493 11.2918 1.37518 11.0118 1.375 10.6668C1.375 10.3216 1.65482 10.0418 2 10.0418H4.69238L5.37305 5.95782H2.66699C2.32181 5.95782 2.04199 5.678 2.04199 5.33282C2.04217 4.98779 2.32192 4.70782 2.66699 4.70782H5.58105L6.0498 1.89728C6.10655 1.55679 6.42905 1.32686 6.76953 1.3836C7.10985 1.44041 7.33981 1.76201 7.2832 2.10235L6.84863 4.70782H10.915L11.3838 1.89728C11.4405 1.55685 11.7621 1.32695 12.1025 1.3836ZM5.95996 10.0418H10.0264L10.707 5.95782H6.64062L5.95996 10.0418Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/properties/index.ts b/packages/propel/src/icons/properties/index.ts
deleted file mode 100644
index 2b504e5aab2..00000000000
--- a/packages/propel/src/icons/properties/index.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./boolean-icon";
-export * from "./comment-reply-icon";
-export * from "./dropdown-icon";
-export * from "./due-date-icon";
-export * from "./duplicate-icon";
-export * from "./estimate-icon";
-export * from "./hash-icon";
-export * from "./label-icon";
-export * from "./members-icon";
-export * from "./overdue-date-icon";
-export * from "./parent-icon";
-export * from "./priority-icon";
-export * from "./relates-to-icon";
-export * from "./relation-icon";
-export * from "./scope-icon";
-export * from "./start-date-icon";
-export * from "./state-icon";
-export * from "./user-circle-icon";
-export * from "./user-icon";
-export * from "./user-square-icon";
-export * from "./workflows-icon";
-export * from "./label-filled-icon";
diff --git a/packages/propel/src/icons/properties/label-filled-icon.tsx b/packages/propel/src/icons/properties/label-filled-icon.tsx
deleted file mode 100644
index 951f6ca6479..00000000000
--- a/packages/propel/src/icons/properties/label-filled-icon.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function LabelFilledIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M0.884559 1.75908C1.07631 1.38275 1.38227 1.07679 1.75859 0.885047C2.01084 0.756518 2.27299 0.708974 2.53655 0.68744C2.78627 0.667037 3.08945 0.667048 3.44088 0.66706L6.50513 0.667026C6.77639 0.666773 7.01555 0.666551 7.24784 0.72232C7.45191 0.771314 7.647 0.852122 7.82595 0.96178C8.02964 1.0866 8.1986 1.25588 8.39023 1.44787L13.5614 6.61904C13.9408 6.9985 14.254 7.31168 14.4883 7.58765C14.7316 7.87428 14.9287 8.16432 15.041 8.50968C15.215 9.04526 15.215 9.62219 15.041 10.1578C14.9287 10.5031 14.7316 10.7932 14.4883 11.0798C14.254 11.3558 13.9408 11.6689 13.5614 12.0484L12.0479 13.5619C11.6685 13.9413 11.3553 14.2545 11.0793 14.4888C10.7927 14.7321 10.5026 14.9292 10.1573 15.0414C9.6217 15.2155 9.04477 15.2155 8.50919 15.0414C8.16383 14.9292 7.87379 14.7321 7.58716 14.4888C7.3112 14.2545 6.99802 13.9413 6.61856 13.5619L1.44738 8.39072C1.25539 8.19909 1.08611 8.03013 0.961291 7.82644C0.851634 7.64749 0.770825 7.4524 0.721832 7.24833C0.666062 7.01603 0.666285 6.77687 0.666537 6.5056L0.666571 3.44136C0.666559 3.08993 0.666549 2.78676 0.686952 2.53704C0.708486 2.27348 0.75603 2.01133 0.884559 1.75908ZM5.33325 4.00033C4.59687 4.00033 3.99992 4.59728 3.99992 5.33366C3.99992 6.07004 4.59687 6.66699 5.33325 6.66699C6.06963 6.66699 6.66658 6.07004 6.66658 5.33366C6.66658 4.59728 6.06963 4.00033 5.33325 4.00033Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/properties/label-icon.tsx b/packages/propel/src/icons/properties/label-icon.tsx
deleted file mode 100644
index a70dc194c52..00000000000
--- a/packages/propel/src/icons/properties/label-icon.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function LabelPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  const clipPathId = React.useId();
-
-  return (
-    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
-      <path
-        d="M5.00008 5.33366C5.18418 5.33366 5.33341 5.18442 5.33341 5.00033C5.33341 4.81623 5.18418 4.66699 5.00008 4.66699C4.81599 4.66699 4.66675 4.81623 4.66675 5.00033C4.66675 5.18442 4.81599 5.33366 5.00008 5.33366Z"
-        fill={color}
-      />
-      <path
-        d="M6.52889 0.787186C6.82526 0.787186 7.07583 0.782776 7.31795 0.840897C7.4677 0.876877 7.61266 0.930325 7.74959 1.00008L7.88338 1.07527V1.07625C8.0955 1.20626 8.26961 1.38532 8.47908 1.5948L13.5924 6.70711C13.9811 7.0958 14.2988 7.41437 14.5357 7.69344C14.7772 7.97795 14.9708 8.2628 15.0806 8.60066C15.252 9.12791 15.252 9.69649 15.0806 10.2237C14.9708 10.5616 14.7772 10.8464 14.5357 11.1309C14.2988 11.41 13.9811 11.7286 13.5924 12.1173L12.1178 13.5919C11.7291 13.9806 11.4105 14.2983 11.1314 14.5352C10.8469 14.7768 10.5621 14.9703 10.2242 15.0802C9.69697 15.2515 9.1284 15.2515 8.60115 15.0802C8.26329 14.9703 7.97844 14.7768 7.69392 14.5352C7.41486 14.2983 7.09629 13.9806 6.7076 13.5919L1.59529 8.47859C1.38581 8.26913 1.20675 8.09502 1.07674 7.88289H1.07576C0.968573 7.70785 0.889331 7.51701 0.841385 7.31746C0.783264 7.07534 0.787674 6.82478 0.787674 6.5284V3.54597C0.787674 3.18306 0.787479 2.87285 0.808182 2.61922C0.829506 2.35823 0.876501 2.10192 1.00154 1.85652C1.18928 1.48812 1.48863 1.18878 1.85701 1.00105C2.10241 0.876012 2.35872 0.829017 2.61971 0.807694C2.87334 0.786991 3.18355 0.787186 3.54646 0.787186H6.52889ZM5.51033 4.45906C5.99372 4.508 6.37068 4.91589 6.37068 5.41219C6.37068 5.94146 5.94195 6.37019 5.41267 6.37019C4.91638 6.37019 4.50849 5.99323 4.45955 5.50984L4.45467 5.41219L4.45955 5.31453C4.50849 4.83114 4.91638 4.45418 5.41267 4.45418L5.51033 4.45906ZM2.03767 6.5284C2.03767 6.88427 2.04165 6.96065 2.05721 7.02547C2.07449 7.09734 2.10259 7.16638 2.14119 7.22957H2.14217C2.17698 7.28637 2.22778 7.34351 2.47908 7.5948L7.59236 12.7071C7.99549 13.1102 8.27146 13.3859 8.50252 13.5821C8.72806 13.7736 8.86932 13.8532 8.98787 13.8917C9.264 13.9814 9.56145 13.9814 9.83748 13.8917C9.95606 13.8532 10.0973 13.7736 10.3228 13.5821C10.5539 13.3859 10.8299 13.1102 11.233 12.7071L12.7076 11.2325C13.1107 10.8294 13.3864 10.5534 13.5826 10.3223C13.7741 10.0968 13.8536 9.95557 13.8922 9.83699C13.9818 9.56097 13.9818 9.26351 13.8922 8.98738C13.8537 8.86883 13.7741 8.72757 13.5826 8.50203C13.3864 8.27097 13.1107 7.99501 12.7076 7.59187L7.59529 2.47859C7.344 2.2273 7.28686 2.17649 7.23006 2.14168V2.1407C7.16687 2.1021 7.09783 2.074 7.02596 2.05672C6.96114 2.04116 6.88475 2.03719 6.52889 2.03719H3.54646C3.16287 2.03719 2.91223 2.03722 2.72127 2.05281C2.53758 2.06782 2.4642 2.09405 2.42439 2.11433C2.29111 2.18224 2.18272 2.29063 2.11482 2.4239C2.09454 2.46372 2.06831 2.5371 2.0533 2.72078C2.03771 2.91174 2.03767 3.16238 2.03767 3.54597V6.5284Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/properties/members-icon.tsx b/packages/propel/src/icons/properties/members-icon.tsx
deleted file mode 100644
index 5804ee5c626..00000000000
--- a/packages/propel/src/icons/properties/members-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function MembersPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M10.708 14C10.708 13.3702 10.7072 12.9287 10.6836 12.583C10.6604 12.2435 10.6173 12.0418 10.5527 11.8857C10.3455 11.3855 9.94754 10.9875 9.44727 10.7803C9.2912 10.7157 9.08953 10.6716 8.75 10.6484C8.40434 10.6249 7.96283 10.625 7.33301 10.625H5.33301C4.7032 10.625 4.26169 10.6249 3.91602 10.6484C3.57648 10.6716 3.37481 10.7157 3.21875 10.7803C2.71847 10.9875 2.3205 11.3855 2.11328 11.8857C2.0487 12.0418 2.00464 12.2435 1.98145 12.583C1.95786 12.9287 1.95801 13.3702 1.95801 14C1.95801 14.3452 1.67819 14.625 1.33301 14.625C0.987832 14.625 0.70801 14.3452 0.70801 14C0.70801 13.3873 0.707216 12.8961 0.734377 12.498C0.76193 12.0945 0.820736 11.741 0.958987 11.4072C1.29307 10.6007 1.93369 9.96008 2.74024 9.62598C3.07402 9.48772 3.42749 9.42892 3.83106 9.40137C4.22915 9.3742 4.72031 9.375 5.33301 9.375H7.33301C7.94572 9.375 8.43688 9.3742 8.83496 9.40137C9.23853 9.42892 9.592 9.48772 9.92578 9.62598C10.7323 9.96008 11.3729 10.6007 11.707 11.4072C11.8453 11.741 11.9041 12.0945 11.9316 12.498C11.9588 12.8961 11.958 13.3873 11.958 14C11.958 14.3452 11.6782 14.625 11.333 14.625C10.9878 14.625 10.708 14.3452 10.708 14ZM14.041 14V12.667C14.041 11.7166 13.3914 10.9163 12.5107 10.6895C12.1765 10.6034 11.9755 10.262 12.0615 9.92773C12.1478 9.59378 12.4882 9.39251 12.8223 9.47852C14.2418 9.84395 15.291 11.1324 15.291 12.667V14C15.291 14.3452 15.0112 14.625 14.666 14.625C14.321 14.6248 14.041 14.3451 14.041 14ZM8.375 4.66699C8.375 3.53941 7.46057 2.625 6.33301 2.625C5.20543 2.625 4.29102 3.53941 4.29102 4.66699C4.29119 5.79443 5.20554 6.70801 6.33301 6.70801C7.46046 6.70801 8.37483 5.79442 8.375 4.66699ZM11.375 4.66699C11.375 3.81123 10.8479 3.07683 10.0986 2.77344C9.77868 2.64392 9.62439 2.27894 9.75391 1.95898C9.88353 1.63935 10.2476 1.48494 10.5674 1.61426C11.7725 2.1021 12.625 3.28458 12.625 4.66699C12.6249 6.04925 11.7725 7.231 10.5674 7.71875C10.2475 7.84818 9.88345 7.69386 9.75391 7.37402C9.62442 7.05408 9.77871 6.69007 10.0986 6.56055C10.8479 6.2573 11.3749 5.52271 11.375 4.66699ZM9.625 4.66699C9.62483 6.48478 8.15081 7.95801 6.33301 7.95801C4.51518 7.95801 3.04119 6.48478 3.04102 4.66699C3.04102 2.84905 4.51507 1.375 6.33301 1.375C8.15092 1.375 9.625 2.84905 9.625 4.66699Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/properties/overdue-date-icon.tsx b/packages/propel/src/icons/properties/overdue-date-icon.tsx
deleted file mode 100644
index 0358902f46e..00000000000
--- a/packages/propel/src/icons/properties/overdue-date-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function OverdueDatePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M13.375 7.29102H2.625V11.4668C2.625 12.0369 2.62571 12.4274 2.65039 12.7295C2.67449 13.024 2.71781 13.1799 2.77441 13.291C2.90624 13.5497 3.1173 13.7598 3.37598 13.8916C3.48708 13.9482 3.64284 13.9925 3.9375 14.0166C4.23962 14.0413 4.62998 14.041 5.2002 14.041H10.7998C11.37 14.041 11.7604 14.0413 12.0625 14.0166C12.3571 13.9925 12.5129 13.9482 12.624 13.8916C12.8827 13.7598 13.0938 13.5497 13.2256 13.291C13.2822 13.1799 13.3255 13.024 13.3496 12.7295C13.3743 12.4274 13.375 12.0369 13.375 11.4668V7.29102ZM9.22461 8.55762C9.46865 8.31362 9.86433 8.31367 10.1084 8.55762C10.3525 8.80168 10.3524 9.19733 10.1084 9.44141L8.88379 10.666L10.1084 11.8906C10.3525 12.1347 10.3525 12.5313 10.1084 12.7754C9.86437 13.0191 9.46861 13.0192 9.22461 12.7754L8 11.5498L6.77539 12.7754C6.53143 13.0192 6.13567 13.0191 5.8916 12.7754C5.64752 12.5313 5.64752 12.1347 5.8916 11.8906L7.11523 10.666L5.8916 9.44141C5.64752 9.19733 5.64752 8.80169 5.8916 8.55762C6.1357 8.31374 6.53138 8.31361 6.77539 8.55762L8 9.78223L9.22461 8.55762ZM10.042 4V3.29102H5.95801V4C5.95783 4.34503 5.67808 4.625 5.33301 4.625C4.98809 4.62482 4.70818 4.34492 4.70801 4V3.29297C4.39072 3.29481 4.14362 3.29958 3.9375 3.31641C3.64272 3.34049 3.48709 3.38481 3.37598 3.44141C3.11725 3.57323 2.90624 3.78327 2.77441 4.04199C2.71783 4.15308 2.67448 4.30883 2.65039 4.60352C2.62571 4.90564 2.625 5.29592 2.625 5.86621V6.04102H13.375V5.86621C13.375 5.29591 13.3743 4.90564 13.3496 4.60352C13.3255 4.30883 13.2822 4.15308 13.2256 4.04199C13.0938 3.78327 12.8827 3.57322 12.624 3.44141C12.5129 3.38481 12.3572 3.34049 12.0625 3.31641C11.8564 3.29958 11.6093 3.29481 11.292 3.29297V4C11.2918 4.34492 11.0119 4.62482 10.667 4.625C10.3219 4.625 10.0422 4.34503 10.042 4ZM14.625 11.4668C14.625 12.0163 14.6255 12.4663 14.5957 12.8311C14.5653 13.2031 14.5002 13.5417 14.3389 13.8584C14.0872 14.3522 13.6853 14.7533 13.1914 15.0049C12.8747 15.1662 12.5362 15.2313 12.1641 15.2617C11.7993 15.2915 11.3494 15.291 10.7998 15.291H5.2002C4.65066 15.291 4.20073 15.2915 3.83594 15.2617C3.46383 15.2313 3.12526 15.1662 2.80859 15.0049C2.31476 14.7533 1.91282 14.3522 1.66113 13.8584C1.49981 13.5417 1.43471 13.2031 1.4043 12.8311C1.3745 12.4663 1.375 12.0163 1.375 11.4668V5.86621C1.375 5.31658 1.3745 4.86676 1.4043 4.50195C1.4347 4.1298 1.49976 3.79131 1.66113 3.47461C1.9128 2.98069 2.31467 2.57881 2.80859 2.32715C3.12519 2.16592 3.46393 2.10071 3.83594 2.07031C4.08533 2.04996 4.37446 2.04486 4.70801 2.04297V1.33301C4.70801 0.987938 4.98798 0.708184 5.33301 0.708008C5.67819 0.708008 5.95801 0.98783 5.95801 1.33301V2.04102H10.042V1.33301C10.042 0.98783 10.3218 0.708008 10.667 0.708008C11.012 0.708183 11.292 0.987938 11.292 1.33301V2.04297C11.6255 2.04486 11.9147 2.04996 12.1641 2.07031C12.5361 2.10071 12.8748 2.16593 13.1914 2.32715C13.6854 2.57882 14.0872 2.9807 14.3389 3.47461L14.3945 3.59473C14.5155 3.87672 14.5691 4.17636 14.5957 4.50195C14.6255 4.86677 14.625 5.31659 14.625 5.86621V11.4668Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/properties/parent-icon.tsx b/packages/propel/src/icons/properties/parent-icon.tsx
deleted file mode 100644
index ba8e8294b40..00000000000
--- a/packages/propel/src/icons/properties/parent-icon.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function ParentPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M13.375 2.66699C13.375 2.64398 13.356 2.625 13.333 2.625H2.66699C2.64398 2.625 2.625 2.64398 2.625 2.66699V6C2.625 6.02301 2.64398 6.04199 2.66699 6.04199H13.333C13.356 6.04199 13.375 6.02301 13.375 6V2.66699ZM14.625 6C14.625 6.71337 14.0464 7.29199 13.333 7.29199H2.66699C1.95362 7.29199 1.375 6.71337 1.375 6V2.66699C1.375 1.95362 1.95362 1.375 2.66699 1.375H13.333C14.0464 1.375 14.625 1.95362 14.625 2.66699V6Z"
-        fill={color}
-      />
-      <path
-        d="M13.3755 10C13.3755 9.97699 13.3565 9.95801 13.3335 9.95801H10.0005C9.97748 9.95801 9.9585 9.97699 9.9585 10V13.333C9.9585 13.356 9.97748 13.375 10.0005 13.375H13.3335C13.3565 13.375 13.3755 13.356 13.3755 13.333V10ZM14.6255 13.333C14.6255 14.0464 14.0469 14.625 13.3335 14.625H10.0005C9.28712 14.625 8.7085 14.0464 8.7085 13.333V10C8.7085 9.28663 9.28712 8.70801 10.0005 8.70801H13.3335C14.0469 8.70801 14.6255 9.28663 14.6255 10V13.333Z"
-        fill={color}
-      />
-      <path
-        d="M2.76367 10.5996V10.4033L2.41797 10.7148C2.16139 10.9455 1.766 10.9245 1.53516 10.668C1.30445 10.4114 1.32553 10.016 1.58203 9.78516L2.9707 8.53516L3.06543 8.46484C3.29681 8.32476 3.59877 8.34834 3.80664 8.53516L5.19629 9.78516C5.45278 10.0161 5.47307 10.4114 5.24219 10.668C5.01128 10.9245 4.61594 10.9458 4.35938 10.7148L4.01367 10.4033V10.5996C4.01367 11.0309 4.01466 11.313 4.03418 11.5283C4.05286 11.734 4.08474 11.8209 4.11426 11.873C4.20505 12.0334 4.35735 12.1758 4.55957 12.2686C4.64109 12.3059 4.76292 12.3385 5.00684 12.3564C5.25649 12.3748 5.57974 12.375 6.05566 12.375H7C7.34518 12.375 7.625 12.6548 7.625 13C7.625 13.3452 7.34518 13.625 7 13.625H6.05566C5.59824 13.625 5.22121 13.6251 4.91504 13.6025C4.60331 13.5796 4.31307 13.5304 4.03809 13.4043C3.61331 13.2094 3.25509 12.8932 3.02637 12.4893C2.87424 12.2205 2.81579 11.936 2.78906 11.6416C2.76321 11.3567 2.76367 11.0082 2.76367 10.5996Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/properties/priority-icon.tsx b/packages/propel/src/icons/properties/priority-icon.tsx
deleted file mode 100644
index 05ea78d9fb1..00000000000
--- a/packages/propel/src/icons/properties/priority-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function PriorityPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M3.375 13.334V10.667C3.375 10.3218 3.65482 10.042 4 10.042C4.34518 10.042 4.625 10.3218 4.625 10.667V13.334C4.62482 13.679 4.34507 13.959 4 13.959C3.65493 13.959 3.37518 13.679 3.375 13.334ZM7.375 13.334V6.66699C7.375 6.32181 7.65482 6.04199 8 6.04199C8.34518 6.04199 8.625 6.32181 8.625 6.66699V13.334C8.62482 13.679 8.34507 13.959 8 13.959C7.65493 13.959 7.37518 13.679 7.375 13.334ZM11.375 13.334V2.66699C11.375 2.32181 11.6548 2.04199 12 2.04199C12.3452 2.04199 12.625 2.32181 12.625 2.66699V13.334C12.6248 13.679 12.3451 13.959 12 13.959C11.6549 13.959 11.3752 13.679 11.375 13.334Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/properties/relates-to-icon.tsx b/packages/propel/src/icons/properties/relates-to-icon.tsx
deleted file mode 100644
index 618358471a4..00000000000
--- a/packages/propel/src/icons/properties/relates-to-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function RelatesToPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M13.375 14V13.4746C13.375 12.8344 13.3748 12.3916 13.3467 12.0479C13.3192 11.7115 13.2675 11.5255 13.1973 11.3877C13.0415 11.0819 12.7931 10.8326 12.4873 10.6768C12.3496 10.6066 12.1632 10.5558 11.8271 10.5283C11.4833 10.5002 11.0398 10.5 10.3994 10.5H9.50879L10.3164 11.3076C10.5605 11.5517 10.5605 11.9483 10.3164 12.1924C10.0723 12.436 9.67656 12.4362 9.43262 12.1924L7.55762 10.3174C7.31354 10.0733 7.31354 9.67669 7.55762 9.43262L9.43262 7.55762C9.67656 7.31375 10.0723 7.31398 10.3164 7.55762C10.5605 7.8017 10.5605 8.19831 10.3164 8.44238L9.50879 9.25H10.3994C11.0192 9.25 11.5222 9.24999 11.9287 9.2832C12.3424 9.31701 12.7114 9.3886 13.0547 9.56348C13.5955 9.83905 14.0359 10.2785 14.3115 10.8193C14.4865 11.1628 14.558 11.5325 14.5918 11.9463C14.625 12.3528 14.625 12.855 14.625 13.4746V14C14.625 14.3451 14.3451 14.6249 14 14.625C13.6548 14.625 13.375 14.3452 13.375 14ZM13.375 7.16699V5.2002C13.375 4.62993 13.3743 4.23962 13.3496 3.9375C13.3255 3.64301 13.2821 3.48711 13.2256 3.37598C13.0938 3.11726 12.8828 2.90623 12.624 2.77441C12.5129 2.71788 12.357 2.67446 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62993 2.625 4.23962 2.62572 3.9375 2.65039C3.643 2.67445 3.48711 2.71787 3.37598 2.77441C3.11726 2.90622 2.90622 3.11726 2.77441 3.37598C2.71787 3.48711 2.67445 3.643 2.65039 3.9375C2.62572 4.23962 2.625 4.62993 2.625 5.2002V10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67446 12.357 2.71788 12.5129 2.77441 12.624C2.90623 12.8828 3.11726 13.0938 3.37598 13.2256C3.48711 13.2821 3.64301 13.3255 3.9375 13.3496C4.23962 13.3743 4.62993 13.375 5.2002 13.375H8C8.34518 13.375 8.625 13.6548 8.625 14C8.625 14.3452 8.34518 14.625 8 14.625H5.2002C4.65066 14.625 4.20072 14.6255 3.83594 14.5957C3.46387 14.5653 3.12524 14.5001 2.80859 14.3389C2.31464 14.0872 1.91278 13.6853 1.66113 13.1914C1.49985 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65066 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49986 3.12523 1.66113 2.80859C1.91279 2.31464 2.31464 1.91279 2.80859 1.66113C3.12523 1.49986 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65066 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49985 13.1914 1.66113C13.6853 1.91278 14.0872 2.31464 14.3389 2.80859C14.5001 3.12524 14.5653 3.46387 14.5957 3.83594C14.6255 4.20072 14.625 4.65066 14.625 5.2002V7.16699C14.625 7.51216 14.3452 7.79198 14 7.79199C13.6549 7.79194 13.375 7.51213 13.375 7.16699Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/properties/relation-icon.tsx b/packages/propel/src/icons/properties/relation-icon.tsx
deleted file mode 100644
index 293f151749e..00000000000
--- a/packages/propel/src/icons/properties/relation-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function RelationPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M13.375 13.333C13.375 12.9419 13.0581 12.6252 12.667 12.625C12.2758 12.625 11.958 12.9418 11.958 13.333C11.958 13.7242 12.2758 14.041 12.667 14.041C13.0581 14.0408 13.375 13.7241 13.375 13.333ZM13.375 8C13.375 7.60889 13.0581 7.29119 12.667 7.29102C12.2758 7.29102 11.958 7.60878 11.958 8C11.9582 8.39107 12.2759 8.70801 12.667 8.70801C13.058 8.70783 13.3748 8.39096 13.375 8ZM2.625 8C2.62518 8.39096 2.94206 8.70783 3.33301 8.70801C3.72411 8.70801 4.04182 8.39107 4.04199 8C4.04199 7.60878 3.72422 7.29102 3.33301 7.29102C2.94195 7.29119 2.625 7.60889 2.625 8ZM13.375 2.66602C13.3748 2.27507 13.058 1.95818 12.667 1.95801C12.2759 1.95801 11.9582 2.27496 11.958 2.66602C11.958 3.05722 12.2758 3.375 12.667 3.375C13.0581 3.37482 13.375 3.05712 13.375 2.66602ZM14.625 2.66602C14.625 3.74746 13.7484 4.62482 12.667 4.625C11.8047 4.625 11.0729 4.06708 10.8115 3.29297C10.4437 3.29422 10.1655 3.29779 9.9375 3.31641C9.64277 3.34049 9.48713 3.38481 9.37598 3.44141C9.11726 3.57322 8.90623 3.78326 8.77441 4.04199C8.71782 4.15308 8.67448 4.30883 8.65039 4.60352C8.6257 4.90564 8.625 5.29591 8.625 5.86621V7.375H10.8115C11.0724 6.59996 11.804 6.04102 12.667 6.04102C13.7484 6.04119 14.625 6.91853 14.625 8C14.6248 9.08132 13.7483 9.95783 12.667 9.95801C11.8042 9.95801 11.0726 9.39973 10.8115 8.625H8.625V10.1328C8.625 10.7031 8.62572 11.0934 8.65039 11.3955C8.67445 11.69 8.71787 11.8459 8.77441 11.957C8.90622 12.2157 9.11726 12.4268 9.37598 12.5586C9.4871 12.6151 9.643 12.6586 9.9375 12.6826C10.1655 12.7012 10.4436 12.7048 10.8115 12.7061C11.073 11.9321 11.8048 11.375 12.667 11.375C13.7484 11.3752 14.625 12.2515 14.625 13.333C14.625 14.4145 13.7484 15.2908 12.667 15.291C11.803 15.291 11.0706 14.7315 10.8105 13.9551C10.4333 13.9538 10.1105 13.9511 9.83594 13.9287C9.46387 13.8983 9.12523 13.8331 8.80859 13.6719C8.31464 13.4202 7.91279 13.0184 7.66113 12.5244C7.49986 12.2078 7.4347 11.8691 7.4043 11.4971C7.37452 11.1323 7.375 10.6823 7.375 10.1328V8.625H5.18848C4.92744 9.39974 4.19576 9.95801 3.33301 9.95801C2.25171 9.95783 1.37518 9.08133 1.375 8C1.375 6.91852 2.25161 6.04119 3.33301 6.04102C4.19598 6.04102 4.92761 6.59996 5.18848 7.375H7.375V5.86621C7.375 5.31659 7.3745 4.86677 7.4043 4.50195C7.4347 4.1298 7.49975 3.79132 7.66113 3.47461L7.7627 3.29395C8.01489 2.88278 8.37641 2.54735 8.80859 2.32715C9.1252 2.16593 9.46392 2.10071 9.83594 2.07031C10.1105 2.0479 10.4333 2.0442 10.8105 2.04297C11.071 1.26718 11.8035 0.708008 12.667 0.708008C13.7483 0.708184 14.6248 1.58472 14.625 2.66602Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/properties/scope-icon.tsx b/packages/propel/src/icons/properties/scope-icon.tsx
deleted file mode 100644
index a49045ac186..00000000000
--- a/packages/propel/src/icons/properties/scope-icon.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function ScopePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  const clipPathId = React.useId();
-
-  return (
-    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
-      <path
-        d="M8.00049 0.708008C12.0274 0.708184 15.2915 3.97303 15.2915 8C15.2913 12.0268 12.0273 15.2908 8.00049 15.291C3.97352 15.291 0.708672 12.0269 0.708496 8C0.708496 3.97292 3.97341 0.708008 8.00049 0.708008ZM7.37549 4V1.98926C4.53761 2.28073 2.28224 4.53713 1.99072 7.375H4.00049C4.34552 7.37518 4.62549 7.65493 4.62549 8C4.62531 8.34492 4.34541 8.62482 4.00049 8.625H1.99072C2.28252 11.4625 4.53789 13.7173 7.37549 14.0088V12C7.37549 11.6548 7.65531 11.375 8.00049 11.375C8.34552 11.3752 8.62549 11.6549 8.62549 12V14.0078C11.4627 13.716 13.7175 11.4622 14.0093 8.625H12.0005C11.6554 8.625 11.3757 8.34503 11.3755 8C11.3755 7.65482 11.6553 7.375 12.0005 7.375H14.0093C13.7178 4.5374 11.463 2.28203 8.62549 1.99023V4C8.62531 4.34492 8.34541 4.62482 8.00049 4.625C7.65542 4.625 7.37566 4.34503 7.37549 4Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/properties/start-date-icon.tsx b/packages/propel/src/icons/properties/start-date-icon.tsx
deleted file mode 100644
index abd1b873e08..00000000000
--- a/packages/propel/src/icons/properties/start-date-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function StartDatePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M14.2085 10.833C14.2085 8.96905 12.6974 7.45801 10.8335 7.45801C8.96953 7.45801 7.4585 8.96905 7.4585 10.833C7.4585 12.697 8.96954 14.208 10.8335 14.208C12.6974 14.208 14.2085 12.6969 14.2085 10.833ZM10.2085 8.43262C10.2087 8.08762 10.4884 7.80762 10.8335 7.80762C11.1785 7.80762 11.4583 8.08762 11.4585 8.43262V10.4463L12.7134 11.0742C13.0217 11.2286 13.1467 11.6036 12.9927 11.9121C12.8383 12.2208 12.4625 12.3468 12.1538 12.1924L10.5542 11.3916C10.3425 11.2857 10.2085 11.0697 10.2085 10.833V8.43262ZM9.87549 3.83301V3.12402H5.7915V3.83301C5.79133 4.17804 5.51157 4.45801 5.1665 4.45801C4.82158 4.45783 4.54168 4.17793 4.5415 3.83301V3.12598C4.22421 3.12782 3.97711 3.13258 3.771 3.14941C3.47622 3.1735 3.32058 3.21782 3.20947 3.27441C2.95075 3.40624 2.73974 3.61628 2.60791 3.875C2.55132 3.98609 2.50797 4.14184 2.48389 4.43652C2.4592 4.73865 2.4585 5.12892 2.4585 5.69922V5.87402H5.8335C6.17857 5.87402 6.45832 6.154 6.4585 6.49902C6.4585 6.8442 6.17867 7.12402 5.8335 7.12402H2.4585V11.2998C2.4585 11.8699 2.45921 12.2604 2.48389 12.5625C2.50799 12.857 2.55131 13.0129 2.60791 13.124C2.73973 13.3827 2.95079 13.5928 3.20947 13.7246C3.32057 13.7812 3.47633 13.8255 3.771 13.8496C4.07311 13.8743 4.46347 13.874 5.03369 13.874C5.37867 13.8741 5.65852 14.1541 5.65869 14.499C5.65869 14.8441 5.37878 15.1239 5.03369 15.124C4.48416 15.124 4.03422 15.1245 3.66943 15.0947C3.29733 15.0643 2.95876 14.9992 2.64209 14.8379C2.14825 14.5863 1.74631 14.1852 1.49463 13.6914C1.33331 13.3748 1.26821 13.0361 1.23779 12.6641C1.20799 12.2993 1.2085 11.8494 1.2085 11.2998V5.69922C1.2085 5.14959 1.20799 4.69977 1.23779 4.33496C1.2682 3.96281 1.33326 3.62432 1.49463 3.30762C1.7463 2.8137 2.14817 2.41182 2.64209 2.16016C2.95869 1.99893 3.29743 1.93371 3.66943 1.90332C3.91882 1.88297 4.20796 1.87787 4.5415 1.87598V1.16602C4.5415 0.820946 4.82148 0.541192 5.1665 0.541016C5.51168 0.541016 5.7915 0.820838 5.7915 1.16602V1.87402H9.87549V1.16602C9.87549 0.820838 10.1553 0.541016 10.5005 0.541016C10.8455 0.541191 11.1255 0.820946 11.1255 1.16602V1.87598C11.459 1.87787 11.7482 1.88297 11.9976 1.90332C12.3696 1.93372 12.7083 1.99894 13.0249 2.16016C13.5188 2.41183 13.9207 2.8137 14.1724 3.30762L14.228 3.42773C14.349 3.70973 14.4026 4.00936 14.4292 4.33496C14.459 4.69977 14.4585 5.1496 14.4585 5.69922C14.4585 6.0444 14.1787 6.32422 13.8335 6.32422C13.4883 6.32422 13.2085 6.0444 13.2085 5.69922C13.2085 5.12893 13.2078 4.73865 13.1831 4.43652C13.159 4.14184 13.1157 3.98609 13.0591 3.875C12.9273 3.61627 12.7162 3.40623 12.4575 3.27441C12.3464 3.21781 12.1907 3.17349 11.896 3.14941C11.6899 3.13258 11.4428 3.12782 11.1255 3.12598V3.83301C11.1253 4.17793 10.8454 4.45783 10.5005 4.45801C10.1554 4.45801 9.87566 4.17804 9.87549 3.83301ZM15.4585 10.833C15.4585 13.3873 13.3878 15.458 10.8335 15.458C8.27918 15.458 6.2085 13.3873 6.2085 10.833C6.2085 8.27869 8.27918 6.20801 10.8335 6.20801C13.3878 6.20801 15.4585 8.27869 15.4585 10.833Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/properties/state-icon.tsx b/packages/propel/src/icons/properties/state-icon.tsx
deleted file mode 100644
index 350ef354ce4..00000000000
--- a/packages/propel/src/icons/properties/state-icon.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function StatePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  const clipPathId = React.useId();
-
-  return (
-    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
-      <path
-        d="M14.041 8C14.041 4.66339 11.3365 1.95818 8 1.95801C4.66328 1.95801 1.95801 4.66328 1.95801 8C1.95818 11.3365 4.66339 14.041 8 14.041C11.3364 14.0408 14.0408 11.3364 14.041 8ZM11.375 8C11.375 6.13612 9.86383 4.62513 8 4.625C6.13604 4.625 4.625 6.13604 4.625 8C4.625 9.86394 6.13604 11.375 8 11.375C9.86383 11.3749 11.375 9.86386 11.375 8ZM12.625 8C12.625 10.5542 10.5542 12.6249 8 12.625C5.44568 12.625 3.375 10.5543 3.375 8C3.375 5.44568 5.44568 3.375 8 3.375C10.5542 3.37513 12.625 5.44576 12.625 8ZM15.291 8C15.2908 12.0268 12.0268 15.2908 8 15.291C3.97303 15.291 0.708184 12.0269 0.708008 8C0.708008 3.97292 3.97292 0.708008 8 0.708008C12.0269 0.708184 15.291 3.97303 15.291 8Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/properties/user-circle-icon.tsx b/packages/propel/src/icons/properties/user-circle-icon.tsx
deleted file mode 100644
index 8fe424b3524..00000000000
--- a/packages/propel/src/icons/properties/user-circle-icon.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function UserCirclePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  const clipPathId = React.useId();
-
-  return (
-    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
-      <path
-        d="M14.041 8C14.041 4.66339 11.3365 1.95818 8 1.95801C4.66328 1.95801 1.95801 4.66328 1.95801 8C1.95809 9.50928 2.51265 10.8884 3.42773 11.9473C4.03051 11.1928 4.958 10.708 6 10.708H10C11.0413 10.7081 11.9676 11.1926 12.5703 11.9463C13.4854 10.8874 14.0409 9.50932 14.041 8ZM6 11.958C5.31831 11.958 4.71294 12.2919 4.3418 12.8066C5.35728 13.5806 6.62467 14.041 8 14.041C9.37482 14.0409 10.641 13.5801 11.6562 12.8066C11.2851 12.2923 10.6813 11.9581 10 11.958H6ZM10.041 6.33301C10.041 5.20554 9.12741 4.29119 8 4.29102C6.87242 4.29102 5.95801 5.20543 5.95801 6.33301C5.95801 7.46057 6.87242 8.375 8 8.375C9.12741 8.37482 10.041 7.46045 10.041 6.33301ZM15.291 8C15.2908 12.0268 12.0268 15.2908 8 15.291C3.97303 15.291 0.708184 12.0269 0.708008 8C0.708008 3.97292 3.97292 0.708008 8 0.708008C12.0269 0.708184 15.291 3.97303 15.291 8ZM11.291 6.33301C11.291 8.15081 9.81776 9.62482 8 9.625C6.18206 9.625 4.70801 8.15091 4.70801 6.33301C4.70801 4.51507 6.18206 3.04102 8 3.04102C9.81776 3.04119 11.291 4.51517 11.291 6.33301Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/properties/user-icon.tsx b/packages/propel/src/icons/properties/user-icon.tsx
deleted file mode 100644
index 17f0aa471fd..00000000000
--- a/packages/propel/src/icons/properties/user-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function UserPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M12.7085 14C12.7085 13.0241 12.7018 12.6747 12.6207 12.4072C12.4227 11.7547 11.9118 11.2438 11.2593 11.0459C10.9919 10.9648 10.6424 10.958 9.66655 10.958H6.33354C5.3581 10.958 5.00819 10.9649 4.74077 11.0459C4.08831 11.2438 3.57741 11.7547 3.37944 12.4072C3.29831 12.6747 3.29155 13.0241 3.29155 14C3.29155 14.3452 3.01173 14.625 2.66655 14.625C2.32137 14.625 2.04155 14.3452 2.04155 14C2.04155 13.1153 2.03476 12.5344 2.18315 12.0449C2.50227 10.9929 3.32548 10.1688 4.37749 9.84961C4.86708 9.70113 5.44863 9.70801 6.33354 9.70801H9.66655C10.5512 9.70801 11.1321 9.70127 11.6216 9.84961C12.6736 10.1687 13.4978 10.9929 13.8169 12.0449C13.9653 12.5344 13.9585 13.1153 13.9585 14C13.9585 14.3451 13.6786 14.6248 13.3335 14.625C12.9884 14.625 12.7085 14.3452 12.7085 14ZM10.3746 5C10.3746 3.68832 9.31125 2.625 7.99956 2.625C6.68803 2.62518 5.62456 3.68843 5.62456 5C5.62456 6.31157 6.68803 7.37482 7.99956 7.375C9.31125 7.375 10.3746 6.31168 10.3746 5ZM11.6246 5C11.6246 7.00203 10.0016 8.625 7.99956 8.625C5.99768 8.62482 4.37456 7.00192 4.37456 5C4.37456 2.99808 5.99768 1.37518 7.99956 1.375C10.0016 1.375 11.6246 2.99797 11.6246 5Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/properties/user-square-icon.tsx b/packages/propel/src/icons/properties/user-square-icon.tsx
deleted file mode 100644
index a46a7666624..00000000000
--- a/packages/propel/src/icons/properties/user-square-icon.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function UserSquarePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  const clipPathId = React.useId();
-
-  return (
-    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
-      <path
-        d="M10.0002 10.708C10.5896 10.708 10.9757 10.7052 11.3088 10.7715C12.5974 11.0278 13.6061 12.0256 13.8821 13.3066C13.8849 13.3012 13.8891 13.2965 13.8918 13.291C13.9484 13.1799 13.9927 13.0241 14.0168 12.7295C14.0415 12.4274 14.0413 12.0369 14.0413 11.4668V4.5332C14.0413 3.96299 14.0415 3.57263 14.0168 3.27051C13.9928 2.97585 13.9484 2.82009 13.8918 2.70898C13.76 2.45032 13.5499 2.23925 13.2913 2.10742C13.1802 2.05083 13.0243 2.0075 12.7297 1.9834C12.4277 1.95872 12.0372 1.95801 11.467 1.95801H4.53345C3.9632 1.95801 3.57288 1.95873 3.27075 1.9834C2.97621 2.00746 2.82032 2.05089 2.70923 2.10742C2.45051 2.23925 2.23949 2.45026 2.10767 2.70898C2.05113 2.82008 2.00771 2.97597 1.98364 3.27051C1.95897 3.57263 1.95825 3.96295 1.95825 4.5332V11.4668C1.95825 12.0369 1.95896 12.4274 1.98364 12.7295C2.00774 13.024 2.05108 13.18 2.10767 13.291C2.11038 13.2963 2.11368 13.3014 2.11646 13.3066C2.39233 12.0255 3.40219 11.028 4.69067 10.7715C5.02386 10.7052 5.41066 10.708 6.00024 10.708H10.0002ZM6.00024 11.958C5.35075 11.958 5.11682 11.9609 4.93481 11.9971C4.12495 12.1582 3.49239 12.7917 3.3313 13.6016C3.31156 13.7009 3.30207 13.8175 3.29712 14.0146C3.57489 14.035 3.95859 14.041 4.53345 14.041H11.467C12.0414 14.041 12.4247 14.035 12.7024 14.0146C12.6974 13.8176 12.6889 13.7008 12.6692 13.6016C12.5081 12.7917 11.8746 12.1582 11.0647 11.9971C10.8828 11.9609 10.6492 11.958 10.0002 11.958H6.00024ZM10.0413 6.33301C10.0413 5.20554 9.12768 4.29119 8.00024 4.29102C6.87266 4.29102 5.95825 5.20543 5.95825 6.33301C5.95825 7.46059 6.87266 8.375 8.00024 8.375C9.12768 8.37482 10.0413 7.46048 10.0413 6.33301ZM11.2913 6.33301C11.2913 8.15084 9.81803 9.62482 8.00024 9.625C6.18231 9.625 4.70825 8.15095 4.70825 6.33301C4.70825 4.51507 6.18231 3.04102 8.00024 3.04102C9.81803 3.04119 11.2913 4.51518 11.2913 6.33301ZM15.2913 11.4668C15.2913 12.0163 15.2918 12.4663 15.262 12.8311C15.2315 13.2031 15.1665 13.5418 15.0051 13.8584C14.7535 14.352 14.3522 14.7533 13.8586 15.0049C13.7479 15.0613 13.6335 15.1066 13.5149 15.1426C13.0021 15.2979 12.3428 15.291 11.467 15.291H4.53345C3.65757 15.291 2.99845 15.2979 2.4856 15.1426C2.36691 15.1066 2.25269 15.0614 2.14185 15.0049C1.64801 14.7533 1.24606 14.3522 0.994385 13.8584C0.833048 13.5418 0.767963 13.2031 0.737549 12.8311C0.707748 12.4663 0.708252 12.0163 0.708253 11.4668V4.5332C0.708253 3.98368 0.707775 3.53373 0.737549 3.16895C0.767948 2.79689 0.833107 2.45824 0.994385 2.1416C1.24605 1.64768 1.64792 1.24581 2.14185 0.994141C2.45848 0.832863 2.79713 0.767704 3.16919 0.737305C3.53397 0.70753 3.98392 0.708008 4.53345 0.708008H11.467C12.0166 0.708008 12.4665 0.707503 12.8313 0.737305C13.2034 0.767719 13.542 0.832804 13.8586 0.994141C14.3524 1.24582 14.7535 1.64777 15.0051 2.1416C15.1665 2.45827 15.2316 2.79683 15.262 3.16895C15.2917 3.53373 15.2913 3.98367 15.2913 4.5332V11.4668Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/properties/workflows-icon.tsx b/packages/propel/src/icons/properties/workflows-icon.tsx
deleted file mode 100644
index 114104e87f9..00000000000
--- a/packages/propel/src/icons/properties/workflows-icon.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function WorkflowsPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M6.70801 3.33301C6.70783 2.94196 6.39109 2.625 6 2.625H3.33301C2.94206 2.62518 2.62518 2.94206 2.625 3.33301V6C2.625 6.39109 2.94196 6.70783 3.33301 6.70801H6C6.3912 6.70801 6.70801 6.3912 6.70801 6V3.33301ZM7.95801 6C7.95801 7.08156 7.08156 7.95801 6 7.95801H3.33301C2.2516 7.95783 1.375 7.08145 1.375 6V3.33301C1.37518 2.25171 2.25171 1.37518 3.33301 1.375H6C7.08145 1.375 7.95783 2.2516 7.95801 3.33301V6Z"
-        fill={color}
-      />
-      <path
-        d="M4.04167 10.0003V7.33333C4.04167 6.98816 4.32149 6.70833 4.66667 6.70833C5.01184 6.70833 5.29167 6.98816 5.29167 7.33333V10.0003C5.29175 10.1881 5.36594 10.3685 5.4987 10.5013C5.63146 10.6341 5.81193 10.7082 5.99967 10.7083H8.66667C9.01185 10.7083 9.29167 10.9882 9.29167 11.3333C9.29167 11.6785 9.01185 11.9583 8.66667 11.9583H5.99967C5.48041 11.9582 4.98209 11.7523 4.61491 11.3851C4.24773 11.0179 4.04175 10.5196 4.04167 10.0003Z"
-        fill={color}
-      />
-      <path
-        d="M13.3747 9.99967C13.3745 9.60862 13.0578 9.29167 12.6667 9.29167H9.99967C9.60873 9.29184 9.29184 9.60873 9.29167 9.99967V12.6667C9.29167 13.0578 9.60862 13.3745 9.99967 13.3747H12.6667C13.0579 13.3747 13.3747 13.0579 13.3747 12.6667V9.99967ZM14.6247 12.6667C14.6247 13.7482 13.7482 14.6247 12.6667 14.6247H9.99967C8.91827 14.6245 8.04167 13.7481 8.04167 12.6667V9.99967C8.04184 8.91838 8.91838 8.04184 9.99967 8.04167H12.6667C13.7481 8.04167 14.6245 8.91827 14.6247 9.99967V12.6667Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/registry.ts b/packages/propel/src/icons/registry.ts
deleted file mode 100644
index 64a69347fb4..00000000000
--- a/packages/propel/src/icons/registry.ts
+++ /dev/null
@@ -1,182 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-// Action icons
-import {
-  AddIcon,
-  AddReactionIcon,
-  AddWorkItemIcon,
-  CheckIcon,
-  CloseIcon,
-  CopyIcon,
-  EditIcon,
-  FilterAppliedIcon,
-  FilterIcon,
-  GlobeIcon,
-  LinkIcon,
-  LockIcon,
-  NewTabIcon,
-  PlusIcon,
-  PreferencesIcon,
-  SearchIcon,
-  TrashIcon,
-  UpgradeIcon,
-} from "./actions";
-// Arrow icons
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ReplyIcon } from "./arrows";
-// Default icon
-import { DefaultIcon } from "./default-icon";
-// Layout icons
-import {
-  BoardLayoutIcon,
-  CalendarLayoutIcon,
-  CardLayoutIcon,
-  GridLayoutIcon,
-  ListLayoutIcon,
-  SheetLayoutIcon,
-  TimelineLayoutIcon,
-} from "./layouts";
-// Misc icons
-import { InfoIcon } from "./misc";
-// Project icons
-import { CycleIcon, EpicIcon, IntakeIcon, ModuleIcon, PageIcon, ViewsIcon, WorkItemsIcon } from "./project";
-// Property icons
-import {
-  BooleanPropertyIcon,
-  DropdownPropertyIcon,
-  DueDatePropertyIcon,
-  DuplicatePropertyIcon,
-  EstimatePropertyIcon,
-  HashPropertyIcon,
-  LabelPropertyIcon,
-  MembersPropertyIcon,
-  OverdueDatePropertyIcon,
-  ParentPropertyIcon,
-  PriorityPropertyIcon,
-  RelatesToPropertyIcon,
-  RelationPropertyIcon,
-  ScopePropertyIcon,
-  StartDatePropertyIcon,
-  StatePropertyIcon,
-  UserCirclePropertyIcon,
-  UserPropertyIcon,
-  UserSquarePropertyIcon,
-  WorkflowsPropertyIcon,
-} from "./properties";
-// Sub-brand icons
-import { CopyLinkIcon } from "./actions/copy-link";
-import { LabelFilledIcon } from "./properties/label-filled-icon";
-import { PiChatLogo, PlaneNewIcon, WikiIcon } from "./sub-brand";
-// Workspace icons
-import {
-  AnalyticsIcon,
-  ArchiveIcon,
-  DashboardIcon,
-  DraftIcon,
-  HomeIcon,
-  InboxIcon,
-  MultipleStickyIcon,
-  ProjectIcon,
-  YourWorkIcon,
-} from "./workspace";
-
-export const ICON_REGISTRY = {
-  // Sub-brand icons
-  "sub-brand.plane": PlaneNewIcon,
-  "sub-brand.wiki": WikiIcon,
-  "sub-brand.pi-chat": PiChatLogo,
-
-  // Workspace icons
-  "workspace.analytics": AnalyticsIcon,
-  "workspace.archive": ArchiveIcon,
-  "workspace.cycle": CycleIcon,
-  "workspace.dashboard": DashboardIcon,
-  "workspace.draft": DraftIcon,
-  "workspace.home": HomeIcon,
-  "workspace.inbox": InboxIcon,
-  "workspace.multiple-sticky": MultipleStickyIcon,
-  "workspace.page": PageIcon,
-  "workspace.project": ProjectIcon,
-  "workspace.views": ViewsIcon,
-  "workspace.your-work": YourWorkIcon,
-
-  // Project icons
-  "project.cycle": CycleIcon,
-  "project.epic": EpicIcon,
-  "project.intake": IntakeIcon,
-  "project.module": ModuleIcon,
-  "project.page": PageIcon,
-  "project.view": ViewsIcon,
-  "project.work-items": WorkItemsIcon,
-
-  // Layout icons
-  "layout.calendar": CalendarLayoutIcon,
-  "layout.card": CardLayoutIcon,
-  "layout.timeline": TimelineLayoutIcon,
-  "layout.grid": GridLayoutIcon,
-  "layout.board": BoardLayoutIcon,
-  "layout.list": ListLayoutIcon,
-  "layout.sheet": SheetLayoutIcon,
-
-  // Property icons
-  "property.boolean": BooleanPropertyIcon,
-  "property.dropdown": DropdownPropertyIcon,
-  "property.due-date": DueDatePropertyIcon,
-  "property.duplicate": DuplicatePropertyIcon,
-  "property.estimate": EstimatePropertyIcon,
-  "property.hash": HashPropertyIcon,
-  "property.label": LabelPropertyIcon,
-  "property.members": MembersPropertyIcon,
-  "property.overdue-date": OverdueDatePropertyIcon,
-  "property.parent": ParentPropertyIcon,
-  "property.priority": PriorityPropertyIcon,
-  "property.relates-to": RelatesToPropertyIcon,
-  "property.relation": RelationPropertyIcon,
-  "property.scope": ScopePropertyIcon,
-  "property.start-date": StartDatePropertyIcon,
-  "property.state": StatePropertyIcon,
-  "property.user-circle": UserCirclePropertyIcon,
-  "property.user": UserPropertyIcon,
-  "property.user-square": UserSquarePropertyIcon,
-  "property.workflows": WorkflowsPropertyIcon,
-  "property.label-filled": LabelFilledIcon,
-
-  // Action icons
-  "action.add": AddIcon,
-  "action.add-workitem": AddWorkItemIcon,
-  "action.add-reaction": AddReactionIcon,
-  "action.check": CheckIcon,
-  "action.close": CloseIcon,
-  "action.copy": CopyIcon,
-  "action.edit": EditIcon,
-  "action.globe": GlobeIcon,
-  "action.link": LinkIcon,
-  "action.lock": LockIcon,
-  "action.new-tab": NewTabIcon,
-  "action.filter": FilterIcon,
-  "action.filter-applied": FilterAppliedIcon,
-  "action.search": SearchIcon,
-  "action.plus": PlusIcon,
-  "action.preferences": PreferencesIcon,
-  "action.trash": TrashIcon,
-  "action.copy-link": CopyLinkIcon,
-  "action.upgrade": UpgradeIcon,
-
-  // Arrow icons
-  "arrow.chevron-down": ChevronDownIcon,
-  "arrow.chevron-left": ChevronLeftIcon,
-  "arrow.chevron-right": ChevronRightIcon,
-  "arrow.chevron-up": ChevronUpIcon,
-
-  // Misc icons
-  "misc.info": InfoIcon,
-  "arrow.reply": ReplyIcon,
-
-  // Default fallback
-  default: DefaultIcon,
-} as const;
-
-export type IconName = keyof typeof ICON_REGISTRY;
diff --git a/packages/propel/src/icons/related-icon.tsx b/packages/propel/src/icons/related-icon.tsx
deleted file mode 100644
index 1f5c46bbc06..00000000000
--- a/packages/propel/src/icons/related-icon.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function RelatedIcon({ className = "text-current", ...rest }: ISvgIcons) {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      className={`${className} stroke-2`}
-      stroke="currentColor"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...rest}
-    >
-      <path
-        d="M20 13V6C20 5.46957 19.7893 4.96086 19.4142 4.58579C19.0391 4.21071 18.5304 4 18 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H11"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path d="M12.125 19.25L9 16.125L12.125 13" strokeLinecap="round" strokeLinejoin="round" />
-      <path
-        d="M20 22V18.1818C20 17.6032 19.7366 17.0482 19.2678 16.639C18.7989 16.2299 18.163 16 17.5 16H10"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/set-as-default-icon.tsx b/packages/propel/src/icons/set-as-default-icon.tsx
deleted file mode 100644
index 674a739f2ab..00000000000
--- a/packages/propel/src/icons/set-as-default-icon.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { ISvgIcons } from "./type";
-
-export function SetAsDefaultIcon({ className = "text-current", ...rest }: ISvgIcons) {
-  return (
-    <svg
-      width="15"
-      height="15"
-      viewBox="0 0 15 15"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-      {...rest}
-    >
-      <path
-        d="M7.29167 0.625V13.9583M12.0057 2.57762L2.57762 12.0057M13.9583 7.29167H0.625M12.0057 12.0057L2.57762 2.57762"
-        stroke="currentColor"
-        strokeWidth="1.25"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/side-panel-icon.tsx b/packages/propel/src/icons/side-panel-icon.tsx
deleted file mode 100644
index 810e9a995b6..00000000000
--- a/packages/propel/src/icons/side-panel-icon.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function SidePanelIcon({ className = "text-current", ...rest }: ISvgIcons) {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      className={`${className} stroke-2`}
-      stroke="currentColor"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...rest}
-    >
-      <path
-        d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M20 3H12V5V19V21H20C20.5523 21 21 20.1046 21 19V5C21 3.89543 20.5523 3 20 3Z"
-        fill="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/state/index.ts b/packages/propel/src/icons/state/index.ts
deleted file mode 100644
index a531eab14a6..00000000000
--- a/packages/propel/src/icons/state/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./backlog-group-icon";
-export * from "./cancelled-group-icon";
-export * from "./completed-group-icon";
-export * from "./started-group-icon";
-export * from "./state-group-icon";
-export * from "./unstarted-group-icon";
-export * from "./intake-state-group-icon";
diff --git a/packages/propel/src/icons/sticky-note-icon.tsx b/packages/propel/src/icons/sticky-note-icon.tsx
deleted file mode 100644
index 2d3456f6686..00000000000
--- a/packages/propel/src/icons/sticky-note-icon.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function StickyNoteIcon({ width = "17", height = "17", className, color }: ISvgIcons) {
-  return (
-    <svg
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 17 17"
-      fill={"currentColor"}
-      xmlns="http://www.w3.org/2000/svg"
-      style={{ color }}
-    >
-      <path
-        d="M11.9167 16.0833H2.75008C2.30805 16.0833 1.88413 15.9077 1.57157 15.5951C1.25901 15.2826 1.08341 14.8587 1.08341 14.4166V2.74996C1.08341 2.30793 1.25901 1.88401 1.57157 1.57145C1.88413 1.25889 2.30805 1.08329 2.75008 1.08329H14.4167C14.8588 1.08329 15.2827 1.25889 15.5953 1.57145C15.9078 1.88401 16.0834 2.30793 16.0834 2.74996V11.9166L11.9167 16.0833Z"
-        style={{ opacity: 0.5 }}
-        fill="currentColor"
-      />
-      <path
-        d="M11.0834 16.0833V12.75C11.0834 12.3079 11.259 11.884 11.5716 11.5714C11.8841 11.2589 12.3081 11.0833 12.7501 11.0833H16.0834"
-        style={{ opacity: 0.5 }}
-        fill="currentColor"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M1.27694 15.8898C1.66764 16.2805 2.19755 16.5 2.75008 16.5H11.9167C12.0273 16.5 12.1332 16.4561 12.2114 16.3779L16.378 12.2113C16.4562 12.1331 16.5001 12.0271 16.5001 11.9166V2.74996C16.5001 2.19742 16.2806 1.66752 15.8899 1.27682C15.4992 0.88612 14.9693 0.666626 14.4167 0.666626H2.75008C2.19755 0.666626 1.66764 0.88612 1.27694 1.27682C0.886241 1.66752 0.666748 2.19742 0.666748 2.74996V14.4166C0.666748 14.9692 0.886241 15.4991 1.27694 15.8898ZM15.6667 11.5V11.744L11.7442 15.6666H11.5001V12.75C11.5001 12.4184 11.6318 12.1005 11.8662 11.8661C12.1006 11.6317 12.4186 11.5 12.7501 11.5H15.6667ZM10.6667 15.6666V12.75C10.6667 12.1974 10.8862 11.6675 11.2769 11.2768C11.6676 10.8861 12.1975 10.6666 12.7501 10.6666H15.6667V2.74996C15.6667 2.41844 15.5351 2.1005 15.3006 1.86608C15.0662 1.63166 14.7483 1.49996 14.4167 1.49996H2.75008C2.41856 1.49996 2.10062 1.63166 1.8662 1.86608C1.63178 2.1005 1.50008 2.41844 1.50008 2.74996V14.4166C1.50008 14.7481 1.63178 15.0661 1.8662 15.3005C2.10062 15.5349 2.41856 15.6666 2.75008 15.6666H10.6667Z"
-        fill="currentColor"
-      />
-      <path
-        d="M11.0816 12.7499C11.0491 13.2706 11.0816 16.0833 11.0816 16.0833H11.9149L16.0816 11.9166V11.0833H12.7483C11.5001 11.0833 11.1141 12.2293 11.0816 12.7499Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/sub-brand/index.ts b/packages/propel/src/icons/sub-brand/index.ts
deleted file mode 100644
index d7c76f91082..00000000000
--- a/packages/propel/src/icons/sub-brand/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./pi-chat";
-export * from "./plane-icon";
-export * from "./wiki-icon";
diff --git a/packages/propel/src/icons/sub-brand/wiki-icon.tsx b/packages/propel/src/icons/sub-brand/wiki-icon.tsx
deleted file mode 100644
index 92e6fde9860..00000000000
--- a/packages/propel/src/icons/sub-brand/wiki-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function WikiIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M14.1062 6.74052L9.26925 1.90354C8.57104 1.20533 7.43873 1.20533 6.74052 1.90354L1.90354 6.74052C1.20533 7.43873 1.20533 8.57103 1.90354 9.26925L6.74052 14.1062C7.43873 14.8044 8.57104 14.8044 9.26925 14.1062L14.1062 9.26925C14.8044 8.57103 14.8044 7.43873 14.1062 6.74052ZM10.3648 9.74697C10.3648 10.0877 10.0884 10.364 9.74697 10.364H6.26279C5.92211 10.364 5.64496 10.0877 5.64496 9.74697V6.26203C5.64496 5.92134 5.92134 5.6442 6.26279 5.6442H9.74697C10.0884 5.6442 10.3648 5.92057 10.3648 6.26203V9.74697Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/suspended-user.tsx b/packages/propel/src/icons/suspended-user.tsx
deleted file mode 100644
index 6be2ce329f9..00000000000
--- a/packages/propel/src/icons/suspended-user.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function SuspendedUserIcon({ className, ...rest }: ISvgIcons) {
-  return (
-    <svg viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...rest}>
-      <g clipPath="url(#clip0_806_120890)">
-        <path
-          d="M3 13C3 12.304 3.18158 11.6201 3.52681 11.0158C3.87204 10.4115 4.36897 9.90774 4.9685 9.55428C5.56802 9.20082 6.24939 9.00989 6.94529 9.00037C7.64119 8.99086 8.32753 9.16307 8.9365 9.5"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M7 9C8.38071 9 9.5 7.88071 9.5 6.5C9.5 5.11929 8.38071 4 7 4C5.61929 4 4.5 5.11929 4.5 6.5C4.5 7.88071 5.61929 9 7 9Z"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path d="M10.5 11L13 13.5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
-        <path d="M13 11L10.5 13.5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
-      </g>
-      <defs>
-        <clipPath id="clip0_806_120890">
-          <path
-            d="M2 4.5C2 3.39543 2.89543 2.5 4 2.5H12C13.1046 2.5 14 3.39543 14 4.5V12.5C14 13.6046 13.1046 14.5 12 14.5H4C2.89543 14.5 2 13.6046 2 12.5V4.5Z"
-            fill="white"
-          />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/teams.tsx b/packages/propel/src/icons/teams.tsx
deleted file mode 100644
index cb09b169c9a..00000000000
--- a/packages/propel/src/icons/teams.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function TeamsIcon({ className = "text-current", ...rest }: ISvgIcons) {
-  return (
-    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M8.25 6.75C8.25 5.75544 8.64509 4.80161 9.34835 4.09835C10.0516 3.39509 11.0054 3 12 3C12.9946 3 13.9484 3.39509 14.6517 4.09835C15.3549 4.80161 15.75 5.75544 15.75 6.75C15.75 7.74456 15.3549 8.69839 14.6517 9.40165C13.9484 10.1049 12.9946 10.5 12 10.5C11.0054 10.5 10.0516 10.1049 9.34835 9.40165C8.64509 8.69839 8.25 7.74456 8.25 6.75ZM15.75 9.75C15.75 8.95435 16.0661 8.19129 16.6287 7.62868C17.1913 7.06607 17.9544 6.75 18.75 6.75C19.5456 6.75 20.3087 7.06607 20.8713 7.62868C21.4339 8.19129 21.75 8.95435 21.75 9.75C21.75 10.5456 21.4339 11.3087 20.8713 11.8713C20.3087 12.4339 19.5456 12.75 18.75 12.75C17.9544 12.75 17.1913 12.4339 16.6287 11.8713C16.0661 11.3087 15.75 10.5456 15.75 9.75ZM2.25 9.75C2.25 8.95435 2.56607 8.19129 3.12868 7.62868C3.69129 7.06607 4.45435 6.75 5.25 6.75C6.04565 6.75 6.80871 7.06607 7.37132 7.62868C7.93393 8.19129 8.25 8.95435 8.25 9.75C8.25 10.5456 7.93393 11.3087 7.37132 11.8713C6.80871 12.4339 6.04565 12.75 5.25 12.75C4.45435 12.75 3.69129 12.4339 3.12868 11.8713C2.56607 11.3087 2.25 10.5456 2.25 9.75ZM6.31 15.117C6.91995 14.161 7.76108 13.3743 8.75562 12.8294C9.75016 12.2846 10.866 11.9994 12 12C12.9498 11.9991 13.8891 12.1989 14.7564 12.5862C15.6237 12.9734 16.3994 13.5395 17.0327 14.2474C17.6661 14.9552 18.1428 15.7888 18.4317 16.6936C18.7205 17.5985 18.815 18.5541 18.709 19.498C18.696 19.6153 18.6556 19.7278 18.591 19.8265C18.5263 19.9252 18.4393 20.0073 18.337 20.066C16.4086 21.1725 14.2233 21.7532 12 21.75C9.695 21.75 7.53 21.138 5.663 20.066C5.56069 20.0073 5.47368 19.9252 5.40904 19.8265C5.34441 19.7278 5.30396 19.6153 5.291 19.498C5.12305 17.9646 5.48246 16.4198 6.31 15.118V15.117Z"
-        fill="currentColor"
-        {...rest}
-      />
-      <path
-        d="M5.08208 14.2539C4.09584 15.7763 3.63633 17.5802 3.77408 19.3889C3.17359 19.2979 2.58299 19.1505 2.01008 18.9489L1.89508 18.9089C1.79248 18.8725 1.70263 18.8071 1.63643 18.7207C1.57023 18.6342 1.53051 18.5305 1.52208 18.4219L1.51208 18.3009C1.47169 17.7989 1.53284 17.2938 1.69188 16.816C1.85093 16.3381 2.10462 15.8971 2.4378 15.5194C2.77099 15.1417 3.17685 14.835 3.63116 14.6176C4.08547 14.4001 4.57893 14.2765 5.08208 14.2539ZM20.2261 19.3889C20.3638 17.5802 19.9043 15.7763 18.9181 14.2539C19.4212 14.2765 19.9147 14.4001 20.369 14.6176C20.8233 14.835 21.2292 15.1417 21.5624 15.5194C21.8955 15.8971 22.1492 16.3381 22.3083 16.816C22.4673 17.2938 22.5285 17.7989 22.4881 18.3009L22.4781 18.4219C22.4695 18.5303 22.4297 18.6338 22.3635 18.7201C22.2973 18.8063 22.2075 18.8716 22.1051 18.9079L21.9901 18.9479C21.4231 19.1479 20.8341 19.2969 20.2261 19.3889Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/transfer-icon.tsx b/packages/propel/src/icons/transfer-icon.tsx
deleted file mode 100644
index c2e30cb4c5d..00000000000
--- a/packages/propel/src/icons/transfer-icon.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function TransferIcon({ className = "fill-current", ...rest }: ISvgIcons) {
-  return (
-    <svg
-      viewBox="0 0 24 20"
-      className={`${className} `}
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-      {...rest}
-    >
-      <path d="M6.16683 14.6667C4.54183 14.6667 3.16336 14.1007 2.03141 12.9688C0.899468 11.8368 0.333496 10.4583 0.333496 8.83333C0.333496 7.125 0.941135 5.73264 2.15641 4.65625C3.37169 3.57986 4.72933 3.09028 6.22933 3.1875L4.87516 1.83333C4.75016 1.70833 4.68766 1.55903 4.68766 1.38542C4.68766 1.21181 4.75016 1.0625 4.87516 0.9375C5.00016 0.8125 5.14947 0.75 5.32308 0.75C5.49669 0.75 5.646 0.8125 5.771 0.9375L8.22933 3.39583C8.29877 3.46528 8.34739 3.53472 8.37516 3.60417C8.40294 3.67361 8.41683 3.75 8.41683 3.83333C8.41683 3.91667 8.40294 3.99306 8.37516 4.0625C8.34739 4.13194 8.29877 4.20139 8.22933 4.27083L5.771 6.72917C5.646 6.85417 5.50016 6.91319 5.3335 6.90625C5.16683 6.89931 5.021 6.83333 4.896 6.70833C4.771 6.58333 4.7085 6.43403 4.7085 6.26042C4.7085 6.08681 4.771 5.9375 4.896 5.8125L6.29183 4.41667C4.97239 4.38889 3.8578 4.79167 2.94808 5.625C2.03836 6.45833 1.5835 7.52778 1.5835 8.83333C1.5835 10.0972 2.03141 11.1771 2.92725 12.0729C3.82308 12.9688 4.90294 13.4167 6.16683 13.4167H8.04183C8.22239 13.4167 8.37169 13.4757 8.48975 13.5938C8.6078 13.7118 8.66683 13.8611 8.66683 14.0417C8.66683 14.2222 8.6078 14.3715 8.48975 14.4896C8.37169 14.6076 8.22239 14.6667 8.04183 14.6667H6.16683ZM11.5835 14.6667C11.2363 14.6667 10.9411 14.5451 10.6981 14.3021C10.455 14.059 10.3335 13.7639 10.3335 13.4167V10.0833C10.3335 9.73611 10.455 9.44097 10.6981 9.19792C10.9411 8.95486 11.2363 8.83333 11.5835 8.83333H16.5835C16.9307 8.83333 17.2259 8.95486 17.4689 9.19792C17.712 9.44097 17.8335 9.73611 17.8335 10.0833V13.4167C17.8335 13.7639 17.712 14.059 17.4689 14.3021C17.2259 14.5451 16.9307 14.6667 16.5835 14.6667H11.5835ZM11.5835 13.4167H16.5835V10.0833H11.5835V13.4167ZM11.5835 7.16667C11.2363 7.16667 10.9411 7.04514 10.6981 6.80208C10.455 6.55903 10.3335 6.26389 10.3335 5.91667V2.58333C10.3335 2.23611 10.455 1.94097 10.6981 1.69792C10.9411 1.45486 11.2363 1.33333 11.5835 1.33333H16.5835C16.9307 1.33333 17.2259 1.45486 17.4689 1.69792C17.712 1.94097 17.8335 2.23611 17.8335 2.58333V5.91667C17.8335 6.26389 17.712 6.55903 17.4689 6.80208C17.2259 7.04514 16.9307 7.16667 16.5835 7.16667H11.5835Z" />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/tree-map-icon.tsx b/packages/propel/src/icons/tree-map-icon.tsx
deleted file mode 100644
index e389402f832..00000000000
--- a/packages/propel/src/icons/tree-map-icon.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function TreeMapIcon({ className = "", ...rest }: ISvgIcons) {
-  return (
-    <svg className={className} viewBox="0 0 27 22" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...rest}>
-      <rect width="10" height="10" rx="1" fill="currentColor" />
-      <rect x="11.5" width="10" height="6" rx="1" fill="currentColor" />
-      <rect y="12" width="10" height="10" rx="1" fill="currentColor" />
-      <rect x="11.5" y="16" width="10" height="6" rx="1" fill="currentColor" />
-      <rect x="11.5" y="8" width="10" height="6" rx="1" fill="currentColor" />
-      <rect x="23" width="4" height="11" rx="1" fill="currentColor" />
-      <rect x="23" y="13" width="4" height="4" rx="1" fill="currentColor" />
-      <rect x="23" y="19" width="4" height="3" rx="1" fill="currentColor" />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/updates-icon.tsx b/packages/propel/src/icons/updates-icon.tsx
deleted file mode 100644
index a81d7cdd2d2..00000000000
--- a/packages/propel/src/icons/updates-icon.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { ISvgIcons } from "./type";
-
-export function UpdatesIcon({ className = "text-current" }: ISvgIcons) {
-  return (
-    <svg
-      width="17"
-      height="16"
-      viewBox="0 0 17 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M6.54325 5.056C8.46325 2.58867 11.4633 1 14.8333 1C14.9659 1 15.093 1.05268 15.1868 1.14645C15.2806 1.24021 15.3333 1.36739 15.3333 1.5C15.3333 4.87067 13.7446 7.87 11.2773 9.79067C11.3799 10.4335 11.3418 11.0909 11.1656 11.7176C10.9895 12.3443 10.6795 12.9253 10.257 13.4205C9.83454 13.9158 9.30964 14.3135 8.71854 14.5862C8.12744 14.8588 7.48422 15 6.83325 15C6.70064 15 6.57347 14.9473 6.4797 14.8536C6.38593 14.7598 6.33325 14.6326 6.33325 14.5V11.746C5.6852 11.2342 5.09942 10.6482 4.58792 10H1.83325C1.70064 10 1.57347 9.94732 1.4797 9.85355C1.38593 9.75979 1.33325 9.63261 1.33325 9.5C1.3332 8.84897 1.47441 8.20568 1.74713 7.61453C2.01986 7.02337 2.41761 6.49843 2.91293 6.07594C3.40824 5.65345 3.98934 5.34346 4.6161 5.16737C5.24287 4.99128 5.90038 4.95328 6.54325 5.056ZM10.3333 4.5C9.93543 4.5 9.5539 4.65804 9.27259 4.93934C8.99129 5.22064 8.83325 5.60218 8.83325 6C8.83325 6.39782 8.99129 6.77936 9.27259 7.06066C9.5539 7.34196 9.93543 7.5 10.3333 7.5C10.7311 7.5 11.1126 7.34196 11.3939 7.06066C11.6752 6.77936 11.8333 6.39782 11.8333 6C11.8333 5.60218 11.6752 5.22064 11.3939 4.93934C11.1126 4.65804 10.7311 4.5 10.3333 4.5Z"
-        fill="currentColor"
-      />
-      <path
-        d="M3.83994 11.4947C3.8926 11.4554 3.93701 11.4062 3.97064 11.3497C4.00426 11.2933 4.02645 11.2308 4.03592 11.1658C4.04539 11.1008 4.04197 11.0346 4.02584 10.9709C4.00972 10.9072 3.98121 10.8473 3.94194 10.7947C3.90268 10.742 3.85342 10.6976 3.797 10.664C3.74057 10.6304 3.67807 10.6082 3.61307 10.5987C3.54807 10.5892 3.48184 10.5927 3.41816 10.6088C3.35448 10.6249 3.2946 10.6534 3.24194 10.6927C2.73054 11.0731 2.33288 11.5861 2.092 12.1762C1.85111 12.7663 1.77617 13.4111 1.87528 14.0407C1.89139 14.1455 1.94045 14.2426 2.01536 14.3177C2.09026 14.3929 2.18713 14.4422 2.29194 14.4587C2.92163 14.5577 3.56641 14.4827 4.15652 14.2417C4.74664 14.0007 5.25961 13.6029 5.63994 13.0913C5.68047 13.0388 5.71015 12.9788 5.72723 12.9147C5.74432 12.8506 5.74848 12.7837 5.73948 12.718C5.73047 12.6522 5.70847 12.589 5.67476 12.5318C5.64105 12.4747 5.59631 12.4248 5.54315 12.3852C5.48998 12.3455 5.42945 12.3168 5.36508 12.3007C5.30071 12.2847 5.23379 12.2816 5.16821 12.2917C5.10264 12.3017 5.03973 12.3248 4.98314 12.3594C4.92655 12.394 4.87742 12.4395 4.83861 12.4933C4.60612 12.806 4.30366 13.0599 3.95544 13.2347C3.60722 13.4095 3.22291 13.5004 2.83328 13.5C2.83328 12.68 3.22794 11.9513 3.83994 11.4947Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/user-activity-icon.tsx b/packages/propel/src/icons/user-activity-icon.tsx
deleted file mode 100644
index cf7da470b43..00000000000
--- a/packages/propel/src/icons/user-activity-icon.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function UserActivityIcon({ className = "text-current", ...rest }: ISvgIcons) {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      className={`${className} stroke-2`}
-      stroke="currentColor"
-      fill="none"
-      strokeWidth="1.5"
-      xmlns="http://www.w3.org/2000/svg"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...rest}
-    >
-      <path d="M10.5 13C12.9853 13 15 10.9853 15 8.5C15 6.01472 12.9853 4 10.5 4C8.01472 4 6 6.01472 6 8.5C6 10.9853 8.01472 13 10.5 13Z" />
-      <path d="M13.9062 13.5903C12.8368 13.1001 11.661 12.8876 10.4877 12.9725C9.31437 13.0574 8.18144 13.437 7.19379 14.0761C6.20613 14.7152 5.39567 15.5931 4.83744 16.6286C4.2792 17.6641 3.99124 18.8237 4.0002 20" />
-      <path d="M21 16.5H19.6L18.2 20L16.8 13L15.4 16.5H14" />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/workspace-icon.tsx b/packages/propel/src/icons/workspace-icon.tsx
deleted file mode 100644
index ae6ded00784..00000000000
--- a/packages/propel/src/icons/workspace-icon.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import type { ISvgIcons } from "./type";
-
-export function WorkspaceIcon({ className }: ISvgIcons) {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-      role="img"
-      aria-label="Workspace icon"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M2.25 3C2.25 2.58579 2.58579 2.25 3 2.25H15C15.4142 2.25 15.75 2.58579 15.75 3C15.75 3.41421 15.4142 3.75 15 3.75V6.75H21C21.4142 6.75 21.75 7.08579 21.75 7.5C21.75 7.91421 21.4142 8.25 21 8.25V20.25H21.75C22.1642 20.25 22.5 20.5858 22.5 21C22.5 21.4142 22.1642 21.75 21.75 21.75H2.25C1.83579 21.75 1.5 21.4142 1.5 21C1.5 20.5858 1.83579 20.25 2.25 20.25H3V3.75C2.58579 3.75 2.25 3.41421 2.25 3ZM4.5 3.75V20.25H6V17.625C6 16.5898 6.83979 15.75 7.875 15.75H10.125C11.1602 15.75 12 16.5898 12 17.625V20.25H13.5V3.75H4.5ZM15 8.25V20.25H19.5V8.25H15ZM10.5 20.25V17.625C10.5 17.4182 10.3318 17.25 10.125 17.25H7.875C7.66821 17.25 7.5 17.4182 7.5 17.625V20.25H10.5ZM6 6.75C6 6.33579 6.33579 6 6.75 6H7.5C7.91421 6 8.25 6.33579 8.25 6.75C8.25 7.16421 7.91421 7.5 7.5 7.5H6.75C6.33579 7.5 6 7.16421 6 6.75ZM9.75 6.75C9.75 6.33579 10.0858 6 10.5 6H11.25C11.6642 6 12 6.33579 12 6.75C12 7.16421 11.6642 7.5 11.25 7.5H10.5C10.0858 7.5 9.75 7.16421 9.75 6.75ZM6 9.75C6 9.33579 6.33579 9 6.75 9H7.5C7.91421 9 8.25 9.33579 8.25 9.75C8.25 10.1642 7.91421 10.5 7.5 10.5H6.75C6.33579 10.5 6 10.1642 6 9.75ZM9.75 9.75C9.75 9.33579 10.0858 9 10.5 9H11.25C11.6642 9 12 9.33579 12 9.75C12 10.1642 11.6642 10.5 11.25 10.5H10.5C10.0858 10.5 9.75 10.1642 9.75 9.75ZM16.5 11.25C16.5 10.8358 16.8358 10.5 17.25 10.5H17.258C17.6722 10.5 18.008 10.8358 18.008 11.25V11.258C18.008 11.6722 17.6722 12.008 17.258 12.008H17.25C16.8358 12.008 16.5 11.6722 16.5 11.258V11.25ZM6 12.75C6 12.3358 6.33579 12 6.75 12H7.5C7.91421 12 8.25 12.3358 8.25 12.75C8.25 13.1642 7.91421 13.5 7.5 13.5H6.75C6.33579 13.5 6 13.1642 6 12.75ZM9.75 12.75C9.75 12.3358 10.0858 12 10.5 12H11.25C11.6642 12 12 12.3358 12 12.75C12 13.1642 11.6642 13.5 11.25 13.5H10.5C10.0858 13.5 9.75 13.1642 9.75 12.75ZM16.5 14.25C16.5 13.8358 16.8358 13.5 17.25 13.5H17.258C17.6722 13.5 18.008 13.8358 18.008 14.25V14.258C18.008 14.6722 17.6722 15.008 17.258 15.008H17.25C16.8358 15.008 16.5 14.6722 16.5 14.258V14.25ZM16.5 17.25C16.5 16.8358 16.8358 16.5 17.25 16.5H17.258C17.6722 16.5 18.008 16.8358 18.008 17.25V17.258C18.008 17.6722 17.6722 18.008 17.258 18.008H17.25C16.8358 18.008 16.5 17.6722 16.5 17.258V17.25Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
diff --git a/packages/propel/src/icons/workspace/analytics-icon.tsx b/packages/propel/src/icons/workspace/analytics-icon.tsx
deleted file mode 100644
index c2c09755780..00000000000
--- a/packages/propel/src/icons/workspace/analytics-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function AnalyticsIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M13.375 5.2002C13.375 4.62994 13.3743 4.23962 13.3496 3.9375C13.3255 3.64296 13.2821 3.48707 13.2256 3.37598C13.0938 3.11725 12.8827 2.90624 12.624 2.77441C12.5129 2.71788 12.357 2.67446 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62994 2.625 4.23962 2.62572 3.9375 2.65039C3.64296 2.67446 3.48707 2.71788 3.37598 2.77441C3.11725 2.90624 2.90624 3.11725 2.77441 3.37598C2.71788 3.48707 2.67446 3.64296 2.65039 3.9375C2.62572 4.23962 2.625 4.62994 2.625 5.2002V10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67446 12.357 2.71788 12.5129 2.77441 12.624C2.90624 12.8827 3.11725 13.0938 3.37598 13.2256C3.48707 13.2821 3.64296 13.3255 3.9375 13.3496C4.23962 13.3743 4.62994 13.375 5.2002 13.375H10.7998C11.3701 13.375 11.7604 13.3743 12.0625 13.3496C12.357 13.3255 12.5129 13.2821 12.624 13.2256C12.8827 13.0938 13.0938 12.8827 13.2256 12.624C13.2821 12.5129 13.3255 12.357 13.3496 12.0625C13.3743 11.7604 13.375 11.3701 13.375 10.7998V5.2002ZM4.70801 11.333V8.66699C4.70801 8.32192 4.98798 8.04217 5.33301 8.04199C5.67819 8.04199 5.95801 8.32181 5.95801 8.66699V11.333C5.95801 11.6782 5.67819 11.958 5.33301 11.958C4.98798 11.9578 4.70801 11.6781 4.70801 11.333ZM7.375 11.333V4.66699C7.375 4.32181 7.65482 4.04199 8 4.04199C8.34518 4.04199 8.625 4.32181 8.625 4.66699V11.333C8.625 11.6782 8.34518 11.958 8 11.958C7.65482 11.958 7.375 11.6782 7.375 11.333ZM10.042 11.333V7.33301C10.0422 6.98798 10.3219 6.70801 10.667 6.70801C11.0119 6.70818 11.2918 6.98809 11.292 7.33301V11.333C11.292 11.6781 11.012 11.9578 10.667 11.958C10.3218 11.958 10.042 11.6782 10.042 11.333ZM14.625 10.7998C14.625 11.3493 14.6255 11.7993 14.5957 12.1641C14.5653 12.5361 14.5001 12.8748 14.3389 13.1914C14.0872 13.6853 13.6853 14.0872 13.1914 14.3389C12.8748 14.5001 12.5361 14.5653 12.1641 14.5957C11.7993 14.6255 11.3493 14.625 10.7998 14.625H5.2002C4.65067 14.625 4.20072 14.6255 3.83594 14.5957C3.46388 14.5653 3.12523 14.5001 2.80859 14.3389C2.31467 14.0872 1.9128 13.6853 1.66113 13.1914C1.49985 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65067 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49985 3.12523 1.66113 2.80859C1.9128 2.31467 2.31467 1.9128 2.80859 1.66113C3.12523 1.49985 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65067 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49986 13.1914 1.66113C13.6853 1.9128 14.0872 2.31467 14.3389 2.80859C14.5001 3.12523 14.5653 3.46388 14.5957 3.83594C14.6255 4.20072 14.625 4.65067 14.625 5.2002V10.7998Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/workspace/archive-icon.tsx b/packages/propel/src/icons/workspace/archive-icon.tsx
deleted file mode 100644
index 0aa49bf79de..00000000000
--- a/packages/propel/src/icons/workspace/archive-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function ArchiveIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M12.708 5.95804H3.29105V10.7998C3.29105 11.3701 3.29177 11.7604 3.31644 12.0625C3.34052 12.3573 3.38484 12.5129 3.44144 12.6241C3.57326 12.8828 3.7833 13.0938 4.04202 13.2256C4.15311 13.2822 4.30886 13.3256 4.60355 13.3496C4.90567 13.3743 5.29595 13.375 5.86624 13.375H10.1328C10.7031 13.375 11.0934 13.3743 11.3955 13.3496C11.69 13.3256 11.8459 13.2822 11.9571 13.2256C12.2158 13.0938 12.4268 12.8828 12.5586 12.6241C12.6152 12.5129 12.6586 12.357 12.6826 12.0625C12.7073 11.7604 12.708 11.3701 12.708 10.7998V5.95804ZM9.33304 8.04202C9.67822 8.04203 9.95804 8.32185 9.95804 8.66702C9.95786 9.01205 9.67811 9.29202 9.33304 9.29202H6.66605C6.32113 9.29185 6.04122 9.01194 6.04105 8.66702C6.04105 8.32196 6.32102 8.0422 6.66605 8.04202H9.33304ZM14.041 3.66702C14.041 3.32769 14.0379 3.24861 14.0274 3.19534C13.9715 2.91452 13.7525 2.69474 13.4717 2.6387C13.4185 2.62812 13.3395 2.62503 13 2.62503H3.00003C2.66062 2.62503 2.58156 2.62814 2.52835 2.6387C2.24737 2.69459 2.0276 2.91436 1.97171 3.19534C1.96115 3.24855 1.95804 3.32761 1.95804 3.66702C1.95804 4.00648 1.96113 4.08551 1.97171 4.1387C2.02776 4.41946 2.24752 4.63851 2.52835 4.69437C2.54804 4.69828 2.5862 4.70359 2.68265 4.70609C2.68757 4.70622 2.69241 4.7078 2.6973 4.70804H13.3018C13.3067 4.7078 13.3115 4.70622 13.3164 4.70609C13.413 4.70359 13.452 4.69828 13.4717 4.69437C13.7523 4.63834 13.9714 4.41925 14.0274 4.1387C14.038 4.08546 14.041 4.00645 14.041 3.66702ZM15.291 3.66702C15.291 3.94665 15.2945 4.17765 15.2539 4.38187C15.116 5.07554 14.6164 5.63287 13.958 5.85452V10.7998C13.958 11.3494 13.9585 11.7993 13.9287 12.1641C13.8983 12.5362 13.8332 12.8748 13.6719 13.1914C13.4202 13.6854 13.0184 14.0872 12.5244 14.3389C12.2078 14.5002 11.8692 14.5653 11.4971 14.5957C11.1323 14.6255 10.6824 14.625 10.1328 14.625H5.86624C5.31662 14.625 4.8668 14.6255 4.50199 14.5957C4.17639 14.5691 3.87675 14.5155 3.59476 14.3946L3.47464 14.3389C2.98073 14.0872 2.57885 13.6854 2.32718 13.1914C2.16596 12.8748 2.10074 12.5361 2.07034 12.1641C2.04057 11.7993 2.04105 11.3494 2.04105 10.7998V5.85355C1.38301 5.63175 0.88406 5.07532 0.746126 4.38187C0.705511 4.17758 0.708038 3.94664 0.70804 3.66702C0.70804 3.38721 0.70547 3.1556 0.746126 2.9512C0.900699 2.17451 1.50752 1.56769 2.28421 1.41312C2.48861 1.37246 2.72022 1.37503 3.00003 1.37503H13C13.2797 1.37503 13.5106 1.37251 13.7149 1.41312C14.4917 1.56763 15.0994 2.17438 15.2539 2.9512C15.2946 3.15554 15.291 3.38718 15.291 3.66702Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/workspace/dashboard-icon.tsx b/packages/propel/src/icons/workspace/dashboard-icon.tsx
deleted file mode 100644
index b8e8ae4522f..00000000000
--- a/packages/propel/src/icons/workspace/dashboard-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function DashboardIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M13.3752 2.625H2.62524V7.4668C2.62524 8.03711 2.62497 8.42737 2.64966 8.72949C2.67375 9.02428 2.71803 9.17987 2.77466 9.29102C2.90641 9.54958 3.11671 9.75977 3.37524 9.8916C3.4863 9.94819 3.6422 9.9925 3.93677 10.0166C4.23884 10.0413 4.62934 10.042 5.19946 10.042H10.8C11.3704 10.042 11.7606 10.0413 12.0627 10.0166C12.3575 9.99251 12.5131 9.94823 12.6243 9.8916C12.8829 9.75981 13.0931 9.54963 13.2249 9.29102C13.2815 9.17988 13.3258 9.02426 13.3499 8.72949C13.3745 8.42737 13.3752 8.03711 13.3752 7.4668V2.625ZM10.5598 4.55566C10.8049 4.31293 11.2006 4.3148 11.4436 4.55957C11.6866 4.80474 11.6849 5.20135 11.4397 5.44434L9.6311 7.23633C9.5999 7.26726 9.46941 7.41161 9.29126 7.4873C9.19299 7.52903 9.08863 7.55175 8.98364 7.55566L8.87817 7.55371C8.69021 7.53788 8.52264 7.44647 8.47974 7.42578L7.12622 6.77148L5.4397 8.44434C5.19457 8.68696 4.79881 8.68531 4.55591 8.44043C4.31293 8.19526 4.31465 7.79865 4.55981 7.55566L6.36841 5.76367C6.39962 5.73274 6.53015 5.5884 6.70825 5.5127C6.83939 5.45697 6.9815 5.43463 7.12134 5.44629H7.12231C7.3101 5.46221 7.47687 5.55353 7.51978 5.57422L8.87231 6.22754L10.5598 4.55566ZM14.6252 7.4668C14.6252 8.01642 14.6257 8.46625 14.5959 8.83105C14.5693 9.15661 14.5157 9.45632 14.3948 9.73828L14.3391 9.8584C14.1189 10.2906 13.7836 10.6521 13.3723 10.9043L13.1917 11.0059C12.875 11.1672 12.5364 11.2323 12.1643 11.2627C11.7995 11.2925 11.3497 11.292 10.8 11.292H9.72681L12.3997 13.5195C12.6648 13.7405 12.7007 14.1352 12.4797 14.4004C12.2588 14.6652 11.8649 14.7012 11.5999 14.4805L8.62524 12.001V14C8.62524 14.3451 8.34527 14.6248 8.00024 14.625C7.65507 14.625 7.37524 14.3452 7.37524 14V12L4.39966 14.4805C4.13454 14.701 3.74067 14.6653 3.51978 14.4004C3.2988 14.1352 3.33468 13.7405 3.59985 13.5195L6.27271 11.292H5.19946C4.64993 11.292 4.19996 11.2925 3.83521 11.2627C3.46312 11.2323 3.12451 11.1672 2.80786 11.0059C2.37566 10.7856 2.01416 10.4503 1.76196 10.0391L1.66138 9.8584C1.50002 9.54169 1.43495 9.20321 1.40454 8.83105C1.37474 8.46624 1.37524 8.01645 1.37524 7.4668V2.625H1.33325C0.988074 2.625 0.708252 2.34518 0.708252 2C0.708252 1.65482 0.988074 1.375 1.33325 1.375H14.6663C15.0114 1.375 15.2913 1.65482 15.2913 2C15.2913 2.34518 15.0114 2.625 14.6663 2.625H14.6252V7.4668Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/workspace/draft-icon.tsx b/packages/propel/src/icons/workspace/draft-icon.tsx
deleted file mode 100644
index 85a63c30f62..00000000000
--- a/packages/propel/src/icons/workspace/draft-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function DraftIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M10.5577 2.26554C11.3042 1.51896 12.4862 1.47177 13.2872 2.12491L13.4425 2.26554L13.5821 2.41983C14.2354 3.22077 14.189 4.40271 13.4425 5.14933L5.06648 13.5243C4.85708 13.7337 4.68297 13.9138 4.47077 14.0439C4.29575 14.151 4.10496 14.2303 3.90534 14.2782C3.66318 14.3364 3.41264 14.3319 3.11628 14.3319H2.00007C1.65489 14.3319 1.37507 14.0521 1.37507 13.7069V12.5907C1.37507 12.2946 1.37079 12.0446 1.42878 11.8026C1.47675 11.6028 1.55593 11.4113 1.66316 11.2362H1.66413C1.79415 11.0241 1.97323 10.85 2.18269 10.6405L10.5577 2.26554ZM13.5391 11.9521C13.772 11.6975 14.1672 11.6793 14.4219 11.912C14.6767 12.1449 14.6939 12.541 14.461 12.7958L13.795 13.5243V13.5253C13.3294 14.0345 12.6848 14.3319 12.0001 14.3319C11.401 14.3319 10.8332 14.104 10.3887 13.706L10.2061 13.5253C9.96412 13.2617 9.64853 13.1259 9.33308 13.1259C9.01784 13.126 8.703 13.2618 8.46101 13.5253C8.22763 13.7796 7.83155 13.7968 7.57722 13.5634C7.32321 13.3301 7.30605 12.9348 7.53913 12.6806C8.00515 12.1727 8.64906 11.876 9.33308 11.8759C10.0172 11.8759 10.6619 12.1725 11.128 12.6806V12.6816C11.3696 12.9458 11.6848 13.0819 12.0001 13.0819C12.3153 13.0819 12.6305 12.9458 12.8721 12.6816L13.5391 11.9521ZM2.62507 13.0819H3.11628C3.47218 13.0819 3.54863 13.078 3.61335 13.0624C3.68545 13.0451 3.75417 13.0162 3.81745 12.9775C3.87425 12.9426 3.93123 12.892 4.18269 12.6405L12.5577 4.26554C12.8659 3.95734 12.8659 3.45754 12.5577 3.14933V3.14835C12.2494 2.84073 11.7504 2.84139 11.4425 3.14933L3.06648 11.5243C2.81511 11.7757 2.76438 11.8328 2.72956 11.8896C2.69077 11.9529 2.66192 12.0217 2.6446 12.0937C2.62904 12.1585 2.62507 12.2349 2.62507 12.5907V13.0819Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/workspace/home-icon.tsx b/packages/propel/src/icons/workspace/home-icon.tsx
deleted file mode 100644
index 30f53eaf84a..00000000000
--- a/packages/propel/src/icons/workspace/home-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function HomeIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M9.36825 8.5908C9.3668 8.57319 9.36465 8.5605 9.36337 8.55174C9.36224 8.55047 9.36073 8.54993 9.35946 8.54881C9.35064 8.54753 9.33797 8.54536 9.3204 8.54393C9.24062 8.53741 9.13053 8.53709 8.93368 8.53709H7.06649C6.86964 8.53709 6.75955 8.53741 6.67977 8.54393C6.66156 8.54542 6.64858 8.54751 6.63974 8.54881C6.63851 8.54993 6.63691 8.55048 6.63583 8.55174C6.63456 8.5605 6.63336 8.57328 6.63192 8.5908C6.6254 8.67062 6.62509 8.78148 6.62509 8.9785V13.2871H9.37509V8.9785C9.37509 8.78148 9.37477 8.67061 9.36825 8.5908ZM10.6251 13.2871H11.8663C12.2499 13.2871 12.5005 13.2861 12.6915 13.2705C12.8752 13.2555 12.9486 13.2292 12.9884 13.209L13.0831 13.1513C13.173 13.086 13.247 13.0003 13.2979 12.9004C13.3182 12.8605 13.3444 12.7869 13.3595 12.6035C13.3751 12.4125 13.3751 12.162 13.3751 11.7783V6.95506C13.3751 6.53721 13.3695 6.44728 13.3487 6.37303C13.3255 6.29014 13.2876 6.21187 13.2364 6.14256C13.1906 6.08059 13.123 6.02126 12.7931 5.76463L8.27157 2.24803C8.14754 2.15155 8.08003 2.09893 8.02841 2.06444C8.01732 2.05703 8.00875 2.05221 8.00302 2.04881C8.00102 2.04867 7.99915 2.04867 7.99716 2.04881C7.99143 2.05221 7.98285 2.05703 7.97177 2.06444C7.92015 2.09893 7.85263 2.15155 7.7286 2.24803L3.20712 5.76463C2.8772 6.02125 2.80961 6.08057 2.76376 6.14256C2.71257 6.2118 2.67466 6.29012 2.65145 6.37303C2.63071 6.44726 2.62509 6.53709 2.62509 6.95506V11.7783C2.62509 12.162 2.62511 12.4125 2.64071 12.6035C2.65567 12.7862 2.68197 12.8595 2.70224 12.8994C2.77013 13.0326 2.87866 13.1411 3.01181 13.209L3.10653 13.2422C3.15275 13.253 3.21704 13.263 3.30868 13.2705C3.49965 13.2861 3.75025 13.2871 4.13388 13.2871H5.37509V8.9785C5.37509 8.80211 5.37418 8.63176 5.38583 8.48924C5.39807 8.33956 5.42717 8.16607 5.51571 7.99217L5.56552 7.9033C5.68964 7.70078 5.8676 7.53611 6.08016 7.42772L6.21005 7.37108C6.33947 7.32494 6.46577 7.30702 6.57821 7.29783C6.72062 7.28621 6.8903 7.28709 7.06649 7.28709H8.93368C9.10988 7.28709 9.27956 7.28621 9.42196 7.29783C9.5344 7.30702 9.66071 7.32494 9.79013 7.37108L9.92001 7.42772L10.0089 7.47752C10.2111 7.60162 10.3761 7.77956 10.4845 7.99217C10.573 8.16607 10.6021 8.33956 10.6143 8.48924C10.626 8.63176 10.6251 8.80211 10.6251 8.9785V13.2871ZM14.6251 11.7783C14.6251 12.1413 14.6253 12.4514 14.6046 12.7051C14.5832 12.966 14.5362 13.2224 14.4112 13.4678C14.2235 13.836 13.9241 14.1356 13.5558 14.3232C13.3104 14.4482 13.054 14.4953 12.7931 14.5166C12.5394 14.5373 12.2292 14.5371 11.8663 14.5371H4.13388C3.77098 14.5371 3.46075 14.5373 3.20712 14.5166C2.94616 14.4953 2.6898 14.4482 2.44442 14.3232C2.07603 14.1356 1.7767 13.836 1.58895 13.4678C1.46397 13.2224 1.41693 12.966 1.39559 12.7051C1.37487 12.4514 1.37509 12.1413 1.37509 11.7783V6.95506C1.37509 6.60766 1.36953 6.31438 1.44735 6.03611C1.51154 5.80678 1.61729 5.59086 1.75888 5.3994C1.93074 5.16703 2.16527 4.99065 2.43954 4.77733L6.96102 1.26072C7.14957 1.11407 7.38218 0.918674 7.6622 0.842755C7.88326 0.782884 8.11691 0.782884 8.33798 0.842755C8.618 0.918674 8.8506 1.11407 9.03915 1.26072L13.5606 4.77733C13.8349 4.99063 14.0694 5.16701 14.2413 5.3994L14.3409 5.54686C14.4333 5.69906 14.5046 5.86401 14.5528 6.03611C14.6306 6.31436 14.6251 6.60762 14.6251 6.95506V11.7783Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/workspace/inbox-icon.tsx b/packages/propel/src/icons/workspace/inbox-icon.tsx
deleted file mode 100644
index 66814a85fae..00000000000
--- a/packages/propel/src/icons/workspace/inbox-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function InboxIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M14.0401 8.62507H12.0781C11.8582 8.62516 11.657 8.74968 11.5586 8.94636C11.2485 9.56676 10.6144 9.95906 9.92091 9.95906H6.07814C5.38471 9.95897 4.75057 9.56666 4.44044 8.94636C4.34199 8.74967 4.1409 8.62507 3.92091 8.62507H1.959C1.95888 8.66367 1.95802 8.70708 1.95802 8.75593V10.1339C1.95802 10.7042 1.95872 11.0944 1.98341 11.3966C2.00749 11.6912 2.05084 11.847 2.10743 11.9581C2.23925 12.2168 2.45027 12.4269 2.709 12.5587C2.8201 12.6153 2.97574 12.6596 3.27052 12.6837C3.57264 12.7083 3.96298 12.7091 4.53321 12.7091H11.4668C12.0369 12.7091 12.4274 12.7083 12.7295 12.6837C13.0241 12.6596 13.1799 12.6153 13.291 12.5587C13.5496 12.4268 13.7599 12.2167 13.8916 11.9581C13.9482 11.8469 13.9925 11.6913 14.0166 11.3966C14.0413 11.0944 14.041 10.7042 14.041 10.1339V8.75593C14.041 8.70708 14.0402 8.66367 14.0401 8.62507ZM5.97755 3.29207C5.21433 3.29207 4.98135 3.30027 4.78712 3.36726C4.59456 3.43373 4.41898 3.5421 4.27345 3.68464C4.12668 3.82841 4.01513 4.03332 3.67384 4.71589L2.34474 7.37507H3.92091C4.61442 7.37507 5.24844 7.7674 5.5586 8.38777C5.657 8.58446 5.85819 8.70897 6.07814 8.70906H9.92091C10.1409 8.70906 10.342 8.58445 10.4404 8.38777C10.7506 7.76744 11.3847 7.37516 12.0781 7.37507H13.6543L12.3252 4.71589C11.9839 4.03325 11.8724 3.82842 11.7256 3.68464C11.58 3.5421 11.4046 3.4337 11.2119 3.36726C11.0177 3.30027 10.7847 3.29207 10.0215 3.29207H5.97755ZM15.291 10.1339C15.291 10.6835 15.2915 11.1333 15.2617 11.4981C15.2351 11.8236 15.1824 12.1234 15.0615 12.4053L15.0049 12.5255C14.7533 13.0193 14.3522 13.4213 13.8584 13.6729C13.5417 13.8343 13.2032 13.8993 12.8311 13.9298C12.4663 13.9596 12.0164 13.9591 11.4668 13.9591H4.53321C3.98371 13.9591 3.53374 13.9595 3.16896 13.9298C2.79695 13.8994 2.45821 13.8342 2.14161 13.6729C1.70944 13.4527 1.34794 13.1173 1.09571 12.7061L0.994152 12.5255C0.832797 12.2088 0.767723 11.8703 0.737316 11.4981C0.707517 11.1333 0.708019 10.6835 0.708019 10.1339V8.75593C0.708019 8.49089 0.706677 8.29939 0.73341 8.10847C0.755917 7.94781 0.793061 7.78957 0.844738 7.63582L0.896496 7.4991C0.952354 7.36314 1.02352 7.2226 1.11232 7.045L2.55665 4.15632C2.85737 3.55488 3.06727 3.11738 3.39943 2.79207C3.67739 2.51984 4.01208 2.31249 4.37989 2.18562C4.81947 2.03402 5.30497 2.04207 5.97755 2.04207H10.0215C10.694 2.04207 11.1796 2.03412 11.6192 2.18562C11.987 2.31249 12.3226 2.51981 12.6006 2.79207C12.9326 3.11739 13.1426 3.5549 13.4434 4.15632L14.8877 7.045C15.0062 7.28198 15.0928 7.4524 15.1543 7.63484V7.63582C15.206 7.78963 15.2432 7.94783 15.2656 8.10847C15.2924 8.29945 15.291 8.49091 15.291 8.75593V10.1339Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/workspace/index.ts b/packages/propel/src/icons/workspace/index.ts
deleted file mode 100644
index ddcbd68f8d1..00000000000
--- a/packages/propel/src/icons/workspace/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./analytics-icon";
-export * from "./archive-icon";
-export * from "./dashboard-icon";
-export * from "./draft-icon";
-export * from "./home-icon";
-export * from "./inbox-icon";
-export * from "./multiple-sticky-icon";
-export * from "./project-icon";
-export * from "./your-work-icon";
diff --git a/packages/propel/src/icons/workspace/multiple-sticky-icon.tsx b/packages/propel/src/icons/workspace/multiple-sticky-icon.tsx
deleted file mode 100644
index 7c56fe1c6a0..00000000000
--- a/packages/propel/src/icons/workspace/multiple-sticky-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function MultipleStickyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M13.6162 9.12793V7.52246C13.6162 7.09217 13.6155 6.80665 13.5977 6.58789C13.5804 6.37643 13.5499 6.28228 13.5205 6.22461C13.4367 6.06019 13.3031 5.92661 13.1387 5.84277C12.8312 5.6861 12.7086 5.30949 12.8652 5.00195C13.0219 4.69439 13.3985 4.57182 13.7061 4.72852C14.1059 4.93224 14.431 5.25738 14.6348 5.65723C14.7689 5.92046 14.8202 6.19754 14.8438 6.48633C14.8667 6.76775 14.8662 7.1129 14.8662 7.52246V9.12793C14.8662 9.46504 14.8704 9.73576 14.8076 9.99707C14.7556 10.2138 14.6692 10.4213 14.5527 10.6113C14.4124 10.8402 14.2186 11.0285 13.9805 11.2666L11.3857 13.8613C11.1476 14.0994 10.9593 14.2933 10.7305 14.4336C10.5404 14.55 10.333 14.6364 10.1162 14.6885C9.85491 14.7512 9.58418 14.7471 9.24707 14.7471H7.6416C7.23205 14.7471 6.88689 14.7476 6.60547 14.7246C6.31669 14.701 6.03959 14.6497 5.77637 14.5156C5.37654 14.3119 5.05138 13.9867 4.84766 13.5869C4.69095 13.2794 4.81354 12.9028 5.12109 12.7461C5.42863 12.5895 5.80523 12.712 5.96192 13.0195C6.04576 13.1839 6.17935 13.3175 6.34375 13.4014C6.40139 13.4307 6.49555 13.4612 6.70703 13.4785C6.92579 13.4964 7.21132 13.4971 7.6416 13.4971H9.24707C9.4184 13.4971 9.53371 13.4947 9.61621 13.4922V12.5225C9.61621 12.1129 9.6157 11.7677 9.63867 11.4863C9.66227 11.1975 9.71353 10.9205 9.84766 10.6572C10.0514 10.2574 10.3765 9.93224 10.7764 9.72852C11.0396 9.5944 11.3167 9.54313 11.6055 9.51953C11.8869 9.49656 12.232 9.49707 12.6416 9.49707H13.6113C13.6138 9.41457 13.6162 9.29926 13.6162 9.12793ZM10.6162 6.12793V4.52246C10.6162 4.09217 10.6155 3.80665 10.5977 3.58789C10.5804 3.37643 10.5499 3.28228 10.5205 3.22461C10.4367 3.06019 10.3031 2.92661 10.1387 2.84277C10.081 2.81339 9.98685 2.7829 9.77539 2.76563C9.55664 2.74776 9.27112 2.74707 8.84082 2.74707H4.6416C4.21132 2.74707 3.92579 2.74776 3.70703 2.76563C3.49556 2.78291 3.40139 2.81341 3.34375 2.84277C3.17934 2.92662 3.04576 3.06021 2.96192 3.22461C2.93253 3.28228 2.90204 3.37643 2.88477 3.58789C2.8669 3.80665 2.86621 4.09217 2.86621 4.52246V8.72168C2.86621 9.15196 2.8669 9.43749 2.88477 9.65625C2.90205 9.86773 2.93255 9.96189 2.96192 10.0195C3.04576 10.1839 3.17935 10.3175 3.34375 10.4014C3.40139 10.4307 3.49555 10.4612 3.70703 10.4785C3.92579 10.4964 4.21132 10.4971 4.6416 10.4971H6.24707C6.4184 10.4971 6.53371 10.4947 6.61621 10.4922V9.52246C6.61621 9.11291 6.6157 8.76775 6.63867 8.48633C6.66227 8.19755 6.71353 7.92046 6.84766 7.65723C7.05137 7.25741 7.37651 6.93224 7.77637 6.72852C8.0396 6.5944 8.31668 6.54313 8.60547 6.51953C8.88689 6.49656 9.23204 6.49707 9.6416 6.49707H10.6113C10.6138 6.41457 10.6162 6.29926 10.6162 6.12793ZM10.8662 12.6133L12.7324 10.7471H12.6416C12.2113 10.7471 11.9258 10.7478 11.707 10.7656C11.4956 10.7829 11.4014 10.8134 11.3438 10.8428C11.1794 10.9266 11.0458 11.0602 10.9619 11.2246C10.9325 11.2822 10.902 11.3764 10.8848 11.5879C10.8669 11.8067 10.8662 12.0922 10.8662 12.5225V12.6133ZM7.86621 9.61328L9.73242 7.74707H9.6416C9.21131 7.74707 8.92579 7.74776 8.70703 7.76563C8.49557 7.7829 8.40142 7.81339 8.34375 7.84277C8.17936 7.9266 8.04576 8.06019 7.96192 8.22461C7.93255 8.28225 7.90205 8.37642 7.88477 8.58789C7.8669 8.80665 7.86621 9.09218 7.86621 9.52246V9.61328ZM11.8662 6.12793C11.8662 6.46504 11.8704 6.73576 11.8076 6.99707C11.7556 7.21382 11.6692 7.42126 11.5527 7.61133C11.4124 7.84018 11.2186 8.02845 10.9805 8.2666L8.38574 10.8613C8.1476 11.0995 7.95931 11.2933 7.73047 11.4336C7.54042 11.55 7.33298 11.6364 7.11621 11.6885C6.85491 11.7512 6.58418 11.7471 6.24707 11.7471H4.6416C4.23205 11.7471 3.88689 11.7476 3.60547 11.7246C3.31669 11.701 3.03959 11.6497 2.77637 11.5156C2.37654 11.3119 2.05138 10.9867 1.84766 10.5869C1.71354 10.3237 1.66227 10.0466 1.63867 9.75781C1.6157 9.4764 1.61621 9.13124 1.61621 8.72168V4.52246C1.61621 4.1129 1.6157 3.76774 1.63867 3.48633C1.66227 3.19754 1.71355 2.92045 1.84766 2.65723C2.05139 2.25738 2.37655 1.93223 2.77637 1.72852C3.0396 1.59439 3.31669 1.54313 3.60547 1.51953C3.88689 1.49656 4.23205 1.49707 4.6416 1.49707H8.84082C9.25038 1.49707 9.59554 1.49656 9.87695 1.51953C10.1657 1.54313 10.4428 1.5944 10.7061 1.72852C11.1059 1.93224 11.431 2.25738 11.6348 2.65723C11.7689 2.92046 11.8202 3.19754 11.8438 3.48633C11.8667 3.76774 11.8662 4.1129 11.8662 4.52246V6.12793Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/workspace/project-icon.tsx b/packages/propel/src/icons/workspace/project-icon.tsx
deleted file mode 100644
index 655556eb65d..00000000000
--- a/packages/propel/src/icons/workspace/project-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function ProjectIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M14.041 9.77251C13.6575 9.86273 13.1544 9.9762 12.5771 10.0879C11.271 10.3407 9.55874 10.5996 8 10.5997C6.44125 10.5997 4.7291 10.3408 3.42285 10.0879C2.84526 9.97614 2.34163 9.86276 1.95801 9.77251V11.8409C1.95801 12.2244 1.95804 12.4751 1.97363 12.6661C1.98864 12.8498 2.01488 12.9231 2.03516 12.9629C2.10308 13.0962 2.21151 13.2046 2.34473 13.2725L2.43945 13.3047C2.48568 13.3156 2.54989 13.3265 2.6416 13.334C2.83257 13.3496 3.0832 13.3497 3.4668 13.3497H12.5332C12.9165 13.3497 13.1665 13.3496 13.3574 13.334C13.5407 13.319 13.6144 13.2928 13.6543 13.2725C13.7875 13.2046 13.896 13.0961 13.9639 12.9629L13.9971 12.8682C14.0079 12.822 14.0179 12.7577 14.0254 12.6661C14.041 12.4751 14.041 12.2245 14.041 11.8409V9.77251ZM3.4668 5.26665C3.08319 5.26665 2.83257 5.26668 2.6416 5.28227C2.45792 5.29728 2.38454 5.32351 2.34473 5.34379C2.22354 5.40557 2.12394 5.50122 2.05566 5.61821C2.05373 5.62932 2.0514 5.64383 2.04883 5.66215C2.03783 5.74053 2.02735 5.85115 2.01758 5.99126C1.99814 6.26994 1.98459 6.63077 1.97559 7.01372C1.96343 7.53069 1.96026 8.07474 1.95898 8.48833C2.00287 8.49907 2.0493 8.51164 2.09863 8.52348C2.48215 8.61553 3.02514 8.73847 3.66016 8.86137C4.9372 9.10854 6.55887 9.34965 8 9.34965C9.44093 9.34962 11.062 9.1085 12.3389 8.86137C12.9737 8.7385 13.5169 8.61552 13.9004 8.52348C13.9493 8.51175 13.9955 8.49898 14.0391 8.48833C14.0378 8.07474 14.0356 7.53069 14.0234 7.01372C14.0144 6.63077 14.0009 6.26994 13.9814 5.99126C13.9717 5.85117 13.9612 5.74052 13.9502 5.66215C13.9475 5.6432 13.9444 5.62848 13.9424 5.61723C13.8741 5.50082 13.7751 5.40536 13.6543 5.34379C13.6145 5.32353 13.5409 5.29727 13.3574 5.28227C13.1665 5.26671 12.9165 5.26665 12.5332 5.26665H3.4668ZM7.375 7.73442V7.72465C7.375 7.37948 7.65482 7.09965 8 7.09965C8.34503 7.09983 8.625 7.37958 8.625 7.72465V7.73442C8.625 8.07949 8.34503 8.35924 8 8.35942C7.65482 8.35942 7.375 8.0796 7.375 7.73442ZM8 2.59965C7.34034 2.59965 7.13232 2.60514 6.97754 2.64653C6.50307 2.77367 6.13203 3.14468 6.00488 3.61919C5.981 3.70849 5.97063 3.81544 5.96484 4.01665H10.0342C10.0284 3.8154 10.018 3.70851 9.99414 3.61919C9.86702 3.14477 9.49683 2.77373 9.02246 2.64653C8.86766 2.60505 8.65998 2.59966 8 2.59965ZM15.291 11.8409C15.291 12.2037 15.2922 12.514 15.2715 12.7676C15.2502 13.0285 15.2031 13.285 15.0781 13.5303C14.8904 13.8988 14.5902 14.1981 14.2217 14.3858C13.9764 14.5107 13.7208 14.5578 13.46 14.5791C13.2063 14.5999 12.8962 14.5997 12.5332 14.5997H3.4668C3.10389 14.5997 2.79368 14.5998 2.54004 14.5791C2.27905 14.5578 2.02275 14.5108 1.77734 14.3858C1.4089 14.1981 1.10958 13.8987 0.921875 13.5303C0.796827 13.2849 0.749839 13.0286 0.728516 12.7676C0.707814 12.514 0.708008 12.2038 0.708008 11.8409V8.97465C0.708008 8.60181 0.708206 7.76501 0.726563 6.98442C0.735721 6.59503 0.749071 6.21171 0.770508 5.90434C0.781165 5.75155 0.794714 5.60812 0.811524 5.48833C0.82359 5.40234 0.849238 5.22862 0.921875 5.08598L0.99707 4.95122C1.18524 4.64429 1.45479 4.39388 1.77734 4.22954C2.0227 4.10455 2.27911 4.0575 2.54004 4.03618C2.79366 4.01548 3.10391 4.01665 3.4668 4.01665H4.71387C4.72148 3.7397 4.74113 3.50667 4.79785 3.29497C5.04064 2.3894 5.74777 1.68228 6.65332 1.4395C7.00717 1.34469 7.42024 1.34965 8 1.34965C8.57959 1.34965 8.99192 1.34471 9.3457 1.4395C10.2514 1.68221 10.9594 2.3892 11.2021 3.29497C11.2589 3.50666 11.2775 3.73971 11.2852 4.01665H12.5332C12.8962 4.01665 13.2063 4.01545 13.46 4.03618C13.7207 4.0575 13.9765 4.1047 14.2217 4.22954C14.5901 4.41727 14.8904 4.71742 15.0781 5.08598C15.1506 5.22855 15.1754 5.40238 15.1875 5.48833C15.2043 5.60812 15.2179 5.75156 15.2285 5.90434C15.25 6.21171 15.2643 6.59503 15.2734 6.98442C15.2918 7.76501 15.291 8.60181 15.291 8.97465V11.8409Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/icons/workspace/your-work-icon.tsx b/packages/propel/src/icons/workspace/your-work-icon.tsx
deleted file mode 100644
index c993bf9710a..00000000000
--- a/packages/propel/src/icons/workspace/your-work-icon.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { IconWrapper } from "../icon-wrapper";
-import type { ISvgIcons } from "../type";
-
-export function YourWorkIcon({ color = "currentColor", ...rest }: ISvgIcons) {
-  return (
-    <IconWrapper color={color} {...rest}>
-      <path
-        d="M0.7083 14C0.7083 13.1154 0.701518 12.5344 0.849901 12.0449C1.16902 10.9929 1.99225 10.1687 3.04424 9.84961C3.53385 9.70109 4.11539 9.70801 5.00029 9.70801H8.00029C8.34521 9.70818 8.62512 9.98809 8.62529 10.333C8.62529 10.6781 8.34532 10.9578 8.00029 10.958H5.00029C4.0248 10.958 3.67493 10.9649 3.40752 11.0459C2.75503 11.2438 2.24415 11.7548 2.04619 12.4072C1.96506 12.6747 1.9583 13.0242 1.9583 14C1.9583 14.3452 1.67848 14.625 1.3333 14.625C0.988122 14.625 0.7083 14.3452 0.7083 14ZM9.04131 5C9.04131 3.68832 7.97798 2.625 6.66631 2.625C5.35478 2.62518 4.29131 3.68843 4.29131 5C4.29131 6.31157 5.35478 7.37482 6.66631 7.375C7.97798 7.375 9.04131 6.31168 9.04131 5ZM10.2913 5C10.2913 7.00203 8.66834 8.625 6.66631 8.625C4.66442 8.62482 3.04131 7.00192 3.04131 5C3.04131 2.99808 4.66442 1.37518 6.66631 1.375C8.66834 1.375 10.2913 2.99797 10.2913 5Z"
-        fill={color}
-      />
-      <path
-        d="M11.6338 9.27539C11.9026 9.27559 12.1415 9.44806 12.2265 9.70312L13.0332 12.124L13.1406 11.8027L13.1797 11.7109C13.2861 11.5072 13.4981 11.375 13.7334 11.375H14.667C15.0119 11.3752 15.2917 11.6551 15.292 12C15.292 12.3451 15.012 12.6248 14.667 12.625H14.1836L13.6259 14.2979C13.5409 14.5531 13.3022 14.7256 13.0332 14.7256C12.7642 14.7255 12.5255 14.553 12.4404 14.2979L11.6328 11.877L11.5263 12.1982C11.4412 12.4533 11.2024 12.6249 10.9336 12.625H9.99997C9.65479 12.625 9.37497 12.3452 9.37497 12C9.37518 11.655 9.65492 11.375 9.99997 11.375H10.4834L11.04 9.70312C11.1251 9.44791 11.3647 9.27539 11.6338 9.27539Z"
-        fill={color}
-      />
-    </IconWrapper>
-  );
-}
diff --git a/packages/propel/src/input/index.ts b/packages/propel/src/input/index.ts
deleted file mode 100644
index 4859616662e..00000000000
--- a/packages/propel/src/input/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./input";
diff --git a/packages/propel/src/input/input.stories.tsx b/packages/propel/src/input/input.stories.tsx
deleted file mode 100644
index 343f0033ea3..00000000000
--- a/packages/propel/src/input/input.stories.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Input } from "./index";
-
-const meta: Meta<typeof Input> = {
-  title: "Components/Input",
-  component: Input,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    mode: {
-      control: "select",
-      options: ["primary", "transparent", "true-transparent"],
-    },
-    inputSize: {
-      control: "select",
-      options: ["xs", "sm", "md"],
-    },
-    hasError: {
-      control: "boolean",
-    },
-    type: {
-      control: "select",
-      options: ["text", "email", "password", "number", "tel", "url", "search"],
-    },
-    autoComplete: {
-      control: "select",
-      options: ["on", "off"],
-    },
-    disabled: {
-      control: "boolean",
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Input>;
-
-const createStory = (args: Partial<React.ComponentProps<typeof Input>>): Story => ({
-  args: { placeholder: "Enter text...", className: "w-[400px]", ...args },
-});
-
-const createShowcaseStory = (
-  title: string,
-  sections: Array<{ label: string; props: Partial<React.ComponentProps<typeof Input>> }>
-): Story => ({
-  render: () => (
-    <div className="w-[400px] space-y-4">
-      <div className="space-y-2">
-        <h3 className="text-13 font-medium">{title}</h3>
-        <div className="space-y-2">
-          {sections.map(({ label, props }, index) => (
-            <div key={index} className="w-full">
-              <label className="text-gray-500 text-11">{label}</label>
-              <Input className="w-full" {...props} />
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  ),
-});
-
-export const Default = createStory({});
-
-export const Primary = createStory({
-  mode: "primary",
-  placeholder: "Primary input",
-});
-
-export const Transparent = createStory({
-  mode: "transparent",
-  placeholder: "Transparent input",
-});
-
-export const TrueTransparent = createStory({
-  mode: "true-transparent",
-  placeholder: "True transparent input",
-});
-
-export const ExtraSmall = createStory({
-  inputSize: "xs",
-  placeholder: "Extra small input",
-});
-
-export const Small = createStory({
-  inputSize: "sm",
-  placeholder: "Small input",
-});
-
-export const Medium = createStory({
-  inputSize: "md",
-  placeholder: "Medium input",
-});
-
-export const WithError = createStory({
-  hasError: true,
-  placeholder: "Input with error",
-  defaultValue: "Invalid input",
-});
-
-export const Disabled = createStory({
-  disabled: true,
-  placeholder: "Disabled input",
-  defaultValue: "Cannot edit this",
-});
-
-export const WithValue = createStory({
-  defaultValue: "Pre-filled value",
-  placeholder: "Input with value",
-});
-
-export const Email = createStory({
-  type: "email",
-  placeholder: "Enter your email",
-  autoComplete: "on",
-});
-
-export const Password = createStory({
-  type: "password",
-  placeholder: "Enter your password",
-  autoComplete: "off",
-});
-
-export const Number = createStory({
-  type: "number",
-  placeholder: "Enter a number",
-});
-
-export const Search = createStory({
-  type: "search",
-  placeholder: "Search...",
-});
-
-export const AllModes = createShowcaseStory("Input Modes", [
-  { label: "Primary", props: { mode: "primary", placeholder: "Primary input" } },
-  { label: "Transparent", props: { mode: "transparent", placeholder: "Transparent input" } },
-  { label: "True Transparent", props: { mode: "true-transparent", placeholder: "True transparent input" } },
-]);
-
-export const AllSizes = createShowcaseStory("Input Sizes", [
-  { label: "Extra Small (xs)", props: { inputSize: "xs", placeholder: "Extra small input" } },
-  { label: "Small (sm)", props: { inputSize: "sm", placeholder: "Small input" } },
-  { label: "Medium (md)", props: { inputSize: "md", placeholder: "Medium input" } },
-]);
-
-export const AllStates = createShowcaseStory("Input States", [
-  { label: "Normal", props: { placeholder: "Normal input" } },
-  { label: "With Error", props: { hasError: true, placeholder: "Input with error" } },
-  { label: "Disabled", props: { disabled: true, placeholder: "Disabled input" } },
-  { label: "With Value", props: { defaultValue: "Pre-filled value", placeholder: "Input with value" } },
-]);
diff --git a/packages/propel/src/input/input.tsx b/packages/propel/src/input/input.tsx
deleted file mode 100644
index e6b8c094d13..00000000000
--- a/packages/propel/src/input/input.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-import { Input as BaseInput } from "@base-ui-components/react/input";
-// helpers
-import { cn } from "../utils";
-
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  mode?: "primary" | "transparent" | "true-transparent";
-  inputSize?: "xs" | "sm" | "md";
-  hasError?: boolean;
-}
-
-const Input = React.forwardRef(function Input(props: InputProps, ref: React.ForwardedRef<HTMLInputElement>) {
-  const {
-    id,
-    type,
-    name,
-    mode = "primary",
-    inputSize = "sm",
-    hasError = false,
-    className = "",
-    autoComplete = "off",
-    ...rest
-  } = props;
-
-  return (
-    <BaseInput
-      id={id}
-      ref={ref}
-      type={type}
-      name={name}
-      className={cn(
-        "placeholder-tertiary block rounded-md border-subtle-1 bg-layer-2 text-13 focus:outline-none",
-        {
-          "rounded-md border-[0.5px]": mode === "primary",
-          "rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-accent-strong":
-            mode === "transparent",
-          "rounded-sm border-none bg-transparent ring-0": mode === "true-transparent",
-          "border-danger-strong": hasError,
-          "px-1.5 py-1": inputSize === "xs",
-          "px-3 py-2": inputSize === "sm",
-          "p-3": inputSize === "md",
-        },
-        className
-      )}
-      aria-invalid={hasError || undefined}
-      autoComplete={autoComplete}
-      {...rest}
-    />
-  );
-});
-
-Input.displayName = "form-input-field";
-
-export { Input };
diff --git a/packages/propel/src/menu/index.ts b/packages/propel/src/menu/index.ts
deleted file mode 100644
index 9b2b1a9f0fe..00000000000
--- a/packages/propel/src/menu/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./menu";
-export * from "./types";
diff --git a/packages/propel/src/menu/menu.stories.tsx b/packages/propel/src/menu/menu.stories.tsx
deleted file mode 100644
index bd843fabf6d..00000000000
--- a/packages/propel/src/menu/menu.stories.tsx
+++ /dev/null
@@ -1,274 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import {
-  HelpOutline,
-  LogOutOutline,
-  MailOutline,
-  SettingsOutline,
-  SubscribeOutline,
-  UserOutline,
-} from "@makeplane/propel/icons";
-import { Menu } from "./menu";
-
-const meta = {
-  title: "Components/Menu",
-  component: Menu,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  subcomponents: {
-    MenuItem: Menu.MenuItem,
-    SubMenu: Menu.SubMenu,
-  },
-  args: {
-    children: null,
-  },
-} satisfies Meta<typeof Menu>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render() {
-    return (
-      <Menu label="Options">
-        <Menu.MenuItem onClick={() => alert("Option 1 clicked")}>Option 1</Menu.MenuItem>
-        <Menu.MenuItem onClick={() => alert("Option 2 clicked")}>Option 2</Menu.MenuItem>
-        <Menu.MenuItem onClick={() => alert("Option 3 clicked")}>Option 3</Menu.MenuItem>
-      </Menu>
-    );
-  },
-};
-
-export const WithIcons: Story = {
-  render() {
-    return (
-      <Menu label="Account">
-        <Menu.MenuItem onClick={() => alert("Profile")}>
-          <div className="flex items-center gap-2">
-            <UserOutline className="h-4 w-4" />
-            <span>Profile</span>
-          </div>
-        </Menu.MenuItem>
-        <Menu.MenuItem onClick={() => alert("Settings")}>
-          <div className="flex items-center gap-2">
-            <SettingsOutline className="h-4 w-4" />
-            <span>Settings</span>
-          </div>
-        </Menu.MenuItem>
-        <Menu.MenuItem onClick={() => alert("Messages")}>
-          <div className="flex items-center gap-2">
-            <MailOutline className="h-4 w-4" />
-            <span>Messages</span>
-          </div>
-        </Menu.MenuItem>
-        <Menu.MenuItem onClick={() => alert("Logout")}>
-          <div className="flex items-center gap-2">
-            <LogOutOutline className="h-4 w-4" />
-            <span>Logout</span>
-          </div>
-        </Menu.MenuItem>
-      </Menu>
-    );
-  },
-};
-
-export const Ellipsis: Story = {
-  render() {
-    return (
-      <Menu ellipsis>
-        <Menu.MenuItem onClick={() => alert("Edit")}>Edit</Menu.MenuItem>
-        <Menu.MenuItem onClick={() => alert("Duplicate")}>Duplicate</Menu.MenuItem>
-        <Menu.MenuItem onClick={() => alert("Delete")}>Delete</Menu.MenuItem>
-      </Menu>
-    );
-  },
-};
-
-export const VerticalEllipsis: Story = {
-  render() {
-    return (
-      <Menu verticalEllipsis>
-        <Menu.MenuItem onClick={() => alert("Edit")}>Edit</Menu.MenuItem>
-        <Menu.MenuItem onClick={() => alert("Duplicate")}>Duplicate</Menu.MenuItem>
-        <Menu.MenuItem onClick={() => alert("Delete")}>Delete</Menu.MenuItem>
-      </Menu>
-    );
-  },
-};
-
-export const NoBorder: Story = {
-  render() {
-    return (
-      <Menu label="Actions" noBorder>
-        <Menu.MenuItem onClick={() => alert("Action 1")}>Action 1</Menu.MenuItem>
-        <Menu.MenuItem onClick={() => alert("Action 2")}>Action 2</Menu.MenuItem>
-        <Menu.MenuItem onClick={() => alert("Action 3")}>Action 3</Menu.MenuItem>
-      </Menu>
-    );
-  },
-};
-
-export const NoChevron: Story = {
-  render() {
-    return (
-      <Menu label="Menu" noChevron>
-        <Menu.MenuItem onClick={() => alert("Item 1")}>Item 1</Menu.MenuItem>
-        <Menu.MenuItem onClick={() => alert("Item 2")}>Item 2</Menu.MenuItem>
-        <Menu.MenuItem onClick={() => alert("Item 3")}>Item 3</Menu.MenuItem>
-      </Menu>
-    );
-  },
-};
-
-export const Disabled: Story = {
-  render() {
-    return (
-      <Menu label="Disabled Menu" disabled>
-        <Menu.MenuItem onClick={() => alert("Item 1")}>Item 1</Menu.MenuItem>
-        <Menu.MenuItem onClick={() => alert("Item 2")}>Item 2</Menu.MenuItem>
-      </Menu>
-    );
-  },
-};
-
-export const DisabledItems: Story = {
-  render() {
-    return (
-      <Menu label="Options">
-        <Menu.MenuItem onClick={() => alert("Enabled")}>Enabled Item</Menu.MenuItem>
-        <Menu.MenuItem disabled>Disabled Item</Menu.MenuItem>
-        <Menu.MenuItem onClick={() => alert("Enabled")}>Another Enabled Item</Menu.MenuItem>
-      </Menu>
-    );
-  },
-};
-
-export const CustomButton: Story = {
-  render() {
-    return (
-      <Menu
-        customButton={
-          <button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">Custom Button</button>
-        }
-      >
-        <Menu.MenuItem onClick={() => alert("Option 1")}>Option 1</Menu.MenuItem>
-        <Menu.MenuItem onClick={() => alert("Option 2")}>Option 2</Menu.MenuItem>
-        <Menu.MenuItem onClick={() => alert("Option 3")}>Option 3</Menu.MenuItem>
-      </Menu>
-    );
-  },
-};
-
-export const WithSubmenu: Story = {
-  render() {
-    return (
-      <Menu label="File">
-        <Menu.MenuItem onClick={() => alert("New File")}>New File</Menu.MenuItem>
-        <Menu.MenuItem onClick={() => alert("Open")}>Open</Menu.MenuItem>
-        <Menu.SubMenu
-          trigger="Export"
-          className="min-w-[12rem] rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200"
-        >
-          <Menu.MenuItem onClick={() => alert("Export as PDF")}>Export as PDF</Menu.MenuItem>
-          <Menu.MenuItem onClick={() => alert("Export as CSV")}>Export as CSV</Menu.MenuItem>
-          <Menu.MenuItem onClick={() => alert("Export as JSON")}>Export as JSON</Menu.MenuItem>
-        </Menu.SubMenu>
-        <Menu.MenuItem onClick={() => alert("Close")}>Close</Menu.MenuItem>
-      </Menu>
-    );
-  },
-};
-
-export const MaxHeightSmall: Story = {
-  render() {
-    return (
-      <Menu label="Small Height" maxHeight="sm">
-        {Array.from({ length: 10 }, (_, i) => (
-          <Menu.MenuItem key={i} onClick={() => alert(`Item ${i + 1}`)}>
-            Item {i + 1}
-          </Menu.MenuItem>
-        ))}
-      </Menu>
-    );
-  },
-};
-
-export const MaxHeightLarge: Story = {
-  render() {
-    return (
-      <Menu label="Large Height" maxHeight="lg">
-        {Array.from({ length: 15 }, (_, i) => (
-          <Menu.MenuItem key={i} onClick={() => alert(`Item ${i + 1}`)}>
-            Item {i + 1}
-          </Menu.MenuItem>
-        ))}
-      </Menu>
-    );
-  },
-};
-
-export const ComplexMenu: Story = {
-  render() {
-    return (
-      <Menu label="More Actions" buttonClassName="bg-gray-100">
-        <Menu.MenuItem onClick={() => alert("Notifications")}>
-          <div className="flex items-center gap-2">
-            <SubscribeOutline className="h-4 w-4" />
-            <span>Notifications</span>
-            <span className="bg-red-500 ml-auto rounded-sm px-2 py-0.5 text-11 text-on-color">3</span>
-          </div>
-        </Menu.MenuItem>
-        <Menu.MenuItem onClick={() => alert("Help")}>
-          <div className="flex items-center gap-2">
-            <HelpOutline className="h-4 w-4" />
-            <span>Help Center</span>
-          </div>
-        </Menu.MenuItem>
-        <Menu.SubMenu
-          trigger="Settings"
-          className="min-w-[12rem] rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200"
-        >
-          <Menu.MenuItem onClick={() => alert("General Settings")}>General</Menu.MenuItem>
-          <Menu.MenuItem onClick={() => alert("Privacy Settings")}>Privacy</Menu.MenuItem>
-          <Menu.MenuItem onClick={() => alert("Security Settings")}>Security</Menu.MenuItem>
-        </Menu.SubMenu>
-        <div className="border-gray-200 my-1 border-t" />
-        <Menu.MenuItem onClick={() => alert("Logout")}>
-          <div className="flex items-center gap-2 text-danger-primary">
-            <LogOutOutline className="h-4 w-4" />
-            <span>Logout</span>
-          </div>
-        </Menu.MenuItem>
-      </Menu>
-    );
-  },
-};
-
-export const CustomStyles: Story = {
-  render() {
-    return (
-      <Menu
-        label="Styled Menu"
-        buttonClassName="bg-purple-500 text-on-color hover:bg-purple-600"
-        optionsClassName="bg-purple-50 border-purple-300"
-      >
-        <Menu.MenuItem onClick={() => alert("Item 1")} className="hover:bg-purple-200">
-          Item 1
-        </Menu.MenuItem>
-        <Menu.MenuItem onClick={() => alert("Item 2")} className="hover:bg-purple-200">
-          Item 2
-        </Menu.MenuItem>
-        <Menu.MenuItem onClick={() => alert("Item 3")} className="hover:bg-purple-200">
-          Item 3
-        </Menu.MenuItem>
-      </Menu>
-    );
-  },
-};
diff --git a/packages/propel/src/menu/menu.tsx b/packages/propel/src/menu/menu.tsx
deleted file mode 100644
index a7446ded876..00000000000
--- a/packages/propel/src/menu/menu.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-import { Menu as BaseMenu } from "@base-ui-components/react/menu";
-import { ChevronDownOutline, ChevronRightOutline, MoreHorizontalOutline } from "@makeplane/propel/icons";
-import { cn } from "../utils/classname";
-import type { TMenuProps, TSubMenuProps, TMenuItemProps } from "./types";
-
-// Context for main menu to communicate with submenus
-const MenuContext = React.createContext<{
-  closeAllSubmenus: () => void;
-  registerSubmenu: (closeSubmenu: () => void) => () => void;
-} | null>(null);
-
-// SubMenu context for closing submenu from nested items
-const SubMenuContext = React.createContext<{ closeSubmenu: () => void } | null>(null);
-
-// Hook to use submenu context
-const useSubMenu = () => React.useContext(SubMenuContext);
-
-// SubMenu implementation
-function SubMenu(props: TSubMenuProps) {
-  const { children, trigger, disabled = false, className = "" } = props;
-
-  return (
-    <BaseMenu.SubmenuRoot disabled={disabled}>
-      <BaseMenu.SubmenuTrigger className={""}>
-        <span className="flex-1">{trigger}</span>
-        <ChevronRightOutline />
-      </BaseMenu.SubmenuTrigger>
-      <BaseMenu.Portal>
-        <BaseMenu.Positioner className={""} alignOffset={-4} sideOffset={-4}>
-          <BaseMenu.Popup className={className}>{children} </BaseMenu.Popup>
-        </BaseMenu.Positioner>
-      </BaseMenu.Portal>
-    </BaseMenu.SubmenuRoot>
-  );
-}
-
-function MenuItem(props: TMenuItemProps) {
-  const { children, disabled = false, onClick, className } = props;
-  const submenuContext = useSubMenu();
-
-  return (
-    <BaseMenu.Item
-      disabled={disabled}
-      className={cn(
-        "w-full cursor-pointer truncate rounded-sm px-1 py-1.5 text-left text-secondary outline-none select-none hover:bg-layer-1",
-        {
-          "text-placeholder": disabled,
-        },
-        className
-      )}
-      onClick={(e) => {
-        close();
-        onClick?.(e);
-        submenuContext?.closeSubmenu();
-      }}
-    >
-      {children}
-    </BaseMenu.Item>
-  );
-}
-
-function Menu(props: TMenuProps) {
-  const {
-    ariaLabel,
-    buttonClassName = "",
-    customButtonClassName = "",
-    customButtonTabIndex = 0,
-    children,
-    customButton,
-    disabled = false,
-    ellipsis = false,
-    label,
-    maxHeight = "md",
-    noBorder = false,
-    noChevron = false,
-    optionsClassName = "",
-    menuItemsClassName = "",
-    verticalEllipsis = false,
-    menuButtonOnClick,
-    onMenuClose,
-    tabIndex,
-    openOnHover = false,
-    handleOpenChange = () => {},
-  } = props;
-
-  const [isOpen, setIsOpen] = React.useState(false);
-  // refs
-  const submenuClosersRef = React.useRef<Set<() => void>>(new Set());
-
-  const closeAllSubmenus = React.useCallback(() => {
-    submenuClosersRef.current.forEach((closeSubmenu) => closeSubmenu());
-  }, []);
-
-  const registerSubmenu = React.useCallback((closeSubmenu: () => void) => {
-    submenuClosersRef.current.add(closeSubmenu);
-    return () => {
-      submenuClosersRef.current.delete(closeSubmenu);
-    };
-  }, []);
-  const openDropdown = () => {
-    setIsOpen(true);
-  };
-
-  const closeDropdown = React.useCallback(() => {
-    if (isOpen) {
-      closeAllSubmenus();
-      onMenuClose?.();
-    }
-    setIsOpen(false);
-  }, [isOpen, closeAllSubmenus, onMenuClose]);
-
-  const handleMenuButtonClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    if (isOpen) {
-      closeDropdown();
-    } else {
-      openDropdown();
-    }
-    if (menuButtonOnClick) menuButtonOnClick();
-  };
-
-  return (
-    <BaseMenu.Root openOnHover={openOnHover} onOpenChange={handleOpenChange}>
-      {customButton ? (
-        <BaseMenu.Trigger
-          type="button"
-          onClick={handleMenuButtonClick}
-          className={cn(customButtonClassName, "outline-none")}
-          tabIndex={customButtonTabIndex}
-          disabled={disabled}
-          aria-label={ariaLabel}
-        >
-          {customButton}
-        </BaseMenu.Trigger>
-      ) : (
-        <>
-          {ellipsis || verticalEllipsis ? (
-            <BaseMenu.Trigger
-              type="button"
-              onClick={handleMenuButtonClick}
-              disabled={disabled}
-              className={`relative grid place-items-center rounded-sm p-1 text-secondary outline-none hover:text-primary ${
-                disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-layer-1"
-              } ${buttonClassName}`}
-              tabIndex={customButtonTabIndex}
-              aria-label={ariaLabel}
-            >
-              <MoreHorizontalOutline className={`h-3.5 w-3.5 ${verticalEllipsis ? "rotate-90" : ""}`} />
-            </BaseMenu.Trigger>
-          ) : (
-            <BaseMenu.Trigger
-              type="button"
-              className={`flex items-center justify-between gap-1 rounded-md px-2.5 py-1 text-11 whitespace-nowrap duration-300 outline-none ${
-                isOpen ? "bg-surface-2 text-primary" : "text-secondary"
-              } ${noBorder ? "" : "shadow-sm border border-strong focus:outline-none"} ${
-                disabled ? "cursor-not-allowed text-secondary" : "cursor-pointer hover:bg-layer-1"
-              } ${buttonClassName}`}
-              onClick={handleMenuButtonClick}
-              tabIndex={customButtonTabIndex}
-              disabled={disabled}
-              aria-label={ariaLabel}
-            >
-              {label}
-              {!noChevron && <ChevronDownOutline className="h-3.5 w-3.5" />}
-            </BaseMenu.Trigger>
-          )}
-        </>
-      )}
-      <BaseMenu.Portal>
-        <BaseMenu.Positioner
-          align={"start"}
-          className={cn(
-            "fixed z-30 translate-y-0",
-            menuItemsClassName
-          )} /** translate-y-0 is a hack to create new stacking context. Required for safari  */
-        >
-          <BaseMenu.Popup
-            tabIndex={tabIndex}
-            className={cn(
-              "my-1 min-w-[12rem] overflow-y-scroll rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 whitespace-nowrap shadow-raised-200 focus:outline-none",
-              {
-                "max-h-60": maxHeight === "lg",
-                "max-h-48": maxHeight === "md",
-                "max-h-36": maxHeight === "rg",
-                "max-h-28": maxHeight === "sm",
-              },
-              optionsClassName
-            )}
-            data-main-menu="true"
-          >
-            <MenuContext.Provider value={{ closeAllSubmenus, registerSubmenu }}>{children}</MenuContext.Provider>
-          </BaseMenu.Popup>
-        </BaseMenu.Positioner>
-      </BaseMenu.Portal>
-    </BaseMenu.Root>
-  );
-}
-
-Menu.MenuItem = MenuItem;
-Menu.SubMenu = SubMenu;
-
-export { Menu };
diff --git a/packages/propel/src/menu/types.ts b/packages/propel/src/menu/types.ts
deleted file mode 100644
index ef8093bb404..00000000000
--- a/packages/propel/src/menu/types.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export type TPlacement = "top" | "bottom" | "left" | "right";
-
-export type TMenuProps = {
-  customButtonClassName?: string;
-  customButtonTabIndex?: number;
-  buttonClassName?: string;
-  className?: string;
-  customButton?: React.ReactNode;
-  disabled?: boolean;
-  input?: boolean;
-  label?: string | React.ReactNode;
-  maxHeight?: "sm" | "rg" | "md" | "lg";
-  noChevron?: boolean;
-  chevronClassName?: string;
-  onOpen?: () => void;
-  optionsClassName?: string;
-  placement?: TPlacement;
-  tabIndex?: number;
-  useCaptureForOutsideClick?: boolean;
-  children: React.ReactNode;
-  ellipsis?: boolean;
-  noBorder?: boolean;
-  verticalEllipsis?: boolean;
-  menuButtonOnClick?: (..._args: unknown[]) => void;
-  menuItemsClassName?: string;
-  onMenuClose?: () => void;
-  closeOnSelect?: boolean;
-  portalElement?: Element | null;
-  openOnHover?: boolean;
-  ariaLabel?: string;
-  handleOpenChange?: (open: boolean) => void;
-};
-
-export type TSubMenuProps = {
-  children: React.ReactNode;
-  trigger: React.ReactNode;
-  disabled?: boolean;
-  className?: string;
-  contentClassName?: string;
-  placement?: TPlacement;
-};
-
-export type TMenuItemProps = {
-  children: React.ReactNode;
-  disabled?: boolean;
-  onClick?: (_args?: unknown) => void;
-  className?: string;
-};
diff --git a/packages/propel/src/pill/index.ts b/packages/propel/src/pill/index.ts
deleted file mode 100644
index a8b491d6034..00000000000
--- a/packages/propel/src/pill/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export { Pill, EPillVariant, EPillSize } from "./pill";
-export type { PillProps } from "./pill";
diff --git a/packages/propel/src/pill/pill.stories.tsx b/packages/propel/src/pill/pill.stories.tsx
deleted file mode 100644
index 36ca6611249..00000000000
--- a/packages/propel/src/pill/pill.stories.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Pill, EPillVariant, EPillSize } from "./pill";
-
-const meta = {
-  title: "Components/Pill",
-  component: Pill,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: {
-    children: "Default",
-  },
-} satisfies Meta<typeof Pill>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Primary: Story = {
-  args: {
-    variant: EPillVariant.PRIMARY,
-    children: "Primary",
-  },
-};
-
-export const Success: Story = {
-  args: {
-    variant: EPillVariant.SUCCESS,
-    children: "Success",
-  },
-};
-
-export const Warning: Story = {
-  args: {
-    variant: EPillVariant.WARNING,
-    children: "Warning",
-  },
-};
-
-export const Error: Story = {
-  args: {
-    variant: EPillVariant.ERROR,
-    children: "Error",
-  },
-};
-
-export const Info: Story = {
-  args: {
-    variant: EPillVariant.INFO,
-    children: "Info",
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: EPillSize.SM,
-    children: "Small",
-  },
-};
-
-export const Medium: Story = {
-  args: {
-    size: EPillSize.MD,
-    children: "Medium",
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: EPillSize.LG,
-    children: "Large",
-  },
-};
-
-export const AllVariants: Story = {
-  render() {
-    return (
-      <div className="space-y-4">
-        <div className="flex flex-wrap gap-2">
-          <Pill variant={EPillVariant.DEFAULT}>Default</Pill>
-          <Pill variant={EPillVariant.PRIMARY}>Primary</Pill>
-          <Pill variant={EPillVariant.SUCCESS}>Success</Pill>
-          <Pill variant={EPillVariant.WARNING}>Warning</Pill>
-          <Pill variant={EPillVariant.ERROR}>Error</Pill>
-          <Pill variant={EPillVariant.INFO}>Info</Pill>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const AllSizes: Story = {
-  render() {
-    return (
-      <div className="space-y-4">
-        <div className="flex items-center gap-2">
-          <Pill size={EPillSize.SM}>Small</Pill>
-          <Pill size={EPillSize.MD}>Medium</Pill>
-          <Pill size={EPillSize.LG}>Large</Pill>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const WithNumbers: Story = {
-  render() {
-    return (
-      <div className="space-y-4">
-        <div className="flex flex-wrap gap-2">
-          <Pill variant={EPillVariant.PRIMARY}>3</Pill>
-          <Pill variant={EPillVariant.SUCCESS}>12</Pill>
-          <Pill variant={EPillVariant.WARNING}>99+</Pill>
-          <Pill variant={EPillVariant.ERROR}>!</Pill>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const StatusExamples: Story = {
-  render() {
-    return (
-      <div className="space-y-4">
-        <div className="space-y-2">
-          <h3 className="text-13 font-medium">Task Status</h3>
-          <div className="flex flex-wrap gap-2">
-            <Pill variant={EPillVariant.DEFAULT}>Draft</Pill>
-            <Pill variant={EPillVariant.WARNING}>In Progress</Pill>
-            <Pill variant={EPillVariant.INFO}>In Review</Pill>
-            <Pill variant={EPillVariant.SUCCESS}>Completed</Pill>
-            <Pill variant={EPillVariant.ERROR}>Blocked</Pill>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
diff --git a/packages/propel/src/pill/pill.tsx b/packages/propel/src/pill/pill.tsx
deleted file mode 100644
index 52275cdb16a..00000000000
--- a/packages/propel/src/pill/pill.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-import { cn } from "../utils";
-
-export enum EPillVariant {
-  DEFAULT = "default",
-  PRIMARY = "primary",
-  SUCCESS = "success",
-  WARNING = "warning",
-  ERROR = "error",
-  INFO = "info",
-}
-
-export enum EPillSize {
-  SM = "sm",
-  MD = "md",
-  LG = "lg",
-  XS = "xs",
-}
-
-export enum ERadius {
-  SQUARE = "square",
-  CIRCLE = "circle",
-}
-
-export type TRadius = ERadius.SQUARE | ERadius.CIRCLE;
-
-export type TPillVariant =
-  | EPillVariant.DEFAULT
-  | EPillVariant.PRIMARY
-  | EPillVariant.SUCCESS
-  | EPillVariant.WARNING
-  | EPillVariant.ERROR
-  | EPillVariant.INFO;
-export type TPillSize = EPillSize.SM | EPillSize.MD | EPillSize.LG | EPillSize.XS;
-
-export interface PillProps extends React.HTMLAttributes<HTMLSpanElement> {
-  variant?: TPillVariant;
-  size?: TPillSize;
-  className?: string;
-  children: React.ReactNode;
-  radius?: TRadius;
-}
-
-const pillVariants = {
-  [EPillVariant.DEFAULT]: "bg-surface-2 text-secondary border border-subtle-1",
-  [EPillVariant.PRIMARY]: "bg-accent-primary/10 text-accent-primary border border-accent-strong/20",
-  [EPillVariant.SUCCESS]: "bg-green-50 text-success-primary border border-success-subtle",
-  [EPillVariant.WARNING]: "bg-amber-50 text-amber-700 border border-amber-200",
-  [EPillVariant.ERROR]: "bg-red-50 text-danger-primary border border-danger-subtle",
-  [EPillVariant.INFO]: "bg-blue-50 text-blue-700 border border-blue-200",
-};
-
-const pillSizes = {
-  [EPillSize.XS]: "px-1.5 py-0.5 text-11",
-  [EPillSize.SM]: "px-2 py-0.5 text-11",
-  [EPillSize.MD]: "px-2.5 py-1 text-13",
-  [EPillSize.LG]: "px-3 py-1.5 text-14",
-};
-
-const pillRadius = {
-  [ERadius.SQUARE]: "rounded",
-  [ERadius.CIRCLE]: "rounded-full",
-};
-
-const Pill = React.forwardRef(function Pill(
-  {
-    variant = EPillVariant.DEFAULT,
-    size = EPillSize.MD,
-    radius = ERadius.CIRCLE,
-    className,
-    children,
-    ...props
-  }: PillProps,
-  ref: React.ForwardedRef<HTMLSpanElement>
-) {
-  return (
-    <span
-      ref={ref}
-      className={cn(
-        // Base styles
-        "inline-flex items-center justify-center rounded-full font-medium whitespace-nowrap",
-        // Variant styles
-        pillVariants[variant],
-        // Size styles
-        pillSizes[size],
-        // Radius styles
-        pillRadius[radius],
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </span>
-  );
-});
-
-Pill.displayName = "Pill";
-
-export { Pill };
diff --git a/packages/propel/src/popover/popover.stories.tsx b/packages/propel/src/popover/popover.stories.tsx
deleted file mode 100644
index 8f184d48440..00000000000
--- a/packages/propel/src/popover/popover.stories.tsx
+++ /dev/null
@@ -1,320 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useArgs } from "storybook/preview-api";
-import { CloseOutline } from "@makeplane/propel/icons";
-import { Popover } from "./root";
-
-// cannot use satisfies here because base-ui does not have portable types.
-const meta: Meta<typeof Popover> = {
-  title: "Components/Popover",
-  component: Popover,
-  subcomponents: {
-    PopoverButton: Popover.Button,
-    PopoverPanel: Popover.Panel,
-  },
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: {
-    children: null,
-    open: undefined,
-    onOpenChange: () => {},
-  },
-  render(args) {
-    const [{ open }, updateArgs] = useArgs();
-    const setOpen = (value: boolean | undefined) => updateArgs({ open: value });
-
-    return (
-      <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
-          Open Popover
-        </Popover.Button>
-        <Popover.Panel className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
-          <h3 className="text-13 font-semibold">Popover Title</h3>
-          <p className="text-gray-600 mt-2 text-13">This is the popover content. You can put any content here.</p>
-        </Popover.Panel>
-      </Popover>
-    );
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    children: null,
-  },
-};
-
-export const Controlled: Story = {
-  render() {
-    const [open, setOpen] = useState(false);
-
-    return (
-      <div className="space-y-4">
-        <div className="flex gap-2">
-          <button onClick={() => setOpen(true)} className="bg-blue-500 rounded-sm px-3 py-1.5 text-13 text-on-color">
-            Open
-          </button>
-          <button onClick={() => setOpen(false)} className="bg-gray-500 rounded-sm px-3 py-1.5 text-13 text-on-color">
-            Close
-          </button>
-        </div>
-        <Popover open={open} onOpenChange={setOpen}>
-          <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
-            Controlled Popover
-          </Popover.Button>
-          <Popover.Panel className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
-            <div className="flex items-start justify-between">
-              <h3 className="text-13 font-semibold">Controlled State</h3>
-              <button onClick={() => setOpen(false)} className="hover:bg-gray-100 rounded-full p-1">
-                <CloseOutline className="h-4 w-4" />
-              </button>
-            </div>
-            <p className="text-gray-600 mt-2 text-13">Current state: {open ? "Open" : "Closed"}</p>
-          </Popover.Panel>
-        </Popover>
-      </div>
-    );
-  },
-};
-
-export const SideTop: Story = {
-  render(args) {
-    const [open, setOpen] = useState(args.open);
-    return (
-      <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
-          Open Above
-        </Popover.Button>
-        <Popover.Panel side="top" className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
-          <h3 className="text-13 font-semibold">Top Positioned</h3>
-          <p className="text-gray-600 mt-2 text-13">This popover appears above the button.</p>
-        </Popover.Panel>
-      </Popover>
-    );
-  },
-};
-
-export const SideBottom: Story = {
-  render(args) {
-    const [open, setOpen] = useState(args.open);
-    return (
-      <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
-          Open Below
-        </Popover.Button>
-        <Popover.Panel side="bottom" className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
-          <h3 className="text-13 font-semibold">Bottom Positioned</h3>
-          <p className="text-gray-600 mt-2 text-13">This popover appears below the button.</p>
-        </Popover.Panel>
-      </Popover>
-    );
-  },
-};
-
-export const SideLeft: Story = {
-  render(args) {
-    const [open, setOpen] = useState(args.open);
-    return (
-      <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
-          Open Left
-        </Popover.Button>
-        <Popover.Panel side="left" className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
-          <h3 className="text-13 font-semibold">Left Positioned</h3>
-          <p className="text-gray-600 mt-2 text-13">This popover appears to the left of the button.</p>
-        </Popover.Panel>
-      </Popover>
-    );
-  },
-};
-
-export const SideRight: Story = {
-  render(args) {
-    const [open, setOpen] = useState(args.open);
-    return (
-      <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
-          Open Right
-        </Popover.Button>
-        <Popover.Panel side="right" className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
-          <h3 className="text-13 font-semibold">Right Positioned</h3>
-          <p className="text-gray-600 mt-2 text-13">This popover appears to the right of the button.</p>
-        </Popover.Panel>
-      </Popover>
-    );
-  },
-};
-
-export const AlignStart: Story = {
-  render(args) {
-    const [open, setOpen] = useState(args.open);
-    return (
-      <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
-          Align Start
-        </Popover.Button>
-        <Popover.Panel align="start" className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
-          <h3 className="text-13 font-semibold">Start Aligned</h3>
-          <p className="text-gray-600 mt-2 text-13">This popover is aligned to the start.</p>
-        </Popover.Panel>
-      </Popover>
-    );
-  },
-};
-
-export const AlignEnd: Story = {
-  render(args) {
-    const [open, setOpen] = useState(args.open);
-    return (
-      <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
-          Align End
-        </Popover.Button>
-        <Popover.Panel align="end" className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
-          <h3 className="text-13 font-semibold">End Aligned</h3>
-          <p className="text-gray-600 mt-2 text-13">This popover is aligned to the end.</p>
-        </Popover.Panel>
-      </Popover>
-    );
-  },
-};
-
-export const CustomOffset: Story = {
-  render(args) {
-    const [open, setOpen] = useState(args.open);
-    return (
-      <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
-          Custom Offset
-        </Popover.Button>
-        <Popover.Panel sideOffset={20} className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
-          <h3 className="text-13 font-semibold">Custom Side Offset</h3>
-          <p className="text-gray-600 mt-2 text-13">This popover has a custom side offset of 20px.</p>
-        </Popover.Panel>
-      </Popover>
-    );
-  },
-};
-
-export const WithForm: Story = {
-  render(args) {
-    const [open, setOpen] = useState(args.open ?? false);
-    const handleSubmit = (e: React.FormEvent) => {
-      e.preventDefault();
-      alert("Form submitted!");
-      setOpen(false);
-    };
-    return (
-      <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
-          Open Form
-        </Popover.Button>
-        <Popover.Panel className="border-gray-200 shadow-lg w-72 rounded-lg border bg-white p-4">
-          <h3 className="text-13 font-semibold">Quick Form</h3>
-          <form onSubmit={handleSubmit} className="mt-3 space-y-3">
-            <div>
-              <label htmlFor="name" className="text-gray-700 block text-11 font-medium">
-                Name
-              </label>
-              <input
-                type="text"
-                id="name"
-                className="border-gray-300 mt-1 w-full rounded-sm border px-2 py-1.5 text-13"
-                placeholder="Enter name"
-              />
-            </div>
-            <div>
-              <label htmlFor="email" className="text-gray-700 block text-11 font-medium">
-                Email
-              </label>
-              <input
-                type="email"
-                id="email"
-                className="border-gray-300 mt-1 w-full rounded-sm border px-2 py-1.5 text-13"
-                placeholder="Enter email"
-              />
-            </div>
-            <div className="flex justify-end gap-2">
-              <button
-                type="button"
-                onClick={() => setOpen(false)}
-                className="bg-gray-200 hover:bg-gray-300 rounded-sm px-3 py-1.5 text-11"
-              >
-                Cancel
-              </button>
-              <button
-                type="submit"
-                className="bg-blue-500 hover:bg-blue-600 rounded-sm px-3 py-1.5 text-11 text-on-color"
-              >
-                Submit
-              </button>
-            </div>
-          </form>
-        </Popover.Panel>
-      </Popover>
-    );
-  },
-};
-
-export const WithList: Story = {
-  render(args) {
-    const [open, setOpen] = useState(args.open);
-    return (
-      <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
-          Show Options
-        </Popover.Button>
-        <Popover.Panel className="border-gray-200 shadow-lg w-56 rounded-lg border bg-white">
-          <div className="p-2">
-            <h3 className="text-gray-500 px-2 py-1.5 text-11 font-semibold">Options</h3>
-            <button className="hover:bg-gray-100 w-full rounded-sm px-2 py-1.5 text-left text-13">Option 1</button>
-            <button className="hover:bg-gray-100 w-full rounded-sm px-2 py-1.5 text-left text-13">Option 2</button>
-            <button className="hover:bg-gray-100 w-full rounded-sm px-2 py-1.5 text-left text-13">Option 3</button>
-          </div>
-        </Popover.Panel>
-      </Popover>
-    );
-  },
-};
-
-export const ColorPicker: Story = {
-  render() {
-    const [selectedColor, setSelectedColor] = useState("#3b82f6");
-    const colors = ["#ef4444", "#f59e0b", "#10b981", "#3b82f6", "#8b5cf6", "#ec4899", "#6b7280", "#000000", "#ffffff"];
-
-    return (
-      <Popover>
-        <Popover.Button className="border-gray-300 hover:bg-gray-50 flex items-center gap-2 rounded-sm border bg-white px-4 py-2">
-          <div className="h-4 w-4 rounded-sm" style={{ backgroundColor: selectedColor }} />
-          <span className="text-13">Pick Color</span>
-        </Popover.Button>
-        <Popover.Panel className="border-gray-200 shadow-lg w-48 rounded-lg border bg-white p-3">
-          <h3 className="mb-2 text-11 font-semibold">Select Color</h3>
-          <div className="grid grid-cols-5 gap-2">
-            {colors.map((color) => (
-              <button
-                key={color}
-                onClick={() => setSelectedColor(color)}
-                className="h-8 w-8 rounded-sm border-2 transition-transform hover:scale-110"
-                style={{
-                  backgroundColor: color,
-                  borderColor: selectedColor === color ? "#000" : "transparent",
-                }}
-              />
-            ))}
-          </div>
-        </Popover.Panel>
-      </Popover>
-    );
-  },
-};
diff --git a/packages/propel/src/popover/root.tsx b/packages/propel/src/popover/root.tsx
deleted file mode 100644
index 444a6363295..00000000000
--- a/packages/propel/src/popover/root.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { memo, useMemo } from "react";
-import { Popover as BasePopover } from "@base-ui-components/react/popover";
-import type { TPlacement, TSide, TAlign } from "../utils/placement";
-import { convertPlacementToSideAndAlign } from "../utils/placement";
-
-export interface PopoverContentProps extends React.ComponentProps<typeof BasePopover.Popup> {
-  placement?: TPlacement;
-  align?: TAlign;
-  sideOffset?: BasePopover.Positioner.Props["sideOffset"];
-  side?: TSide;
-  containerRef?: React.RefObject<HTMLElement | null>;
-  positionerClassName?: string;
-}
-
-// PopoverContent component
-const PopoverContent = memo(function PopoverContent({
-  children,
-  className,
-  placement,
-  side = "bottom",
-  align = "center",
-  sideOffset = 8,
-  containerRef,
-  positionerClassName,
-  ...props
-}: PopoverContentProps) {
-  // side and align calculations
-  const { finalSide, finalAlign } = useMemo(() => {
-    if (placement) {
-      const converted = convertPlacementToSideAndAlign(placement);
-      return { finalSide: converted.side, finalAlign: converted.align };
-    }
-    return { finalSide: side, finalAlign: align };
-  }, [placement, side, align]);
-
-  return (
-    <PopoverPortal container={containerRef?.current}>
-      <PopoverPositioner side={finalSide} sideOffset={sideOffset} align={finalAlign} className={positionerClassName}>
-        <BasePopover.Popup data-slot="popover-content" className={className} {...props}>
-          {children}
-        </BasePopover.Popup>
-      </PopoverPositioner>
-    </PopoverPortal>
-  );
-});
-
-// wrapper components
-const PopoverTrigger = memo(function PopoverTrigger(props: React.ComponentProps<typeof BasePopover.Trigger>) {
-  return <BasePopover.Trigger data-slot="popover-trigger" {...props} />;
-});
-
-const PopoverPortal = memo(function PopoverPortal(props: React.ComponentProps<typeof BasePopover.Portal>) {
-  return <BasePopover.Portal data-slot="popover-portal" {...props} />;
-});
-
-const PopoverPositioner = memo(function PopoverPositioner(props: React.ComponentProps<typeof BasePopover.Positioner>) {
-  return <BasePopover.Positioner data-slot="popover-positioner" {...props} />;
-});
-
-// compound components
-const Popover = Object.assign(
-  memo(function Popover(props: React.ComponentProps<typeof BasePopover.Root>) {
-    return <BasePopover.Root data-slot="popover" {...props} />;
-  }),
-  {
-    Button: PopoverTrigger,
-    Panel: PopoverContent,
-  }
-);
-
-// display names
-PopoverContent.displayName = "PopoverContent";
-Popover.displayName = "Popover";
-PopoverPortal.displayName = "PopoverPortal";
-PopoverTrigger.displayName = "PopoverTrigger";
-PopoverPositioner.displayName = "PopoverPositioner";
-
-export { Popover };
diff --git a/packages/propel/src/portal/portal.stories.tsx b/packages/propel/src/portal/portal.stories.tsx
deleted file mode 100644
index 0c47b575445..00000000000
--- a/packages/propel/src/portal/portal.stories.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import React, { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Button } from "../button/button";
-import type { TButtonVariant } from "../button/helper";
-import { EPortalWidth, EPortalPosition } from "./constants";
-import { ModalPortal, PortalWrapper } from "./";
-
-const meta = {
-  title: "Components/Portal/ModalPortal",
-  component: ModalPortal,
-  parameters: {
-    layout: "centered",
-    docs: {
-      description: {
-        component: `
-A high-performance, accessible modal portal component with comprehensive features:
-Perfect for modals, drawers, overlays, and any UI that needs to appear above other content.
-        `,
-      },
-    },
-  },
-  tags: ["autodocs"],
-  args: {
-    isOpen: false,
-    children: null,
-  },
-  render(args) {
-    return (
-      <ModalDemo {...args} buttonText="Open Modal">
-        <ModalContent
-          title="Default Modal"
-          description="A standard modal with all default settings. Demonstrates focus management, keyboard navigation, and accessibility features."
-        />
-      </ModalDemo>
-    );
-  },
-} satisfies Meta<typeof ModalPortal>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Helper component for interactive stories
-function ModalDemo({
-  children,
-  buttonText = "Open Modal",
-  buttonVariant = "primary",
-  ...modalProps
-}: Omit<Parameters<typeof ModalPortal>[0], "isOpen" | "onClose"> & {
-  buttonText?: string;
-  buttonVariant?: TButtonVariant;
-}) {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <>
-      <Button variant={buttonVariant} onClick={() => setIsOpen(true)}>
-        {buttonText}
-      </Button>
-      <ModalPortal {...modalProps} isOpen={isOpen} onClose={() => setIsOpen(false)}>
-        {children}
-      </ModalPortal>
-    </>
-  );
-}
-
-function ModalContent({
-  title = "Modal Title",
-  showCloseButton = true,
-  description = "This is a modal portal component with full accessibility support. Try pressing Tab to navigate through elements or Escape to close.",
-  onClose,
-}: {
-  title?: string;
-  showCloseButton?: boolean;
-  description?: string;
-  onClose?: () => void;
-}) {
-  return (
-    <div className="flex h-full flex-col bg-white">
-      <div className="border-gray-200 flex items-center justify-between border-b p-6">
-        <div>
-          <h2 className="text-gray-900 text-18 font-semibold">{title}</h2>
-          <p className="text-gray-500 mt-1 text-13">Modal demonstration</p>
-        </div>
-        {showCloseButton && onClose && (
-          <Button variant="ghost" onClick={onClose} aria-label="Close modal">
-            ✕
-          </Button>
-        )}
-      </div>
-      <div className="flex-1 overflow-y-auto p-6">
-        <p className="text-gray-600 mb-6">{description}</p>
-
-        <div className="space-y-4">
-          <div className="bg-gray-50 rounded-lg p-4">
-            <h3 className="text-gray-900 mb-2 font-medium">Feature Highlights</h3>
-            <ul className="text-gray-600 space-y-1 text-13">
-              <li>• ESC key closes the modal</li>
-              <li>• Click outside overlay to close</li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export const Default: Story = {};
-
-export const Positions: Story = {
-  name: "Different Positions",
-  render() {
-    const [activeModal, setActiveModal] = useState<EPortalPosition | null>(null);
-
-    return (
-      <div className="flex gap-3">
-        {Object.values(EPortalPosition).map((position) => (
-          <React.Fragment key={position}>
-            <Button variant="secondary" onClick={() => setActiveModal(position)}>
-              {position.charAt(0).toUpperCase() + position.slice(1)}
-            </Button>
-            <ModalPortal
-              isOpen={activeModal === position}
-              onClose={() => setActiveModal(null)}
-              width={EPortalWidth.HALF}
-              position={position}
-            >
-              <ModalContent
-                title={`${position.charAt(0).toUpperCase() + position.slice(1)} Modal`}
-                description={`This modal is positioned at ${position}. Try different positions to see how the modal appears in different areas of the screen.`}
-                onClose={() => setActiveModal(null)}
-              />
-            </ModalPortal>
-          </React.Fragment>
-        ))}
-      </div>
-    );
-  },
-};
-
-export const Widths: Story = {
-  name: "Different Widths",
-  render() {
-    const [activeModal, setActiveModal] = useState<EPortalWidth | null>(null);
-
-    return (
-      <div className="flex gap-3">
-        {Object.values(EPortalWidth).map((width) => (
-          <React.Fragment key={width}>
-            <Button variant="secondary" onClick={() => setActiveModal(width)}>
-              {width.replace("_", " ").replace(/\b\w/g, (l) => l.toUpperCase())}
-            </Button>
-            <ModalPortal
-              isOpen={activeModal === width}
-              onClose={() => setActiveModal(null)}
-              width={width}
-              position={EPortalPosition.RIGHT}
-            >
-              <ModalContent
-                title={`${width.replace("_", " ").replace(/\b\w/g, (l) => l.toUpperCase())} Width`}
-                description={`This modal uses ${width} width. Compare different widths to find the perfect size for your content.`}
-                onClose={() => setActiveModal(null)}
-              />
-            </ModalPortal>
-          </React.Fragment>
-        ))}
-      </div>
-    );
-  },
-};
-
-export const BasicPortal: Story = {
-  render() {
-    return (
-      <div className="relative">
-        <p>This content renders in the normal document flow.</p>
-        <PortalWrapper portalId="storybook-portal">
-          <div className="bg-blue-500 shadow-lg fixed top-4 right-4 z-50 rounded-sm p-4 text-on-color">
-            This content is rendered in a portal!
-          </div>
-        </PortalWrapper>
-      </div>
-    );
-  },
-  parameters: {
-    layout: "centered",
-    docs: {
-      description: {
-        component: `
-The PortalWrapper is a low-level component that handles rendering content into DOM portals.
-It's used internally by ModalPortal but can also be used directly for custom portal needs.`,
-      },
-    },
-  },
-};
diff --git a/packages/propel/src/scrollarea/index.ts b/packages/propel/src/scrollarea/index.ts
deleted file mode 100644
index 3528c519591..00000000000
--- a/packages/propel/src/scrollarea/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./scrollarea";
diff --git a/packages/propel/src/scrollarea/scrollarea.stories.tsx b/packages/propel/src/scrollarea/scrollarea.stories.tsx
deleted file mode 100644
index 0acab666145..00000000000
--- a/packages/propel/src/scrollarea/scrollarea.stories.tsx
+++ /dev/null
@@ -1,304 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ScrollArea } from "./scrollarea";
-
-const meta = {
-  title: "Components/ScrollArea",
-  component: ScrollArea,
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        component:
-          "A customizable scroll area component with multiple size variants, scroll behaviors, and orientations.",
-      },
-    },
-  },
-  args: {
-    size: "md",
-    scrollType: "always",
-    orientation: "vertical",
-  },
-} satisfies Meta<typeof ScrollArea>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render(args) {
-    return (
-      <ScrollArea {...args} className="h-64 w-80 rounded-lg border">
-        <div className="space-y-4 p-4">
-          <h3 className="text-16 font-semibold">Long Text Content</h3>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
-            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
-            ea commodo consequat.
-          </p>
-          <p>
-            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-            laborum.
-          </p>
-          <p>
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
-            aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
-          </p>
-          <p>
-            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
-            dolores eos qui ratione voluptatem sequi nesciunt.
-          </p>
-        </div>
-      </ScrollArea>
-    );
-  },
-};
-
-export const Sizes: Story = {
-  render() {
-    const content = (
-      <div className="space-y-2 p-4">
-        {[...Array(10)].map((_, i) => (
-          <p key={i}>Line {i + 1}: This is some scrollable content to demonstrate different sizes.</p>
-        ))}
-      </div>
-    );
-
-    return (
-      <div className="flex flex-col gap-6">
-        <div className="space-y-2">
-          <div className="text-13 font-medium">Small</div>
-          <ScrollArea className="h-48 w-80 rounded-lg border" size="sm">
-            {content}
-          </ScrollArea>
-        </div>
-        <div className="space-y-2">
-          <div className="text-13 font-medium">Medium</div>
-          <ScrollArea className="h-48 w-80 rounded-lg border" size="md">
-            {content}
-          </ScrollArea>
-        </div>
-        <div className="space-y-2">
-          <div className="text-13 font-medium">Large</div>
-          <ScrollArea className="h-48 w-80 rounded-lg border" size="lg">
-            {content}
-          </ScrollArea>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const ScrollTypeAlways: Story = {
-  render() {
-    return (
-      <ScrollArea className="h-64 w-80 rounded-lg border" scrollType="always">
-        <div className="space-y-2 p-4">
-          <h3 className="text-16 font-semibold">Always Visible Scrollbar</h3>
-          {[...Array(15)].map((_, i) => (
-            <p key={i}>Line {i + 1}: The scrollbar is always visible.</p>
-          ))}
-        </div>
-      </ScrollArea>
-    );
-  },
-};
-
-export const ScrollTypeScroll: Story = {
-  render() {
-    return (
-      <ScrollArea className="h-64 w-80 rounded-lg border" scrollType="scroll">
-        <div className="space-y-2 p-4">
-          <h3 className="text-16 font-semibold">Scroll to Show</h3>
-          <p className="text-13 text-placeholder">Scrollbar appears when scrolling</p>
-          {[...Array(15)].map((_, i) => (
-            <p key={i}>Line {i + 1}: Try scrolling to see the scrollbar appear.</p>
-          ))}
-        </div>
-      </ScrollArea>
-    );
-  },
-};
-
-export const ScrollTypeHover: Story = {
-  render() {
-    return (
-      <ScrollArea className="h-64 w-80 rounded-lg border" scrollType="hover">
-        <div className="space-y-2 p-4">
-          <h3 className="text-16 font-semibold">Hover to Show</h3>
-          <p className="text-13 text-placeholder">Scrollbar appears on hover</p>
-          {[...Array(15)].map((_, i) => (
-            <p key={i}>Line {i + 1}: Hover over the area to see the scrollbar.</p>
-          ))}
-        </div>
-      </ScrollArea>
-    );
-  },
-};
-
-export const HorizontalScroll: Story = {
-  render() {
-    return (
-      <ScrollArea className="h-32 w-96 rounded-lg border" orientation="horizontal">
-        <div className="flex w-[1200px] gap-4 p-4">
-          {[...Array(12)].map((_, i) => (
-            <div key={i} className="flex h-20 w-32 flex-shrink-0 items-center justify-center rounded-sm bg-layer-1">
-              Item {i + 1}
-            </div>
-          ))}
-        </div>
-      </ScrollArea>
-    );
-  },
-};
-
-export const BothDirections: Story = {
-  render() {
-    return (
-      <ScrollArea className="h-64 w-96 rounded-lg border">
-        <div className="w-[800px] space-y-2 p-4">
-          <h3 className="text-16 font-semibold">Both Directions</h3>
-          <p className="text-13 text-placeholder">Content scrolls both vertically and horizontally</p>
-          {[...Array(20)].map((_, i) => (
-            <p key={i}>
-              Line {i + 1}: This line is very long and extends beyond the container width to demonstrate horizontal
-              scrolling along with vertical scrolling.
-            </p>
-          ))}
-        </div>
-      </ScrollArea>
-    );
-  },
-};
-
-export const ListExample: Story = {
-  render() {
-    return (
-      <ScrollArea className="h-80 w-96 rounded-lg border">
-        <div className="p-4">
-          <h3 className="mb-4 text-16 font-semibold">User List</h3>
-          <div className="space-y-2">
-            {[...Array(25)].map((_, i) => (
-              <div
-                key={i}
-                className="flex cursor-pointer items-center gap-3 rounded-sm bg-layer-1 p-3 hover:bg-surface-2"
-              >
-                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-accent-primary font-medium text-on-color">
-                  {String.fromCharCode(65 + (i % 26))}
-                </div>
-                <div>
-                  <div className="font-medium">User {i + 1}</div>
-                  <div className="text-13 text-placeholder">user{i + 1}@example.com</div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </ScrollArea>
-    );
-  },
-};
-
-export const CodeBlock: Story = {
-  render() {
-    const code = `function fibonacci(n) {
-  if (n <= 1) return n;
-
-  let a = 0, b = 1;
-  for (let i = 2; i <= n; i++) {
-    const temp = a + b;
-    a = b;
-    b = temp;
-  }
-
-  return b;
-}
-
-// Example usage
-console.log(fibonacci(10)); // 55
-console.log(fibonacci(20)); // 6765
-
-const numbers = [1, 2, 3, 4, 5];
-const doubled = numbers.map(n => n * 2);
-console.log(doubled); // [2, 4, 6, 8, 10]
-
-async function fetchData() {
-  try {
-    const response = await fetch('https://api.example.com/data');
-    const data = await response.json();
-    return data;
-  } catch (error) {
-    console.error('Error fetching data:', error);
-  }
-}`;
-
-    return (
-      <ScrollArea className="h-96 w-full max-w-2xl rounded-lg border bg-surface-1">
-        <pre className="p-4 text-13">
-          <code>{code}</code>
-        </pre>
-      </ScrollArea>
-    );
-  },
-};
-
-export const ChatMessages: Story = {
-  render() {
-    return (
-      <ScrollArea className="h-96 w-full max-w-md rounded-lg border">
-        <div className="space-y-4 p-4">
-          {[...Array(20)].map((_, i) => (
-            <div key={i} className={`flex ${i % 3 === 0 ? "justify-end" : "justify-start"}`}>
-              <div
-                className={`max-w-[70%] rounded-lg p-3 ${i % 3 === 0 ? "bg-accent-primary text-on-color" : "bg-layer-1"}`}
-              >
-                <div className="text-13">{i % 3 === 0 ? "You" : `User ${i + 1}`}</div>
-                <div className="mt-1">Message content for message number {i + 1}</div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </ScrollArea>
-    );
-  },
-};
-
-export const DataTable: Story = {
-  render() {
-    return (
-      <ScrollArea className="h-96 w-full max-w-3xl rounded-lg border">
-        <table className="w-full">
-          <thead className="sticky top-0 bg-layer-1">
-            <tr>
-              <th className="px-4 py-2 text-left">ID</th>
-              <th className="px-4 py-2 text-left">Name</th>
-              <th className="px-4 py-2 text-left">Email</th>
-              <th className="px-4 py-2 text-left">Status</th>
-            </tr>
-          </thead>
-          <tbody>
-            {[...Array(50)].map((_, i) => (
-              <tr key={i} className="border-t border-subtle hover:bg-layer-1">
-                <td className="px-4 py-2">#{i + 1}</td>
-                <td className="px-4 py-2">User {i + 1}</td>
-                <td className="px-4 py-2">user{i + 1}@example.com</td>
-                <td className="px-4 py-2">
-                  <span
-                    className={`rounded-sm px-2 py-1 text-11 ${i % 3 === 0 ? "bg-success-primary text-success-primary" : "bg-gray-500/20 text-gray-500"}`}
-                  >
-                    {i % 3 === 0 ? "Active" : "Inactive"}
-                  </span>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </ScrollArea>
-    );
-  },
-};
diff --git a/packages/propel/src/scrollarea/scrollarea.tsx b/packages/propel/src/scrollarea/scrollarea.tsx
deleted file mode 100644
index 4c52e98dc3b..00000000000
--- a/packages/propel/src/scrollarea/scrollarea.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-import { ScrollArea as BaseScrollArea } from "@base-ui-components/react/scroll-area";
-
-import { cn } from "../utils/classname";
-
-type ScrollAreaOrientation = "horizontal" | "vertical";
-type ScrollAreaScrollType = "always" | "scroll" | "hover";
-type ScrollAreaSize = "sm" | "md" | "lg";
-
-interface ScrollAreaProps extends React.ComponentProps<typeof BaseScrollArea.Root> {
-  orientation?: ScrollAreaOrientation;
-  scrollType?: ScrollAreaScrollType;
-  size?: ScrollAreaSize;
-  rootClassName?: string;
-  viewportClassName?: string;
-}
-
-function ScrollArea({
-  children,
-  orientation,
-  scrollType,
-  size = "md",
-  rootClassName,
-  viewportClassName,
-  ...props
-}: ScrollAreaProps) {
-  return (
-    <BaseScrollArea.Root data-slot="scroll-area" className={cn("relative", rootClassName)} {...props}>
-      <BaseScrollArea.Viewport
-        data-slot="scroll-area-viewport"
-        className={cn(
-          "focus-visible:ring-ring/50 size-full overscroll-contain rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline",
-          viewportClassName
-        )}
-      >
-        {children}
-      </BaseScrollArea.Viewport>
-      <ScrollBar orientation={orientation} scrollType={scrollType} size={size} />
-      <BaseScrollArea.Corner />
-    </BaseScrollArea.Root>
-  );
-}
-
-const horizontalSizeStyles = {
-  sm: "p-[0.112rem] h-2.5",
-  md: "p-[0.112rem] h-3",
-  lg: "p-[0.112rem] h-4",
-} as const;
-
-const verticalSizeStyles = {
-  sm: "p-[0.112rem] w-2.5",
-  md: "p-[0.112rem] w-3",
-  lg: "p-[0.112rem] w-4",
-} as const;
-
-const thumbSizeStyles = {
-  sm: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-11 before:-translate-x-1/2 before:-translate-y-1/2",
-  md: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-14 before:-translate-x-1/2 before:-translate-y-1/2",
-  lg: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-17 before:-translate-x-1/2 before:-translate-y-1/2",
-} as const;
-
-interface ScrollBarProps extends React.ComponentProps<typeof BaseScrollArea.Scrollbar> {
-  scrollType?: ScrollAreaScrollType;
-  size?: ScrollAreaSize;
-}
-
-const ScrollBar = React.memo(function ScrollBar({
-  className,
-  orientation = "vertical",
-  scrollType = "always",
-  size = "md",
-  ...props
-}: ScrollBarProps) {
-  return (
-    <BaseScrollArea.Scrollbar
-      data-slot="scroll-area-scrollbar"
-      orientation={orientation}
-      className={cn(
-        "group/track mr-1 flex justify-center rounded-sm bg-transparent opacity-0 transition-opacity delay-300",
-        orientation === "vertical" && verticalSizeStyles[size],
-        orientation === "horizontal" && horizontalSizeStyles[size],
-        scrollType === "always" && "opacity-100",
-        scrollType === "scroll" && "data-[scrolling]:opacity-100 data-[scrolling]:delay-0 data-[scrolling]:duration-75",
-        scrollType === "hover" && "data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[hovering]:duration-75",
-        className
-      )}
-      {...props}
-    >
-      <BaseScrollArea.Thumb
-        data-slot="scroll-area-thumb"
-        className={cn(
-          "relative flex-1 rounded-[10px] bg-scrollbar-thumb group-hover/track:bg-scrollbar-thumb-hover group-active/track:bg-scrollbar-thumb-active data-[scrolling]:bg-scrollbar-thumb-active",
-          thumbSizeStyles[size]
-        )}
-      />
-    </BaseScrollArea.Scrollbar>
-  );
-});
-
-export { ScrollArea };
-export type { ScrollAreaProps, ScrollAreaOrientation, ScrollAreaScrollType, ScrollAreaSize };
diff --git a/packages/propel/src/separator/separator.stories.tsx b/packages/propel/src/separator/separator.stories.tsx
deleted file mode 100644
index 3b7b8d7ff39..00000000000
--- a/packages/propel/src/separator/separator.stories.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Separator } from "./separator";
-
-const meta = {
-  title: "Components/Separator",
-  component: Separator,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Separator>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render() {
-    return (
-      <div className="w-[300px] space-y-4">
-        <div>Content Above</div>
-        <Separator />
-        <div>Content Below</div>
-      </div>
-    );
-  },
-};
-
-export const Vertical: Story = {
-  render() {
-    return (
-      <div className="flex h-[100px] items-center space-x-4">
-        <div>Left Content</div>
-        <Separator orientation="vertical" />
-        <div>Right Content</div>
-      </div>
-    );
-  },
-};
-
-export const WithinContainer: Story = {
-  render() {
-    return (
-      <div className="w-[300px] space-y-4 rounded-lg border p-6">
-        <div className="space-y-2">
-          <h4 className="leading-none font-medium">Section 1</h4>
-          <p className="text-muted-foreground text-13">Description for section 1</p>
-        </div>
-        <Separator />
-        <div className="space-y-2">
-          <h4 className="leading-none font-medium">Section 2</h4>
-          <p className="text-muted-foreground text-13">Description for section 2</p>
-        </div>
-      </div>
-    );
-  },
-};
diff --git a/packages/propel/src/separator/separator.tsx b/packages/propel/src/separator/separator.tsx
deleted file mode 100644
index 22030e2a99b..00000000000
--- a/packages/propel/src/separator/separator.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-import { Separator as SeparatorPrimitive } from "@base-ui-components/react/separator";
-import { cn } from "../utils";
-
-interface SeparatorProps extends React.ComponentProps<typeof SeparatorPrimitive> {
-  /**
-   * The orientation of the separator
-   * @default "horizontal"
-   */
-  orientation?: "horizontal" | "vertical";
-}
-
-const Separator = React.forwardRef(function Separator(
-  { orientation = "horizontal", className, ...props }: SeparatorProps,
-  ref: React.ForwardedRef<React.ElementRef<typeof SeparatorPrimitive>>
-) {
-  return (
-    <SeparatorPrimitive
-      ref={ref}
-      orientation={orientation}
-      data-slot="separator"
-      data-orientation={orientation}
-      {...props}
-      className={cn("bg-subtle-1", "shrink-0", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className)}
-    />
-  );
-});
-
-Separator.displayName = "Separator";
-
-export { Separator };
-export type { SeparatorProps };
diff --git a/packages/propel/src/skeleton/index.ts b/packages/propel/src/skeleton/index.ts
deleted file mode 100644
index d980334597b..00000000000
--- a/packages/propel/src/skeleton/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./root";
diff --git a/packages/propel/src/skeleton/root.tsx b/packages/propel/src/skeleton/root.tsx
deleted file mode 100644
index 1d09e55376d..00000000000
--- a/packages/propel/src/skeleton/root.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import React from "react";
-// helpers
-import { cn } from "../utils/classname";
-
-type SkeletonProps = {
-  children: React.ReactNode;
-  className?: string;
-  ariaLabel?: string;
-};
-
-function SkeletonRoot({ children, className = "", ariaLabel = "Loading content" }: SkeletonProps) {
-  return (
-    <div data-slot="skeleton" className={cn("animate-pulse", className)} role="status" aria-label={ariaLabel}>
-      {children}
-    </div>
-  );
-}
-
-type ItemProps = {
-  height?: string;
-  width?: string;
-  className?: string;
-};
-
-function SkeletonItem({ height = "auto", width = "auto", className = "" }: ItemProps) {
-  return <div data-slot="skeleton-item" className={cn("rounded-md bg-layer-1", className)} style={{ height, width }} />;
-}
-
-const Skeleton = Object.assign(SkeletonRoot, { Item: SkeletonItem });
-
-SkeletonRoot.displayName = "plane-ui-skeleton";
-SkeletonItem.displayName = "plane-ui-skeleton-item";
-
-export { Skeleton, SkeletonRoot, SkeletonItem };
diff --git a/packages/propel/src/skeleton/skeleton.stories.tsx b/packages/propel/src/skeleton/skeleton.stories.tsx
deleted file mode 100644
index 7a5be98632c..00000000000
--- a/packages/propel/src/skeleton/skeleton.stories.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Skeleton } from "./index";
-
-const meta = {
-  title: "Components/Skeleton",
-  component: Skeleton,
-  parameters: {
-    layout: "centered",
-  },
-  args: {
-    children: null,
-  },
-} satisfies Meta<typeof Skeleton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render() {
-    return (
-      <Skeleton className="flex w-80 flex-col gap-2">
-        <Skeleton.Item height="40px" width="100%" />
-      </Skeleton>
-    );
-  },
-};
-
-export const Card: Story = {
-  render() {
-    return (
-      <Skeleton className="flex w-80 flex-col gap-4">
-        <Skeleton.Item height="200px" width="100%" />
-        <div className="flex flex-col gap-2">
-          <Skeleton.Item height="20px" width="60%" />
-          <Skeleton.Item height="16px" width="40%" />
-        </div>
-      </Skeleton>
-    );
-  },
-};
-
-export const List: Story = {
-  render() {
-    return (
-      <Skeleton className="flex w-96 flex-col gap-3">
-        {[...Array(5)].map((_, i) => (
-          <div key={i} className="flex gap-3">
-            <Skeleton.Item height="40px" width="40px" className="rounded-full" />
-            <div className="flex flex-1 flex-col gap-2">
-              <Skeleton.Item height="16px" width="70%" />
-              <Skeleton.Item height="12px" width="50%" />
-            </div>
-          </div>
-        ))}
-      </Skeleton>
-    );
-  },
-};
-
-export const Table: Story = {
-  render() {
-    return (
-      <Skeleton className="flex w-full flex-col gap-3">
-        <div className="flex gap-4">
-          <Skeleton.Item height="20px" width="150px" />
-          <Skeleton.Item height="20px" width="200px" />
-          <Skeleton.Item height="20px" width="120px" />
-        </div>
-        {[...Array(5)].map((_, i) => (
-          <div key={i} className="flex gap-4">
-            <Skeleton.Item height="40px" width="150px" />
-            <Skeleton.Item height="40px" width="200px" />
-            <Skeleton.Item height="40px" width="120px" />
-          </div>
-        ))}
-      </Skeleton>
-    );
-  },
-};
-
-export const Profile: Story = {
-  render() {
-    return (
-      <Skeleton className="flex w-80 flex-col gap-4">
-        <div className="flex items-center gap-4">
-          <Skeleton.Item height="80px" width="80px" className="rounded-full" />
-          <div className="flex flex-1 flex-col gap-2">
-            <Skeleton.Item height="20px" width="60%" />
-            <Skeleton.Item height="16px" width="40%" />
-          </div>
-        </div>
-        <div className="flex flex-col gap-2">
-          <Skeleton.Item height="16px" width="100%" />
-          <Skeleton.Item height="16px" width="90%" />
-          <Skeleton.Item height="16px" width="70%" />
-        </div>
-      </Skeleton>
-    );
-  },
-};
-
-export const Avatar: Story = {
-  render() {
-    return (
-      <Skeleton className="flex gap-2">
-        <Skeleton.Item height="40px" width="40px" className="rounded-full" />
-      </Skeleton>
-    );
-  },
-};
-
-export const AvatarGroup: Story = {
-  render() {
-    return (
-      <Skeleton className="flex -space-x-2">
-        {[...Array(4)].map((_, i) => (
-          <Skeleton.Item key={i} height="40px" width="40px" className="rounded-full border-2 border-white" />
-        ))}
-      </Skeleton>
-    );
-  },
-};
-
-export const Text: Story = {
-  render() {
-    return (
-      <Skeleton className="flex w-96 flex-col gap-2">
-        <Skeleton.Item height="16px" width="100%" />
-        <Skeleton.Item height="16px" width="95%" />
-        <Skeleton.Item height="16px" width="90%" />
-        <Skeleton.Item height="16px" width="60%" />
-      </Skeleton>
-    );
-  },
-};
-
-export const Button: Story = {
-  render() {
-    return (
-      <Skeleton className="inline-flex">
-        <Skeleton.Item height="40px" width="120px" className="rounded-md" />
-      </Skeleton>
-    );
-  },
-};
-
-export const Input: Story = {
-  render() {
-    return (
-      <Skeleton className="flex w-80 flex-col gap-2">
-        <Skeleton.Item height="14px" width="80px" />
-        <Skeleton.Item height="40px" width="100%" className="rounded-md" />
-      </Skeleton>
-    );
-  },
-};
-
-export const Form: Story = {
-  render() {
-    return (
-      <Skeleton className="flex w-96 flex-col gap-4">
-        <div className="flex flex-col gap-2">
-          <Skeleton.Item height="14px" width="80px" />
-          <Skeleton.Item height="40px" width="100%" className="rounded-md" />
-        </div>
-        <div className="flex flex-col gap-2">
-          <Skeleton.Item height="14px" width="100px" />
-          <Skeleton.Item height="40px" width="100%" className="rounded-md" />
-        </div>
-        <div className="flex flex-col gap-2">
-          <Skeleton.Item height="14px" width="60px" />
-          <Skeleton.Item height="80px" width="100%" className="rounded-md" />
-        </div>
-        <Skeleton.Item height="40px" width="120px" className="rounded-md" />
-      </Skeleton>
-    );
-  },
-};
-
-export const ProductCard: Story = {
-  render() {
-    return (
-      <Skeleton className="flex w-72 flex-col gap-3 rounded-lg border p-4">
-        <Skeleton.Item height="200px" width="100%" className="rounded-md" />
-        <div className="flex flex-col gap-2">
-          <Skeleton.Item height="20px" width="80%" />
-          <Skeleton.Item height="16px" width="60%" />
-          <Skeleton.Item height="24px" width="40%" />
-        </div>
-        <Skeleton.Item height="40px" width="100%" className="rounded-md" />
-      </Skeleton>
-    );
-  },
-};
diff --git a/packages/propel/src/spinners/circular-bar-spinner.stories.tsx b/packages/propel/src/spinners/circular-bar-spinner.stories.tsx
deleted file mode 100644
index 2ca8b3ac697..00000000000
--- a/packages/propel/src/spinners/circular-bar-spinner.stories.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { CircularBarSpinner } from "./circular-bar-spinner";
-
-const meta = {
-  title: "Components/CircularBarSpinner",
-  component: CircularBarSpinner,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: {
-    height: "16px",
-    width: "16px",
-  },
-} satisfies Meta<typeof CircularBarSpinner>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Small: Story = {
-  args: {
-    height: "12px",
-    width: "12px",
-  },
-};
-
-export const Medium: Story = {
-  args: {
-    height: "24px",
-    width: "24px",
-  },
-};
-
-export const Large: Story = {
-  args: {
-    height: "32px",
-    width: "32px",
-  },
-};
-
-export const ExtraLarge: Story = {
-  args: {
-    height: "48px",
-    width: "48px",
-  },
-};
-
-export const CustomColor: Story = {
-  args: {
-    className: "text-success-primary",
-  },
-};
-
-export const AllSizes: Story = {
-  render() {
-    return (
-      <div className="flex items-center gap-6">
-        <div className="text-center">
-          <CircularBarSpinner height="12px" width="12px" />
-          <p className="text-gray-600 mt-2 text-11">Small</p>
-        </div>
-        <div className="text-center">
-          <CircularBarSpinner height="16px" width="16px" />
-          <p className="text-gray-600 mt-2 text-11">Default</p>
-        </div>
-        <div className="text-center">
-          <CircularBarSpinner height="24px" width="24px" />
-          <p className="text-gray-600 mt-2 text-11">Medium</p>
-        </div>
-        <div className="text-center">
-          <CircularBarSpinner height="32px" width="32px" />
-          <p className="text-gray-600 mt-2 text-11">Large</p>
-        </div>
-        <div className="text-center">
-          <CircularBarSpinner height="48px" width="48px" />
-          <p className="text-gray-600 mt-2 text-11">XL</p>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const ColorVariations: Story = {
-  render() {
-    return (
-      <div className="flex items-center gap-6">
-        <div className="text-center">
-          <CircularBarSpinner className="text-blue-500" height="24px" width="24px" />
-          <p className="text-gray-600 mt-2 text-11">Blue</p>
-        </div>
-        <div className="text-center">
-          <CircularBarSpinner className="text-success-primary" height="24px" width="24px" />
-          <p className="text-gray-600 mt-2 text-11">Green</p>
-        </div>
-        <div className="text-center">
-          <CircularBarSpinner className="text-danger-primary" height="24px" width="24px" />
-          <p className="text-gray-600 mt-2 text-11">Red</p>
-        </div>
-        <div className="text-center">
-          <CircularBarSpinner className="text-purple-500" height="24px" width="24px" />
-          <p className="text-gray-600 mt-2 text-11">Purple</p>
-        </div>
-        <div className="text-center">
-          <CircularBarSpinner className="text-orange-500" height="24px" width="24px" />
-          <p className="text-gray-600 mt-2 text-11">Orange</p>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const InButton: Story = {
-  render() {
-    return (
-      <button className="bg-green-500 flex items-center gap-2 rounded-sm px-4 py-2 text-on-color">
-        <CircularBarSpinner height="16px" width="16px" />
-        <span>Processing...</span>
-      </button>
-    );
-  },
-};
-
-export const CenteredInCard: Story = {
-  render() {
-    return (
-      <div className="border-gray-200 shadow-md w-96 rounded-lg border bg-white p-8">
-        <div className="flex flex-col items-center justify-center space-y-4">
-          <CircularBarSpinner height="48px" width="48px" />
-          <p className="text-gray-600 text-13">Processing data...</p>
-        </div>
-      </div>
-    );
-  },
-};
diff --git a/packages/propel/src/spinners/circular-spinner.stories.tsx b/packages/propel/src/spinners/circular-spinner.stories.tsx
deleted file mode 100644
index c9bcfb2f749..00000000000
--- a/packages/propel/src/spinners/circular-spinner.stories.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Spinner } from "./circular-spinner";
-
-const meta = {
-  title: "Components/Spinner",
-  component: Spinner,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: {
-    height: "32px",
-    width: "32px",
-  },
-} satisfies Meta<typeof Spinner>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Small: Story = {
-  args: {
-    height: "16px",
-    width: "16px",
-  },
-};
-
-export const Medium: Story = {
-  args: {
-    height: "24px",
-    width: "24px",
-  },
-};
-
-export const Large: Story = {
-  args: {
-    height: "48px",
-    width: "48px",
-  },
-};
-
-export const ExtraLarge: Story = {
-  args: {
-    height: "64px",
-    width: "64px",
-  },
-};
-
-export const CustomColor: Story = {
-  args: {
-    className: "text-blue-500",
-  },
-};
-
-export const AllSizes: Story = {
-  render() {
-    return (
-      <div className="flex items-center gap-6">
-        <div className="text-center">
-          <Spinner height="16px" width="16px" />
-          <p className="text-gray-600 mt-2 text-11">Small</p>
-        </div>
-        <div className="text-center">
-          <Spinner height="24px" width="24px" />
-          <p className="text-gray-600 mt-2 text-11">Medium</p>
-        </div>
-        <div className="text-center">
-          <Spinner height="32px" width="32px" />
-          <p className="text-gray-600 mt-2 text-11">Default</p>
-        </div>
-        <div className="text-center">
-          <Spinner height="48px" width="48px" />
-          <p className="text-gray-600 mt-2 text-11">Large</p>
-        </div>
-        <div className="text-center">
-          <Spinner height="64px" width="64px" />
-          <p className="text-gray-600 mt-2 text-11">XL</p>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const ColorVariations: Story = {
-  render() {
-    return (
-      <div className="flex items-center gap-6">
-        <div className="text-center">
-          <Spinner className="text-blue-500" />
-          <p className="text-gray-600 mt-2 text-11">Blue</p>
-        </div>
-        <div className="text-center">
-          <Spinner className="text-success-primary" />
-          <p className="text-gray-600 mt-2 text-11">Green</p>
-        </div>
-        <div className="text-center">
-          <Spinner className="text-danger-primary" />
-          <p className="text-gray-600 mt-2 text-11">Red</p>
-        </div>
-        <div className="text-center">
-          <Spinner className="text-purple-500" />
-          <p className="text-gray-600 mt-2 text-11">Purple</p>
-        </div>
-        <div className="text-center">
-          <Spinner className="text-orange-500" />
-          <p className="text-gray-600 mt-2 text-11">Orange</p>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const InButton: Story = {
-  render() {
-    return (
-      <button className="bg-blue-500 flex items-center gap-2 rounded-sm px-4 py-2 text-on-color">
-        <Spinner height="16px" width="16px" />
-        <span>Loading...</span>
-      </button>
-    );
-  },
-};
-
-export const CenteredInCard: Story = {
-  render() {
-    return (
-      <div className="border-gray-200 shadow-md w-96 rounded-lg border bg-white p-8">
-        <div className="flex flex-col items-center justify-center space-y-4">
-          <Spinner height="48px" width="48px" />
-          <p className="text-gray-600 text-13">Loading content...</p>
-        </div>
-      </div>
-    );
-  },
-};
diff --git a/packages/propel/src/styles/react-day-picker.css b/packages/propel/src/styles/react-day-picker.css
deleted file mode 100644
index 1a541c46c83..00000000000
--- a/packages/propel/src/styles/react-day-picker.css
+++ /dev/null
@@ -1,313 +0,0 @@
-@layer components {
-  .rdp-root {
-    font-size: 12px;
-
-    --rdp-cell-size: 40px;
-    /* Size of the day cells. */
-    --rdp-caption-font-size: 1rem;
-    /* Font size for the caption labels. */
-    --rdp-caption-navigation-size: 1.25rem;
-    /* Font size for the caption labels. */
-    --rdp-accent-color: var(--background-color-accent-primary);
-    /* Accent color for the background of selected days. */
-    --rdp-background-color: --alpha(var(--background-color-accent-primary) / 50%);
-    /* Background color for the hovered/focused elements. */
-    --rdp-dark-background-color: var(--background-color-accent-primary-hover);
-    /* Background color for the hovered/focused, already selected elements. */
-    --rdp-outline: 2px solid var(--rdp-accent-color);
-    /* Outline border for focused elements */
-    --rdp-selected-color: var(--text-color-on-color);
-    /* Color of selected day text */
-
-    background: transparent;
-  }
-
-  .rdp-root {
-    position: relative; /* Required to position the nav. */
-    box-sizing: border-box;
-  }
-
-  /* ---------- */
-  /* Day Buttons */
-  /* ----------- */
-
-  .rdp-day_button {
-    display: flex;
-    overflow: hidden;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    width: var(--rdp-cell-size);
-    max-width: var(--rdp-cell-size);
-    height: var(--rdp-cell-size);
-    margin: 0;
-    border: 2px solid transparent;
-    border-radius: 50%;
-  }
-
-  .rdp-day.rdp-outside:not(.rdp-selected) .rdp-day_button {
-    opacity: 0.5;
-  }
-
-  .rdp-day.rdp-disabled:not(.rdp-selected) .rdp-day_button {
-    opacity: 0.25;
-  }
-
-  .rdp-day:not(.rdp-disabled) .rdp-day_button {
-    cursor: pointer;
-  }
-
-  .rdp-day:not(.rdp-selected, .rdp-disabled) .rdp-day_button:focus-visible {
-    color: inherit;
-    background-color: var(--rdp-background-color);
-  }
-
-  .rdp-selected:not(.rdp-range_middle, .rdp-disabled) .rdp-day_button:focus-visible {
-    outline: var(--rdp-outline);
-    outline-offset: 2px;
-    background-color: var(--rdp-dark-background-color);
-    outline-width: thin;
-  }
-
-  .rdp-day:not(.rdp-disabled) .rdp-day_button:hover {
-    background-color: var(--rdp-background-color);
-  }
-
-  .rdp-selected .rdp-day_button {
-    background-color: var(--rdp-accent-color);
-    border-radius: 50%;
-    color: var(--rdp-selected-color);
-    z-index: 1;
-  }
-
-  .rdp-selected .rdp-day_button:hover:not(.rdp-disabled) {
-    background-color: var(--rdp-dark-background-color);
-  }
-
-  .rdp-week {
-    margin: 0;
-    padding: 0;
-  }
-
-  .rdp-today:not(.rdp-outside) {
-    position: relative;
-  }
-
-  .rdp-today:not(.rdp-outside)::after {
-    content: "";
-    position: absolute;
-    left: 50%;
-    bottom: 2px;
-    width: 0.5em;
-    height: 0.5em;
-    background-color: var(--rdp-background-color);
-    border-radius: 100%;
-    transform: translate(-50%, 0);
-  }
-
-  .rdp-selected .rdp-day_button:focus-visible,
-  .rdp-selected .rdp-day_button:hover {
-    color: var(--rdp-selected-color);
-    opacity: 1;
-    background-color: var(--rdp-accent-color);
-  }
-
-  .rdp-weekday {
-    vertical-align: middle;
-    font-weight: 700;
-    text-align: center;
-    font-size: 0.75em;
-    height: var(--rdp-cell-size);
-    padding: 0;
-    text-transform: uppercase;
-  }
-
-  /* ---------- */
-  /* Top Nav  */
-  /* ---------- */
-
-  .rdp-nav {
-    box-sizing: border-box;
-    position: absolute;
-    padding: inherit;
-
-    top: 1.2em;
-    right: 1em;
-
-    display: flex;
-    align-items: center;
-  }
-
-  .rdp-button_next,
-  .rdp-button_previous {
-    border: none;
-    background: none;
-    padding: 0;
-    margin: 0;
-    cursor: pointer;
-    font: inherit;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    appearance: none;
-    width: var(--rdp-caption-navigation-size);
-    height: var(--rdp-caption-navigation-size);
-    padding: 0.25em;
-    border-radius: 2px;
-  }
-
-  .rdp-chevron {
-    @apply fill-secondary;
-    height: 0.75rem;
-    width: 0.75rem;
-  }
-
-  .rdp-button_next:hover,
-  .rdp-button_previous:hover,
-  .rdp-button_next:focus-visible,
-  .rdp-button_previous:focus-visible {
-    @apply bg-layer-transparent-hover!;
-  }
-
-  /* ---------- */
-  /* Dropdowns  */
-  /* ---------- */
-
-  .rdp-dropdowns {
-    position: relative;
-    /* width: 100%; */
-    display: inline-flex;
-    align-items: center;
-  }
-
-  .rdp-dropdown {
-    appearance: none;
-    --webkit-appearance: none;
-    --moz-appearance: none;
-    position: absolute;
-    z-index: 2;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    opacity: 0;
-    border: none;
-    font-family: inherit;
-    font-size: 1rem;
-    line-height: inherit;
-    cursor: pointer;
-    background: transparent;
-
-    &:hover {
-      @apply bg-layer-transparent-hover!;
-    }
-  }
-
-  .rdp-dropdown_root {
-    margin: 0;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-  }
-
-  .rdp-months_dropdown {
-    text-transform: capitalize;
-  }
-
-  .rdp-dropdown[data-disabled="true"] {
-    opacity: unset;
-    color: unset;
-  }
-
-  .rdp-caption_label {
-    z-index: 1;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.25rem;
-    margin: 0;
-    padding: 0 0.25em;
-    white-space: nowrap;
-    color: currentColor;
-    border: 0;
-    border: 2px solid transparent;
-    font-family: inherit;
-    font-size: var(--rdp-caption-font-size);
-    font-weight: 600;
-    background: transparent;
-    border-radius: 4px;
-  }
-
-  .rdp-dropdown:not([data-disabled="true"]) {
-    &:focus-visible + .rdp-caption_label {
-      border: var(--rdp-outline);
-      border-radius: 6px;
-    }
-
-    &:hover {
-      & + .rdp-caption_label {
-        @apply bg-layer-transparent-hover!;
-      }
-    }
-  }
-
-  .rdp-dropdown_icon {
-    margin: 0 0 0 5px;
-  }
-
-  /* --------------- */
-  /* Range selection */
-  /* --------------- */
-
-  .rdp-range_start,
-  .rdp-range_middle,
-  .rdp-range_end {
-    position: relative;
-  }
-
-  .rdp-range_start::before,
-  .rdp-range_middle::before,
-  .rdp-range_end::before {
-    content: "";
-    position: absolute;
-    background-color: var(--rdp-background-color);
-    top: 50%;
-    height: 100%;
-    width: 50%;
-    transform: translate(0, -50%);
-    z-index: -1;
-  }
-
-  .rdp-range_start::before {
-    left: 50%;
-  }
-
-  .rdp-range_middle::before {
-    left: 50%;
-    width: 100%;
-    transform: translate(-50%, -50%);
-  }
-
-  .rdp-range_end::before {
-    right: 50%;
-  }
-
-  .rdp-range_start.rdp-range_end::before {
-    display: none;
-  }
-
-  .rdp-range_middle .rdp-day_button {
-    background-color: transparent;
-    color: inherit;
-  }
-
-  .rdp-day.rdp-range_middle .rdp-day_button:hover,
-  .rdp-day.rdp-range_middle .rdp-day_button:focus-visible {
-    background-color: var(--rdp-background-color);
-    color: inherit;
-  }
-}
diff --git a/packages/propel/src/switch/index.ts b/packages/propel/src/switch/index.ts
deleted file mode 100644
index d980334597b..00000000000
--- a/packages/propel/src/switch/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./root";
diff --git a/packages/propel/src/switch/root.tsx b/packages/propel/src/switch/root.tsx
deleted file mode 100644
index 0c3e87c2796..00000000000
--- a/packages/propel/src/switch/root.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-import { Switch as BaseSwitch } from "@base-ui-components/react/switch";
-import { cn } from "../utils/classname";
-
-export interface IToggleSwitchProps {
-  value: boolean;
-  onChange: (value: boolean) => void;
-  label?: string;
-  size?: "sm" | "md" | "lg";
-  disabled?: boolean;
-  className?: string;
-}
-
-function Switch({ value, onChange, label, size = "sm", disabled, className }: IToggleSwitchProps) {
-  return (
-    <BaseSwitch.Root
-      checked={value}
-      disabled={disabled}
-      onCheckedChange={onChange}
-      aria-label={label}
-      className={cn(
-        "relative inline-flex flex-shrink-0 cursor-pointer rounded-full border border-subtle transition-colors duration-200 ease-in-out focus:outline-none",
-        // size
-        size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10",
-        // state
-        disabled
-          ? "cursor-not-allowed bg-layer-1"
-          : value
-            ? "cursor-pointer bg-accent-primary"
-            : "cursor-pointer bg-surface-2",
-        className
-      )}
-    >
-      {label && <span className="sr-only">{label}</span>}
-      <BaseSwitch.Thumb
-        aria-hidden="true"
-        className={cn(
-          "shadow inline-block self-center rounded-full ring-0 transition-transform duration-200 ease-in-out",
-          // size
-          size === "sm" ? "h-3 w-3" : size === "md" ? "h-4 w-4" : "h-5 w-5",
-          // position + color by state
-          value
-            ? size === "sm"
-              ? "translate-x-3 bg-white"
-              : size === "md"
-                ? "translate-x-4 bg-white"
-                : "translate-x-5 bg-white"
-            : "translate-x-0.5 bg-surface-2",
-          // disabled
-          disabled && "cursor-not-allowed bg-surface-2"
-        )}
-      />
-    </BaseSwitch.Root>
-  );
-}
-
-Switch.displayName = "plane-ui-switch";
-
-export { Switch };
diff --git a/packages/propel/src/switch/switch.stories.tsx b/packages/propel/src/switch/switch.stories.tsx
deleted file mode 100644
index 3e41d6e7d2e..00000000000
--- a/packages/propel/src/switch/switch.stories.tsx
+++ /dev/null
@@ -1,247 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useArgs } from "storybook/preview-api";
-import { Switch } from "./root";
-
-const meta = {
-  title: "Components/Switch",
-  component: Switch,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: { value: false, onChange: () => {} },
-  render(args) {
-    const [{ value }, updateArgs] = useArgs();
-    const setValue = (newValue: boolean) => updateArgs({ value: newValue });
-    return <Switch {...args} value={value} onChange={setValue} />;
-  },
-} satisfies Meta<typeof Switch>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Checked: Story = {
-  args: { value: true },
-};
-
-export const WithLabel: Story = {
-  render(args) {
-    const [value, setValue] = useState(args.value);
-    return (
-      <div className="flex items-center gap-2">
-        <Switch {...args} value={value} onChange={setValue} label="Enable notifications" />
-        <label className="text-13">Enable notifications</label>
-      </div>
-    );
-  },
-};
-
-export const Small: Story = {
-  args: { size: "sm" },
-};
-
-export const Medium: Story = {
-  args: { size: "md" },
-};
-
-export const Large: Story = {
-  args: { size: "lg" },
-};
-
-export const Disabled: Story = {
-  args: { disabled: true },
-};
-
-export const DisabledChecked: Story = {
-  args: { value: true, disabled: true },
-};
-
-export const AllSizes: Story = {
-  render() {
-    const [small, setSmall] = useState(false);
-    const [medium, setMedium] = useState(false);
-    const [large, setLarge] = useState(false);
-
-    return (
-      <div className="flex items-center gap-6">
-        <div className="text-center">
-          <Switch value={small} onChange={setSmall} size="sm" />
-          <p className="text-gray-600 mt-2 text-11">Small</p>
-        </div>
-        <div className="text-center">
-          <Switch value={medium} onChange={setMedium} size="md" />
-          <p className="text-gray-600 mt-2 text-11">Medium</p>
-        </div>
-        <div className="text-center">
-          <Switch value={large} onChange={setLarge} size="lg" />
-          <p className="text-gray-600 mt-2 text-11">Large</p>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const AllStates: Story = {
-  render() {
-    const [unchecked, setUnchecked] = useState(false);
-    const [checked, setChecked] = useState(true);
-    const [disabledUnchecked] = useState(false);
-    const [disabledChecked] = useState(true);
-
-    return (
-      <div className="space-y-4">
-        <div className="flex items-center gap-4">
-          <Switch value={unchecked} onChange={setUnchecked} />
-          <span className="text-gray-600 text-13">Unchecked</span>
-        </div>
-        <div className="flex items-center gap-4">
-          <Switch value={checked} onChange={setChecked} />
-          <span className="text-gray-600 text-13">Checked</span>
-        </div>
-        <div className="flex items-center gap-4">
-          <Switch value={disabledUnchecked} onChange={() => {}} disabled />
-          <span className="text-gray-600 text-13">Disabled Unchecked</span>
-        </div>
-        <div className="flex items-center gap-4">
-          <Switch value={disabledChecked} onChange={() => {}} disabled />
-          <span className="text-gray-600 text-13">Disabled Checked</span>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const InForm: Story = {
-  render() {
-    const [notifications, setNotifications] = useState(true);
-    const [marketing, setMarketing] = useState(false);
-    const [updates, setUpdates] = useState(true);
-
-    return (
-      <div className="border-gray-200 shadow-md w-80 rounded-lg border bg-white p-6">
-        <h3 className="text-16 font-semibold">Notification Settings</h3>
-        <div className="mt-4 space-y-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-13 font-medium">Push Notifications</p>
-              <p className="text-gray-500 text-11">Receive push notifications on your device</p>
-            </div>
-            <Switch value={notifications} onChange={setNotifications} size="md" />
-          </div>
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-13 font-medium">Marketing Emails</p>
-              <p className="text-gray-500 text-11">Receive emails about new features</p>
-            </div>
-            <Switch value={marketing} onChange={setMarketing} size="md" />
-          </div>
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-13 font-medium">Product Updates</p>
-              <p className="text-gray-500 text-11">Get notified about product updates</p>
-            </div>
-            <Switch value={updates} onChange={setUpdates} size="md" />
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const WithDescription: Story = {
-  render() {
-    const [enabled, setEnabled] = useState(false);
-
-    return (
-      <div className="border-gray-200 w-96 rounded-lg border bg-white p-6">
-        <div className="flex items-start justify-between">
-          <div className="flex-1">
-            <h4 className="text-13 font-semibold">Enable Two-Factor Authentication</h4>
-            <p className="text-gray-500 mt-1 text-11">
-              Add an extra layer of security to your account by enabling two-factor authentication.
-            </p>
-          </div>
-          <Switch value={enabled} onChange={setEnabled} size="md" className="ml-4" />
-        </div>
-      </div>
-    );
-  },
-};
-
-export const Interactive: Story = {
-  render() {
-    const [enabled, setEnabled] = useState(false);
-
-    return (
-      <div className="border-gray-200 w-80 space-y-4 rounded-lg border bg-white p-6">
-        <div className="flex items-center justify-between">
-          <span className="text-13 font-medium">Feature Toggle</span>
-          <Switch value={enabled} onChange={setEnabled} size="md" />
-        </div>
-        <div className="bg-gray-50 rounded-sm p-4">
-          <p className="text-gray-700 text-13">
-            Status: <span className="font-semibold">{enabled ? "Enabled" : "Disabled"}</span>
-          </p>
-          {enabled && <p className="mt-2 text-11 text-success-primary">Feature is now active and ready to use!</p>}
-        </div>
-      </div>
-    );
-  },
-};
-
-export const CustomStyles: Story = {
-  render() {
-    const [value, setValue] = useState(false);
-
-    return (
-      <div className="flex items-center gap-4">
-        <Switch
-          value={value}
-          onChange={setValue}
-          size="lg"
-          className="border-purple-300 data-[state=checked]:bg-purple-500 border-2"
-        />
-        <span className="text-13">Custom styled switch</span>
-      </div>
-    );
-  },
-};
-
-export const MultipleControls: Story = {
-  render() {
-    const [settings, setSettings] = useState({
-      feature1: true,
-      feature2: false,
-      feature3: true,
-      feature4: false,
-      feature5: true,
-    });
-
-    const toggleSetting = (key: keyof typeof settings) => {
-      setSettings((prev) => ({ ...prev, [key]: !prev[key] }));
-    };
-
-    return (
-      <div className="border-gray-200 w-96 rounded-lg border bg-white p-6">
-        <h3 className="mb-4 text-16 font-semibold">Feature Flags</h3>
-        <div className="space-y-3">
-          {Object.entries(settings).map(([key, value]) => (
-            <div key={key} className="flex items-center justify-between">
-              <span className="text-13 capitalize">{key.replace(/([A-Z])/g, " $1").trim()}</span>
-              <Switch value={value} onChange={() => toggleSetting(key as keyof typeof settings)} size="sm" />
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  },
-};
diff --git a/packages/propel/src/tab-navigation/tab-navigation.stories.tsx b/packages/propel/src/tab-navigation/tab-navigation.stories.tsx
deleted file mode 100644
index 7a7da4fdd5f..00000000000
--- a/packages/propel/src/tab-navigation/tab-navigation.stories.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-// icons import
-import {
-  CyclesOutline,
-  IntakeOutline,
-  ModuleOutline,
-  OverviewOutline,
-  PagesOutline,
-  ViewsOutline,
-  WorkItemsOutline,
-} from "@makeplane/propel/icons";
-// tab navigation import
-import { TabNavigationItem } from "./tab-navigation-item";
-import { TabNavigationList } from "./tab-navigation-list";
-
-const meta: Meta<typeof TabNavigationList> = {
-  title: "Components/TabNavigation",
-  component: TabNavigationList,
-  parameters: {
-    layout: "centered",
-  },
-  decorators: [
-    (Story) => (
-      <div className="w-[900px] bg-surface-1 p-8">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render() {
-    const [activeNavTab, setActiveNavTab] = useState("work_items");
-
-    // Example navigation items (matching actual Plane project navigation)
-    const navItems = [
-      { key: "overview", name: "Overview", href: "#overview", icon: OverviewOutline },
-      { key: "work_items", name: "Work items", href: "#work_items", icon: WorkItemsOutline },
-      { key: "cycles", name: "Cycles", href: "#cycles", icon: CyclesOutline },
-      { key: "modules", name: "Modules", href: "#modules", icon: ModuleOutline },
-      { key: "views", name: "Views", href: "#views", icon: ViewsOutline },
-      { key: "pages", name: "Pages", href: "#pages", icon: PagesOutline },
-      { key: "intake", name: "Intake", href: "#intake", icon: IntakeOutline },
-    ];
-
-    return (
-      <div className="space-y-8">
-        {/* Example 1: Navigation with anchor tags (simulating React Router Link) */}
-        <div className="space-y-3">
-          <div className="text-11 font-medium tracking-wide text-tertiary uppercase">
-            With Navigation Links (e.g., React Router)
-          </div>
-          <TabNavigationList>
-            {navItems.map((item) => (
-              <a
-                key={item.key}
-                href={item.href}
-                onClick={(e) => {
-                  e.preventDefault();
-                  setActiveNavTab(item.key);
-                }}
-              >
-                <TabNavigationItem isActive={activeNavTab === item.key}>
-                  <div className="z-10 flex items-center gap-2">
-                    <item.icon className="h-4 w-4" />
-                    <span>{item.name}</span>
-                  </div>
-                </TabNavigationItem>
-              </a>
-            ))}
-          </TabNavigationList>
-          <div className="text-11 text-tertiary">
-            Active: <span className="font-mono text-primary">{activeNavTab}</span>
-          </div>
-        </div>
-
-        {/* Code example */}
-        <div className="mt-6 rounded-md bg-layer-1 p-4">
-          <div className="mb-2 text-11 font-medium text-secondary">Example Code:</div>
-          <pre className="overflow-x-auto text-11 text-tertiary">
-            {`// With React Router Link
-<TabNavigationList>
-  {items.map(item => (
-    <Link key={item.key} to={item.href}>
-      <TabNavigationItem isActive={pathname === item.href}>
-        <item.icon className="h-4 w-4" />
-        <span>{item.name}</span>
-      </TabNavigationItem>
-    </Link>
-  ))}
-</TabNavigationList>
-`}
-          </pre>
-        </div>
-      </div>
-    );
-  },
-};
diff --git a/packages/propel/src/table/core.tsx b/packages/propel/src/table/core.tsx
deleted file mode 100644
index e13dfb14f43..00000000000
--- a/packages/propel/src/table/core.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { cn } from "../utils/classname";
-
-const Table = React.forwardRef(function Table(
-  { className, ...props }: React.ComponentPropsWithoutRef<"table">,
-  ref: React.ForwardedRef<React.ComponentRef<"table">>
-) {
-  return (
-    <div className="relative w-full overflow-auto">
-      <table ref={ref} className={cn("w-full caption-bottom text-13", className)} {...props} />
-    </div>
-  );
-});
-Table.displayName = "Table";
-
-const TableHeader = React.forwardRef(function TableHeader(
-  { className, ...props }: React.ComponentPropsWithoutRef<"thead">,
-  ref: React.ForwardedRef<React.ComponentRef<"thead">>
-) {
-  return <thead ref={ref} className={cn("border-y border-subtle bg-layer-1 py-4", className)} {...props} />;
-});
-TableHeader.displayName = "TableHeader";
-
-const TableBody = React.forwardRef(function TableBody(
-  { className, ...props }: React.ComponentPropsWithoutRef<"tbody">,
-  ref: React.ForwardedRef<React.ComponentRef<"tbody">>
-) {
-  return <tbody ref={ref} className={cn("", className)} {...props} />;
-});
-TableBody.displayName = "TableBody";
-
-const TableFooter = React.forwardRef(function TableFooter(
-  { className, ...props }: React.ComponentPropsWithoutRef<"tfoot">,
-  ref: React.ForwardedRef<React.ComponentRef<"tfoot">>
-) {
-  return <tfoot ref={ref} className={cn("bg-layer-1 font-medium", className)} {...props} />;
-});
-TableFooter.displayName = "TableFooter";
-
-const TableRow = React.forwardRef(function TableRow(
-  { className, ...props }: React.ComponentPropsWithoutRef<"tr">,
-  ref: React.ForwardedRef<React.ComponentRef<"tr">>
-) {
-  return <tr ref={ref} className={cn("transition-colors data-[state=selected]:bg-surface-1", className)} {...props} />;
-});
-TableRow.displayName = "TableRow";
-
-const TableHead = React.forwardRef(function TableHead(
-  { className, ...props }: React.ComponentPropsWithoutRef<"th">,
-  ref: React.ForwardedRef<React.ComponentRef<"th">>
-) {
-  return (
-    <th
-      ref={ref}
-      className={cn(
-        "h-10 px-2 text-left align-middle font-medium text-tertiary [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
-      )}
-      {...props}
-    />
-  );
-});
-TableHead.displayName = "TableHead";
-
-const TableCell = React.forwardRef(function TableCell(
-  { className, ...props }: React.ComponentPropsWithoutRef<"td">,
-  ref: React.ForwardedRef<React.ComponentRef<"td">>
-) {
-  return (
-    <td
-      ref={ref}
-      className={cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className)}
-      {...props}
-    />
-  );
-});
-TableCell.displayName = "TableCell";
-
-const TableCaption = React.forwardRef(function TableCaption(
-  { className, ...props }: React.ComponentPropsWithoutRef<"caption">,
-  ref: React.ForwardedRef<React.ComponentRef<"caption">>
-) {
-  return <caption ref={ref} className={cn("mt-4 text-13 text-tertiary", className)} {...props} />;
-});
-TableCaption.displayName = "TableCaption";
-
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/packages/propel/src/table/index.ts b/packages/propel/src/table/index.ts
deleted file mode 100644
index bcdcb87a16a..00000000000
--- a/packages/propel/src/table/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./core";
diff --git a/packages/propel/src/table/table.stories.tsx b/packages/propel/src/table/table.stories.tsx
deleted file mode 100644
index 5aa46c50eb7..00000000000
--- a/packages/propel/src/table/table.stories.tsx
+++ /dev/null
@@ -1,382 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } from "./core";
-
-const meta = {
-  title: "Components/Table",
-  component: Table,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Table>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render() {
-    return (
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Name</TableHead>
-            <TableHead>Email</TableHead>
-            <TableHead>Role</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          <TableRow>
-            <TableCell>John Doe</TableCell>
-            <TableCell>john@example.com</TableCell>
-            <TableCell>Admin</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>Jane Smith</TableCell>
-            <TableCell>jane@example.com</TableCell>
-            <TableCell>User</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>Bob Wilson</TableCell>
-            <TableCell>bob@example.com</TableCell>
-            <TableCell>Moderator</TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-    );
-  },
-};
-
-export const WithCaption: Story = {
-  render() {
-    return (
-      <Table>
-        <TableCaption>A list of recent users</TableCaption>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Name</TableHead>
-            <TableHead>Email</TableHead>
-            <TableHead>Status</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          <TableRow>
-            <TableCell>Alice Johnson</TableCell>
-            <TableCell>alice@example.com</TableCell>
-            <TableCell>Active</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>Charlie Brown</TableCell>
-            <TableCell>charlie@example.com</TableCell>
-            <TableCell>Inactive</TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-    );
-  },
-};
-
-export const WithFooter: Story = {
-  render() {
-    return (
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Product</TableHead>
-            <TableHead className="text-right">Quantity</TableHead>
-            <TableHead className="text-right">Price</TableHead>
-            <TableHead className="text-right">Total</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          <TableRow>
-            <TableCell>Product A</TableCell>
-            <TableCell className="text-right">2</TableCell>
-            <TableCell className="text-right">$10.00</TableCell>
-            <TableCell className="text-right">$20.00</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>Product B</TableCell>
-            <TableCell className="text-right">1</TableCell>
-            <TableCell className="text-right">$25.00</TableCell>
-            <TableCell className="text-right">$25.00</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>Product C</TableCell>
-            <TableCell className="text-right">3</TableCell>
-            <TableCell className="text-right">$15.00</TableCell>
-            <TableCell className="text-right">$45.00</TableCell>
-          </TableRow>
-        </TableBody>
-        <TableFooter>
-          <TableRow>
-            <TableCell colSpan={3} className="font-semibold">
-              Total
-            </TableCell>
-            <TableCell className="text-right font-semibold">$90.00</TableCell>
-          </TableRow>
-        </TableFooter>
-      </Table>
-    );
-  },
-};
-
-export const WithActions: Story = {
-  render() {
-    return (
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Name</TableHead>
-            <TableHead>Email</TableHead>
-            <TableHead>Role</TableHead>
-            <TableHead className="text-right">Actions</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          <TableRow>
-            <TableCell>John Doe</TableCell>
-            <TableCell>john@example.com</TableCell>
-            <TableCell>Admin</TableCell>
-            <TableCell className="text-right">
-              <button className="text-blue-500 mr-2 hover:underline">Edit</button>
-              <button className="text-danger-primary hover:underline">Delete</button>
-            </TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>Jane Smith</TableCell>
-            <TableCell>jane@example.com</TableCell>
-            <TableCell>User</TableCell>
-            <TableCell className="text-right">
-              <button className="text-blue-500 mr-2 hover:underline">Edit</button>
-              <button className="text-danger-primary hover:underline">Delete</button>
-            </TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-    );
-  },
-};
-
-export const WithBadges: Story = {
-  render() {
-    return (
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Project</TableHead>
-            <TableHead>Status</TableHead>
-            <TableHead>Priority</TableHead>
-            <TableHead>Assignee</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          <TableRow>
-            <TableCell>Website Redesign</TableCell>
-            <TableCell>
-              <span className="bg-green-100 rounded-full px-2 py-1 text-11 text-success-primary">In Progress</span>
-            </TableCell>
-            <TableCell>
-              <span className="bg-red-100 rounded-full px-2 py-1 text-11 text-danger-primary">High</span>
-            </TableCell>
-            <TableCell>John Doe</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>Mobile App</TableCell>
-            <TableCell>
-              <span className="bg-blue-100 text-blue-800 rounded-full px-2 py-1 text-11">Planned</span>
-            </TableCell>
-            <TableCell>
-              <span className="bg-yellow-100 text-yellow-800 rounded-full px-2 py-1 text-11">Medium</span>
-            </TableCell>
-            <TableCell>Jane Smith</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>API Integration</TableCell>
-            <TableCell>
-              <span className="bg-gray-100 text-gray-800 rounded-full px-2 py-1 text-11">Completed</span>
-            </TableCell>
-            <TableCell>
-              <span className="bg-green-100 rounded-full px-2 py-1 text-11 text-success-primary">Low</span>
-            </TableCell>
-            <TableCell>Bob Wilson</TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-    );
-  },
-};
-
-export const WithCheckboxes: Story = {
-  render() {
-    return (
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>
-              <input type="checkbox" className="h-4 w-4" aria-label="Select all rows" />
-            </TableHead>
-            <TableHead>Name</TableHead>
-            <TableHead>Email</TableHead>
-            <TableHead>Role</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          <TableRow>
-            <TableCell>
-              <input type="checkbox" className="h-4 w-4" aria-label="Select row for John Doe" />
-            </TableCell>
-            <TableCell>John Doe</TableCell>
-            <TableCell>john@example.com</TableCell>
-            <TableCell>Admin</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>
-              <input type="checkbox" className="h-4 w-4" aria-label="Select row for Jane Smith" />
-            </TableCell>
-            <TableCell>Jane Smith</TableCell>
-            <TableCell>jane@example.com</TableCell>
-            <TableCell>User</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>
-              <input type="checkbox" className="h-4 w-4" aria-label="Select row for Bob Wilson" />
-            </TableCell>
-            <TableCell>Bob Wilson</TableCell>
-            <TableCell>bob@example.com</TableCell>
-            <TableCell>Moderator</TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-    );
-  },
-};
-
-export const EmptyState: Story = {
-  render() {
-    return (
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Name</TableHead>
-            <TableHead>Email</TableHead>
-            <TableHead>Role</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          <TableRow>
-            <TableCell colSpan={3} className="h-24 text-center">
-              No results found.
-            </TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-    );
-  },
-};
-
-export const LargeDataset: Story = {
-  render() {
-    return (
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>ID</TableHead>
-            <TableHead>Name</TableHead>
-            <TableHead>Email</TableHead>
-            <TableHead>Department</TableHead>
-            <TableHead>Status</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {Array.from({ length: 15 }, (_, i) => (
-            <TableRow key={i}>
-              <TableCell>{1000 + i}</TableCell>
-              <TableCell>User {i + 1}</TableCell>
-              <TableCell>user{i + 1}@example.com</TableCell>
-              <TableCell>{["Engineering", "Sales", "Marketing", "Support"][i % 4]}</TableCell>
-              <TableCell>
-                <span
-                  className={`rounded-full px-2 py-1 text-11 ${
-                    i % 2 === 0 ? "bg-green-100 text-success-primary" : "bg-gray-100 text-gray-800"
-                  }`}
-                >
-                  {i % 2 === 0 ? "Active" : "Inactive"}
-                </span>
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    );
-  },
-};
-
-export const CustomStyling: Story = {
-  render() {
-    return (
-      <Table className="border-blue-200 border-2">
-        <TableHeader>
-          <TableRow className="bg-blue-100">
-            <TableHead className="text-blue-900">Name</TableHead>
-            <TableHead className="text-blue-900">Email</TableHead>
-            <TableHead className="text-blue-900">Role</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          <TableRow className="hover:bg-blue-50">
-            <TableCell className="font-semibold">John Doe</TableCell>
-            <TableCell>john@example.com</TableCell>
-            <TableCell>Admin</TableCell>
-          </TableRow>
-          <TableRow className="hover:bg-blue-50">
-            <TableCell className="font-semibold">Jane Smith</TableCell>
-            <TableCell>jane@example.com</TableCell>
-            <TableCell>User</TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-    );
-  },
-};
-
-export const ResponsiveTable: Story = {
-  render() {
-    return (
-      <div className="w-full max-w-4xl">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Name</TableHead>
-              <TableHead className="hidden sm:table-cell">Email</TableHead>
-              <TableHead className="hidden md:table-cell">Department</TableHead>
-              <TableHead className="hidden lg:table-cell">Location</TableHead>
-              <TableHead>Status</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            <TableRow>
-              <TableCell>John Doe</TableCell>
-              <TableCell className="hidden sm:table-cell">john@example.com</TableCell>
-              <TableCell className="hidden md:table-cell">Engineering</TableCell>
-              <TableCell className="hidden lg:table-cell">New York</TableCell>
-              <TableCell>Active</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>Jane Smith</TableCell>
-              <TableCell className="hidden sm:table-cell">jane@example.com</TableCell>
-              <TableCell className="hidden md:table-cell">Marketing</TableCell>
-              <TableCell className="hidden lg:table-cell">San Francisco</TableCell>
-              <TableCell>Active</TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </div>
-    );
-  },
-};
diff --git a/packages/propel/src/tabs/index.ts b/packages/propel/src/tabs/index.ts
deleted file mode 100644
index 8974369072d..00000000000
--- a/packages/propel/src/tabs/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./tabs";
diff --git a/packages/propel/src/tabs/tabs.stories.tsx b/packages/propel/src/tabs/tabs.stories.tsx
deleted file mode 100644
index c158909b1a6..00000000000
--- a/packages/propel/src/tabs/tabs.stories.tsx
+++ /dev/null
@@ -1,361 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { HomeOutline, SettingsOutline, SubscribeOutline, UserOutline } from "@makeplane/propel/icons";
-import { Tabs } from "./tabs";
-
-type TabOption = {
-  label: string;
-  value: string;
-};
-
-const tabOptions: TabOption[] = [
-  { label: "Account", value: "account" },
-  { label: "Password", value: "password" },
-  { label: "Notifications", value: "notifications" },
-];
-
-// cannot use satisfies here because base-ui does not have portable types.
-const meta: Meta<typeof Tabs> = {
-  title: "Components/Tabs",
-  component: Tabs,
-  subcomponents: {
-    TabsList: Tabs.List,
-    TabsTrigger: Tabs.Trigger,
-    TabsContent: Tabs.Content,
-    TabsIndicator: Tabs.Indicator,
-  },
-  parameters: {
-    layout: "centered",
-  },
-  args: {
-    defaultValue: "account",
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {
-  render({ defaultValue }) {
-    return (
-      <div className="w-[400px]">
-        <Tabs defaultValue={defaultValue}>
-          <Tabs.List>
-            {tabOptions.map((option) => (
-              <Tabs.Trigger key={option.value} value={option.value}>
-                {option.label}
-              </Tabs.Trigger>
-            ))}
-            <Tabs.Indicator />
-          </Tabs.List>
-          {tabOptions.map((option) => (
-            <Tabs.Content key={option.value} value={option.value} className="p-4">
-              <div className="text-13">
-                <h3 className="mb-2 font-medium">{option.label}</h3>
-                <p className="text-tertiary">Content for the {option.label.toLowerCase()} tab.</p>
-              </div>
-            </Tabs.Content>
-          ))}
-        </Tabs>
-      </div>
-    );
-  },
-};
-
-export const Sizes: Story = {
-  render({ defaultValue }) {
-    const sizes = ["sm", "md", "lg"] as const;
-    const sizeLabels: Record<(typeof sizes)[number], string> = {
-      sm: "Small",
-      md: "Medium",
-      lg: "Large",
-    };
-    return (
-      <div className="grid w-[400px] gap-4">
-        {sizes.map((size) => (
-          <div key={size} className="flex flex-col gap-2">
-            <div className="text-13 font-medium">{sizeLabels[size]}</div>
-            <Tabs defaultValue={defaultValue}>
-              <Tabs.List>
-                {tabOptions.map((option) => (
-                  <Tabs.Trigger key={option.value} value={option.value} size={size}>
-                    {option.label}
-                  </Tabs.Trigger>
-                ))}
-                <Tabs.Indicator />
-              </Tabs.List>
-            </Tabs>
-          </div>
-        ))}
-      </div>
-    );
-  },
-};
-
-export const Controlled: Story = {
-  render() {
-    const [activeTab, setActiveTab] = useState("account");
-
-    return (
-      <div className="w-[400px]">
-        <div className="mb-4 text-13">
-          Active tab: <span className="font-medium">{activeTab}</span>
-        </div>
-        <Tabs value={activeTab} onValueChange={(value) => value && setActiveTab(value)}>
-          <Tabs.List>
-            {tabOptions.map((option) => (
-              <Tabs.Trigger key={option.value} value={option.value}>
-                {option.label}
-              </Tabs.Trigger>
-            ))}
-            <Tabs.Indicator />
-          </Tabs.List>
-          {tabOptions.map((option) => (
-            <Tabs.Content key={option.value} value={option.value} className="p-4">
-              <div className="text-13">Content for {option.label}</div>
-            </Tabs.Content>
-          ))}
-        </Tabs>
-      </div>
-    );
-  },
-};
-
-export const DisabledTab: Story = {
-  render({ defaultValue }) {
-    return (
-      <div className="w-[400px]">
-        <Tabs defaultValue={defaultValue}>
-          <Tabs.List>
-            <Tabs.Trigger value="account">Account</Tabs.Trigger>
-            <Tabs.Trigger value="password" disabled>
-              Password
-            </Tabs.Trigger>
-            <Tabs.Trigger value="notifications">Notifications</Tabs.Trigger>
-            <Tabs.Indicator />
-          </Tabs.List>
-          <Tabs.Content value="account" className="p-4">
-            <div className="text-13">Account content</div>
-          </Tabs.Content>
-          <Tabs.Content value="password" className="p-4">
-            <div className="text-13">Password content (disabled)</div>
-          </Tabs.Content>
-          <Tabs.Content value="notifications" className="p-4">
-            <div className="text-13">Notifications content</div>
-          </Tabs.Content>
-        </Tabs>
-      </div>
-    );
-  },
-};
-
-export const WithIcons: Story = {
-  render({ defaultValue }) {
-    const tabsWithIcons = [
-      { label: "Home", value: "home", icon: HomeOutline },
-      { label: "Profile", value: "profile", icon: UserOutline },
-      { label: "Settings", value: "settings", icon: SettingsOutline },
-      { label: "Notifications", value: "notifications", icon: SubscribeOutline },
-    ];
-
-    return (
-      <div className="w-[500px]">
-        <Tabs defaultValue={defaultValue || "home"}>
-          <Tabs.List>
-            {tabsWithIcons.map((tab) => (
-              <Tabs.Trigger key={tab.value} value={tab.value}>
-                <tab.icon className="mr-2 h-4 w-4" />
-                {tab.label}
-              </Tabs.Trigger>
-            ))}
-            <Tabs.Indicator />
-          </Tabs.List>
-          {tabsWithIcons.map((tab) => (
-            <Tabs.Content key={tab.value} value={tab.value} className="p-4">
-              <div className="text-13">Content for {tab.label}</div>
-            </Tabs.Content>
-          ))}
-        </Tabs>
-      </div>
-    );
-  },
-};
-
-export const IconsOnly: Story = {
-  render({ defaultValue }) {
-    const iconTabs = [
-      { value: "home", icon: HomeOutline },
-      { value: "profile", icon: UserOutline },
-      { value: "settings", icon: SettingsOutline },
-      { value: "notifications", icon: SubscribeOutline },
-    ];
-
-    return (
-      <div className="w-[300px]">
-        <Tabs defaultValue={defaultValue || "home"}>
-          <Tabs.List>
-            {iconTabs.map((tab) => (
-              <Tabs.Trigger key={tab.value} value={tab.value}>
-                <tab.icon className="h-4 w-4" />
-              </Tabs.Trigger>
-            ))}
-            <Tabs.Indicator />
-          </Tabs.List>
-          {iconTabs.map((tab) => (
-            <Tabs.Content key={tab.value} value={tab.value} className="p-4">
-              <div className="text-13">Content for {tab.value}</div>
-            </Tabs.Content>
-          ))}
-        </Tabs>
-      </div>
-    );
-  },
-};
-
-export const DynamicTabs: Story = {
-  render() {
-    const [tabs, setTabs] = useState([
-      { label: "Tab 1", value: "tab1" },
-      { label: "Tab 2", value: "tab2" },
-    ]);
-    const [activeTab, setActiveTab] = useState("tab1");
-
-    const addTab = () => {
-      const newTabNum = tabs.length + 1;
-      setTabs([...tabs, { label: `Tab ${newTabNum}`, value: `tab${newTabNum}` }]);
-    };
-
-    const removeTab = (valueToRemove: string) => {
-      const newTabs = tabs.filter((tab) => tab.value !== valueToRemove);
-      setTabs(newTabs);
-      if (activeTab === valueToRemove && newTabs.length > 0) {
-        setActiveTab(newTabs[0].value);
-      }
-    };
-
-    return (
-      <div className="w-[500px]">
-        <div className="mb-4">
-          <button onClick={addTab} className="rounded-sm bg-layer-1 px-3 py-1.5 text-13 hover:bg-surface-2">
-            Add Tab
-          </button>
-        </div>
-        <Tabs value={activeTab} onValueChange={(value) => value && setActiveTab(value)}>
-          <Tabs.List>
-            {tabs.map((tab) => (
-              <Tabs.Trigger key={tab.value} value={tab.value}>
-                {tab.label}
-                {tabs.length > 1 && (
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      removeTab(tab.value);
-                    }}
-                    className="ml-2 hover:text-danger-primary"
-                  >
-                    ×
-                  </button>
-                )}
-              </Tabs.Trigger>
-            ))}
-            <Tabs.Indicator />
-          </Tabs.List>
-          {tabs.map((tab) => (
-            <Tabs.Content key={tab.value} value={tab.value} className="p-4">
-              <div className="text-13">Content for {tab.label}</div>
-            </Tabs.Content>
-          ))}
-        </Tabs>
-      </div>
-    );
-  },
-};
-
-export const FullWidth: Story = {
-  render({ defaultValue }) {
-    return (
-      <div className="w-full max-w-2xl">
-        <Tabs defaultValue={defaultValue}>
-          <Tabs.List>
-            <Tabs.Trigger value="account" className="flex-1">
-              Account
-            </Tabs.Trigger>
-            <Tabs.Trigger value="password" className="flex-1">
-              Password
-            </Tabs.Trigger>
-            <Tabs.Trigger value="notifications" className="flex-1">
-              Notifications
-            </Tabs.Trigger>
-            <Tabs.Indicator />
-          </Tabs.List>
-          {tabOptions.map((option) => (
-            <Tabs.Content key={option.value} value={option.value} className="p-4">
-              <div className="text-13">Content for {option.label}</div>
-            </Tabs.Content>
-          ))}
-        </Tabs>
-      </div>
-    );
-  },
-};
-
-export const WithComplexContent: Story = {
-  render({ defaultValue }) {
-    return (
-      <div className="w-[600px]">
-        <Tabs defaultValue={defaultValue}>
-          <Tabs.List>
-            {tabOptions.map((option) => (
-              <Tabs.Trigger key={option.value} value={option.value}>
-                {option.label}
-              </Tabs.Trigger>
-            ))}
-            <Tabs.Indicator />
-          </Tabs.List>
-          <Tabs.Content value="account" className="p-4">
-            <div className="space-y-4">
-              <div>
-                <label className="text-13 font-medium">Username</label>
-                <input type="text" className="mt-1 w-full rounded-sm bg-layer-1 px-3 py-2" />
-              </div>
-              <div>
-                <label className="text-13 font-medium">Email</label>
-                <input type="email" className="mt-1 w-full rounded-sm bg-layer-1 px-3 py-2" />
-              </div>
-            </div>
-          </Tabs.Content>
-          <Tabs.Content value="password" className="p-4">
-            <div className="space-y-4">
-              <div>
-                <label className="text-13 font-medium">Current Password</label>
-                <input type="password" className="mt-1 w-full rounded-sm bg-layer-1 px-3 py-2" />
-              </div>
-              <div>
-                <label className="text-13 font-medium">New Password</label>
-                <input type="password" className="mt-1 w-full rounded-sm bg-layer-1 px-3 py-2" />
-              </div>
-            </div>
-          </Tabs.Content>
-          <Tabs.Content value="notifications" className="p-4">
-            <div className="space-y-3">
-              <div className="flex items-center justify-between">
-                <span className="text-13">Email notifications</span>
-                <input type="checkbox" />
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-13">Push notifications</span>
-                <input type="checkbox" />
-              </div>
-            </div>
-          </Tabs.Content>
-        </Tabs>
-      </div>
-    );
-  },
-};
diff --git a/packages/propel/src/tabs/tabs.tsx b/packages/propel/src/tabs/tabs.tsx
deleted file mode 100644
index 56c55a987eb..00000000000
--- a/packages/propel/src/tabs/tabs.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-import { Tabs as TabsPrimitive } from "@base-ui-components/react/tabs";
-import { cn } from "../utils/classname";
-
-type TabsVariant = "contained";
-
-type TabsContextType = {
-  variant?: TabsVariant;
-};
-
-const TabsContext = React.createContext<TabsContextType | undefined>(undefined);
-
-type TabsCompound = React.ForwardRefExoticComponent<
-  React.ComponentProps<typeof TabsPrimitive.Root> & {
-    variant?: TabsVariant;
-  } & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.Root>>
-> & {
-  List: React.ForwardRefExoticComponent<
-    React.ComponentProps<typeof TabsPrimitive.List> & {
-      background?: TabsVariant;
-    } & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.List>>
-  >;
-  Trigger: React.ForwardRefExoticComponent<
-    React.ComponentProps<typeof TabsPrimitive.Tab> & {
-      size?: "sm" | "md" | "lg";
-      variant?: TabsVariant;
-    } & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.Tab>>
-  >;
-  Content: React.ForwardRefExoticComponent<
-    React.ComponentProps<typeof TabsPrimitive.Panel> & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.Panel>>
-  >;
-  Indicator: React.ForwardRefExoticComponent<React.ComponentProps<"div"> & React.RefAttributes<HTMLDivElement>>;
-};
-
-const TabsRoot = React.forwardRef(function TabsRoot(
-  { className, variant, ...props }: React.ComponentProps<typeof TabsPrimitive.Root> & { variant?: TabsVariant },
-  ref: React.ForwardedRef<React.ElementRef<typeof TabsPrimitive.Root>>
-) {
-  return (
-    <TabsContext.Provider value={{ variant }}>
-      <TabsPrimitive.Root
-        data-slot="tabs"
-        className={cn("flex h-full w-full flex-col", className)}
-        {...props}
-        ref={ref}
-      />
-    </TabsContext.Provider>
-  );
-});
-
-const TabsList = React.forwardRef(function TabsList(
-  {
-    className,
-    background = "contained",
-    ...props
-  }: React.ComponentProps<typeof TabsPrimitive.List> & {
-    background?: TabsVariant;
-  },
-  ref: React.ForwardedRef<React.ElementRef<typeof TabsPrimitive.List>>
-) {
-  return (
-    <TabsPrimitive.List
-      data-slot="tabs-list"
-      className={cn(
-        "relative flex w-full items-center justify-between gap-1.5 overflow-auto rounded-lg p-0.5 text-13",
-        {
-          "bg-layer-3": background === "contained",
-        },
-        className
-      )}
-      {...props}
-      ref={ref}
-    />
-  );
-});
-
-const TabsTrigger = React.forwardRef(function TabsTrigger(
-  {
-    className,
-    size = "md",
-    ...props
-  }: React.ComponentProps<typeof TabsPrimitive.Tab> & { size?: "sm" | "md" | "lg"; variant?: TabsVariant },
-  ref: React.ForwardedRef<React.ElementRef<typeof TabsPrimitive.Tab>>
-) {
-  return (
-    <TabsPrimitive.Tab
-      data-slot="tabs-trigger"
-      className={cn(
-        "flex w-full min-w-fit cursor-pointer items-center justify-center rounded-md border border-transparent p-1 font-medium text-primary transition-all duration-200 ease-in-out outline-none focus:outline-none",
-        "data-[selected]:shadow-sm data-[selected]:raised-200 data-[selected]:border data-[selected]:border-subtle-1 data-[selected]:bg-layer-2 data-[selected]:text-primary",
-        "text-placeholder hover:bg-layer-transparent-hover hover:text-tertiary",
-        "disabled:cursor-not-allowed disabled:text-placeholder",
-        {
-          "text-11": size === "sm",
-          "text-13": size === "md",
-          "text-14": size === "lg",
-        },
-        className
-      )}
-      {...props}
-      ref={ref}
-    />
-  );
-});
-
-const TabsContent = React.forwardRef(function TabsContent(
-  { className, ...props }: React.ComponentProps<typeof TabsPrimitive.Panel>,
-  ref: React.ForwardedRef<React.ElementRef<typeof TabsPrimitive.Panel>>
-) {
-  return (
-    <TabsPrimitive.Panel
-      data-slot="tabs-content"
-      className={cn("relative outline-none", className)}
-      {...props}
-      ref={ref}
-    />
-  );
-});
-const TabsIndicator = React.forwardRef(function TabsIndicator(
-  { className, ...props }: React.ComponentProps<"div">,
-  ref: React.ForwardedRef<HTMLDivElement>
-) {
-  return (
-    <div
-      className={cn(
-        "shadow-sm absolute top-[50%] left-0 z-[-1] h-6 w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)] -translate-y-[50%] rounded-xs bg-surface-1 transition-[width,transform] duration-200 ease-in-out",
-        className
-      )}
-      {...props}
-      ref={ref}
-    />
-  );
-});
-
-export const Tabs = Object.assign(TabsRoot, {
-  List: TabsList,
-  Trigger: TabsTrigger,
-  Content: TabsContent,
-  Indicator: TabsIndicator,
-}) satisfies TabsCompound;
-
-export { TabsList, TabsTrigger, TabsContent, TabsIndicator };
diff --git a/packages/propel/src/toast/toast.stories.tsx b/packages/propel/src/toast/toast.stories.tsx
deleted file mode 100644
index 1c1a961a128..00000000000
--- a/packages/propel/src/toast/toast.stories.tsx
+++ /dev/null
@@ -1,709 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Toast, ToastStatic, setToast, updateToast, setPromiseToast, TOAST_TYPE } from "./toast";
-
-const meta = {
-  title: "Components/Toast",
-  component: Toast,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: {
-    theme: "light",
-  },
-} satisfies Meta<typeof Toast>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Provider: Story = {
-  render() {
-    return (
-      <div>
-        <Toast theme="light" />
-        <div className="space-y-2">
-          <p className="text-gray-600 text-13">
-            Toast provider is required to display toasts. It should be added to your app root.
-          </p>
-          <code className="bg-gray-100 block rounded-sm p-2 text-11">{`<Toast theme="light" />`}</code>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const Success: Story = {
-  render() {
-    return (
-      <>
-        <Toast theme="light" />
-        <button
-          onClick={() =>
-            setToast({
-              type: TOAST_TYPE.SUCCESS,
-              title: "Success!",
-              message: "Your changes have been saved successfully.",
-            })
-          }
-          className="rounded-sm bg-success-primary px-4 py-2 text-13 text-on-color hover:bg-success-primary/90"
-        >
-          Show Success Toast
-        </button>
-      </>
-    );
-  },
-};
-
-export const Error: Story = {
-  render() {
-    return (
-      <>
-        <Toast theme="light" />
-        <button
-          onClick={() =>
-            setToast({
-              type: TOAST_TYPE.ERROR,
-              title: "Error",
-              message: "Something went wrong. Please try again.",
-            })
-          }
-          className="rounded-sm bg-danger-primary px-4 py-2 text-13 text-on-color hover:bg-danger-primary/90"
-        >
-          Show Error Toast
-        </button>
-      </>
-    );
-  },
-};
-
-export const Warning: Story = {
-  render() {
-    return (
-      <>
-        <Toast theme="light" />
-        <button
-          onClick={() =>
-            setToast({
-              type: TOAST_TYPE.WARNING,
-              title: "Warning",
-              message: "This action cannot be undone.",
-            })
-          }
-          className="rounded-sm bg-warning-primary px-4 py-2 text-13 text-on-color hover:bg-warning-primary/90"
-        >
-          Show Warning Toast
-        </button>
-      </>
-    );
-  },
-};
-
-export const Info: Story = {
-  render() {
-    return (
-      <>
-        <Toast theme="light" />
-        <button
-          onClick={() =>
-            setToast({
-              type: TOAST_TYPE.INFO,
-              title: "Information",
-              message: "Here's some helpful information for you.",
-            })
-          }
-          className="rounded-sm bg-accent-primary px-4 py-2 text-13 text-on-color hover:bg-accent-primary/90"
-        >
-          Show Info Toast
-        </button>
-      </>
-    );
-  },
-};
-
-export const Loading: Story = {
-  render() {
-    return (
-      <>
-        <Toast theme="light" />
-        <button
-          onClick={() =>
-            setToast({
-              type: TOAST_TYPE.LOADING,
-              title: "Loading...",
-            })
-          }
-          className="rounded-sm border border-subtle bg-layer-2 px-4 py-2 text-13 text-primary hover:bg-layer-1"
-        >
-          Show Loading Toast
-        </button>
-      </>
-    );
-  },
-};
-
-export const WithActionItems: Story = {
-  render() {
-    return (
-      <>
-        <Toast theme="light" />
-        <button
-          onClick={() =>
-            setToast({
-              type: TOAST_TYPE.SUCCESS,
-              title: "File uploaded",
-              message: "Your file has been uploaded successfully.",
-              actionItems: (
-                <>
-                  <button className="text-13 font-medium text-primary hover:text-secondary">Button</button>
-                  <button className="text-13 font-medium text-primary hover:text-secondary">Button</button>
-                </>
-              ),
-            })
-          }
-          className="rounded-sm bg-success-primary px-4 py-2 text-13 text-on-color hover:bg-success-primary/90"
-        >
-          Show Toast with Action
-        </button>
-      </>
-    );
-  },
-};
-
-export const UpdateToast: Story = {
-  render() {
-    const handleUpdate = () => {
-      const id = setToast({
-        type: TOAST_TYPE.LOADING,
-        title: "Processing...",
-      });
-
-      setTimeout(() => {
-        updateToast(id, {
-          type: TOAST_TYPE.SUCCESS,
-          title: "Complete!",
-          message: "The operation has finished successfully.",
-        });
-      }, 2000);
-    };
-
-    return (
-      <>
-        <Toast theme="light" />
-        <button
-          onClick={handleUpdate}
-          className="rounded-sm bg-accent-primary px-4 py-2 text-13 text-on-color hover:bg-accent-primary/90"
-        >
-          Update Toast After 2s
-        </button>
-      </>
-    );
-  },
-};
-
-export const PromiseToast: Story = {
-  render() {
-    const handlePromise = () => {
-      const promise = new Promise<{ name?: string; error?: string }>((resolve, reject) => {
-        setTimeout(() => {
-          Math.random() > 0.5 ? resolve({ name: "Success data" }) : reject({ error: "Failed" });
-        }, 2000);
-      });
-
-      setPromiseToast(promise, {
-        loading: "Processing request...",
-        success: {
-          title: "Request completed!",
-          message: (data) => `Successfully processed: ${data.name}`,
-        },
-        error: {
-          title: "Request failed",
-          message: (error) => `Error: ${error.error}`,
-        },
-      });
-    };
-
-    return (
-      <>
-        <Toast theme="light" />
-        <button
-          onClick={handlePromise}
-          className="rounded-sm bg-accent-primary px-4 py-2 text-13 text-on-color hover:bg-accent-primary/90"
-        >
-          Show Promise Toast
-        </button>
-      </>
-    );
-  },
-};
-
-export const AllTypes: Story = {
-  render() {
-    return (
-      <>
-        <Toast theme="light" />
-        <div className="flex flex-wrap gap-2">
-          <button
-            onClick={() =>
-              setToast({
-                type: TOAST_TYPE.SUCCESS,
-                title: "Success",
-                message: "Operation successful",
-              })
-            }
-            className="rounded-sm bg-success-primary px-3 py-2 text-13 text-on-color hover:bg-success-primary/90"
-          >
-            Success
-          </button>
-          <button
-            onClick={() =>
-              setToast({
-                type: TOAST_TYPE.ERROR,
-                title: "Error",
-                message: "Operation failed",
-              })
-            }
-            className="rounded-sm bg-danger-primary px-3 py-2 text-13 text-on-color hover:bg-danger-primary/90"
-          >
-            Error
-          </button>
-          <button
-            onClick={() =>
-              setToast({
-                type: TOAST_TYPE.WARNING,
-                title: "Warning",
-                message: "Please be careful",
-              })
-            }
-            className="rounded-sm bg-warning-primary px-3 py-2 text-13 text-on-color hover:bg-warning-primary/90"
-          >
-            Warning
-          </button>
-          <button
-            onClick={() =>
-              setToast({
-                type: TOAST_TYPE.INFO,
-                title: "Info",
-                message: "Here's some info",
-              })
-            }
-            className="rounded-sm bg-accent-primary px-3 py-2 text-13 text-on-color hover:bg-accent-primary/90"
-          >
-            Info
-          </button>
-          <button
-            onClick={() =>
-              setToast({
-                type: TOAST_TYPE.LOADING,
-                title: "Loading",
-              })
-            }
-            className="rounded-sm border border-subtle bg-layer-2 px-3 py-2 text-13 text-primary hover:bg-layer-1"
-          >
-            Loading
-          </button>
-        </div>
-      </>
-    );
-  },
-};
-
-export const MultipleToasts: Story = {
-  render() {
-    return (
-      <>
-        <Toast theme="light" />
-        <button
-          onClick={() => {
-            setToast({
-              type: TOAST_TYPE.SUCCESS,
-              title: "First toast",
-              message: "This is the first toast",
-            });
-            setTimeout(() => {
-              setToast({
-                type: TOAST_TYPE.INFO,
-                title: "Second toast",
-                message: "This is the second toast",
-              });
-            }, 500);
-            setTimeout(() => {
-              setToast({
-                type: TOAST_TYPE.WARNING,
-                title: "Third toast",
-                message: "This is the third toast",
-              });
-            }, 1000);
-          }}
-          className="rounded-sm bg-accent-primary px-4 py-2 text-13 text-on-color hover:bg-accent-primary/90"
-        >
-          Show Multiple Toasts
-        </button>
-      </>
-    );
-  },
-};
-
-export const TitleOnly: Story = {
-  render() {
-    return (
-      <>
-        <Toast theme="light" />
-        <button
-          onClick={() =>
-            setToast({
-              type: TOAST_TYPE.SUCCESS,
-              title: "Saved!",
-            })
-          }
-          className="rounded-sm bg-success-primary px-4 py-2 text-13 text-on-color hover:bg-success-primary/90"
-        >
-          Show Title Only
-        </button>
-      </>
-    );
-  },
-};
-
-export const LongMessage: Story = {
-  render() {
-    return (
-      <>
-        <Toast theme="light" />
-        <button
-          onClick={() =>
-            setToast({
-              type: TOAST_TYPE.INFO,
-              title: "Important Information",
-              message:
-                "This is a longer message that provides more detailed information about what happened and what the user should do next.",
-            })
-          }
-          className="rounded-sm bg-accent-primary px-4 py-2 text-13 text-on-color hover:bg-accent-primary/90"
-        >
-          Show Long Message
-        </button>
-      </>
-    );
-  },
-};
-
-// ========== Static Variants ==========
-
-export const StaticVariants: Story = {
-  render() {
-    return (
-      <div className="grid grid-cols-1 gap-4">
-        <div>
-          <p className="mb-2 text-13 font-medium text-secondary">All toast variants (static):</p>
-        </div>
-        <div className="flex flex-col gap-3">
-          <ToastStatic type={TOAST_TYPE.SUCCESS} title="Success" message="Your changes have been saved successfully." />
-          <ToastStatic type={TOAST_TYPE.ERROR} title="Error" message="Something went wrong. Please try again." />
-          <ToastStatic type={TOAST_TYPE.WARNING} title="Warning" message="This action cannot be undone." />
-          <ToastStatic type={TOAST_TYPE.INFO} title="Information" message="Here's some helpful information for you." />
-          <ToastStatic type={TOAST_TYPE.LOADING} title="Loading..." />
-        </div>
-      </div>
-    );
-  },
-};
-
-export const StaticSuccess: Story = {
-  render() {
-    return (
-      <ToastStatic
-        type={TOAST_TYPE.SUCCESS}
-        title="Changes saved"
-        message="Your changes have been saved successfully."
-      />
-    );
-  },
-};
-
-export const StaticError: Story = {
-  render() {
-    return <ToastStatic type={TOAST_TYPE.ERROR} title="Upload failed" message="Failed to upload file. Try again." />;
-  },
-};
-
-export const StaticWarning: Story = {
-  render() {
-    return (
-      <ToastStatic
-        type={TOAST_TYPE.WARNING}
-        title="Unsaved changes"
-        message="You have unsaved changes. Save before leaving."
-      />
-    );
-  },
-};
-
-export const StaticInfo: Story = {
-  render() {
-    return (
-      <ToastStatic
-        type={TOAST_TYPE.INFO}
-        title="New feature available"
-        message="Check out our latest feature in settings."
-      />
-    );
-  },
-};
-
-export const StaticLoading: Story = {
-  render() {
-    return <ToastStatic type={TOAST_TYPE.LOADING} title="Processing your request..." />;
-  },
-};
-
-export const StaticWithActions: Story = {
-  render() {
-    return (
-      <ToastStatic
-        type={TOAST_TYPE.SUCCESS}
-        title="File uploaded"
-        message="Your file has been uploaded successfully."
-        actionItems={
-          <>
-            <button className="text-13 font-medium text-primary hover:text-secondary">Button</button>
-            <button className="text-13 font-medium text-primary hover:text-secondary">Button</button>
-          </>
-        }
-      />
-    );
-  },
-};
-
-export const StaticDarkMode: Story = {
-  render() {
-    return (
-      <div className="flex flex-col gap-3 rounded-lg bg-canvas p-6" data-theme="dark">
-        <p className="mb-2 text-13 font-medium text-secondary">Toast variants in dark mode:</p>
-        <ToastStatic
-          type={TOAST_TYPE.SUCCESS}
-          title="Success"
-          message="Operation completed successfully."
-          theme="dark"
-        />
-        <ToastStatic type={TOAST_TYPE.ERROR} title="Error" message="An error occurred." theme="dark" />
-        <ToastStatic type={TOAST_TYPE.WARNING} title="Warning" message="Please proceed with caution." theme="dark" />
-        <ToastStatic type={TOAST_TYPE.INFO} title="Information" message="Here's some useful info." theme="dark" />
-        <ToastStatic type={TOAST_TYPE.LOADING} title="Loading..." theme="dark" />
-      </div>
-    );
-  },
-};
-
-// ========== Design Tokens Documentation ==========
-
-export const DesignTokens: Story = {
-  render() {
-    return (
-      <div className="space-y-6">
-        <div>
-          <h2 className="mb-2 text-16 font-semibold text-primary">Toast Design Tokens</h2>
-          <p className="text-13 text-secondary">
-            The toast component uses semantic design tokens from the Plane design system.
-          </p>
-        </div>
-
-        <div>
-          <h3 className="mb-3 text-14 font-semibold text-primary">Token Mapping by Variant</h3>
-          <div className="overflow-x-auto">
-            <table className="w-full rounded-lg border border-subtle text-11">
-              <thead>
-                <tr className="bg-layer-1">
-                  <th className="border-b border-subtle px-3 py-2 text-left font-semibold text-primary">Variant</th>
-                  <th className="border-b border-subtle px-3 py-2 text-left font-semibold text-primary">Title Text</th>
-                  <th className="border-b border-subtle px-3 py-2 text-left font-semibold text-primary">Icon BG</th>
-                  <th className="border-b border-subtle px-3 py-2 text-left font-semibold text-primary">Toast BG</th>
-                  <th className="border-b border-subtle px-3 py-2 text-left font-semibold text-primary">Border</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr className="border-b border-subtle">
-                  <td className="px-3 py-2 font-medium text-primary">Success</td>
-                  <td className="px-3 py-2">
-                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-primary</code>
-                  </td>
-                  <td className="px-3 py-2">
-                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-success-primary</code>
-                  </td>
-                  <td className="px-3 py-2">
-                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-surface-1</code>
-                  </td>
-                  <td className="px-3 py-2">
-                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">border-subtle</code>
-                  </td>
-                </tr>
-                <tr className="border-b border-subtle">
-                  <td className="px-3 py-2 font-medium text-primary">Error</td>
-                  <td className="px-3 py-2">
-                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-primary</code>
-                  </td>
-                  <td className="px-3 py-2">
-                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-danger-primary</code>
-                  </td>
-                  <td className="px-3 py-2">
-                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-surface-1</code>
-                  </td>
-                  <td className="px-3 py-2">
-                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">border-subtle</code>
-                  </td>
-                </tr>
-                <tr className="border-b border-subtle">
-                  <td className="px-3 py-2 font-medium text-primary">Warning</td>
-                  <td className="px-3 py-2">
-                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-primary</code>
-                  </td>
-                  <td className="px-3 py-2">
-                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-warning-primary</code>
-                  </td>
-                  <td className="px-3 py-2">
-                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-surface-1</code>
-                  </td>
-                  <td className="px-3 py-2">
-                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">border-subtle</code>
-                  </td>
-                </tr>
-                <tr className="border-b border-subtle">
-                  <td className="px-3 py-2 font-medium text-primary">Info</td>
-                  <td className="px-3 py-2">
-                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-primary</code>
-                  </td>
-                  <td className="px-3 py-2">
-                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-accent-primary</code>
-                  </td>
-                  <td className="px-3 py-2">
-                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-surface-1</code>
-                  </td>
-                  <td className="px-3 py-2">
-                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">border-subtle</code>
-                  </td>
-                </tr>
-                <tr>
-                  <td className="px-3 py-2 font-medium text-primary">Loading</td>
-                  <td className="px-3 py-2">
-                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-primary</code>
-                  </td>
-                  <td className="px-3 py-2">
-                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-layer-2</code>
-                  </td>
-                  <td className="px-3 py-2">
-                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-surface-1</code>
-                  </td>
-                  <td className="px-3 py-2">
-                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">border-subtle</code>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-
-        <div className="grid grid-cols-2 gap-4">
-          <div>
-            <h3 className="mb-3 text-14 font-semibold text-primary">Typography</h3>
-            <ul className="space-y-2 text-12 text-secondary">
-              <li>
-                <span className="font-medium text-primary">Title:</span>{" "}
-                <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-14 font-semibold</code>
-              </li>
-              <li>
-                <span className="font-medium text-primary">Message:</span>{" "}
-                <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-13</code>
-              </li>
-              <li>
-                <span className="font-medium text-primary">Message Color:</span>{" "}
-                <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-secondary</code>
-              </li>
-              <li>
-                <span className="font-medium text-primary">Action Button:</span>{" "}
-                <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-13 font-medium</code>
-              </li>
-            </ul>
-          </div>
-
-          <div>
-            <h3 className="mb-3 text-14 font-semibold text-primary">Dimensions & Styling</h3>
-            <ul className="space-y-2 text-12 text-secondary">
-              <li>
-                <span className="font-medium text-primary">Width:</span> 350px
-              </li>
-              <li>
-                <span className="font-medium text-primary">Padding:</span> 16px (p-4)
-              </li>
-              <li>
-                <span className="font-medium text-primary">Border Radius:</span> 8px (rounded-lg)
-              </li>
-              <li>
-                <span className="font-medium text-primary">Shadow:</span>{" "}
-                <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">shadow-raised-200</code>
-              </li>
-              <li>
-                <span className="font-medium text-primary">Border Width:</span> 1px
-              </li>
-            </ul>
-          </div>
-        </div>
-
-        <div>
-          <h3 className="mb-3 text-14 font-semibold text-primary">Icon Specifications</h3>
-          <ul className="space-y-2 text-12 text-secondary">
-            <li>
-              <span className="font-medium text-primary">Icon Size:</span> 20x20px
-            </li>
-            <li>
-              <span className="font-medium text-primary">Icon Stroke Width:</span> 2px
-            </li>
-            <li>
-              <span className="font-medium text-primary">Icon Container:</span> 40x40px circular (w-10 h-10
-              rounded-full)
-            </li>
-            <li>
-              <span className="font-medium text-primary">Icon Color:</span>{" "}
-              <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-on-color</code>
-            </li>
-            <li>
-              <span className="font-medium text-primary">Icon Background:</span>{" "}
-              <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">
-                bg-{"{"}variant{"}"}-primary
-              </code>
-            </li>
-            <li>
-              <span className="font-medium text-primary">Close Icon Size:</span> 16x16px
-            </li>
-            <li>
-              <span className="font-medium text-primary">Close Icon Color:</span>{" "}
-              <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">
-                text-icon-secondary hover:text-icon-tertiary
-              </code>
-            </li>
-          </ul>
-        </div>
-
-        <div className="rounded-lg bg-layer-1 p-4">
-          <h3 className="mb-2 text-14 font-semibold text-primary">Visual Examples</h3>
-          <p className="mb-4 text-12 text-secondary">See how the tokens are applied across all toast variants:</p>
-          <div className="flex flex-col gap-3">
-            <ToastStatic
-              type={TOAST_TYPE.SUCCESS}
-              title="Success"
-              message="Your changes have been saved successfully."
-            />
-            <ToastStatic type={TOAST_TYPE.ERROR} title="Error" message="Something went wrong. Please try again." />
-            <ToastStatic type={TOAST_TYPE.WARNING} title="Warning" message="This action cannot be undone." />
-            <ToastStatic type={TOAST_TYPE.INFO} title="Information" message="Here's some helpful information." />
-            <ToastStatic type={TOAST_TYPE.LOADING} title="Loading..." />
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
diff --git a/packages/propel/src/toolbar/index.ts b/packages/propel/src/toolbar/index.ts
deleted file mode 100644
index 239fac16334..00000000000
--- a/packages/propel/src/toolbar/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export { Toolbar } from "./toolbar";
-export type {
-  ToolbarProps,
-  ToolbarGroupProps,
-  ToolbarItemProps,
-  ToolbarSeparatorProps,
-  ToolbarSubmitButtonProps,
-} from "./toolbar";
diff --git a/packages/propel/src/toolbar/toolbar.stories.tsx b/packages/propel/src/toolbar/toolbar.stories.tsx
deleted file mode 100644
index b212e50a51b..00000000000
--- a/packages/propel/src/toolbar/toolbar.stories.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import {
-  AlignCenterOutline,
-  AlignLeftOutline,
-  AlignRightOutline,
-  BoldOutline,
-  CodeOutline,
-  GlobeOutline,
-  ItalicOutline,
-  LinkOutline,
-  ListOutline,
-  LockOutline,
-  NumberedListOutline,
-  QuoteOutline,
-  RedoOutline,
-  StrikethroughOutline,
-  UnderlineOutline,
-  UndoOutline,
-} from "@makeplane/propel/icons";
-import { Toolbar } from "./toolbar";
-
-const meta = {
-  title: "Components/Toolbar",
-  component: Toolbar,
-  parameters: {
-    layout: "fullscreen",
-  },
-  tags: ["autodocs"],
-  args: {
-    children: null,
-  },
-} satisfies Meta<typeof Toolbar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render() {
-    return (
-      <div className="space-y-4 p-4">
-        <div className="w-96 rounded-sm border">
-          <Toolbar>
-            <Toolbar.Group isFirst>
-              <Toolbar.Item icon={UndoOutline} tooltip="Undo" />
-              <Toolbar.Item icon={RedoOutline} tooltip="Redo" />
-            </Toolbar.Group>
-            <Toolbar.Group>
-              <Toolbar.Item icon={BoldOutline} tooltip="Bold" />
-              <Toolbar.Item icon={ItalicOutline} tooltip="Italic" />
-              <Toolbar.Item icon={UnderlineOutline} tooltip="Underline" />
-              <Toolbar.Item icon={StrikethroughOutline} tooltip="Strikethrough" />
-            </Toolbar.Group>
-            <Toolbar.Group>
-              <Toolbar.Item icon={ListOutline} tooltip="Bullet List" />
-              <Toolbar.Item icon={NumberedListOutline} tooltip="Numbered List" />
-              <Toolbar.Item icon={QuoteOutline} tooltip="Quote" />
-            </Toolbar.Group>
-            <Toolbar.Group>
-              <Toolbar.Item icon={AlignLeftOutline} tooltip="Align Left" />
-              <Toolbar.Item icon={AlignCenterOutline} tooltip="Align Center" />
-              <Toolbar.Item icon={AlignRightOutline} tooltip="Align Right" />
-            </Toolbar.Group>
-            <Toolbar.Group>
-              <Toolbar.Item icon={LinkOutline} tooltip="Link" />
-              <Toolbar.Item icon={CodeOutline} tooltip="Code" />
-            </Toolbar.Group>
-          </Toolbar>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const WithActiveStates: Story = {
-  render() {
-    return (
-      <div className="p-4">
-        <Toolbar>
-          <Toolbar.Group isFirst>
-            <Toolbar.Item icon={BoldOutline} tooltip="Bold" shortcut={["Cmd", "B"]} isActive />
-            <Toolbar.Item icon={ItalicOutline} tooltip="Italic" shortcut={["Cmd", "I"]} />
-            <Toolbar.Item icon={UnderlineOutline} tooltip="Underline" shortcut={["Cmd", "U"]} isActive />
-          </Toolbar.Group>
-          <Toolbar.Group>
-            <Toolbar.Item icon={ListOutline} tooltip="Bullet List" />
-            <Toolbar.Item icon={NumberedListOutline} tooltip="Numbered List" isActive />
-            <Toolbar.Item icon={QuoteOutline} tooltip="Quote" />
-          </Toolbar.Group>
-          <Toolbar.Group>
-            <Toolbar.Item icon={AlignLeftOutline} tooltip="Align Left" />
-            <Toolbar.Item icon={AlignCenterOutline} tooltip="Align Center" isActive />
-            <Toolbar.Item icon={AlignRightOutline} tooltip="Align Right" />
-          </Toolbar.Group>
-        </Toolbar>
-      </div>
-    );
-  },
-};
-
-export const CommentToolbar: Story = {
-  render() {
-    return (
-      <div className="space-y-4 p-4">
-        <h3 className="text-13 font-medium">Comment Toolbar with Access Control</h3>
-        <div className="rounded-sm border-[0.5px] border-subtle p-1">
-          <Toolbar>
-            {/* Access Specifier */}
-            <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded-sm border-[0.5px] border-subtle p-1">
-              <Toolbar.Item icon={LockOutline} tooltip="Private" isActive />
-              <Toolbar.Item icon={GlobeOutline} tooltip="Public" />
-            </div>
-
-            <div className="flex w-full items-stretch justify-between gap-2 rounded-sm border-[0.5px] border-subtle p-1">
-              <div className="flex items-stretch">
-                <Toolbar.Group isFirst>
-                  <Toolbar.Item icon={BoldOutline} tooltip="Bold" shortcut={["Cmd", "B"]} />
-                  <Toolbar.Item icon={ItalicOutline} tooltip="Italic" shortcut={["Cmd", "I"]} />
-                  <Toolbar.Item icon={CodeOutline} tooltip="Code" shortcut={["Cmd", "`"]} />
-                </Toolbar.Group>
-                <Toolbar.Group>
-                  <Toolbar.Item icon={ListOutline} tooltip="Bullet List" />
-                  <Toolbar.Item icon={NumberedListOutline} tooltip="Numbered List" />
-                </Toolbar.Group>
-              </div>
-              <Toolbar.SubmitButton>Comment</Toolbar.SubmitButton>
-            </div>
-          </Toolbar>
-        </div>
-      </div>
-    );
-  },
-};
diff --git a/packages/propel/src/toolbar/toolbar.tsx b/packages/propel/src/toolbar/toolbar.tsx
deleted file mode 100644
index ca7565c79eb..00000000000
--- a/packages/propel/src/toolbar/toolbar.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-import type { LucideIcon } from "lucide-react";
-import type { ISvgIcons } from "../icons";
-import { Tooltip } from "../tooltip";
-import { cn } from "../utils";
-
-export interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  className?: string;
-}
-
-export interface ToolbarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  className?: string;
-  isFirst?: boolean;
-}
-
-export interface ToolbarItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  icon: LucideIcon | React.FC<ISvgIcons>;
-  isActive?: boolean;
-  tooltip?: string;
-  shortcut?: string[];
-  className?: string;
-  children?: React.ReactNode;
-}
-
-export interface ToolbarSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
-  className?: string;
-}
-
-export interface ToolbarSubmitButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  loading?: boolean;
-  variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive";
-  className?: string;
-  children: React.ReactNode;
-}
-
-const ToolbarRoot = React.forwardRef(function ToolbarRoot(
-  { className, children, ...props }: ToolbarProps,
-  ref: React.ForwardedRef<HTMLDivElement>
-) {
-  return (
-    <div
-      ref={ref}
-      className={cn("flex h-9 w-full items-stretch gap-1.5 overflow-x-scroll bg-surface-2", className)}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-});
-
-const ToolbarGroup = React.forwardRef(function ToolbarGroup(
-  { className, children, isFirst = false, ...props }: ToolbarGroupProps,
-  ref: React.ForwardedRef<HTMLDivElement>
-) {
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "flex items-stretch gap-0.5 border-r border-subtle px-2.5",
-        {
-          "pl-0": isFirst,
-        },
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-});
-
-const ToolbarItem = React.forwardRef(function ToolbarItem(
-  { icon: Icon, isActive = false, tooltip, shortcut, className, children, ...props }: ToolbarItemProps,
-  ref: React.ForwardedRef<HTMLButtonElement>
-) {
-  const button = (
-    <button
-      ref={ref}
-      type="button"
-      className={cn(
-        "grid aspect-square place-items-center rounded-xs p-0.5 text-placeholder transition-colors hover:bg-layer-1",
-        {
-          "bg-layer-1 text-primary": isActive,
-        },
-        className
-      )}
-      {...props}
-    >
-      <Icon
-        className={cn("h-3.5 w-3.5", {
-          "text-primary": isActive,
-        })}
-        strokeWidth={2.5}
-      />
-      {children}
-    </button>
-  );
-
-  if (tooltip) {
-    return (
-      <Tooltip
-        tooltipContent={
-          <div className="flex flex-col gap-1 text-center text-11">
-            <span className="font-medium">{tooltip}</span>
-            {shortcut && <kbd className="text-placeholder">{shortcut.join(" + ")}</kbd>}
-          </div>
-        }
-      >
-        {button}
-      </Tooltip>
-    );
-  }
-
-  return button;
-});
-
-const ToolbarSeparator = React.forwardRef(function ToolbarSeparator(
-  { className, ...props }: ToolbarSeparatorProps,
-  ref: React.ForwardedRef<HTMLDivElement>
-) {
-  return <div ref={ref} className={cn("bg-subtle-1 mx-1 h-full w-px", className)} {...props} />;
-});
-
-const buttonVariants = {
-  primary: "bg-accent-primary text-on-color hover:bg-accent-primary/80 focus:bg-accent-primary/80",
-  secondary: "bg-surface-1 text-secondary border border-subtle hover:bg-surface-2 focus:bg-surface-2",
-  outline:
-    "border border-accent-strong text-accent-primary bg-transparent hover:bg-accent-primary/10 focus:bg-accent-primary/20",
-  ghost: "text-secondary hover:bg-surface-2 focus:bg-surface-2",
-  destructive: "bg-danger-primary text-on-color hover:bg-danger-primary-hover focus:bg-danger-primary-selected",
-};
-
-const ToolbarSubmitButton = React.forwardRef(function ToolbarSubmitButton(
-  { loading = false, variant = "primary", className, children, disabled, ...props }: ToolbarSubmitButtonProps,
-  ref: React.ForwardedRef<HTMLButtonElement>
-) {
-  return (
-    <div className="sticky right-1">
-      <button
-        ref={ref}
-        className={cn(
-          "inline-flex items-center justify-center gap-2 rounded-md px-2.5 py-1.5 text-11 font-medium transition-colors duration-200",
-          "focus:ring-2 focus:ring-accent-strong/20 focus:ring-offset-2 focus:outline-none",
-          "disabled:pointer-events-none disabled:opacity-50",
-          buttonVariants[variant],
-          className
-        )}
-        disabled={disabled || loading}
-        {...props}
-      >
-        {loading && <div className="h-3 w-3 animate-spin rounded-full border border-current border-t-transparent" />}
-        {children}
-      </button>
-    </div>
-  );
-});
-
-ToolbarRoot.displayName = "ToolbarRoot";
-ToolbarGroup.displayName = "ToolbarGroup";
-ToolbarItem.displayName = "ToolbarItem";
-ToolbarSeparator.displayName = "ToolbarSeparator";
-ToolbarSubmitButton.displayName = "ToolbarSubmitButton";
-
-// compound components
-const Toolbar = Object.assign(ToolbarRoot, {
-  Group: ToolbarGroup,
-  Item: ToolbarItem,
-  Separator: ToolbarSeparator,
-  SubmitButton: ToolbarSubmitButton,
-});
-
-export { Toolbar };
diff --git a/packages/propel/src/tooltip/index.ts b/packages/propel/src/tooltip/index.ts
deleted file mode 100644
index d980334597b..00000000000
--- a/packages/propel/src/tooltip/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./root";
diff --git a/packages/propel/src/tooltip/root.tsx b/packages/propel/src/tooltip/root.tsx
deleted file mode 100644
index f55e8972590..00000000000
--- a/packages/propel/src/tooltip/root.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-import { Tooltip as BaseTooltip } from "@base-ui-components/react/tooltip";
-import { cn } from "../utils";
-import type { TPlacement, TSide, TAlign } from "../utils/placement";
-import { convertPlacementToSideAndAlign } from "../utils/placement";
-
-type ITooltipProps = {
-  tooltipHeading?: string;
-  tooltipContent?: string | React.ReactNode | null;
-  position?: TPlacement;
-  // React 19 defaults ReactElement's props to `unknown`; Base UI's `render` prop
-  // needs a named props shape to accept the element.
-  children: React.ReactElement<Record<string, unknown>>;
-  disabled?: boolean;
-  className?: string;
-  openDelay?: number;
-  closeDelay?: number;
-  isMobile?: boolean;
-  renderByDefault?: boolean;
-  side?: TSide;
-  align?: TAlign;
-  sideOffset?: number;
-};
-
-export function Tooltip(props: ITooltipProps) {
-  const {
-    tooltipHeading,
-    tooltipContent,
-    position = "top",
-    children,
-    disabled = false,
-    className = "",
-    openDelay = 200,
-    side = "bottom",
-    align = "center",
-    sideOffset = 10,
-    closeDelay,
-    isMobile = false,
-  } = props;
-  const { finalSide, finalAlign } = React.useMemo(() => {
-    if (position) {
-      const converted = convertPlacementToSideAndAlign(position);
-      return { finalSide: converted.side, finalAlign: converted.align };
-    }
-    return { finalSide: side, finalAlign: align };
-  }, [position, side, align]);
-
-  return (
-    <BaseTooltip.Provider>
-      <BaseTooltip.Root delay={openDelay} closeDelay={closeDelay} disabled={disabled}>
-        <BaseTooltip.Trigger render={children} />
-        <BaseTooltip.Portal>
-          <BaseTooltip.Positioner
-            className={cn(
-              "z-50 max-w-xs gap-1 overflow-hidden rounded-lg border border-subtle-1 bg-layer-2 px-2 py-1.5 break-words shadow-overlay-200",
-              {
-                hidden: isMobile,
-              },
-              className
-            )}
-            side={finalSide}
-            sideOffset={sideOffset}
-            align={finalAlign}
-            render={
-              <BaseTooltip.Popup>
-                {tooltipHeading && <p className="text-caption-md-medium text-primary">{tooltipHeading}</p>}
-                {tooltipContent && (
-                  <p
-                    className={cn("text-caption-sm-regular text-secondary", {
-                      "mt-1": tooltipHeading && tooltipHeading !== "",
-                    })}
-                  >
-                    {tooltipContent}
-                  </p>
-                )}
-              </BaseTooltip.Popup>
-            }
-          />
-        </BaseTooltip.Portal>
-      </BaseTooltip.Root>
-    </BaseTooltip.Provider>
-  );
-}
diff --git a/packages/propel/src/tooltip/tooltip.stories.tsx b/packages/propel/src/tooltip/tooltip.stories.tsx
deleted file mode 100644
index 8bb9005e428..00000000000
--- a/packages/propel/src/tooltip/tooltip.stories.tsx
+++ /dev/null
@@ -1,309 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { HelpOutline } from "@makeplane/propel/icons";
-import { Tooltip } from "./root";
-
-const meta = {
-  title: "Components/Tooltip",
-  component: Tooltip,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Tooltip>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    tooltipContent: "This is a tooltip",
-    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Hover me</button>,
-  },
-};
-
-export const WithHeading: Story = {
-  args: {
-    tooltipHeading: "Tooltip Title",
-    tooltipContent: "This is the tooltip content with a heading.",
-    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Hover me</button>,
-  },
-};
-
-export const PositionTop: Story = {
-  args: {
-    tooltipContent: "Tooltip on top",
-    position: "top",
-    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Top</button>,
-  },
-};
-
-export const PositionBottom: Story = {
-  args: {
-    tooltipContent: "Tooltip on bottom",
-    position: "bottom",
-    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Bottom</button>,
-  },
-};
-
-export const PositionLeft: Story = {
-  args: {
-    tooltipContent: "Tooltip on left",
-    position: "left",
-    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Left</button>,
-  },
-};
-
-export const PositionRight: Story = {
-  args: {
-    tooltipContent: "Tooltip on right",
-    position: "right",
-    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Right</button>,
-  },
-};
-
-export const WithIcon: Story = {
-  args: {
-    tooltipContent: "Click here for help",
-    children: (
-      <button className="hover:bg-gray-100 rounded-full p-2">
-        <HelpOutline className="text-gray-600 h-5 w-5" />
-      </button>
-    ),
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    tooltipContent: "This tooltip is disabled",
-    disabled: true,
-    children: <button className="bg-gray-400 rounded-sm px-4 py-2 text-on-color">Hover me (disabled)</button>,
-  },
-};
-
-export const LongContent: Story = {
-  args: {
-    tooltipHeading: "Important Information",
-    tooltipContent:
-      "This is a longer tooltip with more detailed information that wraps to multiple lines. It provides comprehensive details about the element.",
-    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Long content</button>,
-  },
-};
-
-export const CustomDelay: Story = {
-  args: {
-    tooltipContent: "This tooltip has a custom delay",
-    openDelay: 1000,
-    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Custom delay (1s)</button>,
-  },
-};
-
-export const CustomOffset: Story = {
-  args: {
-    tooltipContent: "Custom offset tooltip",
-    sideOffset: 20,
-    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Custom offset</button>,
-  },
-};
-
-export const AllPositions: Story = {
-  args: {
-    children: <div />,
-  },
-  render() {
-    return (
-      <div className="flex flex-col items-center gap-4">
-        <Tooltip tooltipContent="Top position" position="top">
-          <button className="bg-blue-500 rounded-sm px-4 py-2 text-13 text-on-color">Top</button>
-        </Tooltip>
-        <div className="flex gap-4">
-          <Tooltip tooltipContent="Left position" position="left">
-            <button className="bg-blue-500 rounded-sm px-4 py-2 text-13 text-on-color">Left</button>
-          </Tooltip>
-          <Tooltip tooltipContent="Right position" position="right">
-            <button className="bg-blue-500 rounded-sm px-4 py-2 text-13 text-on-color">Right</button>
-          </Tooltip>
-        </div>
-        <Tooltip tooltipContent="Bottom position" position="bottom">
-          <button className="bg-blue-500 rounded-sm px-4 py-2 text-13 text-on-color">Bottom</button>
-        </Tooltip>
-      </div>
-    );
-  },
-};
-
-export const OnText: Story = {
-  args: {
-    children: <div />,
-  },
-  render() {
-    return (
-      <p className="text-gray-700 text-13">
-        This is some text with a{" "}
-        <Tooltip tooltipContent="Additional information about this word" position="top">
-          <span className="border-blue-500 text-blue-500 cursor-help border-b border-dashed">tooltip</span>
-        </Tooltip>{" "}
-        in it.
-      </p>
-    );
-  },
-};
-
-export const OnDisabledButton: Story = {
-  args: {
-    children: <div />,
-  },
-  render() {
-    return (
-      <Tooltip tooltipContent="This feature is currently unavailable" position="top">
-        <button className="bg-gray-300 text-gray-500 cursor-not-allowed rounded-sm px-4 py-2" disabled>
-          Disabled Button
-        </button>
-      </Tooltip>
-    );
-  },
-};
-
-export const ComplexContent: Story = {
-  args: {
-    tooltipHeading: "User Information",
-    tooltipContent: (
-      <div className="space-y-1">
-        <p className="font-semibold">John Doe</p>
-        <p className="text-11">john@example.com</p>
-        <p className="text-gray-400 text-11">Last seen: 2 hours ago</p>
-      </div>
-    ),
-    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">View User</button>,
-  },
-};
-
-export const WithCustomStyling: Story = {
-  args: {
-    tooltipContent: "Custom styled tooltip",
-    className: "bg-purple-500 text-on-color",
-    children: <button className="bg-purple-500 rounded-sm px-4 py-2 text-on-color">Custom style</button>,
-  },
-};
-
-export const MultipleTooltips: Story = {
-  args: {
-    children: <div />,
-  },
-  render() {
-    return (
-      <div className="flex gap-4">
-        <Tooltip tooltipContent="Save your work" position="top">
-          <button className="bg-green-500 rounded-sm px-4 py-2 text-13 text-on-color">Save</button>
-        </Tooltip>
-        <Tooltip tooltipContent="Discard changes" position="top">
-          <button className="bg-red-500 rounded-sm px-4 py-2 text-13 text-on-color">Cancel</button>
-        </Tooltip>
-        <Tooltip tooltipContent="Export to PDF" position="top">
-          <button className="bg-blue-500 rounded-sm px-4 py-2 text-13 text-on-color">Export</button>
-        </Tooltip>
-        <Tooltip tooltipContent="Share with team" position="top">
-          <button className="bg-purple-500 rounded-sm px-4 py-2 text-13 text-on-color">Share</button>
-        </Tooltip>
-      </div>
-    );
-  },
-};
-
-export const IconButtons: Story = {
-  args: {
-    children: <div />,
-  },
-  render() {
-    return (
-      <div className="flex gap-2">
-        <Tooltip tooltipContent="Edit" position="top">
-          <button className="hover:bg-gray-100 rounded-sm p-2">
-            <svg
-              className="text-gray-600 h-5 w-5"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-              />
-            </svg>
-          </button>
-        </Tooltip>
-        <Tooltip tooltipContent="Delete" position="top">
-          <button className="hover:bg-gray-100 rounded-sm p-2">
-            <svg
-              className="h-5 w-5 text-danger-primary"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-              />
-            </svg>
-          </button>
-        </Tooltip>
-        <Tooltip tooltipContent="Share" position="top">
-          <button className="hover:bg-gray-100 rounded-sm p-2">
-            <svg
-              className="text-blue-600 h-5 w-5"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
-              />
-            </svg>
-          </button>
-        </Tooltip>
-      </div>
-    );
-  },
-};
-
-export const InFormField: Story = {
-  args: {
-    children: <div />,
-  },
-  render() {
-    return (
-      <div className="w-80">
-        <label className="text-gray-700 mb-1 flex items-center gap-2 text-13 font-medium">
-          Email Address
-          <Tooltip
-            tooltipHeading="Email Requirements"
-            tooltipContent="Enter a valid email address that you have access to. We'll send a verification link."
-            position="right"
-          >
-            <HelpOutline className="text-gray-400 h-4 w-4 cursor-help" />
-          </Tooltip>
-        </label>
-        <input
-          type="email"
-          className="border-gray-300 w-full rounded-sm border px-3 py-2 text-13"
-          placeholder="you@example.com"
-        />
-      </div>
-    );
-  },
-};
diff --git a/packages/propel/tsdown.config.ts b/packages/propel/tsdown.config.ts
deleted file mode 100644
index 5e97cf6f931..00000000000
--- a/packages/propel/tsdown.config.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { defineConfig } from "tsdown";
-
-export default defineConfig({
-  entry: [
-    "src/accordion/index.ts",
-    "src/animated-counter/index.ts",
-    "src/avatar/index.ts",
-    "src/badge/index.ts",
-    "src/banner/index.ts",
-    "src/button/index.ts",
-    "src/calendar/index.ts",
-    "src/card/index.ts",
-    "src/charts/*/index.ts",
-    "src/collapsible/index.ts",
-    "src/combobox/index.ts",
-    "src/command/index.ts",
-    "src/context-menu/index.ts",
-    "src/dialog/index.ts",
-    "src/empty-state/index.ts",
-    "src/emoji-icon-picker/index.ts",
-    "src/emoji-reaction/index.ts",
-    "src/emoji-reaction-picker/index.ts",
-    "src/icon-button/index.ts",
-    "src/icons/index.ts",
-    "src/input/index.ts",
-    "src/menu/index.ts",
-    "src/pill/index.ts",
-    "src/popover/index.ts",
-    "src/portal/index.ts",
-    "src/scrollarea/index.ts",
-    "src/skeleton/index.ts",
-    "src/spinners/index.ts",
-    "src/switch/index.ts",
-    "src/table/index.ts",
-    "src/tab-navigation/index.ts",
-    "src/tabs/index.ts",
-    "src/toast/index.ts",
-    "src/toolbar/index.ts",
-    "src/tooltip/index.ts",
-    "src/utils/index.ts",
-  ],
-  format: ["esm"],
-  dts: true,
-  copy: ["src/styles"],
-  exports: {
-    customExports: (exports) => ({
-      ...exports,
-      "./styles/react-day-picker.css": "./dist/styles/react-day-picker.css",
-      "./styles/react-day-picker": "./dist/styles/react-day-picker.css",
-    }),
-  },
-  platform: "neutral",
-});
diff --git a/packages/ui/.prettierignore b/packages/ui/.prettierignore
deleted file mode 100644
index b0b8bc622a7..00000000000
--- a/packages/ui/.prettierignore
+++ /dev/null
@@ -1,10 +0,0 @@
-.next/
-.react-router/
-.turbo/
-.vite/
-build/
-dist/
-node_modules/
-out/
-pnpm-lock.yaml
-storybook-static/
diff --git a/packages/ui/.storybook/main.ts b/packages/ui/.storybook/main.ts
deleted file mode 100644
index c8ce4f0b88c..00000000000
--- a/packages/ui/.storybook/main.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { StorybookConfig } from "@storybook/react-webpack5";
-
-import { createRequire } from "module";
-import { join, dirname } from "path";
-
-const require = createRequire(import.meta.url);
-
-/**
- * This function is used to resolve the absolute path of a package.
- * It is needed in projects that use Plug'n'Play (PnP) or are set up within a monorepo.
- */
-function getAbsolutePath(value: string): any {
-  return dirname(require.resolve(join(value, "package.json")));
-}
-const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: [
-    getAbsolutePath("@storybook/addon-webpack5-compiler-swc"),
-    getAbsolutePath("@storybook/addon-onboarding"),
-    getAbsolutePath("@storybook/addon-links"),
-    getAbsolutePath("@storybook/addon-docs"),
-    getAbsolutePath("@chromatic-com/storybook"),
-    "@storybook/addon-styling-webpack",
-  ],
-  framework: {
-    name: getAbsolutePath("@storybook/react-webpack5"),
-    options: {},
-  },
-};
-export default config;
diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts
deleted file mode 100644
index 77e839471b3..00000000000
--- a/packages/ui/.storybook/preview.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Preview } from "@storybook/react";
-import "../styles/output.css";
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;
diff --git a/packages/ui/README.md b/packages/ui/README.md
deleted file mode 100644
index ce447bf1c1a..00000000000
--- a/packages/ui/README.md
+++ /dev/null
@@ -1 +0,0 @@
-# UI Package
diff --git a/packages/ui/package.json b/packages/ui/package.json
deleted file mode 100644
index 176590122cb..00000000000
--- a/packages/ui/package.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
-  "name": "@plane/ui",
-  "version": "1.4.2",
-  "private": true,
-  "description": "UI components shared across multiple apps internally",
-  "license": "AGPL-3.0",
-  "type": "module",
-  "sideEffects": false,
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": "./dist/index.js",
-    "./package.json": "./package.json"
-  },
-  "scripts": {
-    "build": "tsdown",
-    "dev": "tsdown --watch --no-clean",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "postcss": "postcss styles/globals.css -o styles/output.css --watch",
-    "check:lint": "oxlint --max-warnings=66 .",
-    "check:types": "tsc --noEmit",
-    "check:format": "oxfmt --check .",
-    "fix:lint": "oxlint --fix .",
-    "fix:format": "oxfmt .",
-    "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
-  },
-  "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "catalog:",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "catalog:",
-    "@headlessui/react": "catalog:",
-    "@makeplane/propel": "catalog:",
-    "@plane/constants": "workspace:*",
-    "@plane/hooks": "workspace:*",
-    "@plane/propel": "workspace:*",
-    "@plane/types": "workspace:*",
-    "@plane/utils": "workspace:*",
-    "@popperjs/core": "catalog:",
-    "clsx": "catalog:",
-    "lodash-es": "catalog:",
-    "lucide-react": "catalog:",
-    "react-color": "catalog:",
-    "react-day-picker": "catalog:",
-    "react-popper": "catalog:",
-    "tailwind-merge": "catalog:",
-    "use-font-face-observer": "catalog:"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "catalog:",
-    "@plane/tailwind-config": "workspace:*",
-    "@plane/typescript-config": "workspace:*",
-    "@storybook/addon-docs": "catalog:",
-    "@storybook/addon-links": "catalog:",
-    "@storybook/addon-onboarding": "catalog:",
-    "@storybook/addon-styling-webpack": "catalog:",
-    "@storybook/addon-webpack5-compiler-swc": "catalog:",
-    "@storybook/react": "catalog:",
-    "@storybook/react-webpack5": "catalog:",
-    "@types/lodash-es": "catalog:",
-    "@types/node": "catalog:",
-    "@types/react": "catalog:",
-    "@types/react-color": "catalog:",
-    "@types/react-dom": "catalog:",
-    "autoprefixer": "catalog:",
-    "postcss-cli": "catalog:",
-    "postcss-nested": "catalog:",
-    "storybook": "catalog:",
-    "tsdown": "catalog:",
-    "typescript": "catalog:"
-  },
-  "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  }
-}
diff --git a/packages/ui/postcss.config.js b/packages/ui/postcss.config.js
deleted file mode 100644
index 3ad28f15f35..00000000000
--- a/packages/ui/postcss.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import postcssConfig from "@plane/tailwind-config/postcss.config.js";
-
-export default postcssConfig;
diff --git a/packages/ui/src/avatar/avatar.stories.tsx b/packages/ui/src/avatar/avatar.stories.tsx
deleted file mode 100644
index 9f96059f6d4..00000000000
--- a/packages/ui/src/avatar/avatar.stories.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react";
-import { Avatar } from "./avatar";
-
-const meta: Meta<typeof Avatar> = {
-  title: "Avatar",
-  component: Avatar,
-};
-
-export default meta;
-type Story = StoryObj<typeof Avatar>;
-
-export const Default: Story = {
-  args: { name: "John Doe" },
-};
-
-export const Large: Story = {
-  args: { name: "John Doe" },
-};
diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.stories.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.stories.tsx
deleted file mode 100644
index a66ac1ef8be..00000000000
--- a/packages/ui/src/breadcrumbs/breadcrumbs.stories.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react";
-import { HomeOutline, SettingsOutline } from "@makeplane/propel/icons";
-import * as React from "react";
-import { Breadcrumbs } from "./breadcrumbs";
-
-const meta: Meta<typeof Breadcrumbs> = {
-  title: "UI/Breadcrumbs",
-  component: Breadcrumbs,
-  tags: ["autodocs"],
-};
-
-type TBreadcrumbBlockProps = {
-  href?: string;
-  label?: string;
-  icon?: React.ReactNode;
-  disableTooltip?: boolean;
-};
-
-// TODO: remove this component and use web Link component
-function BreadcrumbBlock(props: TBreadcrumbBlockProps) {
-  const { label, icon, disableTooltip = false } = props;
-
-  return (
-    <>
-      <Breadcrumbs.ItemWrapper label={label} disableTooltip={disableTooltip}>
-        {icon && <div className="flex size-4 items-center justify-center overflow-hidden !text-16">{icon}</div>}
-        {label && <div className="relative line-clamp-1 block max-w-[150px] truncate overflow-hidden">{label}</div>}
-      </Breadcrumbs.ItemWrapper>
-    </>
-  );
-}
-
-export default meta;
-type Story = StoryObj<typeof Breadcrumbs>;
-
-export const Default: Story = {
-  args: {
-    children: [
-      <Breadcrumbs.Item key="home" component={<BreadcrumbBlock href="/" label="Home" />} />,
-      <Breadcrumbs.Item key="projects" component={<BreadcrumbBlock href="/projects" label="Projects" />} />,
-      <Breadcrumbs.Item
-        key="current"
-        component={<BreadcrumbBlock href="/projects/current" label="Current Project" />}
-      />,
-    ],
-  },
-};
-
-export const WithLoading: Story = {
-  args: {
-    isLoading: true,
-    children: [
-      <Breadcrumbs.Item key="home" component={<BreadcrumbBlock href="/" label="Home" />} />,
-      <Breadcrumbs.Item key="projects" component={<BreadcrumbBlock href="/projects" label="Projects" />} />,
-    ],
-  },
-};
-
-export const WithCustomComponent: Story = {
-  args: {
-    children: [
-      <Breadcrumbs.Item key="home" component={<BreadcrumbBlock href="/" label="Home" />} />,
-      <Breadcrumbs.Item
-        key="custom"
-        component={
-          <div className="flex items-center gap-2">
-            <span className="bg-blue-500 size-4 rounded-full" />
-            <span>Custom Component</span>
-          </div>
-        }
-      />,
-    ],
-  },
-};
-
-export const SingleItem: Story = {
-  args: {
-    children: [<Breadcrumbs.Item key="home" component={<BreadcrumbBlock href="/" label="Home" />} />],
-  },
-};
-
-export const WithIcons: Story = {
-  args: {
-    children: [
-      <Breadcrumbs.Item
-        key="home"
-        component={<BreadcrumbBlock href="/" label="Home" icon={<HomeOutline className="size-3.5" />} />}
-      />,
-      <Breadcrumbs.Item
-        key="settings"
-        component={
-          <BreadcrumbBlock href="/settings" label="Settings" icon={<SettingsOutline className="size-3.5" />} />
-        }
-        isLast
-      />,
-    ],
-  },
-};
diff --git a/packages/ui/src/button/button.tsx b/packages/ui/src/button/button.tsx
deleted file mode 100644
index 0865507660b..00000000000
--- a/packages/ui/src/button/button.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-
-import { cn } from "../utils";
-import type { TButtonVariant, TButtonSizes } from "./helper";
-import { getIconStyling, getButtonStyling } from "./helper";
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: TButtonVariant;
-  size?: TButtonSizes;
-  className?: string;
-  loading?: boolean;
-  disabled?: boolean;
-  appendIcon?: any;
-  prependIcon?: any;
-  children: React.ReactNode;
-}
-
-const Button = React.forwardRef(function Button(props: ButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) {
-  const {
-    variant = "primary",
-    size = "md",
-    className = "",
-    type = "button",
-    loading = false,
-    disabled = false,
-    prependIcon = null,
-    appendIcon = null,
-    children,
-    ...rest
-  } = props;
-
-  const buttonStyle = getButtonStyling(variant, size, disabled || loading);
-  const buttonIconStyle = getIconStyling(size);
-
-  return (
-    <button ref={ref} type={type} className={cn(buttonStyle, className)} disabled={disabled || loading} {...rest}>
-      {prependIcon && <div className={buttonIconStyle}>{React.cloneElement(prependIcon, { strokeWidth: 2 })}</div>}
-      {children}
-      {appendIcon && <div className={buttonIconStyle}>{React.cloneElement(appendIcon, { strokeWidth: 2 })}</div>}
-    </button>
-  );
-});
-
-Button.displayName = "plane-ui-button";
-
-export { Button };
diff --git a/packages/ui/src/button/helper.tsx b/packages/ui/src/button/helper.tsx
deleted file mode 100644
index 95ac851643c..00000000000
--- a/packages/ui/src/button/helper.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export type TButtonVariant =
-  | "primary"
-  | "accent-primary"
-  | "outline-primary"
-  | "neutral-primary"
-  | "link-primary"
-  | "danger"
-  | "accent-danger"
-  | "outline-danger"
-  | "link-danger"
-  | "tertiary-danger"
-  | "link-neutral";
-
-export type TButtonSizes = "sm" | "md" | "lg" | "xl";
-
-export interface IButtonStyling {
-  [key: string]: {
-    default: string;
-    hover: string;
-    pressed: string;
-    disabled: string;
-  };
-}
-
-enum buttonSizeStyling {
-  sm = `px-3 py-1.5 font-medium text-11 rounded-sm flex items-center gap-1.5 whitespace-nowrap transition-all justify-center`,
-  md = `px-4 py-1.5 font-medium text-13 rounded-sm flex items-center gap-1.5 whitespace-nowrap transition-all justify-center`,
-  lg = `px-5 py-2 font-medium text-13 rounded-sm flex items-center gap-1.5 whitespace-nowrap transition-all justify-center`,
-  xl = `px-5 py-3.5 font-medium text-13 rounded-sm flex items-center gap-1.5 whitespace-nowrap transition-all justify-center`,
-}
-
-enum buttonIconStyling {
-  sm = "h-3 w-3 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
-  md = "h-3.5 w-3.5 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
-  lg = "h-4 w-4 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
-  xl = "h-4 w-4 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0 ",
-}
-
-export const buttonStyling: IButtonStyling = {
-  primary: {
-    default: `text-on-color bg-accent-primary`,
-    hover: `hover:bg-accent-primary/80`,
-    pressed: `focus:text-custom-brand-40 focus:bg-accent-primary/80`,
-    disabled: `cursor-not-allowed !bg-layer-1 !text-on-color-disabled`,
-  },
-  "accent-primary": {
-    default: `bg-accent-primary/20 text-accent-primary`,
-    hover: `hover:bg-accent-primary/10 hover:text-accent-secondary`,
-    pressed: `focus:bg-accent-primary/10`,
-    disabled: `cursor-not-allowed !text-accent-primary/60`,
-  },
-  "outline-primary": {
-    default: `text-accent-primary bg-transparent border border-accent-strong`,
-    hover: `hover:bg-accent-primary/20`,
-    pressed: `focus:text-accent-primary focus:bg-accent-primary/30`,
-    disabled: `cursor-not-allowed !text-accent-primary/60 !border-accent-strong-60 `,
-  },
-  "neutral-primary": {
-    default: `text-secondary bg-surface-1 border border-subtle`,
-    hover: `hover:bg-surface-2`,
-    pressed: `focus:text-tertiary focus:bg-surface-2`,
-    disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
-  },
-  "link-primary": {
-    default: `text-accent-primary bg-surface-1`,
-    hover: `hover:text-accent-secondary`,
-    pressed: `focus:text-accent-primary/80 `,
-    disabled: `cursor-not-allowed !text-accent-primary/60`,
-  },
-  danger: {
-    default: `bg-danger-primary text-on-color`,
-    hover: ` hover:bg-danger-primary-hover`,
-    pressed: `focus:bg-danger-primary-active`,
-    disabled: `cursor-not-allowed bg-layer-disabled! text-disabled!`,
-  },
-  "accent-danger": {
-    default: `text-danger-primary bg-red-50`,
-    hover: `hover:text-danger-primary hover:bg-red-100`,
-    pressed: `focus:text-danger-primary focus:bg-red-100`,
-    disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
-  },
-  "outline-danger": {
-    default: `bg-layer-2 text-danger-primary border border-danger-strong`,
-    hover: `hover:bg-danger-subtle`,
-    pressed: `focus:bg-danger-subtle-hover`,
-    disabled: `cursor-not-allowed text-disabled! border-subtle-1!`,
-  },
-  "link-danger": {
-    default: `text-danger-primary bg-surface-1`,
-    hover: `hover:text-danger-primary`,
-    pressed: `focus:text-danger-primary`,
-    disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
-  },
-  "tertiary-danger": {
-    default: `text-danger-primary bg-surface-1 border border-danger-subtle`,
-    hover: `hover:bg-red-50 hover:border-danger-subtle`,
-    pressed: `focus:text-danger-primary`,
-    disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
-  },
-  "link-neutral": {
-    default: `text-tertiary`,
-    hover: `hover:text-secondary`,
-    pressed: `focus:text-primary`,
-    disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
-  },
-};
-
-export const getButtonStyling = (variant: TButtonVariant, size: TButtonSizes, disabled: boolean = false): string => {
-  let tempVariant: string = ``;
-  const currentVariant = buttonStyling[variant];
-
-  tempVariant = `${currentVariant.default} ${disabled ? currentVariant.disabled : currentVariant.hover} ${
-    currentVariant.pressed
-  }`;
-
-  let tempSize: string = ``;
-  if (size) tempSize = buttonSizeStyling[size];
-  return `${tempVariant} ${tempSize}`;
-};
-
-export const getIconStyling = (size: TButtonSizes): string => {
-  let icon: string = ``;
-  if (size) icon = buttonIconStyling[size];
-  return icon;
-};
diff --git a/packages/ui/src/card/card.tsx b/packages/ui/src/card/card.tsx
deleted file mode 100644
index 4ee7f7e71c8..00000000000
--- a/packages/ui/src/card/card.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-import { cn } from "../utils";
-import type { TCardDirection, TCardSpacing, TCardVariant } from "./helper";
-import { ECardDirection, ECardSpacing, ECardVariant, getCardStyle } from "./helper";
-
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-  variant?: TCardVariant;
-  spacing?: TCardSpacing;
-  direction?: TCardDirection;
-  className?: string;
-  children: React.ReactNode;
-}
-
-const Card = React.forwardRef(function Card(props: CardProps, ref: React.ForwardedRef<HTMLDivElement>) {
-  const {
-    variant = ECardVariant.WITH_SHADOW,
-    direction = ECardDirection.COLUMN,
-    className = "",
-    spacing = ECardSpacing.LG,
-    children,
-    ...rest
-  } = props;
-
-  const style = getCardStyle(variant, spacing, direction);
-  return (
-    <div ref={ref} className={cn(style, className)} {...rest}>
-      {children}
-    </div>
-  );
-});
-
-Card.displayName = "plane-ui-card";
-
-export { Card, ECardVariant, ECardSpacing, ECardDirection };
diff --git a/packages/ui/src/card/helper.tsx b/packages/ui/src/card/helper.tsx
deleted file mode 100644
index cc914c5da8f..00000000000
--- a/packages/ui/src/card/helper.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export enum ECardVariant {
-  WITHOUT_SHADOW = "without-shadow",
-  WITH_SHADOW = "with-shadow",
-}
-export enum ECardDirection {
-  ROW = "row",
-  COLUMN = "column",
-}
-export enum ECardSpacing {
-  SM = "sm",
-  LG = "lg",
-}
-export type TCardVariant = ECardVariant.WITHOUT_SHADOW | ECardVariant.WITH_SHADOW;
-export type TCardDirection = ECardDirection.ROW | ECardDirection.COLUMN;
-export type TCardSpacing = ECardSpacing.SM | ECardSpacing.LG;
-
-export interface ICardProperties {
-  [key: string]: string;
-}
-
-const DEFAULT_STYLE = "bg-surface-1 rounded-lg border-[0.5px] border-subtle w-full flex flex-col";
-export const containerStyle: ICardProperties = {
-  [ECardVariant.WITHOUT_SHADOW]: "",
-  [ECardVariant.WITH_SHADOW]: "hover:shadow-raised-200 duration-300",
-};
-export const spacings = {
-  [ECardSpacing.SM]: "p-4",
-  [ECardSpacing.LG]: "p-6",
-};
-export const directions = {
-  [ECardDirection.ROW]: "flex-row space-x-3",
-  [ECardDirection.COLUMN]: "flex-col space-y-3",
-};
-export const getCardStyle = (variant: TCardVariant, spacing: TCardSpacing, direction: TCardDirection) =>
-  DEFAULT_STYLE + " " + directions[direction] + " " + containerStyle[variant] + " " + spacings[spacing];
diff --git a/packages/ui/src/card/index.ts b/packages/ui/src/card/index.ts
deleted file mode 100644
index 4260f8508d3..00000000000
--- a/packages/ui/src/card/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./card";
diff --git a/packages/ui/src/collapsible/collapsible-button.tsx b/packages/ui/src/collapsible/collapsible-button.tsx
deleted file mode 100644
index b2b1c4404b1..00000000000
--- a/packages/ui/src/collapsible/collapsible-button.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import React from "react";
-import type { ISvgIcons } from "@plane/propel/icons";
-import { DropdownOutline } from "@makeplane/propel/icons";
-import { cn } from "../utils";
-
-type Props = {
-  isOpen: boolean;
-  title: React.ReactNode;
-  hideChevron?: boolean;
-  indicatorElement?: React.ReactNode;
-  actionItemElement?: React.ReactNode;
-  className?: string;
-  titleClassName?: string;
-  ChevronIcon?: React.FC<ISvgIcons>;
-};
-
-export function CollapsibleButton(props: Props) {
-  const {
-    isOpen,
-    title,
-    hideChevron = false,
-    indicatorElement,
-    actionItemElement,
-    className = "",
-    titleClassName = "",
-    ChevronIcon = DropdownOutline,
-  } = props;
-  return (
-    <div className={cn("flex h-12 items-center justify-between gap-3 border-b border-subtle px-2.5 py-3", className)}>
-      <div className="flex items-center gap-3.5">
-        <div className="flex items-center gap-3">
-          {!hideChevron && (
-            <ChevronIcon
-              className={cn("size-2 text-tertiary duration-300 hover:text-secondary", {
-                "-rotate-90": !isOpen,
-              })}
-            />
-          )}
-          <span className={cn("text-14 font-medium text-primary", titleClassName)}>{title}</span>
-        </div>
-        {indicatorElement && indicatorElement}
-      </div>
-      {actionItemElement && isOpen && actionItemElement}
-    </div>
-  );
-}
diff --git a/packages/ui/src/collapsible/collapsible.tsx b/packages/ui/src/collapsible/collapsible.tsx
deleted file mode 100644
index b440d1daf51..00000000000
--- a/packages/ui/src/collapsible/collapsible.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { Disclosure, Transition } from "@headlessui/react";
-import React, { useState, useEffect, useCallback } from "react";
-
-export type TCollapsibleProps = {
-  title: string | React.ReactNode;
-  children: React.ReactNode;
-  buttonRef?: React.RefObject<HTMLButtonElement | null>;
-  className?: string;
-  buttonClassName?: string;
-  isOpen?: boolean;
-  onToggle?: () => void;
-  defaultOpen?: boolean;
-};
-
-export function Collapsible(props: TCollapsibleProps) {
-  const { title, children, buttonRef, className, buttonClassName, isOpen, onToggle, defaultOpen } = props;
-  // state
-  const [localIsOpen, setLocalIsOpen] = useState<boolean>(isOpen || defaultOpen ? true : false);
-
-  useEffect(() => {
-    if (isOpen !== undefined) {
-      setLocalIsOpen(isOpen);
-    }
-  }, [isOpen]);
-
-  // handlers
-  const handleOnClick = useCallback(() => {
-    if (isOpen !== undefined) {
-      if (onToggle) onToggle();
-    } else {
-      setLocalIsOpen((prev) => !prev);
-    }
-  }, [isOpen, onToggle]);
-
-  return (
-    <Disclosure as="div" className={className}>
-      <Disclosure.Button ref={buttonRef} className={buttonClassName} onClick={handleOnClick}>
-        {title}
-      </Disclosure.Button>
-      <Transition
-        as="div"
-        show={localIsOpen}
-        enter="transition-all duration-300 ease-in-out"
-        enterFrom="grid-rows-[0fr] opacity-0"
-        enterTo="grid-rows-[1fr] opacity-100"
-        leave="transition-all duration-300 ease-in-out"
-        leaveFrom="grid-rows-[1fr] opacity-100"
-        leaveTo="grid-rows-[0fr] opacity-0"
-        className="grid overflow-hidden"
-      >
-        <Disclosure.Panel static className="min-h-0">
-          {children}
-        </Disclosure.Panel>
-      </Transition>
-    </Disclosure>
-  );
-}
diff --git a/packages/ui/src/collapsible/index.ts b/packages/ui/src/collapsible/index.ts
deleted file mode 100644
index e1a798d68ae..00000000000
--- a/packages/ui/src/collapsible/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./collapsible";
-export * from "./collapsible-button";
diff --git a/packages/ui/src/dropdown/Readme.md b/packages/ui/src/dropdown/Readme.md
deleted file mode 100644
index 4c9bad817c1..00000000000
--- a/packages/ui/src/dropdown/Readme.md
+++ /dev/null
@@ -1,48 +0,0 @@
-Below is a detailed list of the props included:
-
-### Root Props
-
-- value: string | string[]; - Current selected value.
-- onChange: (value: string | string []) => void; - Callback function for handling value changes.
-- options: TDropdownOption[] | undefined; - Array of options.
-- onOpen?: () => void; - Callback function triggered when the dropdown opens.
-- onClose?: () => void; - Callback function triggered when the dropdown closes.
-- containerClassName?: (isOpen: boolean) => string; - Function to return the class name for the container based on the open state.
-- tabIndex?: number; - Sets the tab index for the dropdown.
-- placement?: Placement; - Determines the placement of the dropdown (e.g., top, bottom, left, right).
-- disabled?: boolean; - Disables the dropdown if set to true.
-
----
-
-### Button Props
-
-- buttonContent?: (isOpen: boolean) => React.ReactNode; - Function to render the content of the button based on the open state.
-- buttonContainerClassName?: string; - Class name for the button container.
-- buttonClassName?: string; - Class name for the button itself.
-
----
-
-### Input Props
-
-- disableSearch?: boolean; - Disables the search input if set to true.
-- inputPlaceholder?: string; - Placeholder text for the search input.
-- inputClassName?: string; - Class name for the search input.
-- inputIcon?: React.ReactNode; - Icon to be displayed in the search input.
-- inputContainerClassName?: string; - Class name for the search input container.
-
----
-
-### Options Props
-
-- keyExtractor: (option: TDropdownOption) => string; - Function to extract the key from each option.
-- optionsContainerClassName?: string; - Class name for the options container.
-- queryArray: string[]; - Array of strings to be used for querying the options.
-- sortByKey: string; - Key to sort the options by.
-- firstItem?: (optionValue: string) => boolean; - Function to determine if an option should be the first item.
-- renderItem?: ({ value, selected }: { value: string; selected: boolean }) => React.ReactNode; - Function to render each option.
-- loader?: React.ReactNode; - Loader element to be displayed while options are being loaded.
-- disableSorting?: boolean; - Disables sorting of the options if set to true.
-
----
-
-These properties offer extensive control over the dropdown's behavior and presentation, making it a highly versatile component suitable for various scenarios.
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
deleted file mode 100644
index 5045d520d8d..00000000000
--- a/packages/ui/src/index.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./avatar";
-export * from "./breadcrumbs";
-export * from "./card";
-export * from "./collapsible";
-export * from "./content-wrapper";
-export * from "./control-link";
-export * from "./drag-handle";
-export * from "./drop-indicator";
-export * from "./dropdown";
-export * from "./dropdowns";
-export * from "./favorite-star";
-export * from "./form-fields";
-export * from "./header";
-export * from "./link";
-export * from "./loader";
-export * from "./modals";
-export * from "./popovers";
-export * from "./row";
-export * from "./sortable";
-export * from "./spinners";
-export * from "./tables";
-export * from "./tag";
-export * from "./utils";
-export * from "./oauth";
diff --git a/packages/ui/src/popovers/popover-menu.stories.tsx b/packages/ui/src/popovers/popover-menu.stories.tsx
deleted file mode 100644
index 292cc1b55a4..00000000000
--- a/packages/ui/src/popovers/popover-menu.stories.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import { PopoverMenu } from "./popover-menu";
-
-type TPopoverMenu = {
-  id: number;
-  name: string;
-};
-
-const meta: Meta<typeof PopoverMenu<TPopoverMenu>> = {
-  title: "Components/PopoverMenu",
-  component: PopoverMenu,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: {
-    popperPosition: "bottom-start",
-    panelClassName: "rounded-sm bg-gray-100 p-2",
-    data: [
-      { id: 1, name: "John Doe" },
-      { id: 2, name: "Jane Doe" },
-      { id: 3, name: "John Smith" },
-      { id: 4, name: "Jane Smith" },
-    ],
-    keyExtractor: (item, index: number) => `${item.id}-${index}`,
-    render: (item: TPopoverMenu) => (
-      <div className="text-gray-600 hover:text-gray-700 hover:bg-gray-200 cursor-pointer rounded-xs px-1.5 py-0.5 text-13 capitalize transition-all">
-        {item.name}
-      </div>
-    ),
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof PopoverMenu<TPopoverMenu>>;
-
-export const Default: Story = {};
diff --git a/packages/ui/src/popovers/popover.stories.tsx b/packages/ui/src/popovers/popover.stories.tsx
deleted file mode 100644
index 030367b70c4..00000000000
--- a/packages/ui/src/popovers/popover.stories.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import { Popover } from "./popover";
-
-const meta: Meta<typeof Popover> = {
-  title: "Popover",
-  component: Popover,
-};
-
-export default meta;
-
-// types
-type Story = StoryObj<typeof Popover>;
-
-// data
-
-// components
-const RenderCustomPopoverComponent = (
-  <div className="space-y-2">
-    <div className="text-gray-500 text-13 font-medium">Your custom component</div>
-    <div>
-      {["option1", "option2", "option3"].map((option) => (
-        <div
-          key={option}
-          className="text-gray-600 hover:text-gray-700 hover:bg-gray-200 cursor-pointer rounded-xs px-1.5 py-0.5 text-13 capitalize transition-all"
-        >
-          {option}
-        </div>
-      ))}
-    </div>
-  </div>
-);
-
-// stories
-export const Default: Story = {
-  args: {
-    popperPosition: "bottom-start",
-    panelClassName: "rounded-sm bg-gray-100 p-2",
-    children: RenderCustomPopoverComponent,
-  },
-};
-
-export const CustomMenuButton: Story = {
-  args: {
-    popperPosition: "bottom-start",
-    button: (
-      <div className="bg-gray-100 hover:bg-gray-200 rounded-sm p-2 text-13 font-medium transition-all">
-        Custom Menu Button
-      </div>
-    ),
-    panelClassName: "rounded-sm bg-gray-100 p-2",
-    children: RenderCustomPopoverComponent,
-  },
-};
diff --git a/packages/ui/src/sortable/sortable.stories.tsx b/packages/ui/src/sortable/sortable.stories.tsx
deleted file mode 100644
index 474a764aaaa..00000000000
--- a/packages/ui/src/sortable/sortable.stories.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import { Sortable } from "./sortable";
-
-type StoryItem = { id: string; name: string };
-
-const meta: Meta<typeof Sortable<StoryItem>> = {
-  title: "Sortable",
-  component: Sortable,
-  args: {
-    data: [
-      { id: "1", name: "John Doe" },
-      { id: "2", name: "Satish" },
-      { id: "3", name: "Alice" },
-      { id: "4", name: "Bob" },
-      { id: "5", name: "Charlie" },
-    ],
-    render: (item: StoryItem) => (
-      // <Draggable data={item} className="rounded-lg">
-      <div className="border">{item.name}</div>
-      // </Draggable>
-    ),
-    onChange: (data) => console.log(data.map(({ id }) => id)),
-    keyExtractor: (item) => item.id,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
diff --git a/packages/ui/src/spinners/circular-spinner.tsx b/packages/ui/src/spinners/circular-spinner.tsx
deleted file mode 100644
index 59aacd6ceac..00000000000
--- a/packages/ui/src/spinners/circular-spinner.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-// helpers
-import { cn } from "../utils";
-
-export interface ISpinner extends React.SVGAttributes<SVGElement> {
-  height?: string;
-  width?: string;
-  className?: string | undefined;
-}
-
-export function Spinner({ height = "32px", width = "32px", className = "" }: ISpinner) {
-  return (
-    <div role="status">
-      <svg
-        aria-hidden="true"
-        height={height}
-        width={width}
-        className={cn("animate-spin fill-accent-primary text-secondary", className)}
-        viewBox="0 0 100 101"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-          fill="currentColor"
-        />
-        <path
-          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-          fill="currentFill"
-        />
-      </svg>
-      <span className="sr-only">Loading...</span>
-    </div>
-  );
-}
diff --git a/packages/ui/src/spinners/index.ts b/packages/ui/src/spinners/index.ts
deleted file mode 100644
index 6f87ad9505e..00000000000
--- a/packages/ui/src/spinners/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./circular-spinner";
diff --git a/packages/ui/src/tables/table.stories.tsx b/packages/ui/src/tables/table.stories.tsx
deleted file mode 100644
index e1b03fcb121..00000000000
--- a/packages/ui/src/tables/table.stories.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import { Table } from "./table";
-
-const meta: Meta<typeof Table> = {
-  title: "Table",
-  component: Table,
-};
-
-export default meta;
-
-// types
-type TTableData = {
-  id: string;
-  name: string;
-  age: number;
-};
-
-type Story = StoryObj<typeof Table<TTableData>>;
-
-// data
-const tableData: TTableData[] = [
-  { id: "1", name: "Ernest", age: 25 },
-  { id: "2", name: "Ann", age: 30 },
-  { id: "3", name: "Russell", age: 35 },
-  { id: "4", name: "Verna", age: 40 },
-];
-
-const tableColumns = [
-  {
-    key: "id",
-    content: "Id",
-    tdRender: (rowData: TTableData) => <span>{rowData.id}</span>,
-  },
-  {
-    key: "name",
-    content: "Name",
-    tdRender: (rowData: TTableData) => <span>{rowData.name}</span>,
-  },
-  {
-    key: "age",
-    content: "Age",
-    tdRender: (rowData: TTableData) => <span>{rowData.age}</span>,
-  },
-];
-
-// stories
-export const Default: Story = {
-  args: {
-    data: tableData,
-    columns: tableColumns,
-    keyExtractor: (rowData) => rowData.id,
-    tableClassName: "bg-gray-100",
-    tHeadClassName: "bg-gray-200",
-    tHeadTrClassName: "text-gray-600 text-left text-13 font-medium",
-    thClassName: "font-medium",
-    tBodyClassName: "bg-gray-100",
-    tBodyTrClassName: "text-gray-600",
-    tdClassName: "font-medium",
-  },
-};
diff --git a/packages/ui/src/tag/helper.tsx b/packages/ui/src/tag/helper.tsx
deleted file mode 100644
index 74f393e7306..00000000000
--- a/packages/ui/src/tag/helper.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export enum ETagVariant {
-  OUTLINED = "outlined",
-}
-export enum ETagSize {
-  SM = "sm",
-  LG = "lg",
-}
-export type TTagVariant = ETagVariant.OUTLINED;
-
-export type TTagSize = ETagSize.SM | ETagSize.LG;
-export interface ITagProperties {
-  [key: string]: string;
-}
-
-export const containerStyle: ITagProperties = {
-  [ETagVariant.OUTLINED]:
-    "flex items-center rounded-md border border-subtle text-11 text-tertiary hover:text-secondary min-h-[36px] my-auto capitalize flex-wrap cursor-pointer gap-1.5",
-};
-export const sizes = {
-  [ETagSize.SM]: "p-1.5",
-  [ETagSize.LG]: "p-6",
-};
-
-export const getTagStyle = (variant: TTagVariant, size: TTagSize) => containerStyle[variant] + " " + sizes[size];
diff --git a/packages/ui/src/tag/index.ts b/packages/ui/src/tag/index.ts
deleted file mode 100644
index 66ae25f8f09..00000000000
--- a/packages/ui/src/tag/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./tag";
diff --git a/packages/ui/src/tag/tag.tsx b/packages/ui/src/tag/tag.tsx
deleted file mode 100644
index 29faf5a35ab..00000000000
--- a/packages/ui/src/tag/tag.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-import { cn } from "../utils";
-import type { TTagSize, TTagVariant } from "./helper";
-import { ETagSize, ETagVariant, getTagStyle } from "./helper";
-
-export interface TagProps extends React.ComponentProps<"div"> {
-  variant?: TTagVariant;
-  size?: TTagSize;
-  className?: string;
-  children: React.ReactNode;
-}
-
-const Tag = React.forwardRef(function Tag(props: TagProps, ref: React.ForwardedRef<HTMLDivElement>) {
-  const { variant = ETagVariant.OUTLINED, className = "", size = ETagSize.SM, children, ...rest } = props;
-
-  const style = getTagStyle(variant, size);
-  return (
-    <div ref={ref} className={cn(style, className)} {...rest}>
-      {children}
-    </div>
-  );
-});
-
-Tag.displayName = "plane-ui-container";
-
-export { Tag, ETagVariant, ETagSize };
diff --git a/packages/ui/src/utils/classname.tsx b/packages/ui/src/utils/classname.tsx
deleted file mode 100644
index 7ac89ce895c..00000000000
--- a/packages/ui/src/utils/classname.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export { cn } from "@plane/utils";
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
deleted file mode 100644
index bb61992e662..00000000000
--- a/packages/ui/src/utils/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./classname";
diff --git a/packages/ui/styles/globals.css b/packages/ui/styles/globals.css
deleted file mode 100644
index 434ca7f9100..00000000000
--- a/packages/ui/styles/globals.css
+++ /dev/null
@@ -1 +0,0 @@
-@import "@plane/tailwind-config/index.css";
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
deleted file mode 100644
index f22b1c54148..00000000000
--- a/packages/ui/tsconfig.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "extends": "@plane/typescript-config/react-library.json",
-  "include": ["src"],
-  "compilerOptions": {
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "exactOptionalPropertyTypes": false,
-    "noImplicitReturns": false
-  },
-  "exclude": ["dist", "node_modules"]
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b86bc5ac1fd..27396578fd8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,9 +21,6 @@ catalogs:
     '@bprogress/core':
       specifier: ^1.3.4
       version: 1.3.4
-    '@chromatic-com/storybook':
-      specifier: 5.2.1
-      version: 5.2.1
     '@effect/platform':
       specifier: ^0.94.0
       version: 0.94.1
@@ -93,33 +90,6 @@ catalogs:
     '@react-router/serve':
       specifier: 8.3.0
       version: 8.3.0
-    '@storybook/addon-designs':
-      specifier: 11.1.3
-      version: 11.1.3
-    '@storybook/addon-docs':
-      specifier: 10.4.6
-      version: 10.4.6
-    '@storybook/addon-links':
-      specifier: 10.4.6
-      version: 10.4.6
-    '@storybook/addon-onboarding':
-      specifier: 10.4.6
-      version: 10.4.6
-    '@storybook/addon-styling-webpack':
-      specifier: 3.0.2
-      version: 3.0.2
-    '@storybook/addon-webpack5-compiler-swc':
-      specifier: 4.0.3
-      version: 4.0.3
-    '@storybook/react':
-      specifier: 10.4.6
-      version: 10.4.6
-    '@storybook/react-vite':
-      specifier: 10.4.6
-      version: 10.4.6
-    '@storybook/react-webpack5':
-      specifier: 10.4.6
-      version: 10.4.6
     '@tailwindcss/postcss':
       specifier: 4.1.17
       version: 4.1.17
@@ -240,18 +210,12 @@ catalogs:
     ast-types:
       specifier: 0.14.2
       version: 0.14.2
-    autoprefixer:
-      specifier: ^10.4.19
-      version: 10.4.21
     buffer:
       specifier: ^6.0.3
       version: 6.0.3
     chroma-js:
       specifier: ^3.2.0
       version: 3.2.0
-    class-variance-authority:
-      specifier: 0.7.1
-      version: 0.7.1
     clsx:
       specifier: ^2.1.1
       version: 2.1.1
@@ -375,21 +339,12 @@ catalogs:
     pdf-parse:
       specifier: ^2.4.5
       version: 2.4.5
-    postcss-cli:
-      specifier: ^11.0.0
-      version: 11.0.1
-    postcss-nested:
-      specifier: ^6.0.1
-      version: 6.2.0
     prosemirror-codemark:
       specifier: ^0.4.2
       version: 0.4.2
     react-color:
       specifier: ^2.19.3
       version: 2.19.3
-    react-day-picker:
-      specifier: 9.5.0
-      version: 9.5.0
     react-dropzone:
       specifier: ^14.2.3
       version: 14.3.8
@@ -447,9 +402,6 @@ catalogs:
     smooth-scroll-into-view-if-needed:
       specifier: ^2.0.2
       version: 2.0.2
-    storybook:
-      specifier: 10.4.6
-      version: 10.4.6
     swr:
       specifier: 2.4.2
       version: 2.4.2
@@ -879,6 +831,9 @@ importers:
       '@makeplane/propel':
         specifier: 'catalog:'
         version: 0.3.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
+      '@plane/blocks':
+        specifier: workspace:*
+        version: link:../../packages/blocks
       '@plane/constants':
         specifier: workspace:*
         version: link:../../packages/constants
@@ -888,18 +843,12 @@ importers:
       '@plane/i18n':
         specifier: workspace:*
         version: link:../../packages/i18n
-      '@plane/propel':
-        specifier: workspace:*
-        version: link:../../packages/propel
       '@plane/services':
         specifier: workspace:*
         version: link:../../packages/services
       '@plane/types':
         specifier: workspace:*
         version: link:../../packages/types
-      '@plane/ui':
-        specifier: workspace:*
-        version: link:../../packages/ui
       '@plane/utils':
         specifier: workspace:*
         version: link:../../packages/utils
@@ -1036,6 +985,9 @@ importers:
       '@makeplane/propel':
         specifier: 'catalog:'
         version: 0.3.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
+      '@plane/blocks':
+        specifier: workspace:*
+        version: link:../../packages/blocks
       '@plane/constants':
         specifier: workspace:*
         version: link:../../packages/constants
@@ -1048,9 +1000,6 @@ importers:
       '@plane/i18n':
         specifier: workspace:*
         version: link:../../packages/i18n
-      '@plane/propel':
-        specifier: workspace:*
-        version: link:../../packages/propel
       '@plane/services':
         specifier: workspace:*
         version: link:../../packages/services
@@ -1060,9 +1009,6 @@ importers:
       '@plane/types':
         specifier: workspace:*
         version: link:../../packages/types
-      '@plane/ui':
-        specifier: workspace:*
-        version: link:../../packages/ui
       '@plane/utils':
         specifier: workspace:*
         version: link:../../packages/utils
@@ -1218,6 +1164,100 @@ importers:
         specifier: 'catalog:'
         version: 5.1.4(typescript@5.8.3)(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))
 
+  packages/blocks:
+    dependencies:
+      '@atlaskit/pragmatic-drag-and-drop':
+        specifier: 'catalog:'
+        version: 1.7.4
+      '@atlaskit/pragmatic-drag-and-drop-hitbox':
+        specifier: 'catalog:'
+        version: 1.1.0
+      '@base-ui-components/react':
+        specifier: 'catalog:'
+        version: 1.0.0-beta.3(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@headlessui/react':
+        specifier: 'catalog:'
+        version: 2.2.10(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@makeplane/propel':
+        specifier: 'catalog:'
+        version: 0.3.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
+      '@plane/constants':
+        specifier: workspace:*
+        version: link:../constants
+      '@plane/hooks':
+        specifier: workspace:*
+        version: link:../hooks
+      '@plane/types':
+        specifier: workspace:*
+        version: link:../types
+      '@plane/utils':
+        specifier: workspace:*
+        version: link:../utils
+      '@popperjs/core':
+        specifier: 'catalog:'
+        version: 2.11.8
+      clsx:
+        specifier: 'catalog:'
+        version: 2.1.1
+      framer-motion:
+        specifier: 'catalog:'
+        version: 12.23.12(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      frimousse:
+        specifier: 'catalog:'
+        version: 0.3.0(react@19.2.8)(typescript@5.8.3)
+      lodash-es:
+        specifier: 4.18.1
+        version: 4.18.1
+      lucide-react:
+        specifier: 'catalog:'
+        version: 0.469.0(react@19.2.8)
+      react:
+        specifier: 19.2.8
+        version: 19.2.8
+      react-color:
+        specifier: 'catalog:'
+        version: 2.19.3(patch_hash=311b81530f5338988f8b57718f24870a7550637159d8360d69f668cba2f2033f)(react@19.2.8)
+      react-dom:
+        specifier: 19.2.8
+        version: 19.2.8(react@19.2.8)
+      react-popper:
+        specifier: 'catalog:'
+        version: 2.3.0(@popperjs/core@2.11.8)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      recharts:
+        specifier: 'catalog:'
+        version: 2.15.4(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      tailwind-merge:
+        specifier: 'catalog:'
+        version: 3.4.0
+      use-font-face-observer:
+        specifier: 'catalog:'
+        version: 1.3.0(react@19.2.8)
+    devDependencies:
+      '@plane/tailwind-config':
+        specifier: workspace:*
+        version: link:../tailwind-config
+      '@plane/typescript-config':
+        specifier: workspace:*
+        version: link:../typescript-config
+      '@types/lodash-es':
+        specifier: 'catalog:'
+        version: 4.17.12
+      '@types/react':
+        specifier: 19.2.17
+        version: 19.2.17
+      '@types/react-color':
+        specifier: 'catalog:'
+        version: 3.0.13(@types/react@19.2.17)
+      '@types/react-dom':
+        specifier: 19.2.3
+        version: 19.2.3(@types/react@19.2.17)
+      tsdown:
+        specifier: 'catalog:'
+        version: 0.16.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)(oxc-resolver@11.20.0)(typescript@5.8.3)
+      typescript:
+        specifier: 5.8.3
+        version: 5.8.3
+
   packages/codemods:
     devDependencies:
       '@hypermod/utils':
@@ -1299,21 +1339,18 @@ importers:
       '@makeplane/propel':
         specifier: 'catalog:'
         version: 0.3.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
+      '@plane/blocks':
+        specifier: workspace:*
+        version: link:../blocks
       '@plane/constants':
         specifier: workspace:*
         version: link:../constants
       '@plane/hooks':
         specifier: workspace:*
         version: link:../hooks
-      '@plane/propel':
-        specifier: workspace:*
-        version: link:../propel
       '@plane/types':
         specifier: workspace:*
         version: link:../types
-      '@plane/ui':
-        specifier: workspace:*
-        version: link:../ui
       '@plane/utils':
         specifier: workspace:*
         version: link:../utils
@@ -1553,97 +1590,6 @@ importers:
         specifier: 5.8.3
         version: 5.8.3
 
-  packages/propel:
-    dependencies:
-      '@base-ui-components/react':
-        specifier: 'catalog:'
-        version: 1.0.0-beta.3(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@makeplane/propel':
-        specifier: 'catalog:'
-        version: 0.3.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
-      '@plane/constants':
-        specifier: workspace:*
-        version: link:../constants
-      '@plane/hooks':
-        specifier: workspace:*
-        version: link:../hooks
-      '@plane/types':
-        specifier: workspace:*
-        version: link:../types
-      '@plane/utils':
-        specifier: workspace:*
-        version: link:../utils
-      '@tanstack/react-table':
-        specifier: 'catalog:'
-        version: 8.21.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      class-variance-authority:
-        specifier: 'catalog:'
-        version: 0.7.1
-      clsx:
-        specifier: 'catalog:'
-        version: 2.1.1
-      cmdk:
-        specifier: 'catalog:'
-        version: 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      framer-motion:
-        specifier: 'catalog:'
-        version: 12.23.12(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      frimousse:
-        specifier: 'catalog:'
-        version: 0.3.0(react@19.2.8)(typescript@5.8.3)
-      lucide-react:
-        specifier: 'catalog:'
-        version: 0.469.0(react@19.2.8)
-      react:
-        specifier: 19.2.8
-        version: 19.2.8
-      react-day-picker:
-        specifier: 'catalog:'
-        version: 9.5.0(react@19.2.8)
-      react-dom:
-        specifier: 19.2.8
-        version: 19.2.8(react@19.2.8)
-      recharts:
-        specifier: 'catalog:'
-        version: 2.15.4(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      tailwind-merge:
-        specifier: 'catalog:'
-        version: 3.4.0
-      use-font-face-observer:
-        specifier: 'catalog:'
-        version: 1.3.0(react@19.2.8)
-    devDependencies:
-      '@plane/tailwind-config':
-        specifier: workspace:*
-        version: link:../tailwind-config
-      '@plane/typescript-config':
-        specifier: workspace:*
-        version: link:../typescript-config
-      '@storybook/addon-designs':
-        specifier: 'catalog:'
-        version: 11.1.3(@storybook/addon-docs@10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(esbuild@0.28.1)))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))
-      '@storybook/addon-docs':
-        specifier: 'catalog:'
-        version: 10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(esbuild@0.28.1))
-      '@storybook/react-vite':
-        specifier: 'catalog:'
-        version: 10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(esbuild@0.28.1))
-      '@types/react':
-        specifier: 19.2.17
-        version: 19.2.17
-      '@types/react-dom':
-        specifier: 19.2.3
-        version: 19.2.3(@types/react@19.2.17)
-      storybook:
-        specifier: 'catalog:'
-        version: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      tsdown:
-        specifier: 'catalog:'
-        version: 0.16.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)(oxc-resolver@11.20.0)(typescript@5.8.3)
-      typescript:
-        specifier: 5.8.3
-        version: 5.8.3
-
   packages/services:
     dependencies:
       '@plane/constants':
@@ -1758,205 +1704,78 @@ importers:
 
   packages/typescript-config: {}
 
-  packages/ui:
+  packages/utils:
     dependencies:
-      '@atlaskit/pragmatic-drag-and-drop':
-        specifier: 'catalog:'
-        version: 1.7.4
-      '@atlaskit/pragmatic-drag-and-drop-hitbox':
-        specifier: 'catalog:'
-        version: 1.1.0
-      '@headlessui/react':
-        specifier: 'catalog:'
-        version: 2.2.10(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@makeplane/propel':
         specifier: 'catalog:'
         version: 0.3.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
       '@plane/constants':
         specifier: workspace:*
         version: link:../constants
-      '@plane/hooks':
-        specifier: workspace:*
-        version: link:../hooks
-      '@plane/propel':
-        specifier: workspace:*
-        version: link:../propel
       '@plane/types':
         specifier: workspace:*
         version: link:../types
-      '@plane/utils':
-        specifier: workspace:*
-        version: link:../utils
-      '@popperjs/core':
+      chroma-js:
         specifier: 'catalog:'
-        version: 2.11.8
+        version: 3.2.0
       clsx:
         specifier: 'catalog:'
         version: 2.1.1
+      date-fns:
+        specifier: 'catalog:'
+        version: 4.1.0
+      hast:
+        specifier: 'catalog:'
+        version: 1.0.0
+      hast-util-to-mdast:
+        specifier: 'catalog:'
+        version: 10.1.2
       lodash-es:
         specifier: 4.18.1
         version: 4.18.1
       lucide-react:
         specifier: 'catalog:'
         version: 0.469.0(react@19.2.8)
+      mdast:
+        specifier: 'catalog:'
+        version: 3.0.0
       react:
         specifier: 19.2.8
         version: 19.2.8
-      react-color:
+      rehype-parse:
         specifier: 'catalog:'
-        version: 2.19.3(patch_hash=311b81530f5338988f8b57718f24870a7550637159d8360d69f668cba2f2033f)(react@19.2.8)
-      react-day-picker:
+        version: 9.0.1
+      rehype-remark:
         specifier: 'catalog:'
-        version: 9.5.0(react@19.2.8)
-      react-dom:
-        specifier: 19.2.8
-        version: 19.2.8(react@19.2.8)
-      react-popper:
+        version: 10.0.1
+      remark-gfm:
         specifier: 'catalog:'
-        version: 2.3.0(@popperjs/core@2.11.8)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+        version: 4.0.1
+      remark-stringify:
+        specifier: 'catalog:'
+        version: 11.0.0
+      sanitize-html:
+        specifier: 'catalog:'
+        version: 2.17.7
       tailwind-merge:
         specifier: 'catalog:'
         version: 3.4.0
-      use-font-face-observer:
+      unified:
         specifier: 'catalog:'
-        version: 1.3.0(react@19.2.8)
+        version: 11.0.5
+      uuid:
+        specifier: 14.0.0
+        version: 14.0.0
     devDependencies:
-      '@chromatic-com/storybook':
-        specifier: 'catalog:'
-        version: 5.2.1(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))
-      '@plane/tailwind-config':
-        specifier: workspace:*
-        version: link:../tailwind-config
       '@plane/typescript-config':
         specifier: workspace:*
         version: link:../typescript-config
-      '@storybook/addon-docs':
-        specifier: 'catalog:'
-        version: 10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))
-      '@storybook/addon-links':
-        specifier: 'catalog:'
-        version: 10.4.6(@types/react@19.2.17)(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))
-      '@storybook/addon-onboarding':
-        specifier: 'catalog:'
-        version: 10.4.6(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))
-      '@storybook/addon-styling-webpack':
-        specifier: 'catalog:'
-        version: 3.0.2(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))
-      '@storybook/addon-webpack5-compiler-swc':
-        specifier: 'catalog:'
-        version: 4.0.3(@swc/helpers@0.5.17)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))
-      '@storybook/react':
+      '@types/chroma-js':
         specifier: 'catalog:'
-        version: 10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)
-      '@storybook/react-webpack5':
+        version: 3.1.2
+      '@types/hast':
         specifier: 'catalog:'
-        version: 10.4.6(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(postcss@8.5.25)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)
-      '@types/lodash-es':
-        specifier: 'catalog:'
-        version: 4.17.12
-      '@types/node':
-        specifier: 'catalog:'
-        version: 22.12.0
-      '@types/react':
-        specifier: 19.2.17
-        version: 19.2.17
-      '@types/react-color':
-        specifier: 'catalog:'
-        version: 3.0.13(@types/react@19.2.17)
-      '@types/react-dom':
-        specifier: 19.2.3
-        version: 19.2.3(@types/react@19.2.17)
-      autoprefixer:
-        specifier: 'catalog:'
-        version: 10.4.21(postcss@8.5.25)
-      postcss-cli:
-        specifier: 'catalog:'
-        version: 11.0.1(jiti@2.7.0)(postcss@8.5.25)(tsx@4.20.6)
-      postcss-nested:
-        specifier: 'catalog:'
-        version: 6.2.0(postcss@8.5.25)
-      storybook:
-        specifier: 'catalog:'
-        version: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      tsdown:
-        specifier: 'catalog:'
-        version: 0.16.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)(oxc-resolver@11.20.0)(typescript@5.8.3)
-      typescript:
-        specifier: 5.8.3
-        version: 5.8.3
-
-  packages/utils:
-    dependencies:
-      '@makeplane/propel':
-        specifier: 'catalog:'
-        version: 0.3.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
-      '@plane/constants':
-        specifier: workspace:*
-        version: link:../constants
-      '@plane/types':
-        specifier: workspace:*
-        version: link:../types
-      chroma-js:
-        specifier: 'catalog:'
-        version: 3.2.0
-      clsx:
-        specifier: 'catalog:'
-        version: 2.1.1
-      date-fns:
-        specifier: 'catalog:'
-        version: 4.1.0
-      hast:
-        specifier: 'catalog:'
-        version: 1.0.0
-      hast-util-to-mdast:
-        specifier: 'catalog:'
-        version: 10.1.2
-      lodash-es:
-        specifier: 4.18.1
-        version: 4.18.1
-      lucide-react:
-        specifier: 'catalog:'
-        version: 0.469.0(react@19.2.8)
-      mdast:
-        specifier: 'catalog:'
-        version: 3.0.0
-      react:
-        specifier: 19.2.8
-        version: 19.2.8
-      rehype-parse:
-        specifier: 'catalog:'
-        version: 9.0.1
-      rehype-remark:
-        specifier: 'catalog:'
-        version: 10.0.1
-      remark-gfm:
-        specifier: 'catalog:'
-        version: 4.0.1
-      remark-stringify:
-        specifier: 'catalog:'
-        version: 11.0.0
-      sanitize-html:
-        specifier: 'catalog:'
-        version: 2.17.7
-      tailwind-merge:
-        specifier: 'catalog:'
-        version: 3.4.0
-      unified:
-        specifier: 'catalog:'
-        version: 11.0.5
-      uuid:
-        specifier: 14.0.0
-        version: 14.0.0
-    devDependencies:
-      '@plane/typescript-config':
-        specifier: workspace:*
-        version: link:../typescript-config
-      '@types/chroma-js':
-        specifier: 'catalog:'
-        version: 3.1.2
-      '@types/hast':
-        specifier: 'catalog:'
-        version: 3.0.4
+        version: 3.0.4
       '@types/lodash-es':
         specifier: 'catalog:'
         version: 4.17.12
@@ -1981,9 +1800,6 @@ importers:
 
 packages:
 
-  '@adobe/css-tools@4.4.4':
-    resolution: {integrity: sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==}
-
   '@alloc/quick-lru@5.2.0':
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
@@ -2238,12 +2054,6 @@ packages:
   '@bprogress/core@1.3.4':
     resolution: {integrity: sha512-q/AqpurI/1uJzOrQROuZWixn/+ARekh+uvJGwLCP6HQ/EqAX4SkvNf618tSBxL4NysC0MwqAppb/mRw6Tzi61w==}
 
-  '@chromatic-com/storybook@5.2.1':
-    resolution: {integrity: sha512-z6I7NJk/0VngA64y5TNYaB4Hc2X8+90n4op6lBt9PvWk5TmIlFLDqdX33rlrwbNRkkYijVgA/wO04rVYXi5Mlg==}
-    engines: {node: '>=20.0.0', yarn: '>=1.22.18'}
-    peerDependencies:
-      storybook: ^0.0.0-0 || ^10.1.0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0 || ^10.4.0-0 || ^10.5.0-0 || ^10.6.0-0
-
   '@colors/colors@1.6.0':
     resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==}
     engines: {node: '>=0.1.90'}
@@ -2329,18 +2139,12 @@ packages:
   '@emnapi/core@1.10.0':
     resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==}
 
-  '@emnapi/core@1.9.2':
-    resolution: {integrity: sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==}
-
   '@emnapi/runtime@1.10.0':
     resolution: {integrity: sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==}
 
   '@emnapi/runtime@1.11.3':
     resolution: {integrity: sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==}
 
-  '@emnapi/runtime@1.9.2':
-    resolution: {integrity: sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==}
-
   '@emnapi/wasi-threads@1.2.1':
     resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
 
@@ -2530,14 +2334,6 @@ packages:
     resolution: {integrity: sha512-+CNAzxglkrpNf/kKywqQfk74QjtceuOE7Qm+AF8miRvPF/wmmK5+OJOgVh3AVTT3RP2mH3+FOaxlE5v72owk0A==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
-  '@figspec/components@2.1.0':
-    resolution: {integrity: sha512-PFKBX2oFz+vhThKTNsu7Mh4ZT3X7YCiM694UkAMT36j/p0tdmXs9Je0Sf88stTEcMgwYvNv9TZtvniYmgaE+bw==}
-
-  '@figspec/react@2.0.1':
-    resolution: {integrity: sha512-xflqJ3XQZVzm8+7dsm8OFxVAmBNNA3Mg65sqwNHiq7VRSMSD7qwH4BPsBy07ZaX+9nHeaacBpFZd3Q0aIsISqw==}
-    peerDependencies:
-      react: 19.2.8
-
   '@floating-ui/core@1.8.0':
     resolution: {integrity: sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==}
 
@@ -2842,19 +2638,6 @@ packages:
   '@ioredis/commands@1.3.0':
     resolution: {integrity: sha512-M/T6Zewn7sDaBQEqIZ8Rb+i9y8qfGmq+5SDFSf9sA2lUZTmdDLVdOiQaeDp+Q4wElZ9HG1GAX5KhDaidp6LQsQ==}
 
-  '@isaacs/cliui@9.0.0':
-    resolution: {integrity: sha512-AokJm4tuBHillT+FpMtxQ60n8ObyXBatq7jD2/JA9dxbDDokKQm8KMht5ibGzLVU9IJDIKK4TPKgMHEYMn3lMg==}
-    engines: {node: '>=18'}
-
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0':
-    resolution: {integrity: sha512-qvsTEwEFefhdirGOPnu9Wp6ChfIwy2dBCRuETU3uE+4cC+PFoxMSiiEhxk4lOluA34eARHA0OxqsEUYDqRMgeQ==}
-    peerDependencies:
-      typescript: 5.8.3
-      vite: 8.0.16
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
@@ -2877,14 +2660,6 @@ packages:
   '@lifeomic/attempt@3.1.0':
     resolution: {integrity: sha512-QZqem4QuAnAyzfz+Gj5/+SLxqwCAw2qmt7732ZXodr6VDWGeYLG6w1i/vYLa55JQM9wRuBKLmXmiZ2P0LtE5rw==}
 
-  '@lit-labs/react@2.1.3':
-    resolution: {integrity: sha512-OD9h2JynerBQUMNzb563jiVpxfvPF0HjQkKY2mx0lpVYvD7F+rtJpOGz6ek+6ufMidV3i+MPT9SX62OKWHFrQg==}
-
-  '@lit/react@1.0.8':
-    resolution: {integrity: sha512-p2+YcF+JE67SRX3mMlJ1TKCSTsgyOVdAwd/nxp3NuV1+Cb6MWALbN6nT7Ld4tpmYofcE5kcaSY1YBB9erY+6fw==}
-    peerDependencies:
-      '@types/react': 19.2.17
-
   '@makeplane/propel@0.3.0':
     resolution: {integrity: sha512-nGhiE42vLQVvv7NZOcQYKARJiTXyKDSSTcHOzPdtFpa+WkSz9B91jw6i+3Ikz5cpkv/aEKjOTJF+cByw2zv5ZQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2893,12 +2668,6 @@ packages:
       react-dom: 19.2.8
       tailwindcss: ^4.0.0
 
-  '@mdx-js/react@3.1.0':
-    resolution: {integrity: sha512-QjHtSaoameoalGnKDT3FoIl4+9RwyTmo9ZJGBdLOks/YOiWHoRDI3PUwEzOE7kEmGcV3AFcp9K6dYu9rEuKLAQ==}
-    peerDependencies:
-      '@types/react': 19.2.17
-      react: 19.2.8
-
   '@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.4':
     resolution: {integrity: sha512-LCkGo6JDfaBhgST7UpPWgNgLINpcpabaHfyz5OBx75nUYxBsaEPxjnyNjWpeb/xBup/682QnBfRBy2/LvPutZQ==}
     cpu: [arm64]
@@ -3004,9 +2773,6 @@ packages:
       '@emnapi/core': ^1.7.1
       '@emnapi/runtime': ^1.7.1
 
-  '@neoconfetti/react@1.0.0':
-    resolution: {integrity: sha512-klcSooChXXOzIm+SE5IISIAn3bYzYfPjbX7D7HoqZL84oAfgREeSg5vSIaSFH+DaGzzvImTyWe1OyrJ67vik4A==}
-
   '@noble/ciphers@1.3.0':
     resolution: {integrity: sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==}
     engines: {node: ^14.21.3 || >=16}
@@ -3063,97 +2829,48 @@ packages:
     resolution: {integrity: sha512-/UhIkaZgPutTFmQ7RnIJGgDXZmtEJ7Dvi86xNTFWcnRxVRNk/aotsqDJYeEvDP+FSMB2SdW+pQzNMcWP0rwuNA==}
     engines: {node: '>=14'}
 
-  '@oxc-parser/binding-android-arm-eabi@0.127.0':
-    resolution: {integrity: sha512-0LC7ye4hvqbIKxAzThzvswgHLFu2AURKzYLeSVvLdu2TBOYWQDmHnTqPLeA597BcUCxiLqLsS4CJ5uoI5WYWCQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [android]
-
   '@oxc-parser/binding-android-arm-eabi@0.132.0':
     resolution: {integrity: sha512-KrLaPWa5c9Y7LkW+rKkaUE3y7DBDrQtaf7rlsSDfv6KAHUjgzAIRA761Lrrp6//Yd/Rlie/yEOt9YENCoJnOcw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [android]
 
-  '@oxc-parser/binding-android-arm64@0.127.0':
-    resolution: {integrity: sha512-b5jtVTH6AU5CJXHNdj7Jj9IEiR9yVjjnwHzPJhGyHGPdcsZSzBCkS9GBbV33niRMvKthDwQRFRJfI4a+k4PvYg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [android]
-
   '@oxc-parser/binding-android-arm64@0.132.0':
     resolution: {integrity: sha512-SThDrSeamB/kG2+NxcJ5/wSLcV6dUqDknrPLqFYQ0ST/55mtBP4M7Q/f3QbubH6aAd11wpzZn/nwbVRSdobOpg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@oxc-parser/binding-darwin-arm64@0.127.0':
-    resolution: {integrity: sha512-obCE8B7ISKkJidjlhv9xRGJPOSDG2Yu6PRga9Ruaz35uintHxbp1Ki/Yc71wx4rj3Edrm0a1kzG1TAwit0wFpg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [darwin]
-
   '@oxc-parser/binding-darwin-arm64@0.132.0':
     resolution: {integrity: sha512-Lc0f/TYoKBghE5/2Gsv7bLXk+TJZunx2Tf61X8hG4ARXdc8UYI26dCGccFSd1AyFbK3jfaNXtMnupggDbjPXdQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@oxc-parser/binding-darwin-x64@0.127.0':
-    resolution: {integrity: sha512-JL6Xb5IwPQT8rUzlpsX7E+AgfcdNklXNPFp8pjCQQ5MQOQo5rtEB2ui+3Hgg9Sn7Y9Egj6YOLLiHhLpdAe12Aw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [darwin]
-
   '@oxc-parser/binding-darwin-x64@0.132.0':
     resolution: {integrity: sha512-RG2eJIpf7C21z9HSSXFw1bTArdpKe7Y4fwcJTwRq1yCSe1vSavaN9GA1sm9KqzemTLAGVktQ+7qBTGp0vQeUZg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@oxc-parser/binding-freebsd-x64@0.127.0':
-    resolution: {integrity: sha512-SDQ/3MQFw58fqQz3Z1PhSKFF3JoCF4gmlNjziDm8X02tTahCw0qJbd7FGPDKw1i4VTBZene9JPyC3mHtSvi+wA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [freebsd]
-
   '@oxc-parser/binding-freebsd-x64@0.132.0':
     resolution: {integrity: sha512-wQIPntPLtJ8NcBpvKPbEv3NqzV6k8eP8tP/jE9Rg8HTg/j7urZGFSsTCPCW5k77Qfw2DM4vRvc9p3I4yq/Shvw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@oxc-parser/binding-linux-arm-gnueabihf@0.127.0':
-    resolution: {integrity: sha512-Av+D1MIqzV0YMGPT9we2SIZaMKD7Cxs4CvXSx/yxaWHewZjYEjScpOf5igc8IILASViw4WTnjlwUdI1KzVtDHQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
   '@oxc-parser/binding-linux-arm-gnueabihf@0.132.0':
     resolution: {integrity: sha512-PixKEpeSe3yxQWqNyOCBALRYc72+Tj7ILDofUl3iXo25cVOzLA6jHUhmOINRtWIPh7dbUie3QNeabwaQpZTw6w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxc-parser/binding-linux-arm-musleabihf@0.127.0':
-    resolution: {integrity: sha512-Cs2fdJ8cPpFdeebj6p4dag8A4+56hPvZ0AhQQzlaLswGz1tz7bXt1nETLeorrM9+AMcWFFkqxcXwDGfTVidY8g==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
   '@oxc-parser/binding-linux-arm-musleabihf@0.132.0':
     resolution: {integrity: sha512-sCR+DzGHlyHKnbA2z9zWjTUhIo8Sy0enJl4RDsBwPmkxYynPatpwOAWe8W5127SlW0boqUWHGtr1NWn5UwIhXQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxc-parser/binding-linux-arm64-gnu@0.127.0':
-    resolution: {integrity: sha512-qdOfTcT6SY8gsJrrV92uyEUyjqMGPpIB5JZUG6QN5dukYd+7/j0kX6MwK1DgQj39jtUYixxPiaRUiEN1+0CXgQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
   '@oxc-parser/binding-linux-arm64-gnu@0.132.0':
     resolution: {integrity: sha512-sQBix5P2cW+IpzTcCwYxnh9yALrKSIkKJThspBvMGcygSMnbzkSvhN7SfuX1hvBk8y1XEChsdkU3ET0V5DmzUw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -3161,13 +2878,6 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@oxc-parser/binding-linux-arm64-musl@0.127.0':
-    resolution: {integrity: sha512-EoTCZneNFU/P2qrpEM+RHmQwt+CvDkyGESG6qhr7KaegXLZwePfbrkCDfAk8/rhxbDUVGsZILX+2tqPzFtoFWA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
   '@oxc-parser/binding-linux-arm64-musl@0.132.0':
     resolution: {integrity: sha512-WozHg3Kc//8Sk756HXXgMbEAvqtG+Lzb9JOojwQzIGDtN78Az2dLttkb71akWYUF/8IgYfDSlfKh4Uot8is5Vw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -3175,13 +2885,6 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@oxc-parser/binding-linux-ppc64-gnu@0.127.0':
-    resolution: {integrity: sha512-zALjmZYgxFLHjXeudcDF0xFGNydTAtkAeXAr2EuC17ywCyFxcmQra4w0BMde0Yi/re4Bi4iwEoEXtYN7l6eBLQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ppc64]
-    os: [linux]
-    libc: [glibc]
-
   '@oxc-parser/binding-linux-ppc64-gnu@0.132.0':
     resolution: {integrity: sha512-CmX/ulNBOEwWTyVRmcpYKAcAizW6+OjtLJgo7fXoL9OqQvjF4VER8tPomv44vwzfSCy1BHbsB0ZlZYzYJNj4cA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -3189,13 +2892,6 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@oxc-parser/binding-linux-riscv64-gnu@0.127.0':
-    resolution: {integrity: sha512-fPP8M6zQLS7Jz7o9d5ArUSuAuSK3e+WCYVrCpdzeCOejidtZExJ9tjhDrAd3HEPqARBCPmdpqxESPFqy44vkBQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [glibc]
-
   '@oxc-parser/binding-linux-riscv64-gnu@0.132.0':
     resolution: {integrity: sha512-j9oQS+hM90SdhviNGWbPgT4+Rlq+ac++q/zjgwPD1mVHgxHzATvoRGtDx0sXGmFOQ9J9YkwAhYGb5MAHL6TAsA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -3203,13 +2899,6 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@oxc-parser/binding-linux-riscv64-musl@0.127.0':
-    resolution: {integrity: sha512-7IcC4Ao02oGpfnjt+X/oF4U2mllo2qoSkw5xxiXNKL9MCTsTiAC6616beOuehdxGcnz1bRoPC1RQ2f1GQDdN+g==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [musl]
-
   '@oxc-parser/binding-linux-riscv64-musl@0.132.0':
     resolution: {integrity: sha512-bLz+Xi+Agnfmd7kWPEsSVwCn2k4EyIalZkNBcQ0OGIv9rqn8VgCPLNd03tM9mKX/5TdlvDXalz0q71BIrOPNqg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -3217,13 +2906,6 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@oxc-parser/binding-linux-s390x-gnu@0.127.0':
-    resolution: {integrity: sha512-pbXIhiNFHoqWeqDNLiJ9JkpHz1IM9k4DXa66x+1GTWMG7iLxtkXgE53iiuKSXwmk3zIYmaPVfBvgcAhS583K4Q==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [s390x]
-    os: [linux]
-    libc: [glibc]
-
   '@oxc-parser/binding-linux-s390x-gnu@0.132.0':
     resolution: {integrity: sha512-U6t2qbJU0ypTfyj9QV3W1Y6mITDTL8ai/OR6NUn85vyHthOvobKWgXzU4tu0EskSzlpuVFz1g0jFGulDIUKHxQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -3231,13 +2913,6 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@oxc-parser/binding-linux-x64-gnu@0.127.0':
-    resolution: {integrity: sha512-MYCguB9RvBvlSd6gbuNI7QwiLoCCAlGnlRJFPrzLI6U1/9wkC/WK6LtBAUln55H1Ctqw45PWmqrobKoMhsYQzQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
   '@oxc-parser/binding-linux-x64-gnu@0.132.0':
     resolution: {integrity: sha512-WcEaSNHFk8yz5YFlQQAlhq6jOFmZBB/RKE7uzhyCIf+pF1Lmv9gUH4221mle2Gd9iHyWT3ySNph8yZgb1xYdWg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -3245,13 +2920,6 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@oxc-parser/binding-linux-x64-musl@0.127.0':
-    resolution: {integrity: sha512-5eY0B/bxf1xIUxb4NOTvOI3KWtBQfPWYyKAzgcrCt0mDibSZygVpO1Pz8bkeiSZ5Jj9+M09dkggG3H8I5d0Uyg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
   '@oxc-parser/binding-linux-x64-musl@0.132.0':
     resolution: {integrity: sha512-iQrV4iJzQgRwK3BWRmQl1C3C6g3wYpXN2WLdQdyR+efoUnncdShZAVp9OgcojtlD3MDRbuOMGG3SjxF4fL4nlQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -3259,67 +2927,35 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@oxc-parser/binding-openharmony-arm64@0.127.0':
-    resolution: {integrity: sha512-Gld0ajrFTUXNtdw20fVBuTQx66FA75nIVg+//pPfR3sXkuABB4mTBhl3r9JNzrJpgW//qiwxf0nWXUWGJSL3UQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [openharmony]
-
   '@oxc-parser/binding-openharmony-arm64@0.132.0':
     resolution: {integrity: sha512-FWzmUGrZ6GUby4U7WIwcCtab6tdmlTO3xTRRKyb5kjIJVEiaUAT8animUG/nK8ZCA8gkRkPOTId4rl6uTqUmJQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@oxc-parser/binding-wasm32-wasi@0.127.0':
-    resolution: {integrity: sha512-T6KVD7rhLzFlwGRXMnxUFfkCZD8FHnb968wVXW1mXzgRFc5RNXOBY2mPPDZ77x5Ln76ltLMgtPg0cOkU1NSrEQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [wasm32]
-
   '@oxc-parser/binding-wasm32-wasi@0.132.0':
     resolution: {integrity: sha512-TlbMppxJI5CjWDes0QaP6G3aneVg1yikBu5QYI+DUShF9WDL66ccgKFNNGmi/Wybtszw6hxwAvv76T4DaPKnHw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [wasm32]
 
-  '@oxc-parser/binding-win32-arm64-msvc@0.127.0':
-    resolution: {integrity: sha512-Ujvw4X+LD1CCGULcsQcvb4YNVoBGqt+JHgNNzGGaCImELiZLk477ifUH53gIbE7EKd933NdTi25JWEr9K2HwXw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [win32]
-
   '@oxc-parser/binding-win32-arm64-msvc@0.132.0':
     resolution: {integrity: sha512-RH/NbFjGKqdUAUi7Oh3LQPxUk2hsWFEEQ38HSnbRQT8QjBZFKqL1fMbmsB3N4jy/KPh9iX94+9dmkEMBBbambw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@oxc-parser/binding-win32-ia32-msvc@0.127.0':
-    resolution: {integrity: sha512-0cwxKO7KHQQQfo4Uf4B2SQrhgm+cJaP9OvFFhx52Tkg4bezsacu83GB2/In5bC415Ueeym+kXdnge/57rbSfTw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ia32]
-    os: [win32]
-
   '@oxc-parser/binding-win32-ia32-msvc@0.132.0':
     resolution: {integrity: sha512-JUr4jQY9jxoIB/YTLXr6XofSi5xikj6p5/Ns1h0VOBDT0j1jKU+kMsv2xxv51RwnETcXpA1Yw/9oUAfcqfaqEA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ia32]
     os: [win32]
 
-  '@oxc-parser/binding-win32-x64-msvc@0.127.0':
-    resolution: {integrity: sha512-rOrnSQSCbhI2kowr9XxE7m9a8oQXnBHjnS6j95LxxAnEZ0+Fz20WlRXG4ondQb+ejjt2KOsa65sE6++L6kUd+w==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [win32]
-
   '@oxc-parser/binding-win32-x64-msvc@0.132.0':
     resolution: {integrity: sha512-2dapgHpA5X8DSXF4AU36hJWYf6zP0tKjMXFRAZFBD62pkevW/uhFDXoFH9Y/3Fd2EtDrw5ByNnR1wVE9X9y0SQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
 
-  '@oxc-project/types@0.127.0':
-    resolution: {integrity: sha512-aIYXQBo4lCbO4z0R3FHeucQHpF46l2LbMdxRvqvuRuW2OxdnSkcng5B8+K12spgLDj93rtN3+J2Vac/TIO+ciQ==}
-
   '@oxc-project/types@0.132.0':
     resolution: {integrity: sha512-FESMOxil5Se014ui/Eq8fT5uHJo6nIRwH0PfJrZJXs6Gek3ZVFOrpUv3YIZT20m+extU98Hg1Ym72U58rlsxUQ==}
 
@@ -4372,15 +4008,6 @@ packages:
   '@rolldown/pluginutils@1.0.1':
     resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
 
-  '@rollup/pluginutils@5.2.0':
-    resolution: {integrity: sha512-qWJ2ZTbmumwiLFomfzTyt5Kng4hwPi9rwCYN4SHb6eaRU1KNO4ccxINHr/VhH4GgPlt1XfSTLX2LBTme8ne4Zw==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: 4.59.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-
   '@sentry-internal/server-utils@10.56.0':
     resolution: {integrity: sha512-6kuZI/vAjyVKMm1cTzc2pdUmVR4Px4etMG6wnCPyFnwEaGbUKQnTynUBFpTuo/q6Js6QBQvhLNoAnO4YsOfW4w==}
     engines: {node: '>=18'}
@@ -4429,269 +4056,23 @@ packages:
   '@standard-schema/spec@1.1.0':
     resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
-  '@storybook/addon-designs@11.1.3':
-    resolution: {integrity: sha512-AK+ij478Y6S16TCNPwm7H90OipVe2wZApOlHjC6qDvMW61zyd4yP1icrRtjehSadw5SCoz8HcAmIYfQCOY6E4A==}
-    peerDependencies:
-      '@storybook/addon-docs': ^10.0.0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0
-      react: 19.2.8
-      react-dom: 19.2.8
-      storybook: ^10.0.0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0
-    peerDependenciesMeta:
-      '@storybook/addon-docs':
-        optional: true
-      react:
-        optional: true
-      react-dom:
-        optional: true
+  '@swc/helpers@0.5.17':
+    resolution: {integrity: sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==}
 
-  '@storybook/addon-docs@10.4.6':
-    resolution: {integrity: sha512-aWAfP5JMiT5a3zBJizwroCRzOCqZwDTJmvsYvwMD3ilIEa/kT1vhf6Xrbk4XIPhDwbh8Hpb/Gfnka1xBYEISWg==}
-    peerDependencies:
-      '@types/react': 19.2.17
-      storybook: ^10.4.6
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  '@tailwindcss/node@4.1.17':
+    resolution: {integrity: sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg==}
 
-  '@storybook/addon-links@10.4.6':
-    resolution: {integrity: sha512-VGfERTsGRFmfvNP3SKprFWkC6Od5kXzSutT5PSZjQ/O9NnCdHhd/RILxFDN2TzZn9ywDc7t5b4AldKmSYCv3EQ==}
-    peerDependencies:
-      '@types/react': 19.2.17
-      react: 19.2.8
-      storybook: ^10.4.6
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      react:
-        optional: true
+  '@tailwindcss/oxide-android-arm64@4.1.17':
+    resolution: {integrity: sha512-BMqpkJHgOZ5z78qqiGE6ZIRExyaHyuxjgrJ6eBO5+hfrfGkuya0lYfw8fRHG77gdTjWkNWEEm+qeG2cDMxArLQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
 
-  '@storybook/addon-onboarding@10.4.6':
-    resolution: {integrity: sha512-BzTu5LW5Ygwv0BbmQM0QohGS5Uoa8GjSxPcZFCQ1iQfizUukKnd72UIsPDZBKjVytO0DbZ3YoM1Ww5+KL6ZXEg==}
-    peerDependencies:
-      storybook: ^10.4.6
-
-  '@storybook/addon-styling-webpack@3.0.2':
-    resolution: {integrity: sha512-u7d5ur+It6XWSwd5yxHN6dTzIfj23as3zHJBf1IfDvi/GWmsW7zrmfsWpRIyBkIhBmdL+oSsTtLLTjuC9HeL8Q==}
-    peerDependencies:
-      storybook: ^10.0.0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0 || ^10.4.0-0
-      webpack: 5.104.1
-
-  '@storybook/addon-webpack5-compiler-swc@4.0.3':
-    resolution: {integrity: sha512-REJZBArIBcqzxmhQY9R1br9hjfcFYdl4FeWD/okx1eRwPZkl49aUhTYqZPrA+MWXfKJkuuNQ5vnfSoR0c9HyvA==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      storybook: ^9.0.0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0 || ^10.4.0-0
-
-  '@storybook/builder-vite@10.4.6':
-    resolution: {integrity: sha512-BHBtD81HiXUiDQz/CaFynLtWmm7AFUQn8VnXuHipZ8KlnUANopa4yqdVuy/Gwz8ub254uFI5NMZsW/KlgWNgNg==}
-    peerDependencies:
-      storybook: ^10.4.6
-      vite: 8.0.16
-
-  '@storybook/builder-webpack5@10.4.6':
-    resolution: {integrity: sha512-klJUCBlkr1mFqXxsyYc7akIBhT5VOBTRcHChSFXq6Kbh+qQYOvfmgBpY0Tv+f7ffBmzp6gxpTorg7eGxlklxeQ==}
-    peerDependencies:
-      storybook: ^10.4.6
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@storybook/core-webpack@10.4.6':
-    resolution: {integrity: sha512-DDhpgaFGb1AC0lzfR2LOozCj+uT14tsr2R9551PHgcC3ru1yfhL2DNbIjdiMuQP8nVm+2HKeXWhybJGYtk9z9g==}
-    peerDependencies:
-      storybook: ^10.4.6
-
-  '@storybook/csf-plugin@10.4.6':
-    resolution: {integrity: sha512-NILLxDqpA/JR/AazGWpsz+4fadJwRU4uhHephGtYpVOWnQA/DkJfKT6zpcJVq8+QA8A2zKMLX3GVKsXIrxjuDA==}
-    peerDependencies:
-      esbuild: 0.28.1
-      rollup: 4.59.0
-      storybook: ^10.4.6
-      vite: 8.0.16
-      webpack: 5.104.1
-    peerDependenciesMeta:
-      esbuild:
-        optional: true
-      rollup:
-        optional: true
-      vite:
-        optional: true
-      webpack:
-        optional: true
-
-  '@storybook/global@5.0.0':
-    resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==}
-
-  '@storybook/icons@2.0.2':
-    resolution: {integrity: sha512-KZBCpXsshAIjczYNXR/rlxEtCUX/eAbpFNwKi8bcOomrLA4t/SyPz5RF+lVPO2oZBUE4sAkt43mfJUevQDSEEw==}
-    peerDependencies:
-      react: 19.2.8
-      react-dom: 19.2.8
-
-  '@storybook/preset-react-webpack@10.4.6':
-    resolution: {integrity: sha512-D6EjK1sknC/1GmdWQjV38HEP+tBxJ5ObNuCUWQzGsJqsiq45HaOemZbIyJqxp3dYx2/YpFd0bawn7PlOP4yNOQ==}
-    peerDependencies:
-      react: 19.2.8
-      react-dom: 19.2.8
-      storybook: ^10.4.6
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@storybook/react-docgen-typescript-plugin@1.0.6--canary.9.0c3f3b7.0':
-    resolution: {integrity: sha512-KUqXC3oa9JuQ0kZJLBhVdS4lOneKTOopnNBK4tUAgoxWQ3u/IjzdueZjFr7gyBrXMoU6duutk3RQR9u8ZpYJ4Q==}
-    peerDependencies:
-      typescript: 5.8.3
-      webpack: 5.104.1
-
-  '@storybook/react-dom-shim@10.4.6':
-    resolution: {integrity: sha512-iGNmKzrq9vgl2PDrYAnZKI+yvac3Ym+lJXXuQaqlFRS23zA5MNm4EBX+rAG7WulqchoK6NaZ0KQOs2mAgEpTMg==}
-    peerDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3
-      react: 19.2.8
-      react-dom: 19.2.8
-      storybook: ^10.4.6
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@storybook/react-vite@10.4.6':
-    resolution: {integrity: sha512-0arEQtybqGYXHbXpTot+Wv9YtG+V5Vp43QayXavPKQ20M8mpEzhyCPKd0EhqMGSC1Z1UEt0hm365WUBhI9LfKA==}
-    peerDependencies:
-      react: 19.2.8
-      react-dom: 19.2.8
-      storybook: ^10.4.6
-      vite: 8.0.16
-
-  '@storybook/react-webpack5@10.4.6':
-    resolution: {integrity: sha512-34rOHFRa4NrBnMKsQMq8QTvw65QQJUtasYfEOw1/Pa9+CFWfFQZ3kfDLRxatphUyc0rbKxmVrVE4SFEMY/eMsA==}
-    peerDependencies:
-      react: 19.2.8
-      react-dom: 19.2.8
-      storybook: ^10.4.6
-      typescript: 5.8.3
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@storybook/react@10.4.6':
-    resolution: {integrity: sha512-9Y7YecrVFe1/01KYjfOLxVqTg2Aq+IO6TEv6sC2U0PfD0AWCSCmQ91QqgBpN/XW4aFFWoiZNinyXMUlU8zxy2w==}
-    peerDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3
-      react: 19.2.8
-      react-dom: 19.2.8
-      storybook: ^10.4.6
-      typescript: 5.8.3
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-      typescript:
-        optional: true
-
-  '@swc/core-darwin-arm64@1.13.5':
-    resolution: {integrity: sha512-lKNv7SujeXvKn16gvQqUQI5DdyY8v7xcoO3k06/FJbHJS90zEwZdQiMNRiqpYw/orU543tPaWgz7cIYWhbopiQ==}
-    engines: {node: '>=10'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@swc/core-darwin-x64@1.13.5':
-    resolution: {integrity: sha512-ILd38Fg/w23vHb0yVjlWvQBoE37ZJTdlLHa8LRCFDdX4WKfnVBiblsCU9ar4QTMNdeTBEX9iUF4IrbNWhaF1Ng==}
-    engines: {node: '>=10'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@swc/core-linux-arm-gnueabihf@1.13.5':
-    resolution: {integrity: sha512-Q6eS3Pt8GLkXxqz9TAw+AUk9HpVJt8Uzm54MvPsqp2yuGmY0/sNaPPNVqctCX9fu/Nu8eaWUen0si6iEiCsazQ==}
-    engines: {node: '>=10'}
-    cpu: [arm]
-    os: [linux]
-
-  '@swc/core-linux-arm64-gnu@1.13.5':
-    resolution: {integrity: sha512-aNDfeN+9af+y+M2MYfxCzCy/VDq7Z5YIbMqRI739o8Ganz6ST+27kjQFd8Y/57JN/hcnUEa9xqdS3XY7WaVtSw==}
-    engines: {node: '>=10'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
-  '@swc/core-linux-arm64-musl@1.13.5':
-    resolution: {integrity: sha512-9+ZxFN5GJag4CnYnq6apKTnnezpfJhCumyz0504/JbHLo+Ue+ZtJnf3RhyA9W9TINtLE0bC4hKpWi8ZKoETyOQ==}
-    engines: {node: '>=10'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
-  '@swc/core-linux-x64-gnu@1.13.5':
-    resolution: {integrity: sha512-WD530qvHrki8Ywt/PloKUjaRKgstQqNGvmZl54g06kA+hqtSE2FTG9gngXr3UJxYu/cNAjJYiBifm7+w4nbHbA==}
-    engines: {node: '>=10'}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
-  '@swc/core-linux-x64-musl@1.13.5':
-    resolution: {integrity: sha512-Luj8y4OFYx4DHNQTWjdIuKTq2f5k6uSXICqx+FSabnXptaOBAbJHNbHT/06JZh6NRUouaf0mYXN0mcsqvkhd7Q==}
-    engines: {node: '>=10'}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
-  '@swc/core-win32-arm64-msvc@1.13.5':
-    resolution: {integrity: sha512-cZ6UpumhF9SDJvv4DA2fo9WIzlNFuKSkZpZmPG1c+4PFSEMy5DFOjBSllCvnqihCabzXzpn6ykCwBmHpy31vQw==}
-    engines: {node: '>=10'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@swc/core-win32-ia32-msvc@1.13.5':
-    resolution: {integrity: sha512-C5Yi/xIikrFUzZcyGj9L3RpKljFvKiDMtyDzPKzlsDrKIw2EYY+bF88gB6oGY5RGmv4DAX8dbnpRAqgFD0FMEw==}
-    engines: {node: '>=10'}
-    cpu: [ia32]
-    os: [win32]
-
-  '@swc/core-win32-x64-msvc@1.13.5':
-    resolution: {integrity: sha512-YrKdMVxbYmlfybCSbRtrilc6UA8GF5aPmGKBdPvjrarvsmf4i7ZHGCEnLtfOMd3Lwbs2WUZq3WdMbozYeLU93Q==}
-    engines: {node: '>=10'}
-    cpu: [x64]
-    os: [win32]
-
-  '@swc/core@1.13.5':
-    resolution: {integrity: sha512-WezcBo8a0Dg2rnR82zhwoR6aRNxeTGfK5QCD6TQ+kg3xx/zNT02s/0o+81h/3zhvFSB24NtqEr8FTw88O5W/JQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@swc/helpers': '>=0.5.17'
-    peerDependenciesMeta:
-      '@swc/helpers':
-        optional: true
-
-  '@swc/counter@0.1.3':
-    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
-
-  '@swc/helpers@0.5.17':
-    resolution: {integrity: sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==}
-
-  '@swc/types@0.1.24':
-    resolution: {integrity: sha512-tjTMh3V4vAORHtdTprLlfoMptu1WfTZG9Rsca6yOKyNYsRr+MUXutKmliB17orgSZk5DpnDxs8GUdd/qwYxOng==}
-
-  '@tailwindcss/node@4.1.17':
-    resolution: {integrity: sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg==}
-
-  '@tailwindcss/oxide-android-arm64@4.1.17':
-    resolution: {integrity: sha512-BMqpkJHgOZ5z78qqiGE6ZIRExyaHyuxjgrJ6eBO5+hfrfGkuya0lYfw8fRHG77gdTjWkNWEEm+qeG2cDMxArLQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [android]
-
-  '@tailwindcss/oxide-darwin-arm64@4.1.17':
-    resolution: {integrity: sha512-EquyumkQweUBNk1zGEU/wfZo2qkp/nQKRZM8bUYO0J+Lums5+wl2CcG1f9BgAjn/u9pJzdYddHWBiFXJTcxmOg==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [darwin]
+  '@tailwindcss/oxide-darwin-arm64@4.1.17':
+    resolution: {integrity: sha512-EquyumkQweUBNk1zGEU/wfZo2qkp/nQKRZM8bUYO0J+Lums5+wl2CcG1f9BgAjn/u9pJzdYddHWBiFXJTcxmOg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
 
   '@tailwindcss/oxide-darwin-x64@4.1.17':
     resolution: {integrity: sha512-gdhEPLzke2Pog8s12oADwYu0IAw04Y2tlmgVzIN0+046ytcgx8uZmCzEg4VcQh+AHKiS7xaL8kGo/QTiNEGRog==}
@@ -4795,20 +4176,6 @@ packages:
   '@tanstack/virtual-core@3.13.12':
     resolution: {integrity: sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==}
 
-  '@testing-library/dom@10.4.0':
-    resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
-    engines: {node: '>=18'}
-
-  '@testing-library/jest-dom@6.9.1':
-    resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==}
-    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
-
-  '@testing-library/user-event@14.6.1':
-    resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==}
-    engines: {node: '>=12', npm: '>=6'}
-    peerDependencies:
-      '@testing-library/dom': '>=7.21.4'
-
   '@tiptap/core@2.26.3':
     resolution: {integrity: sha512-TaOJzu2v5ufsOx+yu94NqXE504zmupVdFCxH1g3hk5fzZ3gT57Lh9R/27OjwM4e6o+Z3DXDl8yfFMHIcR3zUkg==}
     peerDependencies:
@@ -5054,21 +4421,6 @@ packages:
   '@tybys/wasm-util@0.10.1':
     resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
 
-  '@types/aria-query@5.0.4':
-    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
-
-  '@types/babel__core@7.20.5':
-    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
-
-  '@types/babel__generator@7.27.0':
-    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
-
-  '@types/babel__template@7.4.4':
-    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
-
-  '@types/babel__traverse@7.28.0':
-    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
-
   '@types/body-parser@1.19.6':
     resolution: {integrity: sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==}
 
@@ -5120,15 +4472,6 @@ packages:
   '@types/deep-eql@4.0.2':
     resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
 
-  '@types/doctrine@0.0.9':
-    resolution: {integrity: sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==}
-
-  '@types/eslint-scope@3.7.7':
-    resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==}
-
-  '@types/eslint@9.6.1':
-    resolution: {integrity: sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==}
-
   '@types/esrecurse@4.3.1':
     resolution: {integrity: sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==}
 
@@ -5153,9 +4496,6 @@ packages:
   '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
-  '@types/html-minifier-terser@6.1.0':
-    resolution: {integrity: sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==}
-
   '@types/http-errors@2.0.5':
     resolution: {integrity: sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg==}
 
@@ -5192,9 +4532,6 @@ packages:
   '@types/mdurl@2.0.0':
     resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
 
-  '@types/mdx@2.0.13':
-    resolution: {integrity: sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==}
-
   '@types/mime@1.3.5':
     resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==}
 
@@ -5231,15 +4568,9 @@ packages:
     peerDependencies:
       '@types/react': 19.2.17
 
-  '@types/resolve@1.20.6':
-    resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==}
-
   '@types/sanitize-html@2.16.0':
     resolution: {integrity: sha512-l6rX1MUXje5ztPT0cAFtUayXF06DqPhRyfVXareEN5gGCFaP/iwsxIyKODr9XDhfxPpN6vXUFNfo5kZMXCxBtw==}
 
-  '@types/semver@7.7.1':
-    resolution: {integrity: sha512-FmgJfu+MOcQ370SD0ev7EI8TlCAfKYU+B4m5T3yXc1CiRN94g/SZPtsCkk506aUDtlMnFZvasDwHHUcZUEaYuA==}
-
   '@types/send@0.17.5':
     resolution: {integrity: sha512-z6F2D3cOStZvuk2SaP6YrwkNO65iTZcwA2ZkSABegdkAh/lf+Aa/YQndZVfmEXT5vgAp6zv06VQ3ejSVjAny4w==}
 
@@ -5278,9 +4609,6 @@ packages:
       '@vitest/browser':
         optional: true
 
-  '@vitest/expect@3.2.4':
-    resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
-
   '@vitest/expect@4.1.8':
     resolution: {integrity: sha512-h3nDO677RDLEGlBxyQ5CW8RlMThSKSRLUePLOx09gNIWRL40edgA1GCZSZgf1W55MFAG6/Sw14KeaAnqv0NKdQ==}
 
@@ -5295,9 +4623,6 @@ packages:
       vite:
         optional: true
 
-  '@vitest/pretty-format@3.2.4':
-    resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==}
-
   '@vitest/pretty-format@4.1.8':
     resolution: {integrity: sha512-9GasEBxpZ1VYIpqHf/0+YGg121uSNwCKOJqIrTwWP/TB7DmFCiaBpNl3aPZzoLWfWkuqhbH8vJIVobZkvdo2cA==}
 
@@ -5307,72 +4632,12 @@ packages:
   '@vitest/snapshot@4.1.8':
     resolution: {integrity: sha512-acfZboRmAIf05DEKcBQy33VXojFJjtUdLyo7oOmV9kebb2xdU01UknNiPuPZoJZQyO7DF0gZdTGTpeAzET9QPQ==}
 
-  '@vitest/spy@3.2.4':
-    resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
-
   '@vitest/spy@4.1.8':
     resolution: {integrity: sha512-6EevtBp6OZOPF7bmz36HrGMeP3txgVSrgebWxHOafDXGkhIzfXK14f8KF6MuFfgXXUeHxmpD3BQxkV00/3s5mA==}
 
-  '@vitest/utils@3.2.4':
-    resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
-
   '@vitest/utils@4.1.8':
     resolution: {integrity: sha512-uOJamYALNhfJ6iolExyQM40yIQwDqYnkKtQ5VCiSe17E33H0aQ/u+1GlRuz4LZBk6Mm3sg90G9hEbmEt37C1Zg==}
 
-  '@webassemblyjs/ast@1.14.1':
-    resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
-
-  '@webassemblyjs/floating-point-hex-parser@1.13.2':
-    resolution: {integrity: sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==}
-
-  '@webassemblyjs/helper-api-error@1.13.2':
-    resolution: {integrity: sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==}
-
-  '@webassemblyjs/helper-buffer@1.14.1':
-    resolution: {integrity: sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==}
-
-  '@webassemblyjs/helper-numbers@1.13.2':
-    resolution: {integrity: sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==}
-
-  '@webassemblyjs/helper-wasm-bytecode@1.13.2':
-    resolution: {integrity: sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==}
-
-  '@webassemblyjs/helper-wasm-section@1.14.1':
-    resolution: {integrity: sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==}
-
-  '@webassemblyjs/ieee754@1.13.2':
-    resolution: {integrity: sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==}
-
-  '@webassemblyjs/leb128@1.13.2':
-    resolution: {integrity: sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==}
-
-  '@webassemblyjs/utf8@1.13.2':
-    resolution: {integrity: sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==}
-
-  '@webassemblyjs/wasm-edit@1.14.1':
-    resolution: {integrity: sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==}
-
-  '@webassemblyjs/wasm-gen@1.14.1':
-    resolution: {integrity: sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==}
-
-  '@webassemblyjs/wasm-opt@1.14.1':
-    resolution: {integrity: sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==}
-
-  '@webassemblyjs/wasm-parser@1.14.1':
-    resolution: {integrity: sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==}
-
-  '@webassemblyjs/wast-printer@1.14.1':
-    resolution: {integrity: sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==}
-
-  '@webcontainer/env@1.1.1':
-    resolution: {integrity: sha512-6aN99yL695Hi9SuIk1oC88l9o0gmxL1nGWWQ/kNy81HigJ0FoaoTXpytCj6ItzgyCEwA9kF1wixsTuv5cjsgng==}
-
-  '@xtuc/ieee754@1.2.0':
-    resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
-
-  '@xtuc/long@4.2.2':
-    resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
-
   '@zeit/schemas@2.36.0':
     resolution: {integrity: sha512-7kjMwcChYEzMKjeex9ZFXkt1AyNov9R5HZtjBKVsmVpw7pa7ZtlCGvCBC2vnnXctaYN+aRI61HjIqeetZW5ROg==}
 
@@ -5392,12 +4657,6 @@ packages:
     peerDependencies:
       acorn: ^8
 
-  acorn-import-phases@1.0.4:
-    resolution: {integrity: sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==}
-    engines: {node: '>=10.13.0'}
-    peerDependencies:
-      acorn: ^8.14.0
-
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -5416,14 +4675,6 @@ packages:
     resolution: {integrity: sha512-nHlms9BkP8ZiY79HrwCGiA2DcNaXrAaJrCM/BEqQ7MEsSKyCk+2A76xPGylIfASZSZE0SaU3T0bNSg4rBPIJAQ==}
     hasBin: true
 
-  ajv-formats@2.1.1:
-    resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
-    peerDependencies:
-      ajv: 8.18.0
-    peerDependenciesMeta:
-      ajv:
-        optional: true
-
   ajv-formats@3.0.1:
     resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
     peerDependencies:
@@ -5432,16 +4683,6 @@ packages:
       ajv:
         optional: true
 
-  ajv-keywords@3.5.2:
-    resolution: {integrity: sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==}
-    peerDependencies:
-      ajv: 6.14.0
-
-  ajv-keywords@5.1.0:
-    resolution: {integrity: sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==}
-    peerDependencies:
-      ajv: 8.18.0
-
   ajv@6.14.0:
     resolution: {integrity: sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==}
 
@@ -5455,11 +4696,6 @@ packages:
     resolution: {integrity: sha512-GdYO7a61mR0fOlAsvC9/rIHf7L96sBc6dEWzeOu+KAea5bZyQRPIpojrVoI4AXGJS/ycu/fBTdLrUkA4ODrvjw==}
     engines: {node: '>=18'}
 
-  ansi-html-community@0.0.8:
-    resolution: {integrity: sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==}
-    engines: {'0': node >= 0.8.0}
-    hasBin: true
-
   ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
@@ -5476,10 +4712,6 @@ packages:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
 
-  ansi-styles@5.2.0:
-    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
-    engines: {node: '>=10'}
-
   ansi-styles@6.2.3:
     resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
     engines: {node: '>=12'}
@@ -5505,20 +4737,9 @@ packages:
     resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
     engines: {node: '>=10'}
 
-  aria-query@5.3.0:
-    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
-
-  aria-query@5.3.2:
-    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
-    engines: {node: '>= 0.4'}
-
   array-flatten@1.1.1:
     resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
 
-  assertion-error@2.0.1:
-    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
-    engines: {node: '>=12'}
-
   ast-kit@2.2.0:
     resolution: {integrity: sha512-m1Q/RaVOnTp9JxPX+F+Zn7IcLYMzM8kZofDImfsKZd8MbR+ikdOzTeztStWqfrqIxZnYWryyI9ePm3NGjnZgGw==}
     engines: {node: '>=20.19.0'}
@@ -5550,13 +4771,6 @@ packages:
     resolution: {integrity: sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==}
     engines: {node: '>=4'}
 
-  autoprefixer@10.4.21:
-    resolution: {integrity: sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==}
-    engines: {node: ^10 || ^12 || >=14}
-    hasBin: true
-    peerDependencies:
-      postcss: 8.5.25
-
   axios@1.18.1:
     resolution: {integrity: sha512-3nTvFlvpn9Zu/RkHUqtc7/+al4UpRW5az71ap5zccp6e8RAYEzhMTecX8Dz1wWDYrPpUoB1HAQEGEAEvUr7S9g==}
 
@@ -5638,10 +4852,6 @@ packages:
   buffer@6.0.3:
     resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
 
-  bundle-name@4.1.0:
-    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
-    engines: {node: '>=18'}
-
   bytes@3.0.0:
     resolution: {integrity: sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==}
     engines: {node: '>= 0.8'}
@@ -5662,34 +4872,16 @@ packages:
     resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
     engines: {node: '>= 0.4'}
 
-  callsites@3.1.0:
-    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
-    engines: {node: '>=6'}
-
-  camel-case@4.1.2:
-    resolution: {integrity: sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==}
-
   camelcase@7.0.1:
     resolution: {integrity: sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==}
     engines: {node: '>=14.16'}
 
-  caniuse-lite@1.0.30001759:
-    resolution: {integrity: sha512-Pzfx9fOKoKvevQf8oCXoyNRQ5QyxJj+3O0Rqx2V5oxT61KGx8+n6hV/IUyJeifUci2clnmmKVpvtiqRzgiWjSw==}
-
   caniuse-lite@1.0.30001810:
     resolution: {integrity: sha512-TITQPUkaz+aVk5GL6NhOdwk1aEaNTSDPsGFWrTuhKGtjTF70jL/Oht2W4c6rXUe5fu7Ie19VIahAXHIIiWWNeg==}
 
-  case-sensitive-paths-webpack-plugin@2.4.0:
-    resolution: {integrity: sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==}
-    engines: {node: '>=4'}
-
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
 
-  chai@5.3.3:
-    resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
-    engines: {node: '>=18'}
-
   chai@6.2.2:
     resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
     engines: {node: '>=18'}
@@ -5722,10 +4914,6 @@ packages:
   character-reference-invalid@2.0.1:
     resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
 
-  check-error@2.1.1:
-    resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
-    engines: {node: '>= 16'}
-
   chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -5733,38 +4921,12 @@ packages:
   chroma-js@3.2.0:
     resolution: {integrity: sha512-os/OippSlX1RlWWr+QDPcGUZs0uoqr32urfxESG9U93lhUfbnlyckte84Q8P1UQY/qth983AS1JONKmLS4T0nw==}
 
-  chromatic@16.10.0:
-    resolution: {integrity: sha512-nFsztmnu7rFiGafUJgXvLUNpqmRylz92eNvzBoJNTKKQj4EQUyxznwnfpf1dTs7hXtWD8JwcH92jADydaHA1sw==}
-    hasBin: true
-    peerDependencies:
-      '@chromatic-com/cypress': ^0.*.* || ^1.0.0
-      '@chromatic-com/playwright': ^0.*.* || ^1.0.0
-      '@chromatic-com/vitest': ^0.*.* || ^1.0.0
-    peerDependenciesMeta:
-      '@chromatic-com/cypress':
-        optional: true
-      '@chromatic-com/playwright':
-        optional: true
-      '@chromatic-com/vitest':
-        optional: true
-
-  chrome-trace-event@1.0.4:
-    resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
-    engines: {node: '>=6.0'}
-
-  cjs-module-lexer@1.4.3:
-    resolution: {integrity: sha512-9z8TZaGM1pfswYeXrUpzPrkx8UnWYdhJclsiYMm6x/w5+nN+8Tf/LnAgfLGQCm59qAOxU8WwHEq2vNwF6i4j+Q==}
-
   cjs-module-lexer@2.2.0:
     resolution: {integrity: sha512-4bHTS2YuzUvtoLjdy+98ykbNB5jS0+07EvFNXerqZQJ89F7DI6ET7OQo/HJuW6K0aVsKA9hj9/RVb2kQVOrPDQ==}
 
   class-variance-authority@0.7.1:
     resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
 
-  clean-css@5.3.3:
-    resolution: {integrity: sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==}
-    engines: {node: '>= 10.0'}
-
   cli-boxes@3.0.0:
     resolution: {integrity: sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==}
     engines: {node: '>=10'}
@@ -5781,10 +4943,6 @@ packages:
     resolution: {integrity: sha512-Su+uU5sr1jkUy1sGRpLKjKrvEOVXgSgiSInwa/qeID6aJ07yh+5NWc3h2QfjHjBnfX4LhtFcuAWKUsJ3r+fjbg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  cliui@8.0.1:
-    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
-    engines: {node: '>=12'}
-
   clone-deep@4.0.1:
     resolution: {integrity: sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==}
     engines: {node: '>=6'}
@@ -5857,10 +5015,6 @@ packages:
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
-  commander@8.3.0:
-    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
-    engines: {node: '>= 12'}
-
   commondir@1.0.1:
     resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
 
@@ -5923,15 +5077,6 @@ packages:
     resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
     engines: {node: '>= 0.10'}
 
-  cosmiconfig@8.3.6:
-    resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      typescript: 5.8.3
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   create-react-class@15.7.0:
     resolution: {integrity: sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==}
 
@@ -5942,21 +5087,6 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
-  css-loader@7.1.4:
-    resolution: {integrity: sha512-vv3J9tlOl04WjiMvHQI/9tmIrCxVrj6PFbHemBB1iihpeRbi/I4h033eoFIhwxBBqLhI0KYFS7yvynBFhIZfTw==}
-    engines: {node: '>= 18.12.0'}
-    peerDependencies:
-      '@rspack/core': 0.x || ^1.0.0 || ^2.0.0-0
-      webpack: 5.104.1
-    peerDependenciesMeta:
-      '@rspack/core':
-        optional: true
-      webpack:
-        optional: true
-
-  css-select@4.3.0:
-    resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==}
-
   css-select@5.2.2:
     resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==}
 
@@ -5968,9 +5098,6 @@ packages:
     resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
     engines: {node: '>= 6'}
 
-  css.escape@1.5.1:
-    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
-
   cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -6023,9 +5150,6 @@ packages:
     resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
     engines: {node: '>=12'}
 
-  date-fns-jalali@4.1.0-0:
-    resolution: {integrity: sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==}
-
   date-fns@4.1.0:
     resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
 
@@ -6062,9 +5186,6 @@ packages:
   decode-named-character-reference@1.2.0:
     resolution: {integrity: sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==}
 
-  dedent@0.7.0:
-    resolution: {integrity: sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==}
-
   dedent@1.7.2:
     resolution: {integrity: sha512-WzMx3mW98SN+zn3hgemf4OzdmyNhhhKz5Ay0pUfQiMQ3e1g+xmTJWp/pKdwKVXhdSkAEGIIzqeuWrL3mV/AXbA==}
     peerDependencies:
@@ -6073,10 +5194,6 @@ packages:
       babel-plugin-macros:
         optional: true
 
-  deep-eql@5.0.2:
-    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
-    engines: {node: '>=6'}
-
   deep-extend@0.6.0:
     resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
     engines: {node: '>=4.0.0'}
@@ -6088,18 +5205,6 @@ packages:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
 
-  default-browser-id@5.0.1:
-    resolution: {integrity: sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==}
-    engines: {node: '>=18'}
-
-  default-browser@5.5.0:
-    resolution: {integrity: sha512-H9LMLr5zwIbSxrmvikGuI/5KGhZ8E2zH3stkMgM5LpOWDutGM2JZaj460Udnf1a+946zc7YBgrqEWwbk7zHvGw==}
-    engines: {node: '>=18'}
-
-  define-lazy-prop@3.0.0:
-    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
-    engines: {node: '>=12'}
-
   defu@6.1.5:
     resolution: {integrity: sha512-pwdBJxJuJXmqrLO6s0VBmfbRz+G7FUzkjldAsdi9Yrv86mPyzq0ll1o8+8gB4Gsr6GJHbK1Lh3ngllgTInDCjA==}
 
@@ -6119,10 +5224,6 @@ packages:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
     engines: {node: '>= 0.8'}
 
-  dependency-graph@1.0.0:
-    resolution: {integrity: sha512-cW3gggJ28HZ/LExwxP2B++aiKxhJXMSIt9K48FOXQkm+vuG5gyatXnLsONRJdzO/7VfjDIiaOOa/bs4l464Lwg==}
-    engines: {node: '>=4'}
-
   dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
@@ -6154,25 +5255,9 @@ packages:
     resolution: {integrity: sha512-vtcDfH3TOjP8UekytvnHH1o1P4FcUdt4eQ1Y+Abap1tk/OB2MWQvcwS2ClCd1zuIhc3JKOx6p3kod8Vfys3E+A==}
     engines: {node: '>=0.3.1'}
 
-  doctrine@3.0.0:
-    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
-    engines: {node: '>=6.0.0'}
-
-  dom-accessibility-api@0.5.16:
-    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
-
-  dom-accessibility-api@0.6.3:
-    resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
-
-  dom-converter@0.2.0:
-    resolution: {integrity: sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==}
-
   dom-helpers@5.2.1:
     resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
 
-  dom-serializer@1.4.1:
-    resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
-
   dom-serializer@2.0.0:
     resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
 
@@ -6187,10 +5272,6 @@ packages:
     resolution: {integrity: sha512-umCQid3jKbDmVjx8jGaW7uUykm4DEUeyV21hPxNMo2nV955DhUThwqyOIDtreepP31hl84X7G5U9ZfsWvIB3Pg==}
     engines: {node: '>=20.19.0'}
 
-  domhandler@4.3.1:
-    resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==}
-    engines: {node: '>= 4'}
-
   domhandler@5.0.3:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
@@ -6199,9 +5280,6 @@ packages:
     resolution: {integrity: sha512-gYzvtM72ZtxQO0T048kd6HWSbbGCNOUwcnfQ01cqIJ4X2IYKFFHZ5mKvrQETcFXxsRObZulDaKmy//R7TPtsBg==}
     engines: {node: '>=20.19.0'}
 
-  domutils@2.8.0:
-    resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
-
   domutils@3.2.2:
     resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
 
@@ -6209,9 +5287,6 @@ packages:
     resolution: {integrity: sha512-qI4JLRKnSzqFqr7hAlS5xQDusBCjKSEG4t4+7aNrIQMHBcsC2TGEhuyABJdYkgSewL57PNLYEiibY2iPKhKpaA==}
     engines: {node: '>=20.19.0'}
 
-  dot-case@3.0.4:
-    resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==}
-
   dot-prop@10.1.0:
     resolution: {integrity: sha512-MVUtAugQMOff5RnBy2d9N31iG0lNwg1qAoAOn7pOK5wf94WIaE3My2p3uwTQuvS2AcqchkcR3bHByjaM0mmi7Q==}
     engines: {node: '>=20'}
@@ -6293,16 +5368,10 @@ packages:
     resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
     engines: {node: '>= 0.8'}
 
-  endent@2.1.0:
-    resolution: {integrity: sha512-r8VyPX7XL8U01Xgnb1CjZ3XV+z90cXIJ9JPE/R9SEC9vpw2P6CfsRPJmp20DppC5N7ZAMCmjYkJIa744Iyg96w==}
-
   enhanced-resolve@5.18.3:
     resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==}
     engines: {node: '>=10.13.0'}
 
-  entities@2.2.0:
-    resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
-
   entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
@@ -6327,9 +5396,6 @@ packages:
     resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==}
     engines: {node: '>=18'}
 
-  error-ex@1.3.4:
-    resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
-
   es-define-property@1.0.1:
     resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
     engines: {node: '>= 0.4'}
@@ -6338,9 +5404,6 @@ packages:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
-  es-module-lexer@1.7.0:
-    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
-
   es-module-lexer@2.3.1:
     resolution: {integrity: sha512-shc1dbU90Yl/xq1QrC7QRtfcwURZuVRfPhZbDoldJ1cn1gzDvBaBWlv0eFolj5+0znnPJz5TXLxsN77X/12KTA==}
 
@@ -6382,10 +5445,6 @@ packages:
     peerDependencies:
       eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0 || ^10.0.0
 
-  eslint-scope@5.1.1:
-    resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
-    engines: {node: '>=8.0.0'}
-
   eslint-scope@9.1.2:
     resolution: {integrity: sha512-xS90H51cKw0jltxmvmHy2Iai1LIqrfbw57b79w/J7MfvDfkIkFZ+kj6zC3BjtUwh150HsSSdxXZcsuv72miDFQ==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
@@ -6425,10 +5484,6 @@ packages:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
     engines: {node: '>=4.0'}
 
-  estraverse@4.3.0:
-    resolution: {integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==}
-    engines: {node: '>=4.0'}
-
   estraverse@5.3.0:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
@@ -6436,9 +5491,6 @@ packages:
   estree-util-is-identifier-name@3.0.0:
     resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
 
-  estree-walker@2.0.2:
-    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
-
   estree-walker@3.0.3:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
 
@@ -6524,9 +5576,6 @@ packages:
     resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
     engines: {node: '>=8.6.0'}
 
-  fast-json-parse@1.0.3:
-    resolution: {integrity: sha512-FRWsaZRWEJ1ESVNbDWmsAlqDk96gPQezzLghafp5J4GUKjbCz3OkAHuZs5TuPEtkbVQERysLp9xv6c24fBm8Aw==}
-
   fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
@@ -6582,10 +5631,6 @@ packages:
     resolution: {integrity: sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==}
     engines: {node: '>=6'}
 
-  find-cache-dir@3.3.2:
-    resolution: {integrity: sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==}
-    engines: {node: '>=8'}
-
   find-my-way-ts@0.1.6:
     resolution: {integrity: sha512-a85L9ZoXtNAey3Y6Z+eBWW658kO/MwR7zIafkIUPUMf3isZG0NCs2pjW2wtjxAKuJPxMAsHUIP4ZPGv0o5gyTA==}
 
@@ -6593,10 +5638,6 @@ packages:
     resolution: {integrity: sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==}
     engines: {node: '>=6'}
 
-  find-up@4.1.0:
-    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
-    engines: {node: '>=8'}
-
   find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -6607,10 +5648,6 @@ packages:
   flairup@1.0.0:
     resolution: {integrity: sha512-IKlE+pNvL2R+kVL1kEhUYqRxVqeFnjiIvHWDMLFXNaqyUdFXQM2wte44EfMYJNHkW16X991t2Zg8apKkhv7OBA==}
 
-  flat-cache@3.2.0:
-    resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
-    engines: {node: ^10.12.0 || >=12.0.0}
-
   flat-cache@4.0.1:
     resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
     engines: {node: '>=16'}
@@ -6640,17 +5677,6 @@ packages:
   fontkit@2.0.4:
     resolution: {integrity: sha512-syetQadaUEDNdxdugga9CpEYVaQIxOwk7GlwZWWZ19//qW4zE5bknOKeMBDYAASwnpaSHKJITRLMF9m1fp3s6g==}
 
-  foreground-child@3.3.1:
-    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
-    engines: {node: '>=14'}
-
-  fork-ts-checker-webpack-plugin@9.1.0:
-    resolution: {integrity: sha512-mpafl89VFPJmhnJ1ssH+8wmM2b50n+Rew5x42NeI2U78aRWgtkEtGmctp7iT16UjquJTjorEmIfESj3DxdW84Q==}
-    engines: {node: '>=14.21.3'}
-    peerDependencies:
-      typescript: 5.8.3
-      webpack: 5.104.1
-
   form-data@4.0.6:
     resolution: {integrity: sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==}
     engines: {node: '>= 6'}
@@ -6659,9 +5685,6 @@ packages:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
     engines: {node: '>= 0.6'}
 
-  fraction.js@4.3.7:
-    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
-
   framer-motion@12.23.12:
     resolution: {integrity: sha512-6e78rdVtnBvlEVgu6eFEAgG9v3wLnYEboM8I5O5EXvfKC8gxGQB8wXJdhkMy10iVcn05jl6CNw7/HTsTCfwcWg==}
     peerDependencies:
@@ -6693,17 +5716,6 @@ packages:
       typescript:
         optional: true
 
-  fs-extra@10.1.0:
-    resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
-    engines: {node: '>=12'}
-
-  fs-extra@11.3.1:
-    resolution: {integrity: sha512-eXvGGwZ5CL17ZSwHWd3bbgk7UUpF6IFHtP57NYYakPvHOs8GDgDe5KJI36jIJzDkJ6eJjuzRA8eBQb6SkKue0g==}
-    engines: {node: '>=14.14'}
-
-  fs-monkey@1.1.0:
-    resolution: {integrity: sha512-QMUezzXWII9EV5aTFXW1UBVUO77wYPpjqIF8/AviUCThNeSYZykpoTixUeaNNBwmCev0AMDWMAni+f8Hxb1IFw==}
-
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -6716,10 +5728,6 @@ packages:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
 
-  get-caller-file@2.0.5:
-    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
-    engines: {node: 6.* || 8.* || >= 10.*}
-
   get-east-asian-width@1.4.0:
     resolution: {integrity: sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==}
     engines: {node: '>=18'}
@@ -6754,15 +5762,6 @@ packages:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
 
-  glob-to-regexp@0.4.1:
-    resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
-
-  glob@11.1.0:
-    resolution: {integrity: sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==}
-    engines: {node: 20 || >=22}
-    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
-    hasBin: true
-
   globrex@0.1.2:
     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
 
@@ -6869,17 +5868,9 @@ packages:
   hsl-to-rgb-for-reals@1.1.1:
     resolution: {integrity: sha512-LgOWAkrN0rFaQpfdWBQlv/VhkOxb5AsBjk6NQVx4yEzWS923T07X0M1Y0VNko2H52HeSpZrZNNMJ0aFqsdVzQg==}
 
-  html-entities@2.6.0:
-    resolution: {integrity: sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ==}
-
   html-escaper@2.0.2:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
 
-  html-minifier-terser@6.1.0:
-    resolution: {integrity: sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==}
-    engines: {node: '>=12'}
-    hasBin: true
-
   html-parse-stringify@3.0.1:
     resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==}
 
@@ -6889,25 +5880,10 @@ packages:
   html-void-elements@3.0.0:
     resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
 
-  html-webpack-plugin@5.6.4:
-    resolution: {integrity: sha512-V/PZeWsqhfpE27nKeX9EO2sbR+D17A+tLf6qU+ht66jdUsN0QLKJN27Z+1+gHrVMKgndBahes0PU6rRihDgHTw==}
-    engines: {node: '>=10.13.0'}
-    peerDependencies:
-      '@rspack/core': 0.x || 1.x
-      webpack: 5.104.1
-    peerDependenciesMeta:
-      '@rspack/core':
-        optional: true
-      webpack:
-        optional: true
-
   htmlparser2@12.0.0:
     resolution: {integrity: sha512-Tz7u1i95/g2x2jz81+x0FBVhBhY5aRTvD3tXXdFaljuNdzDLJ8UGNRrTcj2cgQvAg3iW/h77Fz15nLW0L0CrZw==}
     engines: {node: '>=20.19.0'}
 
-  htmlparser2@6.1.0:
-    resolution: {integrity: sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==}
-
   htmlparser2@8.0.2:
     resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
 
@@ -6955,12 +5931,6 @@ packages:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
 
-  icss-utils@5.1.0:
-    resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
-    engines: {node: ^10 || ^12 || >= 14}
-    peerDependencies:
-      postcss: 8.5.25
-
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
@@ -6971,10 +5941,6 @@ packages:
   imagesloaded@4.1.4:
     resolution: {integrity: sha512-ltiBVcYpc/TYTF5nolkMNsnREHW+ICvfQ3Yla2Sgr71YFwQ86bDwV9hgpFhFtrGPuwEx5+LqOHIrdXBdoWwwsA==}
 
-  import-fresh@3.3.1:
-    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
-    engines: {node: '>=6'}
-
   import-in-the-middle@3.0.1:
     resolution: {integrity: sha512-pYkiyXVL2Mf3pozdlDGV6NAObxQx13Ae8knZk1UJRJ6uRW/ZRmTGHlQYtrsSl7ubuE5F8CD1z+s1n4RHNuTtuA==}
     engines: {node: '>=18'}
@@ -6983,10 +5949,6 @@ packages:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
-  indent-string@4.0.0:
-    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
-    engines: {node: '>=8'}
-
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
@@ -7025,9 +5987,6 @@ packages:
   is-alphanumerical@2.0.1:
     resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
 
-  is-arrayish@0.2.1:
-    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
-
   is-arrayish@0.3.4:
     resolution: {integrity: sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA==}
 
@@ -7035,10 +5994,6 @@ packages:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
 
-  is-core-module@2.16.1:
-    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
-    engines: {node: '>= 0.4'}
-
   is-decimal@2.0.1:
     resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
 
@@ -7047,11 +6002,6 @@ packages:
     engines: {node: '>=8'}
     hasBin: true
 
-  is-docker@3.0.0:
-    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    hasBin: true
-
   is-emoji-supported@0.0.5:
     resolution: {integrity: sha512-WOlXUhDDHxYqcSmFZis+xWhhqXiK2SU0iYiqmth5Ip0FHLZQAt9rKL5ahnilE8/86WH8tZ3bmNNNC+bTzamqlw==}
 
@@ -7074,11 +6024,6 @@ packages:
   is-hexadecimal@2.0.1:
     resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
 
-  is-inside-container@1.0.0:
-    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
-    engines: {node: '>=14.16'}
-    hasBin: true
-
   is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
@@ -7113,10 +6058,6 @@ packages:
     resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
     engines: {node: '>=8'}
 
-  is-wsl@3.1.1:
-    resolution: {integrity: sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==}
-    engines: {node: '>=16'}
-
   isbot@5.2.1:
     resolution: {integrity: sha512-dJ+LpKyClQZ7NG+j3OensC/mAZkGpukE9YUrgPYvAZj2doVL0edfDgywTUh5CXa0o+nW9a1V9e5+CJTX8+SxRw==}
     engines: {node: '>=18'}
@@ -7143,17 +6084,9 @@ packages:
     resolution: {integrity: sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==}
     engines: {node: '>=8'}
 
-  jackspeak@4.2.3:
-    resolution: {integrity: sha512-ykkVRwrYvFm1nb2AJfKKYPr0emF6IiXDYUaFx4Zn9ZuIH7MrzEZ3sD5RlqGXNRpHtvUHJyOnCEFxOlNDtGo7wg==}
-    engines: {node: 20 || >=22}
-
   jay-peg@1.1.1:
     resolution: {integrity: sha512-D62KEuBxz/ip2gQKOEhk/mx14o7eiFRaU+VNNSP4MOiIkwb/D6B3G1Mfas7C/Fit8EsSV2/IWjZElx/Gs6A4ww==}
 
-  jest-worker@27.5.1:
-    resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
-    engines: {node: '>= 10.13.0'}
-
   jiti@2.7.0:
     resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
     hasBin: true
@@ -7164,10 +6097,6 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
-  js-yaml@4.3.1:
-    resolution: {integrity: sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==}
-    hasBin: true
-
   jscodeshift@17.3.0:
     resolution: {integrity: sha512-LjFrGOIORqXBU+jwfC9nbkjmQfFldtMIoS6d9z2LG/lkmyNXsJAySPT+2SWXJEoE68/bCWcxKpXH37npftgmow==}
     engines: {node: '>=16'}
@@ -7186,9 +6115,6 @@ packages:
   json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
-  json-parse-even-better-errors@2.3.1:
-    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
-
   json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
@@ -7209,9 +6135,6 @@ packages:
   jsonc-parser@3.3.1:
     resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==}
 
-  jsonfile@6.2.0:
-    resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
-
   jsx-dom-cjs@8.1.6:
     resolution: {integrity: sha512-aeGqlIZ3IBKF2+B0cKXZGh10OHxxABuHD9tlS10suXDXXG0c4wMkJios9xVslduflSNEQJVlicME3EBCYgxGvA==}
 
@@ -7396,16 +6319,9 @@ packages:
     resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
     engines: {node: '>= 12.0.0'}
 
-  lilconfig@3.1.3:
-    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
-    engines: {node: '>=14'}
-
   linebreak@1.1.0:
     resolution: {integrity: sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==}
 
-  lines-and-columns@1.2.4:
-    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-
   linkify-it@5.0.2:
     resolution: {integrity: sha512-ONTm2jCMAVZjgQa/Fy1kScXsuOoF5NPTsoFBdE1KVIZ2vAh/r9+Bqo+0jINCBYnavTPQZz38QzFTme79ENoN3Q==}
 
@@ -7421,18 +6337,10 @@ packages:
     resolution: {integrity: sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==}
     engines: {node: '>=20.0.0'}
 
-  loader-runner@4.3.1:
-    resolution: {integrity: sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==}
-    engines: {node: '>=6.11.5'}
-
   locate-path@3.0.0:
     resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==}
     engines: {node: '>=6'}
 
-  locate-path@5.0.0:
-    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
-    engines: {node: '>=8'}
-
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -7470,19 +6378,9 @@ packages:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
-  loupe@3.2.1:
-    resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
-
-  lower-case@2.0.2:
-    resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
-
   lowlight@3.3.0:
     resolution: {integrity: sha512-0JNhgFoPvP6U6lE/UdVsSq99tn6DhjjpAj5MxG49ewd2mOBVtwWYIT8ClyABhq198aXXODMU6Ox8DrGy/CpTZQ==}
 
-  lru-cache@11.5.0:
-    resolution: {integrity: sha512-5YgH9UJd7wVb9hIouI2adWpgqrrICkt070Dnj8EUY1+B4B2P9eRLPAkAAo6NICA7CEhOIeBHl46u9zSNpNu7zA==}
-    engines: {node: 20 || >=22}
-
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
@@ -7496,10 +6394,6 @@ packages:
     peerDependencies:
       react: 19.2.8
 
-  lz-string@1.5.0:
-    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
-    hasBin: true
-
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -7510,10 +6404,6 @@ packages:
     resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
     engines: {node: '>=6'}
 
-  make-dir@3.1.0:
-    resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
-    engines: {node: '>=8'}
-
   make-dir@4.0.0:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
     engines: {node: '>=10'}
@@ -7604,10 +6494,6 @@ packages:
     resolution: {integrity: sha512-yz3xRaG20c6/BOzvYoDaGtPmGscs7YivItZEEqe6GbwNfHuxu9YNmvnEkMzKldAGY4/80pRcQRZSEnhquk9XuQ==}
     engines: {node: '>= 0.8'}
 
-  memfs@3.5.3:
-    resolution: {integrity: sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==}
-    engines: {node: '>= 4.0.0'}
-
   merge-descriptors@1.0.3:
     resolution: {integrity: sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==}
 
@@ -7756,10 +6642,6 @@ packages:
     resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
     engines: {node: '>=18'}
 
-  min-indent@1.0.1:
-    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
-    engines: {node: '>=4'}
-
   minimatch@10.2.3:
     resolution: {integrity: sha512-Rwi3pnapEqirPSbWbrZaa6N3nmqq4Xer/2XooiOKyV3q12ML06f7MOuc5DVH8ONZIFhwIYQ3yzPH4nt7iWHaTg==}
     engines: {node: 18 || 20 || >=22}
@@ -7770,10 +6652,6 @@ packages:
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
-  minipass@7.1.2:
-    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
-    engines: {node: '>=16 || 14 >=14.17'}
-
   mobx-react-lite@4.1.1:
     resolution: {integrity: sha512-iUxiMpsvNraCKXU+yPotsOncNNmyeS2B5DKL+TL6Tar/xm+wwNJAubJmtRSeAoYawdZqwv8Z/+5nPRHeQxTiXg==}
     peerDependencies:
@@ -7873,12 +6751,6 @@ packages:
       react: 19.2.8
       react-dom: 19.2.8
 
-  no-case@3.0.4:
-    resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
-
-  node-abort-controller@3.1.1:
-    resolution: {integrity: sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ==}
-
   node-addon-api@7.1.1:
     resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
 
@@ -7897,10 +6769,6 @@ packages:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
 
-  normalize-range@0.1.2:
-    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
-    engines: {node: '>=0.10.0'}
-
   normalize-svg-path@1.1.0:
     resolution: {integrity: sha512-r9KHKG2UUeB5LoTouwDzBy2VxXlHsiM6fyLQvnJa0S5hrhzqElH/CH7TUGhT1fVvIYBIKf3OpY4YJ4CK+iaqHg==}
 
@@ -7919,9 +6787,6 @@ packages:
     resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
 
-  objectorarray@1.0.5:
-    resolution: {integrity: sha512-eJJDYkhJFFbBBAxeh8xW+weHlkI28n2ZdQV/J/DNfWfSKlGEf2xcfAbZTv3riEXHAhL9SVOTs2pRmXiSTf78xg==}
-
   obug@2.1.1:
     resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==}
 
@@ -7947,10 +6812,6 @@ packages:
     resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
     engines: {node: '>=18'}
 
-  open@10.2.0:
-    resolution: {integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==}
-    engines: {node: '>=18'}
-
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
@@ -7961,10 +6822,6 @@ packages:
   outlayer@2.1.1:
     resolution: {integrity: sha512-+GplXsCQ3VrbGujAeHEzP9SXsBmJxzn/YdDSQZL0xqBmAWBmortu2Y9Gwdp9J0bgDQ8/YNIPMoBM13nTwZfAhw==}
 
-  oxc-parser@0.127.0:
-    resolution: {integrity: sha512-bkgD4qHlN7WxLdX8bLXdaU54TtQtAIg/ZBAfm0aje/mo3MRDo3P0hZSgr4U7O3xfX+fQmR5AP04JS/TGcZLcFA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-
   oxc-parser@0.132.0:
     resolution: {integrity: sha512-+0LAPHaqtfQlvWdpaAa09SmOaZZgP8C552xosEkGJ4+ruEwP1Vgx+sqBgcBCNfR6KDCmagGOZTde8wmAvcI/Hg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -8016,10 +6873,6 @@ packages:
     resolution: {integrity: sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==}
     engines: {node: '>=6'}
 
-  p-locate@4.1.0:
-    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
-    engines: {node: '>=8'}
-
   p-locate@5.0.0:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
@@ -8036,26 +6889,12 @@ packages:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
 
-  package-json-from-dist@1.0.1:
-    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
-
   pako@0.2.9:
     resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}
 
-  param-case@3.0.4:
-    resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==}
-
-  parent-module@1.0.1:
-    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
-    engines: {node: '>=6'}
-
   parse-entities@4.0.2:
     resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
 
-  parse-json@5.2.0:
-    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
-    engines: {node: '>=8'}
-
   parse-srcset@1.0.2:
     resolution: {integrity: sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==}
 
@@ -8069,9 +6908,6 @@ packages:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
     engines: {node: '>= 0.8'}
 
-  pascal-case@3.1.2:
-    resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
-
   path-exists@3.0.0:
     resolution: {integrity: sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==}
     engines: {node: '>=4'}
@@ -8087,30 +6923,15 @@ packages:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
 
-  path-parse@1.0.7:
-    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-
-  path-scurry@2.0.2:
-    resolution: {integrity: sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==}
-    engines: {node: 18 || 20 || >=22}
-
   path-to-regexp@0.1.13:
     resolution: {integrity: sha512-A/AGNMFN3c8bOlvV9RreMdrv7jsmF9XIfDeCd87+I8RNg6s78BhJxMu69NEMHBSJFxKidViTEdruRwEk/WIKqA==}
 
   path-to-regexp@8.4.2:
     resolution: {integrity: sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==}
 
-  path-type@4.0.0:
-    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
-    engines: {node: '>=8'}
-
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
-  pathval@2.0.1:
-    resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
-    engines: {node: '>= 14.16'}
-
   pdf-parse@2.4.5:
     resolution: {integrity: sha512-mHU89HGh7v+4u2ubfnevJ03lmPgQ5WU4CxAVmTSh/sxVTEDYd1er/dKS/A6vg77NX47KTEoihq8jZBLr8Cxuwg==}
     engines: {node: '>=20.16.0 <21 || >=22.3.0'}
@@ -8135,10 +6956,6 @@ packages:
     engines: {node: '>=0.10'}
     hasBin: true
 
-  pify@2.3.0:
-    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
-    engines: {node: '>=0.10.0'}
-
   pify@4.0.1:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
@@ -8151,86 +6968,16 @@ packages:
     resolution: {integrity: sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==}
     engines: {node: '>=6'}
 
-  pkg-dir@4.2.0:
-    resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
-    engines: {node: '>=8'}
-
   pkg-types@2.3.1:
     resolution: {integrity: sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==}
 
   png-js@2.0.0:
     resolution: {integrity: sha512-GdzJuUMc6ZSpxFJWVxtOH1bzYHym+TOnveqUjb+VJIbZWbZzyiRGFiKhbiielfpYbgMlhHVhsJ0FTazfuRFkMA==}
 
-  postcss-cli@11.0.1:
-    resolution: {integrity: sha512-0UnkNPSayHKRe/tc2YGW6XnSqqOA9eqpiRMgRlV1S6HdGi16vwJBx7lviARzbV1HpQHqLLRH3o8vTcB0cLc+5g==}
-    engines: {node: '>=18'}
-    hasBin: true
-    peerDependencies:
-      postcss: 8.5.25
-
-  postcss-load-config@5.1.0:
-    resolution: {integrity: sha512-G5AJ+IX0aD0dygOE0yFZQ/huFFMSNneyfp0e3/bT05a8OfPC5FUoZRPfGijUdGOJNMewJiwzcHJXFafFzeKFVA==}
-    engines: {node: '>= 18'}
-    peerDependencies:
-      jiti: '>=1.21.0'
-      postcss: 8.5.25
-      tsx: ^4.8.1
-    peerDependenciesMeta:
-      jiti:
-        optional: true
-      postcss:
-        optional: true
-      tsx:
-        optional: true
-
-  postcss-modules-extract-imports@3.1.0:
-    resolution: {integrity: sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==}
-    engines: {node: ^10 || ^12 || >= 14}
-    peerDependencies:
-      postcss: 8.5.25
-
-  postcss-modules-local-by-default@4.2.0:
-    resolution: {integrity: sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==}
-    engines: {node: ^10 || ^12 || >= 14}
-    peerDependencies:
-      postcss: 8.5.25
-
-  postcss-modules-scope@3.2.1:
-    resolution: {integrity: sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==}
-    engines: {node: ^10 || ^12 || >= 14}
-    peerDependencies:
-      postcss: 8.5.25
-
-  postcss-modules-values@4.0.0:
-    resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==}
-    engines: {node: ^10 || ^12 || >= 14}
-    peerDependencies:
-      postcss: 8.5.25
-
-  postcss-nested@6.2.0:
-    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: 8.5.25
-
-  postcss-reporter@7.1.0:
-    resolution: {integrity: sha512-/eoEylGWyy6/DOiMP5lmFRdmDKThqgn7D6hP2dXKJI/0rJSO1ADFNngZfDzxL0YAxFvws+Rtpuji1YIHj4mySA==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      postcss: 8.5.25
-
   postcss-selector-parser@6.0.10:
     resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
     engines: {node: '>=4'}
 
-  postcss-selector-parser@6.1.2:
-    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
-    engines: {node: '>=4'}
-
-  postcss-selector-parser@7.1.3:
-    resolution: {integrity: sha512-ajnd7iZnqjJDkyHNfznl/ZVO0lWqvBmQXfKKENx9/p/bEiF/L3eHwdydNUg9RXZx6xfZWOCmXmBa5oeB+YrAPQ==}
-    engines: {node: '>=4'}
-
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
@@ -8247,17 +6994,6 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
-  pretty-error@4.0.0:
-    resolution: {integrity: sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==}
-
-  pretty-format@27.5.1:
-    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
-    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
-
-  pretty-hrtime@1.0.3:
-    resolution: {integrity: sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==}
-    engines: {node: '>= 0.8'}
-
   prompts@2.4.2:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
     engines: {node: '>= 6'}
@@ -8409,25 +7145,6 @@ packages:
       '@types/react':
         optional: true
 
-  react-day-picker@9.5.0:
-    resolution: {integrity: sha512-WmJnPFVLnKh5Qscm7wavMNg86rqPverSWjx+zgK8/ZmGRSQ8c8OoqW10RI+AzAfT2atIxImpCUU2R9Z7Xb2SUA==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      react: 19.2.8
-
-  react-docgen-typescript@2.4.0:
-    resolution: {integrity: sha512-ZtAp5XTO5HRzQctjPU0ybY0RRCQO19X/8fxn3w7y2VVTUbGHDKULPTL4ky3vB05euSgG5NpALhEhDPvQ56wvXg==}
-    peerDependencies:
-      typescript: 5.8.3
-
-  react-docgen@7.1.1:
-    resolution: {integrity: sha512-hlSJDQ2synMPKFZOsKo9Hi8WWZTC7POR8EmWvTSjow+VDgKzkmjQvFm2fk0tmRw+f0vTOIYKlarR0iL4996pdg==}
-    engines: {node: '>=16.14.0'}
-
-  react-docgen@8.0.3:
-    resolution: {integrity: sha512-aEZ9qP+/M+58x2qgfSFEWH1BxLyHe5+qkLNJOZQb5iGS017jpbRnoKhNRrXPeA6RfBrZO5wZrT9DMC1UqE1f1w==}
-    engines: {node: ^20.9.0 || >=22}
-
   react-doctor@0.4.2:
     resolution: {integrity: sha512-h4wykdqF93jBd4RD4AlKjyaukfizqcrwAMdZGLM0UsCw7ipOqJXFPvfPRK+GbHVh8KKoYWq1nU7K1M3uGTY/Ag==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -8567,9 +7284,6 @@ packages:
     peerDependencies:
       react: 19.2.8
 
-  read-cache@1.0.0:
-    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
-
   readable-stream@3.6.2:
     resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
     engines: {node: '>= 6'}
@@ -8593,10 +7307,6 @@ packages:
       react: 19.2.8
       react-dom: 19.2.8
 
-  redent@3.0.0:
-    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
-    engines: {node: '>=8'}
-
   redis-errors@1.2.0:
     resolution: {integrity: sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w==}
     engines: {node: '>=4'}
@@ -8628,10 +7338,6 @@ packages:
   rehype-remark@10.0.1:
     resolution: {integrity: sha512-EmDndlb5NVwXGfUa4c9GPK+lXeItTilLhE6ADSaQuHr4JUlKw9MidzGzx4HpqZrNCt6vnHmEifXQiiA+CEnjYQ==}
 
-  relateurl@0.2.7:
-    resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==}
-    engines: {node: '>= 0.10'}
-
   remark-gfm@4.0.1:
     resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
 
@@ -8644,13 +7350,6 @@ packages:
   remark-stringify@11.0.0:
     resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
 
-  renderkid@3.0.0:
-    resolution: {integrity: sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==}
-
-  require-directory@2.1.1:
-    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
-    engines: {node: '>=0.10.0'}
-
   require-from-string@2.0.2:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
@@ -8662,18 +7361,9 @@ packages:
   reselect@5.3.0:
     resolution: {integrity: sha512-XGoLeRAVzUTcJ1qkxPQhDJyIZ5d6zzZD9nT7AEZOaaU9UbWclhycElmhO+VD5bFeLuzhPBaOV2oXC8uG35ZSpg==}
 
-  resolve-from@4.0.0:
-    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
-    engines: {node: '>=4'}
-
   resolve-pkg-maps@1.0.0:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
 
-  resolve@1.22.10:
-    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
-    engines: {node: '>= 0.4'}
-    hasBin: true
-
   restore-cursor@5.1.0:
     resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
     engines: {node: '>=18'}
@@ -8688,11 +7378,6 @@ packages:
   rfdc@1.4.1:
     resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
 
-  rimraf@3.0.2:
-    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
-    deprecated: Rimraf versions prior to v4 are no longer supported
-    hasBin: true
-
   rolldown-plugin-dts@0.17.8:
     resolution: {integrity: sha512-76EEBlhF00yeY6M7VpMkWKI4r9WjuoMiOGey7j4D6zf3m0BR+ZrrY9hvSXdueJ3ljxSLq4DJBKFpX/X9+L7EKw==}
     engines: {node: '>=20.19.0'}
@@ -8729,10 +7414,6 @@ packages:
     resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
     engines: {node: '>= 18'}
 
-  run-applescript@7.1.0:
-    resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
-    engines: {node: '>=18'}
-
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
@@ -8759,14 +7440,6 @@ packages:
   scheduler@0.27.0:
     resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
-  schema-utils@3.3.0:
-    resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==}
-    engines: {node: '>= 10.13.0'}
-
-  schema-utils@4.3.3:
-    resolution: {integrity: sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==}
-    engines: {node: '>= 10.13.0'}
-
   scroll-into-view-if-needed@3.1.0:
     resolution: {integrity: sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==}
 
@@ -8863,10 +7536,6 @@ packages:
   sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
 
-  slash@5.1.0:
-    resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
-    engines: {node: '>=14.16'}
-
   slice-ansi@7.1.2:
     resolution: {integrity: sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==}
     engines: {node: '>=18'}
@@ -8908,21 +7577,6 @@ packages:
   std-env@4.1.0:
     resolution: {integrity: sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==}
 
-  storybook@10.4.6:
-    resolution: {integrity: sha512-6wkA6LxfDSSilloITsrFOJfsnw0mDUP2h8Ls+lRt8oRsudtz2RWFhLv+Toiwg6NW7hUpdTDc2hzR7DztJid6+A==}
-    hasBin: true
-    peerDependencies:
-      '@types/react': 19.2.17
-      prettier: ^2 || ^3
-      vite-plus: ^0.1.15
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      prettier:
-        optional: true
-      vite-plus:
-        optional: true
-
   string-argv@0.3.2:
     resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
     engines: {node: '>=0.6.19'}
@@ -8957,22 +7611,10 @@ packages:
     resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==}
     engines: {node: '>=12'}
 
-  strip-bom@3.0.0:
-    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
-    engines: {node: '>=4'}
-
   strip-final-newline@2.0.0:
     resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
     engines: {node: '>=6'}
 
-  strip-indent@3.0.0:
-    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
-    engines: {node: '>=8'}
-
-  strip-indent@4.1.0:
-    resolution: {integrity: sha512-OA95x+JPmL7kc7zCu+e+TeYxEiaIyndRx0OrBcK2QPPH09oAndr2ALvymxWA+Lx1PYYvFUm4O63pRkdJAaW96w==}
-    engines: {node: '>=12'}
-
   strip-json-comments@2.0.1:
     resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
     engines: {node: '>=0.10.0'}
@@ -8987,12 +7629,6 @@ packages:
   stubborn-utils@1.0.2:
     resolution: {integrity: sha512-zOh9jPYI+xrNOyisSelgym4tolKTJCQd5GBhK0+0xJvcYDcwlOoxF/rnFKQ2KRZknXSG9jWAp66fwP6AxN9STg==}
 
-  style-loader@4.0.0:
-    resolution: {integrity: sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==}
-    engines: {node: '>= 18.12.0'}
-    peerDependencies:
-      webpack: 5.104.1
-
   style-to-js@1.1.21:
     resolution: {integrity: sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==}
 
@@ -9007,23 +7643,9 @@ packages:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
 
-  supports-color@8.1.1:
-    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
-    engines: {node: '>=10'}
-
-  supports-preserve-symlinks-flag@1.0.0:
-    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
-    engines: {node: '>= 0.4'}
-
   svg-arc-to-cubic-bezier@3.2.0:
     resolution: {integrity: sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g==}
 
-  swc-loader@0.2.6:
-    resolution: {integrity: sha512-9Zi9UP2YmDpgmQVbyOPJClY0dwf58JDyDMQ7uRc4krmc72twNI2fvlBWHLqVekBpPc7h5NJkGVT1zNDxFrqhvg==}
-    peerDependencies:
-      '@swc/core': ^1.2.147
-      webpack: 5.104.1
-
   swr@2.4.2:
     resolution: {integrity: sha512-ej644Y2bvkIajfR32KGeSSdBXQW+ScjGjkybZgSE7kFpk9eGnV44XY9FJylXi+W75pavSX1PVNB57W5EbhGIYw==}
     peerDependencies:
@@ -9046,49 +7668,6 @@ packages:
     resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
     engines: {node: '>=6'}
 
-  terser-webpack-plugin@5.6.1:
-    resolution: {integrity: sha512-201R5j+sJpK8nFWwKVyNfZot8FaJbLZDq5evriVzbV1wDtSXDjRUDRfJzHpAaxFDMEhsZL1QkeqM61wgsS3KaQ==}
-    engines: {node: '>= 10.13.0'}
-    peerDependencies:
-      '@minify-html/node': '*'
-      '@swc/core': '*'
-      '@swc/css': '*'
-      '@swc/html': '*'
-      clean-css: '*'
-      cssnano: '*'
-      csso: '*'
-      esbuild: '*'
-      html-minifier-terser: '*'
-      lightningcss: '*'
-      postcss: '*'
-      uglify-js: '*'
-      webpack: 5.104.1
-    peerDependenciesMeta:
-      '@minify-html/node':
-        optional: true
-      '@swc/core':
-        optional: true
-      '@swc/css':
-        optional: true
-      '@swc/html':
-        optional: true
-      clean-css:
-        optional: true
-      cssnano:
-        optional: true
-      csso:
-        optional: true
-      esbuild:
-        optional: true
-      html-minifier-terser:
-        optional: true
-      lightningcss:
-        optional: true
-      postcss:
-        optional: true
-      uglify-js:
-        optional: true
-
   terser@5.43.1:
     resolution: {integrity: sha512-+6erLbBm0+LROX2sPXlUYx/ux5PyE9K/a92Wrt6oA+WDAoFTdpHE5tCYCI5PNzq2y8df4rA+QgHLJuR4jNymsg==}
     engines: {node: '>=10'}
@@ -9097,9 +7676,6 @@ packages:
   text-hex@1.0.0:
     resolution: {integrity: sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==}
 
-  thenby@1.3.4:
-    resolution: {integrity: sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==}
-
   tiny-inflate@1.0.3:
     resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
 
@@ -9124,18 +7700,10 @@ packages:
     resolution: {integrity: sha512-Pugqs6M0m7Lv1I7FtxN4aoyToKg1C4tu+/381vH35y8oENM/Ai7f7C4StcoK4/+BSw9ebcS8jRiVrORFKCALLw==}
     engines: {node: ^20.0.0 || >=22.0.0}
 
-  tinyrainbow@2.0.0:
-    resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
-    engines: {node: '>=14.0.0'}
-
   tinyrainbow@3.1.0:
     resolution: {integrity: sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==}
     engines: {node: '>=14.0.0'}
 
-  tinyspy@4.0.3:
-    resolution: {integrity: sha512-t2T/WLB2WRgZ9EpE4jgPJ9w+i66UZfDc8wHh0xrwiRNN+UwH98GIJkTeZqX9rg0i0ptwzqW+uYeIF0T4F8LR7A==}
-    engines: {node: '>=14.0.0'}
-
   tippy.js@6.3.7:
     resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
 
@@ -9181,10 +7749,6 @@ packages:
   trough@2.2.0:
     resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
 
-  ts-dedent@2.2.0:
-    resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
-    engines: {node: '>=6.10'}
-
   tsconfck@3.1.6:
     resolution: {integrity: sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==}
     engines: {node: ^18 || >=20}
@@ -9196,10 +7760,6 @@ packages:
       typescript:
         optional: true
 
-  tsconfig-paths@4.2.0:
-    resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
-    engines: {node: '>=6'}
-
   tsdown@0.16.0:
     resolution: {integrity: sha512-VCqqxT5FbjCmxmLNlOLHiNhu1MBtdvCsk43murvUFloQzQzr/C0FRauWtAw7lAPmS40rZlgocCoTNFqX72WSTg==}
     engines: {node: '>=20.19.0'}
@@ -9312,18 +7872,10 @@ packages:
   unist-util-visit@5.0.0:
     resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
 
-  universalify@2.0.1:
-    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
-    engines: {node: '>= 10.0.0'}
-
   unpipe@1.0.0:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
 
-  unplugin@2.3.11:
-    resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==}
-    engines: {node: '>=18.12.0'}
-
   update-browserslist-db@1.3.2:
     resolution: {integrity: sha512-UQ+MSxlhRm1bzjhU+DcuXfjFO1FzNtqhK5+9Yvlp90ItDLk5vT932A0rFu619nf7RVS+Y/VeaUW1jaRDqZ8VJw==}
     hasBin: true
@@ -9369,9 +7921,6 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
-  utila@0.4.0:
-    resolution: {integrity: sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==}
-
   utils-merge@1.0.1:
     resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
     engines: {node: '>= 0.4.0'}
@@ -9523,45 +8072,12 @@ packages:
   w3c-keyname@2.2.8:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
 
-  warning@4.0.3:
-    resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
-
-  watchpack@2.4.4:
-    resolution: {integrity: sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA==}
-    engines: {node: '>=10.13.0'}
-
-  web-namespaces@2.0.1:
-    resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
-
-  webpack-dev-middleware@6.1.3:
-    resolution: {integrity: sha512-A4ChP0Qj8oGociTs6UdlRUGANIGrCDL3y+pmQMc+dSsraXHCatFpmMey4mYELA+juqwUqwQsUgJJISXl1KWmiw==}
-    engines: {node: '>= 14.15.0'}
-    peerDependencies:
-      webpack: 5.104.1
-    peerDependenciesMeta:
-      webpack:
-        optional: true
-
-  webpack-hot-middleware@2.26.1:
-    resolution: {integrity: sha512-khZGfAeJx6I8K9zKohEWWYN6KDlVw2DHownoe+6Vtwj1LP9WFgegXnVMSkZ/dBEBtXFwrkkydsaPFlB7f8wU2A==}
-
-  webpack-sources@3.3.3:
-    resolution: {integrity: sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==}
-    engines: {node: '>=10.13.0'}
-
-  webpack-virtual-modules@0.6.2:
-    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
-
-  webpack@5.104.1:
-    resolution: {integrity: sha512-Qphch25abbMNtekmEGJmeRUhLDbe+QfiWTiqpKYkpCOWY64v9eyl+KRRLmqOFA2AvKPpc9DC6+u2n76tQLBoaA==}
-    engines: {node: '>=10.13.0'}
-    hasBin: true
-    peerDependencies:
-      webpack-cli: '*'
-    peerDependenciesMeta:
-      webpack-cli:
-        optional: true
-
+  warning@4.0.3:
+    resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
+
+  web-namespaces@2.0.1:
+    resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
+
   when-exit@2.1.5:
     resolution: {integrity: sha512-VGkKJ564kzt6Ms1dbgPP/yuIoQCrsFAnRbptpC5wOEsDaNsbCB2bnfnaA8i/vRs5tjUSEOtIuvl9/MyVsvQZCg==}
 
@@ -9591,10 +8107,6 @@ packages:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
 
-  wrap-ansi@7.0.0:
-    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
-    engines: {node: '>=10'}
-
   wrap-ansi@8.1.0:
     resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
     engines: {node: '>=12'}
@@ -9634,10 +8146,6 @@ packages:
       utf-8-validate:
         optional: true
 
-  wsl-utils@0.1.0:
-    resolution: {integrity: sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==}
-    engines: {node: '>=18'}
-
   y-indexeddb@9.0.12:
     resolution: {integrity: sha512-9oCFRSPPzBK7/w5vOkJBaVCQZKHXB/v6SIT+WYhnJxlEC61juqG0hBrAf+y3gmSMLFLwICNH9nQ53uscuse6Hg==}
     engines: {node: '>=16.0.0', npm: '>=8.0.0'}
@@ -9660,10 +8168,6 @@ packages:
     peerDependencies:
       yjs: ^13.0.0
 
-  y18n@5.0.8:
-    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
-    engines: {node: '>=10'}
-
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
@@ -9672,14 +8176,6 @@ packages:
     engines: {node: '>= 14.6'}
     hasBin: true
 
-  yargs-parser@21.1.1:
-    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
-    engines: {node: '>=12'}
-
-  yargs@17.7.2:
-    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
-    engines: {node: '>=12'}
-
   yjs@13.6.27:
     resolution: {integrity: sha512-OIDwaflOaq4wC6YlPBy2L6ceKeKuF7DeTxx+jPzv1FHn9tCZ0ZwSRnUBxD05E3yed46fv/FWJbvR+Ud7x0L7zw==}
     engines: {node: '>=16.0.0', npm: '>=8.0.0'}
@@ -9709,8 +8205,6 @@ packages:
 
 snapshots:
 
-  '@adobe/css-tools@4.4.4': {}
-
   '@alloc/quick-lru@5.2.0': {}
 
   '@atlaskit/pragmatic-drag-and-drop-auto-scroll@1.4.0':
@@ -10029,18 +8523,6 @@ snapshots:
 
   '@bprogress/core@1.3.4': {}
 
-  '@chromatic-com/storybook@5.2.1(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))':
-    dependencies:
-      '@neoconfetti/react': 1.0.0
-      chromatic: 16.10.0
-      jsonfile: 6.2.0
-      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      strip-ansi: 7.1.2
-    transitivePeerDependencies:
-      - '@chromatic-com/cypress'
-      - '@chromatic-com/playwright'
-      - '@chromatic-com/vitest'
-
   '@colors/colors@1.6.0': {}
 
   '@dabh/diagnostics@2.0.3':
@@ -10139,12 +8621,6 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/core@1.9.2':
-    dependencies:
-      '@emnapi/wasi-threads': 1.2.1
-      tslib: 2.8.1
-    optional: true
-
   '@emnapi/runtime@1.10.0':
     dependencies:
       tslib: 2.8.1
@@ -10155,11 +8631,6 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/runtime@1.9.2':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
   '@emnapi/wasi-threads@1.2.1':
     dependencies:
       tslib: 2.8.1
@@ -10273,16 +8744,6 @@ snapshots:
       '@eslint/core': 1.2.1
       levn: 0.4.1
 
-  '@figspec/components@2.1.0': {}
-
-  '@figspec/react@2.0.1(@types/react@19.2.17)(react@19.2.8)':
-    dependencies:
-      '@figspec/components': 2.1.0
-      '@lit-labs/react': 2.1.3(@types/react@19.2.17)
-      react: 19.2.8
-    transitivePeerDependencies:
-      - '@types/react'
-
   '@floating-ui/core@1.8.0':
     dependencies:
       '@floating-ui/utils': 0.2.12
@@ -10580,16 +9041,6 @@ snapshots:
 
   '@ioredis/commands@1.3.0': {}
 
-  '@isaacs/cliui@9.0.0': {}
-
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0(typescript@5.8.3)(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))':
-    dependencies:
-      glob: 11.1.0
-      react-docgen-typescript: 2.4.0(typescript@5.8.3)
-      vite: 8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3)
-    optionalDependencies:
-      typescript: 5.8.3
-
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -10606,6 +9057,7 @@ snapshots:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.13
       '@jridgewell/trace-mapping': 0.3.31
+    optional: true
 
   '@jridgewell/sourcemap-codec@1.5.5': {}
 
@@ -10616,16 +9068,6 @@ snapshots:
 
   '@lifeomic/attempt@3.1.0': {}
 
-  '@lit-labs/react@2.1.3(@types/react@19.2.17)':
-    dependencies:
-      '@lit/react': 1.0.8(@types/react@19.2.17)
-    transitivePeerDependencies:
-      - '@types/react'
-
-  '@lit/react@1.0.8(@types/react@19.2.17)':
-    dependencies:
-      '@types/react': 19.2.17
-
   '@makeplane/propel@0.3.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)':
     dependencies:
       '@base-ui/react': 1.7.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -10640,12 +9082,6 @@ snapshots:
       - '@types/react'
       - date-fns
 
-  '@mdx-js/react@3.1.0(@types/react@19.2.17)(react@19.2.8)':
-    dependencies:
-      '@types/mdx': 2.0.13
-      '@types/react': 19.2.17
-      react: 19.2.8
-
   '@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.4':
     optional: true
 
@@ -10721,15 +9157,6 @@ snapshots:
       '@tybys/wasm-util': 0.10.1
     optional: true
 
-  '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)':
-    dependencies:
-      '@emnapi/core': 1.9.2
-      '@emnapi/runtime': 1.9.2
-      '@tybys/wasm-util': 0.10.1
-    optional: true
-
-  '@neoconfetti/react@1.0.0': {}
-
   '@noble/ciphers@1.3.0': {}
 
   '@noble/hashes@1.8.0': {}
@@ -10781,109 +9208,54 @@ snapshots:
 
   '@opentelemetry/semantic-conventions@1.41.1': {}
 
-  '@oxc-parser/binding-android-arm-eabi@0.127.0':
-    optional: true
-
   '@oxc-parser/binding-android-arm-eabi@0.132.0':
     optional: true
 
-  '@oxc-parser/binding-android-arm64@0.127.0':
-    optional: true
-
   '@oxc-parser/binding-android-arm64@0.132.0':
     optional: true
 
-  '@oxc-parser/binding-darwin-arm64@0.127.0':
-    optional: true
-
   '@oxc-parser/binding-darwin-arm64@0.132.0':
     optional: true
 
-  '@oxc-parser/binding-darwin-x64@0.127.0':
-    optional: true
-
   '@oxc-parser/binding-darwin-x64@0.132.0':
     optional: true
 
-  '@oxc-parser/binding-freebsd-x64@0.127.0':
-    optional: true
-
   '@oxc-parser/binding-freebsd-x64@0.132.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm-gnueabihf@0.127.0':
-    optional: true
-
   '@oxc-parser/binding-linux-arm-gnueabihf@0.132.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm-musleabihf@0.127.0':
-    optional: true
-
   '@oxc-parser/binding-linux-arm-musleabihf@0.132.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm64-gnu@0.127.0':
-    optional: true
-
   '@oxc-parser/binding-linux-arm64-gnu@0.132.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm64-musl@0.127.0':
-    optional: true
-
   '@oxc-parser/binding-linux-arm64-musl@0.132.0':
     optional: true
 
-  '@oxc-parser/binding-linux-ppc64-gnu@0.127.0':
-    optional: true
-
   '@oxc-parser/binding-linux-ppc64-gnu@0.132.0':
     optional: true
 
-  '@oxc-parser/binding-linux-riscv64-gnu@0.127.0':
-    optional: true
-
   '@oxc-parser/binding-linux-riscv64-gnu@0.132.0':
     optional: true
 
-  '@oxc-parser/binding-linux-riscv64-musl@0.127.0':
-    optional: true
-
   '@oxc-parser/binding-linux-riscv64-musl@0.132.0':
     optional: true
 
-  '@oxc-parser/binding-linux-s390x-gnu@0.127.0':
-    optional: true
-
   '@oxc-parser/binding-linux-s390x-gnu@0.132.0':
     optional: true
 
-  '@oxc-parser/binding-linux-x64-gnu@0.127.0':
-    optional: true
-
   '@oxc-parser/binding-linux-x64-gnu@0.132.0':
     optional: true
 
-  '@oxc-parser/binding-linux-x64-musl@0.127.0':
-    optional: true
-
   '@oxc-parser/binding-linux-x64-musl@0.132.0':
     optional: true
 
-  '@oxc-parser/binding-openharmony-arm64@0.127.0':
-    optional: true
-
   '@oxc-parser/binding-openharmony-arm64@0.132.0':
     optional: true
 
-  '@oxc-parser/binding-wasm32-wasi@0.127.0':
-    dependencies:
-      '@emnapi/core': 1.9.2
-      '@emnapi/runtime': 1.9.2
-      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
-    optional: true
-
   '@oxc-parser/binding-wasm32-wasi@0.132.0':
     dependencies:
       '@emnapi/core': 1.10.0
@@ -10891,26 +9263,15 @@ snapshots:
       '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
     optional: true
 
-  '@oxc-parser/binding-win32-arm64-msvc@0.127.0':
-    optional: true
-
   '@oxc-parser/binding-win32-arm64-msvc@0.132.0':
     optional: true
 
-  '@oxc-parser/binding-win32-ia32-msvc@0.127.0':
-    optional: true
-
   '@oxc-parser/binding-win32-ia32-msvc@0.132.0':
     optional: true
 
-  '@oxc-parser/binding-win32-x64-msvc@0.127.0':
-    optional: true
-
   '@oxc-parser/binding-win32-x64-msvc@0.132.0':
     optional: true
 
-  '@oxc-project/types@0.127.0': {}
-
   '@oxc-project/types@0.132.0': {}
 
   '@oxc-project/types@0.133.0': {}
@@ -11645,12 +10006,6 @@ snapshots:
 
   '@rolldown/pluginutils@1.0.1': {}
 
-  '@rollup/pluginutils@5.2.0':
-    dependencies:
-      '@types/estree': 1.0.8
-      estree-walker: 2.0.2
-      picomatch: 2.3.2
-
   '@sentry-internal/server-utils@10.56.0':
     dependencies:
       '@sentry/core': 10.56.0
@@ -11695,339 +10050,10 @@ snapshots:
 
   '@standard-schema/spec@1.1.0': {}
 
-  '@storybook/addon-designs@11.1.3(@storybook/addon-docs@10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(esbuild@0.28.1)))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))':
-    dependencies:
-      '@figspec/react': 2.0.1(@types/react@19.2.17)(react@19.2.8)
-      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-    optionalDependencies:
-      '@storybook/addon-docs': 10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(esbuild@0.28.1))
-      react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
-    transitivePeerDependencies:
-      - '@types/react'
-
-  '@storybook/addon-docs@10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))':
-    dependencies:
-      '@mdx-js/react': 3.1.0(@types/react@19.2.17)(react@19.2.8)
-      '@storybook/csf-plugin': 10.4.6(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))
-      '@storybook/icons': 2.0.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@storybook/react-dom-shim': 10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))
-      react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
-      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      ts-dedent: 2.2.0
-    optionalDependencies:
-      '@types/react': 19.2.17
-    transitivePeerDependencies:
-      - '@types/react-dom'
-      - esbuild
-      - rollup
-      - vite
-      - webpack
-
-  '@storybook/addon-docs@10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(esbuild@0.28.1))':
-    dependencies:
-      '@mdx-js/react': 3.1.0(@types/react@19.2.17)(react@19.2.8)
-      '@storybook/csf-plugin': 10.4.6(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(esbuild@0.28.1))
-      '@storybook/icons': 2.0.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@storybook/react-dom-shim': 10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))
-      react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
-      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      ts-dedent: 2.2.0
-    optionalDependencies:
-      '@types/react': 19.2.17
-    transitivePeerDependencies:
-      - '@types/react-dom'
-      - esbuild
-      - rollup
-      - vite
-      - webpack
-
-  '@storybook/addon-links@10.4.6(@types/react@19.2.17)(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))':
-    dependencies:
-      '@storybook/global': 5.0.0
-      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-    optionalDependencies:
-      '@types/react': 19.2.17
-      react: 19.2.8
-
-  '@storybook/addon-onboarding@10.4.6(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))':
-    dependencies:
-      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-
-  '@storybook/addon-styling-webpack@3.0.2(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))':
-    dependencies:
-      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)
-
-  '@storybook/addon-webpack5-compiler-swc@4.0.3(@swc/helpers@0.5.17)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))':
-    dependencies:
-      '@swc/core': 1.13.5(@swc/helpers@0.5.17)
-      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      swc-loader: 0.2.6(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))
-    transitivePeerDependencies:
-      - '@swc/helpers'
-      - webpack
-
-  '@storybook/builder-vite@10.4.6(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(esbuild@0.28.1))':
-    dependencies:
-      '@storybook/csf-plugin': 10.4.6(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(esbuild@0.28.1))
-      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      ts-dedent: 2.2.0
-      vite: 8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3)
-    transitivePeerDependencies:
-      - esbuild
-      - rollup
-      - webpack
-
-  '@storybook/builder-webpack5@10.4.6(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)':
-    dependencies:
-      '@storybook/core-webpack': 10.4.6(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))
-      case-sensitive-paths-webpack-plugin: 2.4.0
-      cjs-module-lexer: 1.4.3
-      css-loader: 7.1.4(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))
-      es-module-lexer: 1.7.0
-      fork-ts-checker-webpack-plugin: 9.1.0(typescript@5.8.3)(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))
-      html-webpack-plugin: 5.6.4(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))
-      magic-string: 0.30.21
-      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      style-loader: 4.0.0(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))
-      terser-webpack-plugin: 5.6.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))
-      ts-dedent: 2.2.0
-      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)
-      webpack-dev-middleware: 6.1.3(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))
-      webpack-hot-middleware: 2.26.1
-      webpack-virtual-modules: 0.6.2
-    optionalDependencies:
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - '@minify-html/node'
-      - '@rspack/core'
-      - '@swc/core'
-      - '@swc/css'
-      - '@swc/html'
-      - clean-css
-      - cssnano
-      - csso
-      - esbuild
-      - html-minifier-terser
-      - lightningcss
-      - postcss
-      - uglify-js
-      - webpack-cli
-
-  '@storybook/core-webpack@10.4.6(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))':
-    dependencies:
-      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      ts-dedent: 2.2.0
-
-  '@storybook/csf-plugin@10.4.6(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))':
-    dependencies:
-      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      unplugin: 2.3.11
-    optionalDependencies:
-      esbuild: 0.28.1
-      vite: 8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3)
-      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)
-
-  '@storybook/csf-plugin@10.4.6(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(esbuild@0.28.1))':
-    dependencies:
-      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      unplugin: 2.3.11
-    optionalDependencies:
-      esbuild: 0.28.1
-      vite: 8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3)
-      webpack: 5.104.1(esbuild@0.28.1)
-
-  '@storybook/global@5.0.0': {}
-
-  '@storybook/icons@2.0.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
-    dependencies:
-      react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
-
-  '@storybook/preset-react-webpack@10.4.6(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)':
-    dependencies:
-      '@storybook/core-webpack': 10.4.6(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))
-      '@storybook/react-docgen-typescript-plugin': 1.0.6--canary.9.0c3f3b7.0(typescript@5.8.3)(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))
-      '@types/semver': 7.7.1
-      magic-string: 0.30.21
-      react: 19.2.8
-      react-docgen: 7.1.1
-      react-dom: 19.2.8(react@19.2.8)
-      resolve: 1.22.10
-      semver: 7.8.5
-      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      tsconfig-paths: 4.2.0
-      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)
-    optionalDependencies:
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - '@minify-html/node'
-      - '@swc/core'
-      - '@swc/css'
-      - '@swc/html'
-      - clean-css
-      - cssnano
-      - csso
-      - esbuild
-      - html-minifier-terser
-      - lightningcss
-      - postcss
-      - supports-color
-      - uglify-js
-      - webpack-cli
-
-  '@storybook/react-docgen-typescript-plugin@1.0.6--canary.9.0c3f3b7.0(typescript@5.8.3)(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))':
-    dependencies:
-      debug: 4.4.3
-      endent: 2.1.0
-      find-cache-dir: 3.3.2
-      flat-cache: 3.2.0
-      micromatch: 4.0.8
-      react-docgen-typescript: 2.4.0(typescript@5.8.3)
-      tslib: 2.8.1
-      typescript: 5.8.3
-      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@storybook/react-dom-shim@10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))':
-    dependencies:
-      react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
-      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-    optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
-
-  '@storybook/react-vite@10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(esbuild@0.28.1))':
-    dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.7.0(typescript@5.8.3)(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))
-      '@rollup/pluginutils': 5.2.0
-      '@storybook/builder-vite': 10.4.6(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(esbuild@0.28.1))
-      '@storybook/react': 10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)
-      empathic: 2.0.0
-      magic-string: 0.30.21
-      react: 19.2.8
-      react-docgen: 8.0.3
-      react-dom: 19.2.8(react@19.2.8)
-      resolve: 1.22.10
-      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      tsconfig-paths: 4.2.0
-      vite: 8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3)
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
-      - esbuild
-      - rollup
-      - supports-color
-      - typescript
-      - webpack
-
-  '@storybook/react-webpack5@10.4.6(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(postcss@8.5.25)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)':
-    dependencies:
-      '@storybook/builder-webpack5': 10.4.6(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)
-      '@storybook/preset-react-webpack': 10.4.6(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)
-      '@storybook/react': 10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)
-      react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
-      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-    optionalDependencies:
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - '@minify-html/node'
-      - '@rspack/core'
-      - '@swc/core'
-      - '@swc/css'
-      - '@swc/html'
-      - '@types/react'
-      - '@types/react-dom'
-      - clean-css
-      - cssnano
-      - csso
-      - esbuild
-      - html-minifier-terser
-      - lightningcss
-      - postcss
-      - supports-color
-      - uglify-js
-      - webpack-cli
-
-  '@storybook/react@10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)':
-    dependencies:
-      '@storybook/global': 5.0.0
-      '@storybook/react-dom-shim': 10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))
-      react: 19.2.8
-      react-docgen: 8.0.3
-      react-docgen-typescript: 2.4.0(typescript@5.8.3)
-      react-dom: 19.2.8(react@19.2.8)
-      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-    optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@swc/core-darwin-arm64@1.13.5':
-    optional: true
-
-  '@swc/core-darwin-x64@1.13.5':
-    optional: true
-
-  '@swc/core-linux-arm-gnueabihf@1.13.5':
-    optional: true
-
-  '@swc/core-linux-arm64-gnu@1.13.5':
-    optional: true
-
-  '@swc/core-linux-arm64-musl@1.13.5':
-    optional: true
-
-  '@swc/core-linux-x64-gnu@1.13.5':
-    optional: true
-
-  '@swc/core-linux-x64-musl@1.13.5':
-    optional: true
-
-  '@swc/core-win32-arm64-msvc@1.13.5':
-    optional: true
-
-  '@swc/core-win32-ia32-msvc@1.13.5':
-    optional: true
-
-  '@swc/core-win32-x64-msvc@1.13.5':
-    optional: true
-
-  '@swc/core@1.13.5(@swc/helpers@0.5.17)':
-    dependencies:
-      '@swc/counter': 0.1.3
-      '@swc/types': 0.1.24
-    optionalDependencies:
-      '@swc/core-darwin-arm64': 1.13.5
-      '@swc/core-darwin-x64': 1.13.5
-      '@swc/core-linux-arm-gnueabihf': 1.13.5
-      '@swc/core-linux-arm64-gnu': 1.13.5
-      '@swc/core-linux-arm64-musl': 1.13.5
-      '@swc/core-linux-x64-gnu': 1.13.5
-      '@swc/core-linux-x64-musl': 1.13.5
-      '@swc/core-win32-arm64-msvc': 1.13.5
-      '@swc/core-win32-ia32-msvc': 1.13.5
-      '@swc/core-win32-x64-msvc': 1.13.5
-      '@swc/helpers': 0.5.17
-
-  '@swc/counter@0.1.3': {}
-
   '@swc/helpers@0.5.17':
     dependencies:
       tslib: 2.8.1
 
-  '@swc/types@0.1.24':
-    dependencies:
-      '@swc/counter': 0.1.3
-
   '@tailwindcss/node@4.1.17':
     dependencies:
       '@jridgewell/remapping': 2.3.5
@@ -12113,33 +10139,9 @@ snapshots:
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
 
-  '@tanstack/table-core@8.21.3': {}
-
-  '@tanstack/virtual-core@3.13.12': {}
-
-  '@testing-library/dom@10.4.0':
-    dependencies:
-      '@babel/code-frame': 7.29.7
-      '@babel/runtime': 7.29.7
-      '@types/aria-query': 5.0.4
-      aria-query: 5.3.0
-      chalk: 4.1.2
-      dom-accessibility-api: 0.5.16
-      lz-string: 1.5.0
-      pretty-format: 27.5.1
-
-  '@testing-library/jest-dom@6.9.1':
-    dependencies:
-      '@adobe/css-tools': 4.4.4
-      aria-query: 5.3.2
-      css.escape: 1.5.1
-      dom-accessibility-api: 0.6.3
-      picocolors: 1.1.1
-      redent: 3.0.0
+  '@tanstack/table-core@8.21.3': {}
 
-  '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.0)':
-    dependencies:
-      '@testing-library/dom': 10.4.0
+  '@tanstack/virtual-core@3.13.12': {}
 
   '@tiptap/core@2.26.3(@tiptap/pm@2.26.1)':
     dependencies:
@@ -12423,29 +10425,6 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@types/aria-query@5.0.4': {}
-
-  '@types/babel__core@7.20.5':
-    dependencies:
-      '@babel/parser': 7.29.7
-      '@babel/types': 7.29.7
-      '@types/babel__generator': 7.27.0
-      '@types/babel__template': 7.4.4
-      '@types/babel__traverse': 7.28.0
-
-  '@types/babel__generator@7.27.0':
-    dependencies:
-      '@babel/types': 7.29.7
-
-  '@types/babel__template@7.4.4':
-    dependencies:
-      '@babel/parser': 7.29.7
-      '@babel/types': 7.29.7
-
-  '@types/babel__traverse@7.28.0':
-    dependencies:
-      '@babel/types': 7.29.7
-
   '@types/body-parser@1.19.6':
     dependencies:
       '@types/connect': 3.4.38
@@ -12500,18 +10479,6 @@ snapshots:
 
   '@types/deep-eql@4.0.2': {}
 
-  '@types/doctrine@0.0.9': {}
-
-  '@types/eslint-scope@3.7.7':
-    dependencies:
-      '@types/eslint': 9.6.1
-      '@types/estree': 1.0.8
-
-  '@types/eslint@9.6.1':
-    dependencies:
-      '@types/estree': 1.0.8
-      '@types/json-schema': 7.0.15
-
   '@types/esrecurse@4.3.1': {}
 
   '@types/estree-jsx@1.0.5':
@@ -12551,8 +10518,6 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.3
 
-  '@types/html-minifier-terser@6.1.0': {}
-
   '@types/http-errors@2.0.5': {}
 
   '@types/jscodeshift@17.3.0':
@@ -12590,8 +10555,6 @@ snapshots:
 
   '@types/mdurl@2.0.0': {}
 
-  '@types/mdx@2.0.13': {}
-
   '@types/mime@1.3.5': {}
 
   '@types/ms@2.1.0': {}
@@ -12625,14 +10588,10 @@ snapshots:
     dependencies:
       '@types/react': 19.2.17
 
-  '@types/resolve@1.20.6': {}
-
   '@types/sanitize-html@2.16.0':
     dependencies:
       htmlparser2: 8.0.2
 
-  '@types/semver@7.7.1': {}
-
   '@types/send@0.17.5':
     dependencies:
       '@types/mime': 1.3.5
@@ -12674,14 +10633,6 @@ snapshots:
       tinyrainbow: 3.1.0
       vitest: 4.1.8(@opentelemetry/api@1.9.1)(@types/node@22.12.0)(@vitest/coverage-v8@4.1.8)(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))
 
-  '@vitest/expect@3.2.4':
-    dependencies:
-      '@types/chai': 5.2.2
-      '@vitest/spy': 3.2.4
-      '@vitest/utils': 3.2.4
-      chai: 5.3.3
-      tinyrainbow: 2.0.0
-
   '@vitest/expect@4.1.8':
     dependencies:
       '@standard-schema/spec': 1.1.0
@@ -12699,10 +10650,6 @@ snapshots:
     optionalDependencies:
       vite: 8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3)
 
-  '@vitest/pretty-format@3.2.4':
-    dependencies:
-      tinyrainbow: 2.0.0
-
   '@vitest/pretty-format@4.1.8':
     dependencies:
       tinyrainbow: 3.1.0
@@ -12719,106 +10666,14 @@ snapshots:
       magic-string: 0.30.21
       pathe: 2.0.3
 
-  '@vitest/spy@3.2.4':
-    dependencies:
-      tinyspy: 4.0.3
-
   '@vitest/spy@4.1.8': {}
 
-  '@vitest/utils@3.2.4':
-    dependencies:
-      '@vitest/pretty-format': 3.2.4
-      loupe: 3.2.1
-      tinyrainbow: 2.0.0
-
   '@vitest/utils@4.1.8':
     dependencies:
       '@vitest/pretty-format': 4.1.8
       convert-source-map: 2.0.0
       tinyrainbow: 3.1.0
 
-  '@webassemblyjs/ast@1.14.1':
-    dependencies:
-      '@webassemblyjs/helper-numbers': 1.13.2
-      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
-
-  '@webassemblyjs/floating-point-hex-parser@1.13.2': {}
-
-  '@webassemblyjs/helper-api-error@1.13.2': {}
-
-  '@webassemblyjs/helper-buffer@1.14.1': {}
-
-  '@webassemblyjs/helper-numbers@1.13.2':
-    dependencies:
-      '@webassemblyjs/floating-point-hex-parser': 1.13.2
-      '@webassemblyjs/helper-api-error': 1.13.2
-      '@xtuc/long': 4.2.2
-
-  '@webassemblyjs/helper-wasm-bytecode@1.13.2': {}
-
-  '@webassemblyjs/helper-wasm-section@1.14.1':
-    dependencies:
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/helper-buffer': 1.14.1
-      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
-      '@webassemblyjs/wasm-gen': 1.14.1
-
-  '@webassemblyjs/ieee754@1.13.2':
-    dependencies:
-      '@xtuc/ieee754': 1.2.0
-
-  '@webassemblyjs/leb128@1.13.2':
-    dependencies:
-      '@xtuc/long': 4.2.2
-
-  '@webassemblyjs/utf8@1.13.2': {}
-
-  '@webassemblyjs/wasm-edit@1.14.1':
-    dependencies:
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/helper-buffer': 1.14.1
-      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
-      '@webassemblyjs/helper-wasm-section': 1.14.1
-      '@webassemblyjs/wasm-gen': 1.14.1
-      '@webassemblyjs/wasm-opt': 1.14.1
-      '@webassemblyjs/wasm-parser': 1.14.1
-      '@webassemblyjs/wast-printer': 1.14.1
-
-  '@webassemblyjs/wasm-gen@1.14.1':
-    dependencies:
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
-      '@webassemblyjs/ieee754': 1.13.2
-      '@webassemblyjs/leb128': 1.13.2
-      '@webassemblyjs/utf8': 1.13.2
-
-  '@webassemblyjs/wasm-opt@1.14.1':
-    dependencies:
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/helper-buffer': 1.14.1
-      '@webassemblyjs/wasm-gen': 1.14.1
-      '@webassemblyjs/wasm-parser': 1.14.1
-
-  '@webassemblyjs/wasm-parser@1.14.1':
-    dependencies:
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/helper-api-error': 1.13.2
-      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
-      '@webassemblyjs/ieee754': 1.13.2
-      '@webassemblyjs/leb128': 1.13.2
-      '@webassemblyjs/utf8': 1.13.2
-
-  '@webassemblyjs/wast-printer@1.14.1':
-    dependencies:
-      '@webassemblyjs/ast': 1.14.1
-      '@xtuc/long': 4.2.2
-
-  '@webcontainer/env@1.1.1': {}
-
-  '@xtuc/ieee754@1.2.0': {}
-
-  '@xtuc/long@4.2.2': {}
-
   '@zeit/schemas@2.36.0': {}
 
   abs-svg-path@0.1.1: {}
@@ -12837,10 +10692,6 @@ snapshots:
     dependencies:
       acorn: 8.16.0
 
-  acorn-import-phases@1.0.4(acorn@8.16.0):
-    dependencies:
-      acorn: 8.16.0
-
   acorn-jsx@5.3.2(acorn@8.16.0):
     dependencies:
       acorn: 8.16.0
@@ -12862,23 +10713,10 @@ snapshots:
       prompts: 2.4.2
       yaml: 2.8.3
 
-  ajv-formats@2.1.1(ajv@8.18.0):
-    optionalDependencies:
-      ajv: 8.18.0
-
   ajv-formats@3.0.1(ajv@8.18.0):
     optionalDependencies:
       ajv: 8.18.0
 
-  ajv-keywords@3.5.2(ajv@6.14.0):
-    dependencies:
-      ajv: 6.14.0
-
-  ajv-keywords@5.1.0(ajv@8.18.0):
-    dependencies:
-      ajv: 8.18.0
-      fast-deep-equal: 3.1.3
-
   ajv@6.14.0:
     dependencies:
       fast-deep-equal: 3.1.3
@@ -12901,8 +10739,6 @@ snapshots:
     dependencies:
       environment: 1.1.0
 
-  ansi-html-community@0.0.8: {}
-
   ansi-regex@5.0.1: {}
 
   ansi-regex@6.2.2: {}
@@ -12915,8 +10751,6 @@ snapshots:
     dependencies:
       color-convert: 2.0.1
 
-  ansi-styles@5.2.0: {}
-
   ansi-styles@6.2.3: {}
 
   ansis@4.2.0: {}
@@ -12936,16 +10770,8 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  aria-query@5.3.0:
-    dependencies:
-      dequal: 2.0.3
-
-  aria-query@5.3.2: {}
-
   array-flatten@1.1.1: {}
 
-  assertion-error@2.0.1: {}
-
   ast-kit@2.2.0:
     dependencies:
       '@babel/parser': 7.29.7
@@ -12978,16 +10804,6 @@ snapshots:
 
   attr-accept@2.2.5: {}
 
-  autoprefixer@10.4.21(postcss@8.5.25):
-    dependencies:
-      browserslist: 4.28.9
-      caniuse-lite: 1.0.30001759
-      fraction.js: 4.3.7
-      normalize-range: 0.1.2
-      picocolors: 1.1.1
-      postcss: 8.5.25
-      postcss-value-parser: 4.2.0
-
   axios@1.18.1:
     dependencies:
       follow-redirects: 1.16.0
@@ -13092,10 +10908,6 @@ snapshots:
       base64-js: 1.5.1
       ieee754: 1.2.1
 
-  bundle-name@4.1.0:
-    dependencies:
-      run-applescript: 7.1.0
-
   bytes@3.0.0: {}
 
   bytes@3.1.2: {}
@@ -13112,31 +10924,12 @@ snapshots:
       call-bind-apply-helpers: 1.0.2
       get-intrinsic: 1.3.0
 
-  callsites@3.1.0: {}
-
-  camel-case@4.1.2:
-    dependencies:
-      pascal-case: 3.1.2
-      tslib: 2.8.1
-
   camelcase@7.0.1: {}
 
-  caniuse-lite@1.0.30001759: {}
-
   caniuse-lite@1.0.30001810: {}
 
-  case-sensitive-paths-webpack-plugin@2.4.0: {}
-
   ccount@2.0.1: {}
 
-  chai@5.3.3:
-    dependencies:
-      assertion-error: 2.0.1
-      check-error: 2.1.1
-      deep-eql: 5.0.2
-      loupe: 3.2.1
-      pathval: 2.0.1
-
   chai@6.2.2: {}
 
   chalk-template@0.4.0:
@@ -13164,8 +10957,6 @@ snapshots:
 
   character-reference-invalid@2.0.1: {}
 
-  check-error@2.1.1: {}
-
   chokidar@3.6.0:
     dependencies:
       anymatch: 3.1.3
@@ -13180,24 +10971,12 @@ snapshots:
 
   chroma-js@3.2.0: {}
 
-  chromatic@16.10.0:
-    dependencies:
-      semver: 7.8.5
-
-  chrome-trace-event@1.0.4: {}
-
-  cjs-module-lexer@1.4.3: {}
-
   cjs-module-lexer@2.2.0: {}
 
   class-variance-authority@0.7.1:
     dependencies:
       clsx: 2.1.1
 
-  clean-css@5.3.3:
-    dependencies:
-      source-map: 0.6.1
-
   cli-boxes@3.0.0: {}
 
   cli-cursor@5.0.0:
@@ -13215,12 +10994,6 @@ snapshots:
       execa: 5.1.1
       is-wsl: 2.2.0
 
-  cliui@8.0.1:
-    dependencies:
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-      wrap-ansi: 7.0.0
-
   clone-deep@4.0.1:
     dependencies:
       is-plain-object: 2.0.4
@@ -13290,9 +11063,8 @@ snapshots:
 
   commander@14.0.2: {}
 
-  commander@2.20.3: {}
-
-  commander@8.3.0: {}
+  commander@2.20.3:
+    optional: true
 
   commondir@1.0.1: {}
 
@@ -13355,15 +11127,6 @@ snapshots:
       object-assign: 4.1.1
       vary: 1.1.2
 
-  cosmiconfig@8.3.6(typescript@5.8.3):
-    dependencies:
-      import-fresh: 3.3.1
-      js-yaml: 4.3.1
-      parse-json: 5.2.0
-      path-type: 4.0.0
-    optionalDependencies:
-      typescript: 5.8.3
-
   create-react-class@15.7.0:
     dependencies:
       loose-envify: 1.4.0
@@ -13377,27 +11140,6 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
-  css-loader@7.1.4(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)):
-    dependencies:
-      icss-utils: 5.1.0(postcss@8.5.25)
-      postcss: 8.5.25
-      postcss-modules-extract-imports: 3.1.0(postcss@8.5.25)
-      postcss-modules-local-by-default: 4.2.0(postcss@8.5.25)
-      postcss-modules-scope: 3.2.1(postcss@8.5.25)
-      postcss-modules-values: 4.0.0(postcss@8.5.25)
-      postcss-value-parser: 4.2.0
-      semver: 7.8.5
-    optionalDependencies:
-      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)
-
-  css-select@4.3.0:
-    dependencies:
-      boolbase: 1.0.0
-      css-what: 6.2.2
-      domhandler: 4.3.1
-      domutils: 2.8.0
-      nth-check: 2.1.1
-
   css-select@5.2.2:
     dependencies:
       boolbase: 1.0.0
@@ -13413,8 +11155,6 @@ snapshots:
 
   css-what@6.2.2: {}
 
-  css.escape@1.5.1: {}
-
   cssesc@3.0.0: {}
 
   csstype@3.2.3: {}
@@ -13457,8 +11197,6 @@ snapshots:
 
   d3-timer@3.0.1: {}
 
-  date-fns-jalali@4.1.0-0: {}
-
   date-fns@4.1.0: {}
 
   dayjs@1.11.23: {}
@@ -13483,27 +11221,14 @@ snapshots:
     dependencies:
       character-entities: 2.0.2
 
-  dedent@0.7.0: {}
-
   dedent@1.7.2: {}
 
-  deep-eql@5.0.2: {}
-
   deep-extend@0.6.0: {}
 
   deep-is@0.1.4: {}
 
   deepmerge@4.3.1: {}
 
-  default-browser-id@5.0.1: {}
-
-  default-browser@5.5.0:
-    dependencies:
-      bundle-name: 4.1.0
-      default-browser-id: 5.0.1
-
-  define-lazy-prop@3.0.0: {}
-
   defu@6.1.5: {}
 
   delayed-stream@1.0.0: {}
@@ -13514,8 +11239,6 @@ snapshots:
 
   depd@2.0.0: {}
 
-  dependency-graph@1.0.0: {}
-
   dequal@2.0.3: {}
 
   desandro-matches-selector@2.0.2: {}
@@ -13543,29 +11266,11 @@ snapshots:
 
   diff@5.2.2: {}
 
-  doctrine@3.0.0:
-    dependencies:
-      esutils: 2.0.3
-
-  dom-accessibility-api@0.5.16: {}
-
-  dom-accessibility-api@0.6.3: {}
-
-  dom-converter@0.2.0:
-    dependencies:
-      utila: 0.4.0
-
   dom-helpers@5.2.1:
     dependencies:
       '@babel/runtime': 7.29.7
       csstype: 3.2.3
 
-  dom-serializer@1.4.1:
-    dependencies:
-      domelementtype: 2.3.0
-      domhandler: 4.3.1
-      entities: 2.2.0
-
   dom-serializer@2.0.0:
     dependencies:
       domelementtype: 2.3.0
@@ -13582,10 +11287,6 @@ snapshots:
 
   domelementtype@3.0.0: {}
 
-  domhandler@4.3.1:
-    dependencies:
-      domelementtype: 2.3.0
-
   domhandler@5.0.3:
     dependencies:
       domelementtype: 2.3.0
@@ -13594,12 +11295,6 @@ snapshots:
     dependencies:
       domelementtype: 3.0.0
 
-  domutils@2.8.0:
-    dependencies:
-      dom-serializer: 1.4.1
-      domelementtype: 2.3.0
-      domhandler: 4.3.1
-
   domutils@3.2.2:
     dependencies:
       dom-serializer: 2.0.0
@@ -13612,11 +11307,6 @@ snapshots:
       domelementtype: 3.0.0
       domhandler: 6.0.1
 
-  dot-case@3.0.4:
-    dependencies:
-      no-case: 3.0.4
-      tslib: 2.8.1
-
   dot-prop@10.1.0:
     dependencies:
       type-fest: 5.7.0
@@ -13688,19 +11378,11 @@ snapshots:
 
   encodeurl@2.0.0: {}
 
-  endent@2.1.0:
-    dependencies:
-      dedent: 0.7.0
-      fast-json-parse: 1.0.3
-      objectorarray: 1.0.5
-
   enhanced-resolve@5.18.3:
     dependencies:
       graceful-fs: 4.2.11
       tapable: 2.3.0
 
-  entities@2.2.0: {}
-
   entities@4.5.0: {}
 
   entities@5.0.0: {}
@@ -13713,16 +11395,10 @@ snapshots:
 
   environment@1.1.0: {}
 
-  error-ex@1.3.4:
-    dependencies:
-      is-arrayish: 0.2.1
-
   es-define-property@1.0.1: {}
 
   es-errors@1.3.0: {}
 
-  es-module-lexer@1.7.0: {}
-
   es-module-lexer@2.3.1: {}
 
   es-object-atoms@1.1.1:
@@ -13786,11 +11462,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-scope@5.1.1:
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 4.3.0
-
   eslint-scope@9.1.2:
     dependencies:
       '@types/esrecurse': 4.3.1
@@ -13855,14 +11526,10 @@ snapshots:
     dependencies:
       estraverse: 5.3.0
 
-  estraverse@4.3.0: {}
-
   estraverse@5.3.0: {}
 
   estree-util-is-identifier-name@3.0.0: {}
 
-  estree-walker@2.0.2: {}
-
   estree-walker@3.0.3:
     dependencies:
       '@types/estree': 1.0.8
@@ -14004,8 +11671,6 @@ snapshots:
       merge2: 1.4.1
       micromatch: 4.0.8
 
-  fast-json-parse@1.0.3: {}
-
   fast-json-stable-stringify@2.1.0: {}
 
   fast-levenshtein@2.0.6: {}
@@ -14074,23 +11739,12 @@ snapshots:
       make-dir: 2.1.0
       pkg-dir: 3.0.0
 
-  find-cache-dir@3.3.2:
-    dependencies:
-      commondir: 1.0.1
-      make-dir: 3.1.0
-      pkg-dir: 4.2.0
-
   find-my-way-ts@0.1.6: {}
 
   find-up@3.0.0:
     dependencies:
       locate-path: 3.0.0
 
-  find-up@4.1.0:
-    dependencies:
-      locate-path: 5.0.0
-      path-exists: 4.0.0
-
   find-up@5.0.0:
     dependencies:
       locate-path: 6.0.0
@@ -14102,12 +11756,6 @@ snapshots:
 
   flairup@1.0.0: {}
 
-  flat-cache@3.2.0:
-    dependencies:
-      flatted: 3.4.2
-      keyv: 4.5.4
-      rimraf: 3.0.2
-
   flat-cache@4.0.1:
     dependencies:
       flatted: 3.4.2
@@ -14135,28 +11783,6 @@ snapshots:
       unicode-properties: 1.4.1
       unicode-trie: 2.0.0
 
-  foreground-child@3.3.1:
-    dependencies:
-      cross-spawn: 7.0.6
-      signal-exit: 4.1.0
-
-  fork-ts-checker-webpack-plugin@9.1.0(typescript@5.8.3)(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)):
-    dependencies:
-      '@babel/code-frame': 7.29.7
-      chalk: 4.1.2
-      chokidar: 3.6.0
-      cosmiconfig: 8.3.6(typescript@5.8.3)
-      deepmerge: 4.3.1
-      fs-extra: 10.1.0
-      memfs: 3.5.3
-      minimatch: 3.1.4
-      node-abort-controller: 3.1.1
-      schema-utils: 3.3.0
-      semver: 7.8.5
-      tapable: 2.3.0
-      typescript: 5.8.3
-      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)
-
   form-data@4.0.6:
     dependencies:
       asynckit: 0.4.0
@@ -14167,8 +11793,6 @@ snapshots:
 
   forwarded@0.2.0: {}
 
-  fraction.js@4.3.7: {}
-
   framer-motion@12.23.12(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
     dependencies:
       motion-dom: 12.23.12
@@ -14188,20 +11812,6 @@ snapshots:
     optionalDependencies:
       typescript: 5.8.3
 
-  fs-extra@10.1.0:
-    dependencies:
-      graceful-fs: 4.2.11
-      jsonfile: 6.2.0
-      universalify: 2.0.1
-
-  fs-extra@11.3.1:
-    dependencies:
-      graceful-fs: 4.2.11
-      jsonfile: 6.2.0
-      universalify: 2.0.1
-
-  fs-monkey@1.1.0: {}
-
   fsevents@2.3.3:
     optional: true
 
@@ -14209,8 +11819,6 @@ snapshots:
 
   gensync@1.0.0-beta.2: {}
 
-  get-caller-file@2.0.5: {}
-
   get-east-asian-width@1.4.0: {}
 
   get-intrinsic@1.3.0:
@@ -14249,17 +11857,6 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
-  glob-to-regexp@0.4.1: {}
-
-  glob@11.1.0:
-    dependencies:
-      foreground-child: 3.3.1
-      jackspeak: 4.2.3
-      minimatch: 10.2.3
-      minipass: 7.1.2
-      package-json-from-dist: 1.0.1
-      path-scurry: 2.0.2
-
   globrex@0.1.2: {}
 
   gopd@1.2.0: {}
@@ -14429,20 +12026,8 @@ snapshots:
 
   hsl-to-rgb-for-reals@1.1.1: {}
 
-  html-entities@2.6.0: {}
-
   html-escaper@2.0.2: {}
 
-  html-minifier-terser@6.1.0:
-    dependencies:
-      camel-case: 4.1.2
-      clean-css: 5.3.3
-      commander: 8.3.0
-      he: 1.2.0
-      param-case: 3.0.4
-      relateurl: 0.2.7
-      terser: 5.43.1
-
   html-parse-stringify@3.0.1:
     dependencies:
       void-elements: 3.1.0
@@ -14451,16 +12036,6 @@ snapshots:
 
   html-void-elements@3.0.0: {}
 
-  html-webpack-plugin@5.6.4(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)):
-    dependencies:
-      '@types/html-minifier-terser': 6.1.0
-      html-minifier-terser: 6.1.0
-      lodash: 4.18.1
-      pretty-error: 4.0.0
-      tapable: 2.3.0
-    optionalDependencies:
-      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)
-
   htmlparser2@12.0.0:
     dependencies:
       domelementtype: 3.0.0
@@ -14468,13 +12043,6 @@ snapshots:
       domutils: 4.0.2
       entities: 8.0.0
 
-  htmlparser2@6.1.0:
-    dependencies:
-      domelementtype: 2.3.0
-      domhandler: 4.3.1
-      domutils: 2.8.0
-      entities: 2.2.0
-
   htmlparser2@8.0.2:
     dependencies:
       domelementtype: 2.3.0
@@ -14529,10 +12097,6 @@ snapshots:
     dependencies:
       safer-buffer: 2.1.2
 
-  icss-utils@5.1.0(postcss@8.5.25):
-    dependencies:
-      postcss: 8.5.25
-
   ieee754@1.2.1: {}
 
   ignore@5.3.2: {}
@@ -14541,11 +12105,6 @@ snapshots:
     dependencies:
       ev-emitter: 1.1.1
 
-  import-fresh@3.3.1:
-    dependencies:
-      parent-module: 1.0.1
-      resolve-from: 4.0.0
-
   import-in-the-middle@3.0.1:
     dependencies:
       acorn: 8.16.0
@@ -14555,8 +12114,6 @@ snapshots:
 
   imurmurhash@0.1.4: {}
 
-  indent-string@4.0.0: {}
-
   inherits@2.0.4: {}
 
   ini@1.3.8: {}
@@ -14613,24 +12170,16 @@ snapshots:
       is-alphabetical: 2.0.1
       is-decimal: 2.0.1
 
-  is-arrayish@0.2.1: {}
-
   is-arrayish@0.3.4: {}
 
   is-binary-path@2.1.0:
     dependencies:
       binary-extensions: 2.3.0
 
-  is-core-module@2.16.1:
-    dependencies:
-      hasown: 2.0.4
-
   is-decimal@2.0.1: {}
 
   is-docker@2.2.1: {}
 
-  is-docker@3.0.0: {}
-
   is-emoji-supported@0.0.5: {}
 
   is-extglob@2.1.1: {}
@@ -14647,10 +12196,6 @@ snapshots:
 
   is-hexadecimal@2.0.1: {}
 
-  is-inside-container@1.0.0:
-    dependencies:
-      is-docker: 3.0.0
-
   is-number@7.0.0: {}
 
   is-plain-obj@4.1.0: {}
@@ -14673,10 +12218,6 @@ snapshots:
     dependencies:
       is-docker: 2.2.1
 
-  is-wsl@3.1.1:
-    dependencies:
-      is-inside-container: 1.0.0
-
   isbot@5.2.1: {}
 
   isexe@2.0.0: {}
@@ -14698,30 +12239,16 @@ snapshots:
       html-escaper: 2.0.2
       istanbul-lib-report: 3.0.1
 
-  jackspeak@4.2.3:
-    dependencies:
-      '@isaacs/cliui': 9.0.0
-
   jay-peg@1.1.1:
     dependencies:
       restructure: 3.0.2
 
-  jest-worker@27.5.1:
-    dependencies:
-      '@types/node': 22.12.0
-      merge-stream: 2.0.0
-      supports-color: 8.1.1
-
   jiti@2.7.0: {}
 
   js-tokens@10.0.0: {}
 
   js-tokens@4.0.0: {}
 
-  js-yaml@4.3.1:
-    dependencies:
-      argparse: 2.0.1
-
   jscodeshift@17.3.0:
     dependencies:
       '@babel/core': 7.29.7
@@ -14749,8 +12276,6 @@ snapshots:
 
   json-buffer@3.0.1: {}
 
-  json-parse-even-better-errors@2.3.1: {}
-
   json-schema-traverse@0.4.1: {}
 
   json-schema-traverse@1.0.0: {}
@@ -14763,12 +12288,6 @@ snapshots:
 
   jsonc-parser@3.3.1: {}
 
-  jsonfile@6.2.0:
-    dependencies:
-      universalify: 2.0.1
-    optionalDependencies:
-      graceful-fs: 4.2.11
-
   jsx-dom-cjs@8.1.6:
     dependencies:
       csstype: 3.2.3
@@ -14898,15 +12417,11 @@ snapshots:
       lightningcss-win32-arm64-msvc: 1.32.0
       lightningcss-win32-x64-msvc: 1.32.0
 
-  lilconfig@3.1.3: {}
-
   linebreak@1.1.0:
     dependencies:
       base64-js: 0.0.8
       unicode-trie: 2.0.0
 
-  lines-and-columns@1.2.4: {}
-
   linkify-it@5.0.2:
     dependencies:
       uc.micro: 2.1.0
@@ -14932,17 +12447,11 @@ snapshots:
       rfdc: 1.4.1
       wrap-ansi: 9.0.0
 
-  loader-runner@4.3.1: {}
-
   locate-path@3.0.0:
     dependencies:
       p-locate: 3.0.0
       path-exists: 3.0.0
 
-  locate-path@5.0.0:
-    dependencies:
-      p-locate: 4.1.0
-
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
@@ -14982,20 +12491,12 @@ snapshots:
     dependencies:
       js-tokens: 4.0.0
 
-  loupe@3.2.1: {}
-
-  lower-case@2.0.2:
-    dependencies:
-      tslib: 2.8.1
-
   lowlight@3.3.0:
     dependencies:
       '@types/hast': 3.0.4
       devlop: 1.1.0
       highlight.js: 11.11.1
 
-  lru-cache@11.5.0: {}
-
   lru-cache@5.1.1:
     dependencies:
       yallist: 3.1.1
@@ -15008,8 +12509,6 @@ snapshots:
     dependencies:
       react: 19.2.8
 
-  lz-string@1.5.0: {}
-
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -15025,10 +12524,6 @@ snapshots:
       pify: 4.0.1
       semver: 5.7.2
 
-  make-dir@3.1.0:
-    dependencies:
-      semver: 6.3.1
-
   make-dir@4.0.0:
     dependencies:
       semver: 7.8.5
@@ -15220,10 +12715,6 @@ snapshots:
 
   media-typer@1.1.1: {}
 
-  memfs@3.5.3:
-    dependencies:
-      fs-monkey: 1.1.0
-
   merge-descriptors@1.0.3: {}
 
   merge-descriptors@2.0.0: {}
@@ -15456,8 +12947,6 @@ snapshots:
 
   mimic-function@5.0.1: {}
 
-  min-indent@1.0.1: {}
-
   minimatch@10.2.3:
     dependencies:
       brace-expansion: 5.0.9
@@ -15468,8 +12957,6 @@ snapshots:
 
   minimist@1.2.8: {}
 
-  minipass@7.1.2: {}
-
   mobx-react-lite@4.1.1(mobx@6.12.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
     dependencies:
       mobx: 6.12.0
@@ -15555,13 +13042,6 @@ snapshots:
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
 
-  no-case@3.0.4:
-    dependencies:
-      lower-case: 2.0.2
-      tslib: 2.8.1
-
-  node-abort-controller@3.1.1: {}
-
   node-addon-api@7.1.1: {}
 
   node-gyp-build-optional-packages@5.2.2:
@@ -15578,8 +13058,6 @@ snapshots:
 
   normalize-path@3.0.0: {}
 
-  normalize-range@0.1.2: {}
-
   normalize-svg-path@1.1.0:
     dependencies:
       svg-arc-to-cubic-bezier: 3.2.0
@@ -15596,8 +13074,6 @@ snapshots:
 
   object-inspect@1.13.4: {}
 
-  objectorarray@1.0.5: {}
-
   obug@2.1.1: {}
 
   on-finished@2.4.1:
@@ -15622,13 +13098,6 @@ snapshots:
     dependencies:
       mimic-function: 5.0.1
 
-  open@10.2.0:
-    dependencies:
-      default-browser: 5.5.0
-      define-lazy-prop: 3.0.0
-      is-inside-container: 1.0.0
-      wsl-utils: 0.1.0
-
   optionator@0.9.4:
     dependencies:
       deep-is: 0.1.4
@@ -15646,31 +13115,6 @@ snapshots:
       fizzy-ui-utils: 2.0.7
       get-size: 2.0.3
 
-  oxc-parser@0.127.0:
-    dependencies:
-      '@oxc-project/types': 0.127.0
-    optionalDependencies:
-      '@oxc-parser/binding-android-arm-eabi': 0.127.0
-      '@oxc-parser/binding-android-arm64': 0.127.0
-      '@oxc-parser/binding-darwin-arm64': 0.127.0
-      '@oxc-parser/binding-darwin-x64': 0.127.0
-      '@oxc-parser/binding-freebsd-x64': 0.127.0
-      '@oxc-parser/binding-linux-arm-gnueabihf': 0.127.0
-      '@oxc-parser/binding-linux-arm-musleabihf': 0.127.0
-      '@oxc-parser/binding-linux-arm64-gnu': 0.127.0
-      '@oxc-parser/binding-linux-arm64-musl': 0.127.0
-      '@oxc-parser/binding-linux-ppc64-gnu': 0.127.0
-      '@oxc-parser/binding-linux-riscv64-gnu': 0.127.0
-      '@oxc-parser/binding-linux-riscv64-musl': 0.127.0
-      '@oxc-parser/binding-linux-s390x-gnu': 0.127.0
-      '@oxc-parser/binding-linux-x64-gnu': 0.127.0
-      '@oxc-parser/binding-linux-x64-musl': 0.127.0
-      '@oxc-parser/binding-openharmony-arm64': 0.127.0
-      '@oxc-parser/binding-wasm32-wasi': 0.127.0
-      '@oxc-parser/binding-win32-arm64-msvc': 0.127.0
-      '@oxc-parser/binding-win32-ia32-msvc': 0.127.0
-      '@oxc-parser/binding-win32-x64-msvc': 0.127.0
-
   oxc-parser@0.132.0:
     dependencies:
       '@oxc-project/types': 0.132.0
@@ -15805,10 +13249,6 @@ snapshots:
     dependencies:
       p-limit: 2.3.0
 
-  p-locate@4.1.0:
-    dependencies:
-      p-limit: 2.3.0
-
   p-locate@5.0.0:
     dependencies:
       p-limit: 3.1.0
@@ -15819,19 +13259,8 @@ snapshots:
 
   p-try@2.2.0: {}
 
-  package-json-from-dist@1.0.1: {}
-
   pako@0.2.9: {}
 
-  param-case@3.0.4:
-    dependencies:
-      dot-case: 3.0.4
-      tslib: 2.8.1
-
-  parent-module@1.0.1:
-    dependencies:
-      callsites: 3.1.0
-
   parse-entities@4.0.2:
     dependencies:
       '@types/unist': 2.0.11
@@ -15842,13 +13271,6 @@ snapshots:
       is-decimal: 2.0.1
       is-hexadecimal: 2.0.1
 
-  parse-json@5.2.0:
-    dependencies:
-      '@babel/code-frame': 7.29.7
-      error-ex: 1.3.4
-      json-parse-even-better-errors: 2.3.1
-      lines-and-columns: 1.2.4
-
   parse-srcset@1.0.2: {}
 
   parse-svg-path@0.1.2: {}
@@ -15859,11 +13281,6 @@ snapshots:
 
   parseurl@1.3.3: {}
 
-  pascal-case@3.1.2:
-    dependencies:
-      no-case: 3.0.4
-      tslib: 2.8.1
-
   path-exists@3.0.0: {}
 
   path-exists@4.0.0: {}
@@ -15872,23 +13289,12 @@ snapshots:
 
   path-key@3.1.1: {}
 
-  path-parse@1.0.7: {}
-
-  path-scurry@2.0.2:
-    dependencies:
-      lru-cache: 11.5.0
-      minipass: 7.1.2
-
   path-to-regexp@0.1.13: {}
 
   path-to-regexp@8.4.2: {}
 
-  path-type@4.0.0: {}
-
   pathe@2.0.3: {}
 
-  pathval@2.0.1: {}
-
   pdf-parse@2.4.5:
     dependencies:
       '@napi-rs/canvas': 0.1.80
@@ -15913,8 +13319,6 @@ snapshots:
 
   pidtree@0.6.0: {}
 
-  pify@2.3.0: {}
-
   pify@4.0.1: {}
 
   pirates@4.0.7: {}
@@ -15923,10 +13327,6 @@ snapshots:
     dependencies:
       find-up: 3.0.0
 
-  pkg-dir@4.2.0:
-    dependencies:
-      find-up: 4.1.0
-
   pkg-types@2.3.1:
     dependencies:
       confbox: 0.2.4
@@ -15937,80 +13337,11 @@ snapshots:
     dependencies:
       fflate: 0.8.3
 
-  postcss-cli@11.0.1(jiti@2.7.0)(postcss@8.5.25)(tsx@4.20.6):
-    dependencies:
-      chokidar: 3.6.0
-      dependency-graph: 1.0.0
-      fs-extra: 11.3.1
-      picocolors: 1.1.1
-      postcss: 8.5.25
-      postcss-load-config: 5.1.0(jiti@2.7.0)(postcss@8.5.25)(tsx@4.20.6)
-      postcss-reporter: 7.1.0(postcss@8.5.25)
-      pretty-hrtime: 1.0.3
-      read-cache: 1.0.0
-      slash: 5.1.0
-      tinyglobby: 0.2.17
-      yargs: 17.7.2
-    transitivePeerDependencies:
-      - jiti
-      - tsx
-
-  postcss-load-config@5.1.0(jiti@2.7.0)(postcss@8.5.25)(tsx@4.20.6):
-    dependencies:
-      lilconfig: 3.1.3
-      yaml: 2.8.3
-    optionalDependencies:
-      jiti: 2.7.0
-      postcss: 8.5.25
-      tsx: 4.20.6
-
-  postcss-modules-extract-imports@3.1.0(postcss@8.5.25):
-    dependencies:
-      postcss: 8.5.25
-
-  postcss-modules-local-by-default@4.2.0(postcss@8.5.25):
-    dependencies:
-      icss-utils: 5.1.0(postcss@8.5.25)
-      postcss: 8.5.25
-      postcss-selector-parser: 7.1.3
-      postcss-value-parser: 4.2.0
-
-  postcss-modules-scope@3.2.1(postcss@8.5.25):
-    dependencies:
-      postcss: 8.5.25
-      postcss-selector-parser: 7.1.3
-
-  postcss-modules-values@4.0.0(postcss@8.5.25):
-    dependencies:
-      icss-utils: 5.1.0(postcss@8.5.25)
-      postcss: 8.5.25
-
-  postcss-nested@6.2.0(postcss@8.5.25):
-    dependencies:
-      postcss: 8.5.25
-      postcss-selector-parser: 6.1.2
-
-  postcss-reporter@7.1.0(postcss@8.5.25):
-    dependencies:
-      picocolors: 1.1.1
-      postcss: 8.5.25
-      thenby: 1.3.4
-
   postcss-selector-parser@6.0.10:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
-  postcss-selector-parser@6.1.2:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-
-  postcss-selector-parser@7.1.3:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-
   postcss-value-parser@4.2.0: {}
 
   postcss@8.5.25:
@@ -16023,19 +13354,6 @@ snapshots:
 
   prettier@3.9.6: {}
 
-  pretty-error@4.0.0:
-    dependencies:
-      lodash: 4.18.1
-      renderkid: 3.0.0
-
-  pretty-format@27.5.1:
-    dependencies:
-      ansi-regex: 5.0.1
-      ansi-styles: 5.2.0
-      react-is: 19.2.8
-
-  pretty-hrtime@1.0.3: {}
-
   prompts@2.4.2:
     dependencies:
       kleur: 3.0.3
@@ -16239,47 +13557,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.17
 
-  react-day-picker@9.5.0(react@19.2.8):
-    dependencies:
-      '@date-fns/tz': 1.4.1
-      date-fns: 4.1.0
-      date-fns-jalali: 4.1.0-0
-      react: 19.2.8
-
-  react-docgen-typescript@2.4.0(typescript@5.8.3):
-    dependencies:
-      typescript: 5.8.3
-
-  react-docgen@7.1.1:
-    dependencies:
-      '@babel/core': 7.29.7
-      '@babel/traverse': 7.29.7
-      '@babel/types': 7.29.7
-      '@types/babel__core': 7.20.5
-      '@types/babel__traverse': 7.28.0
-      '@types/doctrine': 0.0.9
-      '@types/resolve': 1.20.6
-      doctrine: 3.0.0
-      resolve: 1.22.10
-      strip-indent: 4.1.0
-    transitivePeerDependencies:
-      - supports-color
-
-  react-docgen@8.0.3:
-    dependencies:
-      '@babel/core': 7.29.7
-      '@babel/traverse': 7.29.7
-      '@babel/types': 7.29.7
-      '@types/babel__core': 7.20.5
-      '@types/babel__traverse': 7.28.0
-      '@types/doctrine': 0.0.9
-      '@types/resolve': 1.20.6
-      doctrine: 3.0.0
-      resolve: 1.22.10
-      strip-indent: 4.1.0
-    transitivePeerDependencies:
-      - supports-color
-
   react-doctor@0.4.2(eslint@10.4.1(jiti@2.7.0)):
     dependencies:
       '@babel/code-frame': 7.29.7
@@ -16452,10 +13729,6 @@ snapshots:
       lodash: 4.18.1
       react: 19.2.8
 
-  read-cache@1.0.0:
-    dependencies:
-      pify: 2.3.0
-
   readable-stream@3.6.2:
     dependencies:
       inherits: 2.0.4
@@ -16491,11 +13764,6 @@ snapshots:
       tiny-invariant: 1.3.3
       victory-vendor: 36.9.2
 
-  redent@3.0.0:
-    dependencies:
-      indent-string: 4.0.0
-      strip-indent: 3.0.0
-
   redis-errors@1.2.0: {}
 
   redis-parser@3.0.0:
@@ -16536,8 +13804,6 @@ snapshots:
       unified: 11.0.5
       vfile: 6.0.3
 
-  relateurl@0.2.7: {}
-
   remark-gfm@4.0.1:
     dependencies:
       '@types/mdast': 4.0.4
@@ -16572,16 +13838,6 @@ snapshots:
       mdast-util-to-markdown: 2.1.2
       unified: 11.0.5
 
-  renderkid@3.0.0:
-    dependencies:
-      css-select: 4.3.0
-      dom-converter: 0.2.0
-      htmlparser2: 6.1.0
-      lodash: 4.18.1
-      strip-ansi: 6.0.1
-
-  require-directory@2.1.1: {}
-
   require-from-string@2.0.2: {}
 
   require-in-the-middle@8.0.1:
@@ -16593,16 +13849,8 @@ snapshots:
 
   reselect@5.3.0: {}
 
-  resolve-from@4.0.0: {}
-
   resolve-pkg-maps@1.0.0: {}
 
-  resolve@1.22.10:
-    dependencies:
-      is-core-module: 2.16.1
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-
   restore-cursor@5.1.0:
     dependencies:
       onetime: 7.0.0
@@ -16614,10 +13862,6 @@ snapshots:
 
   rfdc@1.4.1: {}
 
-  rimraf@3.0.2:
-    dependencies:
-      glob: 11.1.0
-
   rolldown-plugin-dts@0.17.8(oxc-resolver@11.20.0)(rolldown@1.0.0-beta.46(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3))(typescript@5.8.3):
     dependencies:
       '@babel/generator': 7.29.7
@@ -16691,8 +13935,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  run-applescript@7.1.0: {}
-
   run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
@@ -16719,19 +13961,6 @@ snapshots:
 
   scheduler@0.27.0: {}
 
-  schema-utils@3.3.0:
-    dependencies:
-      '@types/json-schema': 7.0.15
-      ajv: 6.14.0
-      ajv-keywords: 3.5.2(ajv@6.14.0)
-
-  schema-utils@4.3.3:
-    dependencies:
-      '@types/json-schema': 7.0.15
-      ajv: 8.18.0
-      ajv-formats: 2.1.1(ajv@8.18.0)
-      ajv-keywords: 5.1.0(ajv@8.18.0)
-
   scroll-into-view-if-needed@3.1.0:
     dependencies:
       compute-scroll-into-view: 3.1.1
@@ -16905,8 +14134,6 @@ snapshots:
 
   sisteransi@1.0.5: {}
 
-  slash@5.1.0: {}
-
   slice-ansi@7.1.2:
     dependencies:
       ansi-styles: 6.2.3
@@ -16939,33 +14166,6 @@ snapshots:
 
   std-env@4.1.0: {}
 
-  storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
-    dependencies:
-      '@storybook/global': 5.0.0
-      '@storybook/icons': 2.0.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@testing-library/jest-dom': 6.9.1
-      '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.0)
-      '@vitest/expect': 3.2.4
-      '@vitest/spy': 3.2.4
-      '@webcontainer/env': 1.1.1
-      esbuild: 0.28.1
-      open: 10.2.0
-      oxc-parser: 0.127.0
-      oxc-resolver: 11.20.0
-      recast: 0.23.11
-      semver: 7.8.5
-      use-sync-external-store: 1.6.0(react@19.2.8)
-      ws: 8.21.0
-    optionalDependencies:
-      '@types/react': 19.2.17
-      prettier: 3.9.6
-    transitivePeerDependencies:
-      - '@testing-library/dom'
-      - bufferutil
-      - react
-      - react-dom
-      - utf-8-validate
-
   string-argv@0.3.2: {}
 
   string-width@4.2.3:
@@ -17008,16 +14208,8 @@ snapshots:
     dependencies:
       ansi-regex: 6.2.2
 
-  strip-bom@3.0.0: {}
-
   strip-final-newline@2.0.0: {}
 
-  strip-indent@3.0.0:
-    dependencies:
-      min-indent: 1.0.1
-
-  strip-indent@4.1.0: {}
-
   strip-json-comments@2.0.1: {}
 
   strtok3@10.3.4:
@@ -17030,10 +14222,6 @@ snapshots:
 
   stubborn-utils@1.0.2: {}
 
-  style-loader@4.0.0(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)):
-    dependencies:
-      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)
-
   style-to-js@1.1.21:
     dependencies:
       style-to-object: 1.0.14
@@ -17050,20 +14238,8 @@ snapshots:
     dependencies:
       has-flag: 4.0.0
 
-  supports-color@8.1.1:
-    dependencies:
-      has-flag: 4.0.0
-
-  supports-preserve-symlinks-flag@1.0.0: {}
-
   svg-arc-to-cubic-bezier@3.2.0: {}
 
-  swc-loader@0.2.6(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)):
-    dependencies:
-      '@swc/core': 1.13.5(@swc/helpers@0.5.17)
-      '@swc/counter': 0.1.3
-      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)
-
   swr@2.4.2(react@19.2.8):
     dependencies:
       dequal: 2.0.3
@@ -17080,40 +14256,16 @@ snapshots:
 
   tapable@2.3.0: {}
 
-  terser-webpack-plugin@5.6.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)):
-    dependencies:
-      '@jridgewell/trace-mapping': 0.3.31
-      jest-worker: 27.5.1
-      schema-utils: 4.3.3
-      terser: 5.43.1
-      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)
-    optionalDependencies:
-      '@swc/core': 1.13.5(@swc/helpers@0.5.17)
-      esbuild: 0.28.1
-      postcss: 8.5.25
-
-  terser-webpack-plugin@5.6.1(esbuild@0.28.1)(webpack@5.104.1(esbuild@0.28.1)):
-    dependencies:
-      '@jridgewell/trace-mapping': 0.3.31
-      jest-worker: 27.5.1
-      schema-utils: 4.3.3
-      terser: 5.43.1
-      webpack: 5.104.1(esbuild@0.28.1)
-    optionalDependencies:
-      esbuild: 0.28.1
-    optional: true
-
   terser@5.43.1:
     dependencies:
       '@jridgewell/source-map': 0.3.11
       acorn: 8.16.0
       commander: 2.20.3
       source-map-support: 0.5.21
+    optional: true
 
   text-hex@1.0.0: {}
 
-  thenby@1.3.4: {}
-
   tiny-inflate@1.0.3: {}
 
   tiny-invariant@1.3.3: {}
@@ -17131,12 +14283,8 @@ snapshots:
 
   tinypool@2.1.0: {}
 
-  tinyrainbow@2.0.0: {}
-
   tinyrainbow@3.1.0: {}
 
-  tinyspy@4.0.3: {}
-
   tippy.js@6.3.7:
     dependencies:
       '@popperjs/core': 2.11.8
@@ -17175,18 +14323,10 @@ snapshots:
 
   trough@2.2.0: {}
 
-  ts-dedent@2.2.0: {}
-
   tsconfck@3.1.6(typescript@5.8.3):
     optionalDependencies:
       typescript: 5.8.3
 
-  tsconfig-paths@4.2.0:
-    dependencies:
-      json5: 2.2.3
-      minimist: 1.2.8
-      strip-bom: 3.0.0
-
   tsdown@0.16.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)(oxc-resolver@11.20.0)(typescript@5.8.3):
     dependencies:
       ansis: 4.2.0
@@ -17324,17 +14464,8 @@ snapshots:
       unist-util-is: 6.0.0
       unist-util-visit-parents: 6.0.1
 
-  universalify@2.0.1: {}
-
   unpipe@1.0.0: {}
 
-  unplugin@2.3.11:
-    dependencies:
-      '@jridgewell/remapping': 2.3.5
-      acorn: 8.16.0
-      picomatch: 2.3.2
-      webpack-virtual-modules: 0.6.2
-
   update-browserslist-db@1.3.2(browserslist@4.28.9):
     dependencies:
       browserslist: 4.28.9
@@ -17376,8 +14507,6 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
-  utila@0.4.0: {}
-
   utils-merge@1.0.1: {}
 
   uuid@14.0.0: {}
@@ -17501,116 +14630,8 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
-  watchpack@2.4.4:
-    dependencies:
-      glob-to-regexp: 0.4.1
-      graceful-fs: 4.2.11
-
   web-namespaces@2.0.1: {}
 
-  webpack-dev-middleware@6.1.3(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)):
-    dependencies:
-      colorette: 2.0.20
-      memfs: 3.5.3
-      mime-types: 2.1.35
-      range-parser: 1.2.1
-      schema-utils: 4.3.3
-    optionalDependencies:
-      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)
-
-  webpack-hot-middleware@2.26.1:
-    dependencies:
-      ansi-html-community: 0.0.8
-      html-entities: 2.6.0
-      strip-ansi: 6.0.1
-
-  webpack-sources@3.3.3: {}
-
-  webpack-virtual-modules@0.6.2: {}
-
-  webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25):
-    dependencies:
-      '@types/eslint-scope': 3.7.7
-      '@types/estree': 1.0.8
-      '@types/json-schema': 7.0.15
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/wasm-edit': 1.14.1
-      '@webassemblyjs/wasm-parser': 1.14.1
-      acorn: 8.16.0
-      acorn-import-phases: 1.0.4(acorn@8.16.0)
-      browserslist: 4.28.9
-      chrome-trace-event: 1.0.4
-      enhanced-resolve: 5.18.3
-      es-module-lexer: 2.3.1
-      eslint-scope: 5.1.1
-      events: 3.3.0
-      glob-to-regexp: 0.4.1
-      graceful-fs: 4.2.11
-      json-parse-even-better-errors: 2.3.1
-      loader-runner: 4.3.1
-      mime-types: 2.1.35
-      neo-async: 2.6.2
-      schema-utils: 4.3.3
-      tapable: 2.3.0
-      terser-webpack-plugin: 5.6.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))
-      watchpack: 2.4.4
-      webpack-sources: 3.3.3
-    transitivePeerDependencies:
-      - '@minify-html/node'
-      - '@swc/core'
-      - '@swc/css'
-      - '@swc/html'
-      - clean-css
-      - cssnano
-      - csso
-      - esbuild
-      - html-minifier-terser
-      - lightningcss
-      - postcss
-      - uglify-js
-
-  webpack@5.104.1(esbuild@0.28.1):
-    dependencies:
-      '@types/eslint-scope': 3.7.7
-      '@types/estree': 1.0.8
-      '@types/json-schema': 7.0.15
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/wasm-edit': 1.14.1
-      '@webassemblyjs/wasm-parser': 1.14.1
-      acorn: 8.16.0
-      acorn-import-phases: 1.0.4(acorn@8.16.0)
-      browserslist: 4.28.9
-      chrome-trace-event: 1.0.4
-      enhanced-resolve: 5.18.3
-      es-module-lexer: 2.3.1
-      eslint-scope: 5.1.1
-      events: 3.3.0
-      glob-to-regexp: 0.4.1
-      graceful-fs: 4.2.11
-      json-parse-even-better-errors: 2.3.1
-      loader-runner: 4.3.1
-      mime-types: 2.1.35
-      neo-async: 2.6.2
-      schema-utils: 4.3.3
-      tapable: 2.3.0
-      terser-webpack-plugin: 5.6.1(esbuild@0.28.1)(webpack@5.104.1(esbuild@0.28.1))
-      watchpack: 2.4.4
-      webpack-sources: 3.3.3
-    transitivePeerDependencies:
-      - '@minify-html/node'
-      - '@swc/core'
-      - '@swc/css'
-      - '@swc/html'
-      - clean-css
-      - cssnano
-      - csso
-      - esbuild
-      - html-minifier-terser
-      - lightningcss
-      - postcss
-      - uglify-js
-    optional: true
-
   when-exit@2.1.5: {}
 
   which@2.0.2:
@@ -17648,12 +14669,6 @@ snapshots:
 
   word-wrap@1.2.5: {}
 
-  wrap-ansi@7.0.0:
-    dependencies:
-      ansi-styles: 4.3.0
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-
   wrap-ansi@8.1.0:
     dependencies:
       ansi-styles: 6.2.3
@@ -17677,10 +14692,6 @@ snapshots:
 
   ws@8.21.0: {}
 
-  wsl-utils@0.1.0:
-    dependencies:
-      is-wsl: 3.1.1
-
   y-indexeddb@9.0.12(yjs@13.6.27):
     dependencies:
       lib0: 0.2.114
@@ -17700,24 +14711,10 @@ snapshots:
       lib0: 0.2.114
       yjs: 13.6.27
 
-  y18n@5.0.8: {}
-
   yallist@3.1.1: {}
 
   yaml@2.8.3: {}
 
-  yargs-parser@21.1.1: {}
-
-  yargs@17.7.2:
-    dependencies:
-      cliui: 8.0.1
-      escalade: 3.2.0
-      get-caller-file: 2.0.5
-      require-directory: 2.1.1
-      string-width: 4.2.3
-      y18n: 5.0.8
-      yargs-parser: 21.1.1
-
   yjs@13.6.27:
     dependencies:
       lib0: 0.2.114