diff --git a/src/page/Home.vue b/src/page/Home.vue
index 2274680..b39fc56 100644
--- a/src/page/Home.vue
+++ b/src/page/Home.vue
@@ -3,75 +3,53 @@
     <div class="col-span-3 flex flex-col gap-4 lg:gap-6">
       <div class="drop-shadow-md rounded-md border border-zinc-300 p-5">
         <div>
-          <label class="block text-sm font-medium text-gray-700" for="heading">Heading</label>
-          <input type="text" class="mt-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-model="heading" id="heading">
-          <input type="range" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" min="1" max="10" step="0.1" v-model="headingSize" id="heading-size">
+          <InputForm id="heading" label="Heading" v-model="heading" />
+          <RangeForm id="heading-size" min="1" max="10" step="0.1" v-model="headingSize" />
         </div>
 
         <div class="py-6">
-          <label class="block text-sm font-medium text-gray-700" for="subheading">Subheading</label>
-          <textarea class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-model="subheading" id="subheading"></textarea>
-          <input type="range" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" min="1" max="10" step="0.1" v-model="subheadingSize" id="subheading-size">
+          <TextareaForm id="subheading" label="Subheading" v-model="subheading" />
+          <RangeForm id="subheading-size" min="1" max="10" step="0.1" v-model="subheadingSize" />
         </div>
 
         <div class="pb-6">
-          <label class="block text-sm font-medium text-gray-700" for="subheading">Font</label>
-
-          <select v-model="font" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
-            <option v-for="font in fonts" :key="font.value" :value="font.value" v-text="font.label"></option>
-          </select>
+          <SelectForm id="font" :items="fonts" label="Font" v-model="font" />
         </div>
 
         <div>
           <div class="text-center stroke-gray-400">
-            <button v-on:click="headingAlign = 'left'">
-              <svg class="inline border-gray-400 rounded-md" :class="{border: headingAlign === 'left'}" height="40" viewBox="0 0 21 21" width="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="m4.5 6.5h12"/><path d="m4.498 10.5h5.997"/><path d="m4.5 14.5h9.995"/></g></svg>
-            </button>
-
-            <button v-on:click="headingAlign = 'center'">
-              <svg class="inline border-gray-400 rounded-md" :class="{border: headingAlign === 'center'}" height="40" viewBox="0 0 21 21" width="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="m4.5 6.5h12"/><path d="m7.498 10.5h5.997"/><path d="m5.5 14.5h9.995"/></g></svg>
-            </button>
-
-            <button v-on:click="headingAlign = 'right'">
-              <svg class="inline border-gray-400 rounded-md" :class="{border: headingAlign === 'right'}" height="40" viewBox="0 0 21 21" width="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="m4.5 6.5h12"/><path d="m10.498 10.5h5.997"/><path d="m6.5 14.5h9.995"/></g></svg>
-            </button>
+            <AlignForm v-model="headingAlign" />
           </div>
         </div>
       </div>
 
       <div class="drop-shadow-md rounded-md border border-zinc-300 p-5">
         <div>
-          <label class="block text-sm font-medium text-gray-700" for="author">Author</label>
-          <input type="text" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-model="author" id="author">
+          <InputForm id="author" label="Author" v-model="author" />
         </div>
 
         <div class="py-6">
-          <label class="block text-sm font-medium text-gray-700" for="avatar">Avatar</label>
-          <input type="file" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-on:change="updateAvatar" id="avatar">
+          <FileForm id="avatar" label="Avatar" v-model="avatar" />
         </div>
 
         <div>
-          <label class="block text-sm font-medium text-gray-700" for="logo">Logo</label>
-          <input type="file" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-on:change="updateLogo" id="logo">
+          <FileForm id="logo" label="Logo" v-model="logo" />
         </div>
       </div>
     </div>
     <div class="col-span-3 px-10 flex flex-col gap-4 lg:gap-6">
       <div class="drop-shadow-md rounded-md border border-zinc-300 p-5">
         <div>
-          <label class="block text-sm font-medium text-gray-700" for="text-color">Text color</label>
-          <input type="color" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-model="textColor" id="text-color">
+          <InputForm id="text-color" label="Text color" type="color" v-model="textColor" />
         </div>
 
         <div class="py-6">
-          <label class="block text-sm font-medium text-gray-700" for="background">Background</label>
-          <input type="file" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-on:change="updateBackground" id="background">
+          <FileForm id="background" label="Background" v-model="background" />
         </div>
 
         <div>
-          <label class="block text-sm font-medium text-gray-700" for="background-hover">Background hover</label>
-          <input type="color" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-model="backgroundHover" id="background-hover">
-          <input type="range" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" min="0" max="1" step="0.1" v-model="backgroundHoverOpacity" id="background-hover-opacity">
+          <InputForm id="background-hover" label="Background hover" type="color" v-model="backgroundHover" />
+          <RangeForm id="background-hover-opacity" min="0" max="1" step="0.05" v-model="backgroundHoverOpacity" />
         </div>
       </div>
       <div class="drop-shadow-md rounded-md border border-zinc-300 p-5">
