diff --git a/src/routes/(app)/database/weapon-series/+page.svelte b/src/routes/(app)/database/weapon-series/+page.svelte
index 5c2736ff..b98f500d 100644
--- a/src/routes/(app)/database/weapon-series/+page.svelte
+++ b/src/routes/(app)/database/weapon-series/+page.svelte
@@ -1,340 +1,72 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-	import { createQuery, createMutation, useQueryClient } from '@tanstack/svelte-query'
-	import { entityQueries, entityKeys } from '$lib/api/queries/entity.queries'
-	import { entityAdapter } from '$lib/api/adapters/entity.adapter'
-	import type { WeaponSeries, WeaponSeriesInput } from '$lib/types/api/weaponSeries'
-
-	import Button from '$lib/components/ui/Button.svelte'
-	import Dialog from '$lib/components/ui/Dialog.svelte'
-
-	const queryClient = useQueryClient()
+	import { createQuery } from '@tanstack/svelte-query'
+	import { entityQueries } from '$lib/api/queries/entity.queries'
 
 	// Fetch weapon series list
 	const seriesQuery = createQuery(() => entityQueries.weaponSeriesList())
-
-	// State for create/edit dialog
-	let dialogOpen = $state(false)
-	let editingId = $state<string | null>(null)
-	let formData = $state<WeaponSeriesInput>({
-		name_en: '',
-		name_jp: '',
-		slug: '',
-		order: 0,
-		extra: false,
-		element_changeable: false,
-		has_weapon_keys: false,
-		has_awakening: false,
-		has_ax_skills: false
-	})
-	let isSubmitting = $state(false)
-	let deleteConfirmId = $state<string | null>(null)
-
-	// Mutations
-	const createSeriesMutation = createMutation(() => ({
-		mutationFn: (data: WeaponSeriesInput) => entityAdapter.createWeaponSeries(data),
-		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ['weaponSeries'] })
-			closeDialog()
-		}
-	}))
-
-	const updateSeriesMutation = createMutation(() => ({
-		mutationFn: ({ id, data }: { id: string; data: Partial<WeaponSeriesInput> }) =>
-			entityAdapter.updateWeaponSeries(id, data),
-		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ['weaponSeries'] })
-			closeDialog()
-		}
-	}))
-
-	const deleteSeriesMutation = createMutation(() => ({
-		mutationFn: (id: string) => entityAdapter.deleteWeaponSeries(id),
-		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ['weaponSeries'] })
-			deleteConfirmId = null
-		}
-	}))
-
-	// Generate slug from name
-	function generateSlug(name: string): string {
-		return name
-			.toLowerCase()
-			.replace(/[^a-z0-9]+/g, '-')
-			.replace(/^-|-$/g, '')
-	}
-
-	// Open create dialog
-	function openCreateDialog() {
-		editingId = null
-		formData = {
-			name_en: '',
-			name_jp: '',
-			slug: '',
-			order: (seriesQuery.data?.length ?? 0) + 1,
-			extra: false,
-			element_changeable: false,
-			has_weapon_keys: false,
-			has_awakening: false,
-			has_ax_skills: false
-		}
-		dialogOpen = true
-	}
-
-	// Open edit dialog
-	function openEditDialog(series: WeaponSeries) {
-		editingId = series.id
-		formData = {
-			name_en: series.name.en,
-			name_jp: series.name.ja,
-			slug: series.slug,
-			order: series.order,
-			extra: series.extra ?? false,
-			element_changeable: series.elementChangeable ?? false,
-			has_weapon_keys: series.hasWeaponKeys ?? false,
-			has_awakening: series.hasAwakening ?? false,
-			has_ax_skills: series.hasAxSkills ?? false
-		}
-		dialogOpen = true
-	}
-
-	// Close dialog
-	function closeDialog() {
-		dialogOpen = false
-		editingId = null
-		isSubmitting = false
-	}
-
-	// Handle form submit
-	async function handleSubmit() {
-		isSubmitting = true
-		try {
-			if (editingId) {
-				await updateSeriesMutation.mutateAsync({ id: editingId, data: formData })
-			} else {
-				await createSeriesMutation.mutateAsync(formData)
-			}
-		} catch (error) {
-			console.error('Failed to save weapon series:', error)
-		} finally {
-			isSubmitting = false
-		}
-	}
-
-	// Handle name change to auto-generate slug for new entries
-	function handleNameChange(event: Event) {
-		const target = event.target as HTMLInputElement
-		formData.name_en = target.value
-		if (!editingId && !formData.slug) {
-			formData.slug = generateSlug(target.value)
-		}
-	}
-
-	// Handle delete confirm
-	async function handleDelete(id: string) {
-		try {
-			await deleteSeriesMutation.mutateAsync(id)
-		} catch (error) {
-			console.error('Failed to delete weapon series:', error)
-		}
-	}
 </script>
 
 <div class="database-page">
