From 5f7aee6a8d3eb3fecebf80cae9c5da21cf8d10ea Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Tue, 20 Dec 2022 16:05:21 +0530
Subject: [PATCH] fix: assign issues to cycle, feat: settings sidebar

---
 .../cycles/cycle-issues-list-modal.tsx        |  10 +-
 .../create-update-issue-modal/index.tsx       |   2 +-
 .../issue-detail-sidebar/index.tsx            |   2 +-
 ...Invitations.tsx => member-invitations.tsx} |  43 +--
 .../components/project/settings/control.tsx   | 197 -------------
 .../components/project/settings/general.tsx   | 158 -----------
 .../components/project/settings/members.tsx   | 261 -----------------
 .../settings/{labels => }/single-label.tsx    |   0
 .../components/project/settings/states.tsx    | 130 ---------
 apps/app/constants/api-routes.ts              |   5 -
 apps/app/layouts/navbar/main-siderbar.tsx     |  28 +-
 apps/app/layouts/navbar/settings-sidebar.tsx  |  14 +-
 apps/app/layouts/settings-layout.tsx          |  69 ++++-
 apps/app/lib/services/issues.service.ts       |  18 +-
 .../projects/[projectId]/cycles/[cycleId].tsx |   2 +-
 .../pages/projects/[projectId]/settings.tsx   | 224 ---------------
 .../projects/[projectId]/settings/control.tsx | 268 ++++++++++++++++++
 .../projects/[projectId]/settings/index.tsx   | 234 +++++++++++++++
 .../projects/[projectId]/settings/labels.tsx} |  46 +--
 .../projects/[projectId]/settings/members.tsx | 267 +++++++++++++++++
 .../projects/[projectId]/settings/states.tsx  | 130 +++++++++
 apps/app/pages/projects/index.tsx             |   2 +-
 22 files changed, 1039 insertions(+), 1071 deletions(-)
 rename apps/app/components/project/{memberInvitations.tsx => member-invitations.tsx} (85%)
 delete mode 100644 apps/app/components/project/settings/control.tsx
 delete mode 100644 apps/app/components/project/settings/general.tsx
 delete mode 100644 apps/app/components/project/settings/members.tsx
 rename apps/app/components/project/settings/{labels => }/single-label.tsx (100%)
 delete mode 100644 apps/app/components/project/settings/states.tsx
 delete mode 100644 apps/app/pages/projects/[projectId]/settings.tsx
 create mode 100644 apps/app/pages/projects/[projectId]/settings/control.tsx
 create mode 100644 apps/app/pages/projects/[projectId]/settings/index.tsx
 rename apps/app/{components/project/settings/labels/index.tsx => pages/projects/[projectId]/settings/labels.tsx} (87%)
 create mode 100644 apps/app/pages/projects/[projectId]/settings/members.tsx
 create mode 100644 apps/app/pages/projects/[projectId]/settings/states.tsx

