diff --git a/src/lib/components/artifact/ArtifactModifierList.svelte b/src/lib/components/artifact/ArtifactModifierList.svelte
index 415b5591..9ec7543d 100644
--- a/src/lib/components/artifact/ArtifactModifierList.svelte
+++ b/src/lib/components/artifact/ArtifactModifierList.svelte
@@ -5,16 +5,20 @@
 	import { createQuery } from '@tanstack/svelte-query'
 	import { artifactQueries } from '$lib/api/queries/artifact.queries'
 
+	type ElementType = 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light'
+
 	interface Props {
 		/** Slot number (1-4) to get skills for */
 		slot: number
 		/** Currently selected modifier (for highlighting) */
 		selectedModifier?: number
+		/** Element for styling the selected state */
+		element?: ElementType
 		/** Handler when a modifier is selected */
 		onSelect: (skill: ArtifactSkill) => void
 	}
 
-	const { slot, selectedModifier, onSelect }: Props = $props()
+	const { slot, selectedModifier, element, onSelect }: Props = $props()
 
 	// Query skills for this slot (filtered by group on the server)
 	const skillsQuery = createQuery(() => artifactQueries.skillsForSlot(slot))
@@ -37,6 +41,12 @@
 					type="button"
 					class="modifier-option"
 					class:selected={selectedModifier === skill.modifier}
+					class:element-wind={element === 'wind'}
+					class:element-fire={element === 'fire'}
+					class:element-water={element === 'water'}
+					class:element-earth={element === 'earth'}
+					class:element-dark={element === 'dark'}
+					class:element-light={element === 'light'}
 					onclick={() => onSelect(skill)}
 				>
 					<span class="name">{skill.name.en}</span>
@@ -81,13 +91,11 @@
 		width: 100%;
 		padding: spacing.$unit;
 		background: transparent;
-		border: 1px solid transparent;
+		border: none;
 		border-radius: layout.$item-corner;
 		cursor: pointer;
 		text-align: left;
-		transition:
-			background-color effects.$duration-quick ease,
-			border-color effects.$duration-quick ease;
+		transition: background-color effects.$duration-quick ease;
 
 		&:hover {
 			background: colors.$grey-90;
@@ -98,8 +106,36 @@
 		}
 
 		&.selected {
-			background: colors.$water-bg-20;
-			border-color: colors.$blue;
+			background: colors.$grey-85;
+
+			.name {
+				color: colors.$grey-20;
+			}
+
+			&.element-wind {
+				background: colors.$wind-bg-20;
+				.name { color: colors.$wind-text-20; }
+			}
+			&.element-fire {
+				background: colors.$fire-bg-20;
+				.name { color: colors.$fire-text-20; }
+			}
+			&.element-water {
+				background: colors.$water-bg-20;
+				.name { color: colors.$water-text-20; }
+			}
+			&.element-earth {
+				background: colors.$earth-bg-20;
+				.name { color: colors.$earth-text-20; }
+			}
+			&.element-dark {
+				background: colors.$dark-bg-20;
+				.name { color: colors.$dark-text-20; }
+			}
+			&.element-light {
+				background: colors.$light-bg-20;
+				.name { color: colors.$light-text-20; }
+			}
 		}
 
 		.name {