diff --git a/package-lock.json b/package-lock.json
index 129c92e05..4a311ca10 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
                 "react-hotkeys-hook": "^3.4.0",
                 "react-json-view": "^1.21.3",
                 "react-select": "^5.7.0",
+                "react-textarea-autosize": "^8.5.3",
                 "storybook-addon-designs": "^6.3.1",
                 "tippy.js": "^6.3.1"
             },
@@ -1766,9 +1767,9 @@
             }
         },
         "node_modules/@babel/runtime": {
-            "version": "7.23.9",
-            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz",
-            "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==",
+            "version": "7.24.1",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz",
+            "integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==",
             "dependencies": {
                 "regenerator-runtime": "^0.14.0"
             },
@@ -25053,19 +25054,19 @@
             }
         },
         "node_modules/react-textarea-autosize": {
-            "version": "8.3.3",
-            "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz",
-            "integrity": "sha512-2XlHXK2TDxS6vbQaoPbMOfQ8GK7+irc2fVK6QFIcC8GOnH3zI/v481n+j1L0WaPVvKxwesnY93fEfH++sus2rQ==",
+            "version": "8.5.3",
+            "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz",
+            "integrity": "sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==",
             "dependencies": {
-                "@babel/runtime": "^7.10.2",
-                "use-composed-ref": "^1.0.0",
-                "use-latest": "^1.0.0"
+                "@babel/runtime": "^7.20.13",
+                "use-composed-ref": "^1.3.0",
+                "use-latest": "^1.2.1"
             },
             "engines": {
                 "node": ">=10"
             },
             "peerDependencies": {
-                "react": "^16.8.0 || ^17.0.0"
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
             }
         },
         "node_modules/react-transition-group": {
@@ -28044,11 +28045,6 @@
                 "node": ">=6.10"
             }
         },
-        "node_modules/ts-essentials": {
-            "version": "2.0.12",
-            "resolved": "https://registry.npmjs.org/ts-essentials/-/ts-essentials-2.0.12.tgz",
-            "integrity": "sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w=="
-        },
         "node_modules/ts-pnp": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz",
@@ -28778,14 +28774,11 @@
             }
         },
         "node_modules/use-composed-ref": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.1.0.tgz",
-            "integrity": "sha512-my1lNHGWsSDAhhVAT4MKs6IjBUtG6ZG11uUqexPH9PptiIZDQOzaF4f5tEbJ2+7qvNbtXNBbU3SfmN+fXlWDhg==",
-            "dependencies": {
-                "ts-essentials": "^2.0.3"
-            },
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz",
+            "integrity": "sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==",
             "peerDependencies": {
-                "react": "^16.8.0 || ^17.0.0"
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
             }
         },
         "node_modules/use-isomorphic-layout-effect": {
@@ -28802,14 +28795,14 @@
             }
         },
         "node_modules/use-latest": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.0.tgz",
-            "integrity": "sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==",
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.1.tgz",
+            "integrity": "sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==",
             "dependencies": {
-                "use-isomorphic-layout-effect": "^1.0.0"
+                "use-isomorphic-layout-effect": "^1.1.1"
             },
             "peerDependencies": {
-                "react": "^16.8.0 || ^17.0.0"
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
             },
             "peerDependenciesMeta": {
                 "@types/react": {
@@ -32286,9 +32279,9 @@
             }
         },
         "@babel/runtime": {
-            "version": "7.23.9",
-            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz",
-            "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==",
+            "version": "7.24.1",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz",
+            "integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==",
             "requires": {
                 "regenerator-runtime": "^0.14.0"
             },
@@ -49539,13 +49532,13 @@
             }
         },
         "react-textarea-autosize": {
-            "version": "8.3.3",
-            "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz",
-            "integrity": "sha512-2XlHXK2TDxS6vbQaoPbMOfQ8GK7+irc2fVK6QFIcC8GOnH3zI/v481n+j1L0WaPVvKxwesnY93fEfH++sus2rQ==",
+            "version": "8.5.3",
+            "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz",
+            "integrity": "sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==",
             "requires": {
-                "@babel/runtime": "^7.10.2",
-                "use-composed-ref": "^1.0.0",
-                "use-latest": "^1.0.0"
+                "@babel/runtime": "^7.20.13",
+                "use-composed-ref": "^1.3.0",
+                "use-latest": "^1.2.1"
             }
         },
         "react-transition-group": {
@@ -51905,11 +51898,6 @@
             "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==",
             "dev": true
         },
