diff --git a/admin/app/email/email-config-form.tsx b/admin/app/email/email-config-form.tsx
index 8a18b481d..2cc24fc89 100644
--- a/admin/app/email/email-config-form.tsx
+++ b/admin/app/email/email-config-form.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { FC, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 // types
diff --git a/admin/app/image/form.tsx b/admin/app/image/form.tsx
index a6fe2945b..61d2875ed 100644
--- a/admin/app/image/form.tsx
+++ b/admin/app/image/form.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { FC } from "react";
 import { useForm } from "react-hook-form";
 import { IFormattedInstanceConfiguration, TInstanceImageConfigurationKeys } from "@plane/types";
diff --git a/admin/components/common/breadcrumb-link.tsx b/admin/components/common/breadcrumb-link.tsx
index dfa437231..d5a00ccaa 100644
--- a/admin/components/common/breadcrumb-link.tsx
+++ b/admin/components/common/breadcrumb-link.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import Link from "next/link";
 import { Tooltip } from "@plane/ui";
 
diff --git a/admin/components/common/confirm-discard-modal.tsx b/admin/components/common/confirm-discard-modal.tsx
index 64e4d7a08..d0ca21fc2 100644
--- a/admin/components/common/confirm-discard-modal.tsx
+++ b/admin/components/common/confirm-discard-modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Link from "next/link";
 // headless ui
@@ -43,33 +45,22 @@ export const ConfirmDiscardModal: React.FC<Props> = (props) => {
                 <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mt-3 text-center sm:mt-0 sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium leading-6 text-custom-text-300"
-                      >
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-300">
                         You have unsaved changes
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-custom-text-400">
-                          Changes you made will be lost if you go back. Do you
-                          wish to go back?
+                          Changes you made will be lost if you go back. Do you wish to go back?
                         </p>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div className="flex justify-end items-center p-4 sm:px-6 gap-2">
-                  <Button
-                    variant="neutral-primary"
-                    size="sm"
-                    onClick={handleClose}
-                  >
+                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
                     Keep editing
                   </Button>
-                  <Link
-                    href={onDiscardHref}
-                    className={getButtonStyling("primary", "sm")}
-                  >
+                  <Link href={onDiscardHref} className={getButtonStyling("primary", "sm")}>
                     Go back
                   </Link>
                 </div>
diff --git a/admin/components/common/empty-state.tsx b/admin/components/common/empty-state.tsx
index fbbe0bc0f..57489ccc6 100644
--- a/admin/components/common/empty-state.tsx
+++ b/admin/components/common/empty-state.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Image from "next/image";
 import { Button } from "@plane/ui";
diff --git a/admin/components/common/toast.tsx b/admin/components/common/toast.tsx
index fe4983db6..455e67930 100644
--- a/admin/components/common/toast.tsx
+++ b/admin/components/common/toast.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useTheme } from "next-themes";
 // ui
 import { Toast as ToastComponent } from "@plane/ui";
diff --git a/packages/editor/core/src/ui/extensions/code/code-block-node-view.tsx b/packages/editor/core/src/ui/extensions/code/code-block-node-view.tsx
index 21fc36b39..57c665231 100644
--- a/packages/editor/core/src/ui/extensions/code/code-block-node-view.tsx
+++ b/packages/editor/core/src/ui/extensions/code/code-block-node-view.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
 import { common, createLowlight } from "lowlight";
diff --git a/packages/editor/core/src/ui/mentions/mention-list.tsx b/packages/editor/core/src/ui/mentions/mention-list.tsx
index b9ac11d13..dc67d26ae 100644
--- a/packages/editor/core/src/ui/mentions/mention-list.tsx
+++ b/packages/editor/core/src/ui/mentions/mention-list.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Editor } from "@tiptap/react";
 import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import { cn } from "src/lib/utils";
diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-renderer.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-renderer.tsx
index e586bfd80..da6cd250c 100644
--- a/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-renderer.tsx
+++ b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-renderer.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { cn } from "@plane/editor-core";
 import { Editor } from "@tiptap/core";
 import tippy from "tippy.js";
diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-card.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-card.tsx
index d3b6fd04f..bc0ca00fa 100644
--- a/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-card.tsx
+++ b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-card.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 // @ts-nocheck
 import { Button } from "@plane/ui";
 import { NodeViewWrapper } from "@tiptap/react";
diff --git a/space/components/editor/toolbar.tsx b/space/components/editor/toolbar.tsx
index 19bbdab9a..0140a46b6 100644
--- a/space/components/editor/toolbar.tsx
+++ b/space/components/editor/toolbar.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useState, useCallback } from "react";
 // editor
 import { EditorMenuItemNames, EditorRefApi } from "@plane/lite-text-editor";
diff --git a/space/components/issues/issue-layouts/properties/state.tsx b/space/components/issues/issue-layouts/properties/state.tsx
index b80f1f3df..31e851c64 100644
--- a/space/components/issues/issue-layouts/properties/state.tsx
+++ b/space/components/issues/issue-layouts/properties/state.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 // ui
 import { StateGroupIcon } from "@plane/ui";
 
diff --git a/space/components/issues/peek-overview/comment/add-comment.tsx b/space/components/issues/peek-overview/comment/add-comment.tsx
index 57ed0b6f6..dd328d38d 100644
--- a/space/components/issues/peek-overview/comment/add-comment.tsx
+++ b/space/components/issues/peek-overview/comment/add-comment.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useRef } from "react";
 import { observer } from "mobx-react-lite";
 import { useForm, Controller } from "react-hook-form";
diff --git a/space/components/issues/peek-overview/comment/comment-reactions.tsx b/space/components/issues/peek-overview/comment/comment-reactions.tsx
index 1b3977794..3c769ce12 100644
--- a/space/components/issues/peek-overview/comment/comment-reactions.tsx
+++ b/space/components/issues/peek-overview/comment/comment-reactions.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { observer } from "mobx-react-lite";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
diff --git a/space/components/issues/peek-overview/full-screen-peek-view.tsx b/space/components/issues/peek-overview/full-screen-peek-view.tsx
index 4e9d5ed8c..e10c7bbbf 100644
--- a/space/components/issues/peek-overview/full-screen-peek-view.tsx
+++ b/space/components/issues/peek-overview/full-screen-peek-view.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react-lite";
 // components
 import { Loader } from "@plane/ui";
diff --git a/space/components/issues/peek-overview/header.tsx b/space/components/issues/peek-overview/header.tsx
index 3ad07e06b..b11cace82 100644
--- a/space/components/issues/peek-overview/header.tsx
+++ b/space/components/issues/peek-overview/header.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { observer } from "mobx-react-lite";
 import { Link2, MoveRight } from "lucide-react";
diff --git a/space/components/issues/peek-overview/issue-activity.tsx b/space/components/issues/peek-overview/issue-activity.tsx
index 1ccb7fa88..f2c1b48cd 100644
--- a/space/components/issues/peek-overview/issue-activity.tsx
+++ b/space/components/issues/peek-overview/issue-activity.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
diff --git a/space/components/issues/peek-overview/issue-emoji-reactions.tsx b/space/components/issues/peek-overview/issue-emoji-reactions.tsx
index ae960eab3..e25b10397 100644
--- a/space/components/issues/peek-overview/issue-emoji-reactions.tsx
+++ b/space/components/issues/peek-overview/issue-emoji-reactions.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react-lite";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 // lib
diff --git a/space/components/issues/peek-overview/issue-properties.tsx b/space/components/issues/peek-overview/issue-properties.tsx
index 2bdfe21bb..8b81f8c5e 100644
--- a/space/components/issues/peek-overview/issue-properties.tsx
+++ b/space/components/issues/peek-overview/issue-properties.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { CalendarCheck2, Signal } from "lucide-react";
 // ui
 import { DoubleCircleIcon, StateGroupIcon, TOAST_TYPE, setToast } from "@plane/ui";
diff --git a/space/components/issues/peek-overview/side-peek-view.tsx b/space/components/issues/peek-overview/side-peek-view.tsx
index 894441418..89d36ecc9 100644
--- a/space/components/issues/peek-overview/side-peek-view.tsx
+++ b/space/components/issues/peek-overview/side-peek-view.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react-lite";
 // components
 import { Loader } from "@plane/ui";
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/views/[viewId]/header.tsx b/web/app/[workspaceSlug]/@header/projects/[projectId]/views/[viewId]/header.tsx
index da44f2b68..744f3ea37 100644
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/views/[viewId]/header.tsx
+++ b/web/app/[workspaceSlug]/@header/projects/[projectId]/views/[viewId]/header.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useCallback } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
diff --git a/web/components/auth-screens/project/join-project.tsx b/web/components/auth-screens/project/join-project.tsx
index 8065c0708..fadb7fcc8 100644
--- a/web/components/auth-screens/project/join-project.tsx
+++ b/web/components/auth-screens/project/join-project.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useState } from "react";
 import Image from "next/image";
 import { useParams } from "next/navigation";
diff --git a/web/components/command-palette/actions/help-actions.tsx b/web/components/command-palette/actions/help-actions.tsx
index c1af691ac..ad54c542b 100644
--- a/web/components/command-palette/actions/help-actions.tsx
+++ b/web/components/command-palette/actions/help-actions.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { Command } from "cmdk";
 import { FileText, GithubIcon, MessageSquare, Rocket } from "lucide-react";
 // ui
diff --git a/web/components/common/empty-state.tsx b/web/components/common/empty-state.tsx
index d7ae991db..5fdd210d9 100644
--- a/web/components/common/empty-state.tsx
+++ b/web/components/common/empty-state.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 
 import Image from "next/image";
diff --git a/web/components/common/new-empty-state.tsx b/web/components/common/new-empty-state.tsx
index efbab8249..e04cb3ed0 100644
--- a/web/components/common/new-empty-state.tsx
+++ b/web/components/common/new-empty-state.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React, { useState } from "react";
 
 import Image from "next/image";
diff --git a/web/components/common/product-updates-modal.tsx b/web/components/common/product-updates-modal.tsx
index 06804ed82..dc10e6abd 100644
--- a/web/components/common/product-updates-modal.tsx
+++ b/web/components/common/product-updates-modal.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import useSWR from "swr";
 // headless ui
diff --git a/web/components/core/filters/date-filter-modal.tsx b/web/components/core/filters/date-filter-modal.tsx
index 35b511464..9fa63ad64 100644
--- a/web/components/core/filters/date-filter-modal.tsx
+++ b/web/components/core/filters/date-filter-modal.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { Fragment } from "react";
 
 import { DayPicker } from "react-day-picker";
diff --git a/web/components/core/filters/date-filter-select.tsx b/web/components/core/filters/date-filter-select.tsx
index 47207e0cc..45c38c1c3 100644
--- a/web/components/core/filters/date-filter-select.tsx
+++ b/web/components/core/filters/date-filter-select.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { CalendarDays } from "lucide-react";
 // ui
diff --git a/web/components/core/list/list-item.tsx b/web/components/core/list/list-item.tsx
index fba22bc91..179e900d0 100644
--- a/web/components/core/list/list-item.tsx
+++ b/web/components/core/list/list-item.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React, { FC } from "react";
 import { useRouter } from "next/navigation";
 // ui
diff --git a/web/components/core/modals/alert-modal.tsx b/web/components/core/modals/alert-modal.tsx
index d864c2b38..c8df8787b 100644
--- a/web/components/core/modals/alert-modal.tsx
+++ b/web/components/core/modals/alert-modal.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { AlertTriangle, Info, LucideIcon } from "lucide-react";
 // ui
 import { Button, TButtonVariant } from "@plane/ui";
diff --git a/web/components/core/multiple-select/entity-select-action.tsx b/web/components/core/multiple-select/entity-select-action.tsx
index 7672928cd..3ba228099 100644
--- a/web/components/core/multiple-select/entity-select-action.tsx
+++ b/web/components/core/multiple-select/entity-select-action.tsx
@@ -1,3 +1,4 @@
+"use client";
 // ui
 import { Checkbox } from "@plane/ui";
 // helpers
diff --git a/web/components/core/multiple-select/group-select-action.tsx b/web/components/core/multiple-select/group-select-action.tsx
index eee771d51..296e5bf3d 100644
--- a/web/components/core/multiple-select/group-select-action.tsx
+++ b/web/components/core/multiple-select/group-select-action.tsx
@@ -1,3 +1,4 @@
+"use client";
 // ui
 import { Checkbox } from "@plane/ui";
 // helpers
diff --git a/web/components/core/sidebar/links-list.tsx b/web/components/core/sidebar/links-list.tsx
index bd4e1af68..48b66caa8 100644
--- a/web/components/core/sidebar/links-list.tsx
+++ b/web/components/core/sidebar/links-list.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { observer } from "mobx-react";
 // icons
 import { Pencil, Trash2, LinkIcon, ExternalLink } from "lucide-react";
diff --git a/web/components/core/sidebar/sidebar-progress-stats.tsx b/web/components/core/sidebar/sidebar-progress-stats.tsx
index 0194ba01f..23c2cfafd 100644
--- a/web/components/core/sidebar/sidebar-progress-stats.tsx
+++ b/web/components/core/sidebar/sidebar-progress-stats.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { observer } from "mobx-react";
 import Image from "next/image";
