diff --git a/admin/app/email/email-config-form.tsx b/admin/app/email/email-config-form.tsx
index 8a18b481df..2cc24fc896 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 a6fe2945b9..61d2875eda 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 dfa437231d..d5a00ccaa5 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 64e4d7a08b..d0ca21fc2a 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 fbbe0bc0f3..57489ccc67 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 fe4983db6e..455e67930a 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 21fc36b39f..57c6652312 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 b9ac11d134..dc67d26aef 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 e586bfd80c..da6cd250cc 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 d3b6fd04f7..bc0ca00fae 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 19bbdab9a7..0140a46b6c 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 b80f1f3df1..31e851c649 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 57ed0b6f62..dd328d38d9 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 1b39777940..3c769ce122 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 4e9d5ed8cf..e10c7bbbf5 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 3ad07e06b3..b11cace824 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 1ccb7fa880..f2c1b48cd5 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 ae960eab33..e25b103974 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 2bdfe21bb3..8b81f8c5e3 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 8944414181..89d36ecc94 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 da44f2b68c..744f3ea37a 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 8065c07084..fadb7fcc80 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 c1af691ac6..ad54c542bf 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 d7ae991dbc..5fdd210d91 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 efbab82495..e04cb3ed05 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 06804ed822..dc10e6abd7 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 35b5114644..9fa63ad645 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 47207e0ccd..45c38c1c30 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 fba22bc915..179e900d02 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 d864c2b38a..c8df8787bb 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 7672928cd2..3ba228099e 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 eee771d51f..296e5bf3d3 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 bd4e1af683..48b66caa81 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 0194ba01f1..23c2cfafdd 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 4f933a462c..dbaa13aacb 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 dfd08de46c..14e23d74d5 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 6eb1c7b7d0..b79e2104eb 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 e31e9af531..c1b393027c 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 53cff0191e..73d36f9923 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 fd537148ce..ca03e2c0bc 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 8b51a692bf..fba01b245b 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 7e7a97e7d3..1a91fdfc8f 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 89d154cd20..5677082d62 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 d4c2b09303..d3ee9ebdf4 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 700c6a882d..25c4efd33c 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 93407a2367..71e407944f 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 936dbb2144..63da76ea2b 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 d0c7be8006..20c5cd4c67 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 469a83d90c..19beaca49f 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 c8493181cf..ce10fe8a86 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 78a1cfb7bd..ab9becbfa1 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 e2fcc6bc37..5bb417a3b0 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 0843959567..cea50f7167 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 cc40b81576..1d2f3559fa 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 5d547bcfd4..ae9cf3dac0 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 881b001750..e2563195fd 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 c04d8af84b..85edb51579 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 a9cd5862de..419cff64b4 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 6cfce13b43..fb3e3550b4 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 f5cc95f283..c114db0c85 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 c382292673..ca465a204c 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 4de381b29f..8a78fedf1a 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 4051a29083..c6f075b580 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 d2316802d8..d44eb1e26c 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 f72d66ce4e..2b634792ea 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 47e895a6e7..3a280dad70 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 dc2163128f..92715fb88e 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 fc181ffab9..8bd652c3b1 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 73642abdac..0877f14b58 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 bf91d4abc2..4bb09311d7 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 8fb884c9ba..e031df3ee9 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 7323ad9448..fadf415900 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 803edc8e28..847916ce41 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 6195bcdadc..27d47bd854 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 199998b015..4092224425 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 c481f8909f..6036d881f7 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 0f45489520..1b9d8ad205 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 868c286654..0e3246fa15 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 38c265cbce..766d64ffc0 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 bd793b57b3..5261f6c177 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 d8cfce0727..688065b053 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 382911b082..b77da80126 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 7408a8d165..309c3b2a52 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 d80db9ccd7..e053e9b0dc 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 e518b34878..64bf248d84 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 73031e9315..b69032981c 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 c8b546c53e..08e180907a 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 dc72e83be5..6bca3d042d 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 be22098dc7..069a47a11b 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 35b9b09cd8..1e9e0521f0 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 4942821510..2231c6d845 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 1f9315b4f1..e7d3b525cc 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 909f16087f..7049dce827 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 15f6f4848d..fd11c414e6 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 9176bb6298..60838b6207 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 4947d6930f..409a986427 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 69467db6f0..6ad64e7f60 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 35ce85694c..b031f453c7 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 bb702c2b3d..e7b0692752 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 9af53ff81d..fc3da65886 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 336e17f239..f558e0e027 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 5525754531..1ef0492f0c 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 e0bee915b6..848da70c67 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 a337a9fa8a..d4f89eafeb 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 f01a12b6dd..82680d4c9d 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 e162d25170..9673338fb8 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 823efa114a..91d93819de 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 049f80070b..9890d09b65 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 85fd314071..52f626f06f 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 36a124b166..5e6e286c8e 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 b234d3c57d..eeae2dafda 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 e5a51d188d..8fabeee7f6 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 0a4d39c17e..94e8aaac10 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 8f6b765b5d..3541ef8dc4 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 5dd9262a8e..51cb090870 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 0639623e42..468e742ef5 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 b3cfad435f..9b0d41c0da 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 4eb9dde225..93786c0abb 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 080563505f..0813e05398 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 31b926e7fc..7886158d75 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 ae34cfd7aa..000426b6c8 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 4b4cb261e7..1cbfaded56 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 ddd3eea9a4..ce24bee628 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 8747eee405..744f42a473 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 2454c5ddfc..edcaa41908 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 6f9bc529ac..2b69f92c9c 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 7e91b29427..3e858771f5 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 68221283f7..7e7bea5c94 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 464a0dfcc7..9f6ae553f9 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 ff2ee9550b..242aa5e128 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 94f8e07d32..851c20655d 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 37862a739e..84870d73a0 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 4f3811f77b..bae8207a30 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 ba4efb5f97..4387e8749d 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 e6d4a2b128..7c5a9a3205 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 5c3e3b3ffc..87b12c0da8 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 698f032681..d04d33b36a 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 ab6eb87a3c..55c1e7118e 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 8da166746d..da751cde8c 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 93ec178172..4e96565512 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 77e3b514e3..eb63e6bc18 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 7c6f09f708..3a1d7ff81a 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 dd8bac6f6b..d96329a4e9 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 c1d3f96c86..08a9ebdfc1 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 7ee70a7127..f5245f3c2e 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 39721db2c8..15da0bf4b0 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 92bbdc6778..2c9a04ddf9 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 9e6a35f5fc..c89b6f5744 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 b9dd5e290f..f1bec92e8f 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 c96e6d2104..f6657c29e8 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 0a550e8d69..09bedbf598 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 46f8e733de..d6fbe1260e 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 538f5444ee..f78bce8536 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 5b7e3da530..0d85eba728 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 73285b8a88..be86804f74 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 0e8470da41..f01679d835 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 f2a0fa3e5d..b0981d9817 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 3055e779ca..91d50b0dab 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 aaddca6eac..b1aa5a2a6a 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 081c6c4dbf..d9c539358b 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 854ee2f874..7413edf084 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 30d10ffdbe..283e99d9e6 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 577003c7dd..7180ff6bab 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 ccba896403..986c60772e 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 9dfe64addf..7769a83a48 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 203e2493c2..ec157501cb 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 3200ad93f0..8d441079ce 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 8fad6f6c38..13aaf3288c 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 402319af4c..3d5f8c3063 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 b4521bdaac..b64033830c 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 c66a188994..e54a306ecc 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 52704db413..32e9a8c980 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 9a2f76edaf..b14d7197e0 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 a8307d8eb9..4923d72d08 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 d515cf6492..d30a6d6e16 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 e7b0d846f0..8e8e10c311 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 443667c964..f4e799e7d7 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 d66aaa37b7..058992d624 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 a120c78d99..8561a435dd 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 d9461e1f67..311d5cbf0b 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 559f7b81c0..822f424887 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 4e6c322ef6..31120571a3 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 4b685b5918..c81c2ad769 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 5f1984516a..67f5c2eaab 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 536bd985be..ba5070abc3 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 a94329f5b5..2a2c377951 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 ebce630785..8a41df5f2f 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 af15a00203..32f9b13d76 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 10d15788ee..9735d24461 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 1f7289cfa9..509b7561af 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 dd3f0ba041..291c031b36 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 9bd343cc1e..521408cd90 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 a179f01e47..ab48d5f81b 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 e14ef1444a..df2255e077 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 09d18d327c..55aeab6a77 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 1c2227f739..2256fbdfb2 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 c93472ff96..70800af0e8 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 9330dab827..c5646fa672 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 298ba9b09b..739d1fa292 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 c6dc402f35..609bb37f47 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 d739674813..02fac50a3b 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 004e0ec14c..1ca11eec62 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 88068d6667..aeffcee414 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 d9685004bd..a16df50c17 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 42d3633ae1..ce406b3b7b 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 b4b10d71b6..67db7df43a 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 3c34b8f8a4..e562541111 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 00f9ff5403..c2e3830d4f 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 d93440c456..a4e450851e 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 229b8e6ec1..feb0310fd1 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 fec907a788..1c7501aa34 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 be1919c4d6..772c84c10b 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 7825a5b183..28b5113a08 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 dabcf3a240..d44c4bba30 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 df72170994..39decd11f2 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 64cbf807bb..b58c0f4da2 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 1bf061b3bb..dee54046fc 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 ce72c7647b..d656577fb9 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 8a3275a3f1..08fccd9e16 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 dd10f6fdad..da41fc92ba 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 9a43237577..2134da80f2 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 6a3954e6d5..e53a4c2a44 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 539b45cbd8..a3108aa8e2 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 693d52ae12..2170a24999 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 9530fd18f7..943b72c345 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 b2532569a4..a1d506babd 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 98ef5a4145..f4a0eca280 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 f3910a87c3..8f50d6c1ef 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 899490d765..41ffd7601d 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 6181826dff..f1a553f6e9 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 891dba3068..a488cac888 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 b6dfffb229..a4dd1fc9cd 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 35d291ee1a..7e3cbae30f 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 dd712304e6..7551b534fb 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 b152ae7926..761f570102 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 f12008ab6e..ef027be0ef 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 3da84331c8..4d7cb50d90 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 832ea80885..c3e3bed3ec 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 53e830e2a1..16c06878e7 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 3898d6b7a3..57e1b3a14c 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 2c147de3d7..dfda537ab9 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 9c8ecb4f85..1f8ccc3eb5 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 7f3d3b45ba..48aaf0c117 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 61fb5a4111..3cc7a60c42 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 574f100864..32ac29e309 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 d7acb6589d..57bb8fe822 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 a1e5781469..4cb35a6a47 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 7be60a5548..dc12472e7a 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 8da11cc26c..e1fd19e550 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 cecda8e888..727074ae6f 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 8178066230..23f3b0a3ba 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 f239f08be3..a99aa01325 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 d9c640037e..463b18188e 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 91c16896d2..0ad8675ef0 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 f1f718909e..249eb48217 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 1d21f342fe..475ba5fe71 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 7721cb28b9..26235db9ed 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 5b66dd2e4a..ab4c59a889 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 6173331473..f3a583516e 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 1c4b099db9..fcac3e01fa 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 47f901e886..b065dca04b 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 e7f9c5b7d3..7c4a8313ec 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 781d8ba029..e72e02ef0b 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 8917b92107..f802d89ad6 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 239eca0656..3512aa4182 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 0dcf04387a..f59266bac2 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 e8ec3a48a8..4afd7953a1 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 6d71ae2935..f37f6bc6ac 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 aeec7e95e4..9857dc1ae0 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 94ce918cbb..e3044c7162 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 6333f5ce96..0b6fb670a8 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 63c7b4c205..4094713216 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 5350024932..b65386690f 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 ab0438f84d..917b9f1330 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 6327998464..659aeb4bff 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 9aeb2a679e..da7344c811 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 b92e1eac98..4cbead1ab6 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 0c9473690d..85b7be22d3 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 9c8ecb4f85..1f8ccc3eb5 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 55d24dcdfe..8f7b434c1a 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 40c2a5fafb..645ed4ddca 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 5e1a8ae2a7..fed4f51e3e 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 493e5c06ee..1bca8620ba 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 0341f2b066..29cf399cb9 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 2b3f752b23..e2e0c09b42 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 f2e749a4a9..ac1b24f064 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 a300f9f2b0..f945945f52 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 4f03b23692..b54cc98e47 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 5e1cddc23b..1b78e19afa 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 079ae76d6c..fb4ea96e25 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 f2f36e22a7..23e80ad014 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 597a885d88..97bc385ca1 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 1b773ac0de..a54053f510 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 b4dd477205..389060c286 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 055c676cea..e4782bf643 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 dce460ba2b..a205d33c2f 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 7634432ca3..961c8a1c83 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 af43179f94..d50c617f62 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 5d0df20f2d..beedc0d706 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 dc6f7c789a..57c1eac4b0 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 e988d395ce..5eb8110fb9 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 00c5dd18f3..20bb9a84c6 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 48672ab17d..223ac2d588 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 a4272702a3..75207799c1 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 a148a03f81..69750747ed 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 7e39fb36a8..2a36ca0584 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 f8a9b26145..7fa12f53db 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 d7807d5502..45e9c079b8 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 8417303fad..cfb732bd7d 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 35c2a5ed43..4bcc09369f 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 8a23ef6a56..2db0bcc79f 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 9ca6928517..8027e1a751 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 9130a981a1..13bc131c59 100644
--- a/web/constants/archives.ts
+++ b/web/constants/archives.ts
@@ -1,3 +1,5 @@
+"use client";
+
 // types
 import { IProject } from "@plane/types";
 // icons