@@ -79,17 +57,15 @@
           <label class="block text-sm font-medium text-gray-700" for="width">Size and quality</label>
 
           <div class="grid grid-cols-2 gap-x-4">
-            <input type="number" class="mt-1 inline rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-model="width" id="width">
-            <input type="number" class="mt-1 inline rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-model="height">
+            <InputForm id="width" type="number" v-model="width" />
+            <InputForm id="height" type="number" v-model="height" />
           </div>
 
-          <input type="range" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" min="0" max="1" step="0.1" v-model="quality">
+          <RangeForm id="quality" min="0" max="1" step="0.05" v-model="quality" />
         </div>
 
         <div>
-          <label class="block text-sm font-medium text-gray-700" for="width">Box padding</label>
-
-          <input type="range" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" min="2.5" max="10" step="0.1" v-model="contentPadding">
+          <RangeForm id="content-padding" min="2.5" max="10" step="0.05" v-model="contentPadding" label="Box padding" />
         </div>
       </div>
     </div>
@@ -115,13 +91,9 @@
         </div>
       </div>
 
-      <div class="rounded-md text-center" role="group">
-        <button type="button" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-l-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white" v-on:click="downloadAsPng">
-          PNG
-        </button>
-        <button type="button" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-r-md hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white" v-on:click="downloadAsJpeg">
-          JPEG
-        </button>
+      <div class="text-center">
+        <DownloadButton v-on:click="downloadAsPng" class="rounded-l-md" label="PNG"/>
+        <DownloadButton v-on:click="downloadAsJpeg" class="rounded-r-md" label="JPEG"/>
       </div>
     </div>
   </div>
@@ -153,10 +125,25 @@
 
 <script>
 import { hexToRgb } from '../util/color'
-import { toBase64 } from '../util/file'
 import { toPng, toJpeg } from 'html-to-image'
+import InputForm from '../ui/InputForm'
+import RangeForm from '../ui/RangeForm'
+import TextareaForm from '../ui/TextareaForm'
+import FileForm from '../ui/FileForm'
+import SelectForm from '../ui/SelectForm'
+import AlignForm from '../ui/AlignForm'
+import DownloadButton from '../ui/DownloadButton'
 
 export default {
+  components: {
+    InputForm,
+    RangeForm,
+    TextareaForm,
+    FileForm,
+    SelectForm,
+    AlignForm,
+    DownloadButton,
+  },
   data() {
     return {
       author: localStorage.getItem('author'),
@@ -239,15 +226,6 @@ export default {
         padding: `${this.contentPadding}em`,
       }
     },
-    async updateBackground(event) {
-      this.background = await this.convertFileToBase64(event.target.files)
-    },
-    async updateLogo(event) {
-      this.logo = await this.convertFileToBase64(event.target.files)
-    },
-    async updateAvatar(event) {
-      this.avatar = await this.convertFileToBase64(event.target.files)
-    },
     downloadAsPng() {
       return this.download(toPng, 'image.png')
     },
@@ -275,13 +253,6 @@ export default {
           console.error('oops, something went wrong!', error);
         })
     },
