diff --git a/src/routes/(app)/[username]/collection/characters/+page.svelte b/src/routes/(app)/[username]/collection/characters/+page.svelte
index 03218a31..4c2eae32 100644
--- a/src/routes/(app)/[username]/collection/characters/+page.svelte
+++ b/src/routes/(app)/[username]/collection/characters/+page.svelte
@@ -23,6 +23,11 @@
 	// Get loaded IDs context from layout
 	const loadedIdsContext = getContext<LoadedIdsContext | undefined>(LOADED_IDS_KEY)
 
+	// User's element for elemental styling
+	const userElement = $derived(
+		data.user?.avatar?.element as 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light' | undefined
+	)
+
 	// Filter state
 	let elementFilters = $state<number[]>([])
 	let rarityFilters = $state<number[]>([])
@@ -139,7 +144,7 @@
 			showViewToggle={true}
 			viewMode={currentViewMode}
 			onViewModeChange={handleViewModeChange}
-			neutralViewToggle={true}
+			element={userElement}
 		/>
 	</div>
 
@@ -191,15 +196,6 @@
 				</div>
 			{/if}
 
-			{#if !collectionQuery.hasNextPage && allCharacters.length > 0}
-				<div class="end-message">
-					<p>
-						{allCharacters.length} character{allCharacters.length === 1 ? '' : 's'} in {data.isOwner
-							? 'your'
-							: 'this'} collection
-					</p>
-				</div>
-			{/if}
 		{/if}
 	</div>
 </div>
@@ -229,9 +225,9 @@
 
 	.character-grid {
 		display: grid;
-		grid-template-columns: repeat(5, 128px);
+		grid-template-columns: repeat(5, 144px);
 		justify-content: space-between;
-		gap: $unit-4x;
+		gap: $unit-4x $unit-2x;
 	}
 
 	.character-list {
@@ -286,16 +282,6 @@
 		}
 	}
 
-	.end-message {
-		text-align: center;
-		padding: $unit-2x;
-		color: var(--text-secondary, #666);
-
-		p {
-			margin: 0;
-		}
-	}
-
 	@keyframes spin {
 		from {
 			transform: rotate(0deg);
diff --git a/src/routes/(app)/[username]/collection/summons/+page.svelte b/src/routes/(app)/[username]/collection/summons/+page.svelte
index d2e89d4e..ed9663b4 100644
--- a/src/routes/(app)/[username]/collection/summons/+page.svelte
+++ b/src/routes/(app)/[username]/collection/summons/+page.svelte
@@ -23,6 +23,11 @@
 	// Get loaded IDs context from layout
 	const loadedIdsContext = getContext<LoadedIdsContext | undefined>(LOADED_IDS_KEY)
 
+	// User's element for elemental styling
+	const userElement = $derived(
+		data.user?.avatar?.element as 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light' | undefined
+	)
+
 	// Filter state
 	let elementFilters = $state<number[]>([])
 	let rarityFilters = $state<number[]>([])
@@ -119,7 +124,7 @@
 			showViewToggle={true}
 			viewMode={currentViewMode}
 			onViewModeChange={handleViewModeChange}
-			neutralViewToggle={true}
+			element={userElement}
 		/>
 	</div>
 
@@ -171,15 +176,6 @@
 				</div>
 			{/if}
 
-			{#if !collectionQuery.hasNextPage && allSummons.length > 0}
-				<div class="end-message">
-					<p>
-						{allSummons.length} summon{allSummons.length === 1 ? '' : 's'} in {data.isOwner
-							? 'your'
-							: 'this'} collection
-					</p>
-				</div>
-			{/if}
 		{/if}
 	</div>
 </div>
@@ -209,9 +205,9 @@
 
 	.summon-grid {
 		display: grid;
-		grid-template-columns: repeat(5, 128px);
+		grid-template-columns: repeat(5, 144px);
 		justify-content: space-between;
-		gap: $unit-4x;
+		gap: $unit-4x $unit-2x;
 	}
 
 	.summon-list {
@@ -266,16 +262,6 @@
 		}
 	}
 
-	.end-message {
-		text-align: center;
-		padding: $unit-2x;
-		color: var(--text-secondary, #666);
-
-		p {
-			margin: 0;
-		}
-	}
-
 	@keyframes spin {
 		from {
 			transform: rotate(0deg);
diff --git a/src/routes/(app)/[username]/collection/weapons/+page.svelte b/src/routes/(app)/[username]/collection/weapons/+page.svelte
index c65c8737..67667699 100644
--- a/src/routes/(app)/[username]/collection/weapons/+page.svelte
+++ b/src/routes/(app)/[username]/collection/weapons/+page.svelte
@@ -23,6 +23,11 @@
 	// Get loaded IDs context from layout
 	const loadedIdsContext = getContext<LoadedIdsContext | undefined>(LOADED_IDS_KEY)
 
+	// User's element for elemental styling
+	const userElement = $derived(
+		data.user?.avatar?.element as 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light' | undefined
+	)
+
 	// Filter state
 	let elementFilters = $state<number[]>([])
 	let rarityFilters = $state<number[]>([])
@@ -127,7 +132,7 @@
 			showViewToggle={true}
 			viewMode={currentViewMode}
 			onViewModeChange={handleViewModeChange}
-			neutralViewToggle={true}
+			element={userElement}
 		/>
 	</div>
 
@@ -179,15 +184,6 @@
 				</div>
 			{/if}
 
-			{#if !collectionQuery.hasNextPage && allWeapons.length > 0}
-				<div class="end-message">
-					<p>
-						{allWeapons.length} weapon{allWeapons.length === 1 ? '' : 's'} in {data.isOwner
-							? 'your'
-							: 'this'} collection
-					</p>
-				</div>
-			{/if}
 		{/if}
 	</div>
 </div>
@@ -217,9 +213,9 @@
 
 	.weapon-grid {
 		display: grid;
-		grid-template-columns: repeat(5, 128px);
+		grid-template-columns: repeat(5, 144px);
 		justify-content: space-between;
-		gap: $unit-4x;
+		gap: $unit-4x $unit-2x;
 	}
 
 	.weapon-list {
@@ -274,16 +270,6 @@
 		}
 	}
 
-	.end-message {
-		text-align: center;
-		padding: $unit-2x;
-		color: var(--text-secondary, #666);
-
-		p {
-			margin: 0;
-		}
-	}
-
 	@keyframes spin {
 		from {
 			transform: rotate(0deg);