diff --git a/web/components/core/theme/color-picker-input.tsx b/web/components/core/theme/color-picker-input.tsx
index 4f933a462..dbaa13aac 100644
--- a/web/components/core/theme/color-picker-input.tsx
+++ b/web/components/core/theme/color-picker-input.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { FC, Fragment } from "react";
 // react-form
 import { ColorResult, SketchPicker } from "react-color";
diff --git a/web/components/core/theme/custom-theme-selector.tsx b/web/components/core/theme/custom-theme-selector.tsx
index dfd08de46..14e23d74d 100644
--- a/web/components/core/theme/custom-theme-selector.tsx
+++ b/web/components/core/theme/custom-theme-selector.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
 import { Controller, useForm } from "react-hook-form";
diff --git a/web/components/core/theme/theme-switch.tsx b/web/components/core/theme/theme-switch.tsx
index 6eb1c7b7d..b79e2104e 100644
--- a/web/components/core/theme/theme-switch.tsx
+++ b/web/components/core/theme/theme-switch.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 // constants
 import { CustomSelect } from "@plane/ui";
diff --git a/web/components/cycles/active-cycle/cycle-stats.tsx b/web/components/cycles/active-cycle/cycle-stats.tsx
index e31e9af53..c1b393027 100644
--- a/web/components/cycles/active-cycle/cycle-stats.tsx
+++ b/web/components/cycles/active-cycle/cycle-stats.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, Fragment } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
diff --git a/web/components/cycles/active-cycle/header.tsx b/web/components/cycles/active-cycle/header.tsx
index 53cff0191..73d36f992 100644
--- a/web/components/cycles/active-cycle/header.tsx
+++ b/web/components/cycles/active-cycle/header.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import Link from "next/link";
 // types
diff --git a/web/components/cycles/active-cycle/progress.tsx b/web/components/cycles/active-cycle/progress.tsx
index fd537148c..ca03e2c0b 100644
--- a/web/components/cycles/active-cycle/progress.tsx
+++ b/web/components/cycles/active-cycle/progress.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import Link from "next/link";
 // types
diff --git a/web/components/cycles/active-cycle/root.tsx b/web/components/cycles/active-cycle/root.tsx
index 8b51a692b..fba01b245 100644
--- a/web/components/cycles/active-cycle/root.tsx
+++ b/web/components/cycles/active-cycle/root.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 // ui
diff --git a/web/components/cycles/active-cycle/stats.tsx b/web/components/cycles/active-cycle/stats.tsx
index 7e7a97e7d..1a91fdfc8 100644
--- a/web/components/cycles/active-cycle/stats.tsx
+++ b/web/components/cycles/active-cycle/stats.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { Fragment } from "react";
 import { Tab } from "@headlessui/react";
 import { ICycle } from "@plane/types";
diff --git a/web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx b/web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx
index 89d154cd2..5677082d6 100644
--- a/web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx
+++ b/web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
diff --git a/web/components/cycles/archived-cycles/modal.tsx b/web/components/cycles/archived-cycles/modal.tsx
index d4c2b0930..d3ee9ebdf 100644
--- a/web/components/cycles/archived-cycles/modal.tsx
+++ b/web/components/cycles/archived-cycles/modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState, Fragment } from "react";
 import { useRouter } from "next/navigation";
 import { Dialog, Transition } from "@headlessui/react";
diff --git a/web/components/cycles/board/cycles-board-card.tsx b/web/components/cycles/board/cycles-board-card.tsx
index 700c6a882..25c4efd33 100644
--- a/web/components/cycles/board/cycles-board-card.tsx
+++ b/web/components/cycles/board/cycles-board-card.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, MouseEvent, useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -136,8 +138,8 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
     e.preventDefault();
     e.stopPropagation();
 
-    const query = generateQueryParams(searchParams, ['peekCycle']);
-    if (searchParams.has('peekCycle')) {
+    const query = generateQueryParams(searchParams, ["peekCycle"]);
+    if (searchParams.has("peekCycle")) {
       router.push(`${pathname}?${query}`);
     } else {
       router.push(`${pathname}?${query}&peekCycle=${cycleId}`);
diff --git a/web/components/cycles/delete-modal.tsx b/web/components/cycles/delete-modal.tsx
index 93407a236..71e407944 100644
--- a/web/components/cycles/delete-modal.tsx
+++ b/web/components/cycles/delete-modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
diff --git a/web/components/cycles/form.tsx b/web/components/cycles/form.tsx
index 936dbb214..63da76ea2 100644
--- a/web/components/cycles/form.tsx
+++ b/web/components/cycles/form.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 // types
diff --git a/web/components/cycles/gantt-chart/blocks.tsx b/web/components/cycles/gantt-chart/blocks.tsx
index d0c7be800..20c5cd4c6 100644
--- a/web/components/cycles/gantt-chart/blocks.tsx
+++ b/web/components/cycles/gantt-chart/blocks.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
diff --git a/web/components/cycles/list/cycle-list-group-header.tsx b/web/components/cycles/list/cycle-list-group-header.tsx
index 469a83d90..19beaca49 100644
--- a/web/components/cycles/list/cycle-list-group-header.tsx
+++ b/web/components/cycles/list/cycle-list-group-header.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { FC } from "react";
 import { ChevronDown } from "lucide-react";
 // types
diff --git a/web/components/cycles/list/cycle-list-item-action.tsx b/web/components/cycles/list/cycle-list-item-action.tsx
index c8493181c..ce10fe8a8 100644
--- a/web/components/cycles/list/cycle-list-item-action.tsx
+++ b/web/components/cycles/list/cycle-list-item-action.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { FC, MouseEvent } from "react";
 import { observer } from "mobx-react";
 import { CalendarCheck2, CalendarClock, MoveRight, Users } from "lucide-react";
diff --git a/web/components/cycles/list/cycles-list-item.tsx b/web/components/cycles/list/cycles-list-item.tsx
index 78a1cfb7b..ab9becbfa 100644
--- a/web/components/cycles/list/cycles-list-item.tsx
+++ b/web/components/cycles/list/cycles-list-item.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, MouseEvent, useRef } from "react";
 import { observer } from "mobx-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
diff --git a/web/components/cycles/modal.tsx b/web/components/cycles/modal.tsx
index e2fcc6bc3..5bb417a3b 100644
--- a/web/components/cycles/modal.tsx
+++ b/web/components/cycles/modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useState } from "react";
 // types
 import type { CycleDateCheckData, ICycle, TCycleTabOptions } from "@plane/types";
diff --git a/web/components/cycles/quick-actions.tsx b/web/components/cycles/quick-actions.tsx
index 084395956..cea50f716 100644
--- a/web/components/cycles/quick-actions.tsx
+++ b/web/components/cycles/quick-actions.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx
index cc40b8157..1d2f3559f 100644
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useCallback, useEffect, useState } from "react";
 import isEmpty from "lodash/isEmpty";
 import isEqual from "lodash/isEqual";
diff --git a/web/components/cycles/transfer-issues-modal.tsx b/web/components/cycles/transfer-issues-modal.tsx
index 5d547bcfd..ae9cf3dac 100644
--- a/web/components/cycles/transfer-issues-modal.tsx
+++ b/web/components/cycles/transfer-issues-modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/web/components/cycles/transfer-issues.tsx b/web/components/cycles/transfer-issues.tsx
index 881b00175..e2563195f 100644
--- a/web/components/cycles/transfer-issues.tsx
+++ b/web/components/cycles/transfer-issues.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 
 import isEmpty from "lodash/isEmpty";
diff --git a/web/components/dashboard/project-empty-state.tsx b/web/components/dashboard/project-empty-state.tsx
index c04d8af84..85edb5157 100644
--- a/web/components/dashboard/project-empty-state.tsx
+++ b/web/components/dashboard/project-empty-state.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 import Image from "next/image";
 // ui
diff --git a/web/components/dashboard/widgets/dropdowns/duration-filter.tsx b/web/components/dashboard/widgets/dropdowns/duration-filter.tsx
index a9cd5862d..419cff64b 100644
--- a/web/components/dashboard/widgets/dropdowns/duration-filter.tsx
+++ b/web/components/dashboard/widgets/dropdowns/duration-filter.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { ChevronDown } from "lucide-react";
 // components
diff --git a/web/components/dashboard/widgets/error-states/issues.tsx b/web/components/dashboard/widgets/error-states/issues.tsx
index 6cfce13b4..fb3e3550b 100644
--- a/web/components/dashboard/widgets/error-states/issues.tsx
+++ b/web/components/dashboard/widgets/error-states/issues.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { AlertTriangle, RefreshCcw } from "lucide-react";
 // ui
 import { Button } from "@plane/ui";
diff --git a/web/components/dashboard/widgets/issue-panels/issue-list-item.tsx b/web/components/dashboard/widgets/issue-panels/issue-list-item.tsx
index f5cc95f28..c114db0c8 100644
--- a/web/components/dashboard/widgets/issue-panels/issue-list-item.tsx
+++ b/web/components/dashboard/widgets/issue-panels/issue-list-item.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import isToday from "date-fns/isToday";
 import { observer } from "mobx-react-lite";
 import { TIssue, TWidgetIssue } from "@plane/types";
diff --git a/web/components/dashboard/widgets/issue-panels/issues-list.tsx b/web/components/dashboard/widgets/issue-panels/issues-list.tsx
index c38229267..ca465a204 100644
--- a/web/components/dashboard/widgets/issue-panels/issues-list.tsx
+++ b/web/components/dashboard/widgets/issue-panels/issues-list.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import Link from "next/link";
 import { TAssignedIssuesWidgetResponse, TCreatedIssuesWidgetResponse, TIssue, TIssuesListTypes } from "@plane/types";
 // hooks
diff --git a/web/components/dashboard/widgets/loaders/assigned-issues.tsx b/web/components/dashboard/widgets/loaders/assigned-issues.tsx
index 4de381b29..8a78fedf1 100644
--- a/web/components/dashboard/widgets/loaders/assigned-issues.tsx
+++ b/web/components/dashboard/widgets/loaders/assigned-issues.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 // ui
 import { Loader } from "@plane/ui";
 
diff --git a/web/components/dashboard/widgets/loaders/issues-by-priority.tsx b/web/components/dashboard/widgets/loaders/issues-by-priority.tsx
index 4051a2908..c6f075b58 100644
--- a/web/components/dashboard/widgets/loaders/issues-by-priority.tsx
+++ b/web/components/dashboard/widgets/loaders/issues-by-priority.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 // ui
 import { Loader } from "@plane/ui";
 
diff --git a/web/components/dashboard/widgets/loaders/issues-by-state-group.tsx b/web/components/dashboard/widgets/loaders/issues-by-state-group.tsx
index d2316802d..d44eb1e26 100644
--- a/web/components/dashboard/widgets/loaders/issues-by-state-group.tsx
+++ b/web/components/dashboard/widgets/loaders/issues-by-state-group.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 // ui
 import { Loader } from "@plane/ui";
 
diff --git a/web/components/dashboard/widgets/loaders/overview-stats.tsx b/web/components/dashboard/widgets/loaders/overview-stats.tsx
index f72d66ce4..2b634792e 100644
--- a/web/components/dashboard/widgets/loaders/overview-stats.tsx
+++ b/web/components/dashboard/widgets/loaders/overview-stats.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 // ui
 import { Loader } from "@plane/ui";
 
diff --git a/web/components/dashboard/widgets/loaders/recent-activity.tsx b/web/components/dashboard/widgets/loaders/recent-activity.tsx
index 47e895a6e..3a280dad7 100644
--- a/web/components/dashboard/widgets/loaders/recent-activity.tsx
+++ b/web/components/dashboard/widgets/loaders/recent-activity.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 // ui
 import { Loader } from "@plane/ui";
 
diff --git a/web/components/dashboard/widgets/loaders/recent-collaborators.tsx b/web/components/dashboard/widgets/loaders/recent-collaborators.tsx
index dc2163128..92715fb88 100644
--- a/web/components/dashboard/widgets/loaders/recent-collaborators.tsx
+++ b/web/components/dashboard/widgets/loaders/recent-collaborators.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 // ui
 import { Loader } from "@plane/ui";
 
diff --git a/web/components/dashboard/widgets/loaders/recent-projects.tsx b/web/components/dashboard/widgets/loaders/recent-projects.tsx
index fc181ffab..8bd652c3b 100644
--- a/web/components/dashboard/widgets/loaders/recent-projects.tsx
+++ b/web/components/dashboard/widgets/loaders/recent-projects.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 // ui
 import { Loader } from "@plane/ui";
 