-    async convertFileToBase64(files) {
-      if (files.length) {
-        return await toBase64(files[0])
-      }
-
-      return null
-    },
     updateOgMaxWidth() {
       this.$refs.og.style.display = 'none'
       this.ogMaxWidth = this.$refs.ogwrapper.offsetWidth
diff --git a/src/ui/AlignForm.vue b/src/ui/AlignForm.vue
new file mode 100644
index 0000000..0617481
--- /dev/null
+++ b/src/ui/AlignForm.vue
@@ -0,0 +1,32 @@
+<template>
+  <button v-on:click="update('left')">
+    <svg class="inline border-gray-400 rounded-md" :class="{border: modelValue === 'left'}" height="40" viewBox="0 0 21 21" width="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="m4.5 6.5h12"/><path d="m4.498 10.5h5.997"/><path d="m4.5 14.5h9.995"/></g></svg>
+  </button>
+
+  <button v-on:click="update('center')">
+    <svg class="inline border-gray-400 rounded-md" :class="{border: modelValue === 'center'}" height="40" viewBox="0 0 21 21" width="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="m4.5 6.5h12"/><path d="m7.498 10.5h5.997"/><path d="m5.5 14.5h9.995"/></g></svg>
+  </button>
+
+  <button v-on:click="update('right')">
+    <svg class="inline border-gray-400 rounded-md" :class="{border: modelValue === 'right'}" height="40" viewBox="0 0 21 21" width="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="m4.5 6.5h12"/><path d="m10.498 10.5h5.997"/><path d="m6.5 14.5h9.995"/></g></svg>
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    modelValue: {
+    },
+    label: {
+      type: String,
+      required: false,
+    },
+  },
+  emits: ['update:modelValue'],
+  methods: {
+    update(value) {
+      this.$emit('update:modelValue', value)
+    },
+  }
+}
+</script>
diff --git a/src/ui/DownloadButton.vue b/src/ui/DownloadButton.vue
new file mode 100644
index 0000000..7c93421
--- /dev/null
+++ b/src/ui/DownloadButton.vue
@@ -0,0 +1,24 @@
+<template>
+  <button
+    type="button"
+    class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white" v-on:click="downloadAsJpeg"
+    :class="class"
+    v-text="label"
+  >
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    class: {
+      type: String,
+      required: false,
+    },
+  }
+}
+</script>
diff --git a/src/ui/FileForm.vue b/src/ui/FileForm.vue
new file mode 100644
index 0000000..751fb80
--- /dev/null
+++ b/src/ui/FileForm.vue
@@ -0,0 +1,43 @@
+<template>
+  <label class="block text-sm font-medium text-gray-700" :for="id" v-if="label" v-text="label"></label>
+  <input
+    class="mt-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+    type="file"
+    :id="id"
+    :class="class"
+    @change="convertFileToBase64($event.target.files)"
+  />
+</template>
+
+<script>
+import { toBase64 } from '../util/file'
+
+export default {
+  props: {
+    modelValue: {
+    },
+    label: {
+      type: String,
+      required: false,
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+    class: {
+      type: String,
+      required: false,
+    },
+  },
+  emits: ['update:modelValue'],
+  methods: {
+    async convertFileToBase64(files) {
+      if (files.length) {
+        const value = await toBase64(files[0])
+
+        this.$emit('update:modelValue', value)
+      }
+    },
+  }
+}
+</script>
diff --git a/src/ui/InputForm.vue b/src/ui/InputForm.vue
new file mode 100644
index 0000000..906b1c0
--- /dev/null
+++ b/src/ui/InputForm.vue
@@ -0,0 +1,39 @@
+<template>
+  <label class="block text-sm font-medium text-gray-700" :for="id" v-if="label" v-text="label"></label>
+  <input
+    class="mt-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+    :type="type"
+    :id="id"
+    :value="modelValue"
+    :class="class"
+    @change="$emit('change', $event)"
+    @input="$emit('update:modelValue', $event.target.value)"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    modelValue: {
+    },
+    label: {
+      type: String,
+      required: false,
+    },
+    type: {
+      type: String,
+      required: false,
+      default: 'text'
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+    "class": {
+      type: String,
+      required: false,
+    },
+  },
+  emits: ['update:modelValue'],
+}
+</script>
diff --git a/src/ui/RangeForm.vue b/src/ui/RangeForm.vue
new file mode 100644
index 0000000..0ad0c98
--- /dev/null
+++ b/src/ui/RangeForm.vue
@@ -0,0 +1,51 @@
+<template>
+  <label class="block text-sm font-medium text-gray-700" :for="id" v-if="label" v-text="label"></label>
+  <input
+    class="mt-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+    type="range"
+    :min="min"
+    :max="max"
+    :step="step"
+    :id="id"
+    :class="class"
+    :value="modelValue"
+    @input="$emit('update:modelValue', $event.target.value)"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    modelValue: {
+    },
+    label: {
+      type: String,
+      required: false,
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+    min: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    max: {
+      type: Number,
+      required: false,
+      default: 100,
+    },
+    step: {
+      type: Number,
+      required: false,
+      default: 0.1,
+    },
+    "class": {
+      type: String,
+      required: false,
+    },
+  },
+  emits: ['update:modelValue'],
+}
+</script>
diff --git a/src/ui/SelectForm.vue b/src/ui/SelectForm.vue
new file mode 100644
index 0000000..f1d7079
--- /dev/null
+++ b/src/ui/SelectForm.vue
@@ -0,0 +1,38 @@
+<template>
+  <label class="block text-sm font-medium text-gray-700" :for="id" v-if="label" v-text="label"></label>
+  <select
+    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+  :id="id"
+  :class="class"
+  :value="modelValue"
+  @input="$emit('update:modelValue', $event.target.value)"
+>
+    <option v-for="item in items" :key="item.value" :value="item.value" v-text="item.label"></option>
+  </select>
+</template>
+
+<script>
+export default {
+  props: {
+    modelValue: {
+    },
+    label: {
+      type: String,
+      required: false,
+    },
+    items: {
+      type: Array,
+      required: true,
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+    "class": {
+      type: String,
+      required: false,
+    },
+  },
+  emits: ['update:modelValue'],
+}
+</script>
diff --git a/src/ui/TextareaForm.vue b/src/ui/TextareaForm.vue
new file mode 100644
index 0000000..7d32514
--- /dev/null
+++ b/src/ui/TextareaForm.vue
@@ -0,0 +1,37 @@
+<template>
+  <label class="block text-sm font-medium text-gray-700" :for="id" v-if="label" v-text="label"></label>
+  <textarea
+    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+    :id="id"
+    :class="class"
+    :value="modelValue"
+    @input="$emit('update:modelValue', $event.target.value)"
+    ></textarea>
+</template>
+
+<script>
+export default {
+  props: {
+    modelValue: {
+    },
+    label: {
+      type: String,
+      required: false,
+    },
+    type: {
+      type: String,
+      required: false,
+      defaut: 'text'
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+    "class": {
+      type: String,
+      required: false,
+    },
+  },
+  emits: ['update:modelValue'],
+}
+</script>