diff --git a/apps/app/.env.example b/apps/app/.env.example
new file mode 100644
index 000000000..aff5c6c31
--- /dev/null
+++ b/apps/app/.env.example
@@ -0,0 +1,4 @@
+NEXT_PUBLIC_API_BASE_URL = "<-- endpoint goes here -->"
+NEXT_PUBLIC_GOOGLE_CLIENTID = "<-- google client id goes here -->"
+NEXT_PUBLIC_GITHUB_ID = "<-- github id goes here -->"
+NEXT_PUBLIC_APP_ENVIRONMENT=development
\ No newline at end of file
diff --git a/apps/app/components/command-palette/addAsSubIssue.tsx b/apps/app/components/command-palette/addAsSubIssue.tsx
index e8c585e45..aadc04574 100644
--- a/apps/app/components/command-palette/addAsSubIssue.tsx
+++ b/apps/app/components/command-palette/addAsSubIssue.tsx
@@ -7,7 +7,7 @@ import { useForm } from "react-hook-form";
 // headless ui
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 // services
-import issuesServices from "lib/services/issues.services";
+import issuesServices from "lib/services/issues.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 // icons
diff --git a/apps/app/components/command-palette/index.tsx b/apps/app/components/command-palette/index.tsx
index 63490c97d..32f71a3db 100644
--- a/apps/app/components/command-palette/index.tsx
+++ b/apps/app/components/command-palette/index.tsx
@@ -8,7 +8,7 @@ import { SubmitHandler, useForm } from "react-hook-form";
 // headless ui
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 // services
-import issuesServices from "lib/services/issues.services";
+import issuesServices from "lib/services/issues.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 import useTheme from "lib/hooks/useTheme";
@@ -22,7 +22,7 @@ import {
 } from "@heroicons/react/24/outline";
 // components
 import ShortcutsModal from "components/command-palette/shortcuts";
-import CreateProjectModal from "components/project/CreateProjectModal";
+import CreateProjectModal from "components/project/create-project-modal";
 import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
 import CreateUpdateCycleModal from "components/project/cycles/CreateUpdateCyclesModal";
 // ui
diff --git a/apps/app/components/project/SendProjectInvitationModal.tsx b/apps/app/components/project/SendProjectInvitationModal.tsx
index 0c0485803..6227c569f 100644
--- a/apps/app/components/project/SendProjectInvitationModal.tsx
+++ b/apps/app/components/project/SendProjectInvitationModal.tsx
@@ -20,7 +20,7 @@ import { Button, Select, TextArea } from "ui";
 import { ChevronDownIcon, CheckIcon } from "@heroicons/react/20/solid";
 
 // types
