From 97ce39728168a47f89970e37cc23910ed22b15b0 Mon Sep 17 00:00:00 2001
From: chark1es <charles15851@gmail.com>
Date: Tue, 11 Mar 2025 05:55:52 -0700
Subject: [PATCH] improve event request form styling

---
 .../ASFundingSection.tsx                      | 741 +++++++-------
 .../EventDetailsSection.tsx                   | 186 +++-
 .../EventRequestForm.tsx                      | 192 ++--
 .../EventRequestFormPreview.tsx               |  11 +-
 .../InvoiceBuilder.tsx                        | 942 ++++++++++--------
 .../Officer_EventRequestForm/PRSection.tsx    | 340 +++++--
 .../TAPFormSection.tsx                        | 307 +++++-
 7 files changed, 1692 insertions(+), 1027 deletions(-)

diff --git a/src/components/dashboard/Officer_EventRequestForm/ASFundingSection.tsx b/src/components/dashboard/Officer_EventRequestForm/ASFundingSection.tsx
index 0769a71..4069910 100644
--- a/src/components/dashboard/Officer_EventRequestForm/ASFundingSection.tsx
+++ b/src/components/dashboard/Officer_EventRequestForm/ASFundingSection.tsx
@@ -3,418 +3,437 @@ import { motion } from 'framer-motion';
 import toast from 'react-hot-toast';
 import type { EventRequestFormData } from './EventRequestForm';
 import InvoiceBuilder from './InvoiceBuilder';
-import type { InvoiceData } from './InvoiceBuilder';
+import type { InvoiceData, InvoiceItem } from './InvoiceBuilder';
 import CustomAlert from '../universal/CustomAlert';
+import { Icon } from '@iconify/react';
+
+// Enhanced animation variants with faster transitions
+const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+        opacity: 1,
+        transition: {
+            staggerChildren: 0.035,
+            when: "beforeChildren",
+            duration: 0.3,
+            ease: "easeOut"
+        }
+    }
+};
 
-// Animation variants
 const itemVariants = {
-    hidden: { opacity: 0, y: 20 },
+    hidden: { opacity: 0, y: 10 },
     visible: {
         opacity: 1,
         y: 0,
         transition: {
             type: "spring",
-            stiffness: 300,
-            damping: 24
+            stiffness: 500,
+            damping: 25,
+            mass: 0.8,
+            duration: 0.25
         }
     }
 };
 
+// Input field hover animation
+const inputHoverVariants = {
+    hover: {
+        scale: 1.01,
+        boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+        transition: { duration: 0.15 }
+    }
+};
+
+// Button animation
+const buttonVariants = {
+    hover: {
+        scale: 1.03,
+        transition: { duration: 0.15, ease: "easeOut" }
+    },
+    tap: {
+        scale: 0.97,
+        transition: { duration: 0.1 }
+    }
+};
+
+// Toggle animation
+const toggleVariants = {
+    checked: { backgroundColor: "rgba(var(--p), 0.2)" },
+    unchecked: { backgroundColor: "rgba(0, 0, 0, 0.05)" },
+    hover: { scale: 1.01, transition: { duration: 0.15 } }
+};
+
 interface ASFundingSectionProps {
     formData: EventRequestFormData;
     onDataChange: (data: Partial<EventRequestFormData>) => void;
 }
 
 const ASFundingSection: React.FC<ASFundingSectionProps> = ({ formData, onDataChange }) => {
-    const [invoiceFile, setInvoiceFile] = useState<File | null>(formData.invoice);
     const [invoiceFiles, setInvoiceFiles] = useState<File[]>(formData.invoice_files || []);
-    const [useJsonInput, setUseJsonInput] = useState(false);
-    const [jsonInput, setJsonInput] = useState('');
-    const [jsonError, setJsonError] = useState('');
-    const [showExample, setShowExample] = useState(false);
+    const [jsonInput, setJsonInput] = useState<string>('');
+    const [jsonError, setJsonError] = useState<string>('');
+    const [showJsonInput, setShowJsonInput] = useState<boolean>(false);
+    const [isDragging, setIsDragging] = useState(false);
 
-    // Example JSON for the user to reference
-    const jsonExample = {
-        items: [
-            {
-                item: "Chicken Plate",
-                quantity: 10,
-                unit_price: 12.99
-            },
-            {
-                item: "Vegetarian Plate",
-                quantity: 5,
-                unit_price: 11.99
-            },
-            {
-                item: "Bottled Water",
-                quantity: 15,
-                unit_price: 1.50
-            }
-        ],
-        tax: 10.14,
-        tip: 15.00,
-        vendor: "L&L Hawaiian BBQ"
-    };
-
-    // Handle single invoice file upload (for backward compatibility)
+    // Handle invoice file upload
     const handleInvoiceFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         if (e.target.files && e.target.files.length > 0) {
-            const file = e.target.files[0];
-            setInvoiceFile(file);
-            onDataChange({ invoice: file });
+            const newFiles = Array.from(e.target.files) as File[];
+            setInvoiceFiles(newFiles);
+            onDataChange({ invoice_files: newFiles });
         }
     };
 
-    // Handle multiple invoice files upload
-    const handleMultipleInvoiceFilesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        if (e.target.files && e.target.files.length > 0) {
-            const files = Array.from(e.target.files) as File[];
-
-            // Check file sizes
-            const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB limit per file
-            const oversizedFiles = files.filter(file => file.size > MAX_FILE_SIZE);
-
-            if (oversizedFiles.length > 0) {
-                toast.error(`Some files exceed the 10MB size limit: ${oversizedFiles.map(f => f.name).join(', ')}`);
-                return;
-            }
-
-            // Update state with new files
-            const updatedFiles = [...invoiceFiles, ...files];
-            setInvoiceFiles(updatedFiles);
-            onDataChange({ invoice_files: updatedFiles });
-
-            // Also set the first file as the main invoice file for backward compatibility
-            if (files.length > 0 && !formData.invoice) {
-                setInvoiceFile(files[0]);
-                onDataChange({ invoice: files[0] });
-            }
-
-            toast.success(`Added ${files.length} file${files.length > 1 ? 's' : ''} successfully`);
-        }
-    };
-
-    // Remove an invoice file
-    const handleRemoveInvoiceFile = (index: number) => {
-        const updatedFiles = [...invoiceFiles];
-        const removedFileName = updatedFiles[index].name;
-        updatedFiles.splice(index, 1);
-        setInvoiceFiles(updatedFiles);
-        onDataChange({ invoice_files: updatedFiles });
-
-        // Update the main invoice file if needed
-        if (invoiceFile && invoiceFile.name === removedFileName) {
-            const newMainFile = updatedFiles.length > 0 ? updatedFiles[0] : null;
-            setInvoiceFile(newMainFile);
-            onDataChange({ invoice: newMainFile });
-        }
-
-        toast.success(`Removed ${removedFileName}`);
-    };
-
-    // Handle invoice data change
-    const handleInvoiceDataChange = (invoiceData: InvoiceData) => {
-        // Update the invoiceData in the form
-        onDataChange({ invoiceData });
-
-        // For backward compatibility, create a properly formatted JSON string
-        const jsonFormat = {
-            items: invoiceData.items.map(item => ({
-                item: item.description,
-                quantity: item.quantity,
-                unit_price: item.unitPrice
-            })),
-            tax: invoiceData.taxAmount,
-            tip: invoiceData.tipAmount,
-            total: invoiceData.total,
-            vendor: invoiceData.vendor
-        };
-
-        // For backward compatibility, still update the itemized_invoice field
-        // but with a more structured format that's easier to parse if needed
-        const itemizedText = JSON.stringify(jsonFormat, null, 2);
-
-        // Update the itemized_invoice field for backward compatibility
-        onDataChange({ itemized_invoice: itemizedText });
-    };
-
     // Handle JSON input change
     const handleJsonInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-        const value = e.target.value;
