diff --git a/packages/types/src/issues/issue.d.ts b/packages/types/src/issues/issue.d.ts
index 42c95dc4e..990b308e7 100644
--- a/packages/types/src/issues/issue.d.ts
+++ b/packages/types/src/issues/issue.d.ts
@@ -15,7 +15,7 @@ export type TIssue = {
   priority: TIssuePriorities;
   label_ids: string[];
   assignee_ids: string[];
-  estimate_point: number | null;
+  estimate_point: string | null;
 
   sub_issues_count: number;
   attachment_count: number;
diff --git a/web/components/core/modals/gpt-assistant-popover.tsx b/web/components/core/modals/gpt-assistant-popover.tsx
index 9843124e4..04d696790 100644
--- a/web/components/core/modals/gpt-assistant-popover.tsx
+++ b/web/components/core/modals/gpt-assistant-popover.tsx
@@ -5,7 +5,7 @@ import { Controller, useForm } from "react-hook-form"; // services
 import { usePopper } from "react-popper";
 // ui
 import { AlertCircle } from "lucide-react";
-import { Popover, PopoverButton, PopoverPanel, Transition } from "@headlessui/react";
+import { Popover, Transition } from "@headlessui/react";
 import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 import { RichTextReadOnlyEditor } from "@/components/editor/rich-text-editor/rich-text-read-only-editor";
 // icons
@@ -178,9 +178,9 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
 
   return (
     <Popover as="div" className={`relative w-min text-left`}>
-      <PopoverButton as={Fragment}>
+      <Popover.Button as={Fragment}>
         <button ref={setReferenceElement}>{button}</button>
-      </PopoverButton>
+      </Popover.Button>
       <Transition
         show={isOpen}
         as={React.Fragment}
@@ -191,7 +191,7 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <PopoverPanel
+        <Popover.Panel
           as="div"
           className={`fixed z-10 flex w-full min-w-[50rem] max-w-full flex-col space-y-4 overflow-hidden rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${className}`}
           ref={setPopperElement as Ref<HTMLDivElement>}
@@ -261,7 +261,7 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
               </Button>
             </div>
           </div>
-        </PopoverPanel>
+        </Popover.Panel>
       </Transition>
     </Popover>
   );
diff --git a/web/components/dropdowns/estimate.tsx b/web/components/dropdowns/estimate.tsx
index da0c77d9b..99e8106de 100644
--- a/web/components/dropdowns/estimate.tsx
+++ b/web/components/dropdowns/estimate.tsx
@@ -1,5 +1,4 @@
 import { Fragment, ReactNode, useRef, useState } from "react";
-import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
 import { Check, ChevronDown, Search, Triangle } from "lucide-react";
@@ -9,6 +8,8 @@ import { cn } from "@/helpers/common.helper";
 // hooks
 import {
   useAppRouter,
+  useEstimate,
+  useProjectEstimates,
   //  useEstimate
 } from "@/hooks/store";
 import { useDropdown } from "@/hooks/use-dropdown";
@@ -22,15 +23,15 @@ type Props = TDropdownProps & {
   button?: ReactNode;
   dropdownArrow?: boolean;
   dropdownArrowClassName?: string;
-  onChange: (val: number | null) => void;
+  onChange: (val: string | undefined) => void;
   onClose?: () => void;
   projectId: string;
-  value: number | null;
+  value: string | undefined;
 };
 
 type DropdownOptions =
   | {
-      value: number | null;
+      value: string | null;
       query: string;
       content: JSX.Element;
     }[]
@@ -79,23 +80,29 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
   });
   // store hooks
   const { workspaceSlug } = useAppRouter();
-  console.log("workspaceSlug", workspaceSlug);
-  console.log("projectId", projectId);
 
-  // const { fetchProjectEstimates, getProjectActiveEstimateDetails, getEstimatePointValue } = useEstimate();
-  // const activeEstimate = getProjectActiveEstimateDetails(projectId);
-  const activeEstimate: any = undefined;
+  const { currentActiveEstimateId, getProjectEstimates } = useProjectEstimates();
+  const { estimatePointIds, estimatePointById } = useEstimate(
+    currentActiveEstimateId ? currentActiveEstimateId : undefined
+  );
 