diff --git a/web/components/dashboard/widgets/recent-activity.tsx b/web/components/dashboard/widgets/recent-activity.tsx
index 73642abda..0877f14b5 100644
--- a/web/components/dashboard/widgets/recent-activity.tsx
+++ b/web/components/dashboard/widgets/recent-activity.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
diff --git a/web/components/dashboard/widgets/recent-collaborators/collaborators-list.tsx b/web/components/dashboard/widgets/recent-collaborators/collaborators-list.tsx
index bf91d4abc..4bb09311d 100644
--- a/web/components/dashboard/widgets/recent-collaborators/collaborators-list.tsx
+++ b/web/components/dashboard/widgets/recent-collaborators/collaborators-list.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
diff --git a/web/components/dashboard/widgets/recent-collaborators/default-list.tsx b/web/components/dashboard/widgets/recent-collaborators/default-list.tsx
index 8fb884c9b..e031df3ee 100644
--- a/web/components/dashboard/widgets/recent-collaborators/default-list.tsx
+++ b/web/components/dashboard/widgets/recent-collaborators/default-list.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 // components
 import { Button } from "@plane/ui";
diff --git a/web/components/dashboard/widgets/recent-collaborators/search-list.tsx b/web/components/dashboard/widgets/recent-collaborators/search-list.tsx
index 7323ad944..fadf41590 100644
--- a/web/components/dashboard/widgets/recent-collaborators/search-list.tsx
+++ b/web/components/dashboard/widgets/recent-collaborators/search-list.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
diff --git a/web/components/dashboard/widgets/recent-projects.tsx b/web/components/dashboard/widgets/recent-projects.tsx
index 803edc8e2..847916ce4 100644
--- a/web/components/dashboard/widgets/recent-projects.tsx
+++ b/web/components/dashboard/widgets/recent-projects.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
diff --git a/web/components/dropdowns/buttons.tsx b/web/components/dropdowns/buttons.tsx
index 6195bcdad..27d47bd85 100644
--- a/web/components/dropdowns/buttons.tsx
+++ b/web/components/dropdowns/buttons.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 // helpers
 import { Tooltip } from "@plane/ui";
 import { cn } from "@/helpers/common.helper";
diff --git a/web/components/dropdowns/cycle/cycle-options.tsx b/web/components/dropdowns/cycle/cycle-options.tsx
index 199998b01..409222442 100644
--- a/web/components/dropdowns/cycle/cycle-options.tsx
+++ b/web/components/dropdowns/cycle/cycle-options.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useEffect, useRef, useState } from "react";
 import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
diff --git a/web/components/dropdowns/cycle/index.tsx b/web/components/dropdowns/cycle/index.tsx
index c481f8909..6036d881f 100644
--- a/web/components/dropdowns/cycle/index.tsx
+++ b/web/components/dropdowns/cycle/index.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Fragment, ReactNode, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { ChevronDown } from "lucide-react";
diff --git a/web/components/dropdowns/date-range.tsx b/web/components/dropdowns/date-range.tsx
index 0f4548952..1b9d8ad20 100644
--- a/web/components/dropdowns/date-range.tsx
+++ b/web/components/dropdowns/date-range.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useRef, useState } from "react";
 import { Placement } from "@popperjs/core";
 import { DateRange, DayPicker, Matcher } from "react-day-picker";
diff --git a/web/components/dropdowns/member/avatar.tsx b/web/components/dropdowns/member/avatar.tsx
index 868c28665..0e3246fa1 100644
--- a/web/components/dropdowns/member/avatar.tsx
+++ b/web/components/dropdowns/member/avatar.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 // icons
 import { LucideIcon, Users } from "lucide-react";
@@ -36,9 +38,5 @@ export const ButtonAvatars: React.FC<AvatarProps> = observer((props) => {
     }
   }
 
-  return Icon ? (
-    <Icon className="h-3 w-3 flex-shrink-0" />
-  ) : (
-    <Users className="h-3 w-3 flex-shrink-0" />
-  );
+  return Icon ? <Icon className="h-3 w-3 flex-shrink-0" /> : <Users className="h-3 w-3 flex-shrink-0" />;
 });
diff --git a/web/components/dropdowns/member/member-options.tsx b/web/components/dropdowns/member/member-options.tsx
index 38c265cbc..766d64ffc 100644
--- a/web/components/dropdowns/member/member-options.tsx
+++ b/web/components/dropdowns/member/member-options.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useRef, useState } from "react";
 import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
diff --git a/web/components/dropdowns/module/index.tsx b/web/components/dropdowns/module/index.tsx
index bd793b57b..5261f6c17 100644
--- a/web/components/dropdowns/module/index.tsx
+++ b/web/components/dropdowns/module/index.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { ChevronDown, X } from "lucide-react";
diff --git a/web/components/dropdowns/module/module-options.tsx b/web/components/dropdowns/module/module-options.tsx
index d8cfce072..688065b05 100644
--- a/web/components/dropdowns/module/module-options.tsx
+++ b/web/components/dropdowns/module/module-options.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useRef, useState } from "react";
 import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
diff --git a/web/components/dropdowns/priority.tsx b/web/components/dropdowns/priority.tsx
index 382911b08..b77da8012 100644
--- a/web/components/dropdowns/priority.tsx
+++ b/web/components/dropdowns/priority.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Fragment, ReactNode, useRef, useState } from "react";
 import { useTheme } from "next-themes";
 import { usePopper } from "react-popper";
diff --git a/web/components/dropdowns/state.tsx b/web/components/dropdowns/state.tsx
index 7408a8d16..309c3b2a5 100644
--- a/web/components/dropdowns/state.tsx
+++ b/web/components/dropdowns/state.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
diff --git a/web/components/editor/lite-text-editor/toolbar.tsx b/web/components/editor/lite-text-editor/toolbar.tsx
index d80db9ccd..e053e9b0d 100644
--- a/web/components/editor/lite-text-editor/toolbar.tsx
+++ b/web/components/editor/lite-text-editor/toolbar.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useState, useCallback } from "react";
 import { Globe2, Lock, LucideIcon } from "lucide-react";
 // editor
diff --git a/web/components/empty-state/empty-state.tsx b/web/components/empty-state/empty-state.tsx
index e518b3487..64bf248d8 100644
--- a/web/components/empty-state/empty-state.tsx
+++ b/web/components/empty-state/empty-state.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { observer } from "mobx-react";
 import Image from "next/image";
diff --git a/web/components/estimates/create/modal.tsx b/web/components/estimates/create/modal.tsx
index 73031e931..b69032981 100644
--- a/web/components/estimates/create/modal.tsx
+++ b/web/components/estimates/create/modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useEffect, useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { ChevronLeft } from "lucide-react";
diff --git a/web/components/estimates/create/stage-one.tsx b/web/components/estimates/create/stage-one.tsx
index c8b546c53..08e180907 100644
--- a/web/components/estimates/create/stage-one.tsx
+++ b/web/components/estimates/create/stage-one.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { Crown, Info } from "lucide-react";
 import { TEstimateSystemKeys } from "@plane/types";
diff --git a/web/components/estimates/delete/modal.tsx b/web/components/estimates/delete/modal.tsx
index dc72e83be..6bca3d042 100644
--- a/web/components/estimates/delete/modal.tsx
+++ b/web/components/estimates/delete/modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useState } from "react";
 import { observer } from "mobx-react";
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
diff --git a/web/components/estimates/empty-screen.tsx b/web/components/estimates/empty-screen.tsx
index be22098dc..069a47a11 100644
--- a/web/components/estimates/empty-screen.tsx
+++ b/web/components/estimates/empty-screen.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
diff --git a/web/components/estimates/estimate-disable-switch.tsx b/web/components/estimates/estimate-disable-switch.tsx
index 35b9b09cd..1e9e0521f 100644
--- a/web/components/estimates/estimate-disable-switch.tsx
+++ b/web/components/estimates/estimate-disable-switch.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
diff --git a/web/components/estimates/loader-screen.tsx b/web/components/estimates/loader-screen.tsx
index 494282151..2231c6d84 100644
--- a/web/components/estimates/loader-screen.tsx
+++ b/web/components/estimates/loader-screen.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { Loader } from "@plane/ui";
 
diff --git a/web/components/estimates/points/create-root.tsx b/web/components/estimates/points/create-root.tsx
index 1f9315b4f..e7d3b525c 100644
--- a/web/components/estimates/points/create-root.tsx
+++ b/web/components/estimates/points/create-root.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Dispatch, FC, SetStateAction, useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import { Plus } from "lucide-react";
diff --git a/web/components/estimates/points/create.tsx b/web/components/estimates/points/create.tsx
index 909f16087..7049dce82 100644
--- a/web/components/estimates/points/create.tsx
+++ b/web/components/estimates/points/create.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, MouseEvent, FocusEvent, useState } from "react";
 import { observer } from "mobx-react";
 import { Check, Info, X } from "lucide-react";
diff --git a/web/components/estimates/points/delete.tsx b/web/components/estimates/points/delete.tsx
index 15f6f4848..fd11c414e 100644
--- a/web/components/estimates/points/delete.tsx
+++ b/web/components/estimates/points/delete.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useState } from "react";
 import { observer } from "mobx-react";
 import { MoveRight, Trash2, X } from "lucide-react";
diff --git a/web/components/estimates/points/select-dropdown.tsx b/web/components/estimates/points/select-dropdown.tsx
index 9176bb629..60838b620 100644
--- a/web/components/estimates/points/select-dropdown.tsx
+++ b/web/components/estimates/points/select-dropdown.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useRef, Fragment, useState } from "react";
 import { Info, Check, ChevronDown } from "lucide-react";
 import { Listbox, Transition } from "@headlessui/react";
diff --git a/web/components/estimates/points/update.tsx b/web/components/estimates/points/update.tsx
index 4947d6930..409a98642 100644
--- a/web/components/estimates/points/update.tsx
+++ b/web/components/estimates/points/update.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, MouseEvent, useEffect, FocusEvent, useState } from "react";
 import { observer } from "mobx-react";
 import { Check, Info, X } from "lucide-react";
diff --git a/web/components/estimates/update/modal.tsx b/web/components/estimates/update/modal.tsx
index 69467db6f..6ad64e7f6 100644
--- a/web/components/estimates/update/modal.tsx
+++ b/web/components/estimates/update/modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { Button } from "@plane/ui";
diff --git a/web/components/estimates/update/stage-one.tsx b/web/components/estimates/update/stage-one.tsx
index 35ce85694..b031f453c 100644
--- a/web/components/estimates/update/stage-one.tsx
+++ b/web/components/estimates/update/stage-one.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { Crown } from "lucide-react";
 import { TEstimateUpdateStageKeys } from "@plane/types";
diff --git a/web/components/exporter/export-modal.tsx b/web/components/exporter/export-modal.tsx
index bb702c2b3..e7b069275 100644
--- a/web/components/exporter/export-modal.tsx
+++ b/web/components/exporter/export-modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams, useRouter } from "next/navigation";
diff --git a/web/components/exporter/guide.tsx b/web/components/exporter/guide.tsx
index 9af53ff81..fc3da6588 100644
--- a/web/components/exporter/guide.tsx
+++ b/web/components/exporter/guide.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import Image from "next/image";
diff --git a/web/components/exporter/single-export.tsx b/web/components/exporter/single-export.tsx
index 336e17f23..f558e0e02 100644
--- a/web/components/exporter/single-export.tsx
+++ b/web/components/exporter/single-export.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState, FC } from "react";
 // ui
 import { IExportData } from "@plane/types";
diff --git a/web/components/gantt-chart/helpers/add-block.tsx b/web/components/gantt-chart/helpers/add-block.tsx
index 552575453..1ef0492f0 100644
--- a/web/components/gantt-chart/helpers/add-block.tsx
+++ b/web/components/gantt-chart/helpers/add-block.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useRef, useState } from "react";
 import { addDays } from "date-fns";
 import { observer } from "mobx-react";
diff --git a/web/components/gantt-chart/sidebar/cycles/sidebar.tsx b/web/components/gantt-chart/sidebar/cycles/sidebar.tsx
index e0bee915b..848da70c6 100644
--- a/web/components/gantt-chart/sidebar/cycles/sidebar.tsx
+++ b/web/components/gantt-chart/sidebar/cycles/sidebar.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { MutableRefObject } from "react";
 // ui
 import { Loader } from "@plane/ui";
