diff --git a/src/app/components/Form/HostField.vue b/src/app/components/Form/HostField.vue
new file mode 100644
index 00000000..efa7c840
--- /dev/null
+++ b/src/app/components/Form/HostField.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="flex items-center">
+    <FormLabel :for="id">
+      {{ label }}
+    </FormLabel>
+    <BaseTooltip v-if="description" :text="description">
+      <IconsInfo class="size-4" />
+    </BaseTooltip>
+  </div>
+  <div class="flex">
+    <BaseInput
+      :id="id"
+      v-model.trim="data"
+      :name="id"
+      type="text"
+      class="w-full"
+    />
+    <BaseButton type="button" @click="data = ''">
+      <div class="flex items-center gap-3">
+        <IconsSparkles class="w-4" />
+        <span>Suggest</span>
+      </div>
+    </BaseButton>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  id: string;
+  label: string;
+  description?: string;
+}>();
+
+const data = defineModel<string>();
+</script>
diff --git a/src/app/components/Icons/Sparkles.vue b/src/app/components/Icons/Sparkles.vue
new file mode 100644
index 00000000..72777b5f
--- /dev/null
+++ b/src/app/components/Icons/Sparkles.vue
@@ -0,0 +1,7 @@
+<template>
+  <SparklesIcon />
+</template>
+
+<script lang="ts" setup>
+import SparklesIcon from '@heroicons/vue/24/outline/esm/SparklesIcon';
+</script>
diff --git a/src/app/pages/admin/config.vue b/src/app/pages/admin/config.vue
index 80d868bb..2672306b 100644
--- a/src/app/pages/admin/config.vue
+++ b/src/app/pages/admin/config.vue
@@ -3,7 +3,7 @@
     <FormElement @submit.prevent="submit">
       <FormGroup>
         <FormHeading>{{ $t('admin.config.connection') }}</FormHeading>
-        <FormTextField
+        <FormHostField
           id="host"
           v-model="data.host"
           :label="$t('general.host')"