diff --git a/modules/customer-invoices/src/web/components/editor/customer-invoice-edit-form.tsx b/modules/customer-invoices/src/web/components/editor/customer-invoice-edit-form.tsx
index c138a790..f9d00128 100644
--- a/modules/customer-invoices/src/web/components/editor/customer-invoice-edit-form.tsx
+++ b/modules/customer-invoices/src/web/components/editor/customer-invoice-edit-form.tsx
@@ -2,7 +2,7 @@ import { Description, FieldGroup, Fieldset, Legend } from "@repo/rdx-ui/componen
 import { FieldErrors, useFormContext } from "react-hook-form";
 
 import { FormDebug } from "@erp/core/components";
-import { CustomerModalSelector } from "@erp/customers/components";
+import { CustomerModalSelectorField } from "@erp/customers/components";
 import { UserIcon } from "lucide-react";
 import { useTranslation } from "../../i18n";
 import { CustomerInvoiceFormData } from "../../schemas";
@@ -42,7 +42,7 @@ export const CustomerInvoiceEditForm = ({
             </Legend>
             <Description>{t("form_groups.customer.description")}</Description>
             <FieldGroup>
-              <CustomerModalSelector />
+              <CustomerModalSelectorField control={form.control} name='customer_id' />
             </FieldGroup>
           </Fieldset>
         </div>
diff --git a/modules/customer-invoices/src/web/components/editor/invoice-items-editor.tsx b/modules/customer-invoices/src/web/components/editor/invoice-items-editor.tsx
index e08532cb..0fc23ce1 100644
--- a/modules/customer-invoices/src/web/components/editor/invoice-items-editor.tsx
+++ b/modules/customer-invoices/src/web/components/editor/invoice-items-editor.tsx
@@ -8,7 +8,7 @@ import { CustomerInvoiceFormData } from "../../schemas";
 import { BlocksView, TableView } from "./items";
 
 export const InvoiceItems = () => {
-  const [viewMode, setViewMode] = useState<"blocks" | "table">("blocks");
+  const [viewMode, setViewMode] = useState<"blocks" | "table">("table");
   const { t } = useTranslation();
   const { control } = useFormContext<CustomerInvoiceFormData>();
 
@@ -86,7 +86,7 @@ export const InvoiceItems = () => {
           <div className='flex items-center gap-2'>
             <div className='flex items-center border rounded-lg p-1'>
               <Button
-                variant={viewMode === "blocks" ? "default" : "ghost"}
+                variant={viewMode === "blocks" ? "secondary" : "ghost"}
                 size='sm'
                 onClick={() => setViewMode("blocks")}
                 className='h-8 px-3'
@@ -95,7 +95,7 @@ export const InvoiceItems = () => {
                 Bloques
               </Button>
               <Button
-                variant={viewMode === "table" ? "default" : "ghost"}
+                variant={viewMode === "table" ? "secondary" : "ghost"}
                 size='sm'
                 onClick={() => setViewMode("table")}
                 className='h-8 px-3'
diff --git a/modules/customer-invoices/src/web/schemas/customer-invoices.form.schema.ts b/modules/customer-invoices/src/web/schemas/customer-invoices.form.schema.ts
index 9a2e35ef..e91a2424 100644
--- a/modules/customer-invoices/src/web/schemas/customer-invoices.form.schema.ts
+++ b/modules/customer-invoices/src/web/schemas/customer-invoices.form.schema.ts
@@ -11,6 +11,7 @@ export const CustomerInvoiceFormSchema = z.object({
 
   customer_id: z.string().optional(),
 
+  description: z.string().optional(),
   notes: z.string().optional(),
 
   language_code: z
@@ -77,6 +78,7 @@ export const defaultCustomerInvoiceFormData: CustomerInvoiceFormData = {
   invoice_date: "",
   operation_date: "",
 
+  description: "",
   notes: "",
 
   language_code: "es",
diff --git a/modules/customers/src/web/components/customer-modal-selector/customer-card.tsx b/modules/customers/src/web/components/customer-modal-selector/customer-card.tsx
index 7be45e00..54d21f58 100644
--- a/modules/customers/src/web/components/customer-modal-selector/customer-card.tsx
+++ b/modules/customers/src/web/components/customer-modal-selector/customer-card.tsx
@@ -1,9 +1,8 @@
-import { ArrayElement } from "@repo/rdx-utils";
-import { Building2Icon, FileTextIcon, Mail, Phone, Search, User } from "lucide-react";
-import { CustomersListData } from "../../schemas";
+import { Building2Icon, FileTextIcon, Mail, Phone, User } from "lucide-react";
+import { CustomerSummary } from "../../schemas";
 
 interface CustomerCardProps {
-  customer: ArrayElement<CustomersListData["items"]>;
+  customer: CustomerSummary;
 }
 
 export const CustomerCard = ({ customer }: CustomerCardProps) => {
@@ -13,15 +12,15 @@ export const CustomerCard = ({ customer }: CustomerCardProps) => {
         <User className='h-6 w-6 text-primary' />
       </div>
       <div className='flex-1 space-y-2'>
-        <div className='flex items-center justify-between'>
-          <h3 className='font-semibold text-foreground text-lg'>{customer.name}</h3>
-          <Search className='size-4 text-muted-foreground' />
-        </div>
+        <p className='text-left font-semibold text-foreground text-base'>{customer.name}</p>
         <div className='space-y-1 text-sm text-muted-foreground'>
-          <div className='flex items-center gap-2'>
-            <Mail className='h-3 w-3' />
-            {customer.email_primary}
-          </div>
+          {customer.email_primary && (
+            <div className='flex items-center gap-2'>
+              <Mail className='h-3 w-3' />
+              {customer.email_primary}
+            </div>
+          )}
+
           {customer.mobile_primary && (
             <div className='flex items-center gap-2'>
               <Phone className='h-3 w-3' />
diff --git a/modules/customers/src/web/components/customer-modal-selector/customer-modal-selector-field.tsx b/modules/customers/src/web/components/customer-modal-selector/customer-modal-selector-field.tsx
new file mode 100644
index 00000000..06778763
--- /dev/null
+++ b/modules/customers/src/web/components/customer-modal-selector/customer-modal-selector-field.tsx
@@ -0,0 +1,40 @@
+import { FormField, FormItem } from "@repo/shadcn-ui/components";
+
+import { Control, FieldPath, FieldValues } from "react-hook-form";
+import { CustomerModalSelector } from "./customer-modal-selector";
+
+type CustomerModalSelectorFieldProps<TFormValues extends FieldValues> = {
+  control: Control<TFormValues>;
+  name: FieldPath<TFormValues>;
+  disabled?: boolean;
+  required?: boolean;
+  readOnly?: boolean;
+  className?: string;
+};
+
+export function CustomerModalSelectorField<TFormValues extends FieldValues>({
+  control,
+  name,
+  disabled = false,
+  required = false,
+  readOnly = false,
+  className,
+}: CustomerModalSelectorFieldProps<TFormValues>) {
+  const isDisabled = disabled;
+  const isReadOnly = readOnly && !disabled;
+
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => {
+        console.log(field);
+        return (
+          <FormItem className={className}>
+            <CustomerModalSelector />
+          </FormItem>
+        );
+      }}
+    />
+  );
+}
diff --git a/modules/customers/src/web/components/customer-modal-selector/index.ts b/modules/customers/src/web/components/customer-modal-selector/index.ts
index d3e79bfe..be077e63 100644
--- a/modules/customers/src/web/components/customer-modal-selector/index.ts
+++ b/modules/customers/src/web/components/customer-modal-selector/index.ts
@@ -1 +1,2 @@
 export * from "./customer-modal-selector";
+export * from "./customer-modal-selector-field";