diff --git a/resources/views/livewire/projects/project-map.blade.php b/resources/views/livewire/projects/project-map.blade.php
index 894d137..6ef5f3d 100644
--- a/resources/views/livewire/projects/project-map.blade.php
+++ b/resources/views/livewire/projects/project-map.blade.php
@@ -1,11 +1,20 @@
 <div x-data="{ formFullscreen: $wire.entangle('formFullscreen') }"
      class="flex flex-col lg:flex-row gap-0 h-screen p-1">
     <!-- Columna izquierda: Mapa -->
-    <div x-show="!formFullscreen" x-cloak class="w-full lg:w-2/3 flex-1 relative">
+    <div x-show="!formFullscreen" x-cloak x-data="{ showLayers: true }" class="w-full lg:w-2/3 flex-1 relative">
         <div id="map" style="height: 100%; min-height: 500px; width: 100%;" wire:ignore></div>
 
+        <!-- Toggle del panel de fases/capas -->
+        <button @click="showLayers = !showLayers"
+                class="absolute top-2 right-2 z-[1001] btn btn-sm btn-circle shadow-lg"
+                title="{{ __('Show/hide panel') }}">
+            <x-heroicon-o-x-mark class="w-5 h-5" x-show="showLayers" />
+            <x-heroicon-o-bars-3 class="w-5 h-5" x-show="!showLayers" x-cloak />
+        </button>
+
         <!-- Panel lateral de capas -->
-        <div class="absolute top-2 right-2 z-[1000] bg-base-100 rounded-box shadow-xl p-4 w-72 border border-base-300 text-sm max-h-[calc(100vh-4rem)] overflow-y-auto">
+        <div x-show="showLayers" x-transition
+             class="absolute top-14 right-2 z-[1000] bg-base-100 rounded-box shadow-xl p-4 w-72 border border-base-300 text-sm max-h-[calc(100vh-4rem)] overflow-y-auto">
             <h3 class="font-semibold text-base mb-2">{{ __('Phases and layers') }}</h3>
             <div class="space-y-3">
                 @foreach($phases as $phase)
@@ -35,11 +44,11 @@
 
                         {{-- Botón para ir a gestión de capas de esta fase --}}
                         <div class="mt-1 ml-7">
-                            <a href="{{ route('layers.manage', [$project, $phase]) }}" class="btn btn-xs btn-outline btn-primary">
-                                ✏️ {{ __('Manage Layers') }}
+                            <a href="{{ route('layers.manage', [$project, $phase]) }}" class="btn btn-xs btn-outline btn-primary gap-1">
+                                <x-heroicon-o-pencil-square class="w-3.5 h-3.5" /> {{ __('Manage Layers') }}
                             </a>
-                            <a href="{{ route('phases.progress', $phase) }}" class="btn btn-xs btn-outline">
-                                📊 {{ __('Progress') }}
+                            <a href="{{ route('phases.progress', $phase) }}" class="btn btn-xs btn-outline gap-1">
+                                <x-heroicon-o-chart-bar class="w-3.5 h-3.5" /> {{ __('Progress') }}
                             </a>
                         </div>
                     </div>
@@ -50,7 +59,7 @@
             <div class="mt-3">
                 <label class="flex items-center gap-2 text-xs cursor-pointer">
                     <input type="checkbox" wire:change="toggleFeatureImages" @if($showFeatureImages) checked @endif class="checkbox checkbox-xs checkbox-primary" />
-                    🖼️ {{ __('Show images on map') }}
+                    <x-heroicon-o-photo class="w-4 h-4" /> {{ __('Show images on map') }}
                     @if($featureImageMarkers)
                         <span class="badge badge-xs">{{ count($featureImageMarkers) }}</span>
                     @endif
@@ -59,14 +68,14 @@
 
             {{-- Botones generales --}}
             <div class="mt-2 space-y-1">
-                <a href="{{ route('projects.media', $project) }}" class="btn btn-sm btn-outline w-full">
-                    📁 {{ __('Project files') }}
+                <a href="{{ route('projects.media', $project) }}" class="btn btn-sm btn-outline w-full gap-1">
+                    <x-heroicon-o-folder class="w-4 h-4" /> {{ __('Project files') }}
                 </a>
-                <button wire:click="$dispatch('centerMap')" class="btn btn-sm btn-outline w-full">
-                    📍 {{ __('Centered in project') }}
+                <button wire:click="$dispatch('centerMap')" class="btn btn-sm btn-outline w-full gap-1">
+                    <x-heroicon-o-map-pin class="w-4 h-4" /> {{ __('Centered in project') }}
                 </button>
