diff --git a/src/routes/database/characters/+page.server.ts b/src/routes/database/characters/+page.server.ts
index 48582bb4..0e8782f3 100644
--- a/src/routes/database/characters/+page.server.ts
+++ b/src/routes/database/characters/+page.server.ts
@@ -2,15 +2,15 @@ import { redirect } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 
 export const load: PageServerLoad = async ({ locals }) => {
-  // Enforce authorization at individual page level
-  if (!locals.session.isAuthenticated) {
-    throw redirect(302, '/login')
-  }
+	// Enforce authorization at individual page level
+	if (!locals.session.isAuthenticated) {
+		throw redirect(302, '/login')
+	}
 
-  const role = locals.session.account?.role ?? 0
-  if (role < 7) {
-    throw redirect(302, '/')
-  }
+	const role = locals.session.account?.role ?? 0
+	if (role < 7) {
+		throw redirect(302, '/')
+	}
 
-  return {}
+	return {}
 }
\ No newline at end of file
diff --git a/src/routes/database/characters/+page.svelte b/src/routes/database/characters/+page.svelte
index faaea6eb..fd873b8a 100644
--- a/src/routes/database/characters/+page.svelte
+++ b/src/routes/database/characters/+page.svelte
@@ -1,28 +1,18 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-	import type { PageData } from './$types'
-	import DatabaseGrid from '$lib/components/database/DatabaseGrid.svelte'
-	import { goto } from '$app/navigation'
-	import { page as pageStore } from '$app/state'
+	import DatabaseGridWithProvider from '$lib/components/database/DatabaseGridWithProvider.svelte'
 	import type { IColumn } from 'wx-svelte-grid'
 	import CharacterImageCell from '$lib/components/database/cells/CharacterImageCell.svelte'
-	import {
-		elementLabel,
-		elementClass
-	} from '$lib/utils/database'
+	import ElementCell from '$lib/components/database/cells/ElementCell.svelte'
+	import { getRarityLabel } from '$lib/utils/rarity'
 
-	const { data }: { data: PageData } = $props()
-
-	console.log('[Characters Page] Received data:', data)
-	console.log('[Characters Page] Items count:', data.items?.length || 0)
-
-	// Convert data to SVAR Grid format - column id must match data property
+	// Column configuration for characters
 	const columns: IColumn[] = [
 		{
 			id: 'granblue_id',
 			header: 'Image',
-			width: 60,
+			width: 80,
 			cell: CharacterImageCell
 		},
 		{
@@ -42,21 +32,15 @@
 			id: 'rarity',
 			header: 'Rarity',
 			width: 80,
-			sort: true
+			sort: true,
+			template: (rarity) => getRarityLabel(rarity)
 		},
 		{
 			id: 'element',
 			header: 'Element',
 			width: 100,
 			sort: true,
-			htmlEnable: true,
-			template: (element) => {
-				const label = elementLabel(element)
-				const className = elementClass(element)
-				return className
-					? `<span class="${className}">${label}</span>`
-					: label
-			}
+			cell: ElementCell
 		},
 		{
 			id: 'max_level',
@@ -65,20 +49,6 @@
 			sort: true
 		}
 	]
-
-	// Handle pagination
-	const handlePageChange = (newPage: number) => {
-		const url = new URL(pageStore.url)
-		url.searchParams.set('page', newPage.toString())
-		goto(url.toString())
-	}
-
-	const handlePageSizeChange = (newPageSize: number) => {
-		const url = new URL(pageStore.url)
-		url.searchParams.set('page', '1')
-		url.searchParams.set('per_page', newPageSize.toString())
-		goto(url.toString())
-	}
 </script>
 
 <div class="database-page">
@@ -87,16 +57,10 @@
 		<p class="subtitle">Browse and search all available characters</p>
 	</div>
 
-	<DatabaseGrid
-		data={data.items}
+	<DatabaseGridWithProvider
+		resource="characters"
 		{columns}
