diff --git a/src/components/level/display.tsx b/src/components/level/display.tsx
index 16b682e17..ded98bd44 100644
--- a/src/components/level/display.tsx
+++ b/src/components/level/display.tsx
@@ -29,6 +29,7 @@ export function LevelDisplay({ icon, type, level, className, ...props }: Props)
 					return (
 						<div
 							key={index}
+							data-active={isActive}
 							className={cn(
 								"h-2.5 flex-1 border border-(--page-primary-color) border-x-0 first:border-l last:border-r",
 								isActive && "bg-(--page-primary-color)",
@@ -50,6 +51,7 @@ export function LevelDisplay({ icon, type, level, className, ...props }: Props)
 				return (
 					<div
 						key={index}
+						data-active={isActive}
 						className={cn(
 							"size-2.5 border border-(--page-primary-color)",
 							isActive && "bg-(--page-primary-color)",
diff --git a/src/components/resume/templates/chikorita.tsx b/src/components/resume/templates/chikorita.tsx
index 9a36b646d..5b3292137 100644
--- a/src/components/resume/templates/chikorita.tsx
+++ b/src/components/resume/templates/chikorita.tsx
@@ -19,8 +19,8 @@ const sectionClassName = cn(
 	"group-data-[layout=sidebar]:[&_.section-item_i]:text-(--page-background-color)!",
 
 	// Level Display in Sidebar Layout
-	"group-data-[layout=sidebar]:[&_.section-item-level>div]:bg-(--page-background-color)",
-	"group-data-[layout=sidebar]:[&_.section-item-level>div]:text-(--page-background-color)",
+	"group-data-[layout=sidebar]:[&_.section-item-level>div]:border-(--page-background-color)",
+	"group-data-[layout=sidebar]:[&_.section-item-level>div]:data-[active=true]:bg-(--page-background-color)",
 
 	// Section Item Header in Sidebar Layout
 	"group-data-[layout=sidebar]:[&_.section-item-header>div]:flex-col",