diff --git a/src/routes/database/+layout.server.ts b/src/routes/database/+layout.server.ts
index b12e8629..afba17c3 100644
--- a/src/routes/database/+layout.server.ts
+++ b/src/routes/database/+layout.server.ts
@@ -2,20 +2,20 @@ import { redirect } from '@sveltejs/kit'
 import type { LayoutServerLoad } from './$types'
 
 export const load: LayoutServerLoad = async ({ locals, url }) => {
-  // Check authentication first
-  if (!locals.session.isAuthenticated) {
-    throw redirect(302, '/login')
-  }
+	// Check authentication first
+	if (!locals.session.isAuthenticated) {
+		throw redirect(302, '/login')
+	}
 
-  // Check role authorization
-  const role = locals.session.account?.role ?? 0
-  if (role < 7) {
-    // Redirect to home with no indication of why (security best practice)
-    throw redirect(302, '/')
-  }
+	// Check role authorization
+	const role = locals.session.account?.role ?? 0
+	if (role < 7) {
+		// Redirect to home with no indication of why (security best practice)
+		throw redirect(302, '/')
+	}
 
-  return {
-    role
-  }
+	return {
+		role,
+		user: locals.session.user
+	}
 }
-
diff --git a/src/routes/database/+layout.svelte b/src/routes/database/+layout.svelte
index 161ba2bd..da54141d 100644
--- a/src/routes/database/+layout.svelte
+++ b/src/routes/database/+layout.svelte
@@ -1,59 +1,30 @@
 <script lang="ts">
-  import { localizeHref } from '$lib/paraglide/runtime'
-  import { onMount } from 'svelte'
+	import { localizeHref } from '$lib/paraglide/runtime'
+	import { onMount } from 'svelte'
+	import { page } from '$app/stores'
+	import type { PageData } from './$types'
 
-  const baseHref = localizeHref('/database')
-  const summonsHref = localizeHref('/database/summons')
-  const charactersHref = localizeHref('/database/characters')
-  const weaponsHref = localizeHref('/database/weapons')
+	const { data, children }: { data: PageData; children: () => any } = $props()
 
-  // Apply wider layout to the main element for database pages
-  onMount(() => {
-    const main = document.querySelector('main')
-    if (main) {
-      main.classList.add('database-layout')
-    }
+	const baseHref = localizeHref('/database')
+	const summonsHref = localizeHref('/database/summons')
+	const charactersHref = localizeHref('/database/characters')
+	const weaponsHref = localizeHref('/database/weapons')
 
-    return () => {
-      const main = document.querySelector('main')
-      if (main) {
-        main.classList.remove('database-layout')
-      }
-    }
-  })
+	// Function to check if a nav item is selected based on current path
+	function isSelected(href: string): boolean {
+		return $page.url.pathname === href || $page.url.pathname.startsWith(href + '/')
+	}
+
+	// Get user's element for styling
+	const userElement = $derived((data as any)?.user?.element || 'null')
 </script>
 
-<section class="db-nav">
-  <nav>
-    <a href={summonsHref}>Summons</a>
-    <a href={charactersHref}>Characters</a>
-    <a href={weaponsHref}>Weapons</a>
-  </nav>
-</section>
-
-<slot />
+{@render children?.()}
 
 <style lang="scss">
-  @use '$src/themes/layout' as layout;
-  @use '$src/themes/spacing' as spacing;
-  @use '$src/themes/typography' as typography;
-
-  .db-nav {
-    margin: spacing.$unit 0;
-    nav {
-      display: flex;
-      gap: spacing.$unit-half;
-      a {
-        text-decoration: none;
-        color: var(--menu-text);
-        background: var(--menu-bg);
-        padding: spacing.$unit (spacing.$unit * 1.5);
-        border-radius: layout.$full-corner;
-        font-size: typography.$font-small;
-        font-weight: typography.$medium;
-      }
-      a:hover { background: var(--menu-bg-item-hover); }
-    }
-  }
+	@use '$src/themes/layout' as layout;
+	@use '$src/themes/spacing' as spacing;
+	@use '$src/themes/typography' as typography;
+	@use '$src/themes/colors' as colors;
 </style>
-