diff --git a/playground/docus/app/pages/authors.vue b/playground/docus/app/pages/authors.vue
index 9f8c7ff6..2d7ea351 100644
--- a/playground/docus/app/pages/authors.vue
+++ b/playground/docus/app/pages/authors.vue
@@ -1,46 +1,132 @@
 <script setup lang="ts">
 const { data: page } = await useAsyncData('authors-page', () => queryCollection('pages').first())
 
-const { data: authors } = await useAsyncData('authors-list', () => queryCollection('authors').all())
+const { data: authors } = await useAsyncData('authors-list', () => queryCollection('authors').order('order', 'ASC').all())
+
+const roleConfig: Record<string, { color: 'warning' | 'info' | 'success', icon: string }> = {
+  creator: { color: 'warning', icon: 'i-lucide-crown' },
+  maintainer: { color: 'info', icon: 'i-lucide-shield-check' },
+  contributor: { color: 'success', icon: 'i-lucide-git-pull-request' },
+}
+
+function formatDate(date: string | Date | undefined): string {
+  if (!date) return ''
+  const d = new Date(date)
+  return d.toLocaleDateString('en-US', { month: 'short', year: 'numeric' })
+}
 </script>
 
 <template>
-  <div>
-    <UContainer>
-      <ContentRenderer :value="page" />
-      <div class="flex flex-col gap-2">
-        <UUser
-          v-for="author in authors"
-          :key="author.name"
-          :name="author.name"
-          :description="author.username ? `@${author.username}` : ''"
-          :avatar="author.avatar"
-          :to="author.to"
+  <UContainer>
+    <ContentRenderer
+      v-if="page"
+      :value="page"
+    />
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <UCard
+        v-for="author in authors"
+        :key="author.name"
+        class="group hover:ring-2 hover:ring-primary/50 transition-all duration-200 relative overflow-visible"
+      >
+        <UBadge
+          v-if="author.isOpenSourceLover"
+          color="primary"
+          size="sm"
+          class="absolute -top-2 -right-2 z-10"
+          title="Open Source Lover"
         >
-          <template #name>
-            <div class="flex gap-2">
-              <span class="text-sm font-medium">{{ author.name }}</span>
-              <span class="text-sm text-muted">
-                - {{ author.username ? `@${author.username}` : '' }}
-              </span>
-            </div>
-          </template>
-
-          <template #description>
-            <div class="flex gap-2">
-              <UBadge
-                v-for="module in author.modules"
-                :key="module"
-                variant="soft"
-                size="xs"
-                color="neutral"
-              >
-                {{ module }}
-              </UBadge>
+          <UIcon
+            name="i-lucide-heart"
+            class="size-3"
+          />
+        </UBadge>
+
+        <div class="flex flex-col items-center text-center gap-4">
+          <div class="relative">
+            <UAvatar
+              :src="author.avatar?.src"
+              :alt="author.avatar?.alt || author.name"
+              size="3xl"
+              class="ring-4 ring-muted group-hover:ring-primary/30 transition-all duration-200"
+            />
+            <div
+              v-if="author.icon"
+              class="absolute -bottom-2 -left-2 size-7 flex items-center justify-center bg-elevated rounded-full ring-2 ring-default"
+            >
+              <UIcon
+                :name="author.icon"
+                class="size-4 text-primary"
+              />
             </div>
-          </template>
-        </UUser>
-      </div>
-    </UContainer>
-  </div>
+          </div>
+
+          <div class="flex flex-col items-center gap-2">
+            <NuxtLink
+              :to="author.to"
+              target="_blank"
+              class="text-lg font-semibold text-highlighted hover:text-primary transition-colors"
+            >
+              {{ author.name }}
+            </NuxtLink>
+            <span
+              v-if="author.username"
+              class="text-sm text-muted"
+            >
+              @{{ author.username }}
+            </span>
+            <UBadge
+              v-if="author.role"
+              :color="roleConfig[author.role]?.color || 'neutral'"
+              variant="subtle"
+              size="xs"
+              class="capitalize"
+            >
+              <UIcon
+                :name="roleConfig[author.role]?.icon || 'i-lucide-user'"
+                class="size-3 mr-1"
+              />
+              {{ author.role }}
+            </UBadge>
+            <span
+              v-if="author.birthDate"
+              class="text-xs text-dimmed flex items-center gap-1"
+            >
+              <UIcon
+                name="i-lucide-cake"
+                class="size-3"
+              />
+              {{ formatDate(author.birthDate) }}
+            </span>
+          </div>
+
+          <div
+            v-if="author.modules?.length"
+            class="flex flex-wrap justify-center gap-1.5"
+          >
+            <UBadge
+              v-for="module in author.modules"
+              :key="module"
+              variant="outline"
+              size="sm"
+              color="neutral"
+            >
+              {{ module }}
+            </UBadge>
+          </div>
+
+          <UButton
+            :to="author.to"
+            target="_blank"
+            variant="subtle"
+            color="neutral"
+            size="sm"
+            trailing-icon="i-lucide-external-link"
+            class="mt-2"
+          >
+            View Profile
+          </UButton>
+        </div>
+      </UCard>
+    </div>
+  </UContainer>
 </template>