-import { ProjectMember, WorkspaceMember } from "types";
+import { IProjectMemberInvitation } from "types";
 
 type Props = {
   isOpen: boolean;
@@ -28,6 +28,11 @@ type Props = {
   members: any[];
 };
 
+type ProjectMember = IProjectMemberInvitation & {
+  member_id: string;
+  user_id: string;
+};
+
 const defaultValues: Partial<ProjectMember> = {
   email: "",
   message: "",
@@ -49,7 +54,7 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
 
   const { setToastAlert } = useToast();
 
-  const { data: people } = useSWR<WorkspaceMember[]>(
+  const { data: people } = useSWR(
     activeWorkspace ? WORKSPACE_MEMBERS(activeWorkspace.slug) : null,
     activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null,
     {
diff --git a/apps/app/components/project/ConfirmProjectDeletion.tsx b/apps/app/components/project/confirm-project-deletion.tsx
similarity index 63%
rename from apps/app/components/project/ConfirmProjectDeletion.tsx
rename to apps/app/components/project/confirm-project-deletion.tsx
index 0b0dde39e..46391bb5c 100644
--- a/apps/app/components/project/ConfirmProjectDeletion.tsx
+++ b/apps/app/components/project/confirm-project-deletion.tsx
@@ -9,19 +9,26 @@ import useToast from "lib/hooks/useToast";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { Button } from "ui";
+import { Button, Input } from "ui";
 // types
 import type { IProject } from "types";
 
 type Props = {
   isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  data?: IProject;
+  onClose: () => void;
+  data: IProject | null;
 };
 
-const ConfirmProjectDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
+const ConfirmProjectDeletion: React.FC<Props> = ({ isOpen, data, onClose }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
+  const [selectedProject, setSelectedProject] = useState<IProject | null>(null);
+
+  const [confirmProjectName, setConfirmProjectName] = useState("");
+  const [confirmDeleteMyProject, setConfirmDeleteMyProject] = useState(false);
+
+  const canDelete = confirmProjectName === data?.name && confirmDeleteMyProject;
+
   const { activeWorkspace, mutateProjects } = useUser();
 
   const { setToastAlert } = useToast();
@@ -29,13 +36,18 @@ const ConfirmProjectDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) =>
   const cancelButtonRef = useRef(null);
 
   const handleClose = () => {
-    setIsOpen(false);
     setIsDeleteLoading(false);
+    const timer = setTimeout(() => {
+      setConfirmProjectName("");
+      setConfirmDeleteMyProject(false);
+      clearTimeout(timer);
+    }, 350);
+    onClose();
   };
 
   const handleDeletion = async () => {
     setIsDeleteLoading(true);
-    if (!data || !activeWorkspace) return;
+    if (!data || !activeWorkspace || !canDelete) return;
     await projectService
       .deleteProject(activeWorkspace.slug, data.id)
       .then(() => {
@@ -54,8 +66,14 @@ const ConfirmProjectDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) =>
   };
 
   useEffect(() => {
-    data && setIsOpen(true);
-  }, [data, setIsOpen]);
+    if (data) setSelectedProject(data);
+    else {
+      const timer = setTimeout(() => {
+        setSelectedProject(null);
+        clearTimeout(timer);
+      }, 300);
+    }
+  }, [data]);
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
@@ -104,11 +122,48 @@ const ConfirmProjectDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) =>
                       <div className="mt-2">
                         <p className="text-sm text-gray-500">
                           Are you sure you want to delete project - {`"`}
-                          <span className="italic">{data?.name}</span>
+                          <span className="italic">{selectedProject?.name}</span>
                           {`"`} ? All of the data related to the project will be permanently
                           removed. This action cannot be undone.
                         </p>
                       </div>
+                      <div className="h-0.5 bg-gray-200 my-3" />
+                      <div className="mt-3">
+                        <p className="text-sm">
+                          Enter the project name{" "}
+                          <span className="font-semibold">{selectedProject?.name}</span> to
+                          continue:
+                        </p>
+                        <Input
+                          type="text"
+                          placeholder="Project name"
+                          className="mt-2"
+                          value={confirmProjectName}
+                          onChange={(e) => {
+                            setConfirmProjectName(e.target.value);
+                          }}
+                          name="projectName"
+                        />
+                      </div>
+                      <div className="mt-3">
+                        <p className="text-sm">
+                          To confirm, type <span className="font-semibold">delete my project</span>{" "}
+                          below:
+                        </p>
+                        <Input
+                          type="text"
+                          placeholder="Enter 'delete my project'"
+                          className="mt-2"
+                          onChange={(e) => {
+                            if (e.target.value === "delete my project") {
+                              setConfirmDeleteMyProject(true);
+                            } else {
+                              setConfirmDeleteMyProject(false);
+                            }
+                          }}
+                          name="projectName"
+                        />
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -117,7 +172,7 @@ const ConfirmProjectDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) =>
                     type="button"
                     onClick={handleDeletion}
                     theme="danger"
-                    disabled={isDeleteLoading}
+                    disabled={isDeleteLoading || !canDelete}
                     className="inline-flex sm:ml-3"
                   >
                     {isDeleteLoading ? "Deleting..." : "Delete"}
diff --git a/apps/app/components/project/CreateProjectModal.tsx b/apps/app/components/project/create-project-modal.tsx
similarity index 78%
rename from apps/app/components/project/CreateProjectModal.tsx
rename to apps/app/components/project/create-project-modal.tsx
index c93f9123b..f6ad48a78 100644
--- a/apps/app/components/project/CreateProjectModal.tsx
+++ b/apps/app/components/project/create-project-modal.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect } from "react";
 // swr
 import useSWR, { mutate } from "swr";
 // react hook form
@@ -8,6 +8,10 @@ import { Dialog, Transition } from "@headlessui/react";
 // services
 import projectServices from "lib/services/project.service";
 import workspaceService from "lib/services/workspace.service";
+// common
+import { createSimilarString } from "constants/common";
+// constants
+import { NETWORK_CHOICES } from "constants/";
 // fetch keys
 import { PROJECTS_LIST, WORKSPACE_MEMBERS } from "constants/fetch-keys";
 // hooks
@@ -15,21 +19,19 @@ import useUser from "lib/hooks/useUser";
 import useToast from "lib/hooks/useToast";
 // ui
 import { Button, Input, TextArea, Select } from "ui";
-// common
-import { debounce } from "constants/common";
 // types
-import { IProject, WorkspaceMember } from "types";
+import { IProject } from "types";
 
 type Props = {
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-const NETWORK_CHOICES = { "0": "Secret", "2": "Public" };
-
 const defaultValues: Partial<IProject> = {
   name: "",
+  identifier: "",
   description: "",
+  network: 0,
 };
 
 const IsGuestCondition: React.FC<{
@@ -60,11 +62,16 @@ const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
 
   const { activeWorkspace, user } = useUser();
 
-  const { data: workspaceMembers } = useSWR<WorkspaceMember[]>(
+  const { data: workspaceMembers } = useSWR(
     activeWorkspace ? WORKSPACE_MEMBERS(activeWorkspace.slug) : null,
-    activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
+    activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null,
+    {
+      shouldRetryOnError: false,
+    }
   );
 
+  const [recommendedIdentifier, setRecommendedIdentifier] = useState<string[]>([]);
+
   const { setToastAlert } = useToast();
 
   const [isChangeIdentifierRequired, setIsChangeIdentifierRequired] = useState(true);
@@ -75,12 +82,11 @@ const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
     handleSubmit,
     reset,
     setError,
+    clearErrors,
     watch,
     setValue,
   } = useForm<IProject>({
     defaultValues,
-    reValidateMode: "onChange",
-    mode: "all",
   });
 
   const onSubmit = async (formData: IProject) => {
@@ -111,6 +117,7 @@ const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
           handleClose();
           return;
         }
+        err = err.data;
         Object.keys(err).map((key) => {
           const errorMessages = err[key];
           setError(key as keyof IProject, {
@@ -123,22 +130,6 @@ const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
   const projectName = watch("name") ?? "";
   const projectIdentifier = watch("identifier") ?? "";
 
-  const checkIdentifier = (slug: string, value: string) => {
-    projectServices.checkProjectIdentifierAvailability(slug, value).then((response) => {
-      console.log(response);
-      if (response.exists) setError("identifier", { message: "Identifier already exists" });
-    });
-  };
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const checkIdentifierAvailability = useCallback(debounce(checkIdentifier, 1500), []);
-
-  useEffect(() => {
-    if (projectName && isChangeIdentifierRequired) {
-      setValue("identifier", projectName.replace(/ /g, "-").toUpperCase().substring(0, 3));
-    }
-  }, [projectName, projectIdentifier, setValue, isChangeIdentifierRequired]);
-
   if (workspaceMembers) {
     const isMember = workspaceMembers.find((member) => member.member.id === user?.id);
     const isGuest = workspaceMembers.find(
@@ -148,6 +139,30 @@ const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
     if ((!isMember || isGuest) && isOpen) return <IsGuestCondition setIsOpen={setIsOpen} />;
   }
 
+  useEffect(() => {
+    if (projectName && isChangeIdentifierRequired) {
+      setValue("identifier", projectName.replace(/ /g, "").toUpperCase().substring(0, 3));
+    }
+  }, [projectName, projectIdentifier, setValue, isChangeIdentifierRequired]);
+
+  useEffect(() => {
+    if (!projectName) return;
+    const suggestedIdentifier = createSimilarString(
+      projectName.replace(/ /g, "").toUpperCase().substring(0, 3)
+    );
+
+    setRecommendedIdentifier([
+      suggestedIdentifier + Math.floor(Math.random() * 101),
+      suggestedIdentifier + Math.floor(Math.random() * 101),
+      projectIdentifier.toUpperCase().substring(0, 3) + Math.floor(Math.random() * 101),
+      projectIdentifier.toUpperCase().substring(0, 3) + Math.floor(Math.random() * 101),
+    ]);
+  }, [errors.identifier]);
+
+  useEffect(() => {
+    return () => setIsChangeIdentifierRequired(true);
+  }, [isOpen]);
+
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-10" onClose={handleClose}>
@@ -234,11 +249,7 @@ const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                           placeholder="Enter Project Identifier"
                           error={errors.identifier}
                           register={register}
-                          onChange={(e: any) => {
-                            setIsChangeIdentifierRequired(false);
-                            if (!activeWorkspace || !e.target.value) return;
-                            checkIdentifierAvailability(activeWorkspace.slug, e.target.value);
-                          }}
+                          onChange={() => setIsChangeIdentifierRequired(false)}
                           validations={{
                             required: "Identifier is required",
                             minLength: {
@@ -251,6 +262,27 @@ const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                             },
                           }}
                         />
+                        {errors.identifier && (
+                          <div className="mt-2">
+                            <p>Ops! Identifier is already taken. Try one of the following:</p>
+                            <div className="flex gap-x-2">
+                              {recommendedIdentifier.map((identifier) => (
+                                <button
+                                  key={identifier}
+                                  type="button"
+                                  className="text-sm text-gray-500 hover:text-gray-700 border p-2 py-0.5 rounded"
+                                  onClick={() => {
+                                    clearErrors("identifier");
+                                    setValue("identifier", identifier);
+                                    setIsChangeIdentifierRequired(false);
+                                  }}
+                                >
+                                  {identifier}
+                                </button>
+                              ))}
+                            </div>
+                          </div>
+                        )}
                       </div>
                     </div>
                   </div>
diff --git a/apps/app/components/project/cycles/ConfirmCycleDeletion.tsx b/apps/app/components/project/cycles/ConfirmCycleDeletion.tsx
index fb5cf565b..b3571831a 100644
--- a/apps/app/components/project/cycles/ConfirmCycleDeletion.tsx
+++ b/apps/app/components/project/cycles/ConfirmCycleDeletion.tsx
@@ -4,7 +4,7 @@ import { mutate } from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import cycleService from "lib/services/cycles.services";
+import cycleService from "lib/services/cycles.service";
 // fetch api
 import { CYCLE_LIST } from "constants/fetch-keys";
 // hooks
diff --git a/apps/app/components/project/cycles/CreateUpdateCyclesModal.tsx b/apps/app/components/project/cycles/CreateUpdateCyclesModal.tsx
index 0fd25f481..3f3127082 100644
--- a/apps/app/components/project/cycles/CreateUpdateCyclesModal.tsx
+++ b/apps/app/components/project/cycles/CreateUpdateCyclesModal.tsx
@@ -6,7 +6,7 @@ import { useForm } from "react-hook-form";
 // headless
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import cycleService from "lib/services/cycles.services";
+import cycleService from "lib/services/cycles.service";
 // fetch keys
 import { CYCLE_LIST } from "constants/fetch-keys";
 // hooks
diff --git a/apps/app/components/project/cycles/CycleIssuesListModal.tsx b/apps/app/components/project/cycles/CycleIssuesListModal.tsx
index 5f29a5bfd..d25d069df 100644
--- a/apps/app/components/project/cycles/CycleIssuesListModal.tsx
+++ b/apps/app/components/project/cycles/CycleIssuesListModal.tsx
@@ -7,7 +7,7 @@ import { Combobox, Dialog, Transition } from "@headlessui/react";
 // ui
 import { Button } from "ui";
 // services
-import issuesServices from "lib/services/issues.services";
+import issuesServices from "lib/services/issues.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 import useToast from "lib/hooks/useToast";
diff --git a/apps/app/components/project/cycles/CycleView.tsx b/apps/app/components/project/cycles/CycleView.tsx
index f46079165..73a0d0af4 100644
--- a/apps/app/components/project/cycles/CycleView.tsx
+++ b/apps/app/components/project/cycles/CycleView.tsx
@@ -7,7 +7,7 @@ import useSWR, { mutate } from "swr";
 // headless ui
 import { Disclosure, Transition, Menu } from "@headlessui/react";
 // services
-import cycleServices from "lib/services/cycles.services";
+import cycleServices from "lib/services/cycles.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 // components
@@ -22,7 +22,7 @@ import type { CycleViewProps as Props, CycleIssueResponse, IssueResponse } from
 import { CYCLE_ISSUES } from "constants/fetch-keys";
 // constants
 import { renderShortNumericDateFormat } from "constants/common";
-import issuesServices from "lib/services/issues.services";
+import issuesServices from "lib/services/issues.service";
 import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 import { Draggable } from "react-beautiful-dnd";
 
diff --git a/apps/app/components/project/issues/BoardView/index.tsx b/apps/app/components/project/issues/BoardView/index.tsx
index fe69a091e..4881f22ed 100644
--- a/apps/app/components/project/issues/BoardView/index.tsx
+++ b/apps/app/components/project/issues/BoardView/index.tsx
@@ -7,8 +7,8 @@ import useSWR from "swr";
 import type { DropResult } from "react-beautiful-dnd";
 import { DragDropContext } from "react-beautiful-dnd";
 // services
-import stateServices from "lib/services/state.services";
-import issuesServices from "lib/services/issues.services";
+import stateServices from "lib/services/state.service";
+import issuesServices from "lib/services/issues.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 // fetching keys
@@ -20,7 +20,7 @@ import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssue
 // ui
 import { Spinner } from "ui";
 // types
-import type { IState, IIssue, Properties, NestedKeyOf, ProjectMember } from "types";
+import type { IState, IIssue, Properties, NestedKeyOf, IProjectMember } from "types";
 import ConfirmIssueDeletion from "../ConfirmIssueDeletion";
 import { TrashIcon } from "@heroicons/react/24/outline";
 
@@ -30,7 +30,7 @@ type Props = {
   groupedByIssues: {
     [key: string]: IIssue[];
   };
-  members: ProjectMember[] | undefined;
+  members: IProjectMember[] | undefined;
 };
 
 const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues, members }) => {
diff --git a/apps/app/components/project/issues/BoardView/state/ConfirmStateDeletion.tsx b/apps/app/components/project/issues/BoardView/state/ConfirmStateDeletion.tsx
index b8754437a..448c50acc 100644
--- a/apps/app/components/project/issues/BoardView/state/ConfirmStateDeletion.tsx
+++ b/apps/app/components/project/issues/BoardView/state/ConfirmStateDeletion.tsx
@@ -4,7 +4,7 @@ import { mutate } from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import stateServices from "lib/services/state.services";
+import stateServices from "lib/services/state.service";
 // fetch api
 import { STATE_LIST } from "constants/fetch-keys";
 // hooks
@@ -43,7 +43,7 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
         mutate<IState[]>(
           STATE_LIST(data.project),
           (prevData) => prevData?.filter((state) => state.id !== data?.id),
-          false,
+          false
         );
         handleClose();
       })
@@ -98,18 +98,15 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
                       />
                     </div>
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium leading-6 text-gray-900"
-                      >
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
                         Delete State
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-gray-500">
                           Are you sure you want to delete state - {`"`}
                           <span className="italic">{data?.name}</span>
-                          {`"`} ? All of the data related to the state will be
-                          permanently removed. This action cannot be undone.
+                          {`"`} ? All of the data related to the state will be permanently removed.
+                          This action cannot be undone.
                         </p>
                       </div>
                     </div>
diff --git a/apps/app/components/project/issues/BoardView/state/CreateUpdateStateModal.tsx b/apps/app/components/project/issues/BoardView/state/CreateUpdateStateModal.tsx
index 9f3b3951b..3ba149820 100644
--- a/apps/app/components/project/issues/BoardView/state/CreateUpdateStateModal.tsx
+++ b/apps/app/components/project/issues/BoardView/state/CreateUpdateStateModal.tsx
@@ -8,7 +8,7 @@ import { TwitterPicker } from "react-color";
 // headless
 import { Dialog, Popover, Transition } from "@headlessui/react";
 // services
-import stateService from "lib/services/state.services";
+import stateService from "lib/services/state.service";
 // fetch keys
 import { STATE_LIST } from "constants/fetch-keys";
 // hooks
diff --git a/apps/app/components/project/issues/ConfirmIssueDeletion.tsx b/apps/app/components/project/issues/ConfirmIssueDeletion.tsx
index 3b161ae6c..f1476c682 100644
--- a/apps/app/components/project/issues/ConfirmIssueDeletion.tsx
+++ b/apps/app/components/project/issues/ConfirmIssueDeletion.tsx
@@ -6,7 +6,7 @@ import { Dialog, Transition } from "@headlessui/react";
 // fetching keys
 import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 // services
-import issueServices from "lib/services/issues.services";
+import issueServices from "lib/services/issues.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 import useToast from "lib/hooks/useToast";
diff --git a/apps/app/components/project/issues/CreateUpdateIssueModal/SelectAssignee.tsx b/apps/app/components/project/issues/CreateUpdateIssueModal/SelectAssignee.tsx
index 376ab65e6..dc5d2b741 100644
--- a/apps/app/components/project/issues/CreateUpdateIssueModal/SelectAssignee.tsx
+++ b/apps/app/components/project/issues/CreateUpdateIssueModal/SelectAssignee.tsx
@@ -11,7 +11,7 @@ import useUser from "lib/hooks/useUser";
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 // types
 import type { Control } from "react-hook-form";
-import type { IIssue, WorkspaceMember } from "types";
+import type { IIssue } from "types";
 import { UserIcon } from "@heroicons/react/24/outline";
 
 import { SearchListbox } from "ui";
@@ -23,7 +23,7 @@ type Props = {
 const SelectAssignee: React.FC<Props> = ({ control }) => {
   const { activeWorkspace, activeProject } = useUser();
 
-  const { data: people } = useSWR<WorkspaceMember[]>(
+  const { data: people } = useSWR(
     activeWorkspace && activeProject ? PROJECT_MEMBERS(activeProject.id) : null,
     activeWorkspace && activeProject
       ? () => projectServices.projectMembers(activeWorkspace.slug, activeProject.id)
diff --git a/apps/app/components/project/issues/CreateUpdateIssueModal/SelectLabels.tsx b/apps/app/components/project/issues/CreateUpdateIssueModal/SelectLabels.tsx
index a7ef75203..6fad13a44 100644
--- a/apps/app/components/project/issues/CreateUpdateIssueModal/SelectLabels.tsx
+++ b/apps/app/components/project/issues/CreateUpdateIssueModal/SelectLabels.tsx
@@ -6,7 +6,7 @@ import { useForm, Controller } from "react-hook-form";
 // headless ui
 import { Listbox, Transition } from "@headlessui/react";
 // services
-import issuesServices from "lib/services/issues.services";
+import issuesServices from "lib/services/issues.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 // fetching keys
diff --git a/apps/app/components/project/issues/CreateUpdateIssueModal/index.tsx b/apps/app/components/project/issues/CreateUpdateIssueModal/index.tsx
index b7559d988..14032c6c6 100644
--- a/apps/app/components/project/issues/CreateUpdateIssueModal/index.tsx
+++ b/apps/app/components/project/issues/CreateUpdateIssueModal/index.tsx
@@ -16,7 +16,7 @@ import {
 // headless
 import { Dialog, Menu, Transition } from "@headlessui/react";
 // services
-import issuesServices from "lib/services/issues.services";
+import issuesServices from "lib/services/issues.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 import useToast from "lib/hooks/useToast";
diff --git a/apps/app/components/project/issues/ListView/index.tsx b/apps/app/components/project/issues/ListView/index.tsx
index c4a7e19f1..78d5ab68b 100644
--- a/apps/app/components/project/issues/ListView/index.tsx
+++ b/apps/app/components/project/issues/ListView/index.tsx
@@ -10,14 +10,14 @@ import { Listbox, Transition } from "@headlessui/react";
 // icons
 import { PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssue, IssueResponse, NestedKeyOf, Properties, WorkspaceMember } from "types";
+import { IIssue, IssueResponse, NestedKeyOf, Properties } from "types";
 // hooks
 import useUser from "lib/hooks/useUser";
 // fetch keys
 import { PRIORITIES } from "constants/";
 import { PROJECT_ISSUES_LIST, WORKSPACE_MEMBERS } from "constants/fetch-keys";
 // services
-import issuesServices from "lib/services/issues.services";
+import issuesServices from "lib/services/issues.service";
 import workspaceService from "lib/services/workspace.service";
 // constants
 import { addSpaceIfCamelCase, classNames, renderShortNumericDateFormat } from "constants/common";
@@ -60,7 +60,7 @@ const ListView: React.FC<Props> = ({
       });
   };
 
-  const { data: people } = useSWR<WorkspaceMember[]>(
+  const { data: people } = useSWR(
     activeWorkspace ? WORKSPACE_MEMBERS : null,
     activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
   );
diff --git a/apps/app/components/project/issues/issue-detail/IssueDetailSidebar.tsx b/apps/app/components/project/issues/issue-detail/IssueDetailSidebar.tsx
index 12f0773f2..71c84a745 100644
--- a/apps/app/components/project/issues/issue-detail/IssueDetailSidebar.tsx
+++ b/apps/app/components/project/issues/issue-detail/IssueDetailSidebar.tsx
@@ -6,8 +6,8 @@ import { Listbox, Transition } from "@headlessui/react";
 // react hook form
 import { useForm, Controller, UseFormWatch } from "react-hook-form";
 // services
-import stateServices from "lib/services/state.services";
-import issuesServices from "lib/services/issues.services";
+import stateServices from "lib/services/state.service";
+import issuesServices from "lib/services/issues.service";
 import workspaceService from "lib/services/workspace.service";
 // hooks
 import useUser from "lib/hooks/useUser";
@@ -40,14 +40,7 @@ import {
 } from "@heroicons/react/24/outline";
 // types
 import type { Control } from "react-hook-form";
-import type {
-  IIssue,
-  IIssueLabels,
-  IssueResponse,
-  IState,
-  NestedKeyOf,
-  WorkspaceMember,
-} from "types";
+import type { IIssue, IIssueLabels, IssueResponse, IState, NestedKeyOf } from "types";
 import { TwitterPicker } from "react-color";
 import IssuesListModal from "components/project/issues/IssuesListModal";
 
@@ -84,7 +77,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
       : null
   );
 
-  const { data: people } = useSWR<WorkspaceMember[]>(
+  const { data: people } = useSWR(
     activeWorkspace ? WORKSPACE_MEMBERS(activeWorkspace.slug) : null,
     activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
   );
diff --git a/apps/app/components/project/issues/issue-detail/comment/IssueCommentSection.tsx b/apps/app/components/project/issues/issue-detail/comment/IssueCommentSection.tsx
index 364381ce1..fe07421f1 100644
--- a/apps/app/components/project/issues/issue-detail/comment/IssueCommentSection.tsx
+++ b/apps/app/components/project/issues/issue-detail/comment/IssueCommentSection.tsx
@@ -4,7 +4,7 @@ import { mutate } from "swr";
 // react hook form
 import { useForm } from "react-hook-form";
 // services
-import issuesServices from "lib/services/issues.services";
+import issuesServices from "lib/services/issues.service";
 // fetch keys
 import { PROJECT_ISSUES_COMMENTS } from "constants/fetch-keys";
 // components
diff --git a/apps/app/components/project/issues/my-issues/ChangeStateDropdown.tsx b/apps/app/components/project/issues/my-issues/ChangeStateDropdown.tsx
index 1b84fd937..9e90c0e8d 100644
--- a/apps/app/components/project/issues/my-issues/ChangeStateDropdown.tsx
+++ b/apps/app/components/project/issues/my-issues/ChangeStateDropdown.tsx
@@ -8,7 +8,7 @@ import useUser from "lib/hooks/useUser";
 import { addSpaceIfCamelCase, classNames } from "constants/common";
 import { STATE_LIST } from "constants/fetch-keys";
 // services
-import stateServices from "lib/services/state.services";
+import stateServices from "lib/services/state.service";
 // ui
 import { Listbox, Transition } from "@headlessui/react";
 // types
diff --git a/apps/app/components/project/memberInvitations.tsx b/apps/app/components/project/memberInvitations.tsx
index 46804695f..4ecf8e1b3 100644
--- a/apps/app/components/project/memberInvitations.tsx
+++ b/apps/app/components/project/memberInvitations.tsx
@@ -28,7 +28,7 @@ type Props = {
   slug: string;
   invitationsRespond: string[];
   handleInvitation: (project_invitation: any, action: "accepted" | "withdraw") => void;
-  setDeleteProject: React.Dispatch<React.SetStateAction<IProject | undefined>>;
+  setDeleteProject: (id: string | null) => void;
 };
 
 const ProjectMemberInvitations: React.FC<Props> = ({
@@ -100,7 +100,7 @@ const ProjectMemberInvitations: React.FC<Props> = ({
               <button
                 type="button"
                 className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none"
-                onClick={() => setDeleteProject(project)}
+                onClick={() => setDeleteProject(project.id)}
               >
                 <TrashIcon className="h-4 w-4 text-red-500" />
               </button>
diff --git a/apps/app/components/project/settings/ControlSettings.tsx b/apps/app/components/project/settings/ControlSettings.tsx
index c60ec54f0..5ee4f58ec 100644
--- a/apps/app/components/project/settings/ControlSettings.tsx
+++ b/apps/app/components/project/settings/ControlSettings.tsx
@@ -15,7 +15,7 @@ import { Button } from "ui";
 // icons
 import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
 // types
-import { IProject, WorkspaceMember } from "types";
+import { IProject } from "types";
 // fetch-keys
 import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
 
@@ -27,7 +27,7 @@ type Props = {
 const ControlSettings: React.FC<Props> = ({ control, isSubmitting }) => {
   const { activeWorkspace } = useUser();
 
-  const { data: people } = useSWR<WorkspaceMember[]>(
+  const { data: people } = useSWR(
     activeWorkspace ? WORKSPACE_MEMBERS : null,
     activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
   );
diff --git a/apps/app/components/project/settings/LabelsSettings.tsx b/apps/app/components/project/settings/LabelsSettings.tsx
index 139c005b6..f67ed1d8b 100644
--- a/apps/app/components/project/settings/LabelsSettings.tsx
+++ b/apps/app/components/project/settings/LabelsSettings.tsx
@@ -7,7 +7,7 @@ import { Controller, SubmitHandler, useForm } from "react-hook-form";
 // react-color
 import { TwitterPicker } from "react-color";
 // services
-import issuesServices from "lib/services/issues.services";
+import issuesServices from "lib/services/issues.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 // headless ui
diff --git a/apps/app/components/workspace/SendWorkspaceInvitationModal.tsx b/apps/app/components/workspace/SendWorkspaceInvitationModal.tsx
index 8b9e5d99f..5e40c3bce 100644
--- a/apps/app/components/workspace/SendWorkspaceInvitationModal.tsx
+++ b/apps/app/components/workspace/SendWorkspaceInvitationModal.tsx
@@ -14,7 +14,7 @@ import { Button, Input, TextArea, Select } from "ui";
 // hooks
 import useToast from "lib/hooks/useToast";
 // types
-import { WorkspaceMember } from "types";
+import { IWorkspaceMemberInvitation } from "types";
 
 type Props = {
   isOpen: boolean;
@@ -30,7 +30,7 @@ const ROLE = {
   20: "Admin",
 };
 
-const defaultValues: Partial<WorkspaceMember> = {
+const defaultValues: Partial<IWorkspaceMemberInvitation> = {
   email: "",
   role: 5,
   message: "",
@@ -57,7 +57,7 @@ const SendWorkspaceInvitationModal: React.FC<Props> = ({
     formState: { errors, isSubmitting },
     handleSubmit,
     reset,
-  } = useForm<WorkspaceMember>({
+  } = useForm<IWorkspaceMemberInvitation>({
     defaultValues,
     reValidateMode: "onChange",
     mode: "all",
diff --git a/apps/app/components/workspace/SingleInvitation.tsx b/apps/app/components/workspace/SingleInvitation.tsx
index 27614e984..da3483c8a 100644
--- a/apps/app/components/workspace/SingleInvitation.tsx
+++ b/apps/app/components/workspace/SingleInvitation.tsx
@@ -3,10 +3,10 @@ import Image from "next/image";
 // react
 import { useState } from "react";
 // types
-import { IWorkspaceInvitation } from "types";
+import { IWorkspaceMemberInvitation } from "types";
 
 type Props = {
-  invitation: IWorkspaceInvitation;
+  invitation: IWorkspaceMemberInvitation;
   invitationsRespond: string[];
   handleInvitation: any;
 };
diff --git a/apps/app/constants/api-routes.ts b/apps/app/constants/api-routes.ts
index cafd0fb05..fdf3d0bc7 100644
--- a/apps/app/constants/api-routes.ts
+++ b/apps/app/constants/api-routes.ts
@@ -65,6 +65,8 @@ export const PROJECT_MEMBERS = (workspaceSlug: string, projectId: string) =>
   `/api/workspaces/${workspaceSlug}/projects/${projectId}/members/`;
 export const PROJECT_MEMBER_DETAIL = (workspaceSlug: string, projectId: string, memberId: string) =>
   `/api/workspaces/${workspaceSlug}/projects/${projectId}/members/${memberId}/`;
+export const PROJECT_VIEW_ENDPOINT = (workspaceSlug: string, projectId: string) =>
+  `/api/workspaces/${workspaceSlug}/projects/${projectId}/project-views/`;
 
 export const PROJECT_INVITATIONS = (workspaceSlug: string, projectId: string) =>
   `/api/workspaces/${workspaceSlug}/projects/${projectId}/invitations/`;
diff --git a/apps/app/constants/common.ts b/apps/app/constants/common.ts
index 1937d65e3..dbc65ebcd 100644
--- a/apps/app/constants/common.ts
+++ b/apps/app/constants/common.ts
@@ -207,3 +207,12 @@ export const cosineSimilarity = (a: string, b: string) => {
 
   return dotProduct / Math.sqrt(magnitudeA * magnitudeB);
 };
+
+export const createSimilarString = (str: string) => {
+  const shuffled = str
+    .split("")
+    .sort(() => Math.random() - 0.5)
+    .join("");
+
+  return shuffled;
+};
diff --git a/apps/app/constants/fetch-keys.ts b/apps/app/constants/fetch-keys.ts
index b8dfa5618..9e3611024 100644
--- a/apps/app/constants/fetch-keys.ts
+++ b/apps/app/constants/fetch-keys.ts
@@ -7,7 +7,7 @@ export const WORKSPACE_INVITATIONS = "WORKSPACE_INVITATIONS";
 export const WORKSPACE_INVITATION = "WORKSPACE_INVITATION";
 
 export const PROJECTS_LIST = (workspaceSlug: string) => `PROJECTS_LIST_${workspaceSlug}`;
-export const PROJECT_DETAILS = "PROJECT_DETAILS";
+export const PROJECT_DETAILS = (projectId: string) => `PROJECT_DETAILS_${projectId}`;
 
 export const PROJECT_MEMBERS = (projectId: string) => `PROJECT_MEMBERS_${projectId}`;
 export const PROJECT_INVITATIONS = "PROJECT_INVITATIONS";
diff --git a/apps/app/constants/index.ts b/apps/app/constants/index.ts
index 9e319009d..603652e9f 100644
--- a/apps/app/constants/index.ts
+++ b/apps/app/constants/index.ts
@@ -6,3 +6,5 @@ export const ROLE = {
   15: "Member",
   20: "Admin",
 };
+
+export const NETWORK_CHOICES = { "0": "Secret", "2": "Public" };
diff --git a/apps/app/constants/theme.context.constants.ts b/apps/app/constants/theme.context.constants.ts
index d40e8138e..f170511ed 100644
--- a/apps/app/constants/theme.context.constants.ts
+++ b/apps/app/constants/theme.context.constants.ts
@@ -2,3 +2,5 @@ export const TOGGLE_SIDEBAR = "TOGGLE_SIDEBAR";
 export const REHYDRATE_THEME = "REHYDRATE_THEME";
 export const SET_ISSUE_VIEW = "SET_ISSUE_VIEW";
 export const SET_GROUP_BY_PROPERTY = "SET_GROUP_BY_PROPERTY";
+export const SET_ORDER_BY_PROPERTY = "SET_ORDER_BY_PROPERTY";
+export const SET_FILTER_ISSUES = "SET_FILTER_ISSUES";
diff --git a/apps/app/contexts/theme.context.tsx b/apps/app/contexts/theme.context.tsx
index 6df316ac7..bece44540 100644
--- a/apps/app/contexts/theme.context.tsx
+++ b/apps/app/contexts/theme.context.tsx
@@ -5,6 +5,8 @@ import {
   REHYDRATE_THEME,
   SET_ISSUE_VIEW,
   SET_GROUP_BY_PROPERTY,
+  SET_ORDER_BY_PROPERTY,
+  SET_FILTER_ISSUES,
 } from "constants/theme.context.constants";
 // components
 import ToastAlert from "components/toast-alert";
@@ -12,30 +14,30 @@ import ToastAlert from "components/toast-alert";
 export const themeContext = createContext<ContextType>({} as ContextType);
 
 // types
-import type { IIssue, NestedKeyOf } from "types";
-
-type Theme = {
-  collapsed: boolean;
-  issueView: "list" | "kanban" | null;
-  groupByProperty: NestedKeyOf<IIssue> | null;
-};
+import type { IIssue, NestedKeyOf, ProjectViewTheme as Theme } from "types";
 
 type ReducerActionType = {
   type:
     | typeof TOGGLE_SIDEBAR
     | typeof REHYDRATE_THEME
     | typeof SET_ISSUE_VIEW
+    | typeof SET_ORDER_BY_PROPERTY
+    | typeof SET_FILTER_ISSUES
     | typeof SET_GROUP_BY_PROPERTY;
   payload?: Partial<Theme>;
 };
 
 type ContextType = {
   collapsed: boolean;
+  orderBy: NestedKeyOf<IIssue> | null;
   issueView: "list" | "kanban" | null;
   groupByProperty: NestedKeyOf<IIssue> | null;
+  filterIssue: "activeIssue" | "backlogIssue" | null;
   toggleCollapsed: () => void;
   setIssueView: (display: "list" | "kanban") => void;
   setGroupByProperty: (property: NestedKeyOf<IIssue> | null) => void;
+  setOrderBy: (property: NestedKeyOf<IIssue> | null) => void;
+  setFilterIssue: (property: "activeIssue" | "backlogIssue" | null) => void;
 };
 
 type StateType = Theme;
@@ -45,6 +47,8 @@ export const initialState: StateType = {
   collapsed: false,
   issueView: "list",
   groupByProperty: null,
+  orderBy: null,
+  filterIssue: null,
 };
 
 export const reducer: ReducerFunctionType = (state, action) => {
@@ -87,6 +91,28 @@ export const reducer: ReducerFunctionType = (state, action) => {
         ...newState,
       };
     }
+    case SET_ORDER_BY_PROPERTY: {
+      const newState = {
+        ...state,
+        orderBy: payload?.orderBy || null,
+      };
+      localStorage.setItem("theme", JSON.stringify(newState));
+      return {
+        ...state,
+        ...newState,
+      };
+    }
+    case SET_FILTER_ISSUES: {
+      const newState = {
+        ...state,
+        filterIssue: payload?.filterIssue || null,
+      };
+      localStorage.setItem("theme", JSON.stringify(newState));
+      return {
+        ...state,
+        ...newState,
+      };
+    }
     default: {
       return state;
     }
@@ -120,6 +146,24 @@ export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({
     });
   }, []);
 
+  const setOrderBy = useCallback((property: NestedKeyOf<IIssue> | null) => {
+    dispatch({
+      type: SET_ORDER_BY_PROPERTY,
+      payload: {
+        orderBy: property,
+      },
+    });
+  }, []);
+
+  const setFilterIssue = useCallback((property: "activeIssue" | "backlogIssue" | null) => {
+    dispatch({
+      type: SET_FILTER_ISSUES,
+      payload: {
+        filterIssue: property,
+      },
+    });
+  }, []);
+
   useEffect(() => {
     dispatch({
       type: REHYDRATE_THEME,
@@ -135,6 +179,10 @@ export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({
         setIssueView,
         groupByProperty: state.groupByProperty,
         setGroupByProperty,
+        orderBy: state.orderBy,
+        setOrderBy,
+        filterIssue: state.filterIssue,
+        setFilterIssue,
       }}
     >
       <ToastAlert />
diff --git a/apps/app/contexts/user.context.tsx b/apps/app/contexts/user.context.tsx
index 6b52b0939..71f5a7ec8 100644
--- a/apps/app/contexts/user.context.tsx
+++ b/apps/app/contexts/user.context.tsx
@@ -6,9 +6,9 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 // services
 import userService from "lib/services/user.service";
-import issuesServices from "lib/services/issues.services";
-import stateServices from "lib/services/state.services";
-import sprintsServices from "lib/services/cycles.services";
+import issuesServices from "lib/services/issues.service";
+import stateServices from "lib/services/state.service";
+import sprintsServices from "lib/services/cycles.service";
 import projectServices from "lib/services/project.service";
 import workspaceService from "lib/services/workspace.service";
 // constants
diff --git a/apps/app/layouts/AppLayout.tsx b/apps/app/layouts/AppLayout.tsx
index c8bd3daa5..dbdddf0a7 100644
--- a/apps/app/layouts/AppLayout.tsx
+++ b/apps/app/layouts/AppLayout.tsx
@@ -8,7 +8,7 @@ import useUser from "lib/hooks/useUser";
 import Container from "layouts/Container";
 import Sidebar from "layouts/Navbar/Sidebar";
 // components
-import CreateProjectModal from "components/project/CreateProjectModal";
+import CreateProjectModal from "components/project/create-project-modal";
 // types
 import type { Props } from "./types";
 
diff --git a/apps/app/layouts/Navbar/Sidebar.tsx b/apps/app/layouts/Navbar/Sidebar.tsx
index 70a510ec4..9f61f9ac8 100644
--- a/apps/app/layouts/Navbar/Sidebar.tsx
+++ b/apps/app/layouts/Navbar/Sidebar.tsx
@@ -10,8 +10,6 @@ import authenticationService from "lib/services/authentication.service";
 import useUser from "lib/hooks/useUser";
 import useTheme from "lib/hooks/useTheme";
 import useToast from "lib/hooks/useToast";
-// components
-import CreateProjectModal from "components/project/CreateProjectModal";
 // headless ui
 import { Dialog, Disclosure, Menu, Transition } from "@headlessui/react";
 // icons
@@ -108,7 +106,6 @@ const userLinks = [
 
 const Sidebar: React.FC = () => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
-  const [isCreateProjectModal, setCreateProjectModal] = useState(false);
 
   const router = useRouter();
 
@@ -124,7 +121,6 @@ const Sidebar: React.FC = () => {
 
   return (
     <nav className="h-full">
-      <CreateProjectModal isOpen={isCreateProjectModal} setIsOpen={setCreateProjectModal} />
       <Transition.Root show={sidebarOpen} as={React.Fragment}>
         <Dialog as="div" className="relative z-40 md:hidden" onClose={setSidebarOpen}>
           <Transition.Child
@@ -557,7 +553,13 @@ const Sidebar: React.FC = () => {
                       <button
                         type="button"
                         className="group flex justify-center items-center gap-2 w-full rounded-md p-2 text-sm bg-theme text-white"
-                        onClick={() => setCreateProjectModal(true)}
+                        onClick={() => {
+                          const e = new KeyboardEvent("keydown", {
+                            ctrlKey: true,
+                            key: "p",
+                          });
+                          document.dispatchEvent(e);
+                        }}
                       >
                         <PlusIcon className="h-5 w-5" />
                         {!sidebarCollapse && "Create Project"}
diff --git a/apps/app/lib/hooks/useIssuesFilter.tsx b/apps/app/lib/hooks/useIssuesFilter.tsx
index 3ebf1a2c7..c598691fe 100644
--- a/apps/app/lib/hooks/useIssuesFilter.tsx
+++ b/apps/app/lib/hooks/useIssuesFilter.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 // hooks
 import useTheme from "./useTheme";
 import useUser from "./useUser";
@@ -7,14 +6,19 @@ import { groupBy, orderArrayBy } from "constants/common";
 // constants
 import { PRIORITIES } from "constants/";
 // types
-import type { IssueResponse, IIssue, NestedKeyOf } from "types";
+import type { IssueResponse, IIssue } from "types";
 
 const useIssuesFilter = (projectIssues?: IssueResponse) => {
-  const { issueView, setIssueView, groupByProperty, setGroupByProperty } = useTheme();
-
-  const [orderBy, setOrderBy] = useState<NestedKeyOf<IIssue> | null>(null);
-
-  const [filterIssue, setFilterIssue] = useState<"activeIssue" | "backlogIssue" | null>(null);
+  const {
+    issueView,
+    setIssueView,
+    groupByProperty,
+    setGroupByProperty,
+    orderBy,
+    setOrderBy,
+    filterIssue,
+    setFilterIssue,
+  } = useTheme();
 
   const { states } = useUser();
 
@@ -52,29 +56,29 @@ const useIssuesFilter = (projectIssues?: IssueResponse) => {
 
   if (filterIssue !== null) {
     if (filterIssue === "activeIssue") {
-      groupedByIssues = Object.keys(groupedByIssues).reduce((acc, key) => {
-        const value = groupedByIssues[key];
-        const filteredValue = value.filter(
-          (issue) =>
-            issue.state_detail.group === "started" || issue.state_detail.group === "unstarted"
-        );
-        if (filteredValue.length > 0) {
-          acc[key] = filteredValue;
-        }
-        return acc;
-      }, {} as typeof groupedByIssues);
+      const filteredStates = states?.filter(
+        (state) => state.group === "started" || state.group === "unstarted"
+      );
+      groupedByIssues = Object.fromEntries(
+        filteredStates
+          ?.sort((a, b) => a.sequence - b.sequence)
+          ?.map((state) => [
+            state.name,
+            projectIssues?.results.filter((issue) => issue.state === state.id) ?? [],
+          ]) ?? []
+      );
     } else if (filterIssue === "backlogIssue") {
-      groupedByIssues = Object.keys(groupedByIssues).reduce((acc, key) => {
-        const value = groupedByIssues[key];
-        const filteredValue = value.filter(
-          (issue) =>
-            issue.state_detail.group === "backlog" || issue.state_detail.group === "cancelled"
-        );
-        if (filteredValue.length > 0) {
-          acc[key] = filteredValue;
-        }
-        return acc;
-      }, {} as typeof groupedByIssues);
+      const filteredStates = states?.filter(
+        (state) => state.group === "backlog" || state.group === "cancelled"
+      );
+      groupedByIssues = Object.fromEntries(
+        filteredStates
+          ?.sort((a, b) => a.sequence - b.sequence)
+          ?.map((state) => [
+            state.name,
+            projectIssues?.results.filter((issue) => issue.state === state.id) ?? [],
+          ]) ?? []
+      );
     }
   }
 
diff --git a/apps/app/lib/hooks/useIssuesProperties.tsx b/apps/app/lib/hooks/useIssuesProperties.tsx
index 068af7a79..ccd94e6b6 100644
--- a/apps/app/lib/hooks/useIssuesProperties.tsx
+++ b/apps/app/lib/hooks/useIssuesProperties.tsx
@@ -4,7 +4,7 @@ import useSWR from "swr";
 // api routes
 import { ISSUE_PROPERTIES_ENDPOINT } from "constants/api-routes";
 // services
-import issueServices from "lib/services/issues.services";
+import issueServices from "lib/services/issues.service";
 // hooks
 import useUser from "./useUser";
 // types
diff --git a/apps/app/lib/services/cycles.services.ts b/apps/app/lib/services/cycles.service.ts
similarity index 100%
rename from apps/app/lib/services/cycles.services.ts
rename to apps/app/lib/services/cycles.service.ts
diff --git a/apps/app/lib/services/file.services.ts b/apps/app/lib/services/file.service.ts
similarity index 100%
rename from apps/app/lib/services/file.services.ts
rename to apps/app/lib/services/file.service.ts
diff --git a/apps/app/lib/services/issues.services.ts b/apps/app/lib/services/issues.service.ts
similarity index 100%
rename from apps/app/lib/services/issues.services.ts
rename to apps/app/lib/services/issues.service.ts
diff --git a/apps/app/lib/services/project.service.ts b/apps/app/lib/services/project.service.ts
index 9d0ab3d04..01de73ddf 100644
--- a/apps/app/lib/services/project.service.ts
+++ b/apps/app/lib/services/project.service.ts
@@ -10,9 +10,12 @@ import {
   PROJECT_MEMBERS,
   PROJECT_MEMBER_DETAIL,
   USER_PROJECT_INVITATIONS,
+  PROJECT_VIEW_ENDPOINT,
 } from "constants/api-routes";
 // services
 import APIService from "lib/services/api.service";
+// types
+import type { IProject, IProjectMember, IProjectMemberInvitation, ProjectViewTheme } from "types";
 
 const { NEXT_PUBLIC_API_BASE_URL } = process.env;
 
@@ -21,8 +24,8 @@ class ProjectServices extends APIService {
     super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
   }
 
-  async createProject(workspace_slug: string, data: any): Promise<any> {
-    return this.post(PROJECTS_ENDPOINT(workspace_slug), data)
+  async createProject(workspacSlug: string, data: Partial<IProject>): Promise<IProject> {
+    return this.post(PROJECTS_ENDPOINT(workspacSlug), data)
       .then((response) => {
         return response?.data;
       })
@@ -45,8 +48,8 @@ class ProjectServices extends APIService {
       });
   }
 
-  async getProjects(workspace_slug: string): Promise<any> {
-    return this.get(PROJECTS_ENDPOINT(workspace_slug))
+  async getProjects(workspacSlug: string): Promise<IProject[]> {
+    return this.get(PROJECTS_ENDPOINT(workspacSlug))
       .then((response) => {
         return response?.data;
       })
@@ -55,8 +58,8 @@ class ProjectServices extends APIService {
       });
   }
 
-  async getProject(workspace_slug: string, project_id: string): Promise<any> {
-    return this.get(PROJECT_DETAIL(workspace_slug, project_id))
+  async getProject(workspacSlug: string, projectId: string): Promise<IProject> {
+    return this.get(PROJECT_DETAIL(workspacSlug, projectId))
       .then((response) => {
         return response?.data;
       })
@@ -65,8 +68,12 @@ class ProjectServices extends APIService {
       });
   }
 
-  async updateProject(workspace_slug: string, project_id: string, data: any): Promise<any> {
-    return this.patch(PROJECT_DETAIL(workspace_slug, project_id), data)
+  async updateProject(
+    workspacSlug: string,
+    projectId: string,
+    data: Partial<IProject>
+  ): Promise<IProject> {
+    return this.patch(PROJECT_DETAIL(workspacSlug, projectId), data)
       .then((response) => {
         return response?.data;
       })
@@ -75,8 +82,8 @@ class ProjectServices extends APIService {
       });
   }
 
-  async deleteProject(workspace_slug: string, project_id: string): Promise<any> {
-    return this.delete(PROJECT_DETAIL(workspace_slug, project_id))
+  async deleteProject(workspacSlug: string, projectId: string): Promise<any> {
+    return this.delete(PROJECT_DETAIL(workspacSlug, projectId))
       .then((response) => {
         return response?.data;
       })
@@ -85,8 +92,8 @@ class ProjectServices extends APIService {
       });
   }
 
-  async inviteProject(workspace_slug: string, project_id: string, data: any): Promise<any> {
-    return this.post(INVITE_PROJECT(workspace_slug, project_id), data)
+  async inviteProject(workspacSlug: string, projectId: string, data: any): Promise<any> {
+    return this.post(INVITE_PROJECT(workspacSlug, projectId), data)
       .then((response) => {
         return response?.data;
       })
@@ -95,8 +102,8 @@ class ProjectServices extends APIService {
       });
   }
 
-  async joinProject(workspace_slug: string, data: any): Promise<any> {
-    return this.post(JOIN_PROJECT(workspace_slug), data)
+  async joinProject(workspacSlug: string, data: any): Promise<any> {
+    return this.post(JOIN_PROJECT(workspacSlug), data)
       .then((response) => {
         return response?.data;
       })
@@ -115,8 +122,8 @@ class ProjectServices extends APIService {
       });
   }
 
-  async projectMembers(workspace_slug: string, project_id: string): Promise<any> {
-    return this.get(PROJECT_MEMBERS(workspace_slug, project_id))
+  async projectMembers(workspacSlug: string, projectId: string): Promise<IProjectMember[]> {
+    return this.get(PROJECT_MEMBERS(workspacSlug, projectId))
       .then((response) => {
         return response?.data;
       })
@@ -126,12 +133,12 @@ class ProjectServices extends APIService {
   }
 
   async updateProjectMember(
-    workspace_slug: string,
-    project_id: string,
+    workspacSlug: string,
+    projectId: string,
     memberId: string,
-    data: any
-  ): Promise<any> {
-    return this.put(PROJECT_MEMBER_DETAIL(workspace_slug, project_id, memberId), data)
+    data: Partial<IProjectMember>
+  ): Promise<IProjectMember> {
+    return this.put(PROJECT_MEMBER_DETAIL(workspacSlug, projectId, memberId), data)
       .then((response) => {
         return response?.data;
       })
@@ -141,11 +148,11 @@ class ProjectServices extends APIService {
   }
 
   async deleteProjectMember(
-    workspace_slug: string,
-    project_id: string,
+    workspacSlug: string,
+    projectId: string,
     memberId: string
   ): Promise<any> {
-    return this.delete(PROJECT_MEMBER_DETAIL(workspace_slug, project_id, memberId))
+    return this.delete(PROJECT_MEMBER_DETAIL(workspacSlug, projectId, memberId))
       .then((response) => {
         return response?.data;
       })
@@ -154,8 +161,11 @@ class ProjectServices extends APIService {
       });
   }
 
-  async projectInvitations(workspace_slug: string, project_id: string): Promise<any> {
-    return this.get(PROJECT_INVITATIONS(workspace_slug, project_id))
+  async projectInvitations(
+    workspacSlug: string,
+    projectId: string
+  ): Promise<IProjectMemberInvitation[]> {
+    return this.get(PROJECT_INVITATIONS(workspacSlug, projectId))
       .then((response) => {
         return response?.data;
       })
@@ -165,11 +175,11 @@ class ProjectServices extends APIService {
   }
 
   async updateProjectInvitation(
-    workspace_slug: string,
-    project_id: string,
-    invitation_id: string
+    workspacSlug: string,
+    projectId: string,
+    invitationId: string
   ): Promise<any> {
-    return this.put(PROJECT_INVITATION_DETAIL(workspace_slug, project_id, invitation_id))
+    return this.put(PROJECT_INVITATION_DETAIL(workspacSlug, projectId, invitationId))
       .then((response) => {
         return response?.data;
       })
@@ -177,12 +187,27 @@ class ProjectServices extends APIService {
         throw error?.response?.data;
       });
   }
+
   async deleteProjectInvitation(
-    workspace_slug: string,
-    project_id: string,
-    invitation_id: string
+    workspacSlug: string,
+    projectId: string,
+    invitationId: string
   ): Promise<any> {
-    return this.delete(PROJECT_INVITATION_DETAIL(workspace_slug, project_id, invitation_id))
+    return this.delete(PROJECT_INVITATION_DETAIL(workspacSlug, projectId, invitationId))
+      .then((response) => {
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async setProjectView(
+    workspacSlug: string,
+    projectId: string,
+    data: ProjectViewTheme
+  ): Promise<any> {
+    await this.patch(PROJECT_VIEW_ENDPOINT(workspacSlug, projectId), data)
       .then((response) => {
         return response?.data;
       })
diff --git a/apps/app/lib/services/state.services.ts b/apps/app/lib/services/state.service.ts
similarity index 100%
rename from apps/app/lib/services/state.services.ts
rename to apps/app/lib/services/state.service.ts
diff --git a/apps/app/lib/services/workspace.service.ts b/apps/app/lib/services/workspace.service.ts
index 04c158fd7..5d8e041d2 100644
--- a/apps/app/lib/services/workspace.service.ts
+++ b/apps/app/lib/services/workspace.service.ts
@@ -17,12 +17,15 @@ import APIService from "lib/services/api.service";
 
 const { NEXT_PUBLIC_API_BASE_URL } = process.env;
 
+// types
+import { IWorkspace, IWorkspaceMember, IWorkspaceMemberInvitation } from "types";
+
 class WorkspaceService extends APIService {
   constructor() {
     super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
   }
 
-  async userWorkspaces(): Promise<any> {
+  async userWorkspaces(): Promise<IWorkspace[]> {
     return this.get(USER_WORKSPACES)
       .then((response) => {
         return response?.data;
@@ -32,7 +35,7 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async createWorkspace(data: any): Promise<any> {
+  async createWorkspace(data: Partial<IWorkspace>): Promise<IWorkspace> {
     return this.post(WORKSPACES_ENDPOINT, data)
       .then((response) => {
         return response?.data;
@@ -42,17 +45,8 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async updateWorkspace(workspace_slug: string, data: any): Promise<any> {
-    return this.patch(WORKSPACE_DETAIL(workspace_slug), data)
-      .then((response) => {
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-  async deleteWorkspace(workspace_slug: string): Promise<any> {
-    return this.delete(WORKSPACE_DETAIL(workspace_slug))
+  async updateWorkspace(workspaceSlug: string, data: Partial<IWorkspace>): Promise<IWorkspace> {
+    return this.patch(WORKSPACE_DETAIL(workspaceSlug), data)
       .then((response) => {
         return response?.data;
       })
@@ -61,8 +55,8 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async inviteWorkspace(workspace_slug: string, data: any): Promise<any> {
-    return this.post(INVITE_WORKSPACE(workspace_slug), data)
+  async deleteWorkspace(workspaceSlug: string): Promise<any> {
+    return this.delete(WORKSPACE_DETAIL(workspaceSlug))
       .then((response) => {
         return response?.data;
       })
@@ -70,8 +64,19 @@ class WorkspaceService extends APIService {
         throw error?.response?.data;
       });
   }
-  async joinWorkspace(workspace_slug: string, InvitationId: string, data: any): Promise<any> {
-    return this.post(JOIN_WORKSPACE(workspace_slug, InvitationId), data, {
+
+  async inviteWorkspace(workspaceSlug: string, data: any): Promise<any> {
+    return this.post(INVITE_WORKSPACE(workspaceSlug), data)
+      .then((response) => {
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async joinWorkspace(workspaceSlug: string, InvitationId: string, data: any): Promise<any> {
+    return this.post(JOIN_WORKSPACE(workspaceSlug, InvitationId), data, {
       headers: {},
     })
       .then((response) => {
@@ -92,7 +97,7 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async userWorkspaceInvitations(): Promise<any> {
+  async userWorkspaceInvitations(): Promise<IWorkspaceMemberInvitation[]> {
     return this.get(USER_WORKSPACE_INVITATIONS)
       .then((response) => {
         return response?.data;
@@ -102,8 +107,8 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async workspaceMembers(workspace_slug: string): Promise<any> {
-    return this.get(WORKSPACE_MEMBERS(workspace_slug))
+  async workspaceMembers(workspaceSlug: string): Promise<IWorkspaceMember[]> {
+    return this.get(WORKSPACE_MEMBERS(workspaceSlug))
       .then((response) => {
         return response?.data;
       })
@@ -112,8 +117,12 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async updateWorkspaceMember(workspace_slug: string, memberId: string, data: any): Promise<any> {
-    return this.put(WORKSPACE_MEMBER_DETAIL(workspace_slug, memberId), data)
+  async updateWorkspaceMember(
+    workspaceSlug: string,
+    memberId: string,
+    data: Partial<IWorkspaceMember>
+  ): Promise<IWorkspaceMember> {
+    return this.put(WORKSPACE_MEMBER_DETAIL(workspaceSlug, memberId), data)
       .then((response) => {
         return response?.data;
       })
@@ -122,8 +131,8 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async deleteWorkspaceMember(workspace_slug: string, memberId: string): Promise<any> {
-    return this.delete(WORKSPACE_MEMBER_DETAIL(workspace_slug, memberId))
+  async deleteWorkspaceMember(workspaceSlug: string, memberId: string): Promise<any> {
+    return this.delete(WORKSPACE_MEMBER_DETAIL(workspaceSlug, memberId))
       .then((response) => {
         return response?.data;
       })
@@ -132,8 +141,8 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async workspaceInvitations(workspace_slug: string): Promise<any> {
-    return this.get(WORKSPACE_INVITATIONS(workspace_slug))
+  async workspaceInvitations(workspaceSlug: string): Promise<IWorkspaceMemberInvitation[]> {
+    return this.get(WORKSPACE_INVITATIONS(workspaceSlug))
       .then((response) => {
         return response?.data;
       })
@@ -142,8 +151,8 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async getWorkspaceInvitation(invitation_id: string): Promise<any> {
-    return this.get(USER_WORKSPACE_INVITATION(invitation_id), { headers: {} })
+  async getWorkspaceInvitation(invitationId: string): Promise<IWorkspaceMemberInvitation> {
+    return this.get(USER_WORKSPACE_INVITATION(invitationId), { headers: {} })
       .then((response) => {
         return response?.data;
       })
@@ -152,8 +161,11 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async updateWorkspaceInvitation(workspace_slug: string, invitation_id: string): Promise<any> {
-    return this.put(WORKSPACE_INVITATION_DETAIL(workspace_slug, invitation_id))
+  async updateWorkspaceInvitation(
+    workspaceSlug: string,
+    invitationId: string
+  ): Promise<IWorkspaceMemberInvitation> {
+    return this.put(WORKSPACE_INVITATION_DETAIL(workspaceSlug, invitationId))
       .then((response) => {
         return response?.data;
       })
@@ -161,8 +173,9 @@ class WorkspaceService extends APIService {
         throw error?.response?.data;
       });
   }
-  async deleteWorkspaceInvitations(workspace_slug: string, invitation_id: string): Promise<any> {
-    return this.delete(WORKSPACE_INVITATION_DETAIL(workspace_slug, invitation_id))
+
+  async deleteWorkspaceInvitations(workspaceSlug: string, invitationId: string): Promise<any> {
+    return this.delete(WORKSPACE_INVITATION_DETAIL(workspaceSlug, invitationId))
       .then((response) => {
         return response?.data;
       })
diff --git a/apps/app/pages/create-workspace.tsx b/apps/app/pages/create-workspace.tsx
index 1c5e8dc3e..e996372b6 100644
--- a/apps/app/pages/create-workspace.tsx
+++ b/apps/app/pages/create-workspace.tsx
@@ -8,6 +8,8 @@ import { useForm } from "react-hook-form";
 import workspaceService from "lib/services/workspace.service";
 // hooks
 import useUser from "lib/hooks/useUser";
+// hoc
+import withAuth from "lib/hoc/withAuthWrapper";
 // layouts
 import DefaultLayout from "layouts/DefaultLayout";
 // ui
@@ -144,4 +146,4 @@ const CreateWorkspace: NextPage = () => {
   );
 };
 
-export default CreateWorkspace;
+export default withAuth(CreateWorkspace);
diff --git a/apps/app/pages/invitations.tsx b/apps/app/pages/invitations.tsx
index 25bb7d324..1f1947c16 100644
--- a/apps/app/pages/invitations.tsx
+++ b/apps/app/pages/invitations.tsx
@@ -11,6 +11,8 @@ import userService from "lib/services/user.service";
 import useUser from "lib/hooks/useUser";
 // constants
 import { USER_WORKSPACE_INVITATIONS } from "constants/api-routes";
+// hoc
+import withAuth from "lib/hoc/withAuthWrapper";
 // layouts
 import DefaultLayout from "layouts/DefaultLayout";
 // components
@@ -20,7 +22,7 @@ import { Button, Spinner, EmptySpace, EmptySpaceItem } from "ui";
 // icons
 import { CubeIcon, PlusIcon } from "@heroicons/react/24/outline";
 // types
-import type { IWorkspaceInvitation } from "types";
+import type { IWorkspaceMemberInvitation } from "types";
 import Link from "next/link";
 
 const OnBoard: NextPage = () => {
@@ -30,13 +32,12 @@ const OnBoard: NextPage = () => {
 
   const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
 
-  const { data: invitations, mutate } = useSWR<IWorkspaceInvitation[]>(
-    USER_WORKSPACE_INVITATIONS,
-    () => workspaceService.userWorkspaceInvitations()
+  const { data: invitations, mutate } = useSWR(USER_WORKSPACE_INVITATIONS, () =>
+    workspaceService.userWorkspaceInvitations()
   );
 
   const handleInvitation = (
-    workspace_invitation: IWorkspaceInvitation,
+    workspace_invitation: IWorkspaceMemberInvitation,
     action: "accepted" | "withdraw"
   ) => {
     if (action === "accepted") {
@@ -204,4 +205,4 @@ const OnBoard: NextPage = () => {
   );
 };
 
-export default OnBoard;
+export default withAuth(OnBoard);
diff --git a/apps/app/pages/me/my-issues.tsx b/apps/app/pages/me/my-issues.tsx
index dc4b74033..444b0f342 100644
--- a/apps/app/pages/me/my-issues.tsx
+++ b/apps/app/pages/me/my-issues.tsx
@@ -18,7 +18,9 @@ import { USER_ISSUE } from "constants/fetch-keys";
 import { classNames } from "constants/common";
 // services
 import userService from "lib/services/user.service";
-import issuesServices from "lib/services/issues.services";
+import issuesServices from "lib/services/issues.service";
+// hoc
+import withAuth from "lib/hoc/withAuthWrapper";
 // components
 import ChangeStateDropdown from "components/project/issues/my-issues/ChangeStateDropdown";
 // icons
@@ -278,4 +280,4 @@ const MyIssues: NextPage = () => {
   );
 };
 
-export default MyIssues;
+export default withAuth(MyIssues);
diff --git a/apps/app/pages/me/profile.tsx b/apps/app/pages/me/profile.tsx
index 3998d628a..b161f2696 100644
--- a/apps/app/pages/me/profile.tsx
+++ b/apps/app/pages/me/profile.tsx
@@ -8,15 +8,17 @@ import { useForm } from "react-hook-form";
 import Dropzone, { useDropzone } from "react-dropzone";
 // hooks
 import useUser from "lib/hooks/useUser";
+// hoc
+import withAuth from "lib/hoc/withAuthWrapper";
 // layouts
 import AppLayout from "layouts/AppLayout";
 // services
 import userService from "lib/services/user.service";
-import fileServices from "lib/services/file.services";
+import fileServices from "lib/services/file.service";
 // ui
 import { BreadcrumbItem, Breadcrumbs, Button, Input, Spinner } from "ui";
 // types
-import type { IIssue, IUser, IWorkspaceInvitation } from "types";
+import type { IIssue, IUser, IWorkspaceMemberInvitation } from "types";
 import {
   ChevronRightIcon,
   ClipboardDocumentListIcon,
@@ -79,8 +81,9 @@ const Profile: NextPage = () => {
     myProfile ? () => userService.userIssues() : null
   );
 
-  const { data: invitations } = useSWR<IWorkspaceInvitation[]>(USER_WORKSPACE_INVITATIONS, () =>
-    workspaceService.userWorkspaceInvitations()
+  const { data: invitations } = useSWR<IWorkspaceMemberInvitation[]>(
+    USER_WORKSPACE_INVITATIONS,
+    () => workspaceService.userWorkspaceInvitations()
   );
 
   useEffect(() => {
@@ -307,4 +310,4 @@ const Profile: NextPage = () => {
   );
 };
 
-export default Profile;
+export default withAuth(Profile);
diff --git a/apps/app/pages/projects/[projectId]/cycles.tsx b/apps/app/pages/projects/[projectId]/cycles.tsx
index 9afacd9ff..729bd3bb4 100644
--- a/apps/app/pages/projects/[projectId]/cycles.tsx
+++ b/apps/app/pages/projects/[projectId]/cycles.tsx
@@ -5,12 +5,14 @@ import type { NextPage } from "next";
 // swr
 import useSWR, { mutate } from "swr";
 // services
-import issuesServices from "lib/services/issues.services";
-import sprintService from "lib/services/cycles.services";
+import issuesServices from "lib/services/issues.service";
+import sprintService from "lib/services/cycles.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 // fetching keys
 import { CYCLE_ISSUES, CYCLE_LIST } from "constants/fetch-keys";
+// hoc
+import withAuth from "lib/hoc/withAuthWrapper";
 // layouts
 import AppLayout from "layouts/AppLayout";
 // components
@@ -258,4 +260,4 @@ const ProjectSprints: NextPage = () => {
   );
 };
 
-export default ProjectSprints;
+export default withAuth(ProjectSprints);
diff --git a/apps/app/pages/projects/[projectId]/issues/[issueId].tsx b/apps/app/pages/projects/[projectId]/issues/[issueId].tsx
index 8ffdfda8a..74dcc8dce 100644
--- a/apps/app/pages/projects/[projectId]/issues/[issueId].tsx
+++ b/apps/app/pages/projects/[projectId]/issues/[issueId].tsx
@@ -11,7 +11,7 @@ import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { Disclosure, Menu, Tab, Transition } from "@headlessui/react";
 // services
-import issuesServices from "lib/services/issues.services";
+import issuesServices from "lib/services/issues.service";
 // fetch keys
 import {
   PROJECT_ISSUES_ACTIVITY,
@@ -21,6 +21,8 @@ import {
 } from "constants/fetch-keys";
 // hooks
 import useUser from "lib/hooks/useUser";
+// hoc
+import withAuth from "lib/hoc/withAuthWrapper";
 // layouts
 import AppLayout from "layouts/AppLayout";
 // components
@@ -606,4 +608,4 @@ const IssueDetail: NextPage = () => {
   );
 };
 
-export default IssueDetail;
+export default withAuth(IssueDetail);
diff --git a/apps/app/pages/projects/[projectId]/issues/index.tsx b/apps/app/pages/projects/[projectId]/issues/index.tsx
index eb13433e5..cfdb6d430 100644
--- a/apps/app/pages/projects/[projectId]/issues/index.tsx
+++ b/apps/app/pages/projects/[projectId]/issues/index.tsx
@@ -34,7 +34,7 @@ import HeaderButton from "ui/HeaderButton";
 import { ChevronDownIcon, ListBulletIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
 import { PlusIcon, Squares2X2Icon } from "@heroicons/react/20/solid";
 // types
-import type { IIssue, Properties, NestedKeyOf, ProjectMember } from "types";
+import type { IIssue, Properties, NestedKeyOf } from "types";
 
 const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
   { name: "State", key: "state_detail.name" },
@@ -86,7 +86,7 @@ const ProjectIssues: NextPage = () => {
     projectId as string
   );
 
-  const { data: members } = useSWR<ProjectMember[]>(
+  const { data: members } = useSWR(
     activeWorkspace && activeProject
       ? PROJECT_MEMBERS(activeWorkspace.slug, activeProject.id)
       : null,
diff --git a/apps/app/pages/projects/[projectId]/members.tsx b/apps/app/pages/projects/[projectId]/members.tsx
index 3ad7f03f4..4682ff79b 100644
--- a/apps/app/pages/projects/[projectId]/members.tsx
+++ b/apps/app/pages/projects/[projectId]/members.tsx
@@ -14,6 +14,8 @@ import useUser from "lib/hooks/useUser";
 import useToast from "lib/hooks/useToast";
 // fetching keys
 import { PROJECT_MEMBERS, PROJECT_INVITATIONS } from "constants/fetch-keys";
+// hoc
+import withAuth from "lib/hoc/withAuthWrapper";
 // layouts
 import AppLayout from "layouts/AppLayout";
 // components
@@ -109,8 +111,7 @@ const ProjectMembers: NextPage = () => {
               selectedRemoveMember
             );
             mutateMembers(
-              (prevData: any[]) =>
-                prevData?.filter((item: any) => item.id !== selectedRemoveMember),
+              (prevData) => prevData?.filter((item: any) => item.id !== selectedRemoveMember),
               false
             );
           }
@@ -121,8 +122,7 @@ const ProjectMembers: NextPage = () => {
               selectedInviteRemoveMember
             );
             mutateInvitations(
-              (prevData: any[]) =>
-                prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember),
+              (prevData) => prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember),
               false
             );
           }
@@ -313,4 +313,4 @@ const ProjectMembers: NextPage = () => {
   );
 };
 
-export default ProjectMembers;
+export default withAuth(ProjectMembers);
diff --git a/apps/app/pages/projects/[projectId]/settings.tsx b/apps/app/pages/projects/[projectId]/settings.tsx
index 7a13dec8a..693fdcf40 100644
--- a/apps/app/pages/projects/[projectId]/settings.tsx
+++ b/apps/app/pages/projects/[projectId]/settings.tsx
@@ -9,6 +9,8 @@ import useSWR, { mutate } from "swr";
 import { useForm } from "react-hook-form";
 // headless ui
 import { Tab } from "@headlessui/react";
+// hoc
+import withAuth from "lib/hoc/withAuthWrapper";
 // layouts
 import AppLayout from "layouts/AppLayout";
 // service
@@ -27,9 +29,12 @@ import type { IProject, IWorkspace } from "types";
 const defaultValues: Partial<IProject> = {
   name: "",
   description: "",
+  identifier: "",
+  network: 0,
 };
 
 const ProjectSettings: NextPage = () => {
+  // FIXME: instead of using dynamic import inside component use it outside
   const GeneralSettings = dynamic(() => import("components/project/settings/GeneralSettings"), {
     loading: () => <p>Loading...</p>,
     ssr: false,
@@ -70,7 +75,7 @@ const ProjectSettings: NextPage = () => {
   const { setToastAlert } = useToast();
 
   const { data: projectDetails } = useSWR<IProject>(
-    activeWorkspace && projectId ? PROJECT_DETAILS : null,
+    activeWorkspace && projectId ? PROJECT_DETAILS(projectId as string) : null,
     activeWorkspace
       ? () => projectServices.getProject(activeWorkspace.slug, projectId as string)
       : null
@@ -87,7 +92,7 @@ const ProjectSettings: NextPage = () => {
   }, [projectDetails, reset]);
 
   const onSubmit = async (formData: IProject) => {
-    if (!activeWorkspace) return;
+    if (!activeWorkspace || !projectId) return;
     const payload: Partial<IProject> = {
       name: formData.name,
       network: formData.network,
@@ -99,7 +104,11 @@ const ProjectSettings: NextPage = () => {
     await projectServices
       .updateProject(activeWorkspace.slug, projectId as string, payload)
       .then((res) => {
-        mutate<IProject>(PROJECT_DETAILS, (prevData) => ({ ...prevData, ...res }), false);
+        mutate<IProject>(
+          PROJECT_DETAILS(projectId as string),
+          (prevData) => ({ ...prevData, ...res }),
+          false
+        );
         mutate<IProject[]>(
           PROJECTS_LIST(activeWorkspace.slug),
           (prevData) => {
@@ -181,4 +190,4 @@ const ProjectSettings: NextPage = () => {
   );
 };
 
-export default ProjectSettings;
+export default withAuth(ProjectSettings);
diff --git a/apps/app/pages/projects/index.tsx b/apps/app/pages/projects/index.tsx
index b4ed3c4d3..cb1b29ac6 100644
--- a/apps/app/pages/projects/index.tsx
+++ b/apps/app/pages/projects/index.tsx
@@ -1,28 +1,32 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 // next
 import type { NextPage } from "next";
 // hooks
 import useUser from "lib/hooks/useUser";
+// hoc
+import withAuth from "lib/hoc/withAuthWrapper";
 // layouts
 import AppLayout from "layouts/AppLayout";
 // components
-import CreateProjectModal from "components/project/CreateProjectModal";
-import ConfirmProjectDeletion from "components/project/ConfirmProjectDeletion";
+import ProjectMemberInvitations from "components/project/memberInvitations";
+import ConfirmProjectDeletion from "components/project/confirm-project-deletion";
 // ui
-import { Button, Spinner } from "ui";
-// types
-import { IProject } from "types";
+import {
+  Button,
+  Spinner,
+  HeaderButton,
+  Breadcrumbs,
+  BreadcrumbItem,
+  EmptySpace,
+  EmptySpaceItem,
+} from "ui";
 // services
 import projectService from "lib/services/project.service";
-import ProjectMemberInvitations from "components/project/memberInvitations";
+// icons
 import { ClipboardDocumentListIcon, PlusIcon } from "@heroicons/react/24/outline";
-import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
-import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace";
-import HeaderButton from "ui/HeaderButton";
 
 const Projects: NextPage = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [deleteProject, setDeleteProject] = useState<IProject | undefined>();
+  const [deleteProject, setDeleteProject] = useState<string | null>(null);
   const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
 
   const { projects, activeWorkspace, mutateProjects } = useUser();
@@ -52,21 +56,12 @@ const Projects: NextPage = () => {
       });
   };
 
-  useEffect(() => {
-    if (isOpen) return;
-    const timer = setTimeout(() => {
-      setDeleteProject(undefined);
-      clearTimeout(timer);
-    }, 300);
-  }, [isOpen]);
-
   return (
     <AppLayout>
-      <CreateProjectModal isOpen={isOpen && !deleteProject} setIsOpen={setIsOpen} />
       <ConfirmProjectDeletion
-        isOpen={isOpen && !!deleteProject}
-        setIsOpen={setIsOpen}
-        data={deleteProject}
+        isOpen={!!deleteProject}
+        onClose={() => setDeleteProject(null)}
+        data={projects?.find((item) => item.id === deleteProject) ?? null}
       />
       {projects ? (
         <>
@@ -87,7 +82,10 @@ const Projects: NextPage = () => {
                     </span>
                   }
                   Icon={PlusIcon}
-                  action={() => setIsOpen(true)}
+                  action={() => {
+                    const e = new KeyboardEvent("keydown", { key: "p", ctrlKey: true });
+                    document.dispatchEvent(e);
+                  }}
                 />
               </EmptySpace>
             </div>
@@ -98,7 +96,14 @@ const Projects: NextPage = () => {
               </Breadcrumbs>
               <div className="flex items-center justify-between cursor-pointer w-full">
                 <h2 className="text-2xl font-medium">Projects</h2>
-                <HeaderButton Icon={PlusIcon} label="Add Project" onClick={() => setIsOpen(true)} />
+                <HeaderButton
+                  Icon={PlusIcon}
+                  label="Add Project"
+                  onClick={() => {
+                    const e = new KeyboardEvent("keydown", { key: "p", ctrlKey: true });
+                    document.dispatchEvent(e);
+                  }}
+                />
               </div>
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                 {projects.map((item) => (
@@ -129,4 +134,4 @@ const Projects: NextPage = () => {
   );
 };
 
-export default Projects;
+export default withAuth(Projects);
diff --git a/apps/app/pages/workspace-member-invitation/[invitationId].tsx b/apps/app/pages/workspace-member-invitation/[invitationId].tsx
index 9de2fb98d..20c50b203 100644
--- a/apps/app/pages/workspace-member-invitation/[invitationId].tsx
+++ b/apps/app/pages/workspace-member-invitation/[invitationId].tsx
@@ -35,12 +35,12 @@ const WorkspaceInvitation: NextPage = () => {
 
   const { user } = useUser();
 
-  const { data: invitationDetail, error } = useSWR(
-    invitationId && WORKSPACE_INVITATION,
-    () => invitationId && workspaceService.getWorkspaceInvitation(invitationId as string)
+  const { data: invitationDetail, error } = useSWR(invitationId && WORKSPACE_INVITATION, () =>
+    invitationId ? workspaceService.getWorkspaceInvitation(invitationId as string) : null
   );
 
   const handleAccept = () => {
+    if (!invitationDetail) return;
     workspaceService
       .joinWorkspace(invitationDetail.workspace.slug, invitationDetail.id, {
         accepted: true,
diff --git a/apps/app/pages/workspace/settings.tsx b/apps/app/pages/workspace/settings.tsx
index fb30543e5..6c849689c 100644
--- a/apps/app/pages/workspace/settings.tsx
+++ b/apps/app/pages/workspace/settings.tsx
@@ -7,7 +7,9 @@ import { useForm } from "react-hook-form";
 import Dropzone from "react-dropzone";
 // services
 import workspaceService from "lib/services/workspace.service";
-import fileServices from "lib/services/file.services";
+import fileServices from "lib/services/file.service";
+// hoc
+import withAuth from "lib/hoc/withAuthWrapper";
 // layouts
 import AppLayout from "layouts/AppLayout";
 
@@ -232,4 +234,4 @@ const WorkspaceSettings = () => {
   );
 };
 
-export default WorkspaceSettings;
+export default withAuth(WorkspaceSettings);
diff --git a/apps/app/types/invitation.d.ts b/apps/app/types/invitation.d.ts
deleted file mode 100644
index 52ffa3627..000000000
--- a/apps/app/types/invitation.d.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { IWorkspace } from "./";
-
-export interface IWorkspaceInvitation {
-  id: string;
-  workspace: IWorkspace;
-  created_at: Date;
-  updated_at: Date;
-  email: string;
-  accepted: boolean;
-  token: string;
-  message: string;
-  responded_at: Date;
-  role: number;
-  created_by: null;
-  updated_by: null;
-}
diff --git a/apps/app/types/projects.d.ts b/apps/app/types/projects.d.ts
index da80eec29..002c30b55 100644
--- a/apps/app/types/projects.d.ts
+++ b/apps/app/types/projects.d.ts
@@ -1,4 +1,4 @@
-import type { IWorkspace } from "./";
+import type { IUserLite, IWorkspace } from "./";
 
 export interface IProject {
   id: string;
@@ -15,3 +15,44 @@ export interface IProject {
   created_by: string;
   updated_by: string;
 }
+
+type ProjectViewTheme = {
+  collapsed: boolean;
+  issueView: "list" | "kanban" | null;
+  groupByProperty: NestedKeyOf<IIssue> | null;
+  filterIssue: "activeIssue" | "backlogIssue" | null;
+  orderBy: NestedKeyOf<IIssue> | null;
+};
+
+export interface IProjectMember {
+  member: IUserLite;
+  project: IProject;
+  workspace: IWorkspace;
+  comment: string;
+  role: 5 | 10 | 15 | 20;
+  view_props: ProjectViewTheme;
+
+  created_at: Date;
+  updated_at: Date;
+  created_by: string;
+  updated_by: string;
+}
+
+export interface IProjectMemberInvitation {
+  id: string;
+
+  project: IProject;
+  workspace: IWorkspace;
+
+  email: string;
+  accepted: boolean;
+  token: string;
+  message: string;
+  responded_at: Date;
+  role: 5 | 10 | 15 | 20;
+
+  created_at: Date;
+  updated_at: Date;
+  created_by: string;
+  updated_by: string;
+}
diff --git a/apps/app/types/users.d.ts b/apps/app/types/users.d.ts
index 52007f645..9f6220459 100644
--- a/apps/app/types/users.d.ts
+++ b/apps/app/types/users.d.ts
@@ -16,3 +16,11 @@ export interface IUser {
   token: string;
   [...rest: string]: any;
 }
+
+export interface IUserLite {
+  readonly id: string;
+  first_name: string;
+  last_name: string;
+  email: string;
+  avatar: string;
+}
diff --git a/apps/app/types/workspace.d.ts b/apps/app/types/workspace.d.ts
index b6618795c..681841c32 100644
--- a/apps/app/types/workspace.d.ts
+++ b/apps/app/types/workspace.d.ts
@@ -1,4 +1,4 @@
-import type { IUser } from "./";
+import type { IUser, IUserLite } from "./";
 
 export interface IWorkspace {
   readonly id: string;
@@ -13,26 +13,26 @@ export interface IWorkspace {
   company_size: number;
 }
 
-export interface WorkspaceMember {
+export interface IWorkspaceMemberInvitation {
   readonly id: string;
   email: string;
+  accepted: boolean;
+  token: string;
   message: string;
+  responded_at: Date;
   role: 5 | 10 | 15 | 20;
-  member: IUser;
-  workspace: IWorkspace | string;
+  workspace: IWorkspace;
+}
+
+export interface IWorkspaceMember {
+  readonly id: string;
+  user: IUserLite;
+  workspace: IWorkspace;
+  member: IUserLite;
+  role: 5 | 10 | 15 | 20;
+  company_role: string | null;
   created_at: Date;
   updated_at: Date;
   created_by: string;
   updated_by: string;
 }
-
-export interface ProjectMember {
-  readonly id: string;
-  readonly project: string;
-  email: string;
-  message: string;
-  role: 5 | 10 | 15 | 20;
-  member: any;
-  member_id: string;
-  user_id: string;
-}