-	<div class="page-header">
-		<div class="header-content">
-			<h1>Weapon Series</h1>
-			<p class="subtitle">Manage weapon series categories</p>
-		</div>
-		<Button variant="primary" size="small" onclick={openCreateDialog}>
-			Add Series
-		</Button>
-	</div>
-
-	{#if seriesQuery.isPending}
-		<div class="loading">Loading weapon series...</div>
-	{:else if seriesQuery.error}
-		<div class="error">Failed to load weapon series</div>
-	{:else if seriesQuery.data}
-		<div class="series-table">
-			<table>
-				<thead>
-					<tr>
-						<th class="order">Order</th>
-						<th class="name">Name (EN)</th>
-						<th class="name-ja">Name (JA)</th>
-						<th class="slug">Slug</th>
-						<th class="flags">Flags</th>
-						<th class="count">Weapons</th>
-						<th class="actions">Actions</th>
-					</tr>
-				</thead>
-				<tbody>
-					{#each seriesQuery.data.sort((a, b) => a.order - b.order) as series (series.id)}
+	<div class="grid-container">
+		{#if seriesQuery.isPending}
+			<div class="loading">Loading weapon series...</div>
+		{:else if seriesQuery.error}
+			<div class="error">Failed to load weapon series</div>
+		{:else if seriesQuery.data}
+			<div class="series-table">
+				<table>
+					<thead>
 						<tr>
-							<td class="order">{series.order}</td>
-							<td class="name">{series.name.en}</td>
-							<td class="name-ja">{series.name.ja}</td>
-							<td class="slug"><code>{series.slug}</code></td>
-							<td class="flags">
-								{#if series.extra}<span class="flag">Extra</span>{/if}
-								{#if series.elementChangeable}<span class="flag">Element</span>{/if}
-								{#if series.hasWeaponKeys}<span class="flag">Keys</span>{/if}
-								{#if series.hasAwakening}<span class="flag">Awaken</span>{/if}
-								{#if series.hasAxSkills}<span class="flag">AX</span>{/if}
-							</td>
-							<td class="count">{series.weaponCount ?? '—'}</td>
-							<td class="actions">
-								<Button variant="ghost" size="small" onclick={() => openEditDialog(series)}>
-									Edit
-								</Button>
-								{#if deleteConfirmId === series.id}
-									<Button
-										variant="destructive"
-										size="small"
-										onclick={() => handleDelete(series.id)}
-										disabled={deleteSeriesMutation.isPending}
-									>
-										Confirm
-									</Button>
-									<Button variant="ghost" size="small" onclick={() => (deleteConfirmId = null)}>
-										Cancel
-									</Button>
-								{:else}
-									<Button
-										variant="ghost"
-										size="small"
-										onclick={() => (deleteConfirmId = series.id)}
-									>
-										Delete
-									</Button>
-								{/if}
-							</td>
+							<th class="order">Order</th>
+							<th class="name">Name (EN)</th>
+							<th class="name-ja">Name (JA)</th>
+							<th class="slug">Slug</th>
+							<th class="flags">Flags</th>
 						</tr>
-					{/each}
-				</tbody>
-			</table>
-		</div>
-	{/if}
+					</thead>
+					<tbody>
+						{#each seriesQuery.data.sort((a, b) => a.order - b.order) as series (series.id)}
+							<tr>
+								<td class="order">{series.order}</td>
+								<td class="name">{series.name.en}</td>
+								<td class="name-ja">{series.name.ja}</td>
+								<td class="slug"><code>{series.slug}</code></td>
+								<td class="flags">
+									{#if series.extra}<span class="flag extra">Extra</span>{/if}
+									{#if series.elementChangeable}<span class="flag element">Element</span>{/if}
+									{#if series.hasWeaponKeys}<span class="flag keys">Keys</span>{/if}
+									{#if series.hasAwakening}<span class="flag awaken">Awaken</span>{/if}
+									{#if series.hasAxSkills}<span class="flag ax">AX</span>{/if}
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		{/if}
+	</div>
 </div>
 
-<!-- Create/Edit Dialog -->
-<Dialog bind:open={dialogOpen} title={editingId ? 'Edit Weapon Series' : 'Add Weapon Series'}>
-	<form onsubmit={(e) => { e.preventDefault(); handleSubmit() }}>
-		<div class="form-grid">
-			<div class="form-group">
-				<label for="name_en">Name (English)</label>
-				<input
-					id="name_en"
-					type="text"
-					class="text-input"
-					value={formData.name_en}
-					oninput={handleNameChange}
-					placeholder="e.g., Dark Opus"
-					required
-				/>
-			</div>
-
-			<div class="form-group">
-				<label for="name_jp">Name (Japanese)</label>
-				<input
-					id="name_jp"
-					type="text"
-					class="text-input"
-					bind:value={formData.name_jp}
-					placeholder="e.g., 終末の神器"
-					required
-				/>
-			</div>
-
-			<div class="form-group">
-				<label for="slug">Slug</label>
-				<input
-					id="slug"
-					type="text"
-					class="text-input"
-					bind:value={formData.slug}
-					placeholder="e.g., dark-opus"
-					required
-				/>
-			</div>
-
-			<div class="form-group">
-				<label for="order">Order</label>
-				<input
-					id="order"
-					type="number"
-					class="text-input"
-					bind:value={formData.order}
-					required
-				/>
-			</div>
-
-			<div class="form-group checkboxes">
-				<label>
-					<input type="checkbox" bind:checked={formData.extra} />
-					Extra (Additional Weapons)
-				</label>
-				<label>
-					<input type="checkbox" bind:checked={formData.element_changeable} />
-					Element Changeable
-				</label>
-				<label>
-					<input type="checkbox" bind:checked={formData.has_weapon_keys} />
-					Has Weapon Keys
-				</label>
-				<label>
-					<input type="checkbox" bind:checked={formData.has_awakening} />
-					Has Awakening
-				</label>
-				<label>
-					<input type="checkbox" bind:checked={formData.has_ax_skills} />
-					Has AX Skills
-				</label>
-			</div>
-		</div>
-	</form>
-
-	{#snippet footer()}
-		<Button variant="ghost" onclick={closeDialog} disabled={isSubmitting}>
-			Cancel
-		</Button>
-		<Button variant="primary" onclick={handleSubmit} disabled={isSubmitting}>
-			{isSubmitting ? 'Saving...' : (editingId ? 'Update' : 'Create')}
-		</Button>
-	{/snippet}
-</Dialog>
-
 <style lang="scss">
 	@use '$src/themes/colors' as colors;
+	@use '$src/themes/effects' as effects;
+	@use '$src/themes/layout' as layout;
 	@use '$src/themes/spacing' as spacing;
 	@use '$src/themes/typography' as typography;
 
 	.database-page {
-		padding: spacing.$unit-4x;
-		max-width: 1200px;
+		padding: spacing.$unit-2x 0;
 		margin: 0 auto;
 	}
 
-	.page-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: flex-start;
-		margin-bottom: spacing.$unit-4x;
-
-		.header-content {
-			h1 {
-				font-size: typography.$font-xxlarge;
-				font-weight: typography.$bold;
-				margin-bottom: spacing.$unit-half;
-			}
-
-			.subtitle {
-				font-size: typography.$font-regular;
-				color: colors.$grey-50;
-			}
-		}
+	.grid-container {
+		background: var(--card-bg);
+		border: 0.5px solid rgba(0, 0, 0, 0.18);
+		border-radius: layout.$page-corner;
+		box-shadow: effects.$page-elevation;
+		overflow: hidden;
 	}
 
 	.loading,
@@ -354,20 +86,17 @@
 		table {
 			width: 100%;
 			border-collapse: collapse;
-			background: colors.$grey-90;
-			border-radius: 8px;
-			overflow: hidden;
 		}
 
 		th,
 		td {
 			padding: spacing.$unit-2x spacing.$unit-3x;
 			text-align: left;
-			border-bottom: 1px solid colors.$grey-85;
+			border-bottom: 1px solid var(--border-secondary, #e5e5e5);
 		}
 
 		th {
-			background: colors.$grey-85;
+			background: var(--table-header-bg, #f9f9f9);
 			font-weight: typography.$medium;
 			font-size: typography.$font-small;
 			color: colors.$grey-40;
@@ -380,19 +109,22 @@
 		}
 
 		.order {
-			width: 60px;
+			width: 80px;
 			text-align: center;
 		}
 
-		.name,
+		.name {
+			min-width: 280px;
+		}
+
 		.name-ja {
-			min-width: 150px;
+			min-width: 180px;
 		}
 
 		.slug code {
 			font-family: 'SF Mono', Monaco, monospace;
 			font-size: typography.$font-small;
-			background: colors.$grey-80;
+			background: var(--code-bg, #f0f0f0);
 			padding: spacing.$unit-fourth spacing.$unit-half;
 			border-radius: 4px;
 		}
@@ -403,79 +135,46 @@
 				font-size: typography.$font-tiny;
 				padding: spacing.$unit-fourth spacing.$unit-half;
 				margin-right: spacing.$unit-half;
-				background: colors.$grey-80;
 				border-radius: 4px;
-				color: colors.$grey-30;
-			}
-		}
+				font-weight: typography.$medium;
 
-		.count {
-			width: 80px;
-			text-align: center;
-		}
+				&.extra {
+					background: #f3e8ff;
+					color: #6b21a8;
+				}
 
-		.actions {
-			width: 200px;
-			display: flex;
-			gap: spacing.$unit;
-		}
+				&.element {
+					background: linear-gradient(to right, #fecaca, #fef08a, #bbf7d0, #bfdbfe, #e9d5ff, #fbcfe8);
+					color: #374151;
+				}
 
-		tbody tr:hover {
-			background: colors.$grey-85;
-		}
-	}
+				&.keys {
+					background: #fef3c7;
+					color: #92400e;
+				}
 
-	.form-grid {
-		display: flex;
-		flex-direction: column;
-		gap: spacing.$unit-3x;
-	}
+				&.awaken {
+					background: #dcfce7;
+					color: #166534;
+				}
 
-	.form-group {
-		display: flex;
-		flex-direction: column;
-		gap: spacing.$unit;
-
-		> label {
-			font-size: typography.$font-small;
-			font-weight: typography.$medium;
-			color: colors.$grey-30;
-		}
-
-		&.checkboxes {
-			gap: spacing.$unit-2x;
-
-			label {
-				display: flex;
-				align-items: center;
-				gap: spacing.$unit;
-				font-weight: typography.$normal;
-				cursor: pointer;
-
-				input[type='checkbox'] {
-					width: 16px;
-					height: 16px;
-					cursor: pointer;
+				&.ax {
+					background: #ffe4e6;
+					color: #9f1239;
 				}
 			}
 		}
-	}
 
-	.text-input {
-		padding: spacing.$unit-2x;
-		background: colors.$grey-85;
-		border: 1px solid colors.$grey-80;
-		border-radius: 6px;
-		color: colors.$grey-10;
-		font-size: typography.$font-regular;
-
-		&:focus {
-			outline: none;
-			border-color: colors.$grey-60;
+		tbody tr:nth-child(odd) {
+			background: var(--table-row-alt, #fafafa);
 		}
 
-		&::placeholder {
-			color: colors.$grey-60;
+		tbody tr:hover {
+			background: var(--table-row-hover, #f0f0f0);
+		}
+
+		tbody tr:last-child td {
+			border-bottom: none;
 		}
 	}
 </style>