diff --git a/apps/app/components/common/board-view/single-issue.tsx b/apps/app/components/common/board-view/single-issue.tsx
index a099c29b1..cd84697e9 100644
--- a/apps/app/components/common/board-view/single-issue.tsx
+++ b/apps/app/components/common/board-view/single-issue.tsx
@@ -25,7 +25,16 @@ import { AssigneesList, CustomDatePicker } from "components/ui";
 import { renderShortNumericDateFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
-import { IIssue, IUserLite, IWorkspaceMember, Properties, UserAuth } from "types";
+import {
+  CycleIssueResponse,
+  IIssue,
+  IssueResponse,
+  IUserLite,
+  IWorkspaceMember,
+  ModuleIssueResponse,
+  Properties,
+  UserAuth,
+} from "types";
 // common
 import { PRIORITIES } from "constants/";
 import {
@@ -80,6 +89,60 @@ const SingleBoardIssue: React.FC<Props> = ({
   const partialUpdateIssue = (formData: Partial<IIssue>) => {
     if (!workspaceSlug || !projectId) return;
 
+    if (typeId) {
+      mutate<CycleIssueResponse[]>(
+        CYCLE_ISSUES(typeId ?? ""),
+        (prevData) => {
+          const updatedIssues = (prevData ?? []).map((p) => {
+            if (p.issue_detail.id === issue.id) {
+              return {
+                ...p,
+                issue_detail: {
+                  ...p.issue_detail,
+                  ...formData,
+                },
+              };
+            }
+            return p;
+          });
+          return [...updatedIssues];
+        },
+        false
+      );
+
+      mutate<ModuleIssueResponse[]>(
+        MODULE_ISSUES(typeId ?? ""),
+        (prevData) => {
+          const updatedIssues = (prevData ?? []).map((p) => {
+            if (p.issue_detail.id === issue.id) {
+              return {
+                ...p,
+                issue_detail: {
+                  ...p.issue_detail,
+                  ...formData,
+                },
+              };
+            }
+            return p;
+          });
+          return [...updatedIssues];
+        },
+        false
+      );
+    }
+
+    mutate<IssueResponse>(
+      PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
+      (prevData) => ({
+        ...(prevData as IssueResponse),
+        results: (prevData?.results ?? []).map((p) => {
+          if (p.id === issue.id) return { ...p, ...formData };
+          return p;
+        }),
+      }),
+      false
+    );
+
     issuesService
       .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
       .then((res) => {
@@ -270,13 +333,11 @@ const SingleBoardIssue: React.FC<Props> = ({
               <CustomDatePicker
                 placeholder="N/A"
                 value={issue?.target_date}
-                onChange={(val: Date) => {
+                onChange={(val) =>
                   partialUpdateIssue({
-                    target_date: val
-                      ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
-                      : null,
-                  });
-                }}
+                    target_date: val,
+                  })
+                }
                 className={issue?.target_date ? "w-[6.5rem]" : "w-[3rem] text-center"}
               />
               {/* <DatePicker
diff --git a/apps/app/components/common/list-view/single-issue.tsx b/apps/app/components/common/list-view/single-issue.tsx
index 8879b9fb7..262f332b5 100644
--- a/apps/app/components/common/list-view/single-issue.tsx
+++ b/apps/app/components/common/list-view/single-issue.tsx
@@ -5,9 +5,6 @@ import { useRouter } from "next/router";
 
 import useSWR, { mutate } from "swr";
 
-// react-datepicker
-import DatePicker from "react-datepicker";
-import "react-datepicker/dist/react-datepicker.css";
 // services
 import issuesService from "services/issues.service";
 import workspaceService from "services/workspace.service";
@@ -18,13 +15,19 @@ import { Listbox, Transition } from "@headlessui/react";
 import { CustomMenu, CustomSelect, AssigneesList, Avatar, CustomDatePicker } from "components/ui";
 // components
 import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
-// icons
-import { CalendarDaysIcon } from "@heroicons/react/24/outline";
 // helpers
 import { renderShortNumericDateFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
-import { IIssue, IWorkspaceMember, Properties, UserAuth } from "types";
+import {
+  CycleIssueResponse,
+  IIssue,
+  IssueResponse,
+  IWorkspaceMember,
+  ModuleIssueResponse,
+  Properties,
+  UserAuth,
+} from "types";
 // fetch-keys
 import {
   CYCLE_ISSUES,
@@ -76,6 +79,60 @@ const SingleListIssue: React.FC<Props> = ({
   const partialUpdateIssue = (formData: Partial<IIssue>) => {
     if (!workspaceSlug || !projectId) return;
 
+    if (typeId) {
+      mutate<CycleIssueResponse[]>(
+        CYCLE_ISSUES(typeId ?? ""),
+        (prevData) => {
+          const updatedIssues = (prevData ?? []).map((p) => {
+            if (p.issue_detail.id === issue.id) {
+              return {
+                ...p,
+                issue_detail: {
+                  ...p.issue_detail,
+                  ...formData,
+                },
+              };
+            }
+            return p;
+          });
+          return [...updatedIssues];
+        },
+        false
+      );
+
+      mutate<ModuleIssueResponse[]>(
+        MODULE_ISSUES(typeId ?? ""),
+        (prevData) => {
+          const updatedIssues = (prevData ?? []).map((p) => {
+            if (p.issue_detail.id === issue.id) {
+              return {
+                ...p,
+                issue_detail: {
+                  ...p.issue_detail,
+                  ...formData,
+                },
+              };
+            }
+            return p;
+          });
+          return [...updatedIssues];
+        },
+        false
+      );
+    }
+
+    mutate<IssueResponse>(
+      PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
+      (prevData) => ({
+        ...(prevData as IssueResponse),
+        results: (prevData?.results ?? []).map((p) => {
+          if (p.id === issue.id) return { ...p, ...formData };
+          return p;
+        }),
+      }),
+      false
+    );
+
     issuesService
       .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
       .then((res) => {
@@ -255,44 +312,24 @@ const SingleListIssue: React.FC<Props> = ({
               <CustomDatePicker
                 placeholder="N/A"
                 value={issue?.target_date}
-                onChange={(val: Date) => {
+                onChange={(val) =>
                   partialUpdateIssue({
-                    target_date: val
-                      ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
-                      : null,
-                  });
-                }}
+                    target_date: val,
+                  })
+                }
                 className={issue?.target_date ? "w-[6.5rem]" : "w-[3rem] text-center"}
               />
-              {/* <DatePicker
-                placeholderText="N/A"
-                value={
-                  issue?.target_date ? `${renderShortNumericDateFormat(issue.target_date)}` : "N/A"
-                }
-                selected={issue?.target_date ? new Date(issue.target_date) : null}
-                onChange={(val: Date) => {
-                  partialUpdateIssue({
-                    target_date: val
-                      ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
-                      : null,
-                  });
-                }}
-                dateFormat="dd-MM-yyyy"
-                className={`cursor-pointer rounded-md border px-2 py-[3px] text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
-                  issue?.target_date ? "w-[4.5rem]" : "w-[3rem] text-center"
-                }`}
-                isClearable
-              /> */}
               <div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
                 <h5 className="mb-1 font-medium text-gray-900">Due date</h5>
                 <div>{renderShortNumericDateFormat(issue.target_date ?? "")}</div>
                 <div>
-                  {issue.target_date &&
-                    (issue.target_date < new Date().toISOString()
+                  {issue.target_date
+                    ? issue.target_date < new Date().toISOString()
                       ? `Due date has passed by ${findHowManyDaysLeft(issue.target_date)} days`
                       : findHowManyDaysLeft(issue.target_date) <= 3
                       ? `Due date is in ${findHowManyDaysLeft(issue.target_date)} days`
-                      : "Due date")}
+                      : "Due date"
+                    : "N/A"}
                 </div>
               </div>
             </div>
diff --git a/apps/app/components/core/view.tsx b/apps/app/components/core/view.tsx
index 987b09fe9..1fe147f22 100644
--- a/apps/app/components/core/view.tsx
+++ b/apps/app/components/core/view.tsx
@@ -47,10 +47,10 @@ const View: React.FC<Props> = ({ issues }) => {
   );
 
   return (
-    <div className="flex items-center gap-2">
-      <div className="flex items-center gap-x-1">
-        {issues && (
-          <>
+    <>
+      {issues && issues.length > 0 && (
+        <div className="flex items-center gap-2">
+          <div className="flex items-center gap-x-1">
             <button
               type="button"
               className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200 ${
@@ -69,137 +69,138 @@ const View: React.FC<Props> = ({ issues }) => {
             >
               <Squares2X2Icon className="h-4 w-4" />
             </button>
-          </>
-        )}
-      </div>
-      <Popover className="relative">
-        {({ open }) => (
-          <>
-            <Popover.Button
-              className={`group flex items-center gap-2 rounded-md border bg-transparent p-2 text-xs font-medium hover:bg-gray-100 hover:text-gray-900 focus:outline-none ${
-                open ? "bg-gray-100 text-gray-900" : "text-gray-500"
-              }`}
-            >
-              <span>View</span>
-              <ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
-            </Popover.Button>
+          </div>
+          <Popover className="relative">
+            {({ open }) => (
+              <>
+                <Popover.Button
+                  className={`group flex items-center gap-2 rounded-md border bg-transparent p-2 text-xs font-medium hover:bg-gray-100 hover:text-gray-900 focus:outline-none ${
+                    open ? "bg-gray-100 text-gray-900" : "text-gray-500"
+                  }`}
+                >
+                  <span>View</span>
+                  <ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
+                </Popover.Button>
 
-            <Transition
-              as={React.Fragment}
-              enter="transition ease-out duration-200"
-              enterFrom="opacity-0 translate-y-1"
-              enterTo="opacity-100 translate-y-0"
-              leave="transition ease-in duration-150"
-              leaveFrom="opacity-100 translate-y-0"
-              leaveTo="opacity-0 translate-y-1"
-            >
-              <Popover.Panel className="absolute right-0 z-20 mt-1 w-screen max-w-xs transform overflow-hidden rounded-lg bg-white p-3 shadow-lg">
-                <div className="relative divide-y-2">
-                  {issues && (
-                    <div className="space-y-4 pb-3">
-                      <div className="flex items-center justify-between">
-                        <h4 className="text-sm text-gray-600">Group by</h4>
-                        <CustomMenu
-                          label={
-                            groupByOptions.find((option) => option.key === groupByProperty)?.name ??
-                            "Select"
-                          }
-                          width="lg"
-                        >
-                          {groupByOptions.map((option) => (
-                            <CustomMenu.MenuItem
-                              key={option.key}
-                              onClick={() => setGroupByProperty(option.key)}
+                <Transition
+                  as={React.Fragment}
+                  enter="transition ease-out duration-200"
+                  enterFrom="opacity-0 translate-y-1"
+                  enterTo="opacity-100 translate-y-0"
+                  leave="transition ease-in duration-150"
+                  leaveFrom="opacity-100 translate-y-0"
+                  leaveTo="opacity-0 translate-y-1"
+                >
+                  <Popover.Panel className="absolute right-0 z-20 mt-1 w-screen max-w-xs transform overflow-hidden rounded-lg bg-white p-3 shadow-lg">
+                    <div className="relative divide-y-2">
+                      {issues && (
+                        <div className="space-y-4 pb-3">
+                          <div className="flex items-center justify-between">
+                            <h4 className="text-sm text-gray-600">Group by</h4>
+                            <CustomMenu
+                              label={
+                                groupByOptions.find((option) => option.key === groupByProperty)
+                                  ?.name ?? "Select"
+                              }
+                              width="lg"
                             >
-                              {option.name}
-                            </CustomMenu.MenuItem>
-                          ))}
-                        </CustomMenu>
-                      </div>
-                      <div className="flex items-center justify-between">
-                        <h4 className="text-sm text-gray-600">Order by</h4>
-                        <CustomMenu
-                          label={
-                            orderByOptions.find((option) => option.key === orderBy)?.name ??
-                            "Select"
-                          }
-                          width="lg"
-                        >
-                          {orderByOptions.map((option) =>
-                            groupByProperty === "priority" && option.key === "priority" ? null : (
-                              <CustomMenu.MenuItem
-                                key={option.key}
-                                onClick={() => setOrderBy(option.key)}
-                              >
-                                {option.name}
-                              </CustomMenu.MenuItem>
-                            )
-                          )}
-                        </CustomMenu>
-                      </div>
-                      <div className="flex items-center justify-between">
-                        <h4 className="text-sm text-gray-600">Issue type</h4>
-                        <CustomMenu
-                          label={
-                            filterIssueOptions.find((option) => option.key === filterIssue)?.name ??
-                            "Select"
-                          }
-                          width="lg"
-                        >
-                          {filterIssueOptions.map((option) => (
-                            <CustomMenu.MenuItem
-                              key={option.key}
-                              onClick={() => setFilterIssue(option.key)}
+                              {groupByOptions.map((option) => (
+                                <CustomMenu.MenuItem
+                                  key={option.key}
+                                  onClick={() => setGroupByProperty(option.key)}
+                                >
+                                  {option.name}
+                                </CustomMenu.MenuItem>
+                              ))}
+                            </CustomMenu>
+                          </div>
+                          <div className="flex items-center justify-between">
+                            <h4 className="text-sm text-gray-600">Order by</h4>
+                            <CustomMenu
+                              label={
+                                orderByOptions.find((option) => option.key === orderBy)?.name ??
+                                "Select"
+                              }
+                              width="lg"
                             >
-                              {option.name}
-                            </CustomMenu.MenuItem>
+                              {orderByOptions.map((option) =>
+                                groupByProperty === "priority" &&
+                                option.key === "priority" ? null : (
+                                  <CustomMenu.MenuItem
+                                    key={option.key}
+                                    onClick={() => setOrderBy(option.key)}
+                                  >
+                                    {option.name}
+                                  </CustomMenu.MenuItem>
+                                )
+                              )}
+                            </CustomMenu>
+                          </div>
+                          <div className="flex items-center justify-between">
+                            <h4 className="text-sm text-gray-600">Issue type</h4>
+                            <CustomMenu
+                              label={
+                                filterIssueOptions.find((option) => option.key === filterIssue)
+                                  ?.name ?? "Select"
+                              }
+                              width="lg"
+                            >
+                              {filterIssueOptions.map((option) => (
+                                <CustomMenu.MenuItem
+                                  key={option.key}
+                                  onClick={() => setFilterIssue(option.key)}
+                                >
+                                  {option.name}
+                                </CustomMenu.MenuItem>
+                              ))}
+                            </CustomMenu>
+                          </div>
+                          <div className="relative flex justify-end gap-x-3">
+                            <button
+                              type="button"
+                              className="text-xs"
+                              onClick={() => resetFilterToDefault()}
+                            >
+                              Reset to default
+                            </button>
+                            <button
+                              type="button"
+                              className="text-xs font-medium text-theme"
+                              onClick={() => setNewFilterDefaultView()}
+                            >
+                              Set as default
+                            </button>
+                          </div>
+                        </div>
+                      )}
+                      <div className="space-y-2 py-3">
+                        <h4 className="text-sm text-gray-600">Display Properties</h4>
+                        <div className="flex flex-wrap items-center gap-2">
+                          {Object.keys(properties).map((key) => (
+                            <button
+                              key={key}
+                              type="button"
+                              className={`rounded border px-2 py-1 text-xs capitalize ${
+                                properties[key as keyof Properties]
+                                  ? "border-theme bg-theme text-white"
+                                  : "border-gray-300"
+                              }`}
+                              onClick={() => setProperties(key as keyof Properties)}
+                            >
+                              {replaceUnderscoreIfSnakeCase(key)}
+                            </button>
                           ))}
-                        </CustomMenu>
-                      </div>
-                      <div className="relative flex justify-end gap-x-3">
-                        <button
-                          type="button"
-                          className="text-xs"
-                          onClick={() => resetFilterToDefault()}
-                        >
-                          Reset to default
-                        </button>
-                        <button
-                          type="button"
-                          className="text-xs font-medium text-theme"
-                          onClick={() => setNewFilterDefaultView()}
-                        >
-                          Set as default
-                        </button>
+                        </div>
                       </div>
                     </div>
-                  )}
-                  <div className="space-y-2 py-3">
-                    <h4 className="text-sm text-gray-600">Display Properties</h4>
-                    <div className="flex flex-wrap items-center gap-2">
-                      {Object.keys(properties).map((key) => (
-                        <button
-                          key={key}
-                          type="button"
-                          className={`rounded border px-2 py-1 text-xs capitalize ${
-                            properties[key as keyof Properties]
-                              ? "border-theme bg-theme text-white"
-                              : "border-gray-300"
-                          }`}
-                          onClick={() => setProperties(key as keyof Properties)}
-                        >
-                          {replaceUnderscoreIfSnakeCase(key)}
-                        </button>
-                      ))}
-                    </div>
-                  </div>
-                </div>
-              </Popover.Panel>
-            </Transition>
-          </>
-        )}
-      </Popover>
-    </div>
+                  </Popover.Panel>
+                </Transition>
+              </>
+            )}
+          </Popover>
+        </div>
+      )}
+    </>
   );
 };
 
diff --git a/apps/app/components/issues/description-form.tsx b/apps/app/components/issues/description-form.tsx
index 9882eee36..84ae61643 100644
--- a/apps/app/components/issues/description-form.tsx
+++ b/apps/app/components/issues/description-form.tsx
@@ -17,7 +17,7 @@ const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor
   ),
 });
 // types
-import { IIssue } from "types";
+import { IIssue, UserAuth } from "types";
 import useToast from "hooks/use-toast";
 
 export interface IssueDescriptionFormValues {
@@ -29,9 +29,14 @@ export interface IssueDescriptionFormValues {
 export interface IssueDetailsProps {
   issue: IIssue;
   handleFormSubmit: (value: IssueDescriptionFormValues) => void;
+  userAuth: UserAuth;
 }
 
-export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormSubmit }) => {
+export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
+  issue,
+  handleFormSubmit,
+  userAuth,
+}) => {
   const { setToastAlert } = useToast();
 
   const {
@@ -97,6 +102,8 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
     reset(issue);
   }, [issue, reset]);
 
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
   return (
     <div>
       <Input
@@ -111,6 +118,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
         }}
         mode="transparent"
         className="text-xl font-medium"
+        disabled={isNotAllowed}
       />
       <span>{errors.name ? errors.name.message : null}</span>
       <RemirrorRichTextEditor
@@ -121,6 +129,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
           debounceHandler();
         }}
         onHTMLChange={(html) => setValue("description_html", html)}
+        editable={!isNotAllowed}
       />
     </div>
   );
diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
index 4ad6ed60c..a2233fc52 100644
--- a/apps/app/components/issues/form.tsx
+++ b/apps/app/components/issues/form.tsx
@@ -291,13 +291,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                     render={({ field: { value, onChange } }) => (
                       <CustomDatePicker
                         value={value}
-                        onChange={(val: Date) => {
-                          onChange(
-                            val
-                              ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
-                              : null
-                          );
-                        }}
+                        onChange={onChange}
                         className="max-w-[7rem]"
                       />
                     )}
diff --git a/apps/app/components/issues/sub-issue-list.tsx b/apps/app/components/issues/sub-issue-list.tsx
index db3ab754e..f8944f379 100644
--- a/apps/app/components/issues/sub-issue-list.tsx
+++ b/apps/app/components/issues/sub-issue-list.tsx
@@ -7,7 +7,7 @@ import { CustomMenu } from "components/ui";
 import { CreateUpdateIssueModal } from "components/issues";
 import AddAsSubIssue from "components/project/issues/issue-detail/add-as-sub-issue";
 // types
-import { IIssue } from "types";
+import { IIssue, UserAuth } from "types";
 
 export interface SubIssueListProps {
   issues: IIssue[];
@@ -15,6 +15,7 @@ export interface SubIssueListProps {
   workspaceSlug: string;
   parentIssue: IIssue;
   handleSubIssueRemove: (subIssueId: string) => void;
+  userAuth: UserAuth;
 }
 
 export const SubIssueList: FC<SubIssueListProps> = ({
@@ -23,6 +24,7 @@ export const SubIssueList: FC<SubIssueListProps> = ({
   parentIssue,
   workspaceSlug,
   projectId,
+  userAuth,
 }) => {
   // states
   const [isIssueModalActive, setIssueModalActive] = useState(false);
@@ -45,6 +47,8 @@ export const SubIssueList: FC<SubIssueListProps> = ({
     setSubIssueModalActive(false);
   };
 
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
   return (
     <>
       <CreateUpdateIssueModal
@@ -57,71 +61,71 @@ export const SubIssueList: FC<SubIssueListProps> = ({
         setIsOpen={setSubIssueModalActive}
         parent={parentIssue}
       />
-      {parentIssue?.id && workspaceSlug && projectId && issues?.length > 0 ? (
-        <Disclosure defaultOpen={true}>
-          {({ open }) => (
-            <>
-              <div className="flex items-center justify-between">
-                <Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100">
-                  <ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
-                  Sub-issues <span className="ml-1 text-gray-600">{issues.length}</span>
-                </Disclosure.Button>
-                {open ? (
-                  <div className="flex items-center">
-                    <button
-                      type="button"
-                      className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100"
+      <Disclosure defaultOpen={true}>
+        {({ open }) => (
+          <>
+            <div className="flex items-center justify-between">
+              <Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100">
+                <ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
+                Sub-issues <span className="ml-1 text-gray-600">{issues.length}</span>
+              </Disclosure.Button>
+              {open && !isNotAllowed ? (
+                <div className="flex items-center">
+                  <button
+                    type="button"
+                    className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100"
+                    onClick={() => {
+                      openIssueModal();
+                      setPreloadedData({
+                        parent: parentIssue.id,
+                      });
+                    }}
+                  >
+                    <PlusIcon className="h-3 w-3" />
+                    Create new
+                  </button>
+
+                  <CustomMenu ellipsis>
+                    <CustomMenu.MenuItem
                       onClick={() => {
-                        openIssueModal();
-                        setPreloadedData({
-                          parent: parentIssue.id,
-                        });
+                        setSubIssueModalActive(true);
                       }}
                     >
-                      <PlusIcon className="h-3 w-3" />
-                      Create new
-                    </button>
-
-                    <CustomMenu ellipsis>
-                      <CustomMenu.MenuItem
-                        onClick={() => {
-                          setSubIssueModalActive(true);
-                        }}
-                      >
-                        Add an existing issue
-                      </CustomMenu.MenuItem>
-                    </CustomMenu>
-                  </div>
-                ) : null}
-              </div>
-              <Transition
-                enter="transition duration-100 ease-out"
-                enterFrom="transform scale-95 opacity-0"
-                enterTo="transform scale-100 opacity-100"
-                leave="transition duration-75 ease-out"
-                leaveFrom="transform scale-100 opacity-100"
-                leaveTo="transform scale-95 opacity-0"
-              >
-                <Disclosure.Panel className="mt-3 flex flex-col gap-y-1">
-                  {issues.map((issue) => (
-                    <div
-                      key={issue.id}
-                      className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-gray-100"
-                    >
-                      <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}>
-                        <a className="flex items-center gap-2 rounded text-xs">
-                          <span
-                            className={`block h-1.5 w-1.5 rounded-full`}
-                            style={{
-                              backgroundColor: issue.state_detail.color,
-                            }}
-                          />
-                          <span className="flex-shrink-0 text-gray-600">
-                            {issue.project_detail.identifier}-{issue.sequence_id}
-                          </span>
-                          <span className="max-w-sm break-all font-medium">{issue.name}</span>
-                        </a>
-                      </Link>
+                      Add an existing issue
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
+                </div>
+              ) : null}
+            </div>
+            <Transition
+              enter="transition duration-100 ease-out"
+              enterFrom="transform scale-95 opacity-0"
+              enterTo="transform scale-100 opacity-100"
+              leave="transition duration-75 ease-out"
+              leaveFrom="transform scale-100 opacity-100"
+              leaveTo="transform scale-95 opacity-0"
+            >
+              <Disclosure.Panel className="mt-3 flex flex-col gap-y-1">
+                {issues.map((issue) => (
+                  <div
+                    key={issue.id}
+                    className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-gray-100"
+                  >
+                    <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}>
+                      <a className="flex items-center gap-2 rounded text-xs">
+                        <span
+                          className={`block h-1.5 w-1.5 rounded-full`}
+                          style={{
+                            backgroundColor: issue.state_detail.color,
+                          }}
+                        />
+                        <span className="flex-shrink-0 text-gray-600">
+                          {issue.project_detail.identifier}-{issue.sequence_id}
+                        </span>
+                        <span className="max-w-sm break-all font-medium">{issue.name}</span>
+                      </a>
+                    </Link>
+                    {!isNotAllowed && (
                       <div className="opacity-0 group-hover:opacity-100">
                         <CustomMenu ellipsis>
                           <CustomMenu.MenuItem onClick={() => handleSubIssueRemove(issue.id)}>
@@ -129,40 +133,14 @@ export const SubIssueList: FC<SubIssueListProps> = ({
                           </CustomMenu.MenuItem>
                         </CustomMenu>
                       </div>
-                    </div>
-                  ))}
-                </Disclosure.Panel>
-              </Transition>
-            </>
-          )}
-        </Disclosure>
-      ) : (
-        <CustomMenu
-          label={
-            <>
-              <PlusIcon className="h-3 w-3" />
-              Add sub-issue
-            </>
-          }
-          optionsPosition="left"
-          noBorder
-        >
-          <CustomMenu.MenuItem
-            onClick={() => {
-              openIssueModal();
-            }}
-          >
-            Create new
-          </CustomMenu.MenuItem>
-          <CustomMenu.MenuItem
-            onClick={() => {
-              openSubIssueModal();
-            }}
-          >
-            Add an existing issue
-          </CustomMenu.MenuItem>
-        </CustomMenu>
-      )}
+                    )}
+                  </div>
+                ))}
+              </Disclosure.Panel>
+            </Transition>
+          </>
+        )}
+      </Disclosure>
     </>
   );
 };
diff --git a/apps/app/components/onboarding/user-details.tsx b/apps/app/components/onboarding/user-details.tsx
index f2755a1f4..99d4d5168 100644
--- a/apps/app/components/onboarding/user-details.tsx
+++ b/apps/app/components/onboarding/user-details.tsx
@@ -34,8 +34,8 @@ const UserDetails: React.FC<Props> = ({ user, setStep }) => {
     defaultValues,
   });
 
-  const onSubmit = (formData: IUser) => {
-    userService
+  const onSubmit = async (formData: IUser) => {
+    await userService
       .updateUser(formData)
       .then(() => {
         setToastAlert({
diff --git a/apps/app/components/onboarding/workspace.tsx b/apps/app/components/onboarding/workspace.tsx
index 8a4b4b016..786459c08 100644
--- a/apps/app/components/onboarding/workspace.tsx
+++ b/apps/app/components/onboarding/workspace.tsx
@@ -55,15 +55,17 @@ const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
   const handleCreateWorkspace = async (formData: IWorkspace) => {
     await workspaceService
       .workspaceSlugCheck(formData.slug)
-      .then((res) => {
+      .then(async (res) => {
         if (res.status === true) {
-          workspaceService
+          setSlugError(false);
+          await workspaceService
             .createWorkspace(formData)
             .then((res) => {
               console.log(res);
               setToastAlert({
                 type: "success",
-                title: "Workspace created successfully!",
+                title: "Success!",
+                message: "Workspace created successfully.",
               });
               setWorkspace(res);
               setStep(3);
@@ -160,10 +162,10 @@ const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
                       <span className="text-sm text-slate-600">{"https://app.plane.so/"}</span>
                       <Input
                         name="slug"
-                        mode="transparent"
+                        mode="trueTransparent"
                         autoComplete="off"
                         register={register}
-                        className="block w-full rounded-md bg-transparent py-2 px-0 text-sm  focus:outline-none focus:ring-0"
+                        className="block w-full rounded-md bg-transparent py-2 px-0 text-sm focus:outline-none focus:ring-0"
                       />
                     </div>
                     {slugError && (
diff --git a/apps/app/components/project/cycles/create-update-cycle-modal.tsx b/apps/app/components/project/cycles/create-update-cycle-modal.tsx
index ef0a75cf5..30348e587 100644
--- a/apps/app/components/project/cycles/create-update-cycle-modal.tsx
+++ b/apps/app/components/project/cycles/create-update-cycle-modal.tsx
@@ -217,15 +217,7 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
                                 <CustomDatePicker
                                   renderAs="input"
                                   value={value}
-                                  onChange={(val: Date) => {
-                                    onChange(
-                                      val
-                                        ? `${val.getFullYear()}-${
-                                            val.getMonth() + 1
-                                          }-${val.getDate()}`
-                                        : null
-                                    );
-                                  }}
+                                  onChange={onChange}
                                   error={errors.start_date ? true : false}
                                 />
                               )}
@@ -246,15 +238,7 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
                                 <CustomDatePicker
                                   renderAs="input"
                                   value={value}
-                                  onChange={(val: Date) => {
-                                    onChange(
-                                      val
-                                        ? `${val.getFullYear()}-${
-                                            val.getMonth() + 1
-                                          }-${val.getDate()}`
-                                        : null
-                                    );
-                                  }}
+                                  onChange={onChange}
                                   error={errors.end_date ? true : false}
                                 />
                               )}
diff --git a/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx b/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx
index dd81f0692..323b4f5f8 100644
--- a/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx
+++ b/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx
@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 
 import { useRouter } from "next/router";
+import Image from "next/image";
 
 import { mutate } from "swr";
 
@@ -129,14 +130,28 @@ const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) =>
                   <UserIcon className="h-4 w-4 flex-shrink-0" />
                   <p>Owned by</p>
                 </div>
-                <div className="sm:basis-1/2">
-                  {cycle.owned_by.first_name !== "" ? (
-                    <>
-                      {cycle.owned_by.first_name} {cycle.owned_by.last_name}
-                    </>
-                  ) : (
-                    cycle.owned_by.email
-                  )}
+                <div className="sm:basis-1/2 flex items-center gap-1">
+                  {cycle.owned_by &&
+                    (cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
+                      <div className="h-5 w-5 rounded-full border-2 border-transparent">
+                        <Image
+                          src={cycle.owned_by.avatar}
+                          height="100%"
+                          width="100%"
+                          className="rounded-full"
+                          alt={cycle.owned_by?.first_name}
+                        />
+                      </div>
+                    ) : (
+                      <div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 capitalize text-white">
+                        {cycle.owned_by?.first_name && cycle.owned_by.first_name !== ""
+                          ? cycle.owned_by.first_name.charAt(0)
+                          : cycle.owned_by?.email.charAt(0)}
+                      </div>
+                    ))}
+                  {cycle.owned_by.first_name !== ""
+                    ? cycle.owned_by.first_name
+                    : cycle.owned_by.email}
                 </div>
               </div>
               <div className="flex flex-wrap items-center py-2">
@@ -171,13 +186,11 @@ const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) =>
                     render={({ field: { value } }) => (
                       <CustomDatePicker
                         value={value}
-                        onChange={(val: Date) => {
+                        onChange={(val) =>
                           submitChanges({
-                            start_date: val
-                              ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
-                              : null,
-                          });
-                        }}
+                            start_date: val,
+                          })
+                        }
                         isClearable={false}
                       />
                     )}
@@ -196,13 +209,11 @@ const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) =>
                     render={({ field: { value } }) => (
                       <CustomDatePicker
                         value={value}
-                        onChange={(val: Date) => {
+                        onChange={(val) =>
                           submitChanges({
-                            end_date: val
-                              ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
-                              : null,
-                          });
-                        }}
+                            end_date: val,
+                          })
+                        }
                         isClearable={false}
                       />
                     )}
diff --git a/apps/app/components/project/issues/confirm-issue-deletion.tsx b/apps/app/components/project/issues/confirm-issue-deletion.tsx
index 38d2258ce..12b8c63e9 100644
--- a/apps/app/components/project/issues/confirm-issue-deletion.tsx
+++ b/apps/app/components/project/issues/confirm-issue-deletion.tsx
@@ -25,9 +25,7 @@ type Props = {
   data?: IIssue;
 };
 
-const ConfirmIssueDeletion: React.FC<Props> = (props) => {
-  const { isOpen, handleClose, data } = props;
-
+const ConfirmIssueDeletion: React.FC<Props> = ({ isOpen, handleClose, data }) => {
   const cancelButtonRef = useRef(null);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
@@ -45,6 +43,8 @@ const ConfirmIssueDeletion: React.FC<Props> = (props) => {
     handleClose();
   };
 
+  console.log(data);
+
   const handleDeletion = async () => {
     setIsDeleteLoading(true);
     if (!data || !workspaceSlug) return;
@@ -62,8 +62,8 @@ const ConfirmIssueDeletion: React.FC<Props> = (props) => {
           false
         );
 
-        const moduleId = data.issue_module?.module;
-        const cycleId = data.issue_cycle?.cycle;
+        const moduleId = data?.module;
+        const cycleId = data?.cycle;
 
         if (moduleId) {
           mutate<ModuleIssueResponse[]>(
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 b46b4c3e1..fb18d4ebd 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
@@ -39,7 +39,7 @@ import {
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
-import type { ICycle, IIssue, IIssueLabels } from "types";
+import type { ICycle, IIssue, IIssueLabels, UserAuth } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS, PROJECT_ISSUES_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
 
@@ -50,6 +50,7 @@ type Props = {
   submitChanges: (formData: Partial<IIssue>) => void;
   issueDetail: IIssue | undefined;
   watch: UseFormWatch<IIssue>;
+  userAuth: UserAuth;
 };
 
 const defaultValues: Partial<IIssueLabels> = {
@@ -62,6 +63,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
   submitChanges,
   issueDetail,
   watch: watchIssue,
+  userAuth,
 }) => {
   const [createLabelForm, setCreateLabelForm] = useState(false);
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
@@ -122,6 +124,8 @@ const IssueDetailSidebar: React.FC<Props> = ({
       });
   };
 
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
   return (
     <>
       <ConfirmIssueDeletion
@@ -158,20 +162,22 @@ const IssueDetailSidebar: React.FC<Props> = ({
             >
               <LinkIcon className="h-3.5 w-3.5" />
             </button>
-            <button
-              type="button"
-              className="rounded-md border border-red-500 p-2 text-red-500 shadow-sm duration-300 hover:bg-red-50 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
-              onClick={() => setDeleteIssueModal(true)}
-            >
-              <TrashIcon className="h-3.5 w-3.5" />
-            </button>
+            {!isNotAllowed && (
+              <button
+                type="button"
+                className="rounded-md border border-red-500 p-2 text-red-500 shadow-sm duration-300 hover:bg-red-50 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                onClick={() => setDeleteIssueModal(true)}
+              >
+                <TrashIcon className="h-3.5 w-3.5" />
+              </button>
+            )}
           </div>
         </div>
         <div className="divide-y-2 divide-gray-100">
           <div className="py-1">
-            <SelectState control={control} submitChanges={submitChanges} />
-            <SelectAssignee control={control} submitChanges={submitChanges} />
-            <SelectPriority control={control} submitChanges={submitChanges} watch={watchIssue} />
+            <SelectState control={control} submitChanges={submitChanges} userAuth={userAuth} />
+            <SelectAssignee control={control} submitChanges={submitChanges} userAuth={userAuth} />
+            <SelectPriority control={control} submitChanges={submitChanges} userAuth={userAuth} />
           </div>
           <div className="py-1">
             <SelectParent
@@ -202,16 +208,19 @@ const IssueDetailSidebar: React.FC<Props> = ({
                 )
               }
               watch={watchIssue}
+              userAuth={userAuth}
             />
             <SelectBlocker
               submitChanges={submitChanges}
               issuesList={issues?.results.filter((i) => i.id !== issueDetail?.id) ?? []}
               watch={watchIssue}
+              userAuth={userAuth}
             />
             <SelectBlocked
               submitChanges={submitChanges}
               issuesList={issues?.results.filter((i) => i.id !== issueDetail?.id) ?? []}
               watch={watchIssue}
+              userAuth={userAuth}
             />
             <div className="flex flex-wrap items-center py-2">
               <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@@ -219,37 +228,18 @@ const IssueDetailSidebar: React.FC<Props> = ({
                 <p>Due date</p>
               </div>
               <div className="sm:basis-1/2">
-                {/* <Controller
-                  control={control}
-                  name="target_date"
-                  render={({ field: { value, onChange } }) => (
-                    <DatePicker
-                      selected={value ? new Date(value) : new Date()}
-                      onChange={(val: Date) => {
-                        submitChanges({
-                          target_date: `${val.getFullYear()}-${
-                            val.getMonth() + 1
-                          }-${val.getDate()}`,
-                        });
-                        onChange(`${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`);
-                      }}
-                      dateFormat="dd-MM-yyyy"
-                    />
-                  )}
-                /> */}
                 <Controller
                   control={control}
                   name="target_date"
                   render={({ field: { value } }) => (
                     <CustomDatePicker
                       value={value}
-                      onChange={(val: Date) => {
+                      onChange={(val) =>
                         submitChanges({
-                          target_date: val
-                            ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
-                            : null,
-                        });
-                      }}
+                          target_date: val,
+                        })
+                      }
+                      disabled={isNotAllowed}
                     />
                   )}
                 />
@@ -260,7 +250,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
             <SelectCycle
               issueDetail={issueDetail}
               handleCycleChange={handleCycleChange}
-              watch={watchIssue}
+              userAuth={userAuth}
             />
           </div>
         </div>
@@ -290,7 +280,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
                     >
                       <span
                         className="h-2 w-2 flex-shrink-0 rounded-full"
-                        style={{ backgroundColor: singleLabel.colour ?? "green" }}
+                        style={{ backgroundColor: singleLabel?.colour ?? "green" }}
                       />
                       {singleLabel.name}
                       <XMarkIcon className="h-2 w-2 group-hover:text-red-500" />
@@ -307,12 +297,19 @@ const IssueDetailSidebar: React.FC<Props> = ({
                       onChange={(val: any) => submitChanges({ labels_list: val })}
                       className="flex-shrink-0"
                       multiple
+                      disabled={isNotAllowed}
                     >
                       {({ open }) => (
                         <>
                           <Listbox.Label className="sr-only">Label</Listbox.Label>
                           <div className="relative">
-                            <Listbox.Button className="flex cursor-pointer items-center gap-2 rounded-2xl border px-2 py-0.5 text-xs hover:bg-gray-100">
+                            <Listbox.Button
+                              className={`flex ${
+                                isNotAllowed
+                                  ? "cursor-not-allowed"
+                                  : "cursor-pointer hover:bg-gray-100"
+                              } items-center gap-2 rounded-2xl border px-2 py-0.5 text-xs`}
+                            >
                               Select Label
                             </Listbox.Button>
 
@@ -361,8 +358,11 @@ const IssueDetailSidebar: React.FC<Props> = ({
                 />
                 <button
                   type="button"
-                  className="flex cursor-pointer items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs hover:bg-gray-100"
+                  className={`flex ${
+                    isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
+                  } items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs`}
                   onClick={() => setCreateLabelForm((prevData) => !prevData)}
+                  disabled={isNotAllowed}
                 >
                   {createLabelForm ? (
                     <>
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-assignee.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-assignee.tsx
index c8c8f336b..ceefa5e7a 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-assignee.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-assignee.tsx
@@ -5,29 +5,29 @@ import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
+// react-hook-form
 import { Control, Controller } from "react-hook-form";
-// services
+// headless ui
 import { Listbox, Transition } from "@headlessui/react";
+// services
 import { UserGroupIcon } from "@heroicons/react/24/outline";
 import workspaceService from "services/workspace.service";
 // hooks
-// headless ui
 // ui
 import { AssigneesList } from "components/ui/avatar";
 import { Spinner } from "components/ui";
-// icons
-import User from "public/user.png";
 // types
-import { IIssue } from "types";
+import { IIssue, UserAuth } from "types";
 // constants
 import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
 
 type Props = {
   control: Control<IIssue, any>;
   submitChanges: (formData: Partial<IIssue>) => void;
+  userAuth: UserAuth;
 };
 
-const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
+const SelectAssignee: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
@@ -36,6 +36,8 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
     workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
   );
 
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
   return (
     <div className="flex flex-wrap items-center py-2">
       <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@@ -55,16 +57,21 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
                 submitChanges({ assignees_list: value });
               }}
               className="flex-shrink-0"
+              disabled={isNotAllowed}
             >
               {({ open }) => (
                 <div className="relative">
-                  <Listbox.Button className="flex w-full cursor-pointer items-center gap-1 text-xs">
+                  <Listbox.Button
+                    className={`flex w-full ${
+                      isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
+                    } items-center gap-1 text-xs`}
+                  >
                     <span
                       className={`hidden truncate text-left sm:block ${
                         value ? "" : "text-gray-900"
                       }`}
                     >
-                      <div className="flex cursor-pointer items-center gap-1 text-xs">
+                      <div className="flex items-center gap-1 text-xs">
                         {value && Array.isArray(value) ? (
                           <AssigneesList userIds={value} length={10} />
                         ) : null}
@@ -82,7 +89,7 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
                     leaveFrom="transform opacity-100 scale-100"
                     leaveTo="transform opacity-0 scale-95"
                   >
-                    <Listbox.Options className="absolute left-0 z-10 mt-1 max-h-48 w-auto overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                    <Listbox.Options className="absolute left-0 z-10 mt-1 max-h-48 w-full overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                       <div className="py-1">
                         {people ? (
                           people.length > 0 ? (
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx
index 1c5822e7e..0e8ec0881 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx
@@ -19,7 +19,7 @@ import { Button } from "components/ui";
 import { FolderIcon, MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { BlockedIcon, LayerDiagonalIcon } from "components/icons";
 // types
-import { IIssue } from "types";
+import { IIssue, UserAuth } from "types";
 // fetch-keys
 import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 
@@ -31,9 +31,10 @@ type Props = {
   submitChanges: (formData: Partial<IIssue>) => void;
   issuesList: IIssue[];
   watch: UseFormWatch<IIssue>;
+  userAuth: UserAuth;
 };
 
-const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch }) => {
+const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch, userAuth }) => {
   const [query, setQuery] = useState("");
   const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
 
@@ -95,6 +96,8 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
               .includes(query.toLowerCase())
         );
 
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
   return (
     <div className="flex flex-wrap items-start py-2">
       <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@@ -266,16 +269,18 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
                       </Combobox.Options>
                     </Combobox>
 
-                    <div className="flex items-center justify-end gap-2 p-3">
-                      <div>
-                        <Button type="button" theme="secondary" size="sm" onClick={handleClose}>
-                          Close
+                    {filteredIssues.length > 0 && (
+                      <div className="flex items-center justify-end gap-2 p-3">
+                        <div>
+                          <Button type="button" theme="secondary" size="sm" onClick={handleClose}>
+                            Close
+                          </Button>
+                        </div>
+                        <Button onClick={handleSubmit(onSubmit)} size="sm">
+                          Add selected issues
                         </Button>
                       </div>
-                      <Button onClick={handleSubmit(onSubmit)} size="sm">
-                        Add selected issues
-                      </Button>
-                    </div>
+                    )}
                   </form>
                 </Dialog.Panel>
               </Transition.Child>
@@ -284,8 +289,11 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
         </Transition.Root>
         <button
           type="button"
-          className="flex w-full cursor-pointer items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+          className={`flex w-full ${
+            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
+          } items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
           onClick={() => setIsBlockedModalOpen(true)}
+          disabled={isNotAllowed}
         >
           Select issues
         </button>
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx
index e2cb85e6f..433f5c9fe 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx
@@ -19,7 +19,7 @@ import { Button } from "components/ui";
 import { FolderIcon, MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { BlockerIcon, LayerDiagonalIcon } from "components/icons";
 // types
-import { IIssue } from "types";
+import { IIssue, UserAuth } from "types";
 // fetch-keys
 import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 
@@ -31,9 +31,10 @@ type Props = {
   submitChanges: (formData: Partial<IIssue>) => void;
   issuesList: IIssue[];
   watch: UseFormWatch<IIssue>;
+  userAuth: UserAuth;
 };
 
-const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch }) => {
+const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch, userAuth }) => {
   const [query, setQuery] = useState("");
   const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
 
@@ -95,6 +96,8 @@ const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
               .includes(query.toLowerCase())
         );
 
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
   return (
     <div className="flex flex-wrap items-start py-2">
       <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@@ -265,16 +268,18 @@ const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
                     </Combobox.Options>
                   </Combobox>
 
-                  <div className="flex items-center justify-end gap-2 p-3">
-                    <div>
-                      <Button type="button" theme="secondary" size="sm" onClick={handleClose}>
-                        Close
+                  {filteredIssues.length > 0 && (
+                    <div className="flex items-center justify-end gap-2 p-3">
+                      <div>
+                        <Button type="button" theme="secondary" size="sm" onClick={handleClose}>
+                          Close
+                        </Button>
+                      </div>
+                      <Button onClick={handleSubmit(onSubmit)} size="sm">
+                        Add selected issues
                       </Button>
                     </div>
-                    <Button onClick={handleSubmit(onSubmit)} size="sm">
-                      Add selected issues
-                    </Button>
-                  </div>
+                  )}
                 </Dialog.Panel>
               </Transition.Child>
             </div>
@@ -282,8 +287,11 @@ const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
         </Transition.Root>
         <button
           type="button"
-          className="flex w-full cursor-pointer items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+          className={`flex w-full ${
+            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
+          } items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
           onClick={() => setIsBlockerModalOpen(true)}
+          disabled={isNotAllowed}
         >
           Select issues
         </button>
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-cycle.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-cycle.tsx
index 9830204b5..159f96c68 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-cycle.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-cycle.tsx
@@ -4,8 +4,6 @@ import { useRouter } from "next/router";
 
 import useSWR, { mutate } from "swr";
 
-// react-hook-form
-import { UseFormWatch } from "react-hook-form";
 // services
 import issuesService from "services/issues.service";
 import cyclesService from "services/cycles.service";
@@ -14,17 +12,17 @@ import { Spinner, CustomSelect } from "components/ui";
 // icons
 import { CyclesIcon } from "components/icons";
 // types
-import { ICycle, IIssue } from "types";
+import { ICycle, IIssue, UserAuth } from "types";
 // fetch-keys
 import { CYCLE_ISSUES, CYCLE_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
 
 type Props = {
   issueDetail: IIssue | undefined;
   handleCycleChange: (cycle: ICycle) => void;
-  watch: UseFormWatch<IIssue>;
+  userAuth: UserAuth;
 };
 
-const SelectCycle: React.FC<Props> = ({ issueDetail, handleCycleChange }) => {
+const SelectCycle: React.FC<Props> = ({ issueDetail, handleCycleChange, userAuth }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
 
@@ -52,6 +50,8 @@ const SelectCycle: React.FC<Props> = ({ issueDetail, handleCycleChange }) => {
 
   const issueCycle = issueDetail?.issue_cycle;
 
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
   return (
     <div className="flex flex-wrap items-center py-2">
       <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@@ -73,6 +73,7 @@ const SelectCycle: React.FC<Props> = ({ issueDetail, handleCycleChange }) => {
               ? removeIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "")
               : handleCycleChange(cycles?.find((c) => c.id === value) as any);
           }}
+          disabled={isNotAllowed}
         >
           {cycles ? (
             cycles.length > 0 ? (
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-parent.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-parent.tsx
index ecacedd84..7cb298324 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-parent.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-parent.tsx
@@ -13,7 +13,7 @@ import issuesServices from "services/issues.service";
 import IssuesListModal from "components/project/issues/issues-list-modal";
 // icons
 // types
-import { IIssue } from "types";
+import { IIssue, UserAuth } from "types";
 // fetch-keys
 import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 
@@ -23,6 +23,7 @@ type Props = {
   issuesList: IIssue[];
   customDisplay: JSX.Element;
   watch: UseFormWatch<IIssue>;
+  userAuth: UserAuth;
 };
 
 const SelectParent: React.FC<Props> = ({
@@ -31,6 +32,7 @@ const SelectParent: React.FC<Props> = ({
   issuesList,
   customDisplay,
   watch,
+  userAuth,
 }) => {
   const [isParentModalOpen, setIsParentModalOpen] = useState(false);
 
@@ -46,6 +48,8 @@ const SelectParent: React.FC<Props> = ({
       : null
   );
 
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
   return (
     <div className="flex flex-wrap items-center py-2">
       <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@@ -73,8 +77,11 @@ const SelectParent: React.FC<Props> = ({
         />
         <button
           type="button"
-          className="flex w-full cursor-pointer items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+          className={`flex w-full ${
+            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
+          } items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
           onClick={() => setIsParentModalOpen(true)}
+          disabled={isNotAllowed}
         >
           {watch("parent") && watch("parent") !== ""
             ? `${
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-priority.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-priority.tsx
index fadec2b6d..8057b14ec 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-priority.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-priority.tsx
@@ -7,7 +7,7 @@ import { ChartBarIcon } from "@heroicons/react/24/outline";
 import { CustomSelect } from "components/ui";
 // icons
 // types
-import { IIssue } from "types";
+import { IIssue, UserAuth } from "types";
 // common
 // constants
 import { getPriorityIcon } from "constants/global";
@@ -16,52 +16,54 @@ import { PRIORITIES } from "constants/";
 type Props = {
   control: Control<IIssue, any>;
   submitChanges: (formData: Partial<IIssue>) => void;
-  watch: UseFormWatch<IIssue>;
+  userAuth: UserAuth;
 };
 
-const SelectPriority: React.FC<Props> = ({ control, submitChanges, watch }) => (
-  <div className="flex flex-wrap items-center py-2">
-    <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
-      <ChartBarIcon className="h-4 w-4 flex-shrink-0" />
-      <p>Priority</p>
+const SelectPriority: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
+  return (
+    <div className="flex flex-wrap items-center py-2">
+      <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
+        <ChartBarIcon className="h-4 w-4 flex-shrink-0" />
+        <p>Priority</p>
+      </div>
+      <div className="sm:basis-1/2">
+        <Controller
+          control={control}
+          name="priority"
+          render={({ field: { value } }) => (
+            <CustomSelect
+              label={
+                <span
+                  className={`flex items-center gap-2 text-left capitalize ${
+                    value ? "" : "text-gray-900"
+                  }`}
+                >
+                  {getPriorityIcon(value && value !== "" ? value ?? "" : "None", "text-sm")}
+                  {value && value !== "" ? value : "None"}
+                </span>
+              }
+              value={value}
+              onChange={(value: any) => {
+                submitChanges({ priority: value });
+              }}
+              disabled={isNotAllowed}
+            >
+              {PRIORITIES.map((option) => (
+                <CustomSelect.Option key={option} value={option} className="capitalize">
+                  <>
+                    {getPriorityIcon(option, "text-sm")}
+                    {option ?? "None"}
+                  </>
+                </CustomSelect.Option>
+              ))}
+            </CustomSelect>
+          )}
+        />
+      </div>
     </div>
-    <div className="sm:basis-1/2">
-      <Controller
-        control={control}
-        name="state"
-        render={({ field: { value } }) => (
-          <CustomSelect
-            label={
-              <span
-                className={`flex items-center gap-2 text-left capitalize ${
-                  value ? "" : "text-gray-900"
-                }`}
-              >
-                {getPriorityIcon(
-                  watch("priority") && watch("priority") !== "" ? watch("priority") ?? "" : "None",
-                  "text-sm"
-                )}
-                {watch("priority") && watch("priority") !== "" ? watch("priority") : "None"}
-              </span>
-            }
-            value={value}
-            onChange={(value: any) => {
-              submitChanges({ priority: value });
-            }}
-          >
-            {PRIORITIES.map((option) => (
-              <CustomSelect.Option key={option} value={option} className="capitalize">
-                <>
-                  {getPriorityIcon(option, "text-sm")}
-                  {option ?? "None"}
-                </>
-              </CustomSelect.Option>
-            ))}
-          </CustomSelect>
-        )}
-      />
-    </div>
-  </div>
-);
+  );
+};
 
 export default SelectPriority;
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-state.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-state.tsx
index c3bd86120..8906de605 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-state.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-state.tsx
@@ -12,16 +12,17 @@ import stateService from "services/state.service";
 import { Spinner, CustomSelect } from "components/ui";
 // icons
 // types
-import { IIssue } from "types";
+import { IIssue, UserAuth } from "types";
 // constants
 import { STATE_LIST } from "constants/fetch-keys";
 
 type Props = {
   control: Control<IIssue, any>;
   submitChanges: (formData: Partial<IIssue>) => void;
+  userAuth: UserAuth;
 };
 
-const SelectState: React.FC<Props> = ({ control, submitChanges }) => {
+const SelectState: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -32,6 +33,8 @@ const SelectState: React.FC<Props> = ({ control, submitChanges }) => {
       : null
   );
 
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
   return (
     <div className="flex flex-wrap items-center py-2">
       <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@@ -67,6 +70,7 @@ const SelectState: React.FC<Props> = ({ control, submitChanges }) => {
               onChange={(value: any) => {
                 submitChanges({ state: value });
               }}
+              disabled={isNotAllowed}
             >
               {states ? (
                 states.length > 0 ? (
diff --git a/apps/app/components/project/modules/create-update-module-modal/index.tsx b/apps/app/components/project/modules/create-update-module-modal/index.tsx
index b0ed3d561..d4482ab9e 100644
--- a/apps/app/components/project/modules/create-update-module-modal/index.tsx
+++ b/apps/app/components/project/modules/create-update-module-modal/index.tsx
@@ -207,15 +207,7 @@ const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, pro
                                 <CustomDatePicker
                                   renderAs="input"
                                   value={value}
-                                  onChange={(val: Date) => {
-                                    onChange(
-                                      val
-                                        ? `${val.getFullYear()}-${
-                                            val.getMonth() + 1
-                                          }-${val.getDate()}`
-                                        : null
-                                    );
-                                  }}
+                                  onChange={onChange}
                                   error={errors.start_date ? true : false}
                                 />
                               )}
@@ -236,15 +228,7 @@ const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, pro
                                 <CustomDatePicker
                                   renderAs="input"
                                   value={value}
-                                  onChange={(val: Date) => {
-                                    onChange(
-                                      val
-                                        ? `${val.getFullYear()}-${
-                                            val.getMonth() + 1
-                                          }-${val.getDate()}`
-                                        : null
-                                    );
-                                  }}
+                                  onChange={onChange}
                                   error={errors.target_date ? true : false}
                                 />
                               )}
diff --git a/apps/app/components/project/modules/create-update-module-modal/select-status.tsx b/apps/app/components/project/modules/create-update-module-modal/select-status.tsx
index 2c81912de..591b0e9c6 100644
--- a/apps/app/components/project/modules/create-update-module-modal/select-status.tsx
+++ b/apps/app/components/project/modules/create-update-module-modal/select-status.tsx
@@ -1,14 +1,14 @@
-// react
 import React from "react";
+
 // react hook form
 import { Controller, FieldError, Control } from "react-hook-form";
-import { Squares2X2Icon } from "@heroicons/react/24/outline";
-// import type { Control } from "react-hook-form";
 // ui
-import type { IModule } from "types";
 import { CustomListbox } from "components/ui";
 // icons
+import { Squares2X2Icon } from "@heroicons/react/24/outline";
 // types
+import type { IModule } from "types";
+// constants
 import { MODULE_STATUS } from "constants/";
 
 type Props = {
@@ -16,38 +16,33 @@ type Props = {
   error?: FieldError;
 };
 
-const SelectStatus: React.FC<Props> = (props) => {
-  const { control, error } = props;
-
-  return (
-    <Controller
-      control={control}
-      rules={{ required: true }}
-      name="status"
-      render={({ field: { value, onChange } }) => (
-        <div>
-          <CustomListbox
-            className={`${
-              error
-                ? "border-red-300 text-red-900 placeholder-red-300 focus:border-red-500 focus:outline-none focus:ring-red-500"
-                : ""
-            }`}
-            title="Status"
-            options={MODULE_STATUS.map((status) => ({
-              value: status.value,
-              display: status.label,
-              color: status.color,
-            }))}
-            value={value}
-            optionsFontsize="sm"
-            onChange={onChange}
-            icon={<Squares2X2Icon className="h-3 w-3 text-gray-400" />}
-          />
-          {error && <p className="mt-1 text-sm text-red-600">{error.message}</p>}
-        </div>
-      )}
-    />
-  );
-};
-
+const SelectStatus: React.FC<Props> = ({ control, error }) => (
+  <Controller
+    control={control}
+    rules={{ required: true }}
+    name="status"
+    render={({ field: { value, onChange } }) => (
+      <div>
+        <CustomListbox
+          className={`${
+            error
+              ? "border-red-500 bg-red-100 hover:bg-red-100 focus:outline-none focus:ring-red-500"
+              : ""
+          }`}
+          title="Status"
+          options={MODULE_STATUS.map((status) => ({
+            value: status.value,
+            display: status.label,
+            color: status.color,
+          }))}
+          value={value}
+          optionsFontsize="sm"
+          onChange={onChange}
+          icon={<Squares2X2Icon className={`h-3 w-3 ${error ? "text-black" : "text-gray-400"}`} />}
+        />
+        {error && <p className="mt-1 text-sm text-red-600">{error.message}</p>}
+      </div>
+    )}
+  />
+);
 export default SelectStatus;
diff --git a/apps/app/components/project/modules/module-detail-sidebar/index.tsx b/apps/app/components/project/modules/module-detail-sidebar/index.tsx
index dce925d1d..74e7beb93 100644
--- a/apps/app/components/project/modules/module-detail-sidebar/index.tsx
+++ b/apps/app/components/project/modules/module-detail-sidebar/index.tsx
@@ -5,6 +5,7 @@ import { useRouter } from "next/router";
 
 import { mutate } from "swr";
 
+// react-hook-form
 import { Controller, useForm } from "react-hook-form";
 // services
 import {
@@ -160,7 +161,11 @@ const ModuleDetailSidebar: React.FC<Props> = ({
             </div>
             <div className="divide-y-2 divide-gray-100 text-xs">
               <div className="py-1">
-                <SelectLead control={control} submitChanges={submitChanges} />
+                <SelectLead
+                  control={control}
+                  submitChanges={submitChanges}
+                  lead={module.lead_detail}
+                />
                 <SelectMembers control={control} submitChanges={submitChanges} />
                 <div className="flex flex-wrap items-center py-2">
                   <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@@ -194,13 +199,11 @@ const ModuleDetailSidebar: React.FC<Props> = ({
                       render={({ field: { value } }) => (
                         <CustomDatePicker
                           value={value}
-                          onChange={(val: Date) => {
+                          onChange={(val) =>
                             submitChanges({
-                              start_date: val
-                                ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
-                                : null,
-                            });
-                          }}
+                              start_date: val,
+                            })
+                          }
                         />
                       )}
                     />
@@ -218,13 +221,11 @@ const ModuleDetailSidebar: React.FC<Props> = ({
                       render={({ field: { value } }) => (
                         <CustomDatePicker
                           value={value}
-                          onChange={(val: Date) => {
+                          onChange={(val) =>
                             submitChanges({
-                              target_date: val
-                                ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
-                                : null,
-                            });
-                          }}
+                              target_date: val,
+                            })
+                          }
                         />
                       )}
                     />
diff --git a/apps/app/components/project/modules/module-detail-sidebar/select-lead.tsx b/apps/app/components/project/modules/module-detail-sidebar/select-lead.tsx
index b97c018cf..3b02f1f01 100644
--- a/apps/app/components/project/modules/module-detail-sidebar/select-lead.tsx
+++ b/apps/app/components/project/modules/module-detail-sidebar/select-lead.tsx
@@ -5,26 +5,27 @@ import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
+// react-hook-form
 import { Control, Controller } from "react-hook-form";
-// services
-import { Listbox, Transition } from "@headlessui/react";
-import { UserIcon } from "@heroicons/react/24/outline";
-import workspaceService from "services/workspace.service";
 // headless ui
-// ui
-import { Spinner } from "components/ui";
+import { Listbox, Transition } from "@headlessui/react";
+// services
+import workspaceService from "services/workspace.service";
 // icons
+import { UserIcon } from "@heroicons/react/24/outline";
+import User from "public/user.png";
 // types
-import { IModule } from "types";
-// constants
+import { IModule, IUserLite } from "types";
+// fetch-keys
 import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
 
 type Props = {
   control: Control<Partial<IModule>, any>;
   submitChanges: (formData: Partial<IModule>) => void;
+  lead: IUserLite | null;
 };
 
-const SelectLead: React.FC<Props> = ({ control, submitChanges }) => {
+const SelectLead: React.FC<Props> = ({ control, submitChanges, lead }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
@@ -52,102 +53,110 @@ const SelectLead: React.FC<Props> = ({ control, submitChanges }) => {
               }}
               className="flex-shrink-0"
             >
-              {({ open }) => {
-                const person = people?.find((p) => p.member.id === value)?.member;
-
-                return (
-                  <div className="relative">
-                    <Listbox.Button className="flex w-full cursor-pointer items-center gap-1 text-xs">
-                      <span
-                        className={`hidden truncate text-left sm:block ${
-                          value ? "" : "text-gray-900"
-                        }`}
-                      >
-                        <div className="flex cursor-pointer items-center gap-1 text-xs">
-                          {person && person.avatar && person.avatar !== "" ? (
+              {({ open }) => (
+                <div className="relative">
+                  <Listbox.Button className="flex w-full cursor-pointer items-center gap-1 text-xs">
+                    <span
+                      className={`hidden truncate text-left sm:block ${
+                        value ? "" : "text-gray-900"
+                      }`}
+                    >
+                      <div className="flex items-center gap-1 text-xs">
+                        {lead ? (
+                          lead.avatar && lead.avatar !== "" ? (
                             <div className="h-5 w-5 rounded-full border-2 border-transparent">
                               <Image
-                                src={person.avatar}
+                                src={lead.avatar}
                                 height="100%"
                                 width="100%"
                                 className="rounded-full"
-                                alt={person.first_name}
+                                alt={lead?.first_name}
                               />
                             </div>
                           ) : (
-                            <div
-                              className={`grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 capitalize text-white`}
-                            >
-                              {person?.first_name && person.first_name !== ""
-                                ? person.first_name.charAt(0)
-                                : person?.email.charAt(0)}
+                            <div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 capitalize text-white">
+                              {lead?.first_name && lead.first_name !== ""
+                                ? lead.first_name.charAt(0)
+                                : lead?.email.charAt(0)}
                             </div>
-                          )}
-                          {person?.first_name && person.first_name !== ""
-                            ? person?.first_name + " " + person?.last_name
-                            : person?.email}
-                        </div>
-                      </span>
-                    </Listbox.Button>
+                          )
+                        ) : (
+                          <div className="h-5 w-5 rounded-full border-2 border-white bg-white">
+                            <Image
+                              src={User}
+                              height="100%"
+                              width="100%"
+                              className="rounded-full"
+                              alt="No user"
+                            />
+                          </div>
+                        )}
+                        {lead
+                          ? lead?.first_name && lead.first_name !== ""
+                            ? lead?.first_name
+                            : lead?.email
+                          : "N/A"}
+                      </div>
+                    </span>
+                  </Listbox.Button>
 
-                    <Transition
-                      show={open}
-                      as={React.Fragment}
-                      enter="transition ease-out duration-100"
-                      enterFrom="transform opacity-0 scale-95"
-                      enterTo="transform opacity-100 scale-100"
-                      leave="transition ease-in duration-75"
-                      leaveFrom="transform opacity-100 scale-100"
-                      leaveTo="transform opacity-0 scale-95"
-                    >
-                      <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-48 w-full overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                        <div className="py-1">
-                          {people ? (
-                            people.length > 0 ? (
-                              people.map((option) => (
-                                <Listbox.Option
-                                  key={option.member.id}
-                                  className={({ active, selected }) =>
-                                    `${
-                                      active || selected ? "bg-indigo-50" : ""
-                                    } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
-                                  }
-                                  value={option.member.id}
-                                >
-                                  {option.member.avatar && option.member.avatar !== "" ? (
-                                    <div className="relative h-4 w-4">
-                                      <Image
-                                        src={option.member.avatar}
-                                        alt="avatar"
-                                        className="rounded-full"
-                                        layout="fill"
-                                        objectFit="cover"
-                                      />
-                                    </div>
-                                  ) : (
-                                    <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
-                                      {option.member.first_name && option.member.first_name !== ""
-                                        ? option.member.first_name.charAt(0)
-                                        : option.member.email.charAt(0)}
-                                    </div>
-                                  )}
-                                  {option.member.first_name && option.member.first_name !== ""
-                                    ? option.member.first_name
-                                    : option.member.email}
-                                </Listbox.Option>
-                              ))
-                            ) : (
-                              <div className="text-center">No members found</div>
-                            )
+                  <Transition
+                    show={open}
+                    as={React.Fragment}
+                    enter="transition ease-out duration-100"
+                    enterFrom="transform opacity-0 scale-95"
+                    enterTo="transform opacity-100 scale-100"
+                    leave="transition ease-in duration-75"
+                    leaveFrom="transform opacity-100 scale-100"
+                    leaveTo="transform opacity-0 scale-95"
+                  >
+                    <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-48 w-full overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                      <div className="py-1">
+                        {people ? (
+                          people.length > 0 ? (
+                            people.map((option) => (
+                              <Listbox.Option
+                                key={option.member.id}
+                                className={({ active, selected }) =>
+                                  `${
+                                    active || selected ? "bg-indigo-50" : ""
+                                  } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
+                                }
+                                value={option.member.id}
+                              >
+                                {option.member.avatar && option.member.avatar !== "" ? (
+                                  <div className="relative h-4 w-4">
+                                    <Image
+                                      src={option.member.avatar}
+                                      alt="avatar"
+                                      className="rounded-full"
+                                      layout="fill"
+                                      objectFit="cover"
+                                    />
+                                  </div>
+                                ) : (
+                                  <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
+                                    {option.member.first_name && option.member.first_name !== ""
+                                      ? option.member.first_name.charAt(0)
+                                      : option.member.email.charAt(0)}
+                                  </div>
+                                )}
+                                {option.member.first_name && option.member.first_name !== ""
+                                  ? option.member.first_name
+                                  : option.member.email}
+                              </Listbox.Option>
+                            ))
                           ) : (
-                            <Spinner />
-                          )}
-                        </div>
-                      </Listbox.Options>
-                    </Transition>
-                  </div>
-                );
-              }}
+                            <div className="text-center">No members found</div>
+                          )
+                        ) : (
+                          <p className="text-xs text-gray-500 px-2">Loading...</p>
+                        )}
+                      </div>
+                    </Listbox.Options>
+                  </Transition>
+                </div>
+              )}
             </Listbox>
           )}
         />
diff --git a/apps/app/components/project/modules/module-detail-sidebar/select-members.tsx b/apps/app/components/project/modules/module-detail-sidebar/select-members.tsx
index 1e862c9de..de7861aa1 100644
--- a/apps/app/components/project/modules/module-detail-sidebar/select-members.tsx
+++ b/apps/app/components/project/modules/module-detail-sidebar/select-members.tsx
@@ -12,7 +12,7 @@ import { UserGroupIcon } from "@heroicons/react/24/outline";
 import workspaceService from "services/workspace.service";
 // headless ui
 // ui
-import { AssigneesList, Spinner } from "components/ui";
+import { AssigneesList } from "components/ui";
 // types
 import { IModule } from "types";
 // constants
@@ -78,7 +78,7 @@ const SelectMembers: React.FC<Props> = ({ control, submitChanges }) => {
                     leaveFrom="transform opacity-100 scale-100"
                     leaveTo="transform opacity-0 scale-95"
                   >
-                    <Listbox.Options className="absolute left-0 z-10 mt-1 max-h-48 w-auto overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                    <Listbox.Options className="absolute left-0 z-10 mt-1 max-h-48 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none w-full">
                       <div className="py-1">
                         {people ? (
                           people.length > 0 ? (
@@ -118,7 +118,7 @@ const SelectMembers: React.FC<Props> = ({ control, submitChanges }) => {
                             <div className="text-center">No members found</div>
                           )
                         ) : (
-                          <Spinner />
+                          <p className="text-xs text-gray-500 px-2">Loading...</p>
                         )}
                       </div>
                     </Listbox.Options>
diff --git a/apps/app/components/project/sidebar-list.tsx b/apps/app/components/project/sidebar-list.tsx
index e5ff937f4..769ecf6b9 100644
--- a/apps/app/components/project/sidebar-list.tsx
+++ b/apps/app/components/project/sidebar-list.tsx
@@ -88,7 +88,7 @@ export const ProjectSidebarList: FC = () => {
                           }`}
                         >
                           {project.icon ? (
-                            <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase text-white">
+                            <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
                               {String.fromCodePoint(parseInt(project.icon))}
                             </span>
                           ) : (
diff --git a/apps/app/components/ui/custom-select/index.tsx b/apps/app/components/ui/custom-select/index.tsx
index da7644521..e3061bf68 100644
--- a/apps/app/components/ui/custom-select/index.tsx
+++ b/apps/app/components/ui/custom-select/index.tsx
@@ -39,8 +39,8 @@ const CustomSelect = ({
     <div>
       <Listbox.Button
         className={`flex w-full ${
-          disabled ? "cursor-not-allowed" : "cursor-pointer"
-        } items-center justify-between gap-1 rounded-md border shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
+          disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
+        } items-center justify-between gap-1 rounded-md border shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
           input ? "border-gray-300 px-3 py-2 text-sm" : "px-2 py-1 text-xs"
         } ${
           textAlignment === "right"
@@ -51,7 +51,7 @@ const CustomSelect = ({
         }`}
       >
         {label}
-        {!noChevron && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
+        {!noChevron && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
       </Listbox.Button>
     </div>
 
diff --git a/apps/app/components/ui/datepicker.tsx b/apps/app/components/ui/datepicker.tsx
index 03a10b023..9a4494ee4 100644
--- a/apps/app/components/ui/datepicker.tsx
+++ b/apps/app/components/ui/datepicker.tsx
@@ -5,12 +5,13 @@ import "react-datepicker/dist/react-datepicker.css";
 type Props = {
   renderAs?: "input" | "button";
   value: Date | string | null | undefined;
-  onChange: (arg: Date) => void;
+  onChange: (val: string | null) => void;
   placeholder?: string;
   displayShortForm?: boolean;
   error?: boolean;
   className?: string;
   isClearable?: boolean;
+  disabled?: boolean;
 };
 
 export const CustomDatePicker: React.FC<Props> = ({
@@ -22,19 +23,37 @@ export const CustomDatePicker: React.FC<Props> = ({
   error = false,
   className = "",
   isClearable = true,
+  disabled = false,
 }) => (
   <DatePicker
     placeholderText={placeholder}
     selected={value ? new Date(value) : null}
-    onChange={onChange}
-    dateFormat="dd-MM-yyyy"
+    onChange={(val) => {
+      if (!val) onChange(null);
+      else {
+        const year = val.getFullYear();
+        let month: number | string = val.getMonth() + 1;
+        let date: number | string = val.getDate();
+
+        if (date < 10) date = `0${date}`;
+        if (month < 10) month = `0${month}`;
+
+        onChange(`${year}-${month}-${date}`);
+      }
+    }}
     className={`${className} ${
       renderAs === "input"
-        ? "block bg-transparent text-sm focus:outline-none rounded-md border border-gray-300 px-3 py-2 w-full cursor-pointer"
+        ? "block bg-transparent text-sm focus:outline-none border-gray-300 px-3 py-2"
         : renderAs === "button"
-        ? "w-full rounded-md border px-2 py-1 text-xs shadow-sm hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 duration-300 cursor-pointer"
+        ? `px-2 py-1 text-xs shadow-sm ${
+            disabled ? "" : "hover:bg-gray-100"
+          } focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 duration-300`
         : ""
-    } ${error ? "border-red-500 bg-red-200" : ""} bg-transparent caret-transparent`}
+    } ${error ? "border-red-500 bg-red-100" : ""} ${
+      disabled ? "cursor-not-allowed" : "cursor-pointer"
+    } w-full rounded-md bg-transparent border caret-transparent`}
+    dateFormat="dd-MM-yyyy"
     isClearable={isClearable}
+    disabled={disabled}
   />
 );
diff --git a/apps/app/components/ui/input/index.tsx b/apps/app/components/ui/input/index.tsx
index de387d37a..df623bfbd 100644
--- a/apps/app/components/ui/input/index.tsx
+++ b/apps/app/components/ui/input/index.tsx
@@ -39,6 +39,8 @@ export const Input: React.FC<Props> = ({
           ? "rounded-md border border-gray-300"
           : mode === "transparent"
           ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-indigo-500"
+          : mode === "trueTransparent"
+          ? "rounded border-none bg-transparent ring-0"
           : ""
       } ${error ? "border-red-500" : ""} ${error && mode === "primary" ? "bg-red-100" : ""} ${
         fullWidth ? "w-full" : ""
diff --git a/apps/app/components/ui/input/types.d.ts b/apps/app/components/ui/input/types.d.ts
index 795fdb4ac..8207006df 100644
--- a/apps/app/components/ui/input/types.d.ts
+++ b/apps/app/components/ui/input/types.d.ts
@@ -5,7 +5,7 @@ export interface Props extends React.ComponentPropsWithoutRef<"input"> {
   label?: string;
   name: string;
   value?: string | number | readonly string[];
-  mode?: "primary" | "transparent" | "secondary" | "disabled";
+  mode?: "primary" | "transparent" | "trueTransparent" | "secondary" | "disabled";
   register?: UseFormRegister<any>;
   validations?: RegisterOptions;
   error?: any;
diff --git a/apps/app/components/workspace/help-section.tsx b/apps/app/components/workspace/help-section.tsx
index 72c05a496..806bdf98b 100644
--- a/apps/app/components/workspace/help-section.tsx
+++ b/apps/app/components/workspace/help-section.tsx
@@ -88,7 +88,6 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
         }`}
         onClick={() => {
           const e = new KeyboardEvent("keydown", {
-            ctrlKey: true,
             key: "h",
           });
           document.dispatchEvent(e);
diff --git a/apps/app/layouts/navbar/main-sidebar.tsx b/apps/app/layouts/navbar/main-sidebar.tsx
index 6e4fad82e..4d51fbcf9 100644
--- a/apps/app/layouts/navbar/main-sidebar.tsx
+++ b/apps/app/layouts/navbar/main-sidebar.tsx
@@ -129,7 +129,6 @@ const Sidebar: React.FC<Props> = ({ toggleSidebar, setToggleSidebar }) => {
                 }`}
                 onClick={() => {
                   const e = new KeyboardEvent("keydown", {
-                    ctrlKey: true,
                     key: "h",
                   });
                   document.dispatchEvent(e);
diff --git a/apps/app/pages/[workspaceSlug]/me/my-issues.tsx b/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
index 4c47a47bd..ce6deebe6 100644
--- a/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
@@ -98,8 +98,7 @@ const MyIssuesPage: NextPage = () => {
             label="Add Issue"
             onClick={() => {
               const e = new KeyboardEvent("keydown", {
-                key: "i",
-                ctrlKey: true,
+                key: "c",
               });
 
               document.dispatchEvent(e);
@@ -170,8 +169,7 @@ const MyIssuesPage: NextPage = () => {
                     Icon={PlusIcon}
                     action={() => {
                       const e = new KeyboardEvent("keydown", {
-                        key: "i",
-                        ctrlKey: true,
+                        key: "c",
                       });
                       document.dispatchEvent(e);
                     }}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
index 1438a6831..d8851371f 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -92,6 +92,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
     ...issue.issue_detail,
     sub_issues_count: issue.sub_issues_count,
     bridge: issue.id,
+    cycle: cycleId as string,
   }));
 
   const { data: members } = useSWR(
@@ -124,17 +125,17 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
   };
 
   const handleAddIssuesToCycle = async (data: { issues: string[] }) => {
-    if (workspaceSlug && projectId) {
-      await issuesServices
-        .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, data)
-        .then((res) => {
-          console.log(res);
-          mutate(CYCLE_ISSUES(cycleId as string));
-        })
-        .catch((e) => {
-          console.log(e);
-        });
-    }
+    if (!workspaceSlug || !projectId) return;
+
+    await issuesServices
+      .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, data)
+      .then((res) => {
+        console.log(res);
+        mutate(CYCLE_ISSUES(cycleId as string));
+      })
+      .catch((e) => {
+        console.log(e);
+      });
   };
 
   const removeIssueFromCycle = (bridgeId: string) => {
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index 029a1d785..6112f0a82 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -99,7 +99,6 @@ const ProjectCycles: NextPage = () => {
           label="Add Cycle"
           onClick={() => {
             const e = new KeyboardEvent("keydown", {
-              ctrlKey: true,
               key: "q",
             });
             document.dispatchEvent(e);
@@ -185,7 +184,6 @@ const ProjectCycles: NextPage = () => {
                 Icon={PlusIcon}
                 action={() => {
                   const e = new KeyboardEvent("keydown", {
-                    ctrlKey: true,
                     key: "q",
                   });
                   document.dispatchEvent(e);
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index 963563713..b74aa14d0 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -10,7 +10,7 @@ import { useForm } from "react-hook-form";
 // services
 import issuesService from "services/issues.service";
 // lib
-import { requiredAuth } from "lib/auth";
+import { requiredAdmin, requiredAuth } from "lib/auth";
 // layouts
 import AppLayout from "layouts/app-layout";
 // components
@@ -25,7 +25,7 @@ import { Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssue, IssueResponse } from "types";
+import { IIssue, IssueResponse, UserAuth } from "types";
 import type { NextPage, NextPageContext } from "next";
 // fetch-keys
 import {
@@ -49,7 +49,7 @@ const defaultValues = {
   labels_list: [],
 };
 
-const IssueDetailsPage: NextPage = () => {
+const IssueDetailsPage: NextPage<UserAuth> = (props) => {
   // states
   const [isOpen, setIsOpen] = useState(false);
   const [isAddAsSubIssueOpen, setIsAddAsSubIssueOpen] = useState(false);
@@ -182,6 +182,8 @@ const IssueDetailsPage: NextPage = () => {
       });
   };
 
+  const isNotAllowed = props.isGuest || props.isViewer;
+
   return (
     <AppLayout
       noPadding={true}
@@ -267,7 +269,11 @@ const IssueDetailsPage: NextPage = () => {
                   </CustomMenu>
                 </div>
               ) : null}
-              <IssueDescriptionForm issue={issueDetails} handleFormSubmit={submitChanges} />
+              <IssueDescriptionForm
+                issue={issueDetails}
+                handleFormSubmit={submitChanges}
+                userAuth={props}
+              />
               <div className="mt-2">
                 {issueId && workspaceSlug && projectId && subIssues?.length > 0 ? (
                   <SubIssueList
@@ -276,41 +282,44 @@ const IssueDetailsPage: NextPage = () => {
                     projectId={projectId?.toString()}
                     workspaceSlug={workspaceSlug?.toString()}
                     handleSubIssueRemove={handleSubIssueRemove}
+                    userAuth={props}
                   />
                 ) : (
-                  <CustomMenu
-                    label={
-                      <>
-                        <PlusIcon className="h-3 w-3" />
-                        Add sub-issue
-                      </>
-                    }
-                    optionsPosition="left"
-                    noBorder
-                  >
-                    <CustomMenu.MenuItem
-                      onClick={() => {
-                        setIsOpen(true);
-                        setPreloadedData({
-                          parent: issueDetails.id,
-                          actionType: "createIssue",
-                        });
-                      }}
+                  !isNotAllowed && (
+                    <CustomMenu
+                      label={
+                        <>
+                          <PlusIcon className="h-3 w-3" />
+                          Add sub-issue
+                        </>
+                      }
+                      optionsPosition="left"
+                      noBorder
                     >
-                      Create new
-                    </CustomMenu.MenuItem>
-                    <CustomMenu.MenuItem
-                      onClick={() => {
-                        setIsAddAsSubIssueOpen(true);
-                        setPreloadedData({
-                          parent: issueDetails.id,
-                          actionType: "createIssue",
-                        });
-                      }}
-                    >
-                      Add an existing issue
-                    </CustomMenu.MenuItem>
-                  </CustomMenu>
+                      <CustomMenu.MenuItem
+                        onClick={() => {
+                          setIsOpen(true);
+                          setPreloadedData({
+                            parent: issueDetails.id,
+                            actionType: "createIssue",
+                          });
+                        }}
+                      >
+                        Create new
+                      </CustomMenu.MenuItem>
+                      <CustomMenu.MenuItem
+                        onClick={() => {
+                          setIsAddAsSubIssueOpen(true);
+                          setPreloadedData({
+                            parent: issueDetails.id,
+                            actionType: "createIssue",
+                          });
+                        }}
+                      >
+                        Add an existing issue
+                      </CustomMenu.MenuItem>
+                    </CustomMenu>
+                  )
                 )}
               </div>
             </div>
@@ -329,6 +338,7 @@ const IssueDetailsPage: NextPage = () => {
               issueDetail={issueDetails}
               submitChanges={submitChanges}
               watch={watch}
+              userAuth={props}
             />
           </div>
         </div>
@@ -366,9 +376,17 @@ export const getServerSideProps = async (ctx: NextPageContext) => {
     };
   }
 
+  const projectId = ctx.query.projectId as string;
+  const workspaceSlug = ctx.query.workspaceSlug as string;
+
+  const memberDetail = await requiredAdmin(workspaceSlug, projectId, ctx.req?.headers.cookie);
+
   return {
     props: {
-      user,
+      isOwner: memberDetail?.role === 20,
+      isMember: memberDetail?.role === 15,
+      isViewer: memberDetail?.role === 10,
+      isGuest: memberDetail?.role === 5,
     },
   };
 };
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
index 0bfc2e299..44f51354f 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
@@ -22,7 +22,7 @@ import View from "components/core/view";
 import { Spinner, EmptySpace, EmptySpaceItem, HeaderButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // types
-import type { IIssue, IssueResponse, UserAuth } from "types";
+import type { IIssue, UserAuth } from "types";
 import type { NextPage, NextPageContext } from "next";
 // fetch-keys
 import { PROJECT_DETAILS, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
@@ -85,8 +85,7 @@ const ProjectIssues: NextPage<UserAuth> = (props) => {
               label="Add Issue"
               onClick={() => {
                 const e = new KeyboardEvent("keydown", {
-                  key: "i",
-                  ctrlKey: true,
+                  key: "c",
                 });
                 document.dispatchEvent(e);
               }}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
index 98cd911f4..0a679f58d 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
@@ -125,18 +125,19 @@ const SingleModule: React.FC<UserAuth> = (props) => {
     ...issue.issue_detail,
     sub_issues_count: issue.sub_issues_count,
     bridge: issue.id,
+    module: moduleId as string,
   }));
 
-  const handleAddIssuesToModule = (data: { issues: string[] }) => {
-    if (workspaceSlug && projectId) {
-      modulesService
-        .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, data)
-        .then((res) => {
-          console.log(res);
-          mutate(MODULE_ISSUES(moduleId as string));
-        })
-        .catch((e) => console.log(e));
-    }
+  const handleAddIssuesToModule = async (data: { issues: string[] }) => {
+    if (!workspaceSlug || !projectId) return;
+
+    await modulesService
+      .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, data)
+      .then((res) => {
+        console.log(res);
+        mutate(MODULE_ISSUES(moduleId as string));
+      })
+      .catch((e) => console.log(e));
   };
 
   const openCreateIssueModal = (
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
index 25b2bdddb..e166d1a6f 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -58,7 +58,6 @@ const ProjectModules: NextPage = () => {
           label="Add Module"
           onClick={() => {
             const e = new KeyboardEvent("keydown", {
-              ctrlKey: true,
               key: "m",
             });
             document.dispatchEvent(e);
@@ -93,7 +92,6 @@ const ProjectModules: NextPage = () => {
                 Icon={PlusIcon}
                 action={() => {
                   const e = new KeyboardEvent("keydown", {
-                    ctrlKey: true,
                     key: "m",
                   });
                   document.dispatchEvent(e);
diff --git a/apps/app/pages/[workspaceSlug]/projects/index.tsx b/apps/app/pages/[workspaceSlug]/projects/index.tsx
index 8164d4155..794ab433d 100644
--- a/apps/app/pages/[workspaceSlug]/projects/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/index.tsx
@@ -2,9 +2,10 @@ import React, { useState } from "react";
 import { useRouter } from "next/router";
 import { mutate } from "swr";
 // services
-import { ClipboardDocumentListIcon, PlusIcon } from "@heroicons/react/24/outline";
-import type { NextPage } from "next";
 import projectService from "services/project.service";
+// hooks
+import useProjects from "hooks/use-projects";
+import useWorkspaces from "hooks/use-workspaces";
 // layouts
 import AppLayout from "layouts/app-layout";
 // components
@@ -15,11 +16,10 @@ import ConfirmProjectDeletion from "components/project/confirm-project-deletion"
 import { HeaderButton, EmptySpace, EmptySpaceItem, Loader } from "components/ui";
 import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
 // icons
-// hooks
-import useProjects from "hooks/use-projects";
-import useWorkspaces from "hooks/use-workspaces";
+import { ClipboardDocumentListIcon, PlusIcon } from "@heroicons/react/24/outline";
 // types
-// constants
+import type { NextPage } from "next";
+// fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
 const ProjectsPage: NextPage = () => {
@@ -45,7 +45,7 @@ const ProjectsPage: NextPage = () => {
           Icon={PlusIcon}
           label="Add Project"
           onClick={() => {
-            const e = new KeyboardEvent("keydown", { key: "p", ctrlKey: true });
+            const e = new KeyboardEvent("keydown", { key: "p" });
             document.dispatchEvent(e);
           }}
         />
@@ -94,7 +94,7 @@ const ProjectsPage: NextPage = () => {
                   }
                   Icon={PlusIcon}
                   action={() => {
-                    const e = new KeyboardEvent("keydown", { key: "p", ctrlKey: true });
+                    const e = new KeyboardEvent("keydown", { key: "p" });
                     document.dispatchEvent(e);
                   }}
                 />
diff --git a/apps/app/pages/[workspaceSlug]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/settings/index.tsx
index a3cc32903..e44d8d0ba 100644
--- a/apps/app/pages/[workspaceSlug]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/index.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 
 import Image from "next/image";
 import { useRouter } from "next/router";
+
 import useSWR, { mutate } from "swr";
 
 // react-hook-form
@@ -157,24 +158,24 @@ const WorkspaceSettings: NextPage<TWorkspaceSettingsProps> = (props) => {
                   {({ getRootProps, getInputProps }) => (
                     <div>
                       <input {...getInputProps()} />
-                      <div>
-                        <div
-                          className="grid w-16 place-items-center rounded-md border p-2"
-                          {...getRootProps()}
-                        >
-                          {((watch("logo") && watch("logo") !== null && watch("logo") !== "") ||
-                            (image && image !== null)) && (
-                            <div className="relative mx-auto flex h-12 w-12">
-                              <Image
-                                src={image ? URL.createObjectURL(image) : watch("logo") ?? ""}
-                                alt="Workspace Logo"
-                                objectFit="cover"
-                                layout="fill"
-                                priority
-                              />
-                            </div>
-                          )}
-                        </div>
+                      <div {...getRootProps()}>
+                        {(watch("logo") && watch("logo") !== null && watch("logo") !== "") ||
+                        (image && image !== null) ? (
+                          <div className="relative mx-auto flex h-12 w-12">
+                            <Image
+                              src={image ? URL.createObjectURL(image) : watch("logo") ?? ""}
+                              alt="Workspace Logo"
+                              objectFit="cover"
+                              layout="fill"
+                              className="rounded-md"
+                              priority
+                            />
+                          </div>
+                        ) : (
+                          <div className="relative flex h-12 w-12 items-center justify-center rounded bg-gray-700 p-4 uppercase text-white">
+                            {activeWorkspace?.name?.charAt(0) ?? "N"}
+                          </div>
+                        )}
                       </div>
                     </div>
                   )}
diff --git a/apps/app/pages/create-workspace/index.tsx b/apps/app/pages/create-workspace.tsx
similarity index 92%
rename from apps/app/pages/create-workspace/index.tsx
rename to apps/app/pages/create-workspace.tsx
index 0007ef03f..fcacbcedf 100644
--- a/apps/app/pages/create-workspace/index.tsx
+++ b/apps/app/pages/create-workspace.tsx
@@ -1,12 +1,16 @@
 import React, { useEffect, useState } from "react";
+
 import { useRouter } from "next/router";
 import Image from "next/image";
+
 import { mutate } from "swr";
+
+// react-hook-form
 import { Controller, useForm } from "react-hook-form";
 // services
-import type { IWorkspace } from "types";
-import type { NextPage, NextPageContext } from "next";
 import workspaceService from "services/workspace.service";
+// hooks
+import useToast from "hooks/use-toast";
 // constants
 import { requiredAuth } from "lib/auth";
 // layouts
@@ -15,8 +19,11 @@ import DefaultLayout from "layouts/default-layout";
 import { CustomSelect, Input } from "components/ui";
 // images
 import Logo from "public/onboarding/logo.svg";
-import { USER_WORKSPACES } from "constants/fetch-keys";
 // types
+import type { IWorkspace } from "types";
+import type { NextPage, NextPageContext } from "next";
+// fetch-keys
+import { USER_WORKSPACES } from "constants/fetch-keys";
 // constants
 import { companySize } from "constants/";
 
@@ -29,6 +36,10 @@ const defaultValues = {
 const CreateWorkspace: NextPage = () => {
   const [slugError, setSlugError] = useState(false);
 
+  const router = useRouter();
+
+  const { setToastAlert } = useToast();
+
   const {
     register,
     handleSubmit,
@@ -39,18 +50,22 @@ const CreateWorkspace: NextPage = () => {
     formState: { errors, isSubmitting },
   } = useForm<IWorkspace>({ defaultValues });
 
-  const router = useRouter();
-
   const onSubmit = async (formData: IWorkspace) => {
     await workspaceService
       .workspaceSlugCheck(formData.slug)
-      .then((res) => {
+      .then(async (res) => {
         if (res.status === true) {
-          workspaceService
+          setSlugError(false);
+          await workspaceService
             .createWorkspace(formData)
             .then((res) => {
-              router.push("/");
+              setToastAlert({
+                type: "success",
+                title: "Success!",
+                message: "Workspace created successfully.",
+              });
               mutate<IWorkspace[]>(USER_WORKSPACES, (prevData) => [res, ...(prevData ?? [])]);
+              router.push(`/${formData.slug}`);
             })
             .catch((err) => {
               console.error(err);
@@ -105,11 +120,11 @@ const CreateWorkspace: NextPage = () => {
                       <div className="flex items-center rounded-md border border-gray-300 px-3">
                         <span className="text-sm text-slate-600">{"https://app.plane.so/"}</span>
                         <Input
-                          mode="transparent"
+                          mode="trueTransparent"
                           autoComplete="off"
                           name="slug"
                           register={register}
-                          className="block w-full rounded-md bg-transparent py-2 px-0 text-sm  focus:outline-none focus:ring-0"
+                          className="block w-full rounded-md bg-transparent py-2 px-0 text-sm"
                         />
                       </div>
                       {slugError && (
diff --git a/apps/app/types/modules.d.ts b/apps/app/types/modules.d.ts
index ae24ee128..0defcdeca 100644
--- a/apps/app/types/modules.d.ts
+++ b/apps/app/types/modules.d.ts
@@ -8,9 +8,9 @@ export interface IModule {
   description_html: any;
   id: string;
   lead: string | null;
-  lead_detail: IUserLite;
+  lead_detail: IUserLite | null;
   link_module: {
-    created_at: Date
+    created_at: Date;
     created_by: string;
     created_by_detail: IUserLite;
     id: string;