diff --git a/frontend/src/lib/components/dashboard/export/manifest/invoice-selection-table.svelte b/frontend/src/lib/components/dashboard/export/manifest/invoice-selection-table.svelte
index 49607b3a..149dfb35 100644
--- a/frontend/src/lib/components/dashboard/export/manifest/invoice-selection-table.svelte
+++ b/frontend/src/lib/components/dashboard/export/manifest/invoice-selection-table.svelte
@@ -6,6 +6,7 @@
 	import { Plus, Minus, Search, Loader2, Ghost } from 'lucide-svelte';
 	import type { Invoice } from '$lib/api/dashboard/a76/invoices';
 	import { fly } from 'svelte/transition';
+	import { getInvoiceTypeColor } from '$lib/utils';
 
 	let {
 		title = '',
@@ -101,7 +102,8 @@
 								)}
 							</Table.Cell>
 							<Table.Cell class="text-xs"
-								><Badge variant="outline" class="bg-background">{invoice.invoice_type}</Badge
+								><Badge variant="outline" class={getInvoiceTypeColor(invoice.invoice_type)}
+									>{invoice.invoice_type}</Badge
 								></Table.Cell
 							>
 							<Table.Cell>
diff --git a/frontend/src/lib/components/dashboard/invoices/columns.ts b/frontend/src/lib/components/dashboard/invoices/columns.ts
index ead71f11..f79c403c 100644
--- a/frontend/src/lib/components/dashboard/invoices/columns.ts
+++ b/frontend/src/lib/components/dashboard/invoices/columns.ts
@@ -3,6 +3,7 @@ import { renderComponent, renderSnippet } from "$lib/components/ui/data-table/in
 import { createRawSnippet } from "svelte";
 import DataTableActions from "./data-table-actions.svelte";
 import type { Invoice } from '$lib/api/dashboard/a76/invoices';
