diff --git a/.gitignore b/.gitignore
index 3aafa7b..5e766c3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,8 @@
 tags
 node_modules
 __pycache__
+venv/
+.venv/
 
 *dist/
 .vscode/
\ No newline at end of file
diff --git a/custom_ui/api/proxy.py b/custom_ui/api/proxy.py
index bfa25d9..d84c4eb 100644
--- a/custom_ui/api/proxy.py
+++ b/custom_ui/api/proxy.py
@@ -5,28 +5,27 @@ from urllib.parse import urlparse
 allowed_hosts = ["api.zippopotam.us"] # Update this list with trusted domains as needed
 
 @frappe.whitelist(allow_guest=True)
-def proxy_request(url, method="GET", data=None, headers=None):
+def request(url, method="GET", data=None, headers=None):
     """
     Generic proxy for external API requests.
     WARNING: Only allow requests to trusted domains.
     """
     parsed_url = urlparse(url)
     if parsed_url.hostname not in allowed_hosts:
-        frappe.throw(f"Rquests to {parsed_url.hostname} are not allowed.", frappe.PermissionError)
-        
+        frappe.throw(f"Requests to {parsed_url.hostname} are not allowed.", frappe.PermissionError)
+    try:
+        resp = requests.request(
+            method=method.upper(),
+            url=url,
+            json=frappe.parse_json(data) if data else None,
+            headers=frappe.parse_json(headers) if headers else None,
+            timeout=10
+        )
+        resp.raise_for_status()
         try:
-            resp = requests.request(
-                method=method.upper(),
-                url=url,
-                json=frappe.parse_json(data) if data else None,
-                headers=frappe.parse_json(headers) if headers else None,
-                timeout=10
-            )
-            resp.raise_for_status()
-            try:
-                return resp.json()
-            except ValueError:
-                return {"text": resp.text}
-        except requests.exceptions.RequestException as e:
-            frappe.log_error(message=str(e), title="Proxy Request Failed")
-            frappe.throw("Failed to fetch data from external API.")
\ No newline at end of file
+            return resp.json()
+        except ValueError:
+            return {"text": resp.text}
+    except requests.exceptions.RequestException as e:
+        frappe.log_error(message=str(e), title="Proxy Request Failed")
+        frappe.throw("Failed to fetch data from external API.")
\ No newline at end of file
diff --git a/frontend/documentation/components/Form.md b/frontend/documentation/components/Form.md
index e69bf3f..cf8d4f4 100644
--- a/frontend/documentation/components/Form.md
+++ b/frontend/documentation/components/Form.md
@@ -1,8 +1,17 @@
+````markdown
 # Form Component Documentation
 
 ## Overview
 
-A highly flexible and configurable dynamic form component built with Vuetify. This component generates forms based on field configuration objects and supports various input types, validation, responsive layouts, and both controlled and uncontrolled form state management.
+A highly flexible and configurable dynamic form component built with **PrimeVue**. This component generates forms based on field configuration objects and supports various input types including **AutoComplete with custom values**, validation, responsive layouts, and both controlled and uncontrolled form state management.
+
+## ✨ New Features (PrimeVue Migration)
+
+- **AutoComplete component** - Users can select from suggestions OR enter completely custom values
+- **Better date/time pickers** with calendar popup and time selection
+- **Improved accessibility** with ARIA support
+- **More flexible styling** with CSS custom properties
+- **Enhanced mobile responsiveness** with CSS Grid
 
 ## Basic Usage
 
@@ -17,92 +26,116 @@ A highly flexible and configurable dynamic form component built with Vuetify. Th
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import Form from './components/common/Form.vue'
+import { ref } from "vue";
+import Form from "./components/common/Form.vue";
 
-const formData = ref({})
+const formData = ref({});
 
 const formFields = [
   {
-    name: 'firstName',
-    label: 'First Name',
-    type: 'text',
+    name: "firstName",
+    label: "First Name",
+    type: "text",
     required: true,
-    cols: 12,
-    md: 6
+    cols: 6,
   },
   {
-    name: 'email',
-    label: 'Email',
-    type: 'text',
-    format: 'email',
+    name: "email",
+    label: "Email",
+    type: "text",
+    format: "email",
     required: true,
-    cols: 12,
-    md: 6
+    cols: 6,
+  },
+  // NEW: AutoComplete with custom values!
+  {
+    name: "country",
+    label: "Country",
+    type: "autocomplete",
+    placeholder: "Type or select a country",
+    options: [
+      { label: "United States", value: "US" },
+      { label: "Canada", value: "CA" },
+      { label: "United Kingdom", value: "UK" },
+    ],
+    optionLabel: "label",
+    optionValue: "value",
+    forceSelection: false, // Allows custom entries!
+    cols: 6,
+    helpText: "You can select from the list or enter a custom country",
   },
   {
-    name: 'bio',
-    label: 'Biography',
-    type: 'textarea',
+    name: "bio",
+    label: "Biography",
+    type: "textarea",
     rows: 4,
-    cols: 12
-  }
-]
+    cols: 12,
+  },
+];
 
 const handleSubmit = (data) => {
-  console.log('Form submitted:', data)
-}
+  console.log("Form submitted:", data);
+};
 
 const handleFieldChange = (event) => {
-  console.log('Field changed:', event.fieldName, event.value)
-}
+  console.log("Field changed:", event.fieldName, event.value);
+};
 </script>
 ```
 
 ## Props
 
 ### `fields` (Array) - Required
+
 - **Description:** Array of field configuration objects that define the form structure
 - **Type:** `Array<Object>`
 - **Required:** `true`
 
 ### `formData` (Object)
+
 - **Description:** External form data object for controlled form state
 - **Type:** `Object`
 - **Default:** `null`
 - **Note:** When provided, the form operates in controlled mode. When null, uses internal state.
 
 ### `onChange` (Function)
+
 - **Description:** Global change handler function called when any field changes
 - **Type:** `Function`
 - **Signature:** `(fieldName: string, value: any, formData: Object) => void`
 
 ### `onSubmit` (Function)
+
 - **Description:** Submit handler function called when form is submitted
 - **Type:** `Function`
 - **Signature:** `(formData: Object) => Promise<void> | void`
 
 ### `showSubmitButton` (Boolean)
+
 - **Description:** Controls visibility of the submit button
 - **Type:** `Boolean`
 - **Default:** `true`
 
 ### `showCancelButton` (Boolean)
+
 - **Description:** Controls visibility of the cancel button
 - **Type:** `Boolean`
 - **Default:** `false`
 
 ### `submitButtonText` (String)
+
 - **Description:** Text displayed on the submit button
 - **Type:** `String`
 - **Default:** `'Submit'`
 
 ### `cancelButtonText` (String)
+
 - **Description:** Text displayed on the cancel button
 - **Type:** `String`
 - **Default:** `'Cancel'`
 
 ### `validateOnChange` (Boolean)
+
 - **Description:** Enables real-time validation as fields change
 - **Type:** `Boolean`
 - **Default:** `true`
@@ -112,6 +145,7 @@ const handleFieldChange = (event) => {
 Each field object in the `fields` array supports the following properties:
 
 ### Basic Properties
+
 - **`name`** (String, required) - Unique identifier for the field
 - **`label`** (String, required) - Display label for the field
 - **`type`** (String, required) - Field input type
@@ -123,23 +157,27 @@ Each field object in the `fields` array supports the following properties:
 - **`defaultValue`** (Any) - Initial value for the field
 
 ### Layout Properties
+
 - **`cols`** (Number, default: `12`) - Column width on extra small screens
 - **`sm`** (Number, default: `12`) - Column width on small screens
 - **`md`** (Number, default: `6`) - Column width on medium screens
 - **`lg`** (Number, default: `6`) - Column width on large screens
 
 ### Validation Properties
+
 - **`validate`** (Function) - Custom validation function
   - **Signature:** `(value: any) => string | null`
   - **Returns:** Error message string or null if valid
 
 ### Field-Specific Properties
+
 - **`onChangeOverride`** (Function) - Field-specific change handler that overrides global onChange
   - **Signature:** `(value: any, fieldName: string, formData: Object) => void`
 
 ## Field Types
 
 ### Text Input (`type: 'text'`)
+
 Standard text input field with optional format validation.
 
 ```javascript
@@ -153,9 +191,11 @@ Standard text input field with optional format validation.
 ```
 
 **Additional Properties:**
+
 - **`format`** (String) - Input format validation (`'email'` for email validation)
 
 ### Number Input (`type: 'number'`)
+
 Numeric input field with optional min/max constraints.
 
 ```javascript
@@ -170,11 +210,13 @@ Numeric input field with optional min/max constraints.
 ```
 
 **Additional Properties:**
+
 - **`min`** (Number) - Minimum allowed value
 - **`max`** (Number) - Maximum allowed value
 - **`step`** (Number) - Step increment for the input
 
 ### Textarea (`type: 'textarea'`)
+
 Multi-line text input for longer content.
 
 ```javascript
@@ -188,10 +230,12 @@ Multi-line text input for longer content.
 ```
 
 **Additional Properties:**
+
 - **`rows`** (Number, default: `3`) - Number of visible text lines
 
 ### Select Dropdown (`type: 'select'`)
-Dropdown selection field with predefined options.
+
+Dropdown selection field with predefined options and built-in filtering.
 
 ```javascript
 {
@@ -203,14 +247,87 @@ Dropdown selection field with predefined options.
     { label: 'United States', value: 'us' },
     { label: 'Canada', value: 'ca' },
     { label: 'Mexico', value: 'mx' }
-  ]
+  ],
+  filter: true,  // Enable search filtering
+  showClear: true  // Allow clearing selection
 }
 ```
 
 **Additional Properties:**
+
 - **`options`** (Array, required) - Array of option objects with `label` and `value` properties
+- **`optionLabel`** (String, default: `'label'`) - Property name for display text
+- **`optionValue`** (String, default: `'value'`) - Property name for value
+- **`filter`** (Boolean, default: `true`) - Enable filtering/search
+- **`showClear`** (Boolean, default: `true`) - Show clear button
+
+### ⭐ AutoComplete (`type: 'autocomplete'`) - NEW!
+
+**The game-changer!** AutoComplete field that allows users to select from suggestions OR enter completely custom values not in the predefined list.
+
+```javascript
+// Basic AutoComplete - allows custom entries
+{
+  name: 'skills',
+  label: 'Skills',
+  type: 'autocomplete',
+  placeholder: 'Add your skills',
+  options: [
+    { label: 'JavaScript', value: 'js' },
+    { label: 'Python', value: 'python' },
+    { label: 'Vue.js', value: 'vue' }
+  ],
+  optionLabel: 'label',
+  optionValue: 'value',
+  forceSelection: false,  // KEY: Allows custom values!
+  multiple: true,         // Multiple selection
+  helpText: 'Select existing skills or add your own custom skills'
+}
+
+// Strict selection (only predefined options)
+{
+  name: 'department',
+  label: 'Department',
+  type: 'autocomplete',
+  options: [
+    { label: 'Engineering', value: 'eng' },
+    { label: 'Marketing', value: 'mkt' },
+    { label: 'Sales', value: 'sales' }
+  ],
+  forceSelection: true,   // Only allows predefined options
+  dropdown: true,         // Show dropdown button
+  required: true
+}
+
+// Dynamic/Remote data loading
+{
+  name: 'users',
+  label: 'Select Users',
+  type: 'autocomplete',
+  options: [],  // Initially empty
+  onSearch: async (query, callback) => {
+    if (query.length > 2) {
+      const response = await fetch(`/api/users?search=${query}`);
+      const users = await response.json();
+      callback(users);  // Update options dynamically
+    }
+  }
+}
+```
+
+**Additional Properties:**
+
+- **`options`** (Array) - Array of suggestion objects
+- **`optionLabel`** (String, default: `'label'`) - Property for display text
+- **`optionValue`** (String, default: `'value'`) - Property for value
+- **`forceSelection`** (Boolean, default: `false`) - If true, only allows predefined options. If false, allows custom values!
+- **`multiple`** (Boolean, default: `false`) - Allow multiple selections
+- **`dropdown`** (Boolean, default: `true`) - Show dropdown button
+- **`onSearch`** (Function) - Custom search function for dynamic data loading
+  - **Signature:** `(query: string, callback: Function) => void`
 
 ### Checkbox (`type: 'checkbox'`)
+
 Boolean checkbox input.
 
 ```javascript
@@ -223,6 +340,7 @@ Boolean checkbox input.
 ```
 
 ### Radio Group (`type: 'radio'`)
+
 Radio button group for single selection from multiple options.
 
 ```javascript
@@ -240,9 +358,11 @@ Radio button group for single selection from multiple options.
 ```
 
 **Additional Properties:**
+
 - **`options`** (Array, required) - Array of option objects with `label` and `value` properties
 
 ### Date Input (`type: 'date'`)
+
 Date picker input field.
 
 ```javascript
@@ -257,10 +377,12 @@ Date picker input field.
 ```
 
 **Additional Properties:**
+
 - **`min`** (String) - Minimum allowed date (YYYY-MM-DD format)
 - **`max`** (String) - Maximum allowed date (YYYY-MM-DD format)
 
 ### DateTime Input (`type: 'datetime'`)
+
 Date and time picker input field.
 
 ```javascript
@@ -273,10 +395,12 @@ Date and time picker input field.
 ```
 
 **Additional Properties:**
+
 - **`min`** (String) - Minimum allowed datetime
 - **`max`** (String) - Maximum allowed datetime
 
 ### File Input (`type: 'file'`)
+
 File upload input field.
 
 ```javascript
