diff --git a/ui/src/components/asistencias/tablaAsistencias.vue b/ui/src/components/asistencias/tablaAsistencias.vue
index 9f58201..679d6f2 100644
--- a/ui/src/components/asistencias/tablaAsistencias.vue
+++ b/ui/src/components/asistencias/tablaAsistencias.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 sm:p-6 bg-white shadow-md rounded-lg overflow-x-auto">
+  <div class="p-4 sm:p-6 shadow-md rounded-lg overflow-x-auto bg-[var(--table-container-bg-color-asistencias)]">
     <table class="min-w-full divide-y divide-gray-200">
       <thead class="bg-gray-50">
         <tr>
@@ -16,7 +16,7 @@
         <tr v-if="!asistencias || asistencias.length === 0">
           <td colspan="7" class="px-6 py-10 text-center text-gray-500 text-lg">No hay asistencias para mostrar.</td>
         </tr>
-        <tr v-for="asistencia in asistencias" :key="asistencia.id" class="hover:bg-gray-100 transition-colors duration-150 ease-in-out">
+        <tr v-for="asistencia in asistencias" :key="asistencia.id" class="transition-colors duration-150 ease-in-out hover:bg-[var(--accent-color-asistencias)]/10 dark:hover:bg-[var(--accent-color-asistencias)]/20">
           <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700">{{ asistencia.id }}</td>
           <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700">{{ asistencia.empleado_id }}</td>
           <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700">{{ formatDateTime(asistencia.entrada) }}</td>
diff --git a/ui/src/components/empleados/tablaEmpleados.vue b/ui/src/components/empleados/tablaEmpleados.vue
index 1d6dadc..056aaff 100644
--- a/ui/src/components/empleados/tablaEmpleados.vue
+++ b/ui/src/components/empleados/tablaEmpleados.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 sm:p-6 bg-white shadow-md rounded-lg overflow-x-auto">
+  <div class="p-4 sm:p-6 shadow-md rounded-lg overflow-x-auto bg-[var(--table-container-bg-color-empleados)]">
     <table class="min-w-full divide-y divide-gray-200">
       <thead class="bg-gray-50">
         <tr>
@@ -32,7 +32,7 @@
             No hay empleados para mostrar.
           </td>
         </tr>
-        <tr v-for="employee in employees" :key="employee.id" class="hover:bg-gray-100 transition-colors duration-150 ease-in-out">
+        <tr v-for="employee in employees" :key="employee.id" class="transition-colors duration-150 ease-in-out hover:bg-[var(--accent-color-empleados)]/10 dark:hover:bg-[var(--accent-color-empleados)]/20">
           <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap">
             <img
               :src="employee.avatar_url || 'https://via.placeholder.com/40'"
diff --git a/ui/src/components/planillas/tablaPlanillas.vue b/ui/src/components/planillas/tablaPlanillas.vue
index 69daded..8d33312 100644
--- a/ui/src/components/planillas/tablaPlanillas.vue
+++ b/ui/src/components/planillas/tablaPlanillas.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 sm:p-6 bg-white shadow-md rounded-lg overflow-x-auto">
+  <div class="p-4 sm:p-6 shadow-md rounded-lg overflow-x-auto bg-[var(--table-container-bg-color-planillas)]">
     <table class="min-w-full divide-y divide-gray-200">
       <thead class="bg-gray-50">
         <tr>
@@ -17,7 +17,7 @@
         <tr v-if="planillas && planillas.length === 0">
           <td colspan="8" class="px-6 py-10 text-center text-gray-500 text-lg">No hay planillas para mostrar.</td>
         </tr>
-        <tr v-for="planilla in planillas" :key="planilla.id" class="hover:bg-gray-100 transition-colors duration-150 ease-in-out">
+        <tr v-for="planilla in planillas" :key="planilla.id" class="transition-colors duration-150 ease-in-out hover:bg-[var(--accent-color-planillas)]/10 dark:hover:bg-[var(--accent-color-planillas)]/20">
           <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700">{{ planilla.id }}</td>
           <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700">{{ planilla.titulo }}</td>
           <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700">{{ planilla.empleado_id }}</td>
diff --git a/ui/src/components/tareas/tablaTareas.vue b/ui/src/components/tareas/tablaTareas.vue
index 4ecd8e2..900a1f3 100644
--- a/ui/src/components/tareas/tablaTareas.vue
+++ b/ui/src/components/tareas/tablaTareas.vue
@@ -18,7 +18,7 @@
         <tr v-if="!tareas || tareas.length === 0">
           <td colspan="9" class="px-6 py-10 text-center text-gray-500 text-lg">No hay tareas para mostrar.</td>
         </tr>
-        <tr v-for="tarea in tareas" :key="tarea.id" class="hover:bg-gray-100 transition-colors duration-150 ease-in-out">
+        <tr v-for="tarea in tareas" :key="tarea.id" class="transition-colors duration-150 ease-in-out hover:bg-[var(--accent-color-tareas)]/10 dark:hover:bg-[var(--accent-color-tareas)]/20">
           <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700">{{ tarea.id }}</td>
           <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700">{{ tarea.titulo }}</td>
           <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700">{{ tarea.empleado_id }}</td>
diff --git a/ui/src/style.css b/ui/src/style.css
index 7e95078..3cdb482 100644
--- a/ui/src/style.css
+++ b/ui/src/style.css
@@ -18,6 +18,12 @@
   --accent-color-tareas: #4CAF50;
   --accent-color-planillas: #FF9800;
   --accent-color-asistencias: #E91E63;
+
+  /* NEW: Module-specific table container background colors (Light Theme) */
+  --table-container-bg-color-asistencias: #fdebee;
+  --table-container-bg-color-empleados: #e3f2fd;
+  --table-container-bg-color-planillas: #fff8e1;
+  --table-container-bg-color-tareas: #e6f4ea;
 }
 
 html.theme-dark {
@@ -26,6 +32,12 @@ html.theme-dark {
   --warning-color: #FFA000; /* Example dark theme warning */
   --background-color: #303030; /* Dark theme background */
   --text-color: #FFFFFF; /* Text color for dark theme */
+
+  /* NEW: Module-specific table container background colors (Dark Theme) */
+  --table-container-bg-color-asistencias: #4a1f28;
+  --table-container-bg-color-empleados: #193a50;
+  --table-container-bg-color-planillas: #503f1b;
+  --table-container-bg-color-tareas: #1e4028;
 }
 
 /* Apply background and text color to the body for theme changes */