diff --git a/src/routes/(app)/database/job-accessories/[granblueId]/+page.server.ts b/src/routes/(app)/database/job-accessories/[granblueId]/+page.server.ts
new file mode 100644
index 00000000..ea4143c3
--- /dev/null
+++ b/src/routes/(app)/database/job-accessories/[granblueId]/+page.server.ts
@@ -0,0 +1,29 @@
+import type { PageServerLoad } from './$types'
+import { jobAdapter } from '$lib/api/adapters/job.adapter'
+import { error } from '@sveltejs/kit'
+
+export const load: PageServerLoad = async ({ params, parent }) => {
+ try {
+ // Get parent data to access role
+ const parentData = await parent()
+
+ const accessory = await jobAdapter.getAccessoryById(params.granblueId)
+
+ if (!accessory) {
+ throw error(404, 'Job accessory not found')
+ }
+
+ return {
+ accessory,
+ role: parentData.role
+ }
+ } catch (err) {
+ console.error('Failed to load job accessory:', err)
+
+ if (err instanceof Error && 'status' in err && err.status === 404) {
+ throw error(404, 'Job accessory not found')
+ }
+
+ throw error(500, 'Failed to load job accessory')
+ }
+}
diff --git a/src/routes/(app)/database/job-accessories/[granblueId]/+page.svelte b/src/routes/(app)/database/job-accessories/[granblueId]/+page.svelte
new file mode 100644
index 00000000..06919e65
--- /dev/null
+++ b/src/routes/(app)/database/job-accessories/[granblueId]/+page.svelte
@@ -0,0 +1,222 @@
+
+
+
+
+
+
+
+ {#if accessory}
+
+
+
+
+
+ {accessory.name.en}
+
+
+ {accessory.name.ja ?? '—'}
+
+
+ {accessory.granblueId}
+
+
+
+
+
+
+ {getAccessoryTypeName(accessory.accessoryType)}
+
+
+
+ {accessory.rarity ?? '—'}
+
+
+ {accessory.releaseDate ?? '—'}
+
+
+
+
+
+ {#if accessory.job}
+
+ {accessory.job.name.en}
+
+ {:else}
+ —
+ {/if}
+
+
+
+ {:else if accessoryQuery.isLoading}
+
Loading accessory...
+ {:else}
+
Failed to load accessory
+ {/if}
+
+
+
diff --git a/src/routes/(app)/database/job-accessories/[granblueId]/edit/+page.server.ts b/src/routes/(app)/database/job-accessories/[granblueId]/edit/+page.server.ts
new file mode 100644
index 00000000..4032b28c
--- /dev/null
+++ b/src/routes/(app)/database/job-accessories/[granblueId]/edit/+page.server.ts
@@ -0,0 +1,34 @@
+import type { PageServerLoad } from './$types'
+import { jobAdapter } from '$lib/api/adapters/job.adapter'
+import { error, redirect } from '@sveltejs/kit'
+
+export const load: PageServerLoad = async ({ params, parent }) => {
+ // Get parent data to access role
+ const parentData = await parent()
+
+ // Check if user has editor role
+ if (!parentData.role || parentData.role < 7) {
+ throw redirect(302, `/database/job-accessories/${params.granblueId}`)
+ }
+
+ try {
+ const accessory = await jobAdapter.getAccessoryById(params.granblueId)
+
+ if (!accessory) {
+ throw error(404, 'Job accessory not found')
+ }
+
+ return {
+ accessory,
+ role: parentData.role
+ }
+ } catch (err) {
+ console.error('Failed to load job accessory:', err)
+
+ if (err instanceof Error && 'status' in err && err.status === 404) {
+ throw error(404, 'Job accessory not found')
+ }
+
+ throw error(500, 'Failed to load job accessory')
+ }
+}
diff --git a/src/routes/(app)/database/job-accessories/[granblueId]/edit/+page.svelte b/src/routes/(app)/database/job-accessories/[granblueId]/edit/+page.svelte
new file mode 100644
index 00000000..c5c23dd7
--- /dev/null
+++ b/src/routes/(app)/database/job-accessories/[granblueId]/edit/+page.svelte
@@ -0,0 +1,283 @@
+
+ {#if accessory}
+
+
+ {#if saveError}
+
{saveError}
+ {/if}
+
+ {#if saveSuccess}
+
Changes saved successfully!
+ {/if}
+
+
+ {:else if accessoryQuery.isLoading}
+
Loading accessory...
+ {:else}
+
Failed to load accessory
+ {/if}
+
+
+
diff --git a/src/routes/(app)/database/job-accessories/new/+page.server.ts b/src/routes/(app)/database/job-accessories/new/+page.server.ts
new file mode 100644
index 00000000..8ac092a4
--- /dev/null
+++ b/src/routes/(app)/database/job-accessories/new/+page.server.ts
@@ -0,0 +1,16 @@
+import type { PageServerLoad } from './$types'
+import { redirect } from '@sveltejs/kit'
+
+export const load: PageServerLoad = async ({ parent }) => {
+ // Get parent data to access role
+ const parentData = await parent()
+
+ // Check if user has editor role
+ if (!parentData.role || parentData.role < 7) {
+ throw redirect(302, '/database/jobs?view=accessories')
+ }
+
+ return {
+ role: parentData.role
+ }
+}
diff --git a/src/routes/(app)/database/job-accessories/new/+page.svelte b/src/routes/(app)/database/job-accessories/new/+page.svelte
new file mode 100644
index 00000000..b25f3758
--- /dev/null
+++ b/src/routes/(app)/database/job-accessories/new/+page.svelte
@@ -0,0 +1,253 @@
+