diff --git a/_includes/components/sections/cv-education.njk b/_includes/components/sections/cv-education.njk
index 0550ebc..3ff1ecf 100644
--- a/_includes/components/sections/cv-education.njk
+++ b/_includes/components/sections/cv-education.njk
@@ -1,28 +1,85 @@
 {#
-  CV Education Section
+  CV Education Section - collapsible education cards (accordion)
   Data fetched from /cv/data.json via homepage plugin
+  Each card gets a distinct color via cycling palette
 #}
 
 {% set hasEducation = cv and cv.education and cv.education.length %}
 
 {% if hasEducation %}
-<section class="mb-8 sm:mb-12" id="education">
+<section class="mb-8 sm:mb-12" id="education" x-data="{ expanded: {} }">
   <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">
     {{ section.config.title or "Education" }}
   </h2>
 
-  <div class="space-y-3">
+  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-start">
     {% for item in cv.education %}
     {% if not filterType or item.educationType == filterType or not item.educationType %}
-    <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
-      <h3 class="font-semibold text-surface-900 dark:text-surface-100">{{ item.degree }}</h3>
-      <p class="text-sm text-surface-600 dark:text-surface-400">
-        {{ item.institution }}{% if item.location %} &middot; {{ item.location }}{% endif %}
-        {% if item.startDate %} &middot; {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}{% elif item.year %} &middot; {{ item.year }}{% endif %}
-      </p>
-      {% if item.description %}
-      <p class="text-sm text-surface-700 dark:text-surface-300 mt-1">{{ item.description }}</p>
-      {% endif %}
+    {% set ci = loop.index0 % 8 %}
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 transition-colors overflow-hidden border-l-[3px]
+      {% if ci == 0 %}border-l-amber-400 dark:border-l-amber-500
+      {% elif ci == 1 %}border-l-emerald-400 dark:border-l-emerald-500
+      {% elif ci == 2 %}border-l-sky-400 dark:border-l-sky-500
+      {% elif ci == 3 %}border-l-rose-400 dark:border-l-rose-500
+      {% elif ci == 4 %}border-l-purple-400 dark:border-l-purple-500
+      {% elif ci == 5 %}border-l-orange-400 dark:border-l-orange-500
+      {% elif ci == 6 %}border-l-teal-400 dark:border-l-teal-500
+      {% elif ci == 7 %}border-l-indigo-400 dark:border-l-indigo-500
+      {% endif %}">
+      {# Summary row — always visible, clickable #}
+      <button
+        class="w-full p-4 flex items-center justify-between gap-2 cursor-pointer text-left hover:bg-surface-50 dark:hover:bg-surface-700/50 transition-colors"
+        @click="expanded[{{ loop.index0 }}] = !expanded[{{ loop.index0 }}]"
+        :aria-expanded="expanded[{{ loop.index0 }}] ? 'true' : 'false'"
+      >
+        <div class="min-w-0 flex-1">
+          <h3 class="font-semibold text-surface-900 dark:text-surface-100 truncate">{{ item.degree }}</h3>
+          <p class="text-sm text-surface-600 dark:text-surface-400 truncate">
+            {{ item.institution }}{% if item.location %} &middot; {{ item.location }}{% endif %}
+          </p>
+        </div>
+        <div class="flex items-center gap-2 shrink-0">
+          {% if item.startDate %}
+          <span class="text-xs text-surface-500 hidden sm:inline">
+            {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
+          </span>
+          {% elif item.year %}
+          <span class="text-xs text-surface-500 hidden sm:inline">{{ item.year }}</span>
+          {% endif %}
+          <svg
+            class="w-4 h-4 text-surface-400 transition-transform duration-200"
+            :class="expanded[{{ loop.index0 }}] && 'rotate-180'"
+            fill="none" stroke="currentColor" viewBox="0 0 24 24"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
+        </div>
+      </button>
+
+      {# Detail section — collapsible #}
+      <div
+        x-show="expanded[{{ loop.index0 }}]"
+        x-transition:enter="transition ease-out duration-200"
+        x-transition:enter-start="opacity-0 -translate-y-1"
+        x-transition:enter-end="opacity-100 translate-y-0"
+        x-transition:leave="transition ease-in duration-150"
+        x-transition:leave-start="opacity-100 translate-y-0"
+        x-transition:leave-end="opacity-0 -translate-y-1"
+        x-cloak
+        class="px-4 pb-4"
+      >
+        {% if item.startDate %}
+        <p class="text-xs text-surface-500 mb-1 sm:hidden">
+          {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
+        </p>
+        {% elif item.year %}
+        <p class="text-xs text-surface-500 mb-1 sm:hidden">{{ item.year }}</p>
+        {% endif %}
+
+        {% if item.description %}
+        <p class="text-sm text-surface-600 dark:text-surface-400">{{ item.description }}</p>
+        {% endif %}
+      </div>
     </div>
     {% endif %}
     {% endfor %}