diff --git a/frontend/src/lib/components/dashboard/goods/parts/columns.ts b/frontend/src/lib/components/dashboard/goods/parts/columns.ts
index 005703e6..794e0322 100644
--- a/frontend/src/lib/components/dashboard/goods/parts/columns.ts
+++ b/frontend/src/lib/components/dashboard/goods/parts/columns.ts
@@ -19,42 +19,19 @@ function formatCurrency(amount: number | null, currency: string | null): string
 }
 
 export type GoodsPartsColumnOptions = {
-	canEdit?: boolean;
-	canDelete?: boolean;
+    canEdit?: boolean;
+    canDelete?: boolean;
 };
 
 export function createColumns(
-	onSuccess?: () => void,
-	options: GoodsPartsColumnOptions = {}
+    onSuccess?: () => void,
+    options: GoodsPartsColumnOptions = {}
 ): ColumnDef<Part>[] {
-	const { canEdit = false, canDelete = false } = options;
+    const { canEdit = false, canDelete = false } = options;
     return [
         {
             id: "select",
-            header: ({ table }) => {
-                const headerCheckbox = createRawSnippet<[{ table: import("@tanstack/table-core").Table<Part> }]>((getTable) => {
-                    const { table: t } = getTable();
-                    return {
-                        render: () => {
-                            const input = document.createElement('input');
-                            input.type = 'checkbox';
-                            input.checked = t.getIsAllPageRowsSelected();
-                            input.indeterminate = t.getIsSomePageRowsSelected();
-                            input.onchange = (e) => t.toggleAllPageRowsSelected(!!(e.target as HTMLInputElement).checked);
-                            // Usamos el componente Checkbox si es posible, pero para snippets crudos en TanStack 5 
-                            // a veces es más directo un input o un Snippet de Svelte.
-                            // Aquí usaremos renderComponent para el Checkbox real.
-                            return "<span></span>"; 
-                        }
-                    };
-                });
-                return renderComponent(Checkbox, {
-                    checked: table.getIsAllPageRowsSelected(),
-                    indeterminate: table.getIsSomePageRowsSelected(),
-                    onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value),
-                    "aria-label": "Select all"
-                });
-            },
+            header: "", // Cabecera vacía para igualar a Clases
             cell: ({ row }) => {
                 return renderComponent(Checkbox, {
                     checked: row.getIsSelected(),
@@ -62,6 +39,7 @@ export function createColumns(
                     "aria-label": "Select row"
                 });
             },
+            size: 40,
             enableSorting: false,
             enableHiding: false
         },
@@ -74,16 +52,15 @@ export function createColumns(
                 const statusSnippet = createRawSnippet<[{ active: boolean }]>((getStatus) => {
                     const { active } = getStatus();
                     return {
-                        render: () => active 
-                            ? `<span class="inline-flex items-center rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">Activo</span>`
-                            : `<span class="inline-flex items-center rounded-full bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/10">Inactivo</span>`
+                        render: () => active
+                            ? `<span class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-[10px] font-bold uppercase text-green-700 dark:bg-green-900/30 dark:text-green-400">Activo</span>`
+                            : `<span class="inline-flex items-center rounded-full bg-red-100 px-2 py-0.5 text-[10px] font-bold uppercase text-red-700 dark:bg-red-900/30 dark:text-red-400">Inactivo</span>`
                     };
                 });
                 return renderSnippet(statusSnippet, { active: row.original.is_active });
             }
         },
 
-    
         {
             accessorKey: "part_number",
             header: "No. Parte",
@@ -100,7 +77,6 @@ export function createColumns(
             }
         },
 
-     
         {
             accessorKey: "description_spanish",
             header: "Descripción",
@@ -110,7 +86,7 @@ export function createColumns(
                     const { desc } = getDesc();
                     return {
                         render: () =>
-                            `<div class="max-w-[250px] truncate text-xs font-medium uppercase text-muted-foreground" title="${desc}">${desc || '-'}</div>`
+                            `<div class="max-w-[250px] truncate text-sm font-medium text-foreground" title="${desc}">${desc || '-'}</div>`
                     };
                 });
                 return renderSnippet(descSnippet, { desc: row.original.description_spanish || '' });
@@ -125,14 +101,14 @@ export function createColumns(
                     const { desc } = getDesc();
                     return {
                         render: () =>
-                            `<div class="max-w-[200px] truncate text-xs text-muted-foreground/70" title="${desc}">${desc || '-'}</div>`
+                            `<div class="max-w-[200px] truncate text-sm text-muted-foreground" title="${desc}">${desc || '-'}</div>`
                     };
                 });
                 return renderSnippet(descEnSnippet, { desc: row.original.description_english || '' });
             }
         },
 
