That's the icon in the background.

resources/js/Components/RadioButtonGroup.vue

@@ -29,36 +29,29 @@ const handleChange = (value) => {
 const getSegmentClasses = (index) => {
   const classes = [
     'px-6',
-    'py-3',
+    'py-2.5',
     'text-sm',
     'font-medium',
     'select-none',
-    'transition-colors',
-    'bg-primary',
-    'text-gray-900',
+    'transition-all',
+    'duration-200',
+    'bg-white/5',
+    'text-gray-400',
     'cursor-pointer',
-    'hover:bg-primary-dark',
-    'peer-checked:bg-primary-dark',
+    'hover:bg-white/10',
+    'hover:text-gray-200',
+    'peer-checked:bg-primary',
     'peer-checked:text-gray-900',
+    'peer-checked:font-semibold',
     'peer-focus-visible:ring-2',
-    'peer-focus-visible:ring-primary-dark',
+    'peer-focus-visible:ring-primary',
     'peer-focus-visible:ring-offset-2',
     'peer-focus-visible:ring-offset-surface',
   ]
 
-  // First segment
-  if (index === 0) {
-    classes.push('rounded-l-lg')
-  }
-
-  // Last segment
-  if (index === props.options.length - 1) {
-    classes.push('rounded-r-lg')
-  }
-
   // All except last: add divider
   if (index < props.options.length - 1) {
-    classes.push('border-r', 'border-primary-dark/40')
+    classes.push('border-r', 'border-white/10')
   }
 
   // Disabled state
@@ -71,7 +64,7 @@ const getSegmentClasses = (index) => {
 </script>
 
 <template>
-    <div role="radiogroup" :aria-label="name" class="inline-flex">
+    <div role="radiogroup" :aria-label="name" class="inline-flex rounded-lg overflow-hidden border border-white/10">
         <label
             v-for="(option, index) in options"
             :key="option.value"