diff --git a/api/server.js b/api/server.js
index 0dcef90..cbef05c 100644
--- a/api/server.js
+++ b/api/server.js
@@ -1,6 +1,7 @@
 import express from 'express';
 import { PrismaClient } from './prisma/generated/client/index.js';
 import { Decimal } from '@prisma/client/runtime/library.js';
+import cors from 'cors';
 
 // Import new routers
 import empleadosRouter from './routes/empleados/empleados.js';
@@ -8,6 +9,12 @@ import asistenciasRouter from './routes/asistencias/asistencias.js';
 import tareasRouter from './routes/tareas/tareas.js';
 import planillasRouter from './routes/planillas/planillas.js';
 
+
+
+
+
+// Resto del código
+
 BigInt.prototype.toJSON = function () { return this.toString(); };
 Decimal.prototype.toJSON = function () { return this.toString(); };
 
@@ -15,6 +22,11 @@ const prisma = new PrismaClient();
 export const app = express();
 app.use(express.json());
 
+
+app.use(cors({
+  origin: ['http://localhost:5173', 'https://planilla.interno.com'],
+  credentials: true
+}));
 // Mount new routers
 app.use('/api/empleados', empleadosRouter);
 app.use('/api/asistencias', asistenciasRouter);
diff --git a/ui/src/main.js b/ui/src/main.js
index 512107d..d21dd70 100644
--- a/ui/src/main.js
+++ b/ui/src/main.js
@@ -5,9 +5,18 @@ import router from './router'
 import App from './App.vue'
 import './style.css'          // Tailwind o tus estilos globales
 
+
+
+
 const app = 
 createApp(App)
 
+
+app.use(cors({
+  origin: 'https://planilla.interno.com',
+  credentials: true // si usás cookies/sesiones
+}));
+
 app.use(createPinia())
 app.use(router)
 
diff --git a/ui/src/stores/useEmpleados.js b/ui/src/stores/useEmpleados.js
index 60d0d3d..d4ee599 100644
--- a/ui/src/stores/useEmpleados.js
+++ b/ui/src/stores/useEmpleados.js
@@ -1,12 +1,84 @@
-import { defineStore } from 'pinia'
+import { defineStore } from 'pinia';
+import apiClient from '../apiClient'; // ← asegurate que tenga baseURL y headers
+
+// Valor por defecto para el empleado activo
+const getDefaultEmpleado = () => ({
+  id: null,
+  created_at: null,
+  updated_at: null,
+  name: '',
+  cedula: null,
+  ubicacion: '.',     // default del schema
+  grupo_estudio: null,
+  empleado: true,     // marcamos que SÍ es empleado
+  avatar_url: null,
+  telefono: null,
+  idciat: null,
+  // Ojo: asistencias, tareasRealizadas y planillas se manejan en otras stores
+  // No sé la forma exacta de esos arrays; se cargan aparte.
+});
+
+export const useEmpleadosStore = defineStore('empleados', {
+  state: () => ({
+    empleados: [],
+    currentEmpleado: getDefaultEmpleado(),
+  }),
 
-export const useEmpleados = defineStore('empleados', {
-  state: () => ({ empleados: [] }),
   actions: {
-    // placeholder para cargar/crear empleados
-    async fetchAll () {
-      // simulamos fetch
-      this.empleados = []
+    // ────────── CRUD básico ──────────
+    async fetchEmpleados () {
+      try {
+        const { data } = await apiClient.get('/api/empleados');
+        this.empleados = data;
+      } catch (err) {
+        console.error('Error al traer empleados:', err);
+      }
+    },
+
+    async fetchEmpleadoById (id) {
+      try {
+        const { data } = await apiClient.get(`/api/empleados/${id}`);
+        this.currentEmpleado = data;
+      } catch (err) {
+        console.error(`Error al traer empleado ${id}:`, err);
+        this.currentEmpleado = getDefaultEmpleado();
+      }
+    },
+
+    async createEmpleado (empleadoData) {
+      try {
+        await apiClient.post('/api/empleados', empleadoData);
+        await this.fetchEmpleados();
+      } catch (err) {
+        console.error('Error creando empleado:', err);
+        throw err; // para que el form muestre feedback
+      }
+    },
+
+    async updateEmpleado (id, empleadoData) {
+      try {
+        await apiClient.put(`/api/empleados/${id}`, empleadoData);
+        await this.fetchEmpleados();
+        this.clearCurrentEmpleado();
+      } catch (err) {
+        console.error(`Error actualizando empleado ${id}:`, err);
+        throw err;
+      }
+    },
+
+    async deleteEmpleado (id) {
+      try {
+        await apiClient.delete(`/api/empleados/${id}`);
+        await this.fetchEmpleados();
+      } catch (err) {
+        console.error(`Error eliminando empleado ${id}:`, err);
+        throw err;
+      }
+    },
+
+    // ────────── helpers ──────────
+    clearCurrentEmpleado () {
+      this.currentEmpleado = getDefaultEmpleado();
     },
   },
-})
+});
diff --git a/ui/src/views/empleados/EmpleadosIndex.vue b/ui/src/views/empleados/EmpleadosIndex.vue
index 14e39cc..b363741 100644
--- a/ui/src/views/empleados/EmpleadosIndex.vue
+++ b/ui/src/views/empleados/EmpleadosIndex.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="p-6 bg-gray-50 min-h-screen">
+    <!-- … encabezado … -->
     <header class="mb-8">
       <div class="flex justify-between items-center">
         <h1 class="text-4xl font-bold text-gray-800">Gestión de Empleados</h1>
@@ -7,6 +8,7 @@
           @click="goToCreateEmployee"
           class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-150 ease-in-out"
         >
+          <!-- ícono ➕ -->
           <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
             <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
           </svg>
@@ -16,53 +18,56 @@
       <p class="mt-2 text-gray-600">Visualiza, crea y gestiona los empleados de la organización.</p>
     </header>
 
+    <!-- selector de vista -->
     <div class="mb-6 flex justify-end items-center space-x-3">
       <span class="text-sm font-medium text-gray-700">Cambiar Vista:</span>
       <button
         @click="currentView = 'card'"
-        :class="[
-          'px-4 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2',
-          currentView === 'card'
-            ? 'bg-blue-500 text-white shadow-sm focus:ring-blue-400'
-            : 'bg-gray-200 text-gray-700 hover:bg-gray-300 focus:ring-gray-400',
-        ]"
+        :class="btnClass('card')"
       >
         Tarjetas
       </button>
       <button
         @click="currentView = 'table'"
