Updated files to be exported into the exe

added chapters on player using aniskip api
removed electron stuff from docker ver
2025-12-20 14:52:56 -05:00 · 2025-12-20 19:56:15 +01:00 · 2025-12-20 00:16:01 +01:00 · 2025-12-20 00:13:10 +01:00 · 2025-12-19 23:12:53 +01:00 · 2025-12-19 20:01:08 +01:00
72 changed files with 5029 additions and 2697 deletions
--- a/desktop/loading.html
+++ b/desktop/loading.html
@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Waifuboard</title>
+    <style>
+        :root {
+            --color-bg: #09090b;
+            --color-primary: #8b5cf6;
+            --color-text: #ffffff;
+            --color-text-dim: #a1a1aa;
+        }
+
+        * {
+            box-sizing: border-box;
+            user-select: none;
+            -webkit-user-select: none;
+            -ms-user-select: none;
+        }
+
+        body {
+            margin: 0;
+            background: linear-gradient(135deg, #18181b 0%, var(--color-bg) 100%);
+            color: var(--color-text);
+            font-family: 'Inter', system-ui, -apple-system, sans-serif;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 400px;
+            height: 300px;
+            overflow: hidden;
+            position: relative;
+            border-radius: 16px;
+            -webkit-app-region: drag;
+        }
+
+        body::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: 16px;
+            box-shadow: 0 0 0 1px rgba(255,255,255,0.05),
+            0 20px 40px rgba(0,0,0,0.6);
+            pointer-events: none;
+        }
+
+        img {
+            -webkit-user-drag: none;
+            user-drag: none;
+        }
+
+        .bg-particle {
+            position: absolute;
+            background: var(--color-primary);
+            border-radius: 50%;
+            opacity: 0;
+            animation: particleFloat 8s ease-in-out infinite;
+        }
+
+        .bg-particle:nth-child(1) {
+            width: 4px;
+            height: 4px;
+            top: 20%;
+            left: 10%;
+            animation-delay: 0s;
+        }
+
+        .bg-particle:nth-child(2) {
+            width: 6px;
+            height: 6px;
+            top: 60%;
+            left: 80%;
+            animation-delay: 2s;
+        }
+
+        .bg-particle:nth-child(3) {
+            width: 3px;
+            height: 3px;
+            top: 40%;
+            left: 20%;
+            animation-delay: 4s;
+        }
+
+        .bg-particle:nth-child(4) {
+            width: 5px;
+            height: 5px;
+            top: 70%;
+            left: 70%;
+            animation-delay: 1s;
+        }
+
+        .splash-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 28px;
+            width: 100%;
+            animation: fadeIn 0.5s ease-out;
+        }
+
+        .brand-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .brand-container.horizontal {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            gap: 14px;
+            width: 100%;
+        }
+
+        .brand-icon {
+            width: 50px;
+            height: 50px;
+            object-fit: contain;
+            animation: iconPulse 2s ease-in-out infinite;
+        }
+
+        .brand-name {
+            font-size: 25px;
+            font-weight: 700;
+            letter-spacing: -0.02em;
+            margin: 0;
+            padding: 0;
+            color: #ffffff;
+            line-height: 1;
+            display: flex;
+            align-items: center;
+        }
+
+        .spinner-wrapper {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .spinner {
+            width: 44px;
+            height: 44px;
+            border: 5px solid rgba(139, 92, 246, 0.2);
+            border-top: 5px solid var(--color-primary);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+
+        .loading-text {
+            font-size: 12px;
+            color: #a1a1aa;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+
+        @keyframes iconPulse {
+            0%, 100% {
+                transform: scale(1);
+                filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.4));
+            }
+            50% {
+                transform: scale(1.05);
+                filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.6));
+            }
+        }
+
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
+        }
+
+        @keyframes particleFloat {
+            0% {
+                opacity: 0;
+                transform: translateY(0) scale(0);
+            }
+            25% {
+                opacity: 0.3;
+            }
+            50% {
+                opacity: 0.6;
+                transform: translateY(-100px) scale(1);
+            }
+            75% {
+                opacity: 0.3;
+            }
+            100% {
+                opacity: 0;
+                transform: translateY(-200px) scale(0);
+            }
+        }
+    </style>
+</head>
+<body>
+
+<div class="bg-particle"></div>
+<div class="bg-particle"></div>
+<div class="bg-particle"></div>
+<div class="bg-particle"></div>
+
+<div class="splash-container">
+    <div class="brand-container horizontal">
+        <img src="public/assets/waifuboards.ico" alt="Waifuboard Logo" class="brand-icon">
+        <h1 class="brand-name">Waifuboard</h1>
+    </div>
+
+    <div class="spinner-wrapper">
+        <div class="spinner"></div>
+        <span class="loading-text">Loading</span>
+    </div>
+</div>
+
+</body>
+</html>
--- a/desktop/main.js
+++ b/desktop/main.js
@@ -1,12 +1,84 @@
 const { app, BrowserWindow, ipcMain } = require('electron');
 const { fork } = require('child_process');
 const path = require('path');
+const log = require('electron-log');
+
+const sessionId = new Date().toISOString().replace(/[:.]/g, '-');
+log.transports.file.resolvePath = () => path.join(app.getPath('userData'), 'logs', `${sessionId}.log`);
+
+log.transports.file.level = 'info';
+log.format = '[{y}-{m}-{d} {h}:{i}:{s}.{ms}] [{level}] {text}';

 let win;
 let backend;
+const net = require('net');
+
+function waitForServer(port, host = '127.0.0.1', timeout = 10000) {
+    return new Promise((resolve, reject) => {
+        const start = Date.now();
+
+        const check = () => {
+            const socket = new net.Socket();
+
+            socket
+                .once('connect', () => {
+                    socket.destroy();
+                    resolve();
+                })
+                .once('error', () => {
+                    socket.destroy();
+                    if (Date.now() - start > timeout) {
+                        reject(new Error('Backend timeout'));
+                    } else {
+                        setTimeout(check, 200);
+                    }
+                })
+                .connect(port, host);
+        };
+
+        check();
+    });
+}

 function startBackend() {
-    backend = fork(path.join(__dirname, 'server.js'));
+    backend = fork(path.join(__dirname, 'server.js'), [], {
+        stdio: ['pipe', 'pipe', 'pipe', 'ipc'],
+        env: {
+            ...process.env,
+            IS_PACKAGED: app.isPackaged ? 'true' : 'false'
+        }
+    });
+
+    log.info('Starting backend process...');
+
+    backend.stdout.on('data', (data) => {
+        log.info(`[Backend]: ${data.toString().trim()}`);
+    });
+
+    backend.stderr.on('data', (data) => {
+        log.error(`[Backend ERROR]: ${data.toString().trim()}`);
+    });
+
+    backend.on('exit', (code) => {
+        log.warn(`Backend process exited with code: ${code}`);
+    });
+}
+
+let splash;
+
+function createSplash() {
+    splash = new BrowserWindow({
+        width: 400,
+        height: 300,
+        frame: false,
+        transparent: false,
+        alwaysOnTop: true,
+        resizable: false,
+        hasShadow: false,
+        backgroundColor: '#00000000'
+    });
+
+    splash.loadFile('loading.html');
 }

 function createWindow() {
@@ -23,19 +95,50 @@ function createWindow() {
    });

    win.setMenu(null);
+    win.maximize();
+
    win.loadURL('http://localhost:54322');
+
+    win.on('closed', () => {
+        win = null;
+    });
 }

 ipcMain.on("win:minimize", () => win.minimize());
-ipcMain.on("win:maximize", () => win.maximize());
+ipcMain.on("win:maximize", () => {
+    if (win.isMaximized()) {
+        win.unmaximize();
+    } else {
+        win.maximize();
+    }
+});
 ipcMain.on("win:close", () => win.close());

-app.whenReady().then(() => {
+process.on('uncaughtException', (err) => {
+    log.error('Critical unhandled error in Main:', err);
+});
+
+app.whenReady().then(async () => {
    startBackend();
-    createWindow();
+    createSplash();
+    try {
+        await waitForServer(54322);
+        createWindow();
+        splash.close();
+    } catch (e) {
+        splash.close();
+        log.error(e);
+        app.quit();
+    }
 });

 app.on('window-all-closed', () => {
-    if (backend) backend.kill();
-    app.quit();
+    log.info('Closing all windows...');
+    if (backend) {
+        backend.kill();
+        log.info('Backend process terminated.');
+    }
+    if (process.platform !== 'darwin') {
+        app.quit();
+    }
 });
--- a/desktop/package-lock.json
+++ b/desktop/package-lock.json
@@ -10,14 +10,16 @@
      "license": "ISC",
      "dependencies": {
        "@fastify/static": "^8.3.0",
-        "@ryuziii/discord-rpc": "^1.0.1-rc.1",
-        "bcrypt": "^6.0.0",
+        "@xhayper/discord-rpc": "^1.3.0",
+        "bcryptjs": "^3.0.3",
        "bindings": "^1.5.0",
        "cheerio": "^1.1.2",
        "dotenv": "^17.2.3",
+        "electron-log": "^5.4.3",
        "fastify": "^5.6.2",
        "jsonwebtoken": "^9.0.3",
        "node-addon-api": "^8.5.0",
+        "node-cron": "^4.2.1",
        "playwright-chromium": "^1.57.0",
        "sqlite3": "^5.1.7"
      },
@@ -97,6 +99,65 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@discordjs/collection": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@discordjs/collection/-/collection-2.1.1.tgz",
+      "integrity": "sha512-LiSusze9Tc7qF03sLCujF5iZp7K+vRNEDBZ86FT9aQAv3vxMLihUvKvpsCWiQ2DJq1tVckopKm1rxomgNUc9hg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/discordjs/discord.js?sponsor"
+      }
+    },
+    "node_modules/@discordjs/rest": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@discordjs/rest/-/rest-2.6.0.tgz",
+      "integrity": "sha512-RDYrhmpB7mTvmCKcpj+pc5k7POKszS4E2O9TYc+U+Y4iaCP+r910QdO43qmpOja8LRr1RJ0b3U+CqVsnPqzf4w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@discordjs/collection": "^2.1.1",
+        "@discordjs/util": "^1.1.1",
+        "@sapphire/async-queue": "^1.5.3",
+        "@sapphire/snowflake": "^3.5.3",
+        "@vladfrangu/async_event_emitter": "^2.4.6",
+        "discord-api-types": "^0.38.16",
+        "magic-bytes.js": "^1.10.0",
+        "tslib": "^2.6.3",
+        "undici": "6.21.3"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/discordjs/discord.js?sponsor"
+      }
+    },
+    "node_modules/@discordjs/rest/node_modules/undici": {
+      "version": "6.21.3",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.21.3.tgz",
+      "integrity": "sha512-gBLkYIlEnSp8pFbT64yFgGE6UIB9tAkhukC23PmMDCe5Nd+cRqKxSjw5y54MK2AZMgZfJWMaNE4nYUHgi1XEOw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.17"
+      }
+    },
+    "node_modules/@discordjs/util": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@discordjs/util/-/util-1.2.0.tgz",
+      "integrity": "sha512-3LKP7F2+atl9vJFhaBjn4nOaSWahZ/yWjOvA4e5pnXkt2qyXRCHLxoBQy81GFtLGCq7K9lPm9R517M1U+/90Qg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "discord-api-types": "^0.38.33"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/discordjs/discord.js?sponsor"
+      }
+    },
    "node_modules/@electron/asar": {
      "version": "3.2.18",
      "resolved": "https://registry.npmjs.org/@electron/asar/-/asar-3.2.18.tgz",
@@ -1363,14 +1424,24 @@
        "node": ">=14"
      }
    },
-    "node_modules/@ryuziii/discord-rpc": {
-      "version": "1.0.1-rc.1",
-      "resolved": "https://registry.npmjs.org/@ryuziii/discord-rpc/-/discord-rpc-1.0.1-rc.1.tgz",
-      "integrity": "sha512-q9YgU8Rj9To1LWzo4u8cXOHUorEkB5KZ5cdW80KoYtAUx+nQy7wYCEFiNh8kcmqFqQ8m3Fsx1IXx3UpVymkaSw==",
-      "license": "ISC",
-      "dependencies": {
-        "@types/ws": "^8.18.1",
-        "ws": "^8.18.3"
+    "node_modules/@sapphire/async-queue": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@sapphire/async-queue/-/async-queue-1.5.5.tgz",
+      "integrity": "sha512-cvGzxbba6sav2zZkH8GPf2oGk9yYoD5qrNWdu9fRehifgnFZJMV+nuy2nON2roRO4yQQ+v7MK/Pktl/HgfsUXg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=v14.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/@sapphire/snowflake": {
+      "version": "3.5.5",
+      "resolved": "https://registry.npmjs.org/@sapphire/snowflake/-/snowflake-3.5.5.tgz",
+      "integrity": "sha512-xzvBr1Q1c4lCe7i6sRnrofxeO1QTP/LKQ6A6qy0iB4x5yfiSfARMEQEghojzTNALDTcv8En04qYNIco9/K9eZQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=v14.0.0",
+        "npm": ">=7.0.0"
      }
    },
    "node_modules/@sindresorhus/is": {
@@ -1519,6 +1590,7 @@
      "version": "24.10.1",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz",
      "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "undici-types": "~7.16.0"
@@ -1554,15 +1626,6 @@
      "license": "MIT",
      "optional": true
    },
-    "node_modules/@types/ws": {
-      "version": "8.18.1",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
-      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
    "node_modules/@types/yauzl": {
      "version": "2.10.3",
      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
@@ -1574,6 +1637,31 @@
        "@types/node": "*"
      }
    },
+    "node_modules/@vladfrangu/async_event_emitter": {
+      "version": "2.4.7",
+      "resolved": "https://registry.npmjs.org/@vladfrangu/async_event_emitter/-/async_event_emitter-2.4.7.tgz",
+      "integrity": "sha512-Xfe6rpCTxSxfbswi/W/Pz7zp1WWSNn4A0eW4mLkQUewCrXXtMj31lCg+iQyTkh/CkusZSq9eDflu7tjEDXUY6g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=v14.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/@xhayper/discord-rpc": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@xhayper/discord-rpc/-/discord-rpc-1.3.0.tgz",
+      "integrity": "sha512-0NmUTiODl7u3UEjmO6y0Syp3dmgVLAt2EHrH4QKTQcXRwtF8Wl7Eipdn/GSSZ8HkDwxQFvcDGJMxT9VWB0pH8g==",
+      "license": "ISC",
+      "dependencies": {
+        "@discordjs/rest": "^2.5.1",
+        "@vladfrangu/async_event_emitter": "^2.4.6",
+        "discord-api-types": "^0.38.16",
+        "ws": "^8.18.3"
+      },
+      "engines": {
+        "node": ">=18.20.7"
+      }
+    },
    "node_modules/@xmldom/xmldom": {
      "version": "0.8.11",
      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.11.tgz",
@@ -1972,18 +2060,13 @@
      ],
      "license": "MIT"
    },
-    "node_modules/bcrypt": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/bcrypt/-/bcrypt-6.0.0.tgz",
-      "integrity": "sha512-cU8v/EGSrnH+HnxV2z0J7/blxH8gq7Xh2JFT6Aroax7UohdmiJJlxApMxtKfuI7z68NvvVcmR78k2LbT6efhRg==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "dependencies": {
-        "node-addon-api": "^8.3.0",
-        "node-gyp-build": "^4.8.4"
-      },
-      "engines": {
-        "node": ">= 18"
+    "node_modules/bcryptjs": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-3.0.3.tgz",
+      "integrity": "sha512-GlF5wPWnSa/X5LKM1o0wz0suXIINz1iHRLvTS+sLyi7XPbe5ycmYI3DlZqVGZZtDgl4DmasFg7gOB3JYbphV5g==",
+      "license": "BSD-3-Clause",
+      "bin": {
+        "bcrypt": "bin/bcrypt"
      }
    },
    "node_modules/bindings": {
@@ -3055,6 +3138,15 @@
        "node": "*"
      }
    },
+    "node_modules/discord-api-types": {
+      "version": "0.38.37",
+      "resolved": "https://registry.npmjs.org/discord-api-types/-/discord-api-types-0.38.37.tgz",
+      "integrity": "sha512-Cv47jzY1jkGkh5sv0bfHYqGgKOWO1peOrGMkDFM4UmaGMOTgOW8QSexhvixa9sVOiz8MnVOBryWYyw/CEVhj7w==",
+      "license": "MIT",
+      "workspaces": [
+        "scripts/actions/documentation"
+      ]
+    },
    "node_modules/dmg-builder": {
      "version": "26.0.12",
      "resolved": "https://registry.npmjs.org/dmg-builder/-/dmg-builder-26.0.12.tgz",
@@ -3402,6 +3494,15 @@
        "node": ">= 10.0.0"
      }
    },
+    "node_modules/electron-log": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/electron-log/-/electron-log-5.4.3.tgz",
+      "integrity": "sha512-sOUsM3LjZdugatazSQ/XTyNcw8dfvH1SYhXWiJyfYodAAKOZdHs0txPiLDXFzOZbhXgAgshQkshH2ccq0feyLQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
    "node_modules/electron-publish": {
      "version": "26.0.11",
      "resolved": "https://registry.npmjs.org/electron-publish/-/electron-publish-26.0.11.tgz",
@@ -4978,6 +5079,12 @@
        "node": "20 || >=22"
      }
    },
+    "node_modules/magic-bytes.js": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/magic-bytes.js/-/magic-bytes.js-1.12.1.tgz",
+      "integrity": "sha512-ThQLOhN86ZkJ7qemtVRGYM+gRgR8GEXNli9H/PMvpnZsE44Xfh3wx9kGJaldg314v85m+bFW6WBMaVHJc/c3zA==",
+      "license": "MIT"
+    },
    "node_modules/make-error": {
      "version": "1.3.6",
      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
@@ -5340,6 +5447,15 @@
        "semver": "^7.3.5"
      }
    },
+    "node_modules/node-cron": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/node-cron/-/node-cron-4.2.1.tgz",
+      "integrity": "sha512-lgimEHPE/QDgFlywTd8yTR61ptugX3Qer29efeyWw2rv259HtGBNn1vZVmp8lB9uo9wC0t/AT4iGqXxia+CJFg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
    "node_modules/node-gyp": {
      "version": "12.1.0",
      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-12.1.0.tgz",
@@ -5365,17 +5481,6 @@
        "node": "^20.17.0 || >=22.9.0"
      }
    },
-    "node_modules/node-gyp-build": {
-      "version": "4.8.4",
-      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.4.tgz",
-      "integrity": "sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==",
-      "license": "MIT",
-      "bin": {
-        "node-gyp-build": "bin.js",
-        "node-gyp-build-optional": "optional.js",
-        "node-gyp-build-test": "build-test.js"
-      }
-    },
    "node_modules/node-gyp/node_modules/chownr": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
