From 20e7dc68e6534935a90fa974c4aed6567b5163a0 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Tue, 7 May 2024 12:44:36 +0530
Subject: [PATCH] [WEB-1127] style: create and delete modals' consistency
 (#4345)

* style: update modals typography, alignment

* style: made the modal separator full width

* style: delete modals consistency

* style: update the remaining delete modals

* chore: delete modal secondary button text

* style: update the remaining create modals

* chore: update cancel button text

* chore: created modal core

* style: modals responsiveness
---
 .../api-token/delete-token-modal.tsx          |  86 +--
 .../api-token/modal/create-token-modal.tsx    |  69 +-
 web/components/api-token/modal/form.tsx       |  62 +-
 .../modal/generated-token-details.tsx         |   2 +-
 web/components/core/modals/alert-modal.tsx    |  90 +++
 web/components/core/modals/index.ts           |   2 +
 web/components/core/modals/modal-core.tsx     |  68 ++
 web/components/cycles/delete-modal.tsx        |  99 +--
 web/components/cycles/form.tsx                | 200 +++---
 web/components/cycles/modal.tsx               |  64 +-
 .../create-update-estimate-modal.tsx          | 232 +++---
 .../estimates/delete-estimate-modal.tsx       | 103 +--
 .../modals/create-edit-modal/create-root.tsx  |  48 +-
 .../modals/create-edit-modal/edit-root.tsx    |  53 +-
 .../create-edit-modal/issue-description.tsx   |  25 +-
 .../modals/create-edit-modal/issue-title.tsx  |   4 +-
 .../inbox/modals/create-edit-modal/modal.tsx  |  91 +--
 .../inbox/modals/decline-issue-modal.tsx      | 103 +--
 .../inbox/modals/delete-issue-modal.tsx       |  97 +--
 .../attachment/delete-attachment-modal.tsx    |  92 +--
 .../issues/confirm-issue-discard.tsx          |   2 +-
 web/components/issues/delete-issue-modal.tsx  |  98 +--
 web/components/issues/issue-modal/form.tsx    | 679 +++++++++---------
 web/components/issues/issue-modal/modal.tsx   | 121 ++--
 web/components/labels/delete-label-modal.tsx  |  87 +--
 .../modules/delete-module-modal.tsx           |  90 +--
 web/components/modules/form.tsx               |  23 +-
 web/components/modules/modal.tsx              |  60 +-
 .../pages/modals/create-page-modal.tsx        |  55 +-
 .../pages/modals/delete-page-modal.tsx        |  79 +-
 web/components/pages/modals/page-form.tsx     |  18 +-
 web/components/states/delete-state-modal.tsx  |  80 +--
 web/components/views/delete-view-modal.tsx    |  81 +--
 web/components/views/form.tsx                 |  39 +-
 web/components/views/modal.tsx                |  52 +-
 .../web-hooks/create-webhook-modal.tsx        |  65 +-
 .../web-hooks/delete-webhook-modal.tsx        |  73 +-
 web/components/web-hooks/form/form.tsx        |  55 +-
 .../web-hooks/generated-hook-details.tsx      |  22 +-
 .../workspace/views/delete-view-modal.tsx     |  90 +--
 web/components/workspace/views/form.tsx       |  23 +-
 web/components/workspace/views/modal.tsx      |  50 +-
 .../settings/webhooks/[webhookId].tsx         |   4 +-
 43 files changed, 1375 insertions(+), 2161 deletions(-)
 create mode 100644 web/components/core/modals/alert-modal.tsx
 create mode 100644 web/components/core/modals/modal-core.tsx

diff --git a/web/components/api-token/delete-token-modal.tsx b/web/components/api-token/delete-token-modal.tsx
index 4c511de4a..97fa0b55f 100644
--- a/web/components/api-token/delete-token-modal.tsx
+++ b/web/components/api-token/delete-token-modal.tsx
@@ -1,15 +1,16 @@
-import { useState, Fragment, FC } from "react";
+import { useState, FC } from "react";
 import { useRouter } from "next/router";
 import { mutate } from "swr";
-import { Dialog, Transition } from "@headlessui/react";
-import { IApiToken } from "@plane/types";
-// services
-import { Button, TOAST_TYPE, setToast } from "@plane/ui";
-import { API_TOKENS_LIST } from "@/constants/fetch-keys";
-import { APITokenService } from "@/services/api_token.service";
-// ui
 // types
+import { IApiToken } from "@plane/types";
+// ui
+import { TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { AlertModalCore } from "@/components/core";
 // fetch-keys
+import { API_TOKENS_LIST } from "@/constants/fetch-keys";
+// services
+import { APITokenService } from "@/services/api_token.service";
 
 type Props = {
   isOpen: boolean;
@@ -32,12 +33,12 @@ export const DeleteApiTokenModal: FC<Props> = (props) => {
     setDeleteLoading(false);
   };
 
-  const handleDeletion = () => {
+  const handleDeletion = async () => {
     if (!workspaceSlug) return;
 
     setDeleteLoading(true);
 
-    apiTokenService
+    await apiTokenService
       .deleteApiToken(workspaceSlug.toString(), tokenId)
       .then(() => {
         setToast({
@@ -65,58 +66,17 @@ export const DeleteApiTokenModal: FC<Props> = (props) => {
   };
 
   return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
-                <div className="flex flex-col gap-3 p-4">
-                  <div className="flex w-full items-center justify-start">
-                    <h3 className="text-lg font-medium leading-6 text-custom-text-100">
-                      Are you sure you want to delete the token?
-                    </h3>
-                  </div>
-                  <span>
-                    <p className="text-sm text-custom-text-400">
-                      Any application using this token will no longer have the access to Plane data. This action cannot
-                      be undone.
-                    </p>
-                  </span>
-                  <div className="mt-2 flex justify-end gap-2">
-                    <Button variant="neutral-primary" onClick={handleClose} size="sm">
-                      Cancel
-                    </Button>
-                    <Button variant="danger" onClick={handleDeletion} loading={deleteLoading} size="sm">
-                      {deleteLoading ? "Deleting..." : "Delete"}
-                    </Button>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={handleDeletion}
+      isDeleting={deleteLoading}
+      isOpen={isOpen}
+      title="Delete API token"
+      content={
+        <>
+          Any application using this token will no longer have the access to Plane data. This action cannot be undone.
+        </>
+      }
+    />
   );
 };
diff --git a/web/components/api-token/modal/create-token-modal.tsx b/web/components/api-token/modal/create-token-modal.tsx
index 966da76e8..19a523439 100644
--- a/web/components/api-token/modal/create-token-modal.tsx
+++ b/web/components/api-token/modal/create-token-modal.tsx
@@ -1,21 +1,20 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
 import { mutate } from "swr";
-import { Dialog, Transition } from "@headlessui/react";
+// types
 import { IApiToken } from "@plane/types";
-// services
+// ui
 import { TOAST_TYPE, setToast } from "@plane/ui";
-
+// components
 import { CreateApiTokenForm, GeneratedTokenDetails } from "@/components/api-token";
+import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
+// fetch-keys
 import { API_TOKENS_LIST } from "@/constants/fetch-keys";
+// helpers
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 import { csvDownload } from "@/helpers/download.helper";
+// services
 import { APITokenService } from "@/services/api_token.service";
-// ui
-// components
-// helpers
-// types
-// fetch-keys
 
 type Props = {
   isOpen: boolean;
@@ -86,47 +85,17 @@ export const CreateApiTokenModal: React.FC<Props> = (props) => {
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={() => {}}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="grid h-full w-full place-items-center p-4 text-center">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 px-4 text-left shadow-custom-shadow-md transition-all w-full sm:max-w-2xl">
-                {generatedToken ? (
-                  <GeneratedTokenDetails handleClose={handleClose} tokenDetails={generatedToken} />
-                ) : (
-                  <CreateApiTokenForm
-                    handleClose={handleClose}
-                    neverExpires={neverExpires}
-                    toggleNeverExpires={() => setNeverExpires((prevData) => !prevData)}
-                    onSubmit={handleCreateToken}
-                  />
-                )}
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <ModalCore isOpen={isOpen} handleClose={() => {}} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+      {generatedToken ? (
+        <GeneratedTokenDetails handleClose={handleClose} tokenDetails={generatedToken} />
+      ) : (
+        <CreateApiTokenForm
+          handleClose={handleClose}
+          neverExpires={neverExpires}
+          toggleNeverExpires={() => setNeverExpires((prevData) => !prevData)}
+          onSubmit={handleCreateToken}
+        />
+      )}
+    </ModalCore>
   );
 };
diff --git a/web/components/api-token/modal/form.tsx b/web/components/api-token/modal/form.tsx
index 7ba0ace71..b22f37b6a 100644
--- a/web/components/api-token/modal/form.tsx
+++ b/web/components/api-token/modal/form.tsx
@@ -2,13 +2,15 @@ import { useState } from "react";
 import { add } from "date-fns";
 import { Controller, useForm } from "react-hook-form";
 import { Calendar } from "lucide-react";
+// types
 import { IApiToken } from "@plane/types";
 // ui
 import { Button, CustomSelect, Input, TextArea, ToggleSwitch, TOAST_TYPE, setToast } from "@plane/ui";
+// components
 import { DateDropdown } from "@/components/dropdowns";
 // helpers
+import { cn } from "@/helpers/common.helper";
 import { renderFormattedDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
-// types
 
 type Props = {
   handleClose: () => void;
@@ -106,13 +108,14 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
 
   const today = new Date();
   const tomorrow = add(today, { days: 1 });
+  const expiredAt = watch("expired_at");
 
   return (
     <form onSubmit={handleSubmit(handleFormSubmit)}>
-      <div className="space-y-4">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">Create token</h3>
+      <div className="space-y-5 p-5">
+        <h3 className="text-xl font-medium text-custom-text-200">Create token</h3>
         <div className="space-y-3">
-          <div>
+          <div className="space-y-1">
             <Controller
               control={control}
               name="label"
@@ -130,8 +133,8 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
                   value={value}
                   onChange={onChange}
                   hasError={Boolean(errors.label)}
-                  placeholder="Token title"
-                  className="w-full text-sm font-medium"
+                  placeholder="Title"
+                  className="w-full text-base"
                 />
               )}
             />
@@ -145,8 +148,8 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
                 value={value}
                 onChange={onChange}
                 hasError={Boolean(errors.description)}
-                placeholder="Token description"
-                className="min-h-24 w-full text-sm"
+                placeholder="Description"
+                className="w-full text-base resize-none min-h-24"
               />
             )}
           />
@@ -162,9 +165,12 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
                     <CustomSelect
                       customButton={
                         <div
-                          className={`flex items-center gap-2 rounded border-[0.5px] border-custom-border-300 px-2 py-0.5 ${
-                            neverExpires ? "text-custom-text-400" : ""
-                          }`}
+                          className={cn(
+                            "h-7 flex items-center gap-2 rounded border-[0.5px] border-custom-border-300 px-2 py-0.5",
+                            {
+                              "text-custom-text-400": neverExpires,
+                            }
+                          )}
                         >
                           <Calendar className="h-3 w-3" />
                           {value === "custom"
@@ -188,33 +194,35 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
                   );
                 }}
               />
-              {watch("expired_at") === "custom" && (
-                <DateDropdown
-                  value={customDate}
-                  onChange={(date) => setCustomDate(date)}
-                  minDate={tomorrow}
-                  icon={<Calendar className="h-3 w-3" />}
-                  buttonVariant="border-with-text"
-                  placeholder="Set date"
-                  disabled={neverExpires}
-                />
+              {expiredAt === "custom" && (
+                <div className="h-7">
+                  <DateDropdown
+                    value={customDate}
+                    onChange={(date) => setCustomDate(date)}
+                    minDate={tomorrow}
+                    icon={<Calendar className="h-3 w-3" />}
+                    buttonVariant="border-with-text"
+                    placeholder="Set date"
+                    disabled={neverExpires}
+                  />
+                </div>
               )}
             </div>
             {!neverExpires && (
               <span className="text-xs text-custom-text-400">
-                {watch("expired_at") === "custom"
+                {expiredAt === "custom"
                   ? customDate
                     ? `Expires ${renderFormattedDate(customDate)}`
                     : null
-                  : watch("expired_at")
-                    ? `Expires ${getExpiryDate(watch("expired_at") ?? "")}`
+                  : expiredAt
+                    ? `Expires ${getExpiryDate(expiredAt ?? "")}`
                     : null}
               </span>
             )}
           </div>
         </div>
       </div>
-      <div className="mt-5 flex items-center justify-between gap-2">
+      <div className="px-5 py-4 flex items-center justify-between gap-2 border-t-[0.5px] border-custom-border-200">
         <div className="flex cursor-pointer items-center gap-1.5" onClick={toggleNeverExpires}>
           <div className="flex cursor-pointer items-center justify-center">
             <ToggleSwitch value={neverExpires} onChange={() => {}} size="sm" />
@@ -223,10 +231,10 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
         </div>
         <div className="flex items-center gap-2">
           <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-            Discard
+            Cancel
           </Button>
           <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
-            {isSubmitting ? "Generating..." : "Generate token"}
+            {isSubmitting ? "Generating" : "Generate token"}
           </Button>
         </div>
       </div>
diff --git a/web/components/api-token/modal/generated-token-details.tsx b/web/components/api-token/modal/generated-token-details.tsx
index 81e5963a3..88d73e1f3 100644
--- a/web/components/api-token/modal/generated-token-details.tsx
+++ b/web/components/api-token/modal/generated-token-details.tsx
@@ -28,7 +28,7 @@ export const GeneratedTokenDetails: React.FC<Props> = (props) => {
   };
 
   return (
-    <div className="w-full">
+    <div className="w-full p-5">
       <div className="w-full space-y-3 text-wrap">
         <h3 className="text-lg font-medium leading-6 text-custom-text-100">Key created</h3>
         <p className="text-sm text-custom-text-400">
diff --git a/web/components/core/modals/alert-modal.tsx b/web/components/core/modals/alert-modal.tsx
new file mode 100644
index 000000000..fbc5e2503
--- /dev/null
+++ b/web/components/core/modals/alert-modal.tsx
@@ -0,0 +1,90 @@
+import { AlertTriangle, LucideIcon } from "lucide-react";
+// ui
+import { Button, TButtonVariant } from "@plane/ui";
+// components
+import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
+// helpers
+import { cn } from "@/helpers/common.helper";
+
+export type TModalVariant = "danger";
+
+type Props = {
+  content: React.ReactNode | string;
+  handleClose: () => void;
+  handleSubmit: () => Promise<void>;
+  hideIcon?: boolean;
+  isDeleting: boolean;
+  isOpen: boolean;
+  position?: EModalPosition;
+  primaryButtonText?: {
+    loading: string;
+    default: string;
+  };
+  secondaryButtonText?: string;
+  title: string;
+  variant?: TModalVariant;
+  width?: EModalWidth;
+};
+
+const VARIANT_ICONS: Record<TModalVariant, LucideIcon> = {
+  danger: AlertTriangle,
+};
+
+const BUTTON_VARIANTS: Record<TModalVariant, TButtonVariant> = {
+  danger: "danger",
+};
+
+const VARIANT_CLASSES: Record<TModalVariant, string> = {
+  danger: "bg-red-500/20 text-red-500",
+};
+
+export const AlertModalCore: React.FC<Props> = (props) => {
+  const {
+    content,
+    handleClose,
+    handleSubmit,
+    hideIcon = false,
+    isDeleting,
+    isOpen,
+    position = EModalPosition.CENTER,
+    primaryButtonText = {
+      loading: "Deleting",
+      default: "Delete",
+    },
+    secondaryButtonText = "Cancel",
+    title,
+    variant = "danger",
+    width = EModalWidth.XL,
+  } = props;
+
+  const Icon = VARIANT_ICONS[variant];
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={position} width={width}>
+      <div className="p-5 flex flex-col sm:flex-row items-center sm:items-start gap-4">
+        {!hideIcon && (
+          <span
+            className={cn(
+              "flex-shrink-0 grid place-items-center rounded-full size-12 sm:size-10",
+              VARIANT_CLASSES[variant]
+            )}
+          >
+            <Icon className="size-5" aria-hidden="true" />
+          </span>
+        )}
+        <div className="text-center sm:text-left">
+          <h3 className="text-lg font-medium">{title}</h3>
+          <p className="mt-1 text-sm text-custom-text-200">{content}</p>
+        </div>
+      </div>
+      <div className="px-5 py-4 flex flex-col-reverse sm:flex-row sm:justify-end gap-2 border-t-[0.5px] border-custom-border-200">
+        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+          {secondaryButtonText}
+        </Button>
+        <Button variant={BUTTON_VARIANTS[variant]} size="sm" tabIndex={1} onClick={handleSubmit} loading={isDeleting}>
+          {isDeleting ? primaryButtonText.loading : primaryButtonText.default}
+        </Button>
+      </div>
+    </ModalCore>
+  );
+};
diff --git a/web/components/core/modals/index.ts b/web/components/core/modals/index.ts
index a95c22114..71068ca17 100644
--- a/web/components/core/modals/index.ts
+++ b/web/components/core/modals/index.ts
@@ -1,7 +1,9 @@
+export * from "./alert-modal";
 export * from "./bulk-delete-issues-modal";
 export * from "./existing-issues-list-modal";
 export * from "./gpt-assistant-popover";
 export * from "./link-modal";
+export * from "./modal-core";
 export * from "./user-image-upload-modal";
 export * from "./workspace-image-upload-modal";
 export * from "./issue-search-modal-empty-state";
diff --git a/web/components/core/modals/modal-core.tsx b/web/components/core/modals/modal-core.tsx
new file mode 100644
index 000000000..5d24df01c
--- /dev/null
+++ b/web/components/core/modals/modal-core.tsx
@@ -0,0 +1,68 @@
+import { Fragment } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+// helpers
+import { cn } from "@/helpers/common.helper";
+
+export enum EModalPosition {
+  TOP = "flex items-center justify-center text-center mx-4 my-10 md:my-20",
+  CENTER = "flex items-end sm:items-center justify-center p-4 min-h-full",
+}
+
+export enum EModalWidth {
+  XL = "sm:max-w-xl",
+  XXL = "sm:max-w-2xl",
+  XXXL = "sm:max-w-3xl",
+  XXXXL = "sm:max-w-4xl",
+}
+
+type Props = {
+  children: React.ReactNode;
+  handleClose: () => void;
+  isOpen: boolean;
+  position?: EModalPosition;
+  width?: EModalWidth;
+};
+export const ModalCore: React.FC<Props> = (props) => {
+  const { children, handleClose, isOpen, position = EModalPosition.CENTER, width = EModalWidth.XXL } = props;
+
+  return (
+    <Transition.Root show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className={position}>
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel
+                className={cn(
+                  "relative transform rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all w-full",
+                  width
+                )}
+              >
+                {children}
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/web/components/cycles/delete-modal.tsx b/web/components/cycles/delete-modal.tsx
index 5b9eb53cd..728041f5d 100644
--- a/web/components/cycles/delete-modal.tsx
+++ b/web/components/cycles/delete-modal.tsx
@@ -1,16 +1,16 @@
-import { Fragment, useState } from "react";
+import { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
-import { AlertTriangle } from "lucide-react";
-import { Dialog, Transition } from "@headlessui/react";
-import { ICycle } from "@plane/types";
-// hooks
-import { Button, TOAST_TYPE, setToast } from "@plane/ui";
-import { CYCLE_DELETED } from "@/constants/event-tracker";
-import { useEventTracker, useCycle } from "@/hooks/store";
-// components
 // types
+import { ICycle } from "@plane/types";
+// ui
+import { TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { AlertModalCore } from "@/components/core";
 // constants
+import { CYCLE_DELETED } from "@/constants/event-tracker";
+// hooks
+import { useEventTracker, useCycle } from "@/hooks/store";
 
 interface ICycleDelete {
   cycle: ICycle;
@@ -24,12 +24,12 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
   const { isOpen, handleClose, cycle, workspaceSlug, projectId } = props;
   // states
   const [loader, setLoader] = useState(false);
-  // router
-  const router = useRouter();
-  const { cycleId, peekCycle } = router.query;
   // store hooks
   const { captureCycleEvent } = useEventTracker();
   const { deleteCycle } = useCycle();
+  // router
+  const router = useRouter();
+  const { cycleId, peekCycle } = router.query;
 
   const formSubmit = async () => {
     if (!cycle) return;
@@ -70,66 +70,19 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
   };
 
   return (
-    <div>
-      <div>
-        <Transition.Root show={isOpen} as={Fragment}>
-          <Dialog as="div" className="relative z-20" onClose={handleClose}>
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0"
-              enterTo="opacity-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-            </Transition.Child>
-
-            <div className="fixed inset-0 z-10 overflow-y-auto">
-              <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-                <Transition.Child
-                  as={Fragment}
-                  enter="ease-out duration-300"
-                  enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                  enterTo="opacity-100 translate-y-0 sm:scale-100"
-                  leave="ease-in duration-200"
-                  leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                  leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                >
-                  <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
-                    <div className="flex flex-col gap-6 p-6">
-                      <div className="flex w-full items-center justify-start gap-4">
-                        <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20">
-                          <AlertTriangle width={16} strokeWidth={2} className="text-red-600" />
-                        </div>
-                        <div className="text-xl font-medium 2xl:text-2xl">Delete cycle</div>
-                      </div>
-                      <span>
-                        <p className="text-sm text-custom-text-200">
-                          Are you sure you want to delete cycle{' "'}
-                          <span className="break-words font-medium text-custom-text-100">{cycle?.name}</span>
-                          {'"'}? All of the data related to the cycle will be permanently removed. This action cannot be
-                          undone.
-                        </p>
-                      </span>
-                      <div className="flex justify-end gap-2">
-                        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                          Cancel
-                        </Button>
-
-                        <Button variant="danger" size="sm" tabIndex={1} onClick={formSubmit} loading={loader}>
-                          {loader ? "Deleting" : "Delete"}
-                        </Button>
-                      </div>
-                    </div>
-                  </Dialog.Panel>
-                </Transition.Child>
-              </div>
-            </div>
-          </Dialog>
-        </Transition.Root>
-      </div>
-    </div>
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={formSubmit}
+      isDeleting={loader}
+      isOpen={isOpen}
+      title="Delete Cycle"
+      content={
+        <>
+          Are you sure you want to delete cycle{' "'}
+          <span className="break-words font-medium text-custom-text-100">{cycle?.name}</span>
+          {'"'}? All of the data related to the cycle will be permanently removed. This action cannot be undone.
+        </>
+      }
+    />
   );
 });
diff --git a/web/components/cycles/form.tsx b/web/components/cycles/form.tsx
index b8b34fe3b..936dbb214 100644
--- a/web/components/cycles/form.tsx
+++ b/web/components/cycles/form.tsx
@@ -1,12 +1,12 @@
 import { useEffect } from "react";
-
 import { Controller, useForm } from "react-hook-form";
+// types
 import { ICycle } from "@plane/types";
-
+// ui
 import { Button, Input, TextArea } from "@plane/ui";
-
+// components
 import { DateRangeDropdown, ProjectDropdown } from "@/components/dropdowns";
-
+// helpers
 import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 import { shouldRenderProject } from "@/helpers/project.helper";
 
@@ -53,121 +53,119 @@ export const CycleForm: React.FC<Props> = (props) => {
 
   return (
     <form onSubmit={handleSubmit((formData) => handleFormSubmit(formData, dirtyFields))}>
-      <div className="space-y-5">
+      <div className="space-y-5 p-5">
         <div className="flex items-center gap-x-3">
           {!status && (
             <Controller
               control={control}
               name="project_id"
               render={({ field: { value, onChange } }) => (
-                <ProjectDropdown
-                  value={value}
-                  onChange={(val) => {
-                    onChange(val);
-                    setActiveProject(val);
-                  }}
-                  buttonVariant="background-with-text"
-                  renderCondition={(project) => shouldRenderProject(project)}
-                  tabIndex={7}
-                />
+                <div className="h-7">
+                  <ProjectDropdown
+                    value={value}
+                    onChange={(val) => {
+                      onChange(val);
+                      setActiveProject(val);
+                    }}
+                    buttonVariant="border-with-text"
+                    renderCondition={(project) => shouldRenderProject(project)}
+                    tabIndex={7}
+                  />
+                </div>
               )}
             />
           )}
-          <h3 className="text-xl font-medium leading-6 text-custom-text-200">{status ? "Update" : "New"} Cycle</h3>
+          <h3 className="text-xl font-medium text-custom-text-200">{status ? "Update" : "Create"} Cycle</h3>
         </div>
         <div className="space-y-3">
-          <div className="mt-2 space-y-3">
-            <div className="flex flex-col gap-1">
-              <Controller
-                name="name"
-                control={control}
-                rules={{
-                  required: "Name is required",
-                  maxLength: {
-                    value: 255,
-                    message: "Title should be less than 255 characters",
-                  },
-                }}
-                render={({ field: { value, onChange } }) => (
-                  <Input
-                    id="cycle_name"
-                    name="name"
-                    type="text"
-                    placeholder="Cycle Title"
-                    className="w-full resize-none placeholder:text-sm placeholder:font-medium focus:border-blue-400"
-                    value={value}
-                    inputSize="md"
-                    onChange={onChange}
-                    hasError={Boolean(errors?.name)}
-                    tabIndex={1}
-                  />
-                )}
-              />
-              <span className="text-xs text-red-500">{errors?.name?.message}</span>
-            </div>
-            <div>
-              <Controller
-                name="description"
-                control={control}
-                render={({ field: { value, onChange } }) => (
-                  <TextArea
-                    id="cycle_description"
-                    name="description"
-                    placeholder="Description..."
-                    className="w-full text-sm resize-none min-h-24"
-                    hasError={Boolean(errors?.description)}
-                    value={value}
-                    onChange={onChange}
-                    tabIndex={2}
-                  />
-                )}
-              />
-            </div>
-
-            <div className="flex flex-wrap items-center gap-2">
-              <Controller
-                control={control}
-                name="start_date"
-                render={({ field: { value: startDateValue, onChange: onChangeStartDate } }) => (
-                  <Controller
-                    control={control}
-                    name="end_date"
-                    render={({ field: { value: endDateValue, onChange: onChangeEndDate } }) => (
-                      <DateRangeDropdown
-                        buttonVariant="border-with-text"
-                        className="h-7"
-                        minDate={new Date()}
-                        value={{
-                          from: getDate(startDateValue),
-                          to: getDate(endDateValue),
-                        }}
-                        onSelect={(val) => {
-                          onChangeStartDate(val?.from ? renderFormattedPayloadDate(val.from) : null);
-                          onChangeEndDate(val?.to ? renderFormattedPayloadDate(val.to) : null);
-                        }}
-                        placeholder={{
-                          from: "Start date",
-                          to: "End date",
-                        }}
-                        hideIcon={{
-                          to: true,
-                        }}
-                        tabIndex={3}
-                      />
-                    )}
-                  />
-                )}
-              />
-            </div>
+          <div className="space-y-1">
+            <Controller
+              name="name"
+              control={control}
+              rules={{
+                required: "Title is required",
+                maxLength: {
+                  value: 255,
+                  message: "Title should be less than 255 characters",
+                },
+              }}
+              render={({ field: { value, onChange } }) => (
+                <Input
+                  name="name"
+                  type="text"
+                  placeholder="Title"
+                  className="w-full text-base"
+                  value={value}
+                  inputSize="md"
+                  onChange={onChange}
+                  hasError={Boolean(errors?.name)}
+                  tabIndex={1}
+                  autoFocus
+                />
+              )}
+            />
+            <span className="text-xs text-red-500">{errors?.name?.message}</span>
+          </div>
+          <div>
+            <Controller
+              name="description"
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <TextArea
+                  name="description"
+                  placeholder="Description"
+                  className="w-full text-base resize-none min-h-24"
+                  hasError={Boolean(errors?.description)}
+                  value={value}
+                  onChange={onChange}
+                  tabIndex={2}
+                />
+              )}
+            />
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            <Controller
+              control={control}
+              name="start_date"
+              render={({ field: { value: startDateValue, onChange: onChangeStartDate } }) => (
+                <Controller
+                  control={control}
+                  name="end_date"
+                  render={({ field: { value: endDateValue, onChange: onChangeEndDate } }) => (
+                    <DateRangeDropdown
+                      buttonVariant="border-with-text"
+                      className="h-7"
+                      minDate={new Date()}
+                      value={{
+                        from: getDate(startDateValue),
+                        to: getDate(endDateValue),
+                      }}
+                      onSelect={(val) => {
+                        onChangeStartDate(val?.from ? renderFormattedPayloadDate(val.from) : null);
+                        onChangeEndDate(val?.to ? renderFormattedPayloadDate(val.to) : null);
+                      }}
+                      placeholder={{
+                        from: "Start date",
+                        to: "End date",
+                      }}
+                      hideIcon={{
+                        to: true,
+                      }}
+                      tabIndex={3}
+                    />
+                  )}
+                />
+              )}
+            />
           </div>
         </div>
       </div>
-      <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-100 pt-5 ">
+      <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
         <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={4}>
           Cancel
         </Button>
         <Button variant="primary" size="sm" type="submit" loading={isSubmitting} tabIndex={5}>
-          {data ? (isSubmitting ? "Updating" : "Update cycle") : isSubmitting ? "Creating" : "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 6ed53eb32..e2fcc6bc3 100644
--- a/web/components/cycles/modal.tsx
+++ b/web/components/cycles/modal.tsx
@@ -1,18 +1,18 @@
 import React, { useEffect, useState } from "react";
-import { Dialog, Transition } from "@headlessui/react";
+// types
 import type { CycleDateCheckData, ICycle, TCycleTabOptions } from "@plane/types";
-// services
+// ui
 import { TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
 import { CycleForm } from "@/components/cycles";
+// constants
 import { CYCLE_CREATED, CYCLE_UPDATED } from "@/constants/event-tracker";
+// hooks
 import { useEventTracker, useCycle, useProject } from "@/hooks/store";
 import useLocalStorage from "@/hooks/use-local-storage";
+// services
 import { CycleService } from "@/services/cycle.service";
-// hooks
-// components
-// ui
-// types
-// constants
 
 type CycleModalProps = {
   isOpen: boolean;
@@ -166,45 +166,15 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
   }, [activeProject, data, projectId, workspaceProjectIds, isOpen]);
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl">
-                <CycleForm
-                  handleFormSubmit={handleFormSubmit}
-                  handleClose={handleClose}
-                  status={data ? true : false}
-                  projectId={activeProject ?? ""}
-                  setActiveProject={setActiveProject}
-                  data={data}
-                />
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+      <CycleForm
+        handleFormSubmit={handleFormSubmit}
+        handleClose={handleClose}
+        status={data ? true : false}
+        projectId={activeProject ?? ""}
+        setActiveProject={setActiveProject}
+        data={data}
+      />
+    </ModalCore>
   );
 };
diff --git a/web/components/estimates/create-update-estimate-modal.tsx b/web/components/estimates/create-update-estimate-modal.tsx
index 479f2fb28..c7e0a5355 100644
--- a/web/components/estimates/create-update-estimate-modal.tsx
+++ b/web/components/estimates/create-update-estimate-modal.tsx
@@ -2,15 +2,16 @@ import React, { useEffect } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
-import { Dialog, Transition } from "@headlessui/react";
-import { IEstimate, IEstimateFormData } from "@plane/types";
-// store hooks
-import { Button, Input, TextArea, TOAST_TYPE, setToast } from "@plane/ui";
-import { checkDuplicates } from "@/helpers/array.helper";
-import { useEstimate } from "@/hooks/store";
-// ui
-// helpers
 // types
+import { IEstimate, IEstimateFormData } from "@plane/types";
+// ui
+import { Button, Input, TextArea, TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
+// helpers
+import { checkDuplicates } from "@/helpers/array.helper";
+// hooks
+import { useEstimate } from "@/hooks/store";
 
 type Props = {
   isOpen: boolean;
@@ -196,133 +197,96 @@ export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
   }, [data, reset]);
 
   return (
-    <>
-      <Transition.Root show={isOpen} as={React.Fragment}>
-        <Dialog as="div" className="relative z-20" onClose={handleClose}>
-          <Transition.Child
-            as={React.Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 z-20 overflow-y-auto">
-            <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
-              <Transition.Child
-                as={React.Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                enterTo="opacity-100 translate-y-0 sm:scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              >
-                <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
-                  <form onSubmit={handleSubmit(onSubmit)}>
-                    <div className="space-y-3">
-                      <div className="text-lg font-medium leading-6">{data ? "Update" : "Create"} Estimate</div>
-                      <div>
-                        <Controller
-                          control={control}
-                          name="name"
-                          render={({ field: { value, onChange, ref } }) => (
-                            <Input
-                              id="name"
-                              name="name"
-                              type="name"
-                              value={value}
-                              onChange={onChange}
-                              ref={ref}
-                              hasError={Boolean(errors.name)}
-                              placeholder="Title"
-                              className="w-full resize-none text-xl"
-                            />
-                          )}
-                        />
-                      </div>
-                      <div>
-                        <Controller
-                          name="description"
-                          control={control}
-                          render={({ field: { value, onChange } }) => (
-                            <TextArea
-                              id="description"
-                              name="description"
-                              value={value}
-                              placeholder="Description"
-                              onChange={onChange}
-                              className="mt-3 min-h-32 resize-none text-sm"
-                              hasError={Boolean(errors?.description)}
-                            />
-                          )}
-                        />
-                      </div>
-
-                      {/* list of all the points */}
-                      {/* since they are all the same, we can use a loop to render them */}
-                      <div className="grid grid-cols-3 gap-3">
-                        {Array(6)
-                          .fill(0)
-                          .map((_, i) => (
-                            <div className="flex items-center" key={i}>
-                              <span className="flex h-full items-center rounded-lg bg-custom-background-80">
-                                <span className="rounded-lg px-2 text-sm text-custom-text-200">{i + 1}</span>
-                                <span className="rounded-r-lg bg-custom-background-100">
-                                  <Controller
-                                    control={control}
-                                    name={`value${i + 1}` as keyof FormValues}
-                                    rules={{
-                                      maxLength: {
-                                        value: 20,
-                                        message: "Estimate point must at most be of 20 characters",
-                                      },
-                                    }}
-                                    render={({ field: { value, onChange, ref } }) => (
-                                      <Input
-                                        ref={ref}
-                                        type="text"
-                                        value={value}
-                                        onChange={onChange}
-                                        id={`value${i + 1}`}
-                                        name={`value${i + 1}`}
-                                        placeholder={`Point ${i + 1}`}
-                                        className="w-full rounded-l-none"
-                                        hasError={Boolean(errors[`value${i + 1}` as keyof FormValues])}
-                                      />
-                                    )}
-                                  />
-                                </span>
-                              </span>
-                            </div>
-                          ))}
-                      </div>
-                    </div>
-                    <div className="mt-5 flex justify-end gap-2">
-                      <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                        Cancel
-                      </Button>
-                      <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
-                        {data
-                          ? isSubmitting
-                            ? "Updating Estimate..."
-                            : "Update Estimate"
-                          : isSubmitting
-                            ? "Creating Estimate..."
-                            : "Create Estimate"}
-                      </Button>
-                    </div>
-                  </form>
-                </Dialog.Panel>
-              </Transition.Child>
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="space-y-5 p-5">
+          <div className="text-xl font-medium text-custom-text-200">{data ? "Update" : "Create"} Estimate</div>
+          <div className="space-y-3">
+            <div>
+              <Controller
+                control={control}
+                name="name"
+                render={({ field: { value, onChange, ref } }) => (
+                  <Input
+                    id="name"
+                    name="name"
+                    type="name"
+                    value={value}
+                    onChange={onChange}
+                    ref={ref}
+                    hasError={Boolean(errors.name)}
+                    placeholder="Title"
+                    className="w-full text-base"
+                  />
+                )}
+              />
+            </div>
+            <div>
+              <Controller
+                name="description"
+                control={control}
+                render={({ field: { value, onChange } }) => (
+                  <TextArea
+                    id="description"
+                    name="description"
+                    value={value}
+                    placeholder="Description"
+                    onChange={onChange}
+                    className="w-full text-base resize-none min-h-24"
+                    hasError={Boolean(errors?.description)}
+                  />
+                )}
+              />
             </div>
           </div>
-        </Dialog>
-      </Transition.Root>
-    </>
+          {/* list of all the points */}
+          {/* since they are all the same, we can use a loop to render them */}
+          <div className="grid grid-cols-3 gap-3">
+            {Array(6)
+              .fill(0)
+              .map((_, i) => (
+                <div className="flex items-center" key={i}>
+                  <span className="flex h-full items-center rounded-lg bg-custom-background-80">
+                    <span className="rounded-lg px-2 text-sm text-custom-text-200">{i + 1}</span>
+                    <span className="rounded-r-lg bg-custom-background-100">
+                      <Controller
+                        control={control}
+                        name={`value${i + 1}` as keyof FormValues}
+                        rules={{
+                          maxLength: {
+                            value: 20,
+                            message: "Estimate point must at most be of 20 characters",
+                          },
+                        }}
+                        render={({ field: { value, onChange, ref } }) => (
+                          <Input
+                            ref={ref}
+                            type="text"
+                            value={value}
+                            onChange={onChange}
+                            id={`value${i + 1}`}
+                            name={`value${i + 1}`}
+                            placeholder={`Point ${i + 1}`}
+                            className="w-full rounded-l-none"
+                            hasError={Boolean(errors[`value${i + 1}` as keyof FormValues])}
+                          />
+                        )}
+                      />
+                    </span>
+                  </span>
+                </div>
+              ))}
+          </div>
+        </div>
+        <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
+          <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
+            {data ? (isSubmitting ? "Updating" : "Update Estimate") : isSubmitting ? "Creating" : "Create Estimate"}
+          </Button>
+        </div>
+      </form>
+    </ModalCore>
   );
 });
diff --git a/web/components/estimates/delete-estimate-modal.tsx b/web/components/estimates/delete-estimate-modal.tsx
index 70ccb6a3b..8cd7894f7 100644
--- a/web/components/estimates/delete-estimate-modal.tsx
+++ b/web/components/estimates/delete-estimate-modal.tsx
@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
-import { AlertTriangle } from "lucide-react";
-import { Dialog, Transition } from "@headlessui/react";
-import { IEstimate } from "@plane/types";
-// store hooks
-import { Button, TOAST_TYPE, setToast } from "@plane/ui";
-import { useEstimate } from "@/hooks/store";
 // types
+import { IEstimate } from "@plane/types";
 // ui
+import { TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { AlertModalCore } from "@/components/core";
+// hooks
+import { useEstimate } from "@/hooks/store";
 
 type Props = {
   isOpen: boolean;
@@ -26,15 +26,16 @@ export const DeleteEstimateModal: React.FC<Props> = observer((props) => {
   // store hooks
   const { deleteEstimate } = useEstimate();
 
-  const handleEstimateDelete = () => {
+  const handleEstimateDelete = async () => {
     if (!workspaceSlug || !projectId) return;
 
+    setIsDeleteLoading(true);
+
     // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
     const estimateId = data?.id!;
 
-    deleteEstimate(workspaceSlug.toString(), projectId.toString(), estimateId)
+    await deleteEstimate(workspaceSlug.toString(), projectId.toString(), estimateId)
       .then(() => {
-        setIsDeleteLoading(false);
         handleClose();
       })
       .catch((err) => {
@@ -46,7 +47,8 @@ export const DeleteEstimateModal: React.FC<Props> = observer((props) => {
           title: "Error!",
           message: errorString ?? "Estimate could not be deleted. Please try again",
         });
-      });
+      })
+      .finally(() => setIsDeleteLoading(false));
   };
 
   useEffect(() => {
@@ -59,72 +61,19 @@ export const DeleteEstimateModal: React.FC<Props> = observer((props) => {
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={onClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
-                <div className="flex flex-col gap-6 p-6">
-                  <div className="flex w-full items-center justify-start gap-6">
-                    <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
-                    </span>
-                    <span className="flex items-center justify-start">
-                      <h3 className="text-xl font-medium 2xl:text-2xl">Delete Estimate</h3>
-                    </span>
-                  </div>
-                  <span>
-                    <p className="break-words text-sm leading-7 text-custom-text-200">
-                      Are you sure you want to delete estimate-{" "}
-                      <span className="break-words font-medium text-custom-text-100">{data?.name}</span>
-                      {""}? All of the data related to the estiamte will be permanently removed. This action cannot be
-                      undone.
-                    </p>
-                  </span>
-                  <div className="flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
-                      Cancel
-                    </Button>
-                    <Button
-                      variant="danger"
-                      size="sm"
-                      tabIndex={1}
-                      onClick={() => {
-                        setIsDeleteLoading(true);
-                        handleEstimateDelete();
-                      }}
-                      loading={isDeleteLoading}
-                    >
-                      {isDeleteLoading ? "Deleting..." : "Delete Estimate"}
-                    </Button>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <AlertModalCore
+      handleClose={onClose}
+      handleSubmit={handleEstimateDelete}
+      isDeleting={isDeleteLoading}
+      isOpen={isOpen}
+      title="Delete Estimate"
+      content={
+        <>
+          Are you sure you want to delete estimate-{" "}
+          <span className="break-words font-medium text-custom-text-100">{data?.name}</span>
+          {""}? All of the data related to the estiamte will be permanently removed. This action cannot be undone.
+        </>
+      }
+    />
   );
 });
diff --git a/web/components/inbox/modals/create-edit-modal/create-root.tsx b/web/components/inbox/modals/create-edit-modal/create-root.tsx
index 010884451..9e72240eb 100644
--- a/web/components/inbox/modals/create-edit-modal/create-root.tsx
+++ b/web/components/inbox/modals/create-edit-modal/create-root.tsx
@@ -1,7 +1,9 @@
 import { FC, FormEvent, useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
+// editor
 import { EditorRefApi } from "@plane/rich-text-editor";
+// types
 import { TIssue } from "@plane/types";
 import { Button, ToggleSwitch, TOAST_TYPE, setToast } from "@plane/ui";
 // components
@@ -120,31 +122,37 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
 
   if (!workspaceSlug || !projectId || !workspaceId) return <></>;
   return (
-    <form className="relative space-y-4" onSubmit={handleFormSubmit}>
-      <InboxIssueTitle
-        data={formData}
-        handleData={handleFormData}
-        isTitleLengthMoreThan255Character={isTitleLengthMoreThan255Character}
-      />
-      <InboxIssueDescription
-        workspaceSlug={workspaceSlug}
-        projectId={projectId}
-        workspaceId={workspaceId}
-        data={formData}
-        handleData={handleFormData}
-        editorRef={descriptionEditorRef}
-        containerClassName="border-[0.5px] border-custom-border-200 py-3 min-h-[150px]"
-      />
-      <InboxIssueProperties projectId={projectId} data={formData} handleData={handleFormData} />
-      <div className="relative flex justify-between items-center gap-3">
+    <form onSubmit={handleFormSubmit}>
+      <div className="space-y-5 p-5">
+        <h3 className="text-xl font-medium text-custom-text-200">Create Inbox Issue</h3>
+        <div className="space-y-3">
+          <InboxIssueTitle
+            data={formData}
+            handleData={handleFormData}
+            isTitleLengthMoreThan255Character={isTitleLengthMoreThan255Character}
+          />
+          <InboxIssueDescription
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            workspaceId={workspaceId}
+            data={formData}
+            handleData={handleFormData}
+            editorRef={descriptionEditorRef}
+            containerClassName="border-[0.5px] border-custom-border-200 py-3 min-h-[150px]"
+          />
+          <InboxIssueProperties projectId={projectId} data={formData} handleData={handleFormData} />
+        </div>
+      </div>
+      <div className="px-5 py-4 flex items-center justify-between gap-2 border-t-[0.5px] border-custom-border-200">
         <div
-          className="flex cursor-pointer items-center gap-1.5"
+          className="inline-flex items-center gap-1.5 cursor-pointer"
           onClick={() => setCreateMore((prevData) => !prevData)}
+          role="button"
         >
           <ToggleSwitch value={createMore} onChange={() => {}} size="sm" />
           <span className="text-xs">Create more</span>
         </div>
-        <div className="relative flex items-center gap-3">
+        <div className="flex items-center gap-3">
           <Button variant="neutral-primary" size="sm" type="button" onClick={handleModalClose}>
             Discard
           </Button>
@@ -155,7 +163,7 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
             loading={formSubmitting}
             disabled={isTitleLengthMoreThan255Character}
           >
-            {formSubmitting ? "Adding Issue..." : "Add Issue"}
+            {formSubmitting ? "Creating" : "Create Issue"}
           </Button>
         </div>
       </div>
diff --git a/web/components/inbox/modals/create-edit-modal/edit-root.tsx b/web/components/inbox/modals/create-edit-modal/edit-root.tsx
index 90bb0e258..06f3787b2 100644
--- a/web/components/inbox/modals/create-edit-modal/edit-root.tsx
+++ b/web/components/inbox/modals/create-edit-modal/edit-root.tsx
@@ -1,8 +1,11 @@
 import { FC, useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
+// editor
 import { EditorRefApi } from "@plane/rich-text-editor";
+// types
 import { TIssue } from "@plane/types";
+// ui
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import {
@@ -15,7 +18,7 @@ import { ISSUE_UPDATED } from "@/constants/event-tracker";
 // helpers
 import { renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 // hooks
-import { useEventTracker, useInboxIssues, useWorkspace } from "@/hooks/store";
+import { useEventTracker, useInboxIssues, useProject, useWorkspace } from "@/hooks/store";
 
 type TInboxIssueEditRoot = {
   workspaceSlug: string;
@@ -31,8 +34,9 @@ export const InboxIssueEditRoot: FC<TInboxIssueEditRoot> = observer((props) => {
   const router = useRouter();
   // refs
   const descriptionEditorRef = useRef<EditorRefApi>(null);
-  // hooks
+  // store hooks
   const { captureIssueEvent } = useEventTracker();
+  const { currentProjectDetails } = useProject();
   const { updateProjectIssue } = useInboxIssues(issueId);
   const { getWorkspaceBySlug } = useWorkspace();
   const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id;
@@ -125,23 +129,30 @@ export const InboxIssueEditRoot: FC<TInboxIssueEditRoot> = observer((props) => {
 
   if (!workspaceSlug || !projectId || !workspaceId || !formData) return <></>;
   return (
-    <div className="relative space-y-4">
-      <InboxIssueTitle
-        data={formData}
-        handleData={handleFormData}
-        isTitleLengthMoreThan255Character={isTitleLengthMoreThan255Character}
-      />
-      <InboxIssueDescription
-        workspaceSlug={workspaceSlug}
-        projectId={projectId}
-        workspaceId={workspaceId}
-        data={formData}
-        handleData={handleFormData}
-        editorRef={descriptionEditorRef}
-        containerClassName="border-[0.5px] border-custom-border-200 py-3 min-h-[150px]"
-      />
-      <InboxIssueProperties projectId={projectId} data={formData} handleData={handleFormData} isVisible />
-      <div className="relative flex justify-end items-center gap-3">
+    <>
+      <div className="space-y-5 p-5">
+        <h3 className="text-xl font-medium text-custom-text-200">
+          Move {currentProjectDetails?.identifier}-{issue?.sequence_id} to project issues
+        </h3>
+        <div className="space-y-3">
+          <InboxIssueTitle
+            data={formData}
+            handleData={handleFormData}
+            isTitleLengthMoreThan255Character={isTitleLengthMoreThan255Character}
+          />
+          <InboxIssueDescription
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            workspaceId={workspaceId}
+            data={formData}
+            handleData={handleFormData}
+            editorRef={descriptionEditorRef}
+            containerClassName="border-[0.5px] border-custom-border-200 py-3 min-h-[150px]"
+          />
+          <InboxIssueProperties projectId={projectId} data={formData} handleData={handleFormData} isVisible />
+        </div>
+      </div>
+      <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
         <Button variant="neutral-primary" size="sm" type="button" onClick={handleModalClose}>
           Cancel
         </Button>
@@ -153,9 +164,9 @@ export const InboxIssueEditRoot: FC<TInboxIssueEditRoot> = observer((props) => {
           disabled={isTitleLengthMoreThan255Character}
           onClick={handleFormSubmit}
         >
-          {formSubmitting ? "Adding..." : "Add to project"}
+          {formSubmitting ? "Adding" : "Add to project"}
         </Button>
       </div>
-    </div>
+    </>
   );
 });
diff --git a/web/components/inbox/modals/create-edit-modal/issue-description.tsx b/web/components/inbox/modals/create-edit-modal/issue-description.tsx
index 2c9a9cfd2..882fb0f95 100644
--- a/web/components/inbox/modals/create-edit-modal/issue-description.tsx
+++ b/web/components/inbox/modals/create-edit-modal/issue-description.tsx
@@ -32,19 +32,18 @@ export const InboxIssueDescription: FC<TInboxIssueDescription> = observer((props
         <Loader.Item width="100%" height="140px" />
       </Loader>
     );
+
   return (
-    <div className="relative">
-      <RichTextEditor
-        initialValue={!data?.description_html || data?.description_html === "" ? "<p></p>" : data?.description_html}
-        ref={editorRef}
-        workspaceSlug={workspaceSlug}
-        workspaceId={workspaceId}
-        projectId={projectId}
-        dragDropEnabled={false}
-        onChange={(_description: object, description_html: string) => handleData("description_html", description_html)}
-        placeholder={getDescriptionPlaceholder}
-        containerClassName={containerClassName}
-      />
-    </div>
+    <RichTextEditor
+      initialValue={!data?.description_html || data?.description_html === "" ? "<p></p>" : data?.description_html}
+      ref={editorRef}
+      workspaceSlug={workspaceSlug}
+      workspaceId={workspaceId}
+      projectId={projectId}
+      dragDropEnabled={false}
+      onChange={(_description: object, description_html: string) => handleData("description_html", description_html)}
+      placeholder={getDescriptionPlaceholder}
+      containerClassName={containerClassName}
+    />
   );
 });
diff --git a/web/components/inbox/modals/create-edit-modal/issue-title.tsx b/web/components/inbox/modals/create-edit-modal/issue-title.tsx
index 31a44bf76..ddd3eea9a 100644
--- a/web/components/inbox/modals/create-edit-modal/issue-title.tsx
+++ b/web/components/inbox/modals/create-edit-modal/issue-title.tsx
@@ -13,7 +13,7 @@ export const InboxIssueTitle: FC<TInboxIssueTitle> = observer((props) => {
   const { data, handleData, isTitleLengthMoreThan255Character } = props;
 
   return (
-    <div className="relative flex flex-wrap gap-2 items-center">
+    <div className="space-y-1">
       <Input
         id="name"
         name="name"
@@ -21,7 +21,7 @@ export const InboxIssueTitle: FC<TInboxIssueTitle> = observer((props) => {
         value={data?.name}
         onChange={(e) => handleData("name", e.target.value)}
         placeholder="Title"
-        className="w-full resize-none text-xl"
+        className="w-full text-base"
         required
       />
       {isTitleLengthMoreThan255Character && (
diff --git a/web/components/inbox/modals/create-edit-modal/modal.tsx b/web/components/inbox/modals/create-edit-modal/modal.tsx
index 554af0948..2b6493ec9 100644
--- a/web/components/inbox/modals/create-edit-modal/modal.tsx
+++ b/web/components/inbox/modals/create-edit-modal/modal.tsx
@@ -1,11 +1,9 @@
-import { FC, Fragment } from "react";
-import { observer } from "mobx-react";
-import { Transition, Dialog } from "@headlessui/react";
+import { FC } from "react";
+// types
 import { TIssue } from "@plane/types";
 // components
+import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
 import { InboxIssueCreateRoot, InboxIssueEditRoot } from "@/components/inbox/modals/create-edit-modal";
-// hooks
-import { useProject } from "@/hooks/store";
 
 type TInboxIssueCreateEditModalRoot = {
   workspaceSlug: string;
@@ -16,69 +14,28 @@ type TInboxIssueCreateEditModalRoot = {
   onSubmit?: () => void;
 };
 
-export const InboxIssueCreateEditModalRoot: FC<TInboxIssueCreateEditModalRoot> = observer((props) => {
+export const InboxIssueCreateEditModalRoot: FC<TInboxIssueCreateEditModalRoot> = (props) => {
   const { workspaceSlug, projectId, modalState, handleModalClose, issue, onSubmit } = props;
-  // hooks
-  const { currentProjectDetails } = useProject();
 
   return (
-    <div>
-      <Transition.Root show={modalState} as={Fragment}>
-        <Dialog as="div" className="relative z-20" onClose={handleModalClose}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 z-10 overflow-y-auto">
-            <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                enterTo="opacity-100 translate-y-0 sm:scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              >
-                <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all w-full lg:max-w-4xl">
-                  {issue && issue?.id ? (
-                    <div className="space-y-4">
-                      <h3 className="text-xl font-medium text-custom-text-100">
-                        Move {currentProjectDetails?.identifier}-{issue?.sequence_id} to project issues
-                      </h3>
-                      <InboxIssueEditRoot
-                        workspaceSlug={workspaceSlug}
-                        projectId={projectId}
-                        issueId={issue.id}
-                        issue={issue}
-                        handleModalClose={handleModalClose}
-                        onSubmit={onSubmit}
-                      />
-                    </div>
-                  ) : (
-                    <div className="space-y-4">
-                      <h3 className="text-xl font-medium text-custom-text-100">Create Inbox Issue</h3>
-                      <InboxIssueCreateRoot
-                        workspaceSlug={workspaceSlug}
-                        projectId={projectId}
-                        handleModalClose={handleModalClose}
-                      />
-                    </div>
-                  )}
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition.Root>
-    </div>
+    <ModalCore
+      isOpen={modalState}
+      handleClose={handleModalClose}
+      position={EModalPosition.TOP}
+      width={EModalWidth.XXXXL}
+    >
+      {issue && issue?.id ? (
+        <InboxIssueEditRoot
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          issueId={issue.id}
+          issue={issue}
+          handleModalClose={handleModalClose}
+          onSubmit={onSubmit}
+        />
+      ) : (
+        <InboxIssueCreateRoot workspaceSlug={workspaceSlug} projectId={projectId} handleModalClose={handleModalClose} />
+      )}
+    </ModalCore>
   );
-});
+};
diff --git a/web/components/inbox/modals/decline-issue-modal.tsx b/web/components/inbox/modals/decline-issue-modal.tsx
index 70be2db46..5c7b35a1c 100644
--- a/web/components/inbox/modals/decline-issue-modal.tsx
+++ b/web/components/inbox/modals/decline-issue-modal.tsx
@@ -1,11 +1,9 @@
 import React, { useState } from "react";
-import { AlertTriangle } from "lucide-react";
-import { Dialog, Transition } from "@headlessui/react";
-import type { TIssue } from "@plane/types";
-// icons
-// ui
-import { Button } from "@plane/ui";
 // types
+import type { TIssue } from "@plane/types";
+// components
+import { AlertModalCore } from "@/components/core";
+// hooks
 import { useProject } from "@/hooks/store";
 
 type Props = {
@@ -15,81 +13,46 @@ type Props = {
   onSubmit: () => Promise<void>;
 };
 
-export const DeclineIssueModal: React.FC<Props> = ({ isOpen, onClose, data, onSubmit }) => {
+export const DeclineIssueModal: React.FC<Props> = (props) => {
+  const { isOpen, onClose, data, onSubmit } = props;
+  // states
   const [isDeclining, setIsDeclining] = useState(false);
-  // hooks
+  // store hooks
   const { getProjectById } = useProject();
+  // derived values
+  const projectDetails = data.project_id ? getProjectById(data?.project_id) : undefined;
 
   const handleClose = () => {
     setIsDeclining(false);
     onClose();
   };
 
-  const handleDecline = () => {
+  const handleDecline = async () => {
     setIsDeclining(true);
-    onSubmit().finally(() => setIsDeclining(false));
+    await onSubmit().finally(() => setIsDeclining(false));
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
-                <div className="flex flex-col gap-6 p-6">
-                  <div className="flex w-full items-center justify-start gap-6">
-                    <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
-                    </span>
-                    <span className="flex items-center justify-start">
-                      <h3 className="text-xl font-medium 2xl:text-2xl">Decline Issue</h3>
-                    </span>
-                  </div>
-                  <span>
-                    <p className="text-sm text-custom-text-200">
-                      Are you sure you want to decline issue{" "}
-                      <span className="break-words font-medium text-custom-text-100">
-                        {(data && data?.project_id && getProjectById(data?.project_id)?.identifier) || ""}-
-                        {data?.sequence_id}
-                      </span>
-                      {""}? This action cannot be undone.
-                    </p>
-                  </span>
-                  <div className="flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                      Cancel
-                    </Button>
-                    <Button variant="danger" size="sm" tabIndex={1} onClick={handleDecline} loading={isDeclining}>
-                      {isDeclining ? "Declining..." : "Decline Issue"}
-                    </Button>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={handleDecline}
+      isDeleting={isDeclining}
+      isOpen={isOpen}
+      title="Decline Issue"
+      content={
+        <>
+          {" "}
+          Are you sure you want to decline issue{" "}
+          <span className="break-words font-medium text-custom-text-100">
+            {projectDetails?.identifier}-{data?.sequence_id}
+          </span>
+          {""}? This action cannot be undone.
+        </>
+      }
+      primaryButtonText={{
+        loading: "Declining",
+        default: "Decline",
+      }}
+    />
   );
 };
diff --git a/web/components/inbox/modals/delete-issue-modal.tsx b/web/components/inbox/modals/delete-issue-modal.tsx
index 35cc33657..5b1c00419 100644
--- a/web/components/inbox/modals/delete-issue-modal.tsx
+++ b/web/components/inbox/modals/delete-issue-modal.tsx
@@ -1,14 +1,11 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react";
-import { AlertTriangle } from "lucide-react";
-import { Dialog, Transition } from "@headlessui/react";
-// hooks
-// icons
-import type { TIssue } from "@plane/types";
-// ui
-import { Button } from "@plane/ui";
-import { useProject } from "@/hooks/store";
 // types
+import type { TIssue } from "@plane/types";
+// components
+import { AlertModalCore } from "@/components/core";
+// hooks
+import { useProject } from "@/hooks/store";
 
 type Props = {
   data: Partial<TIssue>;
@@ -20,79 +17,37 @@ type Props = {
 export const DeleteInboxIssueModal: React.FC<Props> = observer(({ isOpen, onClose, onSubmit, data }) => {
   // states
   const [isDeleting, setIsDeleting] = useState(false);
-
+  // store hooks
   const { getProjectById } = useProject();
+  // derived values
+  const projectDetails = data.project_id ? getProjectById(data?.project_id) : undefined;
 
   const handleClose = () => {
     setIsDeleting(false);
     onClose();
   };
 
-  const handleDelete = () => {
+  const handleDelete = async () => {
     setIsDeleting(true);
-    onSubmit().finally(() => handleClose());
+    await onSubmit().finally(() => handleClose());
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
-                <div className="flex flex-col gap-6 p-6">
-                  <div className="flex w-full items-center justify-start gap-6">
-                    <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
-                    </span>
-                    <span className="flex items-center justify-start">
-                      <h3 className="text-xl font-medium 2xl:text-2xl">Delete Issue</h3>
-                    </span>
-                  </div>
-                  <span>
-                    <p className="text-sm text-custom-text-200">
-                      Are you sure you want to delete issue{" "}
-                      <span className="break-words font-medium text-custom-text-100">
-                        {(data && data?.project_id && getProjectById(data?.project_id)?.identifier) || ""}-
-                        {data?.sequence_id}
-                      </span>
-                      {""}? The issue will only be deleted from the inbox and this action cannot be undone.
-                    </p>
-                  </span>
-                  <div className="flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                      Cancel
-                    </Button>
-                    <Button variant="danger" size="sm" tabIndex={1} onClick={handleDelete} loading={isDeleting}>
-                      {isDeleting ? "Deleting..." : "Delete Issue"}
-                    </Button>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={handleDelete}
+      isDeleting={isDeleting}
+      isOpen={isOpen}
+      title="Delete Issue"
+      content={
+        <>
+          Are you sure you want to delete issue{" "}
+          <span className="break-words font-medium text-custom-text-100">
+            {projectDetails?.identifier}-{data?.sequence_id}
+          </span>
+          {""}? The issue will only be deleted from the inbox and this action cannot be undone.
+        </>
+      }
+    />
   );
 });
diff --git a/web/components/issues/attachment/delete-attachment-modal.tsx b/web/components/issues/attachment/delete-attachment-modal.tsx
index 4f58674f1..94ff60c94 100644
--- a/web/components/issues/attachment/delete-attachment-modal.tsx
+++ b/web/components/issues/attachment/delete-attachment-modal.tsx
@@ -1,10 +1,7 @@
-import { FC, Fragment, useState } from "react";
-import { AlertTriangle } from "lucide-react";
-import { Dialog, Transition } from "@headlessui/react";
+import { FC, useState } from "react";
 import type { TIssueAttachment } from "@plane/types";
-// headless ui
-// ui
-import { Button } from "@plane/ui";
+// components
+import { AlertModalCore } from "@/components/core";
 // helper
 import { getFileName } from "@/helpers/attachment.helper";
 // types
@@ -35,74 +32,19 @@ export const IssueAttachmentDeleteModal: FC<Props> = (props) => {
   };
 
   return (
-    data && (
-      <Transition.Root show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-20" onClose={handleClose}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 z-20 overflow-y-auto">
-            <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                enterTo="opacity-100 translate-y-0 sm:scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              >
-                <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
-                  <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
-                    <div className="sm:flex sm:items-start">
-                      <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                        <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
-                      </div>
-                      <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                        <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
-                          Delete attachment
-                        </Dialog.Title>
-                        <div className="mt-2">
-                          <p className="text-sm text-custom-text-200">
-                            Are you sure you want to delete attachment-{" "}
-                            <span className="font-bold">{getFileName(data.attributes.name)}</span>? This attachment will
-                            be permanently removed. This action cannot be undone.
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="flex justify-end gap-2 p-4 sm:px-6">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                      Cancel
-                    </Button>
-                    <Button
-                      variant="danger"
-                      size="sm"
-                      tabIndex={1}
-                      onClick={() => {
-                        handleDeletion(data.id);
-                      }}
-                      disabled={loader}
-                    >
-                      {loader ? "Deleting" : "Delete"}
-                    </Button>
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition.Root>
-    )
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={() => handleDeletion(data.id)}
+      isDeleting={loader}
+      isOpen={isOpen}
+      title="Delete attachment"
+      content={
+        <>
+          Are you sure you want to delete attachment-{" "}
+          <span className="font-bold">{getFileName(data.attributes.name)}</span>? This attachment will be permanently
+          removed. This action cannot be undone.
+        </>
+      }
+    />
   );
 };
diff --git a/web/components/issues/confirm-issue-discard.tsx b/web/components/issues/confirm-issue-discard.tsx
index ed3a26d32..0a550e8d6 100644
--- a/web/components/issues/confirm-issue-discard.tsx
+++ b/web/components/issues/confirm-issue-discard.tsx
@@ -78,7 +78,7 @@ export const ConfirmIssueDiscard: React.FC<Props> = (props) => {
                       Cancel
                     </Button>
                     <Button variant="primary" size="sm" onClick={handleDeletion} loading={isLoading}>
-                      {isLoading ? "Saving..." : "Save Draft"}
+                      {isLoading ? "Saving" : "Save draft"}
                     </Button>
                   </div>
                 </div>
diff --git a/web/components/issues/delete-issue-modal.tsx b/web/components/issues/delete-issue-modal.tsx
index 57dccd4fc..dc7b64075 100644
--- a/web/components/issues/delete-issue-modal.tsx
+++ b/web/components/issues/delete-issue-modal.tsx
@@ -1,12 +1,12 @@
-import { useEffect, useState, Fragment } from "react";
-import { AlertTriangle } from "lucide-react";
-import { Dialog, Transition } from "@headlessui/react";
+import { useEffect, useState } from "react";
+// types
 import { TIssue } from "@plane/types";
 // ui
-import { Button, TOAST_TYPE, setToast } from "@plane/ui";
-// types
-import { useIssues, useProject } from "@/hooks/store";
+import { TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { AlertModalCore } from "@/components/core";
 // hooks
+import { useIssues, useProject } from "@/hooks/store";
 
 type Props = {
   isOpen: boolean;
@@ -18,12 +18,10 @@ type Props = {
 
 export const DeleteIssueModal: React.FC<Props> = (props) => {
   const { dataId, data, isOpen, handleClose, onSubmit } = props;
-
-  const { issueMap } = useIssues();
-
+  // states
   const [isDeleting, setIsDeleting] = useState(false);
-
-  // hooks
+  // store hooks
+  const { issueMap } = useIssues();
   const { getProjectById } = useProject();
 
   useEffect(() => {
@@ -32,7 +30,9 @@ export const DeleteIssueModal: React.FC<Props> = (props) => {
 
   if (!dataId && !data) return null;
 
+  // derived values
   const issue = data ? data : issueMap[dataId!];
+  const projectDetails = getProjectById(issue?.project_id);
 
   const onClose = () => {
     setIsDeleting(false);
@@ -57,65 +57,21 @@ export const DeleteIssueModal: React.FC<Props> = (props) => {
   };
 
   return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={onClose}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
-                <div className="flex flex-col gap-6 p-6">
-                  <div className="flex w-full items-center justify-start gap-6">
-                    <div className="grid place-items-center rounded-full bg-red-500/20 p-4">
-                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
-                    </div>
-                    <span className="flex items-center justify-start">
-                      <h3 className="text-xl font-medium 2xl:text-2xl">Delete Issue</h3>
-                    </span>
-                  </div>
-                  <span>
-                    <p className="text-sm text-custom-text-200">
-                      Are you sure you want to delete issue{" "}
-                      <span className="break-words font-medium text-custom-text-100">
-                        {getProjectById(issue?.project_id)?.identifier}-{issue?.sequence_id}
-                      </span>
-                      {""}? All of the data related to the issue will be permanently removed. This action cannot be
-                      undone.
-                    </p>
-                  </span>
-                  <div className="flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
-                      Cancel
-                    </Button>
-                    <Button variant="danger" size="sm" tabIndex={1} onClick={handleIssueDelete} loading={isDeleting}>
-                      {isDeleting ? "Deleting" : "Delete"}
-                    </Button>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <AlertModalCore
+      handleClose={onClose}
+      handleSubmit={handleIssueDelete}
+      isDeleting={isDeleting}
+      isOpen={isOpen}
+      title="Delete Issue"
+      content={
+        <>
+          Are you sure you want to delete issue{" "}
+          <span className="break-words font-medium text-custom-text-100">
+            {projectDetails?.identifier}-{issue?.sequence_id}
+          </span>
+          {""}? All of the data related to the issue will be permanently removed. This action cannot be undone.
+        </>
+      }
+    />
   );
 };
diff --git a/web/components/issues/issue-modal/form.tsx b/web/components/issues/issue-modal/form.tsx
index 59565eb56..266041126 100644
--- a/web/components/issues/issue-modal/form.tsx
+++ b/web/components/issues/issue-modal/form.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState, useRef, useEffect, Fragment } from "react";
+import React, { FC, useState, useRef, useEffect } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
@@ -296,8 +296,8 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
         />
       )}
       <form onSubmit={handleSubmit((data) => handleFormSubmit(data))}>
-        <div className="space-y-5">
-          <div className="flex items-center gap-x-2">
+        <div className="space-y-5 p-5">
+          <div className="flex items-center gap-x-3">
             {/* Don't show project selection if editing an issue */}
             {!data?.id && (
               <Controller
@@ -322,16 +322,14 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                 )}
               />
             )}
-            <h3 className="text-xl font-semibold leading-6 text-custom-text-100">
-              {data?.id ? "Update" : "Create"} issue
-            </h3>
+            <h3 className="text-xl font-medium text-custom-text-200">{data?.id ? "Update" : "Create"} Issue</h3>
           </div>
           {watch("parent_id") && selectedParentIssue && (
             <Controller
               control={control}
               name="parent_id"
               render={({ field: { onChange } }) => (
-                <div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-custom-background-80 p-2 text-xs">
+                <div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-custom-background-90 p-2 text-xs">
                   <div className="flex items-center gap-2">
                     <span
                       className="block h-1.5 w-1.5 rounded-full"
@@ -361,7 +359,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
             />
           )}
           <div className="space-y-3">
-            <div className="mt-2 space-y-3">
+            <div className="space-y-1">
               <Controller
                 control={control}
                 name="name"
@@ -384,376 +382,372 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                     }}
                     ref={issueTitleRef || ref}
                     hasError={Boolean(errors.name)}
-                    placeholder="Issue Title"
-                    className="w-full resize-none text-xl"
+                    placeholder="Title"
+                    className="w-full text-base"
                     tabIndex={getTabIndex("name")}
                     autoFocus
                   />
                 )}
               />
               <span className="text-xs text-red-500">{errors?.name?.message}</span>
-
-              <div className="relative">
-                {data?.description_html === undefined ? (
-                  <Loader className="min-h-[7rem] space-y-2 overflow-hidden rounded-md border border-custom-border-200 p-2 py-2">
-                    <Loader.Item width="100%" height="26px" />
-                    <div className="flex items-center gap-2">
-                      <Loader.Item width="26px" height="26px" />
-                      <Loader.Item width="400px" height="26px" />
-                    </div>
-                    <div className="flex items-center gap-2">
-                      <Loader.Item width="26px" height="26px" />
-                      <Loader.Item width="400px" height="26px" />
-                    </div>
-                    <Loader.Item width="80%" height="26px" />
-                    <div className="flex items-center gap-2">
-                      <Loader.Item width="50%" height="26px" />
-                    </div>
-                    <div className="border-0.5 absolute bottom-3.5 right-3.5 z-10 flex items-center gap-2">
-                      <Loader.Item width="100px" height="26px" />
-                      <Loader.Item width="50px" height="26px" />
-                    </div>
-                  </Loader>
-                ) : (
-                  <Fragment>
-                    <div className="border-0.5 absolute bottom-3.5 right-3.5 z-10 flex items-center gap-2">
-                      {issueName && issueName.trim() !== "" && envConfig?.has_openai_configured && (
-                        <button
-                          type="button"
-                          className={`flex items-center gap-1 rounded bg-custom-background-80 px-1.5 py-1 text-xs ${
-                            iAmFeelingLucky ? "cursor-wait" : ""
-                          }`}
-                          onClick={handleAutoGenerateDescription}
-                          disabled={iAmFeelingLucky}
-                          tabIndex={getTabIndex("feeling_lucky")}
-                        >
-                          {iAmFeelingLucky ? (
-                            "Generating response"
-                          ) : (
-                            <>
-                              <Sparkle className="h-3.5 w-3.5" />I{"'"}m feeling lucky
-                            </>
-                          )}
-                        </button>
-                      )}
-                      {envConfig?.has_openai_configured && (
-                        <GptAssistantPopover
-                          isOpen={gptAssistantModal}
-                          projectId={projectId}
-                          handleClose={() => {
-                            setGptAssistantModal((prevData) => !prevData);
-                            // this is done so that the title do not reset after gpt popover closed
-                            reset(getValues());
-                          }}
-                          onResponse={(response) => {
-                            handleAiAssistance(response);
-                          }}
-                          placement="top-end"
-                          button={
-                            <button
-                              type="button"
-                              className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
-                              onClick={() => setGptAssistantModal((prevData) => !prevData)}
-                              tabIndex={getTabIndex("ai_assistant")}
-                            >
-                              <Sparkle className="h-4 w-4" />
-                              AI
-                            </button>
-                          }
-                        />
-                      )}
-                    </div>
-                    <Controller
-                      name="description_html"
-                      control={control}
-                      render={({ field: { value, onChange } }) => (
-                        <RichTextEditor
-                          initialValue={value}
-                          value={data.description_html}
-                          workspaceSlug={workspaceSlug?.toString() as string}
-                          workspaceId={workspaceId}
-                          projectId={projectId}
-                          onChange={(_description: object, description_html: string) => {
-                            onChange(description_html);
-                            handleFormChange();
-                          }}
-                          ref={editorRef}
-                          tabIndex={getTabIndex("description_html")}
-                          placeholder={getDescriptionPlaceholder}
-                          containerClassName="border-[0.5px] border-custom-border-200 py-3 min-h-[150px]"
-                        />
-                      )}
-                    />
-                  </Fragment>
-                )}
-              </div>
-              <div className="flex flex-wrap items-center gap-2">
-                <Controller
-                  control={control}
-                  name="state_id"
-                  render={({ field: { value, onChange } }) => (
-                    <div className="h-7">
-                      <StateDropdown
-                        value={value}
-                        onChange={(stateId) => {
-                          onChange(stateId);
-                          handleFormChange();
-                        }}
-                        projectId={projectId}
-                        buttonVariant="border-with-text"
-                        tabIndex={getTabIndex("state_id")}
-                      />
-                    </div>
-                  )}
-                />
-                <Controller
-                  control={control}
-                  name="priority"
-                  render={({ field: { value, onChange } }) => (
-                    <div className="h-7">
-                      <PriorityDropdown
-                        value={value}
-                        onChange={(priority) => {
-                          onChange(priority);
-                          handleFormChange();
-                        }}
-                        buttonVariant="border-with-text"
-                        tabIndex={getTabIndex("priority")}
-                      />
-                    </div>
-                  )}
-                />
-                <Controller
-                  control={control}
-                  name="assignee_ids"
-                  render={({ field: { value, onChange } }) => (
-                    <div className="h-7">
-                      <MemberDropdown
-                        projectId={projectId}
-                        value={value}
-                        onChange={(assigneeIds) => {
-                          onChange(assigneeIds);
-                          handleFormChange();
-                        }}
-                        buttonVariant={value?.length > 0 ? "transparent-without-text" : "border-with-text"}
-                        buttonClassName={value?.length > 0 ? "hover:bg-transparent" : ""}
-                        placeholder="Assignees"
-                        multiple
-                        tabIndex={getTabIndex("assignee_ids")}
-                      />
-                    </div>
-                  )}
-                />
-                <Controller
-                  control={control}
-                  name="label_ids"
-                  render={({ field: { value, onChange } }) => (
-                    <div className="h-7">
-                      <IssueLabelSelect
-                        setIsOpen={setLabelModal}
-                        value={value}
-                        onChange={(labelIds) => {
-                          onChange(labelIds);
-                          handleFormChange();
-                        }}
-                        projectId={projectId}
-                        tabIndex={getTabIndex("label_ids")}
-                      />
-                    </div>
-                  )}
-                />
-                <Controller
-                  control={control}
-                  name="start_date"
-                  render={({ field: { value, onChange } }) => (
-                    <div className="h-7">
-                      <DateDropdown
-                        value={value}
-                        onChange={(date) => onChange(date ? renderFormattedPayloadDate(date) : null)}
-                        buttonVariant="border-with-text"
-                        maxDate={maxDate ?? undefined}
-                        placeholder="Start date"
-                        tabIndex={getTabIndex("start_date")}
-                      />
-                    </div>
-                  )}
-                />
-                <Controller
-                  control={control}
-                  name="target_date"
-                  render={({ field: { value, onChange } }) => (
-                    <div className="h-7">
-                      <DateDropdown
-                        value={value}
-                        onChange={(date) => onChange(date ? renderFormattedPayloadDate(date) : null)}
-                        buttonVariant="border-with-text"
-                        minDate={minDate ?? undefined}
-                        placeholder="Due date"
-                        tabIndex={getTabIndex("target_date")}
-                      />
-                    </div>
-                  )}
-                />
-                {projectDetails?.cycle_view && (
-                  <Controller
-                    control={control}
-                    name="cycle_id"
-                    render={({ field: { value, onChange } }) => (
-                      <div className="h-7">
-                        <CycleDropdown
-                          projectId={projectId}
-                          onChange={(cycleId) => {
-                            onChange(cycleId);
-                            handleFormChange();
-                          }}
-                          placeholder="Cycle"
-                          value={value}
-                          buttonVariant="border-with-text"
-                          tabIndex={getTabIndex("cycle_id")}
-                        />
-                      </div>
-                    )}
-                  />
-                )}
-                {projectDetails?.module_view && workspaceSlug && (
-                  <Controller
-                    control={control}
-                    name="module_ids"
-                    render={({ field: { value, onChange } }) => (
-                      <div className="h-7">
-                        <ModuleDropdown
-                          projectId={projectId}
-                          value={value ?? []}
-                          onChange={(moduleIds) => {
-                            onChange(moduleIds);
-                            handleFormChange();
-                          }}
-                          placeholder="Modules"
-                          buttonVariant="border-with-text"
-                          tabIndex={getTabIndex("module_ids")}
-                          multiple
-                          showCount
-                        />
-                      </div>
-                    )}
-                  />
-                )}
-                {areEstimatesEnabledForProject(projectId) && (
-                  <Controller
-                    control={control}
-                    name="estimate_point"
-                    render={({ field: { value, onChange } }) => (
-                      <div className="h-7">
-                        <EstimateDropdown
-                          value={value}
-                          onChange={(estimatePoint) => {
-                            onChange(estimatePoint);
-                            handleFormChange();
-                          }}
-                          projectId={projectId}
-                          buttonVariant="border-with-text"
-                          tabIndex={getTabIndex("estimate_point")}
-                          placeholder="Estimate"
-                        />
-                      </div>
-                    )}
-                  />
-                )}
-                {watch("parent_id") ? (
-                  <CustomMenu
-                    customButton={
+            </div>
+            <div className="relative">
+              {data?.description_html === undefined ? (
+                <Loader className="min-h-[7rem] space-y-2 overflow-hidden rounded-md border border-custom-border-200 p-2 py-2">
+                  <Loader.Item width="100%" height="26px" />
+                  <div className="flex items-center gap-2">
+                    <Loader.Item width="26px" height="26px" />
+                    <Loader.Item width="400px" height="26px" />
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Loader.Item width="26px" height="26px" />
+                    <Loader.Item width="400px" height="26px" />
+                  </div>
+                  <Loader.Item width="80%" height="26px" />
+                  <div className="flex items-center gap-2">
+                    <Loader.Item width="50%" height="26px" />
+                  </div>
+                  <div className="border-0.5 absolute bottom-3.5 right-3.5 z-10 flex items-center gap-2">
+                    <Loader.Item width="100px" height="26px" />
+                    <Loader.Item width="50px" height="26px" />
+                  </div>
+                </Loader>
+              ) : (
+                <>
+                  <div className="border-0.5 absolute bottom-3.5 right-3.5 z-10 flex items-center gap-2">
+                    {issueName && issueName.trim() !== "" && envConfig?.has_openai_configured && (
                       <button
                         type="button"
-                        className="flex cursor-pointer items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1.5 text-xs hover:bg-custom-background-80"
+                        className={`flex items-center gap-1 rounded bg-custom-background-90 px-1.5 py-1 text-xs ${
+                          iAmFeelingLucky ? "cursor-wait" : ""
+                        }`}
+                        onClick={handleAutoGenerateDescription}
+                        disabled={iAmFeelingLucky}
+                        tabIndex={getTabIndex("feeling_lucky")}
                       >
-                        <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
-                        <span className="whitespace-nowrap">
-                          {selectedParentIssue &&
-                            `${selectedParentIssue.project__identifier}-${selectedParentIssue.sequence_id}`}
-                        </span>
-                      </button>
-                    }
-                    placement="bottom-start"
-                    tabIndex={getTabIndex("parent_id")}
-                  >
-                    <>
-                      <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
-                        Change parent issue
-                      </CustomMenu.MenuItem>
-                      <Controller
-                        control={control}
-                        name="parent_id"
-                        render={({ field: { onChange } }) => (
-                          <CustomMenu.MenuItem
-                            className="!p-1"
-                            onClick={() => {
-                              onChange(null);
-                              handleFormChange();
-                            }}
-                          >
-                            Remove parent issue
-                          </CustomMenu.MenuItem>
+                        {iAmFeelingLucky ? (
+                          "Generating response"
+                        ) : (
+                          <>
+                            <Sparkle className="h-3.5 w-3.5" />I{"'"}m feeling lucky
+                          </>
                         )}
+                      </button>
+                    )}
+                    {envConfig?.has_openai_configured && (
+                      <GptAssistantPopover
+                        isOpen={gptAssistantModal}
+                        projectId={projectId}
+                        handleClose={() => {
+                          setGptAssistantModal((prevData) => !prevData);
+                          // this is done so that the title do not reset after gpt popover closed
+                          reset(getValues());
+                        }}
+                        onResponse={(response) => {
+                          handleAiAssistance(response);
+                        }}
+                        placement="top-end"
+                        button={
+                          <button
+                            type="button"
+                            className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
+                            onClick={() => setGptAssistantModal((prevData) => !prevData)}
+                            tabIndex={getTabIndex("ai_assistant")}
+                          >
+                            <Sparkle className="h-4 w-4" />
+                            AI
+                          </button>
+                        }
                       />
-                    </>
-                  </CustomMenu>
-                ) : (
-                  <button
-                    type="button"
-                    className="flex cursor-pointer items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1.5 text-xs hover:bg-custom-background-80"
-                    onClick={() => setParentIssueListModalOpen(true)}
-                  >
-                    <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
-                    <span className="whitespace-nowrap">Add parent</span>
-                  </button>
-                )}
-                <Controller
-                  control={control}
-                  name="parent_id"
-                  render={({ field: { onChange } }) => (
-                    <ParentIssuesListModal
-                      isOpen={parentIssueListModalOpen}
-                      handleClose={() => setParentIssueListModalOpen(false)}
-                      onChange={(issue) => {
-                        onChange(issue.id);
+                    )}
+                  </div>
+                  <Controller
+                    name="description_html"
+                    control={control}
+                    render={({ field: { value, onChange } }) => (
+                      <RichTextEditor
+                        initialValue={value}
+                        value={data.description_html}
+                        workspaceSlug={workspaceSlug?.toString() as string}
+                        workspaceId={workspaceId}
+                        projectId={projectId}
+                        onChange={(_description: object, description_html: string) => {
+                          onChange(description_html);
+                          handleFormChange();
+                        }}
+                        ref={editorRef}
+                        tabIndex={getTabIndex("description_html")}
+                        placeholder={getDescriptionPlaceholder}
+                        containerClassName="border-[0.5px] border-custom-border-200 py-3 min-h-[150px]"
+                      />
+                    )}
+                  />
+                </>
+              )}
+            </div>
+            <div className="flex flex-wrap items-center gap-2">
+              <Controller
+                control={control}
+                name="state_id"
+                render={({ field: { value, onChange } }) => (
+                  <div className="h-7">
+                    <StateDropdown
+                      value={value}
+                      onChange={(stateId) => {
+                        onChange(stateId);
                         handleFormChange();
-                        setSelectedParentIssue(issue);
                       }}
                       projectId={projectId}
-                      issueId={isDraft ? undefined : data?.id}
+                      buttonVariant="border-with-text"
+                      tabIndex={getTabIndex("state_id")}
                     />
+                  </div>
+                )}
+              />
+              <Controller
+                control={control}
+                name="priority"
+                render={({ field: { value, onChange } }) => (
+                  <div className="h-7">
+                    <PriorityDropdown
+                      value={value}
+                      onChange={(priority) => {
+                        onChange(priority);
+                        handleFormChange();
+                      }}
+                      buttonVariant="border-with-text"
+                      tabIndex={getTabIndex("priority")}
+                    />
+                  </div>
+                )}
+              />
+              <Controller
+                control={control}
+                name="assignee_ids"
+                render={({ field: { value, onChange } }) => (
+                  <div className="h-7">
+                    <MemberDropdown
+                      projectId={projectId}
+                      value={value}
+                      onChange={(assigneeIds) => {
+                        onChange(assigneeIds);
+                        handleFormChange();
+                      }}
+                      buttonVariant={value?.length > 0 ? "transparent-without-text" : "border-with-text"}
+                      buttonClassName={value?.length > 0 ? "hover:bg-transparent" : ""}
+                      placeholder="Assignees"
+                      multiple
+                      tabIndex={getTabIndex("assignee_ids")}
+                    />
+                  </div>
+                )}
+              />
+              <Controller
+                control={control}
+                name="label_ids"
+                render={({ field: { value, onChange } }) => (
+                  <div className="h-7">
+                    <IssueLabelSelect
+                      setIsOpen={setLabelModal}
+                      value={value}
+                      onChange={(labelIds) => {
+                        onChange(labelIds);
+                        handleFormChange();
+                      }}
+                      projectId={projectId}
+                      tabIndex={getTabIndex("label_ids")}
+                    />
+                  </div>
+                )}
+              />
+              <Controller
+                control={control}
+                name="start_date"
+                render={({ field: { value, onChange } }) => (
+                  <div className="h-7">
+                    <DateDropdown
+                      value={value}
+                      onChange={(date) => onChange(date ? renderFormattedPayloadDate(date) : null)}
+                      buttonVariant="border-with-text"
+                      maxDate={maxDate ?? undefined}
+                      placeholder="Start date"
+                      tabIndex={getTabIndex("start_date")}
+                    />
+                  </div>
+                )}
+              />
+              <Controller
+                control={control}
+                name="target_date"
+                render={({ field: { value, onChange } }) => (
+                  <div className="h-7">
+                    <DateDropdown
+                      value={value}
+                      onChange={(date) => onChange(date ? renderFormattedPayloadDate(date) : null)}
+                      buttonVariant="border-with-text"
+                      minDate={minDate ?? undefined}
+                      placeholder="Due date"
+                      tabIndex={getTabIndex("target_date")}
+                    />
+                  </div>
+                )}
+              />
+              {projectDetails?.cycle_view && (
+                <Controller
+                  control={control}
+                  name="cycle_id"
+                  render={({ field: { value, onChange } }) => (
+                    <div className="h-7">
+                      <CycleDropdown
+                        projectId={projectId}
+                        onChange={(cycleId) => {
+                          onChange(cycleId);
+                          handleFormChange();
+                        }}
+                        placeholder="Cycle"
+                        value={value}
+                        buttonVariant="border-with-text"
+                        tabIndex={getTabIndex("cycle_id")}
+                      />
+                    </div>
                   )}
                 />
-              </div>
+              )}
+              {projectDetails?.module_view && workspaceSlug && (
+                <Controller
+                  control={control}
+                  name="module_ids"
+                  render={({ field: { value, onChange } }) => (
+                    <div className="h-7">
+                      <ModuleDropdown
+                        projectId={projectId}
+                        value={value ?? []}
+                        onChange={(moduleIds) => {
+                          onChange(moduleIds);
+                          handleFormChange();
+                        }}
+                        placeholder="Modules"
+                        buttonVariant="border-with-text"
+                        tabIndex={getTabIndex("module_ids")}
+                        multiple
+                        showCount
+                      />
+                    </div>
+                  )}
+                />
+              )}
+              {areEstimatesEnabledForProject(projectId) && (
+                <Controller
+                  control={control}
+                  name="estimate_point"
+                  render={({ field: { value, onChange } }) => (
+                    <div className="h-7">
+                      <EstimateDropdown
+                        value={value}
+                        onChange={(estimatePoint) => {
+                          onChange(estimatePoint);
+                          handleFormChange();
+                        }}
+                        projectId={projectId}
+                        buttonVariant="border-with-text"
+                        tabIndex={getTabIndex("estimate_point")}
+                        placeholder="Estimate"
+                      />
+                    </div>
+                  )}
+                />
+              )}
+              {watch("parent_id") ? (
+                <CustomMenu
+                  customButton={
+                    <button
+                      type="button"
+                      className="flex cursor-pointer items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1.5 text-xs hover:bg-custom-background-80"
+                    >
+                      <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
+                      <span className="whitespace-nowrap">
+                        {selectedParentIssue &&
+                          `${selectedParentIssue.project__identifier}-${selectedParentIssue.sequence_id}`}
+                      </span>
+                    </button>
+                  }
+                  placement="bottom-start"
+                  tabIndex={getTabIndex("parent_id")}
+                >
+                  <>
+                    <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
+                      Change parent issue
+                    </CustomMenu.MenuItem>
+                    <Controller
+                      control={control}
+                      name="parent_id"
+                      render={({ field: { onChange } }) => (
+                        <CustomMenu.MenuItem
+                          className="!p-1"
+                          onClick={() => {
+                            onChange(null);
+                            handleFormChange();
+                          }}
+                        >
+                          Remove parent issue
+                        </CustomMenu.MenuItem>
+                      )}
+                    />
+                  </>
+                </CustomMenu>
+              ) : (
+                <button
+                  type="button"
+                  className="flex cursor-pointer items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1.5 text-xs hover:bg-custom-background-80"
+                  onClick={() => setParentIssueListModalOpen(true)}
+                >
+                  <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
+                  <span className="whitespace-nowrap">Add parent</span>
+                </button>
+              )}
+              <Controller
+                control={control}
+                name="parent_id"
+                render={({ field: { onChange } }) => (
+                  <ParentIssuesListModal
+                    isOpen={parentIssueListModalOpen}
+                    handleClose={() => setParentIssueListModalOpen(false)}
+                    onChange={(issue) => {
+                      onChange(issue.id);
+                      handleFormChange();
+                      setSelectedParentIssue(issue);
+                    }}
+                    projectId={projectId}
+                    issueId={isDraft ? undefined : data?.id}
+                  />
+                )}
+              />
             </div>
           </div>
         </div>
-        <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-100 px-5 pt-5">
+        <div className="px-5 py-4 flex items-center justify-between gap-2 border-t-[0.5px] border-custom-border-200">
           <div>
             {!data?.id && (
               <div
-                className="inline-flex cursor-default items-center gap-1.5"
+                className="inline-flex items-center gap-1.5 cursor-pointer"
                 onClick={() => onCreateMoreToggleChange(!isCreateMoreToggleEnabled)}
                 onKeyDown={(e) => {
                   if (e.key === "Enter") onCreateMoreToggleChange(!isCreateMoreToggleEnabled);
                 }}
                 tabIndex={getTabIndex("create_more")}
+                role="button"
               >
-                <div className="flex cursor-pointer items-center justify-center">
-                  <ToggleSwitch value={isCreateMoreToggleEnabled} onChange={() => {}} size="sm" />
-                </div>
+                <ToggleSwitch value={isCreateMoreToggleEnabled} onChange={() => {}} size="sm" />
                 <span className="text-xs">Create more</span>
               </div>
             )}
           </div>
-
           <div className="flex items-center gap-2">
             <Button variant="neutral-primary" size="sm" onClick={onClose} tabIndex={getTabIndex("discard_button")}>
               Discard
             </Button>
-
             {isDraft && (
-              <Fragment>
+              <>
                 {data?.id ? (
                   <Button
                     variant="neutral-primary"
@@ -775,9 +769,8 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                     {isSubmitting ? "Saving" : "Save as draft"}
                   </Button>
                 )}
-              </Fragment>
+              </>
             )}
-
             <Button
               variant="primary"
               type="submit"
@@ -785,7 +778,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
               loading={isSubmitting}
               tabIndex={isDraft ? getTabIndex("submit_button") : getTabIndex("draft_button")}
             >
-              {data?.id ? (isSubmitting ? "Updating" : "Update issue") : isSubmitting ? "Creating" : "Create issue"}
+              {data?.id ? (isSubmitting ? "Updating" : "Update Issue") : isSubmitting ? "Creating" : "Create Issue"}
             </Button>
           </div>
         </div>
diff --git a/web/components/issues/issue-modal/modal.tsx b/web/components/issues/issue-modal/modal.tsx
index 0757d06c7..adb41ce87 100644
--- a/web/components/issues/issue-modal/modal.tsx
+++ b/web/components/issues/issue-modal/modal.tsx
@@ -1,13 +1,16 @@
 import React, { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
-import { Dialog, Transition } from "@headlessui/react";
+// types
 import type { TIssue } from "@plane/types";
-// hooks
+// ui
 import { TOAST_TYPE, setToast } from "@plane/ui";
-
+// components
+import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
+// constants
 import { ISSUE_CREATED, ISSUE_UPDATED } from "@/constants/event-tracker";
 import { EIssuesStoreType } from "@/constants/issue";
+// hooks
 import {
   useApplication,
   useEventTracker,
@@ -22,9 +25,6 @@ import useLocalStorage from "@/hooks/use-local-storage";
 // components
 import { DraftIssueLayout } from "./draft-issue-layout";
 import { IssueFormRoot } from "./form";
-// ui
-// types
-// constants
 
 export interface IssuesModalProps {
   data?: Partial<TIssue>;
@@ -241,72 +241,47 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
   if (!workspaceProjectIds || workspaceProjectIds.length === 0 || !activeProjectId) return null;
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={() => handleClose(true)}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative mx-4 transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-4xl">
-                {withDraftIssueWrapper ? (
-                  <DraftIssueLayout
-                    changesMade={changesMade}
-                    data={{
-                      ...data,
-                      description_html: description,
-                      cycle_id: data?.cycle_id ? data?.cycle_id : cycleId ? cycleId : null,
-                      module_ids: data?.module_ids ? data?.module_ids : moduleId ? [moduleId] : null,
-                    }}
-                    issueTitleRef={issueTitleRef}
-                    onChange={handleFormChange}
-                    onClose={handleClose}
-                    onSubmit={handleFormSubmit}
-                    projectId={activeProjectId}
-                    isCreateMoreToggleEnabled={createMore}
-                    onCreateMoreToggleChange={handleCreateMoreToggleChange}
-                    isDraft={isDraft}
-                  />
-                ) : (
-                  <IssueFormRoot
-                    issueTitleRef={issueTitleRef}
-                    data={{
-                      ...data,
-                      description_html: description,
-                      cycle_id: data?.cycle_id ? data?.cycle_id : cycleId ? cycleId : null,
-                      module_ids: data?.module_ids ? data?.module_ids : moduleId ? [moduleId] : null,
-                    }}
-                    onClose={() => handleClose(false)}
-                    isCreateMoreToggleEnabled={createMore}
-                    onCreateMoreToggleChange={handleCreateMoreToggleChange}
-                    onSubmit={handleFormSubmit}
-                    projectId={activeProjectId}
-                    isDraft={isDraft}
-                  />
-                )}
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <ModalCore
+      isOpen={isOpen}
+      handleClose={() => handleClose(true)}
+      position={EModalPosition.TOP}
+      width={EModalWidth.XXXXL}
+    >
+      {withDraftIssueWrapper ? (
+        <DraftIssueLayout
+          changesMade={changesMade}
+          data={{
+            ...data,
+            description_html: description,
+            cycle_id: data?.cycle_id ? data?.cycle_id : cycleId ? cycleId : null,
+            module_ids: data?.module_ids ? data?.module_ids : moduleId ? [moduleId] : null,
+          }}
+          issueTitleRef={issueTitleRef}
+          onChange={handleFormChange}
+          onClose={handleClose}
+          onSubmit={handleFormSubmit}
+          projectId={activeProjectId}
+          isCreateMoreToggleEnabled={createMore}
+          onCreateMoreToggleChange={handleCreateMoreToggleChange}
+          isDraft={isDraft}
+        />
+      ) : (
+        <IssueFormRoot
+          issueTitleRef={issueTitleRef}
+          data={{
+            ...data,
+            description_html: description,
+            cycle_id: data?.cycle_id ? data?.cycle_id : cycleId ? cycleId : null,
+            module_ids: data?.module_ids ? data?.module_ids : moduleId ? [moduleId] : null,
+          }}
+          onClose={() => handleClose(false)}
+          isCreateMoreToggleEnabled={createMore}
+          onCreateMoreToggleChange={handleCreateMoreToggleChange}
+          onSubmit={handleFormSubmit}
+          projectId={activeProjectId}
+          isDraft={isDraft}
+        />
+      )}
+    </ModalCore>
   );
 });
diff --git a/web/components/labels/delete-label-modal.tsx b/web/components/labels/delete-label-modal.tsx
index 6eff9f8db..3ef26f42f 100644
--- a/web/components/labels/delete-label-modal.tsx
+++ b/web/components/labels/delete-label-modal.tsx
@@ -1,15 +1,14 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
-import { AlertTriangle } from "lucide-react";
-import { Dialog, Transition } from "@headlessui/react";
-// hooks
-import type { IIssueLabel } from "@plane/types";
-import { Button, TOAST_TYPE, setToast } from "@plane/ui";
-import { useLabel } from "@/hooks/store";
-// icons
-// ui
 // types
+import type { IIssueLabel } from "@plane/types";
+// ui
+import { TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { AlertModalCore } from "@/components/core";
+// hooks
+import { useLabel } from "@/hooks/store";
 
 type Props = {
   isOpen: boolean;
@@ -54,64 +53,18 @@ export const DeleteLabelModal: React.FC<Props> = observer((props) => {
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
-                <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
-                  <div className="sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
-                    </div>
-                    <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
-                        Delete Label
-                      </Dialog.Title>
-                      <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
-                          Are you sure you wish to delete{" "}
-                          <span className="font-medium text-custom-text-100">{data?.name}</span>? This will remove the
-                          label from all the issue and from any views where the label is being filtered upon.
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                    Cancel
-                  </Button>
-                  <Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}>
-                    {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </Button>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={handleDeletion}
+      isDeleting={isDeleteLoading}
+      isOpen={isOpen}
+      title="Delete Label"
+      content={
+        <>
+          Are you sure you want to delete <span className="font-medium text-custom-text-100">{data?.name}</span>? This
+          will remove the label from all the issue and from any views where the label is being filtered upon.
+        </>
+      }
+    />
   );
 });
diff --git a/web/components/modules/delete-module-modal.tsx b/web/components/modules/delete-module-modal.tsx
index 57b9d97a7..6ea500f0e 100644
--- a/web/components/modules/delete-module-modal.tsx
+++ b/web/components/modules/delete-module-modal.tsx
@@ -1,17 +1,16 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
-import { AlertTriangle } from "lucide-react";
-import { Dialog, Transition } from "@headlessui/react";
-// hooks
-import type { IModule } from "@plane/types";
-import { Button, TOAST_TYPE, setToast } from "@plane/ui";
-import { MODULE_DELETED } from "@/constants/event-tracker";
-import { useEventTracker, useModule } from "@/hooks/store";
-// ui
-// icons
 // types
+import type { IModule } from "@plane/types";
+// ui
+import { TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { AlertModalCore } from "@/components/core";
 // constants
+import { MODULE_DELETED } from "@/constants/event-tracker";
+// hooks
+import { useEventTracker, useModule } from "@/hooks/store";
 
 type Props = {
   data: IModule;
@@ -71,64 +70,19 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
-                <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
-                  <div className="sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
-                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
-                    </div>
-                    <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
-                        Delete Module
-                      </Dialog.Title>
-                      <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
-                          Are you sure you want to delete module-{" "}
-                          <span className="break-all font-medium text-custom-text-100">{data?.name}</span>? All of the
-                          data related to the module will be permanently removed. This action cannot be undone.
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                    Cancel
-                  </Button>
-                  <Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}>
-                    {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </Button>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={handleDeletion}
+      isDeleting={isDeleteLoading}
+      isOpen={isOpen}
+      title="Delete Module"
+      content={
+        <>
+          Are you sure you want to delete module-{" "}
+          <span className="break-all font-medium text-custom-text-100">{data?.name}</span>? All of the data related to
+          the module will be permanently removed. This action cannot be undone.
+        </>
+      }
+    />
   );
 });
diff --git a/web/components/modules/form.tsx b/web/components/modules/form.tsx
index d49a070b1..6e8607d6a 100644
--- a/web/components/modules/form.tsx
+++ b/web/components/modules/form.tsx
@@ -64,7 +64,7 @@ export const ModuleForm: React.FC<Props> = (props) => {
 
   return (
     <form onSubmit={handleSubmit(handleCreateUpdateModule)}>
-      <div className="space-y-5">
+      <div className="space-y-5 p-5">
         <div className="flex items-center gap-x-3">
           {!status && (
             <Controller
@@ -86,11 +86,10 @@ export const ModuleForm: React.FC<Props> = (props) => {
               )}
             />
           )}
-          <h3 className="text-xl font-medium leading-6 text-custom-text-200">{status ? "Update" : "New"} Module</h3>
+          <h3 className="text-xl font-medium text-custom-text-200">{status ? "Update" : "Create"} Module</h3>
         </div>
-
         <div className="space-y-3">
-          <div className="flex flex-col gap-1">
+          <div className="space-y-1">
             <Controller
               control={control}
               name="name"
@@ -101,18 +100,18 @@ export const ModuleForm: React.FC<Props> = (props) => {
                   message: "Title should be less than 255 characters",
                 },
               }}
-              render={({ field: { value, onChange, ref } }) => (
+              render={({ field: { value, onChange } }) => (
                 <Input
                   id="name"
                   name="name"
                   type="text"
                   value={value}
                   onChange={onChange}
-                  ref={ref}
                   hasError={Boolean(errors?.name)}
-                  placeholder="Module Title"
-                  className="w-full resize-none placeholder:text-sm placeholder:font-medium focus:border-blue-400"
+                  placeholder="Title"
+                  className="w-full text-base"
                   tabIndex={1}
+                  autoFocus
                 />
               )}
             />
@@ -128,8 +127,8 @@ export const ModuleForm: React.FC<Props> = (props) => {
                   name="description"
                   value={value}
                   onChange={onChange}
-                  placeholder="Description..."
-                  className="w-full text-sm resize-none min-h-24"
+                  placeholder="Description"
+                  className="w-full text-base resize-none min-h-24"
                   hasError={Boolean(errors?.description)}
                   tabIndex={2}
                 />
@@ -211,12 +210,12 @@ export const ModuleForm: 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-200 pt-5">
+      <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
         <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={7}>
           Cancel
         </Button>
         <Button variant="primary" size="sm" type="submit" loading={isSubmitting} tabIndex={8}>
-          {status ? (isSubmitting ? "Updating" : "Update module") : isSubmitting ? "Creating" : "Create module"}
+          {status ? (isSubmitting ? "Updating" : "Update Module") : isSubmitting ? "Creating" : "Create Module"}
         </Button>
       </div>
     </form>
diff --git a/web/components/modules/modal.tsx b/web/components/modules/modal.tsx
index 89ae7f321..cde5de410 100644
--- a/web/components/modules/modal.tsx
+++ b/web/components/modules/modal.tsx
@@ -1,17 +1,17 @@
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useForm } from "react-hook-form";
-import { Dialog, Transition } from "@headlessui/react";
+// types
 import type { IModule } from "@plane/types";
-// components
+// ui
 import { TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
 import { ModuleForm } from "@/components/modules";
+// constants
 import { MODULE_CREATED, MODULE_UPDATED } from "@/constants/event-tracker";
 // hooks
 import { useEventTracker, useModule, useProject } from "@/hooks/store";
-// ui
-// components
-// types
 
 type Props = {
   isOpen: boolean;
@@ -140,45 +140,15 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
   }, [activeProject, data, projectId, workspaceProjectIds, isOpen]);
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl">
-                <ModuleForm
-                  handleFormSubmit={handleFormSubmit}
-                  handleClose={handleClose}
-                  status={data ? true : false}
-                  projectId={activeProject ?? ""}
-                  setActiveProject={setActiveProject}
-                  data={data}
-                />
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+      <ModuleForm
+        handleFormSubmit={handleFormSubmit}
+        handleClose={handleClose}
+        status={data ? true : false}
+        projectId={activeProject ?? ""}
+        setActiveProject={setActiveProject}
+        data={data}
+      />
+    </ModalCore>
   );
 });
diff --git a/web/components/pages/modals/create-page-modal.tsx b/web/components/pages/modals/create-page-modal.tsx
index 01ccfb079..cbc42437f 100644
--- a/web/components/pages/modals/create-page-modal.tsx
+++ b/web/components/pages/modals/create-page-modal.tsx
@@ -1,9 +1,9 @@
-import { FC, Fragment, useState } from "react";
+import { FC, useState } from "react";
 import { useRouter } from "next/router";
-import { Dialog, Transition } from "@headlessui/react";
 // types
 import { TPage } from "@plane/types";
 // components
+import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
 import { PageForm } from "@/components/pages";
 // constants
 import { PAGE_CREATED } from "@/constants/event-tracker";
@@ -67,43 +67,18 @@ export const CreatePageModal: FC<Props> = (props) => {
   };
 
   return (
-    <Transition.Root show={isModalOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleModalClose}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="my-10 flex justify-center p-4 text-center sm:p-0 md:my-20">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 px-4 text-left shadow-custom-shadow-md transition-all w-full sm:max-w-2xl">
-                <PageForm
-                  formData={pageFormData}
-                  handleFormData={handlePageFormData}
-                  handleModalClose={handleStateClear}
-                  handleFormSubmit={handleFormSubmit}
-                />
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <ModalCore
+      isOpen={isModalOpen}
+      handleClose={handleModalClose}
+      position={EModalPosition.TOP}
+      width={EModalWidth.XXL}
+    >
+      <PageForm
+        formData={pageFormData}
+        handleFormData={handlePageFormData}
+        handleModalClose={handleStateClear}
+        handleFormSubmit={handleFormSubmit}
+      />
+    </ModalCore>
   );
 };
diff --git a/web/components/pages/modals/delete-page-modal.tsx b/web/components/pages/modals/delete-page-modal.tsx
index 009ff9ab8..6e72d6eaf 100644
--- a/web/components/pages/modals/delete-page-modal.tsx
+++ b/web/components/pages/modals/delete-page-modal.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
-import { AlertTriangle } from "lucide-react";
-import { Dialog, Transition } from "@headlessui/react";
 // ui
-import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { AlertModalCore } from "@/components/core";
 // constants
 import { PAGE_DELETED } from "@/constants/event-tracker";
 // hooks
@@ -71,64 +71,19 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((pr
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
-                <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
-                  <div className="sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
-                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
-                    </div>
-                    <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
-                        Delete Page
-                      </Dialog.Title>
-                      <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
-                          Are you sure you want to delete page-{" "}
-                          <span className="break-words font-medium text-custom-text-100">{name}</span>? The Page will be
-                          deleted permanently. This action cannot be undone.
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                    Cancel
-                  </Button>
-                  <Button variant="danger" size="sm" tabIndex={1} onClick={handleDelete} loading={isDeleting}>
-                    {isDeleting ? "Deleting..." : "Delete"}
-                  </Button>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={handleDelete}
+      isDeleting={isDeleting}
+      isOpen={isOpen}
+      title="Delete Page"
+      content={
+        <>
+          Are you sure you want to delete page-{" "}
+          <span className="break-words font-medium text-custom-text-100">{name}</span>? The Page will be deleted
+          permanently. This action cannot be undone.
+        </>
+      }
+    />
   );
 });
diff --git a/web/components/pages/modals/page-form.tsx b/web/components/pages/modals/page-form.tsx
index 2a3ad8380..36b470bb8 100644
--- a/web/components/pages/modals/page-form.tsx
+++ b/web/components/pages/modals/page-form.tsx
@@ -39,28 +39,27 @@ export const PageForm: React.FC<Props> = (props) => {
 
   return (
     <form onSubmit={handlePageFormSubmit}>
-      <div className="space-y-4">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">Create Page</h3>
-
-        <div className="space-y-2">
+      <div className="space-y-5 p-5">
+        <h3 className="text-xl font-medium text-custom-text-200">Create Page</h3>
+        <div className="space-y-1">
           <Input
             id="name"
             type="text"
             value={formData.name}
             onChange={(e) => handleFormData("name", e.target.value)}
             placeholder="Title"
-            className="w-full resize-none text-lg"
+            className="w-full resize-none text-base"
             tabIndex={1}
             required
+            autoFocus
           />
           {isTitleLengthMoreThan255Character && (
             <span className="text-xs text-red-500">Max length of the name should be less than 255 characters</span>
           )}
         </div>
       </div>
-
-      <div className="mt-5 relative flex items-center justify-between gap-2">
-        <div className="relative flex items-center gap-2">
+      <div className="px-5 py-4 flex items-center justify-between gap-2 border-t-[0.5px] border-custom-border-200">
+        <div className="flex items-center gap-2">
           <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded border-[0.5px] border-custom-border-200 p-1">
             {PAGE_ACCESS_SPECIFIERS.map((access, index) => (
               <Tooltip key={access.key} tooltipContent={access.label} isMobile={isMobile}>
@@ -88,8 +87,7 @@ export const PageForm: React.FC<Props> = (props) => {
             {PAGE_ACCESS_SPECIFIERS.find((access) => access.key === formData.access)?.label}
           </h6>
         </div>
-
-        <div className="relative flex items-center gap-2 justify-end">
+        <div className="flex items-center justify-end gap-2">
           <Button variant="neutral-primary" size="sm" onClick={handleModalClose} tabIndex={4}>
             Cancel
           </Button>
diff --git a/web/components/states/delete-state-modal.tsx b/web/components/states/delete-state-modal.tsx
index f73699af5..8d800e428 100644
--- a/web/components/states/delete-state-modal.tsx
+++ b/web/components/states/delete-state-modal.tsx
@@ -1,16 +1,16 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
-import { AlertTriangle } from "lucide-react";
-import { Dialog, Transition } from "@headlessui/react";
+// types
 import type { IState } from "@plane/types";
 // ui
-import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { AlertModalCore } from "@/components/core";
 // constants
 import { STATE_DELETED } from "@/constants/event-tracker";
 // hooks
 import { useEventTracker, useProjectState } from "@/hooks/store";
-// types
 
 type Props = {
   isOpen: boolean;
@@ -78,64 +78,18 @@ export const DeleteStateModal: React.FC<Props> = observer((props) => {
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
-                <div className="bg-custom-background-100 px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
-                  <div className="sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
-                    </div>
-                    <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
-                        Delete State
-                      </Dialog.Title>
-                      <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
-                          Are you sure you want to delete state-{" "}
-                          <span className="font-medium text-custom-text-100">{data?.name}</span>? All of the data
-                          related to the state will be permanently removed. This action cannot be undone.
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex justify-end gap-2 bg-custom-background-100 p-4 sm:px-6">
-                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                    Cancel
-                  </Button>
-                  <Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}>
-                    {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </Button>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={handleDeletion}
+      isDeleting={isDeleteLoading}
+      isOpen={isOpen}
+      title="Delete State"
+      content={
+        <>
+          Are you sure you want to delete state- <span className="font-medium text-custom-text-100">{data?.name}</span>?
+          All of the data related to the state will be permanently removed. This action cannot be undone.
+        </>
+      }
+    />
   );
 });
diff --git a/web/components/views/delete-view-modal.tsx b/web/components/views/delete-view-modal.tsx
index 1c8998e00..00881cb4b 100644
--- a/web/components/views/delete-view-modal.tsx
+++ b/web/components/views/delete-view-modal.tsx
@@ -1,14 +1,14 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
-import { AlertTriangle } from "lucide-react";
-import { Dialog, Transition } from "@headlessui/react";
+// types
 import { IProjectView } from "@plane/types";
 // ui
-import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { AlertModalCore } from "@/components/core";
 // hooks
 import { useProjectView } from "@/hooks/store";
-// types
 
 type Props = {
   data: IProjectView;
@@ -59,64 +59,19 @@ export const DeleteProjectViewModal: React.FC<Props> = observer((props) => {
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
-                <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
-                  <div className="sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
-                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
-                    </div>
-                    <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
-                        Delete View
-                      </Dialog.Title>
-                      <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
-                          Are you sure you want to delete view-{" "}
-                          <span className="break-all font-medium text-custom-text-100">{data?.name}</span>? All of the
-                          data related to the view will be permanently removed. This action cannot be undone.
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                    Cancel
-                  </Button>
-                  <Button variant="danger" size="sm" tabIndex={1} onClick={handleDeleteView}>
-                    {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </Button>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={handleDeleteView}
+      isDeleting={isDeleteLoading}
+      isOpen={isOpen}
+      title="Delete View"
+      content={
+        <>
+          Are you sure you want to delete view-{" "}
+          <span className="break-all font-medium text-custom-text-100">{data?.name}</span>? All of the data related to
+          the view will be permanently removed. This action cannot be undone.
+        </>
+      }
+    />
   );
 });
diff --git a/web/components/views/form.tsx b/web/components/views/form.tsx
index 84405eb0d..3a70cd77b 100644
--- a/web/components/views/form.tsx
+++ b/web/components/views/form.tsx
@@ -1,16 +1,16 @@
 import { useEffect } from "react";
 import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
-import { IProjectView, IIssueFilterOptions } from "@plane/types";
-// hooks
-import { Button, Input, TextArea } from "@plane/ui";
-import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "@/components/issues";
-import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
-import { useLabel, useMember, useProject, useProjectState } from "@/hooks/store";
-// components
-// ui
 // types
+import { IProjectView, IIssueFilterOptions } from "@plane/types";
+// ui
+import { Button, Input, TextArea } from "@plane/ui";
+// components
+import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "@/components/issues";
 // constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
+// hooks
+import { useLabel, useMember, useProject, useProjectState } from "@/hooks/store";
 
 type Props = {
   data?: IProjectView | null;
@@ -109,10 +109,10 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
 
   return (
     <form onSubmit={handleSubmit(handleCreateUpdateView)}>
-      <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">{data ? "Update" : "Create"} View</h3>
+      <div className="space-y-5 p-5">
+        <h3 className="text-xl font-medium text-custom-text-200">{data ? "Update" : "Create"} View</h3>
         <div className="space-y-3">
-          <div className="flex flex-col gap-1">
+          <div className="space-y-1">
             <Controller
               control={control}
               name="name"
@@ -132,8 +132,9 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
                   onChange={onChange}
                   hasError={Boolean(errors.name)}
                   placeholder="Title"
-                  className="w-full resize-none text-xl focus:border-blue-400"
+                  className="w-full text-base"
                   tabIndex={1}
+                  autoFocus
                 />
               )}
             />
@@ -148,7 +149,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
                   id="description"
                   name="description"
                   placeholder="Description"
-                  className="min-h-24 w-full resize-none text-sm"
+                  className="w-full text-base resize-none min-h-24"
                   hasError={Boolean(errors?.description)}
                   value={value}
                   onChange={onChange}
@@ -206,18 +207,12 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
           )}
         </div>
       </div>
-      <div className="mt-5 flex justify-end gap-2">
+      <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
         <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={4}>
           Cancel
         </Button>
-        <Button variant="primary" size="sm" type="submit" tabIndex={5} disabled={isSubmitting}>
-          {data
-            ? isSubmitting
-              ? "Updating View..."
-              : "Update View"
-            : isSubmitting
-              ? "Creating View..."
-              : "Create View"}
+        <Button variant="primary" size="sm" type="submit" tabIndex={5} loading={isSubmitting}>
+          {data ? (isSubmitting ? "Updating" : "Update View") : isSubmitting ? "Creating" : "Create View"}
         </Button>
       </div>
     </form>
diff --git a/web/components/views/modal.tsx b/web/components/views/modal.tsx
index 6e30a76ec..c08782869 100644
--- a/web/components/views/modal.tsx
+++ b/web/components/views/modal.tsx
@@ -1,14 +1,14 @@
-import { FC, Fragment } from "react";
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
-import { Dialog, Transition } from "@headlessui/react";
+// types
 import { IProjectView } from "@plane/types";
 // ui
 import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
+import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
 import { ProjectViewForm } from "@/components/views";
 // hooks
 import { useProjectView } from "@/hooks/store";
-// types
 
 type Props = {
   data?: IProjectView | null;
@@ -65,43 +65,13 @@ export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
   };
 
   return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
-                <ProjectViewForm
-                  data={data}
-                  handleClose={handleClose}
-                  handleFormSubmit={handleFormSubmit}
-                  preLoadedData={preLoadedData}
-                />
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+      <ProjectViewForm
+        data={data}
+        handleClose={handleClose}
+        handleFormSubmit={handleFormSubmit}
+        preLoadedData={preLoadedData}
+      />
+    </ModalCore>
   );
 });
diff --git a/web/components/web-hooks/create-webhook-modal.tsx b/web/components/web-hooks/create-webhook-modal.tsx
index fbe7b8c89..99c14d493 100644
--- a/web/components/web-hooks/create-webhook-modal.tsx
+++ b/web/components/web-hooks/create-webhook-modal.tsx
@@ -1,18 +1,18 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
-// ui
-import { Dialog, Transition } from "@headlessui/react";
+// types
 import { IWebhook, IWorkspace, TWebhookEventTypes } from "@plane/types";
+// ui
 import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
+import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
 // helpers
 import { csvDownload } from "@/helpers/download.helper";
-// types
+// components
 import { WebhookForm } from "./form";
 import { GeneratedHookDetails } from "./generated-hook-details";
 // utils
 import { getCurrentHookAsCSV } from "./utils";
-// ui
 
 interface ICreateWebhookModal {
   currentWorkspace: IWorkspace | null;
@@ -93,48 +93,19 @@ export const CreateWebhookModal: React.FC<ICreateWebhookModal> = (props) => {
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-20"
-        onClose={() => {
-          if (!generatedWebhook) handleClose();
-        }}
-      >
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 p-6 text-left shadow-xl transition-all sm:my-8 w-full sm:max-w-2xl">
-                {!generatedWebhook ? (
-                  <WebhookForm onSubmit={handleCreateWebhook} handleClose={handleClose} />
-                ) : (
-                  <GeneratedHookDetails webhookDetails={generatedWebhook} handleClose={handleClose} />
-                )}
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <ModalCore
+      isOpen={isOpen}
+      handleClose={() => {
+        if (!generatedWebhook) handleClose();
+      }}
+      position={EModalPosition.TOP}
+      width={EModalWidth.XXL}
+    >
+      {!generatedWebhook ? (
+        <WebhookForm onSubmit={handleCreateWebhook} handleClose={handleClose} />
+      ) : (
+        <GeneratedHookDetails webhookDetails={generatedWebhook} handleClose={handleClose} />
+      )}
+    </ModalCore>
   );
 };
diff --git a/web/components/web-hooks/delete-webhook-modal.tsx b/web/components/web-hooks/delete-webhook-modal.tsx
index 4b1cbad34..9a579afd8 100644
--- a/web/components/web-hooks/delete-webhook-modal.tsx
+++ b/web/components/web-hooks/delete-webhook-modal.tsx
@@ -1,9 +1,9 @@
 import React, { FC, useState } from "react";
 import { useRouter } from "next/router";
-import { AlertTriangle } from "lucide-react";
-import { Dialog, Transition } from "@headlessui/react";
 // ui
-import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { AlertModalCore } from "@/components/core";
 // hooks
 import { useWebhook } from "@/hooks/store";
 
@@ -52,59 +52,18 @@ export const DeleteWebhookModal: FC<IDeleteWebhook> = (props) => {
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 p-6 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
-                <div className="flex w-full items-center justify-start gap-6">
-                  <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                    <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
-                  </span>
-                  <span className="flex items-center justify-start">
-                    <h3 className="text-xl font-medium 2xl:text-2xl">Delete webhook</h3>
-                  </span>
-                </div>
-
-                <p className="mt-4 text-sm text-custom-text-200">
-                  Are you sure you want to delete this webhook? Future events will not be delivered to this webhook.
-                  This action cannot be undone.
-                </p>
-
-                <div className="flex justify-end gap-2">
-                  <Button variant="neutral-primary" onClick={onClose}>
-                    Cancel
-                  </Button>
-                  <Button variant="danger" onClick={handleDelete} loading={isDeleting}>
-                    {isDeleting ? "Deleting..." : "Delete webhook"}
-                  </Button>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={handleDelete}
+      isDeleting={isDeleting}
+      isOpen={isOpen}
+      title="Delete webhook"
+      content={
+        <>
+          Are you sure you want to delete this webhook? Future events will not be delivered to this webhook. This action
+          cannot be undone.
+        </>
+      }
+    />
   );
 };
diff --git a/web/components/web-hooks/form/form.tsx b/web/components/web-hooks/form/form.tsx
index 68684eaee..8057545ae 100644
--- a/web/components/web-hooks/form/form.tsx
+++ b/web/components/web-hooks/form/form.tsx
@@ -58,11 +58,11 @@ export const WebhookForm: FC<Props> = observer((props) => {
   }, [data]);
 
   return (
-    <div className="space-y-6">
-      <div className="text-xl font-medium">{data ? "Webhook details" : "Create webhook"}</div>
-      <form onSubmit={handleSubmit(handleFormSubmit)}>
-        <div className="space-y-8">
-          <div>
+    <form onSubmit={handleSubmit(handleFormSubmit)}>
+      <div className="space-y-5 p-5">
+        <div className="text-xl font-medium text-custom-text-200">{data ? "Webhook details" : "Create webhook"}</div>
+        <div className="space-y-3">
+          <div className="space-y-1">
             <Controller
               control={control}
               name="url"
@@ -76,34 +76,31 @@ export const WebhookForm: FC<Props> = observer((props) => {
             {errors.url && <div className="text-xs text-red-500">{errors.url.message}</div>}
           </div>
           {data && <WebhookToggle control={control} />}
-          <div className="space-y-3">
-            <WebhookOptions value={webhookEventType} onChange={(val) => setWebhookEventType(val)} />
-          </div>
+          <WebhookOptions value={webhookEventType} onChange={(val) => setWebhookEventType(val)} />
         </div>
         <div className="mt-4">
           {webhookEventType === "individual" && <WebhookIndividualEventOptions control={control} />}
         </div>
-        {data ? (
-          <div className="mt-8 space-y-8">
-            <WebhookSecretKey data={data} />
-
-            <Button type="submit" loading={isSubmitting}>
-              {isSubmitting ? "Updating..." : "Update"}
+      </div>
+      {data ? (
+        <div className="p-5 pt-0 space-y-5">
+          <WebhookSecretKey data={data} />
+          <Button type="submit" loading={isSubmitting}>
+            {isSubmitting ? "Updating" : "Update"}
+          </Button>
+        </div>
+      ) : (
+        <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
+          <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+            Cancel
+          </Button>
+          {!webhookSecretKey && (
+            <Button type="submit" variant="primary" size="sm" loading={isSubmitting}>
+              {isSubmitting ? "Creating" : "Create"}
             </Button>
-          </div>
-        ) : (
-          <div className="mt-4 flex justify-end gap-2">
-            <Button variant="neutral-primary" onClick={handleClose}>
-              Discard
-            </Button>
-            {!webhookSecretKey && (
-              <Button type="submit" variant="primary" loading={isSubmitting}>
-                {isSubmitting ? "Creating..." : "Create"}
-              </Button>
-            )}
-          </div>
-        )}
-      </form>
-    </div>
+          )}
+        </div>
+      )}
+    </form>
   );
 });
diff --git a/web/components/web-hooks/generated-hook-details.tsx b/web/components/web-hooks/generated-hook-details.tsx
index cfb98e431..8a23ef6a5 100644
--- a/web/components/web-hooks/generated-hook-details.tsx
+++ b/web/components/web-hooks/generated-hook-details.tsx
@@ -14,20 +14,22 @@ export const GeneratedHookDetails: React.FC<Props> = (props) => {
   const { handleClose, webhookDetails } = props;
 
   return (
-    <div>
-      <div className="space-y-3 mb-3">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">Key created</h3>
-        <p className="text-sm text-custom-text-400">
-          Copy and save this secret key in Plane Pages. You can{"'"}t see this key after you hit Close. A CSV file
-          containing the key has been downloaded.
-        </p>
+    <>
+      <div className="space-y-5 p-5">
+        <div className="space-y-3">
+          <h3 className="text-xl font-medium text-custom-text-200">Key created</h3>
+          <p className="text-sm text-custom-text-400">
+            Copy and save this secret key in Plane Pages. You can{"'"}t see this key after you hit Close. A CSV file
+            containing the key has been downloaded.
+          </p>
+        </div>
+        <WebhookSecretKey data={webhookDetails} />
       </div>
-      <WebhookSecretKey data={webhookDetails} />
-      <div className="mt-6 flex justify-end">
+      <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
         <Button variant="neutral-primary" size="sm" onClick={handleClose}>
           Close
         </Button>
       </div>
-    </div>
+    </>
   );
 };
diff --git a/web/components/workspace/views/delete-view-modal.tsx b/web/components/workspace/views/delete-view-modal.tsx
index cd222dd26..5cfebc547 100644
--- a/web/components/workspace/views/delete-view-modal.tsx
+++ b/web/components/workspace/views/delete-view-modal.tsx
@@ -1,19 +1,16 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
-// ui
-import { AlertTriangle } from "lucide-react";
-import { Dialog, Transition } from "@headlessui/react";
-// icons
+// types
 import { IWorkspaceView } from "@plane/types";
 // ui
-import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { AlertModalCore } from "@/components/core";
 // constants
 import { GLOBAL_VIEW_DELETED } from "@/constants/event-tracker";
-// store hooks
+// hooks
 import { useGlobalView, useEventTracker } from "@/hooks/store";
-// ui
-// types
 
 type Props = {
   data: IWorkspaceView;
@@ -32,9 +29,7 @@ export const DeleteGlobalViewModal: React.FC<Props> = observer((props) => {
   const { deleteGlobalView } = useGlobalView();
   const { captureEvent } = useEventTracker();
 
-  const handleClose = () => {
-    onClose();
-  };
+  const handleClose = () => onClose();
 
   const handleDeletion = async () => {
     if (!workspaceSlug) return;
@@ -69,64 +64,19 @@ export const DeleteGlobalViewModal: React.FC<Props> = observer((props) => {
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
-                <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
-                  <div className="sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
-                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
-                    </div>
-                    <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
-                        Delete View
-                      </Dialog.Title>
-                      <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
-                          Are you sure you want to delete view-{" "}
-                          <span className="break-words font-medium text-custom-text-100">{data?.name}</span>? All of the
-                          data related to the view will be permanently removed. This action cannot be undone.
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                    Cancel
-                  </Button>
-                  <Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}>
-                    {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </Button>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={handleDeletion}
+      isDeleting={isDeleteLoading}
+      isOpen={isOpen}
+      title="Delete View"
+      content={
+        <>
+          Are you sure you want to delete view-{" "}
+          <span className="break-words font-medium text-custom-text-100">{data?.name}</span>? All of the data related to
+          the view will be permanently removed. This action cannot be undone.
+        </>
+      }
+    />
   );
 });
diff --git a/web/components/workspace/views/form.tsx b/web/components/workspace/views/form.tsx
index dfebf1db7..aa907ac8d 100644
--- a/web/components/workspace/views/form.tsx
+++ b/web/components/workspace/views/form.tsx
@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
+// types
 import { IIssueFilterOptions, IWorkspaceView } from "@plane/types";
 // ui
 import { Button, Input, TextArea } from "@plane/ui";
@@ -10,7 +11,6 @@ import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "@/componen
 import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
 // hooks
 import { useLabel, useMember } from "@/hooks/store";
-// types
 
 type Props = {
   handleFormSubmit: (values: Partial<IWorkspaceView>) => Promise<void>;
@@ -97,10 +97,10 @@ export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
 
   return (
     <form onSubmit={handleSubmit(handleCreateUpdateView)}>
-      <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">{data ? "Update" : "Create"} View</h3>
+      <div className="space-y-5 p-5">
+        <h3 className="text-xl font-medium text-custom-text-200">{data ? "Update" : "Create"} View</h3>
         <div className="space-y-3">
-          <div>
+          <div className="space-y-1">
             <Controller
               control={control}
               name="name"
@@ -121,10 +121,11 @@ export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
                   ref={ref}
                   hasError={Boolean(errors.name)}
                   placeholder="Title"
-                  className="w-full resize-none text-xl"
+                  className="w-full text-base"
                 />
               )}
             />
+            <span className="text-xs text-red-500">{errors?.name?.message}</span>
           </div>
           <div>
             <Controller
@@ -137,7 +138,7 @@ export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
                   value={value}
                   placeholder="Description"
                   onChange={onChange}
-                  className="min-h-24 w-full resize-none text-sm"
+                  className="w-full text-base resize-none min-h-24"
                   hasError={Boolean(errors?.description)}
                 />
               )}
@@ -190,18 +191,12 @@ export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
           )}
         </div>
       </div>
-      <div className="mt-5 flex justify-end gap-2">
+      <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
         <Button variant="neutral-primary" size="sm" onClick={handleClose}>
           Cancel
         </Button>
         <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
-          {data
-            ? isSubmitting
-              ? "Updating View..."
-              : "Update View"
-            : isSubmitting
-              ? "Creating View..."
-              : "Create View"}
+          {data ? (isSubmitting ? "Updating" : "Update View") : isSubmitting ? "Creating" : "Create View"}
         </Button>
       </div>
     </form>
diff --git a/web/components/workspace/views/modal.tsx b/web/components/workspace/views/modal.tsx
index 15f94ced5..83cf20fbf 100644
--- a/web/components/workspace/views/modal.tsx
+++ b/web/components/workspace/views/modal.tsx
@@ -1,17 +1,17 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
-import { Dialog, Transition } from "@headlessui/react";
+// types
 import { IWorkspaceView } from "@plane/types";
 // ui
 import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
+import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
 import { WorkspaceViewForm } from "@/components/workspace";
 // constants
 import { GLOBAL_VIEW_CREATED, GLOBAL_VIEW_UPDATED } from "@/constants/event-tracker";
 // store hooks
 import { useEventTracker, useGlobalView } from "@/hooks/store";
-// types
 
 type Props = {
   data?: IWorkspaceView;
@@ -120,43 +120,13 @@ export const CreateUpdateWorkspaceViewModal: React.FC<Props> = observer((props)
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
-                <WorkspaceViewForm
-                  handleFormSubmit={handleFormSubmit}
-                  handleClose={handleClose}
-                  data={data}
-                  preLoadedData={preLoadedData}
-                />
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+      <WorkspaceViewForm
+        handleFormSubmit={handleFormSubmit}
+        handleClose={handleClose}
+        data={data}
+        preLoadedData={preLoadedData}
+      />
+    </ModalCore>
   );
 });
diff --git a/web/pages/[workspaceSlug]/settings/webhooks/[webhookId].tsx b/web/pages/[workspaceSlug]/settings/webhooks/[webhookId].tsx
index c0ec917a9..d6e2b7840 100644
--- a/web/pages/[workspaceSlug]/settings/webhooks/[webhookId].tsx
+++ b/web/pages/[workspaceSlug]/settings/webhooks/[webhookId].tsx
@@ -96,7 +96,9 @@ const WebhookDetailsPage: NextPageWithLayout = observer(() => {
       <PageHead title={pageTitle} />
       <DeleteWebhookModal isOpen={deleteWebhookModal} onClose={() => setDeleteWebhookModal(false)} />
       <div className="w-full space-y-8 overflow-y-auto md:py-8 py-4 md:pr-9 pr-4">
-        <WebhookForm onSubmit={async (data) => await handleUpdateWebhook(data)} data={currentWebhook} />
+        <div className="-m-5">
+          <WebhookForm onSubmit={async (data) => await handleUpdateWebhook(data)} data={currentWebhook} />
+        </div>
         {currentWebhook && <WebhookDeleteSection openDeleteModal={() => setDeleteWebhookModal(true)} />}
       </div>
     </>