diff --git a/playground/docus/content.config.ts b/playground/docus/content.config.ts
index 0918172c..3b4c8053 100644
--- a/playground/docus/content.config.ts
+++ b/playground/docus/content.config.ts
@@ -14,11 +14,16 @@ const createDocsSchema = () => z.object({
 const createAuthorsSchema = () => z.object({
   name: z.string(),
   avatar: z.object({
-    src: z.string(),
+    src: z.string().editor({ input: 'media' }),
     alt: z.string(),
   }),
   to: z.string(),
   username: z.string(),
+  role: z.enum(['creator', 'maintainer', 'contributor']).default('contributor'),
+  order: z.number().default(0),
+  birthDate: z.date(),
+  icon: z.string().editor({ input: 'icon', iconLibraries: ['lucide'] }),
+  isOpenSourceLover: z.boolean().default(true),
   modules: z.array(z.string()),
 })
 
diff --git a/playground/docus/content/authors/atinux.yml b/playground/docus/content/authors/atinux.yml
index 4738f542..ec36ae96 100644
--- a/playground/docus/content/authors/atinux.yml
+++ b/playground/docus/content/authors/atinux.yml
@@ -1,8 +1,13 @@
 name: Sébastien Chopin
 avatar:
-  src: https://avatars.githubusercontent.com/u/904724?v=4
+  src: /atinux.jpeg
 to: https://x.com/atinux
 username: atinux
+role: creator
+order: 1
+birthDate: 1992-11-23
+icon: i-lucide-rocket
+isOpenSourceLover: true
 modules:
   - hub
   - ui
diff --git a/playground/docus/content/authors/farnabaz.md b/playground/docus/content/authors/farnabaz.md
index aab08517..735cec52 100644
--- a/playground/docus/content/authors/farnabaz.md
+++ b/playground/docus/content/authors/farnabaz.md
@@ -1,9 +1,14 @@
 ---
 name: Ahad Birang
 avatar:
-  src: https://avatars.githubusercontent.com/u/2047945?v=4
+  src: /farnabaz.jpeg
 to: https://x.com/farnabaz
 username: farnabaz
+role: maintainer
+order: 2
+birthDate: 1990-08-10
+icon: i-lucide-code
+isOpenSourceLover: true
 modules:
   - studio
   - content
diff --git a/playground/docus/content/authors/larbish.json b/playground/docus/content/authors/larbish.json
index ffde193c..8bb90630 100644
--- a/playground/docus/content/authors/larbish.json
+++ b/playground/docus/content/authors/larbish.json
@@ -1,10 +1,15 @@
 {
   "name": "Baptiste Leproux",
   "avatar": {
-    "src": "https://avatars.githubusercontent.com/u/7290030?v=4"
+    "src": "/larbish.jpeg"
   },
   "to": "https://x.com/_larbish",
   "username": "larbish",
+  "role": "contributor",
+  "order": 3,
+  "birthDate": "1993-09-03",
+  "icon": "i-lucide-palette",
+  "isOpenSourceLover": true,
   "modules": [
     "studio",
     "content",
diff --git a/playground/docus/public/atinux.jpeg b/playground/docus/public/atinux.jpeg
new file mode 100644
index 00000000..31073eab
Binary files /dev/null and b/playground/docus/public/atinux.jpeg differ
diff --git a/playground/docus/public/farnabaz.jpeg b/playground/docus/public/farnabaz.jpeg
new file mode 100644
index 00000000..858b1caf
Binary files /dev/null and b/playground/docus/public/farnabaz.jpeg differ
diff --git a/playground/docus/public/larbish.jpeg b/playground/docus/public/larbish.jpeg
new file mode 100644
index 00000000..80170966
Binary files /dev/null and b/playground/docus/public/larbish.jpeg differ
diff --git a/src/app/src/components/form/FormPanelInput.vue b/src/app/src/components/form/FormPanelInput.vue
index bc586d2c..76965f8b 100644
--- a/src/app/src/components/form/FormPanelInput.vue
+++ b/src/app/src/components/form/FormPanelInput.vue
@@ -1,9 +1,16 @@
 <script setup lang="ts">
 import { titleCase } from 'scule'
-import type { FormItem, FormTree } from '../../types'
-import type { PropType } from 'vue'
+import type { FormItem, FormTree, FormInputsTypes } from '../../types'
+import type { Component, PropType } from 'vue'
 import { computed, ref, watch } from 'vue'
 import { applyValueById } from '../../utils/form'
+import FormInputArray from './input/FormInputArray.vue'
+import InputBoolean from './input/InputBoolean.vue'
+import InputDate from './input/InputDate.vue'
+import InputIcon from './input/InputIcon.vue'
+import InputMedia from './input/InputMedia.vue'
+import InputNumber from './input/InputNumber.vue'
+import InputText from './input/InputText.vue'
 
 const props = defineProps({
   formItem: {
@@ -16,27 +23,21 @@ const form = defineModel({ type: Object as PropType<FormTree>, default: () => ({
 
 const label = computed(() => titleCase(props.formItem.title))
 
-const placeholder = computed(() => {
-  switch (props.formItem.type) {
-    case 'string':
-      return `Enter ${props.formItem.title.toLowerCase()}...`
-    case 'number':
-      return '0'
-    default:
-      return ''
-  }
-})
+const typeComponentMap: Partial<Record<FormInputsTypes, Component>> = {
+  array: FormInputArray,
+  boolean: InputBoolean,
+  date: InputDate,
+  icon: InputIcon,
+  media: InputMedia,
+  number: InputNumber,
+  string: InputText,
+}
 
-const inputType = computed(() => {
-  switch (props.formItem.type) {
-    case 'number':
-      return 'number'
-    default:
-      return 'text'
-  }
-})
+const inputComponentName = computed(() => typeComponentMap[props.formItem.type] ?? InputText)
 
-const isArrayType = computed(() => props.formItem.type === 'array')
+const inputFormItem = computed(() => {
+  return props.formItem.type === 'array' ? props.formItem.arrayItemForm : props.formItem
+})
 
 // Initialize model value
 const model = ref(computeValue(props.formItem))
@@ -56,9 +57,7 @@ watch(() => props.formItem, (newFormItem) => {
 }, { deep: true })
 
 function computeValue(formItem: FormItem): unknown {
-  if (formItem.value !== undefined) {
-    return formItem.value
-  }
+  const value = formItem.value
 
   switch (formItem.type) {
     case 'string':
@@ -66,17 +65,17 @@ function computeValue(formItem: FormItem): unknown {
     case 'icon':
     case 'media':
     case 'file':
-      return ''
+      return typeof value === 'string' ? value : ''
     case 'boolean':
-      return false
+      return typeof value === 'boolean' ? value : false
     case 'number':
-      return 0
+      return typeof value === 'number' ? value : 0
     case 'array':
-      return []
+      return Array.isArray(value) ? value : []
     case 'object':
-      return {}
+      return value && typeof value === 'object' && !Array.isArray(value) ? value : {}
     default:
-      return null
+      return value ?? null
   }
 }
 </script>
@@ -87,22 +86,13 @@ function computeValue(formItem: FormItem): unknown {
     :label="label"
     :ui="{
       root: 'w-full mt-2',
-      label: 'text-xs font-medium tracking-tight',
+      label: 'text-xs font-semibold tracking-tight',
     }"
   >
-    <FormInputArray
-      v-if="isArrayType"
-      v-model="(model as unknown[])"
-      :form-item="formItem.arrayItemForm"
-    />
-    <UInput
-      v-else
-      :id="formItem.id"
-      v-model="(model as string | number)"
-      :placeholder="placeholder"
-      :type="inputType"
-      size="xs"
-      class="w-full"
+    <component
+      :is="inputComponentName"
+      v-model="model"
+      :form-item="inputFormItem"
     />
   </UFormField>
 </template>
diff --git a/src/app/src/components/form/input/FormInputArray.vue b/src/app/src/components/form/input/FormInputArray.vue
index d958c0a7..71821c90 100644
--- a/src/app/src/components/form/input/FormInputArray.vue
+++ b/src/app/src/components/form/input/FormInputArray.vue
@@ -111,8 +111,8 @@ function updateObjectItem(index: number, value: Record<string, unknown>) {
           :key="item.label"
           variant="subtle"
           color="neutral"
-          size="sm"
-          class="group/badge flex items-center gap-3 px-2 py-1 min-w-0"
+          size="xs"
+          class="min-w-0"
         >
           <UInput
             v-if="activeIndex === item.index"
diff --git a/src/app/src/components/form/input/InputBoolean.vue b/src/app/src/components/form/input/InputBoolean.vue
new file mode 100644
index 00000000..c5d03523
--- /dev/null
+++ b/src/app/src/components/form/input/InputBoolean.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const model = defineModel({ type: Boolean, default: false })
+</script>
+
+<template>
+  <USwitch
+    v-model="model"
+    size="xs"
+  />
+</template>
diff --git a/src/app/src/components/form/input/InputDate.vue b/src/app/src/components/form/input/InputDate.vue
new file mode 100644
index 00000000..ad2ae76d
--- /dev/null
+++ b/src/app/src/components/form/input/InputDate.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { FormItem } from '../../../types'
+import type { PropType } from 'vue'
+import { computed, ref } from 'vue'
+import { CalendarDate, type DateValue } from '@internationalized/date'
+
+defineProps({
+  formItem: {
+    type: Object as PropType<FormItem>,
+    default: () => ({}),
+  },
+})
+
+const model = defineModel<string>({ default: '' })
+const inputDate = ref()
+
+// Convert string to CalendarDate for the UInputDate component
+const dateValue = computed<DateValue | undefined>({
+  get() {
+    if (!model.value) return undefined
+    try {
+      const date = new Date(model.value)
+      if (Number.isNaN(date.getTime())) return undefined
+      return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate())
+    }
+    catch {
+      return undefined
+    }
+  },
+  set(value: DateValue | undefined) {
+    if (!value) {
+      model.value = ''
+      return
+    }
+    // Format as ISO date string (YYYY-MM-DD)
+    model.value = `${value.year}-${String(value.month).padStart(2, '0')}-${String(value.day).padStart(2, '0')}`
+  },
+})
+</script>
+
+<template>
+  <UInputDate
+    ref="inputDate"
+    v-model="dateValue"
+    size="xs"
+    class="w-full"
+  >
+    <template #trailing>
+      <UPopover :reference="inputDate?.inputsRef?.[3]?.$el">
+        <UButton
+          color="neutral"
+          variant="link"
+          size="xs"
+          icon="i-lucide-calendar"
+          :aria-label="$t('studio.form.date.selectDate')"
+          class="px-0"
+        />
+
+        <template #content>
+          <UCalendar
+            v-model="dateValue"
+            class="p-2"
+          />
+        </template>
+      </UPopover>
+    </template>
+  </UInputDate>
+</template>
diff --git a/src/app/src/components/form/input/InputIcon.vue b/src/app/src/components/form/input/InputIcon.vue
new file mode 100644
index 00000000..0cc6ecaa
--- /dev/null
+++ b/src/app/src/components/form/input/InputIcon.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import type { FormItem } from '../../../types'
+import type { PropType } from 'vue'
+import { ref, computed, watch } from 'vue'
+import { useDebounceFn } from '@vueuse/core'
+
+const props = defineProps({
+  formItem: {
+    type: Object as PropType<FormItem>,
+    default: () => ({}),
+  },
+})
+
+const model = defineModel<string>({ default: '' })
+
+const search = ref('')
+const icons = ref<string[]>([])
+const isLoading = ref(false)
+const popoverOpen = ref(false)
+
+// Get allowed libraries from form item options (iconLibraries from schema)
+const iconLibraries = computed(() => {
+  return props.formItem?.options || 'all'
+})
+
+// Fetch icons from Iconify API
+async function fetchIcons(query: string) {
+  if (!query || query.length < 2) {
+    icons.value = []
+    return
+  }
+
+  isLoading.value = true
+  try {
+    const prefixes = iconLibraries.value === 'all' ? '' : iconLibraries.value.join(',')
+    const response = await fetch(
+      `https://api.iconify.design/search?query=${encodeURIComponent(query)}&limit=30` + (prefixes ? `&prefixes=${prefixes}` : ''),
+    )
+    const data = await response.json()
+    icons.value = data.icons || []
+  }
+  catch {
+    icons.value = []
+  }
+  finally {
+    isLoading.value = false
+  }
+}
+
+const debouncedFetch = useDebounceFn(fetchIcons, 300)
+
+watch(search, (value) => {
+  debouncedFetch(value)
+})
+
+function selectIcon(icon: string) {
+  model.value = `i-${icon.replace(':', '-')}`
+  popoverOpen.value = false
+  search.value = ''
+  icons.value = []
+}
+</script>
+
+<template>
+  <div class="flex items-center gap-1">
+    <div class="flex items-center justify-center size-6 bg-accented rounded shrink-0">
+      <UIcon
+        v-if="model"
+        :name="model"
+        size="xs"
+      />
+      <UIcon
+        v-else
+        name="i-lucide-image"
+        class="text-dimmed"
+        size="xs"
+      />
+    </div>
+
+    <UInput
+      v-model="model"
+      :placeholder="$t('studio.form.icon.placeholder')"
+      size="xs"
+      class="flex-1"
+    >
+      <template #trailing>
+        <UPopover v-model:open="popoverOpen">
+          <UButton
+            size="xs"
+            color="neutral"
+            variant="none"
+            icon="i-lucide-search"
+            class="cursor-pointer"
+          />
+
+          <template #content>
+            <div class="p-3 w-72">
+              <UInput
+                v-model="search"
+                :placeholder="$t('studio.form.icon.searchPlaceholder')"
+                size="xs"
+                icon="i-lucide-search"
+                autofocus
+                class="mb-3 w-full"
+              />
+
+              <div
+                v-if="isLoading"
+                class="flex items-center justify-center py-4"
+              >
+                <UIcon
+                  name="i-lucide-loader-2"
+                  class="size-5 animate-spin text-muted"
+                />
+              </div>
+
+              <div
+                v-else-if="icons.length > 0"
+                class="grid grid-cols-6 gap-1.5 max-h-48 overflow-y-auto"
+              >
+                <UTooltip
+                  v-for="icon in icons"
+                  :key="icon"
+                  :text="icon"
+                >
+                  <UButton
+                    size="xs"
+                    color="neutral"
+                    variant="soft"
+                    :icon="`i-${icon.replace(':', '-')}`"
+                    class="flex items-center justify-center"
+                    @click="selectIcon(icon)"
+                  />
+                </UTooltip>
+              </div>
+
+              <p
+                v-else-if="search.length >= 2"
+                class="text-xs text-muted text-center py-4"
+              >
+                {{ $t('studio.form.icon.noIconsFound') }}
+              </p>
+
+              <p
+                v-else
+                class="text-xs text-muted text-center py-4"
+              >
+                {{ $t('studio.form.icon.searchHint') }}
+              </p>
+
+              <p class="text-xs text-dimmed mt-2">
+                {{ $t('studio.form.icon.libraries') }} {{ iconLibraries === 'all' ? $t('studio.form.icon.allLibraries') : iconLibraries.join(', ') }}
+              </p>
+            </div>
+          </template>
+        </UPopover>
+      </template>
+    </UInput>
+  </div>
+</template>
diff --git a/src/app/src/components/form/input/InputMedia.vue b/src/app/src/components/form/input/InputMedia.vue
new file mode 100644
index 00000000..bf77c0af
--- /dev/null
+++ b/src/app/src/components/form/input/InputMedia.vue
@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import type { FormItem, TreeItem } from '../../../types'
+import type { PropType } from 'vue'
+import { ref, computed } from 'vue'
+import { useStudio } from '../../../composables/useStudio'
+import { isImageFile } from '../../../utils/file'
+import { Image } from '@unpic/vue'
+
+defineProps({
+  formItem: {
+    type: Object as PropType<FormItem>,
+    default: () => ({}),
+  },
+})
+
+const model = defineModel<string>({ default: '' })
+
+const { mediaTree } = useStudio()
+
+const popoverOpen = ref(false)
+const search = ref('')
+
+// Collect all image files from media tree
+const allMediaFiles = computed(() => {
+  const medias: TreeItem[] = []
+
+  const collectMedias = (items: TreeItem[]) => {
+    for (const item of items) {
+      if (item.type === 'file' && isImageFile(item.fsPath)) {
+        medias.push(item)
+      }
+      if (item.children) {
+        collectMedias(item.children)
+      }
+    }
+  }
+
+  collectMedias(mediaTree.root.value)
+
+  return medias
+})
+
+// Filter by search and limit to 8
+const mediaFiles = computed(() => {
+  let files = allMediaFiles.value
+
+  if (search.value) {
+    const query = search.value.toLowerCase()
+    files = files.filter(file => file.name.toLowerCase().includes(query))
+  }
+
+  return files.slice(0, 8)
+})
+
+function selectMedia(media: TreeItem) {
+  model.value = media.routePath || media.fsPath
+  popoverOpen.value = false
+  search.value = ''
+}
+</script>
+
+<template>
+  <div class="flex items-center gap-1">
+    <div
+      class="flex items-center justify-center size-6 bg-accented rounded shrink-0 overflow-hidden"
+    >
+      <Image
+        v-if="model"
+        :src="model"
+        width="24"
+        height="24"
+        :alt="model"
+        class="size-6 object-cover"
+      />
+      <UIcon
+        v-else
+        name="i-lucide-image"
+        class="text-dimmed"
+        size="xs"
+      />
+    </div>
+
+    <UInput
+      v-model="model"
+      :placeholder="$t('studio.form.media.placeholder')"
+      size="xs"
+      class="flex-1"
+    >
+      <template #trailing>
+        <UPopover v-model:open="popoverOpen">
+          <UButton
+            size="xs"
+            color="neutral"
+            variant="none"
+            icon="i-lucide-search"
+            class="cursor-pointer"
+          />
+
+          <template #content>
+            <div class="p-3 w-80">
+              <UInput
+                v-model="search"
+                :placeholder="$t('studio.form.media.searchPlaceholder')"
+                size="xs"
+                icon="i-lucide-search"
+                autofocus
+                class="mb-3 w-full"
+              />
+
+              <div
+                v-if="mediaFiles.length === 0"
+                class="text-center py-4"
+              >
+                <UIcon
+                  name="i-lucide-image-off"
+                  class="size-8 mx-auto mb-2 text-muted"
+                />
+                <p class="text-xs text-muted">
+                  {{ search ? $t('studio.form.media.noImagesFound') : $t('studio.form.media.noImagesAvailable') }}
+                </p>
+              </div>
+
+              <div
+                v-else
+                class="grid grid-cols-4 gap-2"
+              >
+                <UTooltip
+                  v-for="media in mediaFiles"
+                  :key="media.fsPath"
+                  :text="media.name"
+                >
+                  <button
+                    type="button"
+                    class="aspect-square rounded-md cursor-pointer overflow-hidden border border-default hover:border-muted hover:ring-1 hover:ring-muted transition-all"
+                    style="background: repeating-linear-gradient(45deg, #d4d4d8 0 6px, #a1a1aa 0 12px), repeating-linear-gradient(-45deg, #a1a1aa 0 6px, #d4d4d8 0 12px); background-blend-mode: overlay; background-size: 12px 12px;"
+                    @click="selectMedia(media)"
+                  >
+                    <Image
+                      :src="media.routePath || media.fsPath"
+                      width="80"
+                      height="80"
+                      :alt="media.name"
+                      class="w-full h-full object-cover hover:scale-105 transition-transform duration-200"
+                    />
+                  </button>
+                </UTooltip>
+              </div>
+
+              <p
+                v-if="mediaFiles.length > 0"
+                class="text-xs text-dimmed mt-1"
+              >
+                {{ $t('studio.form.media.imageCount', { count: mediaFiles.length, total: allMediaFiles.length }, allMediaFiles.length) }}
+              </p>
+            </div>
+          </template>
+        </UPopover>
+      </template>
+    </UInput>
+  </div>
+</template>
diff --git a/src/app/src/components/form/input/InputNumber.vue b/src/app/src/components/form/input/InputNumber.vue
new file mode 100644
index 00000000..273c5f1d
--- /dev/null
+++ b/src/app/src/components/form/input/InputNumber.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { FormItem } from '../../../types'
+import type { PropType } from 'vue'
+
+defineProps({
+  formItem: {
+    type: Object as PropType<FormItem>,
+    default: () => ({}),
+  },
+})
+
+const model = defineModel<number>({ default: 0 })
+</script>
+
+<template>
+  <UInput
+    v-model="model"
+    type="number"
+    :placeholder="$t('studio.form.number.placeholder')"
+    size="xs"
+    class="w-full"
+  />
+</template>
diff --git a/src/app/src/components/form/input/InputText.vue b/src/app/src/components/form/input/InputText.vue
new file mode 100644
index 00000000..6a857ee7
--- /dev/null
+++ b/src/app/src/components/form/input/InputText.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { FormItem } from '../../../types'
+import type { PropType } from 'vue'
+import { computed } from 'vue'
+
+const props = defineProps({
+  formItem: {
+    type: Object as PropType<FormItem>,
+    default: () => ({}),
+  },
+})
+
+const model = defineModel<string | number>({ default: '' })
+
+const hasOptions = computed(() => props.formItem?.options && props.formItem.options.length > 0)
+
+const selectItems = computed(() => {
+  if (!props.formItem?.options) return []
+  return props.formItem.options.map(option => ({
+    label: option,
+    value: option,
+  }))
+})
+</script>
+
+<template>
+  <USelect
+    v-if="hasOptions"
+    v-model="(model as string)"
+    :items="selectItems"
+    :placeholder="$t('studio.form.text.selectPlaceholder')"
+    size="xs"
+    class="w-full"
+  />
+  <UInput
+    v-else
+    v-model="model"
+    :placeholder="$t('studio.form.text.placeholder')"
+    size="xs"
+    class="w-full"
+  />
+</template>
diff --git a/src/app/src/locales/ar.json b/src/app/src/locales/ar.json
index e5fa8d64..7191bfc6 100644
--- a/src/app/src/locales/ar.json
+++ b/src/app/src/locales/ar.json
@@ -300,6 +300,31 @@
       },
       "section": {
         "propertyCount": "خاصية واحدة | {count} خصائص"
+      },
+      "media": {
+        "placeholder": "مسار نسبي أو رابط عام...",
+        "searchPlaceholder": "بحث عن الصور...",
+        "noImagesFound": "لم يتم العثور على صور",
+        "noImagesAvailable": "لا توجد صور متاحة",
+        "imageCount": "{count} من {total} صورة | {count} من {total} صور"
+      },
+      "icon": {
+        "placeholder": "i-lucide-icon",
+        "searchPlaceholder": "بحث عن الأيقونات...",
+        "noIconsFound": "لم يتم العثور على أيقونات",
+        "searchHint": "اكتب حرفين على الأقل للبحث",
+        "libraries": "المكتبات:",
+        "allLibraries": "الكل"
+      },
+      "text": {
+        "placeholder": "أدخل النص...",
+        "selectPlaceholder": "اختر خياراً..."
+      },
+      "date": {
+        "selectDate": "اختر تاريخاً"
+      },
+      "number": {
+        "placeholder": "0"
       }
     }
   }
diff --git a/src/app/src/locales/bg.json b/src/app/src/locales/bg.json
index fed7d654..94537577 100644
--- a/src/app/src/locales/bg.json
+++ b/src/app/src/locales/bg.json
@@ -301,6 +301,31 @@
       },
       "section": {
         "propertyCount": "1 свойство | {count} свойства"
+      },
+      "media": {
+        "placeholder": "Относителен път или публичен URL...",
+        "searchPlaceholder": "Търсене на изображения...",
+        "noImagesFound": "Не са намерени изображения",
+        "noImagesAvailable": "Няма налични изображения",
+        "imageCount": "{count} от {total} изображение | {count} от {total} изображения"
+      },
+      "icon": {
+        "placeholder": "i-lucide-icon",
+        "searchPlaceholder": "Търсене на икони...",
+        "noIconsFound": "Не са намерени икони",
+        "searchHint": "Въведете поне 2 символа за търсене",
+        "libraries": "Библиотеки:",
+        "allLibraries": "Всички"
+      },
+      "text": {
+        "placeholder": "Въведете текст...",
+        "selectPlaceholder": "Изберете опция..."
+      },
+      "date": {
+        "selectDate": "Изберете дата"
+      },
+      "number": {
+        "placeholder": "0"
       }
     }
   }
diff --git a/src/app/src/locales/de.json b/src/app/src/locales/de.json
index 12d4dd33..79d635a7 100644
--- a/src/app/src/locales/de.json
+++ b/src/app/src/locales/de.json
@@ -301,6 +301,31 @@
       },
       "section": {
         "propertyCount": "1 Eigenschaft | {count} Eigenschaften"
+      },
+      "media": {
+        "placeholder": "Relativen Pfad oder öffentliche URL eingeben...",
+        "searchPlaceholder": "Bilder suchen...",
+        "noImagesFound": "Keine Bilder gefunden",
+        "noImagesAvailable": "Keine Bilder verfügbar",
+        "imageCount": "{count} von {total} Bild | {count} von {total} Bildern"
+      },
+      "icon": {
+        "placeholder": "i-lucide-icon",
+        "searchPlaceholder": "Icons suchen...",
+        "noIconsFound": "Keine Icons gefunden",
+        "searchHint": "Mindestens 2 Zeichen eingeben",
+        "libraries": "Bibliotheken:",
+        "allLibraries": "Alle"
+      },
+      "text": {
+        "placeholder": "Text eingeben...",
+        "selectPlaceholder": "Option auswählen..."
+      },
+      "date": {
+        "selectDate": "Datum auswählen"
+      },
+      "number": {
+        "placeholder": "0"
       }
     }
   }
diff --git a/src/app/src/locales/en.json b/src/app/src/locales/en.json
index e4c7a1a9..7c7646f5 100644
--- a/src/app/src/locales/en.json
+++ b/src/app/src/locales/en.json
@@ -301,6 +301,31 @@
       },
       "section": {
         "propertyCount": "1 property | {count} properties"
+      },
+      "media": {
+        "placeholder": "Enter relative path or Public URL...",
+        "searchPlaceholder": "Search images...",
+        "noImagesFound": "No images found",
+        "noImagesAvailable": "No images available",
+        "imageCount": "{count} of {total} image | {count} of {total} images"
+      },
+      "icon": {
+        "placeholder": "i-lucide-icon",
+        "searchPlaceholder": "Search icons...",
+        "noIconsFound": "No icons found",
+        "searchHint": "Type at least 2 characters to search",
+        "libraries": "Libraries:",
+        "allLibraries": "All"
+      },
+      "text": {
+        "placeholder": "Enter text...",
+        "selectPlaceholder": "Select an option..."
+      },
+      "date": {
+        "selectDate": "Select a date"
+      },
+      "number": {
+        "placeholder": "0"
       }
     }
   }