-		page={data.page}
-		totalPages={data.totalPages}
-		pageSize={data.pageSize}
-		total={data.total}
-		onPageChange={handlePageChange}
-		onPageSizeChange={handlePageSizeChange}
-		loading={false}
+		pageSize={20}
 	/>
 </div>
 
diff --git a/src/routes/database/characters/+page.ts b/src/routes/database/characters/+page.ts
deleted file mode 100644
index 4c883757..00000000
--- a/src/routes/database/characters/+page.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { PageLoad } from './$types'
-import { searchCharacters } from '$lib/api/resources/search'
-
-export const load: PageLoad = async ({ fetch, url }) => {
-  const page = Number(url.searchParams.get('page') || '1') || 1
-  const pageSize = Number(url.searchParams.get('pageSize') || '20') || 20
-
-  const search = await searchCharacters({ page, per: pageSize }, undefined, fetch)
-
-  return {
-    items: search.results || [],
-    page: search.meta?.page || page,
-    totalPages: search.meta?.total_pages || 1,
-    total: search.meta?.count || 0,
-    pageSize: search.meta?.per_page || pageSize
-  }
-}
-
diff --git a/src/routes/database/summons/+page.server.ts b/src/routes/database/summons/+page.server.ts
index 48582bb4..0e8782f3 100644
--- a/src/routes/database/summons/+page.server.ts
+++ b/src/routes/database/summons/+page.server.ts
@@ -2,15 +2,15 @@ import { redirect } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 
 export const load: PageServerLoad = async ({ locals }) => {
-  // Enforce authorization at individual page level
-  if (!locals.session.isAuthenticated) {
-    throw redirect(302, '/login')
-  }
+	// Enforce authorization at individual page level
+	if (!locals.session.isAuthenticated) {
+		throw redirect(302, '/login')
+	}
 
-  const role = locals.session.account?.role ?? 0
-  if (role < 7) {
-    throw redirect(302, '/')
-  }
+	const role = locals.session.account?.role ?? 0
+	if (role < 7) {
+		throw redirect(302, '/')
+	}
 
-  return {}
+	return {}
 }
\ No newline at end of file
diff --git a/src/routes/database/summons/+page.svelte b/src/routes/database/summons/+page.svelte
index 94d7adfe..493e0474 100644
--- a/src/routes/database/summons/+page.svelte
+++ b/src/routes/database/summons/+page.svelte
@@ -1,28 +1,18 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-	import type { PageData } from './$types'
-	import DatabaseGrid from '$lib/components/database/DatabaseGrid.svelte'
-	import { goto } from '$app/navigation'
-	import { page as pageStore } from '$app/state'
+	import DatabaseGridWithProvider from '$lib/components/database/DatabaseGridWithProvider.svelte'
 	import type { IColumn } from 'wx-svelte-grid'
 	import SummonImageCell from '$lib/components/database/cells/SummonImageCell.svelte'
-	import {
-		elementLabel,
-		elementClass
-	} from '$lib/utils/database'
+	import ElementCell from '$lib/components/database/cells/ElementCell.svelte'
+	import { getRarityLabel } from '$lib/utils/rarity'
 
-	const { data }: { data: PageData } = $props()
-
-	console.log('[Summons Page] Received data:', data)
-	console.log('[Summons Page] Items count:', data.items?.length || 0)
-
-	// Convert data to SVAR Grid format - column id must match data property
+	// Column configuration for summons
 	const columns: IColumn[] = [
 		{
 			id: 'granblue_id',
 			header: 'Image',
-			width: 60,
+			width: 80,
 			cell: SummonImageCell
 		},
 		{
@@ -42,21 +32,15 @@
 			id: 'rarity',
 			header: 'Rarity',
 			width: 80,
-			sort: true
+			sort: true,
+			template: (rarity) => getRarityLabel(rarity)
 		},
 		{
 			id: 'element',
 			header: 'Element',
 			width: 100,
 			sort: true,
-			htmlEnable: true,
-			template: (element) => {
-				const label = elementLabel(element)
-				const className = elementClass(element)
-				return className
-					? `<span class="${className}">${label}</span>`
-					: label
-			}
+			cell: ElementCell
 		},
 		{
 			id: 'max_level',
@@ -65,20 +49,6 @@
 			sort: true
 		}
 	]
