diff --git a/app/(stats)/composition/[id]/_component/pilot-details.tsx b/app/(stats)/composition/[id]/_component/pilot-details.tsx
index f361cc13..0e0e2baa 100644
--- a/app/(stats)/composition/[id]/_component/pilot-details.tsx
+++ b/app/(stats)/composition/[id]/_component/pilot-details.tsx
@@ -72,13 +72,11 @@ export const PilotDetails = ({ className, ships, value }: PilotDetailProps) => {
                     </div>
                     <div className="flex flex-wrap gap-x-8 gap-y-4">
                       <Detail
-                        variant="secondary"
                         className="max-w-[150px]"
                         label="Percentile"
                         value={toPercentage(current.percentile)}
                       />
                       <Detail
-                        variant="secondary"
                         className="max-w-[150px]"
                         label="Deviation"
                         value={
@@ -88,7 +86,6 @@ export const PilotDetails = ({ className, ships, value }: PilotDetailProps) => {
                         }
                       />
                       <Detail
-                        variant="secondary"
                         className="max-w-[150px]"
                         label="Winrate"
                         value={
@@ -96,7 +93,6 @@ export const PilotDetails = ({ className, ships, value }: PilotDetailProps) => {
                         }
                       />
                       <Detail
-                        variant="secondary"
                         className="max-w-[150px]"
                         label="Frequency"
                         value={toPercentage(current.frequency)}
diff --git a/ui/detail.tsx b/ui/detail.tsx
index 68f170e1..bf045af9 100644
--- a/ui/detail.tsx
+++ b/ui/detail.tsx
@@ -12,7 +12,7 @@ const styles = {
       },
       variant: {
         default: '',
-        secondary: '',
+        primary: '',
       },
       size: {
         default: '',
@@ -27,8 +27,8 @@ const styles = {
   label: cva('text-sm font-medium leading-none', {
     variants: {
       variant: {
-        default: 'text-primary-500',
-        secondary: 'text-secondary-400',
+        default: 'text-secondary-400',
+        primary: 'text-primary-500',
       },
       size: {
         default: '',
@@ -43,8 +43,8 @@ const styles = {
   value: cva('', {
     variants: {
       variant: {
-        default: 'text-secondary-700',
-        secondary: 'text-secondary-950',
+        default: 'text-secondary-950',
+        primary: 'text-secondary-700',
       },
       size: {
         default: 'text-lg font-medium',