diff --git a/src/app/src/locales/es.json b/src/app/src/locales/es.json
index 5bf35db0..34257c94 100644
--- a/src/app/src/locales/es.json
+++ b/src/app/src/locales/es.json
@@ -301,6 +301,31 @@
       },
       "section": {
         "propertyCount": "1 propiedad | {count} propiedades"
+      },
+      "media": {
+        "placeholder": "Ruta relativa o URL pública...",
+        "searchPlaceholder": "Buscar imágenes...",
+        "noImagesFound": "No se encontraron imágenes",
+        "noImagesAvailable": "No hay imágenes disponibles",
+        "imageCount": "{count} de {total} imagen | {count} de {total} imágenes"
+      },
+      "icon": {
+        "placeholder": "i-lucide-icon",
+        "searchPlaceholder": "Buscar iconos...",
+        "noIconsFound": "No se encontraron iconos",
+        "searchHint": "Escriba al menos 2 caracteres para buscar",
+        "libraries": "Bibliotecas:",
+        "allLibraries": "Todas"
+      },
+      "text": {
+        "placeholder": "Ingrese texto...",
+        "selectPlaceholder": "Seleccione una opción..."
+      },
+      "date": {
+        "selectDate": "Seleccionar fecha"
+      },
+      "number": {
+        "placeholder": "0"
       }
     }
   }