diff --git a/web/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx b/web/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx
index a337a9fa8..d4f89eafe 100644
--- a/web/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx
+++ b/web/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { MutableRefObject, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
diff --git a/web/components/gantt-chart/sidebar/issues/sidebar.tsx b/web/components/gantt-chart/sidebar/issues/sidebar.tsx
index f01a12b6d..82680d4c9 100644
--- a/web/components/gantt-chart/sidebar/issues/sidebar.tsx
+++ b/web/components/gantt-chart/sidebar/issues/sidebar.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { MutableRefObject } from "react";
 // ui
 import { Loader } from "@plane/ui";
diff --git a/web/components/gantt-chart/sidebar/modules/sidebar.tsx b/web/components/gantt-chart/sidebar/modules/sidebar.tsx
index e162d2517..9673338fb 100644
--- a/web/components/gantt-chart/sidebar/modules/sidebar.tsx
+++ b/web/components/gantt-chart/sidebar/modules/sidebar.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { MutableRefObject } from "react";
 // ui
 import { Loader } from "@plane/ui";
diff --git a/web/components/inbox/content/inbox-issue-header.tsx b/web/components/inbox/content/inbox-issue-header.tsx
index 823efa114..91d93819d 100644
--- a/web/components/inbox/content/inbox-issue-header.tsx
+++ b/web/components/inbox/content/inbox-issue-header.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useCallback, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
diff --git a/web/components/inbox/content/inbox-issue-mobile-header.tsx b/web/components/inbox/content/inbox-issue-mobile-header.tsx
index 049f80070..9890d09b6 100644
--- a/web/components/inbox/content/inbox-issue-mobile-header.tsx
+++ b/web/components/inbox/content/inbox-issue-mobile-header.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
diff --git a/web/components/inbox/content/issue-properties.tsx b/web/components/inbox/content/issue-properties.tsx
index 85fd31407..52f626f06 100644
--- a/web/components/inbox/content/issue-properties.tsx
+++ b/web/components/inbox/content/issue-properties.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
diff --git a/web/components/inbox/content/issue-root.tsx b/web/components/inbox/content/issue-root.tsx
index 36a124b16..5e6e286c8 100644
--- a/web/components/inbox/content/issue-root.tsx
+++ b/web/components/inbox/content/issue-root.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Dispatch, SetStateAction, useEffect, useMemo } from "react";
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
diff --git a/web/components/inbox/inbox-filter/applied-filters/member.tsx b/web/components/inbox/inbox-filter/applied-filters/member.tsx
index b234d3c57..eeae2dafd 100644
--- a/web/components/inbox/inbox-filter/applied-filters/member.tsx
+++ b/web/components/inbox/inbox-filter/applied-filters/member.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
diff --git a/web/components/inbox/inbox-filter/applied-filters/priority.tsx b/web/components/inbox/inbox-filter/applied-filters/priority.tsx
index e5a51d188..8fabeee7f 100644
--- a/web/components/inbox/inbox-filter/applied-filters/priority.tsx
+++ b/web/components/inbox/inbox-filter/applied-filters/priority.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
diff --git a/web/components/inbox/inbox-filter/applied-filters/state.tsx b/web/components/inbox/inbox-filter/applied-filters/state.tsx
index 0a4d39c17..94e8aaac1 100644
--- a/web/components/inbox/inbox-filter/applied-filters/state.tsx
+++ b/web/components/inbox/inbox-filter/applied-filters/state.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
diff --git a/web/components/inbox/inbox-filter/filters/labels.tsx b/web/components/inbox/inbox-filter/filters/labels.tsx
index 8f6b765b5..3541ef8dc 100644
--- a/web/components/inbox/inbox-filter/filters/labels.tsx
+++ b/web/components/inbox/inbox-filter/filters/labels.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useState } from "react";
 import { observer } from "mobx-react";
 import { IIssueLabel } from "@plane/types";
diff --git a/web/components/inbox/inbox-filter/filters/members.tsx b/web/components/inbox/inbox-filter/filters/members.tsx
index 5dd9262a8..51cb09087 100644
--- a/web/components/inbox/inbox-filter/filters/members.tsx
+++ b/web/components/inbox/inbox-filter/filters/members.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";
diff --git a/web/components/inbox/inbox-filter/filters/priority.tsx b/web/components/inbox/inbox-filter/filters/priority.tsx
index 0639623e4..468e742ef 100644
--- a/web/components/inbox/inbox-filter/filters/priority.tsx
+++ b/web/components/inbox/inbox-filter/filters/priority.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useState } from "react";
 import { observer } from "mobx-react";
 import { TIssuePriorities } from "@plane/types";
diff --git a/web/components/inbox/inbox-filter/filters/state.tsx b/web/components/inbox/inbox-filter/filters/state.tsx
index b3cfad435..9b0d41c0d 100644
--- a/web/components/inbox/inbox-filter/filters/state.tsx
+++ b/web/components/inbox/inbox-filter/filters/state.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useState } from "react";
 import { observer } from "mobx-react";
 import { IState } from "@plane/types";
diff --git a/web/components/inbox/inbox-filter/sorting/order-by.tsx b/web/components/inbox/inbox-filter/sorting/order-by.tsx
index 4eb9dde22..93786c0ab 100644
--- a/web/components/inbox/inbox-filter/sorting/order-by.tsx
+++ b/web/components/inbox/inbox-filter/sorting/order-by.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check, ChevronDown } from "lucide-react";
diff --git a/web/components/inbox/modals/accept-issue-modal.tsx b/web/components/inbox/modals/accept-issue-modal.tsx
index 080563505..0813e0539 100644
--- a/web/components/inbox/modals/accept-issue-modal.tsx
+++ b/web/components/inbox/modals/accept-issue-modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { CheckCircle } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
diff --git a/web/components/inbox/modals/create-edit-modal/create-root.tsx b/web/components/inbox/modals/create-edit-modal/create-root.tsx
index 31b926e7f..7886158d7 100644
--- a/web/components/inbox/modals/create-edit-modal/create-root.tsx
+++ b/web/components/inbox/modals/create-edit-modal/create-root.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, FormEvent, useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { usePathname, useRouter } from "next/navigation";
diff --git a/web/components/inbox/modals/create-edit-modal/edit-root.tsx b/web/components/inbox/modals/create-edit-modal/edit-root.tsx
index ae34cfd7a..000426b6c 100644
--- a/web/components/inbox/modals/create-edit-modal/edit-root.tsx
+++ b/web/components/inbox/modals/create-edit-modal/edit-root.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
diff --git a/web/components/inbox/modals/create-edit-modal/issue-description.tsx b/web/components/inbox/modals/create-edit-modal/issue-description.tsx
index 4b4cb261e..1cbfaded5 100644
--- a/web/components/inbox/modals/create-edit-modal/issue-description.tsx
+++ b/web/components/inbox/modals/create-edit-modal/issue-description.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, RefObject } from "react";
 import { observer } from "mobx-react";
 import { EditorRefApi } from "@plane/rich-text-editor";
diff --git a/web/components/inbox/modals/create-edit-modal/issue-title.tsx b/web/components/inbox/modals/create-edit-modal/issue-title.tsx
index ddd3eea9a..ce24bee62 100644
--- a/web/components/inbox/modals/create-edit-modal/issue-title.tsx
+++ b/web/components/inbox/modals/create-edit-modal/issue-title.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { TIssue } from "@plane/types";
diff --git a/web/components/inbox/modals/select-duplicate.tsx b/web/components/inbox/modals/select-duplicate.tsx
index 8747eee40..744f42a47 100644
--- a/web/components/inbox/modals/select-duplicate.tsx
+++ b/web/components/inbox/modals/select-duplicate.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
diff --git a/web/components/inbox/modals/snooze-issue-modal.tsx b/web/components/inbox/modals/snooze-issue-modal.tsx
index 2454c5ddf..edcaa4190 100644
--- a/web/components/inbox/modals/snooze-issue-modal.tsx
+++ b/web/components/inbox/modals/snooze-issue-modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, Fragment, useState } from "react";
 import { DayPicker } from "react-day-picker";
 import { Dialog, Transition } from "@headlessui/react";
diff --git a/web/components/inbox/sidebar/inbox-list-item.tsx b/web/components/inbox/sidebar/inbox-list-item.tsx
index 6f9bc529a..2b69f92c9 100644
--- a/web/components/inbox/sidebar/inbox-list-item.tsx
+++ b/web/components/inbox/sidebar/inbox-list-item.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, MouseEvent } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
diff --git a/web/components/inbox/sidebar/root.tsx b/web/components/inbox/sidebar/root.tsx
index 7e91b2942..3e858771f 100644
--- a/web/components/inbox/sidebar/root.tsx
+++ b/web/components/inbox/sidebar/root.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
@@ -106,13 +108,13 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
             className="w-full h-full overflow-hidden overflow-y-auto vertical-scrollbar scrollbar-md"
             ref={containerRef}
           >
-              {filteredInboxIssueIds.length > 0 ? (
+            {filteredInboxIssueIds.length > 0 ? (
               <InboxIssueList
                 setIsMobileSidebar={setIsMobileSidebar}
                 workspaceSlug={workspaceSlug}
                 projectId={projectId}
                 projectIdentifier={currentProjectDetails?.identifier}
-                  inboxIssueIds={filteredInboxIssueIds}
+                inboxIssueIds={filteredInboxIssueIds}
               />
             ) : (
               <div className="flex items-center justify-center h-full w-full">
@@ -128,14 +130,14 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
                 />
               </div>
             )}
-              <div ref={setElementRef}>
-                {inboxIssuePaginationInfo?.next_page_results && (
+            <div ref={setElementRef}>
+              {inboxIssuePaginationInfo?.next_page_results && (
                 <Loader className="mx-auto w-full space-y-4 py-4 px-2">
                   <Loader.Item height="64px" width="w-100" />
                   <Loader.Item height="64px" width="w-100" />
                 </Loader>
-                )}
-              </div>
+              )}
+            </div>
           </div>
         )}
       </div>
diff --git a/web/components/instance/not-ready-view.tsx b/web/components/instance/not-ready-view.tsx
index 68221283f..7e7bea5c9 100644
--- a/web/components/instance/not-ready-view.tsx
+++ b/web/components/instance/not-ready-view.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import Image from "next/image";
 import Link from "next/link";
diff --git a/web/components/integration/delete-import-modal.tsx b/web/components/integration/delete-import-modal.tsx
index 464a0dfcc..9f6ae553f 100644
--- a/web/components/integration/delete-import-modal.tsx
+++ b/web/components/integration/delete-import-modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 
 import { useParams } from "next/navigation";
diff --git a/web/components/integration/github/auth.tsx b/web/components/integration/github/auth.tsx
index ff2ee9550..242aa5e12 100644
--- a/web/components/integration/github/auth.tsx
+++ b/web/components/integration/github/auth.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react-lite";
 // types
 import { IWorkspaceIntegration } from "@plane/types";
diff --git a/web/components/integration/github/import-configure.tsx b/web/components/integration/github/import-configure.tsx
index 94f8e07d3..851c20655 100644
--- a/web/components/integration/github/import-configure.tsx
+++ b/web/components/integration/github/import-configure.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 // components
 import { IAppIntegration, IWorkspaceIntegration } from "@plane/types";
 import { Button } from "@plane/ui";
diff --git a/web/components/integration/github/import-confirm.tsx b/web/components/integration/github/import-confirm.tsx
index 37862a739..84870d73a 100644
--- a/web/components/integration/github/import-confirm.tsx
+++ b/web/components/integration/github/import-confirm.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 
 // react-hook-form
diff --git a/web/components/integration/github/import-data.tsx b/web/components/integration/github/import-data.tsx
index 4f3811f77..bae8207a3 100644
--- a/web/components/integration/github/import-data.tsx
+++ b/web/components/integration/github/import-data.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { Control, Controller, UseFormWatch } from "react-hook-form";
diff --git a/web/components/integration/github/import-users.tsx b/web/components/integration/github/import-users.tsx
index ba4efb5f9..4387e8749 100644
--- a/web/components/integration/github/import-users.tsx
+++ b/web/components/integration/github/import-users.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 
 // react-hook-form
diff --git a/web/components/integration/github/repo-details.tsx b/web/components/integration/github/repo-details.tsx
index e6d4a2b12..7c5a9a320 100644
--- a/web/components/integration/github/repo-details.tsx
+++ b/web/components/integration/github/repo-details.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useEffect } from "react";
 
 import { useParams } from "next/navigation";
diff --git a/web/components/integration/github/root.tsx b/web/components/integration/github/root.tsx
index 5c3e3b3ff..87b12c0da 100644
--- a/web/components/integration/github/root.tsx
+++ b/web/components/integration/github/root.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 
 import Image from "next/image";
diff --git a/web/components/integration/github/select-repository.tsx b/web/components/integration/github/select-repository.tsx
index 698f03268..d04d33b36 100644
--- a/web/components/integration/github/select-repository.tsx
+++ b/web/components/integration/github/select-repository.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { useParams } from "next/navigation";
 import useSWRInfinite from "swr/infinite";
diff --git a/web/components/integration/github/single-user-select.tsx b/web/components/integration/github/single-user-select.tsx
index ab6eb87a3..55c1e7118 100644
--- a/web/components/integration/github/single-user-select.tsx
+++ b/web/components/integration/github/single-user-select.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 import { IGithubRepoCollaborator } from "@plane/types";
diff --git a/web/components/integration/guide.tsx b/web/components/integration/guide.tsx
index 8da166746..da751cde8 100644
--- a/web/components/integration/guide.tsx
+++ b/web/components/integration/guide.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import Image from "next/image";
diff --git a/web/components/integration/jira/give-details.tsx b/web/components/integration/jira/give-details.tsx
index 93ec17817..4e9656551 100644
--- a/web/components/integration/jira/give-details.tsx
+++ b/web/components/integration/jira/give-details.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
diff --git a/web/components/integration/jira/import-users.tsx b/web/components/integration/jira/import-users.tsx
index 77e3b514e..eb63e6bc1 100644
--- a/web/components/integration/jira/import-users.tsx
+++ b/web/components/integration/jira/import-users.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { useParams } from "next/navigation";
 import { useFormContext, useFieldArray, Controller } from "react-hook-form";
