diff --git a/ui/src/views/SettingsView.vue b/ui/src/views/SettingsView.vue
index 8599606..fb7fe97 100644
--- a/ui/src/views/SettingsView.vue
+++ b/ui/src/views/SettingsView.vue
@@ -70,72 +70,86 @@
       </div>
     </section>
 
-    <!-- Module Colors Section (Accent and Table Background) -->
-    <section class="mb-10">
-      <h2 class="text-2xl font-semibold mb-6 text-[var(--primary-color)]">Module Colors</h2>
-      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-        <!-- Empleados -->
+    <!-- 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="tableBgColorEmpleados" class="block text-sm font-medium mb-1">Table BG Empleados</label>
+          <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>
-
-        <!-- Tareas -->
-        <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="tableBgColorTareas" class="block text-sm font-medium mb-1">Table BG Tareas</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>
-
-        <!-- Planillas -->
-        <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="tableBgColorPlanillas" class="block text-sm font-medium mb-1">Table BG Planillas</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>
-
-        <!-- Asistencias -->
-        <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="tableBgColorAsistencias" class="block text-sm font-medium mb-1">Table BG Asistencias</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>
-
-        <!-- Configuracion -->
-        <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)"
-                 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 BG Configuracion</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>
 
+    <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>