diff --git a/src/app/src/locales/fa.json b/src/app/src/locales/fa.json
index d0d7f55d..04302390 100644
--- a/src/app/src/locales/fa.json
+++ b/src/app/src/locales/fa.json
@@ -301,6 +301,31 @@
       },
       "section": {
         "propertyCount": "۱ ویژگی | {count} ویژگی"
+      },
+      "media": {
+        "placeholder": "مسیر نسبی یا URL عمومی...",
+        "searchPlaceholder": "جستجوی تصاویر...",
+        "noImagesFound": "تصویری یافت نشد",
+        "noImagesAvailable": "تصویری در دسترس نیست",
+        "imageCount": "{count} از {total} تصویر"
+      },
+      "icon": {
+        "placeholder": "i-lucide-icon",
+        "searchPlaceholder": "جستجوی آیکون‌ها...",
+        "noIconsFound": "آیکونی یافت نشد",
+        "searchHint": "حداقل ۲ کاراکتر برای جستجو وارد کنید",
+        "libraries": "کتابخانه‌ها:",
+        "allLibraries": "همه"
+      },
+      "text": {
+        "placeholder": "متن را وارد کنید...",
+        "selectPlaceholder": "یک گزینه انتخاب کنید..."
+      },
+      "date": {
+        "selectDate": "انتخاب تاریخ"
+      },
+      "number": {
+        "placeholder": "۰"
       }
     }
   }
