diff --git a/src/components/Controls/Textbox/BasicTextbox.vue b/src/components/Controls/Textbox/BasicTextbox.vue
deleted file mode 100644
index 1dbd482..0000000
--- a/src/components/Controls/Textbox/BasicTextbox.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import MaterialIcon from '@/components/MaterialIcon.vue'
-import { ref } from 'vue'
-
-const {
-  disabled = false,
-  error = false,
-  placeholder = '',
-  isPassword = false
-} = defineProps<{
-  disabled?: boolean
-  error?: boolean
-  placeholder?: string
-  isPassword?: boolean
-}>()
-const value = defineModel<string>('value')
-const passwordShown = ref(false)
-</script>
-
-<template>
-  <div class="relative inline-block">
-    <input
-      v-model="value"
-      :class="[
-        { 'border-border-secondary outline-text-primary focus:border-text-primary': !error },
-        { 'border-status-error outline outline-1 outline-status-error': error },
-        { 'pr-11.5': isPassword },
-        'fontstyle-ui-body max-w-full rounded border bg-background-primary px-4 py-1 text-text-primary placeholder:text-text-tertiary focus:outline focus:outline-1 disabled:bg-background-secondary'
-      ]"
-      :disabled="disabled"
-      :placeholder="placeholder"
-      :type="isPassword && !passwordShown ? 'password' : 'text'"
-    />
-    <span v-if="isPassword" class="absolute right-4 top-1.75 select-none" @click="() => passwordShown = !passwordShown">
-      <MaterialIcon :icon="passwordShown ? 'visibility_off' : 'visibility'" size="1.25rem"/>
-    </span>
-  </div>
-</template>
-
-<style scoped></style>
diff --git a/src/components/Controls/Textbox/EmailTextbox.vue b/src/components/Controls/Textbox/EmailTextbox.vue
new file mode 100644
index 0000000..f8cd2ee
--- /dev/null
+++ b/src/components/Controls/Textbox/EmailTextbox.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import MaterialIcon from '@/components/MaterialIcon.vue'
+import TextboxLabel from '@/components/Controls/Textbox/TextboxLabel.vue'
+
+const { errorMessage = '', label = '' } = defineProps<{
+  disabled?: boolean
+  errorMessage?: string
+  isRequired?: boolean
+  label?: string
+  placeholder?: string
+  autocomplete?: string
+}>()
+const value = defineModel<string>()
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <TextboxLabel v-if="label != ''" :is-required="isRequired" :label="label" />
+    <input
+      v-model="value"
+      :autocomplete="autocomplete"
+      :class="[
+        {
+          'border-border-secondary outline-text-primary focus:border-text-primary':
+            errorMessage == ''
+        },
+        { 'border-status-error outline outline-1 outline-status-error': errorMessage != '' },
+        'fontstyle-ui-body w-full rounded border bg-background-primary py-1 pl-4 text-text-primary placeholder:text-text-tertiary focus:outline focus:outline-1 disabled:bg-background-secondary'
+      ]"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      type="email"
+    />
+    <div v-if="errorMessage != ''" class="flex items-start gap-2 pl-1 text-status-error">
+      <MaterialIcon icon="error" size="1.25rem" />
+      <span class="fontstyle-ui-control">{{ errorMessage }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/components/Controls/Textbox/PasswordTextbox.vue b/src/components/Controls/Textbox/PasswordTextbox.vue
new file mode 100644
index 0000000..285532e
--- /dev/null
+++ b/src/components/Controls/Textbox/PasswordTextbox.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import MaterialIcon from '@/components/MaterialIcon.vue'
+import TextboxLabel from '@/components/Controls/Textbox/TextboxLabel.vue'
+import { ref } from 'vue'
+
+const { errorMessage = '', label = '' } = defineProps<{
+  disabled?: boolean
+  errorMessage?: string
+  isRequired?: boolean
+  label?: string
+  placeholder?: string
+  autocomplete?: string
+}>()
+const value = defineModel<string>()
+const passwordShown = ref<boolean>(false)
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <TextboxLabel v-if="label != ''" :is-required="isRequired" :label="label" />
+    <span class="relative">
+      <input
+        v-model="value"
+        :class="[
+          {
+            'border-border-secondary outline-text-primary focus:border-text-primary':
+              errorMessage == ''
+          },
+          { 'border-status-error outline outline-1 outline-status-error': errorMessage != '' },
+          'fontstyle-ui-body w-full rounded border bg-background-primary py-1 pl-4 pr-11.5 text-text-primary placeholder:text-text-tertiary focus:outline focus:outline-1 disabled:bg-background-secondary'
+        ]"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :type="passwordShown ? 'text' : 'password'"
+        :autocomplete="autocomplete"
+      />
+      <span
+        class="absolute right-4 top-1.75 select-none"
+        @click="() => (passwordShown = !passwordShown)"
+      >
+        <MaterialIcon :icon="passwordShown ? 'visibility_off' : 'visibility'" size="1.25rem" />
+      </span>
+    </span>
+    <div v-if="errorMessage != ''" class="flex items-start gap-2 pl-1 text-status-error">
+      <MaterialIcon icon="error" size="1.25rem" />
+      <span class="fontstyle-ui-control">{{ errorMessage }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/components/Controls/Textbox/DecoratedTextbox.vue b/src/components/Controls/Textbox/PlainTextbox.vue
similarity index 52%
rename from src/components/Controls/Textbox/DecoratedTextbox.vue
rename to src/components/Controls/Textbox/PlainTextbox.vue
index c76da9c..163072c 100644
--- a/src/components/Controls/Textbox/DecoratedTextbox.vue
+++ b/src/components/Controls/Textbox/PlainTextbox.vue
@@ -1,32 +1,36 @@
 <script setup lang="ts">
-import BasicTextbox from '@/components/Controls/Textbox/BasicTextbox.vue'
 import MaterialIcon from '@/components/MaterialIcon.vue'
 import TextboxLabel from '@/components/Controls/Textbox/TextboxLabel.vue'
 
 const { errorMessage = '', label = '' } = defineProps<{
   disabled?: boolean
   errorMessage?: string
-  isPassword?: boolean
   isRequired?: boolean
   label?: string
   placeholder?: string
+  autocomplete?: string
 }>()
-const value = defineModel<string>('value')
+const value = defineModel<string>()
 </script>
 
 <template>
   <div class="flex flex-col gap-2">
     <TextboxLabel v-if="label != ''" :is-required="isRequired" :label="label" />
-    <div>
-      <BasicTextbox
-        v-model="value"
-        class="w-full"
-        :disabled
-        :error="errorMessage != ''"
-        :is-password="isPassword"
-        :placeholder="placeholder"
-      />
-    </div>
+    <input
+      v-model="value"
+      :autocomplete="autocomplete"
+      :class="[
+        {
+          'border-border-secondary outline-text-primary focus:border-text-primary':
+            errorMessage == ''
+        },
+        { 'border-status-error outline outline-1 outline-status-error': errorMessage != '' },
+        'fontstyle-ui-body w-full rounded border bg-background-primary py-1 pl-4 text-text-primary placeholder:text-text-tertiary focus:outline focus:outline-1 disabled:bg-background-secondary'
+      ]"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      type="text"
+    />
     <div v-if="errorMessage != ''" class="flex items-start gap-2 pl-1 text-status-error">
       <MaterialIcon icon="error" size="1.25rem" />
       <span class="fontstyle-ui-control">{{ errorMessage }}</span>