diff --git a/frontend/src/lib/api/dashboard/a76/customs-brokers.ts b/frontend/src/lib/api/dashboard/a76/customs-brokers.ts
index 4fe32672..981ef884 100644
--- a/frontend/src/lib/api/dashboard/a76/customs-brokers.ts
+++ b/frontend/src/lib/api/dashboard/a76/customs-brokers.ts
@@ -117,7 +117,7 @@ export const customsBrokersApi = {
      * Elimina un agente aduanal
      */
     delete: (brokerKey: string, companyId: string) => {
-        return api.delete<CustomsBroker>(`/v1/a76/customs-brokers/${brokerKey}/?company_id=${companyId}`);
+        return api.delete<CustomsBroker>(`/v1/a76/customs-brokers/${brokerKey}?company_id=${companyId}`);
     },
 
 
diff --git a/frontend/src/lib/components/dashboard/customs_brokers/data-table.svelte b/frontend/src/lib/components/dashboard/customs_brokers/data-table.svelte
index ca2d16aa..abbbbaac 100644
--- a/frontend/src/lib/components/dashboard/customs_brokers/data-table.svelte
+++ b/frontend/src/lib/components/dashboard/customs_brokers/data-table.svelte
@@ -1,18 +1,17 @@
 <script lang="ts" generics="TData, TValue">
-	import {
-		type ColumnDef,
-		getCoreRowModel
-	} from "@tanstack/table-core";
-	import { createSvelteTable, FlexRender } from "$lib/components/ui/data-table/index.js";
-	import * as Table from "$lib/components/ui/table/index.js";
+	import { type ColumnDef, getCoreRowModel } from '@tanstack/table-core';
+	import { createSvelteTable, FlexRender } from '$lib/components/ui/data-table/index.js';
+	import * as Table from '$lib/components/ui/table/index.js';
 
 	type DataTableProps<TData, TValue> = {
 		columns: ColumnDef<TData, TValue>[];
 		data: TData[];
+		onRowClick?: (row: TData) => void;
+		selectedId?: string | number | null;
+		idField?: keyof TData;
 	};
 
-	let { data, columns }: DataTableProps<TData, TValue> = $props();
-
+	let { data, columns, onRowClick, selectedId, idField }: DataTableProps<TData, TValue> = $props();
 
 	const table = $derived(
 		createSvelteTable({
@@ -45,13 +44,17 @@
 
 			<Table.Body>
 				{#each table.getRowModel().rows as row (row.id)}
-					<Table.Row>
+					<Table.Row
+						onclick={() => onRowClick?.(row.original)}
+						class="cursor-pointer transition-colors hover:bg-muted/50 {selectedId &&
+						idField &&
+						row.original[idField] === selectedId
+							? 'bg-muted'
+							: ''}"
+					>
 						{#each row.getVisibleCells() as cell (cell.id)}
 							<Table.Cell>
-								<FlexRender
-									content={cell.column.columnDef.cell}
-									context={cell.getContext()}
-								/>
+								<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
 							</Table.Cell>
 						{/each}
 					</Table.Row>
diff --git a/frontend/src/routes/dashboard/customs_brokers/+page.svelte b/frontend/src/routes/dashboard/customs_brokers/+page.svelte
index 109ec1b9..5a92b518 100644
--- a/frontend/src/routes/dashboard/customs_brokers/+page.svelte
+++ b/frontend/src/routes/dashboard/customs_brokers/+page.svelte
@@ -18,10 +18,15 @@
 		customsSectionsApi,
 		type CustomsSection
 	} from '$lib/api/dashboard/reference_data/customs_sections';
-	import DataTable from '$lib/components/dashboard/reference_data/customs_sections/data-table.svelte';
-	import { createColumns } from '$lib/components/dashboard/reference_data/customs_sections/columns.js';
+	import SectionsDataTable from '$lib/components/dashboard/reference_data/customs_sections/data-table.svelte';
+	import { createColumns as createSectionColumns } from '$lib/components/dashboard/reference_data/customs_sections/columns.js';
 	import * as Card from '$lib/components/ui/card';
 
+	// Specialized Broker Components
+	import BrokerDataTable from '$lib/components/dashboard/customs_brokers/data-table.svelte';
+	import { createColumns as createBrokerColumns } from '$lib/components/dashboard/customs_brokers/columns';
+	import DeleteDialog from '$lib/components/dashboard/customs_brokers/delete-dialog.svelte';
+
 	let { data }: { data: any } = $props();
 
 	// Global State
@@ -31,6 +36,7 @@
 	let items = $state<CustomsBroker[]>(data.items || []);
 	let selectedItem = $state<CustomsBroker | null>(null);
 	let isLoading = $state(false);
+	let showDeleteDialog = $state(false);
 
 	// Server-side filtering/pagination (for Brokers)
 	let allItemsRaw = $state<CustomsBroker[]>(data.brokers || []);
@@ -114,18 +120,13 @@
 	}
 	async function handleDelete() {
 		if (!selectedItem || !companyStore.activeCompany?.id) return;
-		if (!confirm('¿Estás seguro de eliminar este Agente Aduanal?')) return;
-		try {
-			await customsBrokersApi.delete(
-				selectedItem.broker_key,
-				companyStore.activeCompany.id.toString()
-			);
-			toast.success('Agente eliminado');
-			selectedItem = null;
-			loadItems();
-		} catch (e) {
-			toast.error('Error al eliminar');
-		}
+		showDeleteDialog = true;
+	}
+
+	function handleActionSuccess() {
+		loadItems();
+		selectedItem = null;
+		toast.success('Cambios aplicados correctamente');
 	}
 
 	// Customs Sections Actions
@@ -178,10 +179,12 @@
 		})
 	);
 
