diff --git a/ui/src/App.vue b/ui/src/App.vue
index 29901c9..5b8edf1 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -21,6 +21,16 @@ watchEffect(() => {
   root.style.setProperty('--accent-color-tareas', ui.accentColorTareas)
   root.style.setProperty('--accent-color-planillas', ui.accentColorPlanillas)
   root.style.setProperty('--accent-color-asistencias', ui.accentColorAsistencias)
+  // Note: Configuracion accent color is missing here, should be added if used for CSS vars.
+  // root.style.setProperty('--accent-color-configuracion', ui.accentColorConfiguracion)
+
+
+  // Per-module table background colors
+  root.style.setProperty('--table-bg-color-empleados', ui.tableBgColorEmpleados)
+  root.style.setProperty('--table-bg-color-tareas', ui.tableBgColorTareas)
+  root.style.setProperty('--table-bg-color-planillas', ui.tableBgColorPlanillas)
+  root.style.setProperty('--table-bg-color-asistencias', ui.tableBgColorAsistencias)
+  root.style.setProperty('--table-bg-color-configuracion', ui.tableBgColorConfiguracion)
 
   if (ui.theme === 'dark') {
     root.classList.add('theme-dark')
diff --git a/ui/src/components/asistencias/tablaAsistencias.vue b/ui/src/components/asistencias/tablaAsistencias.vue
index 1cf0671..b2848fe 100644
--- a/ui/src/components/asistencias/tablaAsistencias.vue
+++ b/ui/src/components/asistencias/tablaAsistencias.vue
@@ -94,6 +94,8 @@ const deleteAsistenciaInternal = async (id) => {
 }
 
 .tabla-asistencias {
+  /* Apply module-specific background color */
+  background-color: var(--table-bg-color-asistencias);
   width: 100%;
   border-collapse: collapse;
   margin-top: 1em;
diff --git a/ui/src/components/empleados/tablaEmpleados.vue b/ui/src/components/empleados/tablaEmpleados.vue
index 9abef7b..7e55739 100644
--- a/ui/src/components/empleados/tablaEmpleados.vue
+++ b/ui/src/components/empleados/tablaEmpleados.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="overflow-x-auto bg-white shadow-md rounded-lg p-4">
-    <table class="min-w-full divide-y divide-gray-200">
+    <table class="min-w-full divide-y divide-gray-200 table-empleados">
       <thead class="bg-gray-50">
         <tr>
           <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
@@ -172,4 +172,8 @@ button:hover svg {
 .overflow-x-auto {
   border: 1px solid #e5e7eb; /* Tailwind's gray-200 */
 }
+
+table.table-empleados {
+  background-color: var(--table-bg-color-empleados);
+}
 </style>
diff --git a/ui/src/components/planillas/tablaPlanillas.vue b/ui/src/components/planillas/tablaPlanillas.vue
index 254126f..d866fa1 100644
--- a/ui/src/components/planillas/tablaPlanillas.vue
+++ b/ui/src/components/planillas/tablaPlanillas.vue
@@ -97,6 +97,7 @@ const deletePlanillaInternal = async (id) => {
 }
 
 .tabla-planillas {
+  background-color: var(--table-bg-color-planillas); /* Added */
   width: 100%;
   border-collapse: collapse;
   margin-top: 1em;
diff --git a/ui/src/components/tareas/tablaTareas.vue b/ui/src/components/tareas/tablaTareas.vue
index 260299d..03a98e6 100644
--- a/ui/src/components/tareas/tablaTareas.vue
+++ b/ui/src/components/tareas/tablaTareas.vue
@@ -99,6 +99,7 @@ const deleteTareaInternal = async (id) => {
 }
 
 .tabla-tareas {
+  background-color: var(--table-bg-color-tareas); /* Added */
   width: 100%;
   border-collapse: collapse;
   margin-top: 1em;
diff --git a/ui/src/stores/useUi.js b/ui/src/stores/useUi.js
index 9ba02bf..9a642c0 100644
--- a/ui/src/stores/useUi.js
+++ b/ui/src/stores/useUi.js
@@ -17,6 +17,12 @@ const appearanceSettingKeys = [
   'accentColorPlanillas',
   'accentColorAsistencias',
   'accentColorConfiguracion',
+  // Per-module table background colors
+  'tableBgColorEmpleados',
+  'tableBgColorTareas',
+  'tableBgColorPlanillas',
+  'tableBgColorAsistencias',
+  'tableBgColorConfiguracion',
 ]
 
 const loadSettingsFromLocalStorage = () => {
@@ -78,6 +84,12 @@ export const useUi = defineStore('ui', {
       accentColorPlanillas: '#FF9800',  // Orange
       accentColorAsistencias: '#E91E63', // Pink
       accentColorConfiguracion: '#607D8B', // Blue Grey
+      // Per-module table background colors - default to white
+      tableBgColorEmpleados: '#FFFFFF',
+      tableBgColorTareas: '#FFFFFF',
+      tableBgColorPlanillas: '#FFFFFF',
+      tableBgColorAsistencias: '#FFFFFF',
+      tableBgColorConfiguracion: '#FFFFFF',
     }
 
     const loadedSettings = loadSettingsFromLocalStorage()
@@ -163,6 +175,28 @@ export const useUi = defineStore('ui', {
     setAccentColorConfiguracion(color) {
       this.accentColorConfiguracion = color
       _saveAppearanceState(this)
+    },
+
+    // Actions for per-module table background colors
+    setTableBgColorEmpleados(color) {
+      this.tableBgColorEmpleados = color
+      _saveAppearanceState(this)
+    },
+    setTableBgColorTareas(color) {
+      this.tableBgColorTareas = color
+      _saveAppearanceState(this)
+    },
+    setTableBgColorPlanillas(color) {
+      this.tableBgColorPlanillas = color
+      _saveAppearanceState(this)
+    },
+    setTableBgColorAsistencias(color) {
+      this.tableBgColorAsistencias = color
+      _saveAppearanceState(this)
+    },
+    setTableBgColorConfiguracion(color) {
+      this.tableBgColorConfiguracion = color
+      _saveAppearanceState(this)
     }
   },
 })
diff --git a/ui/src/views/SettingsView.vue b/ui/src/views/SettingsView.vue
index b7c76a9..fb7fe97 100644
--- a/ui/src/views/SettingsView.vue
+++ b/ui/src/views/SettingsView.vue
@@ -52,7 +52,7 @@
     </section>
 
     <!-- Typography Section -->
-    <section>
+    <section class="mb-10">
       <h2 class="text-2xl font-semibold mb-6 text-[var(--primary-color)]">Typography</h2>
       <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
         <div class="setting-item">
@@ -70,38 +70,86 @@
       </div>
     </section>
 
-    <!-- Module Accent Colors Section -->
-    <section class="mb-10"> <!-- Changed from no margin to mb-10 for consistency -->
-      <h2 class="text-2xl font-semibold mb-6 text-[var(--primary-color)]">Module Accent Colors</h2>
-      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+    <!-- Per-Module Color Settings -->
+    <section class="mb-10 module-settings-group">
+      <h3 class="text-xl font-semibold mb-4 text-[var(--primary-color)] border-b border-[var(--secondary-color)] pb-2">Empleados Module</h3>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
         <div class="setting-item">
-          <label for="accentColorEmpleados" class="block text-sm font-medium mb-1">Empleados Accent</label>
+          <label for="accentColorEmpleados" class="block text-sm font-medium mb-1">Accent Color</label>
           <input type="color" id="accentColorEmpleados" v-model="ui.accentColorEmpleados" @input="ui.setAccentColorEmpleados($event.target.value)"
                  class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
         </div>
         <div class="setting-item">
-          <label for="accentColorTareas" class="block text-sm font-medium mb-1">Tareas Accent</label>
-          <input type="color" id="accentColorTareas" v-model="ui.accentColorTareas" @input="ui.setAccentColorTareas($event.target.value)"
-                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
-        </div>
-        <div class="setting-item">
-          <label for="accentColorPlanillas" class="block text-sm font-medium mb-1">Planillas Accent</label>
-          <input type="color" id="accentColorPlanillas" v-model="ui.accentColorPlanillas" @input="ui.setAccentColorPlanillas($event.target.value)"
-                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
-        </div>
-        <div class="setting-item">
-          <label for="accentColorAsistencias" class="block text-sm font-medium mb-1">Asistencias Accent</label>
-          <input type="color" id="accentColorAsistencias" v-model="ui.accentColorAsistencias" @input="ui.setAccentColorAsistencias($event.target.value)"
-                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
-        </div>
-        <div class="setting-item">
-          <label for="accentColorConfiguracion" class="block text-sm font-medium mb-1">Configuracion Accent</label>
-          <input type="color" id="accentColorConfiguracion" v-model="ui.accentColorConfiguracion" @input="ui.setAccentColorConfiguracion($event.target.value)"
+          <label for="tableBgColorEmpleados" class="block text-sm font-medium mb-1">Table Background</label>
+          <input type="color" id="tableBgColorEmpleados" v-model="ui.tableBgColorEmpleados" @input="ui.setTableBgColorEmpleados($event.target.value)"
                  class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
         </div>
       </div>
     </section>
 
+    <section class="mb-10 module-settings-group">
+      <h3 class="text-xl font-semibold mb-4 text-[var(--primary-color)] border-b border-[var(--secondary-color)] pb-2">Tareas Module</h3>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+        <div class="setting-item">
+          <label for="accentColorTareas" class="block text-sm font-medium mb-1">Accent Color</label>
+          <input type="color" id="accentColorTareas" v-model="ui.accentColorTareas" @input="ui.setAccentColorTareas($event.target.value)"
+                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
+        </div>
+        <div class="setting-item">
+          <label for="tableBgColorTareas" class="block text-sm font-medium mb-1">Table Background</label>
+          <input type="color" id="tableBgColorTareas" v-model="ui.tableBgColorTareas" @input="ui.setTableBgColorTareas($event.target.value)"
+                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
+        </div>
+      </div>
+    </section>
+
+    <section class="mb-10 module-settings-group">
+      <h3 class="text-xl font-semibold mb-4 text-[var(--primary-color)] border-b border-[var(--secondary-color)] pb-2">Planillas Module</h3>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+        <div class="setting-item">
+          <label for="accentColorPlanillas" class="block text-sm font-medium mb-1">Accent Color</label>
+          <input type="color" id="accentColorPlanillas" v-model="ui.accentColorPlanillas" @input="ui.setAccentColorPlanillas($event.target.value)"
+                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
+        </div>
+        <div class="setting-item">
+          <label for="tableBgColorPlanillas" class="block text-sm font-medium mb-1">Table Background</label>
+          <input type="color" id="tableBgColorPlanillas" v-model="ui.tableBgColorPlanillas" @input="ui.setTableBgColorPlanillas($event.target.value)"
+                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
+        </div>
+      </div>
+    </section>
+
+    <section class="mb-10 module-settings-group">
+      <h3 class="text-xl font-semibold mb-4 text-[var(--primary-color)] border-b border-[var(--secondary-color)] pb-2">Asistencias Module</h3>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+        <div class="setting-item">
+          <label for="accentColorAsistencias" class="block text-sm font-medium mb-1">Accent Color</label>
+          <input type="color" id="accentColorAsistencias" v-model="ui.accentColorAsistencias" @input="ui.setAccentColorAsistencias($event.target.value)"
+                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
+        </div>
+        <div class="setting-item">
+          <label for="tableBgColorAsistencias" class="block text-sm font-medium mb-1">Table Background</label>
+          <input type="color" id="tableBgColorAsistencias" v-model="ui.tableBgColorAsistencias" @input="ui.setTableBgColorAsistencias($event.target.value)"
+                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
+        </div>
+      </div>
+    </section>
+
+    <section class="mb-10 module-settings-group">
+      <h3 class="text-xl font-semibold mb-4 text-[var(--primary-color)] border-b border-[var(--secondary-color)] pb-2">Configuración Module</h3>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+        <div class="setting-item">
+          <label for="accentColorConfiguracion" class="block text-sm font-medium mb-1">Accent Color</label>
+          <input type="color" id="accentColorConfiguracion" v-model="ui.accentColorConfiguracion" @input="ui.setAccentColorConfiguracion($event.target.value)"
+                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
+        </div>
+        <div class="setting-item">
+          <label for="tableBgColorConfiguracion" class="block text-sm font-medium mb-1">Table Background</label>
+          <input type="color" id="tableBgColorConfiguracion" v-model="ui.tableBgColorConfiguracion" @input="ui.setTableBgColorConfiguracion($event.target.value)"
+                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
+        </div>
+      </div>
+    </section>
   </div>
 </template>