diff --git a/src/app/src/locales/fi.json b/src/app/src/locales/fi.json
index 8ea44975..986d3113 100644
--- a/src/app/src/locales/fi.json
+++ b/src/app/src/locales/fi.json
@@ -301,6 +301,31 @@
         },
         "section": {
           "propertyCount": "1 ominaisuus | {count} ominaisuutta"
+        },
+        "media": {
+          "placeholder": "Suhteellinen polku tai julkinen URL...",
+          "searchPlaceholder": "Etsi kuvia...",
+          "noImagesFound": "Kuvia ei löytynyt",
+          "noImagesAvailable": "Kuvia ei saatavilla",
+          "imageCount": "{count} / {total} kuva | {count} / {total} kuvaa"
+        },
+        "icon": {
+          "placeholder": "i-lucide-icon",
+          "searchPlaceholder": "Etsi kuvakkeita...",
+          "noIconsFound": "Kuvakkeita ei löytynyt",
+          "searchHint": "Kirjoita vähintään 2 merkkiä hakeaksesi",
+          "libraries": "Kirjastot:",
+          "allLibraries": "Kaikki"
+        },
+        "text": {
+          "placeholder": "Syötä teksti...",
+          "selectPlaceholder": "Valitse vaihtoehto..."
+        },
+        "date": {
+          "selectDate": "Valitse päivämäärä"
+        },
+        "number": {
+          "placeholder": "0"
         }
       }
     }