@@ -290,26 +414,31 @@ File upload input field.
 ```
 
 **Additional Properties:**
+
 - **`accept`** (String) - File types to accept (MIME types or file extensions)
 - **`multiple`** (Boolean, default: `false`) - Allow multiple file selection
 
 ## Events
 
 ### `update:formData`
+
 - **Description:** Emitted when form data changes (controlled mode only)
 - **Payload:** Updated form data object
 - **Usage:** `@update:formData="handleFormDataUpdate"`
 
 ### `submit`
+
 - **Description:** Emitted when form is successfully submitted
 - **Payload:** Form data object
 - **Usage:** `@submit="handleSubmit"`
 
 ### `cancel`
+
 - **Description:** Emitted when cancel button is clicked
 - **Usage:** `@cancel="handleCancel"`
 
 ### `change`
+
 - **Description:** Emitted when any field value changes
 - **Payload:** Object with `fieldName`, `value`, and `formData` properties
 - **Usage:** `@change="handleFieldChange"`
@@ -324,36 +453,41 @@ The component exposes several methods that can be accessed via template refs:
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref } from "vue";
 
-const formRef = ref(null)
+const formRef = ref(null);
 
 // Access exposed methods
-const validateForm = () => formRef.value.validateForm()
-const resetForm = () => formRef.value.resetForm()
+const validateForm = () => formRef.value.validateForm();
+const resetForm = () => formRef.value.resetForm();
 </script>
 ```
 
 ### `validateForm()`
+
 - **Description:** Validates the entire form and returns validation status
 - **Returns:** `Boolean` - `true` if valid, `false` if invalid
 - **Side Effect:** Updates form error state
 
 ### `getCurrentFormData()`
+
 - **Description:** Gets the current form data object
 - **Returns:** `Object` - Current form data
 
 ### `resetForm()`
+
 - **Description:** Resets form to initial state and clears all errors
 - **Returns:** `void`
 
 ### `setFieldError(fieldName, error)`
+
 - **Description:** Sets an error message for a specific field
 - **Parameters:**
   - `fieldName` (String) - The field name
   - `error` (String) - Error message to display
 
 ### `clearFieldError(fieldName)`
+
 - **Description:** Clears the error for a specific field
 - **Parameters:**
   - `fieldName` (String) - The field name to clear
@@ -361,55 +495,56 @@ const resetForm = () => formRef.value.resetForm()
 ## Usage Examples
 
 ### Basic Contact Form
+
 ```vue
 <script setup>
-import { ref } from 'vue'
+import { ref } from "vue";
 
-const formData = ref({})
+const formData = ref({});
 
 const contactFields = [
   {
-    name: 'firstName',
-    label: 'First Name',
-    type: 'text',
+    name: "firstName",
+    label: "First Name",
+    type: "text",
     required: true,
     cols: 12,
-    md: 6
+    md: 6,
   },
   {
-    name: 'lastName',
-    label: 'Last Name',
-    type: 'text',
+    name: "lastName",
+    label: "Last Name",
+    type: "text",
     required: true,
     cols: 12,
-    md: 6
+    md: 6,
   },
   {
-    name: 'email',
-    label: 'Email',
-    type: 'text',
-    format: 'email',
+    name: "email",
+    label: "Email",
+    type: "text",
+    format: "email",
     required: true,
-    cols: 12
+    cols: 12,
   },
   {
-    name: 'message',
-    label: 'Message',
-    type: 'textarea',
+    name: "message",
+    label: "Message",
+    type: "textarea",
     rows: 5,
     required: true,
-    cols: 12
-  }
-]
+    cols: 12,
+  },
+];
 
 const handleSubmit = async (data) => {
   try {
-    await sendContactForm(data)
-    alert('Form submitted successfully!')
+    await sendContactForm(data);
+    alert("Form submitted successfully!");
   } catch (error) {
-    console.error('Submission failed:', error)
+    console.error("Submission failed:", error);
   }
-}
+};
 </script>
 
 <template>
@@ -422,65 +557,192 @@ const handleSubmit = async (data) => {
 </template>
 ```
 
-### User Registration Form
+### AutoComplete Examples
+
 ```vue
 <script setup>
-import { ref } from 'vue'
+import { ref } from "vue";
 
-const registrationData = ref({})
+const formData = ref({});
+
+// Sample data
+const countries = [
+  { label: "United States", value: "US" },
+  { label: "Canada", value: "CA" },
+  { label: "United Kingdom", value: "UK" },
+  { label: "Germany", value: "DE" },
+  { label: "France", value: "FR" },
+];
+
+const skills = [
+  { label: "JavaScript", value: "javascript" },
+  { label: "Python", value: "python" },
+  { label: "Vue.js", value: "vue" },
+  { label: "React", value: "react" },
+  { label: "Node.js", value: "node" },
+];
+
+const autoCompleteFields = [
+  // Basic AutoComplete - allows custom countries
+  {
+    name: "country",
+    label: "Country",
+    type: "autocomplete",
+    placeholder: "Type or select a country",
+    options: countries,
+    optionLabel: "label",
+    optionValue: "value",
+    forceSelection: false, // Users can enter "Custom Country"
+    required: true,
+    cols: 6,
+    helpText: "Select from list or enter any country name",
+  },
+
+  // Multiple selection with custom values
+  {
+    name: "skills",
+    label: "Technical Skills",
+    type: "autocomplete",
+    placeholder: "Add your skills",
+    options: skills,
+    optionLabel: "label",
+    optionValue: "value",
+    multiple: true,
+    forceSelection: false, // Users can add custom skills like "Machine Learning"
+    cols: 6,
+    helpText: "Select existing skills or add custom ones",
+  },
+
+  // Strict selection - only predefined options
+  {
+    name: "department",
+    label: "Department",
+    type: "autocomplete",
+    options: [
+      { label: "Engineering", value: "eng" },
+      { label: "Marketing", value: "mkt" },
+      { label: "Sales", value: "sales" },
+      { label: "HR", value: "hr" },
+    ],
+    forceSelection: true, // Only allows company departments
+    dropdown: true,
+    required: true,
+    cols: 6,
+  },
+
+  // Dynamic search with API calls
+  {
+    name: "users",
+    label: "Assign to User",
+    type: "autocomplete",
+    placeholder: "Search users...",
+    options: [],
+    optionLabel: "name",
+    optionValue: "id",
+    onSearch: async (query, callback) => {
+      if (query.length > 2) {
+        try {
+          const response = await fetch(`/api/users?search=${query}`);
+          const users = await response.json();
+          callback(users);
+        } catch (error) {
+          console.error("Search failed:", error);
+          callback([]);
+        }
+      } else {
+        callback([]);
+      }
+    },
+    cols: 6,
+    helpText: "Type at least 3 characters to search",
+  },
+];
+</script>
+
+<template>
+  <Form
+    :fields="autoCompleteFields"
+    v-model:form-data="formData"
+    @submit="handleSubmit"
+    submit-button-text="Save"
+  />
+
+  <!-- Show current values -->
+  <div v-if="Object.keys(formData).length" class="mt-4">
+    <h3>Current Values:</h3>
+    <pre>{{ JSON.stringify(formData, null, 2) }}</pre>
+  </div>
+</template>
+```
+
+### User Registration Form
+
+```vue
+<script setup>
+import { ref } from "vue";
+
+const registrationData = ref({});
 
 const registrationFields = [
   {
-    name: 'username',
-    label: 'Username',
-    type: 'text',
+    name: "username",
+    label: "Username",
+    type: "text",
     required: true,
     validate: (value) => {
       if (value && value.length < 3) {
-        return 'Username must be at least 3 characters'
+        return "Username must be at least 3 characters";
       }
-      return null
-    }
+      return null;
+    },
   },
   {
-    name: 'email',
-    label: 'Email',
-    type: 'text',
-    format: 'email',
-    required: true
+    name: "email",
+    label: "Email",
+    type: "text",
+    format: "email",
+    required: true,
   },
   {
-    name: 'age',
-    label: 'Age',
-    type: 'number',
+    name: "age",
+    label: "Age",
+    type: "number",
     min: 18,
     max: 100,
-    required: true
+    required: true,
   },
+  // UPDATED: Using AutoComplete instead of Select
   {
-    name: 'country',
-    label: 'Country',
-    type: 'select',
+    name: "country",
+    label: "Country",
+    type: "autocomplete", // Changed from 'select' to 'autocomplete'
+    placeholder: "Type or select your country",
     required: true,
     options: [
-      { label: 'United States', value: 'us' },
-      { label: 'Canada', value: 'ca' },
-      { label: 'United Kingdom', value: 'uk' }
-    ]
+      { label: "United States", value: "us" },
+      { label: "Canada", value: "ca" },
+      { label: "United Kingdom", value: "uk" },
+      { label: "Australia", value: "au" },
+      { label: "Germany", value: "de" },
+    ],
+    optionLabel: "label",
+    optionValue: "value",
+    forceSelection: false, // Allows users to enter unlisted countries
+    helpText: "Select from common countries or type your own",
   },
   {
-    name: 'terms',
-    label: 'I agree to the terms and conditions',
-    type: 'checkbox',
+    name: "terms",
+    label: "I agree to the terms and conditions",
+    type: "checkbox",
     required: true,
     validate: (value) => {
       if (!value) {
-        return 'You must agree to the terms and conditions'
+        return "You must agree to the terms and conditions";
       }
-      return null
-    }
-  }
-]
+      return null;
+    },
+  },
+];
 </script>
 
 <template>
@@ -496,54 +758,55 @@ const registrationFields = [
 ```
 
 ### Survey Form with Custom Validation
+
 ```vue
 <script setup>
-import { ref } from 'vue'
+import { ref } from "vue";
 
-const surveyData = ref({})
+const surveyData = ref({});
 
 const surveyFields = [
   {
-    name: 'satisfaction',
-    label: 'How satisfied are you with our service?',
-    type: 'radio',
+    name: "satisfaction",
+    label: "How satisfied are you with our service?",
+    type: "radio",
     required: true,
     options: [
-      { label: 'Very Satisfied', value: '5' },
-      { label: 'Satisfied', value: '4' },
-      { label: 'Neutral', value: '3' },
-      { label: 'Dissatisfied', value: '2' },
-      { label: 'Very Dissatisfied', value: '1' }
+      { label: "Very Satisfied", value: "5" },
+      { label: "Satisfied", value: "4" },
+      { label: "Neutral", value: "3" },
+      { label: "Dissatisfied", value: "2" },
+      { label: "Very Dissatisfied", value: "1" },
     ],
-    cols: 12
+    cols: 12,
   },
   {
-    name: 'feedback',
-    label: 'Additional Feedback',
-    type: 'textarea',
+    name: "feedback",
+    label: "Additional Feedback",
+    type: "textarea",
     rows: 4,
-    placeholder: 'Please share your thoughts...',
+    placeholder: "Please share your thoughts...",
     cols: 12,
     onChangeOverride: (value, fieldName, formData) => {
       // Custom logic for this field only
-      console.log(`Feedback length: ${value?.length || 0} characters`)
-    }
+      console.log(`Feedback length: ${value?.length || 0} characters`);
+    },
   },
   {
-    name: 'recommend',
-    label: 'Would you recommend us to others?',
-    type: 'checkbox',
-    cols: 12
-  }
-]
+    name: "recommend",
+    label: "Would you recommend us to others?",
+    type: "checkbox",
+    cols: 12,
+  },
+];
 
 const handleSurveySubmit = (data) => {
-  console.log('Survey submitted:', data)
-}
+  console.log("Survey submitted:", data);
+};
 
 const handleFieldChange = (event) => {
-  console.log('Global change handler:', event)
-}
+  console.log("Global change handler:", event);
+};
 </script>
 
 <template>
@@ -558,59 +821,60 @@ const handleFieldChange = (event) => {
 ```
 
 ### File Upload Form
+
 ```vue
 <script setup>
-import { ref } from 'vue'
+import { ref } from "vue";
 
-const uploadData = ref({})
+const uploadData = ref({});
 
 const uploadFields = [
   {
-    name: 'title',
-    label: 'Document Title',
-    type: 'text',
+    name: "title",
+    label: "Document Title",
+    type: "text",
     required: true,
-    cols: 12
+    cols: 12,
   },
   {
-    name: 'category',
-    label: 'Category',
-    type: 'select',
+    name: "category",
+    label: "Category",
+    type: "select",
     required: true,
     options: [
-      { label: 'Reports', value: 'reports' },
-      { label: 'Presentations', value: 'presentations' },
-      { label: 'Documents', value: 'documents' }
+      { label: "Reports", value: "reports" },
+      { label: "Presentations", value: "presentations" },
+      { label: "Documents", value: "documents" },
     ],
     cols: 12,
-    md: 6
+    md: 6,
   },
   {
-    name: 'uploadDate',
-    label: 'Upload Date',
-    type: 'date',
+    name: "uploadDate",
+    label: "Upload Date",
+    type: "date",
     required: true,
     cols: 12,
-    md: 6
+    md: 6,
   },
   {
-    name: 'files',
-    label: 'Select Files',
-    type: 'file',
-    accept: '.pdf,.doc,.docx,.ppt,.pptx',
+    name: "files",
+    label: "Select Files",
+    type: "file",
+    accept: ".pdf,.doc,.docx,.ppt,.pptx",
     multiple: true,
     required: true,
-    cols: 12
+    cols: 12,
   },
   {
-    name: 'description',
-    label: 'Description',
-    type: 'textarea',
+    name: "description",
+    label: "Description",
+    type: "textarea",
     rows: 3,
-    helpText: 'Optional description of the uploaded files',
-    cols: 12
-  }
-]
+    helpText: "Optional description of the uploaded files",
+    cols: 12,
+  },
+];
 </script>
 
 <template>
@@ -626,55 +890,52 @@ const uploadFields = [
 ## Form State Management
 
 ### Controlled Mode (External Form Data)
+
 When you provide a `formData` prop, the component operates in controlled mode:
 
 ```vue
 <script setup>
-import { ref } from 'vue'
+import { ref } from "vue";
 
 // External form state
 const formData = ref({
-  name: 'John Doe',
-  email: 'john@example.com'
-})
+  name: "John Doe",
+  email: "john@example.com",
+});
 </script>
 
 <template>
-  <Form
-    :fields="fields"
-    v-model:form-data="formData"
-    @submit="handleSubmit"
-  />
+  <Form :fields="fields" v-model:form-data="formData" @submit="handleSubmit" />
 </template>
 ```
 
 ### Uncontrolled Mode (Internal Form Data)
+
 When no `formData` is provided, the component manages its own internal state:
 
 ```vue
 <template>