-    
+        // CLASE - Estilo de Clases (borde azul)
         {
             accessorKey: "part_class",
             header: "Clase",
@@ -141,29 +117,33 @@ export function createColumns(
                 const classSnippet = createRawSnippet<[{ cls: string }]>((getCls) => {
                     const { cls } = getCls();
                     return {
-                        render: () => `<div class="text-xs font-mono">${cls || '-'}</div>`
+                        render: () => cls
+                            ? `<span class="inline-flex items-center rounded-md border border-blue-200 bg-blue-50 px-2 py-1 font-mono text-xs font-bold text-blue-700 dark:border-blue-800 dark:bg-blue-900/30 dark:text-blue-400">${cls}</span>`
+                            : `<span class="text-xs text-muted-foreground">-</span>`
                     };
                 });
                 return renderSnippet(classSnippet, { cls: row.original.part_class || '' });
             }
         },
 
-      
+        // TIPO - Estilo de Clases (píldora oscura)
         {
-            accessorKey: "commercial_part_number", 
+            accessorKey: "commercial_part_number",
             header: "Tipo",
             cell: ({ row }) => {
                 const typeSnippet = createRawSnippet<[{ val: string }]>((getType) => {
                     const { val } = getType();
                     return {
-                        render: () => `<div class="text-xs text-muted-foreground">${val || '-'}</div>`
+                        render: () => val
+                            ? `<span class="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-bold tracking-wider uppercase text-slate-700 dark:bg-slate-800 dark:text-slate-400">${val}</span>`
+                            : `<span class="text-xs text-muted-foreground">-</span>`
                     };
                 });
                 return renderSnippet(typeSnippet, { val: row.original.commercial_part_number || '' });
             }
         },
 
-        // 7. U.M. (Unidad de Medida)
+        // U.M. - Estilo de Clases (texto plano claro)
         {
             accessorKey: "unit_of_measure",
             header: "U.M.",
@@ -171,15 +151,14 @@ export function createColumns(
                 const umSnippet = createRawSnippet<[{ um: string | null }]>((getUm) => {
                     const { um } = getUm();
                     return {
-                        render: () =>
-                            `<span class="inline-flex items-center rounded-sm bg-blue-50 dark:bg-blue-900 text-blue-700 dark:text-blue-300 px-1.5 py-0.5 text-[10px] font-bold ring-1 ring-inset ring-blue-700/10">${um || '-'}</span>`
+                        render: () => `<div class="text-sm text-muted-foreground">${um || '-'}</div>`
                     };
                 });
                 return renderSnippet(umSnippet, { um: row.original.unit_of_measure });
             }
         },
 
