diff --git a/src/routes/database/characters/+page.svelte b/src/routes/database/characters/+page.svelte
index b956c350..bf842f39 100644
--- a/src/routes/database/characters/+page.svelte
+++ b/src/routes/database/characters/+page.svelte
@@ -61,40 +61,32 @@
 </script>
 
 <div class="database-page">
-	<div class="page-header">
-		<h1>Characters Database</h1>
-		<p class="subtitle">Browse and search all available characters</p>
-	</div>
-
-	<DatabaseGridWithProvider
-		resource="characters"
-		{columns}
-		pageSize={20}
-	/>
+	<DatabaseGridWithProvider resource="characters" {columns} pageSize={20} />
 </div>
 
 <style lang="scss">
+	@use '$src/themes/colors' as colors;
 	@use '$src/themes/spacing' as spacing;
 	@use '$src/themes/typography' as typography;
 
 	.database-page {
-		padding: spacing.$unit * 2;
+		padding: spacing.$unit-2x 0;
 		max-width: 1400px;
 		margin: 0 auto;
 	}
 
 	.page-header {
-		margin-bottom: spacing.$unit * 2;
+		margin-bottom: spacing.$unit-2x;
 
 		h1 {
 			font-size: typography.$font-xxlarge;
 			font-weight: typography.$bold;
-			margin-bottom: spacing.$unit * 0.5;
+			margin-bottom: spacing.$unit-half;
 		}
 
 		.subtitle {
 			font-size: typography.$font-regular;
-			color: #6c757d;
+			color: colors.$grey-50;
 		}
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/routes/database/summons/+page.svelte b/src/routes/database/summons/+page.svelte
index d217e009..62c89a28 100644
--- a/src/routes/database/summons/+page.svelte
+++ b/src/routes/database/summons/+page.svelte
@@ -61,40 +61,32 @@
 </script>
 
 <div class="database-page">
-	<div class="page-header">
-		<h1>Summons Database</h1>
-		<p class="subtitle">Browse and search all available summons</p>
-	</div>
-
-	<DatabaseGridWithProvider
-		resource="summons"
-		{columns}
-		pageSize={20}
-	/>
+	<DatabaseGridWithProvider resource="summons" {columns} pageSize={20} />
 </div>
 
 <style lang="scss">
+	@use '$src/themes/colors' as colors;
 	@use '$src/themes/spacing' as spacing;
 	@use '$src/themes/typography' as typography;
 
 	.database-page {
-		padding: spacing.$unit * 2;
+		padding: spacing.$unit-2x 0;
 		max-width: 1400px;
 		margin: 0 auto;
 	}
 
 	.page-header {
-		margin-bottom: spacing.$unit * 2;
+		margin-bottom: spacing.$unit-2x;
 
 		h1 {
 			font-size: typography.$font-xxlarge;
 			font-weight: typography.$bold;
-			margin-bottom: spacing.$unit * 0.5;
+			margin-bottom: spacing.$unit-half;
 		}
 
 		.subtitle {
 			font-size: typography.$font-regular;
-			color: #6c757d;
+			color: colors.$grey-50;
 		}
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/routes/database/weapons/+page.svelte b/src/routes/database/weapons/+page.svelte
index 0ceb3df8..047ccc8f 100644
--- a/src/routes/database/weapons/+page.svelte
+++ b/src/routes/database/weapons/+page.svelte
@@ -69,40 +69,32 @@
 </script>
 
 <div class="database-page">
-	<div class="page-header">
-		<h1>Weapons Database</h1>
-		<p class="subtitle">Browse and search all available weapons</p>
-	</div>
-
-	<DatabaseGridWithProvider
-		resource="weapons"
-		{columns}
-		pageSize={20}
-	/>
+	<DatabaseGridWithProvider resource="weapons" {columns} pageSize={20} />
 </div>
 
 <style lang="scss">
+	@use '$src/themes/colors' as colors;
 	@use '$src/themes/spacing' as spacing;
 	@use '$src/themes/typography' as typography;
 
 	.database-page {
-		padding: spacing.$unit * 2;
+		padding: spacing.$unit-2x 0;
 		max-width: 1400px;
 		margin: 0 auto;
 	}
 
 	.page-header {
-		margin-bottom: spacing.$unit * 2;
+		margin-bottom: spacing.$unit-2x;
 
 		h1 {
 			font-size: typography.$font-xxlarge;
 			font-weight: typography.$bold;
-			margin-bottom: spacing.$unit * 0.5;
+			margin-bottom: spacing.$unit-half;
 		}
 
 		.subtitle {
 			font-size: typography.$font-regular;
-			color: #6c757d;
+			color: colors.$grey-50;
 		}
 	}
-</style>
\ No newline at end of file
+</style>