-  const options: DropdownOptions = sortBy(activeEstimate?.points ?? [], "key")?.map((point) => ({
-    value: point.key,
-    query: `${point?.value}`,
-    content: (
-      <div className="flex items-center gap-2">
-        <Triangle className="h-3 w-3 flex-shrink-0" />
-        <span className="flex-grow truncate">{point.value}</span>
-      </div>
-    ),
-  }));
+  const options: DropdownOptions = (estimatePointIds ?? [])
+    ?.map((estimatePoint) => {
+      const currentEstimatePoint = estimatePointById(estimatePoint);
+      if (currentEstimatePoint)
+        return {
+          value: currentEstimatePoint.id,
+          query: `${currentEstimatePoint?.value}`,
+          content: (
+            <div className="flex items-center gap-2">
+              <Triangle className="h-3 w-3 flex-shrink-0" />
+              <span className="flex-grow truncate">{currentEstimatePoint.value}</span>
+            </div>
+          ),
+        };
+      else undefined;
+    })
+    .filter((estimatePointDropdownOption) => estimatePointDropdownOption != undefined) as DropdownOptions;
   options?.unshift({
     value: null,
     query: "No estimate",
@@ -110,14 +117,10 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
   const filteredOptions =
     query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
 
-  const selectedEstimate =
-    value !== null
-      ? // getEstimatePointValue(value, projectId)
-        null
-      : null;
+  const selectedEstimate = value && estimatePointById ? estimatePointById(value) : undefined;
 
   const onOpen = async () => {
-    // if (!activeEstimate && workspaceSlug) await fetchProjectEstimates(workspaceSlug, projectId);
+    if (!currentActiveEstimateId && workspaceSlug) await getProjectEstimates(workspaceSlug, projectId);
   };
 
   const { handleClose, handleKeyDown, handleOnClick, searchInputKeyDown } = useDropdown({
@@ -131,7 +134,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
     setQuery,
   });
 
-  const dropdownOnChange = (val: number | null) => {
+  const dropdownOnChange = (val: string | undefined) => {
     onChange(val);
     handleClose();
   };
@@ -175,13 +178,13 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
               className={buttonClassName}
               isActive={isOpen}
               tooltipHeading="Estimate"
-              tooltipContent={selectedEstimate !== null ? selectedEstimate : placeholder}
+              tooltipContent={selectedEstimate ? selectedEstimate?.value : placeholder}
               showTooltip={showTooltip}
               variant={buttonVariant}
             >
               {!hideIcon && <Triangle className="h-3 w-3 flex-shrink-0" />}
               {(selectedEstimate || placeholder) && BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
-                <span className="flex-grow truncate">{selectedEstimate !== null ? selectedEstimate : placeholder}</span>
+                <span className="flex-grow truncate">{selectedEstimate ? selectedEstimate?.value : placeholder}</span>
               )}
               {dropdownArrow && (
                 <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
@@ -215,20 +218,14 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
               {filteredOptions ? (
                 filteredOptions.length > 0 ? (
                   filteredOptions.map((option) => (
-                    <Combobox.Option
-                      key={option.value}
-                      value={option.value}
-                      className={({ active, selected }) =>
-                        `flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 ${
-                          active ? "bg-custom-background-80" : ""
-                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                      }
-                    >
-                      {({ selected }) => (
-                        <>
+                    <Combobox.Option key={option.value} value={option.value}>
+                      {({ active, selected }) => (
+                        <div
+                          className={`flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 ${active ? `!hover:bg-custom-background-80` : ``} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`}
+                        >
                           <span className="flex-grow truncate">{option.content}</span>
                           {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
-                        </>
+                        </div>
                       )}
                     </Combobox.Option>
                   ))
diff --git a/web/components/empty-state/comic-box-button.tsx b/web/components/empty-state/comic-box-button.tsx
index 8aeba83eb..52cbb46cb 100644
--- a/web/components/empty-state/comic-box-button.tsx
+++ b/web/components/empty-state/comic-box-button.tsx
@@ -1,6 +1,6 @@
 import { Ref, useState } from "react";
 import { usePopper } from "react-popper";
-import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
+import { Popover } from "@headlessui/react";
 // popper
 // helper
 import { getButtonStyling } from "@plane/ui";
@@ -42,7 +42,7 @@ export const ComicBoxButton: React.FC<Props> = (props) => {
 
   return (
     <Popover>
-      <PopoverButton ref={setReferenceElement} onClick={onClick} disabled={disabled}>
+      <Popover.Button ref={setReferenceElement} onClick={onClick} disabled={disabled}>
         <div className={`flex items-center gap-2.5 ${getButtonStyling("primary", "lg", disabled)}`}>
           {icon}
           <span className="leading-4">{label}</span>
@@ -55,9 +55,9 @@ export const ComicBoxButton: React.FC<Props> = (props) => {
             <div className={`absolute bg-blue-400/40 right-0 h-1.5 w-1.5 mt-0.5 mr-0.5 rounded-full`} />
           </span>
         </div>
-      </PopoverButton>
+      </Popover.Button>
       {isHovered && (
-        <PopoverPanel
+        <Popover.Panel
           as="div"
           className="flex flex-col rounded border border-custom-border-200 bg-custom-background-100 p-5 relative min-w-80"
           ref={setPopperElement as Ref<HTMLDivElement>}
@@ -68,7 +68,7 @@ export const ComicBoxButton: React.FC<Props> = (props) => {
           <div className="absolute w-2 h-2 bg-custom-background-100 border rounded-lb-sm  border-custom-border-200 border-r-0 border-t-0 transform rotate-45 bottom-2 -left-[5px]" />
           <h3 className="text-lg font-semibold w-full">{title}</h3>
           <h4 className="mt-1 text-sm">{description}</h4>
-        </PopoverPanel>
+        </Popover.Panel>
       )}
     </Popover>
   );
diff --git a/web/components/estimates/points/select-dropdown.tsx b/web/components/estimates/points/select-dropdown.tsx
index c162fd7d2..9176bb629 100644
--- a/web/components/estimates/points/select-dropdown.tsx
+++ b/web/components/estimates/points/select-dropdown.tsx
@@ -1,6 +1,6 @@
 import { FC, useRef, Fragment, useState } from "react";
 import { Info, Check, ChevronDown } from "lucide-react";
-import { Listbox, ListboxButton, ListboxOptions, Transition, ListboxOption } from "@headlessui/react";
+import { Listbox, Transition } from "@headlessui/react";
 import { TEstimatePointsObject } from "@plane/types";
 import { Tooltip } from "@plane/ui";
 // helpers
@@ -51,7 +51,7 @@ export const EstimatePointDropdown: FC<TEstimatePointDropdown> = (props) => {
         }}
         className="w-full flex-shrink-0 text-left"
       >
-        <ListboxButton
+        <Listbox.Button
           type="button"
           ref={buttonRef}
           onClick={() => setIsDropdownOpen((prev) => !prev)}
@@ -75,7 +75,7 @@ export const EstimatePointDropdown: FC<TEstimatePointDropdown> = (props) => {
               </Tooltip>
             </>
           )}
-        </ListboxButton>
+        </Listbox.Button>
         <Transition
           show={isDropdownOpen}
           as={Fragment}
@@ -86,12 +86,12 @@ export const EstimatePointDropdown: FC<TEstimatePointDropdown> = (props) => {
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >
-          <ListboxOptions
+          <Listbox.Options
             ref={dropdownRef}
             className="fixed z-10 mt-1 h-fit w-48 sm:w-60 overflow-y-auto rounded-md border border-custom-border-200 bg-custom-background-100 shadow-sm focus:outline-none"
           >
             <div className="p-1.5">
-              <ListboxOption
+              <Listbox.Option
                 value={"none"}
                 className={cn(
                   `cursor-pointer select-none truncate rounded px-1 py-1.5 hover:bg-custom-background-90`,
@@ -102,9 +102,9 @@ export const EstimatePointDropdown: FC<TEstimatePointDropdown> = (props) => {
                   <div className="text-sm font-medium w-full line-clamp-1">None</div>
                   {selectedOption === "none" && <Check size={12} />}
                 </div>
-              </ListboxOption>
+              </Listbox.Option>
               {options.map((option) => (
-                <ListboxOption
+                <Listbox.Option
                   key={option?.key}
                   value={option?.id}
                   className={cn(
@@ -116,10 +116,10 @@ export const EstimatePointDropdown: FC<TEstimatePointDropdown> = (props) => {
                     <div className="text-sm font-medium w-full line-clamp-1">{option.value}</div>
                     {selectedOption === option?.id && <Check size={12} />}
                   </div>
-                </ListboxOption>
+                </Listbox.Option>
               ))}
             </div>
-          </ListboxOptions>
+          </Listbox.Options>
         </Transition>
       </Listbox>
     </div>
diff --git a/web/components/estimates/points/update.tsx b/web/components/estimates/points/update.tsx
index 9c5d1fc18..98a06edd8 100644
--- a/web/components/estimates/points/update.tsx
+++ b/web/components/estimates/points/update.tsx
@@ -69,7 +69,7 @@ export const EstimatePointUpdate: FC<TEstimatePointUpdate> = observer((props) =>
       let isEstimateValid = false;
 
       const currentEstimatePointValues = estimatePoints
-        .map((point) => point?.value || undefined)
+        .map((point) => (point?.id != estimatePoint?.id ? point?.value : undefined))
         .filter((value) => value != undefined) as string[];
       const isRepeated =
         (estimateType && isEstimatePointValuesRepeated(currentEstimatePointValues, estimateType, estimateInputValue)) ||
diff --git a/web/components/inbox/modals/create-edit-modal/issue-properties.tsx b/web/components/inbox/modals/create-edit-modal/issue-properties.tsx
index b020315f0..c50195483 100644
--- a/web/components/inbox/modals/create-edit-modal/issue-properties.tsx
+++ b/web/components/inbox/modals/create-edit-modal/issue-properties.tsx
@@ -142,10 +142,10 @@ export const InboxIssueProperties: FC<TInboxIssueProperties> = observer((props)
       )}
 
       {/* estimate */}
-      {isVisible && areEstimateEnabledByProjectId(projectId) && (
+      {isVisible && projectId && areEstimateEnabledByProjectId(projectId) && (
         <div className="h-7">
           <EstimateDropdown
-            value={data?.estimate_point || null}
+            value={data?.estimate_point || undefined}
             onChange={(estimatePoint) => handleData("estimate_point", estimatePoint)}
             projectId={projectId}
             buttonVariant="border-with-text"
diff --git a/web/components/issues/issue-detail/sidebar.tsx b/web/components/issues/issue-detail/sidebar.tsx
index 8d33ea771..993c61706 100644
--- a/web/components/issues/issue-detail/sidebar.tsx
+++ b/web/components/issues/issue-detail/sidebar.tsx
@@ -54,13 +54,7 @@ import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper"
 import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
 import { copyTextToClipboard } from "@/helpers/string.helper";
 // types
-import {
-  // useEstimate,
-  useIssueDetail,
-  useProject,
-  useProjectState,
-  useUser,
-} from "@/hooks/store";
+import { useProjectEstimates, useIssueDetail, useProject, useProjectState, useUser } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // components
 import type { TIssueOperations } from "./root";
@@ -88,8 +82,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
   // store hooks
   const { getProjectById } = useProject();
   const { data: currentUser } = useUser();
-  // const { areEstimatesEnabledForCurrentProject } = useEstimate();
-  const areEstimatesEnabledForCurrentProject = false;
+  const { areEstimateEnabledByProjectId } = useProjectEstimates();
   const {
     issue: { getIssueById },
   } = useIssueDetail();
@@ -319,15 +312,17 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               />
             </div>
 
-            {areEstimatesEnabledForCurrentProject && (
+            {projectId && areEstimateEnabledByProjectId(projectId) && (
               <div className="flex h-8 items-center gap-2">
                 <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
                   <Triangle className="h-4 w-4 flex-shrink-0" />
                   <span>Estimate</span>
                 </div>
                 <EstimateDropdown
-                  value={issue?.estimate_point !== null ? issue.estimate_point : null}
-                  onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { estimate_point: val })}
+                  value={issue?.estimate_point ?? undefined}
+                  onChange={(val: string | undefined) =>
+                    issueOperations.update(workspaceSlug, projectId, issueId, { estimate_point: val })
+                  }
                   projectId={projectId}
                   disabled={!isEditable}
                   buttonVariant="transparent-with-text"
diff --git a/web/components/issues/issue-layouts/properties/all-properties.tsx b/web/components/issues/issue-layouts/properties/all-properties.tsx
index aa1c5398f..7d5600a4a 100644
--- a/web/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/web/components/issues/issue-layouts/properties/all-properties.tsx
@@ -220,7 +220,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
       );
   };
 
-  const handleEstimate = (value: number | null) => {
+  const handleEstimate = (value: string | undefined) => {
     updateIssue &&
       updateIssue(issue.project_id, issue.id, { estimate_point: value }).then(() => {
         captureIssueEvent({
@@ -398,7 +398,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
         <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="estimate">
           <div className="h-5" onClick={handleEventPropagation}>
             <EstimateDropdown
-              value={issue.estimate_point}
+              value={issue.estimate_point ?? undefined}
               onChange={handleEstimate}
               projectId={issue.project_id}
               disabled={isReadOnly}
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
index 6acc0f6a5..8867d1b45 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
@@ -17,7 +17,7 @@ export const SpreadsheetEstimateColumn: React.FC<Props> = observer((props: Props
   return (
     <div className="h-11 border-b-[0.5px] border-custom-border-200">
       <EstimateDropdown
-        value={issue.estimate_point}
+        value={issue.estimate_point || undefined}
         onChange={(data) =>
           onChange(issue, { estimate_point: data }, { changed_property: "estimate_point", change_details: data })
         }
diff --git a/web/components/issues/issue-modal/form.tsx b/web/components/issues/issue-modal/form.tsx
index 9f79dbcb5..b39761cb5 100644
--- a/web/components/issues/issue-modal/form.tsx
+++ b/web/components/issues/issue-modal/form.tsx
@@ -673,7 +673,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                   render={({ field: { value, onChange } }) => (
                     <div className="h-7">
                       <EstimateDropdown
-                        value={value}
+                        value={value || undefined}
                         onChange={(estimatePoint) => {
                           onChange(estimatePoint);
                           handleFormChange();
diff --git a/web/components/issues/peek-overview/properties.tsx b/web/components/issues/peek-overview/properties.tsx
index 5364dacbb..b152ae792 100644
--- a/web/components/issues/peek-overview/properties.tsx
+++ b/web/components/issues/peek-overview/properties.tsx
@@ -197,14 +197,14 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
               <span>Estimate</span>
             </div>
             <EstimateDropdown
-              value={issue?.estimate_point !== null ? issue.estimate_point : null}
+              value={issue.estimate_point ?? undefined}
               onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { estimate_point: val })}
               projectId={projectId}
               disabled={disabled}
               buttonVariant="transparent-with-text"
               className="w-3/4 flex-grow group"
               buttonContainerClassName="w-full text-left"
-              buttonClassName={`text-sm ${issue?.estimate_point !== null ? "" : "text-custom-text-400"}`}
+              buttonClassName={`text-sm ${issue?.estimate_point !== undefined ? "" : "text-custom-text-400"}`}
               placeholder="None"
               hideIcon
               dropdownArrow
diff --git a/web/components/radio-group/radio-group.tsx b/web/components/radio-group/radio-group.tsx
deleted file mode 100644
index 949568020..000000000
--- a/web/components/radio-group/radio-group.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from "react";
-import { Field, Label, Radio, RadioGroup } from "@headlessui/react";
-// helpers
-import { cn } from "@/helpers/common.helper";
-
-type RadioInputProps = {
-  label: string | React.ReactNode | undefined;
-  labelClassName?: string;
-  ariaLabel?: string;
-  options: { label: string; value: string; disabled?: boolean }[];
-  vertical?: boolean;
-  selected: string;
-  onChange: (value: string) => void;
-  className?: string;
-};
-
-const RadioInput = ({
-  label: inputLabel,
-  labelClassName: inputLabelClassName,
-  options,
-  vertical,
-  selected,
-  ariaLabel,
-  onChange,
-  className,
-}: RadioInputProps) => {
-  const wrapperClass = vertical ? "flex flex-col gap-1" : "flex gap-2";
-
-  const setSelected = (value: string) => {
-    onChange(value);
-  };
-
-  let aria = ariaLabel ? ariaLabel.toLowerCase().replace(" ", "-") : "";
-  if (!aria && typeof inputLabel === "string") {
-    aria = inputLabel.toLowerCase().replace(" ", "-");
-  } else {
-    aria = "radio-input";
-  }
-
-  return (
-    <RadioGroup value={selected} onChange={setSelected} aria-label={aria} className={className}>
-      <Label className={cn(`mb-2`, inputLabelClassName)}>{inputLabel}</Label>
-      <div className={`${wrapperClass}`}>
-        {options.map(({ value, label, disabled }) => (
-          <Field key={label} className="flex items-center gap-2">
-            <Radio
-              value={value}
-              className="group flex size-5 items-center justify-center rounded-full border border-custom-border-400 bg-custom-background-500 data-[checked]:bg-custom-primary-200 data-[checked]:border-custom-primary-100 cursor-pointer
-              data-[disabled]:bg-custom-background-200
-              data-[disabled]:border-custom-border-200
-              data-[disabled]:cursor-not-allowed"
-              disabled={disabled}
-            >
-              <span className="invisible size-2 rounded-full bg-white group-data-[checked]:visible" />
-            </Radio>
-            <Label className="text-base cursor-pointer">{label}</Label>
-          </Field>
-        ))}
-      </div>
-    </RadioGroup>
-  );
-};
-
-export { RadioInput };
diff --git a/web/components/workspace/sidebar-dropdown.tsx b/web/components/workspace/sidebar-dropdown.tsx
index a2fb8111b..3f9cf6a2c 100644
--- a/web/components/workspace/sidebar-dropdown.tsx
+++ b/web/components/workspace/sidebar-dropdown.tsx
@@ -6,7 +6,7 @@ import { usePopper } from "react-popper";
 // icons
 import { Activity, Check, ChevronDown, LogOut, Mails, PlusSquare, Settings } from "lucide-react";
 // ui
-import { Menu, MenuButton, MenuItem, MenuItems, Transition } from "@headlessui/react";
+import { Menu, Transition } from "@headlessui/react";
 // types
 import { IWorkspace } from "@plane/types";
 // plane ui
@@ -104,7 +104,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
       <Menu as="div" className="relative h-full flex-grow truncate text-left">
         {({ open }) => (
           <>
-            <MenuButton className="group/menu-button h-full w-full truncate rounded-md text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:outline-none">
+            <Menu.Button className="group/menu-button h-full w-full truncate rounded-md text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:outline-none">
               <div
                 className={`flex items-center  gap-x-2 truncate rounded p-1 ${
                   sidebarCollapsed ? "justify-center" : "justify-between"
@@ -126,7 +126,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
                   />
                 )}
               </div>
-            </MenuButton>
+            </Menu.Button>
             <Transition
               as={Fragment}
               enter="transition ease-out duration-100"
@@ -136,7 +136,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
               leaveFrom="transform opacity-100 scale-100"
               leaveTo="transform opacity-0 scale-95"
             >
-              <MenuItems as={Fragment}>
+              <Menu.Items as={Fragment}>
                 <div className="fixed left-4 z-20 mt-1 flex w-full max-w-[19rem] origin-top-left flex-col divide-y divide-custom-border-100 rounded-md border-[0.5px] border-custom-sidebar-border-300 bg-custom-sidebar-background-100 shadow-custom-shadow-rg outline-none">
                   <div className="vertical-scrollbar scrollbar-sm mb-2 flex max-h-96 flex-col items-start justify-start gap-2 overflow-y-scroll px-4">
                     <h6 className="sticky top-0 z-10 h-full w-full bg-custom-sidebar-background-100 pb-1 pt-3 text-sm font-medium text-custom-sidebar-text-400">
@@ -155,7 +155,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
                               }}
                               className="w-full"
                             >
-                              <MenuItem
+                              <Menu.Item
                                 as="div"
                                 className="flex items-center justify-between gap-1 rounded p-1 text-sm text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-80"
                               >
@@ -188,7 +188,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
                                     <Check className="h-5 w-5 text-custom-sidebar-text-100" />
                                   </span>
                                 )}
-                              </MenuItem>
+                              </Menu.Item>
                             </Link>
                           ))}
                       </div>
@@ -203,13 +203,13 @@ export const WorkspaceSidebarDropdown = observer(() => {
                   </div>
                   <div className="flex w-full flex-col items-start justify-start gap-2 px-4 py-2 text-sm">
                     <Link href="/create-workspace" className="w-full">
-                      <MenuItem
+                      <Menu.Item
                         as="div"
                         className="flex items-center gap-2 rounded px-2 py-1 text-sm font-medium text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-80"
                       >
                         <PlusSquare strokeWidth={1.75} className="h-4 w-4 flex-shrink-0" />
                         Create workspace
-                      </MenuItem>
+                      </Menu.Item>
                     </Link>
                     {userLinks(workspaceSlug?.toString() ?? "", currentUser?.id ?? "").map((link, index) => (
                       <Link
@@ -220,18 +220,18 @@ export const WorkspaceSidebarDropdown = observer(() => {
                           if (index > 0) handleItemClick();
                         }}
                       >
-                        <MenuItem
+                        <Menu.Item
                           as="div"
                           className="flex items-center gap-2 rounded px-2 py-1 text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
                         >
                           <link.icon className="h-4 w-4 flex-shrink-0" />
                           {link.name}
-                        </MenuItem>
+                        </Menu.Item>
                       </Link>
                     ))}
                   </div>
                   <div className="w-full px-4 py-2">
-                    <MenuItem
+                    <Menu.Item
                       as="button"
                       type="button"
                       className="flex w-full items-center gap-2 rounded px-2 py-1 text-sm font-medium text-red-600 hover:bg-custom-sidebar-background-80"
@@ -239,17 +239,17 @@ export const WorkspaceSidebarDropdown = observer(() => {
                     >
                       <LogOut className="h-4 w-4 flex-shrink-0" />
                       Sign out
-                    </MenuItem>
+                    </Menu.Item>
                   </div>
                 </div>
-              </MenuItems>
+              </Menu.Items>
             </Transition>
           </>
         )}
       </Menu>
       {!sidebarCollapsed && (
         <Menu as="div" className="relative flex-shrink-0">
-          <MenuButton className="grid place-items-center outline-none" ref={setReferenceElement}>
+          <Menu.Button className="grid place-items-center outline-none" ref={setReferenceElement}>
             <Avatar
               name={currentUser?.display_name}
               src={currentUser?.avatar || undefined}
@@ -257,7 +257,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
               shape="square"
               className="!text-base"
             />
-          </MenuButton>
+          </Menu.Button>
           <Transition
             as={Fragment}
             enter="transition ease-out duration-100"
@@ -267,7 +267,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
             leaveFrom="transform opacity-100 scale-100"
             leaveTo="transform opacity-0 scale-95"
           >
-            <MenuItems
+            <Menu.Items
               className="absolute left-0 z-20 mt-1 flex w-52 origin-top-left  flex-col divide-y
             divide-custom-sidebar-border-200 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none"
               ref={setPopperElement as Ref<HTMLDivElement>}
@@ -284,17 +284,17 @@ export const WorkspaceSidebarDropdown = observer(() => {
                       if (index == 0) handleItemClick();
                     }}
                   >
-                    <MenuItem key={index} as="div">
+                    <Menu.Item key={index} as="div">
                       <span className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80">
                         <link.icon className="h-4 w-4 stroke-[1.5]" />
                         {link.name}
                       </span>
-                    </MenuItem>
+                    </Menu.Item>
                   </Link>
                 ))}
               </div>
               <div className={`pt-2 ${isUserInstanceAdmin || false ? "pb-2" : ""}`}>
-                <MenuItem
+                <Menu.Item
                   as="button"
                   type="button"
                   className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
@@ -302,20 +302,20 @@ export const WorkspaceSidebarDropdown = observer(() => {
                 >
                   <LogOut className="h-4 w-4 stroke-[1.5]" />
                   Sign out
-                </MenuItem>
+                </Menu.Item>
               </div>
               {isUserInstanceAdmin && (
                 <div className="p-2 pb-0">
                   <Link href={GOD_MODE_URL}>
-                    <MenuItem as="button" type="button" className="w-full">
+                    <Menu.Item as="button" type="button" className="w-full">
                       <span className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-sm font-medium text-custom-primary-100 hover:bg-custom-primary-100/30 hover:text-custom-primary-200">
                         Enter God Mode
                       </span>
-                    </MenuItem>
+                    </Menu.Item>
                   </Link>
                 </div>
               )}
-            </MenuItems>
+            </Menu.Items>
           </Transition>
         </Menu>
       )}
diff --git a/web/package.json b/web/package.json
index d4e7da7db..244947034 100644
--- a/web/package.json
+++ b/web/package.json
@@ -16,7 +16,7 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.3.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@blueprintjs/popover2": "^1.13.3",
-    "@headlessui/react": "^2.0.4",
+    "@headlessui/react": "^1.7.3",
     "@nivo/bar": "0.80.0",
     "@nivo/calendar": "0.80.0",
     "@nivo/core": "0.80.0",
diff --git a/yarn.lock b/yarn.lock
index 8716189aa..dee1ae110 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1592,7 +1592,7 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.2.tgz#d8bae93ac8b815b2bd7a98078cf91e2724ef11e5"
   integrity sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==
 
-"@headlessui/react@^1.7.13", "@headlessui/react@^1.7.19":
+"@headlessui/react@^1.7.13", "@headlessui/react@^1.7.19", "@headlessui/react@^1.7.3":
   version "1.7.19"
   resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.19.tgz#91c78cf5fcb254f4a0ebe96936d48421caf75f40"
   integrity sha512-Ll+8q3OlMJfJbAKM/+/Y2q6PPYbryqNTXDbryx7SXLIDamkF6iQFbriYHga0dY44PvDhvvBWCx1Xj4U5+G4hOw==
@@ -1600,7 +1600,7 @@
     "@tanstack/react-virtual" "^3.0.0-beta.60"
     client-only "^0.0.1"
 
-"@headlessui/react@^2.0.3", "@headlessui/react@^2.0.4":
+"@headlessui/react@^2.0.3":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-2.0.4.tgz#46cb39ca9dde3c2d15f4706c81dad78405b608f0"
   integrity sha512-16d/rOLeYsFsmPlRmXGu8DCBzrWD0zV1Ccx3n73wN87yFu8Y9+X04zflv8EJEt9TAYRyLKOmQXUnOnqQl6NgpA==