diff --git a/packages/ui/src/dropdowns/custom-menu.tsx b/packages/ui/src/dropdowns/custom-menu.tsx
new file mode 100644
index 000000000..729c29bab
--- /dev/null
+++ b/packages/ui/src/dropdowns/custom-menu.tsx
@@ -0,0 +1,152 @@
+import * as React from "react";
+
+// react-poppper
+import { usePopper } from "react-popper";
+// headless ui
+import { Menu } from "@headlessui/react";
+// type
+import { ICustomMenuDropdownProps, ICustomMenuItemProps } from "./helper";
+// icons
+import { ChevronDown, MoreHorizontal } from "lucide-react";
+
+const CustomMenu = (props: ICustomMenuDropdownProps) => {
+  const {
+    buttonClassName = "",
+    customButtonClassName = "",
+    placement,
+    children,
+    className = "",
+    customButton,
+    disabled = false,
+    ellipsis = false,
+    label,
+    maxHeight = "md",
+    noBorder = false,
+    noChevron = false,
+    optionsClassName = "",
+    verticalEllipsis = false,
+    width = "auto",
+    menuButtonOnClick,
+  } = props;
+
+  const [referenceElement, setReferenceElement] =
+    React.useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] =
+    React.useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+  });
+  return (
+    <Menu as="div" className={`relative w-min text-left ${className}`}>
+      {({ open }) => (
+        <>
+          {customButton ? (
+            <Menu.Button as={React.Fragment}>
+              <button
+                ref={setReferenceElement}
+                type="button"
+                onClick={menuButtonOnClick}
+                className={customButtonClassName}
+              >
+                {customButton}
+              </button>
+            </Menu.Button>
+          ) : (
+            <>
+              {ellipsis || verticalEllipsis ? (
+                <Menu.Button as={React.Fragment}>
+                  <button
+                    ref={setReferenceElement}
+                    type="button"
+                    onClick={menuButtonOnClick}
+                    disabled={disabled}
+                    className={`relative grid place-items-center rounded p-1 text-custom-text-200 hover:text-custom-text-100 outline-none ${
+                      disabled
+                        ? "cursor-not-allowed"
+                        : "cursor-pointer hover:bg-custom-background-80"
+                    } ${buttonClassName}`}
+                  >
+                    <MoreHorizontal
+                      className={`h-3.5 w-3.5 ${
+                        verticalEllipsis ? "rotate-90" : ""
+                      }`}
+                    />
+                  </button>
+                </Menu.Button>
+              ) : (
+                <Menu.Button as={React.Fragment}>
+                  <button
+                    ref={setReferenceElement}
+                    type="button"
+                    className={`flex items-center justify-between gap-1 rounded-md px-2.5 py-1 text-xs whitespace-nowrap duration-300 ${
+                      open
+                        ? "bg-custom-background-90 text-custom-text-100"
+                        : "text-custom-text-200"
+                    } ${
+                      noBorder
+                        ? ""
+                        : "border border-custom-border-300 shadow-sm focus:outline-none"
+                    } ${
+                      disabled
+                        ? "cursor-not-allowed text-custom-text-200"
+                        : "cursor-pointer hover:bg-custom-background-80"
+                    } ${buttonClassName}`}
+                  >
+                    {label}
+                    {!noChevron && <ChevronDown className="h-3.5 w-3.5" />}
+                  </button>
+                </Menu.Button>
+              )}
+            </>
+          )}
+          <Menu.Items>
+            <div
+              className={`z-10 overflow-y-scroll whitespace-nowrap rounded-md border border-custom-border-300 p-1 text-xs shadow-custom-shadow-rg focus:outline-none bg-custom-background-90 my-1 ${
+                maxHeight === "lg"
+                  ? "max-h-60"
+                  : maxHeight === "md"
+                  ? "max-h-48"
+                  : maxHeight === "rg"
+                  ? "max-h-36"
+                  : maxHeight === "sm"
+                  ? "max-h-28"
+                  : ""
+              } ${
+                width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
+              } ${optionsClassName}`}
+              ref={setPopperElement}
+              style={styles.popper}
+              {...attributes.popper}
+            >
+              {children}
+            </div>
+          </Menu.Items>
+        </>
+      )}
+    </Menu>
+  );
+};
+
+const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
+  const { children, onClick, className = "" } = props;
+  return (
+    <Menu.Item as="div">
+      {({ active, close }) => (
+        <button
+          type="button"
+          className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
+            active ? "bg-custom-background-80" : ""
+          } ${className}`}
+          onClick={onClick}
+        >
+          {children}
+        </button>
+      )}
+    </Menu.Item>
+  );
+};
+
+CustomMenu.MenuItem = MenuItem;
+
+export { CustomMenu };
diff --git a/packages/ui/src/dropdowns/custom-search-select.tsx b/packages/ui/src/dropdowns/custom-search-select.tsx
new file mode 100644
index 000000000..8ba95c28c
--- /dev/null
+++ b/packages/ui/src/dropdowns/custom-search-select.tsx
@@ -0,0 +1,204 @@
+import React, { useState } from "react";
+
+// react-popper
+import { usePopper } from "react-popper";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// icons
+import { Check, ChevronDown, Search } from "lucide-react";
+// types
+import { ICustomSearchSelectProps } from "./helper";
+
+export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
+  const {
+    customButtonClassName = "",
+    buttonClassName = "",
+    className = "",
+    customButton,
+    placement,
+    disabled = false,
+    footerOption,
+    input = false,
+    label,
+    maxHeight = "md",
+    multiple = false,
+    noChevron = false,
+    onChange,
+    options,
+    onOpen,
+    optionsClassName = "",
+    value,
+    width = "auto",
+  } = props;
+  const [query, setQuery] = useState("");
+
+  const [referenceElement, setReferenceElement] =
+    useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
+    null
+  );
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+  });
+
+  const filteredOptions =
+    query === ""
+      ? options
+      : options?.filter((option) =>
+          option.query.toLowerCase().includes(query.toLowerCase())
+        );
+
+  const comboboxProps: any = {
+    value,
+    onChange,
+    disabled,
+  };
+
+  if (multiple) comboboxProps.multiple = true;
+
+  return (
+    <Combobox
+      as="div"
+      className={`relative flex-shrink-0 text-left ${className}`}
+      {...comboboxProps}
+    >
+      {({ open }: { open: boolean }) => {
+        if (open && onOpen) onOpen();
+
+        return (
+          <>
+            {customButton ? (
+              <Combobox.Button as={React.Fragment}>
+                <button
+                  ref={setReferenceElement}
+                  type="button"
+                  className={`flex items-center justify-between gap-1 w-full text-xs ${
+                    disabled
+                      ? "cursor-not-allowed text-custom-text-200"
+                      : "cursor-pointer hover:bg-custom-background-80"
+                  }  ${customButtonClassName}`}
+                >
+                  {customButton}
+                </button>
+              </Combobox.Button>
+            ) : (
+              <Combobox.Button as={React.Fragment}>
+                <button
+                  ref={setReferenceElement}
+                  type="button"
+                  className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none ${
+                    input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
+                  } ${
+                    disabled
+                      ? "cursor-not-allowed text-custom-text-200"
+                      : "cursor-pointer hover:bg-custom-background-80"
+                  } ${buttonClassName}`}
+                >
+                  {label}
+                  {!noChevron && !disabled && (
+                    <ChevronDown className="h-3 w-3" aria-hidden="true" />
+                  )}
+                </button>
+              </Combobox.Button>
+            )}
+            <Combobox.Options as={React.Fragment}>
+              <div
+                className={`z-10 min-w-[10rem] border border-custom-border-300 p-2 rounded-md bg-custom-background-90 text-xs shadow-custom-shadow-rg focus:outline-none my-1 ${
+                  width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
+                } ${optionsClassName}`}
+                ref={setPopperElement}
+                style={styles.popper}
+                {...attributes.popper}
+              >
+                <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-200 bg-custom-background-90 px-2">
+                  <Search className="h-3 w-3 text-custom-text-200" />
+                  <Combobox.Input
+                    className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                    value={query}
+                    onChange={(e) => setQuery(e.target.value)}
+                    placeholder="Type to search..."
+                    displayValue={(assigned: any) => assigned?.name}
+                  />
+                </div>
+                <div
+                  className={`mt-2 space-y-1 ${
+                    maxHeight === "lg"
+                      ? "max-h-60"
+                      : maxHeight === "md"
+                      ? "max-h-48"
+                      : maxHeight === "rg"
+                      ? "max-h-36"
+                      : maxHeight === "sm"
+                      ? "max-h-28"
+                      : ""
+                  } overflow-y-scroll`}
+                >
+                  {filteredOptions ? (
+                    filteredOptions.length > 0 ? (
+                      filteredOptions.map((option) => (
+                        <Combobox.Option
+                          key={option.value}
+                          value={option.value}
+                          className={({ active, selected }) =>
+                            `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                              active || selected
+                                ? "bg-custom-background-80"
+                                : ""
+                            } ${
+                              selected
+                                ? "text-custom-text-100"
+                                : "text-custom-text-200"
+                            }`
+                          }
+                        >
+                          {({ active, selected }) => (
+                            <>
+                              {option.content}
+                              {multiple ? (
+                                <div
+                                  className={`flex items-center justify-center rounded border border-custom-border-400 p-0.5 ${
+                                    active || selected
+                                      ? "opacity-100"
+                                      : "opacity-0"
+                                  }`}
+                                >
+                                  <Check
+                                    className={`h-3 w-3 ${
+                                      selected ? "opacity-100" : "opacity-0"
+                                    }`}
+                                  />
+                                </div>
+                              ) : (
+                                <Check
+                                  className={`h-3 w-3 ${
+                                    selected ? "opacity-100" : "opacity-0"
+                                  }`}
+                                />
+                              )}
+                            </>
+                          )}
+                        </Combobox.Option>
+                      ))
+                    ) : (
+                      <span className="flex items-center gap-2 p-1">
+                        <p className="text-left text-custom-text-200 ">
+                          No matching results
+                        </p>
+                      </span>
+                    )
+                  ) : (
+                    <p className="text-center text-custom-text-200">
+                      Loading...
+                    </p>
+                  )}
+                </div>
+                {footerOption}
+              </div>
+            </Combobox.Options>
+          </>
+        );
+      }}
+    </Combobox>
+  );
+};
diff --git a/packages/ui/src/dropdowns/custom-select.tsx b/packages/ui/src/dropdowns/custom-select.tsx
new file mode 100644
index 000000000..b48d26aee
--- /dev/null
+++ b/packages/ui/src/dropdowns/custom-select.tsx
@@ -0,0 +1,135 @@
+import React, { useState } from "react";
+
+// react-popper
+import { usePopper } from "react-popper";
+// headless ui
+import { Listbox } from "@headlessui/react";
+// icons
+import { Check, ChevronDown } from "lucide-react";
+// types
+import { ICustomSelectItemProps, ICustomSelectProps } from "./helper";
+
+const CustomSelect = (props: ICustomSelectProps) => {
+  const {
+    customButtonClassName = "",
+    buttonClassName = "",
+    placement,
+    children,
+    className = "",
+    customButton,
+    disabled = false,
+    input = false,
+    label,
+    maxHeight = "md",
+    noChevron = false,
+    onChange,
+    optionsClassName = "",
+    value,
+    width = "auto",
+  } = props;
+  const [referenceElement, setReferenceElement] =
+    useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
+    null
+  );
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+  });
+
+  return (
+    <Listbox
+      as="div"
+      value={value}
+      onChange={onChange}
+      className={`relative flex-shrink-0 text-left ${className}`}
+      disabled={disabled}
+    >
+      <>
+        {customButton ? (
+          <Listbox.Button as={React.Fragment}>
+            <button
+              ref={setReferenceElement}
+              type="button"
+              className={`flex items-center justify-between gap-1 w-full text-xs ${
+                disabled
+                  ? "cursor-not-allowed text-custom-text-200"
+                  : "cursor-pointer hover:bg-custom-background-80"
+              }  ${customButtonClassName}`}
+            >
+              {customButton}
+            </button>
+          </Listbox.Button>
+        ) : (
+          <Listbox.Button as={React.Fragment}>
+            <button
+              ref={setReferenceElement}
+              type="button"
+              className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none ${
+                input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
+              } ${
+                disabled
+                  ? "cursor-not-allowed text-custom-text-200"
+                  : "cursor-pointer hover:bg-custom-background-80"
+              } ${buttonClassName}`}
+            >
+              {label}
+              {!noChevron && !disabled && (
+                <ChevronDown className="h-3 w-3" aria-hidden="true" />
+              )}
+            </button>
+          </Listbox.Button>
+        )}
+      </>
+      <Listbox.Options>
+        <div
+          className={`z-10 border border-custom-border-300 overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-custom-shadow-rg focus:outline-none my-1 ${
+            maxHeight === "lg"
+              ? "max-h-60"
+              : maxHeight === "md"
+              ? "max-h-48"
+              : maxHeight === "rg"
+              ? "max-h-36"
+              : maxHeight === "sm"
+              ? "max-h-28"
+              : ""
+          } ${
+            width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
+          } ${optionsClassName}`}
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="space-y-1 p-2">{children}</div>
+        </div>
+      </Listbox.Options>
+    </Listbox>
+  );
+};
+
+const Option = (props: ICustomSelectItemProps) => {
+  const { children, value, className } = props;
+  return (
+    <Listbox.Option
+      value={value}
+      className={({ active, selected }) =>
+        `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+          active || selected ? "bg-custom-background-80" : ""
+        } ${
+          selected ? "text-custom-text-100" : "text-custom-text-200"
+        } ${className}`
+      }
+    >
+      {({ selected }) => (
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2">{children}</div>
+          {selected && <Check className="h-4 w-4 flex-shrink-0" />}
+        </div>
+      )}
+    </Listbox.Option>
+  );
+};
+
+CustomSelect.Option = Option;
+
+export { CustomSelect };
diff --git a/packages/ui/src/dropdowns/helper.tsx b/packages/ui/src/dropdowns/helper.tsx
new file mode 100644
index 000000000..4c9a92d4d
--- /dev/null
+++ b/packages/ui/src/dropdowns/helper.tsx
@@ -0,0 +1,69 @@
+import { Placement } from "@blueprintjs/popover2";
+
+export interface IDropdownProps {
+  customButtonClassName?: string;
+  buttonClassName?: string;
+  className?: string;
+  customButton?: JSX.Element;
+  disabled?: boolean;
+  input?: boolean;
+  label?: string | JSX.Element;
+  maxHeight?: "sm" | "rg" | "md" | "lg";
+  noChevron?: boolean;
+  onOpen?: () => void;
+  optionsClassName?: string;
+  width?: "auto" | string;
+  placement?: Placement;
+}
+
+export interface ICustomMenuDropdownProps extends IDropdownProps {
+  children: React.ReactNode;
+  ellipsis?: boolean;
+  noBorder?: boolean;
+  verticalEllipsis?: boolean;
+  menuButtonOnClick?: (...args: any) => void;
+}
+
+export interface ICustomSelectProps extends IDropdownProps {
+  children: React.ReactNode;
+  value: any;
+  onChange: any;
+}
+
+interface CustomSearchSelectProps {
+  footerOption?: JSX.Element;
+  onChange: any;
+  options:
+    | {
+        value: any;
+        query: string;
+        content: React.ReactNode;
+      }[]
+    | undefined;
+}
+
+interface SingleValueProps {
+  multiple?: false;
+  value: any;
+}
+
+interface MultipleValuesProps {
+  multiple?: true;
+  value: any[] | null;
+}
+
+export type ICustomSearchSelectProps = IDropdownProps &
+  CustomSearchSelectProps &
+  (SingleValueProps | MultipleValuesProps);
+
+export interface ICustomMenuItemProps {
+  children: React.ReactNode;
+  onClick?: (args?: any) => void;
+  className?: string;
+}
+
+export interface ICustomSelectItemProps {
+  children: React.ReactNode;
+  value: any;
+  className?: string;
+}
diff --git a/packages/ui/src/dropdowns/index.tsx b/packages/ui/src/dropdowns/index.tsx
new file mode 100644
index 000000000..0ad9cbb22
--- /dev/null
+++ b/packages/ui/src/dropdowns/index.tsx
@@ -0,0 +1,3 @@
+export * from "./custom-menu";
+export * from "./custom-select";
+export * from "./custom-search-select";
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index 6ce89c28d..1cd193a65 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -6,3 +6,4 @@ export * from "./loader";
 export * from "./tooltip";
 export * from "./icons";
 export * from "./breadcrumbs";
+export * from "./dropdowns";
diff --git a/web/components/analytics/custom-analytics/select/project.tsx b/web/components/analytics/custom-analytics/select/project.tsx
index 8793cb27b..c57e56709 100644
--- a/web/components/analytics/custom-analytics/select/project.tsx
+++ b/web/components/analytics/custom-analytics/select/project.tsx
@@ -1,5 +1,5 @@
 // ui
-import { CustomSearchSelect } from "components/ui";
+import { CustomSearchSelect } from "@plane/ui";
 // types
 import { IProject } from "types";
 
diff --git a/web/components/analytics/custom-analytics/select/segment.tsx b/web/components/analytics/custom-analytics/select/segment.tsx
index bdda33ddf..4efc6a211 100644
--- a/web/components/analytics/custom-analytics/select/segment.tsx
+++ b/web/components/analytics/custom-analytics/select/segment.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 
 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect } from "@plane/ui";
 // types
 import { IAnalyticsParams, TXAxisValues } from "types";
 // constants
diff --git a/web/components/analytics/custom-analytics/select/x-axis.tsx b/web/components/analytics/custom-analytics/select/x-axis.tsx
index 17dde2770..99e872340 100644
--- a/web/components/analytics/custom-analytics/select/x-axis.tsx
+++ b/web/components/analytics/custom-analytics/select/x-axis.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 
 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect } from "@plane/ui";
 // types
 import { TXAxisValues } from "types";
 // constants
diff --git a/web/components/analytics/custom-analytics/select/y-axis.tsx b/web/components/analytics/custom-analytics/select/y-axis.tsx
index ef22332bd..3f7348cce 100644
--- a/web/components/analytics/custom-analytics/select/y-axis.tsx
+++ b/web/components/analytics/custom-analytics/select/y-axis.tsx
@@ -1,5 +1,5 @@
 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect } from "@plane/ui";
 // types
 import { TYAxisValues } from "types";
 // constants
diff --git a/web/components/automation/auto-archive-automation.tsx b/web/components/automation/auto-archive-automation.tsx
index eedf8a048..30a7c6251 100644
--- a/web/components/automation/auto-archive-automation.tsx
+++ b/web/components/automation/auto-archive-automation.tsx
@@ -1,8 +1,7 @@
 import React, { useState } from "react";
 
 // component
-import { CustomSelect } from "components/ui";
-import { ToggleSwitch } from "@plane/ui";
+import { CustomSelect, ToggleSwitch } from "@plane/ui";
 import { SelectMonthModal } from "components/automation";
 // icon
 import { ArchiveRestore } from "lucide-react";
diff --git a/web/components/automation/auto-close-automation.tsx b/web/components/automation/auto-close-automation.tsx
index 1bd49a3f1..f5e284ebf 100644
--- a/web/components/automation/auto-close-automation.tsx
+++ b/web/components/automation/auto-close-automation.tsx
@@ -2,9 +2,8 @@ import React, { useState } from "react";
 import useSWR from "swr";
 import { useRouter } from "next/router";
 // component
-import { CustomSearchSelect, CustomSelect } from "components/ui";
 import { SelectMonthModal } from "components/automation";
-import { ToggleSwitch, StateGroupIcon, DoubleCircleIcon } from "@plane/ui";
+import { CustomSelect, CustomSearchSelect, ToggleSwitch, StateGroupIcon, DoubleCircleIcon } from "@plane/ui";
 // icons
 import { ArchiveX } from "lucide-react";
 // services
diff --git a/web/components/core/filters/date-filter-select.tsx b/web/components/core/filters/date-filter-select.tsx
index 7575fc768..2585e2f95 100644
--- a/web/components/core/filters/date-filter-select.tsx
+++ b/web/components/core/filters/date-filter-select.tsx
@@ -1,9 +1,8 @@
 import React from "react";
 
 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect, CalendarAfterIcon, CalendarBeforeIcon } from "@plane/ui";
 // icons
-import { CalendarAfterIcon, CalendarBeforeIcon } from "@plane/ui";
 import { CalendarDays } from "lucide-react";
 // fetch-keys
 
diff --git a/web/components/core/theme/theme-switch.tsx b/web/components/core/theme/theme-switch.tsx
index bb3133c60..78364562f 100644
--- a/web/components/core/theme/theme-switch.tsx
+++ b/web/components/core/theme/theme-switch.tsx
@@ -2,7 +2,7 @@ import { FC } from "react";
 // constants
 import { THEME_OPTIONS, I_THEME_OPTION } from "constants/themes";
 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect } from "@plane/ui";
 
 type Props = {
   value: I_THEME_OPTION | null;
diff --git a/web/components/cycles/cycles-board-card.tsx b/web/components/cycles/cycles-board-card.tsx
index ff5e28eef..3caf34698 100644
--- a/web/components/cycles/cycles-board-card.tsx
+++ b/web/components/cycles/cycles-board-card.tsx
@@ -10,9 +10,8 @@ import { SingleProgressStats } from "components/core";
 import { CycleCreateEditModal } from "./cycle-create-edit-modal";
 import { CycleDeleteModal } from "./cycle-delete-modal";
 // ui
-import { CustomMenu } from "components/ui";
 import { AssigneesList } from "components/ui/avatar";
-import { Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
+import { CustomMenu, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
 // icons
 import {
   AlarmClock,
diff --git a/web/components/cycles/cycles-list-item.tsx b/web/components/cycles/cycles-list-item.tsx
index 1941dcf24..1a58ab0db 100644
--- a/web/components/cycles/cycles-list-item.tsx
+++ b/web/components/cycles/cycles-list-item.tsx
@@ -6,8 +6,7 @@ import useToast from "hooks/use-toast";
 import { CycleCreateEditModal } from "./cycle-create-edit-modal";
 import { CycleDeleteModal } from "./cycle-delete-modal";
 // ui
-import { RadialProgressBar, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
-import { CustomMenu } from "components/ui";
+import { CustomMenu, RadialProgressBar, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
 // icons
 import {
   AlarmClock,
diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx
index 0073cfef1..5cc761a12 100644
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@@ -13,8 +13,8 @@ import { SidebarProgressStats } from "components/core";
 import ProgressChart from "components/core/sidebar/progress-chart";
 import { CycleDeleteModal } from "components/cycles/cycle-delete-modal";
 // ui
-import { CustomMenu, CustomRangeDatePicker } from "components/ui";
-import { Loader, ProgressBar } from "@plane/ui";
+import { CustomRangeDatePicker } from "components/ui";
+import { CustomMenu, Loader, ProgressBar } from "@plane/ui";
 // icons
 import {
   CalendarDays,
diff --git a/web/components/cycles/single-cycle-card.tsx b/web/components/cycles/single-cycle-card.tsx
index 0747b5bf9..a91a6a5f3 100644
--- a/web/components/cycles/single-cycle-card.tsx
+++ b/web/components/cycles/single-cycle-card.tsx
@@ -10,8 +10,7 @@ import useToast from "hooks/use-toast";
 // components
 import { SingleProgressStats } from "components/core";
 // ui
-import { Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
-import { CustomMenu } from "components/ui";
+import { CustomMenu, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
 import { AssigneesList } from "components/ui/avatar";
 // icons
 import {
diff --git a/web/components/cycles/single-cycle-list.tsx b/web/components/cycles/single-cycle-list.tsx
index b039c7005..8e2ad9cf1 100644
--- a/web/components/cycles/single-cycle-list.tsx
+++ b/web/components/cycles/single-cycle-list.tsx
@@ -6,8 +6,7 @@ import { useRouter } from "next/router";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomMenu } from "components/ui";
-import { Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
+import { CustomMenu, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
 // icons
 import {
   AlarmClock,
diff --git a/web/components/estimates/single-estimate.tsx b/web/components/estimates/single-estimate.tsx
index 1511259e9..a4e8fde28 100644
--- a/web/components/estimates/single-estimate.tsx
+++ b/web/components/estimates/single-estimate.tsx
@@ -10,8 +10,7 @@ import useProjectDetails from "hooks/use-project-details";
 // components
 import { DeleteEstimateModal } from "components/estimates";
 // ui
-import { Button } from "@plane/ui";
-import { CustomMenu } from "components/ui";
+import { Button, CustomMenu } from "@plane/ui";
 //icons
 import { Pencil, Trash2 } from "lucide-react";
 // helpers
diff --git a/web/components/exporter/export-modal.tsx b/web/components/exporter/export-modal.tsx
index 53906d585..fe73dd620 100644
--- a/web/components/exporter/export-modal.tsx
+++ b/web/components/exporter/export-modal.tsx
@@ -9,8 +9,7 @@ import { ProjectExportService } from "services/project";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Button } from "@plane/ui";
-import { CustomSearchSelect } from "components/ui";
+import { Button, CustomSearchSelect } from "@plane/ui";
 // types
 import { IUser, IImporterService } from "types";
 
diff --git a/web/components/integration/github/import-data.tsx b/web/components/integration/github/import-data.tsx
index 40c5c1844..53592420d 100644
--- a/web/components/integration/github/import-data.tsx
+++ b/web/components/integration/github/import-data.tsx
@@ -7,8 +7,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { SelectRepository, TFormValues, TIntegrationSteps } from "components/integration";
 // ui
-import { Button, ToggleSwitch } from "@plane/ui";
-import { CustomSearchSelect } from "components/ui";
+import { Button, CustomSearchSelect, ToggleSwitch } from "@plane/ui";
 // helpers
 import { truncateText } from "helpers/string.helper";
 // types
diff --git a/web/components/integration/github/select-repository.tsx b/web/components/integration/github/select-repository.tsx
index 71a142f24..9d086c894 100644
--- a/web/components/integration/github/select-repository.tsx
+++ b/web/components/integration/github/select-repository.tsx
@@ -4,7 +4,7 @@ import useSWRInfinite from "swr/infinite";
 // services
 import { ProjectService } from "services/project";
 // ui
-import { CustomSearchSelect } from "components/ui";
+import { CustomSearchSelect } from "@plane/ui";
 // helpers
 import { truncateText } from "helpers/string.helper";
 // types
diff --git a/web/components/integration/github/single-user-select.tsx b/web/components/integration/github/single-user-select.tsx
index 892a0d306..2bc16d87d 100644
--- a/web/components/integration/github/single-user-select.tsx
+++ b/web/components/integration/github/single-user-select.tsx
@@ -5,8 +5,8 @@ import useSWR from "swr";
 // services
 import { WorkspaceService } from "services/workspace.service";
 // ui
-import { Avatar, CustomSearchSelect, CustomSelect } from "components/ui";
-import { Input } from "@plane/ui";
+import { Avatar } from "components/ui";
+import { CustomSelect, CustomSearchSelect, Input } from "@plane/ui";
 // types
 import { IGithubRepoCollaborator } from "types";
 import { IUserDetails } from "./root";
diff --git a/web/components/integration/jira/give-details.tsx b/web/components/integration/jira/give-details.tsx
index 1416a76ef..622517439 100644
--- a/web/components/integration/jira/give-details.tsx
+++ b/web/components/integration/jira/give-details.tsx
@@ -8,8 +8,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // icons
 import { Plus } from "lucide-react";
 // components
-import { CustomSelect } from "components/ui";
-import { Input } from "@plane/ui";
+import { CustomSelect, Input } from "@plane/ui";
 // types
 import { IJiraImporterForm } from "types";
 
diff --git a/web/components/integration/jira/import-users.tsx b/web/components/integration/jira/import-users.tsx
index c903bf798..440584e1c 100644
--- a/web/components/integration/jira/import-users.tsx
+++ b/web/components/integration/jira/import-users.tsx
@@ -7,8 +7,8 @@ import { WORKSPACE_MEMBERS_WITH_EMAIL } from "constants/fetch-keys";
 // services
 import { WorkspaceService } from "services/workspace.service";
 // components
-import { CustomSelect, CustomSearchSelect, Avatar } from "components/ui";
-import { Input, ToggleSwitch } from "@plane/ui";
+import { Avatar } from "components/ui";
+import { CustomSelect, CustomSearchSelect, Input, ToggleSwitch } from "@plane/ui";
 // types
 import { IJiraImporterForm } from "types";
 
diff --git a/web/components/integration/single-import.tsx b/web/components/integration/single-import.tsx
index a67eba628..c5d1524a8 100644
--- a/web/components/integration/single-import.tsx
+++ b/web/components/integration/single-import.tsx
@@ -1,5 +1,5 @@
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 // icons
 import { Trash2 } from "lucide-react";
 // helpers
diff --git a/web/components/issues/comment/comment-card.tsx b/web/components/issues/comment/comment-card.tsx
index be2f60c7b..b38e41ae0 100644
--- a/web/components/issues/comment/comment-card.tsx
+++ b/web/components/issues/comment/comment-card.tsx
@@ -8,7 +8,7 @@ import { Check, Globe2, Lock, MessageSquare, Pencil, Trash2, X } from "lucide-re
 // hooks
 import useUser from "hooks/use-user";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 import { CommentReaction } from "components/issues";
 import { LiteTextEditorWithRef, LiteReadOnlyEditorWithRef } from "@plane/lite-text-editor";
 // helpers
@@ -156,7 +156,6 @@ export const CommentCard: React.FC<Props> = ({
             <>
               {comment.access === "INTERNAL" ? (
                 <CustomMenu.MenuItem
-                  renderAs="button"
                   onClick={() => onSubmit(comment.id, { access: "EXTERNAL" })}
                   className="flex items-center gap-1"
                 >
@@ -165,7 +164,6 @@ export const CommentCard: React.FC<Props> = ({
                 </CustomMenu.MenuItem>
               ) : (
                 <CustomMenu.MenuItem
-                  renderAs="button"
                   onClick={() => onSubmit(comment.id, { access: "INTERNAL" })}
                   className="flex items-center gap-1"
                 >
diff --git a/web/components/issues/draft-issue-form.tsx b/web/components/issues/draft-issue-form.tsx
index b40d53500..9220b7cf4 100644
--- a/web/components/issues/draft-issue-form.tsx
+++ b/web/components/issues/draft-issue-form.tsx
@@ -22,8 +22,8 @@ import {
 import { CreateStateModal } from "components/states";
 import { CreateLabelModal } from "components/labels";
 // ui
-import { CustomMenu } from "components/ui";
-import { Button, Input, ToggleSwitch } from "@plane/ui";
+import {} from "components/ui";
+import { Button, CustomMenu, Input, ToggleSwitch } from "@plane/ui";
 // icons
 import { Sparkle, X } from "lucide-react";
 // types
@@ -578,15 +578,15 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
                   <CustomMenu ellipsis>
                     {watch("parent") ? (
                       <>
-                        <CustomMenu.MenuItem renderAs="button" onClick={() => setParentIssueListModalOpen(true)}>
+                        <CustomMenu.MenuItem onClick={() => setParentIssueListModalOpen(true)}>
                           Change parent issue
                         </CustomMenu.MenuItem>
-                        <CustomMenu.MenuItem renderAs="button" onClick={() => setValue("parent", null)}>
+                        <CustomMenu.MenuItem onClick={() => setValue("parent", null)}>
                           Remove parent issue
                         </CustomMenu.MenuItem>
                       </>
                     ) : (
-                      <CustomMenu.MenuItem renderAs="button" onClick={() => setParentIssueListModalOpen(true)}>
+                      <CustomMenu.MenuItem onClick={() => setParentIssueListModalOpen(true)}>
                         Select Parent Issue
                       </CustomMenu.MenuItem>
                     )}
diff --git a/web/components/issues/form.tsx b/web/components/issues/form.tsx
index d85151485..13e622385 100644
--- a/web/components/issues/form.tsx
+++ b/web/components/issues/form.tsx
@@ -24,8 +24,7 @@ import {
 import { CreateStateModal } from "components/states";
 import { CreateLabelModal } from "components/labels";
 // ui
-import { CustomMenu } from "components/ui";
-import { Button, Input, ToggleSwitch } from "@plane/ui";
+import { Button, CustomMenu, Input, ToggleSwitch } from "@plane/ui";
 // icons
 import { LayoutPanelTop, Sparkle, X } from "lucide-react";
 // types
@@ -533,27 +532,15 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
                     >
                       {watch("parent") ? (
                         <>
-                          <CustomMenu.MenuItem
-                            renderAs="button"
-                            className="!p-1"
-                            onClick={() => setParentIssueListModalOpen(true)}
-                          >
+                          <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
                             Change parent issue
                           </CustomMenu.MenuItem>
-                          <CustomMenu.MenuItem
-                            renderAs="button"
-                            className="!p-1"
-                            onClick={() => setValue("parent", null)}
-                          >
+                          <CustomMenu.MenuItem className="!p-1" onClick={() => setValue("parent", null)}>
                             Remove parent issue
                           </CustomMenu.MenuItem>
                         </>
                       ) : (
-                        <CustomMenu.MenuItem
-                          renderAs="button"
-                          className="!p-1"
-                          onClick={() => setParentIssueListModalOpen(true)}
-                        >
+                        <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
                           Select Parent Issue
                         </CustomMenu.MenuItem>
                       )}
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
index 994f1c212..d6e674e28 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
@@ -22,7 +22,7 @@ import {
   SpreadsheetUpdatedOnColumn,
 } from "components/issues";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 // types
 import {
   IIssue,
@@ -101,10 +101,7 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
           }
           width="xl"
         >
-          <CustomMenu.MenuItem
-            renderAs="button"
-            onClick={() => handleOrderBy(propertyDetails.ascendingOrderKey, property)}
-          >
+          <CustomMenu.MenuItem onClick={() => handleOrderBy(propertyDetails.ascendingOrderKey, property)}>
             <div
               className={`flex gap-1.5 px-1 items-center justify-between ${
                 selectedMenuItem === `${propertyDetails.ascendingOrderKey}_${property}`
@@ -124,10 +121,7 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
               )}
             </div>
           </CustomMenu.MenuItem>
-          <CustomMenu.MenuItem
-            renderAs="button"
-            onClick={() => handleOrderBy(propertyDetails.descendingOrderKey, property)}
-          >
+          <CustomMenu.MenuItem onClick={() => handleOrderBy(propertyDetails.descendingOrderKey, property)}>
             <div
               className={`flex gap-1.5 px-1 items-center justify-between ${
                 selectedMenuItem === `${propertyDetails.descendingOrderKey}_${property}`
@@ -152,7 +146,6 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
             displayFilters?.order_by !== "-created_at" &&
             selectedMenuItem.includes(property) && (
               <CustomMenu.MenuItem
-                renderAs="button"
                 className={`mt-0.5 ${selectedMenuItem === `-created_at_${property}` ? "bg-custom-background-80" : ""}`}
                 key={property}
                 onClick={() => handleOrderBy("-created_at", property)}
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
index 2be3a927e..521773f6b 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@@ -8,8 +8,7 @@ import {
   // ListInlineCreateIssueForm,
   SpreadsheetIssuesColumn,
 } from "components/issues";
-import { CustomMenu } from "components/ui";
-import { Spinner } from "@plane/ui";
+import { CustomMenu, Spinner } from "@plane/ui";
 // types
 import {
   IIssue,
diff --git a/web/components/issues/main-content.tsx b/web/components/issues/main-content.tsx
index b6587a1a1..6f228a8a0 100644
--- a/web/components/issues/main-content.tsx
+++ b/web/components/issues/main-content.tsx
@@ -22,9 +22,8 @@ import {
 } from "components/issues";
 import { SubIssuesRoot } from "./sub-issues";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu, LayersIcon } from "@plane/ui";
 // icons
-import { LayersIcon } from "@plane/ui";
 import { MinusCircle } from "lucide-react";
 // types
 import { IIssue, IIssueComment } from "types";
@@ -138,8 +137,9 @@ export const IssueMainContent: React.FC<Props> = ({ issueDetails, submitChanges,
                     {siblingIssuesList.map((issue) => (
                       <CustomMenu.MenuItem
                         key={issue.id}
-                        renderAs="a"
-                        href={`/${workspaceSlug}/projects/${projectId as string}/issues/${issue.id}`}
+                        onClick={() =>
+                          router.push(`/${workspaceSlug}/projects/${projectId as string}/issues/${issue.id}`)
+                        }
                         className="flex items-center gap-2 py-2"
                       >
                         <LayersIcon className="h-4 w-4" />
@@ -154,7 +154,6 @@ export const IssueMainContent: React.FC<Props> = ({ issueDetails, submitChanges,
                 )
               ) : null}
               <CustomMenu.MenuItem
-                renderAs="button"
                 onClick={() => submitChanges({ parent: null })}
                 className="flex items-center gap-2 text-red-500 py-2"
               >
diff --git a/web/components/issues/peek-overview/header.tsx b/web/components/issues/peek-overview/header.tsx
index 44fa22e54..d271533af 100644
--- a/web/components/issues/peek-overview/header.tsx
+++ b/web/components/issues/peek-overview/header.tsx
@@ -3,9 +3,8 @@ import Link from "next/link";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect, FullScreenPeekIcon, ModalPeekIcon, SidePeekIcon } from "@plane/ui";
 // icons
-import { FullScreenPeekIcon, ModalPeekIcon, SidePeekIcon } from "@plane/ui";
 import { LinkIcon, MoveRight, Trash2 } from "lucide-react";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
diff --git a/web/components/issues/select/assignee.tsx b/web/components/issues/select/assignee.tsx
index 431d944d6..bb2ffcbd4 100644
--- a/web/components/issues/select/assignee.tsx
+++ b/web/components/issues/select/assignee.tsx
@@ -5,7 +5,8 @@ import useSWR from "swr";
 // services
 import { ProjectService } from "services/project";
 // ui
-import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
+import { AssigneesList, Avatar } from "components/ui";
+import { CustomSearchSelect } from "@plane/ui";
 import { User2 } from "lucide-react";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
diff --git a/web/components/issues/select/estimate.tsx b/web/components/issues/select/estimate.tsx
index 7141a24a0..f2d875072 100644
--- a/web/components/issues/select/estimate.tsx
+++ b/web/components/issues/select/estimate.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect } from "@plane/ui";
 // icons
 import { Triangle } from "lucide-react";
 // fetch-keys
diff --git a/web/components/issues/select/priority.tsx b/web/components/issues/select/priority.tsx
index 6657ec120..503a6543b 100644
--- a/web/components/issues/select/priority.tsx
+++ b/web/components/issues/select/priority.tsx
@@ -1,9 +1,7 @@
 import React from "react";
 
 // ui
-import { CustomSelect } from "components/ui";
-// icons
-import { PriorityIcon } from "@plane/ui";
+import { CustomSelect, PriorityIcon } from "@plane/ui";
 // types
 import { TIssuePriorities } from "types";
 // constants
diff --git a/web/components/issues/select/project.tsx b/web/components/issues/select/project.tsx
index e58257d8f..cbd0a3b7d 100644
--- a/web/components/issues/select/project.tsx
+++ b/web/components/issues/select/project.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect } from "@plane/ui";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
 // icons
diff --git a/web/components/issues/select/state.tsx b/web/components/issues/select/state.tsx
index 0abea45af..024024641 100644
--- a/web/components/issues/select/state.tsx
+++ b/web/components/issues/select/state.tsx
@@ -7,9 +7,8 @@ import useSWR from "swr";
 // services
 import { ProjectStateService } from "services/project";
 // ui
-import { CustomSearchSelect } from "components/ui";
+import { CustomSearchSelect, DoubleCircleIcon, StateGroupIcon } from "@plane/ui";
 // icons
-import { DoubleCircleIcon, StateGroupIcon } from "@plane/ui";
 import { Plus } from "lucide-react";
 // helpers
 import { getStatesList } from "helpers/state.helper";
diff --git a/web/components/issues/sidebar-select/assignee.tsx b/web/components/issues/sidebar-select/assignee.tsx
index 05fe64243..a56c6176b 100644
--- a/web/components/issues/sidebar-select/assignee.tsx
+++ b/web/components/issues/sidebar-select/assignee.tsx
@@ -7,7 +7,7 @@ import useSWR from "swr";
 // services
 import { ProjectService } from "services/project";
 // ui
-import { CustomSearchSelect } from "components/ui";
+import { CustomSearchSelect } from "@plane/ui";
 import { AssigneesList, Avatar } from "components/ui/avatar";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
diff --git a/web/components/issues/sidebar-select/cycle.tsx b/web/components/issues/sidebar-select/cycle.tsx
index 47ad5aecc..5f4ef6e13 100644
--- a/web/components/issues/sidebar-select/cycle.tsx
+++ b/web/components/issues/sidebar-select/cycle.tsx
@@ -8,8 +8,7 @@ import useSWR, { mutate } from "swr";
 import { IssueService } from "services/issue";
 import { CycleService } from "services/cycle.service";
 // ui
-import { CustomSelect } from "components/ui";
-import { Spinner, Tooltip } from "@plane/ui";
+import { CustomSelect, Spinner, Tooltip } from "@plane/ui";
 // helper
 import { truncateText } from "helpers/string.helper";
 // types
diff --git a/web/components/issues/sidebar-select/estimate.tsx b/web/components/issues/sidebar-select/estimate.tsx
index a3a4c421c..79733131f 100644
--- a/web/components/issues/sidebar-select/estimate.tsx
+++ b/web/components/issues/sidebar-select/estimate.tsx
@@ -3,7 +3,7 @@ import React from "react";
 // hooks
 import useEstimateOption from "hooks/use-estimate-option";
 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect } from "@plane/ui";
 // icons
 import { Triangle } from "lucide-react";
 
diff --git a/web/components/issues/sidebar-select/module.tsx b/web/components/issues/sidebar-select/module.tsx
index 6e55b7895..3ccc34367 100644
--- a/web/components/issues/sidebar-select/module.tsx
+++ b/web/components/issues/sidebar-select/module.tsx
@@ -4,8 +4,7 @@ import useSWR, { mutate } from "swr";
 // services
 import { ModuleService } from "services/module.service";
 // ui
-import { CustomSelect } from "components/ui";
-import { Spinner, Tooltip } from "@plane/ui";
+import { CustomSelect, Spinner, Tooltip } from "@plane/ui";
 // helper
 import { truncateText } from "helpers/string.helper";
 // types
diff --git a/web/components/issues/sidebar-select/priority.tsx b/web/components/issues/sidebar-select/priority.tsx
index 2ea835bc2..3d36acabc 100644
--- a/web/components/issues/sidebar-select/priority.tsx
+++ b/web/components/issues/sidebar-select/priority.tsx
@@ -1,9 +1,7 @@
 import React from "react";
 
 // ui
-import { CustomSelect } from "components/ui";
-// icons
-import { PriorityIcon } from "@plane/ui";
+import { CustomSelect, PriorityIcon } from "@plane/ui";
 // types
 import { TIssuePriorities } from "types";
 // constants
diff --git a/web/components/issues/sidebar-select/state.tsx b/web/components/issues/sidebar-select/state.tsx
index cea535c2f..730da4b5b 100644
--- a/web/components/issues/sidebar-select/state.tsx
+++ b/web/components/issues/sidebar-select/state.tsx
@@ -7,8 +7,7 @@ import useSWR from "swr";
 // services
 import { ProjectStateService } from "services/project";
 // ui
-import { CustomSelect } from "components/ui";
-import { Spinner, StateGroupIcon } from "@plane/ui";
+import { CustomSelect, Spinner, StateGroupIcon } from "@plane/ui";
 // helpers
 import { getStatesList } from "helpers/state.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
diff --git a/web/components/issues/sub-issues/issue.tsx b/web/components/issues/sub-issues/issue.tsx
index d0c7309c0..1b86221a5 100644
--- a/web/components/issues/sub-issues/issue.tsx
+++ b/web/components/issues/sub-issues/issue.tsx
@@ -10,8 +10,7 @@ import { IssuePeekOverview } from "components/issues/peek-overview";
 import { SubIssuesRootList } from "./issues-list";
 import { IssueProperty } from "./properties";
 // ui
-import { CustomMenu } from "components/ui";
-import { Tooltip } from "@plane/ui";
+import { CustomMenu, Tooltip } from "@plane/ui";
 // types
 import { IUser, IIssue } from "types";
 import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
diff --git a/web/components/issues/sub-issues/root.tsx b/web/components/issues/sub-issues/root.tsx
index 2855aa0b5..ceba65959 100644
--- a/web/components/issues/sub-issues/root.tsx
+++ b/web/components/issues/sub-issues/root.tsx
@@ -11,7 +11,7 @@ import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 import { SubIssuesRootList } from "./issues-list";
 import { ProgressBar } from "./progressbar";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 // hooks
 import { useProjectMyMembership } from "contexts/project-member.context";
 import useToast from "hooks/use-toast";
diff --git a/web/components/issues/view-select/assignee.tsx b/web/components/issues/view-select/assignee.tsx
index 089e04691..f096c03fc 100644
--- a/web/components/issues/view-select/assignee.tsx
+++ b/web/components/issues/view-select/assignee.tsx
@@ -3,8 +3,8 @@ import { useRouter } from "next/router";
 // services
 import { TrackEventService } from "services/track_event.service";
 // ui
-import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
-import { Tooltip } from "@plane/ui";
+import { AssigneesList, Avatar } from "components/ui";
+import { CustomSearchSelect, Tooltip } from "@plane/ui";
 import { User2 } from "lucide-react";
 // types
 import { IUser, IIssue } from "types";
diff --git a/web/components/issues/view-select/estimate.tsx b/web/components/issues/view-select/estimate.tsx
index 34f6539c7..b161eb598 100644
--- a/web/components/issues/view-select/estimate.tsx
+++ b/web/components/issues/view-select/estimate.tsx
@@ -2,8 +2,7 @@ import React from "react";
 // hooks
 import useEstimateOption from "hooks/use-estimate-option";
 // ui
-import { CustomSelect } from "components/ui";
-import { Tooltip } from "@plane/ui";
+import { CustomSelect, Tooltip } from "@plane/ui";
 // icons
 import { Triangle } from "lucide-react";
 // types
diff --git a/web/components/issues/view-select/label.tsx b/web/components/issues/view-select/label.tsx
index 5a1043fb0..6aa85fb1a 100644
--- a/web/components/issues/view-select/label.tsx
+++ b/web/components/issues/view-select/label.tsx
@@ -6,8 +6,7 @@ import { IssueLabelService } from "services/issue";
 // component
 import { CreateLabelModal } from "components/labels";
 // ui
-import { CustomSearchSelect } from "components/ui";
-import { Tooltip } from "@plane/ui";
+import { CustomSearchSelect, Tooltip } from "@plane/ui";
 // icons
 import { Plus, Tag } from "lucide-react";
 // types
diff --git a/web/components/issues/view-select/priority.tsx b/web/components/issues/view-select/priority.tsx
index 419013a30..e5da02b68 100644
--- a/web/components/issues/view-select/priority.tsx
+++ b/web/components/issues/view-select/priority.tsx
@@ -3,8 +3,7 @@ import { useRouter } from "next/router";
 // services
 import { TrackEventService } from "services/track_event.service";
 // ui
-import { CustomSelect } from "components/ui";
-import { Tooltip, PriorityIcon } from "@plane/ui";
+import { CustomSelect, Tooltip, PriorityIcon } from "@plane/ui";
 // helpers
 import { capitalizeFirstLetter } from "helpers/string.helper";
 // types
diff --git a/web/components/labels/single-label-group.tsx b/web/components/labels/single-label-group.tsx
index 277fd3ed6..79ef480b2 100644
--- a/web/components/labels/single-label-group.tsx
+++ b/web/components/labels/single-label-group.tsx
@@ -9,7 +9,7 @@ import { Disclosure, Transition } from "@headlessui/react";
 // services
 import { IssueLabelService } from "services/issue";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 // icons
 import { ChevronDown, Component, Pencil, Plus, Trash2, X } from "lucide-react";
 // types
diff --git a/web/components/labels/single-label.tsx b/web/components/labels/single-label.tsx
index c23dbf2ff..6b7cbcd0b 100644
--- a/web/components/labels/single-label.tsx
+++ b/web/components/labels/single-label.tsx
@@ -3,7 +3,7 @@ import React, { useRef, useState } from "react";
 //hook
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 // types
 import { IIssueLabels } from "types";
 //icons
diff --git a/web/components/modules/select/lead.tsx b/web/components/modules/select/lead.tsx
index 59b2987ab..982acdeb6 100644
--- a/web/components/modules/select/lead.tsx
+++ b/web/components/modules/select/lead.tsx
@@ -4,7 +4,8 @@ import useSWR from "swr";
 // services
 import { ProjectService } from "services/project";
 // ui
-import { Avatar, CustomSearchSelect } from "components/ui";
+import { Avatar } from "components/ui";
+import { CustomSearchSelect } from "@plane/ui";
 // icons
 import { UserCircle } from "lucide-react";
 // fetch-keys
diff --git a/web/components/modules/select/members.tsx b/web/components/modules/select/members.tsx
index 1947c3cb4..49f8ab7db 100644
--- a/web/components/modules/select/members.tsx
+++ b/web/components/modules/select/members.tsx
@@ -4,9 +4,9 @@ import useSWR from "swr";
 // services
 import { ProjectService } from "services/project";
 // ui
-import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
+import { AssigneesList, Avatar } from "components/ui";
 // icons
-import { UserGroupIcon } from "@plane/ui";
+import { CustomSearchSelect, UserGroupIcon } from "@plane/ui";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
diff --git a/web/components/modules/select/status.tsx b/web/components/modules/select/status.tsx
index 715b09c52..c4bc6ea60 100644
--- a/web/components/modules/select/status.tsx
+++ b/web/components/modules/select/status.tsx
@@ -3,9 +3,7 @@ import React from "react";
 // react hook form
 import { Controller, FieldError, Control } from "react-hook-form";
 // ui
-import { CustomSelect } from "components/ui";
-// icons
-import { DoubleCircleIcon, ModuleStatusIcon } from "@plane/ui";
+import { CustomSelect, DoubleCircleIcon, ModuleStatusIcon } from "@plane/ui";
 // types
 import type { IModule } from "types";
 // constants
diff --git a/web/components/modules/sidebar-select/select-lead.tsx b/web/components/modules/sidebar-select/select-lead.tsx
index 8d7e770cb..83ee93404 100644
--- a/web/components/modules/sidebar-select/select-lead.tsx
+++ b/web/components/modules/sidebar-select/select-lead.tsx
@@ -4,7 +4,8 @@ import useSWR from "swr";
 // services
 import { ProjectService } from "services/project";
 // ui
-import { Avatar, CustomSearchSelect } from "components/ui";
+import { Avatar } from "components/ui";
+import { CustomSearchSelect } from "@plane/ui";
 // icons
 import { UserCircle2 } from "lucide-react";
 // fetch-keys
diff --git a/web/components/modules/sidebar-select/select-members.tsx b/web/components/modules/sidebar-select/select-members.tsx
index f31e9b1a4..c25959e3f 100644
--- a/web/components/modules/sidebar-select/select-members.tsx
+++ b/web/components/modules/sidebar-select/select-members.tsx
@@ -7,8 +7,8 @@ import useSWR from "swr";
 // services
 import { ProjectService } from "services/project";
 // ui
-import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
-import { UserGroupIcon } from "@plane/ui";
+import { AssigneesList, Avatar } from "components/ui";
+import { CustomSearchSelect, UserGroupIcon } from "@plane/ui";
 // icons
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
diff --git a/web/components/modules/sidebar-select/select-status.tsx b/web/components/modules/sidebar-select/select-status.tsx
index c7b40b316..9a1a31c34 100644
--- a/web/components/modules/sidebar-select/select-status.tsx
+++ b/web/components/modules/sidebar-select/select-status.tsx
@@ -3,8 +3,7 @@ import React from "react";
 // react-hook-form
 import { Control, Controller, UseFormWatch } from "react-hook-form";
 // ui
-import { DoubleCircleIcon } from "@plane/ui";
-import { CustomSelect } from "components/ui";
+import { CustomSelect, DoubleCircleIcon } from "@plane/ui";
 // types
 import { IModule } from "types";
 // common
diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx
index 3e1e25ccd..616806368 100644
--- a/web/components/modules/sidebar.tsx
+++ b/web/components/modules/sidebar.tsx
@@ -14,8 +14,7 @@ import useToast from "hooks/use-toast";
 import { LinkModal, LinksList, SidebarProgressStats } from "components/core";
 import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules";
 import ProgressChart from "components/core/sidebar/progress-chart";
-import { CustomMenu, CustomSelect } from "components/ui";
-import { Loader, ProgressBar } from "@plane/ui";
+import { CustomSelect, CustomMenu, Loader, ProgressBar } from "@plane/ui";
 // icon
 import {
   AlertCircle,
diff --git a/web/components/modules/single-module-card.tsx b/web/components/modules/single-module-card.tsx
index 542b902ed..bf1a304d8 100644
--- a/web/components/modules/single-module-card.tsx
+++ b/web/components/modules/single-module-card.tsx
@@ -9,8 +9,8 @@ import useToast from "hooks/use-toast";
 // components
 import { DeleteModuleModal } from "components/modules";
 // ui
-import { AssigneesList, CustomMenu } from "components/ui";
-import { Tooltip } from "@plane/ui";
+import { AssigneesList } from "components/ui";
+import { CustomMenu, Tooltip } from "@plane/ui";
 // icons
 import { CalendarDays, LinkIcon, Pencil, Star, Target, Trash2 } from "lucide-react";
 // helpers
diff --git a/web/components/notifications/notification-card.tsx b/web/components/notifications/notification-card.tsx
index 87a9306cf..45a2ab2b2 100644
--- a/web/components/notifications/notification-card.tsx
+++ b/web/components/notifications/notification-card.tsx
@@ -7,8 +7,7 @@ import { useRouter } from "next/router";
 import useToast from "hooks/use-toast";
 
 // icons
-import { CustomMenu } from "components/ui";
-import { ArchiveIcon, Tooltip } from "@plane/ui";
+import { ArchiveIcon, CustomMenu, Tooltip } from "@plane/ui";
 import { ArchiveRestore, Clock, MessageSquare, User2 } from "lucide-react";
 
 // helper
@@ -219,7 +218,6 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
             {snoozeOptions.map((item) => (
               <CustomMenu.MenuItem
                 key={item.label}
-                renderAs="button"
                 onClick={(e) => {
                   e.stopPropagation();
 
diff --git a/web/components/notifications/notification-header.tsx b/web/components/notifications/notification-header.tsx
index 3ccf29793..282756b98 100644
--- a/web/components/notifications/notification-header.tsx
+++ b/web/components/notifications/notification-header.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 
 // components
-import { CustomMenu } from "components/ui";
-import { ArchiveIcon, Tooltip } from "@plane/ui";
+import { ArchiveIcon, CustomMenu, Tooltip } from "@plane/ui";
 
 //icon
 import { ArrowLeft, CheckCheck, Clock, ListFilter, MoreVertical, RefreshCw, X } from "lucide-react";
@@ -102,14 +101,13 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
               </div>
             }
           >
-            <CustomMenu.MenuItem renderAs="button" onClick={markAllNotificationsAsRead}>
+            <CustomMenu.MenuItem onClick={markAllNotificationsAsRead}>
               <div className="flex items-center gap-2">
                 <CheckCheck className="h-3.5 w-3.5" />
                 Mark all as read
               </div>
             </CustomMenu.MenuItem>
             <CustomMenu.MenuItem
-              renderAs="button"
               onClick={() => {
                 setArchived(false);
                 setReadNotification(false);
@@ -122,7 +120,6 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
               </div>
             </CustomMenu.MenuItem>
             <CustomMenu.MenuItem
-              renderAs="button"
               onClick={() => {
                 setSnoozed(false);
                 setReadNotification(false);
diff --git a/web/components/notifications/select-snooze-till-modal.tsx b/web/components/notifications/select-snooze-till-modal.tsx
index 4688104f4..8107f012f 100644
--- a/web/components/notifications/select-snooze-till-modal.tsx
+++ b/web/components/notifications/select-snooze-till-modal.tsx
@@ -7,8 +7,8 @@ import { getAllTimeIn30MinutesInterval } from "helpers/date-time.helper";
 // hooks
 import useToast from "hooks/use-toast";
 // components
-import { Button } from "@plane/ui";
-import { CustomDatePicker, CustomSelect } from "components/ui";
+import { Button, CustomSelect } from "@plane/ui";
+import { CustomDatePicker } from "components/ui";
 import { X } from "lucide-react";
 // types
 import type { IUserNotification } from "types";
diff --git a/web/components/onboarding/user-details.tsx b/web/components/onboarding/user-details.tsx
index 9d0d0dcb2..e487f48dc 100644
--- a/web/components/onboarding/user-details.tsx
+++ b/web/components/onboarding/user-details.tsx
@@ -6,8 +6,7 @@ import useToast from "hooks/use-toast";
 // services
 import { UserService } from "services/user.service";
 // ui
-import { CustomSearchSelect, CustomSelect } from "components/ui";
-import { Button, Input } from "@plane/ui";
+import { Button, CustomSelect, CustomSearchSelect, Input } from "@plane/ui";
 // types
 import { IUser } from "types";
 // fetch-keys
diff --git a/web/components/pages/single-page-block.tsx b/web/components/pages/single-page-block.tsx
index 84c33e5fb..486984070 100644
--- a/web/components/pages/single-page-block.tsx
+++ b/web/components/pages/single-page-block.tsx
@@ -17,8 +17,7 @@ import { GptAssistantModal } from "components/core";
 import { CreateUpdateBlockInline } from "components/pages";
 import { RichTextEditor } from "@plane/rich-text-editor";
 // ui
-import { CustomMenu } from "components/ui";
-import { LayersIcon, TextArea } from "@plane/ui";
+import { CustomMenu, LayersIcon, TextArea } from "@plane/ui";
 // icons
 import { RefreshCw, LinkIcon, Zap, Check, MoreVertical, Pencil, Sparkle, Trash2 } from "lucide-react";
 // helpers
@@ -304,7 +303,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, showBl
                 {...provided.dragHandleProps}
               >
                 <MoreVertical className="h-4" />
-                <MoreVertical className="-ml-2.5 h-4" />
+                <MoreVertical className="-ml-5 h-4" />
               </button>
               <div
                 ref={actionSectionRef}
diff --git a/web/components/pages/single-page-detailed-item.tsx b/web/components/pages/single-page-detailed-item.tsx
index ca70d32e0..2ff00f2d5 100644
--- a/web/components/pages/single-page-detailed-item.tsx
+++ b/web/components/pages/single-page-detailed-item.tsx
@@ -7,8 +7,7 @@ import { useRouter } from "next/router";
 import useUser from "hooks/use-user";
 import useToast from "hooks/use-toast";
 // ui
-import { CustomMenu } from "components/ui";
-import { Tooltip } from "@plane/ui";
+import { CustomMenu, Tooltip } from "@plane/ui";
 // icons
 import { AlertCircle, LinkIcon, Lock, Pencil, Star, Trash2, Unlock } from "lucide-react";
 // helpers
diff --git a/web/components/pages/single-page-list-item.tsx b/web/components/pages/single-page-list-item.tsx
index d4f092495..87d5bdab2 100644
--- a/web/components/pages/single-page-list-item.tsx
+++ b/web/components/pages/single-page-list-item.tsx
@@ -7,8 +7,7 @@ import { useRouter } from "next/router";
 import useUser from "hooks/use-user";
 import useToast from "hooks/use-toast";
 // ui
-import { CustomMenu } from "components/ui";
-import { Tooltip } from "@plane/ui";
+import { CustomMenu, Tooltip } from "@plane/ui";
 // icons
 import { AlertCircle, FileText, LinkIcon, Lock, Pencil, Star, Trash2, Unlock } from "lucide-react";
 // helpers
diff --git a/web/components/profile/profile-issues-view-options.tsx b/web/components/profile/profile-issues-view-options.tsx
index c5a6e2f12..95caa002d 100644
--- a/web/components/profile/profile-issues-view-options.tsx
+++ b/web/components/profile/profile-issues-view-options.tsx
@@ -10,8 +10,7 @@ import useEstimateOption from "hooks/use-estimate-option";
 // components
 import { MyIssuesSelectFilters } from "components/issues";
 // ui
-import { CustomMenu } from "components/ui";
-import { ToggleSwitch, Tooltip } from "@plane/ui";
+import { CustomMenu, ToggleSwitch, Tooltip } from "@plane/ui";
 // icons
 import { ChevronDown, Kanban, List } from "lucide-react";
 // helpers
diff --git a/web/components/project/create-project-modal.tsx b/web/components/project/create-project-modal.tsx
index 56c3e6f05..c2ebd2ff1 100644
--- a/web/components/project/create-project-modal.tsx
+++ b/web/components/project/create-project-modal.tsx
@@ -8,8 +8,8 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import useToast from "hooks/use-toast";
 import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
 // ui
-import { CustomSelect } from "components/ui";
-import { Button, Input, TextArea } from "@plane/ui";
+import { Button, CustomSelect, CustomSearchSelect, Input, TextArea } from "@plane/ui";
+import { Avatar } from "components/ui";
 // components
 import { ImagePickerPopover } from "components/core";
 import EmojiIconPicker from "components/emoji-icon-picker";
diff --git a/web/components/project/form.tsx b/web/components/project/form.tsx
index 8fbef4e9d..b4bcdd808 100644
--- a/web/components/project/form.tsx
+++ b/web/components/project/form.tsx
@@ -3,8 +3,7 @@ import { Controller, useForm } from "react-hook-form";
 // components
 import EmojiIconPicker from "components/emoji-icon-picker";
 import { ImagePickerPopover } from "components/core";
-import { CustomSelect } from "components/ui";
-import { Button, Input, TextArea } from "@plane/ui";
+import { Button, CustomSelect, Input, TextArea } from "@plane/ui";
 // types
 import { IProject, IWorkspace } from "types";
 // helpers
diff --git a/web/components/project/member-select.tsx b/web/components/project/member-select.tsx
index d7de89e33..90b4cb6b3 100644
--- a/web/components/project/member-select.tsx
+++ b/web/components/project/member-select.tsx
@@ -7,7 +7,8 @@ import useSWR from "swr";
 // services
 import { ProjectService } from "services/project";
 // ui
-import { Avatar, CustomSearchSelect } from "components/ui";
+import { Avatar } from "components/ui";
+import { CustomSearchSelect } from "@plane/ui";
 // icon
 import { Ban } from "lucide-react";
 // fetch-keys
diff --git a/web/components/project/send-project-invitation-modal.tsx b/web/components/project/send-project-invitation-modal.tsx
index 75002f5d9..961e28802 100644
--- a/web/components/project/send-project-invitation-modal.tsx
+++ b/web/components/project/send-project-invitation-modal.tsx
@@ -8,8 +8,8 @@ import { useForm, Controller, useFieldArray } from "react-hook-form";
 
 import { Dialog, Transition } from "@headlessui/react";
 // ui
-import { Button } from "@plane/ui";
-import { Avatar, CustomSearchSelect, CustomSelect } from "components/ui";
+import { Button, CustomSelect, CustomSearchSelect } from "@plane/ui";
+import { Avatar } from "components/ui";
 //icons
 import { ChevronDown, Plus, X } from "lucide-react";
 // services
diff --git a/web/components/project/settings/single-label.tsx b/web/components/project/settings/single-label.tsx
index 5ad4f60f6..5dc0d36dc 100644
--- a/web/components/project/settings/single-label.tsx
+++ b/web/components/project/settings/single-label.tsx
@@ -3,8 +3,7 @@ import { Controller, useForm } from "react-hook-form";
 import { TwitterPicker } from "react-color";
 import { Popover, Transition } from "@headlessui/react";
 // ui
-import { CustomMenu } from "components/ui";
-import { Button, Input } from "@plane/ui";
+import { Button, CustomMenu, Input } from "@plane/ui";
 // icons
 import { Component, Pencil } from "lucide-react";
 // types
diff --git a/web/components/project/sidebar-list-item.tsx b/web/components/project/sidebar-list-item.tsx
index 6f5e3b137..abc115001 100644
--- a/web/components/project/sidebar-list-item.tsx
+++ b/web/components/project/sidebar-list-item.tsx
@@ -17,7 +17,6 @@ import {
   LogOut,
   ChevronDown,
 } from "lucide-react";
-import { Tooltip, ArchiveIcon, PhotoFilterIcon, DiceIcon, ContrastIcon, LayersIcon } from "@plane/ui";
 // hooks
 import useToast from "hooks/use-toast";
 // helpers
@@ -27,7 +26,7 @@ import { IProject } from "types";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { CustomMenu } from "components/ui";
+import { CustomMenu, Tooltip, ArchiveIcon, PhotoFilterIcon, DiceIcon, ContrastIcon, LayersIcon } from "@plane/ui";
 import { LeaveProjectModal, DeleteProjectModal } from "components/project";
 import { PublishProjectModal } from "components/project/publish-project";
 
diff --git a/web/components/states/create-state-modal.tsx b/web/components/states/create-state-modal.tsx
index 046857e09..b6caa8382 100644
--- a/web/components/states/create-state-modal.tsx
+++ b/web/components/states/create-state-modal.tsx
@@ -9,8 +9,7 @@ import { ProjectStateService } from "services/project";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect } from "components/ui";
-import { Button, Input, TextArea } from "@plane/ui";
+import { Button, CustomSelect, Input, TextArea } from "@plane/ui";
 // icons
 import { ChevronDown } from "lucide-react";
 // types
diff --git a/web/components/states/create-update-state-inline.tsx b/web/components/states/create-update-state-inline.tsx
index d5d0d9739..ec83214c3 100644
--- a/web/components/states/create-update-state-inline.tsx
+++ b/web/components/states/create-update-state-inline.tsx
@@ -15,8 +15,7 @@ import { ProjectStateService } from "services/project";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect } from "components/ui";
-import { Button, Input, Tooltip } from "@plane/ui";
+import { Button, CustomSelect, Input, Tooltip } from "@plane/ui";
 // types
 import type { IUser, IState, IStateResponse } from "types";
 // fetch-keys
diff --git a/web/components/views/view-list-item.tsx b/web/components/views/view-list-item.tsx
index c418d175d..73e33e650 100644
--- a/web/components/views/view-list-item.tsx
+++ b/web/components/views/view-list-item.tsx
@@ -8,7 +8,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { DeleteProjectViewModal } from "components/views";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 // icons
 import { PencilIcon, Sparkles, StarIcon, TrashIcon } from "lucide-react";
 // types
diff --git a/web/components/web-view/comment-card.tsx b/web/components/web-view/comment-card.tsx
index db7a512ae..7cabdc5cb 100644
--- a/web/components/web-view/comment-card.tsx
+++ b/web/components/web-view/comment-card.tsx
@@ -9,7 +9,7 @@ import { FileService } from "services/file.service";
 // hooks
 import useUser from "hooks/use-user";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 import { CommentReaction } from "components/issues";
 import { LiteTextEditorWithRef, LiteReadOnlyEditorWithRef } from "@plane/lite-text-editor";
 
@@ -155,7 +155,6 @@ export const CommentCard: React.FC<Props> = (props) => {
             <>
               {comment.access === "INTERNAL" ? (
                 <CustomMenu.MenuItem
-                  renderAs="button"
                   onClick={() => onSubmit(comment.id, { access: "EXTERNAL" })}
                   className="flex items-center gap-1"
                 >
@@ -164,7 +163,6 @@ export const CommentCard: React.FC<Props> = (props) => {
                 </CustomMenu.MenuItem>
               ) : (
                 <CustomMenu.MenuItem
-                  renderAs="button"
                   onClick={() => onSubmit(comment.id, { access: "INTERNAL" })}
                   className="flex items-center gap-1"
                 >
diff --git a/web/components/workspace/completed-issues-graph.tsx b/web/components/workspace/completed-issues-graph.tsx
index 5f0512660..628b5206d 100644
--- a/web/components/workspace/completed-issues-graph.tsx
+++ b/web/components/workspace/completed-issues-graph.tsx
@@ -1,5 +1,6 @@
 // ui
-import { CustomMenu, LineGraph } from "components/ui";
+import { LineGraph } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 // constants
 import { MONTHS } from "constants/project";
 
diff --git a/web/components/workspace/create-workspace-form.tsx b/web/components/workspace/create-workspace-form.tsx
index a84bf4470..051802638 100644
--- a/web/components/workspace/create-workspace-form.tsx
+++ b/web/components/workspace/create-workspace-form.tsx
@@ -6,8 +6,7 @@ import { WorkspaceService } from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect } from "components/ui";
-import { Button, Input } from "@plane/ui";
+import { Button, CustomSelect, Input } from "@plane/ui";
 // types
 import { IUser, IWorkspace } from "types";
 // fetch-keys
diff --git a/web/components/workspace/send-workspace-invitation-modal.tsx b/web/components/workspace/send-workspace-invitation-modal.tsx
index 87bc4b108..1fa4f002a 100644
--- a/web/components/workspace/send-workspace-invitation-modal.tsx
+++ b/web/components/workspace/send-workspace-invitation-modal.tsx
@@ -7,8 +7,7 @@ import { WorkspaceService } from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect } from "components/ui";
-import { Button, Input } from "@plane/ui";
+import { Button, CustomSelect, Input } from "@plane/ui";
 // icons
 import { Plus, X } from "lucide-react";
 // types
diff --git a/web/components/workspace/views/view-list-item.tsx b/web/components/workspace/views/view-list-item.tsx
index 556be3d91..b6b62a428 100644
--- a/web/components/workspace/views/view-list-item.tsx
+++ b/web/components/workspace/views/view-list-item.tsx
@@ -6,7 +6,7 @@ import { useState } from "react";
 // components
 import { CreateUpdateWorkspaceViewModal, DeleteGlobalViewModal } from "components/workspace";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 // icons
 import { Pencil, Sparkles, Trash2 } from "lucide-react";
 // helpers
diff --git a/web/pages/[workspaceSlug]/me/profile/index.tsx b/web/pages/[workspaceSlug]/me/profile/index.tsx
index 3f6ac3a67..9e2e16570 100644
--- a/web/pages/[workspaceSlug]/me/profile/index.tsx
+++ b/web/pages/[workspaceSlug]/me/profile/index.tsx
@@ -14,8 +14,7 @@ import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting
 import { ImagePickerPopover, ImageUploadModal } from "components/core";
 import { WorkspaceSettingHeader } from "components/headers";
 // ui
-import { Button, Input, Spinner } from "@plane/ui";
-import { CustomSearchSelect, CustomSelect } from "components/ui";
+import { Button, CustomSelect, CustomSearchSelect, Input, Spinner } from "@plane/ui";
 // icons
 import { User2, UserCircle2 } from "lucide-react";
 // types
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
index b1879d255..612b4c813 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -19,8 +19,7 @@ import { CycleService } from "services/cycle.service";
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 // ui
-import { BreadcrumbItem, Breadcrumbs, ContrastIcon } from "@plane/ui";
-import { CustomMenu } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs, CustomMenu, ContrastIcon } from "@plane/ui";
 import { EmptyState } from "components/common";
 // images
 import emptyCycle from "public/empty-state/cycle.svg";
@@ -126,8 +125,7 @@ const SingleCycle: React.FC = () => {
             {cycles?.map((cycle) => (
               <CustomMenu.MenuItem
                 key={cycle.id}
-                renderAs="a"
-                href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}
+                onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`)}
               >
                 {truncateText(cycle.name, 40)}
               </CustomMenu.MenuItem>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