diff --git a/src/app/src/locales/fr.json b/src/app/src/locales/fr.json
index 0ecc1571..b58d877c 100644
--- a/src/app/src/locales/fr.json
+++ b/src/app/src/locales/fr.json
@@ -301,6 +301,31 @@
       },
       "section": {
         "propertyCount": "1 propriété | {count} propriétés"
+      },
+      "media": {
+        "placeholder": "Chemin relatif ou URL publique...",
+        "searchPlaceholder": "Rechercher des images...",
+        "noImagesFound": "Aucune image trouvée",
+        "noImagesAvailable": "Aucune image disponible",
+        "imageCount": "{count} sur {total} image | {count} sur {total} images"
+      },
+      "icon": {
+        "placeholder": "i-lucide-icon",
+        "searchPlaceholder": "Rechercher des icônes...",
+        "noIconsFound": "Aucune icône trouvée",
+        "searchHint": "Tapez au moins 2 caractères pour rechercher",
+        "libraries": "Bibliothèques :",
+        "allLibraries": "Toutes"
+      },
+      "text": {
+        "placeholder": "Saisir du texte...",
+        "selectPlaceholder": "Sélectionner une option..."
+      },
+      "date": {
+        "selectDate": "Sélectionner une date"
+      },
+      "number": {
+        "placeholder": "0"
       }
     }
   }
diff --git a/src/app/src/locales/id.json b/src/app/src/locales/id.json
index b8e2e177..44d8eb61 100644
--- a/src/app/src/locales/id.json
+++ b/src/app/src/locales/id.json
@@ -301,6 +301,31 @@
       },
       "section": {
         "propertyCount": "1 properti | {count} properti"
+      },
+      "media": {
+        "placeholder": "Path relatif atau URL publik...",
+        "searchPlaceholder": "Cari gambar...",
+        "noImagesFound": "Gambar tidak ditemukan",
+        "noImagesAvailable": "Tidak ada gambar tersedia",
+        "imageCount": "{count} dari {total} gambar"
+      },
+      "icon": {
+        "placeholder": "i-lucide-icon",
+        "searchPlaceholder": "Cari ikon...",
+        "noIconsFound": "Ikon tidak ditemukan",
+        "searchHint": "Ketik minimal 2 karakter untuk mencari",
+        "libraries": "Pustaka:",
+        "allLibraries": "Semua"
+      },
+      "text": {
+        "placeholder": "Masukkan teks...",
+        "selectPlaceholder": "Pilih opsi..."
+      },
+      "date": {
+        "selectDate": "Pilih tanggal"
+      },
+      "number": {
+        "placeholder": "0"
       }
     }
   }
diff --git a/src/app/src/locales/it.json b/src/app/src/locales/it.json
index e3e12a8b..2a98e020 100644
--- a/src/app/src/locales/it.json
+++ b/src/app/src/locales/it.json
@@ -301,6 +301,31 @@
       },
       "section": {
         "propertyCount": "1 proprietà | {count} proprietà"
+      },
+      "media": {
+        "placeholder": "Percorso relativo o URL pubblico...",
+        "searchPlaceholder": "Cerca immagini...",
+        "noImagesFound": "Nessuna immagine trovata",
+        "noImagesAvailable": "Nessuna immagine disponibile",
+        "imageCount": "{count} di {total} immagine | {count} di {total} immagini"
+      },
+      "icon": {
+        "placeholder": "i-lucide-icon",
+        "searchPlaceholder": "Cerca icone...",
+        "noIconsFound": "Nessuna icona trovata",
+        "searchHint": "Digita almeno 2 caratteri per cercare",
+        "libraries": "Librerie:",
+        "allLibraries": "Tutte"
+      },
+      "text": {
+        "placeholder": "Inserisci testo...",
+        "selectPlaceholder": "Seleziona un'opzione..."
+      },
+      "date": {
+        "selectDate": "Seleziona data"
+      },
+      "number": {
+        "placeholder": "0"
       }
     }
   }
diff --git a/src/app/src/locales/ja.json b/src/app/src/locales/ja.json
index 01ec04ba..cf541996 100644
--- a/src/app/src/locales/ja.json
+++ b/src/app/src/locales/ja.json
@@ -300,6 +300,31 @@
       },
       "section": {
         "propertyCount": "1 プロパティ | {count} プロパティ"
+      },
+      "media": {
+        "placeholder": "相対パスまたは公開URL...",
+        "searchPlaceholder": "画像を検索...",
+        "noImagesFound": "画像が見つかりません",
+        "noImagesAvailable": "利用可能な画像がありません",
+        "imageCount": "{total}件中{count}件の画像"
+      },
+      "icon": {
+        "placeholder": "i-lucide-icon",
+        "searchPlaceholder": "アイコンを検索...",
+        "noIconsFound": "アイコンが見つかりません",
+        "searchHint": "検索するには2文字以上入力してください",
+        "libraries": "ライブラリ:",
+        "allLibraries": "すべて"
+      },
+      "text": {
+        "placeholder": "テキストを入力...",
+        "selectPlaceholder": "オプションを選択..."
+      },
+      "date": {
+        "selectDate": "日付を選択"
+      },
+      "number": {
+        "placeholder": "0"
       }
     }
   }
