diff --git a/index2.html b/index2.html
index 079fe45..49ef804 100644
--- a/index2.html
+++ b/index2.html
@@ -98,11 +98,17 @@
                 </div>
 
                 <div id="historyContainerWrapper" class="hidden mt-8 fade-in fade-in-delay-2">
-                    <div class="flex items-center gap-3 mb-4 ml-2">
-                        <h3 class="text-xs font-black text-slate-400 uppercase tracking-widest">Historial</h3>
-                        <div class="h-px flex-1 bg-slate-200"></div>
-                    </div>
-                    <div id="historyServicesContainer" class="space-y-4"></div>
+                    <button onclick="toggleHistory()" class="w-full bg-white border border-slate-200 p-5 rounded-[2rem] flex justify-between items-center shadow-sm active:scale-95 transition-all">
+                        <div class="flex items-center gap-3">
+                            <div class="w-10 h-10 bg-slate-50 text-slate-400 rounded-xl flex items-center justify-center border border-slate-100"><i data-lucide="archive" class="w-5 h-5"></i></div>
+                            <div class="text-left">
+                                <span class="block text-xs font-black text-slate-700 uppercase tracking-widest">Finalizados</span>
+                                <span class="text-[10px] font-bold text-slate-400" id="labelHistoryCount">0 servicios finalizados</span>
+                            </div>
+                        </div>
+                        <i data-lucide="chevron-down" id="historyChevron" class="w-5 h-5 text-slate-300 transition-transform duration-300"></i>
+                    </button>
+                    <div id="historyServicesContainer" class="hidden space-y-4 mt-4 pb-4 transition-all"></div>
                 </div>
             </div>
 
@@ -226,6 +232,21 @@
         }
 
         // --- SISTEMA DE PESTAÑAS ---
+        function toggleHistory() {
+            const container = document.getElementById('historyServicesContainer');
+            const chevron = document.getElementById('historyChevron');
+            
+            if (container.classList.contains('hidden')) {
+                container.classList.remove('hidden');
+                container.classList.add('fade-in');
+                chevron.classList.add('rotate-180');
+            } else {
+                container.classList.add('hidden');
+                container.classList.remove('fade-in');
+                chevron.classList.remove('rotate-180');
+            }
+        }
+
         function switchTab(tabName) {
             document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
             document.querySelectorAll('.nav-btn').forEach(el => el.classList.remove('active'));