diff --git a/package.json b/package.json
index 70506c24..be3a0b32 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
   "dependencies": {
     "@tanstack/svelte-query": "^5.87.1",
     "bits-ui": "^2.9.6",
+    "fluid-dnd": "^2.6.2",
     "modern-normalize": "^3.0.1",
     "zod": "^4.1.5"
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dc7b6124..cd661096 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       bits-ui:
         specifier: ^2.9.6
         version: 2.9.6(@internationalized/date@3.9.0)(svelte@5.38.7)
+      fluid-dnd:
+        specifier: ^2.6.2
+        version: 2.6.2
       modern-normalize:
         specifier: ^3.0.1
         version: 3.0.1
@@ -1338,6 +1341,9 @@ packages:
   flatted@3.3.3:
     resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
 
+  fluid-dnd@2.6.2:
+    resolution: {integrity: sha512-NB11wa6QmKkelLi/PrV95nfXM0oA3lrynQD91VrLbhk2BEfH7PLTUMjqlSkavu+fqPlPVCL8HFhYsfv9GVqd7Q==}
+
   fsevents@2.3.2:
     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -3332,6 +3338,8 @@ snapshots:
 
   flatted@3.3.3: {}
 
+  fluid-dnd@2.6.2: {}
+
   fsevents@2.3.2:
     optional: true
 
diff --git a/src/lib/components/grids/CharacterGrid.svelte b/src/lib/components/grids/CharacterGrid.svelte
index 969a94d6..87c0e5f0 100644
--- a/src/lib/components/grids/CharacterGrid.svelte
+++ b/src/lib/components/grids/CharacterGrid.svelte
@@ -1,61 +1,75 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  import type { GridCharacter } from '$lib/types/api/party'
+	import type { GridCharacter } from '$lib/types/api/party'
+	import { getContext } from 'svelte'
+	import type { PartyContext } from '$lib/services/party.service'
 
-  interface Props {
-    characters?: GridCharacter[]
-    mainWeaponElement?: number | null | undefined
-    partyElement?: number | null | undefined
-  }
+	interface Props {
+		characters?: GridCharacter[]
+		mainWeaponElement?: number | null | undefined
+		partyElement?: number | null | undefined
+	}
 
-  let {
-    characters = [],
-    mainWeaponElement = undefined,
-    partyElement = undefined
-  }: Props = $props()
+	let { characters = [], mainWeaponElement = undefined, partyElement = undefined }: Props = $props()
 
-  import CharacterUnit from '$lib/components/units/CharacterUnit.svelte'
+	import CharacterUnit from '$lib/components/units/CharacterUnit.svelte'
 
-  let grid = $derived(Array.from({ length: 5 }, (_, i) => characters.find((c) => c.position === i)))
+	const ctx = getContext<PartyContext>('party')
 </script>
 
 <div class="wrapper">
-  <ul class="characters" aria-label="Character Grid">
-    {#each grid as c, i}
-      <li aria-label={`Character slot ${i}`}>
-        <CharacterUnit item={c} position={i} {mainWeaponElement} {partyElement} />
-      </li>
-    {/each}
-  </ul>
+	<ul
+		class="characters"
+		aria-label="Character Grid"
+	>
+		{#each Array(5) as _, i}
+			{@const character = characters.find((c) => c.position === i)}
+			<li
+				aria-label={`Character slot ${i}`}
+				class:main-character={i === 0}
+				class:Empty={!character}
+			>
+				<CharacterUnit item={character} position={i} {mainWeaponElement} {partyElement} />
+			</li>
+		{/each}
+	</ul>
 </div>
 
 <style lang="scss">
-  @use '$src/themes/colors' as *;
-  @use '$src/themes/typography' as *;
-  @use '$src/themes/spacing' as *;
+	@use '$src/themes/colors' as *;
+	@use '$src/themes/typography' as *;
+	@use '$src/themes/spacing' as *;
 
-  .characters {
-    display: grid;
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-    gap: $unit-3x;
+	.characters {
+		display: grid;
+		grid-template-columns: repeat(5, minmax(0, 1fr));
+		gap: $unit-3x;
 
-    & > li { list-style: none; }
-  }
+		& > li {
+			list-style: none;
+		}
+	}
 
-  .unit {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: $unit;
-  }
+	.unit {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: $unit;
+	}
 
-  .image { width: 100%; height: auto; border: 1px solid $grey-75; border-radius: 8px; display: block; }
+	.image {
+		width: 100%;
+		height: auto;
+		border: 1px solid $grey-75;
+		border-radius: 8px;
+		display: block;
+	}
 
-  .name {
-    font-size: $font-small;
-    text-align: center;
-    color: $grey-50;
-  }
+	.name {
+		font-size: $font-small;
+		text-align: center;
+		color: $grey-50;
+	}
 </style>
diff --git a/src/lib/components/grids/SummonGrid.svelte b/src/lib/components/grids/SummonGrid.svelte
index 317e214d..e09d81d5 100644
--- a/src/lib/components/grids/SummonGrid.svelte
+++ b/src/lib/components/grids/SummonGrid.svelte
@@ -1,120 +1,133 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  import type { GridSummon } from '$lib/types/api/party'
+	import type { GridSummon } from '$lib/types/api/party'
+	import { getContext } from 'svelte'
+	import type { PartyContext } from '$lib/services/party.service'
 
-  interface Props {
-    summons?: GridSummon[]
-  }
+	interface Props {
+		summons?: GridSummon[]
+	}
 
-  let { summons = [] }: Props = $props()
+	let { summons = [] }: Props = $props()
 
-  import SummonUnit from '$lib/components/units/SummonUnit.svelte'
-  import ExtraSummons from '$lib/components/extra/ExtraSummonsGrid.svelte'
+	import SummonUnit from '$lib/components/units/SummonUnit.svelte'
+	import ExtraSummons from '$lib/components/extra/ExtraSummonsGrid.svelte'
 
-  let main = $derived(summons.find((s) => s.main || s.position === -1))
-  let friend = $derived(summons.find((s) => s.friend || s.position === 6))
-  let grid = $derived(Array.from({ length: 4 }, (_, i) => summons.find((s) => s.position === i)))
+	const ctx = getContext<PartyContext>('party')
+
+	let main = $derived(summons.find((s) => s.main || s.position === -1))
+	let friend = $derived(summons.find((s) => s.friend || s.position === 6))
 </script>
 
 <div class="wrapper">
-  <div class="grid">
-    <div class="LabeledUnit">
-      <div class="label">Main</div>
-      <SummonUnit item={main} position={-1} />
-    </div>
+	<div class="grid">
+		<div class="LabeledUnit">
+			<div class="label">Main</div>
+			<SummonUnit item={main} position={-1} />
+		</div>
 
-    <section>
-      <div class="label">Summons</div>
-      <ul class="summons">
-        {#each grid as s, i}
-          <li aria-label={`Summon slot ${i}`}>
-            <SummonUnit item={s} position={i} />
-          </li>
-        {/each}
-      </ul>
-    </section>
+		<section>
+			<div class="label">Summons</div>
+			<ul class="summons">
+				{#each Array(4) as _, i}
+					{@const summon = summons.find((s) => s.position === i)}
+					<li
+						aria-label={`Summon slot ${i}`}
+						class:Empty={!summon}
+					>
+						<SummonUnit item={summon} position={i} />
+					</li>
+				{/each}
+			</ul>
+		</section>
 
-    <div class="LabeledUnit">
-      <div class="label friend">Friend</div>
-      <SummonUnit item={friend} position={6} />
-    </div>
-  </div>
-  <ExtraSummons summons={summons} offset={4} />
+		<div class="LabeledUnit">
+			<div class="label friend">Friend</div>
+			<SummonUnit item={friend} position={6} />
+		</div>
+	</div>
+	<ExtraSummons {summons} offset={4} />
 </div>
 
 <style lang="scss">
-  @use '$src/themes/colors' as *;
-  @use '$src/themes/typography' as *;
-  @use '$src/themes/spacing' as *;
-  @use '$src/themes/mixins' as *;
+	@use '$src/themes/colors' as *;
+	@use '$src/themes/typography' as *;
+	@use '$src/themes/spacing' as *;
+	@use '$src/themes/mixins' as *;
 
-  .grid {
-    display: grid;
-    grid-template-columns: 1.17fr 2fr 1.17fr;
-    gap: $unit-3x;
-    justify-content: center;
-    margin: 0 auto;
-    max-width: $grid-width;
+	.grid {
+		display: grid;
+		grid-template-columns: 1.17fr 2fr 1.17fr;
+		gap: $unit-3x;
+		justify-content: center;
+		margin: 0 auto;
+		max-width: $grid-width;
 
-    @include breakpoint(tablet) {
-      gap: $unit-2x;
-    }
+		@include breakpoint(tablet) {
+			gap: $unit-2x;
+		}
 
-    @include breakpoint(phone) {
-      gap: $unit;
-    }
+		@include breakpoint(phone) {
+			gap: $unit;
+		}
 
-    & .label {
-      color: $grey-55;
-      font-size: $font-tiny;
-      font-weight: $medium;
-      margin-bottom: $unit;
-      text-align: center;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
+		& .label {
+			color: $grey-55;
+			font-size: $font-tiny;
+			font-weight: $medium;
+			margin-bottom: $unit;
+			text-align: center;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
 
-      @include breakpoint(phone) {
-        &.friend {
-          max-width: 78px;
-        }
-      }
-    }
+			@include breakpoint(phone) {
+				&.friend {
+					max-width: 78px;
+				}
+			}
+		}
 
-    .summons {
-      display: grid;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-      grid-template-rows: repeat(2, minmax(0, 1fr));
-      gap: $unit-3x;
+		.summons {
+			display: grid;
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+			grid-template-rows: repeat(2, minmax(0, 1fr));
+			gap: $unit-3x;
 
-      @include breakpoint(tablet) {
-        gap: $unit-2x;
-      }
+			@include breakpoint(tablet) {
+				gap: $unit-2x;
+			}
 
-      @include breakpoint(phone) {
-        gap: $unit;
-      }
+			@include breakpoint(phone) {
+				gap: $unit;
+			}
 
-      & > li {
-        list-style: none;
-      }
-    }
-  }
+			& > li {
+				list-style: none;
+			}
+		}
+	}
 
-  .unit {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: $unit;
-  }
+	.unit {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: $unit;
+	}
 
-  .image { width: 100%; height: auto; border: 1px solid $grey-75; border-radius: 8px; display: block; }
+	.image {
+		width: 100%;
+		height: auto;
+		border: 1px solid $grey-75;
+		border-radius: 8px;
+		display: block;
+	}
 
-  .name {
-    font-size: $font-small;
-    text-align: center;
-    color: $grey-50;
-  }
+	.name {
+		font-size: $font-small;
+		text-align: center;
+		color: $grey-50;
+	}
 </style>
diff --git a/src/lib/components/grids/WeaponGrid.svelte b/src/lib/components/grids/WeaponGrid.svelte
index 669fa555..2841bd81 100644
--- a/src/lib/components/grids/WeaponGrid.svelte
+++ b/src/lib/components/grids/WeaponGrid.svelte
@@ -1,124 +1,135 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  import type { GridWeapon } from '$lib/types/api/party'
+	import type { GridWeapon } from '$lib/types/api/party'
+	import { getContext } from 'svelte'
+	import type { PartyContext } from '$lib/services/party.service'
 
-  interface Props {
-    weapons?: GridWeapon[]
-    raidExtra?: boolean
-    showGuidebooks?: boolean
-    guidebooks?: Record<string, any>
-  }
+	interface Props {
+		weapons?: GridWeapon[]
+		raidExtra?: boolean
+		showGuidebooks?: boolean
+		guidebooks?: Record<string, any>
+	}
 
-  let {
-    weapons = [],
-    raidExtra = undefined,
-    showGuidebooks = undefined,
-    guidebooks = undefined
-  }: Props = $props()
+	let {
+		weapons = [],
+		raidExtra = undefined,
+		showGuidebooks = undefined,
+		guidebooks = undefined
+	}: Props = $props()
 
-  import WeaponUnit from '$lib/components/units/WeaponUnit.svelte'
-  import ExtraWeapons from '$lib/components/extra/ExtraWeaponsGrid.svelte'
-  import Guidebooks from '$lib/components/extra/GuidebooksGrid.svelte'
+	import WeaponUnit from '$lib/components/units/WeaponUnit.svelte'
+	import ExtraWeapons from '$lib/components/extra/ExtraWeaponsGrid.svelte'
+	import Guidebooks from '$lib/components/extra/GuidebooksGrid.svelte'
 
-  let mainhand = $derived(weapons.find((w) => (w as any).mainhand || w.position === -1))
-  let grid = $derived(Array.from({ length: 9 }, (_, i) => weapons.find((w) => w.position === i)))
+	const ctx = getContext<PartyContext>('party')
+
+	let mainhand = $derived(weapons.find((w) => (w as any).mainhand || w.position === -1))
 </script>
 
 <div class="wrapper">
-  <div class="grid">
-    <div aria-label="Mainhand Weapon">
-      <WeaponUnit item={mainhand} position={-1} />
-    </div>
+	<div class="grid">
+		<div aria-label="Mainhand Weapon">
+			<WeaponUnit item={mainhand} position={-1} />
+		</div>
 
-    <ul class="weapons" aria-label="Weapon Grid">
-      {#each grid as w, i}
-        <li class:Empty={!w} aria-label={`Weapon slot ${i}`}>
-          <WeaponUnit item={w} {i} position={i} />
-        </li>
-      {/each}
-    </ul>
-  </div>
-  {#if raidExtra}
-    <ExtraWeapons weapons={weapons} offset={9} />
-  {/if}
-  {#if showGuidebooks}
-    <Guidebooks {guidebooks} />
-  {/if}
+		<ul class="weapons" aria-label="Weapon Grid">
+			{#each Array(9) as _, i}
+				{@const weapon = weapons.find((w) => w.position === i)}
+				<li
+					aria-label={weapon ? `Weapon ${i}` : `Empty slot ${i}`}
+					data-index={i}
+					class={weapon ? '' : 'Empty'}
+				>
+					<WeaponUnit item={weapon} position={i} />
+				</li>
+			{/each}
+		</ul>
+	</div>
+	{#if raidExtra}
+		<ExtraWeapons {weapons} offset={9} />
+	{/if}
+	{#if showGuidebooks}
+		<Guidebooks {guidebooks} />
+	{/if}
 </div>
 
 <style lang="scss">
-  @use '$src/themes/colors' as *;
-  @use '$src/themes/typography' as *;
-  @use '$src/themes/spacing' as *;
-  @use '$src/themes/mixins' as *;
+	@use '$src/themes/colors' as *;
+	@use '$src/themes/typography' as *;
+	@use '$src/themes/spacing' as *;
+	@use '$src/themes/mixins' as *;
 
-  .wrapper {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+	.wrapper {
+		align-items: center;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
 
-    @include breakpoint(phone) {
-      margin: 0 2px;
-    }
+		@include breakpoint(phone) {
+			margin: 0 2px;
+		}
 
-    .grid {
-      display: grid;
-      gap: $unit-3x;
-      grid-template-columns: 1.278fr 3fr;
-      justify-items: center;
-      grid-template-areas: 'mainhand grid';
-      max-width: $grid-width;
+		.grid {
+			display: grid;
+			gap: $unit-3x;
+			grid-template-columns: 1.278fr 3fr;
+			justify-items: center;
+			grid-template-areas: 'mainhand grid';
+			max-width: $grid-width;
 
-      @include breakpoint(tablet) {
-        gap: $unit-2x;
-      }
+			@include breakpoint(tablet) {
+				gap: $unit-2x;
+			}
 
-      @include breakpoint(phone) {
-        gap: $unit;
-      }
+			@include breakpoint(phone) {
+				gap: $unit;
+			}
 
-      .weapons {
-        display: grid; /* make the right-images container a grid */
-        grid-template-columns: repeat(
-          3,
-          minmax(0, 1fr)
-        ); /* create 3 columns, each taking up 1 fraction */
-        grid-template-rows: repeat(
-          3,
-          1fr
-        ); /* create 3 rows, each taking up 1 fraction */
-        gap: $unit-3x;
+			.weapons {
+				display: grid; /* make the right-images container a grid */
+				grid-template-columns: repeat(
+					3,
+					minmax(0, 1fr)
+				); /* create 3 columns, each taking up 1 fraction */
+				grid-template-rows: repeat(3, 1fr); /* create 3 rows, each taking up 1 fraction */
+				gap: $unit-3x;
 
-        @include breakpoint(tablet) {
-          gap: $unit-2x;
-        }
+				@include breakpoint(tablet) {
+					gap: $unit-2x;
+				}
 
-        @include breakpoint(phone) {
-          gap: $unit;
-        }
+				@include breakpoint(phone) {
+					gap: $unit;
+				}
 
-        & > li {
-          list-style: none;
-        }
-      }
-    }
-  }
+				& > li {
+					list-style: none;
+				}
+			}
+		}
+	}
 
-  .unit {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: $unit;
-  }
+	.unit {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: $unit;
+	}
 
-  .image { width: 100%; height: auto; border: 1px solid $grey-75; border-radius: 8px; display: block; }
+	.image {
+		width: 100%;
+		height: auto;
+		border: 1px solid $grey-75;
+		border-radius: 8px;
+		display: block;
+	}
 
-  .name {
-    font-size: $font-small;
-    text-align: center;
-    color: $grey-50;
-  }
+	.name {
+		font-size: $font-small;
+		text-align: center;
+		color: $grey-50;
+	}
 </style>