diff --git a/apps/app/components/project/cycles/cycle-issues-list-modal.tsx b/apps/app/components/project/cycles/cycle-issues-list-modal.tsx
index 4b033c444..74595d326 100644
--- a/apps/app/components/project/cycles/cycle-issues-list-modal.tsx
+++ b/apps/app/components/project/cycles/cycle-issues-list-modal.tsx
@@ -28,7 +28,7 @@ type Props = {
 };
 
 type FormInput = {
-  issue_ids: string[];
+  issue: string[];
 };
 
 const CycleIssuesListModal: React.FC<Props> = ({
@@ -56,12 +56,12 @@ const CycleIssuesListModal: React.FC<Props> = ({
     formState: { isSubmitting },
   } = useForm<FormInput>({
     defaultValues: {
-      issue_ids: [],
+      issue: [],
     },
   });
 
   const handleAddToCycle: SubmitHandler<FormInput> = (data) => {
-    if (!data.issue_ids || data.issue_ids.length === 0) {
+    if (!data.issue || data.issue.length === 0) {
       setToastAlert({
         title: "Error",
         type: "error",
@@ -72,7 +72,7 @@ const CycleIssuesListModal: React.FC<Props> = ({
 
     if (activeWorkspace && activeProject) {
       issuesServices
-        .bulkAddIssuesToCycle(activeWorkspace.slug, activeProject.id, cycleId, data)
+        .addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, data)
         .then((res) => {
           console.log(res);
           mutate(CYCLE_ISSUES(cycleId));
@@ -120,7 +120,7 @@ const CycleIssuesListModal: React.FC<Props> = ({
                 <form>
                   <Controller
                     control={control}
-                    name="issue_ids"
+                    name="issue"
                     render={({ field }) => (
                       <Combobox as="div" {...field} multiple>
                         <div className="relative m-1">
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 0fc8edb94..c1078b794 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
@@ -118,7 +118,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
     if (!activeWorkspace || !activeProject) return;
     await issuesServices
       .addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, {
-        issue: issueId,
+        issue: [issueId],
       })
       .then((res) => {
         mutate(CYCLE_ISSUES(cycleId));
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 b0fe60a23..8b448a178 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
@@ -101,7 +101,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
     if (activeWorkspace && activeProject && issueDetail)
       issuesServices
         .addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, {
-          issue: issueDetail.id,
+          issue: [issueDetail.id],
         })
         .then(() => {
           submitChanges({});
diff --git a/apps/app/components/project/memberInvitations.tsx b/apps/app/components/project/member-invitations.tsx
similarity index 85%
rename from apps/app/components/project/memberInvitations.tsx
rename to apps/app/components/project/member-invitations.tsx
index bd25db10a..4bc44f632 100644
--- a/apps/app/components/project/memberInvitations.tsx
+++ b/apps/app/components/project/member-invitations.tsx
@@ -3,14 +3,13 @@ import React, { useState } from "react";
 // next
 import Link from "next/link";
 import useSWR from "swr";
+import { useRouter } from "next/router";
+// services
+import projectService from "lib/services/project.service";
 // hooks
 import useUser from "lib/hooks/useUser";
-// Services
-import projectService from "lib/services/project.service";
-// fetch keys
-import { PROJECT_MEMBERS } from "constants/fetch-keys";
-// commons
-import { renderShortNumericDateFormat } from "constants/common";
+// ui
+import { Button } from "ui";
 // icons
 import {
   CalendarDaysIcon,
@@ -20,9 +19,15 @@ import {
   PencilIcon,
   PlusIcon,
   TrashIcon,
+  ClipboardDocumentListIcon,
 } from "@heroicons/react/24/outline";
 // types
 import type { IProject } from "types";
+// fetch-keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
+// common
+import { renderShortNumericDateFormat } from "constants/common";
+
 type Props = {
   project: IProject;
   slug: string;
@@ -40,6 +45,8 @@ const ProjectMemberInvitations: React.FC<Props> = ({
 }) => {
   const { user } = useUser();
 
+  const router = useRouter();
+
   const { data: members } = useSWR<any[]>(PROJECT_MEMBERS(project.id), () =>
     projectService.projectMembers(slug, project.id)
   );
@@ -93,13 +100,13 @@ const ProjectMemberInvitations: React.FC<Props> = ({
           {isMember ? (
             <div className="flex">
               <Link href={`/projects/${project.id}/settings`}>
-                <a className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 cursor-pointer">
+                <a className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-100 duration-300 cursor-pointer">
                   <PencilIcon className="h-4 w-4" />
                 </a>
               </Link>
               <button
                 type="button"
-                className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none"
+                className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-100 duration-300 outline-none"
                 onClick={() => setDeleteProject(project.id)}
               >
                 <TrashIcon className="h-4 w-4 text-red-500" />
@@ -115,7 +122,7 @@ const ProjectMemberInvitations: React.FC<Props> = ({
             {!isMember ? (
               <label
                 htmlFor={project.id}
-                className="flex items-center gap-1 text-xs font-medium bg-blue-200 hover:bg-blue-300 p-2 rounded duration-300 cursor-pointer"
+                className="flex items-center gap-1 text-xs font-medium border hover:bg-gray-100 p-2 rounded duration-300 cursor-pointer"
               >
                 {selected ? (
                   <>
@@ -130,17 +137,19 @@ const ProjectMemberInvitations: React.FC<Props> = ({
                 )}
               </label>
             ) : (
-              <span className="flex items-center gap-1 text-xs bg-green-200 p-2 rounded">
+              <Button theme="secondary" className="flex items-center gap-1" disabled>
                 <CheckIcon className="h-3 w-3" />
                 Member
-              </span>
+              </Button>
             )}
-            <Link href={`/projects/${project.id}/issues`}>
-              <a className="flex items-center gap-1 text-xs font-medium bg-blue-200 hover:bg-blue-300 p-2 rounded duration-300">
-                <EyeIcon className="h-3 w-3" />
-                View
-              </a>
-            </Link>
+            <Button
+              theme="secondary"
+              className="flex items-center gap-1"
+              onClick={() => router.push(`/projects/${project.id}/issues`)}
+            >
+              <ClipboardDocumentListIcon className="h-3 w-3" />
+              Open Project
+            </Button>
           </div>
           <div className="flex items-center gap-1 text-xs mb-1">
             <CalendarDaysIcon className="h-4 w-4" />
diff --git a/apps/app/components/project/settings/control.tsx b/apps/app/components/project/settings/control.tsx
deleted file mode 100644
index eea215256..000000000
--- a/apps/app/components/project/settings/control.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-// react
-import React from "react";
-// swr
-import useSWR from "swr";
-// react-hook-form
-import { Control, Controller } from "react-hook-form";
-// services
-import workspaceService from "lib/services/workspace.service";
-// hooks
-import useUser from "lib/hooks/useUser";
-// headless ui
-import { Listbox, Transition } from "@headlessui/react";
-// ui
-import { Button } from "ui";
-// icons
-import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
-// types
-import { IProject } from "types";
-// fetch-keys
-import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
-
-type Props = {
-  control: Control<IProject, any>;
-  isSubmitting: boolean;
-};
-
-const ControlSettings: React.FC<Props> = ({ control, isSubmitting }) => {
-  const { activeWorkspace } = useUser();
-
-  const { data: people } = useSWR(
-    activeWorkspace ? WORKSPACE_MEMBERS : null,
-    activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
-  );
-  return (
-    <>
-      <section className="space-y-8">
-        <div>
-          <h3 className="text-3xl font-bold leading-6 text-gray-900">Control</h3>
-          <p className="mt-4 text-sm text-gray-500">Set the control for the project.</p>
-        </div>
-        <div className="grid grid-cols-2 gap-16">
-          <div>
-            <h4 className="text-md leading-6 text-gray-900 mb-1">Project Lead</h4>
-            <p className="text-sm text-gray-500 mb-3">Select the project leader.</p>
-            <Controller
-              control={control}
-              name="project_lead"
-              render={({ field: { onChange, value } }) => (
-                <Listbox value={value} onChange={onChange}>
-                  {({ open }) => (
-                    <>
-                      <div className="relative">
-                        <Listbox.Button className="relative w-full flex justify-between items-center gap-4 border border-gray-300 rounded-md shadow-sm p-3 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
-                          <span className="block truncate">
-                            {people?.find((person) => person.member.id === value)?.member
-                              .first_name ?? "Select Lead"}
-                          </span>
-                          <ChevronDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
-                        </Listbox.Button>
-
-                        <Transition
-                          show={open}
-                          as={React.Fragment}
-                          leave="transition ease-in duration-100"
-                          leaveFrom="opacity-100"
-                          leaveTo="opacity-0"
-                        >
-                          <Listbox.Options className="absolute z-20 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
-                            {people?.map((person) => (
-                              <Listbox.Option
-                                key={person.id}
-                                className={({ active }) =>
-                                  `${
-                                    active ? "bg-indigo-50" : ""
-                                  } text-gray-900 cursor-default select-none relative px-3 py-2`
-                                }
-                                value={person.member.id}
-                              >
-                                {({ selected, active }) => (
-                                  <>
-                                    <span
-                                      className={`${
-                                        selected ? "font-semibold" : "font-normal"
-                                      } block truncate`}
-                                    >
-                                      {person.member.first_name !== ""
-                                        ? person.member.first_name
-                                        : person.member.email}
-                                    </span>
-
-                                    {selected ? (
-                                      <span
-                                        className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
-                                          active ? "text-white" : "text-theme"
-                                        }`}
-                                      >
-                                        <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                                      </span>
-                                    ) : null}
-                                  </>
-                                )}
-                              </Listbox.Option>
-                            ))}
-                          </Listbox.Options>
-                        </Transition>
-                      </div>
-                    </>
-                  )}
-                </Listbox>
-              )}
-            />
-          </div>
-          <div>
-            <h4 className="text-md leading-6 text-gray-900 mb-1">Default Assignee</h4>
-            <p className="text-sm text-gray-500 mb-3">
-              Select the default assignee for the project.
-            </p>
-            <Controller
-              control={control}
-              name="default_assignee"
-              render={({ field: { value, onChange } }) => (
-                <Listbox value={value} onChange={onChange}>
-                  {({ open }) => (
-                    <>
-                      <div className="relative">
-                        <Listbox.Button className="relative w-full flex justify-between items-center gap-4 border border-gray-300 rounded-md shadow-sm p-3 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
-                          <span className="block truncate">
-                            {people?.find((p) => p.member.id === value)?.member.first_name ??
-                              "Select Default Assignee"}
-                          </span>
-                          <ChevronDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
-                        </Listbox.Button>
-
-                        <Transition
-                          show={open}
-                          as={React.Fragment}
-                          leave="transition ease-in duration-100"
-                          leaveFrom="opacity-100"
-                          leaveTo="opacity-0"
-                        >
-                          <Listbox.Options className="absolute z-20 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
-                            {people?.map((person) => (
-                              <Listbox.Option
-                                key={person.id}
-                                className={({ active }) =>
-                                  `${
-                                    active ? "bg-indigo-50" : ""
-                                  } text-gray-900 cursor-default select-none relative px-3 py-2`
-                                }
-                                value={person.member.id}
-                              >
-                                {({ selected, active }) => (
-                                  <>
-                                    <span
-                                      className={`${
-                                        selected ? "font-semibold" : "font-normal"
-                                      } block truncate`}
-                                    >
-                                      {person.member.first_name !== ""
-                                        ? person.member.first_name
-                                        : person.member.email}
-                                    </span>
-
-                                    {selected ? (
-                                      <span
-                                        className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
-                                          active ? "text-white" : "text-theme"
-                                        }`}
-                                      >
-                                        <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                                      </span>
-                                    ) : null}
-                                  </>
-                                )}
-                              </Listbox.Option>
-                            ))}
-                          </Listbox.Options>
-                        </Transition>
-                      </div>
-                    </>
-                  )}
-                </Listbox>
-              )}
-            />
-          </div>
-        </div>
-        <div>
-          <Button type="submit" disabled={isSubmitting}>
-            {isSubmitting ? "Updating Project..." : "Update Project"}
-          </Button>
-        </div>
-      </section>
-    </>
-  );
-};
-
-export default ControlSettings;
diff --git a/apps/app/components/project/settings/general.tsx b/apps/app/components/project/settings/general.tsx
deleted file mode 100644
index 0330ef9d6..000000000
--- a/apps/app/components/project/settings/general.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-// react
-import { useCallback } from "react";
-// react-hook-form
-import { Controller } from "react-hook-form";
-import type { Control, UseFormRegister, UseFormSetError } from "react-hook-form";
-// services
-import projectServices from "lib/services/project.service";
-// hooks
-import useUser from "lib/hooks/useUser";
-// ui
-import { Button, Input, Select, TextArea, EmojiIconPicker } from "ui";
-// types
-import { IProject } from "types";
-// constants
-import { debounce } from "constants/common";
-
-type Props = {
-  register: UseFormRegister<IProject>;
-  errors: any;
-  setError: UseFormSetError<IProject>;
-  isSubmitting: boolean;
-  control: Control<IProject, any>;
-};
-
-const NETWORK_CHOICES = { "0": "Secret", "2": "Public" };
-
-const GeneralSettings: React.FC<Props> = ({
-  register,
-  errors,
-  setError,
-  isSubmitting,
-  control,
-}) => {
-  const { activeWorkspace } = useUser();
-
-  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), []);
-
-  return (
-    <>
-      <section className="space-y-8">
-        <div>
-          <h3 className="text-3xl font-bold leading-6 text-gray-900">General</h3>
-          <p className="mt-4 text-sm text-gray-500">
-            This information will be displayed to every member of the project.
-          </p>
-        </div>
-        <div className="grid grid-cols-2 gap-16">
-          <div>
-            <h4 className="text-md leading-6 text-gray-900 mb-1">Icon & Name</h4>
-            <p className="text-sm text-gray-500 mb-3">Select an icon and a name for the project.</p>
-            <div className="flex gap-2">
-              <Controller
-                control={control}
-                name="icon"
-                render={({ field: { value, onChange } }) => (
-                  <EmojiIconPicker
-                    label={value ? String.fromCodePoint(parseInt(value)) : "Icon"}
-                    value={value}
-                    onChange={onChange}
-                  />
-                )}
-              />
-              <Input
-                id="name"
-                name="name"
-                error={errors.name}
-                register={register}
-                placeholder="Project Name"
-                size="lg"
-                className="w-auto"
-                validations={{
-                  required: "Name is required",
-                }}
-              />
-            </div>
-          </div>
-          <div>
-            <h4 className="text-md leading-6 text-gray-900 mb-1">Description</h4>
-            <p className="text-sm text-gray-500 mb-3">Give a description to the project.</p>
-            <TextArea
-              id="description"
-              name="description"
-              error={errors.description}
-              register={register}
-              placeholder="Enter project description"
-              validations={{
-                required: "Description is required",
-              }}
-            />
-          </div>
-          <div>
-            <h4 className="text-md leading-6 text-gray-900 mb-1">Identifier</h4>
-            <p className="text-sm text-gray-500 mb-3">
-              Create a 1-6 characters{"'"} identifier for the project.
-            </p>
-            <Input
-              id="identifier"
-              name="identifier"
-              error={errors.identifier}
-              register={register}
-              placeholder="Enter identifier"
-              className="w-40"
-              size="lg"
-              onChange={(e: any) => {
-                if (!activeWorkspace || !e.target.value) return;
-                checkIdentifierAvailability(activeWorkspace.slug, e.target.value);
-              }}
-              validations={{
-                required: "Identifier is required",
-                minLength: {
-                  value: 1,
-                  message: "Identifier must at least be of 1 character",
-                },
-                maxLength: {
-                  value: 9,
-                  message: "Identifier must at most be of 9 characters",
-                },
-              }}
-            />
-          </div>
-          <div>
-            <h4 className="text-md leading-6 text-gray-900 mb-1">Network</h4>
-            <p className="text-sm text-gray-500 mb-3">Select privacy type for the project.</p>
-            <Select
-              name="network"
-              id="network"
-              options={Object.keys(NETWORK_CHOICES).map((key) => ({
-                value: key,
-                label: NETWORK_CHOICES[key as keyof typeof NETWORK_CHOICES],
-              }))}
-              size="lg"
-              register={register}
-              validations={{
-                required: "Network is required",
-              }}
-              className="w-40"
-            />
-          </div>
-        </div>
-        <div>
-          <Button type="submit" disabled={isSubmitting}>
-            {isSubmitting ? "Updating Project..." : "Update Project"}
-          </Button>
-        </div>
-      </section>
-    </>
-  );
-};
-
-export default GeneralSettings;
diff --git a/apps/app/components/project/settings/members.tsx b/apps/app/components/project/settings/members.tsx
deleted file mode 100644
index 4d3dfb33d..000000000
--- a/apps/app/components/project/settings/members.tsx
+++ /dev/null
@@ -1,261 +0,0 @@
-// react
-import { useState } from "react";
-// next
-import Image from "next/image";
-import useSWR from "swr";
-// services
-import projectService from "lib/services/project.service";
-// hooks
-import useUser from "lib/hooks/useUser";
-import useToast from "lib/hooks/useToast";
-// components
-import ConfirmProjectMemberRemove from "components/project/confirm-project-member-remove";
-import SendProjectInvitationModal from "components/project/send-project-invitation-modal";
-// ui
-import { Button, CustomListbox, CustomMenu, Spinner } from "ui";
-// fetch-keys
-import { PROJECT_INVITATIONS, PROJECT_MEMBERS } from "constants/fetch-keys";
-import { PlusIcon } from "@heroicons/react/24/outline";
-
-type Props = { projectId: string };
-
-const ROLE = {
-  5: "Guest",
-  10: "Viewer",
-  15: "Member",
-  20: "Admin",
-};
-
-const MembersSettings: React.FC<Props> = ({ projectId }) => {
-  const [selectedMember, setSelectedMember] = useState<string | null>(null);
-  const [selectedRemoveMember, setSelectedRemoveMember] = useState<string | null>(null);
-  const [selectedInviteRemoveMember, setSelectedInviteRemoveMember] = useState<string | null>(null);
-  const [inviteModal, setInviteModal] = useState(false);
-
-  const { activeWorkspace } = useUser();
-
-  const { setToastAlert } = useToast();
-
-  const { data: projectMembers, mutate: mutateMembers } = useSWR(
-    activeWorkspace && projectId ? PROJECT_MEMBERS(projectId as string) : null,
-    activeWorkspace && projectId
-      ? () => projectService.projectMembers(activeWorkspace.slug, projectId as any)
-      : null,
-    {
-      onErrorRetry(err, _, __, revalidate, revalidateOpts) {
-        if (err?.status === 403) return;
-        setTimeout(() => revalidate(revalidateOpts), 5000);
-      },
-    }
-  );
-
-  const { data: projectInvitations, mutate: mutateInvitations } = useSWR(
-    activeWorkspace && projectId ? PROJECT_INVITATIONS : null,
-    activeWorkspace && projectId
-      ? () => projectService.projectInvitations(activeWorkspace.slug, projectId as any)
-      : null
-  );
-
-  let members = [
-    ...(projectMembers?.map((item: any) => ({
-      id: item.id,
-      avatar: item.member?.avatar,
-      first_name: item.member?.first_name,
-      last_name: item.member?.last_name,
-      email: item.member?.email,
-      role: item.role,
-      status: true,
-      member: true,
-    })) || []),
-    ...(projectInvitations?.map((item: any) => ({
-      id: item.id,
-      avatar: item.avatar ?? "",
-      first_name: item.first_name ?? item.email,
-      last_name: item.last_name ?? "",
-      email: item.email,
-      role: item.role,
-      status: item.accepted,
-      member: false,
-    })) || []),
-  ];
-
-  return (
-    <>
-      <ConfirmProjectMemberRemove
-        isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)}
-        onClose={() => {
-          setSelectedRemoveMember(null);
-          setSelectedInviteRemoveMember(null);
-        }}
-        data={members.find(
-          (item) => item.id === selectedRemoveMember || item.id === selectedInviteRemoveMember
-        )}
-        handleDelete={async () => {
-          if (!activeWorkspace || !projectId) return;
-          if (selectedRemoveMember) {
-            await projectService.deleteProjectMember(
-              activeWorkspace.slug,
-              projectId as string,
-              selectedRemoveMember
-            );
-            mutateMembers(
-              (prevData) => prevData?.filter((item: any) => item.id !== selectedRemoveMember),
-              false
-            );
-          }
-          if (selectedInviteRemoveMember) {
-            await projectService.deleteProjectInvitation(
-              activeWorkspace.slug,
-              projectId as string,
-              selectedInviteRemoveMember
-            );
-            mutateInvitations(
-              (prevData) => prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember),
-              false
-            );
-          }
-          setToastAlert({
-            type: "success",
-            message: "Member removed successfully",
-            title: "Success",
-          });
-        }}
-      />
-      <SendProjectInvitationModal
-        isOpen={inviteModal}
-        setIsOpen={setInviteModal}
-        members={members}
-      />
-      <section className="space-y-8">
-        <div>
-          <h3 className="text-3xl font-bold leading-6 text-gray-900">Members</h3>
-          <p className="mt-4 text-sm text-gray-500">Manage all the members of the project.</p>
-        </div>
-        {!projectMembers || !projectInvitations ? (
-          <div className="h-full w-full grid place-items-center px-4 sm:px-0">
-            <Spinner />
-          </div>
-        ) : (
-          <div className="md:w-2/3">
-            <div className="flex justify-between items-center gap-2">
-              <h4 className="text-md leading-6 text-gray-900 mb-1">Manage members</h4>
-              <Button
-                theme="secondary"
-                className="flex items-center gap-x-1"
-                onClick={() => setInviteModal(true)}
-              >
-                <PlusIcon className="h-4 w-4" />
-                Add Member
-              </Button>
-            </div>
-            <div className="space-y-6 mt-6">
-              {members.length > 0
-                ? members.map((member) => (
-                    <div key={member.id} className="flex justify-between items-center">
-                      <div className="flex items-center gap-x-8 gap-y-2">
-                        <div className="h-10 w-10 p-4 flex items-center justify-center bg-gray-700 text-white rounded uppercase relative">
-                          {member.avatar && member.avatar !== "" ? (
-                            <Image
-                              src={member.avatar}
-                              alt={member.first_name}
-                              layout="fill"
-                              objectFit="cover"
-                              className="rounded"
-                            />
-                          ) : (
-                            member.first_name.charAt(0) ?? "N"
-                          )}
-                        </div>
-                        <div>
-                          <h4 className="text-sm">
-                            {member.first_name} {member.last_name}
-                          </h4>
-                          <p className="text-xs text-gray-500">{member.email}</p>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-2 text-xs">
-                        {selectedMember === member.id ? (
-                          <CustomListbox
-                            options={Object.keys(ROLE).map((key) => ({
-                              value: key,
-                              display: ROLE[parseInt(key) as keyof typeof ROLE],
-                            }))}
-                            title={ROLE[member.role as keyof typeof ROLE] ?? "Select Role"}
-                            value={member.role}
-                            onChange={(value) => {
-                              if (!activeWorkspace || !projectId) return;
-                              projectService
-                                .updateProjectMember(
-                                  activeWorkspace.slug,
-                                  projectId as string,
-                                  member.id,
-                                  {
-                                    role: value,
-                                  }
-                                )
-                                .then((res) => {
-                                  setToastAlert({
-                                    type: "success",
-                                    message: "Member role updated successfully.",
-                                    title: "Success",
-                                  });
-                                  mutateMembers(
-                                    (prevData: any) =>
-                                      prevData.map((m: any) => {
-                                        return m.id === selectedMember
-                                          ? { ...m, ...res, role: value }
-                                          : m;
-                                      }),
-                                    false
-                                  );
-                                  setSelectedMember(null);
-                                })
-                                .catch((err) => {
-                                  console.log(err);
-                                });
-                            }}
-                          />
-                        ) : (
-                          ROLE[member.role as keyof typeof ROLE] ?? "None"
-                        )}
-                        <CustomMenu ellipsis>
-                          <CustomMenu.MenuItem
-                            onClick={() => {
-                              if (!member.member) {
-                                setToastAlert({
-                                  type: "error",
-                                  message: "You can't edit a pending invitation.",
-                                  title: "Error",
-                                });
-                              } else {
-                                setSelectedMember(member.id);
-                              }
-                            }}
-                          >
-                            Edit
-                          </CustomMenu.MenuItem>
-                          <CustomMenu.MenuItem
-                            onClick={() => {
-                              if (member.member) {
-                                setSelectedRemoveMember(member.id);
-                              } else {
-                                setSelectedInviteRemoveMember(member.id);
-                              }
-                            }}
-                          >
-                            Remove
-                          </CustomMenu.MenuItem>
-                        </CustomMenu>
-                      </div>
-                    </div>
-                  ))
-                : null}
-            </div>
-          </div>
-        )}
-      </section>
-    </>
-  );
-};
-
-export default MembersSettings;
diff --git a/apps/app/components/project/settings/labels/single-label.tsx b/apps/app/components/project/settings/single-label.tsx
similarity index 100%
rename from apps/app/components/project/settings/labels/single-label.tsx
rename to apps/app/components/project/settings/single-label.tsx
diff --git a/apps/app/components/project/settings/states.tsx b/apps/app/components/project/settings/states.tsx
deleted file mode 100644
index f7a7e8968..000000000
--- a/apps/app/components/project/settings/states.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import React, { useState } from "react";
-// hooks
-import useUser from "lib/hooks/useUser";
-// components
-import {
-  StateGroup,
-  CreateUpdateStateInline,
-} from "components/project/issues/BoardView/state/create-update-state-inline";
-import ConfirmStateDeletion from "components/project/issues/BoardView/state/confirm-state-delete";
-// ui
-import { Spinner } from "ui";
-// icons
-import { PencilSquareIcon, PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
-// constants
-import { addSpaceIfCamelCase, groupBy } from "constants/common";
-// types
-import type { IState } from "types";
-
-type Props = {
-  projectId: string;
-};
-
-const StatesSettings: React.FC<Props> = ({ projectId }) => {
-  const [activeGroup, setActiveGroup] = useState<StateGroup>(null);
-  const [selectedState, setSelectedState] = useState<string | null>(null);
-  const [selectDeleteState, setSelectDeleteState] = useState<string | null>(null);
-
-  const { states, activeWorkspace } = useUser();
-
-  const groupedStates: {
-    [key: string]: Array<IState>;
-  } = groupBy(states ?? [], "group");
-
-  return (
-    <>
-      <ConfirmStateDeletion
-        isOpen={!!selectDeleteState}
-        data={states?.find((state) => state.id === selectDeleteState) ?? null}
-        onClose={() => setSelectDeleteState(null)}
-      />
-
-      <section className="space-y-8">
-        <div>
-          <h3 className="text-3xl font-bold leading-6 text-gray-900">State</h3>
-          <p className="mt-4 text-sm text-gray-500">Manage the state of this project.</p>
-        </div>
-        <div className="flex flex-col justify-between gap-4">
-          {states ? (
-            Object.keys(groupedStates).map((key) => (
-              <div key={key}>
-                <div className="flex justify-between w-full md:w-2/3 mb-2">
-                  <p className="text-md leading-6 text-gray-900 capitalize">{key} states</p>
-                  <button
-                    type="button"
-                    onClick={() => setActiveGroup(key as keyof StateGroup)}
-                    className="flex items-center gap-x-2 text-theme"
-                  >
-                    <PlusIcon className="h-4 w-4 text-theme" />
-                    <span>Add</span>
-                  </button>
-                </div>
-                <div className="md:w-2/3 space-y-1 border p-1 rounded-xl">
-                  {key === activeGroup && (
-                    <CreateUpdateStateInline
-                      projectId={projectId as string}
-                      onClose={() => {
-                        setActiveGroup(null);
-                        setSelectedState(null);
-                      }}
-                      workspaceSlug={activeWorkspace?.slug}
-                      data={null}
-                      selectedGroup={key as keyof StateGroup}
-                    />
-                  )}
-                  {groupedStates[key]?.map((state) =>
-                    state.id !== selectedState ? (
-                      <div
-                        key={state.id}
-                        className={`bg-gray-50 p-3 flex justify-between items-center gap-2 border-t ${
-                          Boolean(activeGroup !== key) ? "first:border-0" : ""
-                        }`}
-                      >
-                        <div className="flex items-center gap-2">
-                          <div
-                            className="flex-shrink-0 h-3 w-3 rounded-full"
-                            style={{
-                              backgroundColor: state.color,
-                            }}
-                          ></div>
-                          <h6 className="text-sm">{addSpaceIfCamelCase(state.name)}</h6>
-                        </div>
-                        <div className="flex items-center gap-2">
-                          <button type="button" onClick={() => setSelectDeleteState(state.id)}>
-                            <TrashIcon className="h-4 w-4 text-red-400" />
-                          </button>
-                          <button type="button" onClick={() => setSelectedState(state.id)}>
-                            <PencilSquareIcon className="h-4 w-4 text-gray-400" />
-                          </button>
-                        </div>
-                      </div>
-                    ) : (
-                      <div className={`border-t first:border-t-0`} key={state.id}>
-                        <CreateUpdateStateInline
-                          projectId={projectId as string}
-                          onClose={() => {
-                            setActiveGroup(null);
-                            setSelectedState(null);
-                          }}
-                          workspaceSlug={activeWorkspace?.slug}
-                          data={states?.find((state) => state.id === selectedState) ?? null}
-                          selectedGroup={key as keyof StateGroup}
-                        />
-                      </div>
-                    )
-                  )}
-                </div>
-              </div>
-            ))
-          ) : (
-            <div className="h-full w-full grid place-items-center px-4 sm:px-0">
-              <Spinner />
-            </div>
-          )}
-        </div>
-      </section>
-    </>
-  );
-};
-
-export default StatesSettings;
diff --git a/apps/app/constants/api-routes.ts b/apps/app/constants/api-routes.ts
index 24de30251..7d2cfe90b 100644
--- a/apps/app/constants/api-routes.ts
+++ b/apps/app/constants/api-routes.ts
@@ -110,11 +110,6 @@ export const FILTER_STATE_ISSUES = (workspaceSlug: string, projectId: string, st
   `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/?state=${state}`;
 export const BULK_DELETE_ISSUES = (workspaceSlug: string, projectId: string) =>
   `/api/workspaces/${workspaceSlug}/projects/${projectId}/bulk-delete-issues/`;
-export const BULK_ADD_ISSUES_TO_CYCLE = (
-  workspaceSlug: string,
-  projectId: string,
-  cycleId: string
-) => `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/bulk-assign-issues/`;
 
 // states
 export const STATES_ENDPOINT = (workspaceSlug: string, projectId: string) =>
diff --git a/apps/app/layouts/navbar/main-siderbar.tsx b/apps/app/layouts/navbar/main-siderbar.tsx
index a352cb45d..e2ada3fde 100644
--- a/apps/app/layouts/navbar/main-siderbar.tsx
+++ b/apps/app/layouts/navbar/main-siderbar.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 // next
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -15,15 +15,16 @@ import {
   Bars3Icon,
   Cog6ToothIcon,
   RectangleStackIcon,
-  UserGroupIcon,
   XMarkIcon,
   ArrowLongLeftIcon,
   QuestionMarkCircleIcon,
   RectangleGroupIcon,
 } from "@heroicons/react/24/outline";
-// constants
+// common
 import { classNames } from "constants/common";
 
+type Props = { collapse?: boolean };
+
 const navigation = (projectId: string) => [
   {
     name: "Issues",
@@ -40,11 +41,6 @@ const navigation = (projectId: string) => [
   //   href: `/projects/${projectId}/modules`,
   //   icon: RectangleGroupIcon,
   // },
-  // {
-  //   name: "Members",
-  //   href: `/projects/${projectId}/members`,
-  //   icon: UserGroupIcon,
-  // },
   {
     name: "Settings",
     href: `/projects/${projectId}/settings`,
@@ -52,7 +48,7 @@ const navigation = (projectId: string) => [
   },
 ];
 
-const Sidebar: React.FC = () => {
+const Sidebar: React.FC<Props> = ({ collapse = false }) => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
   const router = useRouter();
@@ -144,35 +140,35 @@ const Sidebar: React.FC = () => {
       </Transition.Root>
       <div
         className={`${
-          sidebarCollapse ? "" : "w-auto md:w-60"
+          sidebarCollapse || collapse ? "" : "w-auto md:w-60"
         } h-full hidden md:inset-y-0 md:flex md:flex-col`}
       >
         <div className="h-full flex flex-1 flex-col border-r border-gray-200">
           <div className="h-full flex flex-1 flex-col pt-2">
-            <WorkspaceOptions sidebarCollapse={sidebarCollapse} />
-            <ProjectsList navigation={navigation} sidebarCollapse={sidebarCollapse} />
+            <WorkspaceOptions sidebarCollapse={sidebarCollapse || collapse} />
+            <ProjectsList navigation={navigation} sidebarCollapse={sidebarCollapse || collapse} />
             <div
               className={`px-2 py-2 w-full self-baseline flex items-center bg-primary ${
-                sidebarCollapse ? "flex-col-reverse" : ""
+                sidebarCollapse || collapse ? "flex-col-reverse" : ""
               }`}
             >
               <button
                 type="button"
                 className={`flex items-center gap-3 px-2 py-2 text-xs font-medium rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-900 outline-none ${
-                  sidebarCollapse ? "justify-center w-full" : ""
+                  sidebarCollapse || collapse ? "justify-center w-full" : ""
                 }`}
                 onClick={() => toggleCollapsed()}
               >
                 <ArrowLongLeftIcon
                   className={`h-4 w-4 text-gray-500 group-hover:text-gray-900 flex-shrink-0 duration-300 ${
-                    sidebarCollapse ? "rotate-180" : ""
+                    sidebarCollapse || collapse ? "rotate-180" : ""
                   }`}
                 />
               </button>
               <button
                 type="button"
                 className={`flex items-center gap-3 px-2 py-2 text-xs font-medium rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-900 outline-none ${
-                  sidebarCollapse ? "justify-center w-full" : ""
+                  sidebarCollapse || collapse ? "justify-center w-full" : ""
                 }`}
                 onClick={() => {
                   const e = new KeyboardEvent("keydown", {
diff --git a/apps/app/layouts/navbar/settings-sidebar.tsx b/apps/app/layouts/navbar/settings-sidebar.tsx
index 9fd288e46..417ff4835 100644
--- a/apps/app/layouts/navbar/settings-sidebar.tsx
+++ b/apps/app/layouts/navbar/settings-sidebar.tsx
@@ -1,12 +1,13 @@
 // next
+import { ArrowLeftIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
 type Props = {
-  links: Array<{
+  links: {
     label: string;
     href: string;
-  }>;
+  }[];
 };
 
 const SettingsSidebar: React.FC<Props> = ({ links }) => {
@@ -14,9 +15,12 @@ const SettingsSidebar: React.FC<Props> = ({ links }) => {
 
   return (
     <nav className="h-screen w-72 border-r border-gray-200">
-      <div className="h-full p-2 pt-4">
-        <h2 className="text-lg font-medium leading-5">Settings</h2>
-        <div className="mt-3">
+      <div className="h-full p-2 pl-6 mt-16">
+        <h2 className="flex items-center gap-2 text-lg font-medium leading-5">
+          <ArrowLeftIcon className="h-4 w-4" />
+          Settings
+        </h2>
+        <div className="mt-6 space-y-1">
           {links.map((link, index) => (
             <h4 key={index}>
               <Link href={link.href}>
diff --git a/apps/app/layouts/settings-layout.tsx b/apps/app/layouts/settings-layout.tsx
index 1180ae9ce..0759ccaca 100644
--- a/apps/app/layouts/settings-layout.tsx
+++ b/apps/app/layouts/settings-layout.tsx
@@ -19,12 +19,11 @@ type Props = {
   children: React.ReactNode;
   noPadding?: boolean;
   bg?: "primary" | "secondary";
+  noHeader?: boolean;
   breadcrumbs?: JSX.Element;
+  left?: JSX.Element;
   right?: JSX.Element;
-  links: Array<{
-    label: string;
-    href: string;
-  }>;
+  type: "workspace" | "project";
 };
 
 const SettingsLayout: React.FC<Props> = ({
@@ -32,30 +31,80 @@ const SettingsLayout: React.FC<Props> = ({
   children,
   noPadding = false,
   bg = "primary",
+  noHeader = false,
   breadcrumbs,
+  left,
   right,
-  links,
+  type,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const router = useRouter();
 
-  const { user, isUserLoading } = useUser();
+  const { activeWorkspace, activeProject, user, isUserLoading } = useUser();
 
   useEffect(() => {
     if (!isUserLoading && (!user || user === null)) router.push("/signin");
   }, [isUserLoading, user, router]);
 
+  const workspaceLinks: {
+    label: string;
+    href: string;
+  }[] = [
+    {
+      label: "General",
+      href: "#",
+    },
+    {
+      label: "Control",
+      href: "#",
+    },
+    {
+      label: "States",
+      href: "#",
+    },
+    {
+      label: "Labels",
+      href: "#",
+    },
+  ];
+
+  const sidebarLinks: {
+    label: string;
+    href: string;
+  }[] = [
+    {
+      label: "General",
+      href: `/projects/${activeProject?.id}/settings`,
+    },
+    {
+      label: "Control",
+      href: `/projects/${activeProject?.id}/settings/control`,
+    },
+    {
+      label: "Members",
+      href: `/projects/${activeProject?.id}/settings/members`,
+    },
+    {
+      label: "States",
+      href: `/projects/${activeProject?.id}/settings/states`,
+    },
+    {
+      label: "Labels",
+      href: `/projects/${activeProject?.id}/settings/labels`,
+    },
+  ];
+
   return (
     <Container meta={meta}>
       <CreateProjectModal isOpen={isOpen} setIsOpen={setIsOpen} />
       <div className="h-screen w-full flex overflow-x-hidden">
-        <Sidebar />
-        <SettingsSidebar links={links} />
+        <Sidebar collapse />
+        <SettingsSidebar links={type === "workspace" ? workspaceLinks : sidebarLinks} />
         <main className="h-screen w-full flex flex-col overflow-y-auto min-w-0">
-          <Header breadcrumbs={breadcrumbs} right={right} />
+          {noHeader ? null : <Header breadcrumbs={breadcrumbs} left={left} right={right} />}
           <div
-            className={`w-full flex-grow ${noPadding ? "" : "p-5"} ${
+            className={`w-full flex-grow ${noPadding ? "" : "p-5 px-16 pt-16"} ${
               bg === "primary" ? "bg-primary" : bg === "secondary" ? "bg-secondary" : "bg-primary"
             }`}
           >
diff --git a/apps/app/lib/services/issues.service.ts b/apps/app/lib/services/issues.service.ts
index 8d0fe52d9..107c48c2a 100644
--- a/apps/app/lib/services/issues.service.ts
+++ b/apps/app/lib/services/issues.service.ts
@@ -9,7 +9,6 @@ import {
   CYCLE_DETAIL,
   ISSUE_LABELS,
   BULK_DELETE_ISSUES,
-  BULK_ADD_ISSUES_TO_CYCLE,
   REMOVE_ISSUE_FROM_CYCLE,
   ISSUE_LABEL_DETAILS,
 } from "constants/api-routes";
@@ -93,7 +92,7 @@ class ProjectIssuesServices extends APIService {
     projectId: string,
     cycleId: string,
     data: {
-      issue: string;
+      issue: string[];
     }
   ) {
     return this.post(CYCLE_DETAIL(workspaceSlug, projectId, cycleId), data)
@@ -289,21 +288,6 @@ class ProjectIssuesServices extends APIService {
         throw error?.response?.data;
       });
   }
-
-  async bulkAddIssuesToCycle(
-    workspaceSlug: string,
-    projectId: string,
-    cycleId: string,
-    data: any
-  ): Promise<any> {
-    return this.post(BULK_ADD_ISSUES_TO_CYCLE(workspaceSlug, projectId, cycleId), data)
-      .then((response) => {
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
 }
 
 export default new ProjectIssuesServices();
diff --git a/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx b/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx
index 666f92e6a..60e69be46 100644
--- a/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx
+++ b/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx
@@ -175,7 +175,7 @@ const SingleCycle: React.FC = () => {
         .then((res) => {
           issuesServices
             .addIssueToCycle(activeWorkspace.slug, activeProject.id, destination.droppableId, {
-              issue: result.draggableId.split(",")[1],
+              issue: [result.draggableId.split(",")[1]],
             })
             .then((res) => {
               console.log(res);
diff --git a/apps/app/pages/projects/[projectId]/settings.tsx b/apps/app/pages/projects/[projectId]/settings.tsx
deleted file mode 100644
index f48506fd7..000000000
--- a/apps/app/pages/projects/[projectId]/settings.tsx
+++ /dev/null
@@ -1,224 +0,0 @@
-import React, { useEffect, useState } from "react";
-// next
-import type { NextPage } from "next";
-import { useRouter } from "next/router";
-import dynamic from "next/dynamic";
-// swr
-import useSWR, { mutate } from "swr";
-// react hook form
-import { useForm } from "react-hook-form";
-// headless ui
-import { Tab } from "@headlessui/react";
-// hoc
-import withAuth from "lib/hoc/withAuthWrapper";
-// layouts
-import SettingsLayout from "layouts/settings-layout";
-import AppLayout from "layouts/app-layout";
-// service
-import projectServices from "lib/services/project.service";
-// hooks
-import useUser from "lib/hooks/useUser";
-import useToast from "lib/hooks/useToast";
-// fetch keys
-import { PROJECT_DETAILS, PROJECTS_LIST } from "constants/fetch-keys";
-// ui
-import { Button, Spinner } from "ui";
-import { Breadcrumbs, BreadcrumbItem } from "ui/Breadcrumbs";
-// types
-import type { IProject, IWorkspace } from "types";
-
-const GeneralSettings = dynamic(() => import("components/project/settings/general"), {
-  loading: () => <p>Loading...</p>,
-  ssr: false,
-});
-
-const MembersSettings = dynamic(() => import("components/project/settings/members"), {
-  loading: () => <p>Loading...</p>,
-  ssr: false,
-});
-
-const ControlSettings = dynamic(() => import("components/project/settings/control"), {
-  loading: () => <p>Loading...</p>,
-  ssr: false,
-});
-
-const StatesSettings = dynamic(() => import("components/project/settings/states"), {
-  loading: () => <p>Loading...</p>,
-  ssr: false,
-});
-
-const LabelsSettings = dynamic(() => import("components/project/settings/labels"), {
-  loading: () => <p>Loading...</p>,
-  ssr: false,
-});
-
-const defaultValues: Partial<IProject> = {
-  name: "",
-  description: "",
-  identifier: "",
-  network: 0,
-};
-
-const ProjectSettings: NextPage = () => {
-  const {
-    register,
-    handleSubmit,
-    reset,
-    control,
-    setError,
-    formState: { errors, isSubmitting },
-  } = useForm<IProject>({
-    defaultValues,
-  });
-
-  const router = useRouter();
-
-  const { projectId } = router.query;
-
-  const { activeWorkspace, activeProject } = useUser();
-
-  const { setToastAlert } = useToast();
-
-  const { data: projectDetails } = useSWR<IProject>(
-    activeWorkspace && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    activeWorkspace
-      ? () => projectServices.getProject(activeWorkspace.slug, projectId as string)
-      : null
-  );
-
-  useEffect(() => {
-    projectDetails &&
-      reset({
-        ...projectDetails,
-        default_assignee: projectDetails.default_assignee?.id,
-        project_lead: projectDetails.project_lead?.id,
-        workspace: (projectDetails.workspace as IWorkspace).id,
-      });
-  }, [projectDetails, reset]);
-
-  const onSubmit = async (formData: IProject) => {
-    if (!activeWorkspace || !projectId) return;
-    const payload: Partial<IProject> = {
-      name: formData.name,
-      network: formData.network,
-      identifier: formData.identifier,
-      description: formData.description,
-      default_assignee: formData.default_assignee,
-      project_lead: formData.project_lead,
-      icon: formData.icon,
-    };
-    await projectServices
-      .updateProject(activeWorkspace.slug, projectId as string, payload)
-      .then((res) => {
-        mutate<IProject>(
-          PROJECT_DETAILS(projectId as string),
-          (prevData) => ({ ...prevData, ...res }),
-          false
-        );
-        mutate<IProject[]>(
-          PROJECTS_LIST(activeWorkspace.slug),
-          (prevData) => {
-            const newData = prevData?.map((item) => {
-              if (item.id === res.id) {
-                return res;
-              }
-              return item;
-            });
-            return newData;
-          },
-          false
-        );
-        setToastAlert({
-          title: "Success",
-          type: "success",
-          message: "Project updated successfully",
-        });
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  };
-
-  const sidebarLinks: Array<{
-    label: string;
-    href: string;
-  }> = [
-    {
-      label: "General",
-      href: "#",
-    },
-    {
-      label: "Control",
-      href: "#",
-    },
-    {
-      label: "States",
-      href: "#",
-    },
-    {
-      label: "Labels",
-      href: "#",
-    },
-  ];
-
-  return (
-    <AppLayout
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem title="Projects" link="/projects" />
-          <BreadcrumbItem title={`${activeProject?.name ?? "Project"} Settings`} />
-        </Breadcrumbs>
-      }
-      // links={sidebarLinks}
-    >
-      {projectDetails ? (
-        <div className="space-y-3 px-10">
-          <Tab.Group>
-            <Tab.List className="flex items-center gap-x-4 gap-y-2 flex-wrap mb-8">
-              {["General", "Control", "Members", "States", "Labels"].map((tab, index) => (
-                <Tab key={index} as="div">
-                  {({ selected }) => (
-                    <Button theme="secondary" className={selected ? "border-theme" : ""}>
-                      {tab}
-                    </Button>
-                  )}
-                </Tab>
-              ))}
-            </Tab.List>
-            <Tab.Panels>
-              <form onSubmit={handleSubmit(onSubmit)}>
-                <Tab.Panel>
-                  <GeneralSettings
-                    control={control}
-                    register={register}
-                    errors={errors}
-                    setError={setError}
-                    isSubmitting={isSubmitting}
-                  />
-                </Tab.Panel>
-                <Tab.Panel>
-                  <ControlSettings control={control} isSubmitting={isSubmitting} />
-                </Tab.Panel>
-              </form>
-              <Tab.Panel>
-                <MembersSettings projectId={projectId as string} />
-              </Tab.Panel>
-              <Tab.Panel>
-                <StatesSettings projectId={projectId as string} />
-              </Tab.Panel>
-              <Tab.Panel>
-                <LabelsSettings />
-              </Tab.Panel>
-            </Tab.Panels>
-          </Tab.Group>
-        </div>
-      ) : (
-        <div className="h-full w-full flex justify-center items-center">
-          <Spinner />
-        </div>
-      )}
-    </AppLayout>
-  );
-};
-
-export default withAuth(ProjectSettings);
diff --git a/apps/app/pages/projects/[projectId]/settings/control.tsx b/apps/app/pages/projects/[projectId]/settings/control.tsx
new file mode 100644
index 000000000..cd8809e9e
--- /dev/null
+++ b/apps/app/pages/projects/[projectId]/settings/control.tsx
@@ -0,0 +1,268 @@
+// react
+import React, { useEffect } from "react";
+// swr
+import useSWR, { mutate } from "swr";
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// layouts
+import SettingsLayout from "layouts/settings-layout";
+// services
+import projectService from "lib/services/project.service";
+import workspaceService from "lib/services/workspace.service";
+// hooks
+import useToast from "lib/hooks/useToast";
+import useUser from "lib/hooks/useUser";
+// headless ui
+import { Listbox, Transition } from "@headlessui/react";
+// ui
+import { Button } from "ui";
+// icons
+import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
+// types
+import { IProject, IWorkspace } from "types";
+// fetch-keys
+import { PROJECTS_LIST, PROJECT_DETAILS, WORKSPACE_MEMBERS } from "constants/fetch-keys";
+
+const ControlSettings = () => {
+  const { activeWorkspace, activeProject } = useUser();
+
+  const { setToastAlert } = useToast();
+
+  const { data: projectDetails } = useSWR<IProject>(
+    activeWorkspace && activeProject ? PROJECT_DETAILS(activeProject.id) : null,
+    activeWorkspace && activeProject
+      ? () => projectService.getProject(activeWorkspace.slug, activeProject.id)
+      : null
+  );
+
+  const { data: people } = useSWR(
+    activeWorkspace ? WORKSPACE_MEMBERS : null,
+    activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
+  );
+
+  const {
+    handleSubmit,
+    reset,
+    control,
+    formState: { isSubmitting },
+  } = useForm<IProject>({});
+
+  const onSubmit = async (formData: IProject) => {
+    if (!activeWorkspace || !activeProject) return;
+    const payload: Partial<IProject> = {
+      name: formData.name,
+      network: formData.network,
+      identifier: formData.identifier,
+      description: formData.description,
+      default_assignee: formData.default_assignee,
+      project_lead: formData.project_lead,
+      icon: formData.icon,
+    };
+    await projectService
+      .updateProject(activeWorkspace.slug, activeProject.id, payload)
+      .then((res) => {
+        mutate<IProject>(
+          PROJECT_DETAILS(activeProject.id),
+          (prevData) => ({ ...prevData, ...res }),
+          false
+        );
+        mutate<IProject[]>(
+          PROJECTS_LIST(activeWorkspace.slug),
+          (prevData) => {
+            const newData = prevData?.map((item) => {
+              if (item.id === res.id) {
+                return res;
+              }
+              return item;
+            });
+            return newData;
+          },
+          false
+        );
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Project updated successfully",
+        });
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  useEffect(() => {
+    projectDetails &&
+      reset({
+        ...projectDetails,
+        default_assignee: projectDetails.default_assignee?.id,
+        project_lead: projectDetails.project_lead?.id,
+        workspace: (projectDetails.workspace as IWorkspace).id,
+      });
+  }, [projectDetails, reset]);
+
+  return (
+    <SettingsLayout type="project" noHeader>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="space-y-8">
+          <div>
+            <h3 className="text-3xl font-bold leading-6 text-gray-900">Control</h3>
+            <p className="mt-4 text-sm text-gray-500">Set the control for the project.</p>
+          </div>
+          <div className="grid grid-cols-2 gap-16">
+            <div>
+              <h4 className="text-md leading-6 text-gray-900 mb-1">Project Lead</h4>
+              <p className="text-sm text-gray-500 mb-3">Select the project leader.</p>
+              <Controller
+                control={control}
+                name="project_lead"
+                render={({ field: { onChange, value } }) => (
+                  <Listbox value={value} onChange={onChange}>
+                    {({ open }) => (
+                      <>
+                        <div className="relative">
+                          <Listbox.Button className="relative w-full flex justify-between items-center gap-4 border border-gray-300 rounded-md shadow-sm p-3 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+                            <span className="block truncate">
+                              {people?.find((person) => person.member.id === value)?.member
+                                .first_name ?? "Select Lead"}
+                            </span>
+                            <ChevronDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                          </Listbox.Button>
+
+                          <Transition
+                            show={open}
+                            as={React.Fragment}
+                            leave="transition ease-in duration-100"
+                            leaveFrom="opacity-100"
+                            leaveTo="opacity-0"
+                          >
+                            <Listbox.Options className="absolute z-20 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+                              {people?.map((person) => (
+                                <Listbox.Option
+                                  key={person.id}
+                                  className={({ active }) =>
+                                    `${
+                                      active ? "bg-indigo-50" : ""
+                                    } text-gray-900 cursor-default select-none relative px-3 py-2`
+                                  }
+                                  value={person.member.id}
+                                >
+                                  {({ selected, active }) => (
+                                    <>
+                                      <span
+                                        className={`${
+                                          selected ? "font-semibold" : "font-normal"
+                                        } block truncate`}
+                                      >
+                                        {person.member.first_name !== ""
+                                          ? person.member.first_name
+                                          : person.member.email}
+                                      </span>
+
+                                      {selected ? (
+                                        <span
+                                          className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
+                                            active ? "text-white" : "text-theme"
+                                          }`}
+                                        >
+                                          <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                                        </span>
+                                      ) : null}
+                                    </>
+                                  )}
+                                </Listbox.Option>
+                              ))}
+                            </Listbox.Options>
+                          </Transition>
+                        </div>
+                      </>
+                    )}
+                  </Listbox>
+                )}
+              />
+            </div>
+            <div>
+              <h4 className="text-md leading-6 text-gray-900 mb-1">Default Assignee</h4>
+              <p className="text-sm text-gray-500 mb-3">
+                Select the default assignee for the project.
+              </p>
+              <Controller
+                control={control}
+                name="default_assignee"
+                render={({ field: { value, onChange } }) => (
+                  <Listbox value={value} onChange={onChange}>
+                    {({ open }) => (
+                      <>
+                        <div className="relative">
+                          <Listbox.Button className="relative w-full flex justify-between items-center gap-4 border border-gray-300 rounded-md shadow-sm p-3 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+                            <span className="block truncate">
+                              {people?.find((p) => p.member.id === value)?.member.first_name ??
+                                "Select Default Assignee"}
+                            </span>
+                            <ChevronDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                          </Listbox.Button>
+
+                          <Transition
+                            show={open}
+                            as={React.Fragment}
+                            leave="transition ease-in duration-100"
+                            leaveFrom="opacity-100"
+                            leaveTo="opacity-0"
+                          >
+                            <Listbox.Options className="absolute z-20 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+                              {people?.map((person) => (
+                                <Listbox.Option
+                                  key={person.id}
+                                  className={({ active }) =>
+                                    `${
+                                      active ? "bg-indigo-50" : ""
+                                    } text-gray-900 cursor-default select-none relative px-3 py-2`
+                                  }
+                                  value={person.member.id}
+                                >
+                                  {({ selected, active }) => (
+                                    <>
+                                      <span
+                                        className={`${
+                                          selected ? "font-semibold" : "font-normal"
+                                        } block truncate`}
+                                      >
+                                        {person.member.first_name !== ""
+                                          ? person.member.first_name
+                                          : person.member.email}
+                                      </span>
+
+                                      {selected ? (
+                                        <span
+                                          className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
+                                            active ? "text-white" : "text-theme"
+                                          }`}
+                                        >
+                                          <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                                        </span>
+                                      ) : null}
+                                    </>
+                                  )}
+                                </Listbox.Option>
+                              ))}
+                            </Listbox.Options>
+                          </Transition>
+                        </div>
+                      </>
+                    )}
+                  </Listbox>
+                )}
+              />
+            </div>
+          </div>
+          <div>
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? "Updating Project..." : "Update Project"}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </SettingsLayout>
+  );
+};
+
+export default ControlSettings;
diff --git a/apps/app/pages/projects/[projectId]/settings/index.tsx b/apps/app/pages/projects/[projectId]/settings/index.tsx
new file mode 100644
index 000000000..80a8be49f
--- /dev/null
+++ b/apps/app/pages/projects/[projectId]/settings/index.tsx
@@ -0,0 +1,234 @@
+// react
+import { useCallback, useEffect } from "react";
+// swr
+import useSWR, { mutate } from "swr";
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// layouts
+import SettingsLayout from "layouts/settings-layout";
+// services
+import projectService from "lib/services/project.service";
+// hooks
+import useUser from "lib/hooks/useUser";
+import useToast from "lib/hooks/useToast";
+// ui
+import { Button, EmojiIconPicker, Input, Select, TextArea } from "ui";
+// types
+import { IProject, IWorkspace } from "types";
+// fetch-keys
+import { PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+// common
+import { debounce } from "constants/common";
+
+const NETWORK_CHOICES = { "0": "Secret", "2": "Public" };
+
+const defaultValues: Partial<IProject> = {
+  name: "",
+  description: "",
+  identifier: "",
+  network: 0,
+};
+
+const GeneralSettings = () => {
+  const { activeWorkspace, activeProject } = useUser();
+
+  const { setToastAlert } = useToast();
+
+  const { data: projectDetails } = useSWR<IProject>(
+    activeWorkspace && activeProject ? PROJECT_DETAILS(activeProject.id) : null,
+    activeWorkspace && activeProject
+      ? () => projectService.getProject(activeWorkspace.slug, activeProject.id)
+      : null
+  );
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    control,
+    setError,
+    formState: { errors, isSubmitting },
+  } = useForm<IProject>({
+    defaultValues,
+  });
+
+  const onSubmit = async (formData: IProject) => {
+    if (!activeWorkspace || !activeProject) return;
+    const payload: Partial<IProject> = {
+      name: formData.name,
+      network: formData.network,
+      identifier: formData.identifier,
+      description: formData.description,
+      default_assignee: formData.default_assignee,
+      project_lead: formData.project_lead,
+      icon: formData.icon,
+    };
+    await projectService
+      .updateProject(activeWorkspace.slug, activeProject.id, payload)
+      .then((res) => {
+        mutate<IProject>(
+          PROJECT_DETAILS(activeProject.id),
+          (prevData) => ({ ...prevData, ...res }),
+          false
+        );
+        mutate<IProject[]>(
+          PROJECTS_LIST(activeWorkspace.slug),
+          (prevData) => {
+            const newData = prevData?.map((item) => {
+              if (item.id === res.id) {
+                return res;
+              }
+              return item;
+            });
+            return newData;
+          },
+          false
+        );
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Project updated successfully",
+        });
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const checkIdentifier = (slug: string, value: string) => {
+    projectService.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(() => {
+    projectDetails &&
+      reset({
+        ...projectDetails,
+        default_assignee: projectDetails.default_assignee?.id,
+        project_lead: projectDetails.project_lead?.id,
+        workspace: (projectDetails.workspace as IWorkspace).id,
+      });
+  }, [projectDetails, reset]);
+
+  return (
+    <SettingsLayout type="project" noHeader>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="space-y-8">
+          <div>
+            <h3 className="text-3xl font-bold leading-6 text-gray-900">General</h3>
+            <p className="mt-4 text-sm text-gray-500">
+              This information will be displayed to every member of the project.
+            </p>
+          </div>
+          <div className="grid grid-cols-2 gap-16">
+            <div>
+              <h4 className="text-md leading-6 text-gray-900 mb-1">Icon & Name</h4>
+              <p className="text-sm text-gray-500 mb-3">
+                Select an icon and a name for the project.
+              </p>
+              <div className="flex gap-2">
+                <Controller
+                  control={control}
+                  name="icon"
+                  render={({ field: { value, onChange } }) => (
+                    <EmojiIconPicker
+                      label={value ? String.fromCodePoint(parseInt(value)) : "Icon"}
+                      value={value}
+                      onChange={onChange}
+                    />
+                  )}
+                />
+                <Input
+                  id="name"
+                  name="name"
+                  error={errors.name}
+                  register={register}
+                  placeholder="Project Name"
+                  size="lg"
+                  className="w-auto"
+                  validations={{
+                    required: "Name is required",
+                  }}
+                />
+              </div>
+            </div>
+            <div>
+              <h4 className="text-md leading-6 text-gray-900 mb-1">Description</h4>
+              <p className="text-sm text-gray-500 mb-3">Give a description to the project.</p>
+              <TextArea
+                id="description"
+                name="description"
+                error={errors.description}
+                register={register}
+                placeholder="Enter project description"
+                validations={{
+                  required: "Description is required",
+                }}
+              />
+            </div>
+            <div>
+              <h4 className="text-md leading-6 text-gray-900 mb-1">Identifier</h4>
+              <p className="text-sm text-gray-500 mb-3">
+                Create a 1-6 characters{"'"} identifier for the project.
+              </p>
+              <Input
+                id="identifier"
+                name="identifier"
+                error={errors.identifier}
+                register={register}
+                placeholder="Enter identifier"
+                className="w-40"
+                size="lg"
+                onChange={(e: any) => {
+                  if (!activeWorkspace || !e.target.value) return;
+                  checkIdentifierAvailability(activeWorkspace.slug, e.target.value);
+                }}
+                validations={{
+                  required: "Identifier is required",
+                  minLength: {
+                    value: 1,
+                    message: "Identifier must at least be of 1 character",
+                  },
+                  maxLength: {
+                    value: 9,
+                    message: "Identifier must at most be of 9 characters",
+                  },
+                }}
+              />
+            </div>
+            <div>
+              <h4 className="text-md leading-6 text-gray-900 mb-1">Network</h4>
+              <p className="text-sm text-gray-500 mb-3">Select privacy type for the project.</p>
+              <Select
+                name="network"
+                id="network"
+                options={Object.keys(NETWORK_CHOICES).map((key) => ({
+                  value: key,
+                  label: NETWORK_CHOICES[key as keyof typeof NETWORK_CHOICES],
+                }))}
+                size="lg"
+                register={register}
+                validations={{
+                  required: "Network is required",
+                }}
+                className="w-40"
+              />
+            </div>
+          </div>
+          <div>
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? "Updating Project..." : "Update Project"}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </SettingsLayout>
+  );
+};
+
+export default GeneralSettings;
diff --git a/apps/app/components/project/settings/labels/index.tsx b/apps/app/pages/projects/[projectId]/settings/labels.tsx
similarity index 87%
rename from apps/app/components/project/settings/labels/index.tsx
rename to apps/app/pages/projects/[projectId]/settings/labels.tsx
index d6f8746c3..9279e80a8 100644
--- a/apps/app/components/project/settings/labels/index.tsx
+++ b/apps/app/pages/projects/[projectId]/settings/labels.tsx
@@ -7,27 +7,30 @@ import { Controller, SubmitHandler, useForm } from "react-hook-form";
 // react-color
 import { TwitterPicker } from "react-color";
 // services
-import issuesServices from "lib/services/issues.service";
+import issuesService from "lib/services/issues.service";
 // hooks
 import useUser from "lib/hooks/useUser";
+// layouts
+import SettingsLayout from "layouts/settings-layout";
+// components
+import SingleLabel from "components/project/settings/single-label";
 // headless ui
 import { Popover, Transition } from "@headlessui/react";
 // ui
 import { Button, Input, Spinner } from "ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
-// types
-import { IIssueLabels } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
-import SingleLabel from "./single-label";
+// types
+import { IIssueLabels } from "types";
 
 const defaultValues: Partial<IIssueLabels> = {
   name: "",
   colour: "#ff0000",
 };
 
-const LabelsSettings: React.FC = () => {
+const LabelsSettings = () => {
   const [newLabelForm, setNewLabelForm] = useState(false);
   const [isUpdating, setIsUpdating] = useState(false);
   const [labelIdForUpdate, setLabelidForUpdate] = useState<string | null>(null);
@@ -47,20 +50,18 @@ const LabelsSettings: React.FC = () => {
   const { data: issueLabels, mutate } = useSWR<IIssueLabels[]>(
     activeProject && activeWorkspace ? PROJECT_ISSUE_LABELS(activeProject.id) : null,
     activeProject && activeWorkspace
-      ? () => issuesServices.getIssueLabels(activeWorkspace.slug, activeProject.id)
+      ? () => issuesService.getIssueLabels(activeWorkspace.slug, activeProject.id)
       : null
   );
 
   const handleNewLabel: SubmitHandler<IIssueLabels> = (formData) => {
     if (!activeWorkspace || !activeProject || isSubmitting) return;
-    issuesServices
-      .createIssueLabel(activeWorkspace.slug, activeProject.id, formData)
-      .then((res) => {
-        console.log(res);
-        reset(defaultValues);
-        mutate((prevData) => [...(prevData ?? []), res], false);
-        setNewLabelForm(false);
-      });
+    issuesService.createIssueLabel(activeWorkspace.slug, activeProject.id, formData).then((res) => {
+      console.log(res);
+      reset(defaultValues);
+      mutate((prevData) => [...(prevData ?? []), res], false);
+      setNewLabelForm(false);
+    });
   };
 
   const editLabel = (label: IIssueLabels) => {
@@ -73,7 +74,7 @@ const LabelsSettings: React.FC = () => {
 
   const handleLabelUpdate: SubmitHandler<IIssueLabels> = (formData) => {
     if (!activeWorkspace || !activeProject || isSubmitting) return;
-    issuesServices
+    issuesService
       .patchIssueLabel(activeWorkspace.slug, activeProject.id, labelIdForUpdate ?? "", formData)
       .then((res) => {
         console.log(res);
@@ -90,7 +91,7 @@ const LabelsSettings: React.FC = () => {
   const handleLabelDelete = (labelId: string) => {
     if (activeWorkspace && activeProject) {
       mutate((prevData) => prevData?.filter((p) => p.id !== labelId), false);
-      issuesServices
+      issuesService
         .deleteIssueLabel(activeWorkspace.slug, activeProject.id, labelId)
         .then((res) => {
           console.log(res);
@@ -102,13 +103,14 @@ const LabelsSettings: React.FC = () => {
   };
 
   return (
-    <>
+    <SettingsLayout type="project" noHeader>
       <section className="space-y-8">
+        <div>
+          <h3 className="text-3xl font-bold leading-6 text-gray-900">Labels</h3>
+          <p className="mt-4 text-sm text-gray-500">Manage the labels of this project.</p>
+        </div>
         <div className="md:w-2/3 flex justify-between items-center gap-2">
-          <div>
-            <h3 className="text-3xl font-bold leading-6 text-gray-900">Labels</h3>
-            <p className="mt-4 text-sm text-gray-500">Manage the labels of this project.</p>
-          </div>
+          <h4 className="text-md leading-6 text-gray-900 mb-1">Manage labels</h4>
           <Button
             theme="secondary"
             className="flex items-center gap-x-1"
@@ -218,7 +220,7 @@ const LabelsSettings: React.FC = () => {
           </>
         </div>
       </section>
-    </>
+    </SettingsLayout>
   );
 };
 
diff --git a/apps/app/pages/projects/[projectId]/settings/members.tsx b/apps/app/pages/projects/[projectId]/settings/members.tsx
new file mode 100644
index 000000000..5ab23b091
--- /dev/null
+++ b/apps/app/pages/projects/[projectId]/settings/members.tsx
@@ -0,0 +1,267 @@
+// react
+import { useState } from "react";
+// next
+import Image from "next/image";
+// swr
+import useSWR from "swr";
+// services
+import projectService from "lib/services/project.service";
+// hooks
+import useUser from "lib/hooks/useUser";
+import useToast from "lib/hooks/useToast";
+// layouts
+import SettingsLayout from "layouts/settings-layout";
+// components
+import ConfirmProjectMemberRemove from "components/project/confirm-project-member-remove";
+import SendProjectInvitationModal from "components/project/send-project-invitation-modal";
+// ui
+import { Button, CustomListbox, CustomMenu, Spinner } from "ui";
+// icons
+import { PlusIcon } from "@heroicons/react/24/outline";
+// fetch-keys
+import { PROJECT_INVITATIONS, PROJECT_MEMBERS } from "constants/fetch-keys";
+
+const ROLE = {
+  5: "Guest",
+  10: "Viewer",
+  15: "Member",
+  20: "Admin",
+};
+
+const MembersSettings = () => {
+  const [selectedMember, setSelectedMember] = useState<string | null>(null);
+  const [selectedRemoveMember, setSelectedRemoveMember] = useState<string | null>(null);
+  const [selectedInviteRemoveMember, setSelectedInviteRemoveMember] = useState<string | null>(null);
+  const [inviteModal, setInviteModal] = useState(false);
+
+  const { activeWorkspace, activeProject } = useUser();
+
+  const { setToastAlert } = useToast();
+
+  const { data: projectMembers, mutate: mutateMembers } = useSWR(
+    activeWorkspace && activeProject ? PROJECT_MEMBERS(activeProject.id) : null,
+    activeWorkspace && activeProject
+      ? () => projectService.projectMembers(activeWorkspace.slug, activeProject.id)
+      : null,
+    {
+      onErrorRetry(err, _, __, revalidate, revalidateOpts) {
+        if (err?.status === 403) return;
+        setTimeout(() => revalidate(revalidateOpts), 5000);
+      },
+    }
+  );
+
+  const { data: projectInvitations, mutate: mutateInvitations } = useSWR(
+    activeWorkspace && activeProject ? PROJECT_INVITATIONS : null,
+    activeWorkspace && activeProject
+      ? () => projectService.projectInvitations(activeWorkspace.slug, activeProject.id)
+      : null
+  );
+
+  let members = [
+    ...(projectMembers?.map((item: any) => ({
+      id: item.id,
+      avatar: item.member?.avatar,
+      first_name: item.member?.first_name,
+      last_name: item.member?.last_name,
+      email: item.member?.email,
+      role: item.role,
+      status: true,
+      member: true,
+    })) || []),
+    ...(projectInvitations?.map((item: any) => ({
+      id: item.id,
+      avatar: item.avatar ?? "",
+      first_name: item.first_name ?? item.email,
+      last_name: item.last_name ?? "",
+      email: item.email,
+      role: item.role,
+      status: item.accepted,
+      member: false,
+    })) || []),
+  ];
+
+  return (
+    <>
+      <ConfirmProjectMemberRemove
+        isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)}
+        onClose={() => {
+          setSelectedRemoveMember(null);
+          setSelectedInviteRemoveMember(null);
+        }}
+        data={members.find(
+          (item) => item.id === selectedRemoveMember || item.id === selectedInviteRemoveMember
+        )}
+        handleDelete={async () => {
+          if (!activeWorkspace || !activeProject) return;
+          if (selectedRemoveMember) {
+            await projectService.deleteProjectMember(
+              activeWorkspace.slug,
+              activeProject.id,
+              selectedRemoveMember
+            );
+            mutateMembers(
+              (prevData) => prevData?.filter((item: any) => item.id !== selectedRemoveMember),
+              false
+            );
+          }
+          if (selectedInviteRemoveMember) {
+            await projectService.deleteProjectInvitation(
+              activeWorkspace.slug,
+              activeProject.id,
+              selectedInviteRemoveMember
+            );
+            mutateInvitations(
+              (prevData) => prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember),
+              false
+            );
+          }
+          setToastAlert({
+            type: "success",
+            message: "Member removed successfully",
+            title: "Success",
+          });
+        }}
+      />
+      <SendProjectInvitationModal
+        isOpen={inviteModal}
+        setIsOpen={setInviteModal}
+        members={members}
+      />
+      <SettingsLayout type="project" noHeader>
+        <section className="space-y-8">
+          <div>
+            <h3 className="text-3xl font-bold leading-6 text-gray-900">Members</h3>
+            <p className="mt-4 text-sm text-gray-500">Manage all the members of the project.</p>
+          </div>
+          {!projectMembers || !projectInvitations ? (
+            <div className="h-full w-full grid place-items-center px-4 sm:px-0">
+              <Spinner />
+            </div>
+          ) : (
+            <div className="md:w-2/3">
+              <div className="flex justify-between items-center gap-2">
+                <h4 className="text-md leading-6 text-gray-900 mb-1">Manage members</h4>
+                <Button
+                  theme="secondary"
+                  className="flex items-center gap-x-1"
+                  onClick={() => setInviteModal(true)}
+                >
+                  <PlusIcon className="h-4 w-4" />
+                  Add Member
+                </Button>
+              </div>
+              <div className="space-y-6 mt-6">
+                {members.length > 0
+                  ? members.map((member) => (
+                      <div key={member.id} className="flex justify-between items-center">
+                        <div className="flex items-center gap-x-8 gap-y-2">
+                          <div className="h-10 w-10 p-4 flex items-center justify-center bg-gray-700 text-white rounded capitalize relative">
+                            {member.avatar && member.avatar !== "" ? (
+                              <Image
+                                src={member.avatar}
+                                alt={member.first_name}
+                                layout="fill"
+                                objectFit="cover"
+                                className="rounded"
+                              />
+                            ) : member.first_name !== "" ? (
+                              member.first_name.charAt(0)
+                            ) : (
+                              member.email.charAt(0)
+                            )}
+                          </div>
+                          <div>
+                            <h4 className="text-sm">
+                              {member.first_name} {member.last_name}
+                            </h4>
+                            <p className="text-xs text-gray-500">{member.email}</p>
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-2 text-xs">
+                          {selectedMember === member.id ? (
+                            <CustomListbox
+                              options={Object.keys(ROLE).map((key) => ({
+                                value: key,
+                                display: ROLE[parseInt(key) as keyof typeof ROLE],
+                              }))}
+                              title={ROLE[member.role as keyof typeof ROLE] ?? "Select Role"}
+                              value={member.role}
+                              onChange={(value) => {
+                                if (!activeWorkspace || !activeProject) return;
+                                projectService
+                                  .updateProjectMember(
+                                    activeWorkspace.slug,
+                                    activeProject.id,
+                                    member.id,
+                                    {
+                                      role: value,
+                                    }
+                                  )
+                                  .then((res) => {
+                                    setToastAlert({
+                                      type: "success",
+                                      message: "Member role updated successfully.",
+                                      title: "Success",
+                                    });
+                                    mutateMembers(
+                                      (prevData: any) =>
+                                        prevData.map((m: any) => {
+                                          return m.id === selectedMember
+                                            ? { ...m, ...res, role: value }
+                                            : m;
+                                        }),
+                                      false
+                                    );
+                                    setSelectedMember(null);
+                                  })
+                                  .catch((err) => {
+                                    console.log(err);
+                                  });
+                              }}
+                            />
+                          ) : (
+                            ROLE[member.role as keyof typeof ROLE] ?? "None"
+                          )}
+                          <CustomMenu ellipsis>
+                            <CustomMenu.MenuItem
+                              onClick={() => {
+                                if (!member.member) {
+                                  setToastAlert({
+                                    type: "error",
+                                    message: "You can't edit a pending invitation.",
+                                    title: "Error",
+                                  });
+                                } else {
+                                  setSelectedMember(member.id);
+                                }
+                              }}
+                            >
+                              Edit
+                            </CustomMenu.MenuItem>
+                            <CustomMenu.MenuItem
+                              onClick={() => {
+                                if (member.member) {
+                                  setSelectedRemoveMember(member.id);
+                                } else {
+                                  setSelectedInviteRemoveMember(member.id);
+                                }
+                              }}
+                            >
+                              Remove
+                            </CustomMenu.MenuItem>
+                          </CustomMenu>
+                        </div>
+                      </div>
+                    ))
+                  : null}
+              </div>
+            </div>
+          )}
+        </section>
+      </SettingsLayout>
+    </>
+  );
+};
+
+export default MembersSettings;
diff --git a/apps/app/pages/projects/[projectId]/settings/states.tsx b/apps/app/pages/projects/[projectId]/settings/states.tsx
new file mode 100644
index 000000000..0592a32a8
--- /dev/null
+++ b/apps/app/pages/projects/[projectId]/settings/states.tsx
@@ -0,0 +1,130 @@
+// react
+import { useState } from "react";
+// hooks
+import useUser from "lib/hooks/useUser";
+// layouts
+import SettingsLayout from "layouts/settings-layout";
+// components
+import ConfirmStateDeletion from "components/project/issues/BoardView/state/confirm-state-delete";
+import {
+  CreateUpdateStateInline,
+  StateGroup,
+} from "components/project/issues/BoardView/state/create-update-state-inline";
+// ui
+import { Spinner } from "ui";
+// icons
+import { PencilSquareIcon, PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
+// types
+import { IState } from "types";
+// common
+import { addSpaceIfCamelCase, groupBy } from "constants/common";
+
+const StatesSettings = () => {
+  const [activeGroup, setActiveGroup] = useState<StateGroup>(null);
+  const [selectedState, setSelectedState] = useState<string | null>(null);
+  const [selectDeleteState, setSelectDeleteState] = useState<string | null>(null);
+
+  const { activeWorkspace, activeProject, states } = useUser();
+
+  const groupedStates: {
+    [key: string]: IState[];
+  } = groupBy(states ?? [], "group");
+
+  return (
+    <>
+      <ConfirmStateDeletion
+        isOpen={!!selectDeleteState}
+        data={states?.find((state) => state.id === selectDeleteState) ?? null}
+        onClose={() => setSelectDeleteState(null)}
+      />
+      <SettingsLayout type="project" noHeader>
+        <div className="space-y-8">
+          <div>
+            <h3 className="text-3xl font-bold leading-6 text-gray-900">States</h3>
+            <p className="mt-4 text-sm text-gray-500">Manage the state of this project.</p>
+          </div>
+          <div className="flex flex-col justify-between gap-4">
+            {states && activeProject ? (
+              Object.keys(groupedStates).map((key) => (
+                <div key={key}>
+                  <div className="flex justify-between w-full md:w-2/3 mb-2">
+                    <p className="text-md leading-6 text-gray-900 capitalize">{key} states</p>
+                    <button
+                      type="button"
+                      onClick={() => setActiveGroup(key as keyof StateGroup)}
+                      className="flex items-center gap-2 text-theme text-xs"
+                    >
+                      <PlusIcon className="h-3 w-3 text-theme" />
+                      Add
+                    </button>
+                  </div>
+                  <div className="md:w-2/3 space-y-1 border p-1 rounded-xl">
+                    {key === activeGroup && (
+                      <CreateUpdateStateInline
+                        projectId={activeProject.id}
+                        onClose={() => {
+                          setActiveGroup(null);
+                          setSelectedState(null);
+                        }}
+                        workspaceSlug={activeWorkspace?.slug}
+                        data={null}
+                        selectedGroup={key as keyof StateGroup}
+                      />
+                    )}
+                    {groupedStates[key]?.map((state) =>
+                      state.id !== selectedState ? (
+                        <div
+                          key={state.id}
+                          className={`bg-gray-50 p-3 flex justify-between items-center gap-2 border-b ${
+                            Boolean(activeGroup !== key) ? "last:border-0" : ""
+                          }`}
+                        >
+                          <div className="flex items-center gap-2">
+                            <div
+                              className="flex-shrink-0 h-3 w-3 rounded-full"
+                              style={{
+                                backgroundColor: state.color,
+                              }}
+                            ></div>
+                            <h6 className="text-sm">{addSpaceIfCamelCase(state.name)}</h6>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <button type="button" onClick={() => setSelectDeleteState(state.id)}>
+                              <TrashIcon className="h-4 w-4 text-red-400" />
+                            </button>
+                            <button type="button" onClick={() => setSelectedState(state.id)}>
+                              <PencilSquareIcon className="h-4 w-4 text-gray-400" />
+                            </button>
+                          </div>
+                        </div>
+                      ) : (
+                        <div className={`border-b last:border-b-0`} key={state.id}>
+                          <CreateUpdateStateInline
+                            projectId={activeProject.id}
+                            onClose={() => {
+                              setActiveGroup(null);
+                              setSelectedState(null);
+                            }}
+                            workspaceSlug={activeWorkspace?.slug}
+                            data={states?.find((state) => state.id === selectedState) ?? null}
+                            selectedGroup={key as keyof StateGroup}
+                          />
+                        </div>
+                      )
+                    )}
+                  </div>
+                </div>
+              ))
+            ) : (
+              <div className="h-full w-full grid place-items-center px-4 sm:px-0">
+                <Spinner />
+              </div>
+            )}
+          </div>
+        </div>
+      </SettingsLayout>
+    </>
+  );
+};
+
+export default StatesSettings;
diff --git a/apps/app/pages/projects/index.tsx b/apps/app/pages/projects/index.tsx
index fdc75542d..36ace1d10 100644
--- a/apps/app/pages/projects/index.tsx
+++ b/apps/app/pages/projects/index.tsx
@@ -8,7 +8,7 @@ import withAuth from "lib/hoc/withAuthWrapper";
 // layouts
 import AppLayout from "layouts/app-layout";
 // components
-import ProjectMemberInvitations from "components/project/memberInvitations";
+import ProjectMemberInvitations from "components/project/member-invitations";
 import ConfirmProjectDeletion from "components/project/confirm-project-deletion";
 // ui
 import {