-
-	// Handle pagination
-	const handlePageChange = (newPage: number) => {
-		const url = new URL(pageStore.url)
-		url.searchParams.set('page', newPage.toString())
-		goto(url.toString())
-	}
-
-	const handlePageSizeChange = (newPageSize: number) => {
-		const url = new URL(pageStore.url)
-		url.searchParams.set('page', '1')
-		url.searchParams.set('per_page', newPageSize.toString())
-		goto(url.toString())
-	}
 </script>
 
 <div class="database-page">
@@ -87,16 +57,10 @@
 		<p class="subtitle">Browse and search all available summons</p>
 	</div>
 
-	<DatabaseGrid
-		data={data.items}
+	<DatabaseGridWithProvider
+		resource="summons"
 		{columns}
-		page={data.page}
-		totalPages={data.totalPages}
-		pageSize={data.pageSize}
-		total={data.total}
-		onPageChange={handlePageChange}
-		onPageSizeChange={handlePageSizeChange}
-		loading={false}
+		pageSize={20}
 	/>
 </div>
 
diff --git a/src/routes/database/summons/+page.ts b/src/routes/database/summons/+page.ts
deleted file mode 100644
index 25f69ec4..00000000
--- a/src/routes/database/summons/+page.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { PageLoad } from './$types'
-import { searchSummons } from '$lib/api/resources/search'
-
-export const load: PageLoad = async ({ fetch, url }) => {
-  const page = Number(url.searchParams.get('page') || '1') || 1
-  const pageSize = Number(url.searchParams.get('pageSize') || '20') || 20
-
-  const search = await searchSummons({ page, per: pageSize }, undefined, fetch)
-
-  return {
-    items: search.results || [],
-    page: search.meta?.page || page,
-    totalPages: search.meta?.total_pages || 1,
-    total: search.meta?.count || 0,
-    pageSize: search.meta?.per_page || pageSize
-  }
-}
-
diff --git a/src/routes/database/weapons/+page.server.ts b/src/routes/database/weapons/+page.server.ts
index 48582bb4..0e8782f3 100644
--- a/src/routes/database/weapons/+page.server.ts
+++ b/src/routes/database/weapons/+page.server.ts
@@ -2,15 +2,15 @@ import { redirect } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 
 export const load: PageServerLoad = async ({ locals }) => {
-  // Enforce authorization at individual page level
-  if (!locals.session.isAuthenticated) {
-    throw redirect(302, '/login')
-  }
+	// Enforce authorization at individual page level
+	if (!locals.session.isAuthenticated) {
+		throw redirect(302, '/login')
+	}
 
-  const role = locals.session.account?.role ?? 0
-  if (role < 7) {
-    throw redirect(302, '/')
-  }
+	const role = locals.session.account?.role ?? 0
+	if (role < 7) {
+		throw redirect(302, '/')
+	}
 
-  return {}
+	return {}
 }
\ No newline at end of file
diff --git a/src/routes/database/weapons/+page.svelte b/src/routes/database/weapons/+page.svelte
index 92aaaa2d..6c5ab738 100644
--- a/src/routes/database/weapons/+page.svelte
+++ b/src/routes/database/weapons/+page.svelte
@@ -1,32 +1,19 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-	import type { PageData } from './$types'
-	import DatabaseGrid from '$lib/components/database/DatabaseGrid.svelte'
-	import { goto } from '$app/navigation'
-	import { page as pageStore } from '$app/state'
+	import DatabaseGridWithProvider from '$lib/components/database/DatabaseGridWithProvider.svelte'
 	import type { IColumn } from 'wx-svelte-grid'
 	import WeaponImageCell from '$lib/components/database/cells/WeaponImageCell.svelte'
