diff --git a/src/lib/images/logo.webp b/src/lib/images/logo.webp
new file mode 100644
index 0000000..7bc647c
Binary files /dev/null and b/src/lib/images/logo.webp differ
diff --git a/src/routes/issue/+page.svelte b/src/routes/issue/+page.svelte
index 5844584..841b058 100644
--- a/src/routes/issue/+page.svelte
+++ b/src/routes/issue/+page.svelte
@@ -303,8 +303,18 @@
         class="max-w-6xl mx-auto bg-white p-8 rounded-2xl shadow-xl space-y-8 text-gray-800"
         on:submit|preventDefault={handleSubmit}
     >
+        <!-- logo -->
+        <div class="text-center mb-6">
+            <img
+                src="/src/lib/images/logo.webp"
+                alt="Logo"
+                class="mx-auto"
+                loading="lazy"
+                width="250"
+            />
+        </div>
         <!-- Title -->
-        <h2 class="text-2xl font-semibold">Submit New Issue</h2>
+        <h2 class="text-2xl font-semibold text-center">Submit New Issue</h2>
 
         <!-- 2 Column Grid -->
         <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
diff --git a/src/routes/orderdinning/+page.svelte b/src/routes/orderdinning/+page.svelte
new file mode 100644
index 0000000..7f63494
--- /dev/null
+++ b/src/routes/orderdinning/+page.svelte
@@ -0,0 +1,1374 @@
+<script lang="ts">
+    // This is a placeholder for any script you might want to add
+    // For example, you could handle form submission here
+    import { onMount } from "svelte";
+    import { supabase } from "$lib/supabaseClient";
+    import { writable } from "svelte/store";
+    import { on } from "svelte/events";
+
+    type villa = {
+        id: string;
+        name: string;
+    };
+
+    const villas = writable<villa[]>([]);
+
+    onMount(async () => {
+        const { data, error } = await supabase
+            .from("villas")
+            .select("id, name");
+
+        if (error) {
+            console.error("Error fetching villas:", error);
+        } else {
+            villas.set(data || []);
+        }
+    });
+
+    type dinning = {
+        id: string;
+        villa_id: string;
+        guest_name: string;
+        guest_email: string;
+        date_time_to_serve: string;
+        total_guests: number;
+        be_pasih_klungkung: number;
+        seafood_bbq_jimbaran: number;
+        ayam_betutu_gilimanuk: number;
+        babi_guling_gianyar: number;
+        indonesian_set_menu: number;
+        gado_gado: number;
+        spring_rolls: number;
+        perkedel_jagung: number;
+        soto_ayam: number;
+        satay: number;
+        rendang: number;
+        babi_rica_rica: number;
+        bbq_pork_ribs: number;
+        cap_cay: number;
+        nasi_goreng_chicken: number;
+        nasi_goreng_seafood: number;
+        nasi_goreng_vegetarian: number;
+        nasi_goreng_pork: number;
+        mie_goreng_chicken: number;
+        mie_goreng_seafood: number;
+        mie_goreng_vegetarian: number;
+        mie_goreng_pork: number;
+        french_fries: number;
+        fried_calamari: number;
+        bbq_chicken_wings: number;
+        balinese_chicken_curry: number;
+        steamed_rice: number;
+        won_tons: number;
+        spaghetti_bolognese: number;
+        spaghetti_carbonara: number;
+        spaghetti_napolitana: number;
+        french_fries_kids_meals: number;
+        bbq_chicken_wings_kids_meals: number;
+        club_sandwich_kids_meals: number;
+        pisang_goreng_desserts: number;
+        bubur_injin_desserts: number;
+        fresh_fruit_desserts: number;
+        cape_discovery_shiraz_drinks: number;
+        cape_discovery_sauvignon_drinks: number;
+        bintang_beer_bottle_330ml_drinks: number;
+        bintang_beer_case_330ml_24bottle_drinks: number;
+        bintang_beer_can_330ml_drinks: number;
+        bintang_beer_case_330ml_24can_drinks: number;
+        bintang_radler_lemon_beer_bottle_330ml_drinks: number;
+        bintang_radler_lemon_beer_case_330ml_24bottle_drinks: number;
+        san_miguel_beer_bottle_330ml_drinks: number;
+        san_miguel_beer_case_330ml_24bottle_drinks: number;
+        orange_juice_drinks: number;
+        coke_can_drinks: number;
+        coke_case_drinks: number;
+        diet_coke_can_drinks: number;
+        diet_coke_case_drinks: number;
+        sprite_can_drinks: number;
+        sprite_case_drinks: number;
+        fanta_can_drinks: number;
+        fanta_case_drinks: number;
+        soda_can_drinks: number;
+        soda_case_drinks: number;
+        tonic_water_can_drinks: number;
+        tonic_water_case_drinks: number;
+        comment: string;
+    };
+
+    type dinningInsert = {
+        villa_id: string;
+        guest_name: string;
+        guest_email: string;
+        date_time_to_serve: string;
+        total_guests: number;
+        be_pasih_klungkung: number;
+        seafood_bbq_jimbaran: number;
+        ayam_betutu_gilimanuk: number;
+        babi_guling_gianyar: number;
+        indonesian_set_menu: number;
+        gado_gado: number;
+        spring_rolls: number;
+        perkedel_jagung: number;
+        soto_ayam: number;
+        satay: number;
+        rendang: number;
+        babi_rica_rica: number;
+        bbq_pork_ribs: number;
+        cap_cay: number;
+        nasi_goreng_chicken: number;
+        nasi_goreng_seafood: number;
+        nasi_goreng_vegetarian: number;
+        nasi_goreng_pork: number;
+        mie_goreng_chicken: number;
+        mie_goreng_seafood: number;
+        mie_goreng_vegetarian: number;
+        mie_goreng_pork: number;
+        french_fries: number;
+        fried_calamari: number;
+        bbq_chicken_wings: number;
+        balinese_chicken_curry: number;
+        steamed_rice: number;
+        won_tons: number;
+        spaghetti_bolognese: number;
+        spaghetti_carbonara: number;
+        spaghetti_napolitana: number;
+        french_fries_kids_meals: number;
+        bbq_chicken_wings_kids_meals: number;
+        club_sandwich_kids_meals: number;
+        pisang_goreng_desserts: number;
+        bubur_injin_desserts: number;
+        fresh_fruit_desserts: number;
+        cape_discovery_shiraz_drinks: number;
+        cape_discovery_sauvignon_drinks: number;
+        bintang_beer_bottle_330ml_drinks?: number;
+        bintang_beer_case_330ml_24bottle_drinks?: number;
+        bintang_beer_can_330ml_drinks?: number;
+        bintang_beer_case_330ml_24can_drinks?: number;
+        bintang_radler_lemon_beer_bottle_330ml_drinks?: number;
+        bintang_radler_lemon_beer_case_330ml_24bottle_drinks?: number;
+        san_miguel_beer_bottle_330ml_drinks?: number;
+        san_miguel_beer_case_330ml_24bottle_drinks?: number;
+        orange_juice_drinks?: number;
+        coke_can_drinks?: number;
+        coke_case_drinks?: number;
+        diet_coke_can_drinks?: number;
+        diet_coke_case_drinks?: number;
+        sprite_can_drinks?: number;
+        sprite_case_drinks?: number;
+        fanta_can_drinks?: number;
+        fanta_case_drinks?: number;
+        soda_can_drinks?: number;
+        soda_case_drinks?: number;
+        tonic_water_can_drinks?: number;
+        tonic_water_case_drinks?: number;
+        comment: string;
+    };
+
+    async function handleSubmit(event: Event): Promise<void> {
+        event.preventDefault();
+
+        const formData = new FormData(event.target as HTMLFormElement);
+
+        // Validate form data
+        if (!validateForm(formData)) {
+            console.error("Form validation failed");
+            return;
+        }
+        const dinningData: dinningInsert = {
+            villa_id: formData.get("villa_id") as string,
+            guest_name: formData.get("guest_name") as string,
+            guest_email: formData.get("guest_email") as string,
+            date_time_to_serve: formData.get("date_time_to_serve") as string,
+            total_guests: parseInt(formData.get("total_guests") as string, 10),
+            be_pasih_klungkung: parseInt(
+                formData.get("be_pasih_klungkung") as string,
+                0,
+            ),
+            seafood_bbq_jimbaran: parseInt(
+                formData.get("seafood_bbq_jimbaran") as string,
+                0,
+            ),
+            ayam_betutu_gilimanuk: parseInt(
+                formData.get("ayam_betutu_gilimanuk") as string,
+                0,
+            ),
+            babi_guling_gianyar: parseInt(
+                formData.get("babi_guling_gianyar") as string,
+                0,
+            ),
+            indonesian_set_menu: parseInt(
+                formData.get("indonesian_set_menu") as string,
+                0,
+            ),
+            gado_gado: parseInt(formData.get("gado_gado") as string, 10),
+            spring_rolls: parseInt(formData.get("spring_rolls") as string, 10),
+            perkedel_jagung: parseInt(
+                formData.get("perkedel_jagung") as string,
+                0,
+            ),
+            soto_ayam: parseInt(formData.get("soto_ayam") as string, 10),
+            satay: parseInt(formData.get("satay") as string, 10),
+            rendang: parseInt(formData.get("rendang") as string, 10),
+            babi_rica_rica: parseInt(
+                formData.get("babi_rica_rica") as string,
+                0,
+            ),
+            bbq_pork_ribs: parseInt(formData.get("bbq_pork_ribs") as string, 0),
+            cap_cay: parseInt(formData.get("cap_cay") as string, 10),
+            nasi_goreng_chicken: parseInt(
+                formData.get("nasi_goreng_chicken") as string,
+                0,
+            ),
+            nasi_goreng_seafood: parseInt(
+                formData.get("nasi_goreng_seafood") as string,
+                0,
+            ),
+            nasi_goreng_vegetarian: parseInt(
+                formData.get("nasi_goreng_vegetarian") as string,
+                0,
+            ),
+            nasi_goreng_pork: parseInt(
+                formData.get("nasi_goreng_pork") as string,
+                0,
+            ),
+            mie_goreng_chicken: parseInt(
+                formData.get("mie_goreng_chicken") as string,
+                0,
+            ),
+            mie_goreng_seafood: parseInt(
+                formData.get("mie_goreng_seafood") as string,
+                0,
+            ),
+            mie_goreng_vegetarian: parseInt(
+                formData.get("mie_goreng_vegetarian") as string,
+                0,
+            ),
+            mie_goreng_pork: parseInt(
+                formData.get("mie_goreng_pork") as string,
+                0,
+            ),
+            french_fries: parseInt(formData.get("french_fries") as string, 10),
+            fried_calamari: parseInt(
+                formData.get("fried_calamari") as string,
+                0,
+            ),
+            bbq_chicken_wings: parseInt(
+                formData.get("bbq_chicken_wings") as string,
+                0,
+            ),
+            balinese_chicken_curry: parseInt(
+                formData.get("balinese_chicken_curry") as string,
+                0,
+            ),
+            steamed_rice: parseInt(formData.get("steamed_rice") as string, 10),
+            won_tons: parseInt(formData.get("won_tons") as string, 10),
+            spaghetti_bolognese: parseInt(
+                formData.get("spaghetti_bolognese") as string,
+                0,
+            ),
+            spaghetti_carbonara: parseInt(
+                formData.get("spaghetti_carbonara") as string,
+                0,
+            ),
+            spaghetti_napolitana: parseInt(
+                formData.get("spaghetti_napolitana") as string,
+                0,
+            ),
+            french_fries_kids_meals: parseInt(
+                formData.get("french_fries_kids_meals") as string,
+                0,
+            ),
+            bbq_chicken_wings_kids_meals: parseInt(
+                formData.get("bbq_chicken_wings_kids_meals") as string,
+                0,
+            ),
+            club_sandwich_kids_meals: parseInt(
+                formData.get("club_sandwich_kids_meals") as string,
+                0,
+            ),
+            pisang_goreng_desserts: parseInt(
+                formData.get("pisang_goreng_desserts") as string,
+                0,
+            ),
+            bubur_injin_desserts: parseInt(
+                formData.get("bubur_injin_desserts") as string,
+                0,
+            ),
+            fresh_fruit_desserts: parseInt(
+                formData.get("fresh_fruit_desserts") as string,
+                0,
+            ),
+            cape_discovery_shiraz_drinks: parseInt(
+                formData.get("cape_discovery_shiraz_drinks") as string,
+                0,
+            ),
+            cape_discovery_sauvignon_drinks: parseInt(
+                formData.get("cape_discovery_sauvignon_drinks") as string,
+                0,
+            ),
+            bintang_beer_bottle_330ml_drinks: parseInt(
+                formData.get("bintang_beer_bottle_330ml_drinks") as string,
+                0,
+            ),
+            bintang_beer_case_330ml_24bottle_drinks: parseInt(
+                formData.get(
+                    "bintang_beer_case_330ml_24bottle_drinks",
+                ) as string,
+                0,
+            ),
+            bintang_beer_can_330ml_drinks: parseInt(
+                formData.get("bintang_beer_can_330ml_drinks") as string,
+                0,
+            ),
+            bintang_beer_case_330ml_24can_drinks: parseInt(
+                formData.get("bintang_beer_case_330ml_24can_drinks") as string,
+                0,
+            ),
+            bintang_radler_lemon_beer_bottle_330ml_drinks: parseInt(
+                formData.get(
+                    "bintang_radler_lemon_beer_bottle_330ml_drinks",
+                ) as string,
+                0,
+            ),
+            bintang_radler_lemon_beer_case_330ml_24bottle_drinks: parseInt(
+                formData.get(
+                    "bintang_radler_lemon_beer_case_330ml_24bottle_drinks",
+                ) as string,
+                0,
+            ),
+            san_miguel_beer_bottle_330ml_drinks: parseInt(
+                formData.get("san_miguel_beer_bottle_330ml_drinks") as string,
+                0,
+            ),
+            san_miguel_beer_case_330ml_24bottle_drinks: parseInt(
+                formData.get(
+                    "san_miguel_beer_case_330ml_24bottle_drinks",
+                ) as string,
+                0,
+            ),
+            orange_juice_drinks: parseInt(
+                formData.get("orange_juice_drinks") as string,
+                0,
+            ),
+            coke_can_drinks: parseInt(
+                formData.get("coke_can_drinks") as string,
+                0,
+            ),
+            coke_case_drinks: parseInt(
+                formData.get("coke_case_drinks") as string,
+                0,
+            ),
+            diet_coke_can_drinks: parseInt(
+                formData.get("diet_coke_can_drinks") as string,
+                0,
+            ),
+            diet_coke_case_drinks: parseInt(
+                formData.get("diet_coke_case_drinks") as string,
+                0,
+            ),
+            sprite_can_drinks: parseInt(
+                formData.get("sprite_can_drinks") as string,
+                0,
+            ),
+            sprite_case_drinks: parseInt(
+                formData.get("sprite_case_drinks") as string,
+                0,
+            ),
+            fanta_can_drinks: parseInt(
+                formData.get("fanta_can_drinks") as string,
+                0,
+            ),
+            fanta_case_drinks: parseInt(
+                formData.get("fanta_case_drinks") as string,
+                0,
+            ),
+            soda_can_drinks: parseInt(
+                formData.get("soda_can_drinks") as string,
+                0,
+            ),
+            soda_case_drinks: parseInt(
+                formData.get("soda_case_drinks") as string,
+                0,
+            ),
+            tonic_water_can_drinks: parseInt(
+                formData.get("tonic_water_can_drinks") as string,
+                0,
+            ),
+            tonic_water_case_drinks: parseInt(
+                formData.get("tonic_water_case_drinks") as string,
+                0,
+            ),
+            comment: formData.get("comment") as string,
+        };
+
+        const { data, error } = await supabase
+            .from("vb_dinning")
+            .insert([dinningData]);
+
+        if (error) {
+            console.error("Error submitting transport:", error);
+        } else {
+            console.log("Transport submitted successfully:", data);
+            alert("Transport submitted successfully!");
+        }
+    }
+
+    export let formErrors = writable<{ [key: string]: string }>({});
+
+    function validateForm(formData: FormData): boolean {
+        const errors: { [key: string]: string } = {};
+        const requiredFields = [
+            "villa_id",
+            "guest_name",
+            "guest_email",
+            "date_time_to_serve",
+            "total_guests",
+        ];
+
+        requiredFields.forEach((field) => {
+            if (!formData.get(field) || formData.get(field) === "") {
+                errors[field] = `${field.replace(/_/g, " ")} is required.`;
+            }
+        });
+
+        formErrors.set(errors);
+        return Object.keys(errors).length === 0;
+    }
+
+    function errorClass(field: string): string {
+        return $formErrors[field] ? "border-red-500" : "border";
+    }
+</script>
+
+<div>
+    <form
+        class="max-w-6xl mx-auto bg-white p-8 rounded-2xl shadow-xl space-y-8 text-gray-800"
+        on:submit|preventDefault={handleSubmit}
+    >
+        <!-- logo -->
+        <div class="text-center mb-6">
+            <img
+                src="/src/lib/images/logo.webp"
+                alt="Logo"
+                class="mx-auto"
+                loading="lazy"
+                width="250"
+            />
+        </div>
+        <!-- Title -->
+        <h2 class="text-2xl font-semibold text-center">Dinning Request</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <!-- Villa -->
+            <div>
+                <label class="block text-sm font-medium mb-1">Villa</label>
+                <select
+                    name="villa_id"
+                    class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 {errorClass(
+                        'villa_id',
+                    )}"
+                >
+                    <option value="" disabled selected>Select Villa</option>
+                    {#each $villas as villa}
+                        <option value={villa.id}>{villa.name}</option>
+                    {/each}
+                </select>
+                {#if $formErrors.villa_id}
+                    <p class="text-red-500 text-xs mt-1">
+                        {$formErrors.villa_id}
+                    </p>
+                {/if}
+            </div>
+            <!-- Guest Name -->
+            <div>
+                <label class="block text-sm font-medium mb-1">Guest Name</label>
+                <input
+                    type="text"
+                    name="guest_name"
+                    placeholder="Guest Name"
+                    class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 {errorClass(
+                        'guest_name',
+                    )}"
+                />
+                {#if $formErrors.guest_name}
+                    <p class="text-red-500 text-xs mt-1">
+                        {$formErrors.guest_name}
+                    </p>
+                {/if}
+            </div>
+            <!-- Guest Email -->
+            <div>
+                <label class="block text-sm font-medium mb-1">Guest Email</label
+                >
+                <input
+                    type="email"
+                    name="guest_email"
+                    placeholder="Guest Email"
+                    class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 {errorClass(
+                        'guest_email',
+                    )}"
+                />
+                {#if $formErrors.guest_email}
+                    <p class="text-red-500 text-xs mt-1">
+                        {$formErrors.guest_email}
+                    </p>
+                {/if}
+            </div>
+            <!-- Date & Time to Serve -->
+            <div>
+                <label class="block text-sm font-medium mb-1"
+                    >Date & Time to Serve</label
+                >
+                <input
+                    type="datetime-local"
+                    name="date_time_to_serve"
+                    class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 {errorClass(
+                        'date_time_to_serve',
+                    )}"
+                />
+                {#if $formErrors.date_time_to_serve}
+                    <p class="text-red-500 text-xs mt-1">
+                        {$formErrors.date_time_to_serve}
+                    </p>
+                {/if}
+            </div>
+            <!-- Total Guests -->
+            <div>
+                <label class="block text-sm font-medium mb-1"
+                    >Total Guests</label
+                >
+                <input
+                    type="number"
+                    name="total_guests"
+                    min="1"
+                    placeholder="Total Guests"
+                    class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 {errorClass(
+                        'total_guests',
+                    )}"
+                />
+                {#if $formErrors.total_guests}
+                    <p class="text-red-500 text-xs mt-1">
+                        {$formErrors.total_guests}
+                    </p>
+                {/if}
+            </div>
+        </div>
+
+        <!-- Info Section -->
+        <div
+            class="bg-purple-50 border-l-4 border-purple-400 p-4 my-8 rounded-xl text-sm text-gray-700"
+        >
+            <p>
+                Please select your choice of meals – for more information and
+                pictures, please check here at:
+                <a
+                    href="https://villabugis.com/in-villa-dining-seminyak"
+                    target="_blank"
+                    class="text-purple-700 underline"
+                    >https://villabugis.com/in-villa-dining-seminyak</a
+                >
+                <br />
+                Indicate total number of guests for each main meal – and number of
+                Ala Carte dishes, desserts and drinks.<br />
+                <span class="font-semibold"
+                    >Special Main Dish prices are per person, Ala Carte items
+                    are per dish.</span
+                ><br />
+                <span class="italic"
+                    >All prices are in Indonesian Rupiah, and are subject to 10%
+                    service charge – guests will be issued an invoice for
+                    payment by cash or credit card same or next day.</span
+                ><br />
+                All services are subject to availability, especially during periods
+                of high demand – so please order early, to avoid disappointment!
+            </p>
+        </div>
+
+        <!-- Main Dishes -->
+        <div class="mt-8">
+            <h3 class="text-lg font-semibold mb-2 text-purple-700">
+                Taste of Bali – Special Main Dishes
+            </h3>
+            <p class="mb-4 text-sm text-gray-600">
+                (Special Dishes - Min 2 people, Babi Guling Min 5 people)
+            </p>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Be Pasih Klungkung</label
+                    >
+                    <input
+                        type="number"
+                        name="be_pasih_klungkung"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Seafood BBQ Jimbaran</label
+                    >
+                    <input
+                        type="number"
+                        name="seafood_bbq_jimbaran"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Ayam Betutu Gilimanuk</label
+                    >
+                    <input
+                        type="number"
+                        name="ayam_betutu_gilimanuk"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Babi Guling Gianyar</label
+                    >
+                    <input
+                        type="number"
+                        name="babi_guling_gianyar"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Indonesian Set Menu</label
+                    >
+                    <input
+                        type="number"
+                        name="indonesian_set_menu"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+            </div>
+        </div>
+
+        <!-- Ala Carte -->
+        <div class="mt-8">
+            <h3 class="text-lg font-semibold mb-2 text-purple-700">
+                Ala Carte
+            </h3>
+            <p class="mb-4 text-sm text-gray-600">
+                (Select any additional items)
+            </p>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Gado Gado</label
+                    >
+                    <input
+                        type="number"
+                        name="gado_gado"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Spring Rolls</label
+                    >
+                    <input
+                        type="number"
+                        name="spring_rolls"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Perkedel Jagung</label
+                    >
+                    <input
+                        type="number"
+                        name="perkedel_jagung"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Soto Ayam</label
+                    >
+                    <input
+                        type="number"
+                        name="soto_ayam"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1">Satay</label>
+                    <input
+                        type="number"
+                        name="satay"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1">Rendang</label
+                    >
+                    <input
+                        type="number"
+                        name="rendang"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Babi Rica Rica</label
+                    >
+                    <input
+                        type="number"
+                        name="babi_rica_rica"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >BBQ Pork Ribs</label
+                    >
+                    <input
+                        type="number"
+                        name="bbq_pork_ribs"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1">Cap Cay</label
+                    >
+                    <input
+                        type="number"
+                        name="cap_cay"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Nasi Goreng Chicken</label
+                    >
+                    <input
+                        type="number"
+                        name="nasi_goreng_chicken"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Nasi Goreng Seafood</label
+                    >
+                    <input
+                        type="number"
+                        name="nasi_goreng_seafood"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Nasi Goreng Vegetarian</label
+                    >
+                    <input
+                        type="number"
+                        name="nasi_goreng_vegetarian"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Nasi Goreng Pork</label
+                    >
+                    <input
+                        type="number"
+                        name="nasi_goreng_pork"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Mie Goreng Chicken</label
+                    >
+                    <input
+                        type="number"
+                        name="mie_goreng_chicken"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Mie Goreng Seafood</label
+                    >
+                    <input
+                        type="number"
+                        name="mie_goreng_seafood"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Mie Goreng Vegetarian</label
+                    >
+                    <input
+                        type="number"
+                        name="mie_goreng_vegetarian"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Mie Goreng Pork</label
+                    >
+                    <input
+                        type="number"
+                        name="mie_goreng_pork"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >French Fries</label
+                    >
+                    <input
+                        type="number"
+                        name="french_fries"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Fried Calamari</label
+                    >
+                    <input
+                        type="number"
+                        name="fried_calamari"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >BBQ Chicken Wings</label
+                    >
+                    <input
+                        type="number"
+                        name="bbq_chicken_wings"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Balinese Chicken Curry</label
+                    >
+                    <input
+                        type="number"
+                        name="balinese_chicken_curry"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Steamed Rice</label
+                    >
+                    <input
+                        type="number"
+                        name="steamed_rice"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Won Tons</label
+                    >
+                    <input
+                        type="number"
+                        name="won_tons"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+            </div>
+        </div>
+
+        <!-- Kids Meals -->
+        <div class="mt-8">
+            <h3 class="text-lg font-semibold mb-2 text-purple-700">
+                Kids Meals
+            </h3>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Spaghetti Bolognese</label
+                    >
+                    <input
+                        type="number"
+                        name="spaghetti_bolognese"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Spaghetti Carbonara</label
+                    >
+                    <input
+                        type="number"
+                        name="spaghetti_carbonara"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Spaghetti Napolitana</label
+                    >
+                    <input
+                        type="number"
+                        name="spaghetti_napolitana"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >French Fries (Kids Meals)</label
+                    >
+                    <input
+                        type="number"
+                        name="french_fries_kids_meals"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >BBQ Chicken Wings (Kids Meals)</label
+                    >
+                    <input
+                        type="number"
+                        name="bbq_chicken_wings_kids_meals"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Club Sandwich (Kids Meals)</label
+                    >
+                    <input
+                        type="number"
+                        name="club_sandwich_kids_meals"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+            </div>
+        </div>
+
+        <!-- Desserts -->
+        <div class="mt-8">
+            <h3 class="text-lg font-semibold mb-2 text-purple-700">Desserts</h3>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Pisang Goreng (Desserts)</label
+                    >
+                    <input
+                        type="number"
+                        name="pisang_goreng_desserts"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Bubur Injin (Desserts)</label
+                    >
+                    <input
+                        type="number"
+                        name="bubur_injin_desserts"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Fresh Fruit (Desserts)</label
+                    >
+                    <input
+                        type="number"
+                        name="fresh_fruit_desserts"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+            </div>
+        </div>
+
+        <!-- Drinks -->
+        <div class="mt-8">
+            <h3 class="text-lg font-semibold mb-2 text-purple-700">Drinks</h3>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Cape Discovery Shiraz (Drinks)</label
+                    >
+                    <input
+                        type="number"
+                        name="cape_discovery_shiraz_drinks"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Cape Discovery Sauvignon (Drinks)</label
+                    >
+                    <input
+                        type="number"
+                        name="cape_discovery_sauvignon_drinks"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Bintang Beer Bottle 330ml (Drinks)</label
+                    >
+                    <input
+                        type="number"
+                        name="bintang_beer_bottle_330ml_drinks"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Bintang Beer Case 330ml 24bottle (Drinks)</label
+                    >
+                    <input
+                        type="number"
+                        name="bintang_beer_case_330ml_24bottle_drinks"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Bintang Beer Can 330ml (Drinks)</label
+                    >
+                    <input
+                        type="number"
+                        name="bintang_beer_can_330ml_drinks"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Bintang Beer Case 330ml 24can (Drinks)</label
+                    >
+                    <input
+                        type="number"
+                        name="bintang_beer_case_330ml_24can_drinks"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Bintang Radler Lemon Beer Bottle 330ml (Drinks)</label
+                    >
+                    <input
+                        type="number"
+                        name="bintang_radler_lemon_beer_bottle_330ml_drinks"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Bintang Radler Lemon Beer Case 330ml 24bottle (Drinks)</label
+                    >
+                    <input
+                        type="number"
+                        name="bintang_radler_lemon_beer_case_330ml_24bottle_drinks"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Lemon Beer Bottle 330ml (Drinks)</label
+                    >
+                    <input
+                        type="number"
+                        name="lemon_beer_bottle_330ml_drinks"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Lemon Beer Case 330ml 24bottle (Drinks)</label
+                    >
+                    <input
+                        type="number"
+                        name="lemon_beer_case_330ml_24bottle_drinks"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Coke Can Drinks</label
+                    >
+                    <input
+                        type="number"
+                        name="coke_can_drinks"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Coke Case Drinks</label
+                    >
+                    <input
+                        type="number"
+                        name="coke_case_drinks"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Diet Coke Can Drinks</label
+                    >
+                    <input
+                        type="number"
+                        name="diet_coke_can_drinks"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Diet Coke Case Drinks</label
+                    >
+                    <input
+                        type="number"
+                        name="diet_coke_case_drinks"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Fanta Can Drinks</label
+                    >
+                    <input
+                        type="number"
+                        name="fanta_can_drinks"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Fanta Case Drinks</label
+                    >
+                    <input
+                        type="number"
+                        name="fanta_case_drinks"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Sprite Can Drinks</label
+                    >
+                    <input
+                        type="number"
+                        name="sprite_can_drinks"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Sprite Case Drinks</label
+                    >
+                    <input
+                        type="number"
+                        name="sprite_case_drinks"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Soda Can Drinks</label
+                    >
+                    <input
+                        type="number"
+                        name="soda_can_drinks"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Soda Case Drinks</label
+                    >
+                    <input
+                        type="number"
+                        name="soda_case_drinks"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <!-- tonic water -->
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Tonic Water Can Drinks</label
+                    >
+                    <input
+                        type="number"
+                        name="tonic_water_can_drinks"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1"
+                        >Tonic Water Case Drinks</label
+                    >
+                    <input
+                        type="number"
+                        name="tonic_water_case_drinks"
+                        min="0"
+                        value="0"
+                        class="w-full border rounded-xl px-4 py-2"
+                    />
+                </div>
+            </div>
+
+            <div>
+                <!-- Comment -->
+                <div class="mt-8 py-2">
+                    <label class="block text-sm font-medium mb-1"
+                        >Comment / Special Requirements</label
+                    >
+                    <textarea
+                        name="comment"
+                        placeholder="Please advise any special food requirements, allergies, or comments here..."
+                        class="w-full border rounded-xl px-4 py-2 min-h-[80px]"
+                    ></textarea>
+                </div>
+
+                <div
+                    class="bg-yellow-50 border-l-4 border-yellow-400 p-4 my-8 rounded-xl text-sm text-gray-700"
+                >
+                    <p>
+                        Our staff will prepare the meal in the villa about 30
+                        minutes in advance of the time to be served - please
+                        ensure the staff have access to the villa at that time
+                        else it may not be able to be served. Please listen for
+                        the doorbell!
+                    </p>
+                </div>
+
+                <!-- Submit Button -->
+                <div class="text-center pt-4">
+                    <button
+                        type="submit"
+                        class="bg-purple-600 text-white px-8 py-3 rounded-xl hover:bg-purple-700 transition-all font-medium shadow-md"
+                    >
+                        Submit Order
+                    </button>
+                </div>
+            </div>
+        </div>
+    </form>
+</div>
diff --git a/src/routes/timesheet/+page.svelte b/src/routes/timesheet/+page.svelte
index 7a1d021..934196a 100644
--- a/src/routes/timesheet/+page.svelte
+++ b/src/routes/timesheet/+page.svelte
@@ -158,8 +158,18 @@
         class="max-w-6xl mx-auto bg-white p-8 rounded-2xl shadow-xl space-y-8 text-gray-800"
         on:submit|preventDefault={handleSubmit}
     >
+        <!-- logo -->
+        <div class="text-center mb-6">
+            <img
+                src="/src/lib/images/logo.webp"
+                alt="Logo"
+                class="mx-auto"
+                loading="lazy"
+                width="250"
+            />
+        </div>
         <!-- Title -->
-        <h2 class="text-2xl font-semibold">Timesheet Form</h2>
+        <h2 class="text-2xl font-semibold text-center">Timesheet Form</h2>
 
         <!-- 2 Column Grid -->
         <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
diff --git a/src/routes/transport/+page.svelte b/src/routes/transport/+page.svelte
new file mode 100644
index 0000000..6dc1ce4
--- /dev/null
+++ b/src/routes/transport/+page.svelte
@@ -0,0 +1,244 @@
+<script lang="ts">
+    // This is a placeholder for any script you might want to add
+    // For example, you could handle form submission here
+    import { onMount } from "svelte";
+    import { supabase } from "$lib/supabaseClient";
+    import { writable } from "svelte/store";
+
+    const area = [
+        { label: "Laksamana", value: "Laksamana" },
+        { label: "Drupadi", value: "Drupadi" },
+        { label: "Abimanyu", value: "Abimanyu" },
+        { label: "Seminyak", value: "Seminyak" },
+    ];
+
+    const requestThings = [
+        { label: "Airport pickup", value: "Airport pickup" },
+        { label: "Airport transfer", value: "Airport transfer" },
+        { label: "Day car charter", value: "Day car charter" },
+        { label: "One way drop off", value: "One way drop off" },
+        { label: "One way pickup", value: "One way pickup" },
+        { label: "Other", value: "Other" },
+    ];
+
+    type transport = {
+        guest_name: string;
+        requested_date: string;
+        area: string;
+        pickup_date: string;
+        request_things: string;
+        additional_notes: string;
+        requested_by: string;
+        vendor_email_address: string;
+    };
+
+    type transportInsert = {
+        guest_name: string;
+        requested_date: string;
+        area: string;
+        pickup_date: string;
+        request_things: string;
+        additional_notes: string;
+        requested_by: string;
+        vendor_email_address: string;
+    };
+
+    async function handleSubmit(event: Event): Promise<void> {
+        event.preventDefault();
+
+        const formData = new FormData(event.target as HTMLFormElement);
+
+        // Validate form data
+        if (!validateForm(formData)) {
+            console.error("Form validation failed");
+            return;
+        }
+        const transport: transportInsert = {
+            guest_name: formData.get("guest_name") as string,
+            requested_date: formData.get("requested_date") as string,
+            area: formData.get("area") as string,
+            pickup_date: formData.get("pickup_date") as string,
+            request_things: formData.get("request_things") as string,
+            additional_notes: formData.get("additional_notes") as string,
+            requested_by: formData.get("requested_by") as string,
+            vendor_email_address: formData.get(
+                "vendor_email_address",
+            ) as string,
+        };
+
+        const { data, error } = await supabase
+            .from("vb_transport")
+            .insert([transport]);
+
+        if (error) {
+            console.error("Error submitting transport:", error);
+        } else {
+            console.log("Transport submitted successfully:", data);
+            alert("Transport submitted successfully!");
+        }
+    }
+
+    export let formErrors = writable<{ [key: string]: string }>({});
+
+    function validateForm(formData: FormData): boolean {
+        const errors: { [key: string]: string } = {};
+        const requiredFields = [
+            "guest_name",
+            "requested_date",
+            "area",
+            "pickup_date",
+            "request_things",
+            "requested_by",
+            "vendor_email_address",
+        ];
+
+        requiredFields.forEach((field) => {
+            if (!formData.get(field) || formData.get(field) === "") {
+                errors[field] = `${field.replace(/_/g, " ")} is required.`;
+            }
+        });
+
+        formErrors.set(errors);
+        return Object.keys(errors).length === 0;
+    }
+
+    function errorClass(field: string): string {
+        return $formErrors[field] ? "border-red-500" : "border";
+    }
+</script>
+
+<div>
+    <form
+        class="max-w-6xl mx-auto bg-white p-8 rounded-2xl shadow-xl space-y-8 text-gray-800"
+        on:submit|preventDefault={handleSubmit}
+    >
+        <!-- logo -->
+        <div class="text-center mb-6">
+            <img
+                src="/src/lib/images/logo.webp"
+                alt="Logo"
+                class="mx-auto"
+                loading="lazy"
+                width="250"
+            />
+        </div>
+        <!-- Title -->
+        <h2 class="text-2xl font-semibold text-center">Transport Request</h2>
+
+        <!-- 2 Column Grid -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <div>
+                <label class="block text-sm font-medium mb-1">Guest Name</label>
+                <input
+                    type="text"
+                    name="guest_name"
+                    placeholder="Guest Name"
+                    class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 {errorClass(
+                        'guest_name',
+                    )}"
+                />
+            </div>
+            <div>
+                <label class="block text-sm font-medium mb-1"
+                    >Requested Date</label
+                >
+                <input
+                    type="date"
+                    name="requested_date"
+                    class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 {errorClass(
+                        'requested_date',
+                    )}"
+                />
+            </div>
+            <div>
+                <label class="block text-sm font-medium mb-1">Area</label>
+                <select
+                    name="area"
+                    class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 {errorClass(
+                        'area',
+                    )}"
+                >
+                    <option value="" disabled selected>Select Area</option>
+                    {#each area as item}
+                        <option value={item.value}>{item.label}</option>
+                    {/each}
+                </select>
+            </div>
+            <div>
+                <label class="block text-sm font-medium mb-1">Pickup Date</label
+                >
+                <input
+                    type="date"
+                    name="pickup_date"
+                    class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 {errorClass(
+                        'pickup_date',
+                    )}"
+                />
+            </div>
+            <div>
+                <label class="block text-sm font-medium mb-1"
+                    >Request Things</label
+                >
+                <select
+                    name="request_things"
+                    class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 {errorClass(
+                        'request_things',
+                    )}"
+                >
+                    <option value="" disabled selected>Select Request</option>
+                    {#each requestThings as item}
+                        <option value={item.value}>{item.label}</option>
+                    {/each}
+                </select>
+            </div>
+            <div>
+                <label class="block text-sm font-medium mb-1"
+                    >Additional Notes</label
+                >
+                <textarea
+                    name="additional_notes"
+                    placeholder="Additional Notes"
+                    class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 {errorClass(
+                        'additional_notes',
+                    )}"
+                ></textarea>
+            </div>
+            <div>
+                <label class="block text-sm font-medium mb-1"
+                    >Requested By</label
+                >
+                <input
+                    type="text"
+                    name="requested_by"
+                    placeholder="Requested By"
+                    class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 {errorClass(
+                        'requested_by',
+                    )}"
+                />
+            </div>
+            <div>
+                <label class="block text-sm font-medium mb-1"
+                    >Vendor Email Address</label
+                >
+                <input
+                    type="email"
+                    name="vendor_email_address"
+                    placeholder="Vendor Email Address"
+                    class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 {errorClass(
+                        'vendor_email_address',
+                    )}"
+                />
+            </div>
+        </div>
+
+        <!-- Submit Button -->
+        <div class="text-center pt-4">
+            <button
+                type="submit"
+                class="bg-purple-600 text-white px-8 py-3 rounded-xl hover:bg-purple-700 transition-all font-medium shadow-md"
+            >
+                Submit
+            </button>
+        </div>
+    </form>
+</div>