diff --git a/src/lib/components/grids/CharacterGrid.svelte b/src/lib/components/grids/CharacterGrid.svelte
index 91612996..969a94d6 100644
--- a/src/lib/components/grids/CharacterGrid.svelte
+++ b/src/lib/components/grids/CharacterGrid.svelte
@@ -1,39 +1,23 @@
+<svelte:options runes={true} />
+
 <script lang="ts">
-  import type { GridCharacterItemView } from '$lib/api/schemas/party'
+  import type { GridCharacter } from '$lib/types/api/party'
 
-  export let characters: GridCharacterItemView[] = []
-  export let mainWeaponElement: number | null | undefined = undefined
-  export let partyElement: number | null | undefined = undefined
-
-  function displayName(input: any): string {
-    if (!input) return '—'
-    const maybe = input.name ?? input
-    if (typeof maybe === 'string') return maybe
-    if (maybe && typeof maybe === 'object') return maybe.en || maybe.ja || '—'
-    return '—'
+  interface Props {
+    characters?: GridCharacter[]
+    mainWeaponElement?: number | null | undefined
+    partyElement?: number | null | undefined
   }
-  function characterImageUrl(c?: GridCharacterItemView): string {
-    const id = (c as any)?.object?.granblueId
-    if (!id) return '/images/placeholders/placeholder-weapon-grid.png'
 
-    const uncap = (c as any)?.uncapLevel ?? 0
-    const transStep = (c as any)?.transcendenceStep ?? 0
-    let suffix = '01'
-    if (transStep > 0) suffix = '04'
-    else if (uncap >= 5) suffix = '03'
-    else if (uncap > 2) suffix = '02'
-
-    // Lyria special case (3030182000): append element
-    if (String(id) === '3030182000') {
-      let element = mainWeaponElement || partyElement || 1
-      suffix = `${suffix}_0${element}`
-    }
-
-    return `/images/character-main/${id}_${suffix}.jpg`
-  }
+  let {
+    characters = [],
+    mainWeaponElement = undefined,
+    partyElement = undefined
+  }: Props = $props()
 
   import CharacterUnit from '$lib/components/units/CharacterUnit.svelte'
-  const grid = Array.from({ length: 5 }, (_, i) => characters.find((c) => c.position === i))
+
+  let grid = $derived(Array.from({ length: 5 }, (_, i) => characters.find((c) => c.position === i)))
 </script>
 
 <div class="wrapper">
diff --git a/src/lib/components/grids/SummonGrid.svelte b/src/lib/components/grids/SummonGrid.svelte
index 52b5d83c..317e214d 100644
--- a/src/lib/components/grids/SummonGrid.svelte
+++ b/src/lib/components/grids/SummonGrid.svelte
@@ -1,28 +1,20 @@
+<svelte:options runes={true} />
+
 <script lang="ts">
-  import type { GridSummonItemView } from '$lib/api/schemas/party'
+  import type { GridSummon } from '$lib/types/api/party'
 
-  export let summons: GridSummonItemView[] = []
+  interface Props {
+    summons?: GridSummon[]
+  }
 
-  function displayName(input: any): string {
-    if (!input) return '—'
-    const maybe = input.name ?? input
-    if (typeof maybe === 'string') return maybe
-    if (maybe && typeof maybe === 'object') return maybe.en || maybe.ja || '—'
-    return '—'
-  }
-  function summonImageUrl(s?: GridSummonItemView): string {
-    const id = (s as any)?.object?.granblueId
-    const isMain = s?.main || s?.position === -1 || s?.friend || s?.position === 6
-    if (!id) return isMain ? '/images/placeholders/placeholder-summon-main.png' : '/images/placeholders/placeholder-summon-grid.png'
-    const folder = isMain ? 'summon-main' : 'summon-grid'
-    return `/images/${folder}/${id}.jpg`
-  }
+  let { summons = [] }: Props = $props()
 
   import SummonUnit from '$lib/components/units/SummonUnit.svelte'
   import ExtraSummons from '$lib/components/extra/ExtraSummonsGrid.svelte'
-  const main = summons.find((s) => s.main || s.position === -1)
-  const friend = summons.find((s) => s.friend || s.position === 6)
-  const grid = Array.from({ length: 4 }, (_, i) => summons.find((s) => s.position === i))
+
+  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)))
 </script>
 
 <div class="wrapper">
diff --git a/src/lib/components/grids/WeaponGrid.svelte b/src/lib/components/grids/WeaponGrid.svelte
index 85d2ec6c..669fa555 100644
--- a/src/lib/components/grids/WeaponGrid.svelte
+++ b/src/lib/components/grids/WeaponGrid.svelte
@@ -1,44 +1,28 @@
+<svelte:options runes={true} />
+
 <script lang="ts">
-  import type { GridWeaponItemView } from '$lib/api/schemas/party'
+  import type { GridWeapon } from '$lib/types/api/party'
 
-  export let weapons: GridWeaponItemView[] = []
-  export let raidExtra: boolean | undefined = undefined
-  export let showGuidebooks: boolean | undefined = undefined
-  export let guidebooks: Record<string, any> | undefined = undefined
-
-  function displayName(input: any): string {
-    if (!input) return '—'
-    const maybe = input.name ?? input
-    if (typeof maybe === 'string') return maybe
-    if (maybe && typeof maybe === 'object') return maybe.en || maybe.ja || '—'
-    return '—'
+  interface Props {
+    weapons?: GridWeapon[]
+    raidExtra?: boolean
+    showGuidebooks?: boolean
+    guidebooks?: Record<string, any>
   }
 
-  function weaponImageUrl(w?: GridWeaponItemView): string {
-    const id = (w as any)?.object?.granblueId
-    const isMain = !!(w && ((w as any).mainhand || (w as any).position === -1))
-    if (!id) return isMain
-      ? '/images/placeholders/placeholder-weapon-main.png'
-      : '/images/placeholders/placeholder-weapon-grid.png'
-
-    const folder = isMain ? 'weapon-main' : 'weapon-grid'
-
-    // Neutral element override: if object.element == 0 and instance element present, append _<element>
-    const objElement = (w as any)?.object?.element
-    const instElement = (w as any)?.element
-    if (objElement === 0 && instElement) {
-      return `/images/${folder}/${id}_${instElement}.jpg`
-    }
-
-    // For local static images, transcendence variants are not split by suffix; use base
-    return `/images/${folder}/${id}.jpg`
-  }
+  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'
-  const mainhand = weapons.find((w) => (w as any).mainhand || w.position === -1)
-  const grid = Array.from({ length: 9 }, (_, i) => weapons.find((w) => w.position === i))
+
+  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)))
 </script>
 
 <div class="wrapper">