diff --git a/desktop/src/api/config/config.controller.ts b/desktop/src/api/config/config.controller.ts
index 4788a2b..7bdaf37 100644
--- a/desktop/src/api/config/config.controller.ts
+++ b/desktop/src/api/config/config.controller.ts
@@ -1,43 +1,53 @@
-import {FastifyReply, FastifyRequest} from 'fastify';
-import {getConfig, setConfig} from '../../shared/config';
+import { FastifyReply, FastifyRequest } from 'fastify';
+import { getConfig, setConfig } from '../../shared/config';
 
 export async function getFullConfig(req: FastifyRequest, reply: FastifyReply) {
     try {
-        return getConfig();
-    } catch (err) {
+        const { values, schema } = getConfig();
+        return { values, schema };
+    } catch {
         return { error: "Error loading config" };
     }
 }
 
-export async function getConfigSection(req: FastifyRequest<{ Params: { section: string } }>, reply: FastifyReply) {
+export async function getConfigSection(
+    req: FastifyRequest<{ Params: { section: string } }>,
+    reply: FastifyReply
+) {
     try {
         const { section } = req.params;
-        const config = getConfig();
+        const { values } = getConfig();
 
-        if (config[section] === undefined) {
+        if (values[section] === undefined) {
             return { error: "Section not found" };
         }
 
-        return { [section]: config[section] };
-    } catch (err) {
+        return { [section]: values[section] };
+    } catch {
         return { error: "Error loading config section" };
     }
 }
 
-export async function updateConfig(req: FastifyRequest<{ Body: any }>, reply: FastifyReply) {
+export async function updateConfig(
+    req: FastifyRequest<{ Body: any }>,
+    reply: FastifyReply
+) {
     try {
-        return setConfig(req.body);
-    } catch (err) {
+        return setConfig(req.body); // schema nunca se toca
+    } catch {
         return { error: "Error updating config" };
     }
 }
 
-export async function updateConfigSection(req: FastifyRequest<{ Params: { section: string }, Body: any }>, reply: FastifyReply) {
+export async function updateConfigSection(
+    req: FastifyRequest<{ Params: { section: string }, Body: any }>,
+    reply: FastifyReply
+) {
     try {
         const { section } = req.params;
-        const updatedConfig = setConfig({ [section]: req.body });
-        return { [section]: updatedConfig[section] };
-    } catch (err) {
+        const updatedValues = setConfig({ [section]: req.body });
+        return { [section]: updatedValues[section] };
+    } catch {
         return { error: "Error updating config section" };
     }
 }
\ No newline at end of file
diff --git a/desktop/src/api/local/download.service.ts b/desktop/src/api/local/download.service.ts
index b2f2a18..c5f6534 100644
--- a/desktop/src/api/local/download.service.ts
+++ b/desktop/src/api/local/download.service.ts
@@ -70,8 +70,8 @@ async function getOrCreateEntry(
         throw new Error('METADATA_NOT_FOUND');
     }
 
-    const config = loadConfig();
-    const basePath = config.library?.[type];
+    const { values } = loadConfig();
+    const basePath = values.library?.[type];
 
     if (!basePath) {
         throw new Error(`NO_LIBRARY_PATH_FOR_${type.toUpperCase()}`);
diff --git a/desktop/src/api/local/local.service.ts b/desktop/src/api/local/local.service.ts
index 1cddfd4..4384b21 100644
--- a/desktop/src/api/local/local.service.ts
+++ b/desktop/src/api/local/local.service.ts
@@ -127,9 +127,9 @@ export async function resolveEntryMetadata(entry: any, type: string) {
 }
 
 export async function performLibraryScan(mode: 'full' | 'incremental' = 'incremental') {
-    const config = loadConfig();
+    const { values } = loadConfig();
 
-    if (!config.library) {
+    if (!values.library) {
         throw new Error('NO_LIBRARY_CONFIGURED');
     }
 
@@ -138,7 +138,7 @@ export async function performLibraryScan(mode: 'full' | 'incremental' = 'increme
         await run(`DELETE FROM local_entries`, [], 'local_library');
     }
 
-    for (const [type, basePath] of Object.entries(config.library)) {
+    for (const [type, basePath] of Object.entries(values.library)) {
         if (!basePath || !fs.existsSync(<PathLike>basePath)) continue;
 
         const dirs = fs.readdirSync(<string>basePath, { withFileTypes: true }).filter(d => d.isDirectory());
diff --git a/desktop/src/scripts/settings.js b/desktop/src/scripts/settings.js
index d1bb295..c160c61 100644
--- a/desktop/src/scripts/settings.js
+++ b/desktop/src/scripts/settings.js
@@ -1,5 +1,6 @@
 const API_BASE = '/api/config';
 let currentConfig = {};
+let currentSchema = {};
 let activeSection = '';
 let modal, navContainer, formContent, form;
 
@@ -9,96 +10,74 @@ window.toggleSettingsModal = async (forceClose = false) => {
     formContent = document.getElementById('config-section-content');
     form = document.getElementById('config-form');
 
-    if (!modal) {
-        console.error('Modal not found');
-        return;
-    }
+    if (!modal) return;
 
     if (forceClose) {
         modal.classList.add('hidden');
     } else {
         const isHidden = modal.classList.contains('hidden');
-
         if (isHidden) {
-            // Abrir modal
             modal.classList.remove('hidden');
             await loadSettings();
         } else {
-            // Cerrar modal
             modal.classList.add('hidden');
         }
     }
 };
 
 async function loadSettings() {
-    if (!formContent) {
-        console.error('Form content not found');
-        return;
-    }
+    if (!formContent) return;
 
-    // Mostrar loading
+    // Loading State
     formContent.innerHTML = `
         <div class="skeleton-loader">
             <div class="skeleton title-skeleton"></div>
-            <div class="skeleton text-skeleton"></div>
-            <div class="skeleton text-skeleton"></div>
+            <div class="skeleton field-skeleton"></div>
+            <div class="skeleton field-skeleton"></div>
         </div>
     `;
 
     try {
         const res = await fetch(API_BASE);
-
-        if (!res.ok) {
-            throw new Error(`HTTP error! status: ${res.status}`);
-        }
+        if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
 
         const data = await res.json();
-
         if (data.error) throw new Error(data.error);
 
-        currentConfig = data;
+        // --- CORRECCIÓN AQUI ---
+        // Tu JSON devuelve "values", el código original buscaba "config"
+        currentConfig = data.values || data.config || data;
+        currentSchema = data.schema || {};
+
         renderNav();
 
-        // Seleccionar la primera sección si no hay ninguna activa
         if (!activeSection || !currentConfig[activeSection]) {
             activeSection = Object.keys(currentConfig)[0];
         }
 
         switchSection(activeSection);
+
     } catch (err) {
         console.error('Error loading settings:', err);
         formContent.innerHTML = `
             <div style="padding: 2rem; text-align: center;">
-                <p style="color: var(--color-danger); margin-bottom: 1rem;">Failed to load settings</p>
-                <p style="color: var(--color-text-muted); font-size: 0.9rem;">${err.message}</p>
+                <p style="color: #ef4444; margin-bottom: 1rem;">Failed to load settings</p>
+                <p style="color: #888; font-size: 0.9rem;">${err.message}</p>
             </div>
         `;
     }
 }
 
-function renderNav() {
-    if (!navContainer) return;
-
-    navContainer.innerHTML = '';
-    Object.keys(currentConfig).forEach(section => {
-        const btn = document.createElement('div');
-        btn.className = `nav-item ${section === activeSection ? 'active' : ''}`;
-        btn.textContent = section;
-        btn.onclick = () => switchSection(section);
-        navContainer.appendChild(btn);
-    });
-}
-
 function switchSection(section) {
     if (!currentConfig[section]) return;
-
     activeSection = section;
     renderNav();
 
     const sectionData = currentConfig[section];
+    const sectionSchema = currentSchema[section] || {};
 
     formContent.innerHTML = `
-        <h2 class="section-title" style="margin-bottom: 2rem; text-transform: capitalize;">
+        <h2 class="section-title" style="margin-bottom: 2rem; text-transform: capitalize; font-size: 1.8rem;">
             ${section.replace(/_/g, ' ')}
         </h2>
     `;
@@ -109,21 +88,34 @@ function switchSection(section) {
 
         const isBool = typeof value === 'boolean';
         const inputId = `input-${section}-${key}`;
-        const label = key.replace(/_/g, ' ');
+        const labelText = key.replace(/_/g, ' ');
+
+        // Obtener descripción
+        const description = sectionSchema[key]?.description || '';
+        const descHtml = description
+            ? `<p class="config-description">${description}</p>`
+            : '';
 
         if (isBool) {
             group.innerHTML = `
-                <div style="display: flex; align-items: center; gap: 0.5rem;">
-                    <input type="checkbox" id="${inputId}" name="${key}" ${value ? 'checked' : ''}>
-                    <label for="${inputId}" style="margin: 0; cursor: pointer;">${label}</label>
-                </div>
+                <div style="display: flex; flex-direction: column; gap: 8px;">
+                    <div style="display: flex; align-items: center; gap: 0.8rem;">
+                        <input type="checkbox" id="${inputId}" name="${key}" ${value ? 'checked' : ''} 
+                               style="width: 20px; height: 20px; accent-color: var(--accent);">
+                        <label for="${inputId}" style="margin: 0; cursor: pointer; font-size: 1rem;">${labelText}</label>
+                    </div>
+                    ${descHtml} </div>
             `;
         } else {
+            // --- CAMBIO PRINCIPAL AQUI ---
+            // Movimos ${descHtml} para que esté DESPUÉS del input
             group.innerHTML = `
-                <label for="${inputId}">${label}</label>
+                <label for="${inputId}">${labelText}</label>
                 <input class="config-input" id="${inputId}" name="${key}"
                        type="${typeof value === 'number' ? 'number' : 'text'}"
-                       value="${value}">
+                       value="${value || ''}" 
+                       placeholder="Not set">
+                ${descHtml} 
             `;
         }
 
@@ -131,9 +123,27 @@ function switchSection(section) {
     });
 }
 
-// Setup form submit handler
+function renderNav() {
+    if (!navContainer) return;
+    navContainer.innerHTML = '';
+
+    Object.keys(currentConfig).forEach(section => {
+        const btn = document.createElement('div');
+        btn.className = `nav-item ${section === activeSection ? 'active' : ''}`;
+
+        // Icono opcional según la sección (puedes personalizar esto)
+        let icon = '';
+        if(section === 'library') icon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>';
+        if(section === 'paths') icon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><folder></folder><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
+
+        btn.innerHTML = `${icon} ${section}`;
+        btn.onclick = () => switchSection(section);
+        navContainer.appendChild(btn);
+    });
+}
+
+// Handler de guardado
 document.addEventListener('DOMContentLoaded', () => {
-    // Usar delegación de eventos ya que el form se carga dinámicamente
     document.addEventListener('submit', async (e) => {
         if (e.target.id === 'config-form') {
             e.preventDefault();
@@ -146,8 +156,9 @@ async function saveSettings() {
     if (!form || !activeSection) return;
 
     const updatedData = {};
+    const sectionConfig = currentConfig[activeSection];
 
-    Object.keys(currentConfig[activeSection]).forEach(key => {
+    Object.keys(sectionConfig).forEach(key => {
         const input = form.elements[key];
         if (!input) return;
 
@@ -168,51 +179,35 @@ async function saveSettings() {
         });
 
         if (res.ok) {
-            currentConfig[activeSection] = updatedData;
-
-            // Mostrar notificación de éxito
-            const notification = document.createElement('div');
-            notification.style.cssText = `
-                position: fixed;
-                top: 20px;
-                right: 20px;
-                background: var(--color-success, #10b981);
-                color: white;
-                padding: 1rem 1.5rem;
-                border-radius: 8px;
-                box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-                z-index: 10000;
-                animation: slideIn 0.3s ease-out;
-            `;
-            notification.textContent = 'Settings saved successfully!';
-            document.body.appendChild(notification);
-
-            setTimeout(() => {
-                notification.style.animation = 'slideOut 0.3s ease-out';
-                setTimeout(() => notification.remove(), 300);
-            }, 2000);
+            currentConfig[activeSection] = updatedData; // Actualizamos localmente
+            showNotification('Settings saved successfully!');
         } else {
             throw new Error('Failed to save settings');
         }
     } catch (err) {
-        console.error('Error saving settings:', err);
-        alert('Error saving settings: ' + err.message);
+        console.error(err);
+        showNotification('Error saving settings', true);
     }
 }
 
-// Añadir estilos para las animaciones (solo si no existen)
-if (!document.getElementById('settings-animations')) {
-    const animationStyles = document.createElement('style');
-    animationStyles.id = 'settings-animations';
-    animationStyles.textContent = `
-        @keyframes slideIn {
-            from { transform: translateX(400px); opacity: 0; }
-            to { transform: translateX(0); opacity: 1; }
-        }
-        @keyframes slideOut {
-            from { transform: translateX(0); opacity: 1; }
-            to { transform: translateX(400px); opacity: 0; }
-        }
+function showNotification(msg, isError = false) {
+    const notification = document.createElement('div');
+    const bg = isError ? '#ef4444' : '#10b981';
+
+    notification.style.cssText = `
+        position: fixed; top: 20px; right: 20px;
+        background: ${bg}; color: white;
+        padding: 1rem 1.5rem; border-radius: 8px; font-weight: 600;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 20000;
+        animation: slideIn 0.3s ease-out; display: flex; align-items: center; gap: 10px;
     `;
-    document.head.appendChild(animationStyles);
+    notification.innerHTML = isError
+        ? `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg> ${msg}`
+        : `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg> ${msg}`;
+
+    document.body.appendChild(notification);
+    setTimeout(() => {
+        notification.style.animation = 'slideOut 0.3s ease-out';
+        setTimeout(() => notification.remove(), 300);
+    }, 3000);
 }
\ No newline at end of file
diff --git a/desktop/src/shared/config.js b/desktop/src/shared/config.js
index b42dd29..b207231 100644
--- a/desktop/src/shared/config.js
+++ b/desktop/src/shared/config.js
@@ -11,6 +11,22 @@ const DEFAULT_CONFIG = {
         anime: null,
         manga: null,
         novels: null
+    },
+    paths: {
+        mpv: null,
+        ffmpeg: null
+    }
+};
+
+export const CONFIG_SCHEMA = {
+    library: {
+        anime: { description: "Path where anime is stored" },
+        manga: { description: "Path where manga is stored" },
+        novels: { description: "Path where novels are stored" }
+    },
+    paths: {
+        mpv: { description: "Required to open anime episodes in mpv on desktop version." },
+        ffmpeg: { description: "Required for downloading anime episodes." }
     }
 };
 
@@ -31,7 +47,12 @@ function ensureConfigFile() {
 export function getConfig() {
     ensureConfigFile();
     const raw = fs.readFileSync(CONFIG_PATH, 'utf8');
-    return yaml.load(raw) || DEFAULT_CONFIG;
+    const loaded = yaml.load(raw) || {};
+
+    return {
+        values: deepMerge(structuredClone(DEFAULT_CONFIG), loaded),
+        schema: CONFIG_SCHEMA
+    };
 }
 
 export function setConfig(partialConfig) {
diff --git a/desktop/views/books/books.html b/desktop/views/books/books.html
index 51c55d6..86ca8ce 100644
--- a/desktop/views/books/books.html
+++ b/desktop/views/books/books.html
@@ -109,5 +109,6 @@
 <script src="/src/scripts/updateNotifier.js"></script>
 <script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
+<script src="/src/scripts/settings.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/desktop/views/components/settings-modal.html b/desktop/views/components/settings-modal.html
index 3dae9fa..b354cf9 100644
--- a/desktop/views/components/settings-modal.html
+++ b/desktop/views/components/settings-modal.html
@@ -42,16 +42,15 @@
 </div>
 
 <style>
-  /* --- AMOLED THEME VARIABLES --- */
+  /* --- THEME VARIABLES (Heredadas y adaptadas de anime.css) --- */
   :root {
-    --amoled-black: #000000;
-    --amoled-surface: #080808;
-    --amoled-field: #0e0e0e;
-    --amoled-border: rgba(255, 255, 255, 0.08);
-    --accent-purple: #8b5cf6;
-    --accent-glow: rgba(139, 92, 246, 0.15);
-    --text-main: #ffffff;
-    --text-dim: #a1a1aa;
+    --modal-bg: #0b0b0b;
+    --modal-sidebar: rgba(255, 255, 255, 0.02);
+    --modal-border: rgba(255, 255, 255, 0.08);
+    --input-bg: rgba(255, 255, 255, 0.04);
+    --accent: #8b5cf6; /* Tu morado principal */
+    --text-primary: #ffffff;
+    --text-secondary: #a1a1aa;
   }
 
   /* --- MODAL BASE --- */
@@ -63,6 +62,7 @@
     align-items: center;
     justify-content: center;
     padding: 20px;
+    font-family: system-ui, -apple-system, sans-serif; /* Coherencia con anime.css */
   }
 
   .modal.hidden { display: none !important; }
@@ -70,55 +70,58 @@
   .modal-overlay {
     position: absolute;
     inset: 0;
-    background: rgba(0, 0, 0, 0.9);
-    backdrop-filter: blur(12px);
+    background: rgba(0, 0, 0, 0.85); /* Un poco menos opaco para profundidad */
+    backdrop-filter: blur(8px);
     z-index: -1;
+    animation: fadeIn 0.3s ease;
   }
 
   .modal-content {
     position: relative;
     display: flex;
-    flex-direction: row; /* Horizontal layout */
-    width: 95%;
-    max-width: 1200px; /* Increased size */
-    height: 85vh;
-    background: var(--amoled-black);
-    border: var(--amoled-border);
-    border-radius: 28px;
+    flex-direction: row;
+    width: 100%;
+    max-width: 1100px;
+    height: 80vh;
+    background: var(--modal-bg);
+    border: 1px solid var(--modal-border);
+    border-radius: 16px; /* Bordes menos exagerados, más elegantes */
     overflow: hidden;
-    box-shadow: 0 0 0 1px var(--amoled-border), 0 24px 60px rgba(0,0,0,0.8);
-    animation: modalScaleUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    box-shadow: 0 40px 80px rgba(0,0,0,0.6);
+    animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
   }
 
   /* --- SIDEBAR --- */
   .modal-sidebar {
-    width: 280px;
-    background: var(--amoled-surface);
-    border-right: var(--amoled-border);
+    width: 260px;
+    background: var(--modal-sidebar);
+    border-right: 1px solid var(--modal-border);
     display: flex;
     flex-direction: column;
-    padding: 2rem;
+    padding: 2rem 1.5rem;
     flex-shrink: 0;
   }
 
+  .sidebar-header { margin-bottom: 2rem; }
+
   .sidebar-title {
-    font-size: 1.4rem;
+    font-size: 1.5rem;
     font-weight: 800;
-    margin-bottom: 2.5rem;
-    color: var(--text-main);
-    letter-spacing: -0.02em;
+    color: var(--text-primary);
+    margin: 0;
+    letter-spacing: -0.03em;
   }
 
-  .nav-list { flex: 1; }
+  .nav-list { flex: 1; display: flex; flex-direction: column; gap: 4px; }
 
   .nav-item {
-    padding: 12px 16px;
-    border-radius: 14px;
+    padding: 10px 14px;
+    border-radius: 8px;
     cursor: pointer;
-    color: var(--text-dim);
+    color: var(--text-secondary);
     transition: all 0.2s ease;
-    margin-bottom: 6px;
-    font-weight: 500;
+    font-weight: 600;
+    font-size: 0.95rem;
     display: flex;
     align-items: center;
     gap: 12px;
@@ -127,22 +130,23 @@
 
   .nav-item:hover {
     background: rgba(255, 255, 255, 0.05);
-    color: var(--text-main);
+    color: var(--text-primary);
   }
 
   .nav-item.active {
-    background: var(--accent-glow);
-    color: var(--accent-purple);
-    box-shadow: inset 3px 0 0 var(--accent-purple);
+    background: var(--accent);
+    color: white;
+    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25); /* Glow sutil */
   }
 
-  /* --- MAIN CONTENT & DYNAMIC INPUTS --- */
+  /* --- MAIN CONTENT area --- */
   .modal-main {
     flex: 1;
     display: flex;
     flex-direction: column;
-    background: var(--amoled-black);
+    background: transparent;
     min-width: 0;
+    position: relative;
   }
 
   .config-wrapper {
@@ -153,52 +157,54 @@
 
   .section-container {
     flex: 1;
-    padding: 3.5rem;
+    padding: 3rem;
     overflow-y: auto;
+    /* Custom Scrollbar sutil */
     scrollbar-width: thin;
-    scrollbar-color: #222 transparent;
+    scrollbar-color: #333 transparent;
   }
 
-  /* Styles for the injected section content */
+  /* --- INPUTS & FORMS (Estilo WaifuBoards/Anime) --- */
   .config-group {
-    margin-bottom: 2.5rem;
-    animation: fadeInSection 0.4s ease-out;
+    margin-bottom: 2rem;
+    animation: fadeInSection 0.3s ease-out;
   }
 
   .config-group label {
     display: block;
-    font-size: 0.75rem;
-    color: var(--accent-purple);
-    margin-bottom: 0.8rem;
-    letter-spacing: 0.05em;
-    font-weight: 800;
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    margin-bottom: 0.6rem;
+    font-weight: 600;
     text-transform: uppercase;
+    letter-spacing: 0.05em;
   }
 
   .config-input {
     width: 100%;
-    padding: 1rem 1.2rem;
-    background: var(--amoled-field);
-    border: 1px solid #1a1a1a;
-    border-radius: 14px;
-    color: #fff;
+    padding: 0.9rem 1rem;
+    background: var(--input-bg);
+    border: 1px solid var(--modal-border);
+    border-radius: 8px;
+    color: var(--text-primary);
     font-size: 1rem;
-    transition: all 0.25s ease;
+    font-family: inherit;
+    transition: all 0.2s ease;
   }
 
   .config-input:focus {
     outline: none;
-    border-color: var(--accent-purple);
-    background: #121212;
-    box-shadow: 0 0 0 4px var(--accent-glow);
+    border-color: var(--accent);
+    background: rgba(255, 255, 255, 0.08);
+    box-shadow: 0 0 0 1px var(--accent);
   }
 
-  /* --- FOOTER --- */
+  /* --- FOOTER ACTION BAR --- */
   .modal-footer-sticky {
-    padding: 1.5rem 3.5rem;
-    background: rgba(0, 0, 0, 0.8);
+    padding: 1.2rem 3rem;
+    background: rgba(11, 11, 11, 0.8); /* Glass effect */
     backdrop-filter: blur(10px);
-    border-top: var(--amoled-border);
+    border-top: 1px solid var(--modal-border);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -206,32 +212,34 @@
 
   .footer-hint {
     font-size: 0.85rem;
-    color: var(--text-dim);
+    color: var(--text-secondary);
+    font-weight: 500;
   }
 
   /* --- BUTTONS --- */
   .btn-primary {
-    padding: 0.8rem 2.2rem;
-    background: #ffffff;
-    color: #000000;
+    padding: 0.7rem 2rem;
+    background: white; /* Estilo 'btn-watch' de anime.css */
+    color: black;
     border: none;
-    border-radius: 100px;
-    font-weight: 700;
+    border-radius: 6px;
+    font-weight: 800;
+    font-size: 0.95rem;
     cursor: pointer;
-    transition: transform 0.2s ease;
+    transition: transform 0.2s ease, filter 0.2s;
   }
 
   .btn-primary:hover {
-    transform: translateY(-2px);
-    background: #f0f0f0;
+    transform: scale(1.02);
+    filter: brightness(0.9);
   }
 
   .btn-exit {
-    background: #111;
-    border: 1px solid #222;
-    color: #ef4444;
+    background: transparent;
+    border: 1px solid var(--modal-border);
+    color: #ef4444; /* Rojo error sutil */
     padding: 10px;
-    border-radius: 12px;
+    border-radius: 8px;
     width: 100%;
     cursor: pointer;
     display: flex;
@@ -240,39 +248,63 @@
     gap: 8px;
     font-weight: 600;
     margin-top: auto;
+    transition: background 0.2s;
   }
 
-  /* --- ANIMATIONS & SKELETON --- */
-  @keyframes modalScaleUp {
-    from { opacity: 0; transform: scale(0.97) translateY(10px); }
+  .btn-exit:hover {
+    background: rgba(239, 68, 68, 0.1);
+    border-color: #ef4444;
+  }
+
+  /* --- SKELETON & ANIMATIONS --- */
+  @keyframes modalSlideUp {
+    from { opacity: 0; transform: scale(0.98) translateY(15px); }
     to { opacity: 1; transform: scale(1) translateY(0); }
   }
 
-  @keyframes fadeInSection {
-    from { opacity: 0; transform: translateY(8px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
+  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+  @keyframes fadeInSection { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
 
-  .skeleton-loader { display: flex; flex-direction: column; gap: 2rem; }
+  .skeleton-loader { display: flex; flex-direction: column; gap: 1.5rem; }
   .skeleton {
-    background: linear-gradient(90deg, #080808 25%, #121212 50%, #080808 75%);
+    background: linear-gradient(90deg, #111 25%, #1a1a1a 50%, #111 75%);
     background-size: 200% 100%;
-    animation: shimmer 1.5s infinite;
-    border-radius: 12px;
+    animation: shimmer 2s infinite;
+    border-radius: 6px;
   }
-  @keyframes shimmer {
-    0% { background-position: 200% 0; }
-    100% { background-position: -200% 0; }
-  }
-  .title-skeleton { height: 35px; width: 40%; }
-  .field-skeleton { height: 55px; width: 100%; }
+  @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
 
-  /* Responsive Mobile View */
+  .title-skeleton { height: 28px; width: 30%; margin-bottom: 1rem; }
+  .field-skeleton { height: 48px; width: 100%; }
+
+  /* --- RESPONSIVE --- */
   @media (max-width: 850px) {
-    .modal-content { flex-direction: column; height: 95vh; width: 100vw; border-radius: 0; }
-    .modal-sidebar { width: 100%; height: auto; border-right: none; border-bottom: var(--amoled-border); padding: 1rem; }
-    .sidebar-title { margin-bottom: 1rem; font-size: 1.2rem; }
-    .section-container { padding: 2rem; }
-    .modal-footer-sticky { padding: 1.5rem 2rem; }
+    .modal-content { flex-direction: column; height: 100%; width: 100%; border-radius: 0; border: none; }
+    .modal-sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--modal-border); padding: 1.5rem; }
+    .sidebar-footer { display: none; } /* Ocultar btn salir sidebar en movil */
+    .section-container { padding: 1.5rem; }
+    .modal-footer-sticky { padding: 1rem 1.5rem; }
+
+    /* Añadir un botón de cierre flotante en móvil si fuera necesario,
+       pero el diseño actual debería funcionar bien con scroll */
+  }
+
+  /* --- Estilo para la nueva descripción --- */
+  .config-description {
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.5); /* Gris sutil */
+
+    /* Ajustes para posición inferior */
+    margin-top: 0.5rem;    /* Espacio entre el input y la descripción */
+    margin-bottom: 0;      /* Ya no necesitamos margen abajo */
+
+    line-height: 1.4;
+    font-weight: 400;
+  }
+
+  /* Ajuste para inputs vacíos (placeholder) */
+  .config-input::placeholder {
+    color: rgba(255, 255, 255, 0.2);
+    font-style: italic;
   }
 </style>
\ No newline at end of file
diff --git a/desktop/views/marketplace.html b/desktop/views/marketplace.html
index 0d71bc9..2358e10 100644
--- a/desktop/views/marketplace.html
+++ b/desktop/views/marketplace.html
@@ -71,5 +71,6 @@
 <script src="/src/scripts/titlebar.js"></script>
 <script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
+<script src="/src/scripts/settings.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/desktop/views/profile.html b/desktop/views/profile.html
index 69babe1..ce3e058 100644
--- a/desktop/views/profile.html
+++ b/desktop/views/profile.html
@@ -207,5 +207,6 @@
 <script src="/src/scripts/utils/notification-utils.js"></script>
 <script src="/src/scripts/utils/list-modal-manager.js"></script>
 <script src="/src/scripts/profile.js"></script>
+<script src="/src/scripts/settings.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/desktop/views/schedule.html b/desktop/views/schedule.html
index 6a755f5..da17df8 100644
--- a/desktop/views/schedule.html
+++ b/desktop/views/schedule.html
@@ -92,5 +92,6 @@
     <script src="/src/scripts/schedule/schedule.js"></script>
     <script src="/src/scripts/rpc-inapp.js"></script>
     <script src="/src/scripts/auth-guard.js"></script>
+    <script src="/src/scripts/settings.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docker/src/api/config/config.controller.ts b/docker/src/api/config/config.controller.ts
index 4788a2b..7bdaf37 100644
--- a/docker/src/api/config/config.controller.ts
+++ b/docker/src/api/config/config.controller.ts
@@ -1,43 +1,53 @@
-import {FastifyReply, FastifyRequest} from 'fastify';
-import {getConfig, setConfig} from '../../shared/config';
+import { FastifyReply, FastifyRequest } from 'fastify';
+import { getConfig, setConfig } from '../../shared/config';
 
 export async function getFullConfig(req: FastifyRequest, reply: FastifyReply) {
     try {
-        return getConfig();
-    } catch (err) {
+        const { values, schema } = getConfig();
+        return { values, schema };
+    } catch {
         return { error: "Error loading config" };
     }
 }
 
-export async function getConfigSection(req: FastifyRequest<{ Params: { section: string } }>, reply: FastifyReply) {
+export async function getConfigSection(
+    req: FastifyRequest<{ Params: { section: string } }>,
+    reply: FastifyReply
+) {
     try {
         const { section } = req.params;
-        const config = getConfig();
+        const { values } = getConfig();
 
-        if (config[section] === undefined) {
+        if (values[section] === undefined) {
             return { error: "Section not found" };
         }
 
-        return { [section]: config[section] };
-    } catch (err) {
+        return { [section]: values[section] };
+    } catch {
         return { error: "Error loading config section" };
     }
 }
 
-export async function updateConfig(req: FastifyRequest<{ Body: any }>, reply: FastifyReply) {
+export async function updateConfig(
+    req: FastifyRequest<{ Body: any }>,
+    reply: FastifyReply
+) {
     try {
-        return setConfig(req.body);
-    } catch (err) {
+        return setConfig(req.body); // schema nunca se toca
+    } catch {
         return { error: "Error updating config" };
     }
 }
 
-export async function updateConfigSection(req: FastifyRequest<{ Params: { section: string }, Body: any }>, reply: FastifyReply) {
+export async function updateConfigSection(
+    req: FastifyRequest<{ Params: { section: string }, Body: any }>,
+    reply: FastifyReply
+) {
     try {
         const { section } = req.params;
-        const updatedConfig = setConfig({ [section]: req.body });
-        return { [section]: updatedConfig[section] };
-    } catch (err) {
+        const updatedValues = setConfig({ [section]: req.body });
+        return { [section]: updatedValues[section] };
+    } catch {
         return { error: "Error updating config section" };
     }
 }
\ No newline at end of file
diff --git a/docker/src/api/local/download.service.ts b/docker/src/api/local/download.service.ts
index b2f2a18..c5f6534 100644
--- a/docker/src/api/local/download.service.ts
+++ b/docker/src/api/local/download.service.ts
@@ -70,8 +70,8 @@ async function getOrCreateEntry(
         throw new Error('METADATA_NOT_FOUND');
     }
 
-    const config = loadConfig();
-    const basePath = config.library?.[type];
+    const { values } = loadConfig();
+    const basePath = values.library?.[type];
 
     if (!basePath) {
         throw new Error(`NO_LIBRARY_PATH_FOR_${type.toUpperCase()}`);
diff --git a/docker/src/api/local/local.service.ts b/docker/src/api/local/local.service.ts
index 1cddfd4..4384b21 100644
--- a/docker/src/api/local/local.service.ts
+++ b/docker/src/api/local/local.service.ts
@@ -127,9 +127,9 @@ export async function resolveEntryMetadata(entry: any, type: string) {
 }
 
 export async function performLibraryScan(mode: 'full' | 'incremental' = 'incremental') {
-    const config = loadConfig();
+    const { values } = loadConfig();
 
-    if (!config.library) {
+    if (!values.library) {
         throw new Error('NO_LIBRARY_CONFIGURED');
     }
 
@@ -138,7 +138,7 @@ export async function performLibraryScan(mode: 'full' | 'incremental' = 'increme
         await run(`DELETE FROM local_entries`, [], 'local_library');
     }
 
-    for (const [type, basePath] of Object.entries(config.library)) {
+    for (const [type, basePath] of Object.entries(values.library)) {
         if (!basePath || !fs.existsSync(<PathLike>basePath)) continue;
 
         const dirs = fs.readdirSync(<string>basePath, { withFileTypes: true }).filter(d => d.isDirectory());
diff --git a/docker/src/scripts/settings.js b/docker/src/scripts/settings.js
index d1bb295..c160c61 100644
--- a/docker/src/scripts/settings.js
+++ b/docker/src/scripts/settings.js
@@ -1,5 +1,6 @@
 const API_BASE = '/api/config';
 let currentConfig = {};
+let currentSchema = {};
 let activeSection = '';
 let modal, navContainer, formContent, form;
 
@@ -9,96 +10,74 @@ window.toggleSettingsModal = async (forceClose = false) => {
     formContent = document.getElementById('config-section-content');
     form = document.getElementById('config-form');
 
-    if (!modal) {
-        console.error('Modal not found');
-        return;
-    }
+    if (!modal) return;
 
     if (forceClose) {
         modal.classList.add('hidden');
     } else {
         const isHidden = modal.classList.contains('hidden');
-
         if (isHidden) {
-            // Abrir modal
             modal.classList.remove('hidden');
             await loadSettings();
         } else {
-            // Cerrar modal
             modal.classList.add('hidden');
         }
     }
 };
 
 async function loadSettings() {
-    if (!formContent) {
-        console.error('Form content not found');
-        return;
-    }
+    if (!formContent) return;
 
-    // Mostrar loading
+    // Loading State
     formContent.innerHTML = `
         <div class="skeleton-loader">
             <div class="skeleton title-skeleton"></div>
-            <div class="skeleton text-skeleton"></div>
-            <div class="skeleton text-skeleton"></div>
+            <div class="skeleton field-skeleton"></div>
+            <div class="skeleton field-skeleton"></div>
         </div>
     `;
 
     try {
         const res = await fetch(API_BASE);
-
-        if (!res.ok) {
-            throw new Error(`HTTP error! status: ${res.status}`);
-        }
+        if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
 
         const data = await res.json();
-
         if (data.error) throw new Error(data.error);
 
-        currentConfig = data;
+        // --- CORRECCIÓN AQUI ---
+        // Tu JSON devuelve "values", el código original buscaba "config"
+        currentConfig = data.values || data.config || data;
+        currentSchema = data.schema || {};
+
         renderNav();
 
-        // Seleccionar la primera sección si no hay ninguna activa
         if (!activeSection || !currentConfig[activeSection]) {
             activeSection = Object.keys(currentConfig)[0];
         }
 
         switchSection(activeSection);
+
     } catch (err) {
         console.error('Error loading settings:', err);
         formContent.innerHTML = `
             <div style="padding: 2rem; text-align: center;">
-                <p style="color: var(--color-danger); margin-bottom: 1rem;">Failed to load settings</p>
-                <p style="color: var(--color-text-muted); font-size: 0.9rem;">${err.message}</p>
+                <p style="color: #ef4444; margin-bottom: 1rem;">Failed to load settings</p>
+                <p style="color: #888; font-size: 0.9rem;">${err.message}</p>
             </div>
         `;
     }
 }
 
-function renderNav() {
-    if (!navContainer) return;
-
-    navContainer.innerHTML = '';
-    Object.keys(currentConfig).forEach(section => {
-        const btn = document.createElement('div');
-        btn.className = `nav-item ${section === activeSection ? 'active' : ''}`;
-        btn.textContent = section;
-        btn.onclick = () => switchSection(section);
-        navContainer.appendChild(btn);
-    });
-}
-
 function switchSection(section) {
     if (!currentConfig[section]) return;
-
     activeSection = section;
     renderNav();
 
     const sectionData = currentConfig[section];
+    const sectionSchema = currentSchema[section] || {};
 
     formContent.innerHTML = `
-        <h2 class="section-title" style="margin-bottom: 2rem; text-transform: capitalize;">
+        <h2 class="section-title" style="margin-bottom: 2rem; text-transform: capitalize; font-size: 1.8rem;">
             ${section.replace(/_/g, ' ')}
         </h2>
     `;
@@ -109,21 +88,34 @@ function switchSection(section) {
 
         const isBool = typeof value === 'boolean';
         const inputId = `input-${section}-${key}`;
-        const label = key.replace(/_/g, ' ');
+        const labelText = key.replace(/_/g, ' ');
+
+        // Obtener descripción
+        const description = sectionSchema[key]?.description || '';
+        const descHtml = description
+            ? `<p class="config-description">${description}</p>`
+            : '';
 
         if (isBool) {
             group.innerHTML = `
-                <div style="display: flex; align-items: center; gap: 0.5rem;">
-                    <input type="checkbox" id="${inputId}" name="${key}" ${value ? 'checked' : ''}>
-                    <label for="${inputId}" style="margin: 0; cursor: pointer;">${label}</label>
-                </div>
+                <div style="display: flex; flex-direction: column; gap: 8px;">
+                    <div style="display: flex; align-items: center; gap: 0.8rem;">
+                        <input type="checkbox" id="${inputId}" name="${key}" ${value ? 'checked' : ''} 
+                               style="width: 20px; height: 20px; accent-color: var(--accent);">
+                        <label for="${inputId}" style="margin: 0; cursor: pointer; font-size: 1rem;">${labelText}</label>
+                    </div>
+                    ${descHtml} </div>
             `;
         } else {
+            // --- CAMBIO PRINCIPAL AQUI ---
+            // Movimos ${descHtml} para que esté DESPUÉS del input
             group.innerHTML = `
-                <label for="${inputId}">${label}</label>
+                <label for="${inputId}">${labelText}</label>
                 <input class="config-input" id="${inputId}" name="${key}"
                        type="${typeof value === 'number' ? 'number' : 'text'}"
-                       value="${value}">
+                       value="${value || ''}" 
+                       placeholder="Not set">
+                ${descHtml} 
             `;
         }
 
@@ -131,9 +123,27 @@ function switchSection(section) {
     });
 }
 
-// Setup form submit handler
+function renderNav() {
+    if (!navContainer) return;
+    navContainer.innerHTML = '';
+
+    Object.keys(currentConfig).forEach(section => {
+        const btn = document.createElement('div');
+        btn.className = `nav-item ${section === activeSection ? 'active' : ''}`;
+
+        // Icono opcional según la sección (puedes personalizar esto)
+        let icon = '';
+        if(section === 'library') icon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>';
+        if(section === 'paths') icon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><folder></folder><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
+
+        btn.innerHTML = `${icon} ${section}`;
+        btn.onclick = () => switchSection(section);
+        navContainer.appendChild(btn);
+    });
+}
+
+// Handler de guardado
 document.addEventListener('DOMContentLoaded', () => {
-    // Usar delegación de eventos ya que el form se carga dinámicamente
     document.addEventListener('submit', async (e) => {
         if (e.target.id === 'config-form') {
             e.preventDefault();
@@ -146,8 +156,9 @@ async function saveSettings() {
     if (!form || !activeSection) return;
 
     const updatedData = {};
+    const sectionConfig = currentConfig[activeSection];
 
-    Object.keys(currentConfig[activeSection]).forEach(key => {
+    Object.keys(sectionConfig).forEach(key => {
         const input = form.elements[key];
         if (!input) return;
 
@@ -168,51 +179,35 @@ async function saveSettings() {
         });
 
         if (res.ok) {
-            currentConfig[activeSection] = updatedData;
-
-            // Mostrar notificación de éxito
-            const notification = document.createElement('div');
-            notification.style.cssText = `
-                position: fixed;
-                top: 20px;
-                right: 20px;
-                background: var(--color-success, #10b981);
-                color: white;
-                padding: 1rem 1.5rem;
-                border-radius: 8px;
-                box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-                z-index: 10000;
-                animation: slideIn 0.3s ease-out;
-            `;
-            notification.textContent = 'Settings saved successfully!';
-            document.body.appendChild(notification);
-
-            setTimeout(() => {
-                notification.style.animation = 'slideOut 0.3s ease-out';
-                setTimeout(() => notification.remove(), 300);
-            }, 2000);
+            currentConfig[activeSection] = updatedData; // Actualizamos localmente
+            showNotification('Settings saved successfully!');
         } else {
             throw new Error('Failed to save settings');
         }
     } catch (err) {
-        console.error('Error saving settings:', err);
-        alert('Error saving settings: ' + err.message);
+        console.error(err);
+        showNotification('Error saving settings', true);
     }
 }
 
-// Añadir estilos para las animaciones (solo si no existen)
-if (!document.getElementById('settings-animations')) {
-    const animationStyles = document.createElement('style');
-    animationStyles.id = 'settings-animations';
-    animationStyles.textContent = `
-        @keyframes slideIn {
-            from { transform: translateX(400px); opacity: 0; }
-            to { transform: translateX(0); opacity: 1; }
-        }
-        @keyframes slideOut {
-            from { transform: translateX(0); opacity: 1; }
-            to { transform: translateX(400px); opacity: 0; }
-        }
+function showNotification(msg, isError = false) {
+    const notification = document.createElement('div');
+    const bg = isError ? '#ef4444' : '#10b981';
+
+    notification.style.cssText = `
+        position: fixed; top: 20px; right: 20px;
+        background: ${bg}; color: white;
+        padding: 1rem 1.5rem; border-radius: 8px; font-weight: 600;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 20000;
+        animation: slideIn 0.3s ease-out; display: flex; align-items: center; gap: 10px;
     `;
-    document.head.appendChild(animationStyles);
+    notification.innerHTML = isError
+        ? `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg> ${msg}`
+        : `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg> ${msg}`;
+
+    document.body.appendChild(notification);
+    setTimeout(() => {
+        notification.style.animation = 'slideOut 0.3s ease-out';
+        setTimeout(() => notification.remove(), 300);
+    }, 3000);
 }
\ No newline at end of file
diff --git a/docker/src/shared/config.js b/docker/src/shared/config.js
index b42dd29..b207231 100644
--- a/docker/src/shared/config.js
+++ b/docker/src/shared/config.js
@@ -11,6 +11,22 @@ const DEFAULT_CONFIG = {
         anime: null,
         manga: null,
         novels: null
+    },
+    paths: {
+        mpv: null,
+        ffmpeg: null
+    }
+};
+
+export const CONFIG_SCHEMA = {
+    library: {
+        anime: { description: "Path where anime is stored" },
+        manga: { description: "Path where manga is stored" },
+        novels: { description: "Path where novels are stored" }
+    },
+    paths: {
+        mpv: { description: "Required to open anime episodes in mpv on desktop version." },
+        ffmpeg: { description: "Required for downloading anime episodes." }
     }
 };
 
@@ -31,7 +47,12 @@ function ensureConfigFile() {
 export function getConfig() {
     ensureConfigFile();
     const raw = fs.readFileSync(CONFIG_PATH, 'utf8');
-    return yaml.load(raw) || DEFAULT_CONFIG;
+    const loaded = yaml.load(raw) || {};
+
+    return {
+        values: deepMerge(structuredClone(DEFAULT_CONFIG), loaded),
+        schema: CONFIG_SCHEMA
+    };
 }
 
 export function setConfig(partialConfig) {
diff --git a/docker/views/anime/animes.html b/docker/views/anime/animes.html
index efc15c8..73b23b4 100644
--- a/docker/views/anime/animes.html
+++ b/docker/views/anime/animes.html
@@ -9,7 +9,6 @@
     <link rel="stylesheet" href="/views/css/components/hero.css">
     <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
-    <link rel="stylesheet" href="/views/css/components/local-library.css">
     <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
 </head>
 <body>
@@ -119,7 +118,6 @@
 <script src="/src/scripts/utils/youtube-player-utils.js"></script>
 <script src="/src/scripts/anime/animes.js"></script>
 <script src="/src/scripts/updateNotifier.js"></script>
-<script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
 <script src="/src/scripts/settings.js"></script>
 </body>
diff --git a/docker/views/books/books.html b/docker/views/books/books.html
index 1af5b21..ba28db8 100644
--- a/docker/views/books/books.html
+++ b/docker/views/books/books.html
@@ -89,5 +89,6 @@
 <script src="/src/scripts/books/books.js"></script>
 <script src="/src/scripts/updateNotifier.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
+<script src="/src/scripts/settings.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docker/views/components/settings-modal.html b/docker/views/components/settings-modal.html
index 3dae9fa..b354cf9 100644
--- a/docker/views/components/settings-modal.html
+++ b/docker/views/components/settings-modal.html
@@ -42,16 +42,15 @@
 </div>
 
 <style>
-  /* --- AMOLED THEME VARIABLES --- */
+  /* --- THEME VARIABLES (Heredadas y adaptadas de anime.css) --- */
   :root {
-    --amoled-black: #000000;
-    --amoled-surface: #080808;
-    --amoled-field: #0e0e0e;
-    --amoled-border: rgba(255, 255, 255, 0.08);
-    --accent-purple: #8b5cf6;
-    --accent-glow: rgba(139, 92, 246, 0.15);
-    --text-main: #ffffff;
-    --text-dim: #a1a1aa;
+    --modal-bg: #0b0b0b;
+    --modal-sidebar: rgba(255, 255, 255, 0.02);
+    --modal-border: rgba(255, 255, 255, 0.08);
+    --input-bg: rgba(255, 255, 255, 0.04);
+    --accent: #8b5cf6; /* Tu morado principal */
+    --text-primary: #ffffff;
+    --text-secondary: #a1a1aa;
   }
 
   /* --- MODAL BASE --- */
@@ -63,6 +62,7 @@
     align-items: center;
     justify-content: center;
     padding: 20px;
+    font-family: system-ui, -apple-system, sans-serif; /* Coherencia con anime.css */
   }
 
   .modal.hidden { display: none !important; }
@@ -70,55 +70,58 @@
   .modal-overlay {
     position: absolute;
     inset: 0;
-    background: rgba(0, 0, 0, 0.9);
-    backdrop-filter: blur(12px);
+    background: rgba(0, 0, 0, 0.85); /* Un poco menos opaco para profundidad */
+    backdrop-filter: blur(8px);
     z-index: -1;
+    animation: fadeIn 0.3s ease;
   }
 
   .modal-content {
     position: relative;
     display: flex;
-    flex-direction: row; /* Horizontal layout */
-    width: 95%;
-    max-width: 1200px; /* Increased size */
-    height: 85vh;
-    background: var(--amoled-black);
-    border: var(--amoled-border);
-    border-radius: 28px;
+    flex-direction: row;
+    width: 100%;
+    max-width: 1100px;
+    height: 80vh;
+    background: var(--modal-bg);
+    border: 1px solid var(--modal-border);
+    border-radius: 16px; /* Bordes menos exagerados, más elegantes */
     overflow: hidden;
-    box-shadow: 0 0 0 1px var(--amoled-border), 0 24px 60px rgba(0,0,0,0.8);
-    animation: modalScaleUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    box-shadow: 0 40px 80px rgba(0,0,0,0.6);
+    animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
   }
 
   /* --- SIDEBAR --- */
   .modal-sidebar {
-    width: 280px;
-    background: var(--amoled-surface);
-    border-right: var(--amoled-border);
+    width: 260px;
+    background: var(--modal-sidebar);
+    border-right: 1px solid var(--modal-border);
     display: flex;
     flex-direction: column;
-    padding: 2rem;
+    padding: 2rem 1.5rem;
     flex-shrink: 0;
   }
 
+  .sidebar-header { margin-bottom: 2rem; }
+
   .sidebar-title {
-    font-size: 1.4rem;
+    font-size: 1.5rem;
     font-weight: 800;
-    margin-bottom: 2.5rem;
-    color: var(--text-main);
-    letter-spacing: -0.02em;
+    color: var(--text-primary);
+    margin: 0;
+    letter-spacing: -0.03em;
   }
 
-  .nav-list { flex: 1; }
+  .nav-list { flex: 1; display: flex; flex-direction: column; gap: 4px; }
 
   .nav-item {
-    padding: 12px 16px;
-    border-radius: 14px;
+    padding: 10px 14px;
+    border-radius: 8px;
     cursor: pointer;
-    color: var(--text-dim);
+    color: var(--text-secondary);
     transition: all 0.2s ease;
-    margin-bottom: 6px;
-    font-weight: 500;
+    font-weight: 600;
+    font-size: 0.95rem;
     display: flex;
     align-items: center;
     gap: 12px;
@@ -127,22 +130,23 @@
 
   .nav-item:hover {
     background: rgba(255, 255, 255, 0.05);
-    color: var(--text-main);
+    color: var(--text-primary);
   }
 
   .nav-item.active {
-    background: var(--accent-glow);
-    color: var(--accent-purple);
-    box-shadow: inset 3px 0 0 var(--accent-purple);
+    background: var(--accent);
+    color: white;
+    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25); /* Glow sutil */
   }
 
-  /* --- MAIN CONTENT & DYNAMIC INPUTS --- */
+  /* --- MAIN CONTENT area --- */
   .modal-main {
     flex: 1;
     display: flex;
     flex-direction: column;
-    background: var(--amoled-black);
+    background: transparent;
     min-width: 0;
+    position: relative;
   }
 
   .config-wrapper {
@@ -153,52 +157,54 @@
 
   .section-container {
     flex: 1;
-    padding: 3.5rem;
+    padding: 3rem;
     overflow-y: auto;
+    /* Custom Scrollbar sutil */
     scrollbar-width: thin;
-    scrollbar-color: #222 transparent;
+    scrollbar-color: #333 transparent;
   }
 
-  /* Styles for the injected section content */
+  /* --- INPUTS & FORMS (Estilo WaifuBoards/Anime) --- */
   .config-group {
-    margin-bottom: 2.5rem;
-    animation: fadeInSection 0.4s ease-out;
+    margin-bottom: 2rem;
+    animation: fadeInSection 0.3s ease-out;
   }
 
   .config-group label {
     display: block;
-    font-size: 0.75rem;
-    color: var(--accent-purple);
-    margin-bottom: 0.8rem;
-    letter-spacing: 0.05em;
-    font-weight: 800;
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    margin-bottom: 0.6rem;
+    font-weight: 600;
     text-transform: uppercase;
+    letter-spacing: 0.05em;
   }
 
   .config-input {
     width: 100%;
-    padding: 1rem 1.2rem;
-    background: var(--amoled-field);
-    border: 1px solid #1a1a1a;
-    border-radius: 14px;
-    color: #fff;
+    padding: 0.9rem 1rem;
+    background: var(--input-bg);
+    border: 1px solid var(--modal-border);
+    border-radius: 8px;
+    color: var(--text-primary);
     font-size: 1rem;
-    transition: all 0.25s ease;
+    font-family: inherit;
+    transition: all 0.2s ease;
   }
 
   .config-input:focus {
     outline: none;
-    border-color: var(--accent-purple);
-    background: #121212;
-    box-shadow: 0 0 0 4px var(--accent-glow);
+    border-color: var(--accent);
+    background: rgba(255, 255, 255, 0.08);
+    box-shadow: 0 0 0 1px var(--accent);
   }
 
-  /* --- FOOTER --- */
+  /* --- FOOTER ACTION BAR --- */
   .modal-footer-sticky {
-    padding: 1.5rem 3.5rem;
-    background: rgba(0, 0, 0, 0.8);
+    padding: 1.2rem 3rem;
+    background: rgba(11, 11, 11, 0.8); /* Glass effect */
     backdrop-filter: blur(10px);
-    border-top: var(--amoled-border);
+    border-top: 1px solid var(--modal-border);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -206,32 +212,34 @@
 
   .footer-hint {
     font-size: 0.85rem;
-    color: var(--text-dim);
+    color: var(--text-secondary);
+    font-weight: 500;
   }
 
   /* --- BUTTONS --- */
   .btn-primary {
-    padding: 0.8rem 2.2rem;
-    background: #ffffff;
-    color: #000000;
+    padding: 0.7rem 2rem;
+    background: white; /* Estilo 'btn-watch' de anime.css */
+    color: black;
     border: none;
-    border-radius: 100px;
-    font-weight: 700;
+    border-radius: 6px;
+    font-weight: 800;
+    font-size: 0.95rem;
     cursor: pointer;
-    transition: transform 0.2s ease;
+    transition: transform 0.2s ease, filter 0.2s;
   }
 
   .btn-primary:hover {
-    transform: translateY(-2px);
-    background: #f0f0f0;
+    transform: scale(1.02);
+    filter: brightness(0.9);
   }
 
   .btn-exit {
-    background: #111;
-    border: 1px solid #222;
-    color: #ef4444;
+    background: transparent;
+    border: 1px solid var(--modal-border);
+    color: #ef4444; /* Rojo error sutil */
     padding: 10px;
-    border-radius: 12px;
+    border-radius: 8px;
     width: 100%;
     cursor: pointer;
     display: flex;
@@ -240,39 +248,63 @@
     gap: 8px;
     font-weight: 600;
     margin-top: auto;
+    transition: background 0.2s;
   }
 
-  /* --- ANIMATIONS & SKELETON --- */
-  @keyframes modalScaleUp {
-    from { opacity: 0; transform: scale(0.97) translateY(10px); }
+  .btn-exit:hover {
+    background: rgba(239, 68, 68, 0.1);
+    border-color: #ef4444;
+  }
+
+  /* --- SKELETON & ANIMATIONS --- */
+  @keyframes modalSlideUp {
+    from { opacity: 0; transform: scale(0.98) translateY(15px); }
     to { opacity: 1; transform: scale(1) translateY(0); }
   }
 
-  @keyframes fadeInSection {
-    from { opacity: 0; transform: translateY(8px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
+  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+  @keyframes fadeInSection { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
 
-  .skeleton-loader { display: flex; flex-direction: column; gap: 2rem; }
+  .skeleton-loader { display: flex; flex-direction: column; gap: 1.5rem; }
   .skeleton {
-    background: linear-gradient(90deg, #080808 25%, #121212 50%, #080808 75%);
+    background: linear-gradient(90deg, #111 25%, #1a1a1a 50%, #111 75%);
     background-size: 200% 100%;
-    animation: shimmer 1.5s infinite;
-    border-radius: 12px;
+    animation: shimmer 2s infinite;
+    border-radius: 6px;
   }
-  @keyframes shimmer {
-    0% { background-position: 200% 0; }
-    100% { background-position: -200% 0; }
-  }
-  .title-skeleton { height: 35px; width: 40%; }
-  .field-skeleton { height: 55px; width: 100%; }
+  @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
 
-  /* Responsive Mobile View */
+  .title-skeleton { height: 28px; width: 30%; margin-bottom: 1rem; }
+  .field-skeleton { height: 48px; width: 100%; }
+
+  /* --- RESPONSIVE --- */
   @media (max-width: 850px) {
-    .modal-content { flex-direction: column; height: 95vh; width: 100vw; border-radius: 0; }
-    .modal-sidebar { width: 100%; height: auto; border-right: none; border-bottom: var(--amoled-border); padding: 1rem; }
-    .sidebar-title { margin-bottom: 1rem; font-size: 1.2rem; }
-    .section-container { padding: 2rem; }
-    .modal-footer-sticky { padding: 1.5rem 2rem; }
+    .modal-content { flex-direction: column; height: 100%; width: 100%; border-radius: 0; border: none; }
+    .modal-sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--modal-border); padding: 1.5rem; }
+    .sidebar-footer { display: none; } /* Ocultar btn salir sidebar en movil */
+    .section-container { padding: 1.5rem; }
+    .modal-footer-sticky { padding: 1rem 1.5rem; }
+
+    /* Añadir un botón de cierre flotante en móvil si fuera necesario,
+       pero el diseño actual debería funcionar bien con scroll */
+  }
+
+  /* --- Estilo para la nueva descripción --- */
+  .config-description {
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.5); /* Gris sutil */
+
+    /* Ajustes para posición inferior */
+    margin-top: 0.5rem;    /* Espacio entre el input y la descripción */
+    margin-bottom: 0;      /* Ya no necesitamos margen abajo */
+
+    line-height: 1.4;
+    font-weight: 400;
+  }
+
+  /* Ajuste para inputs vacíos (placeholder) */
+  .config-input::placeholder {
+    color: rgba(255, 255, 255, 0.2);
+    font-style: italic;
   }
 </style>
\ No newline at end of file
diff --git a/docker/views/marketplace.html b/docker/views/marketplace.html
index f3dfd75..b833f55 100644
--- a/docker/views/marketplace.html
+++ b/docker/views/marketplace.html
@@ -57,5 +57,6 @@
 <script src="/src/scripts/updateNotifier.js"></script>
 <script src="/src/scripts/marketplace.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
+<script src="/src/scripts/settings.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docker/views/profile.html b/docker/views/profile.html
index 58e95c4..bf8e775 100644
--- a/docker/views/profile.html
+++ b/docker/views/profile.html
@@ -194,5 +194,6 @@
 <script src="/src/scripts/utils/notification-utils.js"></script>
 <script src="/src/scripts/utils/list-modal-manager.js"></script>
 <script src="/src/scripts/profile.js"></script>
+<script src="/src/scripts/settings.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docker/views/schedule.html b/docker/views/schedule.html
index 6b0f75a..050448e 100644
--- a/docker/views/schedule.html
+++ b/docker/views/schedule.html
@@ -78,5 +78,6 @@
     <script src="/src/scripts/updateNotifier.js"></script>
     <script src="/src/scripts/schedule/schedule.js"></script>
     <script src="/src/scripts/auth-guard.js"></script>
+    <script src="/src/scripts/settings.js"></script>
 </body>
 </html>
\ No newline at end of file