-        :class="[
-          'px-4 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2',
-          currentView === 'table'
-            ? 'bg-blue-500 text-white shadow-sm focus:ring-blue-400'
-            : 'bg-gray-200 text-gray-700 hover:bg-gray-300 focus:ring-gray-400',
-        ]"
+        :class="btnClass('table')"
       >
         Tabla
       </button>
     </div>
 
+    <!-- contenido -->
     <div>
       <div v-if="loading" class="text-center py-10">
         <p class="text-gray-500 text-xl">Cargando empleados...</p>
-        <!-- You can add a spinner here -->
       </div>
+
       <div v-else-if="error" class="text-center py-10">
         <p class="text-red-500 text-xl">Error al cargar los empleados: {{ error }}</p>
       </div>
+
       <div v-else>
-        <!-- Card View -->
-        <div v-if="currentView === 'card'" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-          <CardEmpleado v-for="employee in employees" :key="employee.id" :employee="employee" />
+        <!-- vista de tarjetas -->
+        <div
+          v-if="currentView === 'card'"
+          class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
+        >
+          <CardEmpleado
+            v-for="employee in employees"
+            :key="employee.id"
+            :employee="employee"
+          />
           <div v-if="employees.length === 0" class="col-span-full text-center py-10">
             <p class="text-gray-500 text-xl">No hay empleados para mostrar en la vista de tarjetas.</p>
           </div>
         </div>
 
-        <!-- Table View -->
+        <!-- vista de tabla -->
         <div v-if="currentView === 'table'">
           <TablaEmpleados :employees="employees" />
-           <div v-if="employees.length === 0" class="text-center py-10 bg-white shadow-md rounded-lg mt-4">
+          <div
+            v-if="employees.length === 0"
+            class="text-center py-10 bg-white shadow-md rounded-lg mt-4"
+          >
             <p class="text-gray-500 text-xl">No hay empleados para mostrar en la vista de tabla.</p>
           </div>
         </div>
@@ -72,137 +77,59 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import CardEmpleado from '@/components/empleados/cardEmpleado.vue' // Adjusted path
-import TablaEmpleados from '@/components/empleados/tablaEmpleados.vue' // Adjusted path
+import { ref, onMounted, computed } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useRouter } from 'vue-router';
 
-// Define the structure of the employee object
-interface Employee {
-  id: string | number
-  name: string
-  cedula: number
-  avatar_url?: string
-  telefono?: string
-  ubicacion: string
-  idciat?: string
-  grupo_estudio?: string
-  empleado: boolean // To ensure we are dealing with employees
-}
+import CardEmpleado   from '@/components/empleados/cardEmpleado.vue';
+import TablaEmpleados from '@/components/empleados/tablaEmpleados.vue';
+import { useEmpleadosStore } from '@/stores/useEmpleados.js'; // ruta según tu proyecto
 
-const router = useRouter()
-const currentView = ref<'card' | 'table'>('card') // Default view
-const employees = ref<Employee[]>([])
-const loading = ref(true)
-const error = ref<string | null>(null)
+// --- refs locales ---
+const router       = useRouter();
+const currentView  = ref<'card' | 'table'>('card');
+const loading      = ref(true);
+const error        = ref<string | null>(null);
 