diff --git a/web/components/integration/jira/jira-project-detail.tsx b/web/components/integration/jira/jira-project-detail.tsx
index 7c6f09f70..3a1d7ff81 100644
--- a/web/components/integration/jira/jira-project-detail.tsx
+++ b/web/components/integration/jira/jira-project-detail.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect } from "react";
 
 // next
diff --git a/web/components/integration/jira/root.tsx b/web/components/integration/jira/root.tsx
index dd8bac6f6..d96329a4e 100644
--- a/web/components/integration/jira/root.tsx
+++ b/web/components/integration/jira/root.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
diff --git a/web/components/integration/single-import.tsx b/web/components/integration/single-import.tsx
index c1d3f96c8..08a9ebdfc 100644
--- a/web/components/integration/single-import.tsx
+++ b/web/components/integration/single-import.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 // ui
 import { Trash2 } from "lucide-react";
 import { IImporterService } from "@plane/types";
diff --git a/web/components/integration/single-integration-card.tsx b/web/components/integration/single-integration-card.tsx
index 7ee70a712..f5245f3c2 100644
--- a/web/components/integration/single-integration-card.tsx
+++ b/web/components/integration/single-integration-card.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import Image from "next/image";
diff --git a/web/components/integration/slack/select-channel.tsx b/web/components/integration/slack/select-channel.tsx
index 39721db2c..15da0bf4b 100644
--- a/web/components/integration/slack/select-channel.tsx
+++ b/web/components/integration/slack/select-channel.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState, useEffect } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/web/components/issues/archive-issue-modal.tsx b/web/components/issues/archive-issue-modal.tsx
index 92bbdc677..2c9a04ddf 100644
--- a/web/components/issues/archive-issue-modal.tsx
+++ b/web/components/issues/archive-issue-modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState, Fragment } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import { TIssue } from "@plane/types";
diff --git a/web/components/issues/attachment/attachment-detail.tsx b/web/components/issues/attachment/attachment-detail.tsx
index 9e6a35f5f..c89b6f574 100644
--- a/web/components/issues/attachment/attachment-detail.tsx
+++ b/web/components/issues/attachment/attachment-detail.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
diff --git a/web/components/issues/attachment/root.tsx b/web/components/issues/attachment/root.tsx
index b9dd5e290..f1bec92e8 100644
--- a/web/components/issues/attachment/root.tsx
+++ b/web/components/issues/attachment/root.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useMemo } from "react";
 // hooks
 import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui";
diff --git a/web/components/issues/bulk-operations/upgrade-banner.tsx b/web/components/issues/bulk-operations/upgrade-banner.tsx
index c96e6d210..f6657c29e 100644
--- a/web/components/issues/bulk-operations/upgrade-banner.tsx
+++ b/web/components/issues/bulk-operations/upgrade-banner.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 // ui
 import { getButtonStyling } from "@plane/ui";
 // constants
diff --git a/web/components/issues/confirm-issue-discard.tsx b/web/components/issues/confirm-issue-discard.tsx
index 0a550e8d6..09bedbf59 100644
--- a/web/components/issues/confirm-issue-discard.tsx
+++ b/web/components/issues/confirm-issue-discard.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 
 // headless ui
diff --git a/web/components/issues/delete-issue-modal.tsx b/web/components/issues/delete-issue-modal.tsx
index 46f8e733d..d6fbe1260 100644
--- a/web/components/issues/delete-issue-modal.tsx
+++ b/web/components/issues/delete-issue-modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState } from "react";
 // types
 import { TIssue } from "@plane/types";
diff --git a/web/components/issues/description-input.tsx b/web/components/issues/description-input.tsx
index 538f5444e..f78bce853 100644
--- a/web/components/issues/description-input.tsx
+++ b/web/components/issues/description-input.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useCallback, useEffect, useState } from "react";
 import debounce from "lodash/debounce";
 import { observer } from "mobx-react";
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/archived-at.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/archived-at.tsx
index 5b7e3da53..0d85eba72 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/archived-at.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/archived-at.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { RotateCcw } from "lucide-react";
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx
index 73285b8a8..be86804f7 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/default.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/default.tsx
index 0e8470da4..f01679d83 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/default.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/default.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
index f2a0fa3e5..b0981d981 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, ReactNode } from "react";
 import { Network } from "lucide-react";
 // hooks
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx
index 3055e779c..91d50b0da 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 // hooks
 import { Tooltip } from "@plane/ui";
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/module.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/module.tsx
index aaddca6ea..b1aa5a2a6 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/module.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/module.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/state.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/state.tsx
index 081c6c4db..d9c539358 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/state.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/state.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
diff --git a/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx b/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx
index 854ee2f87..7413edf08 100644
--- a/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx
+++ b/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useForm } from "react-hook-form";
diff --git a/web/components/issues/issue-detail/issue-activity/root.tsx b/web/components/issues/issue-detail/issue-activity/root.tsx
index 30d10ffdb..283e99d9e 100644
--- a/web/components/issues/issue-detail/issue-activity/root.tsx
+++ b/web/components/issues/issue-detail/issue-activity/root.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useMemo, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { History, LucideIcon, MessageCircle } from "lucide-react";
diff --git a/web/components/issues/issue-detail/label/create-label.tsx b/web/components/issues/issue-detail/label/create-label.tsx
index 577003c7d..7180ff6ba 100644
--- a/web/components/issues/issue-detail/label/create-label.tsx
+++ b/web/components/issues/issue-detail/label/create-label.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useState, Fragment, useEffect } from "react";
 import { TwitterPicker } from "react-color";
 import { Controller, useForm } from "react-hook-form";
diff --git a/web/components/issues/issue-detail/label/root.tsx b/web/components/issues/issue-detail/label/root.tsx
index ccba89640..986c60772 100644
--- a/web/components/issues/issue-detail/label/root.tsx
+++ b/web/components/issues/issue-detail/label/root.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { IIssueLabel, TIssue } from "@plane/types";
diff --git a/web/components/issues/issue-detail/links/create-update-link-modal.tsx b/web/components/issues/issue-detail/links/create-update-link-modal.tsx
index 9dfe64add..7769a83a4 100644
--- a/web/components/issues/issue-detail/links/create-update-link-modal.tsx
+++ b/web/components/issues/issue-detail/links/create-update-link-modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useEffect, Fragment } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { Dialog, Transition } from "@headlessui/react";
diff --git a/web/components/issues/issue-detail/links/link-detail.tsx b/web/components/issues/issue-detail/links/link-detail.tsx
index 203e2493c..ec157501c 100644
--- a/web/components/issues/issue-detail/links/link-detail.tsx
+++ b/web/components/issues/issue-detail/links/link-detail.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useState } from "react";
 // hooks
 // ui
diff --git a/web/components/issues/issue-detail/links/root.tsx b/web/components/issues/issue-detail/links/root.tsx
index 3200ad93f..8d441079c 100644
--- a/web/components/issues/issue-detail/links/root.tsx
+++ b/web/components/issues/issue-detail/links/root.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useCallback, useMemo, useState } from "react";
 import { Plus } from "lucide-react";
 import { TIssueLink } from "@plane/types";
diff --git a/web/components/issues/issue-detail/main-content.tsx b/web/components/issues/issue-detail/main-content.tsx
index 8fad6f6c3..13aaf3288 100644
--- a/web/components/issues/issue-detail/main-content.tsx
+++ b/web/components/issues/issue-detail/main-content.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 // types
diff --git a/web/components/issues/issue-detail/parent-select.tsx b/web/components/issues/issue-detail/parent-select.tsx
index 402319af4..3d5f8c306 100644
--- a/web/components/issues/issue-detail/parent-select.tsx
+++ b/web/components/issues/issue-detail/parent-select.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
diff --git a/web/components/issues/issue-detail/parent/root.tsx b/web/components/issues/issue-detail/parent/root.tsx
index b4521bdaa..b64033830 100644
--- a/web/components/issues/issue-detail/parent/root.tsx
+++ b/web/components/issues/issue-detail/parent/root.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
diff --git a/web/components/issues/issue-detail/parent/sibling-item.tsx b/web/components/issues/issue-detail/parent/sibling-item.tsx
index c66a18899..e54a306ec 100644
--- a/web/components/issues/issue-detail/parent/sibling-item.tsx
+++ b/web/components/issues/issue-detail/parent/sibling-item.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
diff --git a/web/components/issues/issue-detail/reactions/issue-comment.tsx b/web/components/issues/issue-detail/reactions/issue-comment.tsx
index 52704db41..32e9a8c98 100644
--- a/web/components/issues/issue-detail/reactions/issue-comment.tsx
+++ b/web/components/issues/issue-detail/reactions/issue-comment.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { IUser } from "@plane/types";
diff --git a/web/components/issues/issue-detail/reactions/issue.tsx b/web/components/issues/issue-detail/reactions/issue.tsx
index 9a2f76eda..b14d7197e 100644
--- a/web/components/issues/issue-detail/reactions/issue.tsx
+++ b/web/components/issues/issue-detail/reactions/issue.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { IUser } from "@plane/types";
diff --git a/web/components/issues/issue-detail/relation-select.tsx b/web/components/issues/issue-detail/relation-select.tsx
index a8307d8eb..4923d72d0 100644
--- a/web/components/issues/issue-detail/relation-select.tsx
+++ b/web/components/issues/issue-detail/relation-select.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
diff --git a/web/components/issues/issue-detail/root.tsx b/web/components/issues/issue-detail/root.tsx
index d515cf649..d30a6d6e1 100644
--- a/web/components/issues/issue-detail/root.tsx
+++ b/web/components/issues/issue-detail/root.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useMemo } from "react";
 import { observer } from "mobx-react";
 import { usePathname, useRouter } from "next/navigation";
diff --git a/web/components/issues/issue-detail/sidebar.tsx b/web/components/issues/issue-detail/sidebar.tsx
index e7b0d846f..8e8e10c31 100644
--- a/web/components/issues/issue-detail/sidebar.tsx
+++ b/web/components/issues/issue-detail/sidebar.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
diff --git a/web/components/issues/issue-detail/subscription.tsx b/web/components/issues/issue-detail/subscription.tsx
index 443667c96..f4e799e7d 100644
--- a/web/components/issues/issue-detail/subscription.tsx
+++ b/web/components/issues/issue-detail/subscription.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useState } from "react";
 import isNil from "lodash/isNil";
 import { observer } from "mobx-react";
diff --git a/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx b/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
index d66aaa37b..058992d62 100644
--- a/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
 import { useParams } from "next/navigation";
diff --git a/web/components/issues/issue-layouts/calendar/calendar.tsx b/web/components/issues/issue-layouts/calendar/calendar.tsx
index a120c78d9..8561a435d 100644
--- a/web/components/issues/issue-layouts/calendar/calendar.tsx
+++ b/web/components/issues/issue-layouts/calendar/calendar.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
diff --git a/web/components/issues/issue-layouts/calendar/day-tile.tsx b/web/components/issues/issue-layouts/calendar/day-tile.tsx
index d9461e1f6..311d5cbf0 100644
--- a/web/components/issues/issue-layouts/calendar/day-tile.tsx
+++ b/web/components/issues/issue-layouts/calendar/day-tile.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
diff --git a/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx b/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
index 559f7b81c..822f42488 100644
--- a/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
+++ b/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/web/components/issues/issue-layouts/calendar/issue-block.tsx b/web/components/issues/issue-layouts/calendar/issue-block.tsx
index 4e6c322ef..31120571a 100644
--- a/web/components/issues/issue-layouts/calendar/issue-block.tsx
+++ b/web/components/issues/issue-layouts/calendar/issue-block.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 /* eslint-disable react/display-name */
 import { useState, useRef, forwardRef } from "react";
 import { observer } from "mobx-react";
diff --git a/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx
index 4b685b591..c81c2ad76 100644
--- a/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useRef, useState } from "react";
 import { differenceInCalendarDays } from "date-fns";
 import { observer } from "mobx-react";
diff --git a/web/components/issues/issue-layouts/empty-states/cycle.tsx b/web/components/issues/issue-layouts/empty-states/cycle.tsx
index 5f1984516..67f5c2eaa 100644
--- a/web/components/issues/issue-layouts/empty-states/cycle.tsx
+++ b/web/components/issues/issue-layouts/empty-states/cycle.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react-lite";
@@ -65,8 +67,8 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
   const emptyStateType = isCompletedAndEmpty
     ? EmptyStateType.PROJECT_CYCLE_COMPLETED_NO_ISSUES
     : isEmptyFilters
