diff --git a/README.md b/README.md
index 4b1535c..3cd65c5 100644
--- a/README.md
+++ b/README.md
@@ -5,14 +5,14 @@ A lightweight drag and drop library for Svelte 5 applications. Built with TypeSc
 ## Installation
 
 ```bash
-npm install @thisux/sveltednd
+npm i @thisux/sveltednd@0.0.13
 ```
 
 ## Quick Start
 
-```typescript
+````typescript
+<script lang="ts">
 import { draggable, droppable, type DragDropState } from '@thisux/sveltednd';
-import '@thisux/sveltednd/styles.css'; // optional
 
 // Create a list of items
 let items = $state(['Item 1', 'Item 2', 'Item 3']);
@@ -26,7 +26,7 @@ function handleDrop(state: DragDropState<{ id: string }>) {
 	items = items.filter((item) => item !== draggedItem);
 	items = [...items, draggedItem];
 }
-```
+</script>
 
 ```svelte
 <!-- Make a droppable container -->
@@ -38,7 +38,7 @@ function handleDrop(state: DragDropState<{ id: string }>) {
 		</div>
 	{/each}
 </div>
-```
+````
 
 ## Core Concepts
 
diff --git a/package-lock.json b/package-lock.json
index d5bab68..9117ba2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,16 @@
 {
 	"name": "@thisux/sveltednd",
-	"version": "0.0.6",
+	"version": "0.0.13",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@thisux/sveltednd",
-			"version": "0.0.6",
+			"version": "0.0.13",
 			"license": "MIT",
+			"dependencies": {
+				"@thisux/sveltednd": "^0.0.12"
+			},
 			"devDependencies": {
 				"@sveltejs/adapter-cloudflare": "^4.7.4",
 				"@sveltejs/kit": "^2.0.0",
@@ -52,7 +55,6 @@
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
 			"integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-			"dev": true,
 			"license": "Apache-2.0",
 			"dependencies": {
 				"@jridgewell/gen-mapping": "^0.3.5",
@@ -867,7 +869,6 @@
 			"version": "0.3.5",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
 			"integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/set-array": "^1.2.1",
@@ -882,7 +883,6 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
 			"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.0.0"
@@ -892,7 +892,6 @@
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
 			"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.0.0"
@@ -902,14 +901,12 @@
 			"version": "1.5.0",
 			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
 			"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@jridgewell/trace-mapping": {
 			"version": "0.3.25",
 			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
 			"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/resolve-uri": "^3.1.0",
@@ -1336,6 +1333,15 @@
 				"vite": "^5.0.0"
 			}
 		},
+		"node_modules/@thisux/sveltednd": {
+			"version": "0.0.12",
+			"resolved": "https://registry.npmjs.org/@thisux/sveltednd/-/sveltednd-0.0.12.tgz",
+			"integrity": "sha512-9edVcakYkoCzU6pNIwmJ6Cf+9anECod26Ue/rL3Ssf5LyuLaBLXtBx4H4U8YwQCkwtMeSGFf0OsiMpPpFjvCcg==",
+			"license": "MIT",
+			"peerDependencies": {
+				"svelte": "^5.0.0"
+			}
+		},
 		"node_modules/@types/cookie": {
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
@@ -1358,7 +1364,6 @@
 			"version": "1.0.6",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
 			"integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@types/json-schema": {
@@ -1736,7 +1741,6 @@
 			"version": "8.14.0",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
 			"integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
-			"dev": true,
 			"license": "MIT",
 			"bin": {
 				"acorn": "bin/acorn"
@@ -1759,7 +1763,6 @@
 			"version": "1.4.13",
 			"resolved": "https://registry.npmjs.org/acorn-typescript/-/acorn-typescript-1.4.13.tgz",
 			"integrity": "sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==",
-			"dev": true,
 			"license": "MIT",
 			"peerDependencies": {
 				"acorn": ">=8.9.0"
@@ -1877,7 +1880,6 @@
 			"version": "5.3.2",
 			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
 			"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
-			"dev": true,
 			"license": "Apache-2.0",
 			"engines": {
 				"node": ">= 0.4"
@@ -1946,7 +1948,6 @@
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
 			"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
-			"dev": true,
 			"license": "Apache-2.0",
 			"engines": {
 				"node": ">= 0.4"
@@ -2578,7 +2579,6 @@
 			"version": "1.1.4",
 			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.1.4.tgz",
 			"integrity": "sha512-oO82nKPHKkzIj/hbtuDYy/JHqBHFlMIW36SDiPCVsj87ntDLcWN+sJ1erdVryd4NxODacFTsdrIE3b7IamqbOg==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/espree": {
@@ -2616,7 +2616,6 @@
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/esrap/-/esrap-1.2.2.tgz",
 			"integrity": "sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15",
@@ -3206,7 +3205,6 @@
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
 			"integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@types/estree": "*"
@@ -3349,7 +3347,6 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
 			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/locate-path": {
@@ -3403,7 +3400,6 @@
 			"version": "0.30.12",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.12.tgz",
 			"integrity": "sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.5.0"
@@ -4872,7 +4868,6 @@
 			"version": "5.1.13",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.1.13.tgz",
 			"integrity": "sha512-xVNk8yLsZNfkyqWzVg8+nfU9ewiSjVW0S4qyTxfKa6Y7P5ZBhA+LDsh2cHWIXJQMltikQAk6W3sqGdQZSH58PA==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@ampproject/remapping": "^2.3.0",
@@ -6431,7 +6426,6 @@
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
 			"integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/zod": {
diff --git a/package.json b/package.json
index 9150dce..ea98780 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@thisux/sveltednd",
-	"version": "0.0.12",
+	"version": "0.0.13",
 	"private": false,
 	"description": "A lightweight, flexible drag and drop library for Svelte 5 applications.",
 	"author": "sanju <work@sanju.sh>",
@@ -73,5 +73,8 @@
 		"typescript-eslint": "^8.0.0",
 		"vite": "^5.0.11",
 		"vitest": "^2.0.4"
+	},
+	"dependencies": {
+		"@thisux/sveltednd": "^0.0.12"
 	}
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8067b15..dec96d5 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -9,7 +9,8 @@
 		{ path: '/simple-list', title: 'Simple List' },
 		{ path: '/horizontal-scroll', title: 'Horizontal Scroll' },
 		{ path: '/grid-sort', title: 'Grid Sort' },
-		{ path: '/nested', title: 'Nested Containers' }
+		{ path: '/nested', title: 'Nested Containers' },
+		{ path: '/multiple', title: 'Multiple' }
 	];
 
 	const cn = (...classes: string[]) => classes.filter(Boolean).join(' ');
diff --git a/src/routes/multiple/+page.svelte b/src/routes/multiple/+page.svelte
new file mode 100644
index 0000000..83e9969
--- /dev/null
+++ b/src/routes/multiple/+page.svelte
@@ -0,0 +1,202 @@
+<script lang="ts">
+	import { droppable, draggable, type DragDropState } from '$lib/index.js';
+	import { flip } from 'svelte/animate';
+	import { fade } from 'svelte/transition';
+
+	interface Profile {
+		id: string;
+		email: string;
+		name: string;
+		role: string;
+		location: string;
+	}
+
+	function getAvatarUrl(email: string, size: number = 100) {
+		const hash = email.trim().toLowerCase();
+		return `https://avatar.vercel.sh/${hash}?size=${size}`;
+	}
+
+	let profiles = $state<Profile[]>([
+		{
+			id: '1',
+			email: 'user1@example.com',
+			name: 'Alex Chen',
+			role: 'Frontend Developer',
+			location: 'San Francisco'
+		},
+		{
+			id: '2',
+			email: 'user2@example.com',
+			name: 'Sarah Kim',
+			role: 'UX Designer',
+			location: 'New York'
+		},
+		{
+			id: '3',
+			email: 'user3@example.com',
+			name: 'Mike Ross',
+			role: 'Backend Engineer',
+			location: 'London'
+		},
+		{
+			id: '4',
+			email: 'user4@example.com',
+			name: 'Emma Wilson',
+			role: 'Product Manager',
+			location: 'Berlin'
+		},
+		{
+			id: '5',
+			email: 'user5@example.com',
+			name: 'James Lee',
+			role: 'DevOps Engineer',
+			location: 'Tokyo'
+		},
+		{
+			id: '6',
+			email: 'user6@example.com',
+			name: 'Luna Park',
+			role: 'Data Scientist',
+			location: 'Seoul'
+		}
+	]);
+
+	let selectedProfiles = $state<Profile[]>([]);
+
+	function handleDrop(state: DragDropState<Profile>) {
+		const { sourceContainer, draggedItem } = state;
+		if (sourceContainer === 'avatars') {
+			profiles = profiles.filter((p) => p.id !== draggedItem.id);
+			selectedProfiles = [...selectedProfiles, draggedItem];
+		} else if (sourceContainer === 'details') {
+			selectedProfiles = selectedProfiles.filter((p) => p.id !== draggedItem.id);
+			profiles = [...profiles, draggedItem];
+		}
+	}
+</script>
+
+<div class="min-h-screen bg-gray-50 p-8">
+	<div class="mx-auto max-w-7xl">
+		<div class="mb-8 flex flex-col gap-2">
+			<h1 class="text-2xl font-bold text-gray-900">Team Directory - Multiple Containers</h1>
+			<p class="text-gray-600">
+				Drag team members between columns to manage your team. (Note: Both are 2 different
+				containers. You can add as many containers as you want.)
+			</p>
+		</div>
+
+		<div class="flex gap-6 overflow-x-auto p-2">
+			<!-- Available Profiles Column -->
+			<div class="w-full max-w-xl flex-none">
+				<div
+					class="rounded-xl bg-gray-100 p-4 shadow-sm ring-1 ring-gray-200"
+					use:droppable={{ container: 'avatars', callbacks: { onDrop: handleDrop } }}
+				>
+					<div class="mb-4 flex items-center justify-between">
+						<h2 class="font-semibold text-gray-900">Available Members</h2>
+						<span class="rounded-full bg-blue-100 px-2.5 py-0.5 text-sm text-blue-700">
+							{profiles.length}
+						</span>
+					</div>
+
+					<div class="grid grid-cols-3 gap-3">
+						{#each profiles as profile (profile.id)}
+							<div
+								use:draggable={{ container: 'avatars', dragData: profile }}
+								animate:flip={{ duration: 200 }}
+								in:fade={{ duration: 150 }}
+								out:fade={{ duration: 150 }}
+								class="group cursor-move rounded-lg bg-white p-3 shadow-sm ring-1 ring-gray-200
+                                       transition-all duration-200 hover:shadow-md hover:ring-2 hover:ring-blue-200"
+							>
+								<div class="relative mb-2">
+									<img
+										src={getAvatarUrl(profile.email, 100)}
+										alt={profile.name}
+										class="aspect-square w-full rounded-full ring-2 ring-white"
+									/>
+									<div
+										class="absolute -right-1 -top-1 h-3 w-3 rounded-full border-2
+                                           border-white bg-green-400"
+									></div>
+								</div>
+								<div class="text-center">
+									<h3 class="text-sm font-medium text-gray-900">{profile.name}</h3>
+									<p class="text-xs text-gray-500">{profile.role}</p>
+								</div>
+							</div>
+						{/each}
+					</div>
+				</div>
+			</div>
+
+			<!-- Selected Profiles Column -->
+			<div class="w-96 flex-none">
+				<div
+					class="rounded-xl bg-gray-100 p-4 shadow-sm ring-1 ring-gray-200"
+					use:droppable={{ container: 'details', callbacks: { onDrop: handleDrop } }}
+				>
+					<div class="mb-4 flex items-center justify-between">
+						<h2 class="font-semibold text-gray-900">Selected Members</h2>
+						<span class="rounded-full bg-purple-100 px-2.5 py-0.5 text-sm text-purple-700">
+							{selectedProfiles.length}
+						</span>
+					</div>
+
+					<div class="space-y-3">
+						{#each selectedProfiles as profile (profile.id)}
+							<div
+								use:draggable={{ container: 'details', dragData: profile }}
+								animate:flip={{ duration: 200 }}
+								in:fade={{ duration: 150 }}
+								out:fade={{ duration: 150 }}
+								class="group cursor-move rounded-lg bg-white p-3 shadow-sm ring-1 ring-gray-200
+                                       transition-all duration-200 hover:shadow-md hover:ring-2 hover:ring-purple-200"
+							>
+								<div class="flex items-center gap-3">
+									<img
+										src={getAvatarUrl(profile.email, 48)}
+										alt={profile.name}
+										class="h-12 w-12 rounded-full ring-2 ring-white"
+									/>
+									<div class="flex-1">
+										<h3 class="font-medium text-gray-900">{profile.name}</h3>
+										<p class="text-sm text-gray-500">{profile.role}</p>
+									</div>
+									<div class="text-right">
+										<span class="text-xs text-gray-500">{profile.location}</span>
+										<span
+											class="mt-1 block text-xs text-gray-400 opacity-0 transition-opacity
+                                                   group-hover:opacity-100"
+										>
+											↩️ drag back
+										</span>
+									</div>
+								</div>
+							</div>
+						{/each}
+
+						{#if selectedProfiles.length === 0}
+							<div
+								class="flex h-32 items-center justify-center rounded-lg border-2 border-dashed
+                                       border-gray-200 text-sm text-gray-400"
+							>
+								Drop team members here
+							</div>
+						{/if}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	:global(.dragging) {
+		@apply opacity-50 shadow-lg ring-2 ring-blue-400;
+	}
+
+	:global(.drag-over) {
+		@apply bg-blue-50 ring-2 ring-blue-400;
+	}
+</style>