-// Mock data for employees - replace with actual API call
-const mockEmployees: Employee[] = [
-  {
-    id: '1',
-    name: 'Ana García',
-    cedula: 123456789,
-    avatar_url: 'https://randomuser.me/api/portraits/women/60.jpg',
-    telefono: '0991234567',
-    ubicacion: 'Oficina Central',
-    idciat: 'AG001',
-    grupo_estudio: 'Desarrollo Frontend',
-    empleado: true,
-  },
-  {
-    id: '2',
-    name: 'Carlos Rodriguez',
-    cedula: 987654321,
-    avatar_url: 'https://randomuser.me/api/portraits/men/45.jpg',
-    telefono: '0987654321',
-    ubicacion: 'Sucursal Norte',
-    idciat: 'CR002',
-    grupo_estudio: 'Backend Services',
-    empleado: true,
-  },
-  {
-    id: '3',
-    name: 'Luisa Martinez',
-    cedula: 112233445,
-    // avatar_url: '', // Test fallback avatar
-    telefono: '0976543210',
-    ubicacion: 'Remoto',
-    idciat: 'LM003',
-    // grupo_estudio: '', // Test missing optional field
-    empleado: true,
-  },
-    {
-    id: '4',
-    name: 'Jorge Herrera',
-    cedula: 223344556,
-    avatar_url: 'https://randomuser.me/api/portraits/men/50.jpg',
-    telefono: '0965432109',
-    ubicacion: 'Oficina Central',
-    idciat: 'JH004',
-    grupo_estudio: 'QA Team',
-    empleado: true,
-  },
+// --- store ---
+const empleadosStore     = useEmpleadosStore();
+const { empleados }      = storeToRefs(empleadosStore);
+
+// alias para plantilla
+const employees = empleados;
+
+// --- helpers ---
+const btnClass = (view: 'card' | 'table') => [
+  'px-4 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2',
+  currentView.value === view
+    ? 'bg-blue-500 text-white shadow-sm focus:ring-blue-400'
+    : 'bg-gray-200 text-gray-700 hover:bg-gray-300 focus:ring-gray-400',
 ];
 
+// --- fetch inicial ---
 const fetchEmployees = async () => {
-  loading.value = true
-  error.value = null
+  loading.value = true;
+  error.value   = null;
   try {
-    // Simulate API call delay
-    await new Promise(resolve => setTimeout(resolve, 1000));
-
-    // In a real application, you would fetch from your API:
-    // const response = await fetch('/api/clientes?empleado=true');
-    // if (!response.ok) {
-    //   throw new Error(`HTTP error! status: ${response.status}`);
-    // }
-    // const data = await response.json();
-    // employees.value = data.filter((cliente: Employee) => cliente.empleado);
-    
-    // Using mock data for now
-    employees.value = mockEmployees.filter(e => e.empleado);
-
+    await empleadosStore.fetchEmpleados();
   } catch (e) {
-    console.error("Failed to fetch employees:", e);
-    if (e instanceof Error) {
-      error.value = e.message;
-    } else {
-      error.value = "Ocurrió un error desconocido."
-    }
-    employees.value = []; // Clear employees on error or set to empty if preferred
+    console.error('Error al traer empleados:', e);
+    error.value = e instanceof Error ? e.message : 'Ocurrió un error desconocido.';
   } finally {
-    loading.value = false
+    loading.value = false;
   }
-}
+};
 
-onMounted(() => {
-  fetchEmployees()
-})
+onMounted(fetchEmployees);
 
-const goToCreateEmployee = () => {
-  router.push({ name: 'empleados-new' }); 
-}
+// --- navegación ---
+const goToCreateEmployee = () => router.push({ name: 'empleados-new' });
 </script>
 
 <style scoped>
-/* Additional styling for the index page */
-.min-h-screen {
-  min-height: calc(100vh - var(--navbar-height, 0px)); /* Adjust if you have a fixed navbar */
-}
-
-/* Styling for active/inactive toggle buttons */
-button.focus\:ring-blue-400:focus { /* More specific focus for blue buttons */
-  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.5); /* Tailwind's blue-400 with 50% opacity */
-}
-button.focus\:ring-gray-400:focus { /* More specific focus for gray buttons */
-  box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.5); /* Tailwind's gray-400 with 50% opacity */
-}
-
-/* Transition for views, if desired (can be more complex) */
-.view-enter-active, .view-leave-active {
-  transition: opacity 0.3s ease;
-}
-.view-enter-from, .view-leave-to {
-  opacity: 0;
-}
+.min-h-screen { min-height: calc(100vh - var(--navbar-height, 0px)); }
+button.focus\:ring-blue-400:focus { box-shadow: 0 0 0 3px rgba(96, 165, 250, .5); }
+button.focus\:ring-gray-400:focus { box-shadow: 0 0 0 3px rgba(156, 163, 175, .5); }
+.view-enter-active, .view-leave-active { transition: opacity .3s ease; }
+.view-enter-from, .view-leave-to { opacity: 0; }
 </style>