diff --git a/apps/panoramablick/nuxt.config.ts b/apps/panoramablick/nuxt.config.ts
index 55f787e..91406ed 100644
--- a/apps/panoramablick/nuxt.config.ts
+++ b/apps/panoramablick/nuxt.config.ts
@@ -21,4 +21,9 @@ export default defineNuxtConfig({
       {code: 'en', name: 'English', file: 'en.json'}
     ]
   },
+  runtimeConfig: {
+    public: {
+      hotelId: "test"
+    }
+  }
 })
\ No newline at end of file
diff --git a/apps/panoramablick/pages/contact.vue b/apps/panoramablick/pages/contact.vue
index 2d88a70..8efc010 100644
--- a/apps/panoramablick/pages/contact.vue
+++ b/apps/panoramablick/pages/contact.vue
@@ -95,6 +95,7 @@
 </template>
 
 <script setup lang="ts">
+/*TODO form should contain link to privacy statement?*/
 const {t, tm, rt} = useI18n()
 import * as v from 'valibot'
 import type {FormSubmitEvent} from '@nuxt/ui'
@@ -117,11 +118,26 @@ const toast = useToast()
 
 /* ───── submit handler ───── */
 async function onSubmit(event: FormSubmitEvent<Schema>) {
+  const config = useRuntimeConfig()
+  const hotelId = config.public.hotelId
+
+  if (!hotelId) {
+    toast.add({
+      title: 'Fehler',
+      description: 'Hotel-ID ist nicht konfiguriert!',
+      color: 'red'
+    })
+    throw new Error('Hotel ID not configured')
+  }
+
   try {
-    await $fetch('/contact.php', {
+    await $fetch('https://api.dominikmilacher.com/contact', {
       method: 'POST',
       headers: {'Content-Type': 'application/json'},
-      body: event.data
+      body: {
+        ...event.data,
+        hotel: hotelId
+      }
     })
 
     toast.add({
@@ -135,9 +151,10 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
   } catch (err: any) {
     toast.add({
       title: 'Fehler',
-      description: err?.data?.message ?? 'Nachricht konnte nicht gesendet werden.',
+      description: err?.data?.detail ?? err?.message ?? 'Nachricht konnte nicht gesendet werden.',
       color: 'red'
     })
   }
 }
+
 </script>
\ No newline at end of file