diff --git a/frontend/src/lib/api/dashboard/refrence_data/containers.ts b/frontend/src/lib/api/dashboard/refrence_data/containers.ts
new file mode 100644
index 00000000..1bd2a7fc
--- /dev/null
+++ b/frontend/src/lib/api/dashboard/refrence_data/containers.ts
@@ -0,0 +1,69 @@
+/**
+ * API Client para Containers
+ * Gestiona las operaciones CRUD para los contenedores
+ */
+import { api } from '$lib/api';
+
+export interface Container {
+	key: string;
+	description: string;
+}
+
+export interface ContainerListResponse {
+	items: Container[];
+	total: number;
+	page: number;
+	page_size: number;
+}
+
+export interface CreateContainerData {
+	key: string;
+	description: string;
+}
+
+export interface UpdateContainerData {
+	key?: string;
+	description?: string;
+}
+
+/**
+ * API para Containers
+ */
+export const containersApi = {
+	/**
+	 * Lista todos los containers con paginación
+	 * @param page - Número de página (por defecto 1)
+	 * @param pageSize - Tamaño de página (por defecto 50)
+	 */
+	list: (page = 1, pageSize = 50) =>
+		api.get<ContainerListResponse>(
+			`/v1/containers?page=${page}&page_size=${pageSize}`
+		),
+
+	/**
+	 * Obtiene un container por ID
+	 * @param key - ID del container
+	 */
+	get: (key: number) => api.get<Container>(`/v1/containers/${key}`),
+
+	/**
+	 * Crea un nuevo container
+	 * @param data - Datos del container a crear
+	 */
+	create: (data: CreateContainerData) =>
+		api.post<Container>('/v1/containers', data),
+
+	/**
+	 * Actualiza un container existente
+	 * @param key - ID del container a actualizar
+	 * @param data - Datos a actualizar
+	 */
+	update: (key: number, data: UpdateContainerData) =>
+		api.put<Container>(`/v1/containers/${key}`, data),
+
+	/**
+	 * Elimina un container
+	 * @param key - ID del container a eliminar
+	 */
+	delete: (key: number) => api.delete(`/v1/containers/${key}`)
+};
diff --git a/frontend/src/lib/components/dashboard/reference_data/containers/columns.ts b/frontend/src/lib/components/dashboard/reference_data/containers/columns.ts
new file mode 100644
index 00000000..1af38551
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/reference_data/containers/columns.ts
@@ -0,0 +1,50 @@
+import type { ColumnDef } from "@tanstack/table-core";
+import { renderComponent, renderSnippet } from "$lib/components/ui/data-table/index.js";
+import { createRawSnippet } from "svelte";
+import DataTableActions from "./data-table-actions.svelte";
+
+export type Container = {
+	key: string;
+	description: string;
+};
+
+export function createColumns(onSuccess?: () => void): ColumnDef<Container>[] {
+	return [		
+		{
+			accessorKey: "key",
+			header: "Código",
+			cell: ({ row }) => {
+				const codeSnippet = createRawSnippet<[{ code: string }]>((getCode) => {
+					const { code } = getCode();
+					return {
+						render: () =>
+							`<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">${code}</code>`
+					};
+				});
+				return renderSnippet(codeSnippet, { code: row.original.key });
+			}
+		},
+		{
+			accessorKey: "description",
+			header: "Descripción",
+			cell: ({ row }) => {
+				const descSnippet = createRawSnippet<[{ description: string }]>((getDesc) => {
+					const { description } = getDesc();
+					return {
+						render: () => `<div class="max-w-[400px] truncate">${description}</div>`
+					};
+				});
+				return renderSnippet(descSnippet, { description: row.original.description });
+			}
+		},
+		{
+			id: "actions",
+			cell: ({ row }) => {
+				return renderComponent(DataTableActions, { item: row.original, onSuccess });
+			}
+		}
+	];
+}
+
+// Mantener compatibilidad hacia atrás
+export const columns = createColumns();
diff --git a/frontend/src/lib/components/dashboard/reference_data/containers/create-edit-dialog.svelte b/frontend/src/lib/components/dashboard/reference_data/containers/create-edit-dialog.svelte
new file mode 100644
index 00000000..75aec764
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/reference_data/containers/create-edit-dialog.svelte
@@ -0,0 +1,184 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import { Input } from "$lib/components/ui/input";
+	import { Label } from "$lib/components/ui/label";
+	import { Switch } from "$lib/components/ui/switch";
+	import { containersApi, type Container, type CreateContainerData, type UpdateContainerData } from "$lib/api/dashboard/refrence_data/containers";
+
+	let {
+		open = $bindable(false),
+		item = $bindable<Container | null>(null),
+		onSuccess
+	}: {
+		open: boolean;
+		item?: Container | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let formData = $state({
+		key: "",
+		description: ""
+	});
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	// Actualizar formData cuando item cambia
+	$effect(() => {
+		if (item) {
+			formData = {
+				key: item.key,
+				description: item.description,
+			};
+		} else {
+			formData = {
+				key: "",
+				description: "",
+			};
+		}
+	});
+
+	const isEditing = $derived(!!item);
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		loading = true;
+		error = null;
+
+		try {
+			let response;
+			if (isEditing && item) {
+				const payload: UpdateContainerData = {
+					key: formData.key,
+					description: formData.description
+				};
+				response = await containersApi.update(Number(item.key), payload);
+			} else {
+				const payload: CreateContainerData = {
+					key: formData.key,
+					description: formData.description
+				};
+				response = await containersApi.create(payload);
+			}
+
+			if (response.error) {
+				// Si es error de autenticación y ya se intentó refrescar, el API lo manejará
+				// pero mostramos un mensaje más claro
+				if (response.status === 401) {
+					error = 'Sesión expirada. Recargando página...';
+					setTimeout(() => {
+						window.location.reload();
+					}, 1500);
+				} else {
+					error = response.error;
+				}
+				return;
+			}
+
+			// Éxito
+			open = false;
+			if (onSuccess) {
+				onSuccess();
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : "Error al guardar";
+			console.error("Error saving:", e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		if (!newOpen) {
+			// Limpiar form al cerrar
+			formData = {
+				key: "",
+				description: ""
+			};
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[500px]">
+		<Dialog.Header>
+			<Dialog.Title>
+				{isEditing ? "Editar" : "Nuevo"} Contenedor
+			</Dialog.Title>
+			<Dialog.Description>
+				{isEditing 
+					? "Modifica los datos del contenedor."
+					: "Completa los datos para crear un nuevo contenedor."}
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<form onsubmit={handleSubmit} class="space-y-4">
+			{#if error}
+				<div class="rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+					{error}
+				</div>
+			{/if}
+
+			<div class="space-y-2">
+				<Label for="key">Código *</Label>
+				<Input
+					id="key"
+					bind:value={formData.key}
+					placeholder="Ej: 20"
+					required
+					disabled={loading}
+				/>
+			</div>
+
+			<div class="space-y-2">
+				<Label for="description">Descripción *</Label>
+				<Input
+					id="description"
+					bind:value={formData.description}
+					placeholder="Ej: 20 pies"
+					required
+					disabled={loading}
+				/>
+			</div>
+
+			<Dialog.Footer>
+				<Button
+					type="button"
+					variant="outline"
+					onclick={() => (open = false)}
+					disabled={loading}
+				>
+					Cancelar
+				</Button>
+				<Button type="submit" disabled={loading}>
+					{#if loading}
+						<svg
+							class="mr-2 h-4 w-4 animate-spin"
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+						>
+							<circle
+								class="opacity-25"
+								cx="12"
+								cy="12"
+								r="10"
+								stroke="currentColor"
+								stroke-width="4"
+							></circle>
+							<path
+								class="opacity-75"
+								fill="currentColor"
+								d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+							></path>
+						</svg>
+					{/if}
+					{isEditing ? "Guardar cambios" : "Crear"}
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/frontend/src/lib/components/dashboard/reference_data/containers/data-table-actions.svelte b/frontend/src/lib/components/dashboard/reference_data/containers/data-table-actions.svelte
new file mode 100644
index 00000000..f23c31c8
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/reference_data/containers/data-table-actions.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
+	import type { Container } from "./columns.js";
+	import CreateEditDialog from "./create-edit-dialog.svelte";
+	import DetailsDialog from "./details-dialog.svelte";
+	import DeleteDialog from "./delete-dialog.svelte";
+
+	let { 
+		item,
+		onSuccess
+	}: { 
+		item: Container;
+		onSuccess?: () => void;
+	} = $props();
+
+	let showDetailsDialog = $state(false);
+	let showEditDialog = $state(false);
+	let showDeleteDialog = $state(false);
+
+	function handleCopyId() {
+		navigator.clipboard.writeText(item.key.toString());
+	}
+
+	function handleViewDetails() {
+		showDetailsDialog = true;
+	}
+
+	function handleEdit() {
+		showEditDialog = true;
+	}
+
+	function handleDelete() {
+		showDeleteDialog = true;
+	}
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger>
+		{#snippet child({ props })}
+			<Button {...props} variant="ghost" size="icon" class="relative size-8 p-0">
+				<span class="sr-only">Abrir menú</span>
+				<EllipsisIcon class="size-4" />
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end">
+		<DropdownMenu.Group>
+			<DropdownMenu.Label>Acciones</DropdownMenu.Label>
+			<DropdownMenu.Item onclick={handleCopyId}>
+				Copiar ID
+			</DropdownMenu.Item>
+		</DropdownMenu.Group>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item onclick={handleViewDetails}>Ver detalles</DropdownMenu.Item>
+		<DropdownMenu.Item onclick={handleEdit}>Editar</DropdownMenu.Item>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item class="text-destructive" onclick={handleDelete}>Eliminar</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+
+<!-- Dialogs -->
+<DetailsDialog bind:open={showDetailsDialog} {item} />
+<CreateEditDialog bind:open={showEditDialog} bind:item {onSuccess} />
+<DeleteDialog bind:open={showDeleteDialog} {item} {onSuccess} />
diff --git a/frontend/src/lib/components/dashboard/reference_data/containers/data-table.svelte b/frontend/src/lib/components/dashboard/reference_data/containers/data-table.svelte
new file mode 100644
index 00000000..ef98de23
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/reference_data/containers/data-table.svelte
@@ -0,0 +1,123 @@
+<script lang="ts" generics="TData, TValue">
+	import { onMount } from 'svelte';
+	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[];
+		loading: boolean;
+		hasMore: boolean;
+		loadMore: () => void;
+	};
+
+	let {
+		data,
+		columns,
+		loading,
+		hasMore,
+		loadMore
+	}: DataTableProps<TData, TValue> = $props();
+
+	const table = createSvelteTable({
+		get data() {
+			return data;
+		},
+		columns,
+		getCoreRowModel: getCoreRowModel()
+	});
+
+	let scrollContainer = $state<HTMLDivElement>();
+	let loadingTrigger = $state<HTMLDivElement>();
+
+	// Intersection Observer para detectar cuando el usuario llega al final
+	onMount(() => {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				const [entry] = entries;
+				if (entry.isIntersecting && hasMore && !loading) {
+					loadMore();
+				}
+			},
+			{
+				root: scrollContainer,
+				threshold: 0.1
+			}
+		);
+
+		if (loadingTrigger) {
+			observer.observe(loadingTrigger);
+		}
+
+		return () => {
+			observer.disconnect();
+		};
+	});
+</script>
+
+<div class="w-full">
+	<div class="rounded-md border max-h-[600px] overflow-y-auto" bind:this={scrollContainer}>
+		<Table.Root>
+			<Table.Header class="sticky top-0 bg-background z-10">
+				{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+					<Table.Row>
+						{#each headerGroup.headers as header (header.id)}
+							<Table.Head>
+								{#if !header.isPlaceholder}
+									<FlexRender
+										content={header.column.columnDef.header}
+										context={header.getContext()}
+									/>
+								{/if}
+							</Table.Head>
+						{/each}
+					</Table.Row>
+				{/each}
+			</Table.Header>
+			<Table.Body>
+				{#each table.getRowModel().rows as row (row.id)}
+					<Table.Row data-state={row.getIsSelected() && "selected"}>
+						{#each row.getVisibleCells() as cell (cell.id)}
+							<Table.Cell>
+								<FlexRender
+									content={cell.column.columnDef.cell}
+									context={cell.getContext()}
+								/>
+							</Table.Cell>
+						{/each}
+					</Table.Row>
+				{:else}
+					<Table.Row>
+						<Table.Cell colspan={columns.length} class="h-24 text-center">
+							No hay resultados.
+						</Table.Cell>
+					</Table.Row>
+				{/each}
+				
+				<!-- Loading Trigger - Se activa cuando es visible -->
+				{#if hasMore}
+					<Table.Row>
+						<Table.Cell colspan={columns.length} class="h-20 text-center">
+							<div bind:this={loadingTrigger}>
+								{#if loading}
+									<div class="flex items-center justify-center gap-2">
+										<div class="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent"></div>
+										<span class="text-muted-foreground text-sm">Cargando más...</span>
+									</div>
+								{:else}
+									<div class="text-muted-foreground text-sm">
+										Desplázate para cargar más
+									</div>
+								{/if}
+							</div>
+						</Table.Cell>
+					</Table.Row>
+				{/if}
+			</Table.Body>
+		</Table.Root>
+	</div>
+</div>
diff --git a/frontend/src/lib/components/dashboard/reference_data/containers/delete-dialog.svelte b/frontend/src/lib/components/dashboard/reference_data/containers/delete-dialog.svelte
new file mode 100644
index 00000000..88ddcb9b
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/reference_data/containers/delete-dialog.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as AlertDialog from "$lib/components/ui/alert-dialog";
+	import { containersApi, type Container } from "$lib/api/dashboard/refrence_data/containers";
+
+	let {
+		open = $bindable(false),
+		item,
+		onSuccess
+	}: {
+		open: boolean;
+		item: Container | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	async function handleDelete() {
+		if (!item) return;
+
+		loading = true;
+		error = null;
+
+		try {
+			const response = await containersApi.delete(Number(item.key));
+
+			if (response.error) {
+				error = response.error;
+				return;
+			}
+
+			// Éxito
+			open = false;
+			if (onSuccess) {
+				onSuccess();
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : "Error al eliminar";
+			console.error("Error deleting:", e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		if (!newOpen) {
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<AlertDialog.Root bind:open onOpenChange={handleOpenChange}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>¿Estás seguro?</AlertDialog.Title>
+			<AlertDialog.Description class="space-y-2">
+				<p>Esta acción no se puede deshacer. Se eliminará permanentemente este contenedor:</p>
+				{#if item}
+					<div class="mt-2 rounded-lg bg-muted p-3 space-y-1">
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Código:</span>
+							<key class="font-mono">{item.key}</key>
+						</div>
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Descripción:</span>
+							<span class="truncate max-w-[200px]">{item.description}</span>
+						</div>
+					</div>
+				{/if}
+				{#if error}
+					<div class="mt-2 rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+						{error}
+					</div>
+				{/if}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel disabled={loading}>Cancelar</AlertDialog.Cancel>
+			<AlertDialog.Action
+				onclick={handleDelete}
+				disabled={loading}
+				class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+			>
+				{#if loading}
+					<svg
+						class="mr-2 h-4 w-4 animate-spin"
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+					>
+						<circle
+							class="opacity-25"
+							cx="12"
+							cy="12"
+							r="10"
+							stroke="currentColor"
+							stroke-width="4"
+						></circle>
+						<path
+							class="opacity-75"
+							fill="currentColor"
+							d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+						></path>
+					</svg>
+				{/if}
+				Eliminar
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>
diff --git a/frontend/src/lib/components/dashboard/reference_data/containers/details-dialog.svelte b/frontend/src/lib/components/dashboard/reference_data/containers/details-dialog.svelte
new file mode 100644
index 00000000..4a7a7bc6
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/reference_data/containers/details-dialog.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import { Separator } from "$lib/components/ui/separator";
+	import type { Container } from "$lib/api/dashboard/refrence_data/containers";
+
+	let {
+		open = $bindable(false),
+		item
+	}: {
+		open: boolean;
+		item: Container | null;
+	} = $props();
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[500px]">
+		<Dialog.Header>
+			<Dialog.Title>Detalles del Contenedor</Dialog.Title>
+			<Dialog.Description>
+				Información completa del contenedor
+			</Dialog.Description>
+		</Dialog.Header>
+
+		{#if item}
+			<div class="space-y-4 py-4">
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Código</span>
+						<code class="relative rounded bg-muted px-2 py-1 font-mono text-sm">
+							{item.key}
+						</code>
+					</div>
+					<Separator />
+				</div>
+
+				<div class="space-y-2">
+					<div class="flex flex-col gap-2">
+						<span class="text-sm font-medium text-muted-foreground">Descripción</span>
+						<p class="text-sm">{item.description}</p>
+					</div>
+					<Separator />
+				</div>			
+			</div>
+		{/if}
+
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (open = false)}>
+				Cerrar
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/frontend/src/lib/components/sidebar/modules.ts b/frontend/src/lib/components/sidebar/modules.ts
index 8017eb00..151628b8 100644
--- a/frontend/src/lib/components/sidebar/modules.ts
+++ b/frontend/src/lib/components/sidebar/modules.ts
@@ -63,7 +63,7 @@ export const sidebarData: SidebarData = {
 	],
 	navMain: [
 		{
-			title: "Catalogos Generales",
+			title: "Catalogos Fijos",
 			url: "/dashboard",
 			icon: SquareTerminalIcon,
 			items: [
@@ -72,8 +72,8 @@ export const sidebarData: SidebarData = {
 					url: "/dashboard/reference_data/code_pedimento_regimens",
 				},
 				{
-					title: "Reportes",
-					url: "#",
+					title: "Contenedores",
+					url: "/dashboard/reference_data/containers",
 				},
 			],
 			isActive: true,
diff --git a/frontend/src/lib/components/ui/switch/index.ts b/frontend/src/lib/components/ui/switch/index.ts
new file mode 100644
index 00000000..f0e5fb79
--- /dev/null
+++ b/frontend/src/lib/components/ui/switch/index.ts
@@ -0,0 +1,7 @@
+import Root from "./switch.svelte";
+
+export {
+	Root,
+	//
+	Root as Switch
+};
diff --git a/frontend/src/lib/components/ui/switch/switch.svelte b/frontend/src/lib/components/ui/switch/switch.svelte
new file mode 100644
index 00000000..5a512182
--- /dev/null
+++ b/frontend/src/lib/components/ui/switch/switch.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { cn } from "$lib/utils";
+
+	interface Props extends Omit<HTMLButtonAttributes, 'type' | 'onclick'> {
+		checked?: boolean;
+		onCheckedChange?: (checked: boolean) => void;
+		disabled?: boolean;
+		class?: string;
+	}
+
+	let {
+		checked = $bindable(false),
+		onCheckedChange,
+		disabled = false,
+		class: className,
+		...restProps
+	}: Props = $props();
+
+	function handleChange() {
+		if (!disabled) {
+			checked = !checked;
+			if (onCheckedChange) {
+				onCheckedChange(checked);
+			}
+		}
+	}
+</script>
+
+<button
+	type="button"
+	role="switch"
+	aria-checked={checked}
+	data-state={checked ? "checked" : "unchecked"}
+	{disabled}
+	onclick={handleChange}
+	class={cn(
+		"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+		checked ? "bg-primary" : "bg-input",
+		className
+	)}
+	{...restProps}
+>
+	<span
+		data-state={checked ? "checked" : "unchecked"}
+		class={cn(
+			"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform",
+			checked ? "translate-x-5" : "translate-x-0"
+		)}
+	></span>
+</button>
diff --git a/frontend/src/routes/dashboard/reference_data/containers/+page.server.ts b/frontend/src/routes/dashboard/reference_data/containers/+page.server.ts
new file mode 100644
index 00000000..d63ee421
--- /dev/null
+++ b/frontend/src/routes/dashboard/reference_data/containers/+page.server.ts
@@ -0,0 +1,81 @@
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ cookies, fetch, url, parent }) => {
+	// Esperar a que el layout padre valide/refresque el token
+	await parent();
+	
+	const token = cookies.get('access_token');
+	
+	if (!token) {
+		return {
+			error: 'No authenticated',
+			items: [],
+			total: 0,
+			page: 1,
+			page_size: 50
+		};
+	}
+
+	try {
+		// Obtener parámetros de paginación de la URL
+		const page = parseInt(url.searchParams.get('page') || '1');
+		const pageSize = parseInt(url.searchParams.get('page_size') || '50');
+
+		// Configurar la URL de la API para SSR
+		let apiUrl = process.env.INTERNAL_API_URL;
+		if (!apiUrl) {
+			apiUrl = import.meta.env.VITE_API_URL;
+			// Reemplazar 'localhost' con 'backend' para llamadas desde el servidor (SSR)
+			apiUrl = apiUrl?.replace('localhost', 'backend').replace('127.0.0.1', 'backend');
+		}
+		
+		// Normalizar la URL
+		const baseUrl = apiUrl?.endsWith('/') ? apiUrl : `${apiUrl}/`;		
+
+		const response = await fetch(
+			`${baseUrl}v1/containers?page=${page}&page_size=${pageSize}`,
+			{
+				headers: {
+					'Authorization': `Bearer ${token}`,
+					'Content-Type': 'application/json'
+				}
+			}
+		);
+
+		if (!response.ok) {
+			const errorText = await response.text();
+			console.error('📊 [Containers] API Error:', {
+				status: response.status,
+				statusText: response.statusText,
+				error: errorText
+			});
+			
+			return {
+				error: `Error ${response.status}: ${response.statusText}`,
+				items: [],
+				total: 0,
+				page: page,
+				page_size: pageSize
+			};
+		}
+
+		const data = await response.json();
+
+		return {
+			items: data.items || [],
+			total: data.total || 0,
+			page: data.page || page,
+			page_size: data.page_size || pageSize,
+			error: null
+		};
+	} catch (error) {
+		console.error('📊 [Containers] Load error:', error);
+		return {
+			error: 'Error loading data',
+			items: [],
+			total: 0,
+			page: 1,
+			page_size: 50
+		};
+	}
+};
diff --git a/frontend/src/routes/dashboard/reference_data/containers/+page.svelte b/frontend/src/routes/dashboard/reference_data/containers/+page.svelte
new file mode 100644
index 00000000..98af455c
--- /dev/null
+++ b/frontend/src/routes/dashboard/reference_data/containers/+page.svelte
@@ -0,0 +1,196 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { containersApi, type Container } from '$lib/api/dashboard/refrence_data/containers';
+	import DataTable from '$lib/components/dashboard/reference_data/containers/data-table.svelte';
+	import { createColumns } from '$lib/components/dashboard/reference_data/containers/columns.js';
+	import CreateEditDialog from '$lib/components/dashboard/reference_data/containers/create-edit-dialog.svelte';
+	import * as Card from '$lib/components/ui/card';
+	import { Button } from '$lib/components/ui/button';
+	import type { PageData } from './$types';
+	import { browser } from '$app/environment';
+
+	// Los datos iniciales vienen del servidor
+	let { data }: { data: PageData } = $props();
+	
+	// Estado para el diálogo de crear
+	let showCreateDialog = $state(false);
+
+	// Sincronizar token de cookies a localStorage al montar el componente
+	onMount(() => {
+		if (browser) {
+			// Función para obtener el valor de una cookie
+			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;
+			};
+
+			// Verificar si hay token en las cookies
+			const cookieToken = getCookie('access_token');
+			const localToken = localStorage.getItem('access_token');
+
+			if (cookieToken && cookieToken !== localToken) {
+				localStorage.setItem('access_token', cookieToken);
+			}
+
+			// También sincronizar refresh_token si existe
+			const cookieRefreshToken = getCookie('refresh_token');
+			const localRefreshToken = localStorage.getItem('refresh_token');
+
+			if (cookieRefreshToken && cookieRefreshToken !== localRefreshToken) {
+				localStorage.setItem('refresh_token', cookieRefreshToken);
+			}
+		}
+	});
+
+	// Estado para infinite scroll
+	let allItems = $state<Container[]>(data.items || []);
+	let currentPage = $state(data.page || 1);
+	let pageSize = $state(50);
+	let totalItems = $state(data.total || 0);
+	let loading = $state(false);
+	let hasMore = $derived(allItems.length < totalItems);
+	let error = $state<string | null>(data.error || null);
+
+	async function loadMore() {
+		if (loading || !hasMore) return;
+
+		loading = true;
+		error = null;
+
+		try {			
+			const response = await containersApi.list(currentPage + 1, pageSize);
+
+			if (response.error) {
+				console.error('📊 [Page] Error en loadMore:', response.error, 'Status:', response.status);
+				
+				// Si es un error de autenticación (401 o 403) y no se pudo refrescar, mostrar mensaje específico
+				if (response.status === 401 || response.status === 403) {
+					error = 'Sesión expirada. Recargando página...';
+					// Recargar automáticamente después de 2 segundos
+					setTimeout(() => {
+						window.location.reload();
+					}, 2000);
+				} else {
+					error = response.error;
+				}
+				return;
+			}
+
+			if (response.data?.items) {				
+				// Agregar los nuevos items al array existente
+				allItems = [...allItems, ...response.data.items];
+				currentPage++;
+				totalItems = response.data.total;
+			}
+		} catch (e) {
+			error = 'Error cargando más datos';
+			console.error('📊 [Page] Error loading more:', e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function reloadData() {
+		// Reset y recargar desde el principio
+		window.location.reload();
+	}
+
+	function handleCreateClick() {
+		showCreateDialog = true;
+	}
+
+	function handleSuccess() {
+		// Recargar datos después de crear/editar/eliminar
+		reloadData();
+	}
+
+	// Crear columnas con el callback onSuccess
+	const columns = createColumns(handleSuccess);
+</script>
+
+<div class="space-y-6">
+	<!-- Header -->
+	<div class="flex items-center justify-between">
+		<div>
+			<h1 class="text-3xl font-bold tracking-tight">Contenedores</h1>
+			<p class="text-muted-foreground">
+				Gestiona los tipos de contenedores disponibles
+			</p>
+		</div>
+		<Button onclick={handleCreateClick}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="16"
+				height="16"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="mr-2"
+			>
+				<path d="M5 12h14" />
+				<path d="M12 5v14" />
+			</svg>
+			Nuevo Contenedor
+		</Button>
+	</div>
+
+	<!-- Error Message -->
+	{#if error}
+		<Card.Root class="border-destructive">
+			<Card.Header>
+				<Card.Title class="text-destructive">Error</Card.Title>
+				<Card.Description>{error}</Card.Description>
+			</Card.Header>
+		</Card.Root>
+	{/if}
+
+	<!-- Data Table -->
+	<Card.Root>
+		<Card.Header>
+			<div class="flex items-center justify-between">
+				<div>
+					<Card.Title>Listado de Contenedores</Card.Title>
+					<Card.Description>
+						Mostrando {allItems.length} de {totalItems} registros
+					</Card.Description>
+				</div>
+				<Button variant="outline" onclick={reloadData}>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="16"
+						height="16"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						class="mr-2"
+					>
+						<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
+						<path d="M21 3v5h-5" />
+					</svg>
+					Actualizar
+				</Button>
+			</div>
+		</Card.Header>
+		<Card.Content>
+			<!-- TanStack DataTable con Infinite Scroll -->
+			<DataTable
+				data={allItems}
+				{columns}
+				{loading}
+				{hasMore}
+				{loadMore}
+			/>
+		</Card.Content>
+	</Card.Root>
+</div>
+
+<!-- Diálogo de crear/editar -->
+<CreateEditDialog bind:open={showCreateDialog} onSuccess={handleSuccess} />