+import { getInvoiceTypeColor } from "$lib/utils";
 
 function formatDate(date?: string | null): string {
 	if (!date) return '-';
@@ -70,15 +71,18 @@ export function createColumns(
 			header: "Tipo Factura",
 			cell: ({ row }) => {
 				const invoiceType = row.original.invoice_type;
+				const colorClass = getInvoiceTypeColor(invoiceType);
 
-				const typeSnippet = createRawSnippet<[{ type?: string | null }]>((getType) => {
-					const { type } = getType();
+				const typeSnippet = createRawSnippet<[{ type?: string | null; colorClass: string }]>((getProps) => {
+					const { type, colorClass } = getProps();
 					return {
 						render: () =>
-							`<div class="text-sm font-medium">${type || '-'}</div>`
+							`<span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${colorClass}">
+                                ${type || '-'}
+                            </span>`
 					};
 				});
-				return renderSnippet(typeSnippet, { type: invoiceType });
+				return renderSnippet(typeSnippet, { type: invoiceType, colorClass });
 			}
 		},
 		{
diff --git a/frontend/src/lib/components/dashboard/invoices/details-dialog.svelte b/frontend/src/lib/components/dashboard/invoices/details-dialog.svelte
index 12bc4862..bf6bb7f7 100644
--- a/frontend/src/lib/components/dashboard/invoices/details-dialog.svelte
+++ b/frontend/src/lib/components/dashboard/invoices/details-dialog.svelte
@@ -4,6 +4,7 @@
 	import * as Tabs from '$lib/components/ui/tabs';
 	import { Badge } from '$lib/components/ui/badge';
 	import { Button } from '$lib/components/ui/button';
+	import { getInvoiceTypeColor } from '$lib/utils';
 
 	interface Props {
 		invoice: Invoice;
@@ -32,13 +33,17 @@
 	}
 </script>
 
-<Dialog.Root {open} onOpenChange={(v) => { open = v; if (!v) onClose(); }}>
+<Dialog.Root
+	{open}
+	onOpenChange={(v) => {
+		open = v;
+		if (!v) onClose();
+	}}
+>
 	<Dialog.Content class="max-w-5xl max-h-[90vh] overflow-y-auto">
 		<Dialog.Header>
 			<Dialog.Title>Detalles de Factura #{invoice?.id}</Dialog.Title>
-			<Dialog.Description>
-				Información completa de la factura
-			</Dialog.Description>
+			<Dialog.Description>Información completa de la factura</Dialog.Description>
 		</Dialog.Header>
 
 		{#if invoice}
@@ -74,7 +79,15 @@
 
 						<div>
 							<p class="text-sm font-medium text-muted-foreground">Tipo de Factura</p>
-							<p class="text-base">{invoice.invoice_type || '-'}</p>
+							<p class="text-base">
+								{#if invoice.invoice_type}
+									<Badge variant="outline" class={getInvoiceTypeColor(invoice.invoice_type)}
+										>{invoice.invoice_type}</Badge
+									>
+								{:else}
+									-
+								{/if}
+							</p>
 						</div>
 
 						<div>
@@ -102,10 +115,11 @@
 							<p class="text-base">{invoice.traffic_light_status || '-'}</p>
 						</div>
 
-					<div>
-						<p class="text-sm font-medium text-muted-foreground">CFDI UUID</p>
-						<p class="text-xs break-all">{invoice.cfdi_uuid || '-'}</p>
-					</div>						<div>
+						<div>
+							<p class="text-sm font-medium text-muted-foreground">CFDI UUID</p>
+							<p class="text-xs break-all">{invoice.cfdi_uuid || '-'}</p>
+						</div>
+						<div>
 							<p class="text-sm font-medium text-muted-foreground">Actualizado</p>
 							<p class="text-base">{invoice.is_updated ? 'Sí' : 'No'}</p>
 						</div>
@@ -196,11 +210,11 @@
 								<p class="text-base">{invoice.compliance_mx.edocument || '-'}</p>
 							</div>
 
-						<div class="col-span-2">
-							<p class="text-sm font-medium text-muted-foreground">Firma Electrónica</p>
-							<p class="text-xs break-all">{invoice.compliance_mx.electronic_signature || '-'}</p>
+							<div class="col-span-2">
+								<p class="text-sm font-medium text-muted-foreground">Firma Electrónica</p>
+								<p class="text-xs break-all">{invoice.compliance_mx.electronic_signature || '-'}</p>
+							</div>
 						</div>
-					</div>
 					{:else}
 						<p class="text-muted-foreground">No hay información de cumplimiento disponible.</p>
 					{/if}
@@ -362,7 +376,9 @@
 												</div>
 
 												<div>
-													<p class="text-sm font-medium text-muted-foreground">Descripción de Colores</p>
+													<p class="text-sm font-medium text-muted-foreground">
+														Descripción de Colores
+													</p>
 													<p class="text-base">{detail.colors_description || '-'}</p>
 												</div>
 
@@ -399,7 +415,9 @@
 													</div>
 
 													<div>
-														<p class="text-sm font-medium text-muted-foreground">Fecha de Cobranza</p>
+														<p class="text-sm font-medium text-muted-foreground">
+															Fecha de Cobranza
+														</p>
 														<p class="text-base">{formatDate(collection.collection_date)}</p>
 													</div>
 
@@ -427,9 +445,7 @@
 		{/if}
 
 		<Dialog.Footer>
-			<Button variant="outline" onclick={() => (open = false)}>
-				Cerrar
-			</Button>
+			<Button variant="outline" onclick={() => (open = false)}>Cerrar</Button>
 		</Dialog.Footer>
 	</Dialog.Content>
 </Dialog.Root>
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index c8ad1e74..e7df9728 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -12,19 +12,19 @@ export function cn(...inputs: ClassValue[]) {
  */
 export function getBackendAssetUrl(path: string | null | undefined): string {
 	if (!path) return '';
-	
+
 	// Si ya es una URL completa, retornarla tal cual
 	if (path.startsWith('http://') || path.startsWith('https://')) {
 		return path;
 	}
-	
+
 	// Eliminar la / inicial si existe para evitar //
 	const cleanPath = path.startsWith('/') ? path.slice(1) : path;
-	
+
 	// Obtener la base URL del API y limpiar el / final si existe
 	let baseUrl = import.meta.env.VITE_API_URL || 'http://localhost:8000';
 	baseUrl = baseUrl.replace(/\/+$/, ''); // Eliminar todas las / del final
-	
+
 	return `${baseUrl}/${cleanPath}`;
 }
 
@@ -34,3 +34,39 @@ export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
 export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "children"> : T;
 export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
 export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };
+
+/**
+ * Obtiene el color del badge según el tipo de factura (SCAII Standards)
+ */
+export function getInvoiceTypeColor(type?: string | null): string {
+	if (!type) return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200';
+
+	const normalizedType = type.toLowerCase().trim();
+
+	// Impo tem (Rojo)
+	if (normalizedType.includes('impo tem') || normalizedType === 'tem') {
+		return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
+	}
+	// Impo Def (Verde)
+	if (normalizedType.includes('impo def') || normalizedType === 'def') {
+		return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
+	}
+	// Comp Mex (Morado)
+	if (normalizedType.includes('comp mex') || normalizedType === 'mex') {
+		return 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200';
+	}
+	// Cam. Reg. (Azul)
+	if (normalizedType.includes('cam. reg.') || normalizedType.includes('cam reg') || normalizedType === 'cr') {
+		return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
+	}
+	// Expo. (Azul)
+	if (normalizedType.includes('expo') || normalizedType === 'exdef' || normalizedType === 'pterm') {
+		return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
+	}
+	// Imp. Rep. (Azul Claro)
+	if (normalizedType.includes('imp. rep.') || normalizedType.includes('imp rep') || normalizedType === 'repar') {
+		return 'bg-sky-100 text-sky-800 dark:bg-sky-900 dark:text-sky-200';
+	}
+
+	return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200';
+}