-        setJsonInput(value);
-
-        // Validate JSON as user types
-        if (value.trim()) {
-            try {
-                JSON.parse(value);
-                setJsonError('');
-            } catch (err) {
-                setJsonError('Invalid JSON format. Please check your syntax.');
-            }
-        } else {
-            setJsonError('');
-        }
+        setJsonInput(e.target.value);
+        setJsonError('');
     };
 
     // Show JSON example
     const showJsonExample = () => {
-        // Toggle example visibility
-        setShowExample(!showExample);
-
-        // If showing example, populate the textarea with the example JSON
-        if (!showExample) {
-            setJsonInput(JSON.stringify(jsonExample, null, 2));
-        }
+        const example = {
+            vendor: "Example Restaurant",
+            items: [
+                {
+                    id: "item-1",
+                    description: "Burger",
+                    quantity: 2,
+                    unitPrice: 12.99,
+                    amount: 25.98
+                },
+                {
+                    id: "item-2",
+                    description: "Fries",
+                    quantity: 2,
+                    unitPrice: 4.99,
+                    amount: 9.98
+                }
+            ],
+            subtotal: 35.96,
+            taxRate: 9.0,
+            taxAmount: 3.24,
+            tipPercentage: 13.9,
+            tipAmount: 5.00,
+            total: 44.20
+        };
+        setJsonInput(JSON.stringify(example, null, 2));
     };
 
     // Validate and apply JSON
     const validateAndApplyJson = () => {
         try {
-            // Parse the JSON input
-            const parsedJson = JSON.parse(jsonInput);
-
-            // Validate the structure
-            let validationError = '';
-
-            // Check for required fields
-            if (!parsedJson.items || !Array.isArray(parsedJson.items)) {
-                validationError = 'Missing or invalid "items" array.';
-            } else if (parsedJson.items.length === 0) {
-                validationError = 'The "items" array cannot be empty.';
-            } else {
-                // Check each item in the array
-                for (let i = 0; i < parsedJson.items.length; i++) {
-                    const item = parsedJson.items[i];
-                    if (!item.item || typeof item.item !== 'string') {
-                        validationError = `Item #${i + 1} is missing a valid "item" name.`;
-                        break;
-                    }
-                    if (typeof item.quantity !== 'number' || item.quantity <= 0) {
-                        validationError = `Item #${i + 1} is missing a valid "quantity" (must be a positive number).`;
-                        break;
-                    }
-                    if (typeof item.unit_price !== 'number' || item.unit_price < 0) {
-                        validationError = `Item #${i + 1} is missing a valid "unit_price" (must be a non-negative number).`;
-                        break;
-                    }
-                }
-            }
-
-            // Check other required fields
-            if (!validationError) {
-                if (typeof parsedJson.tax !== 'number') {
-                    validationError = 'Missing or invalid "tax" amount (must be a number).';
-                } else if (typeof parsedJson.tip !== 'number') {
-                    validationError = 'Missing or invalid "tip" amount (must be a number).';
-                } else if (!parsedJson.vendor || typeof parsedJson.vendor !== 'string') {
-                    validationError = 'Missing or invalid "vendor" name.';
-                }
-            }
-
-            if (validationError) {
-                setJsonError(validationError);
+            if (!jsonInput.trim()) {
+                setJsonError('JSON input is empty');
                 return;
             }
 
-            // Calculate subtotal and total
-            const subtotal = parsedJson.items.reduce((sum: number, item: any) => sum + (item.quantity * item.unit_price), 0);
-            const total = subtotal + parsedJson.tax + parsedJson.tip;
+            const data = JSON.parse(jsonInput);
 
-            // Convert the JSON to the format expected by InvoiceData
-            const invoiceData: InvoiceData = {
-                items: parsedJson.items.map((item: any, index: number) => ({
-                    id: `item-${index + 1}`,
-                    description: item.item,
+            // Validate structure
+            if (!data.vendor) {
+                setJsonError('Vendor field is required');
+                return;
+            }
+
+            if (!Array.isArray(data.items) || data.items.length === 0) {
+                setJsonError('Items array is required and must contain at least one item');
+                return;
+            }
+
+            // Validate items
+            for (const item of data.items) {
+                if (!item.description || typeof item.unitPrice !== 'number' || typeof item.quantity !== 'number') {
+                    setJsonError('Each item must have description, unitPrice, and quantity fields');
+                    return;
+                }
+            }
+
+            // Validate tax, tip, and total
+            if (typeof data.taxAmount !== 'number') {
+                setJsonError('Tax amount must be a number');
+                return;
+            }
+
+            if (typeof data.tipAmount !== 'number') {
+                setJsonError('Tip amount must be a number');
+                return;
+            }
+
+            if (typeof data.total !== 'number') {
+                setJsonError('Total is required and must be a number');
+                return;
+            }
+
+            // Create itemized invoice string for Pocketbase
+            const itemizedInvoice = JSON.stringify({
+                vendor: data.vendor,
+                items: data.items.map((item: InvoiceItem) => ({
+                    item: item.description,
                     quantity: item.quantity,
-                    unitPrice: item.unit_price,
-                    amount: item.quantity * item.unit_price
+                    unit_price: item.unitPrice,
+                    amount: item.amount
                 })),
-                subtotal: subtotal,
-                taxRate: subtotal ? (parsedJson.tax / subtotal) * 100 : 0,
-                taxAmount: parsedJson.tax,
-                tipPercentage: subtotal ? (parsedJson.tip / subtotal) * 100 : 0,
-                tipAmount: parsedJson.tip,
-                total: total,
-                vendor: parsedJson.vendor
-            };
+                subtotal: data.subtotal,
+                tax: data.taxAmount,
+                tip: data.tipAmount,
+                total: data.total
+            }, null, 2);
 
-            // Update the form data
-            handleInvoiceDataChange(invoiceData);
+            // Apply the JSON data to the form
+            onDataChange({
+                invoiceData: data,
+                itemized_invoice: itemizedInvoice,
+                as_funding_required: true
+            });
 
-            // Update the itemized_invoice field with the complete JSON including calculated total
-            const completeJson = {
-                ...parsedJson,
-                subtotal: subtotal,
-                total: total
-            };
-            onDataChange({ itemized_invoice: JSON.stringify(completeJson, null, 2) });
-
-            // Show success message
-            toast.success('JSON invoice data applied successfully!');
-
-            // Optionally, switch back to the invoice builder view to show the applied data
-            setUseJsonInput(false);
-        } catch (err) {
-            setJsonError('Failed to parse JSON. Please check your syntax.');
+            toast.success('Invoice data applied successfully');
+            setShowJsonInput(false);
+        } catch (error) {
+            setJsonError('Invalid JSON format: ' + (error as Error).message);
         }
     };
 
+    // Handle drag events for file upload
+    const handleDragOver = (e: React.DragEvent) => {
+        e.preventDefault();
+        setIsDragging(true);
+    };
+
+    const handleDragLeave = (e: React.DragEvent) => {
+        e.preventDefault();
+        setIsDragging(false);
+    };
+
+    const handleDrop = (e: React.DragEvent) => {
+        e.preventDefault();
+        setIsDragging(false);
+
+        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+            const newFiles = Array.from(e.dataTransfer.files) as File[];
+            setInvoiceFiles(newFiles);
+            onDataChange({ invoice_files: newFiles });
+        }
+    };
+
+    // Handle invoice data change
+    const handleInvoiceDataChange = (data: InvoiceData) => {
+        // Create itemized invoice string for Pocketbase
+        const itemizedInvoice = JSON.stringify({
+            vendor: data.vendor,
+            items: data.items.map((item: InvoiceItem) => ({
+                item: item.description,
+                quantity: item.quantity,
+                unit_price: item.unitPrice,
+                amount: item.amount
+            })),
+            subtotal: data.subtotal,
+            tax: data.taxAmount,
+            tip: data.tipAmount,
+            total: data.total
+        }, null, 2);
+
+        onDataChange({
+            invoiceData: data,
+            itemized_invoice: itemizedInvoice
+        });
+    };
+
     return (
-        <div className="space-y-6">
-            <h2 className="text-2xl font-bold mb-4 text-primary">AS Funding Information</h2>
-
-            <CustomAlert
-                type="warning"
-                title="Important Information"
-                message="Please make sure the restaurant is a valid AS Funding food vendor! An invoice can be an unofficial receipt. Just make sure that the restaurant name and location, desired pickup or delivery date and time, all the items ordered plus their prices, discount/fees/tax/tip, and total are on the invoice! We don't recommend paying out of pocket because reimbursements can be a hassle when you're not a Principal Member."
-                className="mb-6"
-                icon="heroicons:exclamation-triangle"
-            />
-
-            {/* Invoice Builder Instructions */}
-            <motion.div variants={itemVariants} className="bg-base-300/50 p-4 rounded-lg mb-6">
-                <h3 className="font-bold text-lg mb-2">How to Use the Invoice Builder</h3>
-                <ol className="list-decimal list-inside space-y-2 text-sm">
-                    <li>Enter the vendor/restaurant name in the field provided.</li>
-                    <li>Add each item from your invoice by filling in the description, quantity, and unit price, then click "Add Item".</li>
-                    <li>The subtotal, tax, and tip will be calculated automatically based on the tax rate and tip percentage.</li>
-                    <li>You can adjust the tax rate (default is 7.75% for San Diego) and tip percentage as needed.</li>
-                    <li>Remove items by clicking the "X" button next to each item.</li>
-                    <li>Upload your actual invoice file (receipt, screenshot, etc.) using the file upload below.</li>
-                </ol>
-            </motion.div>
-
-            {/* JSON Invoice Paste Option */}
-            <motion.div variants={itemVariants} className="bg-base-300/50 p-4 rounded-lg mb-6">
-                <div className="flex justify-between items-center mb-3">
-                    <h3 className="font-bold text-lg">Paste JSON Invoice</h3>
-                    <div className="form-control">
-                        <label className="label cursor-pointer">
-                            <span className="label-text mr-2">Use JSON input</span>
-                            <input
-                                type="checkbox"
-                                className="toggle toggle-primary"
-                                checked={useJsonInput}
-                                onChange={(e) => setUseJsonInput(e.target.checked)}
-                            />
-                        </label>
-                    </div>
-                </div>
-
-                {useJsonInput && (
-                    <>
-                        <div className="form-control mb-4">
-                            <label className="label">
-                                <span className="label-text font-medium">Paste your JSON invoice data</span>
-                                <span className="label-text-alt">
-                                    <div className="tooltip tooltip-left" data-tip={jsonInput.trim().length > 0 ? "Clear the text field to see an example" : ""}>
-                                        <button
-                                            type="button"
-                                            className="btn btn-xs btn-ghost"
-                                            onClick={showJsonExample}
-                                            disabled={jsonInput.trim().length > 0}
-                                        >
-                                            See example
-                                        </button>
-                                    </div>
-                                </span>
-                            </label>
-                            <textarea
-                                className={`textarea textarea-bordered h-48 font-mono text-sm ${jsonError ? 'textarea-error' : ''}`}
-                                value={jsonInput}
-                                onChange={handleJsonInputChange}
-                                placeholder="paste json here"
-                            ></textarea>
-                            {jsonError && (
-                                <label className="label">
-                                    <span className="label-text-alt text-error">{jsonError}</span>
-                                </label>
-                            )}
-                        </div>
-
-                        <div className="flex justify-end mb-4">
-                            <button
-                                type="button"
-                                className="btn btn-primary btn-sm"
-                                onClick={validateAndApplyJson}
-                                disabled={!!jsonError}
-                            >
-                                Apply JSON
-                            </button>
-                        </div>
-
-                        <CustomAlert
-                            type="info"
-                            title="Required JSON Format"
-                            message={`Your JSON must include: an array of items (each with item name, quantity, and unit_price), tax amount, tip amount, and vendor name. The total will be calculated automatically.`}
-                            className="mb-4"
-                            icon="heroicons:information-circle"
-                        />
-                    </>
-                )}
-            </motion.div>
-
-            {/* Invoice Builder */}
-            {!useJsonInput && (
-                <InvoiceBuilder
-                    invoiceData={formData.invoiceData}
-                    onChange={handleInvoiceDataChange}
-                />
-            )}
-
-            {/* Invoice file upload */}
-            <motion.div variants={itemVariants} className="form-control">
-                <label className="label">
-                    <span className="label-text font-medium">
-                        Upload your invoice files (receipts, screenshots, etc.)
-                    </span>
-                    <span className="label-text-alt text-error">*</span>
-                </label>
-                <input
-                    type="file"
-                    className="file-input file-input-bordered w-full file-input-primary hover:file-input-ghost transition-all duration-300"
-                    onChange={handleMultipleInvoiceFilesChange}
-                    accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
-                    multiple
-                    required={invoiceFiles.length === 0}
-                />
-
-                {invoiceFiles.length > 0 && (
-                    <div className="mt-4">
-                        <p className="text-sm font-medium mb-2">Uploaded files:</p>
-                        <div className="space-y-2">
-                            {invoiceFiles.map((file, index) => (
-                                <div key={index} className="flex items-center justify-between bg-base-300/30 p-2 rounded">
-                                    <span className="text-sm truncate max-w-[80%]">{file.name}</span>
-                                    <button
-                                        type="button"
-                                        className="btn btn-ghost btn-xs"
-                                        onClick={() => handleRemoveInvoiceFile(index)}
-                                    >
-                                        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                                        </svg>
-                                    </button>
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-                )}
-
-                <p className="text-xs text-gray-400 mt-2">
-                    Official food invoices will be required 2 weeks before the start of your event. Please use the following naming format: EventName_OrderLocation_DateOfEvent (i.e. QPWorkathon#1_PapaJohns_01/06/2025)
+        <motion.div
+            className="space-y-8"
+            initial="hidden"
+            animate="visible"
+            variants={containerVariants}
+        >
+            <motion.div variants={itemVariants}>
+                <h2 className="text-3xl font-bold mb-4 text-primary bg-gradient-to-r from-primary to-primary-focus bg-clip-text text-transparent">
+                    AS Funding Details
+                </h2>
+                <p className="text-lg text-base-content/80 mb-6">
+                    Please provide the necessary information for your Associated Students funding request.
                 </p>
             </motion.div>
 
-            <CustomAlert
-                type="warning"
-                title="Important Note"
-                message="AS Funding requests must be submitted at least 6 weeks before your event. Please check the Funding Guide or the Google Calendar for the funding request deadlines."
-                className="mb-4"
-                icon="heroicons:clock"
-            />
-        </div>
+            <motion.div variants={itemVariants}>
+                <CustomAlert
+                    type="warning"
+                    title="Important Deadline"
+                    message="AS Funding requests must be submitted at least 6 weeks before your event. Please check the Funding Guide or the Google Calendar for the funding request deadlines."
+                    className="mb-4"
+                    icon="heroicons:clock"
+                />
+            </motion.div>
+
+            {/* Invoice Upload Section */}
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
+                <h3 className="text-xl font-semibold mb-2 text-primary">Invoice Information</h3>
+                <p className="text-sm text-gray-500 mb-4">Upload your invoice files or create an itemized invoice below.</p>
+
+                <motion.div
+                    className={`mt-2 border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors ${isDragging ? 'border-primary bg-primary/5' : 'border-base-300 hover:border-primary/50'
+                        }`}
+                    whileHover={{ scale: 1.02, boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)" }}
+                    whileTap={{ scale: 0.98 }}
+                    onDragOver={handleDragOver}
+                    onDragLeave={handleDragLeave}
+                    onDrop={handleDrop}
+                    onClick={() => document.getElementById('invoice-files')?.click()}
+                >
+                    <input
+                        id="invoice-files"
+                        type="file"
+                        className="hidden"
+                        onChange={handleInvoiceFileChange}
+                        accept=".pdf,.jpg,.jpeg,.png"
+                        multiple
+                    />
+
+                    <div className="flex flex-col items-center justify-center gap-3">
+                        <motion.div
+                            className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center text-primary"
+                            whileHover={{ rotate: 15, scale: 1.1 }}
+                        >
+                            <Icon icon="heroicons:document-text" className="h-8 w-8" />
+                        </motion.div>
+
+                        {invoiceFiles.length > 0 ? (
+                            <>
+                                <p className="font-medium text-primary">{invoiceFiles.length} file(s) selected:</p>
+                                <div className="max-h-24 overflow-y-auto text-left w-full">
+                                    <ul className="list-disc list-inside text-sm">
+                                        {invoiceFiles.map((file, index) => (
+                                            <li key={index} className="truncate">{file.name}</li>
+                                        ))}
+                                    </ul>
+                                </div>
+                                <p className="text-xs text-gray-500">Click or drag to replace</p>
+                            </>
+                        ) : (
+                            <>
+                                <p className="font-medium">Drop your invoice files here or click to browse</p>
+                                <p className="text-xs text-gray-500">Supports PDF, JPG, JPEG, PNG</p>
+                            </>
+                        )}
+                    </div>
+                </motion.div>
+            </motion.div>
+
+            {/* JSON/Builder Toggle */}
+            <motion.div
+                variants={itemVariants}
+                className="bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
+                <div className="flex justify-between items-center mb-4">
+                    <h3 className="text-xl font-bold text-primary">Invoice Details</h3>
+
+                    <motion.div
+                        className="bg-base-300/50 p-1 rounded-lg flex items-center"
+                        whileHover="hover"
+                        variants={toggleVariants}
+                    >
+                        <motion.button
+                            className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${!showJsonInput ? 'bg-primary text-primary-content' : 'hover:bg-base-200'
+                                }`}
+                            onClick={() => setShowJsonInput(false)}
+                            whileHover={{ scale: 1.05 }}
+                            whileTap={{ scale: 0.95 }}
+                        >
+                            Invoice Builder
+                        </motion.button>
+                        <motion.button
+                            className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${showJsonInput ? 'bg-primary text-primary-content' : 'hover:bg-base-200'
+                                }`}
+                            onClick={() => setShowJsonInput(true)}
+                            whileHover={{ scale: 1.05 }}
+                            whileTap={{ scale: 0.95 }}
+                        >
+                            Paste JSON
+                        </motion.button>
+                    </motion.div>
+                </div>
+
+                {showJsonInput ? (
+                    <motion.div
+                        className="space-y-4"
+                        initial={{ opacity: 0, y: 10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.3 }}
+                    >
+                        <div className="flex justify-between items-center">
+                            <label className="label-text font-medium">JSON Invoice Data</label>
+                            <motion.button
+                                type="button"
+                                className="btn btn-sm btn-ghost text-primary"
+                                onClick={showJsonExample}
+                                whileHover="hover"
+                                whileTap="tap"
+                                variants={buttonVariants}
+                            >
+                                <Icon icon="heroicons:code-bracket" className="w-4 h-4 mr-1" />
+                                Show Example
+                            </motion.button>
+                        </div>
+
+                        <motion.textarea
+                            className={`textarea textarea-bordered w-full h-64 font-mono text-sm ${jsonError ? 'textarea-error' : 'focus:textarea-primary'}`}
+                            value={jsonInput}
+                            onChange={handleJsonInputChange}
+                            placeholder="Paste your JSON invoice data here..."
+                            whileHover="hover"
+                            variants={inputHoverVariants}
+                        />
+
+                        {jsonError && (
+                            <div className="text-error text-sm flex items-center gap-1">
+                                <Icon icon="heroicons:exclamation-circle" className="w-4 h-4" />
+                                {jsonError}
+                            </div>
+                        )}
+
+                        <div className="flex justify-end">
+                            <motion.button
+                                type="button"
+                                className="btn btn-primary"
+                                onClick={validateAndApplyJson}
+                                whileHover="hover"
+                                whileTap="tap"
+                                variants={buttonVariants}
+                            >
+                                <Icon icon="heroicons:check-circle" className="w-5 h-5 mr-1" />
+                                Apply JSON
+                            </motion.button>
+                        </div>
+                    </motion.div>
+                ) : (
+                    <motion.div
+                        initial={{ opacity: 0, y: 10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.3 }}
+                    >
+                        <InvoiceBuilder
+                            invoiceData={formData.invoiceData || {
+                                vendor: '',
+                                items: [],
+                                subtotal: 0,
+                                taxRate: 0,
+                                taxAmount: 0,
+                                tipPercentage: 0,
+                                tipAmount: 0,
+                                total: 0
+                            }}
+                            onChange={handleInvoiceDataChange}
+                        />
+                    </motion.div>
+                )}
+            </motion.div>
+        </motion.div>
     );
 };
 
diff --git a/src/components/dashboard/Officer_EventRequestForm/EventDetailsSection.tsx b/src/components/dashboard/Officer_EventRequestForm/EventDetailsSection.tsx
index c525463..69f8674 100644
--- a/src/components/dashboard/Officer_EventRequestForm/EventDetailsSection.tsx
+++ b/src/components/dashboard/Officer_EventRequestForm/EventDetailsSection.tsx
@@ -2,8 +2,20 @@ import React from 'react';
 import { motion } from 'framer-motion';
 import type { EventRequestFormData } from './EventRequestForm';
 import type { EventRequest } from '../../../schemas/pocketbase';
+import CustomAlert from '../universal/CustomAlert';
+
+// Enhanced animation variants
+const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+        opacity: 1,
+        transition: {
+            staggerChildren: 0.1,
+            when: "beforeChildren"
+        }
+    }
+};
 
-// Animation variants
 const itemVariants = {
     hidden: { opacity: 0, y: 20 },
     visible: {
@@ -17,6 +29,15 @@ const itemVariants = {
     }
 };
 
+// Input field hover animation
+const inputHoverVariants = {
+    hover: {
+        scale: 1.01,
+        boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+        transition: { duration: 0.2 }
+    }
+};
+
 interface EventDetailsSectionProps {
     formData: EventRequestFormData;
     onDataChange: (data: Partial<EventRequestFormData>) => void;
@@ -24,101 +45,156 @@ interface EventDetailsSectionProps {
 
 const EventDetailsSection: React.FC<EventDetailsSectionProps> = ({ formData, onDataChange }) => {
     return (
-        <div className="space-y-6">
-            <h2 className="text-2xl font-bold mb-4 text-primary">Event Details</h2>
+        <motion.div
+            className="space-y-8"
+            initial="hidden"
+            animate="visible"
+            variants={containerVariants}
+        >
+            <motion.div variants={itemVariants}>
+                <h2 className="text-3xl font-bold mb-4 text-primary bg-gradient-to-r from-primary to-primary-focus bg-clip-text text-transparent">
+                    Event Details
+                </h2>
+            </motion.div>
 
-            <div className="bg-base-300/50 p-4 rounded-lg mb-6">
-                <p className="text-sm">
-                    Please remember to ping @Coordinators in #-events on Slack once you've submitted this form so that they can fill out a TAP form for you.
-                </p>
-            </div>
+            <motion.div variants={itemVariants}>
+                <CustomAlert
+                    type="info"
+                    title="Coordinator Notification"
+                    message="Please remember to ping @Coordinators in #-events on Slack once you've submitted this form so that they can fill out a TAP form for you."
+                    className="mb-6"
+                    icon="heroicons:information-circle"
+                />
+            </motion.div>
 
             {/* Event Name */}
-            <motion.div variants={itemVariants} className="form-control bg-base-200/50 p-4 rounded-lg">
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
                 <label className="label">
                     <span className="label-text font-medium text-lg">Event Name</span>
                     <span className="label-text-alt text-error">*</span>
                 </label>
-                <input
+                <motion.input
                     type="text"
                     className="input input-bordered focus:input-primary transition-all duration-300 mt-2"
                     value={formData.name}
                     onChange={(e) => onDataChange({ name: e.target.value })}
                     placeholder="Enter event name"
                     required
+                    whileHover="hover"
+                    variants={inputHoverVariants}
                 />
             </motion.div>
 
             {/* Event Description */}
-            <motion.div variants={itemVariants} className="form-control bg-base-200/50 p-4 rounded-lg">
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
                 <label className="label">
                     <span className="label-text font-medium text-lg">Event Description</span>
                     <span className="label-text-alt text-error">*</span>
                 </label>
-                <textarea
+                <motion.textarea
                     className="textarea textarea-bordered focus:textarea-primary transition-all duration-300 min-h-[120px] mt-2"
                     value={formData.event_description}
                     onChange={(e) => onDataChange({ event_description: e.target.value })}
                     placeholder="Provide a detailed description of your event"
                     rows={4}
                     required
+                    whileHover="hover"
+                    variants={inputHoverVariants}
                 />
             </motion.div>
 
-            {/* Event Start Date */}
-            <motion.div variants={itemVariants} className="form-control">
-                <label className="label">
-                    <span className="label-text font-medium">Event Start Date & Time</span>
-                    <span className="label-text-alt text-error">*</span>
-                </label>
-                <input
-                    type="datetime-local"
-                    className="input input-bordered focus:input-primary transition-all duration-300"
-                    value={formData.start_date_time}
-                    onChange={(e) => onDataChange({ start_date_time: e.target.value })}
-                    required
-                />
-            </motion.div>
+            {/* Date and Time Section */}
+            <motion.div
+                variants={itemVariants}
+                className="grid grid-cols-1 md:grid-cols-2 gap-6"
+            >
+                {/* Event Start Date */}
+                <motion.div
+                    className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                    whileHover={{ y: -2 }}
+                >
+                    <label className="label">
+                        <span className="label-text font-medium text-lg">Event Start</span>
+                        <span className="label-text-alt text-error">*</span>
+                    </label>
+                    <motion.input
+                        type="datetime-local"
+                        className="input input-bordered focus:input-primary transition-all duration-300 mt-2"
+                        value={formData.start_date_time}
+                        onChange={(e) => onDataChange({ start_date_time: e.target.value })}
+                        required
+                        whileHover="hover"
+                        variants={inputHoverVariants}
+                    />
+                </motion.div>
 
-            {/* Event End Date */}
-            <motion.div variants={itemVariants} className="form-control">
-                <label className="label">
-                    <span className="label-text font-medium">Event End Date & Time</span>
-                    <span className="label-text-alt text-error">*</span>
-                </label>
-                <input
-                    type="datetime-local"
-                    className="input input-bordered focus:input-primary transition-all duration-300"
-                    value={formData.end_date_time}
-                    onChange={(e) => onDataChange({ end_date_time: e.target.value })}
-                    required
-                />
+                {/* Event End Date */}
+                <motion.div
+                    className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                    whileHover={{ y: -2 }}
+                >
+                    <label className="label">
+                        <span className="label-text font-medium text-lg">Event End</span>
+                        <span className="label-text-alt text-error">*</span>
+                    </label>
+                    <motion.input
+                        type="datetime-local"
+                        className="input input-bordered focus:input-primary transition-all duration-300 mt-2"
+                        value={formData.end_date_time}
+                        onChange={(e) => onDataChange({ end_date_time: e.target.value })}
+                        required
+                        whileHover="hover"
+                        variants={inputHoverVariants}
+                    />
+                </motion.div>
             </motion.div>
 
             {/* Event Location */}
-            <motion.div variants={itemVariants} className="form-control">
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
                 <label className="label">
-                    <span className="label-text font-medium">Event Location</span>
+                    <span className="label-text font-medium text-lg">Event Location</span>
                     <span className="label-text-alt text-error">*</span>
                 </label>
-                <input
+                <motion.input
                     type="text"
-                    className="input input-bordered focus:input-primary transition-all duration-300"
+                    className="input input-bordered focus:input-primary transition-all duration-300 mt-2"
                     value={formData.location}
                     onChange={(e) => onDataChange({ location: e.target.value })}
                     placeholder="Enter event location"
                     required
+                    whileHover="hover"
+                    variants={inputHoverVariants}
                 />
             </motion.div>
 
             {/* Room Booking */}
-            <motion.div variants={itemVariants} className="form-control">
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
                 <label className="label">
-                    <span className="label-text font-medium">Do you/will you have a room booking for this event?</span>
+                    <span className="label-text font-medium text-lg">Room Booking Status</span>
                     <span className="label-text-alt text-error">*</span>
                 </label>
-                <div className="flex gap-4">
-                    <label className="flex items-center gap-2 cursor-pointer">
+                <div className="flex gap-6 mt-2">
+                    <motion.label
+                        className="flex items-center gap-3 cursor-pointer bg-base-100 p-3 rounded-lg hover:bg-primary/10 transition-colors"
+                        whileHover={{ scale: 1.02 }}
+                        whileTap={{ scale: 0.98 }}
+                    >
                         <input
                             type="radio"
                             className="radio radio-primary"
@@ -126,9 +202,13 @@ const EventDetailsSection: React.FC<EventDetailsSectionProps> = ({ formData, onD
                             onChange={() => onDataChange({ will_or_have_room_booking: true })}
                             required
                         />
-                        <span>Yes</span>
-                    </label>
-                    <label className="flex items-center gap-2 cursor-pointer">
+                        <span className="font-medium">Yes, I have/will have a booking</span>
+                    </motion.label>
+                    <motion.label
+                        className="flex items-center gap-3 cursor-pointer bg-base-100 p-3 rounded-lg hover:bg-primary/10 transition-colors"
+                        whileHover={{ scale: 1.02 }}
+                        whileTap={{ scale: 0.98 }}
+                    >
                         <input
                             type="radio"
                             className="radio radio-primary"
@@ -136,11 +216,11 @@ const EventDetailsSection: React.FC<EventDetailsSectionProps> = ({ formData, onD
                             onChange={() => onDataChange({ will_or_have_room_booking: false })}
                             required
                         />
-                        <span>No</span>
-                    </label>
+                        <span className="font-medium">No, I don't need a booking</span>
+                    </motion.label>
                 </div>
             </motion.div>
-        </div>
+        </motion.div>
     );
 };
 
diff --git a/src/components/dashboard/Officer_EventRequestForm/EventRequestForm.tsx b/src/components/dashboard/Officer_EventRequestForm/EventRequestForm.tsx
index 6f2029c..9aaaf42 100644
--- a/src/components/dashboard/Officer_EventRequestForm/EventRequestForm.tsx
+++ b/src/components/dashboard/Officer_EventRequestForm/EventRequestForm.tsx
@@ -82,6 +82,9 @@ export interface EventRequestFormData {
     formReviewed?: boolean; // Track if the form has been reviewed
 }
 
+// Add CustomAlert import
+import CustomAlert from '../universal/CustomAlert';
+
 const EventRequestForm: React.FC = () => {
     const [currentStep, setCurrentStep] = useState<number>(1);
     const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
@@ -164,10 +167,22 @@ const EventRequestForm: React.FC = () => {
 
     // Handle form section data changes
     const handleSectionDataChange = (sectionData: Partial<EventRequestFormData>) => {
-        setFormData(prevData => ({
-            ...prevData,
-            ...sectionData
-        }));
+        // Ensure both needs_graphics and flyers_needed are synchronized
+        if (sectionData.flyers_needed !== undefined && sectionData.needs_graphics === undefined) {
+            sectionData.needs_graphics = sectionData.flyers_needed ? true : false;
+        }
+
+        // Ensure both needs_as_funding and as_funding_required are synchronized
+        if (sectionData.needs_as_funding !== undefined && sectionData.as_funding_required === undefined) {
+            sectionData.as_funding_required = sectionData.needs_as_funding ? true : false;
+        }
+
+        setFormData(prevData => {
+            // Save to localStorage
+            const updatedData = { ...prevData, ...sectionData };
+            localStorage.setItem('eventRequestFormData', JSON.stringify(updatedData));
+            return updatedData;
+        });
     };
 
     // Add this function before the handleSubmit function
@@ -260,19 +275,22 @@ const EventRequestForm: React.FC = () => {
                 end_date_time: new Date(formData.end_date_time).toISOString(),
                 event_description: formData.event_description,
                 flyers_needed: formData.flyers_needed,
+                photography_needed: formData.photography_needed,
+                as_funding_required: formData.needs_as_funding,
+                food_drinks_being_served: formData.food_drinks_being_served,
+                // Store the itemized_invoice as a string for backward compatibility
+                itemized_invoice: formData.itemized_invoice,
                 flyer_type: formData.flyer_type,
                 other_flyer_type: formData.other_flyer_type,
                 flyer_advertising_start_date: formData.flyer_advertising_start_date ? new Date(formData.flyer_advertising_start_date).toISOString() : '',
                 flyer_additional_requests: formData.flyer_additional_requests,
-                photography_needed: formData.photography_needed,
                 required_logos: formData.required_logos,
                 advertising_format: formData.advertising_format,
                 will_or_have_room_booking: formData.will_or_have_room_booking,
                 expected_attendance: formData.expected_attendance,
-                as_funding_required: formData.as_funding_required,
-                food_drinks_being_served: formData.food_drinks_being_served,
-                // Store the itemized_invoice as a string for backward compatibility
-                itemized_invoice: formData.itemized_invoice,
+                // Add these fields explicitly to match the schema
+                needs_graphics: formData.needs_graphics,
+                needs_as_funding: formData.needs_as_funding,
                 // Store the invoice data as a properly formatted JSON object
                 invoice_data: {
                     items: formData.invoiceData.items.map(item => ({
@@ -417,18 +435,30 @@ const EventRequestForm: React.FC = () => {
 
     // Validate TAP Form Section
     const validateTAPFormSection = () => {
-        if (!formData.expected_attendance) {
-            toast.error('Please enter the expected attendance');
+        // Verify that all required fields are filled
+        if (!formData.will_or_have_room_booking && formData.will_or_have_room_booking !== false) {
+            toast.error('Please indicate whether you will or have a room booking');
             return false;
         }
 
-        if (!formData.room_booking && formData.will_or_have_room_booking) {
+        if (!formData.expected_attendance || formData.expected_attendance <= 0) {
+            toast.error('Please enter a valid expected attendance');
+            return false;
+        }
+
+        if (formData.will_or_have_room_booking && !formData.room_booking) {
             toast.error('Please upload your room booking confirmation');
             return false;
         }
 
-        if (formData.food_drinks_being_served === null || formData.food_drinks_being_served === undefined) {
-            toast.error('Please specify if food/drinks will be served');
+        if (!formData.food_drinks_being_served && formData.food_drinks_being_served !== false) {
+            toast.error('Please indicate whether food/drinks will be served');
+            return false;
+        }
+
+        // Validate AS funding question if food is being served
+        if (formData.food_drinks_being_served && formData.needs_as_funding === undefined) {
+            toast.error('Please indicate whether you need AS funding');
             return false;
         }
 
@@ -495,19 +525,29 @@ const EventRequestForm: React.FC = () => {
             isValid = validateASFundingSection();
         }
 
-        if (isValid) {
-            // Set the current step
-            setCurrentStep(nextStep);
+        if (!isValid) {
+            return; // Don't proceed if validation fails
+        }
 
-            // If moving to the review step, mark the form as reviewed
-            // but don't submit it automatically
-            if (nextStep === 6) {
-                setFormData(prevData => ({
-                    ...prevData,
-                    formReviewed: true
-                }));
+        // If we're moving from step 4 to step 5
+        if (currentStep === 4 && nextStep === 5) {
+            // If food and drinks aren't being served or if AS funding isn't needed, skip to step 6 (review)
+            if (!formData.food_drinks_being_served || !formData.needs_as_funding) {
+                nextStep = 6;
             }
         }
+
+        // Set the current step
+        setCurrentStep(nextStep);
+
+        // If moving to the review step, mark the form as reviewed
+        // but don't submit it automatically
+        if (nextStep === 6) {
+            setFormData(prevData => ({
+                ...prevData,
+                formReviewed: true
+            }));
+        }
     };
 
     // Handle form submission with validation
@@ -653,55 +693,19 @@ const EventRequestForm: React.FC = () => {
                     variants={containerVariants}
                     className="space-y-6"
                 >
-                    {formData.food_drinks_being_served && (
-                        <div className="bg-base-200/50 p-6 rounded-lg mb-6">
-                            <h3 className="text-xl font-semibold mb-4">Do you need AS funding for this event?</h3>
-                            <div className="flex flex-col sm:flex-row gap-4">
-                                <button
-                                    className={`btn btn-lg ${formData.needs_as_funding ? 'btn-primary' : 'btn-outline'} flex-1`}
-                                    onClick={() => {
-                                        setFormData({ ...formData, needs_as_funding: true, as_funding_required: true });
-                                    }}
-                                >
-                                    Yes
-                                </button>
-                                <button
-                                    className={`btn btn-lg ${!formData.needs_as_funding && formData.needs_as_funding !== null ? 'btn-primary' : 'btn-outline'} flex-1`}
-                                    onClick={() => {
-                                        setFormData({ ...formData, needs_as_funding: false, as_funding_required: false });
-                                    }}
-                                >
-                                    No
-                                </button>
-                            </div>
-                        </div>
-                    )}
+                    <div className="bg-base-200/50 p-6 rounded-lg mb-6">
+                        <h3 className="text-xl font-semibold mb-4">AS Funding Details</h3>
+                        <p className="mb-4">Please provide the necessary information for your AS funding request.</p>
+                    </div>
 
-                    {!formData.food_drinks_being_served && (
-                        <div className="bg-base-200/50 p-6 rounded-lg mb-6">
-                            <h3 className="text-xl font-semibold mb-4">AS Funding Information</h3>
-                            <p className="mb-4">Since you're not serving food or drinks, AS funding is not applicable for this event.</p>
-                            <div className="alert alert-info">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="h-5 w-5 stroke-current">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                                </svg>
-                                <div>
-                                    <p>If you need to request AS funding for other purposes, please contact the AS office directly.</p>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-
-                    {formData.needs_as_funding && formData.food_drinks_being_served && (
-                        <ASFundingSection formData={formData} onDataChange={handleSectionDataChange} />
-                    )}
+                    <ASFundingSection formData={formData} onDataChange={handleSectionDataChange} />
 
                     <div className="flex justify-between mt-8">
                         <button className="btn btn-outline" onClick={() => setCurrentStep(4)}>
                             Back
                         </button>
                         <button className="btn btn-primary" onClick={() => handleNextStep(6)}>
-                            Review Form
+                            Next
                         </button>
                     </div>
                 </motion.div>
@@ -730,18 +734,27 @@ const EventRequestForm: React.FC = () => {
 
                         <div className="divider my-6">Ready to Submit?</div>
 
-                        <div className="alert alert-info mb-6">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="h-5 w-5 stroke-current">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                            </svg>
-                            <div>
-                                <p>Once submitted, you'll need to notify PR and/or Coordinators in the #-events Slack channel.</p>
-                            </div>
-                        </div>
+                        <CustomAlert
+                            type="info"
+                            title="Important Note"
+                            message="Once submitted, you'll need to notify PR and/or Coordinators in the #-events Slack channel."
+                            icon="heroicons:information-circle"
+                            className="mb-6"
+                        />
                     </div>
 
                     <div className="flex justify-between mt-8">
-                        <button className="btn btn-outline" onClick={() => setCurrentStep(5)}>
+                        <button
+                            className="btn btn-outline"
+                            onClick={() => {
+                                // Skip the AS Funding section if not needed
+                                if (!formData.food_drinks_being_served || !formData.needs_as_funding) {
+                                    setCurrentStep(4);  // Go back to TAP Form section
+                                } else {
+                                    setCurrentStep(5);  // Go back to AS Funding section
+                                }
+                            }}
+                        >
                             Back
                         </button>
                         <button
@@ -784,21 +797,20 @@ const EventRequestForm: React.FC = () => {
                     }}
                     className="space-y-6"
                 >
-                    <AnimatePresence mode="wait">
-                        {error && (
-                            <motion.div
-                                initial={{ opacity: 0, y: -20, scale: 0.95 }}
-                                animate={{ opacity: 1, y: 0, scale: 1 }}
-                                exit={{ opacity: 0, y: 20, scale: 0.95 }}
-                                className="alert alert-error shadow-lg"
-                            >
-                                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 stroke-current" fill="none" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                                </svg>
-                                <span>{error}</span>
-                            </motion.div>
-                        )}
-                    </AnimatePresence>
+                    {error && (
+                        <motion.div
+                            initial={{ opacity: 0, y: -20, scale: 0.95 }}
+                            animate={{ opacity: 1, y: 0, scale: 1 }}
+                            exit={{ opacity: 0, y: 20, scale: 0.95 }}
+                        >
+                            <CustomAlert
+                                type="error"
+                                title="Error"
+                                message={error}
+                                icon="heroicons:exclamation-triangle"
+                            />
+                        </motion.div>
+                    )}
 
                     {/* Progress indicator */}
                     <div className="w-full mb-6">
diff --git a/src/components/dashboard/Officer_EventRequestForm/EventRequestFormPreview.tsx b/src/components/dashboard/Officer_EventRequestForm/EventRequestFormPreview.tsx
index 6bf17af..77484fe 100644
--- a/src/components/dashboard/Officer_EventRequestForm/EventRequestFormPreview.tsx
+++ b/src/components/dashboard/Officer_EventRequestForm/EventRequestFormPreview.tsx
@@ -4,6 +4,7 @@ import type { EventRequestFormData } from './EventRequestForm';
 import type { InvoiceItem } from './InvoiceBuilder';
 import type { EventRequest } from '../../../schemas/pocketbase';
 import { FlyerTypes, LogoOptions, EventRequestStatus } from '../../../schemas/pocketbase';
+import CustomAlert from '../universal/CustomAlert';
 
 // Create a standalone component that can be used to show the preview as a modal
 export const EventRequestFormPreviewModal: React.FC = () => {
@@ -376,9 +377,13 @@ const EventRequestFormPreview: React.FC<EventRequestFormPreviewProps> = ({
                                     </table>
                                 </div>
                             ) : (
-                                <div className="alert alert-info mb-4">
-                                    <div>No invoice items have been added yet.</div>
-                                </div>
+                                <CustomAlert
+                                    type="info"
+                                    title="Information"
+                                    message="The actual invoice items will be available to coordinators after submission."
+                                    icon="heroicons:information-circle"
+                                    className="mb-4"
+                                />
                             )}
 
                             <div className="mt-4 mb-4">
diff --git a/src/components/dashboard/Officer_EventRequestForm/InvoiceBuilder.tsx b/src/components/dashboard/Officer_EventRequestForm/InvoiceBuilder.tsx
index 577d7a5..bc88ae4 100644
--- a/src/components/dashboard/Officer_EventRequestForm/InvoiceBuilder.tsx
+++ b/src/components/dashboard/Officer_EventRequestForm/InvoiceBuilder.tsx
@@ -2,21 +2,79 @@ import React, { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
 import toast from 'react-hot-toast';
 import CustomAlert from '../universal/CustomAlert';
+import { Icon } from '@iconify/react';
+
+// Enhanced animation variants with faster transitions
+const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+        opacity: 1,
+        transition: {
+            staggerChildren: 0.035,
+            when: "beforeChildren",
+            duration: 0.3,
+            ease: "easeOut"
+        }
+    }
+};
 
-// Animation variants
 const itemVariants = {
-    hidden: { opacity: 0, y: 20 },
+    hidden: { opacity: 0, y: 10 },
     visible: {
         opacity: 1,
         y: 0,
         transition: {
             type: "spring",
-            stiffness: 300,
-            damping: 24
+            stiffness: 500,
+            damping: 25,
+            mass: 0.8,
+            duration: 0.25
         }
     }
 };
 
+// Input field hover animation
+const inputHoverVariants = {
+    hover: {
+        scale: 1.01,
+        boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+        transition: { duration: 0.15 }
+    }
+};
+
+// Button animation
+const buttonVariants = {
+    hover: {
+        scale: 1.03,
+        transition: { duration: 0.15, ease: "easeOut" }
+    },
+    tap: {
+        scale: 0.97,
+        transition: { duration: 0.1 }
+    }
+};
+
+// Row animation
+const rowVariants = {
+    hidden: { opacity: 0, x: -10 },
+    visible: {
+        opacity: 1,
+        x: 0,
+        transition: {
+            type: "spring",
+            stiffness: 500,
+            damping: 25,
+            mass: 0.8,
+            duration: 0.25
+        }
+    },
+    exit: {
+        opacity: 0,
+        x: 10,
+        transition: { duration: 0.15 }
+    }
+};
+
 // Invoice item interface
 export interface InvoiceItem {
     id: string;
@@ -30,9 +88,7 @@ export interface InvoiceItem {
 export interface InvoiceData {
     items: InvoiceItem[];
     subtotal: number;
-    taxRate: number;
     taxAmount: number;
-    tipPercentage: number;
     tipAmount: number;
     total: number;
     vendor: string;
@@ -44,11 +100,18 @@ interface InvoiceBuilderProps {
 }
 
 const InvoiceBuilder: React.FC<InvoiceBuilderProps> = ({ invoiceData, onChange }) => {
-    // State for new item form with optional fields for input handling
+    const [validationMessages, setValidationMessages] = useState({
+        vendor: '',
+        items: '',
+        tax: '',
+        tip: ''
+    });
+
+    // State for new item form
     const [newItem, setNewItem] = useState<{
         description: string;
-        quantity: number | '';
-        unitPrice: number | string;
+        quantity: number;
+        unitPrice: string;
     }>({
         description: '',
         quantity: 1,
@@ -60,7 +123,6 @@ const InvoiceBuilder: React.FC<InvoiceBuilderProps> = ({ invoiceData, onChange }
         description?: string;
         quantity?: string;
         unitPrice?: string;
-        vendor?: string;
     }>({});
 
     // State for raw input values (to preserve exact user input)
@@ -72,150 +134,72 @@ const InvoiceBuilder: React.FC<InvoiceBuilderProps> = ({ invoiceData, onChange }
         tipAmount: ''
     });
 
-    // State for input validation messages
-    const [validationMessages, setValidationMessages] = useState<{
-        vendor?: string;
-        items?: string;
-        tax?: string;
-        tip?: string;
-    }>({});
+    // Validate inputs
+    useEffect(() => {
+        const newValidationMessages = {
+            vendor: !invoiceData.vendor ? 'Vendor name is required' : '',
+            items: invoiceData.items.length === 0 ? 'At least one item is required' : '',
+            tax: invoiceData.taxAmount && isNaN(parseFloat(invoiceData.taxAmount.toString())) ? 'Tax must be a valid number' : '',
+            tip: invoiceData.tipAmount && isNaN(parseFloat(invoiceData.tipAmount.toString())) ? 'Tip must be a valid number' : ''
+        };
+
+        setValidationMessages(newValidationMessages);
+    }, [invoiceData]);
+
+    // Handle vendor name change
+    const handleVendorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        onChange({ ...invoiceData, vendor: e.target.value });
+    };
 
     // Generate a unique ID for new items
     const generateId = () => {
         return `item-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
     };
 
-    // Helper function to round to 2 decimal places for calculations only
+    // Helper function to round to 2 decimal places
     const roundToTwoDecimals = (num: number): number => {
         return Math.round((num + Number.EPSILON) * 100) / 100;
     };
 
-    // Update raw input values when invoiceData changes from outside
-    useEffect(() => {
-        if (invoiceData.taxAmount === 0 && rawInputs.taxAmount === '') {
-            // Don't update if it's already empty and the value is 0
-        } else if (invoiceData.taxAmount.toString() !== rawInputs.taxAmount) {
-            setRawInputs(prev => ({
-                ...prev,
-                taxAmount: invoiceData.taxAmount === 0 ? '' : invoiceData.taxAmount.toString()
-            }));
-        }
-
-        if (invoiceData.tipAmount === 0 && rawInputs.tipAmount === '') {
-            // Don't update if it's already empty and the value is 0
-        } else if (invoiceData.tipAmount.toString() !== rawInputs.tipAmount) {
-            setRawInputs(prev => ({
-                ...prev,
-                tipAmount: invoiceData.tipAmount === 0 ? '' : invoiceData.tipAmount.toString()
-            }));
-        }
-    }, [invoiceData.taxAmount, invoiceData.tipAmount]);
-
-    // Validate the entire invoice
-    useEffect(() => {
-        const messages: {
-            vendor?: string;
-            items?: string;
-            tax?: string;
-            tip?: string;
-        } = {};
-
-        // Validate vendor
-        if (!invoiceData.vendor.trim()) {
-            messages.vendor = 'Please enter a vendor/restaurant name';
-        }
-
-        // Validate items
-        if (invoiceData.items.length === 0) {
-            messages.items = 'Please add at least one item to the invoice';
-        }
-
-        // Validate tax (optional but must be valid if provided)
-        if (rawInputs.taxAmount && isNaN(parseFloat(rawInputs.taxAmount))) {
-            messages.tax = 'Tax amount must be a valid number';
-        }
-
-        // Validate tip (optional but must be valid if provided)
-        if (rawInputs.tipAmount && isNaN(parseFloat(rawInputs.tipAmount))) {
-            messages.tip = 'Tip amount must be a valid number';
-        }
-
-        setValidationMessages(messages);
-    }, [invoiceData.vendor, invoiceData.items, rawInputs.taxAmount, rawInputs.tipAmount]);
-
-    // Calculate subtotal, tax, tip, and total whenever items, tax rate, or tip percentage changes
-    useEffect(() => {
-        const subtotal = roundToTwoDecimals(
-            invoiceData.items.reduce((sum, item) => sum + item.amount, 0)
-        );
-        const taxAmount = roundToTwoDecimals((invoiceData.taxRate / 100) * subtotal);
-        const tipAmount = roundToTwoDecimals((invoiceData.tipPercentage / 100) * subtotal);
-        const total = roundToTwoDecimals(subtotal + taxAmount + tipAmount);
-
-        // Only update if values have changed to prevent infinite loop
-        if (
-            subtotal !== invoiceData.subtotal ||
-            taxAmount !== invoiceData.taxAmount ||
-            tipAmount !== invoiceData.tipAmount ||
-            total !== invoiceData.total
-        ) {
-            onChange({
-                ...invoiceData,
-                subtotal,
-                taxAmount,
-                tipAmount,
-                total
-            });
-        }
-    }, [invoiceData.items, invoiceData.taxRate, invoiceData.tipPercentage]);
-
     // Validate new item before adding
     const validateNewItem = () => {
         const newErrors: {
             description?: string;
             quantity?: string;
             unitPrice?: string;
-            vendor?: string;
         } = {};
 
         if (!newItem.description.trim()) {
-            newErrors.description = 'Description is required';
+            newErrors.description = 'Item description is required';
         }
 
-        if (newItem.quantity === '' || typeof newItem.quantity === 'number' && newItem.quantity <= 0) {
-            newErrors.quantity = 'Quantity must be greater than 0';
+        if (typeof newItem.quantity !== 'number' || newItem.quantity <= 0) {
+            newErrors.quantity = 'Quantity must be a positive number';
         }
 
-        if (newItem.unitPrice === '' || typeof newItem.unitPrice === 'number' && newItem.unitPrice < 0) {
-            newErrors.unitPrice = 'Unit price must be 0 or greater';
-        }
+        const unitPrice = typeof newItem.unitPrice === 'string'
+            ? parseFloat(newItem.unitPrice)
+            : newItem.unitPrice;
 
-        // Check for duplicate description
-        const isDuplicate = invoiceData.items.some(
-            item => item.description.toLowerCase() === newItem.description.toLowerCase()
-        );
-
-        if (isDuplicate) {
-            newErrors.description = 'An item with this description already exists';
+        if (isNaN(unitPrice) || unitPrice <= 0) {
+            newErrors.unitPrice = 'Price must be a positive number';
         }
 
         setErrors(newErrors);
         return Object.keys(newErrors).length === 0;
     };
 
-    // Add a new item to the invoice
+    // Add new item
     const handleAddItem = () => {
         if (!validateNewItem()) {
             return;
         }
 
-        // Calculate amount with proper rounding for display and calculations
+        // Calculate amount
         const quantity = typeof newItem.quantity === 'number' ? newItem.quantity : 0;
-        const unitPrice = typeof newItem.unitPrice === 'number'
-            ? newItem.unitPrice
-            : typeof newItem.unitPrice === 'string' && newItem.unitPrice !== ''
-                ? parseFloat(newItem.unitPrice)
-                : 0;
+        const unitPrice = typeof newItem.unitPrice === 'string' && newItem.unitPrice !== ''
+            ? parseFloat(newItem.unitPrice)
+            : 0;
 
         const amount = roundToTwoDecimals(quantity * unitPrice);
 
@@ -224,20 +208,33 @@ const InvoiceBuilder: React.FC<InvoiceBuilderProps> = ({ invoiceData, onChange }
             id: generateId(),
             description: newItem.description,
             quantity: quantity,
-            unitPrice: unitPrice, // Store the exact value
-            amount
+            unitPrice: unitPrice,
+            amount: amount
         };
 
         // Add item to invoice
+        const updatedItems = [...invoiceData.items, item];
+
+        // Calculate new subtotal
+        const subtotal = updatedItems.reduce((sum, item) => sum + item.amount, 0);
+
+        // Recalculate tax and tip amounts based on rates
+        const taxAmount = roundToTwoDecimals(invoiceData.taxAmount);
+        const tipAmount = roundToTwoDecimals(invoiceData.tipAmount);
+
+        // Calculate new total
+        const total = roundToTwoDecimals(subtotal + taxAmount + tipAmount);
+
         onChange({
             ...invoiceData,
-            items: [...invoiceData.items, item]
+            items: updatedItems,
+            subtotal: subtotal,
+            taxAmount: taxAmount,
+            tipAmount: tipAmount,
+            total: total
         });
 
-        // Show success toast
-        toast.success(`Added ${item.description} to invoice`);
-
-        // Reset new item form
+        // Reset form
         setNewItem({
             description: '',
             quantity: 1,
@@ -246,350 +243,495 @@ const InvoiceBuilder: React.FC<InvoiceBuilderProps> = ({ invoiceData, onChange }
 
         // Clear errors
         setErrors({});
+
+        toast.success(`Added ${item.description} to invoice`);
     };
 
-    // Remove an item
-    const handleRemoveItem = (id: string) => {
-        const itemToRemove = invoiceData.items.find(item => item.id === id);
+    // Handle item changes
+    const handleItemChange = (index: number, field: keyof InvoiceItem, value: string | number) => {
+        const updatedItems = [...invoiceData.items];
+
+        if (field === 'description') {
+            updatedItems[index] = { ...updatedItems[index], description: value as string };
+        } else if (field === 'unitPrice') {
+            const unitPrice = parseFloat(value.toString());
+            if (!isNaN(unitPrice)) {
+                const amount = roundToTwoDecimals(unitPrice * updatedItems[index].quantity);
+                updatedItems[index] = {
+                    ...updatedItems[index],
+                    unitPrice: unitPrice,
+                    amount: amount
+                };
+            }
+        } else if (field === 'quantity') {
+            const quantity = parseInt(value.toString());
+            if (!isNaN(quantity)) {
+                const amount = roundToTwoDecimals(quantity * updatedItems[index].unitPrice);
+                updatedItems[index] = {
+                    ...updatedItems[index],
+                    quantity: quantity,
+                    amount: amount
+                };
+            }
+        }
+
+        // Calculate new subtotal
+        const subtotal = updatedItems.reduce((sum, item) => sum + item.amount, 0);
+
+        // Recalculate tax and tip amounts based on rates
+        const taxAmount = roundToTwoDecimals(invoiceData.taxAmount);
+        const tipAmount = roundToTwoDecimals(invoiceData.tipAmount);
+
+        // Calculate new total
+        const total = roundToTwoDecimals(subtotal + taxAmount + tipAmount);
+
         onChange({
             ...invoiceData,
-            items: invoiceData.items.filter(item => item.id !== id)
+            items: updatedItems,
+            subtotal: subtotal,
+            taxAmount: taxAmount,
+            tipAmount: tipAmount,
+            total: total
+        });
+    };
+
+    // Remove item
+    const handleRemoveItem = (id: string) => {
+        const updatedItems = invoiceData.items.filter(item => item.id !== id);
+
+        // Calculate new subtotal
+        const subtotal = updatedItems.reduce((sum, item) => sum + item.amount, 0);
+
+        // Recalculate tax and tip amounts based on rates
+        const taxAmount = roundToTwoDecimals(invoiceData.taxAmount);
+        const tipAmount = roundToTwoDecimals(invoiceData.tipAmount);
+
+        // Calculate new total
+        const total = roundToTwoDecimals(subtotal + taxAmount + tipAmount);
+
+        onChange({
+            ...invoiceData,
+            items: updatedItems,
+            subtotal: subtotal,
+            taxAmount: taxAmount,
+            tipAmount: tipAmount,
+            total: total
         });
 
-        if (itemToRemove) {
-            toast.success(`Removed ${itemToRemove.description} from invoice`);
-        }
+        toast.success('Item removed from invoice');
     };
 
-    // Format currency
-    const formatCurrency = (amount: number) => {
-        return new Intl.NumberFormat('en-US', {
-            style: 'currency',
-            currency: 'USD'
-        }).format(amount);
-    };
-
-    // Update tax amount directly - preserve exact input
+    // Handle tax change
     const handleTaxAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const value = e.target.value;
-
-        // Store the raw input value
-        setRawInputs(prev => ({
-            ...prev,
-            taxAmount: value
-        }));
-
-        if (value === '' || /^\d*\.?\d*$/.test(value)) {
-            const taxAmount = value === '' ? 0 : parseFloat(value);
-            const taxRate = invoiceData.subtotal > 0 && !isNaN(taxAmount)
-                ? roundToTwoDecimals((taxAmount / invoiceData.subtotal) * 100)
-                : 0;
+        const taxAmount = parseFloat(e.target.value);
+        if (!isNaN(taxAmount)) {
+            const total = roundToTwoDecimals(invoiceData.subtotal + taxAmount + invoiceData.tipAmount);
 
             onChange({
                 ...invoiceData,
-                taxAmount: isNaN(taxAmount) ? 0 : taxAmount,
-                taxRate
+                taxAmount: taxAmount,
+                total: total
             });
+        } else {
+            onChange({ ...invoiceData, taxAmount: 0 });
         }
     };
 
-    // Update tip amount directly - preserve exact input
+    // Handle tip change
     const handleTipAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const value = e.target.value;
-
-        // Store the raw input value
-        setRawInputs(prev => ({
-            ...prev,
-            tipAmount: value
-        }));
-
-        if (value === '' || /^\d*\.?\d*$/.test(value)) {
-            const tipAmount = value === '' ? 0 : parseFloat(value);
-            const tipPercentage = invoiceData.subtotal > 0 && !isNaN(tipAmount)
-                ? roundToTwoDecimals((tipAmount / invoiceData.subtotal) * 100)
-                : 0;
+        const tipAmount = parseFloat(e.target.value);
+        if (!isNaN(tipAmount)) {
+            const total = roundToTwoDecimals(invoiceData.subtotal + invoiceData.taxAmount + tipAmount);
 
             onChange({
                 ...invoiceData,
-                tipAmount: isNaN(tipAmount) ? 0 : tipAmount,
-                tipPercentage
+                tipAmount: tipAmount,
+                total: total
             });
+        } else {
+            onChange({ ...invoiceData, tipAmount: 0 });
         }
     };
 
-    // Custom CSS to hide spinner buttons on number inputs
-    const numberInputStyle = {
-        /* For Chrome, Safari, Edge, Opera */
-        WebkitAppearance: 'none',
-        margin: 0,
-        /* For Firefox */
-        MozAppearance: 'textfield'
-    } as React.CSSProperties;
+    // Calculate subtotal
+    const subtotal = invoiceData.subtotal;
+
+    // Calculate tax amount
+    const taxAmount = invoiceData.taxAmount;
+
+    // Calculate tip amount
+    const tipAmount = invoiceData.tipAmount;
+
+    // Calculate total
+    const total = invoiceData.total;
 
     return (
-        <motion.div variants={itemVariants} className="space-y-6">
-            <div className="bg-base-200/50 p-4 rounded-lg">
-                <h3 className="text-lg font-semibold mb-4">Invoice Builder</h3>
+        <motion.div
+            className="space-y-6"
+            initial="hidden"
+            animate="visible"
+            variants={containerVariants}
+        >
+            <motion.div variants={itemVariants}>
+                <h3 className="text-xl font-bold mb-4 text-primary">Invoice Builder</h3>
+            </motion.div>
 
-                {/* AS Funding Limit Notice */}
-                <CustomAlert
-                    type="warning"
-                    title="AS Funding Limits"
-                    message="Maximum of $10.00 per expected student attendee and $5,000 per event."
-                    className="mb-4"
-                    icon="heroicons:exclamation-triangle"
-                />
+            {/* AS Funding Limit Notice */}
+            <CustomAlert
+                type="warning"
+                title="AS Funding Limits"
+                message="Maximum of $10.00 per expected student attendee and $5,000 per event."
+                className="mb-4"
+                icon="heroicons:exclamation-triangle"
+            />
 
-                {/* Vendor information */}
-                <div className="form-control mb-4">
-                    <label className="label">
-                        <span className="label-text font-medium">Vendor/Restaurant Name</span>
-                        <span className="label-text-alt text-error">*</span>
-                    </label>
-                    <input
+            {/* Vendor Input */}
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
+                <label className="label">
+                    <span className="label-text font-medium text-lg">Vendor Name</span>
+                    <span className="label-text-alt text-error">*</span>
+                </label>
+
+                <div className="relative">
+                    <motion.input
                         type="text"
-                        className={`input input-bordered ${errors.vendor || validationMessages.vendor ? 'input-error' : ''}`}
+                        className={`input input-bordered w-full ${validationMessages.vendor ? 'input-error' : 'focus:input-primary'}`}
+                        placeholder="Enter vendor name"
                         value={invoiceData.vendor}
-                        onChange={(e) => {
-                            onChange({
-                                ...invoiceData,
-                                vendor: e.target.value
-                            });
-
-                            // Clear vendor error if it exists
-                            if (errors.vendor && e.target.value.trim()) {
-                                setErrors({ ...errors, vendor: undefined });
-                            }
-                        }}
-                        placeholder="e.g. L&L Hawaiian Barbeque"
+                        onChange={handleVendorChange}
+                        whileHover="hover"
+                        variants={inputHoverVariants}
                     />
-                    {(errors.vendor || validationMessages.vendor) && (
-                        <label className="label">
-                            <span className="label-text-alt text-error">{errors.vendor || validationMessages.vendor}</span>
-                        </label>
+                    {validationMessages.vendor && (
+                        <div className="text-error text-sm mt-1 flex items-center gap-1">
+                            <Icon icon="heroicons:exclamation-circle" className="w-4 h-4" />
+                            {validationMessages.vendor}
+                        </div>
                     )}
                 </div>
+            </motion.div>
 
-                {/* Item list */}
-                <div className="overflow-x-auto mb-4">
-                    <table className="table w-full">
+            {/* Add New Item Form */}
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
+                <h4 className="font-medium text-lg mb-4">Add New Item</h4>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+                    <div className="form-control">
+                        <label className="label">
+                            <span className="label-text">Description</span>
+                        </label>
+                        <motion.input
+                            type="text"
+                            className={`input input-bordered w-full ${errors.description ? 'input-error' : 'focus:input-primary'}`}
+                            placeholder="Item description"
+                            value={newItem.description}
+                            onChange={(e) => setNewItem({ ...newItem, description: e.target.value })}
+                            whileHover="hover"
+                            variants={inputHoverVariants}
+                        />
+                        {errors.description && (
+                            <div className="text-error text-sm mt-1 flex items-center gap-1">
+                                <Icon icon="heroicons:exclamation-circle" className="w-4 h-4" />
+                                {errors.description}
+                            </div>
+                        )}
+                    </div>
+
+                    <div className="form-control">
+                        <label className="label">
+                            <span className="label-text">Price ($)</span>
+                        </label>
+                        <motion.input
+                            type="number"
+                            className={`input input-bordered w-full ${errors.unitPrice ? 'input-error' : 'focus:input-primary'}`}
+                            placeholder="0.00"
+                            min="0"
+                            step="0.01"
+                            value={newItem.unitPrice}
+                            onChange={(e) => setNewItem({ ...newItem, unitPrice: e.target.value })}
+                            whileHover="hover"
+                            variants={inputHoverVariants}
+                        />
+                        {errors.unitPrice && (
+                            <div className="text-error text-sm mt-1 flex items-center gap-1">
+                                <Icon icon="heroicons:exclamation-circle" className="w-4 h-4" />
+                                {errors.unitPrice}
+                            </div>
+                        )}
+                    </div>
+
+                    <div className="form-control">
+                        <label className="label">
+                            <span className="label-text">Quantity</span>
+                        </label>
+                        <motion.input
+                            type="number"
+                            className={`input input-bordered w-full ${errors.quantity ? 'input-error' : 'focus:input-primary'}`}
+                            placeholder="1"
+                            min="1"
+                            value={newItem.quantity}
+                            onChange={(e) => {
+                                const value = parseInt(e.target.value);
+                                setNewItem({
+                                    ...newItem,
+                                    quantity: isNaN(value) ? 1 : value
+                                });
+                            }}
+                            whileHover="hover"
+                            variants={inputHoverVariants}
+                        />
+                        {errors.quantity && (
+                            <div className="text-error text-sm mt-1 flex items-center gap-1">
+                                <Icon icon="heroicons:exclamation-circle" className="w-4 h-4" />
+                                {errors.quantity}
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+                <div className="flex justify-end">
+                    <motion.button
+                        type="button"
+                        className="btn btn-primary gap-2"
+                        onClick={handleAddItem}
+                        whileHover="hover"
+                        whileTap="tap"
+                        variants={buttonVariants}
+                    >
+                        <Icon icon="heroicons:plus-circle" className="w-5 h-5" />
+                        Add Item
+                    </motion.button>
+                </div>
+            </motion.div>
+
+            {/* Items Section */}
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
+                <div className="flex justify-between items-center mb-4">
+                    <label className="label-text font-medium text-lg">
+                        Items
+                        <span className="text-error ml-1">*</span>
+                    </label>
+                </div>
+
+                {validationMessages.items && (
+                    <div className="text-error text-sm mb-3 flex items-center gap-1">
+                        <Icon icon="heroicons:exclamation-circle" className="w-4 h-4" />
+                        {validationMessages.items}
+                    </div>
+                )}
+
+                <div className="overflow-x-auto">
+                    <table className="table table-zebra w-full">
                         <thead>
-                            <tr>
-                                <th>Description</th>
-                                <th className="text-right">Qty</th>
-                                <th className="text-right">Unit Price</th>
-                                <th className="text-right">Amount</th>
-                                <th></th>
+                            <tr className="bg-base-300/50">
+                                <th className="w-[40%]">Item</th>
+                                <th className="w-[20%]">Price ($)</th>
+                                <th className="w-[15%]">Qty</th>
+                                <th className="w-[20%]">Total ($)</th>
+                                <th className="w-[5%]"></th>
                             </tr>
                         </thead>
                         <tbody>
-                            {invoiceData.items.map(item => (
-                                <tr key={item.id} className="hover">
-                                    <td>{item.description}</td>
-                                    <td className="text-right">{item.quantity}</td>
-                                    <td className="text-right">{formatCurrency(item.unitPrice)}</td>
-                                    <td className="text-right">{formatCurrency(item.amount)}</td>
-                                    <td className="text-right">
-                                        <button
-                                            type="button"
-                                            className="btn btn-ghost btn-xs"
-                                            onClick={() => handleRemoveItem(item.id)}
-                                        >
-                                            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                                            </svg>
-                                        </button>
+                            {invoiceData.items.map((item, index) => (
+                                <motion.tr
+                                    key={item.id}
+                                    variants={rowVariants}
+                                    initial="hidden"
+                                    animate="visible"
+                                    exit="exit"
+                                    className="hover:bg-base-300/30 transition-colors"
+                                >
+                                    <td>
+                                        <motion.input
+                                            type="text"
+                                            className="input input-bordered input-sm w-full focus:input-primary"
+                                            placeholder="Item name"
+                                            value={item.description}
+                                            onChange={(e) => handleItemChange(index, 'description', e.target.value)}
+                                            whileHover="hover"
+                                            variants={inputHoverVariants}
+                                        />
                                     </td>
-                                </tr>
+                                    <td>
+                                        <motion.input
+                                            type="number"
+                                            className="input input-bordered input-sm w-full focus:input-primary"
+                                            placeholder="0.00"
+                                            min="0"
+                                            step="0.01"
+                                            value={item.unitPrice}
+                                            onChange={(e) => handleItemChange(index, 'unitPrice', e.target.value)}
+                                            whileHover="hover"
+                                            variants={inputHoverVariants}
+                                        />
+                                    </td>
+                                    <td>
+                                        <motion.input
+                                            type="number"
+                                            className="input input-bordered input-sm w-full focus:input-primary"
+                                            placeholder="1"
+                                            min="1"
+                                            value={item.quantity}
+                                            onChange={(e) => handleItemChange(index, 'quantity', e.target.value)}
+                                            whileHover="hover"
+                                            variants={inputHoverVariants}
+                                        />
+                                    </td>
+                                    <td>
+                                        <div className="input input-sm input-bordered bg-base-200/50 w-full text-right">
+                                            {item.amount.toFixed(2)}
+                                        </div>
+                                    </td>
+                                    <td>
+                                        <motion.button
+                                            type="button"
+                                            className="btn btn-sm btn-ghost btn-circle text-error"
+                                            onClick={() => handleRemoveItem(item.id)}
+                                            whileHover={{ scale: 1.1 }}
+                                            whileTap={{ scale: 0.9 }}
+                                        >
+                                            <Icon icon="heroicons:trash" className="w-5 h-5" />
+                                        </motion.button>
+                                    </td>
+                                </motion.tr>
                             ))}
                             {invoiceData.items.length === 0 && (
                                 <tr>
                                     <td colSpan={5} className="text-center py-4 text-gray-500">
-                                        No items added yet
+                                        No items added yet. Use the form above to add items.
                                     </td>
                                 </tr>
                             )}
                         </tbody>
                     </table>
                 </div>
+            </motion.div>
 
-                {validationMessages.items && (
-                    <div className="mb-4">
-                        <span className="text-error text-sm">{validationMessages.items}</span>
-                    </div>
-                )}
+            {/* Tax and Tip Section */}
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
+                <label className="label-text font-medium text-lg mb-4">Tax and Tip</label>
 
-                {/* Add new item form */}
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                     <div className="form-control">
                         <label className="label">
-                            <span className="label-text font-medium">Description</span>
+                            <span className="label-text">Tax Amount ($)</span>
                         </label>
-                        <input
-                            type="text"
-                            className={`input input-bordered input-sm ${errors.description ? 'input-error' : ''}`}
-                            value={newItem.description}
-                            onChange={(e) => setNewItem({ ...newItem, description: e.target.value })}
-                            placeholder="e.g. Chicken Cutlet with Gravy"
-                        />
-                        {errors.description && (
-                            <label className="label">
-                                <span className="label-text-alt text-error">{errors.description}</span>
-                            </label>
-                        )}
+                        <div className="relative">
+                            <motion.input
+                                type="number"
+                                className={`input input-bordered w-full ${validationMessages.tax ? 'input-error' : 'focus:input-primary'}`}
+                                placeholder="0.00"
+                                min="0"
+                                step="0.01"
+                                value={invoiceData.taxAmount || ''}
+                                onChange={handleTaxAmountChange}
+                                whileHover="hover"
+                                variants={inputHoverVariants}
+                            />
+                            {validationMessages.tax && (
+                                <div className="text-error text-sm mt-1 flex items-center gap-1">
+                                    <Icon icon="heroicons:exclamation-circle" className="w-4 h-4" />
+                                    {validationMessages.tax}
+                                </div>
+                            )}
+                        </div>
                     </div>
+
                     <div className="form-control">
                         <label className="label">
-                            <span className="label-text font-medium">Quantity</span>
+                            <span className="label-text">Tip Amount ($)</span>
                         </label>
-                        <input
-                            type="text"
-                            inputMode="numeric"
-                            pattern="[0-9]*"
-                            id="quantity"
-                            className={`input input-bordered input-sm ${errors.quantity ? 'input-error' : ''}`}
-                            style={numberInputStyle}
-                            value={newItem.quantity}
-                            onChange={(e) => {
-                                const value = e.target.value;
-                                if (value === '' || /^\d*$/.test(value)) {
-                                    setNewItem({
-                                        ...newItem,
-                                        quantity: value === '' ? '' : parseInt(value) || 0
-                                    });
-                                }
-                            }}
-                            placeholder="Enter quantity"
-                        />
-                        {errors.quantity && <div className="text-error text-xs mt-1">{errors.quantity}</div>}
-                    </div>
-                    <div className="form-control">
-                        <label className="label">
-                            <span className="label-text font-medium">Unit Price ($)</span>
-                        </label>
-                        <input
-                            type="text"
-                            inputMode="decimal"
-                            pattern="[0-9]*\.?[0-9]*"
-                            id="unitPrice"
-                            className={`input input-bordered input-sm ${errors.unitPrice ? 'input-error' : ''}`}
-                            style={numberInputStyle}
-                            value={newItem.unitPrice}
-                            onChange={(e) => {
-                                const value = e.target.value;
-                                if (value === '' || /^\d*\.?\d*$/.test(value)) {
-                                    setNewItem({
-                                        ...newItem,
-                                        unitPrice: value
-                                    });
-                                }
-                            }}
-                            placeholder="Enter price"
-                        />
-                        {errors.unitPrice && (
-                            <label className="label">
-                                <span className="label-text-alt text-error">{errors.unitPrice}</span>
-                            </label>
-                        )}
+                        <div className="relative">
+                            <motion.input
+                                type="number"
+                                className={`input input-bordered w-full ${validationMessages.tip ? 'input-error' : 'focus:input-primary'}`}
+                                placeholder="0.00"
+                                min="0"
+                                step="0.01"
+                                value={invoiceData.tipAmount || ''}
+                                onChange={handleTipAmountChange}
+                                whileHover="hover"
+                                variants={inputHoverVariants}
+                            />
+                            {validationMessages.tip && (
+                                <div className="text-error text-sm mt-1 flex items-center gap-1">
+                                    <Icon icon="heroicons:exclamation-circle" className="w-4 h-4" />
+                                    {validationMessages.tip}
+                                </div>
+                            )}
+                        </div>
                     </div>
                 </div>
+            </motion.div>
 
-                <div className="flex justify-end">
-                    <button
-                        type="button"
-                        className="btn btn-primary btn-sm"
-                        onClick={handleAddItem}
-                    >
-                        Add Item
-                    </button>
-                </div>
+            {/* Totals Section */}
+            <motion.div
+                variants={itemVariants}
+                className="bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
+                <h3 className="text-lg font-medium mb-4">Invoice Summary</h3>
 
-                {/* Tax and tip */}
-                <div className="divider"></div>
-
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-                    <div className="form-control">
-                        <label className="label">
-                            <span className="label-text font-medium">Tax Amount ($)</span>
-                        </label>
-                        <input
-                            type="text"
-                            inputMode="decimal"
-                            pattern="[0-9]*\.?[0-9]*"
-                            className={`input input-bordered input-sm ${validationMessages.tax ? 'input-error' : ''}`}
-                            style={numberInputStyle}
-                            value={rawInputs.taxAmount}
-                            onChange={handleTaxAmountChange}
-                            placeholder="Enter tax amount"
-                        />
-                        {validationMessages.tax && (
-                            <label className="label">
-                                <span className="label-text-alt text-error">{validationMessages.tax}</span>
-                            </label>
-                        )}
+                <div className="space-y-3">
+                    <div className="flex justify-between items-center">
+                        <span className="text-base-content/70">Subtotal:</span>
+                        <span className="font-medium">${subtotal.toFixed(2)}</span>
                     </div>
-                    <div className="form-control">
-                        <label className="label">
-                            <span className="label-text font-medium">Tip Amount ($)</span>
-                        </label>
-                        <input
-                            type="text"
-                            inputMode="decimal"
-                            pattern="[0-9]*\.?[0-9]*"
-                            className={`input input-bordered input-sm ${validationMessages.tip ? 'input-error' : ''}`}
-                            style={numberInputStyle}
-                            value={rawInputs.tipAmount}
-                            onChange={handleTipAmountChange}
-                            placeholder="Enter tip amount"
-                        />
-                        {validationMessages.tip && (
-                            <label className="label">
-                                <span className="label-text-alt text-error">{validationMessages.tip}</span>
-                            </label>
-                        )}
+
+                    <div className="flex justify-between items-center">
+                        <span className="text-base-content/70">Tax:</span>
+                        <span className="font-medium">${taxAmount.toFixed(2)}</span>
+                    </div>
+
+                    <div className="flex justify-between items-center">
+                        <span className="text-base-content/70">Tip:</span>
+                        <span className="font-medium">${tipAmount.toFixed(2)}</span>
+                    </div>
+
+                    <div className="divider my-2"></div>
+
+                    <div className="flex justify-between items-center">
+                        <span className="text-lg font-bold">Total:</span>
+                        <span className="text-lg font-bold text-primary">${total.toFixed(2)}</span>
                     </div>
                 </div>
+            </motion.div>
 
-                {/* Totals */}
-                <div className="bg-base-300/30 p-4 rounded-lg">
-                    <div className="flex justify-between mb-2">
-                        <span>Subtotal:</span>
-                        <span>{formatCurrency(invoiceData.subtotal)}</span>
-                    </div>
-                    <div className="flex justify-between mb-2">
-                        <span>Tax:</span>
-                        <span>{formatCurrency(invoiceData.taxAmount)}</span>
-                    </div>
-                    <div className="flex justify-between mb-2">
-                        <span>Tip:</span>
-                        <span>{formatCurrency(invoiceData.tipAmount)}</span>
-                    </div>
-                    <div className="flex justify-between font-bold">
-                        <span>Total:</span>
-                        <span>{formatCurrency(invoiceData.total)}</span>
-                    </div>
-                </div>
-
-                {/* Validation notice */}
-                {invoiceData.items.length === 0 && (
-                    <CustomAlert
-                        type="info"
-                        title="Invoice Required"
-                        message="Please add at least one item to the invoice."
-                        className="mt-4"
-                        icon="heroicons:information-circle"
-                    />
-                )}
-
-                {/* Important Note */}
+            {/* Validation notice */}
+            {invoiceData.items.length === 0 && (
                 <CustomAlert
-                    type="warning"
-                    title="Important Note"
-                    message="The invoice builder helps you itemize your expenses for AS funding. You must still upload the actual invoice file."
+                    type="info"
+                    title="Invoice Required"
+                    message="Please add at least one item to the invoice."
                     className="mt-4"
-                    icon="heroicons:exclamation-triangle"
+                    icon="heroicons:information-circle"
                 />
-            </div>
+            )}
+
+            {/* Important Note */}
+            <CustomAlert
+                type="warning"
+                title="Important Note"
+                message="The invoice builder helps you itemize your expenses for AS funding. You must still upload the actual invoice file."
+                className="mt-4"
+                icon="heroicons:exclamation-triangle"
+            />
         </motion.div>
     );
 };
diff --git a/src/components/dashboard/Officer_EventRequestForm/PRSection.tsx b/src/components/dashboard/Officer_EventRequestForm/PRSection.tsx
index 507f7d8..d55cf2a 100644
--- a/src/components/dashboard/Officer_EventRequestForm/PRSection.tsx
+++ b/src/components/dashboard/Officer_EventRequestForm/PRSection.tsx
@@ -3,8 +3,20 @@ import { motion } from 'framer-motion';
 import type { EventRequestFormData } from './EventRequestForm';
 import type { EventRequest } from '../../../schemas/pocketbase';
 import { FlyerTypes, LogoOptions } from '../../../schemas/pocketbase';
+import CustomAlert from '../universal/CustomAlert';
+
+// Enhanced animation variants
+const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+        opacity: 1,
+        transition: {
+            staggerChildren: 0.07,
+            when: "beforeChildren"
+        }
+    }
+};
 
-// Animation variants
 const itemVariants = {
     hidden: { opacity: 0, y: 20 },
     visible: {
@@ -18,6 +30,37 @@ const itemVariants = {
     }
 };
 
+// Input field hover animation
+const inputHoverVariants = {
+    hover: {
+        scale: 1.01,
+        boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+        transition: { duration: 0.2 }
+    }
+};
+
+// Checkbox animation
+const checkboxVariants = {
+    checked: { scale: 1.05 },
+    unchecked: { scale: 1 },
+    hover: {
+        backgroundColor: "rgba(var(--p), 0.1)",
+        transition: { duration: 0.2 }
+    },
+    tap: { scale: 0.95 }
+};
+
+// File upload animation
+const fileUploadVariants = {
+    initial: { scale: 1 },
+    hover: {
+        scale: 1.02,
+        boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
+        transition: { duration: 0.2 }
+    },
+    tap: { scale: 0.98 }
+};
+
 // Flyer type options
 const FLYER_TYPES = [
     { value: FlyerTypes.DIGITAL_WITH_SOCIAL, label: 'Digital flyer (with social media advertising: Facebook, Instagram, Discord)' },
@@ -55,6 +98,7 @@ interface PRSectionProps {
 
 const PRSection: React.FC<PRSectionProps> = ({ formData, onDataChange }) => {
     const [otherLogoFiles, setOtherLogoFiles] = useState<File[]>(formData.other_logos || []);
+    const [isDragging, setIsDragging] = useState(false);
 
     // Handle checkbox change for flyer types
     const handleFlyerTypeChange = (type: string) => {
@@ -83,48 +127,107 @@ const PRSection: React.FC<PRSectionProps> = ({ formData, onDataChange }) => {
         }
     };
 
-    return (
-        <div className="space-y-6">
-            <h2 className="text-2xl font-bold mb-4 text-primary">PR Materials</h2>
+    // Handle drag events for file upload
+    const handleDragOver = (e: React.DragEvent) => {
+        e.preventDefault();
+        setIsDragging(true);
+    };
 
-            <div className="bg-base-300/50 p-4 rounded-lg mb-6">
-                <p className="text-sm">
-                    If you need PR Materials, please don't forget that this form MUST be submitted at least 6 weeks in advance even if you aren't requesting AS funding or physical flyers. Also, please remember to ping PR in #-events on Slack once you've submitted this form.
-                </p>
-            </div>
+    const handleDragLeave = (e: React.DragEvent) => {
+        e.preventDefault();
+        setIsDragging(false);
+    };
+
+    const handleDrop = (e: React.DragEvent) => {
+        e.preventDefault();
+        setIsDragging(false);
+
+        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+            const newFiles = Array.from(e.dataTransfer.files) as File[];
+            setOtherLogoFiles(newFiles);
+            onDataChange({ other_logos: newFiles });
+        }
+    };
+
+    return (
+        <motion.div
+            className="space-y-8"
+            initial="hidden"
+            animate="visible"
+            variants={containerVariants}
+        >
+            <motion.div variants={itemVariants}>
+                <h2 className="text-3xl font-bold mb-4 text-primary bg-gradient-to-r from-primary to-primary-focus bg-clip-text text-transparent">
+                    PR Materials
+                </h2>
+            </motion.div>
+
+            <motion.div variants={itemVariants}>
+                <CustomAlert
+                    type="info"
+                    title="Important Timeline"
+                    message="If you need PR Materials, please don't forget that this form MUST be submitted at least 6 weeks in advance even if you aren't requesting AS funding or physical flyers. Also, please remember to ping PR in #-events on Slack once you've submitted this form."
+                    className="mb-6"
+                    icon="heroicons:clock"
+                />
+            </motion.div>
 
             {/* Type of material needed */}
-            <motion.div variants={itemVariants} className="form-control bg-base-200/50 p-4 rounded-lg">
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
                 <label className="label">
-                    <span className="label-text font-medium text-lg">Type of material needed?</span>
+                    <span className="label-text font-medium text-lg">Type of Material Needed</span>
                     <span className="label-text-alt text-error">*</span>
                 </label>
-                <div className="space-y-2 mt-2">
+
+                <div className="space-y-3 mt-3">
                     {FLYER_TYPES.map((type) => (
-                        <label key={type.value} className="flex items-start gap-2 cursor-pointer hover:bg-base-300/30 p-2 rounded-md transition-colors">
+                        <motion.label
+                            key={type.value}
+                            className={`flex items-start gap-3 cursor-pointer p-3 rounded-lg transition-colors ${formData.flyer_type.includes(type.value)
+                                ? 'bg-primary/20 border border-primary/50'
+                                : 'hover:bg-base-300/30'
+                                }`}
+                            initial="unchecked"
+                            animate={formData.flyer_type.includes(type.value) ? "checked" : "unchecked"}
+                            whileHover="hover"
+                            whileTap="tap"
+                            variants={checkboxVariants}
+                            style={{ margin: '4px' }}
+                        >
                             <input
                                 type="checkbox"
                                 className="checkbox checkbox-primary mt-1"
                                 checked={formData.flyer_type.includes(type.value)}
                                 onChange={() => handleFlyerTypeChange(type.value)}
                             />
-                            <span>{type.label}</span>
-                        </label>
+                            <span className="font-medium">{type.label}</span>
+                        </motion.label>
                     ))}
                 </div>
 
                 {/* Other flyer type input */}
                 {formData.flyer_type.includes(FlyerTypes.OTHER) && (
-                    <div className="mt-3 pl-7">
-                        <input
+                    <motion.div
+                        className="mt-4 pl-8"
+                        initial={{ opacity: 0, y: -10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.3 }}
+                    >
+                        <motion.input
                             type="text"
-                            className="input input-bordered w-full"
+                            className="input input-bordered input-primary w-full"
                             placeholder="Please specify other material needed"
                             value={formData.other_flyer_type}
                             onChange={(e) => onDataChange({ other_flyer_type: e.target.value })}
                             required
+                            whileHover="hover"
+                            variants={inputHoverVariants}
                         />
-                    </div>
+                    </motion.div>
                 )}
             </motion.div>
 
@@ -134,110 +237,209 @@ const PRSection: React.FC<PRSectionProps> = ({ formData, onDataChange }) => {
                 type === FlyerTypes.PHYSICAL_WITH_ADVERTISING ||
                 type === FlyerTypes.NEWSLETTER
             ) && (
-                    <motion.div variants={itemVariants} className="form-control">
+                    <motion.div
+                        variants={itemVariants}
+                        className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.3 }}
+                        whileHover={{ y: -2 }}
+                    >
                         <label className="label">
-                            <span className="label-text font-medium">When do you need us to start advertising?</span>
+                            <span className="label-text font-medium text-lg">Advertising Start Date</span>
                             <span className="label-text-alt text-error">*</span>
                         </label>
-                        <input
+                        <p className="text-sm text-gray-500 mb-3">When do you need us to start advertising?</p>
+
+                        <motion.input
                             type="date"
-                            className="input input-bordered focus:input-primary transition-all duration-300"
+                            className="input input-bordered focus:input-primary transition-all duration-300 mt-2"
                             value={formData.flyer_advertising_start_date}
                             onChange={(e) => onDataChange({ flyer_advertising_start_date: e.target.value })}
                             required
+                            whileHover="hover"
+                            variants={inputHoverVariants}
                         />
                     </motion.div>
                 )}
 
             {/* Logos Required */}
-            <motion.div variants={itemVariants} className="form-control">
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
                 <label className="label">
-                    <span className="label-text font-medium">Logos Required</span>
+                    <span className="label-text font-medium text-lg">Logos Required</span>
                 </label>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-5 mt-3">
                     {LOGO_OPTIONS.map((logo) => (
-                        <label key={logo.value} className="flex items-start gap-2 cursor-pointer">
+                        <motion.label
+                            key={logo.value}
+                            className={`flex items-start gap-3 cursor-pointer p-3 rounded-lg transition-colors ${formData.required_logos.includes(logo.value)
+                                ? 'bg-primary/20 border border-primary/50'
+                                : 'hover:bg-base-300/30'
+                                }`}
+                            initial="unchecked"
+                            animate={formData.required_logos.includes(logo.value) ? "checked" : "unchecked"}
+                            whileHover="hover"
+                            whileTap="tap"
+                            variants={checkboxVariants}
+                            style={{ margin: '4px' }}
+                        >
                             <input
                                 type="checkbox"
                                 className="checkbox checkbox-primary mt-1"
                                 checked={formData.required_logos.includes(logo.value)}
                                 onChange={() => handleLogoChange(logo.value)}
                             />
-                            <span>{logo.label}</span>
-                        </label>
+                            <span className="font-medium">{logo.label}</span>
+                        </motion.label>
                     ))}
                 </div>
             </motion.div>
 
             {/* Logo file upload */}
             {formData.required_logos.includes(LogoOptions.OTHER) && (
-                <motion.div variants={itemVariants} className="form-control">
+                <motion.div
+                    variants={itemVariants}
+                    className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.3 }}
+                    whileHover={{ y: -2 }}
+                >
                     <label className="label">
-                        <span className="label-text font-medium">Please share your logo files here</span>
+                        <span className="label-text font-medium text-lg">Logo Files</span>
                         <span className="label-text-alt text-error">*</span>
                     </label>
-                    <input
-                        type="file"
-                        className="file-input file-input-bordered w-full file-input-primary hover:file-input-ghost transition-all duration-300"
-                        onChange={handleLogoFileChange}
-                        accept="image/*"
-                        multiple
-                        required
-                    />
-                    {otherLogoFiles.length > 0 && (
-                        <div className="mt-2">
-                            <p className="text-sm font-medium mb-1">Selected files:</p>
-                            <ul className="list-disc list-inside text-sm">
-                                {otherLogoFiles.map((file, index) => (
-                                    <li key={index}>{file.name}</li>
-                                ))}
-                            </ul>
+
+                    <motion.div
+                        className={`mt-2 border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors ${isDragging ? 'border-primary bg-primary/5' : 'border-base-300 hover:border-primary/50'
+                            }`}
+                        variants={fileUploadVariants}
+                        initial="initial"
+                        whileHover="hover"
+                        whileTap="tap"
+                        onDragOver={handleDragOver}
+                        onDragLeave={handleDragLeave}
+                        onDrop={handleDrop}
+                        onClick={() => document.getElementById('logo-files')?.click()}
+                    >
+                        <input
+                            id="logo-files"
+                            type="file"
+                            className="hidden"
+                            onChange={handleLogoFileChange}
+                            accept="image/*"
+                            multiple
+                            required
+                        />
+
+                        <div className="flex flex-col items-center justify-center gap-3">
+                            <motion.div
+                                className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center text-primary"
+                                whileHover={{ rotate: 15, scale: 1.1 }}
+                            >
+                                <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                                </svg>
+                            </motion.div>
+
+                            {otherLogoFiles.length > 0 ? (
+                                <>
+                                    <p className="font-medium text-primary">{otherLogoFiles.length} file(s) selected:</p>
+                                    <div className="max-h-24 overflow-y-auto text-left w-full">
+                                        <ul className="list-disc list-inside text-sm">
+                                            {otherLogoFiles.map((file, index) => (
+                                                <li key={index} className="truncate">{file.name}</li>
+                                            ))}
+                                        </ul>
+                                    </div>
+                                    <p className="text-xs text-gray-500">Click or drag to replace</p>
+                                </>
+                            ) : (
+                                <>
+                                    <p className="font-medium">Drop your logo files here or click to browse</p>
+                                    <p className="text-xs text-gray-500">Please upload transparent logo files (PNG preferred)</p>
+                                </>
+                            )}
                         </div>
-                    )}
+                    </motion.div>
                 </motion.div>
             )}
 
             {/* Format */}
-            <motion.div variants={itemVariants} className="form-control">
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
                 <label className="label">
-                    <span className="label-text font-medium">What format do you need it to be in?</span>
+                    <span className="label-text font-medium text-lg">Required Format</span>
                     <span className="label-text-alt text-error">*</span>
                 </label>
-                <select
+                <p className="text-sm text-gray-500 mb-3">What format do you need the materials to be in?</p>
+
+                <motion.select
                     className="select select-bordered focus:select-primary transition-all duration-300"
                     value={formData.advertising_format}
                     onChange={(e) => onDataChange({ advertising_format: e.target.value })}
                     required
+                    whileHover="hover"
+                    variants={inputHoverVariants}
                 >
                     <option value="">Select format</option>
                     {FORMAT_OPTIONS.map(option => (
                         <option key={option.value} value={option.value}>{option.label}</option>
                     ))}
-                </select>
+                </motion.select>
             </motion.div>
 
             {/* Additional specifications */}
-            <motion.div variants={itemVariants} className="form-control">
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
                 <label className="label">
-                    <span className="label-text font-medium">Any other specifications and requests?</span>
+                    <span className="label-text font-medium text-lg">Additional Specifications</span>
                 </label>
-                <textarea
+                <p className="text-sm text-gray-500 mb-3">Any other specifications and requests?</p>
+
+                <motion.textarea
                     className="textarea textarea-bordered focus:textarea-primary transition-all duration-300 min-h-[120px]"
                     value={formData.flyer_additional_requests}
                     onChange={(e) => onDataChange({ flyer_additional_requests: e.target.value })}
                     placeholder="Color scheme, overall design, examples to consider, etc."
                     rows={4}
+                    whileHover="hover"
+                    variants={inputHoverVariants}
                 />
             </motion.div>
 
             {/* Photography Needed */}
-            <motion.div variants={itemVariants} className="form-control">
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
                 <label className="label">
-                    <span className="label-text font-medium">Photography Needed?</span>
+                    <span className="label-text font-medium text-lg">Photography</span>
                     <span className="label-text-alt text-error">*</span>
                 </label>
-                <div className="flex gap-4">
-                    <label className="flex items-center gap-2 cursor-pointer">
+                <p className="text-sm text-gray-500 mb-3">Do you need photography for your event?</p>
+
+                <div className="flex gap-6 mt-2">
+                    <motion.label
+                        className={`flex items-center gap-3 cursor-pointer p-4 rounded-lg transition-colors ${formData.photography_needed === true
+                            ? 'bg-primary/20 border border-primary/50'
+                            : 'bg-base-100 hover:bg-primary/10'
+                            }`}
+                        whileHover={{ scale: 1.02 }}
+                        whileTap={{ scale: 0.98 }}
+                    >
                         <input
                             type="radio"
                             className="radio radio-primary"
@@ -245,9 +447,17 @@ const PRSection: React.FC<PRSectionProps> = ({ formData, onDataChange }) => {
                             onChange={() => onDataChange({ photography_needed: true })}
                             required
                         />
-                        <span>Yes</span>
-                    </label>
-                    <label className="flex items-center gap-2 cursor-pointer">
+                        <span className="font-medium">Yes, we need photography</span>
+                    </motion.label>
+
+                    <motion.label
+                        className={`flex items-center gap-3 cursor-pointer p-4 rounded-lg transition-colors ${formData.photography_needed === false
+                            ? 'bg-primary/20 border border-primary/50'
+                            : 'bg-base-100 hover:bg-primary/10'
+                            }`}
+                        whileHover={{ scale: 1.02 }}
+                        whileTap={{ scale: 0.98 }}
+                    >
                         <input
                             type="radio"
                             className="radio radio-primary"
@@ -255,11 +465,11 @@ const PRSection: React.FC<PRSectionProps> = ({ formData, onDataChange }) => {
                             onChange={() => onDataChange({ photography_needed: false })}
                             required
                         />
-                        <span>No</span>
-                    </label>
+                        <span className="font-medium">No, we don't need photography</span>
+                    </motion.label>
                 </div>
             </motion.div>
-        </div>
+        </motion.div>
     );
 };
 
diff --git a/src/components/dashboard/Officer_EventRequestForm/TAPFormSection.tsx b/src/components/dashboard/Officer_EventRequestForm/TAPFormSection.tsx
index 27289e6..7d89501 100644
--- a/src/components/dashboard/Officer_EventRequestForm/TAPFormSection.tsx
+++ b/src/components/dashboard/Officer_EventRequestForm/TAPFormSection.tsx
@@ -2,8 +2,20 @@ import React, { useState } from 'react';
 import { motion } from 'framer-motion';
 import type { EventRequestFormData } from './EventRequestForm';
 import type { EventRequest } from '../../../schemas/pocketbase';
+import CustomAlert from '../universal/CustomAlert';
+
+// Enhanced animation variants
+const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+        opacity: 1,
+        transition: {
+            staggerChildren: 0.1,
+            when: "beforeChildren"
+        }
+    }
+};
 
-// Animation variants
 const itemVariants = {
     hidden: { opacity: 0, y: 20 },
     visible: {
@@ -17,6 +29,26 @@ const itemVariants = {
     }
 };
 
+// Input field hover animation
+const inputHoverVariants = {
+    hover: {
+        scale: 1.01,
+        boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+        transition: { duration: 0.2 }
+    }
+};
+
+// File upload animation
+const fileUploadVariants = {
+    initial: { scale: 1 },
+    hover: {
+        scale: 1.02,
+        boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
+        transition: { duration: 0.2 }
+    },
+    tap: { scale: 0.98 }
+};
+
 interface TAPFormSectionProps {
     formData: EventRequestFormData;
     onDataChange: (data: Partial<EventRequestFormData>) => void;
@@ -24,6 +56,7 @@ interface TAPFormSectionProps {
 
 const TAPFormSection: React.FC<TAPFormSectionProps> = ({ formData, onDataChange }) => {
     const [roomBookingFile, setRoomBookingFile] = useState<File | null>(formData.room_booking);
+    const [isDragging, setIsDragging] = useState(false);
 
     // Handle room booking file upload
     const handleRoomBookingFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -34,75 +67,169 @@ const TAPFormSection: React.FC<TAPFormSectionProps> = ({ formData, onDataChange
         }
     };
 
-    return (
-        <div className="space-y-6">
-            <h2 className="text-2xl font-bold mb-4 text-primary">TAP Form Information</h2>
+    // Handle drag events for file upload
+    const handleDragOver = (e: React.DragEvent) => {
+        e.preventDefault();
+        setIsDragging(true);
+    };
 
-            <div className="bg-base-300/50 p-4 rounded-lg mb-6">
-                <p className="text-sm">
-                    Please ensure you have ALL sections completed. If something is not available, let the coordinators know and be advised on how to proceed.
-                </p>
-            </div>
+    const handleDragLeave = (e: React.DragEvent) => {
+        e.preventDefault();
+        setIsDragging(false);
+    };
+
+    const handleDrop = (e: React.DragEvent) => {
+        e.preventDefault();
+        setIsDragging(false);
+
+        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+            const file = e.dataTransfer.files[0];
+            setRoomBookingFile(file);
+            onDataChange({ room_booking: file });
+        }
+    };
+
+    return (
+        <motion.div
+            className="space-y-8"
+            initial="hidden"
+            animate="visible"
+            variants={containerVariants}
+        >
+            <motion.div variants={itemVariants}>
+                <h2 className="text-3xl font-bold mb-4 text-primary bg-gradient-to-r from-primary to-primary-focus bg-clip-text text-transparent">
+                    TAP Form Information
+                </h2>
+            </motion.div>
+
+            <motion.div variants={itemVariants}>
+                <CustomAlert
+                    type="info"
+                    title="Important Information"
+                    message="Please ensure you have ALL sections completed. If something is not available, let the coordinators know and be advised on how to proceed."
+                    className="mb-6"
+                    icon="heroicons:information-circle"
+                />
+            </motion.div>
 
             {/* Expected attendance */}
-            <motion.div variants={itemVariants} className="form-control bg-base-200/50 p-4 rounded-lg">
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
                 <label className="label">
-                    <span className="label-text font-medium text-lg">Expected attendance? Include a number NOT a range please.</span>
+                    <span className="label-text font-medium text-lg">Expected Attendance</span>
                     <span className="label-text-alt text-error">*</span>
                 </label>
                 <div className="relative mt-2">
-                    <input
+                    <motion.input
                         type="number"
-                        className="input input-bordered focus:input-primary transition-all duration-300 w-full"
+                        className="input input-bordered focus:input-primary transition-all duration-300 w-full pr-20"
                         value={formData.expected_attendance || ''}
                         onChange={(e) => onDataChange({ expected_attendance: parseInt(e.target.value) || 0 })}
                         min="0"
                         placeholder="Enter expected attendance"
                         required
+                        whileHover="hover"
+                        variants={inputHoverVariants}
                     />
-                    <div className="absolute right-4 top-1/2 -translate-y-1/2 text-sm text-gray-400">
+                    <div className="absolute right-4 top-1/2 -translate-y-1/2 text-sm text-gray-400 bg-base-100 px-2 py-1 rounded">
                         people
                     </div>
                 </div>
-                <div className="text-xs text-gray-400 mt-2">
-                    <p>PROGRAMMING FUNDS EVENTS FUNDED BY PROGRAMMING FUNDS MAY ONLY ADMIT UC SAN DIEGO STUDENTS, STAFF OR FACULTY AS GUESTS.</p>
-                    <p>ONLY UC SAN DIEGO UNDERGRADUATE STUDENTS MAY RECEIVE ITEMS FUNDED BY THE ASSOCIATED STUDENTS.</p>
-                    <p>EVENT FUNDING IS GRANTED UP TO A MAXIMUM OF $10.00 PER EXPECTED STUDENT ATTENDEE AND $5,000 PER EVENT</p>
-                </div>
+
+                <motion.div
+                    className="mt-4 p-4 bg-base-300/30 rounded-lg text-xs text-gray-400"
+                    initial={{ opacity: 0.8 }}
+                    whileHover={{ opacity: 1, scale: 1.01 }}
+                >
+                    <ul className="space-y-2 list-disc list-inside">
+                        <li>PROGRAMMING FUNDS EVENTS FUNDED BY PROGRAMMING FUNDS MAY ONLY ADMIT UC SAN DIEGO STUDENTS, STAFF OR FACULTY AS GUESTS.</li>
+                        <li>ONLY UC SAN DIEGO UNDERGRADUATE STUDENTS MAY RECEIVE ITEMS FUNDED BY THE ASSOCIATED STUDENTS.</li>
+                        <li>EVENT FUNDING IS GRANTED UP TO A MAXIMUM OF $10.00 PER EXPECTED STUDENT ATTENDEE AND $5,000 PER EVENT</li>
+                    </ul>
+                </motion.div>
             </motion.div>
 
             {/* Room booking confirmation */}
-            <motion.div variants={itemVariants} className="form-control bg-base-200/50 p-4 rounded-lg">
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
                 <label className="label">
-                    <span className="label-text font-medium text-lg">Room booking confirmation</span>
+                    <span className="label-text font-medium text-lg">Room Booking Confirmation</span>
                     <span className="label-text-alt text-error">*</span>
                 </label>
-                <div className="mt-2">
+
+                <motion.div
+                    className={`mt-2 border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors ${isDragging ? 'border-primary bg-primary/5' : 'border-base-300 hover:border-primary/50'
+                        }`}
+                    variants={fileUploadVariants}
+                    initial="initial"
+                    whileHover="hover"
+                    whileTap="tap"
+                    onDragOver={handleDragOver}
+                    onDragLeave={handleDragLeave}
+                    onDrop={handleDrop}
+                    onClick={() => document.getElementById('room-booking-file')?.click()}
+                >
                     <input
+                        id="room-booking-file"
                         type="file"
-                        className="file-input file-input-bordered file-input-primary w-full"
+                        className="hidden"
                         onChange={handleRoomBookingFileChange}
                         accept=".pdf,.png,.jpg,.jpeg"
                     />
-                    {roomBookingFile && (
-                        <p className="text-sm mt-2">
-                            Selected file: {roomBookingFile.name}
-                        </p>
-                    )}
-                    <p className="text-xs text-gray-500 mt-2">
-                        Please upload a screenshot of your room booking confirmation. Accepted formats: PDF, PNG, JPG.
-                    </p>
-                </div>
+
+                    <div className="flex flex-col items-center justify-center gap-3">
+                        <motion.div
+                            className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center text-primary"
+                            whileHover={{ rotate: 15, scale: 1.1 }}
+                        >
+                            <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+                            </svg>
+                        </motion.div>
+
+                        {roomBookingFile ? (
+                            <>
+                                <p className="font-medium text-primary">File selected:</p>
+                                <p className="text-sm">{roomBookingFile.name}</p>
+                                <p className="text-xs text-gray-500">Click or drag to replace</p>
+                            </>
+                        ) : (
+                            <>
+                                <p className="font-medium">Drop your file here or click to browse</p>
+                                <p className="text-xs text-gray-500">Accepted formats: PDF, PNG, JPG</p>
+                            </>
+                        )}
+                    </div>
+                </motion.div>
             </motion.div>
 
             {/* Food/Drinks */}
-            <motion.div variants={itemVariants} className="form-control">
+            <motion.div
+                variants={itemVariants}
+                className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                whileHover={{ y: -2 }}
+            >
                 <label className="label">
-                    <span className="label-text font-medium">Will you be serving food/drinks at your event?</span>
+                    <span className="label-text font-medium text-lg">Food & Drinks</span>
                     <span className="label-text-alt text-error">*</span>
                 </label>
-                <div className="flex gap-4">
-                    <label className="flex items-center gap-2 cursor-pointer">
+                <p className="text-sm text-gray-500 mb-3">Will you be serving food or drinks at your event?</p>
+
+                <div className="flex gap-6 mt-2">
+                    <motion.label
+                        className={`flex items-center gap-3 cursor-pointer p-4 rounded-lg transition-colors ${formData.food_drinks_being_served === true
+                            ? 'bg-primary/20 border border-primary/50'
+                            : 'bg-base-100 hover:bg-primary/10'
+                            }`}
+                        whileHover={{ scale: 1.02 }}
+                        whileTap={{ scale: 0.98 }}
+                    >
                         <input
                             type="radio"
                             className="radio radio-primary"
@@ -110,9 +237,17 @@ const TAPFormSection: React.FC<TAPFormSectionProps> = ({ formData, onDataChange
                             onChange={() => onDataChange({ food_drinks_being_served: true })}
                             required
                         />
-                        <span>Yes</span>
-                    </label>
-                    <label className="flex items-center gap-2 cursor-pointer">
+                        <span className="font-medium">Yes, we'll have food/drinks</span>
+                    </motion.label>
+
+                    <motion.label
+                        className={`flex items-center gap-3 cursor-pointer p-4 rounded-lg transition-colors ${formData.food_drinks_being_served === false
+                            ? 'bg-primary/20 border border-primary/50'
+                            : 'bg-base-100 hover:bg-primary/10'
+                            }`}
+                        whileHover={{ scale: 1.02 }}
+                        whileTap={{ scale: 0.98 }}
+                    >
                         <input
                             type="radio"
                             className="radio radio-primary"
@@ -120,31 +255,93 @@ const TAPFormSection: React.FC<TAPFormSectionProps> = ({ formData, onDataChange
                             onChange={() => onDataChange({ food_drinks_being_served: false })}
                             required
                         />
-                        <span>No</span>
-                    </label>
+                        <span className="font-medium">No, no food/drinks</span>
+                    </motion.label>
                 </div>
             </motion.div>
 
-            {/* AS Funding Notice - only show if food/drinks are being served */}
+            {/* AS Funding Question - only show if food/drinks are being served */}
             {formData.food_drinks_being_served && (
                 <motion.div
-                    initial={{ opacity: 0, height: 0 }}
-                    animate={{ opacity: 1, height: 'auto' }}
-                    exit={{ opacity: 0, height: 0 }}
-                    className="alert alert-info"
+                    variants={itemVariants}
+                    className="form-control bg-base-200/50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
+                    whileHover={{ y: -2 }}
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.3 }}
                 >
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="h-5 w-5 stroke-current">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                    </svg>
-                    <div>
-                        <h3 className="font-bold">Food and Drinks Information</h3>
-                        <div className="text-xs">
-                            If you're serving food or drinks, you'll be asked about AS funding in the next step. Please be prepared with vendor information and invoice details.
-                        </div>
+                    <label className="label">
+                        <span className="label-text font-medium text-lg">AS Funding Request</span>
+                        <span className="label-text-alt text-error">*</span>
+                    </label>
+                    <p className="text-sm text-gray-500 mb-3">Do you need funding from AS?</p>
+
+                    <div className="flex gap-6 mt-2">
+                        <motion.label
+                            className={`flex items-center gap-3 cursor-pointer p-4 rounded-lg transition-colors ${formData.needs_as_funding === true
+                                ? 'bg-primary/20 border border-primary/50'
+                                : 'bg-base-100 hover:bg-primary/10'
+                                }`}
+                            whileHover={{ scale: 1.02 }}
+                            whileTap={{ scale: 0.98 }}
+                        >
+                            <input
+                                type="radio"
+                                className="radio radio-primary"
+                                checked={formData.needs_as_funding === true}
+                                onChange={() => onDataChange({
+                                    needs_as_funding: true,
+                                    as_funding_required: true
+                                })}
+                                required
+                            />
+                            <span className="font-medium">Yes, we need AS funding</span>
+                        </motion.label>
+
+                        <motion.label
+                            className={`flex items-center gap-3 cursor-pointer p-4 rounded-lg transition-colors ${formData.needs_as_funding === false
+                                ? 'bg-primary/20 border border-primary/50'
+                                : 'bg-base-100 hover:bg-primary/10'
+                                }`}
+                            whileHover={{ scale: 1.02 }}
+                            whileTap={{ scale: 0.98 }}
+                        >
+                            <input
+                                type="radio"
+                                className="radio radio-primary"
+                                checked={formData.needs_as_funding === false}
+                                onChange={() => onDataChange({
+                                    needs_as_funding: false,
+                                    as_funding_required: false
+                                })}
+                                required
+                            />
+                            <span className="font-medium">No, we don't need funding</span>
+                        </motion.label>
                     </div>
                 </motion.div>
             )}
-        </div>
+
+            {/* Single information alert container that changes content based on selection */}
+            {formData.food_drinks_being_served && (
+                <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.3, ease: "easeInOut" }}
+                    className="mb-4"
+                >
+                    <CustomAlert
+                        type="info"
+                        title={formData.needs_as_funding ? "AS Funding Information" : "Food and Drinks Information"}
+                        message={formData.needs_as_funding
+                            ? "In the next step, you'll be asked to provide vendor information and invoice details for your AS funding request."
+                            : "Please make sure to follow all campus policies regarding food and drinks at your event."}
+                        className="mb-4"
+                        icon={formData.needs_as_funding ? "heroicons:currency-dollar" : "heroicons:cake"}
+                    />
+                </motion.div>
+            )}
+        </motion.div>
     );
 };