diff --git a/apps/app/components/command-palette/index.tsx b/apps/app/components/command-palette/index.tsx
index fbb8a17d223..2126e393afe 100644
--- a/apps/app/components/command-palette/index.tsx
+++ b/apps/app/components/command-palette/index.tsx
@@ -13,8 +13,8 @@ import {
   ClipboardDocumentListIcon,
   MagnifyingGlassIcon,
 } from "@heroicons/react/24/outline";
-import useTheme from "hooks/useTheme";
-import useToast from "hooks/useToast";
+import useTheme from "hooks/use-theme";
+import useToast from "hooks/use-toast";
 import useUser from "hooks/use-user";
 // services
 import userService from "services/user.service";
diff --git a/apps/app/components/common/bulk-delete-issues-modal.tsx b/apps/app/components/common/bulk-delete-issues-modal.tsx
index 0bac7d80737..c1115042843 100644
--- a/apps/app/components/common/bulk-delete-issues-modal.tsx
+++ b/apps/app/components/common/bulk-delete-issues-modal.tsx
@@ -12,7 +12,7 @@ import { FolderIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import issuesServices from "services/issues.service";
 import projectService from "services/project.service";
 // hooks
-import useToast from "hooks/useToast";
+import useToast from "hooks/use-toast";
 // headless ui
 // ui
 import { Button } from "components/ui";
diff --git a/apps/app/components/common/existing-issues-list-modal.tsx b/apps/app/components/common/existing-issues-list-modal.tsx
index 086d19fbdf7..5efd759196a 100644
--- a/apps/app/components/common/existing-issues-list-modal.tsx
+++ b/apps/app/components/common/existing-issues-list-modal.tsx
@@ -8,7 +8,7 @@ import { Controller, SubmitHandler, useForm } from "react-hook-form";
 // hooks
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 import { MagnifyingGlassIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
-import useToast from "hooks/useToast";
+import useToast from "hooks/use-toast";
 // services
 import projectService from "services/project.service";
 // headless ui
diff --git a/apps/app/components/emoji-icon-picker/index.tsx b/apps/app/components/emoji-icon-picker/index.tsx
index 5157c889ca4..4d2b98ceece 100644
--- a/apps/app/components/emoji-icon-picker/index.tsx
+++ b/apps/app/components/emoji-icon-picker/index.tsx
@@ -9,7 +9,7 @@ import emojis from "./emojis.json";
 import { getRecentEmojis, saveRecentEmoji } from "./helpers";
 import { getRandomEmoji } from "helpers/functions.helper";
 // hooks
-import useOutsideClickDetector from "hooks/useOutsideClickDetector";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
 
 const tabOptions = [
   {
diff --git a/apps/app/components/onboarding/invite-members.tsx b/apps/app/components/onboarding/invite-members.tsx
index 266917ccf2b..efcdd650ce0 100644
--- a/apps/app/components/onboarding/invite-members.tsx
+++ b/apps/app/components/onboarding/invite-members.tsx
@@ -1,6 +1,6 @@
 // types
 import { useForm } from "react-hook-form";
-import useToast from "hooks/useToast";
+import useToast from "hooks/use-toast";
 import workspaceService from "services/workspace.service";
 import { IUser } from "types";
 // ui components
diff --git a/apps/app/components/onboarding/user-details.tsx b/apps/app/components/onboarding/user-details.tsx
index 1184875a4d7..f2755a1f4dd 100644
--- a/apps/app/components/onboarding/user-details.tsx
+++ b/apps/app/components/onboarding/user-details.tsx
@@ -3,7 +3,7 @@ import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 
 // hooks
-import useToast from "hooks/useToast";
+import useToast from "hooks/use-toast";
 // services
 import userService from "services/user.service";
 // ui
diff --git a/apps/app/components/onboarding/workspace.tsx b/apps/app/components/onboarding/workspace.tsx
index 630c4425f57..8a4b4b0163c 100644
--- a/apps/app/components/onboarding/workspace.tsx
+++ b/apps/app/components/onboarding/workspace.tsx
@@ -9,7 +9,7 @@ import { Controller, useForm } from "react-hook-form";
 import { Tab } from "@headlessui/react";
 
 // hooks
-import useToast from "hooks/useToast";
+import useToast from "hooks/use-toast";
 // services
 import workspaceService from "services/workspace.service";
 // ui
diff --git a/apps/app/components/project/confirm-project-deletion.tsx b/apps/app/components/project/confirm-project-deletion.tsx
index 68c849f8314..a55df380562 100644
--- a/apps/app/components/project/confirm-project-deletion.tsx
+++ b/apps/app/components/project/confirm-project-deletion.tsx
@@ -9,7 +9,7 @@ import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 import type { IProject, IWorkspace } from "types";
 import projectService from "services/project.service";
 // hooks
-import useToast from "hooks/useToast";
+import useToast from "hooks/use-toast";
 // icons
 // ui
 import { Button, Input } from "components/ui";
diff --git a/apps/app/components/project/create-project-modal.tsx b/apps/app/components/project/create-project-modal.tsx
index 3c39898101b..f1c14bda6d2 100644
--- a/apps/app/components/project/create-project-modal.tsx
+++ b/apps/app/components/project/create-project-modal.tsx
@@ -11,7 +11,7 @@ import { Dialog, Transition } from "@headlessui/react";
 import projectServices from "services/project.service";
 import workspaceService from "services/workspace.service";
 // hooks
-import useToast from "hooks/useToast";
+import useToast from "hooks/use-toast";
 // ui
 import { Button, Input, TextArea, CustomSelect } from "components/ui";
 // components
diff --git a/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx b/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx
index 83a1dc8880b..08ef636dd3c 100644
--- a/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx
+++ b/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx
@@ -11,7 +11,7 @@ import { CalendarDaysIcon, ChartPieIcon, LinkIcon, UserIcon } from "@heroicons/r
 // services
 import cyclesService from "services/cycles.service";
 // hooks
-import useToast from "hooks/useToast";
+import useToast from "hooks/use-toast";
 // ui
 import { Loader } from "components/ui";
 // helpers
diff --git a/apps/app/components/project/issues/confirm-issue-deletion.tsx b/apps/app/components/project/issues/confirm-issue-deletion.tsx
index 08884d06d50..a9f6895433a 100644
--- a/apps/app/components/project/issues/confirm-issue-deletion.tsx
+++ b/apps/app/components/project/issues/confirm-issue-deletion.tsx
@@ -12,7 +12,7 @@ import { CYCLE_ISSUES, PROJECT_ISSUES_LIST, MODULE_ISSUES } from "constants/fetc
 // services
 import issueServices from "services/issues.service";
 // hooks
-import useToast from "hooks/useToast";
+import useToast from "hooks/use-toast";
 // icons
 // ui
 import { Button } from "components/ui";
@@ -54,10 +54,10 @@ const ConfirmIssueDeletion: React.FC<Props> = (props) => {
         mutate<IssueResponse>(
           PROJECT_ISSUES_LIST(workspaceSlug as string, projectId),
           (prevData) => ({
-              ...(prevData as IssueResponse),
-              results: prevData?.results.filter((i) => i.id !== data.id) ?? [],
-              count: (prevData?.count as number) - 1,
-            }),
+            ...(prevData as IssueResponse),
+            results: prevData?.results.filter((i) => i.id !== data.id) ?? [],
+            count: (prevData?.count as number) - 1,
+          }),
           false
         );
 
diff --git a/apps/app/components/project/issues/create-update-issue-modal/index.tsx b/apps/app/components/project/issues/create-update-issue-modal/index.tsx
index b0b49715746..719aa21c0a6 100644
--- a/apps/app/components/project/issues/create-update-issue-modal/index.tsx
+++ b/apps/app/components/project/issues/create-update-issue-modal/index.tsx
@@ -20,7 +20,7 @@ import modulesService from "services/modules.service";
 import issuesServices from "services/issues.service";
 // hooks
 import useUser from "hooks/use-user";
-import useToast from "hooks/useToast";
+import useToast from "hooks/use-toast";
 // ui
 import { Button, Input, Loader } from "components/ui";
 // components
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx
index 94b33df6c0c..1c14e2562c7 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx
@@ -21,7 +21,7 @@ import {
 // types
 import type { ICycle, IIssue, IIssueLabels } from "types";
 // hooks
-import useToast from "hooks/useToast";
+import useToast from "hooks/use-toast";
 // services
 import issuesServices from "services/issues.service";
 // components
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx
index 119f3528803..789e1a24a21 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx
@@ -11,7 +11,7 @@ import { Combobox, Dialog, Transition } from "@headlessui/react";
 import { FolderIcon, MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import issuesService from "services/issues.service";
 // hooks
-import useToast from "hooks/useToast";
+import useToast from "hooks/use-toast";
 // headless ui
 // ui
 import { Button } from "components/ui";
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx
index e52576dd1dd..1e3d9c19f17 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx
@@ -10,7 +10,7 @@ import { SubmitHandler, useForm, UseFormWatch } from "react-hook-form";
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 import { FolderIcon, MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // hooks
-import useToast from "hooks/useToast";
+import useToast from "hooks/use-toast";
 // services
 import issuesServices from "services/issues.service";
 // headless ui
diff --git a/apps/app/components/project/modules/module-detail-sidebar/index.tsx b/apps/app/components/project/modules/module-detail-sidebar/index.tsx
index d0d3669705a..62c810103ce 100644
--- a/apps/app/components/project/modules/module-detail-sidebar/index.tsx
+++ b/apps/app/components/project/modules/module-detail-sidebar/index.tsx
@@ -16,7 +16,7 @@ import {
 } from "@heroicons/react/24/outline";
 import modulesService from "services/modules.service";
 // hooks
-import useToast from "hooks/useToast";
+import useToast from "hooks/use-toast";
 // components
 import SelectLead from "components/project/modules/module-detail-sidebar/select-lead";
 import SelectMembers from "components/project/modules/module-detail-sidebar/select-members";
diff --git a/apps/app/components/project/send-project-invitation-modal.tsx b/apps/app/components/project/send-project-invitation-modal.tsx
index b43b3361b33..2d6e38355f7 100644
--- a/apps/app/components/project/send-project-invitation-modal.tsx
+++ b/apps/app/components/project/send-project-invitation-modal.tsx
@@ -11,7 +11,7 @@ import { Dialog, Transition, Listbox } from "@headlessui/react";
 import { ChevronDownIcon, CheckIcon } from "@heroicons/react/20/solid";
 import { Button, Select, TextArea } from "components/ui";
 // hooks
-import useToast from "hooks/useToast";
+import useToast from "hooks/use-toast";
 // services
 import projectService from "services/project.service";
 import workspaceService from "services/workspace.service";
diff --git a/apps/app/components/project/sidebar-list.tsx b/apps/app/components/project/sidebar-list.tsx
index ede4dbcd1a2..17fbb84c84e 100644
--- a/apps/app/components/project/sidebar-list.tsx
+++ b/apps/app/components/project/sidebar-list.tsx
@@ -14,8 +14,8 @@ import {
 } from "@heroicons/react/24/outline";
 import { CyclesIcon } from "components/icons";
 // hooks
-import useToast from "hooks/useToast";
-import useTheme from "hooks/useTheme";
+import useToast from "hooks/use-toast";
+import useTheme from "hooks/use-theme";
 // services
 import projectService from "services/project.service";
 // components
diff --git a/apps/app/components/sidebar/projects-list.tsx b/apps/app/components/sidebar/projects-list.tsx
index 640cc9d166b..f98cbff70ab 100644
--- a/apps/app/components/sidebar/projects-list.tsx
+++ b/apps/app/components/sidebar/projects-list.tsx
@@ -7,7 +7,7 @@ import useSWR from "swr";
 // hooks
 import { Disclosure, Transition } from "@headlessui/react";
 import { ChevronDownIcon, PlusIcon } from "@heroicons/react/24/outline";
-import useToast from "hooks/useToast";
+import useToast from "hooks/use-toast";
 // services
 import projectService from "services/project.service";
 // components
diff --git a/apps/app/components/toast-alert/index.tsx b/apps/app/components/toast-alert/index.tsx
index 383ad327cfc..5d0c0123c98 100644
--- a/apps/app/components/toast-alert/index.tsx
+++ b/apps/app/components/toast-alert/index.tsx
@@ -7,7 +7,7 @@ import {
   XCircleIcon,
   XMarkIcon,
 } from "@heroicons/react/24/outline";
-import useToast from "hooks/useToast";
+import useToast from "hooks/use-toast";
 // icons
 
 const ToastAlerts = () => {
diff --git a/apps/app/components/ui/text-area/index.tsx b/apps/app/components/ui/text-area/index.tsx
index bae591877a3..8cda2907786 100644
--- a/apps/app/components/ui/text-area/index.tsx
+++ b/apps/app/components/ui/text-area/index.tsx
@@ -1,10 +1,8 @@
 import React, { useState, useRef, useEffect } from "react";
-import { Props } from "./types";
-// commons
 
 // types
+import { Props } from "./types";
 
-// TODO: Remove this Hook from hooks folder and integrate this logic with component.
 // Updates the height of a <textarea> when the value changes.
 const useAutosizeTextArea = (textAreaRef: HTMLTextAreaElement | null, value: any) => {
   useEffect(() => {
diff --git a/apps/app/components/workspace/confirm-workspace-deletion.tsx b/apps/app/components/workspace/confirm-workspace-deletion.tsx
index f61c1f87ecc..fb088207424 100644
--- a/apps/app/components/workspace/confirm-workspace-deletion.tsx
+++ b/apps/app/components/workspace/confirm-workspace-deletion.tsx
@@ -12,7 +12,7 @@ import { USER_WORKSPACES } from "constants/fetch-keys";
 // services
 import workspaceService from "services/workspace.service";
 // hooks
-import useToast from "hooks/useToast";
+import useToast from "hooks/use-toast";
 // icons
 // ui
 import { Button, Input } from "components/ui";
diff --git a/apps/app/components/workspace/help-section.tsx b/apps/app/components/workspace/help-section.tsx
index ee3d663b0e3..dbb422998ad 100644
--- a/apps/app/components/workspace/help-section.tsx
+++ b/apps/app/components/workspace/help-section.tsx
@@ -12,8 +12,8 @@ import {
   CommentIcon,
 } from "components/icons";
 // hooks
-import useTheme from "hooks/useTheme";
-import useOutsideClickDetector from "hooks/useOutsideClickDetector";
+import useTheme from "hooks/use-theme";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
 
 const helpOptions = [
   {
diff --git a/apps/app/components/workspace/send-workspace-invitation-modal.tsx b/apps/app/components/workspace/send-workspace-invitation-modal.tsx
index 439b3469fe0..c860af7243f 100644
--- a/apps/app/components/workspace/send-workspace-invitation-modal.tsx
+++ b/apps/app/components/workspace/send-workspace-invitation-modal.tsx
@@ -8,7 +8,7 @@ import workspaceService from "services/workspace.service";
 // ui
 import { Button, Input, Select } from "components/ui";
 // hooks
-import useToast from "hooks/useToast";
+import useToast from "hooks/use-toast";
 // types
 import { IWorkspaceMemberInvitation } from "types";
 // fetch keys
diff --git a/apps/app/components/workspace/sidebar-dropdown.tsx b/apps/app/components/workspace/sidebar-dropdown.tsx
index 4196640a507..fef4a8fee9e 100644
--- a/apps/app/components/workspace/sidebar-dropdown.tsx
+++ b/apps/app/components/workspace/sidebar-dropdown.tsx
@@ -6,7 +6,7 @@ import Link from "next/link";
 import { ChevronDownIcon, PlusIcon } from "@heroicons/react/24/outline";
 // hooks
 import useUser from "hooks/use-user";
-import useTheme from "hooks/useTheme";
+import useTheme from "hooks/use-theme";
 import useWorkspaces from "hooks/use-workspaces";
 // services
 import userService from "services/user.service";
diff --git a/apps/app/components/workspace/sidebar-menu.tsx b/apps/app/components/workspace/sidebar-menu.tsx
index 76d461caaa2..003bf5588c5 100644
--- a/apps/app/components/workspace/sidebar-menu.tsx
+++ b/apps/app/components/workspace/sidebar-menu.tsx
@@ -9,7 +9,7 @@ import {
   RectangleStackIcon,
 } from "@heroicons/react/24/outline";
 // hooks
-import useTheme from "hooks/useTheme";
+import useTheme from "hooks/use-theme";
 
 const workspaceLinks = (workspaceSlug: string) => [
   {
diff --git a/apps/app/contexts/issue-view.context.tsx b/apps/app/contexts/issue-view.context.tsx
new file mode 100644
index 00000000000..437e29e643c
--- /dev/null
+++ b/apps/app/contexts/issue-view.context.tsx
@@ -0,0 +1,279 @@
+import React, { createContext, useCallback, useReducer } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// components
+import ToastAlert from "components/toast-alert";
+// services
+import projectService from "services/project.service";
+// types
+import type { IIssue, NestedKeyOf } from "types";
+// fetch-keys
+import { USER_PROJECT_VIEW } from "constants/fetch-keys";
+
+export const issueViewContext = createContext<ContextType>({} as ContextType);
+
+type IssueViewProps = {
+  issueView: "list" | "kanban" | null;
+  groupByProperty: NestedKeyOf<IIssue> | null;
+  filterIssue: "activeIssue" | "backlogIssue" | null;
+  orderBy: NestedKeyOf<IIssue> | null;
+};
+
+type ReducerActionType = {
+  type:
+    | "SET_ISSUE_VIEW"
+    | "SET_ORDER_BY_PROPERTY"
+    | "SET_FILTER_ISSUES"
+    | "SET_GROUP_BY_PROPERTY"
+    | "RESET_TO_DEFAULT";
+  payload?: Partial<IssueViewProps>;
+};
+
+type ContextType = {
+  orderBy: NestedKeyOf<IIssue> | null;
+  issueView: "list" | "kanban" | null;
+  groupByProperty: NestedKeyOf<IIssue> | null;
+  filterIssue: "activeIssue" | "backlogIssue" | null;
+  setGroupByProperty: (property: NestedKeyOf<IIssue> | null) => void;
+  setOrderBy: (property: NestedKeyOf<IIssue> | null) => void;
+  setFilterIssue: (property: "activeIssue" | "backlogIssue" | null) => void;
+  resetFilterToDefault: () => void;
+  setNewFilterDefaultView: () => void;
+  setIssueViewToKanban: () => void;
+  setIssueViewToList: () => void;
+};
+
+type StateType = {
+  issueView: "list" | "kanban" | null;
+  groupByProperty: NestedKeyOf<IIssue> | null;
+  filterIssue: "activeIssue" | "backlogIssue" | null;
+  orderBy: NestedKeyOf<IIssue> | null;
+};
+type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
+
+export const initialState: StateType = {
+  issueView: "list",
+  groupByProperty: null,
+  orderBy: null,
+  filterIssue: null,
+};
+
+export const reducer: ReducerFunctionType = (state, action) => {
+  const { type, payload } = action;
+
+  switch (type) {
+    case "SET_ISSUE_VIEW": {
+      const newState = {
+        ...state,
+        issueView: payload?.issueView || "list",
+      };
+      return {
+        ...state,
+        ...newState,
+      };
+    }
+
+    case "SET_GROUP_BY_PROPERTY": {
+      const newState = {
+        ...state,
+        groupByProperty: payload?.groupByProperty || null,
+      };
+      return {
+        ...state,
+        ...newState,
+      };
+    }
+
+    case "SET_ORDER_BY_PROPERTY": {
+      const newState = {
+        ...state,
+        orderBy: payload?.orderBy || null,
+      };
+      return {
+        ...state,
+        ...newState,
+      };
+    }
+
+    case "SET_FILTER_ISSUES": {
+      const newState = {
+        ...state,
+        filterIssue: payload?.filterIssue || null,
+      };
+      return {
+        ...state,
+        ...newState,
+      };
+    }
+
+    case "RESET_TO_DEFAULT": {
+      return {
+        ...initialState,
+        ...payload,
+      };
+    }
+    default: {
+      return state;
+    }
+  }
+};
+
+const saveDataToServer = async (workspaceSlug: string, projectID: string, state: any) => {
+  await projectService.setProjectView(workspaceSlug, projectID, {
+    view_props: state,
+  });
+};
+
+const setNewDefault = async (workspaceSlug: string, projectID: string, state: any) => {
+  await projectService.setProjectView(workspaceSlug, projectID, {
+    view_props: state,
+    default_props: state,
+  });
+};
+
+export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: myViewProps, mutate: mutateMyViewProps } = useSWR(
+    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMemberMe(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const setIssueViewToKanban = useCallback(() => {
+    dispatch({
+      type: "SET_ISSUE_VIEW",
+      payload: {
+        issueView: "kanban",
+      },
+    });
+    dispatch({
+      type: "SET_GROUP_BY_PROPERTY",
+      payload: {
+        groupByProperty: "state_detail.name",
+      },
+    });
+    if (!workspaceSlug || !projectId) return;
+    saveDataToServer(workspaceSlug as string, projectId as string, {
+      ...state,
+      issueView: "kanban",
+      groupByProperty: "state_detail.name",
+    });
+  }, [workspaceSlug, projectId, state]);
+
+  const setIssueViewToList = useCallback(() => {
+    dispatch({
+      type: "SET_ISSUE_VIEW",
+      payload: {
+        issueView: "list",
+      },
+    });
+    dispatch({
+      type: "SET_GROUP_BY_PROPERTY",
+      payload: {
+        groupByProperty: null,
+      },
+    });
+    if (!workspaceSlug || !projectId) return;
+    saveDataToServer(workspaceSlug as string, projectId as string, {
+      ...state,
+      issueView: "list",
+      groupByProperty: null,
+    });
+  }, [workspaceSlug, projectId, state]);
+
+  const setGroupByProperty = useCallback(
+    (property: NestedKeyOf<IIssue> | null) => {
+      dispatch({
+        type: "SET_GROUP_BY_PROPERTY",
+        payload: {
+          groupByProperty: property,
+        },
+      });
+
+      if (!workspaceSlug || !projectId) return;
+      saveDataToServer(workspaceSlug as string, projectId as string, {
+        ...state,
+        groupByProperty: property,
+      });
+    },
+    [projectId, workspaceSlug, state]
+  );
+
+  const setOrderBy = useCallback(
+    (property: NestedKeyOf<IIssue> | null) => {
+      dispatch({
+        type: "SET_ORDER_BY_PROPERTY",
+        payload: {
+          orderBy: property,
+        },
+      });
+
+      if (!workspaceSlug || !projectId) return;
+      saveDataToServer(workspaceSlug as string, projectId as string, state);
+    },
+    [projectId, workspaceSlug, state]
+  );
+
+  const setFilterIssue = useCallback(
+    (property: "activeIssue" | "backlogIssue" | null) => {
+      dispatch({
+        type: "SET_FILTER_ISSUES",
+        payload: {
+          filterIssue: property,
+        },
+      });
+
+      if (!workspaceSlug || !projectId) return;
+      saveDataToServer(workspaceSlug as string, projectId as string, {
+        ...state,
+        filterIssue: property,
+      });
+    },
+    [projectId, workspaceSlug, state]
+  );
+
+  const setNewDefaultView = useCallback(() => {
+    if (!workspaceSlug || !projectId) return;
+    setNewDefault(workspaceSlug as string, projectId as string, state).then(() => {
+      mutateMyViewProps();
+    });
+  }, [projectId, workspaceSlug, state, mutateMyViewProps]);
+
+  const resetToDefault = useCallback(() => {
+    dispatch({
+      type: "RESET_TO_DEFAULT",
+      payload: myViewProps?.default_props,
+    });
+    if (!workspaceSlug || !projectId) return;
+    saveDataToServer(workspaceSlug as string, projectId as string, myViewProps?.default_props);
+  }, [projectId, workspaceSlug, myViewProps]);
+
+  return (
+    <issueViewContext.Provider
+      value={{
+        issueView: state.issueView,
+        groupByProperty: state.groupByProperty,
+        setGroupByProperty,
+        orderBy: state.orderBy,
+        setOrderBy,
+        filterIssue: state.filterIssue,
+        setFilterIssue,
+        resetFilterToDefault: resetToDefault,
+        setNewFilterDefaultView: setNewDefaultView,
+        setIssueViewToKanban,
+        setIssueViewToList,
+      }}
+    >
+      <ToastAlert />
+      {children}
+    </issueViewContext.Provider>
+  );
+};
diff --git a/apps/app/contexts/theme.context.tsx b/apps/app/contexts/theme.context.tsx
index 1261d15c822..10d0cc84f29 100644
--- a/apps/app/contexts/theme.context.tsx
+++ b/apps/app/contexts/theme.context.tsx
@@ -6,51 +6,33 @@ import useSWR from "swr";
 import ToastAlert from "components/toast-alert";
 // services
 import projectService from "services/project.service";
-// types
-import type { IIssue, NestedKeyOf, ProjectViewTheme as Theme } from "types";
 // fetch-keys
 import { USER_PROJECT_VIEW } from "constants/fetch-keys";
 // constants
 
 export const themeContext = createContext<ContextType>({} as ContextType);
 
+type ThemeProps = {
+  collapsed: boolean;
+};
+
 type ReducerActionType = {
-  type:
-    | "TOGGLE_SIDEBAR"
-    | "REHYDRATE_THEME"
-    | "SET_ISSUE_VIEW"
-    | "SET_ORDER_BY_PROPERTY"
-    | "SET_FILTER_ISSUES"
-    | "SET_GROUP_BY_PROPERTY"
-    | "RESET_TO_DEFAULT";
-  payload?: Partial<Theme>;
+  type: "TOGGLE_SIDEBAR" | "REHYDRATE_THEME";
+  payload?: Partial<ThemeProps>;
 };
 
 type ContextType = {
   collapsed: boolean;
-  orderBy: NestedKeyOf<IIssue> | null;
-  issueView: "list" | "kanban" | null;
-  groupByProperty: NestedKeyOf<IIssue> | null;
-  filterIssue: "activeIssue" | "backlogIssue" | null;
   toggleCollapsed: () => void;
-  setGroupByProperty: (property: NestedKeyOf<IIssue> | null) => void;
-  setOrderBy: (property: NestedKeyOf<IIssue> | null) => void;
-  setFilterIssue: (property: "activeIssue" | "backlogIssue" | null) => void;
-  resetFilterToDefault: () => void;
-  setNewFilterDefaultView: () => void;
-  setIssueViewToKanban: () => void;
-  setIssueViewToList: () => void;
 };
 
-type StateType = Theme;
+type StateType = {
+  collapsed: boolean;
+};
 type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
 
 export const initialState: StateType = {
   collapsed: false,
-  issueView: "list",
-  groupByProperty: null,
-  orderBy: null,
-  filterIssue: null,
 };
 
 export const reducer: ReducerFunctionType = (state, action) => {
@@ -71,82 +53,19 @@ export const reducer: ReducerFunctionType = (state, action) => {
       return { ...initialState, ...payload, collapsed };
     }
 
-    case "SET_ISSUE_VIEW": {
-      const newState = {
-        ...state,
-        issueView: payload?.issueView || "list",
-      };
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    case "SET_GROUP_BY_PROPERTY": {
-      const newState = {
-        ...state,
-        groupByProperty: payload?.groupByProperty || null,
-      };
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    case "SET_ORDER_BY_PROPERTY": {
-      const newState = {
-        ...state,
-        orderBy: payload?.orderBy || null,
-      };
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    case "SET_FILTER_ISSUES": {
-      const newState = {
-        ...state,
-        filterIssue: payload?.filterIssue || null,
-      };
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    case "RESET_TO_DEFAULT": {
-      return {
-        ...initialState,
-        ...payload,
-      };
-    }
     default: {
       return state;
     }
   }
 };
 
-const saveDataToServer = async (workspaceSlug: string, projectID: string, state: any) => {
-  await projectService.setProjectView(workspaceSlug, projectID, {
-    view_props: state,
-  });
-};
-
-const setNewDefault = async (workspaceSlug: string, projectID: string, state: any) => {
-  await projectService.setProjectView(workspaceSlug, projectID, {
-    view_props: state,
-    default_props: state,
-  });
-};
-
 export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { data: myViewProps, mutate: mutateMyViewProps } = useSWR(
+  const { data: myViewProps } = useSWR(
     workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId as string) : null,
     workspaceSlug && projectId
       ? () => projectService.projectMemberMe(workspaceSlug as string, projectId as string)
@@ -159,115 +78,6 @@ export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({
     });
   }, []);
 
-  const setIssueViewToKanban = useCallback(() => {
-    dispatch({
-      type: "SET_ISSUE_VIEW",
-      payload: {
-        issueView: "kanban",
-      },
-    });
-    dispatch({
-      type: "SET_GROUP_BY_PROPERTY",
-      payload: {
-        groupByProperty: "state_detail.name",
-      },
-    });
-    if (!workspaceSlug || !projectId) return;
-    saveDataToServer(workspaceSlug as string, projectId as string, {
-      ...state,
-      issueView: "kanban",
-      groupByProperty: "state_detail.name",
-    });
-  }, [workspaceSlug, projectId, state]);
-
-  const setIssueViewToList = useCallback(() => {
-    dispatch({
-      type: "SET_ISSUE_VIEW",
-      payload: {
-        issueView: "list",
-      },
-    });
-    dispatch({
-      type: "SET_GROUP_BY_PROPERTY",
-      payload: {
-        groupByProperty: null,
-      },
-    });
-    if (!workspaceSlug || !projectId) return;
-    saveDataToServer(workspaceSlug as string, projectId as string, {
-      ...state,
-      issueView: "list",
-      groupByProperty: null,
-    });
-  }, [workspaceSlug, projectId, state]);
-
-  const setGroupByProperty = useCallback(
-    (property: NestedKeyOf<IIssue> | null) => {
-      dispatch({
-        type: "SET_GROUP_BY_PROPERTY",
-        payload: {
-          groupByProperty: property,
-        },
-      });
-
-      if (!workspaceSlug || !projectId) return;
-      saveDataToServer(workspaceSlug as string, projectId as string, {
-        ...state,
-        groupByProperty: property,
-      });
-    },
-    [projectId, workspaceSlug, state]
-  );
-
-  const setOrderBy = useCallback(
-    (property: NestedKeyOf<IIssue> | null) => {
-      dispatch({
-        type: "SET_ORDER_BY_PROPERTY",
-        payload: {
-          orderBy: property,
-        },
-      });
-
-      if (!workspaceSlug || !projectId) return;
-      saveDataToServer(workspaceSlug as string, projectId as string, state);
-    },
-    [projectId, workspaceSlug, state]
-  );
-
-  const setFilterIssue = useCallback(
-    (property: "activeIssue" | "backlogIssue" | null) => {
-      dispatch({
-        type: "SET_FILTER_ISSUES",
-        payload: {
-          filterIssue: property,
-        },
-      });
-
-      if (!workspaceSlug || !projectId) return;
-      saveDataToServer(workspaceSlug as string, projectId as string, {
-        ...state,
-        filterIssue: property,
-      });
-    },
-    [projectId, workspaceSlug, state]
-  );
-
-  const setNewDefaultView = useCallback(() => {
-    if (!workspaceSlug || !projectId) return;
-    setNewDefault(workspaceSlug as string, projectId as string, state).then(() => {
-      mutateMyViewProps();
-    });
-  }, [projectId, workspaceSlug, state, mutateMyViewProps]);
-
-  const resetToDefault = useCallback(() => {
-    dispatch({
-      type: "RESET_TO_DEFAULT",
-      payload: myViewProps?.default_props,
-    });
-    if (!workspaceSlug || !projectId) return;
-    saveDataToServer(workspaceSlug as string, projectId as string, myViewProps?.default_props);
-  }, [projectId, workspaceSlug, myViewProps]);
-
   useEffect(() => {
     dispatch({
       type: "REHYDRATE_THEME",
@@ -280,17 +90,6 @@ export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({
       value={{
         collapsed: state.collapsed,
         toggleCollapsed,
-        issueView: state.issueView,
-        groupByProperty: state.groupByProperty,
-        setGroupByProperty,
-        orderBy: state.orderBy,
-        setOrderBy,
-        filterIssue: state.filterIssue,
-        setFilterIssue,
-        resetFilterToDefault: resetToDefault,
-        setNewFilterDefaultView: setNewDefaultView,
-        setIssueViewToKanban,
-        setIssueViewToList,
       }}
     >
       <ToastAlert />
diff --git a/apps/app/hooks/use-issue-view.tsx b/apps/app/hooks/use-issue-view.tsx
new file mode 100644
index 00000000000..66768d979ea
--- /dev/null
+++ b/apps/app/hooks/use-issue-view.tsx
@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { issueViewContext } from "contexts/issue-view.context";
+
+const useIssueView = () => {
+  const issueViewContextData = useContext(issueViewContext);
+  return issueViewContextData;
+};
+
+export default useIssueView;
diff --git a/apps/app/hooks/useIssuesFilter.tsx b/apps/app/hooks/use-issues-filter.tsx
similarity index 96%
rename from apps/app/hooks/useIssuesFilter.tsx
rename to apps/app/hooks/use-issues-filter.tsx
index fd5fa6338b0..82771937b91 100644
--- a/apps/app/hooks/useIssuesFilter.tsx
+++ b/apps/app/hooks/use-issues-filter.tsx
@@ -4,7 +4,7 @@ import useSWR from "swr";
 // services
 import stateService from "services/state.service";
 // hooks
-import useTheme from "hooks/useTheme";
+import useIssueView from "hooks/use-issue-view";
 // helpers
 import { groupBy, orderArrayBy } from "helpers/array.helper";
 // types
@@ -21,14 +21,14 @@ const useIssuesFilter = (projectIssues: IIssue[]) => {
     groupByProperty,
     setGroupByProperty,
     orderBy,
-    setOrderBy, // TODO: Create a new context for handling issue states
+    setOrderBy,
     filterIssue,
     setFilterIssue,
     resetFilterToDefault,
     setNewFilterDefaultView,
     setIssueViewToKanban,
     setIssueViewToList,
-  } = useTheme();
+  } = useIssueView();
 
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
diff --git a/apps/app/hooks/useLocalStorage.tsx b/apps/app/hooks/use-local-storage.tsx
similarity index 100%
rename from apps/app/hooks/useLocalStorage.tsx
rename to apps/app/hooks/use-local-storage.tsx
diff --git a/apps/app/hooks/useMyIssueFilter.tsx b/apps/app/hooks/use-my-issues-filter.tsx
similarity index 100%
rename from apps/app/hooks/useMyIssueFilter.tsx
rename to apps/app/hooks/use-my-issues-filter.tsx
diff --git a/apps/app/hooks/useOutsideClickDetector.tsx b/apps/app/hooks/use-outside-click-detector.tsx
similarity index 100%
rename from apps/app/hooks/useOutsideClickDetector.tsx
rename to apps/app/hooks/use-outside-click-detector.tsx
diff --git a/apps/app/hooks/useTheme.tsx b/apps/app/hooks/use-theme.tsx
similarity index 100%
rename from apps/app/hooks/useTheme.tsx
rename to apps/app/hooks/use-theme.tsx
diff --git a/apps/app/hooks/useToast.tsx b/apps/app/hooks/use-toast.tsx
similarity index 100%
rename from apps/app/hooks/useToast.tsx
rename to apps/app/hooks/use-toast.tsx
diff --git a/apps/app/hooks/useAutosizeTextArea.tsx b/apps/app/hooks/useAutosizeTextArea.tsx
deleted file mode 100644
index affdf2b433a..00000000000
--- a/apps/app/hooks/useAutosizeTextArea.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useEffect } from "react";
-
-// Updates the height of a <textarea> when the value changes.
-const useAutosizeTextArea = (
-  textAreaRef: HTMLTextAreaElement | null,
-  value: any
-) => {
-  useEffect(() => {
-    if (textAreaRef) {
-      // We need to reset the height momentarily to get the correct scrollHeight for the textarea
-      textAreaRef.style.height = "0px";
-      const scrollHeight = textAreaRef.scrollHeight;
-
-      // We then set the height directly, outside of the render loop
-      // Trying to set this with state or a ref will product an incorrect value.
-      textAreaRef.style.height = scrollHeight + "px";
-    }
-  }, [textAreaRef, value]);
-};
-
-export default useAutosizeTextArea;
diff --git a/apps/app/layouts/app-layout/app-sidebar.tsx b/apps/app/layouts/app-layout/app-sidebar.tsx
index 58a0caf4eed..0dfcb562500 100644
--- a/apps/app/layouts/app-layout/app-sidebar.tsx
+++ b/apps/app/layouts/app-layout/app-sidebar.tsx
@@ -1,6 +1,6 @@
 import React, { Dispatch, SetStateAction } from "react";
 // hooks
-import useTheme from "hooks/useTheme";
+import useTheme from "hooks/use-theme";
 // components
 import {
   WorkspaceHelpSection,
diff --git a/apps/app/layouts/navbar/main-sidebar.tsx b/apps/app/layouts/navbar/main-sidebar.tsx
index 1d04d4d88f1..789d1196266 100644
--- a/apps/app/layouts/navbar/main-sidebar.tsx
+++ b/apps/app/layouts/navbar/main-sidebar.tsx
@@ -2,8 +2,8 @@ import React, { useRef, useState } from "react";
 import Link from "next/link";
 import { Transition } from "@headlessui/react";
 // hooks
-import useTheme from "hooks/useTheme";
-import useOutsideClickDetector from "hooks/useOutsideClickDetector";
+import useTheme from "hooks/use-theme";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
 import ProjectsList from "components/sidebar/projects-list";
 import WorkspaceOptions from "components/sidebar/workspace-options";
diff --git a/apps/app/pages/[workspaceSlug]/me/profile.tsx b/apps/app/pages/[workspaceSlug]/me/profile.tsx
index 1904729065a..43ec74018de 100644
--- a/apps/app/pages/[workspaceSlug]/me/profile.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/profile.tsx
@@ -19,7 +19,7 @@ import type { NextPage, NextPageContext } from "next";
 // hooks
 import type { IIssue, IUser } from "types";
 import useUser from "hooks/use-user";
-import useToast from "hooks/useToast";
+import useToast from "hooks/use-toast";
 // lib
 import { requiredAuth } from "lib/auth";
 // services
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
index c1d213c4a45..9e3cac5596e 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -26,7 +26,7 @@ import issuesServices from "services/issues.service";
 import cycleServices from "services/cycles.service";
 import projectService from "services/project.service";
 // hooks
-import useIssuesFilter from "hooks/useIssuesFilter";
+import useIssuesFilter from "hooks/use-issues-filter";
 import useIssuesProperties from "hooks/use-issue-properties";
 // ui
 import { CustomMenu, EmptySpace, EmptySpaceItem, Spinner } from "components/ui";
@@ -93,7 +93,10 @@ const SingleCycle: React.FC = () => {
           )
       : null
   );
-  const cycleIssuesArray = cycleIssues?.map((issue) => ({ bridge: issue.id, ...issue.issue_detail }));
+  const cycleIssuesArray = cycleIssues?.map((issue) => ({
+    bridge: issue.id,
+    ...issue.issue_detail,
+  }));
 
   const { data: members } = useSWR(
     workspaceSlug && projectId ? PROJECT_MEMBERS(workspaceSlug as string) : null,
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
index 50691423776..9eda16ecf2f 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
@@ -15,7 +15,7 @@ import projectService from "services/project.service";
 // layouts
 import AppLayout from "layouts/app-layout";
 // hooks
-import useIssuesFilter from "hooks/useIssuesFilter";
+import useIssuesFilter from "hooks/use-issues-filter";
 // components
 import ListView from "components/project/issues/list-view";
 import BoardView from "components/project/issues/BoardView";
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
index 50ebcf4120e..3938e03e4a8 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
@@ -16,7 +16,7 @@ import modulesService from "services/modules.service";
 import projectService from "services/project.service";
 import issuesService from "services/issues.service";
 // hooks
-import useIssuesFilter from "hooks/useIssuesFilter";
+import useIssuesFilter from "hooks/use-issues-filter";
 import useIssuesProperties from "hooks/use-issue-properties";
 // layouts
 import AppLayout from "layouts/app-layout";
@@ -114,7 +114,10 @@ const SingleModule = () => {
     }
   );
 
-  const moduleIssuesArray = moduleIssues?.map((issue) => ({ bridge: issue.id, ...issue.issue_detail }));
+  const moduleIssuesArray = moduleIssues?.map((issue) => ({
+    bridge: issue.id,
+    ...issue.issue_detail,
+  }));
 
   const {
     issueView,
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
index e686ca3da53..1f02b9daf4e 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
@@ -15,7 +15,7 @@ import SettingsLayout from "layouts/settings-layout";
 import projectService from "services/project.service";
 import workspaceService from "services/workspace.service";
 // hooks
-import useToast from "hooks/useToast";
+import useToast from "hooks/use-toast";
 // ui
 import { Button, CustomSelect, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index f945d7e3d60..491e4dfa25a 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -20,7 +20,7 @@ import workspaceService from "services/workspace.service";
 import ConfirmProjectDeletion from "components/project/confirm-project-deletion";
 import EmojiIconPicker from "components/emoji-icon-picker";
 // hooks
-import useToast from "hooks/useToast";
+import useToast from "hooks/use-toast";
 // ui
 import { Button, Input, TextArea, Loader, CustomSelect } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index 9cf073566ee..0c9e900295f 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -12,7 +12,7 @@ import workspaceService from "services/workspace.service";
 // lib
 import { requiredAdmin } from "lib/auth";
 // hooks
-import useToast from "hooks/useToast";
+import useToast from "hooks/use-toast";
 // constants
 import { ROLE } from "constants/";
 // layouts
@@ -253,9 +253,11 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
                                     });
                                     mutateMembers(
                                       (prevData: any) =>
-                                        prevData.map((m: any) => m.id === selectedMember
+                                        prevData.map((m: any) =>
+                                          m.id === selectedMember
                                             ? { ...m, ...res, role: value }
-                                            : m),
+                                            : m
+                                        ),
                                       false
                                     );
                                     setSelectedMember(null);
diff --git a/apps/app/pages/[workspaceSlug]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/settings/index.tsx
index e3237781f2e..868f13bdfdf 100644
--- a/apps/app/pages/[workspaceSlug]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/index.tsx
@@ -20,7 +20,7 @@ import fileServices from "services/file.service";
 // layouts
 import SettingsLayout from "layouts/settings-layout";
 // hooks
-import useToast from "hooks/useToast";
+import useToast from "hooks/use-toast";
 // components
 import { ImageUploadModal } from "components/common/image-upload-modal";
 import ConfirmWorkspaceDeletion from "components/workspace/confirm-workspace-deletion";
diff --git a/apps/app/pages/[workspaceSlug]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/settings/members.tsx
index bcf87c5316a..a4e8c91661a 100644
--- a/apps/app/pages/[workspaceSlug]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/members.tsx
@@ -9,7 +9,7 @@ import { PlusIcon } from "@heroicons/react/24/outline";
 import type { GetServerSideProps, NextPage } from "next";
 import { requiredWorkspaceAdmin } from "lib/auth";
 // hooks
-import useToast from "hooks/useToast";
+import useToast from "hooks/use-toast";
 // services
 import workspaceService from "services/workspace.service";
 // constants
diff --git a/apps/app/pages/magic-sign-in/index.tsx b/apps/app/pages/magic-sign-in/index.tsx
index 6a16d70df89..ccfc13268a9 100644
--- a/apps/app/pages/magic-sign-in/index.tsx
+++ b/apps/app/pages/magic-sign-in/index.tsx
@@ -10,7 +10,7 @@ import authenticationService from "services/authentication.service";
 // constants
 // hooks
 import useUser from "hooks/use-user";
-import useToast from "hooks/useToast";
+import useToast from "hooks/use-toast";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 import { USER_WORKSPACES } from "constants/fetch-keys";