diff --git a/apps/web/core/components/api-token/modal/form.tsx b/apps/web/core/components/api-token/modal/form.tsx
index 7d799ff1f43..3cd99030013 100644
--- a/apps/web/core/components/api-token/modal/form.tsx
+++ b/apps/web/core/components/api-token/modal/form.tsx
@@ -11,13 +11,14 @@ import { CalendarOutline } from "@makeplane/propel/icons";
 // types
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IApiToken } from "@plane/types";
 // ui
 import { Switch } from "@makeplane/propel/components/switch";
-import { CustomSelect, TextArea } from "@plane/ui";
+import { CustomSelect } from "@plane/ui";
 import { cn, renderFormattedDate, renderFormattedTime } from "@plane/utils";
 // components
 import { DateDropdown } from "@/components/dropdowns/date";
@@ -166,13 +167,19 @@ export function CreateApiTokenForm(props: Props) {
             control={control}
             name="description"
             render={({ field: { value, onChange } }) => (
-              <TextArea
-                value={value}
-                onChange={onChange}
-                hasError={Boolean(errors.description)}
-                placeholder={t("description")}
-                className="min-h-24 w-full resize-none text-14"
-              />
+              <Field name="description" invalid={Boolean(errors.description)}>
+                <TextAreaGroup resize="none">
+                  <TextArea
+                    size="lg"
+                    surface="field"
+                    autoResize
+                    maxRows={8}
+                    value={value}
+                    onChange={onChange}
+                    placeholder={t("description")}
+                  />
+                </TextAreaGroup>
+              </Field>
             )}
           />
           <div className="flex items-center justify-between gap-2">
diff --git a/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx b/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
index e627c1b99be..20e50eec64f 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
@@ -12,9 +12,8 @@ import { MembersOutline, UserAltOutline, WorkItemsOutline } from "@makeplane/pro
 import { EEstimateSystem } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Avatar } from "@makeplane/propel/components/avatar";
+import { TextArea } from "@makeplane/propel/components/text-area";
 import type { ICycle } from "@plane/types";
-// plane ui
-import { TextArea } from "@plane/ui";
 // helpers
 import { getFileURL } from "@plane/utils";
 // hooks
