diff --git a/web/ee/components/common/input/description-input.tsx b/web/ee/components/common/input/description-input.tsx
new file mode 100644
index 0000000000..b15ccff025
--- /dev/null
+++ b/web/ee/components/common/input/description-input.tsx
@@ -0,0 +1,176 @@
+"use client";
+
+import { FC, useCallback, useEffect, useState } from "react";
+import debounce from "lodash/debounce";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+// types
+import { TNameDescriptionLoader } from "@plane/types";
+import { EFileAssetType } from "@plane/types/src/enums";
+// ui
+import { Loader } from "@plane/ui";
+// components
+import { RichTextEditor, RichTextReadOnlyEditor } from "@/components/editor";
+// helpers
+import { getDescriptionPlaceholder } from "@/helpers/issue.helper";
+// hooks
+import { useWorkspace } from "@/hooks/store";
+// plane web services
+import { WorkspaceService } from "@/plane-web/services";
+// services
+import { FileService } from "@/services/file.service";
+
+const workspaceService = new WorkspaceService();
+const fileService = new FileService();
+
+interface IFormData {
+  id: string;
+  description_html: string;
+}
+
+export type DescriptionInputProps = {
+  workspaceSlug: string;
+  projectId?: string;
+  itemId: string;
+  initialValue: string | undefined;
+  onSubmit: (value: string) => Promise<void>;
+  fileAssetType: EFileAssetType;
+  placeholder?: string | ((isFocused: boolean, value: string) => string);
+  setIsSubmitting: (initialValue: TNameDescriptionLoader) => void;
+  swrDescription?: string | null | undefined;
+  containerClassName?: string;
+  disabled?: boolean;
+};
+
+export const DescriptionInput: FC<DescriptionInputProps> = observer((props) => {
+  const {
+    workspaceSlug,
+    projectId,
+    itemId,
+    initialValue,
+    onSubmit,
+    fileAssetType,
+    placeholder,
+    setIsSubmitting,
+    swrDescription,
+    containerClassName,
+    disabled,
+  } = props;
+  // store hooks
+  const { getWorkspaceBySlug } = useWorkspace();
+
+  // states
+  const [localDescription, setLocalDescription] = useState({
+    id: itemId,
+    description_html: initialValue,
+  });
+
+  // form
+  const { handleSubmit, reset, control } = useForm<IFormData>({
+    defaultValues: {
+      id: itemId,
+      description_html: initialValue || "",
+    },
+  });
+
+  // handlers
+  const handleDescriptionFormSubmit = useCallback(
+    async (formData: IFormData) => {
+      await onSubmit(formData.description_html ?? "<p></p>");
+    },
+    [onSubmit]
+  );
+
+  // computed values
+  const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id as string;
+
+  // reset form values
+  useEffect(() => {
+    if (!itemId) return;
+    reset({
+      id: itemId,
+      description_html: initialValue === "" ? "<p></p>" : initialValue,
+    });
+    setLocalDescription({
+      id: itemId,
+      description_html: initialValue === "" ? "<p></p>" : initialValue,
+    });
+  }, [initialValue, itemId, reset]);
+
+  // ADDING handleDescriptionFormSubmit TO DEPENDENCY ARRAY PRODUCES ADVERSE EFFECTS
+  // TODO: Verify the exhaustive-deps warning
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedFormSave = useCallback(
+    debounce(async () => {
+      handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
+    }, 1500),
+    [handleSubmit, itemId]
+  );
+
+  return (
+    <>
+      {localDescription.description_html ? (
+        <Controller
+          name="description_html"
+          control={control}
+          render={({ field: { onChange } }) =>
+            !disabled ? (
+              <RichTextEditor
+                id={itemId}
+                initialValue={localDescription.description_html ?? "<p></p>"}
+                value={swrDescription ?? null}
+                workspaceSlug={workspaceSlug}
+                workspaceId={workspaceId}
+                projectId={projectId}
+                dragDropEnabled
+                onChange={(_description: object, description_html: string) => {
+                  setIsSubmitting("submitting");
+                  onChange(description_html);
+                  debouncedFormSave();
+                }}
+                placeholder={
+                  placeholder ? placeholder : (isFocused, value) => getDescriptionPlaceholder(isFocused, value)
+                }
+                searchMentionCallback={async (payload) =>
+                  await workspaceService.searchEntity(workspaceSlug?.toString() ?? "", {
+                    ...payload,
+                    project_id: projectId?.toString() ?? "",
+                  })
+                }
+                containerClassName={containerClassName}
+                uploadFile={async (file) => {
+                  const params = {
+                    entity_identifier: itemId,
+                    entity_type: fileAssetType,
+                  };
+                  try {
+                    const uploadAsset = projectId
+                      ? fileService.uploadProjectAsset(workspaceSlug, projectId, params, file)
+                      : fileService.uploadWorkspaceAsset(workspaceSlug, params, file);
+                    const { asset_id } = await uploadAsset;
+                    return asset_id;
+                  } catch (error) {
+                    console.log("Error in uploading asset:", error);
+                    throw new Error("Asset upload failed. Please try again later.");
+                  }
+                }}
+              />
+            ) : (
+              <RichTextReadOnlyEditor
+                id={itemId}
+                initialValue={localDescription.description_html ?? ""}
+                containerClassName={containerClassName}
+                workspaceSlug={workspaceSlug}
+                projectId={projectId}
+              />
+            )
+          }
+        />
+      ) : (
+        <Loader>
+          <Loader.Item height="150px" />
+        </Loader>
+      )}
+    </>
+  );
+});
diff --git a/web/ee/components/common/input/index.ts b/web/ee/components/common/input/index.ts
new file mode 100644
index 0000000000..bbd1d55271
--- /dev/null
+++ b/web/ee/components/common/input/index.ts
@@ -0,0 +1,2 @@
+export * from "./description-input";
+export * from "./title-input";
diff --git a/web/ee/components/common/input/title-input.tsx b/web/ee/components/common/input/title-input.tsx
new file mode 100644
index 0000000000..b3902f3299
--- /dev/null
+++ b/web/ee/components/common/input/title-input.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import { FC, useState, useEffect, useCallback } from "react";
+import { observer } from "mobx-react";
+// components
+import { TextArea } from "@plane/ui";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// hooks
+import useDebounce from "@/hooks/use-debounce";
+
+export type TitleInputProps = {
+  value: string | undefined | null;
+  isSubmitting: "submitting" | "submitted" | "saved";
+  setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void;
+  onSubmit: (value: string) => Promise<void>;
+  className?: string;
+  containerClassName?: string;
+  disabled?: boolean;
+};
+
+export const TitleInput: FC<TitleInputProps> = observer((props) => {
+  const { value, isSubmitting, setIsSubmitting, onSubmit, className, containerClassName, disabled } = props;
+  // states
+  const [title, setTitle] = useState("");
+  const [isLengthVisible, setIsLengthVisible] = useState(false);
+  // hooks
+  const debouncedValue = useDebounce(title, 1500);
+
+  useEffect(() => {
+    if (value) setTitle(value);
+  }, [value]);
+
+  useEffect(() => {
+    const textarea = document.querySelector("#title-input");
+    if (debouncedValue && debouncedValue !== value) {
+      if (debouncedValue.trim().length > 0) {
+        onSubmit(debouncedValue).finally(() => {
+          setIsSubmitting("saved");
+          if (textarea && !textarea.matches(":focus")) {
+            const trimmedTitle = debouncedValue.trim();
+            if (trimmedTitle !== title) setTitle(trimmedTitle);
+          }
+        });
+      } else {
+        setTitle(value || "");
+        setIsSubmitting("saved");
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedValue]);
+
+  useEffect(() => {
+    const handleBlur = () => {
+      const trimmedTitle = title.trim();
+      if (trimmedTitle !== title && isSubmitting !== "submitting") {
+        if (trimmedTitle.length > 0) {
+          setTitle(trimmedTitle);
+          setIsSubmitting("submitting");
+        } else {
+          setTitle(value || "");
+          setIsSubmitting("saved");
+        }
+      }
+    };
+
+    const textarea = document.querySelector("#title-input");
+    if (textarea) {
+      textarea.addEventListener("blur", handleBlur);
+    }
+
+    return () => {
+      if (textarea) {
+        textarea.removeEventListener("blur", handleBlur);
+      }
+    };
+  }, [title, isSubmitting, setIsSubmitting, value]);
+
+  const handleTitleChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      setIsSubmitting("submitting");
+      setTitle(e.target.value);
+    },
+    [setIsSubmitting]
+  );
+
+  if (disabled) return <div className="text-2xl font-medium whitespace-pre-line">{title}</div>;
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div className={cn("relative", containerClassName)}>
+        <TextArea
+          id="title-input"
+          className={cn(
+            "block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-0 text-2xl font-medium outline-none ring-0",
+            {
+              "ring-1 ring-red-400 mx-2.5": title?.length === 0,
+            },
+            className
+          )}
+          disabled={disabled}
+          value={title}
+          onChange={handleTitleChange}
+          maxLength={255}
+          placeholder="Title"
+          onFocus={() => setIsLengthVisible(true)}
+          onBlur={() => setIsLengthVisible(false)}
+        />
+        <div
+          className={cn(
+            "pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200 opacity-0 transition-opacity",
+            {
+              "opacity-100": isLengthVisible,
+            }
+          )}
+        >
+          <span className={`${title.length === 0 || title.length > 255 ? "text-red-500" : ""}`}>{title.length}</span>
+          /255
+        </div>
+      </div>
+      {title?.length === 0 && <span className="text-sm font-medium text-red-500">Title is required</span>}
+    </div>
+  );
+});