diff --git a/frontend/components/PublicDynamicForm.vue b/frontend/components/PublicDynamicForm.vue
index 604f78f..68963e8 100644
--- a/frontend/components/PublicDynamicForm.vue
+++ b/frontend/components/PublicDynamicForm.vue
@@ -1,5 +1,6 @@
 <script setup>
 import dayjs from 'dayjs'
+import { parseDate } from '@internationalized/date'
 
 const props = defineProps({
   context: { type: Object, required: true },
@@ -28,6 +29,23 @@ const form = ref({
 const isSubmitting = ref(false)
 const errors = ref({})
 
+const deliveryDateValue = computed({
+  get: () => {
+    if (!form.value.deliveryDate) {
+      return null
+    }
+
+    try {
+      return parseDate(form.value.deliveryDate)
+    } catch {
+      return null
+    }
+  },
+  set: (value) => {
+    form.value.deliveryDate = value ? value.toString() : ''
+  }
+})
+
 // Validierung basierend auf JSON Config & neuen Anforderungen
 const validate = () => {
   errors.value = {}
@@ -109,30 +127,64 @@ const setDeliveryDateToToday = () => {
 </script>
 
 <template>
-  <UCard :ui="{ body: { padding: 'p-6 sm:p-8' } }" v-if="props.context && props.token">
+  <UCard
+      v-if="props.context && props.token"
+      class="overflow-hidden border-white/70 shadow-xl ring-1 ring-black/5"
+      :ui="{ body: { padding: 'p-6 sm:p-8' }, header: { padding: 'p-6 sm:p-8 pb-0' }, footer: { padding: 'p-6 sm:p-8 pt-0' } }"
+  >
     <template #header>
-      <div class="text-center">
-        <h1 class="text-xl font-bold text-gray-900">{{ config?.ui?.title || 'Erfassung' }}</h1>
-        <p v-if="config?.ui?.description" class="text-sm text-gray-500 mt-1">{{ config?.ui?.description }}</p>
+      <div class="space-y-3 text-center">
+        <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 text-primary ring-1 ring-primary/15">
+          <UIcon name="i-heroicons-clipboard-document-check" class="h-7 w-7" />
+        </div>
+        <div>
+          <h1 class="text-xl font-semibold text-highlighted">{{ config?.ui?.title || 'Erfassung' }}</h1>
+          <p v-if="config?.ui?.description" class="mt-1 text-sm text-muted">{{ config?.ui?.description }}</p>
+        </div>
       </div>
     </template>
 
     <div class="space-y-5">
+      <UAlert
+          color="primary"
+          variant="soft"
+          icon="i-heroicons-sparkles"
+          title="Schnelle Erfassung"
+          description="Alle Angaben werden direkt dem passenden Workflow zugeordnet."
+      />
 
       <UFormField
           label="Datum der Ausführung"
           :error="errors.deliveryDate"
           required
       >
-        <div class="flex items-center gap-2">
-          <UInput
-              v-model="form.deliveryDate"
-              type="date"
-              size="lg"
-              icon="i-heroicons-calendar-days"
-              class="flex-1"
-          />
-          <UButton color="gray" variant="soft" size="lg" label="Heute" @click="setDeliveryDateToToday" />
+        <div class="flex gap-2">
+          <UPopover>
+            <UButton
+                color="neutral"
+                variant="outline"
+                size="lg"
+                icon="i-heroicons-calendar-days"
+                class="min-w-0 flex-1 justify-between"
+            >
+              <span class="truncate text-left">
+                {{ form.deliveryDate ? dayjs(form.deliveryDate).format('DD.MM.YYYY') : 'Kein Datum' }}
+              </span>
+            </UButton>
+
+            <template #content>
+              <div class="p-2">
+                <UCalendar v-model="deliveryDateValue" />
+                <div class="flex justify-end border-t border-default pt-2">
+                  <UButton color="neutral" variant="ghost" size="sm" @click="setDeliveryDateToToday">
+                    Heute
+                  </UButton>
+                </div>
+              </div>
+            </template>
+          </UPopover>
+
+          <UButton color="neutral" variant="soft" size="lg" label="Heute" @click="setDeliveryDateToToday" />
         </div>
       </UFormField>
 
@@ -148,8 +200,10 @@ const setDeliveryDateToToday = () => {
             label-key="fullName"
             value-key="id"
             placeholder="Name auswählen..."
-            searchable
             size="lg"
+            class="w-full"
+            :search-input="{ placeholder: 'Mitarbeiter suchen...' }"
+            :filter-fields="['fullName']"
         />
       </UFormField>
 
@@ -165,8 +219,10 @@ const setDeliveryDateToToday = () => {
             label-key="name"
             value-key="id"
             placeholder="Wählen..."
-            searchable
             size="lg"
+            class="w-full"
+            :search-input="{ placeholder: 'Projekt suchen...' }"
+            :filter-fields="['name']"
         />
       </UFormField>
 
@@ -182,8 +238,10 @@ const setDeliveryDateToToday = () => {
             label-key="name"
             value-key="id"
             placeholder="Wählen..."
-            searchable
             size="lg"
+            class="w-full"
+            :search-input="{ placeholder: 'Tätigkeit suchen...' }"
+            :filter-fields="['name']"
         />
       </UFormField>
 
@@ -198,9 +256,10 @@ const setDeliveryDateToToday = () => {
             step="0.25"
             size="lg"
             placeholder="0.00"
+            class="w-full"
         >
           <template #trailing>
-            <span class="text-gray-500 text-sm pr-2">{{ currentUnit }}</span>
+            <span class="pr-2 text-sm text-muted">{{ currentUnit }}</span>
           </template>
         </UInput>
       </UFormField>
@@ -211,23 +270,23 @@ const setDeliveryDateToToday = () => {
           :error="errors.diesel"
           :required="config?.validation?.requireDiesel"
       >
-        <UInput v-model="form.dieselUsage" type="number" step="0.1" placeholder="0.0" size="lg">
+        <UInput v-model="form.dieselUsage" type="number" step="0.1" placeholder="0.0" size="lg" class="w-full">
           <template #trailing>
-            <span class="text-gray-500 text-xs">Liter</span>
+            <span class="text-xs text-muted">Liter</span>
           </template>
         </UInput>
       </UFormField>
 
       <UFormField :label="config?.ui?.labels?.description || 'Notiz / Vorkommnisse'">
-        <UTextarea v-model="form.description" :rows="3" placeholder="Optional..." />
+        <UTextarea v-model="form.description" :rows="4" autoresize class="w-full" placeholder="Optional..." />
       </UFormField>
 
     </div>
 
     <template #footer>
       <UButton
-          block
           size="xl"
+          block
           :loading="isSubmitting"
           @click="submit"
           :label="config?.ui?.submitButtonText || 'Speichern'"