diff --git a/src/app/src/locales/nb-no.json b/src/app/src/locales/nb-no.json
index d4eb3c7e..5d181324 100644
--- a/src/app/src/locales/nb-no.json
+++ b/src/app/src/locales/nb-no.json
@@ -301,6 +301,31 @@
       },
       "section": {
         "propertyCount": "1 egenskap | {count} egenskaper"
+      },
+      "media": {
+        "placeholder": "Relativ sti eller offentlig URL...",
+        "searchPlaceholder": "Søk etter bilder...",
+        "noImagesFound": "Ingen bilder funnet",
+        "noImagesAvailable": "Ingen bilder tilgjengelig",
+        "imageCount": "{count} av {total} bilde | {count} av {total} bilder"
+      },
+      "icon": {
+        "placeholder": "i-lucide-icon",
+        "searchPlaceholder": "Søk etter ikoner...",
+        "noIconsFound": "Ingen ikoner funnet",
+        "searchHint": "Skriv minst 2 tegn for å søke",
+        "libraries": "Biblioteker:",
+        "allLibraries": "Alle"
+      },
+      "text": {
+        "placeholder": "Skriv inn tekst...",
+        "selectPlaceholder": "Velg et alternativ..."
+      },
+      "date": {
+        "selectDate": "Velg dato"
+      },
+      "number": {
+        "placeholder": "0"
       }
     }
   }
diff --git a/src/app/src/locales/nl.json b/src/app/src/locales/nl.json
index 2dff6316..b3346838 100644
--- a/src/app/src/locales/nl.json
+++ b/src/app/src/locales/nl.json
@@ -301,6 +301,31 @@
       },
       "section": {
         "propertyCount": "1 eigenschap | {count} eigenschappen"
+      },
+      "media": {
+        "placeholder": "Relatief pad of publieke URL...",
+        "searchPlaceholder": "Afbeeldingen zoeken...",
+        "noImagesFound": "Geen afbeeldingen gevonden",
+        "noImagesAvailable": "Geen afbeeldingen beschikbaar",
+        "imageCount": "{count} van {total} afbeelding | {count} van {total} afbeeldingen"
+      },
+      "icon": {
+        "placeholder": "i-lucide-icon",
+        "searchPlaceholder": "Iconen zoeken...",
+        "noIconsFound": "Geen iconen gevonden",
+        "searchHint": "Typ minimaal 2 tekens om te zoeken",
+        "libraries": "Bibliotheken:",
+        "allLibraries": "Alle"
+      },
+      "text": {
+        "placeholder": "Voer tekst in...",
+        "selectPlaceholder": "Selecteer een optie..."
+      },
+      "date": {
+        "selectDate": "Selecteer datum"
+      },
+      "number": {
+        "placeholder": "0"
       }
     }
   }
diff --git a/src/app/src/locales/nn-no.json b/src/app/src/locales/nn-no.json
index f55f9ebd..4cf01eb1 100644
--- a/src/app/src/locales/nn-no.json
+++ b/src/app/src/locales/nn-no.json
@@ -301,6 +301,31 @@
       },
       "section": {
         "propertyCount": "1 eigenskap | {count} eigenskapar"
+      },
+      "media": {
+        "placeholder": "Relativ sti eller offentleg URL...",
+        "searchPlaceholder": "Søk etter bilete...",
+        "noImagesFound": "Ingen bilete funne",
+        "noImagesAvailable": "Ingen bilete tilgjengelege",
+        "imageCount": "{count} av {total} bilete"
+      },
+      "icon": {
+        "placeholder": "i-lucide-icon",
+        "searchPlaceholder": "Søk etter ikon...",
+        "noIconsFound": "Ingen ikon funne",
+        "searchHint": "Skriv minst 2 teikn for å søkje",
+        "libraries": "Bibliotek:",
+        "allLibraries": "Alle"
+      },
+      "text": {
+        "placeholder": "Skriv inn tekst...",
+        "selectPlaceholder": "Vel eit alternativ..."
+      },
+      "date": {
+        "selectDate": "Vel dato"
+      },
+      "number": {
+        "placeholder": "0"
       }
     }
   }
diff --git a/src/app/src/locales/pl.json b/src/app/src/locales/pl.json
index 622c0063..6323edab 100644
--- a/src/app/src/locales/pl.json
+++ b/src/app/src/locales/pl.json
@@ -301,6 +301,31 @@
       },
       "section": {
         "propertyCount": "1 właściwość | {count} właściwości"
+      },
+      "media": {
+        "placeholder": "Ścieżka względna lub publiczny URL...",
+        "searchPlaceholder": "Szukaj obrazów...",
+        "noImagesFound": "Nie znaleziono obrazów",
+        "noImagesAvailable": "Brak dostępnych obrazów",
+        "imageCount": "{count} z {total} obraz | {count} z {total} obrazów"
+      },
+      "icon": {
+        "placeholder": "i-lucide-icon",
+        "searchPlaceholder": "Szukaj ikon...",
+        "noIconsFound": "Nie znaleziono ikon",
+        "searchHint": "Wpisz co najmniej 2 znaki aby szukać",
+        "libraries": "Biblioteki:",
+        "allLibraries": "Wszystkie"
+      },
+      "text": {
+        "placeholder": "Wprowadź tekst...",
+        "selectPlaceholder": "Wybierz opcję..."
+      },
+      "date": {
+        "selectDate": "Wybierz datę"
+      },
+      "number": {
+        "placeholder": "0"
       }
     }
   }
diff --git a/src/app/src/locales/pt-br.json b/src/app/src/locales/pt-br.json
index ed88258f..7443186e 100644
--- a/src/app/src/locales/pt-br.json
+++ b/src/app/src/locales/pt-br.json
@@ -301,6 +301,31 @@
       },
       "section": {
         "propertyCount": "1 propriedade | {count} propriedades"
+      },
+      "media": {
+        "placeholder": "Caminho relativo ou URL pública...",
+        "searchPlaceholder": "Pesquisar imagens...",
+        "noImagesFound": "Nenhuma imagem encontrada",
+        "noImagesAvailable": "Nenhuma imagem disponível",
+        "imageCount": "{count} de {total} imagem | {count} de {total} imagens"
+      },
+      "icon": {
+        "placeholder": "i-lucide-icon",
+        "searchPlaceholder": "Pesquisar ícones...",
+        "noIconsFound": "Nenhum ícone encontrado",
+        "searchHint": "Digite pelo menos 2 caracteres para pesquisar",
+        "libraries": "Bibliotecas:",
+        "allLibraries": "Todas"
+      },
+      "text": {
+        "placeholder": "Digite o texto...",
+        "selectPlaceholder": "Selecione uma opção..."
+      },
+      "date": {
+        "selectDate": "Selecionar data"
+      },
+      "number": {
+        "placeholder": "0"
       }
     }
   }