-  <Form
-    :fields="fields"
-    @submit="handleSubmit"
-  />
+  <Form :fields="fields" @submit="handleSubmit" />
 </template>
 
 <script setup>
 const handleSubmit = (data) => {
   // Data is passed to the submit handler
-  console.log('Form data:', data)
-}
+  console.log("Form data:", data);
+};
 </script>
 ```
 
 ## Validation
 
 ### Built-in Validation
+
 - **Required fields** - Validates that required fields are not empty
 - **Email format** - Validates email format when `format: 'email'` is used
 - **Number ranges** - Validates min/max values for number fields
 
 ### Custom Validation
+
 Each field can have a custom validation function:
 
 ```javascript
@@ -696,6 +957,7 @@ Each field can have a custom validation function:
 ```
 
 ### Validation Timing
+
 - **On change** - When `validateOnChange` is `true` (default)
 - **On submit** - Always validates on form submission
 - **Manual** - Using the exposed `validateForm()` method
@@ -710,7 +972,7 @@ The component uses Vuetify's grid system for responsive layouts:
   label: 'Field',
   type: 'text',
   cols: 12,    // Full width on extra small screens
-  sm: 12,      // Full width on small screens  
+  sm: 12,      // Full width on small screens
   md: 6,       // Half width on medium screens
   lg: 4        // One-third width on large screens
 }
@@ -719,8 +981,9 @@ The component uses Vuetify's grid system for responsive layouts:
 ## Styling
 
 The component uses Vuetify's design system with:
+
 - **Outlined variants** for consistent appearance
-- **Comfortable density** for optimal spacing  
+- **Comfortable density** for optimal spacing
 - **Error state styling** for validation feedback
 - **Required field indicators** with red asterisks
 - **Responsive design** that adapts to screen size
@@ -741,6 +1004,7 @@ The component uses Vuetify's design system with:
 ## Accessibility
 
 The component includes:
+
 - **Proper form semantics** with native HTML form elements
 - **Label associations** for screen readers
 - **Error message announcements** for validation feedback
@@ -751,13 +1015,101 @@ The component includes:
 ## Browser Support
 
 Compatible with all modern browsers that support:
+
 - Vue 3 Composition API
 - Vuetify 3 components
 - ES6+ features
 - CSS Grid and Flexbox
 
+## Migration from Vuetify
+
+The component has been completely migrated from Vuetify to PrimeVue. Here's what you need to know:
+
+### ✨ What's New
+
+- **AutoComplete component** - The star feature! Users can select from suggestions OR enter completely custom values
+- **Better date/time pickers** - Calendar popup, time selection, better formatting options
+- **Enhanced file uploads** - Drag & drop, better validation, file preview
+- **Improved accessibility** - Full ARIA support, better keyboard navigation
+- **Flexible styling** - CSS custom properties, easier theming
+- **Mobile-first responsive** - Better grid system, improved mobile UX
+
+### 🔄 Migration Changes
+
+#### Layout System
+
+```javascript
+// OLD (Vuetify):
+{ cols: 12, sm: 12, md: 6, lg: 6 }
+
+// NEW (CSS Grid): Same properties, better responsive behavior
+{ cols: 12, md: 6, lg: 4 }
+```
+
+#### Component Mapping
+
+| Vuetify         | PrimeVue       | Notes                    |
+| --------------- | -------------- | ------------------------ |
+| `v-text-field`  | `InputText`    | Same functionality       |
+| `v-textarea`    | `Textarea`     | Added autoResize         |
+| `v-select`      | `Select`       | Added filtering          |
+| `v-checkbox`    | `Checkbox`     | Improved styling         |
+| `v-radio-group` | `RadioButton`  | Better layout            |
+| `v-file-input`  | `FileUpload`   | Enhanced features        |
+| `v-btn`         | `Button`       | Same functionality       |
+| **New!**        | `AutoComplete` | 🚀 Custom values support |
+| **New!**        | `DatePicker`   | Calendar popup           |
+
+#### Event Changes
+
+```javascript
+// OLD (Vuetify):
+@update:model-value="handleChange"
+
+// NEW (PrimeVue):
+@update:model-value="handleChange"  // Same!
+// But also enhanced with better event data
+```
+
+#### Styling Changes
+
+```css
+/* OLD: Vuetify classes */
+.v-form { ... }
+.v-text-field { ... }
+
+/* NEW: Custom CSS with variables */
+.dynamic-form { ... }
+.field-wrapper { ... }
+
+/* Theming with CSS custom properties */
+:root {
+  --text-color: #374151;
+  --red-500: #ef4444;
+}
+```
+
+### 🚀 Upgrade Benefits
+
+1. **AutoComplete with Custom Values** - Users are no longer limited to predefined options
+2. **Better Performance** - PrimeVue components are more lightweight
+3. **Enhanced Accessibility** - Full WCAG compliance out of the box
+4. **Improved Developer Experience** - Better TypeScript support, clearer APIs
+5. **Modern Styling** - CSS Grid, custom properties, better mobile support
+6. **Rich Components** - Better date pickers, file uploads, and form controls
+
+### 📝 Quick Migration Checklist
+
+- [ ] Update imports from Vuetify to PrimeVue components
+- [ ] Replace `v-select` with `AutoComplete` where custom values are needed
+- [ ] Update CSS classes from `v-*` to custom classes
+- [ ] Test responsive layout (should work better!)
+- [ ] Enjoy the new AutoComplete functionality! 🎉
+
 ## Dependencies
 
 - **Vue 3** with Composition API
-- **Vuetify 3** components (v-form, v-text-field, v-textarea, v-select, v-checkbox, v-radio-group, v-file-input, v-btn)
-- **Modern JavaScript** features (ES6+)
\ No newline at end of file
+- **PrimeVue 4.4+** components (InputText, InputNumber, Textarea, Select, AutoComplete, Checkbox, RadioButton, DatePicker, FileUpload, Button, Message)
+- **Modern JavaScript** features (ES6+)
+- **CSS Grid** and **Flexbox** support
+````
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 9189f78..1341e66 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -35,10 +35,10 @@ import ScrollPanel from "primevue/scrollpanel";
 	border-radius: 10px;
 	padding: 10px;
 	border: 4px solid rgb(235, 230, 230);
-	max-width: 1280px;
-	min-width: 800px;
+	max-width: 2500px;
+	width: 100%;
 	margin: 10px auto;
-	min-height: 87vh;
+	height: 83vh;
 }
 
 #display-content {
@@ -47,6 +47,6 @@ import ScrollPanel from "primevue/scrollpanel";
 	margin-right: auto;
 	max-width: 50vw;
 	min-width: 80%;
-	max-height: 87vh;
+	height: 100%;
 }
 </style>
diff --git a/frontend/src/api.js b/frontend/src/api.js
index a3f04da..c420247 100644
--- a/frontend/src/api.js
+++ b/frontend/src/api.js
@@ -1,25 +1,20 @@
 import DataUtils from "./utils";
-import axios from "axios";
 
 const ZIPPOPOTAMUS_BASE_URL = "https://api.zippopotam.us/us";
 
 class Api {
-
-	static async request(url, method = "get", data = {}) {
+	static async request(url, method = "GET", data = {}) {
 		try {
-			const response = await axios({
-				url,
-				method,
-				data,
-				withCredentials: false,
-				timeout: 10000, // 10 second timeout
-				headers: {
-					'Accept': 'application/json',
-					'Content-Type': 'application/json'
-				}
-			})
-			console.log("DEBUG: API - Request Response: ", response.data);
-			return response.data;
+			const response = await frappe.call({
+				method: "custom_ui.api.proxy.request",
+				args: {
+					url,
+					method,
+					data: JSON.stringify(data),
+				},
+			});
+			console.log("DEBUG: API - Request Response: ", response);
+			return response.message;
 		} catch (error) {
 			console.error("DEBUG: API - Request Error: ", error);
 			// Re-throw the error so calling code can handle it
@@ -80,8 +75,8 @@ class Api {
 	/**
 	 * Fetch a list of documents from a specific doctype.
 	 *
-	 * @param {String} doctype 
-	 * @param {string[]} fields 
+	 * @param {String} doctype
+	 * @param {string[]} fields
 	 * @returns {Promise<Object[]>}
 	 */
 	static async getDocsList(doctype, fields = []) {
@@ -93,8 +88,8 @@ class Api {
 	/**
 	 * Fetch a detailed document by doctype and name.
 	 *
-	 * @param {String} doctype 
-	 * @param {String} name 
+	 * @param {String} doctype
+	 * @param {String} name
 	 * @returns {Promise<Object>}
 	 */
 	static async getDetailedDoc(doctype, name) {
@@ -105,36 +100,27 @@ class Api {
 
 	/**
 	 * Fetch a list of places (city/state) by zipcode using Zippopotamus API.
-	 * 
+	 *
 	 * @param {String} zipcode
 	 * @returns {Promise<Object[]>}
 	 */
 	static async getCityStateByZip(zipcode) {
 		const url = `${ZIPPOPOTAMUS_BASE_URL}/${zipcode}`;
-		try {
-			const response = await this.request(url);
-			const { places } = response || {};
-			
-			if (!places || places.length === 0) {
-				throw new Error(`No location data found for zip code ${zipcode}`);
-			}
-			
-			return places;
-		} catch (error) {
-			console.error("DEBUG: API - getCityStateByZip Error: ", error);
-			
-			// Provide more specific error information
-			if (error.code === 'ERR_NETWORK') {
-				throw new Error('Network error: Unable to connect to location service. This may be due to CORS restrictions or network connectivity issues.');
-			} else if (error.response?.status === 404) {
-				throw new Error(`Zip code ${zipcode} not found in database.`);
-			} else if (error.code === 'ECONNABORTED') {
-				throw new Error('Request timeout: Location service is taking too long to respond.');
-			}
-			
-			// Re-throw the original error if we can't categorize it
-			throw error;
+		const response = await this.request(url);
+		const { places } = response || {};
+		if (!places || places.length === 0) {
+			throw new Error(`No location data found for zip code ${zipcode}`);
 		}
+		return places;
+	}
+
+	/**
+	 * Fetch a list of Customer names.
+	 * @returns {Promise<String[]>}
+	 */
+	static async getCustomerNames() {
+		const customers = await this.getDocsList("Customer", ["name"]);
+		return customers.map((customer) => customer.name);
 	}
 }
 
diff --git a/frontend/src/components/ModalExamples.vue b/frontend/src/components/ModalExamples.vue
deleted file mode 100644
index 2617303..0000000
--- a/frontend/src/components/ModalExamples.vue
+++ /dev/null
@@ -1,336 +0,0 @@
-<!-- Modal Usage Examples -->
-<template>
-  <div class="modal-examples">
-    <h2>Modal Component Examples</h2>
-    
-    <!-- Example buttons to trigger different modal types -->
-    <div class="example-buttons">
-      <v-btn @click="showBasicModal" color="primary">Basic Modal</v-btn>
-      <v-btn @click="showFormModal" color="secondary">Form Modal</v-btn>
-      <v-btn @click="showConfirmModal" color="warning">Confirmation Modal</v-btn>
-      <v-btn @click="showFullscreenModal" color="success">Fullscreen Modal</v-btn>
-      <v-btn @click="showCustomModal" color="info">Custom Styled Modal</v-btn>
-    </div>
-
-    <!-- Basic Modal -->
-    <Modal
-      v-model:visible="basicModalVisible"
-      :options="basicModalOptions"
-      @close="onBasicModalClose"
-      @confirm="onBasicModalConfirm"
-    >
-      <p>This is a basic modal with default settings.</p>
-      <p>You can put any content here!</p>
-    </Modal>
-
-    <!-- Form Modal -->
-    <Modal
-      v-model:visible="formModalVisible"
-      :options="formModalOptions"
-      @close="onFormModalClose"
-      @confirm="onFormModalConfirm"
-    >
-      <template #title>
-        <v-icon class="mr-2">mdi-account-plus</v-icon>
-        Add New User
-      </template>
-      
-      <v-form ref="userForm" v-model="formValid">
-        <v-text-field
-          v-model="userForm.name"
-          label="Full Name"
-          :rules="[v => !!v || 'Name is required']"
-          required
-        />
-        <v-text-field
-          v-model="userForm.email"
-          label="Email"
-          type="email"
-          :rules="emailRules"
-          required
-        />
-        <v-select
-          v-model="userForm.role"
-          :items="roleOptions"
-          label="Role"
-          :rules="[v => !!v || 'Role is required']"
-          required
-        />
-      </v-form>
-    </Modal>
-
-    <!-- Confirmation Modal -->
-    <Modal
-      v-model:visible="confirmModalVisible"
-      :options="confirmModalOptions"
-      @confirm="onDeleteConfirm"
-      @cancel="onDeleteCancel"
-    >
-      <div class="text-center">
-        <v-icon size="64" color="warning" class="mb-4">mdi-alert-circle</v-icon>
-        <h3 class="mb-2">Are you sure?</h3>
-        <p>This action cannot be undone. The item will be permanently deleted.</p>
-      </div>
-    </Modal>
-
-    <!-- Fullscreen Modal -->
-    <Modal
-      v-model:visible="fullscreenModalVisible"
-      :options="fullscreenModalOptions"
-      @close="onFullscreenModalClose"
-    >
-      <template #title>
-        Fullscreen Content
-      </template>
-      
-      <div class="fullscreen-content">
-        <v-row>
-          <v-col cols="12" md="6">
-            <v-card>
-              <v-card-title>Left Panel</v-card-title>
-              <v-card-text>
-                <p>This is a fullscreen modal that can contain complex layouts.</p>
-                <v-list>
-                  <v-list-item v-for="i in 10" :key="i">
-                    <v-list-item-title>Item {{ i }}</v-list-item-title>
-                  </v-list-item>
-                </v-list>
-              </v-card-text>
-            </v-card>
-          </v-col>
-          <v-col cols="12" md="6">
-            <v-card>
-              <v-card-title>Right Panel</v-card-title>
-              <v-card-text>
-                <v-img
-                  src="https://picsum.photos/400/200"
-                  height="200"
-                  class="mb-4"
-                />
-                <p>You can include any Vue components here.</p>
-              </v-card-text>
-            </v-card>
-          </v-col>
-        </v-row>
-      </div>
-    </Modal>
-
-    <!-- Custom Styled Modal -->
-    <Modal
-      v-model:visible="customModalVisible"
-      :options="customModalOptions"
-      @close="onCustomModalClose"
-    >
-      <template #title>
-        <div class="custom-title">
-          <v-icon class="mr-2">mdi-palette</v-icon>
-          Custom Styled Modal
-        </div>
-      </template>
-
-      <div class="custom-content">
-        <v-card variant="outlined" class="mb-4">
-          <v-card-text>
-            <v-icon size="32" color="primary" class="mr-2">mdi-information</v-icon>
-            This modal demonstrates custom styling options.
-          </v-card-text>
-        </v-card>
-        
-        <v-timeline density="compact">
-          <v-timeline-item
-            v-for="item in timelineItems"
-            :key="item.id"
-            :dot-color="item.color"
-            size="small"
-          >
-            <v-card>
-              <v-card-title>{{ item.title }}</v-card-title>
-              <v-card-subtitle>{{ item.time }}</v-card-subtitle>
-            </v-card>
-          </v-timeline-item>
-        </v-timeline>
-      </div>
-
-      <template #actions="{ close }">
-        <v-btn color="gradient" variant="elevated" @click="close">
-          <v-icon class="mr-1">mdi-check</v-icon>
-          Got it!
-        </v-btn>
-      </template>
-    </Modal>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive } from 'vue'
-import Modal from './common/Modal.vue'
-
-// Basic Modal
-const basicModalVisible = ref(false)
-const basicModalOptions = {
-  title: 'Basic Modal',
-  maxWidth: '400px',
-  showActions: true
-}
-
-// Form Modal
-const formModalVisible = ref(false)
-const formValid = ref(false)
-const userForm = reactive({
-  name: '',
-  email: '',
-  role: ''
-})
-
-const formModalOptions = {
-  maxWidth: '500px',
-  persistent: true,
-  confirmButtonText: 'Save User',
-  confirmButtonColor: 'success',
-  loading: false
-}
-
-const roleOptions = ['Admin', 'User', 'Manager', 'Viewer']
-const emailRules = [
-  v => !!v || 'Email is required',
-  v => /.+@.+\..+/.test(v) || 'Email must be valid'
-]
-
-// Confirmation Modal
-const confirmModalVisible = ref(false)
-const confirmModalOptions = {
-  title: 'Confirm Deletion',
-  maxWidth: '400px',
-  persistent: false,
-  confirmButtonText: 'Delete',
-  confirmButtonColor: 'error',
-  cancelButtonText: 'Keep',
-  cardColor: 'surface-variant'
-}
-
-// Fullscreen Modal
-const fullscreenModalVisible = ref(false)
-const fullscreenModalOptions = {
-  fullscreen: true,
-  showActions: false,
-  scrollable: true
-}
-
-// Custom Modal
-const customModalVisible = ref(false)
-const customModalOptions = {
-  maxWidth: '600px',
-  cardColor: 'primary',
-  cardVariant: 'elevated',
-  elevation: 12,
-  headerClass: 'custom-header',
-  contentClass: 'custom-content-class',
-  showActions: false,
-  overlayOpacity: 0.8,
-  transition: 'scale-transition'
-}
-
-const timelineItems = [
-  { id: 1, title: 'Project Started', time: '2 hours ago', color: 'primary' },
-  { id: 2, title: 'First Milestone', time: '1 hour ago', color: 'success' },
-  { id: 3, title: 'Review Phase', time: '30 minutes ago', color: 'warning' }
-]
-
-// Modal event handlers
-const showBasicModal = () => {
-  basicModalVisible.value = true
-}
-
-const onBasicModalClose = () => {
-  console.log('Basic modal closed')
-}
-
-const onBasicModalConfirm = () => {
-  console.log('Basic modal confirmed')
-}
-
-const showFormModal = () => {
-  formModalVisible.value = true
-}
-
-const onFormModalClose = () => {
-  // Reset form
-  Object.assign(userForm, { name: '', email: '', role: '' })
-}
-
-const onFormModalConfirm = async () => {
-  if (formValid.value) {
-    formModalOptions.loading = true
-    // Simulate API call
-    await new Promise(resolve => setTimeout(resolve, 1000))
-    console.log('User saved:', userForm)
-    formModalOptions.loading = false
-  }
-}
-
-const showConfirmModal = () => {
-  confirmModalVisible.value = true
-}
-
-const onDeleteConfirm = () => {
-  console.log('Item deleted')
-}
-
-const onDeleteCancel = () => {
-  console.log('Deletion cancelled')
-}
-
-const showFullscreenModal = () => {
-  fullscreenModalVisible.value = true
-}
-
-const onFullscreenModalClose = () => {
-  console.log('Fullscreen modal closed')
-}
-
-const showCustomModal = () => {
-  customModalVisible.value = true
-}
-
-const onCustomModalClose = () => {
-  console.log('Custom modal closed')
-}
-</script>
-
-<style scoped>
-.modal-examples {
-  padding: 20px;
-}
-
-.example-buttons {
-  display: flex;
-  gap: 16px;
-  flex-wrap: wrap;
-  margin-bottom: 20px;
-}
-
-.fullscreen-content {
-  height: 100%;
-}
-
-.custom-title {
-  display: flex;
-  align-items: center;
-  color: white;
-}
-
-.custom-content {
-  background: linear-gradient(45deg, #f3f4f6 0%, #ffffff 100%);
-  padding: 16px;
-  border-radius: 8px;
-}
-
-.custom-header {
-  background: linear-gradient(45deg, #1976d2 0%, #42a5f5 100%);
-  color: white;
-}
-
-.custom-content-class {
-  background-color: #fafafa;
-}
-</style>
\ No newline at end of file
diff --git a/frontend/src/components/common/Form.vue b/frontend/src/components/common/Form.vue
index ba03a36..5cd8c95 100644
--- a/frontend/src/components/common/Form.vue
+++ b/frontend/src/components/common/Form.vue
@@ -1,300 +1,465 @@
 <template>
-  <v-form @submit.prevent="handleSubmit" class="dynamic-form">
-    <v-container>
-      <v-row>
-        <v-col
-          v-for="field in fields"
-          :key="field.name"
-          :cols="field.cols || 12"
-          :sm="field.sm || 12"
-          :md="field.md || 6"
-          :lg="field.lg || 6"
-        >
-          <!-- Text Input -->
-          <v-text-field
-            v-if="field.type === 'text'"
-            v-model="fieldValues[field.name]"
-            :label="field.label"
-            :type="field.format || 'text'"
-            :placeholder="field.placeholder"
-            :required="field.required"
-            :disabled="field.disabled"
-            :readonly="field.readonly"
-            :error-messages="getFieldError(field.name)"
-            :hint="field.helpText"
-            persistent-hint
-            @input="handleFieldChange(field, $event.target ? $event.target.value : $event)"
-            @blur="handleFieldBlur(field, $event.target ? $event.target.value : fieldValues[field.name])"
-            variant="outlined"
-            density="comfortable"
-          >
-            <template v-if="field.required" #append-inner>
-              <span class="text-error">*</span>
-            </template>
-          </v-text-field>
-          
-          <!-- Number Input -->
-          <v-text-field
-            v-else-if="field.type === 'number'"
-            v-model="fieldValues[field.name]"
-            :label="field.label"
-            type="number"
-            :placeholder="field.placeholder"
-            :required="field.required"
-            :disabled="field.disabled"
-            :readonly="field.readonly"
-            :min="field.min"
-            :max="field.max"
-            :step="field.step"
-            :error-messages="getFieldError(field.name)"
-            :hint="field.helpText"
-            persistent-hint
-            @input="handleFieldChange(field, parseFloat($event.target ? $event.target.value : $event) || $event)"
-            @blur="handleFieldBlur(field, parseFloat($event.target ? $event.target.value : fieldValues[field.name]) || fieldValues[field.name])"
-            variant="outlined"
-            density="comfortable"
-          >
-            <template v-if="field.required" #append-inner>
-              <span class="text-error">*</span>
-            </template>
-          </v-text-field>
-          
-          <!-- Textarea -->
-          <v-textarea
-            v-else-if="field.type === 'textarea'"
-            v-model="fieldValues[field.name]"
-            :label="field.label"
-            :placeholder="field.placeholder"
-            :required="field.required"
-            :disabled="field.disabled"
-            :readonly="field.readonly"
-            :rows="field.rows || 3"
-            :error-messages="getFieldError(field.name)"
-            :hint="field.helpText"
-            persistent-hint
-            @input="handleFieldChange(field, $event.target ? $event.target.value : $event)"
-            @blur="handleFieldBlur(field, $event.target ? $event.target.value : fieldValues[field.name])"
-            variant="outlined"
-            density="comfortable"
-          >
-            <template v-if="field.required" #append-inner>
-              <span class="text-error">*</span>
-            </template>
-          </v-textarea>
-          
-          <!-- Select Dropdown -->
-          <v-select
-            v-else-if="field.type === 'select'"
-            v-model="fieldValues[field.name]"
-            :label="field.label"
-            :items="field.options"
-            item-title="label"
-            item-value="value"
-            :required="field.required"
-            :disabled="field.disabled"
-            :placeholder="field.placeholder"
-            :error-messages="getFieldError(field.name)"
-            :hint="field.helpText"
-            persistent-hint
-            @update:model-value="handleFieldChange(field, $event)"
-            @blur="handleFieldBlur(field, fieldValues[field.name])"
-            variant="outlined"
-            density="comfortable"
-          >
-            <template v-if="field.required" #append-inner>
-              <span class="text-error">*</span>
-            </template>
-          </v-select>
-          
-          <!-- Checkbox -->
-          <v-checkbox
-            v-else-if="field.type === 'checkbox'"
-            v-model="fieldValues[field.name]"
-            :label="field.label"
-            :required="field.required"
-            :disabled="field.disabled"
-            :error-messages="getFieldError(field.name)"
-            :hint="field.helpText"
-            persistent-hint
-            @update:model-value="handleFieldChange(field, $event)"
-            density="comfortable"
-          />
-          
-          <!-- Radio Group -->
-          <v-radio-group
-            v-else-if="field.type === 'radio'"
-            v-model="fieldValues[field.name]"
-            :label="field.label"
-            :required="field.required"
-            :disabled="field.disabled"
-            :error-messages="getFieldError(field.name)"
-            :hint="field.helpText"
-            persistent-hint
-            @update:model-value="handleFieldChange(field, $event)"
-            density="comfortable"
-          >
-            <v-radio
-              v-for="option in field.options"
-              :key="option.value"
-              :label="option.label"
-              :value="option.value"
-            />
-          </v-radio-group>
-          
-          <!-- Date Input -->
-          <v-text-field
-            v-else-if="field.type === 'date'"
-            v-model="fieldValues[field.name]"
-            :label="field.label"
-            type="date"
-            :required="field.required"
-            :disabled="field.disabled"
-            :readonly="field.readonly"
-            :min="field.min"
-            :max="field.max"
-            :error-messages="getFieldError(field.name)"
-            :hint="field.helpText"
-            persistent-hint
-            @input="handleFieldChange(field, $event.target ? $event.target.value : $event)"
-            @blur="handleFieldBlur(field, $event.target ? $event.target.value : fieldValues[field.name])"
-            variant="outlined"
-            density="comfortable"
-          >
-            <template v-if="field.required" #append-inner>
-              <span class="text-error">*</span>
-            </template>
-          </v-text-field>
-          
-          <!-- DateTime Input -->
-          <v-text-field
-            v-else-if="field.type === 'datetime'"
-            v-model="fieldValues[field.name]"
-            :label="field.label"
-            type="datetime-local"
-            :required="field.required"
-            :disabled="field.disabled"
-            :readonly="field.readonly"
-            :min="field.min"
-            :max="field.max"
-            :error-messages="getFieldError(field.name)"
-            :hint="field.helpText"
-            persistent-hint
-            @input="handleFieldChange(field, $event.target ? $event.target.value : $event)"
-            @blur="handleFieldBlur(field, $event.target ? $event.target.value : fieldValues[field.name])"
-            variant="outlined"
-            density="comfortable"
-          >
-            <template v-if="field.required" #append-inner>
-              <span class="text-error">*</span>
-            </template>
-          </v-text-field>
-          
-          <!-- File Input -->
-          <v-file-input
-            v-else-if="field.type === 'file'"
-            v-model="fieldValues[field.name]"
-            :label="field.label"
-            :required="field.required"
-            :disabled="field.disabled"
-            :accept="field.accept"
-            :multiple="field.multiple"
-            :error-messages="getFieldError(field.name)"
-            :hint="field.helpText"
-            persistent-hint
-            @update:model-value="handleFieldChange(field, $event)"
-            variant="outlined"
-            density="comfortable"
-            prepend-icon="mdi-paperclip"
-          >
-            <template v-if="field.required" #append-inner>
-              <span class="text-error">*</span>
-            </template>
-          </v-file-input>
-        </v-col>
-      </v-row>
-      
-      <!-- Submit/Action Buttons -->
-      <v-row v-if="showSubmitButton || showCancelButton" class="mt-4">
-        <v-col cols="12">
-          <div class="d-flex gap-2">
-            <v-btn
-              v-if="showSubmitButton"
-              type="submit"
-              color="primary"
-              :loading="isSubmitting"
-              variant="elevated"
-            >
-              {{ submitButtonText }}
-            </v-btn>
-            <v-btn
-              v-if="showCancelButton"
-              color="secondary"
-              variant="outlined"
-              @click="handleCancel"
-            >
-              {{ cancelButtonText }}
-            </v-btn>
-          </div>
-        </v-col>
-      </v-row>
-    </v-container>
-  </v-form>
+	<form @submit.prevent="handleSubmit" class="dynamic-form">
+		<div class="form-container">
+			<div class="form-row">
+				<div
+					v-for="field in fields"
+					:key="field.name"
+					:class="getFieldColumnClasses(field)"
+					class="form-field"
+				>
+					<!-- Text Input -->
+					<div v-if="field.type === 'text'" class="field-wrapper">
+						<label v-if="field.label" :for="field.name" class="field-label">
+							{{ field.label }}
+							<span v-if="field.required" class="required">*</span>
+						</label>
+						<InputText
+							:id="field.name"
+							v-model="fieldValues[field.name]"
+							:type="field.format || 'text'"
+							:placeholder="field.placeholder"
+							:disabled="field.disabled"
+							:readonly="field.readonly"
+							:invalid="!!getFieldError(field.name)"
+							:fluid="true"
+							@input="
+								handleFieldChange(
+									field,
+									$event.target ? $event.target.value : $event,
+								)
+							"
+							@blur="
+								handleFieldBlur(
+									field,
+									$event.target ? $event.target.value : fieldValues[field.name],
+								)
+							"
+						/>
+						<small v-if="field.helpText" class="field-help">{{
+							field.helpText
+						}}</small>
+						<Message
+							v-if="getFieldError(field.name)"
+							severity="error"
+							size="small"
+							variant="simple"
+						>
+							{{ getFieldError(field.name) }}
+						</Message>
+					</div>
+
+					<!-- Number Input -->
+					<div v-else-if="field.type === 'number'" class="field-wrapper">
+						<label v-if="field.label" :for="field.name" class="field-label">
+							{{ field.label }}
+							<span v-if="field.required" class="required">*</span>
+						</label>
+						<InputNumber
+							:id="field.name"
+							v-model="fieldValues[field.name]"
+							:placeholder="field.placeholder"
+							:disabled="field.disabled"
+							:readonly="field.readonly"
+							:min="field.min"
+							:max="field.max"
+							:step="field.step"
+							:invalid="!!getFieldError(field.name)"
+							:fluid="true"
+							@input="handleFieldChange(field, $event.value)"
+							@blur="handleFieldBlur(field, fieldValues[field.name])"
+						/>
+						<small v-if="field.helpText" class="field-help">{{
+							field.helpText
+						}}</small>
+						<Message
+							v-if="getFieldError(field.name)"
+							severity="error"
+							size="small"
+							variant="simple"
+						>
+							{{ getFieldError(field.name) }}
+						</Message>
+					</div>
+
+					<!-- Textarea -->
+					<div v-else-if="field.type === 'textarea'" class="field-wrapper">
+						<label v-if="field.label" :for="field.name" class="field-label">
+							{{ field.label }}
+							<span v-if="field.required" class="required">*</span>
+						</label>
+						<Textarea
+							:id="field.name"
+							v-model="fieldValues[field.name]"
+							:placeholder="field.placeholder"
+							:disabled="field.disabled"
+							:readonly="field.readonly"
+							:rows="field.rows || 3"
+							:invalid="!!getFieldError(field.name)"
+							:fluid="true"
+							:autoResize="field.autoResize !== false"
+							@input="
+								handleFieldChange(
+									field,
+									$event.target ? $event.target.value : $event,
+								)
+							"
+							@blur="
+								handleFieldBlur(
+									field,
+									$event.target ? $event.target.value : fieldValues[field.name],
+								)
+							"
+						/>
+						<small v-if="field.helpText" class="field-help">{{
+							field.helpText
+						}}</small>
+						<Message
+							v-if="getFieldError(field.name)"
+							severity="error"
+							size="small"
+							variant="simple"
+						>
+							{{ getFieldError(field.name) }}
+						</Message>
+					</div>
+
+					<!-- Select Dropdown -->
+					<div v-else-if="field.type === 'select'" class="field-wrapper">
+						<label v-if="field.label" :for="field.name" class="field-label">
+							{{ field.label }}
+							<span v-if="field.required" class="required">*</span>
+						</label>
+						<Select
+							:id="field.name"
+							v-model="fieldValues[field.name]"
+							:options="field.options"
+							:optionLabel="field.optionLabel || 'label'"
+							:optionValue="field.optionValue || 'value'"
+							:disabled="field.disabled"
+							:placeholder="field.placeholder"
+							:invalid="!!getFieldError(field.name)"
+							:fluid="true"
+							:filter="field.filter !== false"
+							:showClear="field.showClear !== false"
+							@update:model-value="handleFieldChange(field, $event)"
+							@blur="handleFieldBlur(field, fieldValues[field.name])"
+						/>
+						<small v-if="field.helpText" class="field-help">{{
+							field.helpText
+						}}</small>
+						<Message
+							v-if="getFieldError(field.name)"
+							severity="error"
+							size="small"
+							variant="simple"
+						>
+							{{ getFieldError(field.name) }}
+						</Message>
+					</div>
+
+					<!-- AutoComplete Input (NEW!) -->
+					<div v-else-if="field.type === 'autocomplete'" class="field-wrapper">
+						<label v-if="field.label" :for="field.name" class="field-label">
+							{{ field.label }}
+							<span v-if="field.required" class="required">*</span>
+						</label>
+						<AutoComplete
+							:id="field.name"
+							v-model="fieldValues[field.name]"
+							:suggestions="field.filteredOptions || field.options || []"
+							:option-label="field.optionLabel"
+							:disabled="field.disabled"
+							:placeholder="field.placeholder"
+							:invalid="!!getFieldError(field.name)"
+							:fluid="true"
+							:dropdown="field.dropdown !== false"
+							:multiple="field.multiple === true"
+							:force-selection="field.forceSelection === true"
+							dropdown-mode="blank"
+							@complete="handleAutocompleteSearch(field, $event)"
+							@update:model-value="handleFieldChange(field, $event)"
+							@blur="handleFieldBlur(field, fieldValues[field.name])"
+						/>
+						<small v-if="field.helpText" class="field-help">{{
+							field.helpText
+						}}</small>
+						<Message
+							v-if="getFieldError(field.name)"
+							severity="error"
+							size="small"
+							variant="simple"
+						>
+							{{ getFieldError(field.name) }}
+						</Message>
+					</div>
+
+					<!-- Checkbox -->
+					<div v-else-if="field.type === 'checkbox'" class="field-wrapper">
+						<div class="checkbox-container">
+							<Checkbox
+								:id="field.name"
+								v-model="fieldValues[field.name]"
+								:binary="true"
+								:disabled="field.disabled"
+								:invalid="!!getFieldError(field.name)"
+								@update:model-value="handleFieldChange(field, $event)"
+							/>
+							<label v-if="field.label" :for="field.name" class="checkbox-label">
+								{{ field.label }}
+								<span v-if="field.required" class="required">*</span>
+							</label>
+						</div>
+						<small v-if="field.helpText" class="field-help">{{
+							field.helpText
+						}}</small>
+						<Message
+							v-if="getFieldError(field.name)"
+							severity="error"
+							size="small"
+							variant="simple"
+						>
+							{{ getFieldError(field.name) }}
+						</Message>
+					</div>
+
+					<!-- Radio Group -->
+					<div v-else-if="field.type === 'radio'" class="field-wrapper">
+						<label v-if="field.label" class="field-label">
+							{{ field.label }}
+							<span v-if="field.required" class="required">*</span>
+						</label>
+						<div class="radio-group">
+							<div
+								v-for="option in field.options"
+								:key="option.value"
+								class="radio-option"
+							>
+								<RadioButton
+									:id="`${field.name}_${option.value}`"
+									v-model="fieldValues[field.name]"
+									:name="field.name"
+									:value="option.value"
+									:disabled="field.disabled"
+									:invalid="!!getFieldError(field.name)"
+									@update:model-value="handleFieldChange(field, $event)"
+								/>
+								<label :for="`${field.name}_${option.value}`" class="radio-label">
+									{{ option.label }}
+								</label>
+							</div>
+						</div>
+						<small v-if="field.helpText" class="field-help">{{
+							field.helpText
+						}}</small>
+						<Message
+							v-if="getFieldError(field.name)"
+							severity="error"
+							size="small"
+							variant="simple"
+						>
+							{{ getFieldError(field.name) }}
+						</Message>
+					</div>
+
+					<!-- Date Input -->
+					<div v-else-if="field.type === 'date'" class="field-wrapper">
+						<label v-if="field.label" :for="field.name" class="field-label">
+							{{ field.label }}
+							<span v-if="field.required" class="required">*</span>
+						</label>
+						<DatePicker
+							:id="field.name"
+							v-model="fieldValues[field.name]"
+							:placeholder="field.placeholder"
+							:disabled="field.disabled"
+							:readonly="field.readonly"
+							:minDate="field.minDate"
+							:maxDate="field.maxDate"
+							:invalid="!!getFieldError(field.name)"
+							:fluid="true"
+							:showIcon="true"
+							iconDisplay="input"
+							:dateFormat="field.dateFormat || 'dd/mm/yy'"
+							@update:model-value="handleFieldChange(field, $event)"
+							@blur="handleFieldBlur(field, fieldValues[field.name])"
+						/>
+						<small v-if="field.helpText" class="field-help">{{
+							field.helpText
+						}}</small>
+						<Message
+							v-if="getFieldError(field.name)"
+							severity="error"
+							size="small"
+							variant="simple"
+						>
+							{{ getFieldError(field.name) }}
+						</Message>
+					</div>
+
+					<!-- DateTime Input -->
+					<div v-else-if="field.type === 'datetime'" class="field-wrapper">
+						<label v-if="field.label" :for="field.name" class="field-label">
+							{{ field.label }}
+							<span v-if="field.required" class="required">*</span>
+						</label>
+						<DatePicker
+							:id="field.name"
+							v-model="fieldValues[field.name]"
+							:placeholder="field.placeholder"
+							:disabled="field.disabled"
+							:readonly="field.readonly"
+							:minDate="field.minDate"
+							:maxDate="field.maxDate"
+							:invalid="!!getFieldError(field.name)"
+							:fluid="true"
+							:showIcon="true"
+							iconDisplay="input"
+							:showTime="true"
+							:hourFormat="field.hourFormat || '24'"
+							:dateFormat="field.dateFormat || 'dd/mm/yy'"
+							@update:model-value="handleFieldChange(field, $event)"
+							@blur="handleFieldBlur(field, fieldValues[field.name])"
+						/>
+						<small v-if="field.helpText" class="field-help">{{
+							field.helpText
+						}}</small>
+						<Message
+							v-if="getFieldError(field.name)"
+							severity="error"
+							size="small"
+							variant="simple"
+						>
+							{{ getFieldError(field.name) }}
+						</Message>
+					</div>
+
+					<!-- File Input -->
+					<div v-else-if="field.type === 'file'" class="field-wrapper">
+						<label v-if="field.label" :for="field.name" class="field-label">
+							{{ field.label }}
+							<span v-if="field.required" class="required">*</span>
+						</label>
+						<FileUpload
+							:id="field.name"
+							v-model="fieldValues[field.name]"
+							mode="basic"
+							:disabled="field.disabled"
+							:accept="field.accept"
+							:multiple="field.multiple"
+							:invalidFileTypeMessage="`Invalid file type. Accepted types: ${field.accept || 'any'}`"
+							:maxFileSize="field.maxFileSize"
+							:invalidFileSizeMessage="`File size exceeds the limit of ${field.maxFileSize} bytes`"
+							:chooseLabel="field.chooseLabel || 'Choose File'"
+							:showUploadButton="false"
+							:showCancelButton="false"
+							auto
+							@upload="handleFieldChange(field, $event.files)"
+							@select="handleFieldChange(field, $event.files)"
+						/>
+						<small v-if="field.helpText" class="field-help">{{
+							field.helpText
+						}}</small>
+						<Message
+							v-if="getFieldError(field.name)"
+							severity="error"
+							size="small"
+							variant="simple"
+						>
+							{{ getFieldError(field.name) }}
+						</Message>
+					</div>
+				</div>
+			</div>
+
+			<!-- Submit/Action Buttons -->
+			<div v-if="showSubmitButton || showCancelButton" class="form-buttons">
+				<Button
+					v-if="showSubmitButton"
+					type="submit"
+					:label="submitButtonText"
+					:loading="isSubmitting"
+					severity="primary"
+				/>
+				<Button
+					v-if="showCancelButton"
+					type="button"
+					:label="cancelButtonText"
+					severity="secondary"
+					variant="outlined"
+					@click="handleCancel"
+				/>
+			</div>
+		</div>
+	</form>
 </template>
 
 <script setup>
-import { ref, reactive, computed, watch, defineEmits, defineProps } from 'vue';
+import { ref, reactive, computed, watch, defineEmits, defineProps } from "vue";
+// PrimeVue Components
+import InputText from "primevue/inputtext";
+import InputNumber from "primevue/inputnumber";
+import Textarea from "primevue/textarea";
+import Select from "primevue/select";
+import AutoComplete from "primevue/autocomplete";
+import Checkbox from "primevue/checkbox";
+import RadioButton from "primevue/radiobutton";
+import DatePicker from "primevue/datepicker";
+import FileUpload from "primevue/fileupload";
+import Button from "primevue/button";
+import Message from "primevue/message";
 
 const props = defineProps({
-  fields: {
-    type: Array,
-    required: true,
-  },
-  formData: {
-    type: Object,
-    required: false,
-    default: null
-  },
-  onChange: {
-    type: Function,
-    required: false,
-    default: null
-  },
-  onSubmit: {
-    type: Function,
-    required: false,
-    default: null
-  },
-  showSubmitButton: {
-    type: Boolean,
-    default: true
-  },
-  showCancelButton: {
-    type: Boolean,
-    default: false
-  },
-  submitButtonText: {
-    type: String,
-    default: 'Submit'
-  },
-  cancelButtonText: {
-    type: String,
-    default: 'Cancel'
-  },
-  validateOnChange: {
-    type: Boolean,
-    default: true
-  },
-  validateOnBlur: {
-    type: Boolean,
-    default: true
-  },
-  validateOnSubmit: {
-    type: Boolean,
-    default: true
-  }
+	fields: {
+		type: Array,
+		required: true,
+	},
+	formData: {
+		type: Object,
+		required: false,
+		default: null,
+	},
+	onChange: {
+		type: Function,
+		required: false,
+		default: null,
+	},
+	onSubmit: {
+		type: Function,
+		required: false,
+		default: null,
+	},
+	showSubmitButton: {
+		type: Boolean,
+		default: true,
+	},
+	showCancelButton: {
+		type: Boolean,
+		default: false,
+	},
+	submitButtonText: {
+		type: String,
+		default: "Submit",
+	},
+	cancelButtonText: {
+		type: String,
+		default: "Cancel",
+	},
+	validateOnChange: {
+		type: Boolean,
+		default: true,
+	},
+	validateOnBlur: {
+		type: Boolean,
+		default: true,
+	},
+	validateOnSubmit: {
+		type: Boolean,
+		default: true,
+	},
 });
 
-const emit = defineEmits(['update:formData', 'submit', 'cancel', 'change', 'blur']);
+const emit = defineEmits(["update:formData", "submit", "cancel", "change", "blur"]);
 
 // Internal form state (used when no external formData is provided)
 const internalFormData = reactive({});
@@ -303,306 +468,514 @@ const isSubmitting = ref(false);
 
 // Computed property for v-model binding
 const fieldValues = computed({
-  get() {
-    return props.formData || internalFormData;
-  },
-  set(newValues) {
-    if (props.formData) {
-      Object.assign(props.formData, newValues);
-      emit('update:formData', props.formData);
-    } else {
-      Object.assign(internalFormData, newValues);
-    }
-  }
+	get() {
+		return props.formData || internalFormData;
+	},
+	set(newValues) {
+		if (props.formData) {
+			Object.assign(props.formData, newValues);
+			emit("update:formData", props.formData);
+		} else {
+			Object.assign(internalFormData, newValues);
+		}
+	},
 });
 
 // Initialize form data
 const initializeFormData = () => {
-  props.fields.forEach(field => {
-    if (props.formData) {
-      // If external formData is provided, ensure all fields exist
-      if (!(field.name in props.formData)) {
-        props.formData[field.name] = getDefaultValue(field);
-      }
-    } else {
-      // Use internal form data
-      internalFormData[field.name] = getDefaultValue(field);
-    }
-  });
+	props.fields.forEach((field) => {
+		if (props.formData) {
+			// If external formData is provided, ensure all fields exist
+			if (!(field.name in props.formData)) {
+				props.formData[field.name] = getDefaultValue(field);
+			}
+		} else {
+			// Use internal form data
+			internalFormData[field.name] = getDefaultValue(field);
+		}
+	});
 };
 
 // Get default value for a field based on its type
 const getDefaultValue = (field) => {
-  switch (field.type) {
-    case 'checkbox':
-      return field.defaultValue !== undefined ? field.defaultValue : false;
-    case 'number':
-      return field.defaultValue !== undefined ? field.defaultValue : '';
-    case 'select':
-    case 'radio':
-      return field.defaultValue !== undefined ? field.defaultValue : '';
-    case 'file':
-      return null;
-    default:
-      return field.defaultValue !== undefined ? field.defaultValue : '';
-  }
+	switch (field.type) {
+		case "checkbox":
+			return field.defaultValue !== undefined ? field.defaultValue : false;
+		case "number":
+			return field.defaultValue !== undefined ? field.defaultValue : "";
+		case "select":
+		case "radio":
+			return field.defaultValue !== undefined ? field.defaultValue : "";
+		case "file":
+			return null;
+		default:
+			return field.defaultValue !== undefined ? field.defaultValue : "";
+	}
 };
 
 // Get the current value for a field
 const getFieldValue = (fieldName) => {
-  return fieldValues.value[fieldName];
+	return fieldValues.value[fieldName];
 };
 
 // Get error for a field
 const getFieldError = (fieldName) => {
-  return formErrors[fieldName];
+	return formErrors[fieldName];
 };
 
 // Validate a single field
 const validateField = (field, value) => {
-  const errors = [];
-  
-  // Required validation (only check if field is required and value is empty)
-  if (field.required && (value === '' || value === null || value === undefined)) {
-    errors.push(`${field.label} is required`);
-    return errors[0]; // Return early if required field is empty
-  }
-  
-  // Skip other validations if value is empty and field is not required
-  if (!value && !field.required) {
-    return null;
-  }
-  
-  // Email validation (more comprehensive)
-  if (field.format === 'email' && value) {
-    const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
-    if (!emailRegex.test(value)) {
-      errors.push('Please enter a valid email address');
-    }
-  }
-  
-  // Phone validation (for tel format)
-  if (field.format === 'tel' && value) {
-    // Allow various phone formats
-    const phoneRegex = /^[\+]?[1-9][\d]{0,15}$|^\(?[0-9]{3}\)?[-.\s]?[0-9]{3}[-.\s]?[0-9]{4}$|^[0-9]{10}$/;
-    if (!phoneRegex.test(value.replace(/[\s\-\(\)\.]/g, ''))) {
-      // Use custom validation if provided, otherwise use default
-      if (!field.validate) {
-        errors.push('Please enter a valid phone number');
-      }
-    }
-  }
-  
-  // URL validation
-  if (field.format === 'url' && value) {
-    try {
-      new URL(value);
-    } catch {
-      errors.push('Please enter a valid URL');
-    }
-  }
-  
-  // Min/Max length validation for text
-  if ((field.type === 'text' || field.type === 'textarea') && value) {
-    if (field.minLength && value.length < field.minLength) {
-      errors.push(`${field.label} must be at least ${field.minLength} characters`);
-    }
-    if (field.maxLength && value.length > field.maxLength) {
-      errors.push(`${field.label} must not exceed ${field.maxLength} characters`);
-    }
-  }
-  
-  // Min/Max for numbers
-  if (field.type === 'number' && value !== '' && value !== null && value !== undefined) {
-    const numValue = parseFloat(value);
-    if (!isNaN(numValue)) {
-      if (field.min !== undefined && numValue < field.min) {
-        errors.push(`Value must be at least ${field.min}`);
-      }
-      if (field.max !== undefined && numValue > field.max) {
-        errors.push(`Value must not exceed ${field.max}`);
-      }
-    } else {
-      errors.push('Please enter a valid number');
-    }
-  }
-  
-  // Custom validation (always runs last)
-  if (field.validate && typeof field.validate === 'function') {
-    const customError = field.validate(value);
-    if (customError) {
-      errors.push(customError);
-    }
-  }
-  
-  return errors.length > 0 ? errors[0] : null;
+	const errors = [];
+
+	// Required validation (only check if field is required and value is empty)
+	if (field.required && (value === "" || value === null || value === undefined)) {
+		errors.push(`${field.label} is required`);
+		return errors[0]; // Return early if required field is empty
+	}
+
+	// Skip other validations if value is empty and field is not required
+	if (!value && !field.required) {
+		return null;
+	}
+
+	// Email validation (more comprehensive)
+	if (field.format === "email" && value) {
+		const emailRegex =
+			/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+		if (!emailRegex.test(value)) {
+			errors.push("Please enter a valid email address");
+		}
+	}
+
+	// Phone validation (for tel format)
+	if (field.format === "tel" && value) {
+		// Allow various phone formats
+		const phoneRegex =
+			/^[\+]?[1-9][\d]{0,15}$|^\(?[0-9]{3}\)?[-.\s]?[0-9]{3}[-.\s]?[0-9]{4}$|^[0-9]{10}$/;
+		if (!phoneRegex.test(value.replace(/[\s\-\(\)\.]/g, ""))) {
+			// Use custom validation if provided, otherwise use default
+			if (!field.validate) {
+				errors.push("Please enter a valid phone number");
+			}
+		}
+	}
+
+	// URL validation
+	if (field.format === "url" && value) {
+		try {
+			new URL(value);
+		} catch {
+			errors.push("Please enter a valid URL");
+		}
+	}
+
+	// Min/Max length validation for text
+	if ((field.type === "text" || field.type === "textarea") && value) {
+		if (field.minLength && value.length < field.minLength) {
+			errors.push(`${field.label} must be at least ${field.minLength} characters`);
+		}
+		if (field.maxLength && value.length > field.maxLength) {
+			errors.push(`${field.label} must not exceed ${field.maxLength} characters`);
+		}
+	}
+
+	// Min/Max for numbers
+	if (field.type === "number" && value !== "" && value !== null && value !== undefined) {
+		const numValue = parseFloat(value);
+		if (!isNaN(numValue)) {
+			if (field.min !== undefined && numValue < field.min) {
+				errors.push(`Value must be at least ${field.min}`);
+			}
+			if (field.max !== undefined && numValue > field.max) {
+				errors.push(`Value must not exceed ${field.max}`);
+			}
+		} else {
+			errors.push("Please enter a valid number");
+		}
+	}
+
+	// Custom validation (always runs last)
+	if (field.validate && typeof field.validate === "function") {
+		const customError = field.validate(value);
+		if (customError) {
+			errors.push(customError);
+		}
+	}
+
+	return errors.length > 0 ? errors[0] : null;
 };
 
 // Handle field value changes
 const handleFieldChange = (field, value) => {
-  // Update form data
-  if (props.formData) {
-    props.formData[field.name] = value;
-    emit('update:formData', props.formData);
-  } else {
-    internalFormData[field.name] = value;
-  }
-  
-  // Clear previous error for this field
-  delete formErrors[field.name];
-  
-  // Validate field if enabled
-  if (props.validateOnChange) {
-    const error = validateField(field, value);
-    if (error) {
-      formErrors[field.name] = error;
-    }
-  }
-  
-  // Call custom onChange if provided on the field
-  if (field.onChangeOverride && typeof field.onChangeOverride === 'function') {
-    field.onChangeOverride(value, field.name, getCurrentFormData());
-  }
-  // Call global onChange if provided
-  else if (props.onChange && typeof props.onChange === 'function') {
-    props.onChange(field.name, value, getCurrentFormData());
-  }
-  
-  // Emit change event
-  emit('change', {
-    fieldName: field.name,
-    value: value,
-    formData: getCurrentFormData()
-  });
+	// Update form data
+	if (props.formData) {
+		props.formData[field.name] = value;
+		emit("update:formData", props.formData);
+	} else {
+		internalFormData[field.name] = value;
+	}
+
+	// Clear previous error for this field
+	delete formErrors[field.name];
+
+	// Validate field if enabled
+	if (props.validateOnChange) {
+		const error = validateField(field, value);
+		if (error) {
+			formErrors[field.name] = error;
+		}
+	}
+
+	// Call custom onChange if provided on the field
+	if (field.onChangeOverride && typeof field.onChangeOverride === "function") {
+		field.onChangeOverride(value, field.name, getCurrentFormData());
+	}
+	// Call global onChange if provided
+	else if (props.onChange && typeof props.onChange === "function") {
+		props.onChange(field.name, value, getCurrentFormData());
+	}
+
+	// Emit change event
+	emit("change", {
+		fieldName: field.name,
+		value: value,
+		formData: getCurrentFormData(),
+	});
 };
 
 // Handle field blur events
 const handleFieldBlur = (field, value) => {
-  // Validate field on blur if enabled
-  if (props.validateOnBlur) {
-    const error = validateField(field, value);
-    if (error) {
-      formErrors[field.name] = error;
-    } else {
-      // Clear error if validation passes
-      delete formErrors[field.name];
-    }
-  }
-  
-  // Emit blur event
-  emit('blur', {
-    fieldName: field.name,
-    value: value,
-    formData: getCurrentFormData()
-  });
+	// Validate field on blur if enabled
+	if (props.validateOnBlur) {
+		const error = validateField(field, value);
+		if (error) {
+			formErrors[field.name] = error;
+		} else {
+			// Clear error if validation passes
+			delete formErrors[field.name];
+		}
+	}
+
+	// Emit blur event
+	emit("blur", {
+		fieldName: field.name,
+		value: value,
+		formData: getCurrentFormData(),
+	});
 };
 
 // Get current form data (either external or internal)
 const getCurrentFormData = () => {
-  return props.formData || internalFormData;
+	return props.formData || internalFormData;
+};
+
+// Handle autocomplete search
+const handleAutocompleteSearch = (field, event) => {
+	if (field.onSearch && typeof field.onSearch === "function") {
+		// Custom search function provided
+		field.onSearch(event.query, (results) => {
+			field.filteredOptions = results;
+		});
+	} else if (field.options) {
+		// Filter existing options
+		const query = event.query.toLowerCase();
+		field.filteredOptions = field.options.filter((option) => {
+			const label =
+				typeof option === "string" ? option : option[field.optionLabel || "label"];
+			return label && label.toLowerCase().includes(query);
+		});
+	} else {
+		field.filteredOptions = [];
+	}
+};
+
+// Get field column classes for responsive layout
+const getFieldColumnClasses = (field) => {
+	const classes = [];
+
+	// Default column sizes based on field.cols or defaults
+	const cols = field.cols || 12;
+	const sm = field.sm || 12;
+	const md = field.md || 6;
+	const lg = field.lg || 6;
+
+	// Convert to CSS Grid or Flexbox classes
+	// This is a basic implementation - you might want to use a CSS framework
+	if (cols === 12) classes.push("col-full");
+	else if (cols === 6) classes.push("col-half");
+	else if (cols === 4) classes.push("col-third");
+	else if (cols === 3) classes.push("col-quarter");
+	else classes.push(`col-${cols}`);
+
+	return classes.join(" ");
 };
 
 // Validate entire form
 const validateForm = () => {
-  const errors = {};
-  let isValid = true;
-  
-  props.fields.forEach(field => {
-    const value = getFieldValue(field.name);
-    const error = validateField(field, value);
-    if (error) {
-      errors[field.name] = error;
-      isValid = false;
-    }
-  });
-  
-  Object.assign(formErrors, errors);
-  return isValid;
+	const errors = {};
+	let isValid = true;
+
+	props.fields.forEach((field) => {
+		const value = getFieldValue(field.name);
+		const error = validateField(field, value);
+		if (error) {
+			errors[field.name] = error;
+			isValid = false;
+		}
+	});
+
+	Object.assign(formErrors, errors);
+	return isValid;
 };
 
 // Handle form submission
 const handleSubmit = async () => {
-  // Always validate on submit if enabled
-  if (props.validateOnSubmit && !validateForm()) {
-    console.warn('Form validation failed on submit');
-    return;
-  }
-  
-  isSubmitting.value = true;
-  
-  try {
-    const formData = getCurrentFormData();
-    
-    if (props.onSubmit && typeof props.onSubmit === 'function') {
-      await props.onSubmit(formData);
-    }
-    
-    emit('submit', formData);
-  } catch (error) {
-    console.error('Form submission error:', error);
-  } finally {
-    isSubmitting.value = false;
-  }
+	// Always validate on submit if enabled
+	if (props.validateOnSubmit && !validateForm()) {
+		console.warn("Form validation failed on submit");
+		return;
+	}
+
+	isSubmitting.value = true;
+
+	try {
+		const formData = getCurrentFormData();
+
+		if (props.onSubmit && typeof props.onSubmit === "function") {
+			await props.onSubmit(formData);
+		}
+
+		emit("submit", formData);
+	} catch (error) {
+		console.error("Form submission error:", error);
+	} finally {
+		isSubmitting.value = false;
+	}
 };
 
 // Handle cancel action
 const handleCancel = () => {
-  emit('cancel');
+	emit("cancel");
 };
 
 // Initialize form data when component mounts
 initializeFormData();
 
 // Watch for changes in fields to reinitialize
-watch(() => props.fields, () => {
-  initializeFormData();
-}, { deep: true });
+watch(
+	() => props.fields,
+	() => {
+		initializeFormData();
+	},
+	{ deep: true },
+);
 
 // Clear all form errors
 const clearAllErrors = () => {
-  Object.keys(formErrors).forEach(key => delete formErrors[key]);
+	Object.keys(formErrors).forEach((key) => delete formErrors[key]);
 };
 
 // Expose methods for parent component
 defineExpose({
-  validateForm,
-  getCurrentFormData,
-  resetForm: () => {
-    initializeFormData();
-    clearAllErrors();
-  },
-  setFieldError: (fieldName, error) => {
-    formErrors[fieldName] = error;
-  },
-  clearFieldError: (fieldName) => {
-    delete formErrors[fieldName];
-  },
-  clearAllErrors,
-  // Manual validation trigger
-  validateField: (fieldName) => {
-    const field = props.fields.find(f => f.name === fieldName);
-    if (field) {
-      const value = getFieldValue(fieldName);
-      const error = validateField(field, value);
-      if (error) {
-        formErrors[fieldName] = error;
-      } else {
-        delete formErrors[fieldName];
-      }
-      return !error;
-    }
-    return true;
-  }
+	validateForm,
+	getCurrentFormData,
+	resetForm: () => {
+		initializeFormData();
+		clearAllErrors();
+	},
+	setFieldError: (fieldName, error) => {
+		formErrors[fieldName] = error;
+	},
+	clearFieldError: (fieldName) => {
+		delete formErrors[fieldName];
+	},
+	clearAllErrors,
+	// Manual validation trigger
+	validateField: (fieldName) => {
+		const field = props.fields.find((f) => f.name === fieldName);
+		if (field) {
+			const value = getFieldValue(fieldName);
+			const error = validateField(field, value);
+			if (error) {
+				formErrors[fieldName] = error;
+			} else {
+				delete formErrors[fieldName];
+			}
+			return !error;
+		}
+		return true;
+	},
 });
 </script>
 
 <style scoped>
 .dynamic-form {
-  max-width: 1200px;
-  margin: 0 auto;
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 1rem;
 }
 
-.gap-2 {
-  gap: 8px;
+.form-container {
+	width: 100%;
 }
-</style>
\ No newline at end of file
+
+.form-row {
+	display: grid;
+	grid-template-columns: repeat(12, 1fr);
+	gap: 1rem;
+	margin-bottom: 1rem;
+}
+
+.form-field {
+	display: flex;
+	flex-direction: column;
+}
+
+/* Responsive column classes */
+.col-full {
+	grid-column: span 12;
+}
+.col-half {
+	grid-column: span 6;
+}
+.col-third {
+	grid-column: span 4;
+}
+.col-quarter {
+	grid-column: span 3;
+}
+.col-1 {
+	grid-column: span 1;
+}
+.col-2 {
+	grid-column: span 2;
+}
+.col-3 {
+	grid-column: span 3;
+}
+.col-4 {
+	grid-column: span 4;
+}
+.col-5 {
+	grid-column: span 5;
+}
+.col-6 {
+	grid-column: span 6;
+}
+.col-7 {
+	grid-column: span 7;
+}
+.col-8 {
+	grid-column: span 8;
+}
+.col-9 {
+	grid-column: span 9;
+}
+.col-10 {
+	grid-column: span 10;
+}
+.col-11 {
+	grid-column: span 11;
+}
+.col-12 {
+	grid-column: span 12;
+}
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+	.form-row {
+		grid-template-columns: 1fr;
+	}
+
+	.form-field {
+		grid-column: span 1 !important;
+	}
+}
+
+.field-wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	margin-bottom: 1rem;
+}
+
+.field-label {
+	font-weight: 600;
+	font-size: 0.875rem;
+	color: var(--text-color, #374151);
+	margin-bottom: 0.25rem;
+}
+
+.field-help {
+	font-size: 0.75rem;
+	color: var(--text-color-secondary, #6b7280);
+	margin-top: 0.25rem;
+}
+
+.required {
+	color: var(--red-500, #ef4444);
+	margin-left: 0.125rem;
+}
+
+/* Checkbox specific styles */
+.checkbox-container {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.checkbox-label {
+	font-weight: 500;
+	font-size: 0.875rem;
+	color: var(--text-color, #374151);
+	cursor: pointer;
+}
+
+/* Radio group styles */
+.radio-group {
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+}
+
+.radio-option {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.radio-label {
+	font-weight: 500;
+	font-size: 0.875rem;
+	color: var(--text-color, #374151);
+	cursor: pointer;
+}
+
+/* Form buttons */
+.form-buttons {
+	display: flex;
+	gap: 0.75rem;
+	margin-top: 2rem;
+	justify-content: flex-start;
+}
+
+/* Tablet responsive */
+@media (max-width: 1024px) {
+	.col-half,
+	.col-third,
+	.col-quarter {
+		grid-column: span 6;
+	}
+}
+
+/* Large mobile responsive */
+@media (max-width: 640px) {
+	.form-buttons {
+		flex-direction: column;
+	}
+
+	.form-buttons :deep(.p-button) {
+		width: 100%;
+	}
+}
+</style>
diff --git a/frontend/src/components/modals/CreatClientModal.vue b/frontend/src/components/modals/CreatClientModal.vue
index 2f00b6a..aa05192 100644
--- a/frontend/src/components/modals/CreatClientModal.vue
+++ b/frontend/src/components/modals/CreatClientModal.vue
@@ -1,413 +1,473 @@
 <template>
-  <Modal
-    :visible="isVisible"
-    :options="modalOptions"
-    @update:visible="handleVisibilityChange"
-    @close="handleClose"
-  >
-    <template #title>
-      Create New Client
-    </template>
-    
-    <!-- Status Message -->
-    <div v-if="statusMessage" class="status-message" :class="`status-${statusType}`">
-      <v-icon 
-        :icon="statusType === 'warning' ? 'mdi-alert' : statusType === 'error' ? 'mdi-alert-circle' : 'mdi-information'"
-        size="small"
-        class="mr-2"
-      />
-      {{ statusMessage }}
-    </div>
-    
-    <Form
-      :fields="formFields"
-      :form-data="formData"
-      :on-submit="handleSubmit"
-      :show-cancel-button="true"
-      :validate-on-change="false"
-      :validate-on-blur="true"
-      :validate-on-submit="true"
-      submit-button-text="Create Client"
-      cancel-button-text="Cancel"
-      @submit="handleSubmit"
-      @cancel="handleCancel"
-      @change="handleFieldChange"
-      @blur="handleFieldBlur"
-    />
-  </Modal>
+	<Modal
+		:visible="isVisible"
+		:options="modalOptions"
+		@update:visible="handleVisibilityChange"
+		@close="handleClose"
+	>
+		<template #title> Create New Client </template>
+
+		<!-- Status Message -->
+		<div v-if="statusMessage" class="status-message" :class="`status-${statusType}`">
+			<i :class="getStatusIcon(statusType)" class="status-icon"></i>
+			{{ statusMessage }}
+		</div>
+
+		<Form
+			:fields="formFields"
+			:form-data="formData"
+			:show-cancel-button="true"
+			:validate-on-change="false"
+			:validate-on-blur="true"
+			:validate-on-submit="true"
+			submit-button-text="Create Client"
+			cancel-button-text="Cancel"
+			@submit="handleSubmit"
+			@cancel="handleCancel"
+		/>
+	</Modal>
 </template>
 
 <script setup>
-import { ref, reactive, computed, watch } from 'vue'
-import { useModalStore } from '@/stores/modal'
-import Modal from '@/components/common/Modal.vue'
-import Form from '@/components/common/Form.vue'
-import Api from '@/api'
+import { ref, reactive, computed, watch, watchEffect } from "vue";
+import { useModalStore } from "@/stores/modal";
+import Modal from "@/components/common/Modal.vue";
+import Form from "@/components/common/Form.vue";
+import Api from "@/api";
+import DataUtils from "../../utils";
 
-const modalStore = useModalStore()
+const modalStore = useModalStore();
 
 // Modal visibility computed property
-const isVisible = computed(() => modalStore.isModalOpen('createClient'))
-
+const isVisible = computed(() => modalStore.isModalOpen("createClient"));
+const customerNames = ref([]);
 // Form data
 const formData = reactive({
-  name: '',
-  address: '',
-  phone: '',
-  email: '',
-  zipcode: '',
-  city: '',
-  state: ''
-})
+	name: "",
+	address: "",
+	phone: "",
+	email: "",
+	zipcode: "",
+	city: "",
+	state: "",
+});
 
 // Available cities for the selected zipcode
-const availableCities = ref([])
+const availableCities = ref([]);
 
 // Loading state for zipcode lookup
-const isLoadingZipcode = ref(false)
+const isLoadingZipcode = ref(false);
 
 // Status message for user feedback
-const statusMessage = ref('')
-const statusType = ref('info') // 'info', 'warning', 'error', 'success'
-
-// US State abbreviations for validation
-const US_STATES = [
-  'AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'FL', 'GA',
-  'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD',
-  'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ',
-  'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC',
-  'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY',
-  'DC' // District of Columbia
-]
+const statusMessage = ref("");
+const statusType = ref("info"); // 'info', 'warning', 'error', 'success'
 
 // Modal configuration
 const modalOptions = {
-  maxWidth: '600px',
-  persistent: false,
-  showActions: false,
-  title: 'Create New Client',
-  overlayColor: 'rgb(59, 130, 246)', // Blue background
-  overlayOpacity: 0.8,
-  cardClass: 'create-client-modal',
-  closeOnOutsideClick: true,
-  closeOnEscape: true
-}
+	maxWidth: "600px",
+	persistent: false,
+	showActions: false,
+	title: "Create New Client",
+	overlayColor: "rgb(59, 130, 246)", // Blue background
+	overlayOpacity: 0.8,
+	cardClass: "create-client-modal",
+	closeOnOutsideClick: true,
+	closeOnEscape: true,
+};
 
 // Form field definitions
 const formFields = computed(() => [
-  {
-    name: 'name',
-    label: 'Client Name',
-    type: 'text',
-    required: true,
-    placeholder: 'Enter client name',
-    cols: 12,
-    md: 12
-  },
-  {
-    name: 'address',
-    label: 'Address',
-    type: 'text',
-    required: true,
-    placeholder: 'Enter street address',
-    cols: 12,
-    md: 12
-  },
-  {
-    name: 'phone',
-    label: 'Phone Number',
-    type: 'text',
-    required: true,
-    placeholder: 'Enter phone number',
-    format: 'tel',
-    cols: 12,
-    md: 6,
-    validate: (value) => {
-      if (value && !/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/.test(value)) {
-        return 'Please enter a valid phone number'
-      }
-      return null
-    }
-  },
-  {
-    name: 'email',
-    label: 'Email Address',
-    type: 'text',
-    required: true,
-    placeholder: 'Enter email address',
-    format: 'email',
-    cols: 12,
-    md: 6
-  },
-  {
-    name: 'zipcode',
-    label: 'Zip Code',
-    type: 'text',
-    required: true,
-    placeholder: 'Enter zip code',
-    cols: 12,
-    md: 4,
-    onChangeOverride: handleZipcodeChange,
-    validate: (value) => {
-      if (value && !/^\d{5}(-\d{4})?$/.test(value)) {
-        return 'Please enter a valid zip code'
-      }
-      return null
-    }
-  },
-  {
-    name: 'city',
-    label: 'City',
-    type: availableCities.value.length > 0 ? 'select' : 'text',
-    required: true,
-    disabled: false,
-    placeholder: availableCities.value.length > 0 ? 'Select city' : 'Enter city name',
-    options: availableCities.value.map(place => ({
-      label: place['place name'],
-      value: place['place name']
-    })),
-    cols: 12,
-    md: 4,
-    helpText: isLoadingZipcode.value 
-      ? 'Loading cities...' 
-      : availableCities.value.length > 0 
-        ? 'Select from available cities'
-        : 'Enter city manually (auto-lookup unavailable)'
-  },
-  {
-    name: 'state',
-    label: 'State',
-    type: 'text',
-    required: true,
-    disabled: availableCities.value.length > 0,
-    placeholder: availableCities.value.length > 0 ? 'Auto-populated' : 'Enter state (e.g., CA, TX, NY)',
-    cols: 12,
-    md: 4,
-    helpText: availableCities.value.length > 0 
-      ? 'Auto-populated from zip code'
-      : 'Enter state abbreviation manually',
-    validate: (value) => {
-      // Only validate manually entered states (when API lookup failed)
-      if (availableCities.value.length === 0 && value) {
-        const upperValue = value.toUpperCase()
-        if (!US_STATES.includes(upperValue)) {
-          return 'Please enter a valid US state abbreviation (e.g., CA, TX, NY)'
-        }
-        // Auto-correct to uppercase
-        if (value !== upperValue) {
-          formData.state = upperValue
-        }
-      }
-      return null
-    }
-  }
-])
+	{
+		name: "name",
+		label: "Client Name",
+		type: "autocomplete", // Changed from 'select' to 'autocomplete'
+		required: true,
+		placeholder: "Type or select client name",
+		cols: 12,
+		options: customerNames.value, // Direct array of strings
+		forceSelection: false, // Allow custom entries not in the list
+		dropdown: true,
+		// For string arrays, don't set optionLabel at all
+		helpText: "Select an existing client or enter a new client name",
+		// Let the Form component handle filtering automatically
+	},
+	{
+		name: "address",
+		label: "Address",
+		type: "text",
+		required: true,
+		placeholder: "Enter street address",
+		cols: 12,
+		md: 12,
+	},
+	{
+		name: "phone",
+		label: "Phone Number",
+		type: "text",
+		required: true,
+		placeholder: "Enter phone number",
+		format: "tel",
+		cols: 12,
+		md: 6,
+		validate: (value) => {
+			if (value && !/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/.test(value)) {
+				return "Please enter a valid phone number";
+			}
+			return null;
+		},
+	},
+	{
+		name: "email",
+		label: "Email Address",
+		type: "text",
+		required: true,
+		placeholder: "Enter email address",
+		format: "email",
+		cols: 12,
+		md: 6,
+	},
+	{
+		name: "zipcode",
+		label: "Zip Code",
+		type: "text",
+		required: true,
+		placeholder: "Enter zip code",
+		cols: 12,
+		md: 4,
+		onChangeOverride: handleZipcodeChange,
+		validate: (value) => {
+			if (value && !/^\d{5}(-\d{4})?$/.test(value)) {
+				return "Please enter a valid zip code";
+			}
+			return null;
+		},
+	},
+	{
+		name: "city",
+		label: "City",
+		type: availableCities.value.length > 0 ? "select" : "text",
+		required: true,
+		disabled: false,
+		placeholder: availableCities.value.length > 0 ? "Select city" : "Enter city name",
+		options: availableCities.value.map((place) => ({
+			label: place["place name"],
+			value: place["place name"],
+		})),
+		cols: 12,
+		md: 4,
+		helpText: isLoadingZipcode.value
+			? "Loading cities..."
+			: availableCities.value.length > 0
+				? "Select from available cities"
+				: "Enter city manually (auto-lookup unavailable)",
+	},
+	{
+		name: "state",
+		label: "State",
+		type: "select",
+		options: DataUtils.US_STATES.map((stateAbbr) => ({
+			label: stateAbbr,
+			value: stateAbbr,
+		})),
+		required: true,
+		disabled: availableCities.value.length > 0,
+		placeholder:
+			availableCities.value.length > 0 ? "Auto-populated" : "Enter state (e.g., CA, TX, NY)",
+		cols: 12,
+		md: 4,
+		helpText:
+			availableCities.value.length > 0
+				? "Auto-populated from zip code"
+				: "Enter state abbreviation manually",
+		validate: (value) => {
+			// Only validate manually entered states (when API lookup failed)
+			if (availableCities.value.length === 0 && value) {
+				const upperValue = value.toUpperCase();
+				if (!DataUtils.US_STATES.includes(upperValue)) {
+					return "Please enter a valid US state abbreviation (e.g., CA, TX, NY)";
+				}
+			}
+			return null;
+		},
+	},
+]);
 
 // Handle zipcode change and API lookup
-async function handleZipcodeChange(value, fieldName, formData) {
-  if (fieldName === 'zipcode' && value && value.length >= 5) {
-    // Only process if it's a valid zipcode format
-    const zipcode = value.replace(/\D/g, '').substring(0, 5)
-    
-    if (zipcode.length === 5) {
-      isLoadingZipcode.value = true
-      
-      try {
-        const places = await Api.getCityStateByZip(zipcode)
-        
-        if (places && places.length > 0) {
-          availableCities.value = places
-          
-          // Auto-populate state from first result
-          formData.state = places[0].state
-          
-          // If only one city, auto-select it
-          if (places.length === 1) {
-            formData.city = places[0]['place name']
-            showStatusMessage(`Location found: ${places[0]['place name']}, ${places[0].state}`, 'success')
-          } else {
-            // Clear city selection if multiple cities
-            formData.city = ''
-            showStatusMessage(`Found ${places.length} cities for this zip code. Please select one.`, 'info')
-          }
-        } else {
-          // No results found - enable manual entry
-          handleApiFailure(formData, 'No location data found for this zip code')
-        }
-      } catch (error) {
-        console.error('Error fetching city/state data:', error)
-        
-        // Check if it's a network/CORS error
-        if (error.code === 'ERR_NETWORK' || error.message.includes('Network Error')) {
-          handleApiFailure(formData, 'Unable to fetch location data. Please enter city and state manually.')
-        } else {
-          handleApiFailure(formData, 'Location lookup failed. Please enter city and state manually.')
-        }
-      } finally {
-        isLoadingZipcode.value = false
-      }
-    }
-  }
+async function handleZipcodeChange(value, fieldName, currentFormData) {
+	if (fieldName === "zipcode" && value && value.length >= 5) {
+		// Only process if it's a valid zipcode format
+		const zipcode = value.replace(/\D/g, "").substring(0, 5);
+
+		if (zipcode.length === 5) {
+			isLoadingZipcode.value = true;
+
+			try {
+				const places = await Api.getCityStateByZip(zipcode);
+				console.log("API response for zipcode", zipcode, ":", places);
+
+				if (places && places.length > 0) {
+					availableCities.value = places;
+
+					// Update the reactive formData directly to ensure reactivity
+					// Use "state abbreviation" instead of "state" for proper abbreviation format
+					const stateValue = places[0]["state abbreviation"] || places[0].state;
+					console.log("Setting state to:", stateValue, "from place object:", places[0]);
+					formData.state = stateValue;
+
+					// If only one city, auto-select it
+					if (places.length === 1) {
+						formData.city = places[0]["place name"];
+						showStatusMessage(
+							`Location found: ${places[0]["place name"]}, ${places[0]["state abbreviation"] || places[0].state}`,
+							"success",
+						);
+					} else {
+						// Clear city selection if multiple cities
+						formData.city = "";
+						showStatusMessage(
+							`Found ${places.length} cities for this zip code. Please select one.`,
+							"info",
+						);
+					}
+				} else {
+					// No results found - enable manual entry
+					handleApiFailure("No location data found for this zip code");
+				}
+			} catch (error) {
+				console.error("Error fetching city/state data:", error);
+
+				// Check if it's a network/CORS error
+				if (error.code === "ERR_NETWORK" || error.message.includes("Network Error")) {
+					handleApiFailure(
+						"Unable to fetch location data. Please enter city and state manually.",
+					);
+				} else {
+					handleApiFailure(
+						"Location lookup failed. Please enter city and state manually.",
+					);
+				}
+			} finally {
+				isLoadingZipcode.value = false;
+			}
+		}
+	}
 }
 
-// Handle API failure by enabling manual entry  
-function handleApiFailure(formData, message) {
-  console.warn('Zipcode API failed:', message)
-  
-  // Clear existing data
-  availableCities.value = []
-  formData.city = ''
-  formData.state = ''
-  
-  // Show user-friendly message
-  showStatusMessage(message, 'warning')
+// Handle API failure by enabling manual entry
+function handleApiFailure(message) {
+	console.warn("Zipcode API failed:", message);
+
+	// Clear existing data
+	availableCities.value = [];
+	formData.city = "";
+	formData.state = "";
+
+	// Show user-friendly message
+	showStatusMessage(message, "warning");
 }
 
 // Show status message to user
-function showStatusMessage(message, type = 'info') {
-  statusMessage.value = message
-  statusType.value = type
-  
-  // Auto-clear message after 5 seconds
-  setTimeout(() => {
-    statusMessage.value = ''
-  }, 5000)
+function showStatusMessage(message, type = "info") {
+	statusMessage.value = message;
+	statusType.value = type;
+
+	// Auto-clear message after 5 seconds
+	setTimeout(() => {
+		statusMessage.value = "";
+	}, 5000);
 }
 
-// Handle form field changes
-function handleFieldChange(event) {
-  console.log('Field changed:', event)
-}
-
-// Handle form field blur
-function handleFieldBlur(event) {
-  console.log('Field blurred:', event)
+// Get icon class for status messages
+function getStatusIcon(type) {
+	switch (type) {
+		case "warning":
+			return "pi pi-exclamation-triangle";
+		case "error":
+			return "pi pi-times-circle";
+		case "success":
+			return "pi pi-check-circle";
+		default:
+			return "pi pi-info-circle";
+	}
 }
 
 // Handle form submission
-function handleSubmit(data) {
-  console.log('Form submitted with data:', data)
-  
-  // TODO: Add API call to create client when ready
-  // For now, just log the data and close the modal
-  
-  // Show success message (you can customize this)
-  alert('Client would be created with the following data:\n' + JSON.stringify(data, null, 2))
-  
-  // Close the modal
-  handleClose()
+async function handleSubmit(submittedFormData) {
+	try {
+		showStatusMessage("Creating client...", "info");
+
+		// Convert form data to the expected format
+		const clientData = {
+			name: submittedFormData.name,
+			address: submittedFormData.address,
+			phone: submittedFormData.phone,
+			email: submittedFormData.email,
+			zipcode: submittedFormData.zipcode,
+			city: submittedFormData.city,
+			state: submittedFormData.state,
+		};
+
+		// Call API to create client
+		const response = await Api.createClient(clientData);
+
+		if (response && response.success) {
+			showStatusMessage("Client created successfully!", "success");
+
+			// Close modal after a brief delay
+			setTimeout(() => {
+				handleClose();
+			}, 1500);
+		} else {
+			throw new Error(response?.message || "Failed to create client");
+		}
+	} catch (error) {
+		console.error("Error creating client:", error);
+		showStatusMessage(error.message || "Failed to create client. Please try again.", "error");
+	}
 }
 
 // Handle cancel action
 function handleCancel() {
-  handleClose()
+	handleClose();
 }
 
 // Handle modal close
 function handleClose() {
-  modalStore.closeCreateClient()
-  resetForm()
+	modalStore.closeCreateClient();
+	resetForm();
 }
 
 // Handle visibility changes
 function handleVisibilityChange(visible) {
-  if (!visible) {
-    handleClose()
-  }
+	if (!visible) {
+		handleClose();
+	}
 }
 
 // Reset form data
 function resetForm() {
-  Object.keys(formData).forEach(key => {
-    formData[key] = ''
-  })
-  availableCities.value = []
-  isLoadingZipcode.value = false
-  statusMessage.value = ''
-  statusType.value = 'info'
+	Object.keys(formData).forEach((key) => {
+		formData[key] = "";
+	});
+	availableCities.value = [];
+	isLoadingZipcode.value = false;
+	statusMessage.value = "";
+	statusType.value = "info";
 }
 
 // Initialize modal in store when component mounts
-modalStore.initializeModal('createClient', {
-  closeOnEscape: true,
-  closeOnOutsideClick: true
-})
+modalStore.initializeModal("createClient", {
+	closeOnEscape: true,
+	closeOnOutsideClick: true,
+});
+
+watch(isVisible, async () => {
+	if (isVisible.value) {
+		try {
+			const names = await Api.getCustomerNames();
+			console.log("Loaded customer names:", names);
+			console.log("Customer names type:", typeof names, Array.isArray(names));
+			console.log("First customer name:", names[0], typeof names[0]);
+			customerNames.value = names;
+
+			// Debug: Let's also set some test data to see if autocomplete works at all
+			console.log("Setting customerNames to:", customerNames.value);
+		} catch (error) {
+			console.error("Error loading customer names:", error);
+			// Set some test data to debug if autocomplete works
+			customerNames.value = ["Test Customer 1", "Test Customer 2", "Another Client"];
+			console.log("Using test customer names:", customerNames.value);
+		}
+	}
+});
 </script>
 
 <style scoped>
 .create-client-modal {
-  border-radius: 12px;
+	border-radius: 12px;
 }
 
 /* Custom styling for the modal content */
 :deep(.modal-header) {
-  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
-  color: white;
+	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+	color: white;
 }
 
 :deep(.modal-title) {
-  font-weight: 600;
-  font-size: 1.25rem;
+	font-weight: 600;
+	font-size: 1.25rem;
 }
 
 :deep(.modal-close-btn) {
-  color: white !important;
+	color: white !important;
 }
 
 :deep(.modal-content) {
-  padding: 24px;
+	padding: 24px;
 }
 
-/* Form styling adjustments */
-:deep(.v-text-field) {
-  margin-bottom: 8px;
+/* Form styling adjustments for PrimeVue components */
+:deep(.p-inputtext),
+:deep(.p-dropdown),
+:deep(.p-autocomplete) {
+	margin-bottom: 8px;
 }
 
-:deep(.v-select) {
-  margin-bottom: 8px;
+/* Ensure AutoComplete panel appears above modal */
+:global(.p-autocomplete-overlay) {
+	z-index: 9999 !important;
 }
 
-:deep(.v-btn) {
-  text-transform: none;
-  font-weight: 500;
+:global(.p-autocomplete-panel) {
+	z-index: 9999 !important;
 }
 
-:deep(.v-btn.v-btn--variant-elevated) {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+:deep(.p-button) {
+	text-transform: none;
+	font-weight: 500;
+}
+
+:deep(.p-button:not(.p-button-text)) {
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 /* Status message styling */
 .status-message {
-  padding: 12px 16px;
-  margin-bottom: 16px;
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-  font-size: 0.9rem;
-  border-left: 4px solid;
+	padding: 12px 16px;
+	margin-bottom: 16px;
+	border-radius: 6px;
+	display: flex;
+	align-items: center;
+	font-size: 0.9rem;
+	border-left: 4px solid;
+}
+
+.status-icon {
+	margin-right: 8px;
+	font-size: 1rem;
 }
 
 .status-info {
-  background-color: #e3f2fd;
-  color: #1565c0;
-  border-left-color: #2196f3;
+	background-color: #e3f2fd;
+	color: #1565c0;
+	border-left-color: #2196f3;
 }
 
 .status-warning {
-  background-color: #fff3e0;
-  color: #ef6c00;
-  border-left-color: #ff9800;
+	background-color: #fff3e0;
+	color: #ef6c00;
+	border-left-color: #ff9800;
 }
 
 .status-error {
-  background-color: #ffebee;
-  color: #c62828;
-  border-left-color: #f44336;
+	background-color: #ffebee;
+	color: #c62828;
+	border-left-color: #f44336;
 }
 
 .status-success {
-  background-color: #e8f5e8;
-  color: #2e7d32;
-  border-left-color: #4caf50;
+	background-color: #e8f5e8;
+	color: #2e7d32;
+	border-left-color: #4caf50;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/utils.js b/frontend/src/utils.js
index bd900df..17e08dc 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@@ -1639,6 +1639,14 @@ class DataUtils {
 			materials: ["Sprinkler heads - 3", "Nozzles - 5", "Wire nuts - 10"],
 		},
 	];
+
+	static US_STATES = [
+		'AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'FL', 'GA',
+		'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD',
+		'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ',
+		'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC',
+		'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'
+	];
 }
 
 export default DataUtils;