@@ -69,11 +68,7 @@ export const CycleSidebarDetails = observer(function CycleSidebarDetails(props:
   return (
     <div className="flex w-full flex-col gap-5">
       {cycleDetails?.description && (
-        <TextArea
-          className="ring-none !m-0 max-h-max w-full resize-none !border-0 bg-transparent !p-0 text-13 leading-5 text-secondary outline-none"
-          value={cycleDetails.description}
-          disabled
-        />
+        <TextArea size="lg" surface="inline" autoResize value={cycleDetails.description} disabled />
       )}
 
       <div className="flex flex-col gap-5 pt-2.5 pb-6">
diff --git a/apps/web/core/components/cycles/form.tsx b/apps/web/core/components/cycles/form.tsx
index ff2448c7cf1..a6bb0eae298 100644
--- a/apps/web/core/components/cycles/form.tsx
+++ b/apps/web/core/components/cycles/form.tsx
@@ -9,13 +9,12 @@ import { Controller, useForm } from "react-hook-form";
 // plane imports
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
 import { ETabIndices } from "@plane/constants";
 // types
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import type { ICycle } from "@plane/types";
-// ui
-import { TextArea } from "@plane/ui";
 import { getDate, renderFormattedPayloadDate, getTabIndex } from "@plane/utils";
 // components
 import { DateRangeDropdown } from "@/components/dropdowns/date-range";
@@ -139,15 +138,21 @@ export function CycleForm(props: Props) {
               name="description"
               control={control}
               render={({ field: { value, onChange } }) => (
-                <TextArea
-                  name="description"
-                  placeholder={t("description")}
-                  className="min-h-24 w-full resize-none text-14"
-                  hasError={Boolean(errors?.description)}
-                  value={value}
-                  onChange={onChange}
-                  tabIndex={getIndex("description")}
-                />
+                <Field name="description" invalid={Boolean(errors?.description)}>
+                  <TextAreaGroup resize="none">
+                    <TextArea
+                      size="lg"
+                      surface="field"
+                      autoResize
+                      maxRows={8}
+                      name="description"
+                      placeholder={t("description")}
+                      value={value}
+                      onChange={onChange}
+                      tabIndex={getIndex("description")}
+                    />
+                  </TextAreaGroup>
+                </Field>
               )}
             />
           </div>
diff --git a/apps/web/core/components/inbox/content/issue-root.tsx b/apps/web/core/components/inbox/content/issue-root.tsx
index b741c8dcf8c..64e1e1a08e3 100644
--- a/apps/web/core/components/inbox/content/issue-root.tsx
+++ b/apps/web/core/components/inbox/content/issue-root.tsx
@@ -135,7 +135,6 @@ export const InboxIssueMainContent = observer(function InboxIssueMainContent(pro
           issueOperations={issueOperations}
           disabled={!isEditable}
           value={issue.name}
-          containerClassName="-ml-3"
         />
 
         {loader === "issue-loading" || issue.description_html === undefined ? (
diff --git a/apps/web/core/components/issues/issue-detail/main-content.tsx b/apps/web/core/components/issues/issue-detail/main-content.tsx
index b4343835dd2..ac47acfa9c1 100644
--- a/apps/web/core/components/issues/issue-detail/main-content.tsx
+++ b/apps/web/core/components/issues/issue-detail/main-content.tsx
@@ -104,7 +104,6 @@ export const IssueMainContent = observer(function IssueMainContent(props: Props)
           issueOperations={issueOperations}
           disabled={isArchived || !isEditable}
           value={issue.name}
-          containerClassName="-ml-3"
         />
 
         <DescriptionInput
diff --git a/apps/web/core/components/issues/peek-overview/issue-detail.tsx b/apps/web/core/components/issues/peek-overview/issue-detail.tsx
index 3ab8592ab83..c2fa31378bc 100644
--- a/apps/web/core/components/issues/peek-overview/issue-detail.tsx
+++ b/apps/web/core/components/issues/peek-overview/issue-detail.tsx
@@ -103,7 +103,6 @@ export const PeekOverviewIssueDetails = observer(function PeekOverviewIssueDetai
         issueOperations={issueOperations}
         disabled={disabled || isArchived}
         value={issue.name}
-        containerClassName="-ml-3"
       />
 
       <DescriptionInput
diff --git a/apps/web/core/components/issues/title-input.tsx b/apps/web/core/components/issues/title-input.tsx
index ce82b0e7225..c48dfd7a274 100644
--- a/apps/web/core/components/issues/title-input.tsx
+++ b/apps/web/core/components/issues/title-input.tsx
@@ -6,10 +6,10 @@
 
 import { useState, useEffect, useCallback, useRef } from "react";
 import { observer } from "mobx-react";
+import { Field } from "@makeplane/propel/components/field";
+import { TextArea } from "@makeplane/propel/components/text-area";
 import { useTranslation } from "@plane/i18n";
 import type { TNameDescriptionLoader } from "@plane/types";
-// components
-import { TextArea } from "@plane/ui";
 // types
 import { cn } from "@plane/utils";
 import useDebounce from "@/hooks/use-debounce";
@@ -25,7 +25,6 @@ export type IssueTitleInputProps = {
   issueOperations: TIssueOperations;
   projectId: string;
   issueId: string;
-  className?: string;
   containerClassName?: string;
 };
 
@@ -39,7 +38,6 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTit
     issueId,
     issueOperations,
     projectId,
-    className,
     containerClassName,
   } = props;
   const { t } = useTranslation();
@@ -132,7 +130,7 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTit
   );
 
   const handleTitleChange = useCallback(
-    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    (e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
       setIsSubmitting("submitting");
       const titleFromEvent = e.target.value;
       setTitle(titleFromEvent);
@@ -147,26 +145,27 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTit
   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-sm border-none bg-transparent px-3 py-0 text-20 font-medium ring-0 outline-none",
-            {
-              "mx-2.5 ring-1 ring-danger-strong": title?.length === 0,
-            },
-            className
-          )}
-          disabled={disabled}
-          value={title}
-          onChange={handleTitleChange}
-          maxLength={255}
-          placeholder={t("issue.title.label")}
-          onFocus={() => setIsLengthVisible(true)}
-          onBlur={() => setIsLengthVisible(false)}
-        />
+        <Field name="title" invalid={title?.length === 0}>
+          <div className="flex w-full">
+            <TextArea
+              size="2xl"
+              surface="inline"
+              autoResize
+              rows={1}
+              id="title-input"
+              disabled={disabled}
+              value={title}
+              onChange={handleTitleChange}
+              maxLength={255}
+              placeholder={t("issue.title.label")}
+              onFocus={() => setIsLengthVisible(true)}
+              onBlur={() => setIsLengthVisible(false)}
+            />
+          </div>
+        </Field>
         <div
           className={cn(
-            "pointer-events-none absolute right-1 bottom-1 z-[2] rounded-sm bg-surface-1 p-0.5 text-11 text-secondary opacity-0 transition-opacity",
+            "pointer-events-none absolute right-1 bottom-1 z-2 rounded-sm bg-surface-1 p-0.5 text-11 text-secondary opacity-0 transition-opacity",
             {
               "opacity-100": isLengthVisible,
             }
diff --git a/apps/web/core/components/modules/analytics-sidebar/root.tsx b/apps/web/core/components/modules/analytics-sidebar/root.tsx
index 7c31983fa35..ad8edb03a4d 100644
--- a/apps/web/core/components/modules/analytics-sidebar/root.tsx
+++ b/apps/web/core/components/modules/analytics-sidebar/root.tsx
@@ -26,7 +26,8 @@ import { ModuleStatusIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { ILinkDetails, IModule, ModuleLink } from "@plane/types";
 // plane ui
-import { Loader, CustomSelect, TextArea } from "@plane/ui";
+import { Loader, CustomSelect } from "@plane/ui";
+import { TextArea } from "@makeplane/propel/components/text-area";
 // components
 // helpers
 import { getDate, renderFormattedPayloadDate } from "@plane/utils";
@@ -233,17 +234,12 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
               )}
             />
           </div>
-          <h4 className="w-full text-18 font-semibold break-words text-primary">{moduleDetails.name}</h4>
+          <h4 className="w-full text-18 font-semibold wrap-break-word text-primary">{moduleDetails.name}</h4>
+          {moduleDetails.description && (
+            <TextArea size="lg" surface="inline" autoResize value={moduleDetails.description} disabled />
+          )}
         </div>
 
-        {moduleDetails.description && (
-          <TextArea
-            className="ring-none !m-0 max-h-max w-full resize-none !border-0 bg-transparent !p-0 text-13 leading-5 text-secondary outline-none"
-            value={moduleDetails.description}
-            disabled
-          />
-        )}
-
         <div className="flex flex-col gap-5 pt-2.5 pb-6">
           <div className="flex items-center justify-start gap-1">
             <div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
diff --git a/apps/web/core/components/modules/form.tsx b/apps/web/core/components/modules/form.tsx
index 3eb632eff76..c799e56c03e 100644
--- a/apps/web/core/components/modules/form.tsx
+++ b/apps/web/core/components/modules/form.tsx
@@ -9,12 +9,11 @@ import { Controller, useForm } from "react-hook-form";
 // plane imports
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
 import { ETabIndices } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import type { IModule } from "@plane/types";
-// ui
-import { TextArea } from "@plane/ui";
 import { getDate, renderFormattedPayloadDate, getTabIndex } from "@plane/utils";
 // components
 import { DateRangeDropdown } from "@/components/dropdowns/date-range";
@@ -150,16 +149,22 @@ export function ModuleForm(props: Props) {
               name="description"
               control={control}
               render={({ field: { value, onChange } }) => (
-                <TextArea
-                  id="description"
-                  name="description"
-                  value={value}
-                  onChange={onChange}
-                  placeholder={t("description")}
-                  className="min-h-24 w-full resize-none text-14"
-                  hasError={Boolean(errors?.description)}
-                  tabIndex={getIndex("description")}
-                />
+                <Field name="description" invalid={Boolean(errors?.description)}>
+                  <TextAreaGroup resize="none">
+                    <TextArea
+                      size="lg"
+                      surface="field"
+                      autoResize
+                      maxRows={8}
+                      id="description"
+                      name="description"
+                      value={value}
+                      onChange={onChange}
+                      placeholder={t("description")}
+                      tabIndex={getIndex("description")}
+                    />
+                  </TextAreaGroup>
+                </Field>
               )}
             />
           </div>
diff --git a/apps/web/core/components/pages/editor/title.tsx b/apps/web/core/components/pages/editor/title.tsx
deleted file mode 100644
index ed0b853fafa..00000000000
--- a/apps/web/core/components/pages/editor/title.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { useState } from "react";
-import { observer } from "mobx-react";
-// editor
-import type { EditorRefApi } from "@plane/editor";
-// ui
-import { TextArea } from "@plane/ui";
-import { cn, getPageName } from "@plane/utils";
-// helpers
-// hooks
-import { usePageFilters } from "@/hooks/use-page-filters";
-
-type Props = {
-  editorRef: EditorRefApi | null;
-  readOnly: boolean;
-  title: string | undefined;
-  updateTitle: (title: string) => void;
-};
-
-export const PageEditorTitle = observer(function PageEditorTitle(props: Props) {
-  const { editorRef, readOnly, title, updateTitle } = props;
-  // states
-  const [isLengthVisible, setIsLengthVisible] = useState(false);
-  // page filters
-  const { fontSize } = usePageFilters();
-  // ui
-  const titleFontClassName = cn("font-bold tracking-[-2%]", {
-    "text-[1.6rem] leading-[1.9rem]": fontSize === "small-font",
-    "text-[2rem] leading-[2.375rem]": fontSize === "large-font",
-  });
-
-  return (
-    <div className="relative w-full flex-shrink-0 py-3">
-      {readOnly ? (
-        <h6
-          className={cn(
-            titleFontClassName,
-            {
-              "text-placeholder": !title,
-            },
-            "break-words"
-          )}
-        >
-          {getPageName(title)}
-        </h6>
-      ) : (
-        <div className="relative">
-          <TextArea
-            className={cn(titleFontClassName, "block w-full resize-none rounded-none border-none p-0 outline-none")}
-            placeholder="Untitled"
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                e.preventDefault();
-                editorRef?.setFocusAtPosition(0);
-              }
-            }}
-            value={title}
-            onChange={(e) => updateTitle(e.target.value)}
-            maxLength={255}
-            onFocus={() => setIsLengthVisible(true)}
-            onBlur={() => setIsLengthVisible(false)}
-            autoFocus
-          />
-          <div
-            className={cn(
-              "pointer-events-none absolute right-1 bottom-1 z-[2] rounded-sm bg-surface-1 p-0.5 text-11 font-regular text-secondary opacity-0 transition-opacity",
-              {
-                "opacity-100": isLengthVisible,
-              }
-            )}
-          >
-            <span
-              className={cn({
-                "text-danger-primary": title && title.length > 255,
-              })}
-            >
-              {title?.length}
-            </span>
-            /255
-          </div>
-        </div>
-      )}
-    </div>
-  );
-});
diff --git a/apps/web/core/components/project-states/create-update/form.tsx b/apps/web/core/components/project-states/create-update/form.tsx
index 4518271b812..4f4e6aac9b0 100644
--- a/apps/web/core/components/project-states/create-update/form.tsx
+++ b/apps/web/core/components/project-states/create-update/form.tsx
@@ -8,9 +8,10 @@ import { useEffect, useState } from "react";
 import { TwitterPicker } from "react-color";
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
 import { Button } from "@plane/propel/button";
 import type { IState } from "@plane/types";
-import { Popover, TextArea } from "@plane/ui";
+import { Popover } from "@plane/ui";
 type TStateForm = {
   data: Partial<IState>;
   onSubmit: (formData: Partial<IState>) => Promise<{ status: string }>;
@@ -91,15 +92,21 @@ export function StateForm(props: TStateForm) {
         </Field>
 
         {/* description */}
-        <TextArea
-          id="description"
-          name="description"
-          placeholder="Describe this state for your members."
-          value={formData?.description}
-          onChange={(e) => handleFormData("description", e.target.value)}
-          hasError={(errors && Boolean(errors.description)) || false}
-          className="min-h-14 w-full resize-none text-13"
-        />
+        <Field name="description" invalid={(errors && Boolean(errors.description)) || false}>
+          <TextAreaGroup resize="none">
+            <TextArea
+              size="lg"
+              surface="field"
+              autoResize
+              maxRows={8}
+              id="description"
+              name="description"
+              placeholder="Describe this state for your members."
+              value={formData?.description ?? ""}
+              onChange={(e) => handleFormData("description", e.target.value)}
+            />
+          </TextAreaGroup>
+        </Field>
 
         <div className="flex items-center space-x-2">
           <Button onClick={formSubmit} variant="primary" size="lg" disabled={buttonDisabled}>
diff --git a/apps/web/core/components/project/create/common-attributes.tsx b/apps/web/core/components/project/create/common-attributes.tsx
index 949faaa22d7..3d22e4df0c3 100644
--- a/apps/web/core/components/project/create/common-attributes.tsx
+++ b/apps/web/core/components/project/create/common-attributes.tsx
@@ -9,6 +9,7 @@ import type { UseFormSetValue } from "react-hook-form";
 import { Controller, useFormContext } from "react-hook-form";
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
 import { InfoOutline } from "@makeplane/propel/icons";
 // plane imports
 import { ETabIndices } from "@plane/constants";
@@ -16,8 +17,7 @@ import { useTranslation } from "@plane/i18n";
 import type { TProject } from "@plane/types";
 // ui
 import { Tooltip } from "@makeplane/propel/components/tooltip";
-import { TextArea } from "@plane/ui";
-import { cn, projectIdentifierSanitizer, getTabIndex } from "@plane/utils";
+import { projectIdentifierSanitizer, getTabIndex } from "@plane/utils";
 
 type Props = {
   setValue: UseFormSetValue<TProject>;
@@ -139,19 +139,25 @@ function ProjectCommonAttributes(props: Props) {
           name="description"
           control={control}
           render={({ field: { value, onChange } }) => (
-            <TextArea
-              id="description"
-              name="description"
-              value={value}
-              placeholder={t("description")}
-              onChange={(e) => {
-                onChange(e);
-                handleFormOnChange?.();
-              }}
-              className="focus:border-blue-400 !h-24 text-13"
-              hasError={Boolean(errors?.description)}
-              tabIndex={getIndex("description")}
-            />
+            <Field name="description" invalid={Boolean(errors?.description)}>
+              <TextAreaGroup resize="none">
+                <TextArea
+                  size="lg"
+                  surface="field"
+                  autoResize
+                  maxRows={8}
+                  id="description"
+                  name="description"
+                  value={value}
+                  placeholder={t("description")}
+                  onChange={(e) => {
+                    onChange(e);
+                    handleFormOnChange?.();
+                  }}
+                  tabIndex={getIndex("description")}
+                />
+              </TextAreaGroup>
+            </Field>
           )}
         />
       </div>
diff --git a/apps/web/core/components/project/form.tsx b/apps/web/core/components/project/form.tsx
index b863594a36a..e5aaab47bce 100644
--- a/apps/web/core/components/project/form.tsx
+++ b/apps/web/core/components/project/form.tsx
@@ -9,6 +9,7 @@ import { Controller, useForm } from "react-hook-form";
 import { InfoOutline, LockOutline } from "@makeplane/propel/icons";
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
 import { NETWORK_CHOICES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // plane imports
@@ -18,7 +19,7 @@ import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import { EFileAssetType } from "@plane/types";
 import type { IProject, IWorkspace } from "@plane/types";
-import { CustomSelect, TextArea } from "@plane/ui";
+import { CustomSelect } from "@plane/ui";
 import { renderFormattedDate } from "@plane/utils";
 import { CoverImage } from "@/components/common/cover-image";
 import { ImagePickerPopover } from "@/components/core/image-picker-popover";
@@ -313,16 +314,21 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
             name="description"
             control={control}
             render={({ field: { value, onChange } }) => (
-              <TextArea
-                id="description"
-                name="description"
-                value={value}
-                placeholder={t("project_description_placeholder")}
-                onChange={onChange}
-                className="min-h-[102px] text-13 font-medium"
-                hasError={Boolean(errors?.description)}
-                disabled={!isAdmin}
-              />
+              <Field name="description" invalid={Boolean(errors?.description)} disabled={!isAdmin}>
+                <TextAreaGroup resize="none">
+                  <TextArea
+                    size="lg"
+                    surface="field"
+                    autoResize
+                    maxRows={8}
+                    id="description"
+                    name="description"
+                    value={value}
+                    placeholder={t("project_description_placeholder")}
+                    onChange={onChange}
+                  />
+                </TextAreaGroup>
+              </Field>
             )}
           />
         </div>
diff --git a/apps/web/core/components/views/form.tsx b/apps/web/core/components/views/form.tsx
index 5c4ce12f016..2f58541a351 100644
--- a/apps/web/core/components/views/form.tsx
+++ b/apps/web/core/components/views/form.tsx
@@ -10,6 +10,7 @@ import { Controller, useForm } from "react-hook-form";
 // plane imports
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
 import { ETabIndices, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
@@ -23,7 +24,6 @@ import type {
   IIssueFilters,
 } from "@plane/types";
 import { EViewAccess, EIssuesStoreType } from "@plane/types";
-import { TextArea } from "@plane/ui";
 import { getComputedDisplayFilters, getComputedDisplayProperties, getTabIndex } from "@plane/utils";
 // components
 import { DisplayFiltersSelection, FiltersDropdown } from "@/components/issues/issue-layouts/filters";
@@ -190,16 +190,22 @@ export const ProjectViewForm = observer(function ProjectViewForm(props: Props) {
               name="description"
               control={control}
               render={({ field: { value, onChange } }) => (
-                <TextArea
-                  id="description"
-                  name="description"
-                  placeholder={t("common.description")}
-                  className="min-h-24 w-full resize-none text-14"
-                  hasError={Boolean(errors?.description)}
-                  value={value}
-                  onChange={onChange}
-                  tabIndex={getIndex("descriptions")}
-                />
+                <Field name="description" invalid={Boolean(errors?.description)}>
+                  <TextAreaGroup resize="none">
+                    <TextArea
+                      size="lg"
+                      surface="field"
+                      autoResize
+                      maxRows={8}
+                      id="description"
+                      name="description"
+                      placeholder={t("common.description")}
+                      value={value}
+                      onChange={onChange}
+                      tabIndex={getIndex("descriptions")}
+                    />
+                  </TextAreaGroup>
+                </Field>
               )}
             />
           </div>
diff --git a/apps/web/core/components/workspace/views/form.tsx b/apps/web/core/components/workspace/views/form.tsx
index 73350a9b075..1d896252972 100644
--- a/apps/web/core/components/workspace/views/form.tsx
+++ b/apps/web/core/components/workspace/views/form.tsx
@@ -9,12 +9,12 @@ import { Controller, useForm } from "react-hook-form";
 // plane imports
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
 import { ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, IWorkspaceView, IIssueFilters } from "@plane/types";
 import { EViewAccess, EIssueLayoutTypes, EIssuesStoreType } from "@plane/types";
-import { TextArea } from "@plane/ui";
 import { getComputedDisplayFilters, getComputedDisplayProperties } from "@plane/utils";
 // components
 import { DisplayFiltersSelection, FiltersDropdown } from "@/components/issues/issue-layouts/filters";
@@ -115,15 +115,21 @@ export const WorkspaceViewForm = observer(function WorkspaceViewForm(props: Prop
               name="description"
               control={control}
               render={({ field: { value, onChange } }) => (
-                <TextArea
-                  id="description"
-                  name="description"
-                  value={value}
-                  placeholder={t("common.description")}
-                  onChange={onChange}
-                  className="min-h-24 w-full resize-none text-14"
-                  hasError={Boolean(errors?.description)}
-                />
+                <Field name="description" invalid={Boolean(errors?.description)}>
+                  <TextAreaGroup resize="none">
+                    <TextArea
+                      size="lg"
+                      surface="field"
+                      autoResize
+                      maxRows={8}
+                      id="description"
+                      name="description"
+                      value={value}
+                      placeholder={t("common.description")}
+                      onChange={onChange}
+                    />
+                  </TextAreaGroup>
+                </Field>
               )}
             />
           </div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b7e8251a913..c1091fa51f9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -876,7 +876,7 @@ importers:
         version: 2.2.10(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@makeplane/propel':
         specifier: 'catalog:'
-        version: 0.2.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
+        version: 0.3.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
       '@plane/constants':
         specifier: workspace:*
         version: link:../../packages/constants