-        "ts-essentials": {
-            "version": "2.0.12",
-            "resolved": "https://registry.npmjs.org/ts-essentials/-/ts-essentials-2.0.12.tgz",
-            "integrity": "sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w=="
-        },
         "ts-pnp": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz",
@@ -52433,12 +52421,9 @@
             "dev": true
         },
         "use-composed-ref": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.1.0.tgz",
-            "integrity": "sha512-my1lNHGWsSDAhhVAT4MKs6IjBUtG6ZG11uUqexPH9PptiIZDQOzaF4f5tEbJ2+7qvNbtXNBbU3SfmN+fXlWDhg==",
-            "requires": {
-                "ts-essentials": "^2.0.3"
-            }
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz",
+            "integrity": "sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ=="
         },
         "use-isomorphic-layout-effect": {
             "version": "1.1.2",
@@ -52446,11 +52431,11 @@
             "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA=="
         },
         "use-latest": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.0.tgz",
-            "integrity": "sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==",
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.1.tgz",
+            "integrity": "sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==",
             "requires": {
-                "use-isomorphic-layout-effect": "^1.0.0"
+                "use-isomorphic-layout-effect": "^1.1.1"
             }
         },
         "util": {
diff --git a/package.json b/package.json
index b65a54043..38b040103 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
         "react-hot-toast": "^2.1.0",
         "react-hotkeys-hook": "^3.4.0",
         "react-json-view": "^1.21.3",
+        "react-textarea-autosize": "^8.5.3",
         "react-select": "^5.7.0",
         "storybook-addon-designs": "^6.3.1",
         "tippy.js": "^6.3.1"
diff --git a/src/components/Forms/Textarea.jsx b/src/components/Forms/Textarea.jsx
index dde0dc8e0..a029d3101 100644
--- a/src/components/Forms/Textarea.jsx
+++ b/src/components/Forms/Textarea.jsx
@@ -1,16 +1,27 @@
 import clsx from "clsx";
 import PropTypes from "prop-types";
 import React, { forwardRef } from "react";
+import TextareaAutosize from "react-textarea-autosize";
 import { BaseInput } from "./BaseInput";
 
-export const Textarea = forwardRef(({ className, value, rows = 2, ...rest }, ref) => {
-    return (
+export const Textarea = forwardRef(({ className, value, shouldAutoSize = false, rows = 2, ...rest }, ref) => {
+    return shouldAutoSize ? (
+        // TextareaAutosize has a few special props like minRows and maxRows instead of rows field so using rows field to feed the minRows prop. See full list here https://github.com/Andarist/react-textarea-autosize?tab=readme-ov-file#props
         <BaseInput
             ref={ref}
-            as="textarea"
+            as={TextareaAutosize}
             value={value}
+            minRows={rows}
             className={clsx("ui-textarea", className)}
+            {...rest}
+        />
+    ) : (
+        <BaseInput
+            ref={ref}
+            as="textarea"
+            value={value}
             rows={rows}
+            className={clsx("ui-textarea", className)}
             {...rest}
         />
     );
@@ -19,8 +30,10 @@ export const Textarea = forwardRef(({ className, value, rows = 2, ...rest }, ref
 Textarea.propTypes = {
     ...BaseInput.propTypes,
     rows: PropTypes.number,
+    shouldAutoSize: PropTypes.bool,
 };
 
 Textarea.defaultProps = {
     rows: 2,
+    shouldAutoSize: false,
 };
diff --git a/src/stories/Forms/Textarea.stories.js b/src/stories/Forms/Textarea.stories.js
index dedd3c587..aa3dfe010 100644
--- a/src/stories/Forms/Textarea.stories.js
+++ b/src/stories/Forms/Textarea.stories.js
@@ -70,4 +70,21 @@ export const CustomWidth = () => {
     );
 };
 
+export const AutoSize = () => {
+    return (
+        <FormGroup>
+            <Label>Text</Label>
+            <Textarea shouldAutoSize={true} rows={6}/>
+        </FormGroup>
+    );
+};
+
+AutoSize.parameters = {
+    docs: {
+        description: {
+            story: "Automatically resize the textarea as the data increases.",
+        },
+    },
+};
+
 export default TextareaStories;