-                <button onclick="getUserLocation()" class="btn btn-sm btn-outline w-full">
-                    🧭 {{ __('My location') }}
+                <button onclick="getUserLocation()" class="btn btn-sm btn-outline w-full gap-1">
+                    <x-heroicon-o-viewfinder-circle class="w-4 h-4" /> {{ __('My location') }}
                 </button>
             </div>
         </div>
@@ -76,53 +85,51 @@
 <div class="w-full lg:w-1/3 transition-all duration-300" :class="{'lg:w-full': formFullscreen}">
     <div class="card bg-base-100 shadow-xl h-full flex flex-col">
         <div class="card-body overflow-y-auto flex-1">
-            <div class="flex justify-between items-center mb-2">
-                <h2 class="card-title">{{ __('Map') }}</h2>
-                <button wire:click="toggleFullscreen" class="btn btn-circle btn-sm" title="{{ __('Fullscreen') }}">
+            <div class="flex justify-between items-center gap-2 mb-4">
+                <!-- Tabs -->
+                <div class="tabs tabs-boxed flex-wrap">
+                    <button wire:click="setActiveTab('edit')" class="tab {{ $activeTab === 'edit' ? 'tab-active' : '' }}">{{ __('Edit') }}</button>
+                    <button wire:click="setActiveTab('features')" class="tab {{ $activeTab === 'features' ? 'tab-active' : '' }}">{{ __('Features') }}</button>
+                    <button wire:click="setActiveTab('inspections')" class="tab {{ $activeTab === 'inspections' ? 'tab-active' : '' }}">{{ __('Inspections') }}</button>
+                    <button wire:click="setActiveTab('issues')" class="tab {{ $activeTab === 'issues' ? 'tab-active' : '' }} gap-1">
+                        {{ __('Issues') }}
+                        @if($openIssuesCount > 0)
+                            <span class="badge badge-error badge-xs">{{ $openIssuesCount }}</span>
+                        @endif
+                    </button>
+                </div>
+                <button wire:click="toggleFullscreen" class="btn btn-circle btn-sm shrink-0" title="{{ __('Fullscreen') }}">
                     <span x-text="formFullscreen ? '✕' : '⤢'"></span>
                 </button>
             </div>
 
-            <!-- Project navigation bar -->
-            <div class="flex flex-wrap gap-1 mb-3">
+            <!-- Project navigation bar (hidden for now, kept for later) -->
+            <div class="hidden flex-wrap gap-1 mb-3">
                 <a href="{{ route('projects.dashboard', $project) }}"
-                   class="btn btn-xs {{ request()->routeIs('projects.dashboard') ? 'btn-primary' : 'btn-outline' }}">
-                    📊 {{ __('Dashboard') }}
+                   class="btn btn-xs gap-1 {{ request()->routeIs('projects.dashboard') ? 'btn-primary' : 'btn-outline' }}">
+                    <x-heroicon-o-squares-2x2 class="w-3.5 h-3.5" /> {{ __('Dashboard') }}
                 </a>
                 <a href="{{ route('projects.map', $project) }}"
-                   class="btn btn-xs {{ request()->routeIs('projects.map') ? 'btn-primary' : 'btn-outline' }}">
-                    🗺️ {{ __('Map') }}
+                   class="btn btn-xs gap-1 {{ request()->routeIs('projects.map') ? 'btn-primary' : 'btn-outline' }}">
+                    <x-heroicon-o-map class="w-3.5 h-3.5" /> {{ __('Map') }}
                 </a>
                 <a href="{{ route('projects.gantt', $project) }}"
-                   class="btn btn-xs {{ request()->routeIs('projects.gantt') ? 'btn-primary' : 'btn-outline' }}">
-                    📅 {{ __('Gantt') }}
+                   class="btn btn-xs gap-1 {{ request()->routeIs('projects.gantt') ? 'btn-primary' : 'btn-outline' }}">
+                    <x-heroicon-o-calendar-days class="w-3.5 h-3.5" /> {{ __('Gantt') }}
                 </a>
                 <a href="{{ route('projects.report', $project) }}"
-                   class="btn btn-xs {{ request()->routeIs('projects.report') ? 'btn-primary' : 'btn-outline' }}">
-                    📄 {{ __('Report') }}
+                   class="btn btn-xs gap-1 {{ request()->routeIs('projects.report') ? 'btn-primary' : 'btn-outline' }}">
+                    <x-heroicon-o-document-text class="w-3.5 h-3.5" /> {{ __('Report') }}
                 </a>
                 <a href="{{ route('projects.issues', $project) }}"