index 772972337..4ce0d53d5 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
@@ -15,8 +15,7 @@ import { ModuleDetailsSidebar } from "components/modules";
 import { ModuleLayoutRoot } from "components/issues";
 import { ModuleIssuesHeader } from "components/headers";
 // ui
-import { BreadcrumbItem, Breadcrumbs, DiceIcon } from "@plane/ui";
-import { CustomMenu } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs, CustomMenu, DiceIcon } from "@plane/ui";
 import { EmptyState } from "components/common";
 // images
 import emptyModule from "public/empty-state/module.svg";
@@ -121,8 +120,7 @@ const SingleModule: React.FC = () => {
             {modules?.map((module) => (
               <CustomMenu.MenuItem
                 key={module.id}
-                renderAs="a"
-                href={`/${workspaceSlug}/projects/${projectId}/modules/${module.id}`}
+                onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/modules/${module.id}`)}
               >
                 {truncateText(module.name, 40)}
               </CustomMenu.MenuItem>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index 2e8402d84..5e2b41224 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -28,9 +28,8 @@ import { CreateUpdateBlockInline, SinglePageBlock } from "components/pages";
 import { CreateLabelModal } from "components/labels";
 import { CreateBlock } from "components/pages/create-block";
 // ui
-import { CustomSearchSelect } from "components/ui";
 import { EmptyState } from "components/common";
-import { BreadcrumbItem, Breadcrumbs, TextArea, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
+import { BreadcrumbItem, Breadcrumbs, CustomSearchSelect, TextArea, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
 // images
 import emptyPage from "public/empty-state/page.svg";
 // icons
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index f6556fd26..a23ac5f5f 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -19,8 +19,7 @@ import SendProjectInvitationModal from "components/project/send-project-invitati
 import { MemberSelect } from "components/project";
 import { ProjectSettingHeader } from "components/headers";
 // ui
-import { Button, Loader } from "@plane/ui";
-import { CustomMenu, CustomSelect } from "components/ui";
+import { Button, CustomMenu, CustomSelect, Loader } from "@plane/ui";
 // icons
 import { ChevronDown, X } from "lucide-react";
 // types
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
index 263c953dd..87b230e35 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
@@ -11,8 +11,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
 import { ProjectViewLayoutRoot } from "components/issues";
 // ui
-import { BreadcrumbItem, Breadcrumbs, PhotoFilterIcon } from "@plane/ui";
-import { CustomMenu } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs, CustomMenu, PhotoFilterIcon } from "@plane/ui";
 import { EmptyState } from "components/common";
 // icons
 // images
@@ -77,8 +76,7 @@ const SingleView: React.FC = () => {
           {views?.map((view) => (
             <CustomMenu.MenuItem
               key={view.id}
-              renderAs="a"
-              href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}
+              onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/views/${view.id}`)}
             >
               {truncateText(view.name, 40)}
             </CustomMenu.MenuItem>
diff --git a/web/pages/[workspaceSlug]/settings/index.tsx b/web/pages/[workspaceSlug]/settings/index.tsx
index 0f4c4bd66..35fb220e8 100644
--- a/web/pages/[workspaceSlug]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/settings/index.tsx
@@ -20,8 +20,7 @@ import { DeleteWorkspaceModal } from "components/workspace";
 import { WorkspaceSettingHeader } from "components/headers";
 // ui
 import { Disclosure, Transition } from "@headlessui/react";
-import { CustomSelect } from "components/ui";
-import { Button, Input, Spinner } from "@plane/ui";
+import { Button, CustomSelect, Input, Spinner } from "@plane/ui";
 // icons
 import { ChevronDown, ChevronUp, Pencil } from "lucide-react";
 // types
diff --git a/web/pages/[workspaceSlug]/settings/members.tsx b/web/pages/[workspaceSlug]/settings/members.tsx
index 5d5582936..0a2cc7cc9 100644
--- a/web/pages/[workspaceSlug]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/settings/members.tsx
@@ -18,8 +18,7 @@ import ConfirmWorkspaceMemberRemove from "components/workspace/confirm-workspace
 import SendWorkspaceInvitationModal from "components/workspace/send-workspace-invitation-modal";
 import { WorkspaceSettingHeader } from "components/headers";
 // ui
-import { Button, Loader } from "@plane/ui";
-import { CustomMenu, CustomSelect } from "components/ui";
+import { Button, CustomMenu, CustomSelect, Loader } from "@plane/ui";
 // icons
 import { ChevronDown, X } from "lucide-react";
 // types