-    ? EmptyStateType.PROJECT_EMPTY_FILTER
-    : EmptyStateType.PROJECT_CYCLE_NO_ISSUES;
+      ? EmptyStateType.PROJECT_EMPTY_FILTER
+      : EmptyStateType.PROJECT_CYCLE_NO_ISSUES;
   const additionalPath = isCompletedAndEmpty ? undefined : activeLayout ?? "list";
 
   return (
diff --git a/web/components/issues/issue-layouts/empty-states/module.tsx b/web/components/issues/issue-layouts/empty-states/module.tsx
index 536bd985b..ba5070abc 100644
--- a/web/components/issues/issue-layouts/empty-states/module.tsx
+++ b/web/components/issues/issue-layouts/empty-states/module.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { observer } from "mobx-react-lite";
 // types
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/cycle.tsx b/web/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
index a94329f5b..2a2c37795 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
 import { TCycleGroups } from "@plane/types";
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/members.tsx b/web/components/issues/issue-layouts/filters/applied-filters/members.tsx
index ebce63078..8a41df5f2 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/members.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/members.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
 // ui
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/module.tsx b/web/components/issues/issue-layouts/filters/applied-filters/module.tsx
index af15a0020..32f9b13d7 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/module.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/module.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
 // hooks
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx b/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx
index 10d15788e..9735d2446 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 
 // icons
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
index 1f7289cfa..509b7561a 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import isEmpty from "lodash/isEmpty";
 import isEqual from "lodash/isEqual";
 import { observer } from "mobx-react";
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
index dd3f0ba04..291c031b3 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx b/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
index 9bd343cc1..521408cd9 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 
 // icons
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/state.tsx b/web/components/issues/issue-layouts/filters/applied-filters/state.tsx
index a179f01e4..ab48d5f81 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/state.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/state.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 
 // icons
diff --git a/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx b/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx
index e14ef1444..df2255e07 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react-lite";
diff --git a/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx b/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx
index 09d18d327..55aeab6a7 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react-lite";
diff --git a/web/components/issues/issue-layouts/filters/header/filters/cycle.tsx b/web/components/issues/issue-layouts/filters/header/filters/cycle.tsx
index 1c2227f73..2256fbdfb 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/cycle.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/cycle.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";
diff --git a/web/components/issues/issue-layouts/filters/header/filters/labels.tsx b/web/components/issues/issue-layouts/filters/header/filters/labels.tsx
index c93472ff9..70800af0e 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/labels.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/labels.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";
diff --git a/web/components/issues/issue-layouts/filters/header/filters/mentions.tsx b/web/components/issues/issue-layouts/filters/header/filters/mentions.tsx
index 9330dab82..c5646fa67 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/mentions.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/mentions.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react-lite";
diff --git a/web/components/issues/issue-layouts/filters/header/filters/module.tsx b/web/components/issues/issue-layouts/filters/header/filters/module.tsx
index 298ba9b09..739d1fa29 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/module.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/module.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";
diff --git a/web/components/issues/issue-layouts/filters/header/filters/priority.tsx b/web/components/issues/issue-layouts/filters/header/filters/priority.tsx
index c6dc402f3..609bb37f4 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/priority.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/priority.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 
diff --git a/web/components/issues/issue-layouts/filters/header/filters/project.tsx b/web/components/issues/issue-layouts/filters/header/filters/project.tsx
index d73967481..02fac50a3 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/project.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/project.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";
diff --git a/web/components/issues/issue-layouts/filters/header/filters/state-group.tsx b/web/components/issues/issue-layouts/filters/header/filters/state-group.tsx
index 004e0ec14..1ca11eec6 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/state-group.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/state-group.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // components
diff --git a/web/components/issues/issue-layouts/filters/header/filters/state.tsx b/web/components/issues/issue-layouts/filters/header/filters/state.tsx
index 88068d666..aeffcee41 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/state.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/state.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";
diff --git a/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx b/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
index d9685004b..a16df50c1 100644
--- a/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
+++ b/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { Fragment, useState } from "react";
 import { Placement } from "@popperjs/core";
 import { usePopper } from "react-popper";
diff --git a/web/components/issues/issue-layouts/filters/header/layout-selection.tsx b/web/components/issues/issue-layouts/filters/header/layout-selection.tsx
index 42d3633ae..ce406b3b7 100644
--- a/web/components/issues/issue-layouts/filters/header/layout-selection.tsx
+++ b/web/components/issues/issue-layouts/filters/header/layout-selection.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 
 // ui
diff --git a/web/components/issues/issue-layouts/gantt/blocks.tsx b/web/components/issues/issue-layouts/gantt/blocks.tsx
index b4b10d71b..67db7df43 100644
--- a/web/components/issues/issue-layouts/gantt/blocks.tsx
+++ b/web/components/issues/issue-layouts/gantt/blocks.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 // hooks
 // ui
diff --git a/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
index 3c34b8f8a..e56254111 100644
--- a/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState, useRef, FC } from "react";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
diff --git a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index 00f9ff540..c2e3830d4 100644
--- a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useCallback, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
index d93440c45..a4e450851 100644
--- a/web/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { MutableRefObject, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
diff --git a/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx b/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
index 229b8e6ec..feb0310fd 100644
--- a/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
+++ b/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { FC } from "react";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
diff --git a/web/components/issues/issue-layouts/kanban/kanban-group.tsx b/web/components/issues/issue-layouts/kanban/kanban-group.tsx
index fec907a78..1c7501aa3 100644
--- a/web/components/issues/issue-layouts/kanban/kanban-group.tsx
+++ b/web/components/issues/issue-layouts/kanban/kanban-group.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { MutableRefObject, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
@@ -133,7 +135,16 @@ export const KanbanGroup = observer((props: IKanbanGroup) => {
         element,
       })
     );
-  }, [columnRef, groupId, sub_group_id, setIsDraggingOverColumn, orderBy, isDropDisabled, dropErrorMessage, handleOnDrop]);
+  }, [
+    columnRef,
+    groupId,
+    sub_group_id,
+    setIsDraggingOverColumn,
+    orderBy,
+    isDropDisabled,
+    dropErrorMessage,
+    handleOnDrop,
+  ]);
 
   const prePopulateQuickAddData = (
     groupByKey: string | undefined,
@@ -201,7 +212,7 @@ export const KanbanGroup = observer((props: IKanbanGroup) => {
       ref={columnRef}
     >
       <GroupDragOverlay
-        dragColumnOrientation={sub_group_by ? "justify-start": "justify-center" }
+        dragColumnOrientation={sub_group_by ? "justify-start" : "justify-center"}
         canOverlayBeVisible={canOverlayBeVisible}
         isDropDisabled={isDropDisabled}
         dropErrorMessage={dropErrorMessage}
diff --git a/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
index be1919c4d..772c84c10 100644
--- a/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
diff --git a/web/components/issues/issue-layouts/list/block-root.tsx b/web/components/issues/issue-layouts/list/block-root.tsx
index 7825a5b18..28b5113a0 100644
--- a/web/components/issues/issue-layouts/list/block-root.tsx
+++ b/web/components/issues/issue-layouts/list/block-root.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { FC, MutableRefObject, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
diff --git a/web/components/issues/issue-layouts/list/block.tsx b/web/components/issues/issue-layouts/list/block.tsx
index dabcf3a24..d44c4bba3 100644
--- a/web/components/issues/issue-layouts/list/block.tsx
+++ b/web/components/issues/issue-layouts/list/block.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Dispatch, MouseEvent, SetStateAction, useEffect, useRef } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
diff --git a/web/components/issues/issue-layouts/list/headers/group-by-card.tsx b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
index df7217099..39decd11f 100644
--- a/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
+++ b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
diff --git a/web/components/issues/issue-layouts/list/list-group.tsx b/web/components/issues/issue-layouts/list/list-group.tsx
index 64cbf807b..b58c0f4da 100644
--- a/web/components/issues/issue-layouts/list/list-group.tsx
+++ b/web/components/issues/issue-layouts/list/list-group.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { MutableRefObject, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
diff --git a/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx
index 1bf061b3b..dee54046f 100644
--- a/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useEffect, useState, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
diff --git a/web/components/issues/issue-layouts/properties/all-properties.tsx b/web/components/issues/issue-layouts/properties/all-properties.tsx
index ce72c7647..d656577fb 100644
--- a/web/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/web/components/issues/issue-layouts/properties/all-properties.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useCallback, useMemo } from "react";
 import xor from "lodash/xor";
 import { observer } from "mobx-react";
diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx
index 8a3275a3f..08fccd9e1 100644
--- a/web/components/issues/issue-layouts/properties/labels.tsx
+++ b/web/components/issues/issue-layouts/properties/labels.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Fragment, useEffect, useRef, useState } from "react";
 import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
index dd10f6fda..da41fc92b 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import omit from "lodash/omit";
 import { observer } from "mobx-react";
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
index 9a4323757..2134da80f 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
index 6a3954e6d..e53a4c2a4 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import omit from "lodash/omit";
 import { observer } from "mobx-react";
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx
index 539b45cbd..a3108aa8e 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import omit from "lodash/omit";
 import { observer } from "mobx-react";
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
index 693d52ae1..2170a2499 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import omit from "lodash/omit";
 import { observer } from "mobx-react";
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
index 9530fd18f..943b72c34 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import omit from "lodash/omit";
 import { observer } from "mobx-react";
diff --git a/web/components/issues/issue-layouts/roots/project-layout-root.tsx b/web/components/issues/issue-layouts/roots/project-layout-root.tsx
index b2532569a..a1d506bab 100644
--- a/web/components/issues/issue-layouts/roots/project-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/project-layout-root.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, Fragment } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/web/components/issues/issue-layouts/save-filter-view.tsx b/web/components/issues/issue-layouts/save-filter-view.tsx
index 98ef5a414..f4a0eca28 100644
--- a/web/components/issues/issue-layouts/save-filter-view.tsx
+++ b/web/components/issues/issue-layouts/save-filter-view.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useState } from "react";
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 import { Button } from "@plane/ui";
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
index f3910a87c..8f50d6c1e 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 //ui
 import {
   ArrowDownWideNarrow,
diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
index 899490d76..41ffd7601 100644
--- a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Dispatch, MouseEvent, MutableRefObject, SetStateAction, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx
index 6181826df..f1a553f6e 100644
--- a/web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState, useRef } from "react";
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
diff --git a/web/components/issues/issue-layouts/utils.tsx b/web/components/issues/issue-layouts/utils.tsx
index 891dba306..a488cac88 100644
--- a/web/components/issues/issue-layouts/utils.tsx
+++ b/web/components/issues/issue-layouts/utils.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import clone from "lodash/clone";
 import concat from "lodash/concat";
diff --git a/web/components/issues/issue-modal/draft-issue-layout.tsx b/web/components/issues/issue-modal/draft-issue-layout.tsx
index b6dfffb22..a4dd1fc9c 100644
--- a/web/components/issues/issue-modal/draft-issue-layout.tsx
+++ b/web/components/issues/issue-modal/draft-issue-layout.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react-lite";
diff --git a/web/components/issues/label.tsx b/web/components/issues/label.tsx
index 35d291ee1..7e3cbae30 100644
--- a/web/components/issues/label.tsx
+++ b/web/components/issues/label.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 // components
 import { Tooltip } from "@plane/ui";
diff --git a/web/components/issues/parent-issues-list-modal.tsx b/web/components/issues/parent-issues-list-modal.tsx
index dd712304e..7551b534f 100644
--- a/web/components/issues/parent-issues-list-modal.tsx
+++ b/web/components/issues/parent-issues-list-modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useState } from "react";
 import { useParams } from "next/navigation";
 // headless ui
diff --git a/web/components/issues/peek-overview/properties.tsx b/web/components/issues/peek-overview/properties.tsx
index b152ae792..761f57010 100644
--- a/web/components/issues/peek-overview/properties.tsx
+++ b/web/components/issues/peek-overview/properties.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 import {
diff --git a/web/components/issues/title-input.tsx b/web/components/issues/title-input.tsx
index f12008ab6..ef027be0e 100644
--- a/web/components/issues/title-input.tsx
+++ b/web/components/issues/title-input.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useState, useEffect, useCallback } from "react";
 import { observer } from "mobx-react";
 // components
diff --git a/web/components/labels/create-update-label-inline.tsx b/web/components/labels/create-update-label-inline.tsx
index 3da84331c..4d7cb50d9 100644
--- a/web/components/labels/create-update-label-inline.tsx
+++ b/web/components/labels/create-update-label-inline.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { forwardRef, useEffect } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/web/components/labels/delete-label-modal.tsx b/web/components/labels/delete-label-modal.tsx
index 832ea8088..c3e3bed3e 100644
--- a/web/components/labels/delete-label-modal.tsx
+++ b/web/components/labels/delete-label-modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/web/components/labels/label-block/label-item-block.tsx b/web/components/labels/label-block/label-item-block.tsx
index 53e830e2a..16c06878e 100644
--- a/web/components/labels/label-block/label-item-block.tsx
+++ b/web/components/labels/label-block/label-item-block.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { MutableRefObject, useRef, useState } from "react";
 import { LucideIcon, X } from "lucide-react";
 import { IIssueLabel } from "@plane/types";