-	import {
-		elementLabel,
-		elementClass
-	} from '$lib/utils/database'
+	import ElementCell from '$lib/components/database/cells/ElementCell.svelte'
+	import ProficiencyCell from '$lib/components/database/cells/ProficiencyCell.svelte'
+	import { getRarityLabel } from '$lib/utils/rarity'
 
-	const { data }: { data: PageData } = $props()
-
-	console.log('[Weapons Page] Received data:', data)
-	console.log('[Weapons Page] Items count:', data.items?.length || 0)
-
-	// Add console logging to debug
-	console.log('[Weapons Page] Sample item:', data.items?.[0])
-	console.log('[Weapons Page] Sample name:', data.items?.[0]?.name)
-
-	// Convert data to SVAR Grid format - column id must match data property
+	// Column configuration for weapons
 	const columns: IColumn[] = [
 		{
 			id: 'granblue_id',
 			header: 'Image',
-			width: 60,
+			width: 80,
 			cell: WeaponImageCell
 		},
 		{
@@ -46,21 +33,22 @@
 			id: 'rarity',
 			header: 'Rarity',
 			width: 80,
-			sort: true
+			sort: true,
+			template: (rarity) => getRarityLabel(rarity)
 		},
 		{
 			id: 'element',
 			header: 'Element',
 			width: 100,
 			sort: true,
-			htmlEnable: true,
-			template: (element) => {
-				const label = elementLabel(element)
-				const className = elementClass(element)
-				return className
-					? `<span class="${className}">${label}</span>`
-					: label
-			}
+			cell: ElementCell
+		},
+		{
+			id: 'proficiency',
+			header: 'Proficiency',
+			width: 100,
+			sort: true,
+			cell: ProficiencyCell
 		},
 		{
 			id: 'max_level',
@@ -69,20 +57,6 @@
 			sort: true
 		}
 	]
-
-	// Handle pagination
-	const handlePageChange = (newPage: number) => {
-		const url = new URL(pageStore.url)
-		url.searchParams.set('page', newPage.toString())
-		goto(url.toString())
-	}
-
-	const handlePageSizeChange = (newPageSize: number) => {
-		const url = new URL(pageStore.url)
-		url.searchParams.set('page', '1')
-		url.searchParams.set('per_page', newPageSize.toString())
-		goto(url.toString())
-	}
 </script>
 
 <div class="database-page">
@@ -91,16 +65,10 @@
 		<p class="subtitle">Browse and search all available weapons</p>
 	</div>
 
-	<DatabaseGrid
-		data={data.items}
+	<DatabaseGridWithProvider
+		resource="weapons"
 		{columns}
-		page={data.page}
-		totalPages={data.totalPages}
-		pageSize={data.pageSize}
-		total={data.total}
-		onPageChange={handlePageChange}
-		onPageSizeChange={handlePageSizeChange}
-		loading={false}
+		pageSize={20}
 	/>
 </div>
 
diff --git a/src/routes/database/weapons/+page.ts b/src/routes/database/weapons/+page.ts
deleted file mode 100644
index e94318eb..00000000
--- a/src/routes/database/weapons/+page.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { PageLoad } from './$types'
-import { searchWeapons } from '$lib/api/resources/search'
-
-export const load: PageLoad = async ({ fetch, url }) => {
-  const page = Number(url.searchParams.get('page') || '1') || 1
-  const pageSize = Number(url.searchParams.get('pageSize') || '20') || 20
-
-  console.log('[Database Weapons] Loading page:', page, 'pageSize:', pageSize)
-
-  const search = await searchWeapons({ page, per: pageSize }, undefined, fetch)
-
-  console.log('[Database Weapons] API Response:', search)
-  console.log('[Database Weapons] Meta:', search.meta)
-  console.log('[Database Weapons] Results count:', search.results?.length || 0)
-
-  // Extract data from meta object
-  const result = {
-    items: search.results || [],
-    page: search.meta?.page || page,
-    totalPages: search.meta?.total_pages || 1,
-    total: search.meta?.count || 0,
-    pageSize: search.meta?.per_page || pageSize
-  }
-
-  console.log('[Database Weapons] Returning to component:', result)
-
-  return result
-}
-