diff --git a/frontend/src/routes/dashboard/clients_and_providers/+page.svelte b/frontend/src/routes/dashboard/clients_and_providers/+page.svelte
index 2d25421a..ca02a3f0 100644
--- a/frontend/src/routes/dashboard/clients_and_providers/+page.svelte
+++ b/frontend/src/routes/dashboard/clients_and_providers/+page.svelte
@@ -195,7 +195,7 @@
 				Gestiona el catálogo de clientes y proveedores de tu empresa
 			</p>
 		</div>
-		<Button onclick={handleCreateClick}>
+		<Button href="/dashboard/clients_and_providers/new">
 			<Plus class="mr-2" size={16} />
 			Nuevo Cliente/Proveedor
 		</Button>
diff --git a/frontend/src/routes/dashboard/clients_and_providers/new/+page.svelte b/frontend/src/routes/dashboard/clients_and_providers/new/+page.svelte
new file mode 100644
index 00000000..2888f15a
--- /dev/null
+++ b/frontend/src/routes/dashboard/clients_and_providers/new/+page.svelte
@@ -0,0 +1,438 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+	import { Button } from "$lib/components/ui/button";
+	import { Input } from "$lib/components/ui/input";
+	import { Label } from "$lib/components/ui/label";
+	import * as Card from "$lib/components/ui/card";
+	import * as Select from "$lib/components/ui/select";
+	import { clientsProvidersApi, type CreateClientProviderData } from "$lib/api/dashboard/a76/clients-providers";
+	import { companyStore } from "$lib/stores/company.svelte";
+	import { goto } from "$app/navigation";
+	import { ArrowLeft } from "lucide-svelte";
+
+	// Sincronizar token de cookies a localStorage al montar el componente
+	onMount(() => {
+		if (browser) {
+			const getCookie = (name: string): string | null => {
+				const value = `; ${document.cookie}`;
+				const parts = value.split(`; ${name}=`);
+				if (parts.length === 2) return parts.pop()?.split(';').shift() || null;
+				return null;
+			};
+
+			const cookieToken = getCookie('access_token');
+			const localToken = localStorage.getItem('access_token');
+
+			if (cookieToken && cookieToken !== localToken) {
+				localStorage.setItem('access_token', cookieToken);
+			}
+
+			const cookieRefreshToken = getCookie('refresh_token');
+			const localRefreshToken = localStorage.getItem('refresh_token');
+
+			if (cookieRefreshToken && cookieRefreshToken !== localRefreshToken) {
+				localStorage.setItem('refresh_token', cookieRefreshToken);
+			}
+		}
+	});
+
+	let formData = $state({
+		rfc: "",
+		name: "",
+		curp: "",
+		residence_country: "",
+		domicile_fiscal: "",
+		foreign_tax_id: "",
+		client_or_provider: "client",
+		is_active: true,
+		// Address fields
+		street: "",
+		neighborhood: "",
+		city: "",
+		state: "",
+		country: "",
+		zip_code: "",
+		// Programs fields
+		program_code: "",
+		authorization_date: ""
+	});
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	// Formulario inicializado vacío para nuevo registro
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		
+		if (!companyStore.activeCompany) {
+			error = "No hay compañía seleccionada";
+			return;
+		}
+
+		// Validaciones básicas
+		if (!formData.rfc.trim()) {
+			error = "El RFC es obligatorio";
+			return;
+		}
+
+		if (!formData.name.trim()) {
+			error = "El nombre es obligatorio";
+			return;
+		}
+
+		loading = true;
+		error = null;
+
+		// Verificar que tenemos token de acceso
+		const token = localStorage.getItem('access_token');
+		if (!token) {
+			error = "No hay token de acceso. Recargando página...";
+			setTimeout(() => {
+				window.location.reload();
+			}, 1500);
+			loading = false;
+			return;
+		}
+
+		try {
+			const payload: CreateClientProviderData = {
+				rfc: formData.rfc,
+				name: formData.name,
+				curp: formData.curp || null,
+				residence_country: formData.residence_country || null,
+				domicile_fiscal: formData.domicile_fiscal || null,
+				foreign_tax_id: formData.foreign_tax_id || null,
+				client_or_provider: formData.client_or_provider as "client" | "provider" | "both" | null,
+				is_active: formData.is_active,					
+				address: {
+					street: formData.street || null,
+					neighborhood: formData.neighborhood || null,
+					city: formData.city || null,
+					state: formData.state || null,
+					country: formData.country || null,
+					zip_code: formData.zip_code || null,                    
+				},
+				programs: {
+					program_code: formData.program_code || null,
+					authorization_date: formData.authorization_date || null,                        
+				}
+			};
+
+			const response = await clientsProvidersApi.create(companyStore.activeCompany.id, payload);
+
+			if (response.error) {
+				console.error('🔧 Error del API:', response);
+				if (response.status === 401) {
+					error = 'Sesión expirada. Recargando página...';
+					setTimeout(() => {
+						window.location.reload();
+					}, 1500);
+				} else if (response.status === 403) {
+					error = 'No tienes permisos para crear clientes/proveedores';
+				} else if (response.status === 500) {
+					error = 'Error interno del servidor. Intenta nuevamente.';
+				} else if (response.status === 0 || !response.status) {
+					error = 'Error de conexión. Verifica tu internet y que el servidor esté corriendo.';
+				} else {
+					error = response.error || 'Error desconocido al guardar';
+				}
+				return;
+			}
+
+			// Éxito - redirigir a la lista
+			goto('/dashboard/clients_and_providers');
+		} catch (e) {
+			console.error("🔧 Error en catch:", e);
+			if (e instanceof TypeError && e.message.includes('fetch')) {
+				error = "Error de conexión: No se puede conectar con el servidor";
+			} else {
+				error = e instanceof Error ? e.message : "Error al guardar";
+			}
+		} finally {
+			loading = false;
+		}
+	}
+
+	function resetForm() {
+		formData = {
+			rfc: "",
+			name: "",
+			curp: "",
+			residence_country: "",
+			domicile_fiscal: "",
+			foreign_tax_id: "",
+			client_or_provider: "client",
+			is_active: true,
+			street: "",
+			neighborhood: "",
+			city: "",
+			state: "",
+			country: "",
+			zip_code: "",
+			program_code: "",
+			authorization_date: ""
+	}
+}
+</script>
+
+<div class="space-y-6">
+	<!-- Header -->
+	<div class="flex items-center gap-4">
+		<Button variant="ghost" size="icon" onclick={() => goto('/dashboard/clients_and_providers')}>
+			<ArrowLeft class="h-4 w-4" />
+		</Button>
+		<div>
+			<h1 class="text-3xl font-bold tracking-tight">Nuevo Cliente/Proveedor</h1>
+			<p class="text-muted-foreground">
+				Completa los datos para crear un nuevo cliente o proveedor
+			</p>
+		</div>
+	</div>
+
+	<!-- Formulario -->
+	<Card.Root>
+		<Card.Header>
+			<Card.Title>Información del Cliente/Proveedor</Card.Title>
+			<Card.Description>
+				Todos los campos marcados con * son obligatorios
+			</Card.Description>
+		</Card.Header>
+		<Card.Content>
+			<form id="client-provider-form" onsubmit={handleSubmit} class="space-y-6">
+				{#if error}
+					<div class="rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+						{error}
+					</div>
+				{/if}
+
+			<!-- Información básica -->
+			<div class="space-y-4">
+				<h3 class="text-sm font-semibold">Información Básica</h3>
+				
+				<div class="grid grid-cols-2 gap-4">
+					<div class="space-y-2">
+						<Label for="rfc">RFC *</Label>
+						<Input
+							id="rfc"
+							bind:value={formData.rfc}
+							placeholder="Ej: XAXX010101000"
+							maxlength={13}
+							required
+							disabled={loading}
+						/>
+					</div>
+
+					<div class="space-y-2">
+						<Label for="client_or_provider">Tipo *</Label>
+						<Select.Root value={formData.client_or_provider} onValueChange={(value) => (formData.client_or_provider = value || "client")}>
+							<Select.Trigger>
+								<Select.Value />
+							</Select.Trigger>
+							<Select.Content>
+								<Select.Item value="client">Cliente</Select.Item>
+								<Select.Item value="provider">Proveedor</Select.Item>
+								<Select.Item value="both">Ambos</Select.Item>
+							</Select.Content>
+						</Select.Root>
+					</div>
+				</div>
+
+				<div class="space-y-2">
+					<Label for="name">Nombre / Razón Social *</Label>
+					<Input
+						id="name"
+						bind:value={formData.name}
+						placeholder="Nombre completo o razón social"
+						maxlength={256}
+						required
+						disabled={loading}
+					/>
+				</div>
+
+				<div class="grid grid-cols-2 gap-4">
+					<div class="space-y-2">
+						<Label for="curp">CURP</Label>
+						<Input
+							id="curp"
+							bind:value={formData.curp}
+							placeholder="Ej: XAXX010101HDFXXX00"
+							maxlength={18}
+							disabled={loading}
+						/>
+					</div>
+
+					<div class="space-y-2">
+						<Label for="residence_country">País de Residencia</Label>
+						<Input
+							id="residence_country"
+							bind:value={formData.residence_country}
+							placeholder="Ej: México"
+							maxlength={64}
+							disabled={loading}
+						/>
+					</div>
+				</div>
+			</div>
+
+			<!-- Información fiscal -->
+			<div class="space-y-4">
+				<h3 class="text-sm font-semibold">Información Fiscal</h3>
+				
+				<div class="space-y-2">
+					<Label for="domicile_fiscal">Domicilio Fiscal</Label>
+					<Input
+						id="domicile_fiscal"
+						bind:value={formData.domicile_fiscal}
+						placeholder="Domicilio fiscal completo"
+						maxlength={256}
+						disabled={loading}
+					/>
+				</div>
+
+				<div class="space-y-2">
+					<Label for="foreign_tax_id">ID Fiscal Extranjero</Label>
+					<Input
+						id="foreign_tax_id"
+						bind:value={formData.foreign_tax_id}
+						placeholder="Para contribuyentes extranjeros"
+						maxlength={64}
+						disabled={loading}
+					/>
+				</div>
+			</div>
+
+			<!-- Dirección -->
+			<div class="space-y-4">
+				<h3 class="text-sm font-semibold">Dirección</h3>
+				
+				<div class="space-y-2">
+					<Label for="street">Calle</Label>
+					<Input
+						id="street"
+						bind:value={formData.street}
+						placeholder="Calle y número"
+						maxlength={256}
+						disabled={loading}
+					/>
+				</div>
+
+				<div class="grid grid-cols-2 gap-4">
+					<div class="space-y-2">
+						<Label for="neighborhood">Colonia</Label>
+						<Input
+							id="neighborhood"
+							bind:value={formData.neighborhood}
+							placeholder="Colonia o barrio"
+							maxlength={128}
+							disabled={loading}
+						/>
+					</div>
+
+					<div class="space-y-2">
+						<Label for="zip_code">Código Postal</Label>
+						<Input
+							id="zip_code"
+							bind:value={formData.zip_code}
+							placeholder="Ej: 12345"
+							maxlength={10}
+							disabled={loading}
+						/>
+					</div>
+				</div>
+
+				<div class="grid grid-cols-2 gap-4">
+					<div class="space-y-2">
+						<Label for="city">Ciudad</Label>
+						<Input
+							id="city"
+							bind:value={formData.city}
+							placeholder="Ciudad"
+							maxlength={128}
+							disabled={loading}
+						/>
+					</div>
+
+					<div class="space-y-2">
+						<Label for="state">Estado</Label>
+						<Input
+							id="state"
+							bind:value={formData.state}
+							placeholder="Estado o provincia"
+							maxlength={128}
+							disabled={loading}
+						/>
+					</div>
+				</div>
+
+				<div class="space-y-2">
+					<Label for="country">País</Label>
+					<Input
+						id="country"
+						bind:value={formData.country}
+						placeholder="País"
+						maxlength={64}
+						disabled={loading}
+					/>
+				</div>
+			</div>
+
+			<!-- Programas -->
+			<div class="space-y-4">
+				<h3 class="text-sm font-semibold">Programas</h3>
+				
+				<div class="grid grid-cols-2 gap-4">
+					<div class="space-y-2">
+						<Label for="program_code">Código de Programa</Label>
+						<Input
+							id="program_code"
+							bind:value={formData.program_code}
+							placeholder="Código del programa"
+							maxlength={32}
+							disabled={loading}
+						/>
+					</div>
+
+					<div class="space-y-2">
+						<Label for="authorization_date">Fecha de Autorización</Label>
+						<Input
+							id="authorization_date"
+							type="date"
+							bind:value={formData.authorization_date}
+							disabled={loading}
+						/>
+					</div>
+				</div>
+			</div>
+			</form>
+		</Card.Content>
+	</Card.Root>
+</div>
+
+<!-- Botones fijos en la parte inferior -->
+<div class="fixed bottom-0 right-0 left-0 md:left-64 p-4 border-t bg-background/95 backdrop-blur z-50 flex justify-end gap-4 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)]">
+	<Button type="button" variant="outline" onclick={() => goto('/dashboard/clients_and_providers')} disabled={loading}>
+		Cancelar
+	</Button>
+	<Button type="button" variant="outline" onclick={resetForm} disabled={loading}>
+		Limpiar
+	</Button>
+	<Button 
+		type="submit" 
+		form="client-provider-form"
+		disabled={loading}
+	>
+		{#if loading}
+			<div class="flex items-center gap-2">
+				<div class="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"></div>
+				Guardando...
+			</div>
+		{:else}
+			Crear Cliente/Proveedor
+		{/if}
+	</Button>
+</div>
+
+<!-- Espaciado para evitar que los botones fijos oculten contenido -->
+<div class="h-20"></div>
diff --git a/frontend/src/routes/dashboard/customs_brokers/+page.svelte b/frontend/src/routes/dashboard/customs_brokers/+page.svelte
index fe9682fd..f90963cd 100644
--- a/frontend/src/routes/dashboard/customs_brokers/+page.svelte
+++ b/frontend/src/routes/dashboard/customs_brokers/+page.svelte
@@ -175,7 +175,7 @@
 				Gestiona el catálogo de agentes aduanales
 			</p>
 		</div>
-		<Button onclick={handleCreateClick}>
+		<Button href="/dashboard/customs_brokers/new" >
 			<Plus class="mr-2" size={16} />
 			Nuevo Agente Aduanal
 		</Button>
diff --git a/frontend/src/routes/dashboard/customs_brokers/new/+page.svelte b/frontend/src/routes/dashboard/customs_brokers/new/+page.svelte
new file mode 100644
index 00000000..8777c854
--- /dev/null
+++ b/frontend/src/routes/dashboard/customs_brokers/new/+page.svelte
@@ -0,0 +1,395 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import { Input } from "$lib/components/ui/input";
+	import { Label } from "$lib/components/ui/label";
+	import * as Card from "$lib/components/ui/card";
+	import { customsBrokersApi, type CreateCustomsBrokerData } from "$lib/api/dashboard/a76/customs-brokers";
+	import { companyStore } from "$lib/stores/company.svelte";
+	import { goto } from "$app/navigation";
+	import { ArrowLeft } from "lucide-svelte";
+    
+
+	// Eliminar props de modal ya que ahora es una página
+	// let { open = $bindable(false), onSuccess }: { open: boolean; onSuccess?: () => void; } = $props();
+
+
+	let formData = $state({
+		broker_key: "",
+		name: "",
+		type: "",
+		address: "",
+		postal_code: "",
+		city: "",
+		state: "",
+		phone: "",
+		fax: "",
+		email: "",
+		country: "",
+		tax_id: "",
+		personal_id: "",
+		position: "",
+		license: "",
+		company: "",
+		contact: ""
+	});
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		
+		if (!companyStore.activeCompany) {
+			error = "No hay compañía seleccionada";
+			return;
+		}
+
+		loading = true;
+		error = null;
+
+		try {
+			const payload: CreateCustomsBrokerData = {
+				broker_key: formData.broker_key,
+				name: formData.name || null,
+				type: formData.type || null,
+				address: formData.address || null,
+				postal_code: formData.postal_code || null,
+				city: formData.city || null,
+				state: formData.state || null,
+				phone: formData.phone || null,
+				fax: formData.fax || null,
+				email: formData.email || null,
+				country: formData.country || null,
+				tax_id: formData.tax_id || null,
+				personal_id: formData.personal_id || null,
+				position: formData.position || null,
+				license: formData.license || null,
+				company: formData.company || null,
+				contact: formData.contact || null,
+				tenant_id: "1", // TODO: Get from user context
+				company_id: companyStore.activeCompany.id.toString()
+			};
+
+			const response = await customsBrokersApi.create(payload);
+
+			if (response.error) {
+                if (response.status === 409) {
+                    error = 'Ya existe un agente aduanal con la clave proporcionada.';
+                } else
+				if (response.status === 401) {
+					error = 'Sesión expirada. Recargando página...';
+					setTimeout(() => {
+						window.location.reload();
+					}, 1500);
+				} else {
+					error = response.error;
+				}
+				return;
+			}
+
+			// Éxito - redirigir a la lista
+			goto('/dashboard/customs_brokers');
+		} catch (e) {
+			error = e instanceof Error ? e.message : "Error al guardar";
+			console.error("Error saving:", e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function resetForm() {
+		// Limpiar formulario
+		formData = {
+			broker_key: "",
+			name: "",
+			type: "",
+			address: "",
+			postal_code: "",
+			city: "",
+			state: "",
+			phone: "",
+			fax: "",
+			email: "",
+			country: "",
+			tax_id: "",
+			personal_id: "",
+			position: "",
+			license: "",
+			company: "",
+			contact: ""
+		};
+		error = null;
+	}
+</script>
+
+<div class="space-y-6">
+	<!-- Header -->
+	<div class="flex items-center gap-4">
+		<Button variant="ghost" size="icon" onclick={() => goto('/dashboard/customs_brokers')}>
+			<ArrowLeft class="h-4 w-4" />
+		</Button>
+		<div>
+			<h1 class="text-3xl font-bold tracking-tight">Nuevo Agente Aduanal</h1>
+			<p class="text-muted-foreground">
+				Completa los datos para crear un nuevo agente aduanal
+			</p>
+		</div>
+	</div>
+
+	<!-- Formulario -->
+	<Card.Root>
+		<Card.Header>
+			<Card.Title>Información del Agente Aduanal</Card.Title>
+			<Card.Description>
+				Todos los campos marcados con * son obligatorios
+			</Card.Description>
+		</Card.Header>
+		<Card.Content>
+			<form onsubmit={handleSubmit} class="space-y-6">
+			{#if error}
+				<div class="rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+					{error}
+				</div>
+			{/if}
+
+			<!-- Información básica -->
+			<div class="space-y-4">
+				<h3 class="text-sm font-semibold">Información Básica</h3>
+				
+				<div class="grid grid-cols-2 gap-4">
+					<div class="space-y-2">
+						<Label for="broker_key">Clave *</Label>
+						<Input
+							id="broker_key"
+							bind:value={formData.broker_key}
+							placeholder="Ej: 12345"
+							maxlength={5}
+							required
+							disabled={loading}
+						/>
+					</div>
+
+					<div class="space-y-2">
+						<Label for="type">Tipo</Label>
+						<Input
+							id="type"
+							bind:value={formData.type}
+							placeholder="Tipo de agente"
+							maxlength={9}
+							disabled={loading}
+						/>
+					</div>
+				</div>
+
+				<div class="space-y-2">
+					<Label for="name">Nombre</Label>
+					<Input
+						id="name"
+						bind:value={formData.name}
+						placeholder="Nombre del agente aduanal"
+						maxlength={80}
+						disabled={loading}
+					/>
+				</div>
+
+				<div class="grid grid-cols-2 gap-4">
+					<div class="space-y-2">
+						<Label for="license">Patente</Label>
+						<Input
+							id="license"
+							bind:value={formData.license}
+							placeholder="Número de patente"
+							maxlength={4}
+							disabled={loading}
+						/>
+					</div>
+
+					<div class="space-y-2">
+						<Label for="company">Empresa</Label>
+						<Input
+							id="company"
+							bind:value={formData.company}
+							placeholder="Empresa del agente"
+							maxlength={200}
+							disabled={loading}
+						/>
+					</div>
+				</div>
+			</div>
+
+			<!-- Información de contacto -->
+			<div class="space-y-4">
+				<h3 class="text-sm font-semibold">Información de Contacto</h3>
+				
+				<div class="grid grid-cols-2 gap-4">
+					<div class="space-y-2">
+						<Label for="phone">Teléfono</Label>
+						<Input
+							id="phone"
+							bind:value={formData.phone}
+							placeholder="Número telefónico"
+							maxlength={30}
+							disabled={loading}
+						/>
+					</div>
+
+					<div class="space-y-2">
+						<Label for="fax">Fax</Label>
+						<Input
+							id="fax"
+							bind:value={formData.fax}
+							placeholder="Número de fax"
+							maxlength={30}
+							disabled={loading}
+						/>
+					</div>
+				</div>
+
+				<div class="space-y-2">
+					<Label for="email">Email</Label>
+					<Input
+						id="email"
+						type="email"
+						bind:value={formData.email}
+						placeholder="correo@ejemplo.com"
+						maxlength={100}
+						disabled={loading}
+					/>
+				</div>
+
+				<div class="space-y-2">
+					<Label for="contact">Contacto</Label>
+					<Input
+						id="contact"
+						bind:value={formData.contact}
+						placeholder="Nombre del contacto"
+						maxlength={80}
+						disabled={loading}
+					/>
+				</div>
+			</div>
+
+			<!-- Dirección -->
+			<div class="space-y-4">
+				<h3 class="text-sm font-semibold">Dirección</h3>
+				
+				<div class="space-y-2">
+					<Label for="address">Dirección</Label>
+					<Input
+						id="address"
+						bind:value={formData.address}
+						placeholder="Calle y número"
+						maxlength={1500}
+						disabled={loading}
+					/>
+				</div>
+
+				<div class="grid grid-cols-3 gap-4">
+					<div class="space-y-2">
+						<Label for="postal_code">Código Postal</Label>
+						<Input
+							id="postal_code"
+							bind:value={formData.postal_code}
+							placeholder="C.P."
+							maxlength={15}
+							disabled={loading}
+						/>
+					</div>
+
+					<div class="space-y-2">
+						<Label for="city">Ciudad</Label>
+						<Input
+							id="city"
+							bind:value={formData.city}
+							placeholder="Ciudad"
+							maxlength={30}
+							disabled={loading}
+						/>
+					</div>
+
+					<div class="space-y-2">
+						<Label for="state">Estado</Label>
+						<Input
+							id="state"
+							bind:value={formData.state}
+							placeholder="Estado"
+							maxlength={30}
+							disabled={loading}
+						/>
+					</div>
+				</div>
+
+				<div class="space-y-2">
+					<Label for="country">País</Label>
+					<Input
+						id="country"
+						bind:value={formData.country}
+						placeholder="País"
+						maxlength={3}
+						disabled={loading}
+					/>
+				</div>
+			</div>
+
+			<!-- Información fiscal -->
+			<div class="space-y-4">
+				<h3 class="text-sm font-semibold">Información Fiscal</h3>
+				
+				<div class="grid grid-cols-2 gap-4">
+					<div class="space-y-2">
+						<Label for="tax_id">RFC</Label>
+						<Input
+							id="tax_id"
+							bind:value={formData.tax_id}
+							placeholder="RFC"
+							maxlength={30}
+							disabled={loading}
+						/>
+					</div>
+
+					<div class="space-y-2">
+						<Label for="personal_id">CURP</Label>
+						<Input
+							id="personal_id"
+							bind:value={formData.personal_id}
+							placeholder="CURP"
+							maxlength={20}
+							disabled={loading}
+						/>
+					</div>
+				</div>
+
+				<div class="space-y-2">
+					<Label for="position">Posición</Label>
+					<Input
+						id="position"
+						bind:value={formData.position}
+						placeholder="Cargo o posición"
+						maxlength={30}
+						disabled={loading}
+					/>
+				</div>
+			</div>
+
+				<div class="fixed bottom-0 right-0 left-0 md:left-64 py-2 px-4 border-t bg-background/95 backdrop-blur z-50 flex justify-end gap-4 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)]">
+					<Button type="button" variant="outline" onclick={() => goto('/dashboard/customs_brokers')} disabled={loading}>
+						Cancelar
+					</Button>
+					<Button type="button" variant="outline" onclick={resetForm} disabled={loading}>
+						Limpiar
+					</Button>
+					<Button type="submit" disabled={loading}>
+						{#if loading}
+							<div class="flex items-center gap-2">
+								<div class="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"></div>
+								Guardando...
+							</div>
+						{:else}
+							Crear Agente Aduanal
+						{/if}
+					</Button>
+				</div>
+			</form>
+		</Card.Content>
+	</Card.Root>
+</div>