diff --git a/modules/core/src/web/components/page-header.tsx b/modules/core/src/web/components/page-header.tsx
index c5f848c3..814bc0b1 100644
--- a/modules/core/src/web/components/page-header.tsx
+++ b/modules/core/src/web/components/page-header.tsx
@@ -6,43 +6,39 @@ import type { ReactNode } from "react";
 
 
 interface PageHeaderProps {
-  /** Icono que aparece a la izquierda del título */
-  icon?: ReactNode;
-  /** Contenido del título (texto plano o nodo complejo) */
+  backIcon?: ReactNode;
   title: ReactNode;
-  /** Descripción secundaria debajo del título */
   description?: ReactNode;
-  /** Estado opcional (ej. "draft", "paid") */
   status?: string;
-  /** Contenido del lado derecho (botones, menús, etc.) */
   rightSlot?: ReactNode;
 
   className?: string;
 }
 
-export function PageHeader({ icon, title, description, status, rightSlot, className }: PageHeaderProps) {
+export function PageHeader({ backIcon, title, description, rightSlot, className }: PageHeaderProps) {
   return (
-    <div className={cn("py-4", className)}>
-      <div className='flex items-center justify-between'>
-        {/* Lado izquierdo */}
-        <div className='flex items-center gap-4'>
-          <Button variant="ghost" size="icon" className="cursor-pointer" onClick={() => window.history.back()}>
-            <ChevronLeftIcon className="size-5" />
+    <div className={cn("pt-4 pb-6 bg-background flex items-center justify-between", className)}>
+      {/* Lado izquierdo */}
+      <div className='flex items-center gap-4'>
+        {backIcon && (
+          <Button
+            variant='ghost'
+            size='icon'
+            className='cursor-pointer'
+            onClick={() => window.history.back()}
+          >
+            <ChevronLeftIcon className='size-5' />
           </Button>
-          {icon && <div className='shrink-0'>{icon}</div>}
+        )}
 
-          <div>
-            <div className='flex items-center gap-3'>
-              <h1 className='text-xl font-semibold text-foreground'>{title}</h1>
-            </div>
-            {description && <p className='text-sm text-muted-foreground'>{description}</p>}
-          </div>
+        <div>
+          <h2 className='text-2xl font-semibold text-foreground'>{title}</h2>
+          {description && <p className='text-base text-muted-foreground'>{description}</p>}
         </div>
-
-        {/* Lado derecho parametrizable */}
-        {rightSlot && <div>{rightSlot}</div>}
       </div>
 
+      {/* Lado derecho parametrizable */}
+      {rightSlot && <>{rightSlot}</>}
     </div>
   );
 }
diff --git a/modules/customer-invoices/src/common/locales/en.json b/modules/customer-invoices/src/common/locales/en.json
index cd1e4a81..67845065 100644
--- a/modules/customer-invoices/src/common/locales/en.json
+++ b/modules/customer-invoices/src/common/locales/en.json
@@ -34,7 +34,7 @@
     "title": "Customer invoices",
     "description": "Manage your customer invoices",
     "list": {
-      "title": "Customer invoice list",
+      "title": "Customer invoices",
       "description": "List all customer invoices",
       "grid_columns": {
         "invoice_number": "Inv. number",
diff --git a/modules/customer-invoices/src/common/locales/es.json b/modules/customer-invoices/src/common/locales/es.json
index 6d63d19e..978ebc83 100644
--- a/modules/customer-invoices/src/common/locales/es.json
+++ b/modules/customer-invoices/src/common/locales/es.json
@@ -33,7 +33,7 @@
     "title": "Facturas de clientes",
     "description": "Gestiona tus facturas de clientes",
     "list": {
-      "title": "Listado de facturas de clientes",
+      "title": "Facturas de clientes",
       "description": "Lista todas las facturas de clientes",
       "grid_columns": {
         "invoice_number": "Nº factura",
diff --git a/modules/customer-invoices/src/web/pages/list/invoices-list-page.tsx b/modules/customer-invoices/src/web/pages/list/invoices-list-page.tsx
index 84fef8a2..c84b5c18 100644
--- a/modules/customer-invoices/src/web/pages/list/invoices-list-page.tsx
+++ b/modules/customer-invoices/src/web/pages/list/invoices-list-page.tsx
@@ -81,30 +81,24 @@ export const InvoiceListPage = () => {
       <AppHeader>
         <PageHeader
           title={t("pages.list.title")}
+          description={t("pages.list.description")}
           rightSlot={
-            <></>}
-
-
+            <div className='flex items-center space-x-2'>
+              <Button
+                onClick={() => navigate("/customer-invoices/create")}
+                variant={'default'}
+                aria-label={t("pages.create.title")}
+                className='cursor-pointer'
+              >
+                <PlusIcon className="mr-2 h-4 w-4" aria-hidden />
+                {t("pages.create.title")}
+              </Button>
+            </div>
+          }
         />
       </AppHeader>
       <AppContent>
-        <div className='flex items-center justify-between space-y-6'>
-          <div>
-            <h2 className='text-2xl font-bold tracking-tight'>{t("pages.list.title")}</h2>
-            <p className='text-muted-foreground'>{t("pages.list.description")}</p>
-          </div>
-          <div className='flex items-center space-x-2'>
-            <Button
-              onClick={() => navigate("/customer-invoices/create")}
-              variant={'default'}
-              aria-label={t("pages.create.title")}
-              className='cursor-pointer'
-            >
-              <PlusIcon className="mr-2 h-4 w-4" aria-hidden />
-              {t("pages.create.title")}
-            </Button>
-          </div>
-        </div>
+
         <div className='flex flex-col w-full h-full py-3'>
           <div className={"flex-1"}>
             <InvoicesListGrid
diff --git a/modules/customer-invoices/src/web/pages/update/invoice-update-comp.tsx b/modules/customer-invoices/src/web/pages/update/invoice-update-comp.tsx
index 75f57e74..a5fb8dfc 100644
--- a/modules/customer-invoices/src/web/pages/update/invoice-update-comp.tsx
+++ b/modules/customer-invoices/src/web/pages/update/invoice-update-comp.tsx
@@ -84,7 +84,9 @@ export const InvoiceUpdateComp = ({
         <UnsavedChangesProvider isDirty={form.formState.isDirty}>
             <AppHeader>
                 <PageHeader
-                    title={`${t("pages.edit.title")} ${invoiceData.invoice_number}`}
+                    backIcon
+                    title={`${t("pages.edit.title")} #${invoiceData.invoice_number}`}
+                    description={t("pages.edit.description")}
                     rightSlot={
                         <UpdateCommitButtonGroup
                             isLoading={isPending}
@@ -93,9 +95,6 @@ export const InvoiceUpdateComp = ({
                             cancel={{ to: "/customer-invoices/list" }}
                             onBack={() => navigate(-1)}
                         />
-
-
-
                     }
                 />
             </AppHeader>
@@ -106,7 +105,7 @@ export const InvoiceUpdateComp = ({
                         formId="invoice-update-form"
                         onSubmit={handleSubmit}
                         onError={handleError}
-                        className="max-w-full"
+                        className="bg-white rounded-xl border shadow-xl max-w-full"
                     />
                 </FormProvider>
             </AppContent>
diff --git a/modules/customer-invoices/src/web/pages/update/invoice-update-form.tsx b/modules/customer-invoices/src/web/pages/update/invoice-update-form.tsx
index b7fb421d..99e07cc5 100644
--- a/modules/customer-invoices/src/web/pages/update/invoice-update-form.tsx
+++ b/modules/customer-invoices/src/web/pages/update/invoice-update-form.tsx
@@ -9,7 +9,7 @@ interface InvoiceUpdateFormProps {
   formId: string;
   onSubmit: (data: InvoiceFormData) => void;
   onError: (errors: FieldErrors<InvoiceFormData>) => void;
-  className: string;
+  className?: string;
 }
 
 export const InvoiceUpdateForm = ({
@@ -22,7 +22,7 @@ export const InvoiceUpdateForm = ({
 
   return (
     <form noValidate id={formId} onSubmit={form.handleSubmit(onSubmit, onError)} >
-      <section className={cn("bg-white rounded-xl border shadow-xl space-y-6", className)}>
+      <section className={cn("p-6 space-y-6", className)}>
         <div className="w-full p-6 bg-transparent grid grid-cols-1 lg:grid-cols-3 gap-6">
           <InvoiceRecipient className="flex flex-col" />
           <InvoiceBasicInfoFields className="flex flex-col lg:col-span-2" />
diff --git a/modules/customers/src/web/components/editor/customer-edit-form.tsx b/modules/customers/src/web/components/editor/customer-edit-form.tsx
index 7e4d5a6c..3f1c9ff3 100644
--- a/modules/customers/src/web/components/editor/customer-edit-form.tsx
+++ b/modules/customers/src/web/components/editor/customer-edit-form.tsx
@@ -1,6 +1,7 @@
 import { FormDebug } from "@erp/core/components";
 import { FieldErrors, useFormContext } from "react-hook-form";
 
+import { cn } from '@repo/shadcn-ui/lib/utils';
 import { CustomerFormData } from "../../schemas";
 import { CustomerAdditionalConfigFields } from "./customer-additional-config-fields";
 import { CustomerAddressFields } from "./customer-address-fields";
@@ -11,24 +12,27 @@ interface CustomerFormProps {
   formId: string;
   onSubmit: (data: CustomerFormData) => void;
   onError: (errors: FieldErrors<CustomerFormData>) => void;
+  className?: string;
 }
 
-export const CustomerEditForm = ({ formId, onSubmit, onError }: CustomerFormProps) => {
+export const CustomerEditForm = ({ formId, onSubmit, onError, className }: CustomerFormProps) => {
   const form = useFormContext<CustomerFormData>();
 
   return (
     <form id={formId} onSubmit={form.handleSubmit(onSubmit, onError)}>
-      <div className='xl:flex xl:flex-row-reverse xl:items-start'>
-        <div className='w-full xl:w-6/12'>
-          <FormDebug />
+      <section className={cn("p-6", className)}>
+        <div className='xl:flex xl:flex-row-reverse xl:items-start'>
+          <div className='w-full xl:w-6/12'>
+            <FormDebug />
+          </div>
+          <div className='w-full xl:grow space-y-6'>
+            <CustomerBasicInfoFields />
+            <CustomerContactFields />
+            <CustomerAddressFields />
+            <CustomerAdditionalConfigFields />
+          </div>
         </div>
-        <div className='w-full xl:grow space-y-6'>
-          <CustomerBasicInfoFields />
-          <CustomerContactFields />
-          <CustomerAddressFields />
-          <CustomerAdditionalConfigFields />
-        </div>
-      </div>
+      </section>
     </form>
   );
 };
diff --git a/modules/customers/src/web/pages/list/customers-list-page.tsx b/modules/customers/src/web/pages/list/customers-list-page.tsx
index b5b47de1..e107221a 100644
--- a/modules/customers/src/web/pages/list/customers-list-page.tsx
+++ b/modules/customers/src/web/pages/list/customers-list-page.tsx
@@ -1,5 +1,5 @@
 import { PageHeader } from '@erp/core/components';
-import { AppBreadcrumb, AppContent, AppHeader, BackHistoryButton, useDebounce } from "@repo/rdx-ui/components";
+import { AppContent, AppHeader, BackHistoryButton, useDebounce } from "@repo/rdx-ui/components";
 import { Button } from "@repo/shadcn-ui/components";
 import { PlusIcon } from "lucide-react";
 import { useMemo, useState } from 'react';
@@ -72,33 +72,25 @@ export const CustomersListPage = () => {
   return (
     <>
       <AppHeader>
-        <AppBreadcrumb />
         <PageHeader
           title={t("pages.list.title")}
+          description={t("pages.list.description")}
           rightSlot={
-            <></>}
-
-
+            <div className='flex items-center space-x-2'>
+              <Button
+                onClick={() => navigate("/customers/create")}
+                variant={'default'}
+                aria-label={t("pages.create.title")}
+                className='cursor-pointer'
+              >
+                <PlusIcon className="mr-2 h-4 w-4" aria-hidden />
+                {t("pages.create.title")}
+              </Button>
+            </div>
+          }
         />
       </AppHeader>
       <AppContent>
-        <div className='flex items-center justify-between space-y-6'>
-          <div>
-            <h2 className='text-2xl font-bold tracking-tight'>{t("pages.list.title")}</h2>
-            <p className='text-muted-foreground'>{t("pages.list.description")}</p>
-          </div>
-          <div className='flex items-center space-x-2'>
-            <Button
-              onClick={() => navigate("/customer-invoices/create")}
-              variant={'default'}
-              aria-label={t("pages.create.title")}
-              className='cursor-pointer'
-            >
-              <PlusIcon className="mr-2 h-4 w-4" aria-hidden />
-              {t("pages.create.title")}
-            </Button>
-          </div>
-        </div>
         <div className='flex flex-col w-full h-full py-3'>
           <div className={"flex-1"}>
             <CustomersListGrid
diff --git a/modules/customers/src/web/pages/update/customer-update-page.tsx b/modules/customers/src/web/pages/update/customer-update-page.tsx
index 0fcbc3d7..aa8738f3 100644
--- a/modules/customers/src/web/pages/update/customer-update-page.tsx
+++ b/modules/customers/src/web/pages/update/customer-update-page.tsx
@@ -1,7 +1,8 @@
-import { AppBreadcrumb, AppContent, BackHistoryButton } from "@repo/rdx-ui/components";
+import { AppContent, AppHeader, BackHistoryButton } from "@repo/rdx-ui/components";
 import { useNavigate } from "react-router-dom";
 
 import { formHasAnyDirty, pickFormDirtyValues } from "@erp/core/client";
+import { PageHeader } from '@erp/core/components';
 import {
   UnsavedChangesProvider,
   UpdateCommitButtonGroup,
@@ -92,7 +93,7 @@ export const CustomerUpdatePage = () => {
   if (isLoadError) {
     return (
       <>
-        <AppBreadcrumb />
+
         <AppContent>
           <ErrorAlert
             title={t("pages.update.loadErrorTitle", "No se pudo cargar el cliente")}
@@ -113,7 +114,7 @@ export const CustomerUpdatePage = () => {
   if (!customerData)
     return (
       <>
-        <AppBreadcrumb />
+
         <AppContent>
           <NotFoundCard
             title={t("pages.update.notFoundTitle", "Cliente no encontrado")}
@@ -124,19 +125,13 @@ export const CustomerUpdatePage = () => {
     );
 
   return (
-    <>
-      <AppBreadcrumb />
-      <AppContent>
-        <UnsavedChangesProvider isDirty={form.formState.isDirty}>
-          <div className='flex items-center justify-between space-y-6'>
-            <div className='space-y-2'>
-              <h2 className='text-2xl font-bold tracking-tight text-balance scroll-m-2'>
-                {t("pages.update.title")}
-              </h2>
-              <p className='text-muted-foreground scroll-m-20 tracking-tight text-balance'>
-                {t("pages.update.description")}
-              </p>
-            </div>
+    <UnsavedChangesProvider isDirty={form.formState.isDirty}>
+      <AppHeader>
+        <PageHeader
+          backIcon
+          title={t("pages.update.title")}
+          description={t("pages.update.description")}
+          rightSlot={
             <UpdateCommitButtonGroup
               isLoading={isUpdating}
               disabled={isUpdating}
@@ -151,27 +146,31 @@ export const CustomerUpdatePage = () => {
               onBack={() => handleBack()}
               onReset={() => handleReset()}
             />
-          </div>
-          {/* Alerta de error de actualización (si ha fallado el último intento) */}
-          {isUpdateError && (
-            <ErrorAlert
-              title={t("pages.update.errorTitle", "No se pudo guardar los cambios")}
-              message={
-                (updateError as Error)?.message ??
-                t("pages.update.errorMsg", "Revisa los datos e inténtalo de nuevo.")
-              }
-            />
-          )}
+          }
+        />
+      </AppHeader>
+      <AppContent>
+        {/* Alerta de error de actualización (si ha fallado el último intento) */}
+        {isUpdateError && (
+          <ErrorAlert
+            title={t("pages.update.errorTitle", "No se pudo guardar los cambios")}
+            message={
+              (updateError as Error)?.message ??
+              t("pages.update.errorMsg", "Revisa los datos e inténtalo de nuevo.")
+            }
+          />
+        )}
+
+        <FormProvider {...form}>
+          <CustomerEditForm
+            formId={"customer-update-form"} // para que el botón del header pueda hacer submit
+            onSubmit={handleSubmit}
+            onError={handleError}
+            className="bg-white rounded-xl border shadow-xl max-w-7xl mx-auto"
+          />
+        </FormProvider>
 
-          <FormProvider {...form}>
-            <CustomerEditForm
-              formId={"customer-update-form"} // para que el botón del header pueda hacer submit
-              onSubmit={handleSubmit}
-              onError={handleError}
-            />
-          </FormProvider>
-        </UnsavedChangesProvider>
       </AppContent>
-    </>
+    </UnsavedChangesProvider>
   );
 };
diff --git a/modules/customers/src/web/pages/view/customer-view-page.tsx b/modules/customers/src/web/pages/view/customer-view-page.tsx
index 45392449..702b3b33 100644
--- a/modules/customers/src/web/pages/view/customer-view-page.tsx
+++ b/modules/customers/src/web/pages/view/customer-view-page.tsx
@@ -1,8 +1,7 @@
-import { AppContent, BackHistoryButton } from "@repo/rdx-ui/components";
+import { AppContent, AppHeader, BackHistoryButton } from "@repo/rdx-ui/components";
 import { Button, Card, CardContent, CardHeader, CardTitle } from "@repo/shadcn-ui/components";
 import {
   Banknote,
-  Building2,
   EditIcon,
   FileText,
   Globe,
@@ -11,11 +10,11 @@ import {
   MapPin,
   MoreVertical,
   Phone,
-  Smartphone,
-  User,
+  Smartphone
 } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 
+import { PageHeader } from '@erp/core/components';
 import { useUrlParamId } from "@erp/core/hooks";
 import { Badge } from "@repo/shadcn-ui/components";
 import { CustomerEditorSkeleton, ErrorAlert } from "../../components";
@@ -61,28 +60,17 @@ export const CustomerViewPage = () => {
 
   return (
     <>
-      <AppContent>
-        <div className='space-y-6 max-w-4xl'>
-          {/* Header */}
-          <div className='flex items-start justify-between'>
-            <div className='flex items-start gap-4'>
-              <div className='flex h-16 w-16 items-center justify-center rounded-lg'>
-                {customer?.is_company ? (
-                  <Building2 className='size-8 text-primary' />
-                ) : (
-                  <User className='size-8 text-primary' />
-                )}
-              </div>
-              <div>
-                <h1 className='text-3xl font-bold text-foreground'>{customer?.name}</h1>
-                <div className='mt-2 flex items-center gap-3'>
-                  <Badge variant='secondary' className='font-mono'>
-                    {customer?.reference}
-                  </Badge>
-                  <Badge variant='outline'>{customer?.is_company ? "Empresa" : "Persona"}</Badge>
-                </div>
-              </div>
-            </div>
+      <AppHeader>
+        <PageHeader
+          backIcon
+          title={(<div className="flex flex-wrap items-center gap-2">{customer?.name} {customer?.trade_name && <span className="text-muted-foreground">({customer.trade_name})</span>}</div>)}
+          description={<div className='mt-2 flex items-center gap-3'>
+            <Badge variant='secondary' className='font-mono'>
+              {customer?.tin}
+            </Badge>
+            <Badge variant='outline'>{customer?.is_company ? "Empresa" : "Persona"}</Badge>
+          </div>}
+          rightSlot={
             <div className='flex gap-2'>
               <Button variant='outline' size='icon' onClick={() => navigate("/customers/list")}>
                 <MoreVertical className='h-4 w-4' />
@@ -92,248 +80,249 @@ export const CustomerViewPage = () => {
                 Editar
               </Button>
             </div>
-          </div>
+          }
+        />
+      </AppHeader>
+      <AppContent>
+        {/* Main Content Grid */}
+        <div className='grid gap-6 md:grid-cols-2'>
+          {/* Información Básica */}
+          <Card>
+            <CardHeader>
+              <CardTitle className='flex items-center gap-2 text-lg'>
+                <FileText className='size-5 text-primary' />
+                Información Básica
+              </CardTitle>
+            </CardHeader>
+            <CardContent className='space-y-4'>
+              <div>
+                <dt className='text-sm font-medium text-muted-foreground'>Nombre</dt>
+                <dd className='mt-1 text-base text-foreground'>{customer?.name}</dd>
+              </div>
+              <div>
+                <dt className='text-sm font-medium text-muted-foreground'>Referencia</dt>
+                <dd className='mt-1 font-mono text-base text-foreground'>
+                  {customer?.reference}
+                </dd>
+              </div>
+              <div>
+                <dt className='text-sm font-medium text-muted-foreground'>Registro Legal</dt>
+                <dd className='mt-1 text-base text-foreground'>{customer?.legal_record}</dd>
+              </div>
+              <div>
+                <dt className='text-sm font-medium text-muted-foreground'>
+                  Impuestos por Defecto
+                </dt>
+                <dd className='mt-1'>
+                  {customer?.default_taxes.map((tax) => (<Badge key={tax} variant={"secondary"}>{tax}</Badge>))}
+                </dd>
+              </div>
+            </CardContent>
+          </Card>
 
-          {/* Main Content Grid */}
-          <div className='grid gap-6 md:grid-cols-2'>
-            {/* Información Básica */}
-            <Card>
-              <CardHeader>
-                <CardTitle className='flex items-center gap-2 text-lg'>
-                  <FileText className='size-5 text-primary' />
-                  Información Básica
-                </CardTitle>
-              </CardHeader>
-              <CardContent className='space-y-4'>
+          {/* Dirección */}
+          <Card>
+            <CardHeader>
+              <CardTitle className='flex items-center gap-2 text-lg'>
+                <MapPin className='size-5 text-primary' />
+                Dirección
+              </CardTitle>
+            </CardHeader>
+            <CardContent className='space-y-4'>
+              <div>
+                <dt className='text-sm font-medium text-muted-foreground'>Calle</dt>
+                <dd className='mt-1 text-base text-foreground'>
+                  {customer?.street}
+                  {customer?.street2 && (
+                    <>
+                      <br />
+                      {customer?.street2}
+                    </>
+                  )}
+                </dd>
+              </div>
+              <div className='grid grid-cols-2 gap-4'>
                 <div>
-                  <dt className='text-sm font-medium text-muted-foreground'>Nombre</dt>
-                  <dd className='mt-1 text-base text-foreground'>{customer?.name}</dd>
+                  <dt className='text-sm font-medium text-muted-foreground'>Ciudad</dt>
+                  <dd className='mt-1 text-base text-foreground'>{customer?.city}</dd>
                 </div>
                 <div>
-                  <dt className='text-sm font-medium text-muted-foreground'>Referencia</dt>
-                  <dd className='mt-1 font-mono text-base text-foreground'>
-                    {customer?.reference}
-                  </dd>
+                  <dt className='text-sm font-medium text-muted-foreground'>Código Postal</dt>
+                  <dd className='mt-1 text-base text-foreground'>{customer?.postal_code}</dd>
+                </div>
+              </div>
+              <div className='grid grid-cols-2 gap-4'>
+                <div>
+                  <dt className='text-sm font-medium text-muted-foreground'>Provincia</dt>
+                  <dd className='mt-1 text-base text-foreground'>{customer?.province}</dd>
                 </div>
                 <div>
-                  <dt className='text-sm font-medium text-muted-foreground'>Registro Legal</dt>
-                  <dd className='mt-1 text-base text-foreground'>{customer?.legalRecord}</dd>
+                  <dt className='text-sm font-medium text-muted-foreground'>País</dt>
+                  <dd className='mt-1 text-base text-foreground'>{customer?.country}</dd>
                 </div>
-                <div>
-                  <dt className='text-sm font-medium text-muted-foreground'>
-                    Impuestos por Defecto
-                  </dt>
-                  <dd className='mt-1'>
-                    <Badge className='bg-blue-600 hover:bg-blue-700'>{customer?.defaultTax}</Badge>
-                  </dd>
-                </div>
-              </CardContent>
-            </Card>
+              </div>
+            </CardContent>
+          </Card>
 
-            {/* Dirección */}
-            <Card>
-              <CardHeader>
-                <CardTitle className='flex items-center gap-2 text-lg'>
-                  <MapPin className='size-5 text-primary' />
-                  Dirección
-                </CardTitle>
-              </CardHeader>
-              <CardContent className='space-y-4'>
-                <div>
-                  <dt className='text-sm font-medium text-muted-foreground'>Calle</dt>
-                  <dd className='mt-1 text-base text-foreground'>
-                    {customer?.street1}
-                    {customer?.street2 && (
-                      <>
-                        <br />
-                        {customer?.street2}
-                      </>
-                    )}
-                  </dd>
-                </div>
-                <div className='grid grid-cols-2 gap-4'>
-                  <div>
-                    <dt className='text-sm font-medium text-muted-foreground'>Ciudad</dt>
-                    <dd className='mt-1 text-base text-foreground'>{customer?.city}</dd>
-                  </div>
-                  <div>
-                    <dt className='text-sm font-medium text-muted-foreground'>Código Postal</dt>
-                    <dd className='mt-1 text-base text-foreground'>{customer?.postal_code}</dd>
-                  </div>
-                </div>
-                <div className='grid grid-cols-2 gap-4'>
-                  <div>
-                    <dt className='text-sm font-medium text-muted-foreground'>Provincia</dt>
-                    <dd className='mt-1 text-base text-foreground'>{customer?.province}</dd>
-                  </div>
-                  <div>
-                    <dt className='text-sm font-medium text-muted-foreground'>País</dt>
-                    <dd className='mt-1 text-base text-foreground'>{customer?.country}</dd>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Información de Contacto */}
-            <Card className='md:col-span-2'>
-              <CardHeader>
-                <CardTitle className='flex items-center gap-2 text-lg'>
-                  <Mail className='size-5 text-primary' />
-                  Información de Contacto
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className='grid gap-6 md:grid-cols-2'>
-                  {/* Contacto Principal */}
-                  <div className='space-y-4'>
-                    <h3 className='font-semibold text-foreground'>Contacto Principal</h3>
-                    {customer?.email_primary && (
-                      <div className='flex items-start gap-3'>
-                        <Mail className='mt-0.5 h-4 w-4 text-muted-foreground' />
-                        <div className='flex-1'>
-                          <dt className='text-sm font-medium text-muted-foreground'>Email</dt>
-                          <dd className='mt-1 text-base text-foreground'>
-                            {customer?.email_primary}
-                          </dd>
-                        </div>
+          {/* Información de Contacto */}
+          <Card className='md:col-span-2'>
+            <CardHeader>
+              <CardTitle className='flex items-center gap-2 text-lg'>
+                <Mail className='size-5 text-primary' />
+                Información de Contacto
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className='grid gap-6 md:grid-cols-2'>
+                {/* Contacto Principal */}
+                <div className='space-y-4'>
+                  <h3 className='font-semibold text-foreground'>Contacto Principal</h3>
+                  {customer?.email_primary && (
+                    <div className='flex items-start gap-3'>
+                      <Mail className='mt-0.5 h-4 w-4 text-muted-foreground' />
+                      <div className='flex-1'>
+                        <dt className='text-sm font-medium text-muted-foreground'>Email</dt>
+                        <dd className='mt-1 text-base text-foreground'>
+                          {customer?.email_primary}
+                        </dd>
                       </div>
-                    )}
-                    {customer?.mobile_primary && (
-                      <div className='flex items-start gap-3'>
-                        <Smartphone className='mt-0.5 h-4 w-4 text-muted-foreground' />
-                        <div className='flex-1'>
-                          <dt className='text-sm font-medium text-muted-foreground'>Móvil</dt>
-                          <dd className='mt-1 text-base text-foreground'>
-                            {customer?.mobile_primary}
-                          </dd>
-                        </div>
+                    </div>
+                  )}
+                  {customer?.mobile_primary && (
+                    <div className='flex items-start gap-3'>
+                      <Smartphone className='mt-0.5 h-4 w-4 text-muted-foreground' />
+                      <div className='flex-1'>
+                        <dt className='text-sm font-medium text-muted-foreground'>Móvil</dt>
+                        <dd className='mt-1 text-base text-foreground'>
+                          {customer?.mobile_primary}
+                        </dd>
                       </div>
-                    )}
-                    {customer?.phone_primary && (
-                      <div className='flex items-start gap-3'>
-                        <Phone className='mt-0.5 h-4 w-4 text-muted-foreground' />
-                        <div className='flex-1'>
-                          <dt className='text-sm font-medium text-muted-foreground'>Teléfono</dt>
-                          <dd className='mt-1 text-base text-foreground'>
-                            {customer?.phone_primary}
-                          </dd>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Contacto Secundario */}
-                  <div className='space-y-4'>
-                    <h3 className='font-semibold text-foreground'>Contacto Secundario</h3>
-                    {customer?.email_secondary && (
-                      <div className='flex items-start gap-3'>
-                        <Mail className='mt-0.5 h-4 w-4 text-muted-foreground' />
-                        <div className='flex-1'>
-                          <dt className='text-sm font-medium text-muted-foreground'>Email</dt>
-                          <dd className='mt-1 text-base text-foreground'>
-                            {customer?.email_secondary}
-                          </dd>
-                        </div>
-                      </div>
-                    )}
-                    {customer?.mobile_secondary && (
-                      <div className='flex items-start gap-3'>
-                        <Smartphone className='mt-0.5 h-4 w-4 text-muted-foreground' />
-                        <div className='flex-1'>
-                          <dt className='text-sm font-medium text-muted-foreground'>Móvil</dt>
-                          <dd className='mt-1 text-base text-foreground'>
-                            {customer?.mobile_secondary}
-                          </dd>
-                        </div>
-                      </div>
-                    )}
-                    {customer?.phone_secondary && (
-                      <div className='flex items-start gap-3'>
-                        <Phone className='mt-0.5 h-4 w-4 text-muted-foreground' />
-                        <div className='flex-1'>
-                          <dt className='text-sm font-medium text-muted-foreground'>Teléfono</dt>
-                          <dd className='mt-1 text-base text-foreground'>
-                            {customer?.phone_secondary}
-                          </dd>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Otros Contactos */}
-                  {(customer?.website || customer?.fax) && (
-                    <div className='space-y-4 md:col-span-2'>
-                      <h3 className='font-semibold text-foreground'>Otros</h3>
-                      <div className='grid gap-4 md:grid-cols-2'>
-                        {customer?.website && (
-                          <div className='flex items-start gap-3'>
-                            <Globe className='mt-0.5 h-4 w-4 text-muted-foreground' />
-                            <div className='flex-1'>
-                              <dt className='text-sm font-medium text-muted-foreground'>
-                                Sitio Web
-                              </dt>
-                              <dd className='mt-1 text-base text-primary hover:underline'>
-                                <a
-                                  href={customer?.website}
-                                  target='_blank'
-                                  rel='noopener noreferrer'
-                                >
-                                  {customer?.website}
-                                </a>
-                              </dd>
-                            </div>
-                          </div>
-                        )}
-                        {customer?.fax && (
-                          <div className='flex items-start gap-3'>
-                            <Phone className='mt-0.5 h-4 w-4 text-muted-foreground' />
-                            <div className='flex-1'>
-                              <dt className='text-sm font-medium text-muted-foreground'>Fax</dt>
-                              <dd className='mt-1 text-base text-foreground'>{customer?.fax}</dd>
-                            </div>
-                          </div>
-                        )}
+                    </div>
+                  )}
+                  {customer?.phone_primary && (
+                    <div className='flex items-start gap-3'>
+                      <Phone className='mt-0.5 h-4 w-4 text-muted-foreground' />
+                      <div className='flex-1'>
+                        <dt className='text-sm font-medium text-muted-foreground'>Teléfono</dt>
+                        <dd className='mt-1 text-base text-foreground'>
+                          {customer?.phone_primary}
+                        </dd>
                       </div>
                     </div>
                   )}
                 </div>
-              </CardContent>
-            </Card>
 
-            {/* Preferencias */}
-            <Card className='md:col-span-2'>
-              <CardHeader>
-                <CardTitle className='flex items-center gap-2 text-lg'>
-                  <Languages className='size-5 text-primary' />
-                  Preferencias
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className='grid gap-6 md:grid-cols-2'>
-                  <div className='flex items-start gap-3'>
-                    <Languages className='mt-0.5 h-4 w-4 text-muted-foreground' />
-                    <div className='flex-1'>
-                      <dt className='text-sm font-medium text-muted-foreground'>
-                        Idioma Preferido
-                      </dt>
-                      <dd className='mt-1 text-base text-foreground'>{customer?.language_code}</dd>
+                {/* Contacto Secundario */}
+                <div className='space-y-4'>
+                  <h3 className='font-semibold text-foreground'>Contacto Secundario</h3>
+                  {customer?.email_secondary && (
+                    <div className='flex items-start gap-3'>
+                      <Mail className='mt-0.5 h-4 w-4 text-muted-foreground' />
+                      <div className='flex-1'>
+                        <dt className='text-sm font-medium text-muted-foreground'>Email</dt>
+                        <dd className='mt-1 text-base text-foreground'>
+                          {customer?.email_secondary}
+                        </dd>
+                      </div>
+                    </div>
+                  )}
+                  {customer?.mobile_secondary && (
+                    <div className='flex items-start gap-3'>
+                      <Smartphone className='mt-0.5 h-4 w-4 text-muted-foreground' />
+                      <div className='flex-1'>
+                        <dt className='text-sm font-medium text-muted-foreground'>Móvil</dt>
+                        <dd className='mt-1 text-base text-foreground'>
+                          {customer?.mobile_secondary}
+                        </dd>
+                      </div>
+                    </div>
+                  )}
+                  {customer?.phone_secondary && (
+                    <div className='flex items-start gap-3'>
+                      <Phone className='mt-0.5 h-4 w-4 text-muted-foreground' />
+                      <div className='flex-1'>
+                        <dt className='text-sm font-medium text-muted-foreground'>Teléfono</dt>
+                        <dd className='mt-1 text-base text-foreground'>
+                          {customer?.phone_secondary}
+                        </dd>
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                {/* Otros Contactos */}
+                {(customer?.website || customer?.fax) && (
+                  <div className='space-y-4 md:col-span-2'>
+                    <h3 className='font-semibold text-foreground'>Otros</h3>
+                    <div className='grid gap-4 md:grid-cols-2'>
+                      {customer?.website && (
+                        <div className='flex items-start gap-3'>
+                          <Globe className='mt-0.5 h-4 w-4 text-muted-foreground' />
+                          <div className='flex-1'>
+                            <dt className='text-sm font-medium text-muted-foreground'>
+                              Sitio Web
+                            </dt>
+                            <dd className='mt-1 text-base text-primary hover:underline'>
+                              <a
+                                href={customer?.website}
+                                target='_blank'
+                                rel='noopener noreferrer'
+                              >
+                                {customer?.website}
+                              </a>
+                            </dd>
+                          </div>
+                        </div>
+                      )}
+                      {customer?.fax && (
+                        <div className='flex items-start gap-3'>
+                          <Phone className='mt-0.5 h-4 w-4 text-muted-foreground' />
+                          <div className='flex-1'>
+                            <dt className='text-sm font-medium text-muted-foreground'>Fax</dt>
+                            <dd className='mt-1 text-base text-foreground'>{customer?.fax}</dd>
+                          </div>
+                        </div>
+                      )}
                     </div>
                   </div>
-                  <div className='flex items-start gap-3'>
-                    <Banknote className='mt-0.5 h-4 w-4 text-muted-foreground' />
-                    <div className='flex-1'>
-                      <dt className='text-sm font-medium text-muted-foreground'>
-                        Moneda Preferida
-                      </dt>
-                      <dd className='mt-1 text-base text-foreground'>{customer?.currency_code}</dd>
-                    </div>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Preferencias */}
+          <Card className='md:col-span-2'>
+            <CardHeader>
+              <CardTitle className='flex items-center gap-2 text-lg'>
+                <Languages className='size-5 text-primary' />
+                Preferencias
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className='grid gap-6 md:grid-cols-2'>
+                <div className='flex items-start gap-3'>
+                  <Languages className='mt-0.5 h-4 w-4 text-muted-foreground' />
+                  <div className='flex-1'>
+                    <dt className='text-sm font-medium text-muted-foreground'>
+                      Idioma Preferido
+                    </dt>
+                    <dd className='mt-1 text-base text-foreground'>{customer?.language_code}</dd>
                   </div>
                 </div>
-              </CardContent>
-            </Card>
-          </div>
+                <div className='flex items-start gap-3'>
+                  <Banknote className='mt-0.5 h-4 w-4 text-muted-foreground' />
+                  <div className='flex-1'>
+                    <dt className='text-sm font-medium text-muted-foreground'>
+                      Moneda Preferida
+                    </dt>
+                    <dd className='mt-1 text-base text-foreground'>{customer?.currency_code}</dd>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
         </div>
-      </AppContent>
+      </AppContent >
     </>
   );
 };
diff --git a/packages/rdx-ui/src/components/layout/app-header.tsx b/packages/rdx-ui/src/components/layout/app-header.tsx
index 6de4ee09..d7f67f3c 100644
--- a/packages/rdx-ui/src/components/layout/app-header.tsx
+++ b/packages/rdx-ui/src/components/layout/app-header.tsx
@@ -7,7 +7,7 @@ export const AppHeader = ({
   ...props
 }: PropsWithChildren<{ className?: string }>) => {
   return (
-    <div className={cn("app-header bg-background gap-4 px-6 pt-0 border-b bg-card", className)} {...props}>
+    <div className={cn("app-header gap-4 px-6 pt-0 border-b bg-background", className)} {...props}>
       {children}
     </div>
   );
diff --git a/packages/rdx-ui/src/components/layout/app-layout.tsx b/packages/rdx-ui/src/components/layout/app-layout.tsx
index 17efa962..5f36be74 100644
--- a/packages/rdx-ui/src/components/layout/app-layout.tsx
+++ b/packages/rdx-ui/src/components/layout/app-layout.tsx
@@ -14,7 +14,7 @@ export const AppLayout = () => {
     >
       <AppSidebar variant='inset' />
       {/* Aquí está el MAIN */}
-      <SidebarInset className='app-main bg-background'>
+      <SidebarInset className='app-main'>
         <Outlet />
       </SidebarInset>
     </SidebarProvider>