diff --git a/src/app/src/locales/ua.json b/src/app/src/locales/ua.json
index 53d12bd0..d5a4bd3c 100644
--- a/src/app/src/locales/ua.json
+++ b/src/app/src/locales/ua.json
@@ -300,6 +300,31 @@
       },
       "section": {
         "propertyCount": "1 властивість | {count} властивостей"
+      },
+      "media": {
+        "placeholder": "Відносний шлях або публічна URL...",
+        "searchPlaceholder": "Пошук зображень...",
+        "noImagesFound": "Зображень не знайдено",
+        "noImagesAvailable": "Немає доступних зображень",
+        "imageCount": "{count} з {total} зображення | {count} з {total} зображень"
+      },
+      "icon": {
+        "placeholder": "i-lucide-icon",
+        "searchPlaceholder": "Пошук іконок...",
+        "noIconsFound": "Іконок не знайдено",
+        "searchHint": "Введіть щонайменше 2 символи для пошуку",
+        "libraries": "Бібліотеки:",
+        "allLibraries": "Усі"
+      },
+      "text": {
+        "placeholder": "Введіть текст...",
+        "selectPlaceholder": "Оберіть опцію..."
+      },
+      "date": {
+        "selectDate": "Оберіть дату"
+      },
+      "number": {
+        "placeholder": "0"
       }
     }
   }
diff --git a/src/app/src/locales/zh-tw.json b/src/app/src/locales/zh-tw.json
index 587a9ad2..49b37b82 100644
--- a/src/app/src/locales/zh-tw.json
+++ b/src/app/src/locales/zh-tw.json
@@ -301,6 +301,31 @@
       },
       "section": {
         "propertyCount": "1 個屬性 | {count} 個屬性"
+      },
+      "media": {
+        "placeholder": "相對路徑或公開URL...",
+        "searchPlaceholder": "搜尋圖片...",
+        "noImagesFound": "找不到圖片",
+        "noImagesAvailable": "沒有可用的圖片",
+        "imageCount": "{total}張圖片中的{count}張"
+      },
+      "icon": {
+        "placeholder": "i-lucide-icon",
+        "searchPlaceholder": "搜尋圖示...",
+        "noIconsFound": "找不到圖示",
+        "searchHint": "輸入至少2個字元進行搜尋",
+        "libraries": "圖示庫:",
+        "allLibraries": "全部"
+      },
+      "text": {
+        "placeholder": "輸入文字...",
+        "selectPlaceholder": "選擇一個選項..."
+      },
+      "date": {
+        "selectDate": "選擇日期"
+      },
+      "number": {
+        "placeholder": "0"
       }
     }
   }
diff --git a/src/app/src/locales/zh.json b/src/app/src/locales/zh.json
index 37e205dc..9fa424ca 100644
--- a/src/app/src/locales/zh.json
+++ b/src/app/src/locales/zh.json
@@ -301,6 +301,31 @@
       },
       "section": {
         "propertyCount": "1 个属性 | {count} 个属性"
+      },
+      "media": {
+        "placeholder": "相对路径或公共URL...",
+        "searchPlaceholder": "搜索图片...",
+        "noImagesFound": "未找到图片",
+        "noImagesAvailable": "没有可用的图片",
+        "imageCount": "{total}张图片中的{count}张"
+      },
+      "icon": {
+        "placeholder": "i-lucide-icon",
+        "searchPlaceholder": "搜索图标...",
+        "noIconsFound": "未找到图标",
+        "searchHint": "输入至少2个字符进行搜索",
+        "libraries": "图标库:",
+        "allLibraries": "全部"
+      },
+      "text": {
+        "placeholder": "输入文本...",
+        "selectPlaceholder": "选择一个选项..."
+      },
+      "date": {
+        "selectDate": "选择日期"
+      },
+      "number": {
+        "placeholder": "0"
       }
     }
   }
diff --git a/src/app/src/utils/form.ts b/src/app/src/utils/form.ts
index a9e65436..c15e1ec1 100644
--- a/src/app/src/utils/form.ts
+++ b/src/app/src/utils/form.ts
@@ -112,6 +112,9 @@ export const buildFormTreeFromSchema = (treeKey: string, schema: Draft07): FormT
       if (def.enum && Array.isArray(def.enum) && def.enum.length > 0) {
         item.options = def.enum as string[]
       }
+      else if (editor?.iconLibraries && Array.isArray(editor.iconLibraries)) {
+        item.options = editor.iconLibraries
+      }
 
       return item
     }
@@ -133,6 +136,10 @@ export const buildFormTreeFromSchema = (treeKey: string, schema: Draft07): FormT
     if (def.enum && Array.isArray(def.enum) && def.enum.length > 0) {
       item.options = def.enum as string[]
     }
+    // Pass iconLibraries from editor options for icon inputs
+    else if (editor?.iconLibraries && Array.isArray(editor.iconLibraries)) {
+      item.options = editor.iconLibraries as string[]
+    }
 
     return item
   }
diff --git a/src/app/test/unit/utils/form.test.ts b/src/app/test/unit/utils/form.test.ts
index 4ecd9858..8478bfca 100644
--- a/src/app/test/unit/utils/form.test.ts
+++ b/src/app/test/unit/utils/form.test.ts
@@ -234,6 +234,47 @@ describe('buildFormTreeFromSchema', () => {
     })
   })
 
+  test('handle iconLibraries from editor options for icon input', () => {
+    const schema: Draft07 = {
+      $schema: 'http://json-schema.org/draft-07/schema#',
+      $ref: '#/definitions/authors',
+      definitions: {
+        authors: {
+          type: 'object',
+          properties: {
+            icon: {
+              type: 'string',
+              $content: {
+                editor: {
+                  input: 'icon',
+                  iconLibraries: ['lucide', 'simple-icons'],
+                },
+              },
+            },
+          },
+          additionalProperties: false,
+          required: [],
+        },
+      },
+    }
+
+    expect(buildFormTreeFromSchema('authors', schema)).toStrictEqual({
+      authors: {
+        id: '#authors',
+        type: 'object',
+        title: 'Authors',
+        children: {
+          icon: {
+            id: '#authors/icon',
+            type: 'icon',
+            title: 'Icon',
+            options: ['lucide', 'simple-icons'],
+          },
+        },
+      },
+    })
+  })
+
   test('hide field if set in editor metas', () => {
     const schema: Draft07 = {
       $schema: 'http://json-schema.org/draft-07/schema#',