That's the icon in the background.

resources/js/Components/QuestionCard.vue

@@ -58,8 +58,8 @@ const updateTextValue = (event) => {
 </script>
 
 <template>
-    <div class="py-4">
-        <p class="text-white mb-3">{{ question.text }}</p>
+    <div class="py-5 first:pt-0">
+        <p class="text-white font-medium leading-relaxed mb-4">{{ question.text }}</p>
 
         <!-- Text-only question (no radio buttons) -->
         <div v-if="isTextOnly">
@@ -67,7 +67,7 @@ const updateTextValue = (event) => {
                 :value="modelValue.text_value"
                 @input="updateTextValue"
                 rows="3"
-                class="w-full rounded-lg border border-gray-600 bg-surface px-3 py-2 text-white placeholder-gray-500 focus:border-primary focus:ring-1 focus:ring-primary"
+                class="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-white placeholder-gray-600 focus:border-primary/50 focus:ring-1 focus:ring-primary/20 transition-colors duration-200"
                 placeholder="Enter your response..."
             ></textarea>
         </div>
@@ -83,18 +83,27 @@ const updateTextValue = (event) => {
             />
 
             <!-- Details textarea (conditional) -->
-            <div v-if="showDetails" class="mt-2">
-                <label class="block text-sm text-gray-400 mb-1">
-                    Details{{ detailsRequired ? ' (required)' : ' (optional)' }}
-                </label>
-                <textarea
-                    :value="modelValue.text_value"
-                    @input="updateTextValue"
-                    rows="2"
-                    class="w-full rounded-lg border border-gray-600 bg-surface px-3 py-2 text-white placeholder-gray-500 focus:border-primary focus:ring-1 focus:ring-primary text-sm"
-                    placeholder="Enter details..."
-                ></textarea>
-            </div>
+            <Transition
+                enter-active-class="transition-all duration-300 ease-out"
+                enter-from-class="opacity-0 -translate-y-1 max-h-0"
+                enter-to-class="opacity-100 translate-y-0 max-h-40"
+                leave-active-class="transition-all duration-200 ease-in"
+                leave-from-class="opacity-100 translate-y-0 max-h-40"
+                leave-to-class="opacity-0 -translate-y-1 max-h-0"
+            >
+                <div v-if="showDetails" class="mt-2">
+                    <label class="block text-sm text-gray-400 mb-1">
+                        Details{{ detailsRequired ? ' (required)' : ' (optional)' }}
+                    </label>
+                    <textarea
+                        :value="modelValue.text_value"
+                        @input="updateTextValue"
+                        rows="2"
+                        class="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-white placeholder-gray-600 focus:border-primary/50 focus:ring-1 focus:ring-primary/20 text-sm transition-colors duration-200"
+                        placeholder="Enter details..."
+                    ></textarea>
+                </div>
+            </Transition>
         </div>
     </div>
 </template>

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"

resources/js/Components/ScoreIndicator.vue

@@ -43,20 +43,33 @@ const scoreData = computed(() => {
     }
   }
 })
+
+const panelBorderClass = computed(() => {
+  if (props.score >= 10) return 'border-green-500/20'
+  if (props.score >= 5) return 'border-amber-500/20'
+  if (props.score >= 1) return 'border-red-500/20'
+  return 'border-white/10'
+})
 </script>
 
 <template>
-  <div v-if="visible" class="inline-flex items-center gap-3">
+  <div
+    v-if="visible"
+    class="inline-flex items-center gap-3 bg-white/5 backdrop-blur-sm border rounded-xl px-5 py-3 transition-all duration-500"
+    :class="panelBorderClass"
+  >
     <div class="flex items-baseline gap-2">
-      <span class="text-4xl font-bold" :class="scoreData.textClass">
+      <span class="text-3xl font-bold" :class="scoreData.textClass">
         {{ score }}
       </span>
-      <span class="text-sm text-gray-400">points</span>
+      <span class="text-xs uppercase tracking-wider text-gray-500">
+        points
+      </span>
     </div>
     <div
       :class="[
         scoreData.bgClass,
-        'px-4 py-2 rounded-lg text-white font-semibold text-sm',
+        'px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider text-white shadow-sm',
       ]"
     >
       {{ scoreData.label }}