diff --git a/app/components/form/element.hbs b/app/components/form/element.hbs
index 8c85c14..b05dafd 100644
--- a/app/components/form/element.hbs
+++ b/app/components/form/element.hbs
@@ -1,7 +1,11 @@
-<div class="mb-4">
+<div class='mb-4'>
   {{#if @label}}
-    <label for={{@for}} class="block font-medium mb-1 text-dark {{if @required "after:content-['*'] after:text-red-500"}}">
-      {{~ @label ~}}
+    <label
+      for={{@for}}
+      class='block font-medium mb-1 text-dark
+        {{if @required "after:content-['*'] after:text-red-500"}}'
+    >
+      {{~@label~}}
     </label>
   {{/if}}
 
@@ -12,7 +16,7 @@
   {{/if}}
 
   {{#if @helper}}
-    <div class="mt-1 text-sm">
+    <div class='mt-1 text-sm'>
       {{@helper}}
     </div>
   {{/if}}
diff --git a/app/components/form/input.hbs b/app/components/form/input.hbs
index fa734ce..3e37577 100644
--- a/app/components/form/input.hbs
+++ b/app/components/form/input.hbs
@@ -1,27 +1,22 @@
-<div class="mb-4">
-  {{#if @label}}
-    <label for={{this.id}} class="block font-medium mb-1 text-dark {{if @required "after:content-['*'] after:text-red-500"}}">
-      {{~@label~}}
-    </label>
-  {{/if}}
-  <div class="relative flex items-center border rounded-md">
+<Form::Element
+  @label={{@label}}
+  @for={{this.id}}
+  @required={{@required}}
+  @helper={{@helper}}
+>
+  <div class='relative flex items-center border rounded-md'>
     {{#if @prefixIcon}}
-      <@prefixIcon class="h-8 w-8 pl-2" />
+      <@prefixIcon class='h-8 w-8 pl-2' />
     {{/if}}
     <input
-      type="text"
+      type='text'
       name={{@name}}
       id={{this.id}}
-      class="block w-full p-2 bg-transparent focus:outline-none"
+      class='block w-full p-2 bg-transparent focus:outline-none'
       placeholder={{@placeholder}}
       value={{@value}}
       required={{@required}}
       {{on 'input' this.onChange}}
     />
   </div>
-  {{#if @helper}}
-    <div class="mt-1 text-sm">
-      {{@helper}}
-    </div>
-  {{/if}}
-</div>
+</Form::Element>
diff --git a/app/components/form/textarea.hbs b/app/components/form/textarea.hbs
index 908956c..6695e6a 100644
--- a/app/components/form/textarea.hbs
+++ b/app/components/form/textarea.hbs
@@ -1,26 +1,16 @@
-<div class='mb-4'>
-  {{#if @label}}
-    <label for={{this.id}} class='block font-medium mb-1 text-dark'>
-      {{@label}}
-    </label>
-  {{/if}}
-  <div class='relative flex items-center border rounded-md'>
-    {{#if @prefixIcon}}
-      <@prefixIcon class='h-8 w-8 pl-2' />
-    {{/if}}
-    <Textarea
-      type='text'
-      name={{@name}}
-      id={{this.id}}
-      class='block w-full p-2 bg-transparent focus:outline-none'
-      placeholder={{@placeholder}}
-      @value={{@value}}
-      {{on 'change' this.onChange}}
-    />
-  </div>
-  {{#if @helper}}
-    <div class='mt-1 text-sm'>
-      {{@helper}}
-    </div>
-  {{/if}}
-</div>
+<Form::Element
+  @label={{@label}}
+  @for={{this.id}}
+  @required={{@required}}
+  @helper={{@helper}}
+>
+  <Textarea
+    type='text'
+    name={{@name}}
+    id={{this.id}}
+    class='block w-full p-2 bg-transparent border rounded-md focus:outline-none'
+    placeholder={{@placeholder}}
+    @value={{@value}}
+    {{on 'change' this.onChange}}
+  />
+</Form::Element>
diff --git a/app/components/form/textarea.js b/app/components/form/textarea.js
index 5b45456..f655fc0 100644
--- a/app/components/form/textarea.js
+++ b/app/components/form/textarea.js
@@ -1,20 +1,3 @@
-import Component from '@glimmer/component';
-import { guidFor } from '@ember/object/internals';
-import { action } from '@ember/object';
+import FormInputComponent from './input';
 
-export default class FormTextareaComponent extends Component {
-  get guid() {
-    return guidFor(this);
-  }
-
-  get id() {
-    return this.args.id ?? this.guid;
-  }
-
-  @action
-  onChange(event) {
-    if (this.args.onChange) {
-      this.args.onChange(event.target.value, event);
-    }
-  }
-}
+export default class FormTextareaComponent extends FormInputComponent {}