-	const sectionsColumns = createColumns(() => {
+	const sectionsColumns = createSectionColumns(() => {
 		sectionsPage = 1;
 		loadSections();
 	});
+
+	const brokerColumns = createBrokerColumns(handleActionSuccess);
 </script>
 
 <div class="flex flex-col h-[calc(100vh-4rem)] p-4 gap-4 pb-15">
@@ -264,45 +267,13 @@
 					</div>
 
 					<div class="flex-1 overflow-auto bg-card">
-						<table class="w-full text-sm">
-							<thead class="bg-muted text-muted-foreground border-b">
-								<tr>
-									<th class="px-3 py-2 text-left w-24">Patente</th>
-									<th class="px-3 py-2 text-left">Nombre</th>
-									<th class="px-3 py-2 text-left">Licencia</th>
-									<th class="px-3 py-2 text-left">Ciudad</th>
-								</tr>
-							</thead>
-							<tbody>
-								{#if isLoading}
-									<tr
-										><td colspan="4" class="text-center py-8 text-muted-foreground">Cargando...</td
-										></tr
-									>
-								{:else if paginatedItems.length === 0}
-									<tr
-										><td colspan="4" class="text-center py-8 text-muted-foreground"
-											>No se encontraron registros</td
-										></tr
-									>
-								{:else}
-									{#each paginatedItems as item (item.broker_key)}
-										<tr
-											class="border-b cursor-pointer transition-colors hover:bg-muted/50 {selectedItem?.broker_key ===
-											item.broker_key
-												? 'bg-muted'
-												: ''}"
-											onclick={() => selectItem(item)}
-										>
-											<td class="px-3 py-2 font-mono font-bold">{item.broker_key}</td>
-											<td class="px-3 py-2 font-medium">{item.name || '-'}</td>
-											<td class="px-3 py-2 text-muted-foreground">{item.license || '-'}</td>
-											<td class="px-3 py-2 text-muted-foreground">{item.city || '-'}</td>
-										</tr>
-									{/each}
-								{/if}
-							</tbody>
-						</table>
+						<BrokerDataTable
+							data={paginatedItems}
+							columns={brokerColumns}
+							onRowClick={selectItem}
+							selectedId={selectedItem?.broker_key}
+							idField="broker_key"
+						/>
 					</div>
 					<!-- Simple Pagination Controls -->
 					{#if totalItems > pageSize}
@@ -434,7 +405,7 @@
 			<!-- Reusing DataTable from Customs Sections -->
 			<Card.Root class="h-full flex flex-col border-none shadow-none">
 				<Card.Content class="flex-1 p-0">
-					<DataTable
+					<SectionsDataTable
 						data={sections}
 						columns={sectionsColumns}
 						loading={loadingSections}
@@ -477,3 +448,5 @@
 		</div>
 	</div>
 </div>
+
+<DeleteDialog bind:open={showDeleteDialog} broker={selectedItem} onSuccess={handleActionSuccess} />