-        // 8. FRACCION
+        // FRACCION - Estilo de Clases (texto naranja)
         {
             accessorKey: "fraction",
             header: "Fracción",
@@ -188,7 +167,7 @@ export function createColumns(
                 const fracSnippet = createRawSnippet<[{ fr: string }]>((getFrac) => {
                     const { fr } = getFrac();
                     return {
-                        render: () => `<span class="font-mono text-xs bg-slate-100 dark:bg-slate-800 px-1.5 py-0.5 rounded">${fr || '-'}</span>`
+                        render: () => `<span class="font-mono text-xs text-orange-600 dark:text-orange-400">${fr || '-'}</span>`
                     };
                 });
                 return renderSnippet(fracSnippet, {
@@ -197,7 +176,7 @@ export function createColumns(
             }
         },
 
-        // 9. U.M.T. (del inv_data)
+        // U.M.T.
         {
             id: "stock_uom",
             header: "U.M.T.",
@@ -205,14 +184,14 @@ export function createColumns(
                 const umtSnippet = createRawSnippet<[{ umt: string }]>((getUmt) => {
                     const { umt } = getUmt();
                     return {
-                        render: () => `<div class="text-xs font-mono">${umt || '-'}</div>`
+                        render: () => `<div class="text-xs font-mono text-muted-foreground">${umt || '-'}</div>`
                     };
                 });
                 return renderSnippet(umtSnippet, { umt: row.original.inv_data?.stock_uom || '' });
             }
         },
 
-        // 10. COSTO
+        // COSTO - Texto plano
         {
             accessorKey: "unit_cost",
             header: "Costo",
@@ -221,17 +200,17 @@ export function createColumns(
                 const costSnippet = createRawSnippet<[{ amount: number | null, curr: string | null }]>((getCost) => {
                     const { amount, curr } = getCost();
                     return {
-                        render: () => `<div class="font-mono text-xs font-medium">${formatCurrency(amount, curr)}</div>`
+                        render: () => `<div class="font-mono text-xs font-medium text-foreground">${formatCurrency(amount, curr)}</div>`
                     };
                 });
-                return renderSnippet(costSnippet, { 
-                    amount: row.original.unit_cost, 
-                    curr: row.original.currency_key 
+                return renderSnippet(costSnippet, {
+                    amount: row.original.unit_cost,
+                    curr: row.original.currency_key
                 });
             }
         },
 
-        // 11. MONEDA
+        // MONEDA - Texto plano para igualar el estilo minimalista
         {
             accessorKey: "currency_key",
             header: "Moneda",
@@ -239,14 +218,14 @@ export function createColumns(
                 const currSnippet = createRawSnippet<[{ curr: string }]>((getCurr) => {
                     const { curr } = getCurr();
                     return {
-                        render: () => `<span class="inline-flex items-center rounded-sm bg-emerald-50 dark:bg-emerald-900 text-emerald-700 dark:text-emerald-300 px-1.5 py-0.5 text-[10px] font-bold">${curr || '-'}</span>`
+                        render: () => `<span class="text-[10px] font-bold text-emerald-600 dark:text-emerald-400">${curr || '-'}</span>`
                     };
                 });
                 return renderSnippet(currSnippet, { curr: row.original.currency_key || '' });
             }
         },
 
-        // 12. PESO UNITARIO
+        // PESO UNITARIO
         {
             accessorKey: "unit_weight",
             header: "Peso Unitario",
@@ -256,19 +235,19 @@ export function createColumns(
                     const { weight, type } = getWeight();
                     return {
                         render: () => {
-                            if (weight === null || weight === undefined) return '<span>-</span>';
-                            return `<div class="text-xs font-mono">${Number(weight).toFixed(4)} ${type || ''}</div>`;
+                            if (weight === null || weight === undefined) return '<span class="text-muted-foreground">-</span>';
+                            return `<div class="text-xs font-mono text-muted-foreground">${Number(weight).toFixed(4)} ${type || ''}</div>`;
                         }
                     };
                 });
-                return renderSnippet(weightSnippet, { 
+                return renderSnippet(weightSnippet, {
                     weight: row.original.unit_weight,
                     type: row.original.weight_type
                 });
             }
         },
 
-        // 13. U.M. EXIST (Stock UOM del inv_data)
+        // U.M. EXIST 
         {
             id: "equivalent_uom",
             header: "U.M. Exist",
@@ -276,14 +255,14 @@ export function createColumns(
                 const eqUomSnippet = createRawSnippet<[{ uom: string }]>((getUom) => {
                     const { uom } = getUom();
                     return {
-                        render: () => `<div class="text-xs">${uom || '-'}</div>`
+                        render: () => `<div class="text-xs text-muted-foreground">${uom || '-'}</div>`
                     };
                 });
                 return renderSnippet(eqUomSnippet, { uom: row.original.inv_data?.equivalent_uom || '' });
             }
         },
 
-        // 14. FECHA MODIFICACIÓN
+        // FECHA MODIFICACIÓN
         {
             accessorKey: "updated_at",
             header: "Fecha Modificación",
@@ -291,7 +270,7 @@ export function createColumns(
             cell: ({ row }) => {
                 const dateSnippet = createRawSnippet<[{ date: string }]>((getDate) => {
                     const { date } = getDate();
-                    if (!date) return { render: () => '<span>-</span>' };
+                    if (!date) return { render: () => '<span class="text-muted-foreground">-</span>' };
                     const formatted = new Date(date).toLocaleDateString('es-MX', {
                         year: 'numeric',
                         month: '2-digit',
@@ -311,11 +290,11 @@ export function createColumns(
             header: "",
             cell: ({ row }) => {
                 return renderComponent(DataTableActions, {
-					item: row.original,
-					onSuccess,
-					canEdit,
-					canDelete
-				});
+                    item: row.original,
+                    onSuccess,
+                    canEdit,
+                    canDelete
+                });
             }
         }
     ];
diff --git a/frontend/src/lib/components/dashboard/goods/parts/data-table.svelte b/frontend/src/lib/components/dashboard/goods/parts/data-table.svelte
index 2e68fc0a..99dfb8e9 100644
--- a/frontend/src/lib/components/dashboard/goods/parts/data-table.svelte
+++ b/frontend/src/lib/components/dashboard/goods/parts/data-table.svelte
@@ -95,14 +95,14 @@
 		bind:this={scrollContainer}
 	>
 		<Table.Root class="w-full">
-			<Table.Header class="bg-background sticky top-0 z-10 shadow-sm">
+			<Table.Header class="bg-background sticky top-0 z-10">
 				{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
 					<Table.Row>
 						{#each headerGroup.headers as header (header.id)}
 							<Table.Head class="whitespace-nowrap p-0">
 								{#if !header.isPlaceholder}
 									<button
-										class="group flex h-full w-full items-center gap-2 px-3 py-2 text-left hover:bg-muted/50"
+										class="group flex h-full w-full items-center gap-2 px-2 py-2 text-left hover:bg-muted/50"
 										onclick={header.column.getToggleSortingHandler()}
 										disabled={!header.column.getCanSort()}
 									>
@@ -174,11 +174,11 @@
 						}}
 						ondblclick={() => onRowDoubleClick?.(row.original)}
 						class="cursor-pointer transition-colors {row.getIsSelected()
-							? 'bg-blue-50/50 dark:bg-blue-900/20'
+							? 'bg-primary/10'
 							: 'hover:bg-muted/50'}"
 					>
 						{#each row.getVisibleCells() as cell (cell.id)}
-							<Table.Cell class="whitespace-nowrap px-3 py-2">
+							<Table.Cell class="whitespace-nowrap px-2 py-1">
 								<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
 							</Table.Cell>
 						{/each}