diff --git a/apiserver/plane/app/views/oauth.py b/apiserver/plane/app/views/oauth.py
index a0eb4973e..de90e4337 100644
--- a/apiserver/plane/app/views/oauth.py
+++ b/apiserver/plane/app/views/oauth.py
@@ -167,12 +167,6 @@ class OauthEndpoint(BaseAPIView):
                 ]
             )
 
-            if not GOOGLE_CLIENT_ID or not GITHUB_CLIENT_ID:
-                return Response(
-                    {"error": "Github or Google login is not configured"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
             if not medium or not id_token:
                 return Response(
                     {
diff --git a/space/components/accounts/github-login-button.tsx b/space/components/accounts/github-sign-in.tsx
similarity index 93%
rename from space/components/accounts/github-login-button.tsx
rename to space/components/accounts/github-sign-in.tsx
index 46e4cd18d..322011ae3 100644
--- a/space/components/accounts/github-login-button.tsx
+++ b/space/components/accounts/github-sign-in.tsx
@@ -8,12 +8,12 @@ import { useTheme } from "next-themes";
 import githubBlackImage from "public/logos/github-black.svg";
 import githubWhiteImage from "public/logos/github-white.svg";
 
-export interface GithubLoginButtonProps {
+type Props = {
   handleSignIn: React.Dispatch<string>;
   clientId: string;
-}
+};
 
-export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
+export const GitHubSignInButton: FC<Props> = (props) => {
   const { handleSignIn, clientId } = props;
   // states
   const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
diff --git a/space/components/accounts/google-login.tsx b/space/components/accounts/google-sign-in.tsx
similarity index 87%
rename from space/components/accounts/google-login.tsx
rename to space/components/accounts/google-sign-in.tsx
index 707aec919..3d637e949 100644
--- a/space/components/accounts/google-login.tsx
+++ b/space/components/accounts/google-sign-in.tsx
@@ -1,12 +1,12 @@
 import { FC, useEffect, useRef, useCallback, useState } from "react";
 import Script from "next/script";
 
-export interface IGoogleLoginButton {
+type Props = {
   clientId: string;
   handleSignIn: React.Dispatch<any>;
-}
+};
 
-export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
+export const GoogleSignInButton: FC<Props> = (props) => {
   const { handleSignIn, clientId } = props;
   // refs
   const googleSignInButton = useRef<HTMLDivElement>(null);
@@ -30,6 +30,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
           size: "large",
           logo_alignment: "center",
           text: "signin_with",
+          width: 384,
         } as GsiButtonConfiguration // customization attributes
       );
     } catch (err) {
@@ -53,7 +54,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
   return (
     <>
       <Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
-      <div className="w-full overflow-hidden rounded" id="googleSignInButton" ref={googleSignInButton} />
+      <div className="!w-full overflow-hidden rounded" id="googleSignInButton" ref={googleSignInButton} />
     </>
   );
 };
diff --git a/space/components/accounts/index.ts b/space/components/accounts/index.ts
index db170180f..949f0828e 100644
--- a/space/components/accounts/index.ts
+++ b/space/components/accounts/index.ts
@@ -1,5 +1,5 @@
-export * from "./github-login-button";
-export * from "./google-login";
+export * from "./github-sign-in";
+export * from "./google-sign-in";
 export * from "./onboarding-form";
 export * from "./user-logged-in";
 export * from "./sign-in-forms";
diff --git a/space/components/accounts/sign-in-forms/o-auth-options.tsx b/space/components/accounts/sign-in-forms/o-auth-options.tsx
index ea7514a7b..28da6fb7d 100644
--- a/space/components/accounts/sign-in-forms/o-auth-options.tsx
+++ b/space/components/accounts/sign-in-forms/o-auth-options.tsx
@@ -7,7 +7,7 @@ import { AppConfigService } from "services/app-config.service";
 // hooks
 import useToast from "hooks/use-toast";
 // components
-import { GithubLoginButton, GoogleLoginButton } from "components/accounts";
+import { GitHubSignInButton, GoogleSignInButton } from "components/accounts";
 
 type Props = {
   handleSignInRedirection: () => Promise<void>;
@@ -73,12 +73,12 @@ export const OAuthOptions: React.FC<Props> = observer((props) => {
         <p className="mx-3 flex-shrink-0 text-center text-sm text-onboarding-text-400">Or continue with</p>
         <hr className="w-full border-onboarding-border-100" />
       </div>
-      <div className="mx-auto flex flex-col items-center gap-2 overflow-hidden pt-7 sm:w-96 sm:flex-row">
+      <div className="mx-auto space-y-4 overflow-hidden pt-7 sm:w-96">
         {envConfig?.google_client_id && (
-          <GoogleLoginButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
+          <GoogleSignInButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
         )}
         {envConfig?.github_client_id && (
-          <GithubLoginButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} />
+          <GitHubSignInButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} />
         )}
       </div>
     </>
diff --git a/space/components/common/latest-feature-block.tsx b/space/components/common/latest-feature-block.tsx
index 885cf2bc8..c1b5db954 100644
--- a/space/components/common/latest-feature-block.tsx
+++ b/space/components/common/latest-feature-block.tsx
@@ -20,7 +20,11 @@ export const LatestFeatureBlock = () => {
           </Link>
         </p>
       </div>
-      <div className="mx-auto mt-8 overflow-hidden rounded-md border border-onboarding-border-200 bg-onboarding-background-100 object-cover sm:h-52 sm:w-96">
+      <div
+        className={`mx-auto mt-8 overflow-hidden rounded-md border border-onboarding-border-200 object-cover sm:h-52 sm:w-96 ${
+          resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
+        }`}
+      >
         <div className="h-[90%]">
           <Image
             src={latestFeatures}
diff --git a/web/components/account/github-login-button.tsx b/web/components/account/github-sign-in.tsx
similarity index 94%
rename from web/components/account/github-login-button.tsx
rename to web/components/account/github-sign-in.tsx
index 2d5db0c92..27a8bf01c 100644
--- a/web/components/account/github-login-button.tsx
+++ b/web/components/account/github-sign-in.tsx
@@ -9,12 +9,12 @@ import { useTheme } from "next-themes";
 import githubLightModeImage from "/public/logos/github-black.png";
 import githubDarkModeImage from "/public/logos/github-dark.svg";
 
-export interface GithubLoginButtonProps {
+type Props = {
   handleSignIn: React.Dispatch<string>;
   clientId: string;
-}
+};
 
-export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
+export const GitHubSignInButton: FC<Props> = (props) => {
   const { handleSignIn, clientId } = props;
   // states
   const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
diff --git a/web/components/account/google-login.tsx b/web/components/account/google-sign-in.tsx
similarity index 86%
rename from web/components/account/google-login.tsx
rename to web/components/account/google-sign-in.tsx
index f9653a768..48488e07e 100644
--- a/web/components/account/google-login.tsx
+++ b/web/components/account/google-sign-in.tsx
@@ -1,12 +1,12 @@
 import { FC, useEffect, useRef, useCallback, useState } from "react";
 import Script from "next/script";
 
-export interface IGoogleLoginButton {
+type Props = {
   handleSignIn: React.Dispatch<any>;
   clientId: string;
-}
+};
 
-export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
+export const GoogleSignInButton: FC<Props> = (props) => {
   const { handleSignIn, clientId } = props;
   // refs
   const googleSignInButton = useRef<HTMLDivElement>(null);
@@ -30,6 +30,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
           size: "large",
           logo_alignment: "center",
           text: "signin_with",
+          width: 384,
         } as GsiButtonConfiguration // customization attributes
       );
     } catch (err) {
@@ -53,7 +54,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
   return (
     <>
       <Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
-      <div className="w-full overflow-hidden rounded" id="googleSignInButton" ref={googleSignInButton} />
+      <div className="!w-full overflow-hidden rounded" id="googleSignInButton" ref={googleSignInButton} />
     </>
   );
 };
diff --git a/web/components/account/index.ts b/web/components/account/index.ts
index 1184c4d2f..275f7ff08 100644
--- a/web/components/account/index.ts
+++ b/web/components/account/index.ts
@@ -1,5 +1,5 @@
 export * from "./sign-in-forms";
 export * from "./deactivate-account-modal";
-export * from "./github-login-button";
-export * from "./google-login";
+export * from "./github-sign-in";
+export * from "./google-sign-in";
 export * from "./email-signup-form";
diff --git a/web/components/account/sign-in-forms/o-auth-options.tsx b/web/components/account/sign-in-forms/o-auth-options.tsx
index 5de4defea..aec82cfa5 100644
--- a/web/components/account/sign-in-forms/o-auth-options.tsx
+++ b/web/components/account/sign-in-forms/o-auth-options.tsx
@@ -6,7 +6,7 @@ import { AuthService } from "services/auth.service";
 // hooks
 import useToast from "hooks/use-toast";
 // components
-import { GithubLoginButton, GoogleLoginButton } from "components/account";
+import { GitHubSignInButton, GoogleSignInButton } from "components/account";
 
 type Props = {
   handleSignInRedirection: () => Promise<void>;
@@ -73,12 +73,12 @@ export const OAuthOptions: React.FC<Props> = observer((props) => {
         <p className="mx-3 flex-shrink-0 text-center text-sm text-onboarding-text-400">Or continue with</p>
         <hr className="w-full border-onboarding-border-100" />
       </div>
-      <div className="mx-auto flex flex-col items-center gap-2 overflow-hidden pt-7 sm:w-96 sm:flex-row">
+      <div className="mx-auto mt-7 space-y-4 overflow-hidden sm:w-96">
         {envConfig?.google_client_id && (
-          <GoogleLoginButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
+          <GoogleSignInButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
         )}
         {envConfig?.github_client_id && (
-          <GithubLoginButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} />
+          <GitHubSignInButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} />
         )}
       </div>
     </>
diff --git a/web/components/common/latest-feature-block.tsx b/web/components/common/latest-feature-block.tsx
index 885cf2bc8..a34fda43f 100644
--- a/web/components/common/latest-feature-block.tsx
+++ b/web/components/common/latest-feature-block.tsx
@@ -20,14 +20,18 @@ export const LatestFeatureBlock = () => {
           </Link>
         </p>
       </div>
-      <div className="mx-auto mt-8 overflow-hidden rounded-md border border-onboarding-border-200 bg-onboarding-background-100 object-cover sm:h-52 sm:w-96">
+      <div
+        className={`mx-auto mt-8 overflow-hidden rounded-md border border-onboarding-border-200 object-cover sm:h-52 sm:w-96 ${
+          resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
+        }`}
+      >
         <div className="h-[90%]">
           <Image
             src={latestFeatures}
             alt="Plane Issues"
             className={`-mt-2 ml-10 h-full rounded-md ${
               resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
-            } `}
+            }`}
           />
         </div>
       </div>
diff --git a/web/components/core/modals/gpt-assistant-modal.tsx b/web/components/core/modals/gpt-assistant-modal.tsx
index 98fd37904..10df4d8f8 100644
--- a/web/components/core/modals/gpt-assistant-modal.tsx
+++ b/web/components/core/modals/gpt-assistant-modal.tsx
@@ -9,7 +9,7 @@ import useToast from "hooks/use-toast";
 // ui
 import { Button, Input } from "@plane/ui";
 // components
-import { RichReadOnlyEditor, RichReadOnlyEditorWithRef } from "@plane/rich-text-editor";
+import { RichReadOnlyEditorWithRef } from "@plane/rich-text-editor";
 // types
 import { IIssue, IPageBlock } from "types";
 
@@ -42,6 +42,7 @@ export const GptAssistantModal: React.FC<Props> = (props) => {
   const { workspaceSlug } = router.query;
 
   const editorRef = useRef<any>(null);
+  const responseRef = useRef<any>(null);
 
   const { setToastAlert } = useToast();
 
@@ -115,6 +116,10 @@ export const GptAssistantModal: React.FC<Props> = (props) => {
     editorRef.current?.setEditorValue(htmlContent ?? `<p>${content}</p>`);
   }, [htmlContent, editorRef, content]);
 
+  useEffect(() => {
+    responseRef.current?.setEditorValue(`<p>${response}</p>`);
+  }, [response, responseRef]);
+
   return (
     <div
       className={`absolute ${inset} z-20 flex w-full flex-col space-y-4 overflow-hidden rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${
@@ -137,11 +142,12 @@ export const GptAssistantModal: React.FC<Props> = (props) => {
         {response !== "" && (
           <div className="page-block-section text-sm">
             Response:
-            <RichReadOnlyEditor
+            <RichReadOnlyEditorWithRef
               value={`<p>${response}</p>`}
               customClassName="-mx-3 -my-3"
               noBorder
               borderOnFocus={false}
+              ref={responseRef}
             />
           </div>
         )}
diff --git a/web/components/cycles/cycles-board-card.tsx b/web/components/cycles/cycles-board-card.tsx
index 064d3f1aa..f020b0998 100644
--- a/web/components/cycles/cycles-board-card.tsx
+++ b/web/components/cycles/cycles-board-card.tsx
@@ -23,6 +23,7 @@ import { ICycle } from "types";
 import { useMobxStore } from "lib/mobx/store-provider";
 // constants
 import { CYCLE_STATUS } from "constants/cycle";
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 export interface ICyclesBoardCard {
   workspaceSlug: string;
@@ -36,6 +37,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
   const {
     cycle: cycleStore,
     trackEvent: { setTrackElement },
+    user: userStore,
   } = useMobxStore();
   // toast
   const { setToastAlert } = useToast();
@@ -49,6 +51,9 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
   const startDate = new Date(cycle.start_date ?? "");
   const isDateValid = cycle.start_date || cycle.end_date;
 
+  const { currentProjectRole } = userStore;
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
+
   const router = useRouter();
 
   const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
@@ -68,8 +73,8 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
     ? cycleTotalIssues === 0
       ? "0 Issue"
       : cycleTotalIssues === cycle.completed_issues
-        ? `${cycleTotalIssues} Issue${cycleTotalIssues > 1 ? "s" : ""}`
-        : `${cycle.completed_issues}/${cycleTotalIssues} Issues`
+      ? `${cycleTotalIssues} Issue${cycleTotalIssues > 1 ? "s" : ""}`
+      : `${cycle.completed_issues}/${cycleTotalIssues} Issues`
     : "0 Issue";
 
   const handleCopyText = (e: MouseEvent<HTMLButtonElement>) => {
@@ -235,17 +240,18 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
                 <span className="text-xs text-custom-text-400">No due date</span>
               )}
               <div className="z-10 flex items-center gap-1.5">
-                {cycle.is_favorite ? (
-                  <button type="button" onClick={handleRemoveFromFavorites}>
-                    <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
-                  </button>
-                ) : (
-                  <button type="button" onClick={handleAddToFavorites}>
-                    <Star className="h-3.5 w-3.5 text-custom-text-200" />
-                  </button>
-                )}
+                {isEditingAllowed &&
+                  (cycle.is_favorite ? (
+                    <button type="button" onClick={handleRemoveFromFavorites}>
+                      <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
+                    </button>
+                  ) : (
+                    <button type="button" onClick={handleAddToFavorites}>
+                      <Star className="h-3.5 w-3.5 text-custom-text-200" />
+                    </button>
+                  ))}
                 <CustomMenu width="auto" ellipsis className="z-10">
-                  {!isCompleted && (
+                  {!isCompleted && isEditingAllowed && (
                     <>
                       <CustomMenu.MenuItem onClick={handleEditCycle}>
                         <span className="flex items-center justify-start gap-2">
diff --git a/web/components/cycles/cycles-list-item.tsx b/web/components/cycles/cycles-list-item.tsx
index d1f1f22de..86b3bffa9 100644
--- a/web/components/cycles/cycles-list-item.tsx
+++ b/web/components/cycles/cycles-list-item.tsx
@@ -24,6 +24,7 @@ import { copyTextToClipboard } from "helpers/string.helper";
 import { ICycle } from "types";
 // constants
 import { CYCLE_STATUS } from "constants/cycle";
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 type TCyclesListItem = {
   cycle: ICycle;
@@ -41,6 +42,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
   const {
     cycle: cycleStore,
     trackEvent: { setTrackElement },
+    user: userStore,
   } = useMobxStore();
   // toast
   const { setToastAlert } = useToast();
@@ -53,6 +55,9 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
   const endDate = new Date(cycle.end_date ?? "");
   const startDate = new Date(cycle.start_date ?? "");
 
+  const { currentProjectRole } = userStore;
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
+
   const router = useRouter();
 
   const cycleTotalIssues =
@@ -226,19 +231,19 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
                 )}
               </div>
             </Tooltip>
-
-            {cycle.is_favorite ? (
-              <button type="button" onClick={handleRemoveFromFavorites}>
-                <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
-              </button>
-            ) : (
-              <button type="button" onClick={handleAddToFavorites}>
-                <Star className="h-3.5 w-3.5 text-custom-text-200" />
-              </button>
-            )}
+            {isEditingAllowed &&
+              (cycle.is_favorite ? (
+                <button type="button" onClick={handleRemoveFromFavorites}>
+                  <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
+                </button>
+              ) : (
+                <button type="button" onClick={handleAddToFavorites}>
+                  <Star className="h-3.5 w-3.5 text-custom-text-200" />
+                </button>
+              ))}
 
             <CustomMenu width="auto" ellipsis>
-              {!isCompleted && (
+              {!isCompleted && isEditingAllowed && (
                 <>
                   <CustomMenu.MenuItem onClick={handleEditCycle}>
                     <span className="flex items-center justify-start gap-2">
diff --git a/web/components/cycles/form.tsx b/web/components/cycles/form.tsx
index 24f14a661..2cc087eda 100644
--- a/web/components/cycles/form.tsx
+++ b/web/components/cycles/form.tsx
@@ -97,7 +97,7 @@ export const CycleForm: React.FC<Props> = (props) => {
                     id="cycle_description"
                     name="description"
                     placeholder="Description..."
-                    className="h-24 w-full resize-none text-sm"
+                    className="!h-24 w-full resize-none text-sm"
                     hasError={Boolean(errors?.description)}
                     value={value}
                     onChange={onChange}
@@ -135,18 +135,12 @@ export const CycleForm: React.FC<Props> = (props) => {
           </div>
         </div>
       </div>
-      <div className="mt-5 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-100 pt-5 ">
+      <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-100 pt-5 ">
         <Button variant="neutral-primary" size="sm" onClick={handleClose}>
           Cancel
         </Button>
         <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
-          {data
-            ? isSubmitting
-              ? "Updating Cycle..."
-              : "Update Cycle"
-            : isSubmitting
-              ? "Creating Cycle..."
-              : "Create Cycle"}
+          {data ? (isSubmitting ? "Updating" : "Update cycle") : isSubmitting ? "Creating" : "Create cycle"}
         </Button>
       </div>
     </form>
diff --git a/web/components/cycles/modal.tsx b/web/components/cycles/modal.tsx
index 3ef7e285d..665f9865b 100644
--- a/web/components/cycles/modal.tsx
+++ b/web/components/cycles/modal.tsx
@@ -49,11 +49,11 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
           state: "SUCCESS",
         });
       })
-      .catch(() => {
+      .catch((err) => {
         setToastAlert({
           type: "error",
           title: "Error!",
-          message: "Error in creating cycle. Please try again.",
+          message: err.detail ?? "Error in creating cycle. Please try again.",
         });
         postHogEventTracker("CYCLE_CREATE", {
           state: "FAILED",
@@ -73,11 +73,11 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
           message: "Cycle updated successfully.",
         });
       })
-      .catch(() => {
+      .catch((err) => {
         setToastAlert({
           type: "error",
           title: "Error!",
-          message: "Error in updating cycle. Please try again.",
+          message: err.detail ?? "Error in updating cycle. Please try again.",
         });
       });
   };
diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx
index 7ae11fb11..11db81f08 100644
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@@ -19,6 +19,8 @@ import { renderEmoji } from "helpers/emoji.helper";
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
 // constants
 import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+import { EUserWorkspaceRoles } from "constants/workspace";
+
 import { EFilterType } from "store_legacy/issues/types";
 import { EProjectStore } from "store_legacy/command-palette.store";
 
@@ -42,6 +44,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
     commandPalette: commandPaletteStore,
     trackEvent: { setTrackElement },
     cycleIssuesFilter: { issueFilters, updateFilters },
+    user: { currentProjectRole },
   } = useMobxStore();
 
   const activeLayout = projectIssueFiltersStore.issueFilters?.displayFilters?.layout;
@@ -99,6 +102,9 @@ export const CycleIssuesHeader: React.FC = observer(() => {
   const cyclesList = cycleStore.projectCycles;
   const cycleDetails = cycleId ? cycleStore.getCycleById(cycleId.toString()) : undefined;
 
+  const canUserCreateIssue =
+    currentProjectRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentProjectRole);
+
   return (
     <>
       <ProjectAnalyticsModal
@@ -190,16 +196,18 @@ export const CycleIssuesHeader: React.FC = observer(() => {
           <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
             Analytics
           </Button>
-          <Button
-            onClick={() => {
-              setTrackElement("CYCLE_PAGE_HEADER");
-              commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.CYCLE);
-            }}
-            size="sm"
-            prependIcon={<Plus />}
-          >
-            Add Issue
-          </Button>
+          {canUserCreateIssue && (
+            <Button
+              onClick={() => {
+                setTrackElement("CYCLE_PAGE_HEADER");
+                commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.CYCLE);
+              }}
+              size="sm"
+              prependIcon={<Plus />}
+            >
+              Add Issue
+            </Button>
+          )}
           <button
             type="button"
             className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
diff --git a/web/components/headers/cycles.tsx b/web/components/headers/cycles.tsx
index 02f4dd70b..459eb9b30 100644
--- a/web/components/headers/cycles.tsx
+++ b/web/components/headers/cycles.tsx
@@ -8,6 +8,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { Breadcrumbs, Button, ContrastIcon } from "@plane/ui";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 export const CyclesHeader: FC = observer(() => {
   // router
@@ -16,11 +17,15 @@ export const CyclesHeader: FC = observer(() => {
   // store
   const {
     project: projectStore,
+    user: { currentProjectRole },
     commandPalette: commandPaletteStore,
     trackEvent: { setTrackElement },
   } = useMobxStore();
   const { currentProjectDetails } = projectStore;
 
+  const canUserCreateCycle =
+    currentProjectRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentProjectRole);
+
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
@@ -50,19 +55,21 @@ export const CyclesHeader: FC = observer(() => {
           </Breadcrumbs>
         </div>
       </div>
-      <div className="flex items-center gap-3">
-        <Button
-          variant="primary"
-          size="sm"
-          prependIcon={<Plus />}
-          onClick={() => {
-            setTrackElement("CYCLES_PAGE_HEADER");
-            commandPaletteStore.toggleCreateCycleModal(true);
-          }}
-        >
-          Add Cycle
-        </Button>
-      </div>
+      {canUserCreateCycle && (
+        <div className="flex items-center gap-3">
+          <Button
+            variant="primary"
+            size="sm"
+            prependIcon={<Plus />}
+            onClick={() => {
+              setTrackElement("CYCLES_PAGE_HEADER");
+              commandPaletteStore.toggleCreateCycleModal(true);
+            }}
+          >
+            Add Cycle
+          </Button>
+        </div>
+      )}
     </div>
   );
 });
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
index f98484330..4851076f0 100644
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@@ -19,6 +19,8 @@ import { renderEmoji } from "helpers/emoji.helper";
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
 // constants
 import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+import { EUserWorkspaceRoles } from "constants/workspace";
+// store
 import { EFilterType } from "store_legacy/issues/types";
 import { EProjectStore } from "store_legacy/command-palette.store";
 
@@ -41,6 +43,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
     trackEvent: { setTrackElement },
     projectLabel: { projectLabels },
     moduleIssuesFilter: { issueFilters, updateFilters },
+    user: { currentProjectRole },
   } = useMobxStore();
 
   const { currentProjectDetails } = projectStore;
@@ -100,6 +103,9 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
   const modulesList = projectId ? moduleStore.modules[projectId.toString()] : undefined;
   const moduleDetails = moduleId ? moduleStore.getModuleById(moduleId.toString()) : undefined;
 
+  const canUserCreateIssue =
+    currentProjectRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentProjectRole);
+
   return (
     <>
       <ProjectAnalyticsModal
@@ -191,16 +197,18 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
           <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
             Analytics
           </Button>
-          <Button
-            onClick={() => {
-              setTrackElement("MODULE_PAGE_HEADER");
-              commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.MODULE);
-            }}
-            size="sm"
-            prependIcon={<Plus />}
-          >
-            Add Issue
-          </Button>
+          {canUserCreateIssue && (
+            <Button
+              onClick={() => {
+                setTrackElement("MODULE_PAGE_HEADER");
+                commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.MODULE);
+              }}
+              size="sm"
+              prependIcon={<Plus />}
+            >
+              Add Issue
+            </Button>
+          )}
           <button
             type="button"
             className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
diff --git a/web/components/headers/modules-list.tsx b/web/components/headers/modules-list.tsx
index 8c9227259..ebe0c5868 100644
--- a/web/components/headers/modules-list.tsx
+++ b/web/components/headers/modules-list.tsx
@@ -11,17 +11,25 @@ import { Breadcrumbs, Button, Tooltip, DiceIcon } from "@plane/ui";
 import { renderEmoji } from "helpers/emoji.helper";
 // constants
 import { MODULE_VIEW_LAYOUTS } from "constants/module";
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 export const ModulesListHeader: React.FC = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
   // store
-  const { project: projectStore, commandPalette: commandPaletteStore } = useMobxStore();
+  const {
+    project: projectStore,
+    commandPalette: commandPaletteStore,
+    user: { currentProjectRole },
+  } = useMobxStore();
   const { currentProjectDetails } = projectStore;
 
   const { storedValue: modulesView, setValue: setModulesView } = useLocalStorage("modules_view", "grid");
 
+  const canUserCreateModule =
+    currentProjectRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentProjectRole);
+
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
@@ -72,14 +80,16 @@ export const ModulesListHeader: React.FC = observer(() => {
             </Tooltip>
           ))}
         </div>
-        <Button
-          variant="primary"
-          size="sm"
-          prependIcon={<Plus />}
-          onClick={() => commandPaletteStore.toggleCreateModuleModal(true)}
-        >
-          Add Module
-        </Button>
+        {canUserCreateModule && (
+          <Button
+            variant="primary"
+            size="sm"
+            prependIcon={<Plus />}
+            onClick={() => commandPaletteStore.toggleCreateModuleModal(true)}
+          >
+            Add Module
+          </Button>
+        )}
       </div>
     </div>
   );
diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index dc1538d59..7a68d4882 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -14,6 +14,7 @@ import { Breadcrumbs, Button, LayersIcon } from "@plane/ui";
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
 // constants
 import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+import { EUserWorkspaceRoles } from "constants/workspace";
 // helper
 import { renderEmoji } from "helpers/emoji.helper";
 import { EFilterType } from "store_legacy/issues/types";
@@ -36,6 +37,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
     // issue filters
     projectIssuesFilter: { issueFilters, updateFilters },
     projectIssues: {},
+    user: { currentProjectRole },
   } = useMobxStore();
 
   const activeLayout = issueFilters?.displayFilters?.layout;
@@ -87,6 +89,9 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
 
   const deployUrl = process.env.NEXT_PUBLIC_DEPLOY_URL;
 
+  const canUserCreateIssue =
+    currentProjectRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentProjectRole);
+
   return (
     <>
       <ProjectAnalyticsModal
@@ -200,16 +205,18 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
           <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
             Analytics
           </Button>
-          <Button
-            onClick={() => {
-              setTrackElement("PROJECT_PAGE_HEADER");
-              commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT);
-            }}
-            size="sm"
-            prependIcon={<Plus />}
-          >
-            Add Issue
-          </Button>
+          {canUserCreateIssue && (
+            <Button
+              onClick={() => {
+                setTrackElement("PROJECT_PAGE_HEADER");
+                commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT);
+              }}
+              size="sm"
+              prependIcon={<Plus />}
+            >
+              Add Issue
+            </Button>
+          )}
         </div>
       </div>
     </>
diff --git a/web/components/headers/project-view-issues.tsx b/web/components/headers/project-view-issues.tsx
index 5fd3265a4..166f861d9 100644
--- a/web/components/headers/project-view-issues.tsx
+++ b/web/components/headers/project-view-issues.tsx
@@ -1,6 +1,7 @@
 import { useCallback } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { Plus } from "lucide-react";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
@@ -14,9 +15,10 @@ import { renderEmoji } from "helpers/emoji.helper";
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
 // constants
 import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+import { EUserWorkspaceRoles } from "constants/workspace";
+
 import { EFilterType } from "store_legacy/issues/types";
 import { EProjectStore } from "store_legacy/command-palette.store";
-import { Plus } from "lucide-react";
 
 export const ProjectViewIssuesHeader: React.FC = observer(() => {
   const router = useRouter();
@@ -35,6 +37,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
     viewIssuesFilter: { issueFilters, updateFilters },
     commandPalette: commandPaletteStore,
     trackEvent: { setTrackElement },
+    user: { currentProjectRole },
   } = useMobxStore();
 
   const activeLayout = issueFilters?.displayFilters?.layout;
@@ -85,6 +88,9 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
   const viewsList = projectId ? projectViewsStore.viewsList[projectId.toString()] : undefined;
   const viewDetails = viewId ? projectViewsStore.viewDetails[viewId.toString()] : undefined;
 
+  const canUserCreateIssue =
+    currentProjectRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentProjectRole);
+
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex items-center gap-2">
@@ -170,16 +176,18 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
             handleDisplayPropertiesUpdate={handleDisplayProperties}
           />
         </FiltersDropdown>
-        <Button
-          onClick={() => {
-            setTrackElement("PROJECT_VIEW_PAGE_HEADER");
-            commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT_VIEW);
-          }}
-          size="sm"
-          prependIcon={<Plus />}
-        >
-          Add Issue
-        </Button>
+        {
+          <Button
+            onClick={() => {
+              setTrackElement("PROJECT_VIEW_PAGE_HEADER");
+              commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT_VIEW);
+            }}
+            size="sm"
+            prependIcon={<Plus />}
+          >
+            Add Issue
+          </Button>
+        }
       </div>
     </div>
   );
diff --git a/web/components/issues/form.tsx b/web/components/issues/form.tsx
index aca1b1dcf..bc325d95e 100644
--- a/web/components/issues/form.tsx
+++ b/web/components/issues/form.tsx
@@ -226,10 +226,9 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
 
     reset({
       ...defaultValues,
-      project: projectId,
       ...initialData,
     });
-  }, [setFocus, initialData, projectId, reset]);
+  }, [setFocus, initialData, reset]);
 
   // update projectId in form when projectId changes
   useEffect(() => {
@@ -629,8 +628,8 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
                   ? "Updating Issue..."
                   : "Update Issue"
                 : isSubmitting
-                  ? "Adding Issue..."
-                  : "Add Issue"}
+                ? "Adding Issue..."
+                : "Add Issue"}
             </Button>
           </div>
         </div>
diff --git a/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx b/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
index b63f21673..f98aa4ca0 100644
--- a/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
@@ -4,6 +4,8 @@ import { observer } from "mobx-react-lite";
 import { DragDropContext, DropResult } from "@hello-pangea/dnd";
 // components
 import { CalendarChart, IssuePeekOverview } from "components/issues";
+// hooks
+import useToast from "hooks/use-toast";
 // types
 import { IIssue } from "types";
 import {
@@ -34,7 +36,7 @@ interface IBaseCalendarRoot {
     [EIssueActions.REMOVE]?: (issue: IIssue) => Promise<void>;
   };
   viewId?: string;
-  handleDragDrop: (source: any, destination: any, issues: any, issueWithIds: any) => void;
+  handleDragDrop: (source: any, destination: any, issues: any, issueWithIds: any) => Promise<void>;
 }
 
 export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
@@ -44,12 +46,15 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
   const router = useRouter();
   const { workspaceSlug, peekIssueId, peekProjectId } = router.query;
 
+  // hooks
+  const { setToastAlert } = useToast();
+
   const displayFilters = issuesFilterStore.issueFilters?.displayFilters;
 
   const issues = issueStore.getIssues;
   const groupedIssueIds = (issueStore.getIssuesIds ?? {}) as IGroupedIssues;
 
-  const onDragEnd = (result: DropResult) => {
+  const onDragEnd = async (result: DropResult) => {
     if (!result) return;
 
     // return if not dropped on the correct place
@@ -58,7 +63,15 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
     // return if dropped on the same date
     if (result.destination.droppableId === result.source.droppableId) return;
 
-    if (handleDragDrop) handleDragDrop(result.source, result.destination, issues, groupedIssueIds);
+    if (handleDragDrop) {
+      await handleDragDrop(result.source, result.destination, issues, groupedIssueIds).catch((err) => {
+        setToastAlert({
+          title: "Error",
+          type: "error",
+          message: err.detail ?? "Failed to perform this action",
+        });
+      });
+    }
   };
 
   const handleIssues = useCallback(
diff --git a/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx b/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
index 9830b871f..f9a4bd9a0 100644
--- a/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
@@ -41,9 +41,9 @@ export const CycleCalendarLayout: React.FC = observer(() => {
     },
   };
 
-  const handleDragDrop = (source: any, destination: any, issues: IIssue[], issueWithIds: any) => {
+  const handleDragDrop = async (source: any, destination: any, issues: IIssue[], issueWithIds: any) => {
     if (workspaceSlug && projectId && cycleId)
-      handleCalenderDragDrop(
+      await handleCalenderDragDrop(
         source,
         destination,
         workspaceSlug.toString(),
diff --git a/web/components/issues/issue-layouts/calendar/roots/module-root.tsx b/web/components/issues/issue-layouts/calendar/roots/module-root.tsx
index bff618820..187c05f6a 100644
--- a/web/components/issues/issue-layouts/calendar/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/roots/module-root.tsx
@@ -38,8 +38,8 @@ export const ModuleCalendarLayout: React.FC = observer(() => {
     },
   };
 
-  const handleDragDrop = (source: any, destination: any, issues: IIssue[], issueWithIds: any) => {
-    handleCalenderDragDrop(
+  const handleDragDrop = async (source: any, destination: any, issues: IIssue[], issueWithIds: any) => {
+    await handleCalenderDragDrop(
       source,
       destination,
       workspaceSlug,
diff --git a/web/components/issues/issue-layouts/calendar/roots/project-root.tsx b/web/components/issues/issue-layouts/calendar/roots/project-root.tsx
index d5bbce1fc..e71cc7e3b 100644
--- a/web/components/issues/issue-layouts/calendar/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/roots/project-root.tsx
@@ -31,9 +31,9 @@ export const CalendarLayout: React.FC = observer(() => {
     },
   };
 
-  const handleDragDrop = (source: any, destination: any, issues: IIssue[], issueWithIds: any) => {
+  const handleDragDrop = async (source: any, destination: any, issues: IIssue[], issueWithIds: any) => {
     if (workspaceSlug && projectId)
-      handleCalenderDragDrop(
+      await handleCalenderDragDrop(
         source,
         destination,
         workspaceSlug.toString(),
diff --git a/web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx b/web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
index c73b3b2f8..95d746eec 100644
--- a/web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
@@ -32,9 +32,9 @@ export const ProjectViewCalendarLayout: React.FC = observer(() => {
     },
   };
 
-  const handleDragDrop = (source: any, destination: any, issues: IIssue[], issueWithIds: any) => {
+  const handleDragDrop = async (source: any, destination: any, issues: IIssue[], issueWithIds: any) => {
     if (workspaceSlug && projectId)
-      handleCalenderDragDrop(
+      await handleCalenderDragDrop(
         source,
         destination,
         workspaceSlug.toString(),
diff --git a/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
index 48931e4ee..e4a88e944 100644
--- a/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
@@ -121,8 +121,9 @@ export const GanttInlineCreateIssueForm: React.FC<Props> = observer((props) => {
     });
 
     try {
-      quickAddCallback && quickAddCallback(workspaceSlug, projectId, payload, viewId);
-
+      if (quickAddCallback) {
+        await quickAddCallback(workspaceSlug, projectId, payload, viewId);
+      }
       setToastAlert({
         type: "success",
         title: "Success!",
diff --git a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index b0e24e2fb..1c8a25e4f 100644
--- a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -147,7 +147,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
     setIsDragStarted(true);
   };
 
-  const onDragEnd = (result: DropResult) => {
+  const onDragEnd = async (result: DropResult) => {
     setIsDragStarted(false);
 
     if (!result) return;
@@ -171,7 +171,15 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
         });
         setDeleteIssueModal(true);
       } else {
-        handleDragDrop(result.source, result.destination, sub_group_by, group_by, issues, issueIds);
+        await handleDragDrop(result.source, result.destination, sub_group_by, group_by, issues, issueIds).catch(
+          (err) => {
+            setToastAlert({
+              title: "Error",
+              type: "error",
+              message: err.detail ?? "Failed to perform this action",
+            });
+          }
+        );
       }
     }
   };
diff --git a/web/components/issues/issue-layouts/kanban/properties.tsx b/web/components/issues/issue-layouts/kanban/properties.tsx
index f1a7d19d7..788607690 100644
--- a/web/components/issues/issue-layouts/kanban/properties.tsx
+++ b/web/components/issues/issue-layouts/kanban/properties.tsx
@@ -124,7 +124,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
           value={issue?.start_date || null}
           onChange={(date: string) => handleStartDate(date)}
           disabled={isReadOnly}
-          placeHolder="Start date"
+          type="start_date"
         />
       )}
 
@@ -134,7 +134,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
           value={issue?.target_date || null}
           onChange={(date: string) => handleTargetDate(date)}
           disabled={isReadOnly}
-          placeHolder="Target date"
+          type="target_date"
         />
       )}
 
diff --git a/web/components/issues/issue-layouts/list/properties.tsx b/web/components/issues/issue-layouts/list/properties.tsx
index 92835c5ab..8b6f54010 100644
--- a/web/components/issues/issue-layouts/list/properties.tsx
+++ b/web/components/issues/issue-layouts/list/properties.tsx
@@ -108,7 +108,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
           value={issue?.start_date || null}
           onChange={(date: string) => handleStartDate(date)}
           disabled={isReadonly}
-          placeHolder="Start date"
+          type="start_date"
         />
       )}
 
@@ -118,7 +118,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
           value={issue?.target_date || null}
           onChange={(date: string) => handleTargetDate(date)}
           disabled={isReadonly}
-          placeHolder="Target date"
+          type="target_date"
         />
       )}
 
diff --git a/web/components/issues/issue-layouts/properties/assignee.tsx b/web/components/issues/issue-layouts/properties/assignee.tsx
index e1623ed5d..b53f1c215 100644
--- a/web/components/issues/issue-layouts/properties/assignee.tsx
+++ b/web/components/issues/issue-layouts/properties/assignee.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 import { usePopper } from "react-popper";
 import { Combobox } from "@headlessui/react";
-import { Check, ChevronDown, Search, User2 } from "lucide-react";
+import { Check, ChevronDown, CircleUser, Search } from "lucide-react";
 // ui
 import { Avatar, AvatarGroup, Tooltip } from "@plane/ui";
 // types
@@ -110,8 +110,8 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
             })}
           </AvatarGroup>
         ) : (
-          <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
-            <User2 className="h-4 w-4 text-custom-text-400" />
+          <span className="h-5 w-5 grid place-items-center">
+            <CircleUser className="h-4 w-4" strokeWidth={1.5} />
           </span>
         )}
       </div>
@@ -140,7 +140,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
           ref={setReferenceElement}
           type="button"
           className={`flex w-full items-center justify-between gap-1 text-xs ${
-            disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+            disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer"
           } ${buttonClassName}`}
           onClick={() => !projectMembers && getWorkspaceMembers()}
         >
diff --git a/web/components/issues/issue-layouts/properties/date.tsx b/web/components/issues/issue-layouts/properties/date.tsx
index 10a8d14bf..43e4ae5eb 100644
--- a/web/components/issues/issue-layouts/properties/date.tsx
+++ b/web/components/issues/issue-layouts/properties/date.tsx
@@ -2,7 +2,7 @@ import React from "react";
 // headless ui
 import { Popover } from "@headlessui/react";
 // lucide icons
-import { Calendar, X } from "lucide-react";
+import { CalendarCheck2, CalendarClock, X } from "lucide-react";
 // react date picker
 import DatePicker from "react-datepicker";
 // mobx
@@ -18,11 +18,24 @@ export interface IIssuePropertyDate {
   value: any;
   onChange: (date: any) => void;
   disabled?: boolean;
-  placeHolder?: string;
+  type: "start_date" | "target_date";
 }
 
+const DATE_OPTIONS = {
+  start_date: {
+    key: "start_date",
+    placeholder: "Start date",
+    icon: CalendarClock,
+  },
+  target_date: {
+    key: "target_date",
+    placeholder: "Target date",
+    icon: CalendarCheck2,
+  },
+};
+
 export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props) => {
-  const { value, onChange, disabled, placeHolder } = props;
+  const { value, onChange, disabled, type } = props;
 
   const dropdownBtn = React.useRef<any>(null);
   const dropdownOptions = React.useRef<any>(null);
@@ -31,6 +44,8 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
 
   useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
 
+  const dateOptionDetails = DATE_OPTIONS[type];
+
   return (
     <Popover as="div" className="relative">
       {({ open }) => {
@@ -49,10 +64,10 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
               }`}
             >
               <div className="flex items-center justify-center gap-2 overflow-hidden">
-                <Calendar className="h-3 w-3" strokeWidth={2} />
+                <dateOptionDetails.icon className="h-3 w-3" strokeWidth={2} />
                 {value && (
                   <>
-                    <Tooltip tooltipHeading={placeHolder} tooltipContent={value ?? "None"}>
+                    <Tooltip tooltipHeading={dateOptionDetails.placeholder} tooltipContent={value ?? "None"}>
                       <div className="text-xs">{value}</div>
                     </Tooltip>
 
diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx
index 25363ccf8..a213876fd 100644
--- a/web/components/issues/issue-layouts/properties/labels.tsx
+++ b/web/components/issues/issue-layouts/properties/labels.tsx
@@ -6,7 +6,7 @@ import { usePopper } from "react-popper";
 // components
 import { Combobox } from "@headlessui/react";
 import { Tooltip } from "@plane/ui";
-import { Check, ChevronDown, Search } from "lucide-react";
+import { Check, ChevronDown, Search, Tags } from "lucide-react";
 // types
 import { Placement } from "@popperjs/core";
 import { RootStore } from "store_legacy/root";
@@ -25,6 +25,7 @@ export interface IIssuePropertyLabels {
   placement?: Placement;
   maxRender?: number;
   noLabelBorder?: boolean;
+  placeholderText?: string;
 }
 
 export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((props) => {
@@ -41,6 +42,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
     placement,
     maxRender = 2,
     noLabelBorder = false,
+    placeholderText,
   } = props;
 
   const {
@@ -144,11 +146,12 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
         )
       ) : (
         <div
-          className={`flex h-full items-center justify-center rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${
+          className={`h-full flex items-center justify-center gap-2 rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${
             noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
           }`}
         >
-          Select labels
+          <Tags className="h-3.5 w-3.5" strokeWidth={2} />
+          {placeholderText}
         </div>
       )}
     </div>
@@ -171,8 +174,8 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
             disabled
               ? "cursor-not-allowed text-custom-text-200"
               : value.length <= maxRender
-                ? "cursor-pointer"
-                : "cursor-pointer hover:bg-custom-background-80"
+              ? "cursor-pointer"
+              : "cursor-pointer hover:bg-custom-background-80"
           }  ${buttonClassName}`}
           onClick={() => !storeLabels && fetchLabels()}
         >
diff --git a/web/components/issues/issue-layouts/properties/state.tsx b/web/components/issues/issue-layouts/properties/state.tsx
index 5188c7145..ab8b226cd 100644
--- a/web/components/issues/issue-layouts/properties/state.tsx
+++ b/web/components/issues/issue-layouts/properties/state.tsx
@@ -94,7 +94,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
 
   const label = (
     <Tooltip tooltipHeading="State" tooltipContent={selectedOption?.name ?? ""} position="top">
-      <div className="flex w-full cursor-pointer items-center gap-2 text-custom-text-200">
+      <div className="flex w-full items-center gap-2 text-custom-text-200">
         {selectedOption && <StateGroupIcon stateGroup={selectedOption?.group as any} color={selectedOption?.color} />}
         <span className="line-clamp-1 inline-block truncate">{selectedOption?.name ?? "State"}</span>
       </div>
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
index 7ae3f326f..33f8a1703 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
@@ -2,6 +2,8 @@ import { useState } from "react";
 import { useRouter } from "next/router";
 import { CustomMenu } from "@plane/ui";
 import { Copy, Link, Pencil, Trash2 } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
 // components
@@ -12,6 +14,8 @@ import { copyUrlToClipboard } from "helpers/string.helper";
 import { IIssue } from "types";
 import { IQuickActionProps } from "../list/list-view-types";
 import { EProjectStore } from "store_legacy/command-palette.store";
+// constant
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   const { issue, handleDelete, handleUpdate, customActionButton } = props;
@@ -24,6 +28,12 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
   const [issueToEdit, setIssueToEdit] = useState<IIssue | null>(null);
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
 
+  const { user: userStore } = useMobxStore();
+
+  const { currentProjectRole } = userStore;
+
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
+
   const { setToastAlert } = useToast();
 
   const handleCopyIssueLink = () => {
@@ -71,43 +81,47 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
             Copy link
           </div>
         </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            setIssueToEdit(issue);
-            setCreateUpdateIssueModal(true);
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <Pencil className="h-3 w-3" />
-            Edit issue
-          </div>
-        </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            setCreateUpdateIssueModal(true);
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <Copy className="h-3 w-3" />
-            Make a copy
-          </div>
-        </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            setDeleteIssueModal(true);
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <Trash2 className="h-3 w-3" />
-            Delete issue
-          </div>
-        </CustomMenu.MenuItem>
+        {isEditingAllowed && (
+          <>
+            <CustomMenu.MenuItem
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                setIssueToEdit(issue);
+                setCreateUpdateIssueModal(true);
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <Pencil className="h-3 w-3" />
+                Edit issue
+              </div>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                setCreateUpdateIssueModal(true);
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <Copy className="h-3 w-3" />
+                Make a copy
+              </div>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                setDeleteIssueModal(true);
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <Trash2 className="h-3 w-3" />
+                Delete issue
+              </div>
+            </CustomMenu.MenuItem>
+          </>
+        )}
       </CustomMenu>
     </>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
index 4ba58975a..14ec310d9 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
@@ -27,7 +27,7 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = ({ issue, members, onC
         value={issue.assignees}
         defaultOptions={issue?.assignee_details ? issue.assignee_details : []}
         onChange={(data) => onChange({ assignees: data })}
-        className="h-full w-full"
+        className="h-11 w-full"
         buttonClassName="!shadow-none !border-0 h-full w-full px-2.5 py-1 "
         noLabelBorder
         hideDropdownArrow
@@ -40,14 +40,16 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = ({ issue, members, onC
         subIssues &&
         subIssues.length > 0 &&
         subIssues.map((subIssue) => (
-          <SpreadsheetAssigneeColumn
-            key={subIssue.id}
-            issue={subIssue}
-            onChange={onChange}
-            expandedIssues={expandedIssues}
-            members={members}
-            disabled={disabled}
-          />
+          <div className={`h-11`}>
+            <SpreadsheetAssigneeColumn
+              key={subIssue.id}
+              issue={subIssue}
+              onChange={onChange}
+              expandedIssues={expandedIssues}
+              members={members}
+              disabled={disabled}
+            />
+          </div>
         ))}
     </>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
index 030318a24..60cb627e2 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
@@ -18,7 +18,7 @@ export const SpreadsheetAttachmentColumn: React.FC<Props> = (props) => {
 
   return (
     <>
-      <div className="flex h-full w-full items-center px-2.5 py-1 text-xs">
+      <div className="flex h-11 w-full items-center px-2.5 py-1 text-xs">
         {issue.attachment_count} {issue.attachment_count === 1 ? "attachment" : "attachments"}
       </div>
 
@@ -27,7 +27,9 @@ export const SpreadsheetAttachmentColumn: React.FC<Props> = (props) => {
         subIssues &&
         subIssues.length > 0 &&
         subIssues.map((subIssue: IIssue) => (
-          <SpreadsheetAttachmentColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
+          <div className={`h-11`}>
+            <SpreadsheetAttachmentColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
+          </div>
         ))}
     </>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
index 2e5ac2a71..fa40551e0 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
@@ -19,7 +19,7 @@ export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({ issue, expandedIss
 
   return (
     <>
-      <div className="flex h-full w-full items-center justify-center text-xs">
+      <div className="flex h-11 w-full items-center justify-center text-xs">
         {renderLongDetailDateFormat(issue.created_at)}
       </div>
 
@@ -28,7 +28,9 @@ export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({ issue, expandedIss
         subIssues &&
         subIssues.length > 0 &&
         subIssues.map((subIssue: IIssue) => (
-          <SpreadsheetCreatedOnColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
+          <div className="h-11">
+            <SpreadsheetCreatedOnColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
+          </div>
         ))}
     </>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
index de7afaa0a..0387cb950 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
@@ -24,7 +24,7 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = ({ issue, onChange, exp
       <ViewDueDateSelect
         issue={issue}
         onChange={(val) => onChange({ target_date: val })}
-        className="flex !h-full !w-full max-w-full items-center px-2.5 py-1"
+        className="flex !h-11 !w-full max-w-full items-center px-2.5 py-1"
         noBorder
         disabled={disabled}
       />
@@ -34,13 +34,15 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = ({ issue, onChange, exp
         subIssues &&
         subIssues.length > 0 &&
         subIssues.map((subIssue: IIssue) => (
-          <SpreadsheetDueDateColumn
-            key={subIssue.id}
-            issue={subIssue}
-            onChange={onChange}
-            expandedIssues={expandedIssues}
-            disabled={disabled}
-          />
+          <div className={`h-11`}>
+            <SpreadsheetDueDateColumn
+              key={subIssue.id}
+              issue={subIssue}
+              onChange={onChange}
+              expandedIssues={expandedIssues}
+              disabled={disabled}
+            />
+          </div>
         ))}
     </>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
index 1f2b0e169..b2bea0483 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
@@ -25,7 +25,7 @@ export const SpreadsheetEstimateColumn: React.FC<Props> = (props) => {
         projectId={issue.project_detail?.id ?? null}
         value={issue.estimate_point}
         onChange={(data) => onChange({ estimate_point: data })}
-        className="h-full w-full"
+        className="h-11 w-full"
         buttonClassName="h-full w-full px-2.5 py-1 !shadow-none !border-0"
         hideDropdownArrow
         disabled={disabled}
@@ -36,13 +36,15 @@ export const SpreadsheetEstimateColumn: React.FC<Props> = (props) => {
         subIssues &&
         subIssues.length > 0 &&
         subIssues.map((subIssue: IIssue) => (
-          <SpreadsheetEstimateColumn
-            key={subIssue.id}
-            issue={subIssue}
-            onChange={onChange}
-            expandedIssues={expandedIssues}
-            disabled={disabled}
-          />
+          <div className={`h-11`}>
+            <SpreadsheetEstimateColumn
+              key={subIssue.id}
+              issue={subIssue}
+              onChange={onChange}
+              expandedIssues={expandedIssues}
+              disabled={disabled}
+            />
+          </div>
         ))}
     </>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
index e2fda3c48..91c9af5b7 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
@@ -29,12 +29,12 @@ export const SpreadsheetLabelColumn: React.FC<Props> = (props) => {
         value={issue.labels}
         defaultOptions={issue?.label_details ? issue.label_details : []}
         onChange={(data) => onChange({ labels: data })}
-        className="h-full w-full"
+        className="h-11 w-full"
         buttonClassName="px-2.5 h-full"
-        noLabelBorder
         hideDropdownArrow
         maxRender={1}
         disabled={disabled}
+        placeholderText="Select labels"
       />
 
       {isExpanded &&
@@ -42,14 +42,16 @@ export const SpreadsheetLabelColumn: React.FC<Props> = (props) => {
         subIssues &&
         subIssues.length > 0 &&
         subIssues.map((subIssue: IIssue) => (
-          <SpreadsheetLabelColumn
-            key={subIssue.id}
-            issue={subIssue}
-            onChange={onChange}
-            labels={labels}
-            expandedIssues={expandedIssues}
-            disabled={disabled}
-          />
+          <div className={`h-11`}>
+            <SpreadsheetLabelColumn
+              key={subIssue.id}
+              issue={subIssue}
+              onChange={onChange}
+              labels={labels}
+              expandedIssues={expandedIssues}
+              disabled={disabled}
+            />
+          </div>
         ))}
     </>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
index 597a595fb..6f9523e0a 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
@@ -18,7 +18,7 @@ export const SpreadsheetLinkColumn: React.FC<Props> = (props) => {
 
   return (
     <>
-      <div className="flex h-full w-full items-center px-2.5 py-1 text-xs">
+      <div className="flex h-11 w-full items-center px-2.5 py-1 text-xs">
         {issue.link_count} {issue.link_count === 1 ? "link" : "links"}
       </div>
 
@@ -27,7 +27,9 @@ export const SpreadsheetLinkColumn: React.FC<Props> = (props) => {
         subIssues &&
         subIssues.length > 0 &&
         subIssues.map((subIssue: IIssue) => (
-          <SpreadsheetLinkColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
+          <div className={`h-11`}>
+            <SpreadsheetLinkColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
+          </div>
         ))}
     </>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
index f69e6cfae..c4df4bfbe 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
@@ -24,7 +24,7 @@ export const SpreadsheetPriorityColumn: React.FC<Props> = ({ issue, onChange, ex
       <PrioritySelect
         value={issue.priority}
         onChange={(data) => onChange({ priority: data })}
-        className="h-full w-full"
+        className="h-11 w-full"
         buttonClassName="!shadow-none !border-0 h-full w-full px-2.5 py-1 "
         showTitle
         highlightUrgentPriority={false}
@@ -37,13 +37,15 @@ export const SpreadsheetPriorityColumn: React.FC<Props> = ({ issue, onChange, ex
         subIssues &&
         subIssues.length > 0 &&
         subIssues.map((subIssue: IIssue) => (
-          <SpreadsheetPriorityColumn
-            key={subIssue.id}
-            issue={subIssue}
-            onChange={onChange}
-            expandedIssues={expandedIssues}
-            disabled={disabled}
-          />
+          <div className={`h-11`}>
+            <SpreadsheetPriorityColumn
+              key={subIssue.id}
+              issue={subIssue}
+              onChange={onChange}
+              expandedIssues={expandedIssues}
+              disabled={disabled}
+            />
+          </div>
         ))}
     </>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
index 4eb2fd2c3..d2817a429 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
@@ -24,7 +24,7 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = ({ issue, onChange, e
       <ViewStartDateSelect
         issue={issue}
         onChange={(val) => onChange({ start_date: val })}
-        className="flex !h-full !w-full max-w-full items-center px-2.5 py-1"
+        className="flex !h-11 !w-full max-w-full items-center px-2.5 py-1"
         noBorder
         disabled={disabled}
       />
@@ -34,13 +34,15 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = ({ issue, onChange, e
         subIssues &&
         subIssues.length > 0 &&
         subIssues.map((subIssue: IIssue) => (
-          <SpreadsheetStartDateColumn
-            key={subIssue.id}
-            issue={subIssue}
-            onChange={onChange}
-            expandedIssues={expandedIssues}
-            disabled={disabled}
-          />
+          <div className={`h-11`}>
+            <SpreadsheetStartDateColumn
+              key={subIssue.id}
+              issue={subIssue}
+              onChange={onChange}
+              expandedIssues={expandedIssues}
+              disabled={disabled}
+            />
+          </div>
         ))}
     </>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
index b75336159..964afce98 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
@@ -29,7 +29,7 @@ export const SpreadsheetStateColumn: React.FC<Props> = (props) => {
         value={issue.state}
         defaultOptions={issue?.state_detail ? [issue.state_detail] : []}
         onChange={(data) => onChange({ state: data.id, state_detail: data })}
-        className="h-full w-full"
+        className="w-full !h-11"
         buttonClassName="!shadow-none !border-0 h-full w-full"
         hideDropdownArrow
         disabled={disabled}
@@ -40,14 +40,16 @@ export const SpreadsheetStateColumn: React.FC<Props> = (props) => {
         subIssues &&
         subIssues.length > 0 &&
         subIssues.map((subIssue) => (
-          <SpreadsheetStateColumn
-            key={subIssue.id}
-            issue={subIssue}
-            onChange={onChange}
-            states={states}
-            expandedIssues={expandedIssues}
-            disabled={disabled}
-          />
+          <div className="h-11">
+            <SpreadsheetStateColumn
+              key={subIssue.id}
+              issue={subIssue}
+              onChange={onChange}
+              states={states}
+              expandedIssues={expandedIssues}
+              disabled={disabled}
+            />
+          </div>
         ))}
     </>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
index a76bd0d4b..2fe1d43e2 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
@@ -18,7 +18,7 @@ export const SpreadsheetSubIssueColumn: React.FC<Props> = (props) => {
 
   return (
     <>
-      <div className="flex h-full w-full items-center px-2.5 py-1 text-xs">
+      <div className="flex h-11 w-full items-center px-2.5 py-1 text-xs">
         {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
       </div>
 
@@ -27,7 +27,9 @@ export const SpreadsheetSubIssueColumn: React.FC<Props> = (props) => {
         subIssues &&
         subIssues.length > 0 &&
         subIssues.map((subIssue: IIssue) => (
-          <SpreadsheetSubIssueColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
+          <div className={`h-11`}>
+            <SpreadsheetSubIssueColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
+          </div>
         ))}
     </>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
index 2f62cd88d..275bcd854 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
@@ -21,7 +21,7 @@ export const SpreadsheetUpdatedOnColumn: React.FC<Props> = (props) => {
 
   return (
     <>
-      <div className="flex h-full w-full items-center justify-center text-xs">
+      <div className="flex h-11 w-full items-center justify-center text-xs">
         {renderLongDetailDateFormat(issue.updated_at)}
       </div>
 
@@ -30,7 +30,9 @@ export const SpreadsheetUpdatedOnColumn: React.FC<Props> = (props) => {
         subIssues &&
         subIssues.length > 0 &&
         subIssues.map((subIssue: IIssue) => (
-          <SpreadsheetUpdatedOnColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
+          <div className={`h-11`}>
+            <SpreadsheetUpdatedOnColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
+          </div>
         ))}
     </>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
index 75e2a0719..120e0fb16 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
@@ -159,13 +159,13 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
         </CustomMenu>
       </div>
 
-      <div className="h-full w-full min-w-[8rem]">
+      <div className="h-full w-full divide-y-[0.5px] border-b-[0.5px] min-w-[8rem]">
         {issues?.map((issue) => {
           const disableUserActions = !canEditProperties(issue.project);
           return (
             <div
               key={`${property}-${issue.id}`}
-              className={`h-11 border-b-[0.5px] border-custom-border-200 ${
+              className={`h-fit divide-y-[0.5px] border-custom-border-200 ${
                 disableUserActions ? "" : "cursor-pointer hover:bg-custom-background-80"
               }`}
             >
diff --git a/web/components/issues/modal.tsx b/web/components/issues/modal.tsx
index ce0706b73..998ff45ae 100644
--- a/web/components/issues/modal.tsx
+++ b/web/components/issues/modal.tsx
@@ -266,11 +266,11 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
           if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
         }
       })
-      .catch(() => {
+      .catch((err) => {
         setToastAlert({
           type: "error",
           title: "Error!",
-          message: "Issue could not be created. Please try again.",
+          message: err.detail ?? "Issue could not be created. Please try again.",
         });
         postHogEventTracker(
           "ISSUE_CREATED",
@@ -312,11 +312,11 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
 
         if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
       })
-      .catch(() => {
+      .catch((err) => {
         setToastAlert({
           type: "error",
           title: "Error!",
-          message: "Issue could not be created. Please try again.",
+          message: err.detail ?? "Issue could not be created. Please try again.",
         });
       });
   };
@@ -347,11 +347,11 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
           }
         );
       })
-      .catch(() => {
+      .catch((err) => {
         setToastAlert({
           type: "error",
           title: "Error!",
-          message: "Issue could not be updated. Please try again.",
+          message: err.detail ?? "Issue could not be updated. Please try again.",
         });
         postHogEventTracker(
           "ISSUE_UPDATED",
diff --git a/web/components/issues/select/project.tsx b/web/components/issues/select/project.tsx
index 1cd8bf56e..6aed0aac5 100644
--- a/web/components/issues/select/project.tsx
+++ b/web/components/issues/select/project.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import type { FieldError } from "react-hook-form";
 // mobx store
@@ -23,9 +22,6 @@ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = observer((p
   const { value, onChange } = props;
   const [query, setQuery] = useState("");
 
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
@@ -33,13 +29,13 @@ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = observer((p
     placement: "bottom-start",
   });
 
-  const { project: projectStore } = useMobxStore();
+  const {
+    project: { joinedProjects },
+  } = useMobxStore();
 
-  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
+  const selectedProject = joinedProjects?.find((i) => i.id === value);
 
-  const selectedProject = projects?.find((i) => i.id === value);
-
-  const options = projects?.map((project) => ({
+  const options = joinedProjects?.map((project) => ({
     value: project.id,
     query: project.name,
     content: (
@@ -61,8 +57,8 @@ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = observer((p
         {selectedProject.emoji
           ? renderEmoji(selectedProject.emoji)
           : selectedProject.icon_prop
-            ? renderEmoji(selectedProject.icon_prop)
-            : null}
+          ? renderEmoji(selectedProject.icon_prop)
+          : null}
       </span>
       <div className="truncate">{selectedProject.identifier}</div>
     </div>
diff --git a/web/components/issues/view-select/due-date.tsx b/web/components/issues/view-select/due-date.tsx
index 3b7b3e833..d7e00148e 100644
--- a/web/components/issues/view-select/due-date.tsx
+++ b/web/components/issues/view-select/due-date.tsx
@@ -1,7 +1,7 @@
 // ui
 import { CustomDatePicker } from "components/ui";
 import { Tooltip } from "@plane/ui";
-import { CalendarDays } from "lucide-react";
+import { CalendarCheck } from "lucide-react";
 // helpers
 import {
   findHowManyDaysLeft,
@@ -51,8 +51,8 @@ export const ViewDueDateSelect: React.FC<Props> = ({
           issue.target_date === null
             ? ""
             : issue.target_date < new Date().toISOString()
-              ? "text-red-600"
-              : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
+            ? "text-red-600"
+            : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
         }`}
       >
         <CustomDatePicker
@@ -67,7 +67,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({
             >
               {issue.target_date ? (
                 <>
-                  <CalendarDays className="h-3.5 w-3.5 flex-shrink-0" />
+                  <CalendarCheck className="h-3.5 w-3.5 flex-shrink-0" />
                   <span>
                     {areYearsEqual
                       ? renderShortDate(issue.target_date ?? "", "_ _")
@@ -76,7 +76,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({
                 </>
               ) : (
                 <>
-                  <CalendarDays className="h-3.5 w-3.5 flex-shrink-0" />
+                  <CalendarCheck className="h-3.5 w-3.5 flex-shrink-0" />
                   <span>Due Date</span>
                 </>
               )}
diff --git a/web/components/issues/view-select/start-date.tsx b/web/components/issues/view-select/start-date.tsx
index b39b54b5b..c1408f015 100644
--- a/web/components/issues/view-select/start-date.tsx
+++ b/web/components/issues/view-select/start-date.tsx
@@ -1,7 +1,7 @@
 // ui
 import { CustomDatePicker } from "components/ui";
 import { Tooltip } from "@plane/ui";
-import { CalendarDays } from "lucide-react";
+import { CalendarClock } from "lucide-react";
 // helpers
 import { renderShortDate, renderShortDateWithYearFormat, renderShortMonthDate } from "helpers/date-time.helper";
 // types
@@ -55,7 +55,7 @@ export const ViewStartDateSelect: React.FC<Props> = ({
             >
               {issue?.start_date ? (
                 <>
-                  <CalendarDays className="h-3.5 w-3.5 flex-shrink-0" />
+                  <CalendarClock className="h-3.5 w-3.5 flex-shrink-0" />
                   <span>
                     {areYearsEqual
                       ? renderShortDate(issue?.start_date, "_ _")
@@ -64,7 +64,7 @@ export const ViewStartDateSelect: React.FC<Props> = ({
                 </>
               ) : (
                 <>
-                  <CalendarDays className="h-3.5 w-3.5 flex-shrink-0" />
+                  <CalendarClock className="h-3.5 w-3.5 flex-shrink-0" />
                   <span>Start Date</span>
                 </>
               )}
diff --git a/web/components/labels/project-setting-label-group.tsx b/web/components/labels/project-setting-label-group.tsx
index 9b4e9e6ea..5b68826a0 100644
--- a/web/components/labels/project-setting-label-group.tsx
+++ b/web/components/labels/project-setting-label-group.tsx
@@ -77,7 +77,6 @@ export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
           <Droppable
             key={`label.group.droppable.${label.id}`}
             droppableId={`label.group.droppable.${label.id}`}
-            isCombineEnabled={!groupDragSnapshot.isDragging && !isUpdating}
             isDropDisabled={groupDragSnapshot.isDragging || isUpdating || isDropDisabled}
           >
             {(droppableProvided) => (
diff --git a/web/components/labels/project-setting-label-list.tsx b/web/components/labels/project-setting-label-list.tsx
index b3a558df7..75fc40329 100644
--- a/web/components/labels/project-setting-label-list.tsx
+++ b/web/components/labels/project-setting-label-list.tsx
@@ -10,11 +10,17 @@ import {
   DropResult,
   Droppable,
 } from "@hello-pangea/dnd";
-
 // store
 import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useDraggableInPortal from "hooks/use-draggable-portal";
 // components
-import { CreateUpdateLabelInline, DeleteLabelModal, ProjectSettingLabelGroup } from "components/labels";
+import {
+  CreateUpdateLabelInline,
+  DeleteLabelModal,
+  ProjectSettingLabelGroup,
+  ProjectSettingLabelItem,
+} from "components/labels";
 // ui
 import { Button, Loader } from "@plane/ui";
 import { EmptyState } from "components/common";
@@ -22,9 +28,6 @@ import { EmptyState } from "components/common";
 import emptyLabel from "public/empty-state/label.svg";
 // types
 import { IIssueLabel } from "types";
-//component
-import { ProjectSettingLabelItem } from "./project-setting-label-item";
-import useDraggableInPortal from "hooks/use-draggable-portal";
 
 const LABELS_ROOT = "labels.root";
 
@@ -137,7 +140,7 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
                 isDropDisabled={isUpdating}
               >
                 {(droppableProvided, droppableSnapshot) => (
-                  <div className={`mt-3`} ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
+                  <div className="mt-3" ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
                     {projectLabelsTree.map((label, index) => {
                       if (label.children && label.children.length) {
                         return (
diff --git a/web/components/modules/modal.tsx b/web/components/modules/modal.tsx
index 80e22989e..da4103833 100644
--- a/web/components/modules/modal.tsx
+++ b/web/components/modules/modal.tsx
@@ -69,11 +69,11 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
           state: "SUCCESS",
         });
       })
-      .catch(() => {
+      .catch((err) => {
         setToastAlert({
           type: "error",
           title: "Error!",
-          message: "Module could not be created. Please try again.",
+          message: err.detail ?? "Module could not be created. Please try again.",
         });
         postHogEventTracker("MODULE_CREATED", {
           state: "FAILED",
@@ -99,11 +99,11 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
           state: "SUCCESS",
         });
       })
-      .catch(() => {
+      .catch((err) => {
         setToastAlert({
           type: "error",
           title: "Error!",
-          message: "Module could not be updated. Please try again.",
+          message: err.detail ?? "Module could not be updated. Please try again.",
         });
         postHogEventTracker("MODULE_UPDATED", {
           state: "FAILED",
diff --git a/web/components/modules/module-card-item.tsx b/web/components/modules/module-card-item.tsx
index b77b81e6b..eb65084c1 100644
--- a/web/components/modules/module-card-item.tsx
+++ b/web/components/modules/module-card-item.tsx
@@ -19,6 +19,7 @@ import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper"
 import { IModule } from "types";
 // constants
 import { MODULE_STATUS } from "constants/module";
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 type Props = {
   module: IModule;
@@ -35,7 +36,11 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
 
   const { setToastAlert } = useToast();
 
-  const { module: moduleStore } = useMobxStore();
+  const { module: moduleStore, user: userStore } = useMobxStore();
+
+  const { currentProjectRole } = userStore;
+
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
 
   const moduleTotalIssues =
     module.backlog_issues +
@@ -59,8 +64,8 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
     ? !moduleTotalIssues || moduleTotalIssues === 0
       ? "0 Issue"
       : moduleTotalIssues === module.completed_issues
-        ? `${moduleTotalIssues} Issue${moduleTotalIssues > 1 ? "s" : ""}`
-        : `${module.completed_issues}/${moduleTotalIssues} Issues`
+      ? `${moduleTotalIssues} Issue${moduleTotalIssues > 1 ? "s" : ""}`
+      : `${module.completed_issues}/${moduleTotalIssues} Issues`
     : "0 Issue";
 
   const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -217,28 +222,34 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
               )}
 
               <div className="z-10 flex items-center gap-1.5">
-                {module.is_favorite ? (
-                  <button type="button" onClick={handleRemoveFromFavorites}>
-                    <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
-                  </button>
-                ) : (
-                  <button type="button" onClick={handleAddToFavorites}>
-                    <Star className="h-3.5 w-3.5 text-custom-text-200" />
-                  </button>
-                )}
+                {isEditingAllowed &&
+                  (module.is_favorite ? (
+                    <button type="button" onClick={handleRemoveFromFavorites}>
+                      <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
+                    </button>
+                  ) : (
+                    <button type="button" onClick={handleAddToFavorites}>
+                      <Star className="h-3.5 w-3.5 text-custom-text-200" />
+                    </button>
+                  ))}
+
                 <CustomMenu width="auto" ellipsis className="z-10">
-                  <CustomMenu.MenuItem onClick={handleEditModule}>
-                    <span className="flex items-center justify-start gap-2">
-                      <Pencil className="h-3 w-3" />
-                      <span>Edit module</span>
-                    </span>
-                  </CustomMenu.MenuItem>
-                  <CustomMenu.MenuItem onClick={handleDeleteModule}>
-                    <span className="flex items-center justify-start gap-2">
-                      <Trash2 className="h-3 w-3" />
-                      <span>Delete module</span>
-                    </span>
-                  </CustomMenu.MenuItem>
+                  {isEditingAllowed && (
+                    <>
+                      <CustomMenu.MenuItem onClick={handleEditModule}>
+                        <span className="flex items-center justify-start gap-2">
+                          <Pencil className="h-3 w-3" />
+                          <span>Edit module</span>
+                        </span>
+                      </CustomMenu.MenuItem>
+                      <CustomMenu.MenuItem onClick={handleDeleteModule}>
+                        <span className="flex items-center justify-start gap-2">
+                          <Trash2 className="h-3 w-3" />
+                          <span>Delete module</span>
+                        </span>
+                      </CustomMenu.MenuItem>
+                    </>
+                  )}
                   <CustomMenu.MenuItem onClick={handleCopyText}>
                     <span className="flex items-center justify-start gap-2">
                       <LinkIcon className="h-3 w-3" />
diff --git a/web/components/modules/module-list-item.tsx b/web/components/modules/module-list-item.tsx
index 818f0b697..005d8beba 100644
--- a/web/components/modules/module-list-item.tsx
+++ b/web/components/modules/module-list-item.tsx
@@ -19,6 +19,7 @@ import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper"
 import { IModule } from "types";
 // constants
 import { MODULE_STATUS } from "constants/module";
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 type Props = {
   module: IModule;
@@ -35,7 +36,11 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
 
   const { setToastAlert } = useToast();
 
-  const { module: moduleStore } = useMobxStore();
+  const { module: moduleStore, user: userStore } = useMobxStore();
+
+  const { currentProjectRole } = userStore;
+
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
 
   const completionPercentage = ((module.completed_issues + module.cancelled_issues) / module.total_issues) * 100;
 
@@ -194,29 +199,34 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
               </div>
             </Tooltip>
 
-            {module.is_favorite ? (
-              <button type="button" onClick={handleRemoveFromFavorites} className="z-[1]">
-                <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
-              </button>
-            ) : (
-              <button type="button" onClick={handleAddToFavorites} className="z-[1]">
-                <Star className="h-3.5 w-3.5 text-custom-text-300" />
-              </button>
-            )}
+            {isEditingAllowed &&
+              (module.is_favorite ? (
+                <button type="button" onClick={handleRemoveFromFavorites} className="z-[1]">
+                  <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
+                </button>
+              ) : (
+                <button type="button" onClick={handleAddToFavorites} className="z-[1]">
+                  <Star className="h-3.5 w-3.5 text-custom-text-300" />
+                </button>
+              ))}
 
             <CustomMenu width="auto" verticalEllipsis buttonClassName="z-[1]">
-              <CustomMenu.MenuItem onClick={handleEditModule}>
-                <span className="flex items-center justify-start gap-2">
-                  <Pencil className="h-3 w-3" />
-                  <span>Edit module</span>
-                </span>
-              </CustomMenu.MenuItem>
-              <CustomMenu.MenuItem onClick={handleDeleteModule}>
-                <span className="flex items-center justify-start gap-2">
-                  <Trash2 className="h-3 w-3" />
-                  <span>Delete module</span>
-                </span>
-              </CustomMenu.MenuItem>
+              {isEditingAllowed && (
+                <>
+                  <CustomMenu.MenuItem onClick={handleEditModule}>
+                    <span className="flex items-center justify-start gap-2">
+                      <Pencil className="h-3 w-3" />
+                      <span>Edit module</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={handleDeleteModule}>
+                    <span className="flex items-center justify-start gap-2">
+                      <Trash2 className="h-3 w-3" />
+                      <span>Delete module</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                </>
+              )}
               <CustomMenu.MenuItem onClick={handleCopyText}>
                 <span className="flex items-center justify-start gap-2">
                   <LinkIcon className="h-3 w-3" />
diff --git a/web/components/pages/create-update-page-modal.tsx b/web/components/pages/create-update-page-modal.tsx
index 2f64fe853..e754bd771 100644
--- a/web/components/pages/create-update-page-modal.tsx
+++ b/web/components/pages/create-update-page-modal.tsx
@@ -60,11 +60,11 @@ export const CreateUpdatePageModal: FC<Props> = (props) => {
           }
         );
       })
-      .catch(() => {
+      .catch((err) => {
         setToastAlert({
           type: "error",
           title: "Error!",
-          message: "Page could not be created. Please try again.",
+          message: err.detail ?? "Page could not be created. Please try again.",
         });
         postHogEventTracker(
           "PAGE_CREATED",
@@ -104,11 +104,11 @@ export const CreateUpdatePageModal: FC<Props> = (props) => {
           }
         );
       })
-      .catch(() => {
+      .catch((err) => {
         setToastAlert({
           type: "error",
           title: "Error!",
-          message: "Page could not be updated. Please try again.",
+          message: err.detail ?? "Page could not be updated. Please try again.",
         });
         postHogEventTracker(
           "PAGE_UPDATED",
diff --git a/web/components/pages/pages-list/list-item.tsx b/web/components/pages/pages-list/list-item.tsx
index c238e4b7e..6f02f7656 100644
--- a/web/components/pages/pages-list/list-item.tsx
+++ b/web/components/pages/pages-list/list-item.tsx
@@ -154,6 +154,7 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
   const userCanChangeAccess = isCurrentUserOwner;
   const userCanArchive = isCurrentUserOwner || currentProjectRole === EUserWorkspaceRoles.ADMIN;
   const userCanDelete = isCurrentUserOwner || currentProjectRole === EUserWorkspaceRoles.ADMIN;
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
 
   return (
     <>
@@ -208,17 +209,19 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
                     <p className="text-sm text-custom-text-200">{render24HourFormatTime(page.updated_at)}</p>
                   </Tooltip>
                 )}
-                <Tooltip tooltipContent={`${page.is_favorite ? "Remove from favorites" : "Mark as favorite"}`}>
-                  {page.is_favorite ? (
-                    <button type="button" onClick={handleRemoveFromFavorites}>
-                      <Star className="h-3.5 w-3.5 fill-orange-400 text-orange-400" />
-                    </button>
-                  ) : (
-                    <button type="button" onClick={handleAddToFavorites}>
-                      <Star className="h-3.5 w-3.5" />
-                    </button>
-                  )}
-                </Tooltip>
+                {isEditingAllowed && (
+                  <Tooltip tooltipContent={`${page.is_favorite ? "Remove from favorites" : "Mark as favorite"}`}>
+                    {page.is_favorite ? (
+                      <button type="button" onClick={handleRemoveFromFavorites}>
+                        <Star className="h-3.5 w-3.5 fill-orange-400 text-orange-400" />
+                      </button>
+                    ) : (
+                      <button type="button" onClick={handleAddToFavorites}>
+                        <Star className="h-3.5 w-3.5" />
+                      </button>
+                    )}
+                  </Tooltip>
+                )}
                 {userCanChangeAccess && (
                   <Tooltip
                     tooltipContent={`${
@@ -255,7 +258,7 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
                           </div>
                         </CustomMenu.MenuItem>
                       )}
-                      {userCanDelete && (
+                      {userCanDelete && isEditingAllowed && (
                         <CustomMenu.MenuItem onClick={handleDeletePage}>
                           <div className="flex items-center gap-2">
                             <Trash2 className="h-3 w-3" />
@@ -266,7 +269,7 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
                     </>
                   ) : (
                     <>
-                      {userCanEdit && (
+                      {userCanEdit && isEditingAllowed && (
                         <CustomMenu.MenuItem onClick={handleEditPage}>
                           <div className="flex items-center gap-2">
                             <Pencil className="h-3 w-3" />
@@ -274,7 +277,7 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
                           </div>
                         </CustomMenu.MenuItem>
                       )}
-                      {userCanArchive && (
+                      {userCanArchive && isEditingAllowed && (
                         <CustomMenu.MenuItem onClick={handleArchivePage}>
                           <div className="flex items-center gap-2">
                             <Archive className="h-3 w-3" />
diff --git a/web/components/workspace/sidebar-quick-action.tsx b/web/components/workspace/sidebar-quick-action.tsx
index 4c3213a76..4b57b9354 100644
--- a/web/components/workspace/sidebar-quick-action.tsx
+++ b/web/components/workspace/sidebar-quick-action.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 
 // ui
-import { ChevronDown, PenSquare, Search } from "lucide-react";
+import { ChevronUp, PenSquare, Search } from "lucide-react";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
 // components
@@ -37,7 +37,6 @@ export const WorkspaceSidebarQuickAction = observer(() => {
         }}
         fieldsToShow={["all"]}
       />
-
       <div
         className={`mt-4 flex w-full cursor-pointer items-center justify-between px-4 ${
           isSidebarCollapsed ? "flex-col gap-1" : "gap-2"
@@ -74,10 +73,7 @@ export const WorkspaceSidebarQuickAction = observer(() => {
                   isSidebarCollapsed ? "hidden" : "block"
                 }`}
               >
-                <ChevronDown
-                  size={16}
-                  className="rotate-0 transform !text-custom-sidebar-text-300 transition-transform duration-300 group-hover:rotate-180"
-                />
+                <ChevronUp className="h-4 w-4 rotate-180 transform !text-custom-sidebar-text-300 transition-transform duration-300 group-hover:rotate-0" />
               </button>
 
               <div
diff --git a/web/constants/spreadsheet.ts b/web/constants/spreadsheet.ts
index 00a59eddb..07e7547db 100644
--- a/web/constants/spreadsheet.ts
+++ b/web/constants/spreadsheet.ts
@@ -1,6 +1,6 @@
 import { TIssueOrderByOptions } from "types";
 import { LayersIcon, DoubleCircleIcon, UserGroupIcon } from "@plane/ui";
-import { CalendarDays, Link2, Signal, Tag, Triangle, Paperclip } from "lucide-react";
+import { CalendarDays, Link2, Signal, Tag, Triangle, Paperclip, CalendarClock, CalendarCheck } from "lucide-react";
 import { FC } from "react";
 import { ISvgIcons } from "@plane/ui/src/icons/type";
 
@@ -36,7 +36,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "New",
     descendingOrderKey: "target_date",
     descendingOrderTitle: "Old",
-    icon: CalendarDays,
+    icon: CalendarCheck,
   },
   estimate: {
     title: "Estimate",
@@ -68,7 +68,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "New",
     descendingOrderKey: "start_date",
     descendingOrderTitle: "Old",
-    icon: CalendarDays,
+    icon: CalendarClock,
   },
   state: {
     title: "State",
diff --git a/web/pages/profile/activity.tsx b/web/pages/profile/activity.tsx
index 80873f0a7..744ecae64 100644
--- a/web/pages/profile/activity.tsx
+++ b/web/pages/profile/activity.tsx
@@ -156,7 +156,9 @@ const ProfileActivityPage: NextPageWithLayout = () => {
                                   {activityItem.actor_detail.first_name} Bot
                                 </span>
                               ) : (
-                                <Link href={`/${workspaceSlug}/profile/${activityItem.actor_detail.id}`}>
+                                <Link
+                                  href={`/${activityItem.workspace_detail.slug}/profile/${activityItem.actor_detail.id}`}
+                                >
                                   <span className="text-gray font-medium">
                                     {activityItem.actor_detail.display_name}
                                   </span>
diff --git a/web/pages/profile/change-password.tsx b/web/pages/profile/change-password.tsx
index 6bddf0734..85074269c 100644
--- a/web/pages/profile/change-password.tsx
+++ b/web/pages/profile/change-password.tsx
@@ -33,7 +33,7 @@ const ChangePasswordPage: NextPageWithLayout = observer(() => {
   const [isPageLoading, setIsPageLoading] = useState(true);
 
   const {
-    appConfig: { envConfig },
+    user: { currentUser },
   } = useMobxStore();
 
   const router = useRouter();
@@ -74,20 +74,11 @@ const ChangePasswordPage: NextPageWithLayout = observer(() => {
   };
 
   useEffect(() => {
-    if (!envConfig) return;
+    if (!currentUser) return;
 
-    const enableEmailPassword =
-      envConfig?.email_password_login ||
-      !(
-        envConfig?.email_password_login ||
-        envConfig?.magic_login ||
-        envConfig?.google_client_id ||
-        envConfig?.github_client_id
-      );
-
-    if (!enableEmailPassword) router.push("/profile");
+    if (currentUser.is_password_autoset) router.push("/profile");
     else setIsPageLoading(false);
-  }, [envConfig, router]);
+  }, [currentUser, router]);
 
   if (isPageLoading)
     return (
diff --git a/web/store/application/app-config.store.ts b/web/store/application/app-config.store.ts
index 3a4d9efc0..8e6ff558c 100644
--- a/web/store/application/app-config.store.ts
+++ b/web/store/application/app-config.store.ts
@@ -1,6 +1,6 @@
 import { observable, action, makeObservable, runInAction } from "mobx";
 // types
-import { RootStore } from "./root";
+import { RootStore } from "../root.store";
 import { IAppConfig } from "types/app";
 // services
 import { AppConfigService } from "services/app_config.service";
@@ -11,7 +11,7 @@ export interface IAppConfigStore {
   fetchAppConfig: () => Promise<any>;
 }
 
-class AppConfigStore implements IAppConfigStore {
+export class AppConfigStore implements IAppConfigStore {
   // observables
   envConfig: IAppConfig | null = null;
 
@@ -43,5 +43,3 @@ class AppConfigStore implements IAppConfigStore {
     }
   };
 }
-
-export default AppConfigStore;
diff --git a/web/store/application/command-palette.store.ts b/web/store/application/command-palette.store.ts
index e69de29bb..4403c786a 100644
--- a/web/store/application/command-palette.store.ts
+++ b/web/store/application/command-palette.store.ts
@@ -0,0 +1,198 @@
+import { observable, action, makeObservable, computed } from "mobx";
+// types
+import { RootStore } from "../root.store";
+// services
+import { ProjectService } from "services/project";
+import { PageService } from "services/page.service";
+
+export enum EProjectStore {
+  PROJECT = "ProjectStore",
+  PROJECT_VIEW = "ProjectViewStore",
+  PROFILE = "ProfileStore",
+  MODULE = "ModuleStore",
+  CYCLE = "CycleStore",
+}
+
+export interface ModalData {
+  store: EProjectStore;
+  viewId: string;
+}
+
+export interface ICommandPaletteStore {
+  isCommandPaletteOpen: boolean;
+  isShortcutModalOpen: boolean;
+  isCreateProjectModalOpen: boolean;
+  isCreateCycleModalOpen: boolean;
+  isCreateModuleModalOpen: boolean;
+  isCreateViewModalOpen: boolean;
+  isCreatePageModalOpen: boolean;
+  isCreateIssueModalOpen: boolean;
+  isDeleteIssueModalOpen: boolean;
+  isBulkDeleteIssueModalOpen: boolean;
+
+  // computed
+  isAnyModalOpen: boolean;
+
+  toggleCommandPaletteModal: (value?: boolean) => void;
+  toggleShortcutModal: (value?: boolean) => void;
+  toggleCreateProjectModal: (value?: boolean) => void;
+  toggleCreateCycleModal: (value?: boolean) => void;
+  toggleCreateViewModal: (value?: boolean) => void;
+  toggleCreatePageModal: (value?: boolean) => void;
+  toggleCreateIssueModal: (value?: boolean, storeType?: EProjectStore) => void;
+  toggleCreateModuleModal: (value?: boolean) => void;
+  toggleDeleteIssueModal: (value?: boolean) => void;
+  toggleBulkDeleteIssueModal: (value?: boolean) => void;
+
+  createIssueStoreType: EProjectStore;
+}
+
+export class CommandPaletteStore implements ICommandPaletteStore {
+  isCommandPaletteOpen: boolean = false;
+  isShortcutModalOpen: boolean = false;
+  isCreateProjectModalOpen: boolean = false;
+  isCreateCycleModalOpen: boolean = false;
+  isCreateModuleModalOpen: boolean = false;
+  isCreateViewModalOpen: boolean = false;
+  isCreatePageModalOpen: boolean = false;
+  isCreateIssueModalOpen: boolean = false;
+  isDeleteIssueModalOpen: boolean = false;
+  isBulkDeleteIssueModalOpen: boolean = false;
+  // root store
+  rootStore;
+  // service
+  projectService;
+  pageService;
+
+  createIssueStoreType: EProjectStore = EProjectStore.PROJECT;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      isCommandPaletteOpen: observable.ref,
+      isShortcutModalOpen: observable.ref,
+      isCreateProjectModalOpen: observable.ref,
+      isCreateCycleModalOpen: observable.ref,
+      isCreateModuleModalOpen: observable.ref,
+      isCreateViewModalOpen: observable.ref,
+      isCreatePageModalOpen: observable.ref,
+      isCreateIssueModalOpen: observable.ref,
+      isDeleteIssueModalOpen: observable.ref,
+      isBulkDeleteIssueModalOpen: observable.ref,
+      // computed
+      isAnyModalOpen: computed,
+      // projectPages: computed,
+      // action
+      toggleCommandPaletteModal: action,
+      toggleShortcutModal: action,
+      toggleCreateProjectModal: action,
+      toggleCreateCycleModal: action,
+      toggleCreateViewModal: action,
+      toggleCreatePageModal: action,
+      toggleCreateIssueModal: action,
+      toggleCreateModuleModal: action,
+      toggleDeleteIssueModal: action,
+      toggleBulkDeleteIssueModal: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.projectService = new ProjectService();
+    this.pageService = new PageService();
+  }
+
+  get isAnyModalOpen() {
+    return Boolean(
+      this.isCreateIssueModalOpen ||
+        this.isCreateCycleModalOpen ||
+        this.isCreatePageModalOpen ||
+        this.isCreateProjectModalOpen ||
+        this.isCreateModuleModalOpen ||
+        this.isCreateViewModalOpen ||
+        this.isShortcutModalOpen ||
+        this.isBulkDeleteIssueModalOpen ||
+        this.isDeleteIssueModalOpen
+    );
+  }
+
+  toggleCommandPaletteModal = (value?: boolean) => {
+    if (value !== undefined) {
+      this.isCommandPaletteOpen = value;
+    } else {
+      this.isCommandPaletteOpen = !this.isCommandPaletteOpen;
+    }
+  };
+
+  toggleShortcutModal = (value?: boolean) => {
+    if (value !== undefined) {
+      this.isShortcutModalOpen = value;
+    } else {
+      this.isShortcutModalOpen = !this.isShortcutModalOpen;
+    }
+  };
+
+  toggleCreateProjectModal = (value?: boolean) => {
+    if (value !== undefined) {
+      this.isCreateProjectModalOpen = value;
+    } else {
+      this.isCreateProjectModalOpen = !this.isCreateProjectModalOpen;
+    }
+  };
+
+  toggleCreateCycleModal = (value?: boolean) => {
+    if (value !== undefined) {
+      this.isCreateCycleModalOpen = value;
+    } else {
+      this.isCreateCycleModalOpen = !this.isCreateCycleModalOpen;
+    }
+  };
+
+  toggleCreateViewModal = (value?: boolean) => {
+    if (value !== undefined) {
+      this.isCreateViewModalOpen = value;
+    } else {
+      this.isCreateViewModalOpen = !this.isCreateViewModalOpen;
+    }
+  };
+
+  toggleCreatePageModal = (value?: boolean) => {
+    if (value !== undefined) {
+      this.isCreatePageModalOpen = value;
+    } else {
+      this.isCreatePageModalOpen = !this.isCreatePageModalOpen;
+    }
+  };
+
+  toggleCreateIssueModal = (value?: boolean, storeType?: EProjectStore) => {
+    if (value !== undefined) {
+      this.isCreateIssueModalOpen = value;
+      this.createIssueStoreType = storeType || EProjectStore.PROJECT;
+    } else {
+      this.isCreateIssueModalOpen = !this.isCreateIssueModalOpen;
+      this.createIssueStoreType = EProjectStore.PROJECT;
+    }
+  };
+
+  toggleDeleteIssueModal = (value?: boolean) => {
+    if (value !== undefined) {
+      this.isDeleteIssueModalOpen = value;
+    } else {
+      this.isDeleteIssueModalOpen = !this.isDeleteIssueModalOpen;
+    }
+  };
+
+  toggleCreateModuleModal = (value?: boolean) => {
+    if (value !== undefined) {
+      this.isCreateModuleModalOpen = value;
+    } else {
+      this.isCreateModuleModalOpen = !this.isCreateModuleModalOpen;
+    }
+  };
+
+  toggleBulkDeleteIssueModal = (value?: boolean) => {
+    if (value !== undefined) {
+      this.isBulkDeleteIssueModalOpen = value;
+    } else {
+      this.isBulkDeleteIssueModalOpen = !this.isBulkDeleteIssueModalOpen;
+    }
+  };
+}
diff --git a/web/store/application/event-tracker.store.ts b/web/store/application/event-tracker.store.ts
index e69de29bb..c30a8ee40 100644
--- a/web/store/application/event-tracker.store.ts
+++ b/web/store/application/event-tracker.store.ts
@@ -0,0 +1,78 @@
+import { action, makeObservable, observable } from "mobx";
+import posthog from "posthog-js";
+// stores
+import { RootStore } from "../root.store";
+
+export interface IEventTrackerStore {
+  trackElement: string;
+  setTrackElement: (element: string) => void;
+  postHogEventTracker: (
+    eventName: string,
+    payload: object | [] | null,
+    group?: { isGrouping: boolean | null; groupType: string | null; gorupId: string | null } | null
+  ) => void;
+}
+
+export class EventTrackerStore implements IEventTrackerStore {
+  trackElement: string = "";
+  rootStore;
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      trackElement: observable,
+      setTrackElement: action,
+      postHogEventTracker: action,
+    });
+    this.rootStore = _rootStore;
+  }
+
+  setTrackElement = (element: string) => {
+    this.trackElement = element;
+  };
+
+  postHogEventTracker = (
+    eventName: string,
+    payload: object | [] | null,
+    group?: { isGrouping: boolean | null; groupType: string | null; gorupId: string | null } | null
+  ) => {
+    try {
+      let extras: any = {
+        workspace_name: this.rootStore.workspace.currentWorkspace?.name ?? "",
+        workspace_id: this.rootStore.workspace.currentWorkspace?.id ?? "",
+        workspace_slug: this.rootStore.workspace.currentWorkspace?.slug ?? "",
+        project_name: this.rootStore.project.currentProjectDetails?.name ?? "",
+        project_id: this.rootStore.project.currentProjectDetails?.id ?? "",
+        project_identifier: this.rootStore.project.currentProjectDetails?.identifier ?? "",
+      };
+      if (["PROJECT_CREATED", "PROJECT_UPDATED"].includes(eventName)) {
+        const project_details: any = payload as object;
+        extras = {
+          ...extras,
+          project_name: project_details?.name ?? "",
+          project_id: project_details?.id ?? "",
+          project_identifier: project_details?.identifier ?? "",
+        };
+      }
+
+      if (group && group!.isGrouping === true) {
+        posthog?.group(group!.groupType!, group!.gorupId!, {
+          date: new Date(),
+          workspace_id: group!.gorupId,
+        });
+        posthog?.capture(eventName, {
+          ...payload,
+          extras: extras,
+          element: this.trackElement ?? "",
+        });
+      } else {
+        posthog?.capture(eventName, {
+          ...payload,
+          extras: extras,
+          element: this.trackElement ?? "",
+        });
+      }
+    } catch (error) {
+      throw error;
+    }
+    this.setTrackElement("");
+  };
+}
diff --git a/web/store/application/index.ts b/web/store/application/index.ts
index f1a4f401c..81d9470b4 100644
--- a/web/store/application/index.ts
+++ b/web/store/application/index.ts
@@ -1,15 +1,25 @@
-export class AppRootStore {
-  config;
-  commandPalette;
-  eventTracker;
-  instance;
-  theme;
+import { RootStore } from "../root.store";
+import { AppConfigStore } from "./app-config.store";
+import { CommandPaletteStore } from "./command-palette.store";
+import { EventTrackerStore } from "./event-tracker.store";
+import { InstanceStore } from "./instance.store";
+import { RouterStore } from "./router.store";
+import { ThemeStore } from "./theme.store";
 
-  constructor() {
-    this.config = new ConfigStore();
-    this.commandPalette = new CommandPaletteStore();
-    this.eventTracker = new EventTrackerStore();
-    this.instance = new InstanceStore();
-    this.theme = new ThemeStore();
+export class AppRootStore {
+  config: AppConfigStore;
+  commandPalette: CommandPaletteStore;
+  eventTracker: EventTrackerStore;
+  instance: InstanceStore;
+  theme: ThemeStore;
+  router: RouterStore;
+
+  constructor(rootStore: RootStore) {
+    this.config = new AppConfigStore(rootStore);
+    this.commandPalette = new CommandPaletteStore(rootStore);
+    this.eventTracker = new EventTrackerStore(rootStore);
+    this.instance = new InstanceStore(rootStore);
+    this.theme = new ThemeStore(rootStore);
+    this.router = new RouterStore();
   }
 }
diff --git a/web/store/application/instance.store.ts b/web/store/application/instance.store.ts
index e69de29bb..3332a11d9 100644
--- a/web/store/application/instance.store.ts
+++ b/web/store/application/instance.store.ts
@@ -0,0 +1,178 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// store
+import { RootStore } from "../root.store";
+// types
+import { IInstance, IInstanceConfiguration, IFormattedInstanceConfiguration, IInstanceAdmin } from "types/instance";
+// services
+import { InstanceService } from "services/instance.service";
+
+export interface IInstanceStore {
+  loader: boolean;
+  error: any | null;
+  // issues
+  instance: IInstance | null;
+  instanceAdmins: IInstanceAdmin[] | null;
+  configurations: IInstanceConfiguration[] | null;
+  // computed
+  formattedConfig: IFormattedInstanceConfiguration | null;
+  // action
+  fetchInstanceInfo: () => Promise<IInstance>;
+  fetchInstanceAdmins: () => Promise<IInstanceAdmin[]>;
+  updateInstanceInfo: (data: Partial<IInstance>) => Promise<IInstance>;
+  fetchInstanceConfigurations: () => Promise<any>;
+  updateInstanceConfigurations: (data: Partial<IFormattedInstanceConfiguration>) => Promise<IInstanceConfiguration[]>;
+}
+
+export class InstanceStore implements IInstanceStore {
+  loader: boolean = false;
+  error: any | null = null;
+  instance: IInstance | null = null;
+  instanceAdmins: IInstanceAdmin[] | null = null;
+  configurations: IInstanceConfiguration[] | null = null;
+  // service
+  instanceService;
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+      instance: observable,
+      instanceAdmins: observable,
+      configurations: observable,
+      // computed
+      formattedConfig: computed,
+      // actions
+      fetchInstanceInfo: action,
+      fetchInstanceAdmins: action,
+      updateInstanceInfo: action,
+      fetchInstanceConfigurations: action,
+      updateInstanceConfigurations: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.instanceService = new InstanceService();
+  }
+
+  /**
+   * computed value for instance configurations data for forms.
+   * @returns configurations in the form of {key, value} pair.
+   */
+  get formattedConfig() {
+    if (!this.configurations) return null;
+
+    return this.configurations?.reduce((formData: IFormattedInstanceConfiguration, config) => {
+      formData[config.key] = config.value;
+      return formData;
+    }, {});
+  }
+
+  /**
+   * fetch instance info from API
+   */
+  fetchInstanceInfo = async () => {
+    try {
+      const instance = await this.instanceService.getInstanceInfo();
+      runInAction(() => {
+        this.instance = instance;
+      });
+      return instance;
+    } catch (error) {
+      console.log("Error while fetching the instance info");
+      throw error;
+    }
+  };
+
+  /**
+   * fetch instance admins from API
+   */
+  fetchInstanceAdmins = async () => {
+    try {
+      const instanceAdmins = await this.instanceService.getInstanceAdmins();
+      runInAction(() => {
+        this.instanceAdmins = instanceAdmins;
+      });
+      return instanceAdmins;
+    } catch (error) {
+      console.log("Error while fetching the instance admins");
+      throw error;
+    }
+  };
+
+  /**
+   * update instance info
+   * @param data
+   */
+  updateInstanceInfo = async (data: Partial<IInstance>) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const response = await this.instanceService.updateInstanceInfo(data);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.instance = response;
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  /**
+   * fetch instace configurations from API
+   */
+  fetchInstanceConfigurations = async () => {
+    try {
+      const configurations = await this.instanceService.getInstanceConfigurations();
+      runInAction(() => {
+        this.configurations = configurations;
+      });
+      return configurations;
+    } catch (error) {
+      console.log("Error while fetching the instance configurations");
+      throw error;
+    }
+  };
+
+  /**
+   * update instance configurations
+   * @param data
+   */
+  updateInstanceConfigurations = async (data: Partial<IFormattedInstanceConfiguration>) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const response = await this.instanceService.updateInstanceConfigurations(data);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.configurations = this.configurations ? [...this.configurations, ...response] : response;
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+}
diff --git a/web/store/application/router.store.ts b/web/store/application/router.store.ts
new file mode 100644
index 000000000..20224915b
--- /dev/null
+++ b/web/store/application/router.store.ts
@@ -0,0 +1,21 @@
+import { action, makeObservable, observable } from "mobx";
+
+export interface IRouterStore {
+  query: any;
+  setQuery: (query: any) => void;
+}
+
+export class RouterStore implements IRouterStore {
+  query = {};
+
+  constructor() {
+    makeObservable(this, {
+      query: observable,
+      setQuery: action,
+    });
+  }
+
+  setQuery(query: any) {
+    this.query = query;
+  }
+}
diff --git a/web/store/application/theme.store.ts b/web/store/application/theme.store.ts
index e69de29bb..4fc57aee6 100644
--- a/web/store/application/theme.store.ts
+++ b/web/store/application/theme.store.ts
@@ -0,0 +1,65 @@
+// mobx
+import { action, observable, makeObservable } from "mobx";
+// helper
+import { applyTheme, unsetCustomCssVariables } from "helpers/theme.helper";
+
+export interface IThemeStore {
+  theme: string | null;
+  sidebarCollapsed: boolean | undefined;
+  toggleSidebar: (collapsed?: boolean) => void;
+  setTheme: (theme: any) => void;
+}
+
+export class ThemeStore implements IThemeStore {
+  sidebarCollapsed: boolean | undefined = undefined;
+  theme: string | null = null;
+  // root store
+  rootStore;
+
+  constructor(_rootStore: any | null = null) {
+    makeObservable(this, {
+      // observable
+      sidebarCollapsed: observable.ref,
+      theme: observable.ref,
+      // action
+      toggleSidebar: action,
+      setTheme: action,
+      // computed
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  toggleSidebar = (collapsed?: boolean) => {
+    if (collapsed === undefined) {
+      this.sidebarCollapsed = !this.sidebarCollapsed;
+    } else {
+      this.sidebarCollapsed = collapsed;
+    }
+    localStorage.setItem("app_sidebar_collapsed", this.sidebarCollapsed.toString());
+  };
+
+  setTheme = async (_theme: { theme: any }) => {
+    try {
+      const currentTheme: string = _theme?.theme?.theme?.toString();
+
+      // updating the local storage theme value
+      localStorage.setItem("theme", currentTheme);
+      // updating the mobx theme value
+      this.theme = currentTheme;
+
+      // applying the theme to platform if the selected theme is custom
+      if (currentTheme === "custom") {
+        const themeSettings = this.rootStore.user.currentUserSettings || null;
+        applyTheme(
+          themeSettings?.theme?.palette !== ",,,,"
+            ? themeSettings?.theme?.palette
+            : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
+          themeSettings?.theme?.darkPalette
+        );
+      } else unsetCustomCssVariables();
+    } catch (error) {
+      console.error("setting user theme error", error);
+    }
+  };
+}
diff --git a/web/store/root.store.ts b/web/store/root.store.ts
index 5a1194de1..aed4d1a02 100644
--- a/web/store/root.store.ts
+++ b/web/store/root.store.ts
@@ -5,11 +5,12 @@ import { ProjectRootStore } from "./project";
 import { CycleStore } from "./cycle.store";
 import { ProjectViewsStore } from "./project-view.store";
 import { ModulesStore } from "./module.store";
+import { UserStore } from "./user";
 
 enableStaticRendering(typeof window === "undefined");
 
 export class RootStore {
-  app;
+  app: AppRootStore;
   user;
   workspace;
   project;
@@ -18,8 +19,8 @@ export class RootStore {
   projectView;
 
   constructor() {
-    this.app = new AppRootStore();
-    // this.user = new UserRootStore();
+    this.app = new AppRootStore(this);
+    this.user = new UserStore(this);
     // this.workspace = new WorkspaceRootStore();
     this.project = new ProjectRootStore(this);
     this.cycle = new CycleStore(this);
diff --git a/web/store/user/index.ts b/web/store/user/index.ts
new file mode 100644
index 000000000..79ccd69e8
--- /dev/null
+++ b/web/store/user/index.ts
@@ -0,0 +1,252 @@
+import { action, observable, runInAction, makeObservable, computed } from "mobx";
+// services
+import { UserService } from "services/user.service";
+import { AuthService } from "services/auth.service";
+// interfaces
+import { IUser, IUserSettings } from "types/users";
+// store
+import { RootStore } from "../root.store";
+import { UserMembershipStore } from "./user-membership.store";
+
+export interface IUserStore {
+  loader: boolean;
+  currentUserError: any;
+
+  isUserLoggedIn: boolean | null;
+  currentUser: IUser | null;
+  isUserInstanceAdmin: boolean | null;
+  currentUserSettings: IUserSettings | null;
+
+  dashboardInfo: any;
+
+  fetchCurrentUser: () => Promise<IUser>;
+  fetchCurrentUserInstanceAdminStatus: () => Promise<boolean>;
+  fetchCurrentUserSettings: () => Promise<IUserSettings>;
+
+  fetchUserDashboardInfo: (workspaceSlug: string, month: number) => Promise<any>;
+
+  updateUserOnBoard: () => Promise<void>;
+  updateTourCompleted: () => Promise<void>;
+  updateCurrentUser: (data: Partial<IUser>) => Promise<IUser>;
+  updateCurrentUserTheme: (theme: string) => Promise<IUser>;
+
+  deactivateAccount: () => Promise<void>;
+  signOut: () => Promise<void>;
+
+  membership: UserMembershipStore;
+}
+
+export class UserStore implements IUserStore {
+  loader: boolean = false;
+  currentUserError: any = null;
+
+  isUserLoggedIn: boolean | null = null;
+  currentUser: IUser | null = null;
+  isUserInstanceAdmin: boolean | null = null;
+  currentUserSettings: IUserSettings | null = null;
+
+  dashboardInfo: any = null;
+  membership: UserMembershipStore;
+
+  // root store
+  rootStore;
+  // services
+  userService;
+  authService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      isUserLoggedIn: observable.ref,
+      currentUser: observable,
+      isUserInstanceAdmin: observable.ref,
+      currentUserSettings: observable,
+      dashboardInfo: observable,
+      // action
+      fetchCurrentUser: action,
+      fetchCurrentUserInstanceAdminStatus: action,
+      fetchCurrentUserSettings: action,
+      fetchUserDashboardInfo: action,
+      updateUserOnBoard: action,
+      updateTourCompleted: action,
+      updateCurrentUser: action,
+      updateCurrentUserTheme: action,
+      deactivateAccount: action,
+      signOut: action,
+    });
+    this.rootStore = _rootStore;
+    this.userService = new UserService();
+    this.authService = new AuthService();
+    this.membership = new UserMembershipStore(_rootStore);
+  }
+
+  fetchCurrentUser = async () => {
+    try {
+      const response = await this.userService.currentUser();
+      if (response) {
+        runInAction(() => {
+          this.currentUserError = null;
+          this.currentUser = response;
+          this.isUserLoggedIn = true;
+        });
+      }
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.currentUserError = error;
+        this.isUserLoggedIn = false;
+      });
+      throw error;
+    }
+  };
+
+  fetchCurrentUserInstanceAdminStatus = async () => {
+    try {
+      const response = await this.userService.currentUserInstanceAdminStatus();
+      if (response) {
+        runInAction(() => {
+          this.isUserInstanceAdmin = response.is_instance_admin;
+        });
+      }
+      return response.is_instance_admin;
+    } catch (error) {
+      runInAction(() => {
+        this.isUserInstanceAdmin = false;
+      });
+      throw error;
+    }
+  };
+
+  fetchCurrentUserSettings = async () => {
+    try {
+      const response = await this.userService.currentUserSettings();
+      if (response) {
+        runInAction(() => {
+          this.currentUserSettings = response;
+        });
+      }
+      return response;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  fetchUserDashboardInfo = async (workspaceSlug: string, month: number) => {
+    try {
+      const response = await this.userService.userWorkspaceDashboard(workspaceSlug, month);
+      runInAction(() => {
+        this.dashboardInfo = response;
+      });
+      return response;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  updateUserOnBoard = async () => {
+    try {
+      runInAction(() => {
+        this.currentUser = {
+          ...this.currentUser,
+          is_onboarded: true,
+        } as IUser;
+      });
+
+      const user = this.currentUser ?? undefined;
+
+      if (!user) return;
+
+      await this.userService.updateUserOnBoard();
+    } catch (error) {
+      this.fetchCurrentUser();
+
+      throw error;
+    }
+  };
+
+  updateTourCompleted = async () => {
+    try {
+      if (this.currentUser) {
+        runInAction(() => {
+          this.currentUser = {
+            ...this.currentUser,
+            is_tour_completed: true,
+          } as IUser;
+        });
+
+        const response = await this.userService.updateUserTourCompleted();
+
+        return response;
+      }
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  updateCurrentUser = async (data: Partial<IUser>) => {
+    try {
+      runInAction(() => {
+        this.currentUser = {
+          ...this.currentUser,
+          ...data,
+        } as IUser;
+      });
+
+      const response = await this.userService.updateUser(data);
+
+      runInAction(() => {
+        this.currentUser = response;
+      });
+      return response;
+    } catch (error) {
+      this.fetchCurrentUser();
+
+      throw error;
+    }
+  };
+
+  updateCurrentUserTheme = async (theme: string) => {
+    try {
+      runInAction(() => {
+        this.currentUser = {
+          ...this.currentUser,
+          theme: {
+            ...this.currentUser?.theme,
+            theme,
+          },
+        } as IUser;
+      });
+      const response = await this.userService.updateUser({
+        theme: { ...this.currentUser?.theme, theme },
+      } as IUser);
+      return response;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  deactivateAccount = async () => {
+    try {
+      await this.userService.deactivateAccount();
+      this.currentUserError = null;
+      this.currentUser = null;
+      this.isUserLoggedIn = false;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  signOut = async () => {
+    try {
+      await this.authService.signOut();
+      runInAction(() => {
+        this.currentUserError = null;
+        this.currentUser = null;
+        this.isUserLoggedIn = false;
+      });
+    } catch (error) {
+      throw error;
+    }
+  };
+}
diff --git a/web/store/user/user-membership.store.ts b/web/store/user/user-membership.store.ts
new file mode 100644
index 000000000..7e964940f
--- /dev/null
+++ b/web/store/user/user-membership.store.ts
@@ -0,0 +1,229 @@
+// mobx
+import { action, observable, runInAction, makeObservable, computed } from "mobx";
+// services
+import { ProjectMemberService, ProjectService } from "services/project";
+import { UserService } from "services/user.service";
+import { WorkspaceService } from "services/workspace.service";
+import { AuthService } from "services/auth.service";
+// interfaces
+import { IUser, IUserSettings } from "types/users";
+import { IWorkspaceMemberMe, IProjectMember, TUserProjectRole, TUserWorkspaceRole } from "types";
+import { RootStore } from "../root.store";
+
+export interface IUserMembershipStore {
+  workspaceMemberInfo: {
+    [workspaceSlug: string]: IWorkspaceMemberMe;
+  };
+  hasPermissionToWorkspace: {
+    [workspaceSlug: string]: boolean | null;
+  };
+  projectMemberInfo: {
+    [projectId: string]: IProjectMember;
+  };
+  hasPermissionToProject: {
+    [projectId: string]: boolean | null;
+  };
+
+  currentProjectMemberInfo: IProjectMember | undefined;
+  currentWorkspaceMemberInfo: IWorkspaceMemberMe | undefined;
+  currentProjectRole: TUserProjectRole | undefined;
+  currentWorkspaceRole: TUserWorkspaceRole | undefined;
+
+  hasPermissionToCurrentWorkspace: boolean | undefined;
+  hasPermissionToCurrentProject: boolean | undefined;
+
+  fetchUserWorkspaceInfo: (workspaceSlug: string) => Promise<IWorkspaceMemberMe>;
+  fetchUserProjectInfo: (workspaceSlug: string, projectId: string) => Promise<IProjectMember>;
+
+  leaveWorkspace: (workspaceSlug: string) => Promise<void>;
+  joinProject: (workspaceSlug: string, projectIds: string[]) => Promise<any>;
+  leaveProject: (workspaceSlug: string, projectId: string) => Promise<void>;
+}
+
+export class UserMembershipStore implements IUserMembershipStore {
+  workspaceMemberInfo: {
+    [workspaceSlug: string]: IWorkspaceMemberMe;
+  } = {};
+  hasPermissionToWorkspace: {
+    [workspaceSlug: string]: boolean;
+  } = {};
+  projectMemberInfo: {
+    [projectId: string]: IProjectMember;
+  } = {};
+  hasPermissionToProject: {
+    [projectId: string]: boolean;
+  } = {};
+  // root store
+  rootStore;
+  // services
+  userService;
+  workspaceService;
+  projectService;
+  projectMemberService;
+  authService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      workspaceMemberInfo: observable.ref,
+      hasPermissionToWorkspace: observable.ref,
+      projectMemberInfo: observable.ref,
+      hasPermissionToProject: observable.ref,
+      // action
+      fetchUserWorkspaceInfo: action,
+      fetchUserProjectInfo: action,
+      leaveWorkspace: action,
+      joinProject: action,
+      leaveProject: action,
+      // computed
+      currentProjectMemberInfo: computed,
+      currentWorkspaceMemberInfo: computed,
+      currentProjectRole: computed,
+      currentWorkspaceRole: computed,
+      hasPermissionToCurrentWorkspace: computed,
+      hasPermissionToCurrentProject: computed,
+    });
+    this.rootStore = _rootStore;
+    this.userService = new UserService();
+    this.workspaceService = new WorkspaceService();
+    this.projectService = new ProjectService();
+    this.projectMemberService = new ProjectMemberService();
+    this.authService = new AuthService();
+  }
+
+  get currentWorkspaceMemberInfo() {
+    if (!this.rootStore.workspace.workspaceSlug) return;
+    return this.workspaceMemberInfo[this.rootStore.workspace.workspaceSlug];
+  }
+
+  get currentWorkspaceRole() {
+    if (!this.rootStore.workspace.workspaceSlug) return;
+    return this.workspaceMemberInfo[this.rootStore.workspace.workspaceSlug]?.role;
+  }
+
+  get currentProjectMemberInfo() {
+    if (!this.rootStore.project.projectId) return;
+    return this.projectMemberInfo[this.rootStore.project.projectId];
+  }
+
+  get currentProjectRole() {
+    if (!this.rootStore.project.projectId) return;
+    return this.projectMemberInfo[this.rootStore.project.projectId]?.role;
+  }
+
+  get hasPermissionToCurrentWorkspace() {
+    if (!this.rootStore.workspace.workspaceSlug) return;
+    return this.hasPermissionToWorkspace[this.rootStore.workspace.workspaceSlug];
+  }
+
+  get hasPermissionToCurrentProject() {
+    if (!this.rootStore.project.projectId) return;
+    return this.hasPermissionToProject[this.rootStore.project.projectId];
+  }
+
+  fetchUserWorkspaceInfo = async (workspaceSlug: string) => {
+    try {
+      const response = await this.workspaceService.workspaceMemberMe(workspaceSlug);
+
+      runInAction(() => {
+        this.workspaceMemberInfo = {
+          ...this.workspaceMemberInfo,
+          [workspaceSlug]: response,
+        };
+        this.hasPermissionToWorkspace = {
+          ...this.hasPermissionToWorkspace,
+          [workspaceSlug]: true,
+        };
+      });
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.hasPermissionToWorkspace = {
+          ...this.hasPermissionToWorkspace,
+          [workspaceSlug]: false,
+        };
+      });
+      throw error;
+    }
+  };
+
+  fetchUserProjectInfo = async (workspaceSlug: string, projectId: string) => {
+    try {
+      const response = await this.projectMemberService.projectMemberMe(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.projectMemberInfo = {
+          ...this.projectMemberInfo,
+          [projectId]: response,
+        };
+        this.hasPermissionToProject = {
+          ...this.hasPermissionToProject,
+          [projectId]: true,
+        };
+      });
+      return response;
+    } catch (error: any) {
+      runInAction(() => {
+        this.hasPermissionToProject = {
+          ...this.hasPermissionToProject,
+          [projectId]: false,
+        };
+      });
+
+      throw error;
+    }
+  };
+
+  leaveWorkspace = async (workspaceSlug: string) => {
+    try {
+      await this.userService.leaveWorkspace(workspaceSlug);
+
+      runInAction(() => {
+        delete this.workspaceMemberInfo[workspaceSlug];
+        delete this.hasPermissionToWorkspace[workspaceSlug];
+      });
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  joinProject = async (workspaceSlug: string, projectIds: string[]) => {
+    const newPermissions: { [projectId: string]: boolean } = {};
+    projectIds.forEach((projectId) => {
+      newPermissions[projectId] = true;
+    });
+
+    try {
+      const response = await this.userService.joinProject(workspaceSlug, projectIds);
+
+      runInAction(() => {
+        this.hasPermissionToProject = {
+          ...this.hasPermissionToProject,
+          ...newPermissions,
+        };
+      });
+
+      return response;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  leaveProject = async (workspaceSlug: string, projectId: string) => {
+    const newPermissions: { [projectId: string]: boolean } = {};
+    newPermissions[projectId] = false;
+
+    try {
+      await this.userService.leaveProject(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.hasPermissionToProject = {
+          ...this.hasPermissionToProject,
+          ...newPermissions,
+        };
+      });
+    } catch (error) {
+      throw error;
+    }
+  };
+}
diff --git a/web/store_legacy/issues/base-issue-calendar-helper.store.ts b/web/store_legacy/issues/base-issue-calendar-helper.store.ts
index 4eeee8418..5bc66cd38 100644
--- a/web/store_legacy/issues/base-issue-calendar-helper.store.ts
+++ b/web/store_legacy/issues/base-issue-calendar-helper.store.ts
@@ -45,8 +45,8 @@ export class CalendarHelpers implements ICalendarHelpers {
           target_date: destinationColumnId,
         };
 
-        if (viewId) store?.updateIssue(workspaceSlug, projectId, updateIssue.id, updateIssue, viewId);
-        else store?.updateIssue(workspaceSlug, projectId, updateIssue.id, updateIssue);
+        if (viewId) return await store?.updateIssue(workspaceSlug, projectId, updateIssue.id, updateIssue, viewId);
+        else return await store?.updateIssue(workspaceSlug, projectId, updateIssue.id, updateIssue);
       }
     }
   };