diff --git a/web/components/labels/label-drag-n-drop-HOC.tsx b/web/components/labels/label-drag-n-drop-HOC.tsx
index 3898d6b7a..57e1b3a14 100644
--- a/web/components/labels/label-drag-n-drop-HOC.tsx
+++ b/web/components/labels/label-drag-n-drop-HOC.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { MutableRefObject, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
diff --git a/web/components/labels/project-setting-label-list.tsx b/web/components/labels/project-setting-label-list.tsx
index 2c147de3d..dfda537ab 100644
--- a/web/components/labels/project-setting-label-list.tsx
+++ b/web/components/labels/project-setting-label-list.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/web/components/modules/applied-filters/members.tsx b/web/components/modules/applied-filters/members.tsx
index 9c8ecb4f8..1f8ccc3eb 100644
--- a/web/components/modules/applied-filters/members.tsx
+++ b/web/components/modules/applied-filters/members.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react-lite";
 import { X } from "lucide-react";
 // ui
diff --git a/web/components/modules/applied-filters/status.tsx b/web/components/modules/applied-filters/status.tsx
index 7f3d3b45b..48aaf0c11 100644
--- a/web/components/modules/applied-filters/status.tsx
+++ b/web/components/modules/applied-filters/status.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react-lite";
 import { X } from "lucide-react";
 // ui
diff --git a/web/components/modules/archived-modules/modal.tsx b/web/components/modules/archived-modules/modal.tsx
index 61fb5a411..3cc7a60c4 100644
--- a/web/components/modules/archived-modules/modal.tsx
+++ b/web/components/modules/archived-modules/modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState, Fragment } from "react";
 import { useRouter } from "next/navigation";
 import { Dialog, Transition } from "@headlessui/react";
diff --git a/web/components/modules/delete-module-modal.tsx b/web/components/modules/delete-module-modal.tsx
index 574f10086..32ac29e30 100644
--- a/web/components/modules/delete-module-modal.tsx
+++ b/web/components/modules/delete-module-modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams, useRouter } from "next/navigation";
diff --git a/web/components/modules/dropdowns/filters/lead.tsx b/web/components/modules/dropdowns/filters/lead.tsx
index d7acb6589..57bb8fe82 100644
--- a/web/components/modules/dropdowns/filters/lead.tsx
+++ b/web/components/modules/dropdowns/filters/lead.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react-lite";
diff --git a/web/components/modules/dropdowns/filters/members.tsx b/web/components/modules/dropdowns/filters/members.tsx
index a1e578146..4cb35a6a4 100644
--- a/web/components/modules/dropdowns/filters/members.tsx
+++ b/web/components/modules/dropdowns/filters/members.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react-lite";
diff --git a/web/components/modules/dropdowns/filters/root.tsx b/web/components/modules/dropdowns/filters/root.tsx
index 7be60a554..dc12472e7 100644
--- a/web/components/modules/dropdowns/filters/root.tsx
+++ b/web/components/modules/dropdowns/filters/root.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Search, X } from "lucide-react";
diff --git a/web/components/modules/dropdowns/filters/status.tsx b/web/components/modules/dropdowns/filters/status.tsx
index 8da11cc26..e1fd19e55 100644
--- a/web/components/modules/dropdowns/filters/status.tsx
+++ b/web/components/modules/dropdowns/filters/status.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { TModuleStatus } from "@plane/types";
@@ -20,8 +22,8 @@ export const FilterStatus: React.FC<Props> = observer((props) => {
   // states
   const [previewEnabled, setPreviewEnabled] = useState(true);
 
-  const appliedFiltersCount = appliedFilters?.length ?? 0;
   const filteredOptions = MODULE_STATUS.filter((p) => p.value.includes(searchQuery.toLowerCase()));
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
 
   return (
     <>
diff --git a/web/components/modules/dropdowns/order-by.tsx b/web/components/modules/dropdowns/order-by.tsx
index cecda8e88..727074ae6 100644
--- a/web/components/modules/dropdowns/order-by.tsx
+++ b/web/components/modules/dropdowns/order-by.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { ArrowDownWideNarrow, Check, ChevronDown } from "lucide-react";
 import { TModuleOrderByOptions } from "@plane/types";
 // ui
diff --git a/web/components/modules/form.tsx b/web/components/modules/form.tsx
index 817806623..23f3b0a3b 100644
--- a/web/components/modules/form.tsx
+++ b/web/components/modules/form.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { IModule } from "@plane/types";
diff --git a/web/components/modules/gantt-chart/blocks.tsx b/web/components/modules/gantt-chart/blocks.tsx
index f239f08be..a99aa0132 100644
--- a/web/components/modules/gantt-chart/blocks.tsx
+++ b/web/components/modules/gantt-chart/blocks.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
diff --git a/web/components/modules/modal.tsx b/web/components/modules/modal.tsx
index d9c640037..463b18188 100644
--- a/web/components/modules/modal.tsx
+++ b/web/components/modules/modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useForm } from "react-hook-form";
diff --git a/web/components/modules/module-card-item.tsx b/web/components/modules/module-card-item.tsx
index 91c16896d..0ad8675ef 100644
--- a/web/components/modules/module-card-item.tsx
+++ b/web/components/modules/module-card-item.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useRef } from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
@@ -109,8 +111,8 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
     e.stopPropagation();
     e.preventDefault();
 
-    const query = generateQueryParams(searchParams, ['peekModule']);
-    if (searchParams.has('peekModule')) {
+    const query = generateQueryParams(searchParams, ["peekModule"]);
+    if (searchParams.has("peekModule")) {
       router.push(`${pathname}?${query}`);
     } else {
       router.push(`${pathname}?${query}&peekModule=${moduleId}`);
diff --git a/web/components/modules/module-list-item-action.tsx b/web/components/modules/module-list-item-action.tsx
index f1f718909..249eb4821 100644
--- a/web/components/modules/module-list-item-action.tsx
+++ b/web/components/modules/module-list-item-action.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { FC } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/web/components/modules/module-list-item.tsx b/web/components/modules/module-list-item.tsx
index 1d21f342f..475ba5fe7 100644
--- a/web/components/modules/module-list-item.tsx
+++ b/web/components/modules/module-list-item.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useRef } from "react";
 import { observer } from "mobx-react-lite";
 import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
diff --git a/web/components/modules/module-view-header.tsx b/web/components/modules/module-view-header.tsx
index 7721cb28b..26235db9e 100644
--- a/web/components/modules/module-view-header.tsx
+++ b/web/components/modules/module-view-header.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { FC, useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/web/components/modules/quick-actions.tsx b/web/components/modules/quick-actions.tsx
index 5b66dd2e4..ab4c59a88 100644
--- a/web/components/modules/quick-actions.tsx
+++ b/web/components/modules/quick-actions.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
diff --git a/web/components/modules/select/status.tsx b/web/components/modules/select/status.tsx
index 617333147..f3a583516 100644
--- a/web/components/modules/select/status.tsx
+++ b/web/components/modules/select/status.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 
 // react hook form
diff --git a/web/components/modules/sidebar-select/select-status.tsx b/web/components/modules/sidebar-select/select-status.tsx
index 1c4b099db..fcac3e01f 100644
--- a/web/components/modules/sidebar-select/select-status.tsx
+++ b/web/components/modules/sidebar-select/select-status.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 // react
 import React from "react";
 // react-hook-form
diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx
index 47f901e88..b065dca04 100644
--- a/web/components/modules/sidebar.tsx
+++ b/web/components/modules/sidebar.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useCallback, useEffect, useState } from "react";
 import isEqual from "lodash/isEqual";
 import { observer } from "mobx-react-lite";
diff --git a/web/components/notifications/notification-card.tsx b/web/components/notifications/notification-card.tsx
index e7f9c5b7d..7c4a8313e 100644
--- a/web/components/notifications/notification-card.tsx
+++ b/web/components/notifications/notification-card.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useRef } from "react";
 import Image from "next/image";
 import Link from "next/link";
diff --git a/web/components/notifications/notification-header.tsx b/web/components/notifications/notification-header.tsx
index 781d8ba02..e72e02ef0 100644
--- a/web/components/notifications/notification-header.tsx
+++ b/web/components/notifications/notification-header.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { ArrowLeft, CheckCheck, Clock, ListFilter, MoreVertical, RefreshCw, X } from "lucide-react";
 import type { NotificationType, NotificationCount } from "@plane/types";
@@ -181,8 +183,8 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
                 {snoozed
                   ? "Snoozed Notifications"
                   : readNotification
-                  ? "Unread Notifications"
-                  : "Archived Notifications"}
+                    ? "Unread Notifications"
+                    : "Archived Notifications"}
               </span>
             </h4>
           </button>
diff --git a/web/components/notifications/notification-popover.tsx b/web/components/notifications/notification-popover.tsx
index 8917b9210..f802d89ad 100644
--- a/web/components/notifications/notification-popover.tsx
+++ b/web/components/notifications/notification-popover.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { Fragment } from "react";
 import { observer } from "mobx-react-lite";
 import { Bell } from "lucide-react";
@@ -63,12 +65,12 @@ export const NotificationPopover = observer(() => {
   const currentTabEmptyState = snoozed
     ? EmptyStateType.NOTIFICATION_SNOOZED_EMPTY_STATE
     : archived
-    ? EmptyStateType.NOTIFICATION_ARCHIVED_EMPTY_STATE
-    : selectedTab === "created"
-    ? EmptyStateType.NOTIFICATION_CREATED_EMPTY_STATE
-    : selectedTab === "watching"
-    ? EmptyStateType.NOTIFICATION_SUBSCRIBED_EMPTY_STATE
-    : EmptyStateType.NOTIFICATION_MY_ISSUE_EMPTY_STATE;
+      ? EmptyStateType.NOTIFICATION_ARCHIVED_EMPTY_STATE
+      : selectedTab === "created"
+        ? EmptyStateType.NOTIFICATION_CREATED_EMPTY_STATE
+        : selectedTab === "watching"
+          ? EmptyStateType.NOTIFICATION_SUBSCRIBED_EMPTY_STATE
+          : EmptyStateType.NOTIFICATION_MY_ISSUE_EMPTY_STATE;
 
   return (
     <>
diff --git a/web/components/notifications/select-snooze-till-modal.tsx b/web/components/notifications/select-snooze-till-modal.tsx
index 239eca065..3512aa418 100644
--- a/web/components/notifications/select-snooze-till-modal.tsx
+++ b/web/components/notifications/select-snooze-till-modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Fragment, FC } from "react";
 import { useParams } from "next/navigation";
 import { useForm, Controller } from "react-hook-form";
diff --git a/web/components/onboarding/create-workspace.tsx b/web/components/onboarding/create-workspace.tsx
index 0dcf04387..f59266bac 100644
--- a/web/components/onboarding/create-workspace.tsx
+++ b/web/components/onboarding/create-workspace.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 // types
diff --git a/web/components/onboarding/invitations.tsx b/web/components/onboarding/invitations.tsx
index e8ec3a48a..4afd7953a 100644
--- a/web/components/onboarding/invitations.tsx
+++ b/web/components/onboarding/invitations.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import useSWR from "swr";;
 // types
diff --git a/web/components/onboarding/invite-members.tsx b/web/components/onboarding/invite-members.tsx
index 6d71ae293..f37f6bc6a 100644
--- a/web/components/onboarding/invite-members.tsx
+++ b/web/components/onboarding/invite-members.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useRef, useState } from "react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
diff --git a/web/components/onboarding/profile-setup.tsx b/web/components/onboarding/profile-setup.tsx
index aeec7e95e..9857dc1ae 100644
--- a/web/components/onboarding/profile-setup.tsx
+++ b/web/components/onboarding/profile-setup.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import Image from "next/image";
diff --git a/web/components/onboarding/switch-account-dropdown.tsx b/web/components/onboarding/switch-account-dropdown.tsx
index 94ce918cb..e3044c716 100644
--- a/web/components/onboarding/switch-account-dropdown.tsx
+++ b/web/components/onboarding/switch-account-dropdown.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useState } from "react";
 import { observer } from "mobx-react";
 import { ChevronDown } from "lucide-react";
diff --git a/web/components/onboarding/switch-account-modal.tsx b/web/components/onboarding/switch-account-modal.tsx
index 6333f5ce9..0b6fb670a 100644
--- a/web/components/onboarding/switch-account-modal.tsx
+++ b/web/components/onboarding/switch-account-modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { useRouter } from "next/navigation";
 import { useTheme } from "next-themes";
diff --git a/web/components/onboarding/tour/root.tsx b/web/components/onboarding/tour/root.tsx
index 63c7b4c20..409471321 100644
--- a/web/components/onboarding/tour/root.tsx
+++ b/web/components/onboarding/tour/root.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import Image, { StaticImageData } from "next/image";
diff --git a/web/components/onboarding/tour/sidebar.tsx b/web/components/onboarding/tour/sidebar.tsx
index 535002493..b65386690 100644
--- a/web/components/onboarding/tour/sidebar.tsx
+++ b/web/components/onboarding/tour/sidebar.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 // icons
 import { FileText } from "lucide-react";
 import { ContrastIcon, DiceIcon, LayersIcon, PhotoFilterIcon } from "@plane/ui";