@@ -7450,6 +7555,12 @@
        }
      }
    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
    "node_modules/tunnel-agent": {
      "version": "0.6.0",
      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
@@ -7503,6 +7614,7 @@
      "version": "7.16.0",
      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "dev": true,
      "license": "MIT"
    },
    "node_modules/unique-filename": {
--- a/desktop/package.json
+++ b/desktop/package.json
@@ -4,10 +4,8 @@
  "description": "",
  "main": "main.js",
  "scripts": {
-    "build": "tsc",
-    "start": "tsc && node server.js",
-    "electron": "tsc && electron .",
-    "dist": "npm run build && electron-builder"
+    "start": "tsc && electron .",
+    "dist": "tsc && electron-builder"
  },
  "keywords": [],
  "author": "",
@@ -15,14 +13,16 @@
  "type": "commonjs",
  "dependencies": {
    "@fastify/static": "^8.3.0",
-    "@ryuziii/discord-rpc": "^1.0.1-rc.1",
-    "bcrypt": "^6.0.0",
+    "@xhayper/discord-rpc": "^1.3.0",
+    "bcryptjs": "^3.0.3",
    "bindings": "^1.5.0",
    "cheerio": "^1.1.2",
    "dotenv": "^17.2.3",
+    "electron-log": "^5.4.3",
    "fastify": "^5.6.2",
    "jsonwebtoken": "^9.0.3",
    "node-addon-api": "^8.5.0",
+    "node-cron": "^4.2.1",
    "playwright-chromium": "^1.57.0",
    "sqlite3": "^5.1.7"
  },
@@ -47,10 +47,15 @@
      "package.json",
      "views/**/*",
      "src/scripts/**/*",
-      "public/assets/*"
+      "public/assets/*",
+      "loading.html"
    ],
    "extraResources": [
-      "./.env"
+      {
+        "from": "C:\\Users\\synta\\AppData\\Local\\ms-playwright\\chromium_headless_shell-1200",
+        "to": "playwright/chromium"
+      },
+      ".env"
    ],
    "win": {
      "target": "portable",
--- a/desktop/server.js
+++ b/desktop/server.js
@@ -4,18 +4,21 @@ const fastify = require("fastify")({

 const path = require("path");
 const jwt = require("jsonwebtoken");
+const cron = require("node-cron");
 const { initHeadless } = require("./electron/shared/headless");
 const { initDatabase } = require("./electron/shared/database");
 const { loadExtensions } = require("./electron/shared/extensions");
 const { init } = require("./electron/api/rpc/rpc.controller");
+const {refreshTrendingAnime, refreshTopAiringAnime} = require("./electron/api/anime/anime.service");
+const {refreshPopularBooks, refreshTrendingBooks} = require("./electron/api/books/books.service");
+
 const dotenv = require("dotenv");
-const envPath = process.resourcesPath
-  ? path.join(process.resourcesPath, ".env")
-  : path.join(__dirname, ".env");
-
-// Attempt to load it and log the result to be sure
-dotenv.config({ path: envPath });
+const isPackaged = process.env.IS_PACKAGED === "true";
+const envPath = isPackaged
+    ? path.join(process.resourcesPath, ".env")
+    : path.join(__dirname, ".env");

+dotenv.config({ path: envPath, override: false });
 const viewsRoutes = require("./electron/views/views.routes");
 const animeRoutes = require("./electron/api/anime/anime.routes");
 const booksRoutes = require("./electron/api/books/books.routes");
@@ -27,39 +30,6 @@ const userRoutes = require("./electron/api/user/user.routes");
 const listRoutes = require("./electron/api/list/list.routes");
 const anilistRoute = require("./electron/api/anilist/anilist");

-const fs = require("fs");
-
-try {
-  console.log("--- DEBUGGING PATHS ---");
-
-  // 1. Check where we are currently running
-  console.log("Current Directory:", __dirname);
-
-  // 2. Check if 'electron' exists
-  const electronPath = path.join(__dirname, "electron");
-  if (fs.existsSync(electronPath)) {
-    console.log("✅ electron folder found.");
-  } else {
-    console.log("❌ electron folder missing!");
-  }
-
-  // 3. Check 'electron/api/rpc' specifically
-  const rpcPath = path.join(__dirname, "electron", "api", "rpc");
-  if (fs.existsSync(rpcPath)) {
-    console.log("✅ electron/api/rpc folder found. Contents:");
-    // LIST EVERYTHING INSIDE THE RPC FOLDER
-    console.log(fs.readdirSync(rpcPath));
-  } else {
-    console.log(`❌ electron/api/rpc folder NOT found at: ${rpcPath}`);
-    // Check parent folder to see what IS there
-    const parent = path.join(__dirname, "electron", "api");
-    console.log("Contents of electron/api:", fs.readdirSync(parent));
-  }
-  console.log("-----------------------");
-} catch (e) {
-  console.log("Debug Error:", e);
-}
-
 fastify.addHook("preHandler", async (request) => {
  const auth = request.headers.authorization;
  if (!auth) return;
@@ -101,6 +71,8 @@ fastify.register(userRoutes, { prefix: "/api" });
 fastify.register(anilistRoute, { prefix: "/api" });
 fastify.register(listRoutes, { prefix: "/api" });

+const sleep = ms => new Promise(r => setTimeout(r, ms));
+
 const start = async () => {
  try {
    initDatabase("anilist");
@@ -109,12 +81,31 @@ const start = async () => {
    initDatabase("userdata");
    init();

+    const refreshAll = async () => {
+      await refreshTrendingAnime();
+      await sleep(300);
+      await refreshTopAiringAnime();
+      await sleep(300);
+      await refreshTrendingBooks();
+      await sleep(300);
+      await refreshPopularBooks();
+    };
+
+    cron.schedule("*/30 * * * *", async () => {
+      try {
+        await refreshAll();
+        console.log("cache refreshed");
+      } catch (e) {
+        console.error("refresh failed", e);
+      }
+    });
+
    await loadExtensions();
+    await initHeadless();
+    await refreshAll();

    await fastify.listen({ port: 54322, host: "0.0.0.0" });
    console.log(`Server running at http://localhost:54322`);
-
-    await initHeadless();
  } catch (err) {
    fastify.log.error(err);
    process.exit(1);
--- a/desktop/src/api/anime/anime.service.ts
+++ b/desktop/src/api/anime/anime.service.ts
@@ -3,7 +3,6 @@ import { queryAll, queryOne } from '../../shared/database';
 import {Anime, Episode, Extension, StreamData} from '../types';

 const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
-const TTL = 60 * 60 * 6;

 const ANILIST_URL = "https://graphql.anilist.co";

@@ -79,6 +78,54 @@ const MEDIA_FIELDS = `
  }
 `;

+export async function refreshTrendingAnime(): Promise<void> {
+    const query = `
+      query {
+        Page(page: 1, perPage: 10) {
+          media(type: ANIME, sort: TRENDING_DESC) { ${MEDIA_FIELDS} }
+        }
+      }
+    `;
+
+    const data = await fetchAniList(query, {});
+    const list = data?.Page?.media || [];
+    const now = Math.floor(Date.now() / 1000);
+
+    await queryOne("DELETE FROM trending");
+
+    let rank = 1;
+    for (const anime of list) {
+        await queryOne(
+            "INSERT INTO trending (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
+            [rank++, anime.id, JSON.stringify(anime), now]
+        );
+    }
+}
+
+export async function refreshTopAiringAnime(): Promise<void> {
+    const query = `
+      query {
+        Page(page: 1, perPage: 10) {
+          media(type: ANIME, status: RELEASING, sort: SCORE_DESC) { ${MEDIA_FIELDS} }
+        }
+      }
+    `;
+
+    const data = await fetchAniList(query, {});
+    const list = data?.Page?.media || [];
+    const now = Math.floor(Date.now() / 1000);
+
+    await queryOne("DELETE FROM top_airing");
+
+    let rank = 1;
+    for (const anime of list) {
+        await queryOne(
+            "INSERT INTO top_airing (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
+            [rank++, anime.id, JSON.stringify(anime), now]
+        );
+    }
+}
+
 async function fetchAniList(query: string, variables: any) {
    const res = await fetch(ANILIST_URL, {
        method: "POST",
@@ -119,76 +166,16 @@ export async function getAnimeById(id: string | number): Promise<Anime | { error

 export async function getTrendingAnime(): Promise<Anime[]> {
    const rows = await queryAll(
-        "SELECT full_data, updated_at FROM trending ORDER BY rank ASC LIMIT 10"
+        "SELECT full_data FROM trending ORDER BY rank ASC LIMIT 10"
    );
-
-    if (rows.length) {
-        const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
-        if (!expired) {
-            return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
-        }
-    }
-
-    const query = `
-    query {
-      Page(page: 1, perPage: 10) {
-        media(type: ANIME, sort: TRENDING_DESC) { ${MEDIA_FIELDS} }
-      }
-    }
-  `;
-
-    const data = await fetchAniList(query, {});
-    const list = data?.Page?.media || [];
-    const now = Math.floor(Date.now() / 1000);
-
-    await queryOne("DELETE FROM trending");
-    let rank = 1;
-
-    for (const anime of list) {
-        await queryOne(
-            "INSERT INTO trending (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
-            [rank++, anime.id, JSON.stringify(anime), now]
-        );
-    }
-
-    return list;
+    return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
 }

 export async function getTopAiringAnime(): Promise<Anime[]> {
    const rows = await queryAll(
-        "SELECT full_data, updated_at FROM top_airing ORDER BY rank ASC LIMIT 10"
+        "SELECT full_data FROM top_airing ORDER BY rank ASC LIMIT 10"
    );
-
-    if (rows.length) {
-        const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
-        if (!expired) {
-            return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
-        }
-    }
-
-    const query = `
-    query {
-      Page(page: 1, perPage: 10) {
-        media(type: ANIME, status: RELEASING, sort: SCORE_DESC) { ${MEDIA_FIELDS} }
-      }
-    }
-  `;
-
-    const data = await fetchAniList(query, {});
-    const list = data?.Page?.media || [];
-    const now = Math.floor(Date.now() / 1000);
-
-    await queryOne("DELETE FROM top_airing");
-    let rank = 1;
-
-    for (const anime of list) {
-        await queryOne(
-            "INSERT INTO top_airing (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
-            [rank++, anime.id, JSON.stringify(anime), now]
-        );
-    }
-
-    return list;
+    return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
 }

 export async function searchAnimeLocal(query: string): Promise<Anime[]> {
--- a/desktop/src/api/books/books.controller.ts
+++ b/desktop/src/api/books/books.controller.ts
@@ -87,15 +87,16 @@ export async function getChapters(req: any, reply: FastifyReply) {
    try {
        const { id } = req.params;
        const source = req.query.source || 'anilist';
+        const provider = req.query.provider;

        const isExternal = source !== 'anilist';
-        return await booksService.getChaptersForBook(id, isExternal);
-    } catch {
+        return await booksService.getChaptersForBook(id, isExternal, provider);
+    } catch (err) {
+        console.error(err);
        return { chapters: [] };
    }
 }

-
 export async function getChapterContent(req: any, reply: FastifyReply) {
    try {
        const { bookId, chapter, provider } = req.params;
--- a/desktop/src/api/books/books.service.ts
+++ b/desktop/src/api/books/books.service.ts
@@ -4,7 +4,6 @@ import { getAllExtensions, getBookExtensionsMap } from '../../shared/extensions'
 import { Book, Extension, ChapterWithProvider, ChapterContent } from '../types';

 const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
-const TTL = 60 * 60 * 6;
 const ANILIST_URL = "https://graphql.anilist.co";

 async function fetchAniList(query: string, variables: any) {
@@ -134,25 +133,14 @@ export async function getBookById(id: string | number): Promise<Book | { error:
    return { error: "Book not found" };
 }

-export async function getTrendingBooks(): Promise<Book[]> {
-    const rows = await queryAll(
-        "SELECT full_data, updated_at FROM trending_books ORDER BY rank ASC LIMIT 10"
-    );
-
-    if (rows.length) {
-        const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
-        if (!expired) {
-            return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
-        }
-    }
-
+export async function refreshTrendingBooks(): Promise<void> {
    const query = `
-    query {
-      Page(page: 1, perPage: 10) {
-        media(type: MANGA, sort: TRENDING_DESC) { ${MEDIA_FIELDS} }
+      query {
+        Page(page: 1, perPage: 10) {
+          media(type: MANGA, sort: TRENDING_DESC) { ${MEDIA_FIELDS} }
+        }
      }
-    }
-  `;
+    `;

    const data = await fetchAniList(query, {});
    const list = data?.Page?.media || [];
@@ -167,30 +155,16 @@ export async function getTrendingBooks(): Promise<Book[]> {
            [rank++, book.id, JSON.stringify(book), now]
        );
    }
-
-    return list;
 }

-
-export async function getPopularBooks(): Promise<Book[]> {
-    const rows = await queryAll(
-        "SELECT full_data, updated_at FROM popular_books ORDER BY rank ASC LIMIT 10"
-    );
-
-    if (rows.length) {
-        const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
-        if (!expired) {
-            return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
-        }
-    }
-
+export async function refreshPopularBooks(): Promise<void> {
    const query = `
-    query {
-      Page(page: 1, perPage: 10) {
-        media(type: MANGA, sort: POPULARITY_DESC) { ${MEDIA_FIELDS} }
+      query {
+        Page(page: 1, perPage: 10) {
+          media(type: MANGA, sort: POPULARITY_DESC) { ${MEDIA_FIELDS} }
+        }
      }
-    }
-  `;
+    `;

    const data = await fetchAniList(query, {});
    const list = data?.Page?.media || [];
@@ -205,10 +179,21 @@ export async function getPopularBooks(): Promise<Book[]> {
            [rank++, book.id, JSON.stringify(book), now]
        );
    }
-
-    return list;
 }

+export async function getTrendingBooks(): Promise<Book[]> {
+    const rows = await queryAll(
+        "SELECT full_data FROM trending_books ORDER BY rank ASC LIMIT 10"
+    );
+    return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
+}
+
+export async function getPopularBooks(): Promise<Book[]> {
+    const rows = await queryAll(
+        "SELECT full_data FROM popular_books ORDER BY rank ASC LIMIT 10"
+    );
+    return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
+}

 export async function searchBooksLocal(query: string): Promise<Book[]> {
    if (!query || query.length < 2) {
--- a/desktop/src/api/extensions/extensions.controller.ts
+++ b/desktop/src/api/extensions/extensions.controller.ts
@@ -1,6 +1,59 @@
 import { FastifyReply, FastifyRequest } from 'fastify';
 import { getExtension, getExtensionsList, getGalleryExtensionsMap, getBookExtensionsMap, getAnimeExtensionsMap, saveExtensionFile, deleteExtensionFile } from '../../shared/extensions';
 import { ExtensionNameRequest } from '../types';
+import path from 'path';
+import fs from 'fs/promises';
+
+const TYPE_MAP: Record<string, string> = {
+    'anime-board': 'anime',
+    'image-board': 'image',
+    'book-board': 'book',
+};
+
+function extractProp(source: string, prop: string): string | null {
+    const m = source.match(new RegExp(`this\\.${prop}\\s*=\\s*["']([^"']+)["']`));
+    return m ? m[1] : null;
+}
+
+function isNewer(remote: string, local?: string | null) {
+    if (!local) return true;
+    return remote !== local;
+}
+
+export async function updateExtensions(req: any, reply: FastifyReply) {
+    const updated: string[] = [];
+
+    for (const name of getExtensionsList()) {
+        const ext = getExtension(name);
+        if (!ext) continue;
+
+        const type = ext.type;
+        if (!TYPE_MAP[type]) continue;
+
+        const fileName = ext.__fileName;
+        const remoteUrl = `https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/${TYPE_MAP[type]}/${fileName}`;
+
+        let remoteSrc: string;
+        try {
+            const res = await fetch(remoteUrl);
+            if (!res.ok) continue;
+            remoteSrc = await res.text();
+        } catch {
+            continue;
+        }
+
+        const remoteVersion = extractProp(remoteSrc, 'version');
+        const localVersion = ext.version ?? null;
+        if (!remoteVersion) continue;
+
+        if (isNewer(remoteVersion, localVersion)) {
+            await saveExtensionFile(fileName, remoteUrl);
+            updated.push(name);
+        }
+    }
+
+    return { updated };
+}

 export async function getExtensions(req: FastifyRequest, reply: FastifyReply) {
    return { extensions: getExtensionsList() };
@@ -37,24 +90,33 @@ export async function getExtensionSettings(req: ExtensionNameRequest, reply: Fas
 }

 export async function installExtension(req: any, reply: FastifyReply) {
-    const { fileName } = req.body;
+    const { url } = req.body;

-    if (!fileName || !fileName.endsWith('.js')) {
-        return reply.code(400).send({ error: "Invalid extension fileName provided" });
+    if (!url || typeof url !== 'string' || !url.endsWith('.js')) {
+        return reply.code(400).send({ error: "Invalid extension URL provided" });
    }

    try {
+        const fileName = url.split('/').pop();

-        const downloadUrl = `https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/${fileName}`
+        if (!fileName) {
+            return reply.code(400).send({ error: "Could not determine file name from URL" });
+        }

-        await saveExtensionFile(fileName, downloadUrl);
+        await saveExtensionFile(fileName, url);

        req.server.log.info(`Extension installed: ${fileName}`);
-        return reply.code(200).send({ success: true, message: `Extension ${fileName} installed successfully.` });
+        return reply.code(200).send({
+            success: true,
+            message: `Extension ${fileName} installed successfully.`,
+        });

    } catch (error) {
-        req.server.log.error(`Failed to install extension ${fileName}:`, error);
-        return reply.code(500).send({ success: false, error: `Failed to install extension ${fileName}.` });
+        req.server.log.error(`Failed to install extension from ${url}:`, error);
+        return reply.code(500).send({
+            success: false,
+            error: "Failed to install extension.",
+        });
    }
 }

--- a/desktop/src/api/extensions/extensions.routes.ts
+++ b/desktop/src/api/extensions/extensions.routes.ts
@@ -4,6 +4,7 @@ import * as controller from './extensions.controller';
 async function extensionsRoutes(fastify: FastifyInstance) {
    fastify.get('/extensions', controller.getExtensions);
    fastify.get('/extensions/anime', controller.getAnimeExtensions);
+    fastify.post('/extensions/update', controller.updateExtensions);
    fastify.get('/extensions/book', controller.getBookExtensions);
    fastify.get('/extensions/gallery', controller.getGalleryExtensions);
    fastify.get('/extensions/:name/settings', controller.getExtensionSettings);
--- a/desktop/src/api/rpc/rp.service.ts
+++ b/desktop/src/api/rpc/rp.service.ts
@@ -1,16 +1,18 @@
-// @ts-ignore
-import { DiscordRPCClient } from "@ryuziii/discord-rpc";
+import { Client } from "@xhayper/discord-rpc";

-let rpcClient: DiscordRPCClient | null = null;
+let rpcClient: Client | null = null;
 let reconnectTimer: NodeJS.Timeout | null = null;
-let connected: boolean = false;
+let connected = false;

 type RPCMode = "watching" | "reading" | string;

 interface RPCData {
    details?: string;
    state?: string;
-    mode?: RPCMode;
+    mode?: string;
+    startTimestamp?: number;
+    endTimestamp?: number;
+    paused?: boolean;
    version?: string;
 }

@@ -30,91 +32,68 @@ function attemptReconnect(clientId: string) {
 }

 export function initRPC(clientId: string) {
-
    if (rpcClient) {
-        try { rpcClient.destroy(); } catch (e) {}
+        try { rpcClient.destroy(); } catch {}
        rpcClient = null;
    }
+
    if (reconnectTimer) {
        clearTimeout(reconnectTimer);
        reconnectTimer = null;
    }

-    console.log(`Discord RPC: Starting with id ...${clientId.slice(-4)}`);
-
-    try {
-
-        rpcClient = new DiscordRPCClient({
-            clientId: clientId,
-            transport: 'ipc'
-        });
-    } catch (err) {
-        console.error('Discord RPC:', err);
-        return;
-    }
+    rpcClient = new Client({ clientId });

    rpcClient.on("ready", () => {
        connected = true;
-        const user = rpcClient?.user ? rpcClient.user.username : 'User';
-        console.log(`Discord RPC: Authenticated for: ${user}`);
+        console.log("Discord RPC conectado");

        setTimeout(() => {
-            setActivity({ details: "Browsing", state: "In App", mode: "idle" });
+            setActivity({ details: "Browsing", state: "In App" });
        }, 1000);
    });

-    rpcClient.on('disconnected', () => {
-        console.log('Discord RPC: Desconexión detectada.');
+    rpcClient.on("disconnected", () => {
+        connected = false;
        attemptReconnect(clientId);
    });

-    rpcClient.on('error', (err: { message: any; }) => {
-        console.error('[Discord RPC] Error:', err.message);
-
-        if (connected) {
-            attemptReconnect(clientId);
-        }
+    rpcClient.on("error", () => {
+        if (connected) attemptReconnect(clientId);
    });

-    try {
-        rpcClient.connect().catch((err: { message: any; }) => {
-            console.error('Discord RPC: Error al conectar', err.message);
-
-            attemptReconnect(clientId);
-        });
-    } catch (err) {
-        console.error('Discord RPC: Error al iniciar la conexión', err);
+    rpcClient.login().catch(() => {
        attemptReconnect(clientId);
-    }
+    });
 }

 export function setActivity(data: RPCData = {}) {
    if (!rpcClient || !connected) return;

-    let type;
-    let state = data.state;
-    let details = data.details;
+    let type = 0;
+    if (data.mode === "watching") type = 3;
+    if (data.mode === "reading") type = 0;

-    if (data.mode === "watching") {
-        type = 3
-    } else if (data.mode === "reading") {
-        type = 0
+    const activity: any = {
+        details: data.details,
+        state: data.state,
+        type,
+        instance: false
+    };
+
+    if (data.paused) {
+        activity.largeImageText = "⏸  ";
+        delete activity.startTimestamp;
+        delete activity.endTimestamp;
    } else {
-        type = 0
+        activity.largeImageKey = "bigpicture";
+        activity.largeImageText = data.version ?? "v2.0.0";
+
+        if (data.startTimestamp && data.endTimestamp) {
+            activity.startTimestamp = data.startTimestamp;
+            activity.endTimestamp = data.endTimestamp;
+        }
    }

-
-    try {
-        rpcClient.setActivity({
-            details: details,
-            state: state,
-            type: type,
-            startTimestamp: new Date(),
-            largeImageKey: "bigpicture",
-            largeImageText: "v2.0.0",
-            instance: false
-        });
-    } catch (error) {
-        console.error("Discord RPC: Failed to set activity", error);
-    }
+    rpcClient.user?.setActivity(activity);
 }
--- a/desktop/src/api/rpc/rpc.controller.ts
+++ b/desktop/src/api/rpc/rpc.controller.ts
@@ -11,16 +11,29 @@ export function init() {
 }

 export async function setRPC(request: FastifyRequest, reply: FastifyReply) {
-    const { details, state, mode } = request.body as {
+    const {
+        details,
+        state,
+        mode,
+        startTimestamp,
+        endTimestamp,
+        paused
+    } = request.body as {
        details?: string;
        state?: string;
        mode?: "watching" | "reading" | string;
+        startTimestamp?: number;
+        endTimestamp?: number;
+        paused?: boolean;
    };

    setActivity({
        details,
        state,
-        mode
+        mode,
+        startTimestamp,
+        endTimestamp,
+        paused
    });

    return reply.send({ ok: true });
--- a/desktop/src/api/user/user.controller.ts
+++ b/desktop/src/api/user/user.controller.ts
@@ -168,20 +168,39 @@ export async function deleteUser(req: FastifyRequest, reply: FastifyReply) {
        const { id } = req.params as { id: string };
        const userId = parseInt(id, 10);

+        const body = (req.body ?? {}) as { password?: string };
+        const password = body.password;
+
        if (!userId || isNaN(userId)) {
            return reply.code(400).send({ error: "Invalid user id" });
        }

-        const result = await userService.deleteUser(userId);
-
-        if (result && result.changes > 0) {
-            return { success: true, message: "User deleted successfully" };
-        } else {
+        const user = await userService.getUserById(userId);
+        if (!user) {
            return reply.code(404).send({ error: "User not found" });
        }

+        if (user.has_password) {
+            if (!password) {
+                return reply.code(401).send({ error: "Password required" });
+            }
+
+            const isValid = await userService.verifyPassword(userId, password);
+            if (!isValid) {
+                return reply.code(401).send({ error: "Incorrect password" });
+            }
+        }
+
+        const result = await userService.deleteUser(userId);
+
+        if (result.changes > 0) {
+            return reply.send({ success: true });
+        }
+
+        return reply.code(500).send({ error: "Failed to delete user" });
+
    } catch (err) {
-        console.error("Delete User Error:", (err as Error).message);
+        console.error("Delete User Error:", err);
        return reply.code(500).send({ error: "Failed to delete user" });
    }
 }
@@ -246,16 +265,17 @@ export async function changePassword(req: FastifyRequest, reply: FastifyReply) {
            return reply.code(404).send({ error: "User not found" });
        }

-        // Si el usuario tiene contraseña actual, debe proporcionar la contraseña actual
-        if (user.has_password && currentPassword) {
-            const isValid = await userService.verifyPassword(userId, currentPassword);
+        if (user.has_password) {
+            if (!currentPassword) {
+                return reply.code(401).send({ error: "Current password required" });
+            }

+            const isValid = await userService.verifyPassword(userId, currentPassword);
            if (!isValid) {
                return reply.code(401).send({ error: "Current password is incorrect" });
            }
        }

-        // Actualizar la contraseña (null para eliminarla, string para establecerla)
        await userService.updateUser(userId, { password: newPassword });

        return reply.send({
--- a/desktop/src/api/user/user.service.ts
+++ b/desktop/src/api/user/user.service.ts
@@ -1,5 +1,5 @@
 import {queryAll, queryOne, run} from '../../shared/database';
-import bcrypt from 'bcrypt';
+import bcrypt from 'bcryptjs';

 const USER_DB_NAME = 'userdata';
 const SALT_ROUNDS = 10;
--- a/desktop/src/scripts/anime/player.js
+++ b/desktop/src/scripts/anime/player.js
@@ -7,6 +7,11 @@ let currentExtension = '';
 let plyrInstance;
 let hlsInstance;
 let totalEpisodes = 0;
+let animeTitle = "";
+let aniSkipData = null;
+
+let isAnilist = false;
+let malId = null;

 const params = new URLSearchParams(window.location.search);
 const firstKey = params.keys().next().value;
@@ -19,6 +24,17 @@ const href = extName

 document.getElementById('back-link').href = href;
 document.getElementById('episode-label').innerText = `Episode ${currentEpisode}`;
+async function loadAniSkip(malId, episode, duration) {
+    try {
+        const res = await fetch(`https://api.aniskip.com/v2/skip-times/${malId}/${episode}?types[]=op&types[]=ed&episodeLength=${duration}`);
+        if (!res.ok) return null;
+        const data = await res.json();
+        return data.results || [];
+    } catch (error) {
+        console.error('Error loading AniSkip data:', error);
+        return null;
+    }
+}

 async function loadMetadata() {
    try {
@@ -40,11 +56,8 @@ async function loadMetadata() {
        let format = '';
        let seasonYear = '';
        let season = '';
-        let episodesCount = 0;
-        let characters = [];

        if (isAnilistFormat) {
-
            title = data.title.romaji || data.title.english || data.title.native || 'Anime Title';
            description = data.description || 'No description available.';
            coverImage = data.coverImage?.large || data.coverImage?.medium || '';
@@ -62,20 +75,19 @@ async function loadMetadata() {
            seasonYear = data.year || '';
        }

+        if (isAnilistFormat && data.idMal) {
+            isAnilist = true;
+            malId = data.idMal;
+        } else {
+            isAnilist = false;
+            malId = null;
+        }
+
        document.getElementById('anime-title-details').innerText = title;
        document.getElementById('anime-title-details2').innerText = title;
+        animeTitle = title;
        document.title = `Watching ${title} - Ep ${currentEpisode}`;

-        fetch("/api/rpc", {
-            method: "POST",
-            headers: {"Content-Type": "application/json"},
-            body: JSON.stringify({
-                details: title,
-                state: `Episode ${currentEpisode}`,
-                mode: "watching"
-            })
-        });
-
        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = description;
        document.getElementById('detail-description').innerText = tempDiv.textContent || tempDiv.innerText || 'No description available.';
@@ -116,6 +128,102 @@ async function loadMetadata() {
    }
 }

+async function applyAniSkip(video) {
+    if (!isAnilist || !malId) {
+        console.log('AniSkip disabled: isAnilist=' + isAnilist + ', malId=' + malId);
+        return;
+    }
+
+    console.log('Loading AniSkip for MAL ID:', malId, 'Episode:', currentEpisode);
+
+    aniSkipData = await loadAniSkip(
+        malId,
+        currentEpisode,
+        Math.floor(video.duration)
+    );
+
+    console.log('AniSkip data received:', aniSkipData);
+
+    if (!aniSkipData || aniSkipData.length === 0) {
+        console.log('No AniSkip data available');
+        return;
+    }
+
+    let op, ed;
+    const markers = [];
+
+    aniSkipData.forEach(item => {
+        const { startTime, endTime } = item.interval;
+
+        if (item.skipType === 'op') {
+            op = { start: startTime, end: endTime };
+            markers.push({
+                start: startTime,
+                end: endTime,
+                label: 'Opening'
+            });
+
+            console.log('Opening found:', startTime, '-', endTime);
+        }
+
+        if (item.skipType === 'ed') {
+            ed = { start: startTime, end: endTime };
+            markers.push({
+                start: startTime,
+                end: endTime,
+                label: 'Ending'
+            });
+
+            console.log('Ending found:', startTime, '-', endTime);
+        }
+    });
+
+    // Crear markers visuales en el DOM
+    if (plyrInstance && markers.length > 0) {
+        console.log('Creating visual markers:', markers);
+
+        // Esperar a que el player esté completamente cargado
+        setTimeout(() => {
+            const progressContainer = document.querySelector('.plyr__progress');
+            if (!progressContainer) {
+                console.error('Progress container not found');
+                return;
+            }
+
+            // Eliminar markers anteriores si existen
+            const oldMarkers = progressContainer.querySelector('.plyr__markers');
+            if (oldMarkers) oldMarkers.remove();
+
+            // Crear contenedor de markers
+            const markersContainer = document.createElement('div');
+            markersContainer.className = 'plyr__markers';
+
+            markers.forEach(marker => {
+                const markerElement = document.createElement('div');
+                markerElement.className = 'plyr__marker';
+                markerElement.dataset.label = marker.label;
+
+                const startPercent = (marker.start / video.duration) * 100;
+                const widthPercent = ((marker.end - marker.start) / video.duration) * 100;
+
+                markerElement.style.left = `${startPercent}%`;
+                markerElement.style.width = `${widthPercent}%`;
+
+                markerElement.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    video.currentTime = marker.start;
+                });
+
+                markersContainer.appendChild(markerElement);
+            });
+
+
+            progressContainer.appendChild(markersContainer);
+            console.log('Visual markers created successfully');
+        }, 500);
+    }
+}
+
 async function loadExtensionEpisodes() {
    try {
        const extQuery = extName ? `?source=${extName}` : "?source=anilist";
@@ -347,24 +455,74 @@ function playVideo(url, subtitles = []) {
    plyrInstance = new Plyr(video, {
        captions: { active: true, update: true, language: 'en' },
        controls: ['play-large', 'play', 'progress', 'current-time', 'duration', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
-        settings: ['captions', 'quality', 'speed']
-    });
-
-    let alreadyTriggered = false;
-
-    video.addEventListener('timeupdate', () => {
-        if (!video.duration) return;
-
-        const percent = (video.currentTime / video.duration) * 100;
-
-        if (percent >= 80 && !alreadyTriggered) {
-            alreadyTriggered = true;
-            sendProgress();
+        settings: ['captions', 'quality', 'speed'],
+        markers: {
+            enabled: true,
+            points: []
        }
    });

+    video.addEventListener('loadedmetadata', () => {
+        applyAniSkip(video);
+    });

-    video.play().catch(() => console.log("Autoplay blocked"));
+    let rpcActive = false;
+    let lastSeek = 0;
+
+    video.addEventListener("play", () => {
+        if (!video.duration) return;
+
+        const elapsed = Math.floor(video.currentTime);
+        const start = Math.floor(Date.now() / 1000) - elapsed;
+        const end = start + Math.floor(video.duration);
+
+        sendRPC({
+            startTimestamp: start,
+            endTimestamp: end
+        });
+
+        rpcActive = true;
+    });
+
+    video.addEventListener("pause", () => {
+        if (!rpcActive) return;
+
+        sendRPC({
+            paused: true
+        });
+    });
+
+    video.addEventListener("seeking", () => {
+        lastSeek = video.currentTime;
+    });
+
+    video.addEventListener("seeked", () => {
+        if (video.paused || !rpcActive) return;
+
+        const elapsed = Math.floor(video.currentTime);
+        const start = Math.floor(Date.now() / 1000) - elapsed;
+        const end = start + Math.floor(video.duration);
+
+        sendRPC({
+            startTimestamp: start,
+            endTimestamp: end
+        });
+    });
+
+    function sendRPC({ startTimestamp, endTimestamp, paused = false } = {}) {
+        fetch("/api/rpc", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+                details: animeTitle,
+                state: `Episode ${currentEpisode}`,
+                mode: "watching",
+                startTimestamp,
+                endTimestamp,
+                paused
+            })
+        });
+    }
 }

 function setLoading(message) {
--- a/desktop/src/scripts/books/book.js
+++ b/desktop/src/scripts/books/book.js
@@ -6,6 +6,8 @@ let bookSlug = null;
 let allChapters = [];
 let filteredChapters = [];

+let availableExtensions = [];
+
 const chapterPagination = Object.create(PaginationManager);
 chapterPagination.init(12, () => renderChapterTable());

@@ -16,7 +18,6 @@ document.addEventListener('DOMContentLoaded', () => {

 async function init() {
    try {
-
        const urlData = URLUtils.parseEntityPath('book');
        if (!urlData) {
            showError("Book Not Found");
@@ -29,6 +30,7 @@ async function init() {

        await loadBookMetadata();

+        await loadAvailableExtensions();
        await loadChapters();

        await setupAddToListButton();
@@ -39,11 +41,23 @@ async function init() {
    }
 }

+async function loadAvailableExtensions() {
+    try {
+        const res = await fetch('/api/extensions/book');
+        const data = await res.json();
+        availableExtensions = data.extensions || [];
+
+        setupProviderFilter();
+    } catch (err) {
+        console.error("Error fetching extensions:", err);
+    }
+}
+
 async function loadBookMetadata() {
    const source = extensionName || 'anilist';
    const fetchUrl = `/api/book/${bookId}?source=${source}`;

-    const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() });
+    const res = await fetch(fetchUrl);
    const data = await res.json();

    if (data.error || !data) {
@@ -154,17 +168,27 @@ function updateCustomAddButton() {
    }
 }

-async function loadChapters() {
+async function loadChapters(targetProvider = null) {
    const tbody = document.getElementById('chapters-body');
    if (!tbody) return;

-    tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">Searching extensions for chapters...</td></tr>';
+    // Si no se pasa provider, intentamos pillar el del select o el primero disponible
+    if (!targetProvider) {
+        const select = document.getElementById('provider-filter');
+        targetProvider = select ? select.value : (availableExtensions[0] || 'all');
+    }
+
+    tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">Searching extension for chapters...</td></tr>';

    try {
        const source = extensionName || 'anilist';
-        const fetchUrl = `/api/book/${bookId}/chapters?source=${source}`;
+        // Añadimos el query param 'provider' para que el backend filtre
+        let fetchUrl = `/api/book/${bookId}/chapters?source=${source}`;
+        if (targetProvider !== 'all') {
+            fetchUrl += `&provider=${targetProvider}`;
+        }

-        const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() });
+        const res = await fetch(fetchUrl);
        const data = await res.json();

        allChapters = data.chapters || [];
@@ -175,18 +199,17 @@ async function loadChapters() {
        const totalEl = document.getElementById('total-chapters');

        if (allChapters.length === 0) {
-            tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters found on loaded extensions.</td></tr>';
+            tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters found.</td></tr>';
            if (totalEl) totalEl.innerText = "0 Found";
            return;
        }

        if (totalEl) totalEl.innerText = `${allChapters.length} Found`;

-        setupProviderFilter();
-
        setupReadButton();

        chapterPagination.setTotalItems(filteredChapters.length);
+        chapterPagination.reset();
        renderChapterTable();

    } catch (err) {
@@ -211,44 +234,31 @@ function applyChapterFilter() {

 function setupProviderFilter() {
    const select = document.getElementById('provider-filter');
-    if (!select) return;
-
-    const providers = [...new Set(allChapters.map(ch => ch.provider))];
-
-    if (providers.length === 0) return;
+    if (!select || availableExtensions.length === 0) return;

    select.style.display = 'inline-block';
-    select.innerHTML = '<option value="all">All Providers</option>';
+    select.innerHTML = '';

-    providers.forEach(prov => {
+    const allOpt = document.createElement('option');
+    allOpt.value = 'all';
+    allOpt.innerText = 'Load All (Slower)';
+    select.appendChild(allOpt);
+
+    availableExtensions.forEach(ext => {
        const opt = document.createElement('option');
-        opt.value = prov;
-        opt.innerText = prov;
+        opt.value = ext;
+        opt.innerText = ext.charAt(0).toUpperCase() + ext.slice(1);
        select.appendChild(opt);
    });

-    if (extensionName) {
-        const extensionProvider = providers.find(
-            p => p.toLowerCase() === extensionName.toLowerCase()
-        );
-
-        if (extensionProvider) {
-            select.value = extensionProvider;
-            filteredChapters = allChapters.filter(ch => ch.provider === extensionProvider);
-        }
+    if (extensionName && availableExtensions.includes(extensionName)) {
+        select.value = extensionName;
+    } else if (availableExtensions.length > 0) {
+        select.value = availableExtensions[0];
    }

-    select.onchange = (e) => {
-        const selected = e.target.value;
-        if (selected === 'all') {
-            filteredChapters = [...allChapters];
-        } else {
-            filteredChapters = allChapters.filter(ch => ch.provider === selected);
-        }
-
-        chapterPagination.reset();
-        chapterPagination.setTotalItems(filteredChapters.length);
-        renderChapterTable();
+    select.onchange = () => {
+        loadChapters(select.value);
    };
 }

--- a/desktop/src/scripts/list.js
+++ b/desktop/src/scripts/list.js
@@ -29,20 +29,32 @@ async function populateSourceFilter() {
    `;

    try {
-        const response = await fetch(`${API_BASE}/extensions`);
-        if (response.ok) {
-            const data = await response.json();
-            const extensions = data.extensions || [];
+        const [animeRes, bookRes] = await Promise.all([
+            fetch(`${API_BASE}/extensions/anime`),
+            fetch(`${API_BASE}/extensions/book`)
+        ]);

-            extensions.forEach(extName => {
-                if (extName.toLowerCase() !== 'anilist' && extName.toLowerCase() !== 'local') {
-                    const option = document.createElement('option');
-                    option.value = extName;
-                    option.textContent = extName.charAt(0).toUpperCase() + extName.slice(1);
-                    select.appendChild(option);
-                }
-            });
+        const extensions = new Set();
+
+        if (animeRes.ok) {
+            const data = await animeRes.json();
+            (data.extensions || []).forEach(ext => extensions.add(ext));
        }
+
+        if (bookRes.ok) {
+            const data = await bookRes.json();
+            (data.extensions || []).forEach(ext => extensions.add(ext));
+        }
+
+        extensions.forEach(extName => {
+            const lower = extName.toLowerCase();
+            if (lower !== 'anilist' && lower !== 'local') {
+                const option = document.createElement('option');
+                option.value = extName;
+                option.textContent = extName.charAt(0).toUpperCase() + extName.slice(1);
+                select.appendChild(option);
+            }
+        });
    } catch (error) {
        console.error('Error loading extensions:', error);
    }
--- a/desktop/src/scripts/marketplace.js
+++ b/desktop/src/scripts/marketplace.js
@@ -1,422 +1,262 @@
-const GITEA_INSTANCE = 'https://git.waifuboard.app';
-const REPO_OWNER = 'ItsSkaiya';
-const REPO_NAME = 'WaifuBoard-Extensions';
-let DETECTED_BRANCH = 'main';
-const API_URL_BASE = `${GITEA_INSTANCE}/api/v1/repos/${REPO_OWNER}/${REPO_NAME}/contents`;
-
+const ORIGINAL_MARKETPLACE_URL = 'https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/marketplace.json';
+const MARKETPLACE_JSON_URL = `/api/proxy?url=${encodeURIComponent(ORIGINAL_MARKETPLACE_URL)}`;
 const INSTALLED_EXTENSIONS_API = '/api/extensions';
+const UPDATE_EXTENSIONS_API = '/api/extensions/update';

-const extensionsGrid = document.getElementById('extensions-grid');
+const marketplaceContent = document.getElementById('marketplace-content');
 const filterSelect = document.getElementById('extension-filter');
+const updateAllBtn = document.getElementById('btn-update-all');

-let allExtensionsData = [];
-
-const customModal = document.getElementById('customModal');
+const modal = document.getElementById('customModal');
 const modalTitle = document.getElementById('modalTitle');
 const modalMessage = document.getElementById('modalMessage');
+const modalConfirmBtn = document.getElementById('modalConfirmButton');
+const modalCloseBtn = document.getElementById('modalCloseButton');

-function getRawUrl(filename) {
+let marketplaceMetadata = {};
+let installedExtensions = [];
+let currentTab = 'marketplace';

-    const targetUrl = `${GITEA_INSTANCE}/${REPO_OWNER}/${REPO_NAME}/raw/branch/main/${filename}`;
-
-    const encodedUrl = encodeURIComponent(targetUrl);
-
-    return `/api/proxy?url=${encodedUrl}`;
-}
-
-function updateExtensionState(fileName, installed) {
-    const ext = allExtensionsData.find(e => e.fileName === fileName);
-    if (!ext) return;
-
-    ext.isInstalled = installed;
-    ext.isLocal = installed && ext.isLocal;
-
-    filterAndRenderExtensions(filterSelect?.value || 'All');
-}
-
-function formatExtensionName(fileName) {
-    return fileName.replace('.js', '')
-        .replace(/([a-z])([A-Z])/g, '$1 $2')
-        .replace(/^[a-z]/, (char) => char.toUpperCase());
-}
-
-function getIconUrl(extensionDetails) {
-    return extensionDetails;
-}
-
-async function getExtensionDetails(url) {
+async function loadMarketplace() {
+    showSkeletons();
    try {
-        const res = await fetch(url);
-        if (!res.ok) throw new Error(`Fetch failed: ${res.status}`);
-        const text = await res.text();
+        const [metaRes, installedRes] = await Promise.all([
+            fetch(MARKETPLACE_JSON_URL).then(res => res.json()),
+            fetch(INSTALLED_EXTENSIONS_API).then(res => res.json())
+        ]);

-        const regex = /(?:this\.|const\s+|let\s+|var\s+)?baseUrl\s*=\s*(["'`])(.*?)\1/i;
-        const match = text.match(regex);
-        let finalHostname = null;
-        if (match && match[2]) {
-            let rawUrl = match[2].trim();
-            if (!rawUrl.startsWith('http')) rawUrl = 'https://' + rawUrl;
-            try {
-                const urlObj = new URL(rawUrl);
-                finalHostname = urlObj.hostname;
-            } catch(e) {
-                console.warn(`Could not parse baseUrl: ${rawUrl}`);
-            }
+        marketplaceMetadata = metaRes.extensions;
+        installedExtensions = (installedRes.extensions || []).map(e => e.toLowerCase());
+
+        initTabs();
+        renderGroupedView();
+
+        if (filterSelect) {
+            filterSelect.addEventListener('change', () => renderGroupedView());
        }

-        const classMatch = text.match(/class\s+(\w+)/);
-        const name = classMatch ? classMatch[1] : null;
-
-        let type = 'Image';
-        if (text.includes('type = "book-board"') || text.includes("type = 'book-board'")) type = 'Book';
-        else if (text.includes('type = "anime-board"') || text.includes("type = 'anime-board'")) type = 'Anime';
-
-        return { baseUrl: finalHostname, name, type };
-    } catch (e) {
-        return { baseUrl: null, name: null, type: 'Unknown' };
+        if (updateAllBtn) {
+            updateAllBtn.onclick = handleUpdateAll;
+        }
+    } catch (error) {
+        console.error('Error loading marketplace:', error);
+        marketplaceContent.innerHTML = `<div class="error-msg">Error al cargar el marketplace.</div>`;
    }
 }

-function showCustomModal(title, message, isConfirm = false) {
-    return new Promise(resolve => {
+function initTabs() {
+    const tabs = document.querySelectorAll('.tab-button');
+    tabs.forEach(tab => {
+        tab.onclick = () => {
+            tabs.forEach(t => t.classList.remove('active'));
+            tab.classList.add('active');
+            currentTab = tab.dataset.tab;

-        modalTitle.textContent = title;
-        modalMessage.textContent = message;
+            if (updateAllBtn) {
+                if (currentTab === 'installed') {
+                    updateAllBtn.classList.remove('hidden');
+                } else {
+                    updateAllBtn.classList.add('hidden');
+                }
+            }

-        const currentConfirmButton = document.getElementById('modalConfirmButton');
-        const currentCloseButton = document.getElementById('modalCloseButton');
-
-        const newConfirmButton = currentConfirmButton.cloneNode(true);
-        currentConfirmButton.parentNode.replaceChild(newConfirmButton, currentConfirmButton);
-
-        const newCloseButton = currentCloseButton.cloneNode(true);
-        currentCloseButton.parentNode.replaceChild(newCloseButton, currentCloseButton);
-
-        if (isConfirm) {
-
-            newConfirmButton.classList.remove('hidden');
-            newConfirmButton.textContent = 'Confirm';
-            newCloseButton.textContent = 'Cancel';
-        } else {
-
-            newConfirmButton.classList.add('hidden');
-            newCloseButton.textContent = 'Close';
-        }
-
-        const closeModal = (confirmed) => {
-            customModal.classList.add('hidden');
-            resolve(confirmed);
+            renderGroupedView();
        };
-
-        newConfirmButton.onclick = () => closeModal(true);
-        newCloseButton.onclick = () => closeModal(false);
-
-        customModal.classList.remove('hidden');
    });
 }

-function renderExtensionCard(extension, isInstalled, isLocalOnly = false) {
+async function handleUpdateAll() {
+    const originalText = updateAllBtn.innerText;
+    try {
+        updateAllBtn.disabled = true;
+        updateAllBtn.innerText = 'Updating...';

-    const extensionName = formatExtensionName(extension.fileName || extension.name);
-    const extensionType = extension.type || 'Unknown';
+        const res = await fetch(UPDATE_EXTENSIONS_API, { method: 'POST' });
+        if (!res.ok) throw new Error('Update failed');

-    let iconUrl;
+        const data = await res.json();

-    if (extension.baseUrl && extension.baseUrl !== 'Local Install') {
+        if (data.updated && data.updated.length > 0) {

-        iconUrl = `https://www.google.com/s2/favicons?domain=${extension.baseUrl}&sz=128`;
+            const list = data.updated.join(', ');
+            window.NotificationUtils.success(`Updated: ${list}`);
+
+            await loadMarketplace();
+        } else {
+            window.NotificationUtils.info('Everything is up to date.');
+        }
+    } catch (error) {
+        console.error('Update All Error:', error);
+        window.NotificationUtils.error('Failed to perform bulk update.');
+    } finally {
+        updateAllBtn.disabled = false;
+        updateAllBtn.innerText = originalText;
+    }
+}
+
+function renderGroupedView() {
+    marketplaceContent.innerHTML = '';
+    const activeFilter = filterSelect.value;
+    const groups = {};
+
+    let listToRender = [];
+
+    if (currentTab === 'marketplace') {
+        for (const [id, data] of Object.entries(marketplaceMetadata)) {
+            listToRender.push({
+                id,
+                ...data,
+                isInstalled: installedExtensions.includes(id.toLowerCase())
+            });
+        }
    } else {
+        for (const [id, data] of Object.entries(marketplaceMetadata)) {
+            if (installedExtensions.includes(id.toLowerCase())) {
+                listToRender.push({ id, ...data, isInstalled: true });
+            }
+        }

-        const displayName = extensionName.replace(/\s/g, '+');
-        iconUrl = `https://ui-avatars.com/api/?name=${displayName}&background=1f2937&color=fff&length=1`;
+        installedExtensions.forEach(id => {
+            const existsInMeta = Object.keys(marketplaceMetadata).some(k => k.toLowerCase() === id);
+            if (!existsInMeta) {
+                listToRender.push({
+                    id: id,
+                    name: id.charAt(0).toUpperCase() + id.slice(1),
+                    type: 'Local',
+                    author: 'Unknown',
+                    isInstalled: true
+                });
+            }
+        });
    }

+    listToRender.forEach(ext => {
+        const type = ext.type || 'Other';
+        if (activeFilter !== 'All' && type !== activeFilter) return;
+        if (!groups[type]) groups[type] = [];
+        groups[type].push(ext);
+    });
+
+    const sortedTypes = Object.keys(groups).sort();
+
+    if (sortedTypes.length === 0) {
+        marketplaceContent.innerHTML = `<p class="empty-msg">No extensions found for this criteria.</p>`;
+        return;
+    }
+
+    sortedTypes.forEach(type => {
+        const section = document.createElement('div');
+        section.className = 'category-group';
+
+        const title = document.createElement('h2');
+        title.className = 'marketplace-section-title';
+        title.innerText = type.replace('-', ' ');
+
+        const grid = document.createElement('div');
+        grid.className = 'marketplace-grid';
+
+        groups[type].forEach(ext => grid.appendChild(createCard(ext)));
+
+        section.appendChild(title);
+        section.appendChild(grid);
+        marketplaceContent.appendChild(section);
+    });
+}
+
+function createCard(ext) {
    const card = document.createElement('div');
-    card.className = `extension-card grid-item extension-type-${extensionType.toLowerCase()}`;
-    card.dataset.path = extension.fileName || extension.name;
-    card.dataset.type = extensionType;
+    card.className = `extension-card ${ext.nsfw ? 'nsfw-ext' : ''} ${ext.broken ? 'broken-ext' : ''}`;

-    let buttonHtml;
-    let badgeHtml = '';
+    const iconUrl = `https://www.google.com/s2/favicons?domain=${ext.domain}&sz=128`;

-    if (isInstalled) {
-
-        if (isLocalOnly) {
-            badgeHtml = '<span class="extension-status-badge badge-local">Local</span>';
-        } else {
-            badgeHtml = '<span class="extension-status-badge badge-installed">Installed</span>';
-        }
-        buttonHtml = `
-            <button class="extension-action-button btn-uninstall" data-action="uninstall">Uninstall</button>
-        `;
+    let buttonHtml = '';
+    if (ext.isInstalled) {
+        buttonHtml = `<button class="extension-action-button btn-uninstall">Uninstall</button>`;
+    } else if (ext.broken) {
+        buttonHtml = `<button class="extension-action-button" style="background: #4b5563; cursor: not-allowed;" disabled>Broken</button>`;
    } else {
-
-        buttonHtml = `
-            <button class="extension-action-button btn-install" data-action="install">Install</button>
-        `;
+        buttonHtml = `<button class="extension-action-button btn-install">Install</button>`;
    }

    card.innerHTML = `
-        <img class="extension-icon" src="${iconUrl}" alt="${extensionName} Icon" onerror="this.onerror=null; this.src='https://ui-avatars.com/api/?name=E&background=1f2937&color=fff&length=1'">
+        <img class="extension-icon" src="${iconUrl}" onerror="this.src='/public/assets/waifuboards.ico'">
        <div class="card-content-wrapper">
-            <h3 class="extension-name" title="${extensionName}">${extensionName}</h3>
-            ${badgeHtml}
+            <h3 class="extension-name">${ext.name}</h3>
+            <span class="extension-author">by ${ext.author || 'Unknown'}</span>
+            <p class="extension-description">${ext.description || 'No description available.'}</p>
+            <div class="extension-tags">
+                <span class="extension-status-badge badge-${ext.isInstalled ? 'installed' : (ext.broken ? 'local' : 'available')}">
+                    ${ext.isInstalled ? 'Installed' : (ext.broken ? 'Broken' : 'Available')}
+                </span>
+                ${ext.nsfw ? '<span class="extension-status-badge badge-local">NSFW</span>' : ''}
+            </div>
        </div>
        ${buttonHtml}
    `;

-    const installButton = card.querySelector('[data-action="install"]');
-    const uninstallButton = card.querySelector('[data-action="uninstall"]');
-
-    if (installButton) {
-        installButton.addEventListener('click', async () => {
-            try {
-                const response = await fetch('/api/extensions/install', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ fileName: extension.fileName }),
-                });
-
-                const result = await response.json();
-
-                if (response.ok) {
-                    updateExtensionState(extension.fileName, true);
-
-                    await showCustomModal(
-                        'Installation Successful',
-                        `${extensionName} has been successfully installed.`,
-                        false
-                    );
-                } else {
-
-                    await showCustomModal(
-                        'Installation Failed',
-                        `Installation failed: ${result.error || 'Unknown error.'}`,
-                        false
-                    );
-                }
-            } catch (error) {
-
-                await showCustomModal(
-                    'Installation Failed',
-                    `Network error during installation.`,
-                    false
-                );
-            }
-        });
+    const btn = card.querySelector('.extension-action-button');
+    if (!ext.broken || ext.isInstalled) {
+        btn.onclick = () => ext.isInstalled ? promptUninstall(ext) : handleInstall(ext);
    }

-    if (uninstallButton) {
-        uninstallButton.addEventListener('click', async () => {
-
-            const confirmed = await showCustomModal(
-                'Confirm Uninstallation',
-                `Are you sure you want to uninstall ${extensionName}?`,
-                true
-            );
-
-            if (!confirmed) return;
-
-            try {
-                const response = await fetch('/api/extensions/uninstall', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ fileName: extension.fileName }),
-                });
-
-                const result = await response.json();
-
-                if (response.ok) {
-                    updateExtensionState(extension.fileName, false);
-
-                    await showCustomModal(
-                        'Uninstallation Successful',
-                        `${extensionName} has been successfully uninstalled.`,
-                        false
-                    );
-                } else {
-
-                    await showCustomModal(
-                        'Uninstallation Failed',
-                        `Uninstallation failed: ${result.error || 'Unknown error.'}`,
-                        false
-                    );
-                }
-            } catch (error) {
-
-                await showCustomModal(
-                    'Uninstallation Failed',
-                    `Network error during uninstallation.`,
-                    false
-                );
-            }
-        });
-    }
-
-    extensionsGrid.appendChild(card);
+    return card;
 }

-async function getInstalledExtensions() {
-    console.log(`Fetching installed extensions from: ${INSTALLED_EXTENSIONS_API}`);
+function showModal(title, message, showConfirm = false, onConfirm = null) {
+    modalTitle.innerText = title;
+    modalMessage.innerText = message;
+    if (showConfirm) {
+        modalConfirmBtn.classList.remove('hidden');
+        modalConfirmBtn.onclick = () => { hideModal(); if (onConfirm) onConfirm(); };
+    } else {
+        modalConfirmBtn.classList.add('hidden');
+    }
+    modalCloseBtn.onclick = hideModal;
+    modal.classList.remove('hidden');
+}

+function hideModal() { modal.classList.add('hidden'); }
+
+async function handleInstall(ext) {
    try {
-        const response = await fetch(INSTALLED_EXTENSIONS_API);
-
-        if (!response.ok) {
-            console.error(`Error fetching installed extensions. Status: ${response.status}`);
-            return new Set();
+        const res = await fetch('/api/extensions/install', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ url: ext.entry })
+        });
+        if (res.ok) {
+            installedExtensions.push(ext.id.toLowerCase());
+            renderGroupedView();
+            window.NotificationUtils.success(`${ext.name} installed!`);
        }
-
-        const data = await response.json();
-
-        if (!data.extensions || !Array.isArray(data.extensions)) {
-            console.error("Invalid response format from /api/extensions: 'extensions' array missing or incorrect.");
-            return new Set();
-        }
-
-        const installedFileNames = data.extensions
-            .map(name => `${name.toLowerCase()}.js`);
-
-        return new Set(installedFileNames);
-
-    } catch (error) {
-        console.error('Network or JSON parsing error during fetch of installed extensions:', error);
-        return new Set();
-    }
+    } catch (e) { window.NotificationUtils.error('Install failed.'); }
 }

-function filterAndRenderExtensions(filterType) {
-    extensionsGrid.innerHTML = '';
-
-    if (!allExtensionsData || allExtensionsData.length === 0) {
-        console.log('No extension data to filter.');
-        return;
-    }
-
-    const filteredExtensions = allExtensionsData.filter(ext =>
-        filterType === 'All' || ext.type === filterType || (ext.isLocal && filterType === 'Local')
-    );
-
-    filteredExtensions.forEach(ext => {
-        renderExtensionCard(ext, ext.isInstalled, ext.isLocal);
-    });
-
-    if (filteredExtensions.length === 0) {
-        extensionsGrid.innerHTML = `<p style="grid-column: 1 / -1; text-align: center; color: var(--text-secondary);">No extensions found for the selected filter (${filterType}).</p>`;
-    }
+function promptUninstall(ext) {
+    showModal('Confirm', `Uninstall ${ext.name}?`, true, () => handleUninstall(ext));
 }

-async function loadMarketplace() {
-    extensionsGrid.innerHTML = '';
-
-    for (let i = 0; i < 6; i++) {
-        extensionsGrid.innerHTML += `
-            <div class="extension-card skeleton grid-item">
-                <div class="skeleton-icon skeleton" style="width: 50px; height: 50px;"></div>
-                <div class="card-content-wrapper">
-                    <div class="skeleton-text title-skeleton skeleton" style="width: 80%; height: 1.1em;"></div>
-                    <div class="skeleton-text text-skeleton skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
-                </div>
-                <div class="skeleton-button skeleton" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
-            </div>`;
-    }
-
+async function handleUninstall(ext) {
    try {
-
-        const [availableExtensionsRaw, installedExtensionsSet] = await Promise.all([
-            fetch(API_URL_BASE).then(res => {
-                if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
-                return res.json();
-            }),
-            getInstalledExtensions()
-        ]);
-
-        const availableExtensionsJs = availableExtensionsRaw.filter(ext => ext.type === 'file' && ext.name.endsWith('.js'));
-        const detailPromises = [];
-
-        const marketplaceFileNames = new Set(availableExtensionsJs.map(ext => ext.name.toLowerCase()));
-
-        for (const ext of availableExtensionsJs) {
-
-            const downloadUrl = getRawUrl(ext.name);
-
-            const detailsPromise = getExtensionDetails(downloadUrl).then(details => ({
-                ...ext,
-                ...details,
-                fileName: ext.name,
-
-                isInstalled: installedExtensionsSet.has(ext.name.toLowerCase()),
-                isLocal: false,
-            }));
-            detailPromises.push(detailsPromise);
-        }
-
-        const extensionsWithDetails = await Promise.all(detailPromises);
-
-        installedExtensionsSet.forEach(installedName => {
-
-            if (!marketplaceFileNames.has(installedName)) {
-
-                const localExt = {
-                    name: formatExtensionName(installedName),
-                    fileName: installedName,
-                    type: 'Local',
-                    isInstalled: true,
-                    isLocal: true,
-                    baseUrl: 'Local Install',
-                };
-                extensionsWithDetails.push(localExt);
-            }
+        const res = await fetch('/api/extensions/uninstall', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ fileName: ext.id + '.js' })
        });
-
-        extensionsWithDetails.sort((a, b) => {
-            if (a.isInstalled !== b.isInstalled) {
-                return b.isInstalled - a.isInstalled;
-
-            }
-
-            const nameA = a.name || '';
-            const nameB = b.name || '';
-
-            return nameA.localeCompare(nameB);
-
-        });
-
-        allExtensionsData = extensionsWithDetails;
-
-        if (filterSelect) {
-            filterSelect.addEventListener('change', (event) => {
-                filterAndRenderExtensions(event.target.value);
-            });
+        if (res.ok) {
+            installedExtensions = installedExtensions.filter(id => id !== ext.id.toLowerCase());
+            renderGroupedView();
+            window.NotificationUtils.info(`${ext.name} uninstalled.`);
        }
-
-        filterAndRenderExtensions('All');
-
-    } catch (error) {
-        console.error('Error loading the marketplace:', error);
-        extensionsGrid.innerHTML = `
-            <div style="grid-column: 1 / -1; color: #dc2626; text-align: center; padding: 2rem; background: rgba(220,38,38,0.1); border-radius: 12px; margin-top: 1rem;">
-                🚨 Error loading extensions.
-                <p>Could not connect to the extension repository or local endpoint. Detail: ${error.message}</p>
-            </div>
-        `;
-        allExtensionsData = [];
-    }
+    } catch (e) { window.NotificationUtils.error('Uninstall failed.'); }
 }

-customModal.addEventListener('click', (e) => {
-    if (e.target === customModal || e.target.tagName === 'BUTTON') {
-        customModal.classList.add('hidden');
-    }
-});
+function showSkeletons() {
+    marketplaceContent.innerHTML = `
+        <div class="marketplace-grid">
+            ${Array(3).fill('<div class="extension-card skeleton"></div>').join('')}
+        </div>
+    `;
+}

 document.addEventListener('DOMContentLoaded', loadMarketplace);
-
-window.addEventListener('scroll', () => {
-    const navbar = document.getElementById('navbar');
-    if (window.scrollY > 0) {
-        navbar.classList.add('scrolled');
-    } else {
-        navbar.classList.remove('scrolled');
-    }
-});
--- a/desktop/src/scripts/updateNotifier.js
+++ b/desktop/src/scripts/updateNotifier.js
@@ -1,6 +1,6 @@
 const Gitea_OWNER = "ItsSkaiya";
 const Gitea_REPO = "WaifuBoard";
-const CURRENT_VERSION = "v2.0.0-rc.0";
+const CURRENT_VERSION = "v2.0.0-rc.2";
 const UPDATE_CHECK_INTERVAL = 5 * 60 * 1000;

 let currentVersionDisplay;
--- a/desktop/src/scripts/users.js
+++ b/desktop/src/scripts/users.js
@@ -694,30 +694,102 @@ window.handleDeleteConfirmation = function(userId) {

    closeModal();

+    if (user.has_password) {
+        modalAniList.innerHTML = `
+        <div class="modal-overlay"></div>
+        <div class="modal-content" style="max-width:400px;">
+            <div class="modal-header">
+                <h2>Confirm Deletion</h2>
+                <button class="modal-close" onclick="closeModal()">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <line x1="18" y1="6" x2="6" y2="18"></line>
+                        <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                </button>
+            </div>
+
+            <form id="deleteWithPasswordForm">
+                <p style="margin-bottom:1.25rem; color:var(--color-text-secondary)">
+                    Enter your password to permanently delete
+                    <b>${user.username}</b>
+                </p>
+
+                <div class="form-group">
+                    <label for="deletePassword">Password</label>
+                    <div class="password-toggle-wrapper">
+                        <input
+                            type="password"
+                            id="deletePassword"
+                            required
+                            placeholder="Enter password"
+                            autofocus
+                        >
+                        <button
+                            type="button"
+                            class="password-toggle-btn"
+                            onclick="togglePasswordVisibility('deletePassword', this)"
+                        >
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                                <circle cx="12" cy="12" r="3"></circle>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+
+                <div class="modal-actions">
+                    <button type="button" class="btn-secondary" onclick="closeModal()">
+                        Cancel
+                    </button>
+                    <button type="submit" class="btn-disconnect">
+                        Delete Profile
+                    </button>
+                </div>
+            </form>
+        </div>
+    `;
+        modalAniList.classList.add('active');
+
+        document
+            .getElementById('deleteWithPasswordForm')
+            .addEventListener('submit', e => {
+                e.preventDefault();
+                const password = document.getElementById('deletePassword').value;
+                handleConfirmedDeleteUser(userId, password);
+            });
+
+        return;
+    }
+
    showConfirmationModal(
        'Confirm Deletion',
-        `Are you absolutely sure you want to delete profile ${user.username}? This action cannot be undone.`,
+        `Are you absolutely sure you want to delete profile ${user.username}?`,
        `handleConfirmedDeleteUser(${userId})`
    );
 };

-window.handleConfirmedDeleteUser = async function(userId) {
+window.handleConfirmedDeleteUser = async function(userId, password = null) {
    closeModal();
-    showUserToast('Deleting user...', 'info');

    try {
-        const res = await fetch(`${API_BASE}/users/${userId}`, { method: 'DELETE' });
+        const options = { method: 'DELETE' };
+
+        if (password) {
+            options.headers = { 'Content-Type': 'application/json' };
+            options.body = JSON.stringify({ password });
+        }
+
+        const res = await fetch(`${API_BASE}/users/${userId}`, options);

        if (!res.ok) {
            const error = await res.json();
-            throw new Error(error.error || 'Error deleting user');
+            throw new Error(error.error);
        }

        await loadUsers();
        showUserToast('User deleted successfully!', 'success');
    } catch (err) {
-        console.error(err);
-        showUserToast('Error deleting user', 'error');
+        showUserToast(err.message || 'Error deleting user', 'error');
    }
 };

--- a/desktop/src/shared/extensions.js
+++ b/desktop/src/shared/extensions.js
@@ -46,7 +46,6 @@ async function loadExtensions() {
    }
 }

-
 async function loadExtension(fileName) {
    const homeDir = os.homedir();
    const extensionsDir = path.join(homeDir, 'WaifuBoards', 'extensions');
@@ -77,6 +76,7 @@ async function loadExtension(fileName) {
        }

        const name = instance.constructor.name;
+        instance.__fileName = fileName;
        instance.scrape = scrape;
        instance.cheerio = cheerio;
        extensions.set(name, instance);
@@ -114,6 +114,14 @@ async function saveExtensionFile(fileName, downloadUrl) {
            file.on('finish', async () => {
                file.close(async () => {
                    try {
+                        const extName = fileName.replace('.js', '');
+
+                        for (const key of extensions.keys()) {
+                            if (key.toLowerCase() === extName.toLowerCase()) {
+                                extensions.delete(key);
+                                break;
+                            }
+                        }
                        await loadExtension(fileName);
                        resolve();
                    } catch (err) {
--- a/desktop/src/shared/headless.js
+++ b/desktop/src/shared/headless.js
@@ -1,14 +1,44 @@
-const { chromium } = require("playwright-chromium");
+const path = require("path");
+const fs = require("fs");
+const { chromium } = require("playwright-core");
+
 let browser;
 let context;
 const BLOCK_LIST = [
    "google-analytics", "doubleclick", "facebook", "twitter",
    "adsystem", "analytics", "tracker", "pixel", "quantserve", "newrelic"
 ];
+
+function isPackaged() {
+    return process.env.IS_PACKAGED === "true";
+}
+
+function getChromiumPath() {
+    if (isPackaged()) {
+        return path.join(
+            process.resourcesPath,
+            "playwright",
+            "chromium",
+            "chrome-headless-shell-win64",
+            "chrome-headless-shell.exe"
+        );
+    }
+
+    return chromium.executablePath();
+}
+
 async function initHeadless() {
    if (browser) return;
+
+    const exePath = getChromiumPath();
+
+    if (!fs.existsSync(exePath)) {
+        throw new Error("Chromium not found: " + exePath);
+    }
+
    browser = await chromium.launch({
        headless: true,
+        executablePath: exePath,
        args: [
            "--no-sandbox",
            "--disable-setuid-sandbox",
--- a/desktop/views/css/anime/watch.css
+++ b/desktop/views/css/anime/watch.css
@@ -4,7 +4,11 @@
    left: 0;
    right: 0;
    padding: var(--spacing-lg) var(--spacing-xl);
-    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
+    background: linear-gradient(
+            180deg,
+            rgba(0, 0, 0, 0.8) 0%,
+            transparent 100%
+    );
    z-index: 1000;
    pointer-events: none;
 }
@@ -64,7 +68,11 @@
    box-shadow: var(--shadow-sm);
 }

-.control-group { display: flex; align-items: center; gap: var(--spacing-md); }
+.control-group {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+}

 .sd-toggle {
    display: flex;
@@ -87,11 +95,15 @@
    letter-spacing: 0.05em;
 }

-.sd-option.active { color: var(--color-text-primary); }
+.sd-option.active {
+    color: var(--color-text-primary);
+}

 .sd-bg {
    position: absolute;
-    top: 4px; left: 4px; bottom: 4px;
+    top: 4px;
+    left: 4px;
+    bottom: 4px;
    width: calc(50% - 4px);
    background: var(--color-primary);
    border-radius: var(--radius-full);
@@ -100,7 +112,9 @@
    z-index: 1;
 }

-.sd-toggle[data-state="dub"] .sd-bg { transform: translateX(100%); }
+.sd-toggle[data-state="dub"] .sd-bg {
+    transform: translateX(100%);
+}

 .source-select {
    appearance: none;
@@ -119,8 +133,15 @@
    transition: all var(--transition-base);
 }

-.source-select:hover { border-color: var(--color-primary); background-color: var(--color-bg-card); }
-.source-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-glow); }
+.source-select:hover {
+    border-color: var(--color-primary);
+    background-color: var(--color-bg-card);
+}
+.source-select:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px var(--color-primary-glow);
+}

 .video-container {
    aspect-ratio: 16/9;
@@ -128,14 +149,25 @@
    background: var(--color-bg-base);
    border-radius: var(--radius-xl);
    overflow: hidden;
-    box-shadow: var(--shadow-lg), 0 0 0 1px var(--glass-border);
+    box-shadow:
+            var(--shadow-lg),
+            0 0 0 1px var(--glass-border);
    position: relative;
    transition: box-shadow var(--transition-smooth);
 }

-.video-container:hover { box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-primary), var(--shadow-glow); }
+.video-container:hover {
+    box-shadow:
+            var(--shadow-lg),
+            0 0 0 1px var(--color-primary),
+            var(--shadow-glow);
+}

-#player { width: 100%; height: 100%; object-fit: contain; }
+#player {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}

 .loading-overlay {
    position: absolute;
@@ -150,16 +182,25 @@
 }

 .spinner {
-    width: 48px; height: 48px;
-    border: 3px solid rgba(255,255,255,0.1);
+    width: 48px;
+    height: 48px;
+    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
 }

-@keyframes spin { to { transform: rotate(360deg); } }
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}

-.loading-overlay p { color: var(--color-text-secondary); font-size: 0.95rem; font-weight: 500; }
+.loading-overlay p {
+    color: var(--color-text-secondary);
+    font-size: 0.95rem;
+    font-weight: 500;
+}

 .episode-controls {
    display: flex;
@@ -174,21 +215,49 @@
    box-shadow: var(--shadow-sm);
 }

-.episode-info h1 { font-size: 1.75rem; font-weight: 800; margin: 0 0 var(--spacing-xs); }
-.episode-info p { color: var(--color-primary); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
-
-.navigation-buttons { display: flex; gap: var(--spacing-md); }
-
-.nav-btn {
-    display: flex; align-items: center; gap: var(--spacing-sm);
-    background: var(--color-bg-elevated); border: var(--border-subtle);
-    color: var(--color-text-primary); padding: 0.75rem 1.5rem;
-    border-radius: var(--radius-full); font-weight: 600; font-size: 0.9rem;
-    cursor: pointer; transition: all var(--transition-base);
+.episode-info h1 {
+    font-size: 1.75rem;
+    font-weight: 800;
+    margin: 0 0 var(--spacing-xs);
+}
+.episode-info p {
+    color: var(--color-primary);
+    font-weight: 600;
+    font-size: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
 }

-.nav-btn:hover:not(:disabled) { background: var(--color-primary); border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-glow); }
-.nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
+.navigation-buttons {
+    display: flex;
+    gap: var(--spacing-md);
+}
+
+.nav-btn {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    background: var(--color-bg-elevated);
+    border: var(--border-subtle);
+    color: var(--color-text-primary);
+    padding: 0.75rem 1.5rem;
+    border-radius: var(--radius-full);
+    font-weight: 600;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all var(--transition-base);
+}
+
+.nav-btn:hover:not(:disabled) {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-glow);
+}
+.nav-btn:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+}

 .episode-carousel-compact {
    width: 100%;
@@ -258,10 +327,18 @@
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
-    mask-image: linear-gradient(to right, transparent, black var(--spacing-md), black calc(100% - var(--spacing-md)), transparent);
+    mask-image: linear-gradient(
+            to right,
+            transparent,
+            black var(--spacing-md),
+            black calc(100% - var(--spacing-md)),
+            transparent
+    );
 }

-.episode-carousel-compact-list::-webkit-scrollbar { display: none; }
+.episode-carousel-compact-list::-webkit-scrollbar {
+    display: none;
+}

 .carousel-item {
    flex: 0 0 200px;
@@ -290,12 +367,14 @@
 .carousel-item.active-ep-carousel {
    border-color: var(--color-primary);
    background: rgba(139, 92, 246, 0.15);
-    box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-md);
+    box-shadow:
+            0 0 0 2px var(--color-primary),
+            var(--shadow-md);
    transform: scale(1.02);
 }

 .carousel-item.active-ep-carousel::after {
-    content: 'WATCHING';
+    content: "WATCHING";
    position: absolute;
    top: 0;
    right: 0;
@@ -391,7 +470,8 @@
    color: var(--color-primary);
 }

-.anime-details, .anime-extra-content {
+.anime-details,
+.anime-extra-content {
    max-width: 1600px;
    margin: var(--spacing-2xl) auto;
 }
@@ -425,9 +505,17 @@
    text-align: left;
 }

-.cover-image { width: 220px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
+.cover-image {
+    width: 220px;
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-lg);
+}

-.details-content h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: var(--spacing-md); }
+.details-content h1 {
+    font-size: 1.5rem;
+    font-weight: 800;
+    margin-bottom: var(--spacing-md);
+}

 .meta-badge {
    background: rgba(139, 92, 246, 0.12);
@@ -439,8 +527,15 @@
    border: 1px solid rgba(139, 92, 246, 0.2);
 }

-.meta-badge.meta-score { background: var(--color-primary); color: white; }
-.details-description { font-size: 1rem; line-height: 1.7; color: var(--color-text-secondary); }
+.meta-badge.meta-score {
+    background: var(--color-primary);
+    color: white;
+}
+.details-description {
+    font-size: 1rem;
+    line-height: 1.7;
+    color: var(--color-text-secondary);
+}

 .characters-header {
    display: flex;
@@ -471,9 +566,15 @@
    border-radius: var(--radius-sm);
 }

-.expand-btn:hover { background: rgba(139, 92, 246, 0.1); }
-.expand-btn svg { transition: transform var(--transition-smooth); }
-.expand-btn[data-expanded="true"] svg { transform: rotate(180deg); }
+.expand-btn:hover {
+    background: rgba(139, 92, 246, 0.1);
+}
+.expand-btn svg {
+    transition: transform var(--transition-smooth);
+}
+.expand-btn[data-expanded="true"] svg {
+    transform: rotate(180deg);
+}

 .characters-carousel {
    display: flex;
@@ -495,7 +596,6 @@
 }

 .characters-carousel.expanded {
-
    height: auto;
    max-height: 3200px;
    overflow-y: auto;
@@ -519,15 +619,38 @@
    background: transparent;
 }

-.plyr--video { border-radius: var(--radius-xl); }
-.plyr__controls { background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent 100%) !important; padding: 1rem 1.5rem 1.5rem !important; }
-.plyr--full-ui input[type=range] { color: var(--color-primary); }
-.plyr__control:hover { background: rgba(255,255,255,0.12) !important; }
-.plyr__menu__container { background: var(--glass-bg) !important; backdrop-filter: blur(16px); border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg) !important; }
+.plyr--video {
+    border-radius: var(--radius-xl);
+}
+.plyr__controls {
+    background: linear-gradient(
+            to top,
+            rgba(0, 0, 0, 0.9) 0%,
+            rgba(0, 0, 0, 0.5) 50%,
+            transparent 100%
+    ) !important;
+    padding: 1rem 1.5rem 1.5rem !important;
+}
+.plyr--full-ui input[type="range"] {
+    color: var(--color-primary);
+}
+.plyr__control:hover {
+    background: rgba(255, 255, 255, 0.12) !important;
+}
+.plyr__menu__container {
+    background: var(--glass-bg) !important;
+    backdrop-filter: blur(16px);
+    border: 1px solid var(--glass-border);
+    box-shadow: var(--shadow-lg) !important;
+}

@media (min-width: 1024px) {
-    .carousel-nav { display: flex; }
-    .watch-container { padding-top: 5rem; }
+    .carousel-nav {
+        display: flex;
+    }
+    .watch-container {
+        padding-top: 5rem;
+    }

    .details-cover {
        align-items: center;
@@ -540,64 +663,168 @@
 }

@media (max-width: 768px) {
-    .watch-container { padding: 4.5rem 1rem; }
-
-    .episode-carousel-compact-list {
-        padding: var(--spacing-sm) var(--spacing-md);
-    }
-    .carousel-header {
-        padding: 0 var(--spacing-md);
-    }
-    .carousel-item {
-        flex: 0 0 180px;
-        height: 100px;
-    }
-    .carousel-item-img-container { height: 60px; }
-    .carousel-item-info p { font-size: 0.95rem; }
-    .carousel-item.no-thumbnail {
-        flex: 0 0 140px;
-        height: 80px;
+    .watch-container {
+        padding: 5rem 1rem 2rem 1rem;
+        margin: 0;
+        width: 100%;
+        overflow-x: hidden;
    }

-    .details-container { flex-direction: column; text-align: center; }
+    .player-toolbar {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 1rem;
+        padding: 1rem;
+    }

-    .details-cover {
-        align-items: center;
+    .control-group {
+        justify-content: space-between;
        width: 100%;
    }
-    .details-cover h1 {
-        font-size: 2rem;
-        text-align: center;
-    }
-    .cover-image { width: 180px; margin: 0 auto; }

-    .episode-controls { flex-direction: column; gap: var(--spacing-md); }
-    .navigation-buttons { width: 100%; justify-content: center; }
-    .nav-btn { flex: 1; justify-content: center; }
-}
-
-@media (max-width: 480px) {
-    .episode-info h1, .details-content h1 { font-size: 1.5rem; }
-
-    .carousel-item {
-        flex: 0 0 150px;
-        height: 90px;
-    }
-    .carousel-item-img-container { height: 50px; }
-    .carousel-item-info p { font-size: 0.9rem; }
-    .carousel-item.no-thumbnail {
-        flex: 0 0 120px;
-        height: 70px;
+    .source-select {
+        width: 100%;
+        background-position: right 1.5rem center;
    }

-    .details-cover h1 {
-        font-size: 1.5rem;
+    .episode-controls {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1.5rem;
    }

-    .nav-btn span { display: none; }
+    .episode-info {
+        width: 100%;
+        text-align: left;
+    }
+
+    .episode-info h1 {
+        font-size: 1.4rem;
+        line-height: 1.3;
+    }
+
+    .navigation-buttons {
+        width: 100%;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 0.8rem;
+    }
+
+    .nav-btn {
+        justify-content: center;
+        padding: 0.8rem;
+        width: 100%;
+    }
+
+    .details-container {
+        flex-direction: column;
+        padding: 1.5rem;
+        gap: 2rem;
+    }
+
+    .details-cover {
+        flex-direction: row;
+        align-items: flex-start;
+        width: 100%;
+        gap: 1.5rem;
+    }
+
+    @media (max-width: 480px) {
+        .details-cover {
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+        }
+
+        .details-cover h1 {
+            text-align: center;
+        }
+    }
+
+    .cover-image {
+        width: 140px;
+        flex-shrink: 0;
+        margin: 0 auto;
+    }
+
+    .details-content h1 {
+        font-size: 1.3rem;
+    }
+
+    .characters-carousel {
+        justify-content: center;
+        padding-bottom: 1rem;
+    }

    .character-card {
-
-        flex: 1 1 100%;
+        width: calc(50% - 0.75rem);
+        flex: 0 0 calc(50% - 0.75rem);
    }
 }
+
+.plyr__progress {
+    position: relative;
+}
+
+.plyr__markers {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    pointer-events: none;
+    z-index: 2;
+}
+
+.plyr__marker {
+    position: absolute;
+    bottom: 0;
+    width: 3px;
+    height: 100%;
+    background: rgba(255, 215, 0, 0.8); /* Color dorado para Opening */
+    pointer-events: all;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.plyr__marker[data-label*="Ending"] {
+    background: rgba(255, 100, 100, 0.8); /* Color rojo para Ending */
+}
+
+.plyr__marker:hover {
+    height: 120%;
+    width: 4px;
+    background: rgba(255, 215, 0, 1);
+}
+
+.plyr__marker[data-label*="Ending"]:hover {
+    background: rgba(255, 100, 100, 1);
+}
+
+/* Tooltip para mostrar el label */
+.plyr__marker::before {
+    content: attr(data-label);
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-8px);
+    background: rgba(0, 0, 0, 0.9);
+    color: white;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+}
+
+.plyr__marker:hover::before {
+    opacity: 1;
+}
+.plyr__marker {
+    position: absolute;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.35);
+    cursor: pointer;
+}
--- a/desktop/views/css/marketplace.css
+++ b/desktop/views/css/marketplace.css
@@ -293,3 +293,98 @@
    background: #ef4444;
    transform: scale(1.02);
 }
+
+.extension-author {
+    font-size: 0.8rem;
+    color: var(--color-text-secondary);
+    display: block;
+    margin-bottom: 0.5rem;
+}
+
+.extension-tags {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.badge-available {
+    background: rgba(59, 130, 246, 0.2);
+    color: #60a5fa;
+    border: 1px solid rgba(59, 130, 246, 0.3);
+}
+
+.nsfw-ext {
+    border-color: rgba(220, 38, 38, 0.3);
+}
+
+.broken-ext {
+    filter: grayscale(0.8);
+    opacity: 0.7;
+    border: 1px dashed #ef4444; /* Borde rojo discontinuo */
+}
+
+.broken-ext:hover {
+    transform: none; /* Evitamos que se mueva al pasar el ratón si está rota */
+}
+
+/* Estilos para los Tabs */
+.tabs-container {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+    border-bottom: 1px solid rgba(255,255,255,0.1);
+    padding-bottom: 0.5rem;
+}
+
+.tab-button {
+    background: none;
+    border: none;
+    color: var(--color-text-secondary);
+    font-size: 1.1rem;
+    font-weight: 700;
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    transition: all 0.3s;
+    position: relative;
+}
+
+.tab-button.active {
+    color: var(--color-primary);
+}
+
+.tab-button.active::after {
+    content: '';
+    position: absolute;
+    bottom: -0.6rem;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background: var(--color-primary);
+    border-radius: 999px;
+    box-shadow: 0 0 10px var(--color-primary-glow);
+}
+
+/* Títulos de Secciones en Marketplace */
+.marketplace-section-title {
+    font-size: 1.4rem;
+    font-weight: 800;
+    margin: 2rem 0 1rem 0;
+    color: var(--color-text-primary);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-transform: capitalize;
+}
+
+.marketplace-section-title::before {
+    content: '';
+    display: inline-block;
+    width: 4px;
+    height: 20px;
+    background: var(--color-primary);
+    border-radius: 2px;
+}
+
+.category-group {
+    margin-bottom: 3rem;
+}
--- a/desktop/views/marketplace.html
+++ b/desktop/views/marketplace.html
@@ -10,13 +10,13 @@
    <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
    <link rel="stylesheet" href="/views/css/components/titlebar.css">
-    <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
-<div id="titlebar"> <div class="title-left">
-    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
-    <span class="app-title">WaifuBoard</span>
-</div>
+<div id="titlebar">
+    <div class="title-left">
+        <img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
+        <span class="app-title">WaifuBoard</span>
+    </div>
    <div class="title-right">
        <button class="min">—</button>
        <button class="max">🗖</button>
@@ -36,9 +36,9 @@
        <button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
        <button class="nav-button" onclick="window.location.href='/books'">Books</button>
        <button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
-        <button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
+        <button class="nav-button" onclick="window.location.href='/schedule.html'">Schedule</button>
        <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
-        <button class="nav-button active">Marketplace</button>
+        <button class="nav-button">Marketplace</button>
    </div>

    <div class="nav-right">
@@ -90,47 +90,31 @@

 <main>
    <section class="section">
-
        <header class="section-header">
-            <p class="marketplace-subtitle">Explore, install, and manage all available data source extensions for WaifuBoard.</p>
+            <div class="tabs-container">
+                <button class="tab-button active" data-tab="marketplace">Marketplace</button>
+                <button class="tab-button" data-tab="installed">My Extensions</button>
+            </div>
+
            <div class="filter-controls">
+                <button id="btn-update-all" class="btn-blur hidden" style="margin-right: 10px; width: auto; padding: 0 15px;">
+                    Update All
+                </button>
                <label for="extension-filter" class="filter-label">Filter by Type:</label>
                <select id="extension-filter" class="filter-select">
-                    <option value="All">All Extensions</option>
-                    <option value="Image">Image Boards</option>
-                    <option value="Anime">Anime Boards</option>
-                    <option value="Book">Book Boards</option>
-                    <option value="Local">Local Only</option>
+                    <option value="All">All Categories</option>
+                    <option value="image-board">Image Boards</option>
+                    <option value="anime-board">Anime Boards</option>
+                    <option value="book-board">Book Boards</option>
+                    <option value="Local">Local/Manual</option>
                </select>
            </div>
        </header>
-        <div class="marketplace-grid" id="extensions-grid">
-            <div class="extension-card skeleton grid-item">
-                <div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
-                <div class="card-content-wrapper">
-                    <div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
-                    <div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
-                </div>
-                <div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
-            </div>
-            <div class="extension-card skeleton grid-item">
-                <div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
-                <div class="card-content-wrapper">
-                    <div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
-                    <div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
-                </div>
-                <div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
-            </div>
-            <div class="extension-card skeleton grid-item">
-                <div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
-                <div class="card-content-wrapper">
-                    <div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
-                    <div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
-                </div>
-                <div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
-            </div>
+
+        <div id="marketplace-content">
        </div>
    </section>
+
    <div id="customModal" class="modal-overlay hidden">
        <div class="modal-content">
            <h3 id="modalTitle"></h3>
@@ -143,22 +127,11 @@
    </div>
 </main>

-<div id="updateToast" class="hidden">
-    <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
-
-    <a
-            id="downloadButton"
-            href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
-            target="_blank"
-    >
-        Click To Download
-    </a>
-</div>
-
+<script src="/src/scripts/utils/notification-utils.js"></script>
 <script src="/src/scripts/updateNotifier.js"></script>
-<script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/marketplace.js"></script>
 <script src="/src/scripts/titlebar.js"></script>
+<script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
 </body>
 </html>
--- a/docker/main.js
+++ b/docker/main.js
@@ -1,41 +0,0 @@
-const { app, BrowserWindow, ipcMain } = require('electron');
-const { fork } = require('child_process');
-const path = require('path');
-
-let win;
-let backend;
-
-function startBackend() {
-    backend = fork(path.join(__dirname, 'server.js'));
-}
-
-function createWindow() {
-    win = new BrowserWindow({
-        width: 1200,
-        height: 800,
-        frame: false,
-        titleBarStyle: "hidden",
-        webPreferences: {
-            preload: path.join(__dirname, "preload.js"),
-            nodeIntegration: false,
-            contextIsolation: true
-        }
-    });
-
-    win.setMenu(null);
-    win.loadURL('http://localhost:54322');
-}
-
-ipcMain.on("win:minimize", () => win.minimize());
-ipcMain.on("win:maximize", () => win.maximize());
-ipcMain.on("win:close", () => win.close());
-
-app.whenReady().then(() => {
-    startBackend();
-    createWindow();
-});
-
-app.on('window-all-closed', () => {
-    if (backend) backend.kill();
-    app.quit();
-});
--- a/docker/package-lock.json
+++ b/docker/package-lock.json
@@ -17,6 +17,7 @@
        "fastify": "^5.6.2",
        "jsonwebtoken": "^9.0.3",
        "node-addon-api": "^8.5.0",
+        "node-cron": "^4.2.1",
        "playwright-chromium": "^1.57.0",
        "sqlite3": "^5.1.7"
      },
@@ -2230,6 +2231,15 @@
        "node": "^18 || ^20 || >= 21"
      }
    },
+    "node_modules/node-cron": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/node-cron/-/node-cron-4.2.1.tgz",
+      "integrity": "sha512-lgimEHPE/QDgFlywTd8yTR61ptugX3Qer29efeyWw2rv259HtGBNn1vZVmp8lB9uo9wC0t/AT4iGqXxia+CJFg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
    "node_modules/node-gyp": {
      "version": "12.1.0",
      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-12.1.0.tgz",
--- a/docker/package.json
+++ b/docker/package.json
@@ -20,6 +20,7 @@
    "fastify": "^5.6.2",
    "jsonwebtoken": "^9.0.3",
    "node-addon-api": "^8.5.0",
+    "node-cron": "^4.2.1",
    "playwright-chromium": "^1.57.0",
    "sqlite3": "^5.1.7"
  },
--- a/docker/preload.js
+++ b/docker/preload.js
@@ -1,10 +0,0 @@
-const { contextBridge, ipcRenderer } = require("electron");
-
-contextBridge.exposeInMainWorld("electronAPI", {
-    isElectron: true,
-    win: {
-        minimize: () => ipcRenderer.send("win:minimize"),
-        maximize: () => ipcRenderer.send("win:maximize"),
-        close: () => ipcRenderer.send("win:close")
-    }
-});
--- a/docker/server.js
+++ b/docker/server.js
@@ -4,26 +4,25 @@ const fastify = require("fastify")({

 const path = require("path");
 const jwt = require("jsonwebtoken");
-const { initHeadless } = require("./electron/shared/headless");
-const { initDatabase } = require("./electron/shared/database");
-const { loadExtensions } = require("./electron/shared/extensions");
+const cron = require("node-cron");
+const { initHeadless } = require("./dist/shared/headless");
+const { initDatabase } = require("./dist/shared/database");
+const { loadExtensions } = require("./dist/shared/extensions");
+const {refreshTrendingAnime, refreshTopAiringAnime} = require("./dist/api/anime/anime.service");
+const {refreshPopularBooks, refreshTrendingBooks} = require("./dist/api/books/books.service");
 const dotenv = require("dotenv");
-const envPath = process.resourcesPath
-  ? path.join(process.resourcesPath, ".env")
-  : path.join(__dirname, ".env");

-// Attempt to load it and log the result to be sure
-dotenv.config({ path: envPath });
+dotenv.config();

-const viewsRoutes = require("./electron/views/views.routes");
-const animeRoutes = require("./electron/api/anime/anime.routes");
-const booksRoutes = require("./electron/api/books/books.routes");
-const proxyRoutes = require("./electron/api/proxy/proxy.routes");
-const extensionsRoutes = require("./electron/api/extensions/extensions.routes");
-const galleryRoutes = require("./electron/api/gallery/gallery.routes");
-const userRoutes = require("./electron/api/user/user.routes");
-const listRoutes = require("./electron/api/list/list.routes");
-const anilistRoute = require("./electron/api/anilist/anilist");
+const viewsRoutes = require("./dist/views/views.routes");
+const animeRoutes = require("./dist/api/anime/anime.routes");
+const booksRoutes = require("./dist/api/books/books.routes");
+const proxyRoutes = require("./dist/api/proxy/proxy.routes");
+const extensionsRoutes = require("./dist/api/extensions/extensions.routes");
+const galleryRoutes = require("./dist/api/gallery/gallery.routes");
+const userRoutes = require("./dist/api/user/user.routes");
+const listRoutes = require("./dist/api/list/list.routes");
+const anilistRoute = require("./dist/api/anilist/anilist");

 fastify.addHook("preHandler", async (request) => {
  const auth = request.headers.authorization;
@@ -65,6 +64,8 @@ fastify.register(userRoutes, { prefix: "/api" });
 fastify.register(anilistRoute, { prefix: "/api" });
 fastify.register(listRoutes, { prefix: "/api" });

+const sleep = ms => new Promise(r => setTimeout(r, ms));
+
 const start = async () => {
  try {
    initDatabase("anilist");
@@ -72,12 +73,31 @@ const start = async () => {
    initDatabase("cache");
    initDatabase("userdata");

+    const refreshAll = async () => {
+      await refreshTrendingAnime();
+      await sleep(300);
+      await refreshTopAiringAnime();
+      await sleep(300);
+      await refreshTrendingBooks();
+      await sleep(300);
+      await refreshPopularBooks();
+    };
+
+    cron.schedule("*/30 * * * *", async () => {
+      try {
+        await refreshAll();
+        console.log("cache refreshed");
+      } catch (e) {
+        console.error("refresh failed", e);
+      }
+    });
+
    await loadExtensions();
+    await initHeadless();
+    await refreshAll();

    await fastify.listen({ port: 54322, host: "0.0.0.0" });
-    console.log(`Server is now running!`);
-
-    await initHeadless();
+    console.log(`Server running at http://localhost:54322`);
  } catch (err) {
    fastify.log.error(err);
    process.exit(1);
--- a/docker/src/api/anime/anime.service.ts
+++ b/docker/src/api/anime/anime.service.ts
@@ -3,7 +3,6 @@ import { queryAll, queryOne } from '../../shared/database';
 import {Anime, Episode, Extension, StreamData} from '../types';

 const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
-const TTL = 60 * 60 * 6;

 const ANILIST_URL = "https://graphql.anilist.co";

@@ -79,6 +78,54 @@ const MEDIA_FIELDS = `
  }
 `;

+export async function refreshTrendingAnime(): Promise<void> {
+    const query = `
+      query {
+        Page(page: 1, perPage: 10) {
+          media(type: ANIME, sort: TRENDING_DESC) { ${MEDIA_FIELDS} }
+        }
+      }
+    `;
+
+    const data = await fetchAniList(query, {});
+    const list = data?.Page?.media || [];
+    const now = Math.floor(Date.now() / 1000);
+
+    await queryOne("DELETE FROM trending");
+
+    let rank = 1;
+    for (const anime of list) {
+        await queryOne(
+            "INSERT INTO trending (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
+            [rank++, anime.id, JSON.stringify(anime), now]
+        );
+    }
+}
+
+export async function refreshTopAiringAnime(): Promise<void> {
+    const query = `
+      query {
+        Page(page: 1, perPage: 10) {
+          media(type: ANIME, status: RELEASING, sort: SCORE_DESC) { ${MEDIA_FIELDS} }
+        }
+      }
+    `;
+
+    const data = await fetchAniList(query, {});
+    const list = data?.Page?.media || [];
+    const now = Math.floor(Date.now() / 1000);
+
+    await queryOne("DELETE FROM top_airing");
+
+    let rank = 1;
+    for (const anime of list) {
+        await queryOne(
+            "INSERT INTO top_airing (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
+            [rank++, anime.id, JSON.stringify(anime), now]
+        );
+    }
+}
+
 async function fetchAniList(query: string, variables: any) {
    const res = await fetch(ANILIST_URL, {
        method: "POST",
@@ -119,76 +166,16 @@ export async function getAnimeById(id: string | number): Promise<Anime | { error

 export async function getTrendingAnime(): Promise<Anime[]> {
    const rows = await queryAll(
-        "SELECT full_data, updated_at FROM trending ORDER BY rank ASC LIMIT 10"
+        "SELECT full_data FROM trending ORDER BY rank ASC LIMIT 10"
    );
-
-    if (rows.length) {
-        const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
-        if (!expired) {
-            return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
-        }
-    }
-
-    const query = `
-    query {
-      Page(page: 1, perPage: 10) {
-        media(type: ANIME, sort: TRENDING_DESC) { ${MEDIA_FIELDS} }
-      }
-    }
-  `;
-
-    const data = await fetchAniList(query, {});
-    const list = data?.Page?.media || [];
-    const now = Math.floor(Date.now() / 1000);
-
-    await queryOne("DELETE FROM trending");
-    let rank = 1;
-
-    for (const anime of list) {
-        await queryOne(
-            "INSERT INTO trending (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
-            [rank++, anime.id, JSON.stringify(anime), now]
-        );
-    }
-
-    return list;
+    return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
 }

 export async function getTopAiringAnime(): Promise<Anime[]> {
    const rows = await queryAll(
-        "SELECT full_data, updated_at FROM top_airing ORDER BY rank ASC LIMIT 10"
+        "SELECT full_data FROM top_airing ORDER BY rank ASC LIMIT 10"
    );
-
-    if (rows.length) {
-        const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
-        if (!expired) {
-            return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
-        }
-    }
-
-    const query = `
-    query {
-      Page(page: 1, perPage: 10) {
-        media(type: ANIME, status: RELEASING, sort: SCORE_DESC) { ${MEDIA_FIELDS} }
-      }
-    }
-  `;
-
-    const data = await fetchAniList(query, {});
-    const list = data?.Page?.media || [];
-    const now = Math.floor(Date.now() / 1000);
-
-    await queryOne("DELETE FROM top_airing");
-    let rank = 1;
-
-    for (const anime of list) {
-        await queryOne(
-            "INSERT INTO top_airing (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
-            [rank++, anime.id, JSON.stringify(anime), now]
-        );
-    }
-
-    return list;
+    return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
 }

 export async function searchAnimeLocal(query: string): Promise<Anime[]> {
--- a/docker/src/api/books/books.controller.ts
+++ b/docker/src/api/books/books.controller.ts
@@ -87,15 +87,16 @@ export async function getChapters(req: any, reply: FastifyReply) {
    try {
        const { id } = req.params;
        const source = req.query.source || 'anilist';
+        const provider = req.query.provider;

        const isExternal = source !== 'anilist';
-        return await booksService.getChaptersForBook(id, isExternal);
-    } catch {
+        return await booksService.getChaptersForBook(id, isExternal, provider);
+    } catch (err) {
+        console.error(err);
        return { chapters: [] };
    }
 }

-
 export async function getChapterContent(req: any, reply: FastifyReply) {
    try {
        const { bookId, chapter, provider } = req.params;
--- a/docker/src/api/books/books.service.ts
+++ b/docker/src/api/books/books.service.ts
@@ -4,7 +4,6 @@ import { getAllExtensions, getBookExtensionsMap } from '../../shared/extensions'
 import { Book, Extension, ChapterWithProvider, ChapterContent } from '../types';

 const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
-const TTL = 60 * 60 * 6;
 const ANILIST_URL = "https://graphql.anilist.co";

 async function fetchAniList(query: string, variables: any) {
@@ -134,25 +133,14 @@ export async function getBookById(id: string | number): Promise<Book | { error:
    return { error: "Book not found" };
 }

-export async function getTrendingBooks(): Promise<Book[]> {
-    const rows = await queryAll(
-        "SELECT full_data, updated_at FROM trending_books ORDER BY rank ASC LIMIT 10"
-    );
-
-    if (rows.length) {
-        const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
-        if (!expired) {
-            return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
-        }
-    }
-
+export async function refreshTrendingBooks(): Promise<void> {
    const query = `
-    query {
-      Page(page: 1, perPage: 10) {
-        media(type: MANGA, sort: TRENDING_DESC) { ${MEDIA_FIELDS} }
+      query {
+        Page(page: 1, perPage: 10) {
+          media(type: MANGA, sort: TRENDING_DESC) { ${MEDIA_FIELDS} }
+        }
      }
-    }
-  `;
+    `;

    const data = await fetchAniList(query, {});
    const list = data?.Page?.media || [];
@@ -167,30 +155,16 @@ export async function getTrendingBooks(): Promise<Book[]> {
            [rank++, book.id, JSON.stringify(book), now]
        );
    }
-
-    return list;
 }

-
-export async function getPopularBooks(): Promise<Book[]> {
-    const rows = await queryAll(
-        "SELECT full_data, updated_at FROM popular_books ORDER BY rank ASC LIMIT 10"
-    );
-
-    if (rows.length) {
-        const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
-        if (!expired) {
-            return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
-        }
-    }
-
+export async function refreshPopularBooks(): Promise<void> {
    const query = `
-    query {
-      Page(page: 1, perPage: 10) {
-        media(type: MANGA, sort: POPULARITY_DESC) { ${MEDIA_FIELDS} }
+      query {
+        Page(page: 1, perPage: 10) {
+          media(type: MANGA, sort: POPULARITY_DESC) { ${MEDIA_FIELDS} }
+        }
      }
-    }
-  `;
+    `;

    const data = await fetchAniList(query, {});
    const list = data?.Page?.media || [];
@@ -205,10 +179,21 @@ export async function getPopularBooks(): Promise<Book[]> {
            [rank++, book.id, JSON.stringify(book), now]
        );
    }
-
-    return list;
 }

+export async function getTrendingBooks(): Promise<Book[]> {
+    const rows = await queryAll(
+        "SELECT full_data FROM trending_books ORDER BY rank ASC LIMIT 10"
+    );
+    return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
+}
+
+export async function getPopularBooks(): Promise<Book[]> {
+    const rows = await queryAll(
+        "SELECT full_data FROM popular_books ORDER BY rank ASC LIMIT 10"
+    );
+    return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
+}

 export async function searchBooksLocal(query: string): Promise<Book[]> {
    if (!query || query.length < 2) {
--- a/docker/src/api/extensions/extensions.controller.ts
+++ b/docker/src/api/extensions/extensions.controller.ts
@@ -1,6 +1,59 @@
 import { FastifyReply, FastifyRequest } from 'fastify';
 import { getExtension, getExtensionsList, getGalleryExtensionsMap, getBookExtensionsMap, getAnimeExtensionsMap, saveExtensionFile, deleteExtensionFile } from '../../shared/extensions';
 import { ExtensionNameRequest } from '../types';
+import path from 'path';
+import fs from 'fs/promises';
+
+const TYPE_MAP: Record<string, string> = {
+    'anime-board': 'anime',
+    'image-board': 'image',
+    'book-board': 'book',
+};
+
+function extractProp(source: string, prop: string): string | null {
+    const m = source.match(new RegExp(`this\\.${prop}\\s*=\\s*["']([^"']+)["']`));
+    return m ? m[1] : null;
+}
+
+function isNewer(remote: string, local?: string | null) {
+    if (!local) return true;
+    return remote !== local;
+}
+
+export async function updateExtensions(req: any, reply: FastifyReply) {
+    const updated: string[] = [];
+
+    for (const name of getExtensionsList()) {
+        const ext = getExtension(name);
+        if (!ext) continue;
+
+        const type = ext.type;
+        if (!TYPE_MAP[type]) continue;
+
+        const fileName = ext.__fileName;
+        const remoteUrl = `https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/${TYPE_MAP[type]}/${fileName}`;
+
+        let remoteSrc: string;
+        try {
+            const res = await fetch(remoteUrl);
+            if (!res.ok) continue;
+            remoteSrc = await res.text();
+        } catch {
+            continue;
+        }
+
+        const remoteVersion = extractProp(remoteSrc, 'version');
+        const localVersion = ext.version ?? null;
+        if (!remoteVersion) continue;
+
+        if (isNewer(remoteVersion, localVersion)) {
+            await saveExtensionFile(fileName, remoteUrl);
+            updated.push(name);
+        }
+    }
+
+    return { updated };
+}

 export async function getExtensions(req: FastifyRequest, reply: FastifyReply) {
    return { extensions: getExtensionsList() };
@@ -37,24 +90,33 @@ export async function getExtensionSettings(req: ExtensionNameRequest, reply: Fas
 }

 export async function installExtension(req: any, reply: FastifyReply) {
-    const { fileName } = req.body;
+    const { url } = req.body;

-    if (!fileName || !fileName.endsWith('.js')) {
-        return reply.code(400).send({ error: "Invalid extension fileName provided" });
+    if (!url || typeof url !== 'string' || !url.endsWith('.js')) {
+        return reply.code(400).send({ error: "Invalid extension URL provided" });
    }

    try {
+        const fileName = url.split('/').pop();

-        const downloadUrl = `https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/${fileName}`
+        if (!fileName) {
+            return reply.code(400).send({ error: "Could not determine file name from URL" });
+        }

-        await saveExtensionFile(fileName, downloadUrl);
+        await saveExtensionFile(fileName, url);

        req.server.log.info(`Extension installed: ${fileName}`);
-        return reply.code(200).send({ success: true, message: `Extension ${fileName} installed successfully.` });
+        return reply.code(200).send({
+            success: true,
+            message: `Extension ${fileName} installed successfully.`,
+        });

    } catch (error) {
-        req.server.log.error(`Failed to install extension ${fileName}:`, error);
-        return reply.code(500).send({ success: false, error: `Failed to install extension ${fileName}.` });
+        req.server.log.error(`Failed to install extension from ${url}:`, error);
+        return reply.code(500).send({
+            success: false,
+            error: "Failed to install extension.",
+        });
    }
 }

--- a/docker/src/api/extensions/extensions.routes.ts
+++ b/docker/src/api/extensions/extensions.routes.ts
@@ -4,6 +4,7 @@ import * as controller from './extensions.controller';
 async function extensionsRoutes(fastify: FastifyInstance) {
    fastify.get('/extensions', controller.getExtensions);
    fastify.get('/extensions/anime', controller.getAnimeExtensions);
+    fastify.post('/extensions/update', controller.updateExtensions);
    fastify.get('/extensions/book', controller.getBookExtensions);
    fastify.get('/extensions/gallery', controller.getGalleryExtensions);
    fastify.get('/extensions/:name/settings', controller.getExtensionSettings);
--- a/docker/src/api/user/user.controller.ts
+++ b/docker/src/api/user/user.controller.ts
@@ -168,20 +168,39 @@ export async function deleteUser(req: FastifyRequest, reply: FastifyReply) {
        const { id } = req.params as { id: string };
        const userId = parseInt(id, 10);

+        const body = (req.body ?? {}) as { password?: string };
+        const password = body.password;
+
        if (!userId || isNaN(userId)) {
            return reply.code(400).send({ error: "Invalid user id" });
        }

-        const result = await userService.deleteUser(userId);
-
-        if (result && result.changes > 0) {
-            return { success: true, message: "User deleted successfully" };
-        } else {
+        const user = await userService.getUserById(userId);
+        if (!user) {
            return reply.code(404).send({ error: "User not found" });
        }

+        if (user.has_password) {
+            if (!password) {
+                return reply.code(401).send({ error: "Password required" });
+            }
+
+            const isValid = await userService.verifyPassword(userId, password);
+            if (!isValid) {
+                return reply.code(401).send({ error: "Incorrect password" });
+            }
+        }
+
+        const result = await userService.deleteUser(userId);
+
+        if (result.changes > 0) {
+            return reply.send({ success: true });
+        }
+
+        return reply.code(500).send({ error: "Failed to delete user" });
+
    } catch (err) {
-        console.error("Delete User Error:", (err as Error).message);
+        console.error("Delete User Error:", err);
        return reply.code(500).send({ error: "Failed to delete user" });
    }
 }
@@ -246,16 +265,17 @@ export async function changePassword(req: FastifyRequest, reply: FastifyReply) {
            return reply.code(404).send({ error: "User not found" });
        }

-        // Si el usuario tiene contraseña actual, debe proporcionar la contraseña actual
-        if (user.has_password && currentPassword) {
-            const isValid = await userService.verifyPassword(userId, currentPassword);
+        if (user.has_password) {
+            if (!currentPassword) {
+                return reply.code(401).send({ error: "Current password required" });
+            }

+            const isValid = await userService.verifyPassword(userId, currentPassword);
            if (!isValid) {
                return reply.code(401).send({ error: "Current password is incorrect" });
            }
        }

-        // Actualizar la contraseña (null para eliminarla, string para establecerla)
        await userService.updateUser(userId, { password: newPassword });

        return reply.send({
--- a/docker/src/scripts/anime/player.js
+++ b/docker/src/scripts/anime/player.js
@@ -7,6 +7,10 @@ let currentExtension = '';
 let plyrInstance;
 let hlsInstance;
 let totalEpisodes = 0;
+let aniSkipData = null;
+
+let isAnilist = false;
+let malId = null;

 const params = new URLSearchParams(window.location.search);
 const firstKey = params.keys().next().value;
@@ -20,6 +24,18 @@ const href = extName
 document.getElementById('back-link').href = href;
 document.getElementById('episode-label').innerText = `Episode ${currentEpisode}`;

+async function loadAniSkip(malId, episode, duration) {
+    try {
+        const res = await fetch(`https://api.aniskip.com/v2/skip-times/${malId}/${episode}?types[]=op&types[]=ed&episodeLength=${duration}`);
+        if (!res.ok) return null;
+        const data = await res.json();
+        return data.results || [];
+    } catch (error) {
+        console.error('Error loading AniSkip data:', error);
+        return null;
+    }
+}
+
 async function loadMetadata() {
    try {
        const extQuery = extName ? `?source=${extName}` : "?source=anilist";
@@ -40,11 +56,8 @@ async function loadMetadata() {
        let format = '';
        let seasonYear = '';
        let season = '';
-        let episodesCount = 0;
-        let characters = [];

        if (isAnilistFormat) {
-
            title = data.title.romaji || data.title.english || data.title.native || 'Anime Title';
            description = data.description || 'No description available.';
            coverImage = data.coverImage?.large || data.coverImage?.medium || '';
@@ -62,20 +75,18 @@ async function loadMetadata() {
            seasonYear = data.year || '';
        }

+        if (isAnilistFormat && data.idMal) {
+            isAnilist = true;
+            malId = data.idMal;
+        } else {
+            isAnilist = false;
+            malId = null;
+        }
+
        document.getElementById('anime-title-details').innerText = title;
        document.getElementById('anime-title-details2').innerText = title;
        document.title = `Watching ${title} - Ep ${currentEpisode}`;

-        fetch("/api/rpc", {
-            method: "POST",
-            headers: {"Content-Type": "application/json"},
-            body: JSON.stringify({
-                details: title,
-                state: `Episode ${currentEpisode}`,
-                mode: "watching"
-            })
-        });
-
        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = description;
        document.getElementById('detail-description').innerText = tempDiv.textContent || tempDiv.innerText || 'No description available.';
@@ -116,6 +127,102 @@ async function loadMetadata() {
    }
 }

+async function applyAniSkip(video) {
+    if (!isAnilist || !malId) {
+        console.log('AniSkip disabled: isAnilist=' + isAnilist + ', malId=' + malId);
+        return;
+    }
+
+    console.log('Loading AniSkip for MAL ID:', malId, 'Episode:', currentEpisode);
+
+    aniSkipData = await loadAniSkip(
+        malId,
+        currentEpisode,
+        Math.floor(video.duration)
+    );
+
+    console.log('AniSkip data received:', aniSkipData);
+
+    if (!aniSkipData || aniSkipData.length === 0) {
+        console.log('No AniSkip data available');
+        return;
+    }
+
+    let op, ed;
+    const markers = [];
+
+    aniSkipData.forEach(item => {
+        const { startTime, endTime } = item.interval;
+
+        if (item.skipType === 'op') {
+            op = { start: startTime, end: endTime };
+            markers.push({
+                start: startTime,
+                end: endTime,
+                label: 'Opening'
+            });
+
+            console.log('Opening found:', startTime, '-', endTime);
+        }
+
+        if (item.skipType === 'ed') {
+            ed = { start: startTime, end: endTime };
+            markers.push({
+                start: startTime,
+                end: endTime,
+                label: 'Ending'
+            });
+
+            console.log('Ending found:', startTime, '-', endTime);
+        }
+    });
+
+    // Crear markers visuales en el DOM
+    if (plyrInstance && markers.length > 0) {
+        console.log('Creating visual markers:', markers);
+
+        // Esperar a que el player esté completamente cargado
+        setTimeout(() => {
+            const progressContainer = document.querySelector('.plyr__progress');
+            if (!progressContainer) {
+                console.error('Progress container not found');
+                return;
+            }
+
+            // Eliminar markers anteriores si existen
+            const oldMarkers = progressContainer.querySelector('.plyr__markers');
+            if (oldMarkers) oldMarkers.remove();
+
+            // Crear contenedor de markers
+            const markersContainer = document.createElement('div');
+            markersContainer.className = 'plyr__markers';
+
+            markers.forEach(marker => {
+                const markerElement = document.createElement('div');
+                markerElement.className = 'plyr__marker';
+                markerElement.dataset.label = marker.label;
+
+                const startPercent = (marker.start / video.duration) * 100;
+                const widthPercent = ((marker.end - marker.start) / video.duration) * 100;
+
+                markerElement.style.left = `${startPercent}%`;
+                markerElement.style.width = `${widthPercent}%`;
+
+                markerElement.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    video.currentTime = marker.start;
+                });
+
+                markersContainer.appendChild(markerElement);
+            });
+
+
+            progressContainer.appendChild(markersContainer);
+            console.log('Visual markers created successfully');
+        }, 500);
+    }
+}
+
 async function loadExtensionEpisodes() {
    try {
        const extQuery = extName ? `?source=${extName}` : "?source=anilist";
@@ -127,7 +234,6 @@ async function loadExtensionEpisodes() {
        if (Array.isArray(data) && data.length > 0) {
            populateEpisodeCarousel(data);
        } else {
-
            const fallback = [];
            for (let i = 1; i <= totalEpisodes; i++) {
                fallback.push({ number: i, title: null, thumbnail: null });
@@ -142,6 +248,8 @@ async function loadExtensionEpisodes() {

 function populateEpisodeCarousel(episodesData) {
    const carousel = document.getElementById('episode-carousel');
+    if (!carousel) return;
+
    carousel.innerHTML = '';

    episodesData.forEach((ep, index) => {
@@ -329,9 +437,8 @@ function playVideo(url, subtitles = []) {

    if (plyrInstance) plyrInstance.destroy();

-    while (video.textTracks.length > 0) {
-        video.removeChild(video.textTracks[0]);
-    }
+    const existingTracks = video.querySelectorAll('track');
+    existingTracks.forEach(track => track.remove());

    subtitles.forEach(sub => {
        if (!sub.url) return;
@@ -347,7 +454,15 @@ function playVideo(url, subtitles = []) {
    plyrInstance = new Plyr(video, {
        captions: { active: true, update: true, language: 'en' },
        controls: ['play-large', 'play', 'progress', 'current-time', 'duration', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
-        settings: ['captions', 'quality', 'speed']
+        settings: ['captions', 'quality', 'speed'],
+        markers: {
+            enabled: true,
+            points: []
+        }
+    });
+
+    video.addEventListener('loadedmetadata', () => {
+        applyAniSkip(video);
    });

    let alreadyTriggered = false;
@@ -363,7 +478,6 @@ function playVideo(url, subtitles = []) {
        }
    });

-
    video.play().catch(() => console.log("Autoplay blocked"));
 }

@@ -392,7 +506,6 @@ if (currentEpisode <= 1) {
    document.getElementById('prev-btn').disabled = true;
 }

-
 async function sendProgress() {
    const token = localStorage.getItem('token');
    if (!token) return;
@@ -425,7 +538,5 @@ async function sendProgress() {
    }
 }

-
 loadMetadata();
 loadExtensions();
-
--- a/docker/src/scripts/books/book.js
+++ b/docker/src/scripts/books/book.js
@@ -6,6 +6,8 @@ let bookSlug = null;
 let allChapters = [];
 let filteredChapters = [];

+let availableExtensions = [];
+
 const chapterPagination = Object.create(PaginationManager);
 chapterPagination.init(12, () => renderChapterTable());

@@ -16,7 +18,6 @@ document.addEventListener('DOMContentLoaded', () => {

 async function init() {
    try {
-
        const urlData = URLUtils.parseEntityPath('book');
        if (!urlData) {
            showError("Book Not Found");
@@ -29,6 +30,7 @@ async function init() {

        await loadBookMetadata();

+        await loadAvailableExtensions();
        await loadChapters();

        await setupAddToListButton();
@@ -39,11 +41,23 @@ async function init() {
    }
 }

+async function loadAvailableExtensions() {
+    try {
+        const res = await fetch('/api/extensions/book');
+        const data = await res.json();
+        availableExtensions = data.extensions || [];
+
+        setupProviderFilter();
+    } catch (err) {
+        console.error("Error fetching extensions:", err);
+    }
+}
+
 async function loadBookMetadata() {
    const source = extensionName || 'anilist';
    const fetchUrl = `/api/book/${bookId}?source=${source}`;

-    const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() });
+    const res = await fetch(fetchUrl);
    const data = await res.json();

    if (data.error || !data) {
@@ -154,17 +168,27 @@ function updateCustomAddButton() {
    }
 }

-async function loadChapters() {
+async function loadChapters(targetProvider = null) {
    const tbody = document.getElementById('chapters-body');
    if (!tbody) return;

-    tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">Searching extensions for chapters...</td></tr>';
+    // Si no se pasa provider, intentamos pillar el del select o el primero disponible
+    if (!targetProvider) {
+        const select = document.getElementById('provider-filter');
+        targetProvider = select ? select.value : (availableExtensions[0] || 'all');
+    }
+
+    tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">Searching extension for chapters...</td></tr>';

    try {
        const source = extensionName || 'anilist';
-        const fetchUrl = `/api/book/${bookId}/chapters?source=${source}`;
+        // Añadimos el query param 'provider' para que el backend filtre
+        let fetchUrl = `/api/book/${bookId}/chapters?source=${source}`;
+        if (targetProvider !== 'all') {
+            fetchUrl += `&provider=${targetProvider}`;
+        }

-        const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() });
+        const res = await fetch(fetchUrl);
        const data = await res.json();

        allChapters = data.chapters || [];
@@ -175,18 +199,17 @@ async function loadChapters() {
        const totalEl = document.getElementById('total-chapters');

        if (allChapters.length === 0) {
-            tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters found on loaded extensions.</td></tr>';
+            tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters found.</td></tr>';
            if (totalEl) totalEl.innerText = "0 Found";
            return;
        }

        if (totalEl) totalEl.innerText = `${allChapters.length} Found`;

-        setupProviderFilter();
-
        setupReadButton();

        chapterPagination.setTotalItems(filteredChapters.length);
+        chapterPagination.reset();
        renderChapterTable();

    } catch (err) {
@@ -211,44 +234,31 @@ function applyChapterFilter() {

 function setupProviderFilter() {
    const select = document.getElementById('provider-filter');
-    if (!select) return;
-
-    const providers = [...new Set(allChapters.map(ch => ch.provider))];
-
-    if (providers.length === 0) return;
+    if (!select || availableExtensions.length === 0) return;

    select.style.display = 'inline-block';
-    select.innerHTML = '<option value="all">All Providers</option>';
+    select.innerHTML = '';

-    providers.forEach(prov => {
+    const allOpt = document.createElement('option');
+    allOpt.value = 'all';
+    allOpt.innerText = 'Load All (Slower)';
+    select.appendChild(allOpt);
+
+    availableExtensions.forEach(ext => {
        const opt = document.createElement('option');
-        opt.value = prov;
-        opt.innerText = prov;
+        opt.value = ext;
+        opt.innerText = ext.charAt(0).toUpperCase() + ext.slice(1);
        select.appendChild(opt);
    });

-    if (extensionName) {
-        const extensionProvider = providers.find(
-            p => p.toLowerCase() === extensionName.toLowerCase()
-        );
-
-        if (extensionProvider) {
-            select.value = extensionProvider;
-            filteredChapters = allChapters.filter(ch => ch.provider === extensionProvider);
-        }
+    if (extensionName && availableExtensions.includes(extensionName)) {
+        select.value = extensionName;
+    } else if (availableExtensions.length > 0) {
+        select.value = availableExtensions[0];
    }

-    select.onchange = (e) => {
-        const selected = e.target.value;
-        if (selected === 'all') {
-            filteredChapters = [...allChapters];
-        } else {
-            filteredChapters = allChapters.filter(ch => ch.provider === selected);
-        }
-
-        chapterPagination.reset();
-        chapterPagination.setTotalItems(filteredChapters.length);
-        renderChapterTable();
+    select.onchange = () => {
+        loadChapters(select.value);
    };
 }

--- a/docker/src/scripts/books/reader.js
+++ b/docker/src/scripts/books/reader.js
@@ -145,18 +145,6 @@ async function loadChapter() {

        setupProgressTracking(data, source);

-        const res2 = await fetch(`/api/book/${bookId}?source=${source}`);
-        const data2 = await res2.json();
-
-        fetch("/api/rpc", {
-            method: "POST",
-            headers: {"Content-Type": "application/json"},
-            body: JSON.stringify({
-                details: data2.title.romaji ?? data2.title,
-                state: `Chapter ${data.title}`,
-                mode: "reading"
-            })
-        });
        if (data.error) {
            reader.innerHTML = `
                <div class="loading-container">
--- a/docker/src/scripts/list.js
+++ b/docker/src/scripts/list.js
@@ -29,20 +29,32 @@ async function populateSourceFilter() {
    `;

    try {
-        const response = await fetch(`${API_BASE}/extensions`);
-        if (response.ok) {
-            const data = await response.json();
-            const extensions = data.extensions || [];
+        const [animeRes, bookRes] = await Promise.all([
+            fetch(`${API_BASE}/extensions/anime`),
+            fetch(`${API_BASE}/extensions/book`)
+        ]);

-            extensions.forEach(extName => {
-                if (extName.toLowerCase() !== 'anilist' && extName.toLowerCase() !== 'local') {
-                    const option = document.createElement('option');
-                    option.value = extName;
-                    option.textContent = extName.charAt(0).toUpperCase() + extName.slice(1);
-                    select.appendChild(option);
-                }
-            });
+        const extensions = new Set();
+
+        if (animeRes.ok) {
+            const data = await animeRes.json();
+            (data.extensions || []).forEach(ext => extensions.add(ext));
        }
+
+        if (bookRes.ok) {
+            const data = await bookRes.json();
+            (data.extensions || []).forEach(ext => extensions.add(ext));
+        }
+
+        extensions.forEach(extName => {
+            const lower = extName.toLowerCase();
+            if (lower !== 'anilist' && lower !== 'local') {
+                const option = document.createElement('option');
+                option.value = extName;
+                option.textContent = extName.charAt(0).toUpperCase() + extName.slice(1);
+                select.appendChild(option);
+            }
+        });
    } catch (error) {
        console.error('Error loading extensions:', error);
    }
--- a/docker/src/scripts/marketplace.js
+++ b/docker/src/scripts/marketplace.js
@@ -1,422 +1,262 @@
-const GITEA_INSTANCE = 'https://git.waifuboard.app';
-const REPO_OWNER = 'ItsSkaiya';
-const REPO_NAME = 'WaifuBoard-Extensions';
-let DETECTED_BRANCH = 'main';
-const API_URL_BASE = `${GITEA_INSTANCE}/api/v1/repos/${REPO_OWNER}/${REPO_NAME}/contents`;
-
+const ORIGINAL_MARKETPLACE_URL = 'https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/marketplace.json';
+const MARKETPLACE_JSON_URL = `/api/proxy?url=${encodeURIComponent(ORIGINAL_MARKETPLACE_URL)}`;
 const INSTALLED_EXTENSIONS_API = '/api/extensions';
+const UPDATE_EXTENSIONS_API = '/api/extensions/update';

-const extensionsGrid = document.getElementById('extensions-grid');
+const marketplaceContent = document.getElementById('marketplace-content');
 const filterSelect = document.getElementById('extension-filter');
+const updateAllBtn = document.getElementById('btn-update-all');

-let allExtensionsData = [];
-
-const customModal = document.getElementById('customModal');
+const modal = document.getElementById('customModal');
 const modalTitle = document.getElementById('modalTitle');
 const modalMessage = document.getElementById('modalMessage');
+const modalConfirmBtn = document.getElementById('modalConfirmButton');
+const modalCloseBtn = document.getElementById('modalCloseButton');

-function getRawUrl(filename) {
+let marketplaceMetadata = {};
+let installedExtensions = [];
+let currentTab = 'marketplace';

-    const targetUrl = `${GITEA_INSTANCE}/${REPO_OWNER}/${REPO_NAME}/raw/branch/main/${filename}`;
-
-    const encodedUrl = encodeURIComponent(targetUrl);
-
-    return `/api/proxy?url=${encodedUrl}`;
-}
-
-function updateExtensionState(fileName, installed) {
-    const ext = allExtensionsData.find(e => e.fileName === fileName);
-    if (!ext) return;
-
-    ext.isInstalled = installed;
-    ext.isLocal = installed && ext.isLocal;
-
-    filterAndRenderExtensions(filterSelect?.value || 'All');
-}
-
-function formatExtensionName(fileName) {
-    return fileName.replace('.js', '')
-        .replace(/([a-z])([A-Z])/g, '$1 $2')
-        .replace(/^[a-z]/, (char) => char.toUpperCase());
-}
-
-function getIconUrl(extensionDetails) {
-    return extensionDetails;
-}
-
-async function getExtensionDetails(url) {
+async function loadMarketplace() {
+    showSkeletons();
    try {
-        const res = await fetch(url);
-        if (!res.ok) throw new Error(`Fetch failed: ${res.status}`);
-        const text = await res.text();
+        const [metaRes, installedRes] = await Promise.all([
+            fetch(MARKETPLACE_JSON_URL).then(res => res.json()),
+            fetch(INSTALLED_EXTENSIONS_API).then(res => res.json())
+        ]);

-        const regex = /(?:this\.|const\s+|let\s+|var\s+)?baseUrl\s*=\s*(["'`])(.*?)\1/i;
-        const match = text.match(regex);
-        let finalHostname = null;
-        if (match && match[2]) {
-            let rawUrl = match[2].trim();
-            if (!rawUrl.startsWith('http')) rawUrl = 'https://' + rawUrl;
-            try {
-                const urlObj = new URL(rawUrl);
-                finalHostname = urlObj.hostname;
-            } catch(e) {
-                console.warn(`Could not parse baseUrl: ${rawUrl}`);
-            }
+        marketplaceMetadata = metaRes.extensions;
+        installedExtensions = (installedRes.extensions || []).map(e => e.toLowerCase());
+
+        initTabs();
+        renderGroupedView();
+
+        if (filterSelect) {
+            filterSelect.addEventListener('change', () => renderGroupedView());
        }

-        const classMatch = text.match(/class\s+(\w+)/);
-        const name = classMatch ? classMatch[1] : null;
-
-        let type = 'Image';
-        if (text.includes('type = "book-board"') || text.includes("type = 'book-board'")) type = 'Book';
-        else if (text.includes('type = "anime-board"') || text.includes("type = 'anime-board'")) type = 'Anime';
-
-        return { baseUrl: finalHostname, name, type };
-    } catch (e) {
-        return { baseUrl: null, name: null, type: 'Unknown' };
+        if (updateAllBtn) {
+            updateAllBtn.onclick = handleUpdateAll;
+        }
+    } catch (error) {
+        console.error('Error loading marketplace:', error);
+        marketplaceContent.innerHTML = `<div class="error-msg">Error al cargar el marketplace.</div>`;
    }
 }

-function showCustomModal(title, message, isConfirm = false) {
-    return new Promise(resolve => {
+function initTabs() {
+    const tabs = document.querySelectorAll('.tab-button');
+    tabs.forEach(tab => {
+        tab.onclick = () => {
+            tabs.forEach(t => t.classList.remove('active'));
+            tab.classList.add('active');
+            currentTab = tab.dataset.tab;

-        modalTitle.textContent = title;
-        modalMessage.textContent = message;
+            if (updateAllBtn) {
+                if (currentTab === 'installed') {
+                    updateAllBtn.classList.remove('hidden');
+                } else {
+                    updateAllBtn.classList.add('hidden');
+                }
+            }

-        const currentConfirmButton = document.getElementById('modalConfirmButton');
-        const currentCloseButton = document.getElementById('modalCloseButton');
-
-        const newConfirmButton = currentConfirmButton.cloneNode(true);
-        currentConfirmButton.parentNode.replaceChild(newConfirmButton, currentConfirmButton);
-
-        const newCloseButton = currentCloseButton.cloneNode(true);
-        currentCloseButton.parentNode.replaceChild(newCloseButton, currentCloseButton);
-
-        if (isConfirm) {
-
-            newConfirmButton.classList.remove('hidden');
-            newConfirmButton.textContent = 'Confirm';
-            newCloseButton.textContent = 'Cancel';
-        } else {
-
-            newConfirmButton.classList.add('hidden');
-            newCloseButton.textContent = 'Close';
-        }
-
-        const closeModal = (confirmed) => {
-            customModal.classList.add('hidden');
-            resolve(confirmed);
+            renderGroupedView();
        };
-
-        newConfirmButton.onclick = () => closeModal(true);
-        newCloseButton.onclick = () => closeModal(false);
-
-        customModal.classList.remove('hidden');
    });
 }

-function renderExtensionCard(extension, isInstalled, isLocalOnly = false) {
+async function handleUpdateAll() {
+    const originalText = updateAllBtn.innerText;
+    try {
+        updateAllBtn.disabled = true;
+        updateAllBtn.innerText = 'Updating...';

-    const extensionName = formatExtensionName(extension.fileName || extension.name);
-    const extensionType = extension.type || 'Unknown';
+        const res = await fetch(UPDATE_EXTENSIONS_API, { method: 'POST' });
+        if (!res.ok) throw new Error('Update failed');

-    let iconUrl;
+        const data = await res.json();

-    if (extension.baseUrl && extension.baseUrl !== 'Local Install') {
+        if (data.updated && data.updated.length > 0) {

-        iconUrl = `https://www.google.com/s2/favicons?domain=${extension.baseUrl}&sz=128`;
+            const list = data.updated.join(', ');
+            window.NotificationUtils.success(`Updated: ${list}`);
+
+            await loadMarketplace();
+        } else {
+            window.NotificationUtils.info('Everything is up to date.');
+        }
+    } catch (error) {
+        console.error('Update All Error:', error);
+        window.NotificationUtils.error('Failed to perform bulk update.');
+    } finally {
+        updateAllBtn.disabled = false;
+        updateAllBtn.innerText = originalText;
+    }
+}
+
+function renderGroupedView() {
+    marketplaceContent.innerHTML = '';
+    const activeFilter = filterSelect.value;
+    const groups = {};
+
+    let listToRender = [];
+
+    if (currentTab === 'marketplace') {
+        for (const [id, data] of Object.entries(marketplaceMetadata)) {
+            listToRender.push({
+                id,
+                ...data,
+                isInstalled: installedExtensions.includes(id.toLowerCase())
+            });
+        }
    } else {
+        for (const [id, data] of Object.entries(marketplaceMetadata)) {
+            if (installedExtensions.includes(id.toLowerCase())) {
+                listToRender.push({ id, ...data, isInstalled: true });
+            }
+        }

-        const displayName = extensionName.replace(/\s/g, '+');
-        iconUrl = `https://ui-avatars.com/api/?name=${displayName}&background=1f2937&color=fff&length=1`;
+        installedExtensions.forEach(id => {
+            const existsInMeta = Object.keys(marketplaceMetadata).some(k => k.toLowerCase() === id);
+            if (!existsInMeta) {
+                listToRender.push({
+                    id: id,
+                    name: id.charAt(0).toUpperCase() + id.slice(1),
+                    type: 'Local',
+                    author: 'Unknown',
+                    isInstalled: true
+                });
+            }
+        });
    }

+    listToRender.forEach(ext => {
+        const type = ext.type || 'Other';
+        if (activeFilter !== 'All' && type !== activeFilter) return;
+        if (!groups[type]) groups[type] = [];
+        groups[type].push(ext);
+    });
+
+    const sortedTypes = Object.keys(groups).sort();
+
+    if (sortedTypes.length === 0) {
+        marketplaceContent.innerHTML = `<p class="empty-msg">No extensions found for this criteria.</p>`;
+        return;
+    }
+
+    sortedTypes.forEach(type => {
+        const section = document.createElement('div');
+        section.className = 'category-group';
+
+        const title = document.createElement('h2');
+        title.className = 'marketplace-section-title';
+        title.innerText = type.replace('-', ' ');
+
+        const grid = document.createElement('div');
+        grid.className = 'marketplace-grid';
+
+        groups[type].forEach(ext => grid.appendChild(createCard(ext)));
+
+        section.appendChild(title);
+        section.appendChild(grid);
+        marketplaceContent.appendChild(section);
+    });
+}
+
+function createCard(ext) {
    const card = document.createElement('div');
-    card.className = `extension-card grid-item extension-type-${extensionType.toLowerCase()}`;
-    card.dataset.path = extension.fileName || extension.name;
-    card.dataset.type = extensionType;
+    card.className = `extension-card ${ext.nsfw ? 'nsfw-ext' : ''} ${ext.broken ? 'broken-ext' : ''}`;

-    let buttonHtml;
-    let badgeHtml = '';
+    const iconUrl = `https://www.google.com/s2/favicons?domain=${ext.domain}&sz=128`;

-    if (isInstalled) {
-
-        if (isLocalOnly) {
-            badgeHtml = '<span class="extension-status-badge badge-local">Local</span>';
-        } else {
-            badgeHtml = '<span class="extension-status-badge badge-installed">Installed</span>';
-        }
-        buttonHtml = `
-            <button class="extension-action-button btn-uninstall" data-action="uninstall">Uninstall</button>
-        `;
+    let buttonHtml = '';
+    if (ext.isInstalled) {
+        buttonHtml = `<button class="extension-action-button btn-uninstall">Uninstall</button>`;
+    } else if (ext.broken) {
+        buttonHtml = `<button class="extension-action-button" style="background: #4b5563; cursor: not-allowed;" disabled>Broken</button>`;
    } else {
-
-        buttonHtml = `
-            <button class="extension-action-button btn-install" data-action="install">Install</button>
-        `;
+        buttonHtml = `<button class="extension-action-button btn-install">Install</button>`;
    }

    card.innerHTML = `
-        <img class="extension-icon" src="${iconUrl}" alt="${extensionName} Icon" onerror="this.onerror=null; this.src='https://ui-avatars.com/api/?name=E&background=1f2937&color=fff&length=1'">
+        <img class="extension-icon" src="${iconUrl}" onerror="this.src='/public/assets/waifuboards.ico'">
        <div class="card-content-wrapper">
-            <h3 class="extension-name" title="${extensionName}">${extensionName}</h3>
-            ${badgeHtml}
+            <h3 class="extension-name">${ext.name}</h3>
+            <span class="extension-author">by ${ext.author || 'Unknown'}</span>
+            <p class="extension-description">${ext.description || 'No description available.'}</p>
+            <div class="extension-tags">
+                <span class="extension-status-badge badge-${ext.isInstalled ? 'installed' : (ext.broken ? 'local' : 'available')}">
+                    ${ext.isInstalled ? 'Installed' : (ext.broken ? 'Broken' : 'Available')}
+                </span>
+                ${ext.nsfw ? '<span class="extension-status-badge badge-local">NSFW</span>' : ''}
+            </div>
        </div>
        ${buttonHtml}
    `;

-    const installButton = card.querySelector('[data-action="install"]');
-    const uninstallButton = card.querySelector('[data-action="uninstall"]');
-
-    if (installButton) {
-        installButton.addEventListener('click', async () => {
-            try {
-                const response = await fetch('/api/extensions/install', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ fileName: extension.fileName }),
-                });
-
-                const result = await response.json();
-
-                if (response.ok) {
-                    updateExtensionState(extension.fileName, true);
-
-                    await showCustomModal(
-                        'Installation Successful',
-                        `${extensionName} has been successfully installed.`,
-                        false
-                    );
-                } else {
-
-                    await showCustomModal(
-                        'Installation Failed',
-                        `Installation failed: ${result.error || 'Unknown error.'}`,
-                        false
-                    );
-                }
-            } catch (error) {
-
-                await showCustomModal(
-                    'Installation Failed',
-                    `Network error during installation.`,
-                    false
-                );
-            }
-        });
+    const btn = card.querySelector('.extension-action-button');
+    if (!ext.broken || ext.isInstalled) {
+        btn.onclick = () => ext.isInstalled ? promptUninstall(ext) : handleInstall(ext);
    }

-    if (uninstallButton) {
-        uninstallButton.addEventListener('click', async () => {
-
-            const confirmed = await showCustomModal(
-                'Confirm Uninstallation',
-                `Are you sure you want to uninstall ${extensionName}?`,
-                true
-            );
-
-            if (!confirmed) return;
-
-            try {
-                const response = await fetch('/api/extensions/uninstall', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ fileName: extension.fileName }),
-                });
-
-                const result = await response.json();
-
-                if (response.ok) {
-                    updateExtensionState(extension.fileName, false);
-
-                    await showCustomModal(
-                        'Uninstallation Successful',
-                        `${extensionName} has been successfully uninstalled.`,
-                        false
-                    );
-                } else {
-
-                    await showCustomModal(
-                        'Uninstallation Failed',
-                        `Uninstallation failed: ${result.error || 'Unknown error.'}`,
-                        false
-                    );
-                }
-            } catch (error) {
-
-                await showCustomModal(
-                    'Uninstallation Failed',
-                    `Network error during uninstallation.`,
-                    false
-                );
-            }
-        });
-    }
-
-    extensionsGrid.appendChild(card);
+    return card;
 }

-async function getInstalledExtensions() {
-    console.log(`Fetching installed extensions from: ${INSTALLED_EXTENSIONS_API}`);
+function showModal(title, message, showConfirm = false, onConfirm = null) {
+    modalTitle.innerText = title;
+    modalMessage.innerText = message;
+    if (showConfirm) {
+        modalConfirmBtn.classList.remove('hidden');
+        modalConfirmBtn.onclick = () => { hideModal(); if (onConfirm) onConfirm(); };
+    } else {
+        modalConfirmBtn.classList.add('hidden');
+    }
+    modalCloseBtn.onclick = hideModal;
+    modal.classList.remove('hidden');
+}

+function hideModal() { modal.classList.add('hidden'); }
+
+async function handleInstall(ext) {
    try {
-        const response = await fetch(INSTALLED_EXTENSIONS_API);
-
-        if (!response.ok) {
-            console.error(`Error fetching installed extensions. Status: ${response.status}`);
-            return new Set();
+        const res = await fetch('/api/extensions/install', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ url: ext.entry })
+        });
+        if (res.ok) {
+            installedExtensions.push(ext.id.toLowerCase());
+            renderGroupedView();
+            window.NotificationUtils.success(`${ext.name} installed!`);
        }
-
-        const data = await response.json();
-
-        if (!data.extensions || !Array.isArray(data.extensions)) {
-            console.error("Invalid response format from /api/extensions: 'extensions' array missing or incorrect.");
-            return new Set();
-        }
-
-        const installedFileNames = data.extensions
-            .map(name => `${name.toLowerCase()}.js`);
-
-        return new Set(installedFileNames);
-
-    } catch (error) {
-        console.error('Network or JSON parsing error during fetch of installed extensions:', error);
-        return new Set();
-    }
+    } catch (e) { window.NotificationUtils.error('Install failed.'); }
 }

-function filterAndRenderExtensions(filterType) {
-    extensionsGrid.innerHTML = '';
-
-    if (!allExtensionsData || allExtensionsData.length === 0) {
-        console.log('No extension data to filter.');
-        return;
-    }
-
-    const filteredExtensions = allExtensionsData.filter(ext =>
-        filterType === 'All' || ext.type === filterType || (ext.isLocal && filterType === 'Local')
-    );
-
-    filteredExtensions.forEach(ext => {
-        renderExtensionCard(ext, ext.isInstalled, ext.isLocal);
-    });
-
-    if (filteredExtensions.length === 0) {
-        extensionsGrid.innerHTML = `<p style="grid-column: 1 / -1; text-align: center; color: var(--text-secondary);">No extensions found for the selected filter (${filterType}).</p>`;
-    }
+function promptUninstall(ext) {
+    showModal('Confirm', `Uninstall ${ext.name}?`, true, () => handleUninstall(ext));
 }

-async function loadMarketplace() {
-    extensionsGrid.innerHTML = '';
-
-    for (let i = 0; i < 6; i++) {
-        extensionsGrid.innerHTML += `
-            <div class="extension-card skeleton grid-item">
-                <div class="skeleton-icon skeleton" style="width: 50px; height: 50px;"></div>
-                <div class="card-content-wrapper">
-                    <div class="skeleton-text title-skeleton skeleton" style="width: 80%; height: 1.1em;"></div>
-                    <div class="skeleton-text text-skeleton skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
-                </div>
-                <div class="skeleton-button skeleton" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
-            </div>`;
-    }
-
+async function handleUninstall(ext) {
    try {
-
-        const [availableExtensionsRaw, installedExtensionsSet] = await Promise.all([
-            fetch(API_URL_BASE).then(res => {
-                if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
-                return res.json();
-            }),
-            getInstalledExtensions()
-        ]);
-
-        const availableExtensionsJs = availableExtensionsRaw.filter(ext => ext.type === 'file' && ext.name.endsWith('.js'));
-        const detailPromises = [];
-
-        const marketplaceFileNames = new Set(availableExtensionsJs.map(ext => ext.name.toLowerCase()));
-
-        for (const ext of availableExtensionsJs) {
-
-            const downloadUrl = getRawUrl(ext.name);
-
-            const detailsPromise = getExtensionDetails(downloadUrl).then(details => ({
-                ...ext,
-                ...details,
-                fileName: ext.name,
-
-                isInstalled: installedExtensionsSet.has(ext.name.toLowerCase()),
-                isLocal: false,
-            }));
-            detailPromises.push(detailsPromise);
-        }
-
-        const extensionsWithDetails = await Promise.all(detailPromises);
-
-        installedExtensionsSet.forEach(installedName => {
-
-            if (!marketplaceFileNames.has(installedName)) {
-
-                const localExt = {
-                    name: formatExtensionName(installedName),
-                    fileName: installedName,
-                    type: 'Local',
-                    isInstalled: true,
-                    isLocal: true,
-                    baseUrl: 'Local Install',
-                };
-                extensionsWithDetails.push(localExt);
-            }
+        const res = await fetch('/api/extensions/uninstall', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ fileName: ext.id + '.js' })
        });
-
-        extensionsWithDetails.sort((a, b) => {
-            if (a.isInstalled !== b.isInstalled) {
-                return b.isInstalled - a.isInstalled;
-
-            }
-
-            const nameA = a.name || '';
-            const nameB = b.name || '';
-
-            return nameA.localeCompare(nameB);
-
-        });
-
-        allExtensionsData = extensionsWithDetails;
-
-        if (filterSelect) {
-            filterSelect.addEventListener('change', (event) => {
-                filterAndRenderExtensions(event.target.value);
-            });
+        if (res.ok) {
+            installedExtensions = installedExtensions.filter(id => id !== ext.id.toLowerCase());
+            renderGroupedView();
+            window.NotificationUtils.info(`${ext.name} uninstalled.`);
        }
-
-        filterAndRenderExtensions('All');
-
-    } catch (error) {
-        console.error('Error loading the marketplace:', error);
-        extensionsGrid.innerHTML = `
-            <div style="grid-column: 1 / -1; color: #dc2626; text-align: center; padding: 2rem; background: rgba(220,38,38,0.1); border-radius: 12px; margin-top: 1rem;">
-                🚨 Error loading extensions.
-                <p>Could not connect to the extension repository or local endpoint. Detail: ${error.message}</p>
-            </div>
-        `;
-        allExtensionsData = [];
-    }
+    } catch (e) { window.NotificationUtils.error('Uninstall failed.'); }
 }

-customModal.addEventListener('click', (e) => {
-    if (e.target === customModal || e.target.tagName === 'BUTTON') {
-        customModal.classList.add('hidden');
-    }
-});
+function showSkeletons() {
+    marketplaceContent.innerHTML = `
+        <div class="marketplace-grid">
+            ${Array(3).fill('<div class="extension-card skeleton"></div>').join('')}
+        </div>
+    `;
+}

 document.addEventListener('DOMContentLoaded', loadMarketplace);
-
-window.addEventListener('scroll', () => {
-    const navbar = document.getElementById('navbar');
-    if (window.scrollY > 0) {
-        navbar.classList.add('scrolled');
-    } else {
-        navbar.classList.remove('scrolled');
-    }
-});
--- a/docker/src/scripts/rpc-inapp.js
+++ b/docker/src/scripts/rpc-inapp.js
@@ -1,9 +0,0 @@
-fetch("/api/rpc", {
-    method: "POST",
-    headers: {"Content-Type": "application/json"},
-    body: JSON.stringify({
-        details: "Browsing",
-        state: `In App`,
-        mode: "idle"
-    })
-});
--- a/docker/src/scripts/titlebar.js
+++ b/docker/src/scripts/titlebar.js
@@ -1,18 +0,0 @@
-if (window.electronAPI?.isElectron) {
-    document.documentElement.classList.add("electron");
-}
-
-document.addEventListener("DOMContentLoaded", () => {
-    document.documentElement.style.visibility = "visible";
-    if (!window.electronAPI?.isElectron) return;
-    document.body.classList.add("electron");
-
-    const titlebar = document.getElementById("titlebar");
-    if (!titlebar) return;
-
-    titlebar.style.display = "flex";
-
-    titlebar.querySelector(".min").onclick = () => window.electronAPI.win.minimize();
-    titlebar.querySelector(".max").onclick = () => window.electronAPI.win.maximize();
-    titlebar.querySelector(".close").onclick = () => window.electronAPI.win.close();
-});
--- a/docker/src/scripts/updateNotifier.js
+++ b/docker/src/scripts/updateNotifier.js
@@ -1,6 +1,6 @@
 const Gitea_OWNER = "ItsSkaiya";
 const Gitea_REPO = "WaifuBoard";
-const CURRENT_VERSION = "v2.0.0-rc.0";
+const CURRENT_VERSION = "v2.0.0-rc.2";
 const UPDATE_CHECK_INTERVAL = 5 * 60 * 1000;

 let currentVersionDisplay;
--- a/docker/src/scripts/users.js
+++ b/docker/src/scripts/users.js
@@ -694,30 +694,102 @@ window.handleDeleteConfirmation = function(userId) {

    closeModal();

+    if (user.has_password) {
+        modalAniList.innerHTML = `
+        <div class="modal-overlay"></div>
+        <div class="modal-content" style="max-width:400px;">
+            <div class="modal-header">
+                <h2>Confirm Deletion</h2>
+                <button class="modal-close" onclick="closeModal()">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <line x1="18" y1="6" x2="6" y2="18"></line>
+                        <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                </button>
+            </div>
+
+            <form id="deleteWithPasswordForm">
+                <p style="margin-bottom:1.25rem; color:var(--color-text-secondary)">
+                    Enter your password to permanently delete
+                    <b>${user.username}</b>
+                </p>
+
+                <div class="form-group">
+                    <label for="deletePassword">Password</label>
+                    <div class="password-toggle-wrapper">
+                        <input
+                            type="password"
+                            id="deletePassword"
+                            required
+                            placeholder="Enter password"
+                            autofocus
+                        >
+                        <button
+                            type="button"
+                            class="password-toggle-btn"
+                            onclick="togglePasswordVisibility('deletePassword', this)"
+                        >
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                                <circle cx="12" cy="12" r="3"></circle>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+
+                <div class="modal-actions">
+                    <button type="button" class="btn-secondary" onclick="closeModal()">
+                        Cancel
+                    </button>
+                    <button type="submit" class="btn-disconnect">
+                        Delete Profile
+                    </button>
+                </div>
+            </form>
+        </div>
+    `;
+        modalAniList.classList.add('active');
+
+        document
+            .getElementById('deleteWithPasswordForm')
+            .addEventListener('submit', e => {
+                e.preventDefault();
+                const password = document.getElementById('deletePassword').value;
+                handleConfirmedDeleteUser(userId, password);
+            });
+
+        return;
+    }
+
    showConfirmationModal(
        'Confirm Deletion',
-        `Are you absolutely sure you want to delete profile ${user.username}? This action cannot be undone.`,
+        `Are you absolutely sure you want to delete profile ${user.username}?`,
        `handleConfirmedDeleteUser(${userId})`
    );
 };

-window.handleConfirmedDeleteUser = async function(userId) {
+window.handleConfirmedDeleteUser = async function(userId, password = null) {
    closeModal();
-    showUserToast('Deleting user...', 'info');

    try {
-        const res = await fetch(`${API_BASE}/users/${userId}`, { method: 'DELETE' });
+        const options = { method: 'DELETE' };
+
+        if (password) {
+            options.headers = { 'Content-Type': 'application/json' };
+            options.body = JSON.stringify({ password });
+        }
+
+        const res = await fetch(`${API_BASE}/users/${userId}`, options);

        if (!res.ok) {
            const error = await res.json();
-            throw new Error(error.error || 'Error deleting user');
+            throw new Error(error.error);
        }

        await loadUsers();
        showUserToast('User deleted successfully!', 'success');
    } catch (err) {
-        console.error(err);
-        showUserToast('Error deleting user', 'error');
+        showUserToast(err.message || 'Error deleting user', 'error');
    }
 };

--- a/docker/src/shared/extensions.js
+++ b/docker/src/shared/extensions.js
@@ -46,7 +46,6 @@ async function loadExtensions() {
    }
 }

-
 async function loadExtension(fileName) {
    const homeDir = os.homedir();
    const extensionsDir = path.join(homeDir, 'WaifuBoards', 'extensions');
@@ -77,6 +76,7 @@ async function loadExtension(fileName) {
        }

        const name = instance.constructor.name;
+        instance.__fileName = fileName;
        instance.scrape = scrape;
        instance.cheerio = cheerio;
        extensions.set(name, instance);
@@ -114,6 +114,14 @@ async function saveExtensionFile(fileName, downloadUrl) {
            file.on('finish', async () => {
                file.close(async () => {
                    try {
+                        const extName = fileName.replace('.js', '');
+
+                        for (const key of extensions.keys()) {
+                            if (key.toLowerCase() === extName.toLowerCase()) {
+                                extensions.delete(key);
+                                break;
+                            }
+                        }
                        await loadExtension(fileName);
                        resolve();
                    } catch (err) {
--- a/docker/tsconfig.json
+++ b/docker/tsconfig.json
@@ -5,7 +5,7 @@
    "allowJs": true,
    "checkJs": false,
    "strict": true,
-    "outDir": "electron",
+    "outDir": "dist",
    "rootDir": "src",
    "esModuleInterop": true,
    "skipLibCheck": true
--- a/docker/views/anime/anime.html
+++ b/docker/views/anime/anime.html
@@ -1,224 +1,346 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
-    <title>WaifuBoard</title>
-    <link rel="stylesheet" href="/views/css/globals.css">
-    <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
-    <link rel="stylesheet" href="/views/css/components/hero.css">
-    <link rel="stylesheet" href="/views/css/anime/anime.css">
-    <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
-    <script src="/src/scripts/titlebar.js"></script>
-    <link rel="stylesheet" href="/views/css/components/titlebar.css">
-</head>
-<body>
-<div id="titlebar">
-    <div class="title-left">
-        <img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
-        <span class="app-title">WaifuBoard</span>
-    </div>
-    <div class="title-right">
-        <button class="min">—</button>
-        <button class="max">🗖</button>
-        <button class="close">✕</button>
-    </div>
-</div>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link
+            rel="icon"
+            href="/public/assets/waifuboards.ico"
+            type="image/x-icon"
+        />
+        <title>WaifuBoard</title>
+        <link rel="stylesheet" href="/views/css/globals.css" />
+        <link rel="stylesheet" href="/views/css/components/anilist-modal.css" />
+        <link rel="stylesheet" href="/views/css/components/hero.css" />
+        <link rel="stylesheet" href="/views/css/anime/anime.css" />
+        <link
+            rel="stylesheet"
+            href="/views/css/components/updateNotifier.css"
+        />
+    </head>
+    <body>
+        <div class="modal-overlay" id="desc-modal">
+            <div class="modal-content">
+                <button class="modal-close" onclick="closeModal()">✕</button>
+                <h2 class="modal-title">Synopsis</h2>
+                <div class="modal-text" id="full-description"></div>
+            </div>
+        </div>

-<div class="modal-overlay" id="desc-modal">
-    <div class="modal-content">
-        <button class="modal-close" onclick="closeModal()">✕</button>
-        <h2 class="modal-title">Synopsis</h2>
-        <div class="modal-text" id="full-description"></div>
-    </div>
-</div>
+        <div class="modal-overlay" id="add-list-modal">
+            <div class="modal-content modal-list">
+                <button class="modal-close" onclick="closeAddToListModal()">
+                    ✕
+                </button>
+                <h2 class="modal-title" id="modal-title">Add to List</h2>

-<div class="modal-overlay" id="add-list-modal">
-    <div class="modal-content modal-list">
-        <button class="modal-close" onclick="closeAddToListModal()">✕</button>
-        <h2 class="modal-title" id="modal-title">Add to List</h2>
-
-        <div class="modal-body">
-            <div class="modal-fields-grid">
-
-                <div class="form-group">
-                    <label>Status</label>
-                    <select id="entry-status" class="form-input">
-                        <option value="WATCHING">Watching</option>
-                        <option value="COMPLETED">Completed</option>
-                        <option value="PLANNING">Planning</option>
-                        <option value="PAUSED">Paused</option>
-                        <option value="DROPPED">Dropped</option>
-                        <option value="REPEATING">Rewatching</option>
-                    </select>
-                </div>
-
-                <div class="form-group">
-                    <label>Episodes Watched</label>
-                    <input type="number" id="entry-progress" class="form-input" min="0" placeholder="0">
-                </div>
-
-                <div class="form-group">
-                    <label>Your Score (0-10)</label>
-                    <input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
-                </div>
-
-                <div class="form-group full-width">
-                    <div class="date-group">
-                        <div class="date-input-pair">
-                            <label for="entry-start-date">Start Date</label>
-                            <input type="date" id="entry-start-date" class="form-input">
+                <div class="modal-body">
+                    <div class="modal-fields-grid">
+                        <div class="form-group">
+                            <label>Status</label>
+                            <select id="entry-status" class="form-input">
+                                <option value="WATCHING">Watching</option>
+                                <option value="COMPLETED">Completed</option>
+                                <option value="PLANNING">Planning</option>
+                                <option value="PAUSED">Paused</option>
+                                <option value="DROPPED">Dropped</option>
+                                <option value="REPEATING">Rewatching</option>
+                            </select>
                        </div>
-                        <div class="date-input-pair">
-                            <label for="entry-end-date">End Date</label>
-                            <input type="date" id="entry-end-date" class="form-input">
+
+                        <div class="form-group">
+                            <label>Episodes Watched</label>
+                            <input
+                                type="number"
+                                id="entry-progress"
+                                class="form-input"
+                                min="0"
+                                placeholder="0"
+                            />
+                        </div>
+
+                        <div class="form-group">
+                            <label>Your Score (0-10)</label>
+                            <input
+                                type="number"
+                                id="entry-score"
+                                class="form-input"
+                                min="0"
+                                max="10"
+                                step="0.1"
+                                placeholder="Optional"
+                            />
+                        </div>
+
+                        <div class="form-group full-width">
+                            <div class="date-group">
+                                <div class="date-input-pair">
+                                    <label for="entry-start-date"
+                                        >Start Date</label
+                                    >
+                                    <input
+                                        type="date"
+                                        id="entry-start-date"
+                                        class="form-input"
+                                    />
+                                </div>
+                                <div class="date-input-pair">
+                                    <label for="entry-end-date">End Date</label>
+                                    <input
+                                        type="date"
+                                        id="entry-end-date"
+                                        class="form-input"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label for="entry-repeat-count"
+                                >Rewatch Count</label
+                            >
+                            <input
+                                type="number"
+                                id="entry-repeat-count"
+                                class="form-input"
+                                min="0"
+                            />
+                        </div>
+
+                        <div class="form-group notes-group">
+                            <label for="entry-notes">Notes</label>
+                            <textarea
+                                id="entry-notes"
+                                class="form-input notes-textarea"
+                                rows="4"
+                                placeholder="Personal notes..."
+                            ></textarea>
+                        </div>
+
+                        <div class="form-group checkbox-group">
+                            <input
+                                type="checkbox"
+                                id="entry-is-private"
+                                class="form-checkbox"
+                            />
+                            <label for="entry-is-private"
+                                >Mark as Private</label
+                            >
                        </div>
                    </div>
                </div>

-                <div class="form-group">
-                    <label for="entry-repeat-count">Rewatch Count</label>
-                    <input type="number" id="entry-repeat-count" class="form-input" min="0">
-                </div>
-
-                <div class="form-group notes-group">
-                    <label for="entry-notes">Notes</label>
-                    <textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
-                </div>
-
-                <div class="form-group checkbox-group">
-                    <input type="checkbox" id="entry-is-private" class="form-checkbox">
-                    <label for="entry-is-private">Mark as Private</label>
-                </div>
-
-            </div>
-        </div>
-
-        <div class="modal-actions">
-            <button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
-            <button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
-            <button class="btn-primary" onclick="saveToList()">Save Changes</button>
-        </div>
-    </div>
-</div>
-
-<a href="/anime" class="back-btn">
-    <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
-    Back to Home
-</a>
-
-<div class="hero-wrapper">
-    <div class="video-background">
-        <div id="player"></div>
-    </div>
-    <div class="hero-overlay"></div>
-</div>
-
-<div class="content-container">
-    <aside class="sidebar">
-        <div class="poster-card">
-            <img id="poster" src="" alt="">
-        </div>
-
-        <div class="info-grid">
-            <div class="info-item">
-                <h4>Format</h4>
-                <span id="format">--</span>
-            </div>
-            <div class="info-item">
-                <h4>Episodes</h4>
-                <span id="episodes">--</span>
-            </div>
-            <div class="info-item">
-                <h4>Status</h4>
-                <span id="status">--</span>
-            </div>
-            <div class="info-item">
-                <h4>Season</h4>
-                <span id="season">--</span>
-            </div>
-            <div class="info-item">
-                <h4>Studio</h4>
-                <span id="studio">--</span>
-            </div>
-        </div>
-
-        <div class="info-grid">
-            <div class="info-item">
-                <h4>Main Characters</h4>
-                <div class="character-list" id="char-list"></div>
-            </div>
-        </div>
-    </aside>
-
-    <main class="main-content">
-        <div class="anime-header">
-            <h1 class="anime-title" id="title">Loading...</h1>
-
-            <div class="meta-row">
-                <div class="pill extension-pill" id="extension-pill" style="display: none; background: #8b5cf6;"></div>
-                <div class="pill score" id="score">--% Score</div>
-                <div class="pill" id="year">----</div>
-                <div class="pill" id="genres">Action</div>
-            </div>
-
-            <div class="action-row">
-                <button class="btn-watch" id="watch-btn">
-                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
-                    Start Watching
-                </button>
-                <button class="btn-secondary" id="add-to-list-btn" onclick="openAddToListModal()">+ Add to List</button>
-            </div>
-        </div>
-
-        <div class="description-box">
-            <div id="description-preview"></div>
-            <button id="read-more-btn" class="read-more-btn" style="display: none;" onclick="openModal()">
-                Read More
-                <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7"/></svg>
-            </button>
-        </div>
-
-        <div class="episodes-section">
-            <div class="episodes-header-row">
-                <div class="section-title" style="margin:0; border:none; padding:0;">
-                    <h2 style="font-size: 1.8rem; border-left: 4px solid #8b5cf6; padding-left: 1rem;">Episodes</h2>
-                </div>
-                <div class="episode-search-wrapper">
-                    <input type="number" id="ep-search" class="episode-search-input" placeholder="Jump to Ep #" min="1">
+                <div class="modal-actions">
+                    <button
+                        class="btn-danger"
+                        id="modal-delete-btn"
+                        onclick="deleteFromList()"
+                    >
+                        Remove
+                    </button>
+                    <button
+                        class="btn-secondary"
+                        onclick="closeAddToListModal()"
+                    >
+                        Cancel
+                    </button>
+                    <button class="btn-primary" onclick="saveToList()">
+                        Save Changes
+                    </button>
                </div>
            </div>
-
-            <div class="episodes-grid" id="episodes-grid"></div>
-
-            <div class="pagination-controls" id="pagination-controls">
-                <button class="page-btn" id="prev-page" onclick="changePage(-1)">Previous</button>
-                <span class="page-info" id="page-info">Page 1 of 1</span>
-                <button class="page-btn" id="next-page" onclick="changePage(1)">Next</button>
-            </div>
        </div>
-    </main>
-</div>

-<div id="updateToast" class="hidden">
-    <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
-    <a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">
-        Click To Download
-    </a>
-</div>
+        <a href="/anime" class="back-btn">
+            <svg
+                width="20"
+                height="20"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2.5"
+                viewBox="0 0 24 24"
+            >
+                <path d="M15 19l-7-7 7-7" />
+            </svg>
+            Back to Home
+        </a>

-<script src="/src/scripts/updateNotifier.js"></script>
-<script src="/src/scripts/rpc-inapp.js"></script>
-<script src="/src/scripts/auth-guard.js"></script>
+        <div class="hero-wrapper">
+            <div class="video-background">
+                <div id="player"></div>
+            </div>
+            <div class="hero-overlay"></div>
+        </div>

-<script src="/src/scripts/utils/auth-utils.js"></script>
-<script src="/src/scripts/utils/notification-utils.js"></script>
-<script src="/src/scripts/utils/url-utils.js"></script>
-<script src="/src/scripts/utils/pagination-manager.js"></script>
-<script src="/src/scripts/utils/media-metadata-utils.js"></script>
-<script src="/src/scripts/utils/youtube-player-utils.js"></script>
-<script src="/src/scripts/utils/list-modal-manager.js"></script>
-<script src="/src/scripts/anime/anime.js"></script>
-</body>
+        <div class="content-container">
+            <aside class="sidebar">
+                <div class="poster-card">
+                    <img id="poster" src="" alt="" />
+                </div>
+
+                <div class="info-grid">
+                    <div class="info-item">
+                        <h4>Format</h4>
+                        <span id="format">--</span>
+                    </div>
+                    <div class="info-item">
+                        <h4>Episodes</h4>
+                        <span id="episodes">--</span>
+                    </div>
+                    <div class="info-item">
+                        <h4>Status</h4>
+                        <span id="status">--</span>
+                    </div>
+                    <div class="info-item">
+                        <h4>Season</h4>
+                        <span id="season">--</span>
+                    </div>
+                    <div class="info-item">
+                        <h4>Studio</h4>
+                        <span id="studio">--</span>
+                    </div>
+                </div>
+
+                <div class="info-grid">
+                    <div class="info-item">
+                        <h4>Main Characters</h4>
+                        <div class="character-list" id="char-list"></div>
+                    </div>
+                </div>
+            </aside>
+
+            <main class="main-content">
+                <div class="anime-header">
+                    <h1 class="anime-title" id="title">Loading...</h1>
+
+                    <div class="meta-row">
+                        <div
+                            class="pill extension-pill"
+                            id="extension-pill"
+                            style="display: none; background: #8b5cf6"
+                        ></div>
+                        <div class="pill score" id="score">--% Score</div>
+                        <div class="pill" id="year">----</div>
+                        <div class="pill" id="genres">Action</div>
+                    </div>
+
+                    <div class="action-row">
+                        <button class="btn-watch" id="watch-btn">
+                            <svg
+                                width="24"
+                                height="24"
+                                fill="currentColor"
+                                viewBox="0 0 24 24"
+                            >
+                                <path d="M8 5v14l11-7z" />
+                            </svg>
+                            Start Watching
+                        </button>
+                        <button
+                            class="btn-secondary"
+                            id="add-to-list-btn"
+                            onclick="openAddToListModal()"
+                        >
+                            + Add to List
+                        </button>
+                    </div>
+                </div>
+
+                <div class="description-box">
+                    <div id="description-preview"></div>
+                    <button
+                        id="read-more-btn"
+                        class="read-more-btn"
+                        style="display: none"
+                        onclick="openModal()"
+                    >
+                        Read More
+                        <svg
+                            width="16"
+                            height="16"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            viewBox="0 0 24 24"
+                        >
+                            <path d="M19 9l-7 7-7-7" />
+                        </svg>
+                    </button>
+                </div>
+
+                <div class="episodes-section">
+                    <div class="episodes-header-row">
+                        <div
+                            class="section-title"
+                            style="margin: 0; border: none; padding: 0"
+                        >
+                            <h2
+                                style="
+                                    font-size: 1.8rem;
+                                    border-left: 4px solid #8b5cf6;
+                                    padding-left: 1rem;
+                                "
+                            >
+                                Episodes
+                            </h2>
+                        </div>
+                        <div class="episode-search-wrapper">
+                            <input
+                                type="number"
+                                id="ep-search"
+                                class="episode-search-input"
+                                placeholder="Jump to Ep #"
+                                min="1"
+                            />
+                        </div>
+                    </div>
+
+                    <div class="episodes-grid" id="episodes-grid"></div>
+
+                    <div class="pagination-controls" id="pagination-controls">
+                        <button
+                            class="page-btn"
+                            id="prev-page"
+                            onclick="changePage(-1)"
+                        >
+                            Previous
+                        </button>
+                        <span class="page-info" id="page-info"
+                            >Page 1 of 1</span
+                        >
+                        <button
+                            class="page-btn"
+                            id="next-page"
+                            onclick="changePage(1)"
+                        >
+                            Next
+                        </button>
+                    </div>
+                </div>
+            </main>
+        </div>
+
+        <div id="updateToast" class="hidden">
+            <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
+            <a
+                id="downloadButton"
+                href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
+                target="_blank"
+            >
+                Click To Download
+            </a>
+        </div>
+
+        <script src="/src/scripts/updateNotifier.js"></script>
+        <script src="/src/scripts/auth-guard.js"></script>
+
+        <script src="/src/scripts/utils/auth-utils.js"></script>
+        <script src="/src/scripts/utils/notification-utils.js"></script>
+        <script src="/src/scripts/utils/url-utils.js"></script>
+        <script src="/src/scripts/utils/pagination-manager.js"></script>
+        <script src="/src/scripts/utils/media-metadata-utils.js"></script>
+        <script src="/src/scripts/utils/youtube-player-utils.js"></script>
+        <script src="/src/scripts/utils/list-modal-manager.js"></script>
+        <script src="/src/scripts/anime/anime.js"></script>
+    </body>
 </html>
--- a/docker/views/anime/animes.html
+++ b/docker/views/anime/animes.html
@@ -9,22 +9,9 @@
    <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/titlebar.css">
    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
-    <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body >
-<div id="titlebar"><div class="title-left">
-    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
-    <span class="app-title">WaifuBoard</span>
-</div>
-    <div class="title-right">
-        <button class="min">—</button>
-        <button class="max">🗖</button>
-        <button class="close">✕</button>
-    </div>
-</div>
-
 <nav class="navbar" id="navbar">
    <a href="#" class="nav-brand">
        <div class="brand-icon">
@@ -259,7 +246,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>
 </body>
 </html>
--- a/docker/views/anime/watch.html
+++ b/docker/views/anime/watch.html
@@ -11,21 +11,8 @@
    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
    <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
    <link rel="icon" href="/public/assets/waifuboards.ico">
-    <link rel="stylesheet" href="/views/css/components/titlebar.css">
-    <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
-<div id="titlebar"> <div class="title-left">
-    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
-    <span class="app-title">WaifuBoard</span>
-</div>
-    <div class="title-right">
-        <button class="min">—</button>
-        <button class="max">🗖</button>
-        <button class="close">✕</button>
-    </div>
-</div>
-

 <header class="top-bar">
    <a href="#" id="back-link" class="back-btn">
--- a/docker/views/books/book.html
+++ b/docker/views/books/book.html
@@ -10,20 +10,8 @@
    <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
    <link rel="stylesheet" href="/views/css/books/book.css">
    <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
-    <link rel="stylesheet" href="/views/css/components/titlebar.css">
-    <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
-<div id="titlebar"> <div class="title-left">
-    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
-    <span class="app-title">WaifuBoard</span>
-</div>
-    <div class="title-right">
-        <button class="min">—</button>
-        <button class="max">🗖</button>
-        <button class="close">✕</button>
-    </div>
-</div>

 <div class="modal-overlay" id="add-list-modal">
    <div class="modal-content">
@@ -204,7 +192,6 @@
 </div>

 <script src="/src/scripts/updateNotifier.js"></script>
-<script src="/src/scripts/rpc-inapp.js"></script>

 <script src="/src/scripts/utils/auth-utils.js"></script>
 <script src="/src/scripts/utils/notification-utils.js"></script>
--- a/docker/views/books/books.html
+++ b/docker/views/books/books.html
@@ -7,23 +7,11 @@
    <link rel="stylesheet" href="/views/css/globals.css">
    <link rel="stylesheet" href="/views/css/components/navbar.css">
    <link rel="stylesheet" href="/views/css/components/hero.css">
-    <link rel="stylesheet" href="/views/css/components/titlebar.css">
    <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
    <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
-    <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
-<div id="titlebar"> <div class="title-left">
-    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
-    <span class="app-title">WaifuBoard</span>
-</div>
-    <div class="title-right">
-        <button class="min">—</button>
-        <button class="max">🗖</button>
-        <button class="close">✕</button>
-    </div>
-</div>

 <nav class="navbar" id="navbar">
    <a href="#" class="nav-brand">
@@ -228,7 +216,6 @@
 <script src="/src/scripts/books/books.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>
 </body>
 </html>
--- a/docker/views/books/read.html
+++ b/docker/views/books/read.html
@@ -8,20 +8,8 @@
    <link rel="stylesheet" href="/views/css/books/reader.css">
    <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
-    <link rel="stylesheet" href="/views/css/components/titlebar.css">
-    <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
-<div id="titlebar"> <div class="title-left">
-    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
-    <span class="app-title">WaifuBoard</span>
-</div>
-    <div class="title-right">
-        <button class="min">—</button>
-        <button class="max">🗖</button>
-        <button class="close">✕</button>
-    </div>
-</div>

 <header class="top-bar">
    <button id="back-btn" class="glass-btn">
--- a/docker/views/css/anime/anime.css
+++ b/docker/views/css/anime/anime.css
@@ -34,7 +34,7 @@
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
-    border: 1px solid rgba(255,255,255,0.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .poster-card img {
@@ -45,7 +45,7 @@

 .info-grid {
    background: var(--color-bg-elevated);
-    border: 1px solid rgba(255,255,255,0.05);
+    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    display: flex;
@@ -53,16 +53,36 @@
    gap: 1.25rem;
 }

-.info-item h4 { margin: 0 0 0.25rem 0; font-size: 0.85rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
-.info-item span { font-weight: 600; font-size: 1rem; color: var(--text-primary); }
+.info-item h4 {
+    margin: 0 0 0.25rem 0;
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+.info-item span {
+    font-weight: 600;
+    font-size: 1rem;
+    color: var(--text-primary);
+}

 .character-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
 }
-.character-item { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; }
-.char-dot { width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%; }
+.character-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-size: 0.95rem;
+}
+.char-dot {
+    width: 6px;
+    height: 6px;
+    background: var(--color-primary);
+    border-radius: 50%;
+}

 .main-content {
    display: flex;
@@ -79,7 +99,7 @@
    font-weight: 900;
    line-height: 1;
    margin: 0 0 1.5rem 0;
-    text-shadow: 0 4px 30px rgba(0,0,0,0.8);
+    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
 }

 .meta-row {
@@ -92,14 +112,18 @@

 .pill {
    padding: 0.5rem 1.25rem;
-    background: rgba(255,255,255,0.1);
+    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255,255,255,0.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.95rem;
 }
-.pill.score { background: rgba(34, 197, 94, 0.2); color: #4ade80; border-color: rgba(34, 197, 94, 0.2); }
+.pill.score {
+    background: rgba(34, 197, 94, 0.2);
+    color: #4ade80;
+    border-color: rgba(34, 197, 94, 0.2);
+}

 .action-row {
    display: flex;
@@ -119,7 +143,9 @@
    display: flex;
    align-items: center;
    gap: 0.75rem;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition:
+        transform 0.2s,
+        box-shadow 0.2s;
 }

 .btn-watch:hover {
@@ -135,7 +161,7 @@
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 1rem;
-    border: 1px solid rgba(255,255,255,0.2);
+    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
@@ -153,17 +179,30 @@
    line-height: 1.8;
    color: #e4e4e7;
    max-width: 900px;
-    background: rgba(255,255,255,0.03);
+    background: rgba(255, 255, 255, 0.03);
    padding: 2rem;
    border-radius: var(--radius-md);
-    border: 1px solid rgba(255,255,255,0.05);
+    border: 1px solid rgba(255, 255, 255, 0.05);
 }

 .episodes-section {
    margin-top: 4rem;
 }
-.section-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.8rem; }
-.section-title::before { content: ''; width: 4px; height: 28px; background: var(--color-primary); border-radius: 2px; }
+.section-title {
+    font-size: 1.8rem;
+    font-weight: 800;
+    margin-bottom: 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+}
+.section-title::before {
+    content: "";
+    width: 4px;
+    height: 28px;
+    background: var(--color-primary);
+    border-radius: 2px;
+}

 .episodes-grid {
    display: grid;
@@ -173,7 +212,7 @@

 .episode-btn {
    background: var(--color-bg-elevated);
-    border: 1px solid rgba(255,255,255,0.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.25rem 1rem;
    border-radius: var(--radius-md);
    cursor: pointer;
@@ -191,8 +230,14 @@
 }

@keyframes slideUp {
-    from { opacity: 0; transform: translateY(60px); }
-    to { opacity: 1; transform: translateY(0); }
+    from {
+        opacity: 0;
+        transform: translateY(60px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }

@media (max-width: 1024px) {
@@ -201,11 +246,24 @@
        margin-top: -100px;
        padding: 0 1.5rem 4rem 1.5rem;
    }
-    .poster-card { width: 220px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
-    .main-content { text-align: center; align-items: center; }
-    .anime-title { font-size: 2.5rem; }
-    .meta-row { justify-content: center; }
-    .sidebar { display: none;  }
+    .poster-card {
+        width: 220px;
+        margin: 0 auto;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+    }
+    .main-content {
+        text-align: center;
+        align-items: center;
+    }
+    .anime-title {
+        font-size: 2.5rem;
+    }
+    .meta-row {
+        justify-content: center;
+    }
+    .sidebar {
+        display: none;
+    }
 }

 .read-more-btn {
@@ -221,7 +279,9 @@
    align-items: center;
    gap: 0.25rem;
 }
-.read-more-btn:hover { text-decoration: underline; }
+.read-more-btn:hover {
+    text-decoration: underline;
+}

 .episodes-header-row {
    display: flex;
@@ -261,7 +321,10 @@
 }

 .episode-search-input::-webkit-outer-spin-button,
-.episode-search-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+.episode-search-input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}

 .pagination-controls {
    display: flex;
@@ -295,3 +358,118 @@
    font-size: 0.9rem;
    font-weight: 500;
 }
+
+@media (max-width: 768px) {
+    .content-container,
+    .section,
+    .container {
+        width: 100%;
+        max-width: 100vw;
+        overflow-x: hidden;
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+
+    .content-container {
+        display: flex;
+        flex-direction: column;
+        margin-top: -50px;
+        padding: 1rem 1.25rem 4rem 1.25rem;
+        gap: 2rem;
+    }
+
+    .sidebar {
+        display: flex !important;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+        order: 1;
+    }
+
+    .poster-card {
+        width: 180px;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+        margin-bottom: 1rem;
+    }
+
+    .info-grid {
+        width: 100%;
+        padding: 1rem;
+    }
+
+    .main-content {
+        order: 2;
+        text-align: center;
+        align-items: center;
+    }
+
+    .anime-title {
+        font-size: 2.2rem;
+        line-height: 1.1;
+        margin-bottom: 1rem;
+    }
+
+    .meta-row {
+        justify-content: center;
+        gap: 0.5rem;
+    }
+
+    .pill {
+        padding: 0.4rem 0.8rem;
+        font-size: 0.8rem;
+    }
+
+    .action-row {
+        flex-direction: column;
+        width: 100%;
+        gap: 0.8rem;
+    }
+
+    .btn-watch,
+    .btn-secondary {
+        width: 100%;
+        justify-content: center;
+        padding: 1rem;
+    }
+
+    .description-box {
+        margin-top: 2rem;
+        padding: 1.25rem;
+        font-size: 1rem;
+        text-align: left;
+    }
+
+    .episodes-section {
+        margin-top: 3rem;
+        order: 3;
+    }
+
+    .episodes-header-row {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 1rem;
+    }
+
+    .episode-search-wrapper {
+        width: 100%;
+    }
+
+    .episode-search-input {
+        width: 100%;
+        text-align: left;
+    }
+
+    .episodes-grid {
+        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
+        gap: 0.75rem;
+    }
+
+    .episode-btn {
+        padding: 0.8rem 0.5rem;
+        font-size: 0.9rem;
+    }
+
+    .pagination-controls {
+        flex-wrap: wrap;
+    }
+}
--- a/docker/views/css/anime/watch.css
+++ b/docker/views/css/anime/watch.css
@@ -4,7 +4,11 @@
    left: 0;
    right: 0;
    padding: var(--spacing-lg) var(--spacing-xl);
-    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
+    background: linear-gradient(
+        180deg,
+        rgba(0, 0, 0, 0.8) 0%,
+        transparent 100%
+    );
    z-index: 1000;
    pointer-events: none;
 }
@@ -64,7 +68,11 @@
    box-shadow: var(--shadow-sm);
 }

-.control-group { display: flex; align-items: center; gap: var(--spacing-md); }
+.control-group {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+}

 .sd-toggle {
    display: flex;
@@ -87,11 +95,15 @@
    letter-spacing: 0.05em;
 }

-.sd-option.active { color: var(--color-text-primary); }
+.sd-option.active {
+    color: var(--color-text-primary);
+}

 .sd-bg {
    position: absolute;
-    top: 4px; left: 4px; bottom: 4px;
+    top: 4px;
+    left: 4px;
+    bottom: 4px;
    width: calc(50% - 4px);
    background: var(--color-primary);
    border-radius: var(--radius-full);
@@ -100,7 +112,9 @@
    z-index: 1;
 }

-.sd-toggle[data-state="dub"] .sd-bg { transform: translateX(100%); }
+.sd-toggle[data-state="dub"] .sd-bg {
+    transform: translateX(100%);
+}

 .source-select {
    appearance: none;
@@ -119,8 +133,15 @@
    transition: all var(--transition-base);
 }

-.source-select:hover { border-color: var(--color-primary); background-color: var(--color-bg-card); }
-.source-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-glow); }
+.source-select:hover {
+    border-color: var(--color-primary);
+    background-color: var(--color-bg-card);
+}
+.source-select:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px var(--color-primary-glow);
+}

 .video-container {
    aspect-ratio: 16/9;
@@ -128,14 +149,25 @@
    background: var(--color-bg-base);
    border-radius: var(--radius-xl);
    overflow: hidden;
-    box-shadow: var(--shadow-lg), 0 0 0 1px var(--glass-border);
+    box-shadow:
+        var(--shadow-lg),
+        0 0 0 1px var(--glass-border);
    position: relative;
    transition: box-shadow var(--transition-smooth);
 }

-.video-container:hover { box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-primary), var(--shadow-glow); }
+.video-container:hover {
+    box-shadow:
+        var(--shadow-lg),
+        0 0 0 1px var(--color-primary),
+        var(--shadow-glow);
+}

-#player { width: 100%; height: 100%; object-fit: contain; }
+#player {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}

 .loading-overlay {
    position: absolute;
@@ -150,16 +182,25 @@
 }

 .spinner {
-    width: 48px; height: 48px;
-    border: 3px solid rgba(255,255,255,0.1);
+    width: 48px;
+    height: 48px;
+    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
 }

-@keyframes spin { to { transform: rotate(360deg); } }
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}

-.loading-overlay p { color: var(--color-text-secondary); font-size: 0.95rem; font-weight: 500; }
+.loading-overlay p {
+    color: var(--color-text-secondary);
+    font-size: 0.95rem;
+    font-weight: 500;
+}

 .episode-controls {
    display: flex;
@@ -174,21 +215,49 @@
    box-shadow: var(--shadow-sm);
 }

-.episode-info h1 { font-size: 1.75rem; font-weight: 800; margin: 0 0 var(--spacing-xs); }
-.episode-info p { color: var(--color-primary); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
-
-.navigation-buttons { display: flex; gap: var(--spacing-md); }
-
-.nav-btn {
-    display: flex; align-items: center; gap: var(--spacing-sm);
-    background: var(--color-bg-elevated); border: var(--border-subtle);
-    color: var(--color-text-primary); padding: 0.75rem 1.5rem;
-    border-radius: var(--radius-full); font-weight: 600; font-size: 0.9rem;
-    cursor: pointer; transition: all var(--transition-base);
+.episode-info h1 {
+    font-size: 1.75rem;
+    font-weight: 800;
+    margin: 0 0 var(--spacing-xs);
+}
+.episode-info p {
+    color: var(--color-primary);
+    font-weight: 600;
+    font-size: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
 }

-.nav-btn:hover:not(:disabled) { background: var(--color-primary); border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-glow); }
-.nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
+.navigation-buttons {
+    display: flex;
+    gap: var(--spacing-md);
+}
+
+.nav-btn {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    background: var(--color-bg-elevated);
+    border: var(--border-subtle);
+    color: var(--color-text-primary);
+    padding: 0.75rem 1.5rem;
+    border-radius: var(--radius-full);
+    font-weight: 600;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all var(--transition-base);
+}
+
+.nav-btn:hover:not(:disabled) {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-glow);
+}
+.nav-btn:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+}

 .episode-carousel-compact {
    width: 100%;
@@ -258,10 +327,18 @@
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
-    mask-image: linear-gradient(to right, transparent, black var(--spacing-md), black calc(100% - var(--spacing-md)), transparent);
+    mask-image: linear-gradient(
+        to right,
+        transparent,
+        black var(--spacing-md),
+        black calc(100% - var(--spacing-md)),
+        transparent
+    );
 }

-.episode-carousel-compact-list::-webkit-scrollbar { display: none; }
+.episode-carousel-compact-list::-webkit-scrollbar {
+    display: none;
+}

 .carousel-item {
    flex: 0 0 200px;
@@ -290,12 +367,14 @@
 .carousel-item.active-ep-carousel {
    border-color: var(--color-primary);
    background: rgba(139, 92, 246, 0.15);
-    box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-md);
+    box-shadow:
+        0 0 0 2px var(--color-primary),
+        var(--shadow-md);
    transform: scale(1.02);
 }

 .carousel-item.active-ep-carousel::after {
-    content: 'WATCHING';
+    content: "WATCHING";
    position: absolute;
    top: 0;
    right: 0;
@@ -391,7 +470,8 @@
    color: var(--color-primary);
 }

-.anime-details, .anime-extra-content {
+.anime-details,
+.anime-extra-content {
    max-width: 1600px;
    margin: var(--spacing-2xl) auto;
 }
@@ -425,9 +505,17 @@
    text-align: left;
 }

-.cover-image { width: 220px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
+.cover-image {
+    width: 220px;
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-lg);
+}

-.details-content h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: var(--spacing-md); }
+.details-content h1 {
+    font-size: 1.5rem;
+    font-weight: 800;
+    margin-bottom: var(--spacing-md);
+}

 .meta-badge {
    background: rgba(139, 92, 246, 0.12);
@@ -439,8 +527,15 @@
    border: 1px solid rgba(139, 92, 246, 0.2);
 }

-.meta-badge.meta-score { background: var(--color-primary); color: white; }
-.details-description { font-size: 1rem; line-height: 1.7; color: var(--color-text-secondary); }
+.meta-badge.meta-score {
+    background: var(--color-primary);
+    color: white;
+}
+.details-description {
+    font-size: 1rem;
+    line-height: 1.7;
+    color: var(--color-text-secondary);
+}

 .characters-header {
    display: flex;
@@ -471,9 +566,15 @@
    border-radius: var(--radius-sm);
 }

-.expand-btn:hover { background: rgba(139, 92, 246, 0.1); }
-.expand-btn svg { transition: transform var(--transition-smooth); }
-.expand-btn[data-expanded="true"] svg { transform: rotate(180deg); }
+.expand-btn:hover {
+    background: rgba(139, 92, 246, 0.1);
+}
+.expand-btn svg {
+    transition: transform var(--transition-smooth);
+}
+.expand-btn[data-expanded="true"] svg {
+    transform: rotate(180deg);
+}

 .characters-carousel {
    display: flex;
@@ -495,7 +596,6 @@
 }

 .characters-carousel.expanded {
-
    height: auto;
    max-height: 3200px;
    overflow-y: auto;
@@ -519,15 +619,38 @@
    background: transparent;
 }

-.plyr--video { border-radius: var(--radius-xl); }
-.plyr__controls { background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent 100%) !important; padding: 1rem 1.5rem 1.5rem !important; }
-.plyr--full-ui input[type=range] { color: var(--color-primary); }
-.plyr__control:hover { background: rgba(255,255,255,0.12) !important; }
-.plyr__menu__container { background: var(--glass-bg) !important; backdrop-filter: blur(16px); border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg) !important; }
+.plyr--video {
+    border-radius: var(--radius-xl);
+}
+.plyr__controls {
+    background: linear-gradient(
+        to top,
+        rgba(0, 0, 0, 0.9) 0%,
+        rgba(0, 0, 0, 0.5) 50%,
+        transparent 100%
+    ) !important;
+    padding: 1rem 1.5rem 1.5rem !important;
+}
+.plyr--full-ui input[type="range"] {
+    color: var(--color-primary);
+}
+.plyr__control:hover {
+    background: rgba(255, 255, 255, 0.12) !important;
+}
+.plyr__menu__container {
+    background: var(--glass-bg) !important;
+    backdrop-filter: blur(16px);
+    border: 1px solid var(--glass-border);
+    box-shadow: var(--shadow-lg) !important;
+}

@media (min-width: 1024px) {
-    .carousel-nav { display: flex; }
-    .watch-container { padding-top: 5rem; }
+    .carousel-nav {
+        display: flex;
+    }
+    .watch-container {
+        padding-top: 5rem;
+    }

    .details-cover {
        align-items: center;
@@ -540,64 +663,168 @@
 }

@media (max-width: 768px) {
-    .watch-container { padding: 4.5rem 1rem; }
-
-    .episode-carousel-compact-list {
-        padding: var(--spacing-sm) var(--spacing-md);
-    }
-    .carousel-header {
-        padding: 0 var(--spacing-md);
-    }
-    .carousel-item {
-        flex: 0 0 180px;
-        height: 100px;
-    }
-    .carousel-item-img-container { height: 60px; }
-    .carousel-item-info p { font-size: 0.95rem; }
-    .carousel-item.no-thumbnail {
-        flex: 0 0 140px;
-        height: 80px;
+    .watch-container {
+        padding: 5rem 1rem 2rem 1rem;
+        margin: 0;
+        width: 100%;
+        overflow-x: hidden;
    }

-    .details-container { flex-direction: column; text-align: center; }
+    .player-toolbar {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 1rem;
+        padding: 1rem;
+    }

-    .details-cover {
-        align-items: center;
+    .control-group {
+        justify-content: space-between;
        width: 100%;
    }
-    .details-cover h1 {
-        font-size: 2rem;
-        text-align: center;
-    }
-    .cover-image { width: 180px; margin: 0 auto; }

-    .episode-controls { flex-direction: column; gap: var(--spacing-md); }
-    .navigation-buttons { width: 100%; justify-content: center; }
-    .nav-btn { flex: 1; justify-content: center; }
-}
-
-@media (max-width: 480px) {
-    .episode-info h1, .details-content h1 { font-size: 1.5rem; }
-
-    .carousel-item {
-        flex: 0 0 150px;
-        height: 90px;
-    }
-    .carousel-item-img-container { height: 50px; }
-    .carousel-item-info p { font-size: 0.9rem; }
-    .carousel-item.no-thumbnail {
-        flex: 0 0 120px;
-        height: 70px;
+    .source-select {
+        width: 100%;
+        background-position: right 1.5rem center;
    }

-    .details-cover h1 {
-        font-size: 1.5rem;
+    .episode-controls {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1.5rem;
    }

-    .nav-btn span { display: none; }
+    .episode-info {
+        width: 100%;
+        text-align: left;
+    }
+
+    .episode-info h1 {
+        font-size: 1.4rem;
+        line-height: 1.3;
+    }
+
+    .navigation-buttons {
+        width: 100%;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 0.8rem;
+    }
+
+    .nav-btn {
+        justify-content: center;
+        padding: 0.8rem;
+        width: 100%;
+    }
+
+    .details-container {
+        flex-direction: column;
+        padding: 1.5rem;
+        gap: 2rem;
+    }
+
+    .details-cover {
+        flex-direction: row;
+        align-items: flex-start;
+        width: 100%;
+        gap: 1.5rem;
+    }
+
+    @media (max-width: 480px) {
+        .details-cover {
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+        }
+
+        .details-cover h1 {
+            text-align: center;
+        }
+    }
+
+    .cover-image {
+        width: 140px;
+        flex-shrink: 0;
+        margin: 0 auto;
+    }
+
+    .details-content h1 {
+        font-size: 1.3rem;
+    }
+
+    .characters-carousel {
+        justify-content: center;
+        padding-bottom: 1rem;
+    }

    .character-card {
-
-        flex: 1 1 100%;
+        width: calc(50% - 0.75rem);
+        flex: 0 0 calc(50% - 0.75rem);
    }
 }
+
+ .plyr__progress {
+     position: relative;
+ }
+
+.plyr__markers {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    pointer-events: none;
+    z-index: 2;
+}
+
+.plyr__marker {
+    position: absolute;
+    bottom: 0;
+    width: 3px;
+    height: 100%;
+    background: rgba(255, 215, 0, 0.8); /* Color dorado para Opening */
+    pointer-events: all;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.plyr__marker[data-label*="Ending"] {
+    background: rgba(255, 100, 100, 0.8); /* Color rojo para Ending */
+}
+
+.plyr__marker:hover {
+    height: 120%;
+    width: 4px;
+    background: rgba(255, 215, 0, 1);
+}
+
+.plyr__marker[data-label*="Ending"]:hover {
+    background: rgba(255, 100, 100, 1);
+}
+
+/* Tooltip para mostrar el label */
+.plyr__marker::before {
+    content: attr(data-label);
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-8px);
+    background: rgba(0, 0, 0, 0.9);
+    color: white;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+}
+
+.plyr__marker:hover::before {
+    opacity: 1;
+}
+.plyr__marker {
+    position: absolute;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.35);
+    cursor: pointer;
+}
--- a/docker/views/css/books/book.css
+++ b/docker/views/css/books/book.css
@@ -1,28 +1,61 @@
 .back-btn {
    position: fixed;
-    top: 2rem; left: 2rem; z-index: 100;
-    display: flex; align-items: center; gap: 0.5rem;
+    top: 2rem;
+    left: 2rem;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
-    background: var(--color-glass-bg); backdrop-filter: blur(12px);
-    border: var(--border-subtle); border-radius: var(--radius-full);
-    color: white; text-decoration: none; font-weight: 600;
+    background: var(--color-glass-bg);
+    backdrop-filter: blur(12px);
+    border: var(--border-subtle);
+    border-radius: var(--radius-full);
+    color: white;
+    text-decoration: none;
+    font-weight: 600;
    transition: all 0.2s ease;
 }
-.back-btn:hover { background: rgba(255, 255, 255, 0.15); transform: translateX(-5px); }
+.back-btn:hover {
+    background: rgba(255, 255, 255, 0.15);
+    transform: translateX(-5px);
+}

 .hero-wrapper {
-    position: relative; width: 100%; height: 60vh; overflow: hidden;
+    position: relative;
+    width: 100%;
+    height: 60vh;
+    overflow: hidden;
+}
+.hero-background {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+}
+.hero-background img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0.4;
+    filter: blur(8px);
+    transform: scale(1.1);
 }
-.hero-background { position: absolute; inset: 0; z-index: 0; }
-.hero-background img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; filter: blur(8px); transform: scale(1.1); }
 .hero-overlay {
-    position: absolute; inset: 0; z-index: 1;
-    background: linear-gradient(to bottom, transparent 0%, var(--color-bg-base) 100%);
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    background: linear-gradient(
+        to bottom,
+        transparent 0%,
+        var(--color-bg-base) 100%
+    );
 }

 .content-container {
-    position: relative; z-index: 10;
-    max-width: 1600px; margin: -350px auto 0 auto;
+    position: relative;
+    z-index: 10;
+    max-width: 1600px;
+    margin: -350px auto 0 auto;
    padding: 0 3rem 4rem 3rem;
    display: grid;
    grid-template-columns: 260px 1fr;
@@ -31,7 +64,9 @@
    animation: slideUp 0.8s ease;
 }

-.hero-content { display: none; }
+.hero-content {
+    display: none;
+}

 .sidebar {
    display: flex;
@@ -44,49 +79,111 @@
 }

 .poster-card {
-    width: 100%; aspect-ratio: 2/3; border-radius: var(--radius-lg);
-    overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.8);
-    border: 1px solid rgba(255,255,255,0.1);
+    width: 100%;
+    aspect-ratio: 2/3;
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
+    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #1a1a1a;
 }
-.poster-card img { width: 100%; height: 100%; object-fit: cover; }
+.poster-card img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}

 .info-grid {
-    background: var(--color-bg-elevated); border: var(--border-subtle);
-    border-radius: var(--radius-md); padding: 1.25rem;
-    display: flex; flex-direction: column; gap: 1rem;
+    background: var(--color-bg-elevated);
+    border: var(--border-subtle);
+    border-radius: var(--radius-md);
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+.info-item h4 {
+    margin: 0 0 0.25rem 0;
+    font-size: 0.8rem;
+    color: var(--color-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+.info-item span {
+    font-weight: 600;
+    font-size: 0.95rem;
 }
-.info-item h4 { margin: 0 0 0.25rem 0; font-size: 0.8rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
-.info-item span { font-weight: 600; font-size: 0.95rem; }

 .main-content {
-    display: flex; flex-direction: column;
+    display: flex;
+    flex-direction: column;
    padding-top: 4rem;
    justify-content: flex-start;
 }

-.book-header { margin-bottom: 1.5rem; }
-.book-title { font-size: 3.5rem; font-weight: 900; line-height: 1.1; margin: 0 0 1rem 0; text-shadow: 0 4px 30px rgba(0,0,0,0.8); }
-
-.meta-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
-.pill { padding: 0.4rem 1rem; background: rgba(255,255,255,0.1); border-radius: 99px; font-size: 0.9rem; font-weight: 600; border: var(--border-subtle); backdrop-filter: blur(10px); }
-.pill.score { background: rgba(34, 197, 94, 0.2); color: #4ade80; border-color: rgba(34, 197, 94, 0.2); }
-
-#description { display: none; }
-#year { display: none; }
-
-.action-row { display: flex; gap: 1rem; }
-.btn-primary {
-    padding: 0.8rem 2rem; background: white; color: black; border: none; border-radius: 99px;
-    font-weight: 800; cursor: pointer; transition: transform 0.2s;
+.book-header {
+    margin-bottom: 1.5rem;
+}
+.book-title {
+    font-size: 3.5rem;
+    font-weight: 900;
+    line-height: 1.1;
+    margin: 0 0 1rem 0;
+    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
+}
+
+.meta-row {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+    flex-wrap: wrap;
+}
+.pill {
+    padding: 0.4rem 1rem;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 99px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    border: var(--border-subtle);
+    backdrop-filter: blur(10px);
+}
+.pill.score {
+    background: rgba(34, 197, 94, 0.2);
+    color: #4ade80;
+    border-color: rgba(34, 197, 94, 0.2);
+}
+
+#description {
+    display: none;
+}
+#year {
+    display: none;
+}
+
+.action-row {
+    display: flex;
+    gap: 1rem;
+}
+.btn-primary {
+    padding: 0.8rem 2rem;
+    background: white;
+    color: black;
+    border: none;
+    border-radius: 99px;
+    font-weight: 800;
+    cursor: pointer;
+    transition: transform 0.2s;
+}
+.btn-primary:hover {
+    transform: scale(1.05);
 }
-.btn-primary:hover { transform: scale(1.05); }

 .btn-secondary {
    padding: 0.8rem 2rem;
-    background: rgba(255,255,255,0.1);
+    background: rgba(255, 255, 255, 0.1);
    color: white;
-    border: 1px solid rgba(255,255,255,0.2);
+    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 99px;
    font-weight: 700;
    cursor: pointer;
@@ -94,49 +191,80 @@
    backdrop-filter: blur(10px);
 }
 .btn-secondary:hover {
-    background: rgba(255,255,255,0.2);
+    background: rgba(255, 255, 255, 0.2);
 }

 .btn-blur {
    padding: 0.8rem 2rem;
-    background: rgba(255,255,255,0.1);
+    background: rgba(255, 255, 255, 0.1);
    color: white;
-    border: 1px solid rgba(255,255,255,0.2);
+    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 99px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
    backdrop-filter: blur(10px);
 }
-.btn-blur:hover { background: rgba(255,255,255,0.2); }
+.btn-blur:hover {
+    background: rgba(255, 255, 255, 0.2);
+}

-.chapters-section { margin-top: 1rem; }
-.section-title { display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.8rem; margin-bottom: 1.5rem; }
-.section-title h2 { font-size: 1.5rem; margin: 0; border-left: 4px solid var(--color-primary); padding-left: 1rem; }
+.chapters-section {
+    margin-top: 1rem;
+}
+.section-title {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    padding-bottom: 0.8rem;
+    margin-bottom: 1.5rem;
+}
+.section-title h2 {
+    font-size: 1.5rem;
+    margin: 0;
+    border-left: 4px solid var(--color-primary);
+    padding-left: 1rem;
+}

 .chapters-table-wrapper {
-    background: var(--color-bg-elevated); border-radius: var(--radius-md);
-    border: 1px solid rgba(255,255,255,0.05); overflow: hidden;
+    background: var(--color-bg-elevated);
+    border-radius: var(--radius-md);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    overflow: hidden;
+}
+.chapters-table {
+    width: 100%;
+    border-collapse: collapse;
+    text-align: left;
 }
-.chapters-table { width: 100%; border-collapse: collapse; text-align: left; }
 .chapters-table th {
-    padding: 0.8rem 1.2rem; background: rgba(255,255,255,0.03);
-    color: var(--color-text-secondary); font-weight: 600; font-size: 0.85rem;
-    text-transform: uppercase; letter-spacing: 0.5px;
+    padding: 0.8rem 1.2rem;
+    background: rgba(255, 255, 255, 0.03);
+    color: var(--color-text-secondary);
+    font-weight: 600;
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
 }
 .chapters-table td {
-    padding: 1rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,0.05);
-    color: var(--color-text-primary); font-size: 0.95rem;
+    padding: 1rem 1.2rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    color: var(--color-text-primary);
+    font-size: 0.95rem;
+}
+.chapters-table tr:last-child td {
+    border-bottom: none;
+}
+.chapters-table tr:hover {
+    background: var(--color-bg-elevated-hover);
 }
-.chapters-table tr:last-child td { border-bottom: none; }
-.chapters-table tr:hover { background: var(--color-bg-elevated-hover); }

 .filter-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--color-bg-elevated);
    color: var(--color-text-primary);
-    border: 1px solid rgba(255,255,255,0.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.5rem 2rem 0.5rem 1rem;
    border-radius: 99px;
    font-size: 0.9rem;
@@ -159,36 +287,261 @@
 }

 .read-btn-small {
-    background: var(--color-primary); color: white; border: none;
-    padding: 0.4rem 0.9rem; border-radius: 6px; font-weight: 600; cursor: pointer;
-    font-size: 0.8rem; transition: 0.2s;
+    background: var(--color-primary);
+    color: white;
+    border: none;
+    padding: 0.4rem 0.9rem;
+    border-radius: 6px;
+    font-weight: 600;
+    cursor: pointer;
+    font-size: 0.8rem;
+    transition: 0.2s;
+}
+.read-btn-small:hover {
+    background: #7c3aed;
 }
-.read-btn-small:hover { background: #7c3aed; }

 .pagination-controls {
-    display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; align-items: center;
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-top: 1.5rem;
+    align-items: center;
 }
 .page-btn {
-    background: var(--color-bg-elevated); border: 1px solid rgba(255,255,255,0.1);
-    color: white; padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer; font-size: 0.9rem;
+    background: var(--color-bg-elevated);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 0.9rem;
+}
+.page-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+.page-btn:hover:not(:disabled) {
+    border-color: var(--color-primary);
 }
-.page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-.page-btn:hover:not(:disabled) { border-color: var(--color-primary); }

-@keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(40px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}

@media (max-width: 1024px) {
-    .hero-wrapper { height: 40vh; }
-    .content-container { grid-template-columns: 1fr; margin-top: -80px; padding: 0 1.5rem 4rem 1.5rem; }
-    .poster-card { display: none; }
+    .hero-wrapper {
+        height: 40vh;
+    }
+    .content-container {
+        grid-template-columns: 1fr;
+        margin-top: -80px;
+        padding: 0 1.5rem 4rem 1.5rem;
+    }
+    .poster-card {
+        display: none;
+    }

-    .main-content { padding-top: 0; align-items: center; text-align: center; }
-    .book-title { font-size: 2.2rem; }
-    .meta-row { justify-content: center; }
-    .action-row { justify-content: center; width: 100%; }
-    .btn-primary, .btn-blur { flex: 1; justify-content: center; }
+    .main-content {
+        padding-top: 0;
+        align-items: center;
+        text-align: center;
+    }
+    .book-title {
+        font-size: 2.2rem;
+    }
+    .meta-row {
+        justify-content: center;
+    }
+    .action-row {
+        justify-content: center;
+        width: 100%;
+    }
+    .btn-primary,
+    .btn-blur {
+        flex: 1;
+        justify-content: center;
+    }

-    .sidebar { display: none; }
-    .chapters-table th:nth-child(3), .chapters-table td:nth-child(3) { display: none; }
-    .chapters-table th:nth-child(4), .chapters-table td:nth-child(4) { display: none; }
+    .sidebar {
+        display: none;
+    }
+    .chapters-table th:nth-child(3),
+    .chapters-table td:nth-child(3) {
+        display: none;
+    }
+    .chapters-table th:nth-child(4),
+    .chapters-table td:nth-child(4) {
+        display: none;
+    }
+}
+
+@media (max-width: 768px) {
+    .hero-wrapper {
+        height: 35vh;
+    }
+
+    .content-container {
+        display: flex;
+        flex-direction: column;
+        margin-top: -60px;
+        padding: 0 1rem 3rem 1rem;
+        gap: 1.5rem;
+    }
+
+    .sidebar {
+        display: flex !important;
+        position: static;
+        width: 100%;
+        align-items: center;
+        order: 1;
+    }
+
+    .poster-card {
+        display: block !important;
+        width: 160px;
+        margin: 0 auto;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
+        border: 2px solid rgba(255, 255, 255, 0.15);
+    }
+
+    .info-grid {
+        display: none;
+    }
+
+    .main-content {
+        order: 2;
+        padding-top: 0;
+        text-align: center;
+        align-items: center;
+    }
+
+    .book-title {
+        font-size: 2rem;
+        line-height: 1.2;
+        margin-bottom: 0.8rem;
+    }
+
+    .meta-row {
+        justify-content: center;
+        gap: 0.5rem;
+    }
+
+    .pill {
+        padding: 0.3rem 0.8rem;
+        font-size: 0.8rem;
+    }
+
+    .action-row {
+        flex-direction: column;
+        width: 100%;
+        gap: 0.8rem;
+    }
+
+    .btn-primary,
+    .btn-secondary,
+    .btn-blur {
+        width: 100%;
+        justify-content: center;
+        padding: 0.9rem;
+    }
+
+    .chapters-table-wrapper {
+        background: transparent;
+        border: none;
+    }
+
+    .chapters-table thead {
+        display: none;
+    }
+
+    .chapters-table tbody,
+    .chapters-table tr,
+    .chapters-table td {
+        display: block;
+        width: 100%;
+    }
+
+    .chapters-table tr {
+        background: var(--color-bg-elevated);
+        border: 1px solid rgba(255, 255, 255, 0.05);
+        border-radius: 12px;
+        margin-bottom: 0.8rem;
+        padding: 1rem;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .chapters-table td {
+        padding: 0;
+        border: none;
+        text-align: left;
+    }
+
+    .chapters-table td:nth-child(1) {
+        font-size: 1rem;
+        font-weight: 700;
+        color: white;
+    }
+
+    .chapters-table td:nth-child(2) {
+        font-size: 0.8rem;
+        color: var(--color-text-secondary);
+        order: 3;
+    }
+
+    .chapters-table td:last-child {
+        margin-top: 0.5rem;
+        order: 4;
+    }
+
+    .chapters-table td:last-child,
+    .chapters-table td:nth-child(4) {
+        display: block !important;
+        width: 100%;
+        margin-top: 1rem;
+        padding-top: 0.75rem;
+        border-top: 1px solid rgba(255, 255, 255, 0.05);
+    }
+
+    .read-btn-small {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        padding: 0.8rem;
+        font-size: 0.95rem;
+        background: var(--color-primary);
+        border: none;
+        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
+    }
+
+    .chapters-table td:nth-child(3) {
+        display: block !important;
+        font-size: 0.8rem;
+        color: var(--color-text-secondary);
+        margin-bottom: 0.25rem;
+    }
+
+    .chapters-table td:nth-child(3)::before {
+        content: "Provider: ";
+        font-weight: 700;
+        color: #555;
+    }
+
+    .read-btn-small {
+        width: 100%;
+        padding: 0.7rem;
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+    }
 }
--- a/docker/views/css/books/reader.css
+++ b/docker/views/css/books/reader.css
@@ -4,11 +4,15 @@
    --bg-hover: #252530;
 }

-.hidden { display: none !important; }
+.hidden {
+    display: none !important;
+}

 .top-bar {
    position: fixed;
-    top: 0; left: 0; right: 0;
+    top: 0;
+    left: 0;
+    right: 0;
    height: 64px;
    background: rgba(10, 10, 15, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
@@ -107,7 +111,9 @@
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    transition:
+        transform 0.2s ease,
+        box-shadow 0.2s ease;
    cursor: pointer;
    display: block;
 }
@@ -160,7 +166,9 @@
    box-shadow: var(--shadow-lg);
    object-fit: contain;
    cursor: pointer;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    transition:
+        transform 0.2s ease,
+        box-shadow 0.2s ease;
 }

 .double-container img:hover {
@@ -174,7 +182,7 @@
    padding: 3rem 2.5rem;
    line-height: var(--ln-line-height, 1.8);
    font-size: var(--ln-font-size, 18px);
-    font-family: var(--ln-font-family, 'Georgia', serif);
+    font-family: var(--ln-font-family, "Georgia", serif);
    color: var(--ln-text-color, #e5e7eb);
    text-align: var(--ln-text-align, left);
 }
@@ -183,7 +191,9 @@
    margin-bottom: 1.5em;
 }

-.ln-content h1, .ln-content h2, .ln-content h3 {
+.ln-content h1,
+.ln-content h2,
+.ln-content h3 {
    margin-top: 2em;
    margin-bottom: 1em;
    font-weight: 700;
@@ -297,7 +307,7 @@
 .control label span {
    color: var(--color-text-primary);
    font-weight: 600;
-    font-family: 'JetBrains Mono', monospace;
+    font-family: "JetBrains Mono", monospace;
    font-size: 0.8125rem;
 }

@@ -338,7 +348,9 @@ input[type="range"]::-moz-range-thumb {
    transition: all 0.2s;
 }

-select, input[type="color"], input[type="number"] {
+select,
+input[type="color"],
+input[type="number"] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-md);
@@ -350,11 +362,15 @@ select, input[type="color"], input[type="number"] {
    border: 1px solid var(--border-subtle);
 }

-select:hover, input[type="color"]:hover, input[type="number"]:hover {
+select:hover,
+input[type="color"]:hover,
+input[type="number"]:hover {
    border-color: var(--color-primary);
 }

-select:focus, input[type="color"]:focus, input[type="number"]:focus {
+select:focus,
+input[type="color"]:focus,
+input[type="number"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
@@ -454,7 +470,9 @@ input[type="color"] {
 }

@keyframes spin {
-    to { transform: rotate(360deg); }
+    to {
+        transform: rotate(360deg);
+    }
 }

 .loading-container {
@@ -545,3 +563,53 @@ input[type="color"] {
    margin: 0 auto;
    display: block;
 }
+
+@media (max-width: 768px) {
+    #reader {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+
+        padding-top: 64px;
+    }
+
+    .manga-container {
+        width: 100% !important;
+        max-width: 100% !important;
+        gap: 0 !important;
+    }
+
+    .page-img {
+        width: 100% !important;
+        max-width: 100% !important;
+        height: auto !important;
+        border-radius: 0 !important;
+        box-shadow: none !important;
+    }
+
+    .page-img.longstrip-fit {
+        width: 100% !important;
+        max-width: 100% !important;
+        margin: 0 !important;
+    }
+
+    .double-container {
+        flex-direction: column !important;
+        gap: 0 !important;
+        width: 100% !important;
+    }
+
+    .double-container img {
+        width: 100% !important;
+        max-width: 100% !important;
+        border-radius: 0 !important;
+    }
+
+    .fit-height,
+    .fit-screen {
+        width: 100% !important;
+        height: auto !important;
+        max-height: none !important;
+        max-width: 100% !important;
+        object-fit: contain !important;
+    }
+}
--- a/docker/views/css/components/anilist-modal.css
+++ b/docker/views/css/components/anilist-modal.css
@@ -1,7 +1,7 @@
 .modal-overlay {
    position: fixed;
    inset: 0;
-    background: rgba(0,0,0,0.9);
+    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    z-index: 2000;
    display: flex;
@@ -12,14 +12,14 @@

 .modal-content {
    background: var(--color-bg-amoled);
-    border: 1px solid rgba(255,255,255,0.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    max-width: 900px;
    width: 95%;
    padding: 0;
    position: relative;
    animation: modalSlideUp 0.3s ease;
-    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
@@ -40,8 +40,8 @@
    position: absolute;
    top: 1rem;
    right: 1rem;
-    background: rgba(255,255,255,0.05);
-    border: 1px solid rgba(255,255,255,0.1);
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    width: 36px;
    height: 36px;
@@ -66,7 +66,7 @@
    padding: 1.5rem 2rem 0.5rem;
    margin-bottom: 0;
    color: var(--color-text-primary);
-    border-bottom: 1px solid rgba(255,255,255,0.05);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }

 .modal-body {
@@ -112,7 +112,7 @@

 .form-input {
    background: var(--color-bg-field);
-    border: 1px solid rgba(255,255,255,0.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-primary);
    padding: 0.8rem 1rem;
    border-radius: 8px;
@@ -154,7 +154,7 @@
 .form-checkbox {
    width: 18px;
    height: 18px;
-    border: 1px solid rgba(255,255,255,0.2);
+    border: 1px solid rgba(255, 255, 255, 0.2);
    background: var(--color-bg-base);
    border-radius: 4px;
    cursor: pointer;
@@ -171,7 +171,7 @@
 }

 .form-checkbox:checked::after {
-    content: '✓';
+    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
@@ -187,21 +187,25 @@
    justify-content: flex-end;
    flex-shrink: 0;
    padding: 1rem 2rem;
-    border-top: 1px solid rgba(255,255,255,0.05);
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: var(--color-bg-amoled);
    position: sticky;
    bottom: 0;
    z-index: 10;
 }

-.btn-primary, .btn-secondary, .btn-danger {
+.btn-primary,
+.btn-secondary,
+.btn-danger {
    padding: 0.8rem 1.5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
-    transition: transform 0.2s, background 0.2s;
+    transition:
+        transform 0.2s,
+        background 0.2s;
    flex: none;
 }

@@ -215,13 +219,13 @@
 }

 .btn-secondary {
-    background: rgba(255,255,255,0.1);
+    background: rgba(255, 255, 255, 0.1);
    color: white;
-    border: 1px solid rgba(255,255,255,0.2);
+    border: 1px solid rgba(255, 255, 255, 0.2);
 }

 .btn-secondary:hover {
-    background: rgba(255,255,255,0.15);
+    background: rgba(255, 255, 255, 0.15);
 }

 .btn-danger {
@@ -243,26 +247,89 @@
    opacity: 1;
 }

-@media (max-width: 900px) {
+@media (max-width: 600px) {
    .modal-content {
-        max-width: 95%;
+        width: 100%;
+        height: 100%;
+        max-height: 100vh;
+        border-radius: 0;
+        display: flex;
+        flex-direction: column;
    }
+
+    .modal-title {
+        font-size: 1.4rem;
+        padding: 1rem;
+
+        padding-right: 3rem;
+    }
+
+    .modal-close {
+        top: 0.8rem;
+        right: 0.8rem;
+        width: 40px;
+        height: 40px;
+        background: rgba(255, 255, 255, 0.08);
+    }
+
+    .modal-body {
+        padding: 0 1rem;
+    }
+
    .modal-fields-grid {
-        grid-template-columns: repeat(2, 1fr);
+        display: flex;
+        flex-direction: column;
+        gap: 1.2rem;
+        padding: 1rem 0;
    }
-    .form-group.notes-group {
-        grid-column: 1 / -1;
+
+    .form-group,
+    .form-group.notes-group,
+    .form-group.checkbox-group,
+    .form-group.full-width {
+        grid-column: auto;
+        width: 100%;
    }
-    .form-group.checkbox-group {
-        grid-column: 1 / -1;
-        align-self: auto;
+
+    .date-group {
+        flex-direction: column;
+        gap: 1rem;
    }
+
+    .notes-textarea {
+        min-height: 120px;
+    }
+
    .modal-actions {
-        padding: 1rem 1.5rem;
+        flex-direction: column;
+        gap: 0.8rem;
+        padding: 1rem;
+        background: var(--color-bg-elevated);
    }
-    .modal-title, .modal-body {
-        padding-left: 1.5rem;
-        padding-right: 1.5rem;
+
+    .btn-primary,
+    .btn-secondary,
+    .btn-danger {
+        width: 100%;
+        padding: 1rem;
+        margin: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 1rem;
+    }
+
+    .btn-primary {
+        order: 1;
+    }
+    .btn-secondary {
+        order: 2;
+    }
+    .btn-danger {
+        order: 3;
+        margin-top: 0.5rem;
+        background: rgba(239, 68, 68, 0.2);
+        color: #f87171;
+        border: 1px solid rgba(239, 68, 68, 0.3);
    }
 }
-
--- a/docker/views/css/components/hero.css
+++ b/docker/views/css/components/hero.css
@@ -23,8 +23,13 @@
 .hero-vignette {
    position: absolute;
    inset: 0;
-    background: radial-gradient(circle at center, transparent 0%, var(--color-bg-base) 120%),
-    linear-gradient(to top, var(--color-bg-base) 10%, transparent 60%);
+    background:
+        radial-gradient(
+            circle at center,
+            transparent 0%,
+            var(--color-bg-base) 120%
+        ),
+        linear-gradient(to top, var(--color-bg-base) 10%, transparent 60%);
    z-index: 1;
 }

@@ -106,8 +111,18 @@
 .hero-overlay {
    position: absolute;
    inset: 0;
-    background: radial-gradient(circle at center, transparent 0%, var(--color-bg-base) 120%),
-    linear-gradient(to top, var(--color-bg-base) 10%, rgba(9,9,11,0.8) 25%, transparent 60%);
+    background:
+        radial-gradient(
+            circle at center,
+            transparent 0%,
+            var(--color-bg-base) 120%
+        ),
+        linear-gradient(
+            to top,
+            var(--color-bg-base) 10%,
+            rgba(9, 9, 11, 0.8) 25%,
+            transparent 60%
+        );
    z-index: 1;
 }

@@ -118,3 +133,86 @@
    border-radius: 6px;
    border: 1px solid rgba(34, 197, 94, 0.2);
 }
+
+@media (max-width: 768px) {
+    .hero-wrapper {
+        height: auto;
+        min-height: 85vh;
+    }
+
+    .hero-content {
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+
+        padding: 6rem 1.5rem 3rem 1.5rem;
+        gap: 2rem;
+    }
+
+    .hero-poster-card {
+        width: 150px;
+        height: 225px;
+
+        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
+        border: 2px solid rgba(255, 255, 255, 0.15);
+        margin-bottom: 0.5rem;
+    }
+
+    .hero-text {
+        width: 100%;
+        margin-bottom: 0;
+    }
+
+    .hero-title {
+        font-size: 2.2rem;
+        line-height: 1.1;
+        margin-bottom: 0.8rem;
+
+        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);
+    }
+
+    .hero-meta {
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 0.8rem;
+        font-size: 0.9rem;
+    }
+
+    .hero-desc {
+        font-size: 1rem;
+        line-height: 1.5;
+
+        -webkit-line-clamp: 3;
+        max-width: 100%;
+        padding: 0 0.5rem;
+    }
+
+    .hero-buttons {
+        flex-direction: column;
+        width: 100%;
+        gap: 1rem;
+    }
+
+    .hero-buttons .btn-primary,
+    .hero-buttons .btn-blur {
+        width: 100%;
+        justify-content: center;
+        padding: 1rem;
+    }
+
+    .hero-overlay {
+        background:
+            radial-gradient(
+                circle at center,
+                transparent 0%,
+                var(--color-bg-base) 140%
+            ),
+            linear-gradient(
+                to top,
+                var(--color-bg-base) 15%,
+                rgba(0, 0, 0, 0.8) 40%,
+                rgba(0, 0, 0, 0.6) 100%
+            );
+    }
+}
--- a/docker/views/css/components/navbar.css
+++ b/docker/views/css/components/navbar.css
@@ -8,7 +8,11 @@
    align-items: center;
    justify-content: space-between;
    padding: 0 3rem;
-    background: linear-gradient(to bottom, rgba(9, 9, 11, 0.9) 0%, rgba(9, 9, 11, 0) 100%);
+    background: linear-gradient(
+        to bottom,
+        rgba(9, 9, 11, 0.9) 0%,
+        rgba(9, 9, 11, 0) 100%
+    );
    transition: background 0.3s;
 }

@@ -211,7 +215,9 @@
    min-width: 260px;
    display: none;
    flex-direction: column;
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 92, 246, 0.1);
+    box-shadow:
+        0 20px 40px rgba(0, 0, 0, 0.6),
+        0 0 0 1px rgba(139, 92, 246, 0.1);
    z-index: 9999;
    overflow: hidden;
    animation: dropdownSlide 0.2s ease-out;
@@ -416,3 +422,105 @@
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
 }
+
+@media (max-width: 768px) {
+    .navbar {
+        padding: 0 1rem;
+        height: 60px;
+        gap: 0.5rem;
+
+        z-index: 1002;
+        background: rgba(9, 9, 11, 0.95);
+    }
+
+    .nav-brand {
+        min-width: auto;
+        font-size: 0;
+    }
+
+    .brand-icon {
+        width: 32px;
+        height: 32px;
+    }
+
+    .search-wrapper {
+        flex: 1;
+        width: auto;
+    }
+
+    .search-input {
+        padding: 0.5rem 1rem 0.5rem 2.2rem;
+        font-size: 0.9rem;
+    }
+
+    .search-icon {
+        left: 10px;
+    }
+
+    #nav-avatar {
+        width: 32px;
+        height: 32px;
+    }
+
+    .nav-center {
+        position: absolute;
+        top: 60px;
+        left: 0;
+        right: 0;
+
+        display: flex;
+        background: rgba(9, 9, 11, 0.98);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        padding: 0.5rem 1rem;
+
+        overflow-x: auto;
+        white-space: nowrap;
+        justify-content: flex-start;
+        gap: 0.5rem;
+
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+        z-index: 1001;
+
+        border-radius: 0;
+        border: none;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    }
+
+    .nav-center::-webkit-scrollbar {
+        display: none;
+    }
+
+    .nav-button {
+        flex-shrink: 0;
+        padding: 0.4rem 1rem;
+        font-size: 0.85rem;
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.05);
+    }
+
+    .nav-button.active {
+        background: var(--color-primary);
+        border-color: var(--color-primary);
+    }
+
+    .search-results {
+        position: fixed;
+        top: 110px;
+        left: 0;
+        right: 0;
+        width: 100vw;
+        border-radius: 0;
+        max-height: calc(100vh - 120px);
+    }
+
+    .nav-dropdown {
+        position: fixed;
+        top: 70px;
+        right: 1rem;
+        left: 1rem;
+        width: auto;
+        min-width: auto;
+        z-index: 9999;
+    }
+}
--- a/docker/views/css/components/titlebar.css
+++ b/docker/views/css/components/titlebar.css
@@ -1,195 +0,0 @@
-:root {
-    --titlebar-height: 40px;
-}
-
-* {
-    box-sizing: border-box;
-}
-
-html {
-    background: #09090b;
-    visibility: hidden;
-    scrollbar-gutter: stable;
-}
-
-html.electron {
-    margin: 0;
-    box-sizing: border-box;
-    overflow-x: hidden;
-    overflow-y: auto;
-}
-
-html.electron .navbar,
-html.electron .top-bar,
-html.electron .panel-header {
-    top: var(--titlebar-height) !important;
-}
-
-html.electron .panel-content {
-    margin-top: 2rem;
-}
-
-html.electron .calendar-wrapper{
-    margin-top: 4rem;
-}
-
-html.electron .back-btn {
-    top: 55px !important;
-}
-
-#back-link {
-    margin-top: 55px !important;
-}
-
-#titlebar {
-    display: none;
-    height: var(--titlebar-height);
-    background: rgba(9, 9, 11, 0.95);
-    color: white;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 12px;
-    -webkit-app-region: drag;
-    user-select: none;
-    font-family: "Inter", system-ui, sans-serif;
-    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    z-index: 999999;
-    backdrop-filter: blur(12px);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-}
-
-.title-left {
-    display: flex;
-    align-items: center !important;
-    gap: 10px;
-}
-
-#titlebar .app-icon {
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 6px;
-    background: rgba(139, 92, 246, 0.15);
-    border: 1px solid rgba(139, 92, 246, 0.3);
-    padding: 3px;
-}
-
-#titlebar .app-icon img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-}
-
-.app-title {
-    font-size: 13px;
-    font-weight: 600;
-    color: rgba(255, 255, 255, 0.9);
-    letter-spacing: -0.2px;
-}
-
-.title-right {
-    display: flex;
-    height: 100%;
-    gap: 1px;
-}
-
-.title-right button {
-    -webkit-app-region: no-drag;
-    border: none;
-    background: transparent;
-    color: rgba(255, 255, 255, 0.7);
-    width: 46px;
-    height: 100%;
-    cursor: pointer;
-    font-size: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-}
-
-.title-right button svg {
-    width: 16px;
-    height: 16px;
-    transition: transform 0.2s;
-}
-
-.title-right button:hover {
-    color: white;
-}
-
-.title-right button:active {
-    transform: scale(0.95);
-}
-
-.title-right .min:hover {
-    background: rgba(139, 92, 246, 0.2);
-}
-
-.title-right .max:hover {
-    background: rgba(34, 197, 94, 0.2);
-}
-
-.title-right .close:hover {
-    background: #e81123;
-    color: white;
-}
-
-.title-right button:hover svg {
-    transform: scale(1.1);
-}
-
-html.electron::-webkit-scrollbar {
-    width: 12px;
-    position: absolute;
-}
-
-html.electron::-webkit-scrollbar-track {
-    background: #09090b;
-    margin-top: var(--titlebar-height);
-}
-
-html.electron::-webkit-scrollbar-thumb {
-    background: rgba(139, 92, 246, 0.3);
-    border-radius: 6px;
-    border: 2px solid #09090b;
-}
-
-html.electron::-webkit-scrollbar-thumb:hover {
-    background: rgba(139, 92, 246, 0.5);
-}
-
-body {
-    margin: 0;
-    padding: 0;
-    overflow-x: hidden;
-}
-
-.user-box {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-right: 12px;
-}
-
-.user-box img {
-    width: 26px;
-    height: 26px;
-    border-radius: 50%;
-    object-fit: cover;
-}
-
-.user-box span {
-    font-size: 13px;
-    opacity: 0.9;
-}
-
-.hidden {
-    display: none;
-}
--- a/docker/views/css/globals.css
+++ b/docker/views/css/globals.css
@@ -57,7 +57,7 @@ body {
    padding: 0;
    background-color: var(--color-bg-base);
    color: var(--color-text-primary);
-    font-family: 'Inter', system-ui, sans-serif;
+    font-family: "Inter", system-ui, sans-serif;
    overflow-x: hidden;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
@@ -288,7 +288,7 @@ body {
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 1rem;
-    border: 1px solid rgba(255,255,255,0.2);
+    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
@@ -299,3 +299,80 @@ body {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
 }
+
+@media (max-width: 768px) {
+    :root {
+        --nav-height: 60px;
+        --spacing-2xl: 1.5rem;
+    }
+
+    .section {
+        padding: 1.25rem 1rem;
+    }
+
+    .section-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+    }
+
+    .section-title {
+        font-size: 1.5rem;
+    }
+
+    .back-btn {
+        top: 1rem;
+        left: 1rem;
+        padding: 0.6rem 1.2rem;
+        font-size: 0.9rem;
+
+        position: absolute;
+    }
+
+    .scroll-btn {
+        display: none !important;
+    }
+
+    .carousel {
+        padding: 0.5rem 0;
+
+        padding-right: 1.5rem;
+    }
+
+    .card {
+        min-width: 160px;
+        width: 160px;
+        flex: 0 0 160px;
+    }
+
+    .card-content h3 {
+        font-size: 0.9rem;
+    }
+
+    .profile-selection-container,
+    main {
+        width: 90% !important;
+        margin: 0 auto;
+        padding-top: 20vh;
+        text-align: center;
+    }
+
+    h1 {
+        font-size: 2rem !important;
+        line-height: 1.2;
+    }
+
+    .profile-card img,
+    .user-avatar {
+        width: 140px !important;
+        height: 140px !important;
+    }
+
+    .btn-primary,
+    .btn-blur,
+    .add-user-btn {
+        width: 100%;
+        justify-content: center;
+        padding: 1rem;
+    }
+}
--- a/docker/views/css/list.css
+++ b/docker/views/css/list.css
@@ -27,14 +27,16 @@

 .stat-card {
    background: var(--color-bg-elevated);
-    border: 1px solid rgba(255,255,255,0.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
-    transition: transform 0.3s, box-shadow 0.3s;
-    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
+    transition:
+        transform 0.3s,
+        box-shadow 0.3s;
+    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
 }

 .stat-card:hover {
@@ -54,7 +56,6 @@
    font-weight: 600;
 }

-/* --- Filtros mejorados --- */
 .filters-section {
    display: flex;
    gap: 1.5rem;
@@ -62,9 +63,9 @@
    padding: 1.5rem;
    background: var(--color-bg-elevated);
    border-radius: var(--radius-md);
-    border: 1px solid rgba(255,255,255,0.05);
+    border: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
 }

 .filter-group {
@@ -85,7 +86,7 @@

 .filter-select {
    background: var(--color-bg-base);
-    border: 1px solid rgba(255,255,255,0.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-primary);
    padding: 0.7rem 1rem;
    border-radius: 8px;
@@ -118,7 +119,7 @@

 .view-btn {
    background: var(--color-bg-base);
-    border: 1px solid rgba(255,255,255,0.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-secondary);
    padding: 0.7rem;
    border-radius: 8px;
@@ -159,7 +160,9 @@
 }

@keyframes spin {
-    to { transform: rotate(360deg); }
+    to {
+        transform: rotate(360deg);
+    }
 }

 .empty-state {
@@ -194,14 +197,14 @@

 .list-item {
    background: var(--color-bg-elevated-hover);
-    border: 1px solid rgba(255,255,255,0.08);
+    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
    position: relative;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
 }

 .list-item:hover {
@@ -236,16 +239,15 @@
 }

 .list-grid.list-view .item-poster {
-    /* Cambiar el ancho y alto */
-    width: 120px; /* Antes: 100px */
-    height: 180px; /* Antes: 150px */
+    width: 120px;
+    height: 180px;
    aspect-ratio: auto;
    border-radius: 8px;
    margin: 1rem;
 }

 .item-content {
-    padding: 1rem; /* Antes: 1.2rem */
+    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
@@ -262,7 +264,7 @@
 }

 .item-title {
-    font-size: 1rem; /* Antes: 1.1rem */
+    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    white-space: nowrap;
@@ -281,16 +283,16 @@

 .item-meta {
    display: flex;
-    gap: 0.3rem; /* Antes: 0.75rem. Espacio entre los pills */
-    margin-bottom: 0.5rem; /* Antes: 0.8rem */
+    gap: 0.3rem;
+    margin-bottom: 0.5rem;
    flex-wrap: wrap;
-    /* Añadir: Asegura que si se envuelven, lo hagan con poco margen vertical */
+
    line-height: 1.4;
 }

 .meta-pill {
-    font-size: 0.65rem; /* Antes: 0.7rem */
-    padding: 0.15rem 0.4rem; /* Antes: 0.25rem 0.6rem. Reduce el padding interno */
+    font-size: 0.65rem;
+    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    font-weight: 700;
    white-space: nowrap;
@@ -329,12 +331,12 @@
 }

 .progress-bar-container {
-    background: rgba(255,255,255,0.08);
+    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
    margin-bottom: 0.5rem;
-    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
 }

 .progress-bar {
@@ -364,7 +366,6 @@
    border-radius: 4px;
 }

-/* --- Botón de edición flotante --- */
 .edit-icon-btn {
    position: absolute;
    top: 1rem;
@@ -382,7 +383,10 @@
    align-items: center;
    justify-content: center;
    opacity: 0;
-    transition: opacity 0.3s, transform 0.2s, background 0.2s;
+    transition:
+        opacity 0.3s,
+        transform 0.2s,
+        background 0.2s;
 }

 .list-item:hover .edit-icon-btn {
@@ -412,74 +416,92 @@
    transform: none;
 }

-/* --- Modal de Edición Mejorado (Estilo Anilist + AMOLED) --- */
-
-@media (max-width: 550px) {
-    /* Layout de lista (card view) */
-    .list-grid {
-        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    }
-    .list-grid.list-view .list-item {
-        flex-direction: column;
-        align-items: flex-start;
-        padding-right: 0;
-    }
-    .list-grid.list-view .item-poster {
-        width: 100%;
-        height: auto;
-        margin: 0;
-        border-radius: 0;
-        aspect-ratio: 16/9;
-    }
-    .list-grid.list-view .item-content {
-        flex-direction: column;
+@media (max-width: 768px) {
+    .container {
        padding: 1rem;
-    }
-    .list-grid.list-view .item-content > div:first-child {
-        flex-basis: auto;
-    }
-    .list-grid.list-view .edit-icon-btn {
-        position: absolute;
-        top: 1rem;
-        right: 1rem;
-        opacity: 1;
-        background: rgba(18, 18, 21, 0.8);
+        width: 100%;
    }

-    /* Modal en móvil */
-    .modal-content {
-        margin: 0.5rem;
-        width: auto;
+    .header-section {
+        margin-top: 1rem;
+        margin-bottom: 1.5rem;
    }
-    .modal-fields-grid {
+
+    .page-title {
+        font-size: 2rem;
+        text-align: center;
+        margin-bottom: 1.5rem;
+    }
+
+    .stats-row {
        grid-template-columns: 1fr;
        gap: 1rem;
-        padding-bottom: 0;
    }
-    .form-group.notes-group,
-    .form-group.checkbox-group {
-        grid-column: auto;
+
+    .stat-card {
+        padding: 1rem;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
    }
-    .modal-actions {
-        flex-direction: column;
-        align-items: stretch;
-    }
-    .btn-danger {
-        margin-right: 0;
-        order: 3;
-    }
-    .btn-secondary {
+
+    .stat-value {
+        font-size: 1.8rem;
        order: 2;
    }
-    .btn-primary {
+
+    .stat-label {
+        font-size: 1rem;
        order: 1;
    }
-}

-.edit-btn-card {
-    display: none;
-}
+    .filters-section {
+        flex-direction: column;
+        padding: 1rem;
+        gap: 1rem;
+    }

-.item-poster-link {
-    z-index: 1;
+    .filter-group {
+        min-width: 100%;
+    }
+
+    .filter-select {
+        width: 100%;
+        padding: 0.8rem;
+    }
+
+    .view-toggle {
+        width: 100%;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .view-btn {
+        justify-content: center;
+    }
+
+    .list-grid {
+        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+        gap: 1rem;
+    }
+
+    .item-title {
+        font-size: 0.9rem;
+    }
+
+    .item-meta {
+        gap: 0.2rem;
+    }
+
+    .meta-pill {
+        font-size: 0.6rem;
+        padding: 0.1rem 0.3rem;
+    }
+
+    .edit-icon-btn {
+        opacity: 1;
+        background: rgba(0, 0, 0, 0.6);
+        width: 35px;
+        height: 35px;
+    }
 }
--- a/docker/views/css/marketplace.css
+++ b/docker/views/css/marketplace.css
@@ -293,3 +293,101 @@
    background: #ef4444;
    transform: scale(1.02);
 }
+
+.extension-author {
+    font-size: 0.8rem;
+    color: var(--color-text-secondary);
+    display: block;
+    margin-bottom: 0.5rem;
+}
+
+.extension-tags {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.badge-available {
+    background: rgba(59, 130, 246, 0.2);
+    color: #60a5fa;
+    border: 1px solid rgba(59, 130, 246, 0.3);
+}
+
+.nsfw-ext {
+    border-color: rgba(220, 38, 38, 0.3);
+}
+
+.broken-ext {
+    filter: grayscale(0.8);
+    opacity: 0.7;
+    border: 1px dashed #ef4444; /* Borde rojo discontinuo */
+}
+
+.broken-ext:hover {
+    transform: none; /* Evitamos que se mueva al pasar el ratón si está rota */
+}
+
+/* Estilos para los Tabs */
+.tabs-container {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+    border-bottom: 1px solid rgba(255,255,255,0.1);
+    padding-bottom: 0.5rem;
+}
+
+.tab-button {
+    background: none;
+    border: none;
+    color: var(--color-text-secondary);
+    font-size: 1.1rem;
+    font-weight: 700;
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    transition: all 0.3s;
+    position: relative;
+}
+
+.tab-button.active {
+    color: var(--color-primary);
+}
+
+.tab-button.active::after {
+    content: '';
+    position: absolute;
+    bottom: -0.6rem;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background: var(--color-primary);
+    border-radius: 999px;
+    box-shadow: 0 0 10px var(--color-primary-glow);
+}
+
+.marketplace-section-title {
+    font-size: 1.4rem;
+    font-weight: 800;
+    margin: 2rem 0 1rem 0;
+    color: var(--color-text-primary);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-transform: capitalize;
+}
+
+.marketplace-section-title::before {
+    content: '';
+    display: inline-block;
+    width: 4px;
+    height: 20px;
+    background: var(--color-primary);
+    border-radius: 2px;
+}
+
+.category-group {
+    margin-bottom: 3rem;
+}
+
+.hidden {
+    display: none !important;
+}
--- a/docker/views/css/schedule/schedule.css
+++ b/docker/views/css/schedule/schedule.css
@@ -361,3 +361,97 @@ html.electron body {
        transform: rotate(360deg);
    }
 }
+
+@media (max-width: 768px) {
+    body {
+        height: auto;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+
+    .calendar-wrapper {
+        padding: 1rem;
+        height: auto;
+        overflow: visible;
+        display: block;
+    }
+
+    .calendar-controls {
+        flex-direction: column;
+        gap: 1rem;
+        padding-bottom: 1rem;
+    }
+
+    .month-selector {
+        width: 100%;
+        justify-content: space-between;
+        gap: 0.5rem;
+    }
+
+    .month-title {
+        font-size: 1.5rem;
+        min-width: auto;
+        text-align: center;
+        flex: 1;
+    }
+
+    .controls-right {
+        width: 100%;
+        justify-content: center;
+    }
+
+    .calendar-board {
+        border: none;
+        background: transparent;
+        box-shadow: none;
+        overflow: visible;
+    }
+
+    .weekdays-grid {
+        display: none;
+    }
+
+    .days-grid {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        background: transparent;
+        height: auto;
+        overflow: visible;
+    }
+
+    .day-cell.empty {
+        display: none;
+    }
+
+    .day-cell {
+        border: 1px solid var(--border-subtle);
+        border-radius: var(--radius-lg);
+        background: var(--color-bg-elevated);
+        min-height: auto;
+        padding: 1rem;
+    }
+
+    .day-cell:nth-child(7n) {
+        border-right: 1px solid var(--border-subtle);
+    }
+
+    .day-header {
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        padding-bottom: 0.5rem;
+        margin-bottom: 0.8rem;
+    }
+
+    .day-number {
+        background: rgba(255, 255, 255, 0.05);
+    }
+
+    .anime-chip {
+        padding: 12px;
+        font-size: 0.95rem;
+    }
+
+    .cell-backdrop {
+        display: none;
+    }
+}
--- a/docker/views/css/users.css
+++ b/docker/views/css/users.css
@@ -10,15 +10,29 @@
 .background-gradient {
    position: fixed;
    inset: 0;
-    background: radial-gradient(ellipse at top, rgba(139, 92, 246, 0.15) 0%, transparent 60%),
-    radial-gradient(ellipse at bottom right, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
+    background:
+        radial-gradient(
+            ellipse at top,
+            rgba(139, 92, 246, 0.15) 0%,
+            transparent 60%
+        ),
+        radial-gradient(
+            ellipse at bottom right,
+            rgba(59, 130, 246, 0.1) 0%,
+            transparent 50%
+        );
    z-index: 0;
    animation: gradientShift 10s ease infinite;
 }

@keyframes gradientShift {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.7; }
+    0%,
+    100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.7;
+    }
 }

 .content-container {
@@ -80,9 +94,8 @@
    box-shadow: 0 20px 40px rgba(139, 92, 246, 0.3);
 }

-/* Badge de contraseña protegida */
 .user-card.has-password::after {
-    content: '🔒';
+    content: "🔒";
    position: absolute;
    top: 10px;
    left: 10px;
@@ -116,7 +129,11 @@
    display: flex;
    align-items: center;
    justify-content: center;
-    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
+    background: linear-gradient(
+        135deg,
+        rgba(139, 92, 246, 0.1) 0%,
+        rgba(59, 130, 246, 0.05) 100%
+    );
 }

 .user-avatar-placeholder svg {
@@ -131,7 +148,12 @@
    left: 0;
    right: 0;
    padding: 1rem 1.5rem;
-    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
+    background: linear-gradient(
+        to top,
+        rgba(0, 0, 0, 0.95) 0%,
+        rgba(0, 0, 0, 0.7) 50%,
+        transparent 100%
+    );
    transform: translateY(100%);
    transition: transform 0.3s ease;
 }
@@ -168,7 +190,9 @@
    justify-content: center;
    cursor: pointer;
    opacity: 0;
-    transition: opacity 0.3s, background 0.2s;
+    transition:
+        opacity 0.3s,
+        background 0.2s;
    z-index: 20;
 }

@@ -205,7 +229,6 @@
    box-shadow: 0 10px 30px var(--color-primary-glow);
 }

-/* Modal Styles */
 .modal {
    display: none;
    position: fixed;
@@ -438,7 +461,6 @@ input[type="file"] {
    color: white;
 }

-/* Estilos para modal de password */
 .password-modal-content {
    padding: 1.5rem;
 }
@@ -461,7 +483,6 @@ input[type="file"] {
    margin-top: 0.1rem;
 }

-/* ESTILOS PARA MODAL DE ACCIONES INDIVIDUALES */
 .manage-actions-modal {
    display: flex;
    flex-direction: column;
@@ -673,10 +694,13 @@ input[type="file"] {
    border: 1px solid rgba(59, 130, 246, 0.4);
 }

-/* Animations */
@keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }

@keyframes fadeInDown {
@@ -720,22 +744,121 @@ input[type="file"] {
 }

@keyframes shimmer {
-    0% { background-position: 200% 0; }
-    100% { background-position: -200% 0; }
+    0% {
+        background-position: 200% 0;
+    }
+    100% {
+        background-position: -200% 0;
+    }
 }

-/* Responsive */
@media (max-width: 768px) {
+    .page-wrapper {
+        padding: 1rem;
+
+        align-items: flex-start;
+        padding-top: 2rem;
+    }
+
+    .header-section {
+        margin-bottom: 2rem;
+    }
+
    .page-title {
-        font-size: 2.5rem;
+        font-size: 2.2rem;
+        line-height: 1.1;
    }

    .users-grid {
-        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-        gap: 1.5rem;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.75rem;
+        max-width: 100%;
+    }
+
+    .user-name {
+        font-size: 1.1rem;
+        font-weight: 800;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
+    }
+
+    .user-config-btn {
+        width: 44px;
+        height: 44px;
+        top: 5px;
+        right: 5px;
+        background: rgba(0, 0, 0, 0.6);
+        opacity: 1 !important;
+    }
+
+    .user-config-btn svg {
+        width: 20px;
+        height: 20px;
+    }
+
+    .btn-add-user {
+        width: 100%;
+        padding: 1.25rem;
+        font-size: 1.1rem;
+        margin-bottom: 3rem;
+    }
+}
+
+@media (max-width: 380px) {
+    .users-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+
+    .user-card {
+        aspect-ratio: 16/9;
+    }
+}
+
+@media (hover: none) {
+    .user-info {
+        transform: translateY(0);
+        background: linear-gradient(
+            to top,
+            rgba(0, 0, 0, 0.95) 0%,
+            rgba(0, 0, 0, 0.6) 50%,
+            transparent 100%
+        );
+        padding: 1rem;
+    }
+
+    .user-card:hover {
+        transform: none;
+        border-color: rgba(255, 255, 255, 0.1);
+    }
+
+    .user-card:active {
+        transform: scale(0.97);
+        border-color: var(--color-primary);
+    }
+}
+
+@media (max-width: 768px) {
+    .modal {
+        align-items: flex-end;
    }

    .modal-content {
+        width: 100%;
+        max-width: 100%;
+        border-radius: 20px 20px 0 0;
+        max-height: 85vh;
        padding: 1.5rem;
+        overflow-y: auto;
+    }
+
+    .form-group input[type="text"],
+    .form-group input[type="password"] {
+        padding: 1.2rem;
+        font-size: 16px;
+    }
+
+    .btn-primary,
+    .btn-secondary {
+        padding: 1.2rem;
    }
 }
--- a/docker/views/gallery/gallery.html
+++ b/docker/views/gallery/gallery.html
@@ -12,20 +12,8 @@
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js" async></script>
-    <link rel="stylesheet" href="/views/css/components/titlebar.css">
-    <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
-<div id="titlebar"> <div class="title-left">
-    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
-    <span class="app-title">WaifuBoard</span>
-</div>
-    <div class="title-right">
-        <button class="min">—</button>
-        <button class="max">🗖</button>
-        <button class="close">✕</button>
-    </div>
-</div>

 <nav class="navbar" id="navbar">
    <a href="#" class="nav-brand">
@@ -131,7 +119,6 @@

 <script src="/src/scripts/updateNotifier.js"></script>
 <script src="/src/scripts/gallery/gallery.js"></script>
-<script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
 </body>
 </html>
--- a/docker/views/gallery/image.html
+++ b/docker/views/gallery/image.html
@@ -7,24 +7,12 @@
  <link rel="stylesheet" href="/views/css/components/navbar.css">
  <link rel="stylesheet" href="/views/css/globals.css">
  <link rel="stylesheet" href="/views/css/gallery/gallery.css">
-  <link rel="stylesheet" href="/views/css/components/titlebar.css">
  <link rel="stylesheet" href="/views/css/gallery/image.css">
  <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
  <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
-  <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
-<div id="titlebar"> <div class="title-left">
-  <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
-  <span class="app-title">WaifuBoard</span>
-</div>
-  <div class="title-right">
-    <button class="min">—</button>
-    <button class="max">🗖</button>
-    <button class="close">✕</button>
-  </div>
-</div>

 <nav class="navbar" id="navbar">
  <a href="#" class="nav-brand">
@@ -116,7 +104,6 @@

 <script src="/src/scripts/updateNotifier.js"></script>
 <script src="/src/scripts/gallery/image.js"></script>
-<script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
 </body>
 </html>
--- a/docker/views/list.html
+++ b/docker/views/list.html
@@ -10,20 +10,8 @@
    <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
    <link rel="stylesheet" href="/views/css/list.css">
    <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
-    <link rel="stylesheet" href="/views/css/components/titlebar.css">
-    <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
-<div id="titlebar"> <div class="title-left">
-    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
-    <span class="app-title">WaifuBoard</span>
-</div>
-    <div class="title-right">
-        <button class="min">—</button>
-        <button class="max">🗖</button>
-        <button class="close">✕</button>
-    </div>
-</div>

 <nav class="navbar" id="navbar">
    <a href="#" class="nav-brand">
@@ -268,7 +256,6 @@
 </div>

 <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/utils/auth-utils.js"></script>
 <script src="/src/scripts/utils/notification-utils.js"></script>
--- a/docker/views/marketplace.html
+++ b/docker/views/marketplace.html
@@ -9,20 +9,8 @@
    <link rel="stylesheet" href="/views/css/marketplace.css">
    <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
-    <link rel="stylesheet" href="/views/css/components/titlebar.css">
-    <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
-<div id="titlebar"> <div class="title-left">
-    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
-    <span class="app-title">WaifuBoard</span>
-</div>
-    <div class="title-right">
-        <button class="min">—</button>
-        <button class="max">🗖</button>
-        <button class="close">✕</button>
-    </div>
-</div>

 <nav class="navbar" id="navbar">
    <a href="#" class="nav-brand">
@@ -36,9 +24,9 @@
        <button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
        <button class="nav-button" onclick="window.location.href='/books'">Books</button>
        <button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
-        <button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
+        <button class="nav-button" onclick="window.location.href='/schedule.html'">Schedule</button>
        <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
-        <button class="nav-button active">Marketplace</button>
+        <button class="nav-button">Marketplace</button>
    </div>

    <div class="nav-right">
@@ -90,47 +78,31 @@

 <main>
    <section class="section">
-
        <header class="section-header">
-            <p class="marketplace-subtitle">Explore, install, and manage all available data source extensions for WaifuBoard.</p>
+            <div class="tabs-container">
+                <button class="tab-button active" data-tab="marketplace">Marketplace</button>
+                <button class="tab-button" data-tab="installed">My Extensions</button>
+            </div>
+
            <div class="filter-controls">
+                <button id="btn-update-all" class="btn-blur hidden" style="margin-right: 10px; width: auto; padding: 0 15px;">
+                    Update All
+                </button>
                <label for="extension-filter" class="filter-label">Filter by Type:</label>
                <select id="extension-filter" class="filter-select">
-                    <option value="All">All Extensions</option>
-                    <option value="Image">Image Boards</option>
-                    <option value="Anime">Anime Boards</option>
-                    <option value="Book">Book Boards</option>
-                    <option value="Local">Local Only</option>
+                    <option value="All">All Categories</option>
+                    <option value="image-board">Image Boards</option>
+                    <option value="anime-board">Anime Boards</option>
+                    <option value="book-board">Book Boards</option>
+                    <option value="Local">Local/Manual</option>
                </select>
            </div>
        </header>
-        <div class="marketplace-grid" id="extensions-grid">
-            <div class="extension-card skeleton grid-item">
-                <div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
-                <div class="card-content-wrapper">
-                    <div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
-                    <div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
-                </div>
-                <div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
-            </div>
-            <div class="extension-card skeleton grid-item">
-                <div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
-                <div class="card-content-wrapper">
-                    <div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
-                    <div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
-                </div>
-                <div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
-            </div>
-            <div class="extension-card skeleton grid-item">
-                <div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
-                <div class="card-content-wrapper">
-                    <div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
-                    <div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
-                </div>
-                <div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
-            </div>
+
+        <div id="marketplace-content">
        </div>
    </section>
+
    <div id="customModal" class="modal-overlay hidden">
        <div class="modal-content">
            <h3 id="modalTitle"></h3>
@@ -143,22 +115,9 @@
    </div>
 </main>

-<div id="updateToast" class="hidden">
-    <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
-
-    <a
-            id="downloadButton"
-            href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
-            target="_blank"
-    >
-        Click To Download
-    </a>
-</div>
-
+<script src="/src/scripts/utils/notification-utils.js"></script>
 <script src="/src/scripts/updateNotifier.js"></script>
-<script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/marketplace.js"></script>
-<script src="/src/scripts/titlebar.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
 </body>
 </html>
--- a/docker/views/schedule.html
+++ b/docker/views/schedule.html
@@ -12,21 +12,8 @@
    <link rel="stylesheet" href="/views/css/schedule/schedule.css">
    <link rel="stylesheet" href="/views/css/components/navbar.css">
    <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
-    <link rel="stylesheet" href="/views/css/components/titlebar.css">
-    <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
-<div id="titlebar"> <div class="title-left">
-    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
-    <span class="app-title">WaifuBoard</span>
-</div>
-    <div class="title-right">
-        <button class="min">—</button>
-        <button class="max">🗖</button>
-        <button class="close">✕</button>
-    </div>
-</div>
-
    <div class="ambient-bg" id="ambientBg"></div>

 <nav class="navbar" id="navbar">
@@ -152,7 +139,6 @@

    <script src="/src/scripts/updateNotifier.js"></script>
    <script src="/src/scripts/schedule/schedule.js"></script>
-    <script src="/src/scripts/rpc-inapp.js"></script>
    <script src="/src/scripts/auth-guard.js"></script>
 </body>
 </html>
--- a/docker/views/users.html
+++ b/docker/views/users.html
@@ -1,174 +1,262 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>WaifuBoard - Users</title>
-  <link rel="stylesheet" href="/views/css/globals.css">
-  <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
-  <link rel="stylesheet" href="/views/css/components/titlebar.css">
-  <link rel="stylesheet" href="/views/css/users.css">
-  <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
-  <script src="/src/scripts/titlebar.js"></script>
-</head>
-<body>
-<div id="titlebar"> <div class="title-left">
-  <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
-  <span class="app-title">WaifuBoard</span>
-</div>
-  <div class="title-right">
-    <button class="min">—</button>
-    <button class="max">🗖</button>
-    <button class="close">✕</button>
-  </div>
-</div>
+    <head>
+        <meta charset="UTF-8" />
+        <title>WaifuBoard - Users</title>
+        <link rel="stylesheet" href="/views/css/globals.css" />
+        <link
+            rel="stylesheet"
+            href="/views/css/components/updateNotifier.css"
+        />
+        <link rel="stylesheet" href="/views/css/users.css" />
+        <link
+            rel="icon"
+            href="/public/assets/waifuboards.ico"
+            type="image/x-icon"
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    </head>
+    <body>
+        <div class="page-wrapper">
+            <div class="background-gradient"></div>

-<div class="page-wrapper">
-  <div class="background-gradient"></div>
+            <div class="content-container">
+                <div class="header-section">
+                    <h1 class="page-title">Who's exploring?</h1>
+                    <p class="page-subtitle">Select your profile to continue</p>
+                </div>

-  <div class="content-container">
-    <div class="header-section">
-      <h1 class="page-title">Who's exploring?</h1>
-      <p class="page-subtitle">Select your profile to continue</p>
-    </div>
+                <div class="users-grid" id="usersGrid"></div>

-    <div class="users-grid" id="usersGrid">
-    </div>
-
-    <button class="btn-add-user" id="btnAddUser">
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <line x1="12" y1="5" x2="12" y2="19"></line>
-        <line x1="5" y1="12" x2="19" y2="12"></line>
-      </svg>
-      Add User
-    </button>
-  </div>
-</div>
-
-<div class="modal" id="modalCreateUser">
-  <div class="modal-overlay"></div>
-  <div class="modal-content">
-    <div class="modal-header">
-      <h2>Create New User</h2>
-      <button class="modal-close" id="closeCreateModal">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <line x1="18" y1="6" x2="6" y2="18"></line>
-          <line x1="6" y1="6" x2="18" y2="18"></line>
-        </svg>
-      </button>
-    </div>
-    <form id="createUserForm">
-      <div class="form-group">
-        <label for="username">Username</label>
-        <input type="text" id="username" name="username" required maxlength="20" placeholder="Enter your name">
-      </div>
-      <div class="form-group">
-        <label>Profile Picture</label>
-        <div class="avatar-upload-area" id="avatarUploadArea">
-          <div class="avatar-preview" id="avatarPreview">
-            <svg class="avatar-preview-placeholder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
-              <circle cx="12" cy="7" r="4"></circle>
-            </svg>
-          </div>
-          <p class="avatar-upload-text">Click to upload or drag and drop</p>
-          <p class="avatar-upload-hint">PNG, JPG, GIF... up to 50 MB</p>
+                <button class="btn-add-user" id="btnAddUser">
+                    <svg
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <line x1="12" y1="5" x2="12" y2="19"></line>
+                        <line x1="5" y1="12" x2="19" y2="12"></line>
+                    </svg>
+                    Add User
+                </button>
+            </div>
        </div>
-        <input type="file" id="avatarInput" accept="image/*">
-      </div>
-      <div class="modal-actions">
-        <button type="button" class="btn-secondary" id="cancelCreate">Cancel</button>
-        <button type="submit" class="btn-primary">Create User</button>
-      </div>
-    </form>
-  </div>
-</div>

-<div class="modal" id="modalUserActions">
-  <div class="modal-overlay"></div>
-  <div class="modal-content" style="max-width: 400px;">
-    <div class="modal-header">
-      <h2 id="actionsModalTitle">Manage Profile</h2>
-      <button class="modal-close" id="closeActionsModal">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <line x1="18" y1="6" x2="6" y2="18"></line>
-          <line x1="6" y1="6" x2="18" y2="18"></line>
-        </svg>
-      </button>
-    </div>
-    <div id="actionsModalContent">
-    </div>
-  </div>
-</div>
-
-<div class="modal" id="modalEditUser">
-  <div class="modal-overlay"></div>
-  <div class="modal-content">
-    <div class="modal-header">
-      <h2>Edit Profile</h2>
-      <button class="modal-close" id="closeEditModal">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <line x1="18" y1="6" x2="6" y2="18"></line>
-          <line x1="6" y1="6" x2="18" y2="18"></line>
-        </svg>
-      </button>
-    </div>
-    <form id="editUserForm">
-      <div class="form-group">
-        <label for="editUsername">Username</label>
-        <input type="text" id="editUsername" name="username" required maxlength="20" placeholder="Enter your new name">
-      </div>
-      <div class="form-group">
-        <label>Profile Picture</label>
-        <div class="avatar-upload-area" id="editAvatarUploadArea">
-          <div class="avatar-preview" id="editAvatarPreview">
-            <svg class="avatar-preview-placeholder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
-              <circle cx="12" cy="7" r="4"></circle>
-            </svg>
-          </div>
-          <p class="avatar-upload-text">Click to upload or drag and drop</p>
-          <p class="avatar-upload-hint">PNG, JPG up to 5MB</p>
+        <div class="modal" id="modalCreateUser">
+            <div class="modal-overlay"></div>
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2>Create New User</h2>
+                    <button class="modal-close" id="closeCreateModal">
+                        <svg
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
+                            <line x1="18" y1="6" x2="6" y2="18"></line>
+                            <line x1="6" y1="6" x2="18" y2="18"></line>
+                        </svg>
+                    </button>
+                </div>
+                <form id="createUserForm">
+                    <div class="form-group">
+                        <label for="username">Username</label>
+                        <input
+                            type="text"
+                            id="username"
+                            name="username"
+                            required
+                            maxlength="20"
+                            placeholder="Enter your name"
+                        />
+                    </div>
+                    <div class="form-group">
+                        <label>Profile Picture</label>
+                        <div class="avatar-upload-area" id="avatarUploadArea">
+                            <div class="avatar-preview" id="avatarPreview">
+                                <svg
+                                    class="avatar-preview-placeholder"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                >
+                                    <path
+                                        d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
+                                    ></path>
+                                    <circle cx="12" cy="7" r="4"></circle>
+                                </svg>
+                            </div>
+                            <p class="avatar-upload-text">
+                                Click to upload or drag and drop
+                            </p>
+                            <p class="avatar-upload-hint">
+                                PNG, JPG, GIF... up to 50 MB
+                            </p>
+                        </div>
+                        <input type="file" id="avatarInput" accept="image/*" />
+                    </div>
+                    <div class="modal-actions">
+                        <button
+                            type="button"
+                            class="btn-secondary"
+                            id="cancelCreate"
+                        >
+                            Cancel
+                        </button>
+                        <button type="submit" class="btn-primary">
+                            Create User
+                        </button>
+                    </div>
+                </form>
+            </div>
        </div>
-        <input type="file" id="editAvatarInput" accept="image/*">
-      </div>
-      <div class="modal-actions">
-        <button type="button" class="btn-secondary" id="cancelEdit">Cancel</button>
-        <button type="submit" class="btn-primary">Save Changes</button>
-      </div>
-    </form>
-  </div>
-</div>

-<div class="modal" id="modalAniList">
-  <div class="modal-overlay"></div>
-  <div class="modal-content">
-    <div class="modal-header">
-      <h2>AniList Integration</h2>
-      <button class="modal-close" id="closeAniListModal">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <line x1="18" y1="6" x2="6" y2="18"></line>
-          <line x1="6" y1="6" x2="18" y2="18"></line>
-        </svg>
-      </button>
-    </div>
-    <div id="aniListContent">
-    </div>
-  </div>
-</div>
+        <div class="modal" id="modalUserActions">
+            <div class="modal-overlay"></div>
+            <div class="modal-content" style="max-width: 400px">
+                <div class="modal-header">
+                    <h2 id="actionsModalTitle">Manage Profile</h2>
+                    <button class="modal-close" id="closeActionsModal">
+                        <svg
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
+                            <line x1="18" y1="6" x2="6" y2="18"></line>
+                            <line x1="6" y1="6" x2="18" y2="18"></line>
+                        </svg>
+                    </button>
+                </div>
+                <div id="actionsModalContent"></div>
+            </div>
+        </div>

-<div id="userToastContainer"></div>
-<div id="updateToast" class="hidden">
-  <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
-  <a
-          id="downloadButton"
-          href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
-          target="_blank"
-  >
-    Click To Download
-  </a>
-</div>
-<script>localStorage.removeItem("token")</script>
-<script src="/src/scripts/updateNotifier.js"></script>
-<script src="/src/scripts/users.js"></script>
-</body>
+        <div class="modal" id="modalEditUser">
+            <div class="modal-overlay"></div>
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2>Edit Profile</h2>
+                    <button class="modal-close" id="closeEditModal">
+                        <svg
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
+                            <line x1="18" y1="6" x2="6" y2="18"></line>
+                            <line x1="6" y1="6" x2="18" y2="18"></line>
+                        </svg>
+                    </button>
+                </div>
+                <form id="editUserForm">
+                    <div class="form-group">
+                        <label for="editUsername">Username</label>
+                        <input
+                            type="text"
+                            id="editUsername"
+                            name="username"
+                            required
+                            maxlength="20"
+                            placeholder="Enter your new name"
+                        />
+                    </div>
+                    <div class="form-group">
+                        <label>Profile Picture</label>
+                        <div
+                            class="avatar-upload-area"
+                            id="editAvatarUploadArea"
+                        >
+                            <div class="avatar-preview" id="editAvatarPreview">
+                                <svg
+                                    class="avatar-preview-placeholder"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                >
+                                    <path
+                                        d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
+                                    ></path>
+                                    <circle cx="12" cy="7" r="4"></circle>
+                                </svg>
+                            </div>
+                            <p class="avatar-upload-text">
+                                Click to upload or drag and drop
+                            </p>
+                            <p class="avatar-upload-hint">PNG, JPG up to 5MB</p>
+                        </div>
+                        <input
+                            type="file"
+                            id="editAvatarInput"
+                            accept="image/*"
+                        />
+                    </div>
+                    <div class="modal-actions">
+                        <button
+                            type="button"
+                            class="btn-secondary"
+                            id="cancelEdit"
+                        >
+                            Cancel
+                        </button>
+                        <button type="submit" class="btn-primary">
+                            Save Changes
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <div class="modal" id="modalAniList">
+            <div class="modal-overlay"></div>
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2>AniList Integration</h2>
+                    <button class="modal-close" id="closeAniListModal">
+                        <svg
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
+                            <line x1="18" y1="6" x2="6" y2="18"></line>
+                            <line x1="6" y1="6" x2="18" y2="18"></line>
+                        </svg>
+                    </button>
+                </div>
+                <div id="aniListContent"></div>
+            </div>
+        </div>
+
+        <div id="userToastContainer"></div>
+        <div id="updateToast" class="hidden">
+            <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
+            <a
+                id="downloadButton"
+                href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
+                target="_blank"
+            >
+                Click To Download
+            </a>
+        </div>
+        <script>
+            localStorage.removeItem("token");
+        </script>
+        <script src="/src/scripts/updateNotifier.js"></script>
+        <script src="/src/scripts/users.js"></script>
+    </body>
 </html>
Author	SHA1	Message	Date
itsskaiya	dbce12b708	Updated files to be exported into the exe	2025-12-20 14:52:56 -05:00
lenafx	9943c5d010	added chapters on player using aniskip api	2025-12-20 19:56:15 +01:00
lenafx	cbacf2ea07	removed electron stuff from docker ver	2025-12-20 00:16:01 +01:00
lenafx	90231f6608	added updateall btn to marketplace	2025-12-20 00:13:10 +01:00
lenafx	a26f03f024	new marketplace page	2025-12-19 23:12:53 +01:00
lenafx	16cf6b3d4f	now on my list page, source dropdown only shows anime and book extensions	2025-12-19 20:01:08 +01:00
lenafx	4811c4535a	removed electron stuff from docker ver	2025-12-19 19:49:07 +01:00
lenafx	d6a99bfeb4	animes & books page data is fetched auto now	2025-12-19 19:23:29 +01:00
itsskaiya	b8f560141c	Updated version in updateNotifier for server & docker version	2025-12-19 12:02:41 -05:00
lenafx	2cf475931c	lazy loading of chapters on book page	2025-12-18 17:00:50 +01:00
lenafx	41dddef354	added splash loading screen	2025-12-18 17:00:50 +01:00
lenafx	d54b0bcdef	if user has pass ask for it before deleting it	2025-12-18 17:00:50 +01:00
lenafx	c7ed97a452	fixed discord rpc on anime	2025-12-18 17:00:50 +01:00
itsskaiya	1ebac7ee15	Updated version in updateNotifier for server version	2025-12-18 03:24:50 -05:00
itsskaiya	7490f269b0	Updated version in updateNotifier	2025-12-17 16:37:56 -05:00
lenafx	c7f919fe18	fixed an error where app wouldnt launch	2025-12-17 21:32:34 +01:00
itsskaiya	7c85d91b85	Merge branch 'main' of https://git.waifuboard.app/ItsSkaiya/WaifuBoard	2025-12-17 13:00:35 -05:00
itsskaiya	c11a1eed35	Docker server has responsiveness now	2025-12-17 13:00:15 -05:00