-                   class="btn btn-xs {{ request()->routeIs('projects.issues') ? 'btn-error' : 'btn-outline' }} gap-1">
-                    ⚠️ {{ __('Issues') }}
+                   class="btn btn-xs gap-1 {{ request()->routeIs('projects.issues') ? 'btn-error' : 'btn-outline' }}">
+                    <x-heroicon-o-exclamation-triangle class="w-3.5 h-3.5" /> {{ __('Issues') }}
                     @if($openIssuesCount > 0)
                         <span class="badge badge-error badge-xs">{{ $openIssuesCount }}</span>
                     @endif
                 </a>
             </div>
 
-            <!-- Tabs -->
-            <div class="tabs box mb-4">
-                <button wire:click="setActiveTab('edit')" class="tab {{ $activeTab === 'edit' ? 'tab-active' : '' }}">{{ __('Edit') }}</button>
-                <button wire:click="setActiveTab('features')" class="tab {{ $activeTab === 'features' ? 'tab-active' : '' }}">{{ __('Features') }}</button>
-                <button wire:click="setActiveTab('inspections')" class="tab {{ $activeTab === 'inspections' ? 'tab-active' : '' }}">{{ __('Inspections') }}</button>
-                <button wire:click="setActiveTab('issues')" class="tab {{ $activeTab === 'issues' ? 'tab-active' : '' }} gap-1">
-                    {{ __('Issues') }}
-                    @if($openIssuesCount > 0)
-                        <span class="badge badge-error badge-xs">{{ $openIssuesCount }}</span>
-                    @endif
-                </button>
-            </div>
-
             <!-- Tab Content -->
             <div class="tab-content">
                 @if($activeTab === 'edit')
@@ -148,14 +155,14 @@
                             <input type="text" wire:model="editResponsible" class="input input-bordered input-sm" placeholder="{{ __('Name of responsible') }}" />
                         </div>
 
-                        <button wire:click="saveFeatureProgress" class="btn btn-primary btn-sm w-full mb-3">
-                            💾 {{ __('Save progress') }}
+                        <button wire:click="saveFeatureProgress" class="btn btn-primary btn-sm w-full mb-3 gap-1">
+                            <x-heroicon-o-check-circle class="w-4 h-4" /> {{ __('Save progress') }}
                         </button>
 
                         {{-- Gestor de archivos del feature --}}
                         <details class="mb-3 border rounded-lg">
                             <summary class="text-xs font-semibold cursor-pointer p-2 bg-base-200 rounded-t-lg">
-                                📎 {{ __('Files of element') }}
+                                <x-heroicon-o-paper-clip class="w-4 h-4 inline" /> {{ __('Files of element') }}
                             </summary>
                             <div class="p-2">
                                 @livewire('media-manager', [
@@ -244,7 +251,7 @@
                         @endif
                     @else
                         <div class="text-center text-gray-400 py-8">
-                            <p class="text-lg">👆</p>
+                            <x-heroicon-o-cursor-arrow-rays class="w-10 h-10 mx-auto opacity-30" />
                             <p>{{ __('Click on a map element or search above to edit it') }}</p>
                         </div>
                     @endif
@@ -274,7 +281,7 @@
                                             <td>{{ $feature->responsible ?? '-' }}</td>
                                             <td>{{ $feature->template?->name ?? '-' }}</td>
                                             <td class="justify-end">
-                                                <button class="btn btn-xs btn-outline btn-primary">✏️</button>
+                                                <button class="btn btn-xs btn-outline btn-primary"><x-heroicon-o-pencil class="w-3.5 h-3.5" /></button>
                                             </td>
                                         </tr>
                                     @endforeach
@@ -283,7 +290,7 @@
                         </div>
                     @else
                         <div class="text-center text-gray-400 py-8">
-                            <p class="text-lg">📋</p>
+                            <x-heroicon-o-clipboard-document-list class="w-10 h-10 mx-auto opacity-30" />
                             <p>{{ __('No elements in this project') }}</p>
                         </div>
                     @endif
@@ -309,7 +316,7 @@
                                             <td>{{ $inspection->template->name }}</td>
                                             <td>{{ $inspection->user->name }}</td>
                                             <td class="justify-end">
-                                                <button class="btn btn-xs btn-outline btn-info">👁️</button>
+                                                <button class="btn btn-xs btn-outline btn-info"><x-heroicon-o-eye class="w-3.5 h-3.5" /></button>
                                             </td>
                                         </tr>
                                     @endforeach
@@ -318,7 +325,7 @@
                         </div>
                     @else
                         <div class="text-center text-gray-400 py-8">
-                            <p class="text-lg">📋</p>
+                            <x-heroicon-o-clipboard-document-list class="w-10 h-10 mx-auto opacity-30" />
                             <p>{{ __('No inspections registered') }}</p>
                         </div>
                     @endif