diff --git a/web/components/pages/dropdowns/quick-actions.tsx b/web/components/pages/dropdowns/quick-actions.tsx
index ab0438f84..917b9f133 100644
--- a/web/components/pages/dropdowns/quick-actions.tsx
+++ b/web/components/pages/dropdowns/quick-actions.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { ArchiveRestoreIcon, ExternalLink, Link, Lock, Trash2, UsersRound } from "lucide-react";
diff --git a/web/components/pages/editor/header/extra-options.tsx b/web/components/pages/editor/header/extra-options.tsx
index 632799846..659aeb4bf 100644
--- a/web/components/pages/editor/header/extra-options.tsx
+++ b/web/components/pages/editor/header/extra-options.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { Lock, Sparkle } from "lucide-react";
diff --git a/web/components/pages/editor/header/options-dropdown.tsx b/web/components/pages/editor/header/options-dropdown.tsx
index 9aeb2a679..da7344c81 100644
--- a/web/components/pages/editor/header/options-dropdown.tsx
+++ b/web/components/pages/editor/header/options-dropdown.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 import { ArchiveRestoreIcon, Clipboard, Copy, Link, Lock, LockOpen } from "lucide-react";
 // document editor
diff --git a/web/components/pages/editor/header/toolbar.tsx b/web/components/pages/editor/header/toolbar.tsx
index b92e1eac9..4cbead1ab 100644
--- a/web/components/pages/editor/header/toolbar.tsx
+++ b/web/components/pages/editor/header/toolbar.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useState, useCallback } from "react";
 import { Check, ChevronDown } from "lucide-react";
 // editor
diff --git a/web/components/pages/editor/title.tsx b/web/components/pages/editor/title.tsx
index 0c9473690..85b7be22d 100644
--- a/web/components/pages/editor/title.tsx
+++ b/web/components/pages/editor/title.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 // editor
diff --git a/web/components/pages/list/applied-filters/members.tsx b/web/components/pages/list/applied-filters/members.tsx
index 9c8ecb4f8..1f8ccc3eb 100644
--- a/web/components/pages/list/applied-filters/members.tsx
+++ b/web/components/pages/list/applied-filters/members.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react-lite";
 import { X } from "lucide-react";
 // ui
diff --git a/web/components/pages/list/block-item-action.tsx b/web/components/pages/list/block-item-action.tsx
index 55d24dcdf..8f7b434c1 100644
--- a/web/components/pages/list/block-item-action.tsx
+++ b/web/components/pages/list/block-item-action.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { FC } from "react";
 import { observer } from "mobx-react";
 import { Earth, Info, Lock, Minus } from "lucide-react";
diff --git a/web/components/pages/list/block.tsx b/web/components/pages/list/block.tsx
index 40c2a5faf..645ed4ddc 100644
--- a/web/components/pages/list/block.tsx
+++ b/web/components/pages/list/block.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { FileText } from "lucide-react";
diff --git a/web/components/pages/list/filters/created-by.tsx b/web/components/pages/list/filters/created-by.tsx
index 5e1a8ae2a..fed4f51e3 100644
--- a/web/components/pages/list/filters/created-by.tsx
+++ b/web/components/pages/list/filters/created-by.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react-lite";
diff --git a/web/components/pages/list/order-by.tsx b/web/components/pages/list/order-by.tsx
index 493e5c06e..1bca8620b 100644
--- a/web/components/pages/list/order-by.tsx
+++ b/web/components/pages/list/order-by.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { ArrowDownWideNarrow, Check, ChevronDown } from "lucide-react";
 // types
 import { TPageFiltersSortBy, TPageFiltersSortKey } from "@plane/types";
diff --git a/web/components/pages/loaders/page-content-loader.tsx b/web/components/pages/loaders/page-content-loader.tsx
index 0341f2b06..29cf399cb 100644
--- a/web/components/pages/loaders/page-content-loader.tsx
+++ b/web/components/pages/loaders/page-content-loader.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 // ui
 import { Loader } from "@plane/ui";
 
diff --git a/web/components/pages/loaders/page-loader.tsx b/web/components/pages/loaders/page-loader.tsx
index 2b3f752b2..e2e0c09b4 100644
--- a/web/components/pages/loaders/page-loader.tsx
+++ b/web/components/pages/loaders/page-loader.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Loader } from "@plane/ui";
 
 export const PageLoader: React.FC = (props) => {
diff --git a/web/components/pages/modals/delete-page-modal.tsx b/web/components/pages/modals/delete-page-modal.tsx
index f2e749a4a..ac1b24f06 100644
--- a/web/components/pages/modals/delete-page-modal.tsx
+++ b/web/components/pages/modals/delete-page-modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // ui
diff --git a/web/components/pages/modals/page-form.tsx b/web/components/pages/modals/page-form.tsx
index a300f9f2b..f945945f5 100644
--- a/web/components/pages/modals/page-form.tsx
+++ b/web/components/pages/modals/page-form.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FormEvent, useState } from "react";
 // types
 import { FileText } from "lucide-react";
diff --git a/web/components/profile/activity/download-button.tsx b/web/components/profile/activity/download-button.tsx
index 4f03b2369..b54cc98e4 100644
--- a/web/components/profile/activity/download-button.tsx
+++ b/web/components/profile/activity/download-button.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { useParams } from "next/navigation";
 // services
diff --git a/web/components/profile/notification/email-notification-form.tsx b/web/components/profile/notification/email-notification-form.tsx
index 5e1cddc23..1b78e19af 100644
--- a/web/components/profile/notification/email-notification-form.tsx
+++ b/web/components/profile/notification/email-notification-form.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { FC, useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { IUserEmailNotificationSettings } from "@plane/types";
diff --git a/web/components/profile/overview/activity.tsx b/web/components/profile/overview/activity.tsx
index 079ae76d6..fb4ea96e2 100644
--- a/web/components/profile/overview/activity.tsx
+++ b/web/components/profile/overview/activity.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
diff --git a/web/components/profile/overview/priority-distribution.tsx b/web/components/profile/overview/priority-distribution.tsx
index f2f36e22a..23e80ad01 100644
--- a/web/components/profile/overview/priority-distribution.tsx
+++ b/web/components/profile/overview/priority-distribution.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 // ui
 import { IUserProfileData } from "@plane/types";
 import { Loader } from "@plane/ui";
diff --git a/web/components/profile/overview/priority-distribution/priority-distribution.tsx b/web/components/profile/overview/priority-distribution/priority-distribution.tsx
index 597a885d8..97bc385ca 100644
--- a/web/components/profile/overview/priority-distribution/priority-distribution.tsx
+++ b/web/components/profile/overview/priority-distribution/priority-distribution.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 // components
 // ui
 import { IUserPriorityDistribution } from "@plane/types";
diff --git a/web/components/profile/overview/stats.tsx b/web/components/profile/overview/stats.tsx
index 1b773ac0d..a54053f51 100644
--- a/web/components/profile/overview/stats.tsx
+++ b/web/components/profile/overview/stats.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import Link from "next/link";
 import { useParams } from "next/navigation";
 
diff --git a/web/components/profile/sidebar.tsx b/web/components/profile/sidebar.tsx
index b4dd47720..389060c28 100644
--- a/web/components/profile/sidebar.tsx
+++ b/web/components/profile/sidebar.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
diff --git a/web/components/project/card.tsx b/web/components/project/card.tsx
index 055c676ce..e4782bf64 100644
--- a/web/components/project/card.tsx
+++ b/web/components/project/card.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
diff --git a/web/components/project/confirm-project-member-remove.tsx b/web/components/project/confirm-project-member-remove.tsx
index dce460ba2..a205d33c2 100644
--- a/web/components/project/confirm-project-member-remove.tsx
+++ b/web/components/project/confirm-project-member-remove.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useParams } from "next/navigation";
@@ -112,8 +114,8 @@ export const ConfirmProjectMemberRemove: React.FC<Props> = observer((props) => {
                         ? "Leaving..."
                         : "Leave"
                       : isDeleteLoading
-                      ? "Removing..."
-                      : "Remove"}
+                        ? "Removing..."
+                        : "Remove"}
                   </Button>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/project/create-project-form.tsx b/web/components/project/create-project-form.tsx
index 7634432ca..961c8a1c8 100644
--- a/web/components/project/create-project-form.tsx
+++ b/web/components/project/create-project-form.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState, FC, ChangeEvent } from "react";
 import { observer } from "mobx-react-lite";
 import { useForm, Controller } from "react-hook-form";
diff --git a/web/components/project/delete-project-modal.tsx b/web/components/project/delete-project-modal.tsx
index af43179f9..d50c617f6 100644
--- a/web/components/project/delete-project-modal.tsx
+++ b/web/components/project/delete-project-modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { useParams, useRouter } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
diff --git a/web/components/project/empty-state.tsx b/web/components/project/empty-state.tsx
index 5d0df20f2..beedc0d70 100644
--- a/web/components/project/empty-state.tsx
+++ b/web/components/project/empty-state.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 
 import Image from "next/image";
diff --git a/web/components/project/form-loader.tsx b/web/components/project/form-loader.tsx
index dc6f7c789..57c1eac4b 100644
--- a/web/components/project/form-loader.tsx
+++ b/web/components/project/form-loader.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 // components
 import { Loader } from "@plane/ui";
diff --git a/web/components/project/form.tsx b/web/components/project/form.tsx
index e988d395c..5eb8110fb 100644
--- a/web/components/project/form.tsx
+++ b/web/components/project/form.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 // icons
diff --git a/web/components/project/integration-card.tsx b/web/components/project/integration-card.tsx
index 00c5dd18f..20bb9a84c 100644
--- a/web/components/project/integration-card.tsx
+++ b/web/components/project/integration-card.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Image from "next/image";
 import { useParams } from "next/navigation";
diff --git a/web/components/project/join-project-modal.tsx b/web/components/project/join-project-modal.tsx
index 48672ab17..223ac2d58 100644
--- a/web/components/project/join-project-modal.tsx
+++ b/web/components/project/join-project-modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState, Fragment } from "react";
 import { useRouter } from "next/navigation";
 import { Transition, Dialog } from "@headlessui/react";
diff --git a/web/components/project/leave-project-modal.tsx b/web/components/project/leave-project-modal.tsx
index a4272702a..75207799c 100644
--- a/web/components/project/leave-project-modal.tsx
+++ b/web/components/project/leave-project-modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, Fragment } from "react";
 import { observer } from "mobx-react";
 import { useParams, useRouter } from "next/navigation";
diff --git a/web/components/project/member-list-item.tsx b/web/components/project/member-list-item.tsx
index a148a03f8..69750747e 100644
--- a/web/components/project/member-list-item.tsx
+++ b/web/components/project/member-list-item.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
diff --git a/web/components/project/member-list.tsx b/web/components/project/member-list.tsx
index 7e39fb36a..2a36ca058 100644
--- a/web/components/project/member-list.tsx
+++ b/web/components/project/member-list.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { Search } from "lucide-react";
diff --git a/web/components/project/member-select.tsx b/web/components/project/member-select.tsx
index f8a9b2614..7fa12f53d 100644
--- a/web/components/project/member-select.tsx
+++ b/web/components/project/member-select.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { observer } from "mobx-react";
 import { Ban } from "lucide-react";
diff --git a/web/components/project/publish-project/modal.tsx b/web/components/project/publish-project/modal.tsx
index d7807d550..45e9c079b 100644
--- a/web/components/project/publish-project/modal.tsx
+++ b/web/components/project/publish-project/modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/web/components/project/send-project-invitation-modal.tsx b/web/components/project/send-project-invitation-modal.tsx
index 8417303fa..cfb732bd7 100644
--- a/web/components/project/send-project-invitation-modal.tsx
+++ b/web/components/project/send-project-invitation-modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/web/components/project/sidebar-list.tsx b/web/components/project/sidebar-list.tsx
index 35c2a5ed4..4bcc09369 100644
--- a/web/components/project/sidebar-list.tsx
+++ b/web/components/project/sidebar-list.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState, FC, useRef, useEffect } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
diff --git a/web/components/web-hooks/generated-hook-details.tsx b/web/components/web-hooks/generated-hook-details.tsx
index 8a23ef6a5..2db0bcc79 100644
--- a/web/components/web-hooks/generated-hook-details.tsx
+++ b/web/components/web-hooks/generated-hook-details.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 // components
 // ui
 import { IWebhook } from "@plane/types";
diff --git a/web/components/workspace/settings/invitations-list-item.tsx b/web/components/workspace/settings/invitations-list-item.tsx
index 9ca692851..8027e1a75 100644
--- a/web/components/workspace/settings/invitations-list-item.tsx
+++ b/web/components/workspace/settings/invitations-list-item.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState, FC } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
diff --git a/web/constants/archives.ts b/web/constants/archives.ts
index 9130a981a..13bc131c5 100644
--- a/web/constants/archives.ts
+++ b/web/constants/archives.ts
@@ -1,3 +1,5 @@
+"use client";
+
 // types
 import { IProject } from "@plane/types";
 // icons