diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/settings/SettingsHeader.story.vue b/app/javascript/dashboard/components-next/captain/pageComponents/settings/SettingsHeader.story.vue
new file mode 100644
index 000000000..654e5ab16
--- /dev/null
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/settings/SettingsHeader.story.vue
@@ -0,0 +1,28 @@
+<script setup>
+import SettingsHeader from './SettingsHeader.vue';
+</script>
+
+<template>
+  <Story
+    title="Captain/PageComponents/SettingsHeader"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Default">
+      <div class="px-6 py-4 bg-n-background">
+        <SettingsHeader
+          heading="General Settings"
+          description="Configure general preferences for your workspace."
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Long Description">
+      <div class="px-6 py-4 bg-n-background">
+        <SettingsHeader
+          heading="Integrations"
+          description="Manage and configure third-party integrations such as Slack, Zapier, and Webhooks to enhance your workflow."
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/settings/SettingsHeader.vue b/app/javascript/dashboard/components-next/captain/pageComponents/settings/SettingsHeader.vue
new file mode 100644
index 000000000..dc6b7dda9
--- /dev/null
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/settings/SettingsHeader.vue
@@ -0,0 +1,19 @@
+<script setup>
+defineProps({
+  heading: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <header class="flex flex-col items-start gap-2">
+    <h2 class="text-n-slate-12 text-base font-medium">{{ heading }}</h2>
+    <p class="text-n-slate-11 text-sm">{{ description }}</p>
+  </header>
+</template>
diff --git a/app/javascript/shared/components/ResizableTextArea.vue b/app/javascript/shared/components/ResizableTextArea.vue
index 088753a23..4dda62cf9 100644
--- a/app/javascript/shared/components/ResizableTextArea.vue
+++ b/app/javascript/shared/components/ResizableTextArea.vue
@@ -69,7 +69,7 @@ export default {
     },
   },
   watch: {
-    value() {
+    modelValue() {
       this.resizeTextarea();
       // 🚨 watch triggers every time the value is changed, we cannot set this to focus then
       // when this runs, it sets the cursor to the end of the body, ignoring the signature