From e5ec8aa7e568bc0d4cde75222afa1481ff74ede6 Mon Sep 17 00:00:00 2001
From: lenafx <jaiet7@gmail.com>
Date: Sat, 6 Dec 2025 14:28:40 +0100
Subject: [PATCH] added my lists page

---
 server.js                       |   2 +
 src/api/list/list.controller.ts | 112 ++++++
 src/api/list/list.routes.ts     |  10 +
 src/api/list/list.service.ts    | 183 +++++++++
 src/api/user/user.service.ts    |   7 +
 src/scripts/anime/anime.js      | 216 ++++++++++-
 src/scripts/books/book.js       | 262 +++++++++++++
 src/scripts/list.js             | 428 +++++++++++++++++++++
 src/scripts/users.js            |   3 -
 src/shared/database.js          |   6 +-
 src/views/views.routes.ts       |   5 +
 views/anime/anime.html          |  72 ++--
 views/anime/animes.html         |   2 +-
 views/books/book.html           |  39 +-
 views/books/books.html          |   2 +-
 views/css/anime/anime.css       | 114 +++++-
 views/css/books/book.css        | 143 +++++++
 views/css/list.css              | 635 ++++++++++++++++++++++++++++++++
 views/list.html                 | 199 ++++++++++
 views/marketplace.html          |   2 +-
 views/schedule.html             |   2 +-
 21 files changed, 2400 insertions(+), 44 deletions(-)
 create mode 100644 src/api/list/list.controller.ts
 create mode 100644 src/api/list/list.routes.ts
 create mode 100644 src/api/list/list.service.ts
 create mode 100644 src/scripts/list.js
 create mode 100644 views/css/list.css
 create mode 100644 views/list.html

diff --git a/server.js b/server.js
index 4d80bb2..8f04804 100644
--- a/server.js
+++ b/server.js
@@ -18,6 +18,7 @@ const extensionsRoutes = require('./dist/api/extensions/extensions.routes');
 const galleryRoutes = require('./dist/api/gallery/gallery.routes');
 const rpcRoutes = require('./dist/api/rpc/rpc.routes');
 const userRoutes = require('./dist/api/user/user.routes');
+const listRoutes = require('./dist/api/list/list.routes');
 const anilistRoute = require('./dist/api/anilist');
 
 
@@ -60,6 +61,7 @@ fastify.register(galleryRoutes, { prefix: '/api' });
 fastify.register(rpcRoutes, { prefix: '/api' });
 fastify.register(userRoutes, { prefix: '/api' });
 fastify.register(anilistRoute, { prefix: '/api' });
+fastify.register(listRoutes, { prefix: '/api' });
 
 function startCppScraper() {
     const exePath = path.join(
diff --git a/src/api/list/list.controller.ts b/src/api/list/list.controller.ts
new file mode 100644
index 0000000..9dc1a42
--- /dev/null
+++ b/src/api/list/list.controller.ts
@@ -0,0 +1,112 @@
+// list.controller.ts
+
+import { FastifyReply, FastifyRequest } from 'fastify';
+import * as listService from './list.service';
+
+// Tipos de solicitud asumidos:
+// - UserRequest: Request con el objeto 'user' adjunto por el hook de autenticación.
+interface UserRequest extends FastifyRequest {
+    user?: { id: number };
+}
+
+interface UpsertEntryBody {
+    entry_type: any;
+    entry_id: number;
+    external_id?: string | null;
+    source: string;
+    status: string;
+    progress: number;
+    score: number;
+}
+
+interface DeleteEntryParams {
+    entryId: string;
+}
+
+/**
+ * GET /list
+ * Obtiene toda la lista del usuario autenticado.
+ */
+export async function getList(req: UserRequest, reply: FastifyReply) {
+    const userId = req.user?.id;
+    if (!userId) {
+        return reply.code(401).send({ error: "Unauthorized" });
+    }
+
+    try {
+        const results = await listService.getUserList(userId);
+        return { results };
+    } catch (err) {
+        console.error(err);
+        return reply.code(500).send({ error: "Failed to retrieve list" });
+    }
+}
+
+/**
+ * POST /list/entry
+ * Crea o actualiza una entrada de lista (upsert).
+ */
+export async function upsertEntry(req: UserRequest, reply: FastifyReply) {
+    const userId = req.user?.id;
+    const body = req.body as UpsertEntryBody;
+
+    if (!userId) {
+        return reply.code(401).send({ error: "Unauthorized" });
+    }
+
+    // <--- NUEVO: Validación de entry_type
+    if (!body.entry_id || !body.source || !body.status || !body.entry_type) {
+        return reply.code(400).send({ error: "Missing required fields (entry_id, source, status, entry_type)." });
+    }
+
+    try {
+        const entryData = {
+            user_id: userId,
+            entry_id: body.entry_id,
+            external_id: body.external_id,
+            source: body.source,
+            entry_type: body.entry_type, // <--- NUEVO: Pasar entry_type
+            status: body.status,
+            progress: body.progress || 0,
+            score: body.score || null
+        };
+
+        const result = await listService.upsertListEntry(entryData);
+
+        return { success: true, changes: result.changes };
+    } catch (err) {
+        console.error(err);
+        return reply.code(500).send({ error: "Failed to save list entry" });
+    }
+}
+
+/**
+ * DELETE /list/entry/:entryId
+ * Elimina una entrada de lista.
+ */
+export async function deleteEntry(req: UserRequest, reply: FastifyReply) {
+    const userId = req.user?.id;
+    const { entryId } = req.params as DeleteEntryParams;
+
+    if (!userId) {
+        return reply.code(401).send({ error: "Unauthorized" });
+    }
+
+    const numericEntryId = parseInt(entryId, 10);
+    if (isNaN(numericEntryId)) {
+        return reply.code(400).send({ error: "Invalid entry ID." });
+    }
+
+    try {
+        const result = await listService.deleteListEntry(userId, numericEntryId);
+
+        if (result.success) {
+            return { success: true, message: "Entry deleted successfully." };
+        } else {
+            return reply.code(404).send({ error: "Entry not found or unauthorized to delete." });
+        }
+    } catch (err) {
+        console.error(err);
+        return reply.code(500).send({ error: "Failed to delete list entry" });
+    }
+}
\ No newline at end of file
diff --git a/src/api/list/list.routes.ts b/src/api/list/list.routes.ts
new file mode 100644
index 0000000..7d2342e
--- /dev/null
+++ b/src/api/list/list.routes.ts
@@ -0,0 +1,10 @@
+import { FastifyInstance } from 'fastify';
+import * as controller from './list.controller';
+
+async function listRoutes(fastify: FastifyInstance) {
+    fastify.get('/list', controller.getList);
+    fastify.post('/list/entry', controller.upsertEntry);
+    fastify.delete('/list/entry/:entryId', controller.deleteEntry);
+}
+
+export default listRoutes;
\ No newline at end of file
diff --git a/src/api/list/list.service.ts b/src/api/list/list.service.ts
new file mode 100644
index 0000000..5e317fe
--- /dev/null
+++ b/src/api/list/list.service.ts
@@ -0,0 +1,183 @@
+// list.service.ts (Actualizado)
+
+import {queryAll, run} from '../../shared/database';
+import {getExtension} from '../../shared/extensions';
+import * as animeService from '../anime/anime.service';
+import * as booksService from '../books/books.service';
+
+// Define la interfaz de entrada de lista (sin external_id)
+interface ListEntryData {
+    entry_type: any;
+    user_id: number;
+    entry_id: number; // ID de contenido de la fuente (AniList, MAL, o local)
+    source: string; // 'anilist', 'local', etc.
+    status: string; // 'COMPLETED', 'WATCHING', etc.
+    progress: number;
+    score: number | null;
+}
+
+const USER_DB = 'userdata';
+
+/**
+ * Inserta o actualiza una entrada de lista.
+ * Utiliza ON CONFLICT(user_id, entry_id) para el upsert.
+ */
+export async function upsertListEntry(entry: any) {
+    const {
+        user_id,
+        entry_id,
+        source,
+        entry_type,
+        status,
+        progress,
+        score
+    } = entry;
+
+    const sql = `
+        INSERT INTO ListEntry
+        (user_id, entry_id, source, entry_type, status, progress, score, updated_at)
+        VALUES
+            (?, ?, ?, ?, ?, ?, ?, CURRENT_TIMESTAMP)
+            ON CONFLICT(user_id, entry_id) DO UPDATE SET
+            source = EXCLUDED.source,
+                                                  entry_type = EXCLUDED.entry_type,
+                                                  status = EXCLUDED.status,
+                                                  progress = EXCLUDED.progress,
+                                                  score = EXCLUDED.score,
+                                                  updated_at = CURRENT_TIMESTAMP;
+    `;
+
+    const params = [
+        user_id,
+        entry_id,
+        source,
+        entry_type,
+        status,
+        progress,
+        score || null
+    ];
+
+    try {
+        const result = await run(sql, params, USER_DB);
+        return { changes: result.changes, lastID: result.lastID };
+    } catch (error) {
+        console.error("Error al guardar la entrada de lista:", error);
+        throw new Error("Error en la base de datos al guardar la entrada.");
+    }
+}
+
+/**
+ * Recupera la lista completa de un usuario.
+ */
+export async function getUserList(userId: number): Promise<any> {
+    const sql = `
+        SELECT * FROM ListEntry
+        WHERE user_id = ?
+        ORDER BY updated_at DESC;
+    `;
+
+    try {
+        // 1. Obtener la lista base de la DB
+        const dbList = await queryAll(sql, [userId], USER_DB) as ListEntryData[];
+
+        // 2. Crear un array de promesas para obtener los detalles de cada entrada concurrentemente
+        const enrichedListPromises = dbList.map(async (entry) => {
+            let contentDetails: any | null = null;
+            const id = entry.entry_id;
+            const source = entry.source;
+            const type = entry.entry_type;
+
+            try {
+                if (type === 'ANIME') {
+                    // Lógica para ANIME
+                    let anime: any;
+                    if (source === 'anilist') {
+                        anime = await animeService.getAnimeById(id);
+                    } else {
+                        const ext = getExtension(source);
+                        // Asegurar que id sea una cadena para getAnimeInfoExtension si el id es un número
+                        anime = await animeService.getAnimeInfoExtension(ext, id.toString());
+                    }
+
+                    contentDetails = {
+                        title: anime?.title || 'Unknown Anime Title',
+                        poster: anime?.coverImage?.extraLarge || anime?.image || '',
+                        total_episodes: anime?.episodes || anime?.nextAiringEpisode?.episode - 1 || 0,
+                    };
+
+                } else if (type === 'MANGA' || type === 'NOVEL') {
+                    // Lógica para MANGA, NOVEL y otros "books"
+                    let book: any;
+                    if (source === 'anilist') {
+                        book = await booksService.getBookById(id);
+                    } else {
+                        const ext = getExtension(source);
+                        // Asegurar que id sea una cadena
+                        const result = await booksService.getBookInfoExtension(ext, id.toString());
+                        book = result || null;
+                    }
+
+                    contentDetails = {
+                        title: book?.title || 'Unknown Book Title',
+                        poster: book?.coverImage?.extraLarge || book?.image || '',
+                        // Priorizar chapters, luego volumes * 10, sino 0
+                        total_chapters: book?.chapters || book?.volumes * 10 || 0,
+                    };
+                }
+            } catch (contentError) {
+                console.error(`Error fetching details for entry ${id} (${source}):`, contentError);
+                contentDetails = {
+                    title: 'Error Loading Details',
+                    poster: '/public/assets/placeholder.png',
+                };
+            }
+
+            // 3. Estandarizar y Combinar los datos.
+
+            let finalTitle = contentDetails?.title || 'Unknown Title';
+            let finalPoster = contentDetails?.poster || '/public/assets/placeholder.png';
+
+            // Aplanamiento del título (Necesario para Anilist que devuelve un objeto)
+            if (typeof finalTitle === 'object' && finalTitle !== null) {
+                // Priorizar userPreferred, luego english, luego romaji, sino 'Unknown Title'
+                finalTitle = finalTitle.userPreferred || finalTitle.english || finalTitle.romaji || 'Unknown Title';
+            }
+
+
+            // Retornar el objeto combinado y estandarizado
+            return {
+                ...entry,
+                // Datos estandarizados para el frontend:
+                title: finalTitle,
+                poster: finalPoster,
+                total_episodes: contentDetails?.total_episodes, // Será undefined si es Manga/Novel
+                total_chapters: contentDetails?.total_chapters, // Será undefined si es Anime
+            };
+        });
+
+        // 4. Ejecutar todas las promesas y esperar el resultado
+        return await Promise.all(enrichedListPromises);
+
+    } catch (error) {
+        console.error("Error al obtener la lista del usuario:", error);
+        throw new Error("Error en la base de datos al obtener la lista.");
+    }
+}
+
+/**
+ * Elimina una entrada de lista por user_id y entry_id.
+ */
+export async function deleteListEntry(userId: number, entryId: number) {
+    const sql = `
+        DELETE FROM ListEntry
+        WHERE user_id = ? AND entry_id = ?;
+    `;
+
+    try {
+        const result = await run(sql, [userId, entryId], USER_DB);
+        return { success: result.changes > 0, changes: result.changes };
+    } catch (error) {
+        console.error("Error al eliminar la entrada de lista:", error);
+        throw new Error("Error en la base de datos al eliminar la entrada.");
+    }
+}
\ No newline at end of file
diff --git a/src/api/user/user.service.ts b/src/api/user/user.service.ts
index 41d59e8..b11ac9e 100644
--- a/src/api/user/user.service.ts
+++ b/src/api/user/user.service.ts
@@ -64,6 +64,12 @@ export async function deleteUser(userId: number): Promise<any> {
         USER_DB_NAME
     );
 
+    await run(
+        `DELETE FROM favorites WHERE user_id = ?`,
+        [userId],
+        'favorites'
+    );
+
     const result = await run(
         `DELETE FROM User WHERE id = ?`,
         [userId],
@@ -73,6 +79,7 @@ export async function deleteUser(userId: number): Promise<any> {
     return result;
 }
 
+
 export async function getAllUsers(): Promise<User[]> {
     const sql = 'SELECT id, username, profile_picture_url FROM User ORDER BY id';
 
diff --git a/src/scripts/anime/anime.js b/src/scripts/anime/anime.js
index 9536c5c..8f63544 100644
--- a/src/scripts/anime/anime.js
+++ b/src/scripts/anime/anime.js
@@ -1,16 +1,196 @@
 const animeId = window.location.pathname.split('/').pop();
 let player;
-
 let totalEpisodes = 0;
 let currentPage = 1;
 const itemsPerPage = 12;
+let extensionName;
+let currentAnimeData = null;
+let isInList = false;
+let currentListEntry = null;
+
+const API_BASE = '/api';
 
 var tag = document.createElement('script');
 tag.src = "https://www.youtube.com/iframe_api";
 var firstScriptTag = document.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
-let extensionName;
+// Auth helpers
+function getAuthToken() {
+    return localStorage.getItem('token');
+}
+
+function getAuthHeaders() {
+    const token = getAuthToken();
+    return {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`
+    };
+}
+
+// Check if anime is in list
+async function checkIfInList() {
+    try {
+        const response = await fetch(`${API_BASE}/list`, {
+            headers: getAuthHeaders()
+        });
+
+        if (response.ok) {
+            const data = await response.json();
+            const entry = data.results?.find(item =>
+                item.entry_id === parseInt(animeId) &&
+                item.source === (extensionName || 'anilist')
+            );
+
+            if (entry) {
+                isInList = true;
+                currentListEntry = entry;
+                updateAddToListButton();
+            }
+        }
+    } catch (error) {
+        console.error('Error checking list:', error);
+    }
+}
+
+// Update button state
+function updateAddToListButton() {
+    const btn = document.getElementById('add-to-list-btn');
+    if (isInList) {
+        btn.innerHTML = `
+            <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+            </svg>
+            In Your List
+        `;
+        btn.style.background = 'rgba(34, 197, 94, 0.2)';
+        btn.style.color = '#22c55e';
+        btn.style.borderColor = 'rgba(34, 197, 94,  0.3)';
+    } else {
+        btn.innerHTML = '+ Add to List';
+    }
+}
+
+// Open add to list modal
+function openAddToListModal() {
+    if (isInList) {
+        // If already in list, open edit modal with current data
+        document.getElementById('modal-status').value = currentListEntry.status || 'PLANNING';
+        document.getElementById('modal-progress').value = currentListEntry.progress || 0;
+        document.getElementById('modal-score').value = currentListEntry.score || '';
+
+        document.getElementById('modal-title').textContent = 'Edit List Entry';
+        document.getElementById('modal-delete-btn').style.display = 'block';
+    } else {
+        // New entry defaults
+        document.getElementById('modal-status').value = 'PLANNING';
+        document.getElementById('modal-progress').value = 0;
+        document.getElementById('modal-score').value = '';
+
+        document.getElementById('modal-title').textContent = 'Add to List';
+        document.getElementById('modal-delete-btn').style.display = 'none';
+    }
+
+    document.getElementById('modal-progress').max = totalEpisodes || 999;
+    document.getElementById('add-list-modal').classList.add('active');}
+
+// Close modal
+function closeAddToListModal() {
+    document.getElementById('add-list-modal').classList.remove('active');
+}
+
+// Save to list
+async function saveToList() {
+    const status = document.getElementById('modal-status').value;
+    const progress = parseInt(document.getElementById('modal-progress').value) || 0;
+    const score = parseFloat(document.getElementById('modal-score').value) || null;
+
+    try {
+        const response = await fetch(`${API_BASE}/list/entry`, {
+            method: 'POST',
+            headers: getAuthHeaders(),
+            body: JSON.stringify({
+                entry_id: animeId,
+                source: extensionName || 'anilist',
+                entry_type: 'ANIME',
+                status: status,
+                progress: progress,
+                score: score
+            })
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to save entry');
+        }
+
+        // Si la operación fue exitosa, actualizamos currentListEntry con el nuevo campo type
+        isInList = true;
+        currentListEntry = {
+            entry_id: parseInt(animeId),
+            source: extensionName || 'anilist',
+            entry_type: 'ANIME', // <--- También se actualiza aquí
+            status,
+            progress,
+            score
+        };
+        updateAddToListButton();
+        closeAddToListModal();
+        showNotification(isInList ? 'Updated successfully!' : 'Added to your list!', 'success');
+    } catch (error) {
+        console.error('Error saving to list:', error);
+        showNotification('Failed to save. Please try again.', 'error');
+    }
+}
+
+// Delete from list
+async function deleteFromList() {
+    if (!confirm('Remove this anime from your list?')) return;
+
+    try {
+        const response = await fetch(`${API_BASE}/list/entry/${animeId}`, {
+            method: 'DELETE',
+            headers: getAuthHeaders()
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to delete entry');
+        }
+
+        isInList = false;
+        currentListEntry = null;
+        updateAddToListButton();
+        closeAddToListModal();
+        showNotification('Removed from your list', 'success');
+    } catch (error) {
+        console.error('Error deleting from list:', error);
+        showNotification('Failed to remove. Please try again.', 'error');
+    }
+}
+
+// Show notification
+function showNotification(message, type = 'info') {
+    const notification = document.createElement('div');
+    notification.style.cssText = `
+        position: fixed;
+        top: 100px;
+        right: 20px;
+        background: ${type === 'success' ? '#22c55e' : type === 'error' ? '#ef4444' : '#8b5cf6'};
+        color: white;
+        padding: 1rem 1.5rem;
+        border-radius: 12px;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+        z-index: 9999;
+        font-weight: 600;
+        animation: slideInRight 0.3s ease;
+    `;
+    notification.textContent = message;
+    document.body.appendChild(notification);
+
+    setTimeout(() => {
+        notification.style.animation = 'slideOutRight 0.3s ease';
+        setTimeout(() => notification.remove(), 300);
+    }, 3000);
+}
 
 async function loadAnime() {
     try {
@@ -36,6 +216,8 @@ async function loadAnime() {
             return;
         }
 
+        currentAnimeData = data;
+
         const title = data.title?.english || data.title?.romaji || data.title || "Unknown Title";
         document.title = `${title} | WaifuBoard`;
         document.getElementById('title').innerText = title;
@@ -44,7 +226,6 @@ async function loadAnime() {
 
         if (extensionName) {
             posterUrl = data.image || '';
-
         } else {
             posterUrl = data.coverImage?.extraLarge || '';
         }
@@ -181,6 +362,9 @@ async function loadAnime() {
 
         renderEpisodes();
 
+        // Check if in list after loading anime data
+        await checkIfInList();
+
     } catch (err) {
         console.error('Error loading anime:', err);
         document.getElementById('title').innerText = "Error loading anime";
@@ -274,4 +458,30 @@ searchInput.addEventListener('input', (e) => {
     }
 });
 
+// Close modal on outside click
+document.addEventListener('DOMContentLoaded', () => {
+    const modal = document.getElementById('add-list-modal');
+    if (modal) {
+        modal.addEventListener('click', (e) => {
+            if (e.target.id === 'add-list-modal') {
+                closeAddToListModal();
+            }
+        });
+    }
+});
+
+// Add animations
+const style = document.createElement('style');
+style.textContent = `
+    @keyframes slideInRight {
+        from { transform: translateX(400px); opacity: 0; }
+        to { transform: translateX(0); opacity: 1; }
+    }
+    @keyframes slideOutRight {
+        from { transform: translateX(0); opacity: 1; }
+        to { transform: translateX(400px); opacity: 0; }
+    }
+`;
+document.head.appendChild(style);
+
 loadAnime();
\ No newline at end of file
diff --git a/src/scripts/books/book.js b/src/scripts/books/book.js
index 82eb074..206d8d3 100644
--- a/src/scripts/books/book.js
+++ b/src/scripts/books/book.js
@@ -6,6 +6,13 @@ const itemsPerPage = 12;
 let extensionName = null;
 let bookSlug = null;
 
+// NUEVAS VARIABLES GLOBALES PARA LISTA
+let currentBookData = null;
+let isInList = false;
+let currentListEntry = null;
+
+const API_BASE = '/api';
+
 function getBookUrl(id, source = 'anilist') {
     return `/api/book/${id}?source=${source}`;
 }
@@ -14,6 +21,222 @@ function getChaptersUrl(id, source = 'anilist') {
     return `/api/book/${id}/chapters?source=${source}`;
 }
 
+// ==========================================================
+// 1. FUNCIONES DE AUTENTICACIÓN Y LISTA
+// ==========================================================
+
+// Auth helpers
+function getAuthToken() {
+    return localStorage.getItem('token');
+}
+
+function getAuthHeaders() {
+    const token = getAuthToken();
+    return {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`
+    };
+}
+
+// Check if book is in list
+async function checkIfInList() {
+    try {
+        const response = await fetch(`${API_BASE}/list`, {
+            headers: getAuthHeaders()
+        });
+
+        if (response.ok) {
+            const data = await response.json();
+            const idToSearch = extensionName ? bookSlug : bookId;
+
+            const entry = data.results?.find(item =>
+                item.entry_id === idToSearch &&
+                item.source === (extensionName || 'anilist')
+            );
+
+            if (entry) {
+                isInList = true;
+                currentListEntry = entry;
+                updateAddToListButton();
+            }
+        }
+    } catch (error) {
+        console.error('Error checking list:', error);
+    }
+}
+
+// Update button state
+function updateAddToListButton() {
+    const btn = document.getElementById('add-to-list-btn');
+    if (!btn) return;
+
+    if (isInList) {
+        btn.innerHTML = `
+            <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+            </svg>
+            In Your Library
+        `;
+        btn.style.background = 'rgba(34, 197, 94, 0.2)';
+        btn.style.color = '#22c55e';
+        btn.style.borderColor = 'rgba(34, 197, 94,  0.3)';
+        btn.onclick = openAddToListModal;
+    } else {
+        btn.innerHTML = '+ Add to Library';
+        btn.style.background = null; // Restablecer estilos si no está en lista
+        btn.style.color = null;
+        btn.style.borderColor = null;
+        btn.onclick = openAddToListModal;
+    }
+}
+
+// Open add to list modal
+function openAddToListModal() {
+    if (!currentBookData) return;
+
+    // Obtener el total de capítulos/volúmenes
+    const totalUnits = currentBookData.chapters || currentBookData.volumes || 999;
+
+    if (isInList) {
+        // If already in list, open edit modal with current data
+        document.getElementById('modal-status').value = currentListEntry.status || 'PLANNING';
+        document.getElementById('modal-progress').value = currentListEntry.progress || 0;
+        document.getElementById('modal-score').value = currentListEntry.score || '';
+
+        document.getElementById('modal-title').textContent = 'Edit Library Entry';
+        document.getElementById('modal-delete-btn').style.display = 'block';
+    } else {
+        // New entry defaults
+        document.getElementById('modal-status').value = 'PLANNING';
+        document.getElementById('modal-progress').value = 0;
+        document.getElementById('modal-score').value = '';
+
+        document.getElementById('modal-title').textContent = 'Add to Library';
+        document.getElementById('modal-delete-btn').style.display = 'none';
+    }
+
+    // Ajustar etiqueta de progreso según el formato
+    const progressLabel = document.getElementById('modal-progress-label');
+    if (progressLabel) {
+        const format = currentBookData.format?.toUpperCase() || 'MANGA';
+        if (format === 'MANGA' || format === 'ONE_SHOT' || format === 'MANHWA') {
+            progressLabel.textContent = 'Chapters Read';
+        } else {
+            progressLabel.textContent = 'Volumes/Parts Read';
+        }
+    }
+
+    document.getElementById('modal-progress').max = totalUnits;
+    document.getElementById('add-list-modal').classList.add('active');
+}
+
+// Close modal
+function closeAddToListModal() {
+    document.getElementById('add-list-modal').classList.remove('active');
+}
+
+// Save to list
+async function saveToList() {
+    const status = document.getElementById('modal-status').value;
+    const progress = parseInt(document.getElementById('modal-progress').value) || 0;
+    const score = parseFloat(document.getElementById('modal-score').value) || null;
+
+    if (!currentBookData) {
+        showNotification('Cannot save: Book data not loaded.', 'error');
+        return;
+    }
+
+    // Determinar el tipo de entrada (MANGA o NOVEL basado en el formato)
+    const format = currentBookData.format?.toUpperCase() || 'MANGA';
+    const entryType = (format === 'MANGA' || format === 'ONE_SHOT' || format === 'MANHWA') ? 'MANGA' : 'NOVEL';
+    const idToSave = extensionName ? bookSlug : bookId;
+
+    try {
+        const response = await fetch(`${API_BASE}/list/entry`, {
+            method: 'POST',
+            headers: getAuthHeaders(),
+            body: JSON.stringify({
+                entry_id: idToSave,
+                source: extensionName || 'anilist',
+                entry_type: entryType,
+                status: status,
+                progress: progress,
+                score: score
+            })
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to save entry');
+        }
+
+        isInList = true;
+        currentListEntry = { entry_id: idToSave, source: extensionName || 'anilist', entry_type: entryType, status, progress, score };
+        updateAddToListButton();
+        closeAddToListModal();
+        showNotification(isInList ? 'Updated successfully!' : 'Added to your library!', 'success');
+    } catch (error) {
+        console.error('Error saving to list:', error);
+        showNotification('Failed to save. Please try again.', 'error');
+    }
+}
+
+// Delete from list
+async function deleteFromList() {
+    if (!confirm('Remove this book from your library?')) return;
+
+    const idToDelete = extensionName ? bookSlug : bookId;
+
+    try {
+        const response = await fetch(`${API_BASE}/list/entry/${idToDelete}`, {
+            method: 'DELETE',
+            headers: getAuthHeaders()
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to delete entry');
+        }
+
+        isInList = false;
+        currentListEntry = null;
+        updateAddToListButton();
+        closeAddToListModal();
+        showNotification('Removed from your library', 'success');
+    } catch (error) {
+        console.error('Error deleting from list:', error);
+        showNotification('Failed to remove. Please try again.', 'error');
+    }
+}
+
+// Show notification
+function showNotification(message, type = 'info') {
+    const notification = document.createElement('div');
+    notification.style.cssText = `
+        position: fixed;
+        top: 100px;
+        right: 20px;
+        background: ${type === 'success' ? '#22c55e' : type === 'error' ? '#ef4444' : '#8b5cf6'};
+        color: white;
+        padding: 1rem 1.5rem;
+        border-radius: 12px;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+        z-index: 9999;
+        font-weight: 600;
+        animation: slideInRight 0.3s ease;
+    `;
+    notification.textContent = message;
+    document.body.appendChild(notification);
+
+    setTimeout(() => {
+        notification.style.animation = 'slideOutRight 0.3s ease';
+        setTimeout(() => notification.remove(), 300);
+    }, 3000);
+}
+
+
+// ==========================================================
+// 2. FUNCIÓN PRINCIPAL DE CARGA (init)
+// ==========================================================
+
 async function init() {
     try {
         const path = window.location.pathname;
@@ -46,6 +269,8 @@ async function init() {
             return;
         }
 
+        currentBookData = data; // <--- GUARDAR DATOS GLOBALES
+
         let title, description, score, year, status, format, chapters, poster, banner, genres;
 
         if (extensionName) {
@@ -125,11 +350,18 @@ async function init() {
 
         loadChapters(idForFetch);
 
+        await checkIfInList(); // <--- COMPROBAR ESTADO DE LA LISTA
+
     } catch (err) {
         console.error("Metadata Error:", err);
     }
 }
 
+// ==========================================================
+// 3. FUNCIONES DE CARGA Y RENDERIZADO DE CAPÍTULOS
+// (Sin cambios, pero se incluyen para completar el script)
+// ==========================================================
+
 async function loadChapters(idForFetch) {
     const tbody = document.getElementById('chapters-body');
     if (!tbody) return;
@@ -291,4 +523,34 @@ function openReader(bookId, chapterId, provider) {
     window.location.href = `/read/${p}/${c}/${bookId}${extension}`;
 }
 
+// ==========================================================
+// 4. LISTENERS Y ARRANQUE
+// ==========================================================
+
+// Close modal on outside click
+document.addEventListener('DOMContentLoaded', () => {
+    const modal = document.getElementById('add-list-modal');
+    if (modal) {
+        modal.addEventListener('click', (e) => {
+            if (e.target.id === 'add-list-modal') {
+                closeAddToListModal();
+            }
+        });
+    }
+});
+
+// Add animations (Copied from anime.js)
+const style = document.createElement('style');
+style.textContent = `
+    @keyframes slideInRight {
+        from { transform: translateX(400px); opacity: 0; }
+        to { transform: translateX(0); opacity: 1; }
+    }
+    @keyframes slideOutRight {
+        from { transform: translateX(0); opacity: 1; }
+        to { transform: translateX(400px); opacity: 0; }
+    }
+`;
+document.head.appendChild(style);
+
 init();
\ No newline at end of file
diff --git a/src/scripts/list.js b/src/scripts/list.js
new file mode 100644
index 0000000..8d4b1ac
--- /dev/null
+++ b/src/scripts/list.js
@@ -0,0 +1,428 @@
+// API Configuration
+const API_BASE = '/api';
+let currentList = [];
+let filteredList = [];
+let currentEditingEntry = null;
+
+// Get token from localStorage
+function getAuthToken() {
+    return localStorage.getItem('token');
+}
+
+// Create headers with auth token
+function getAuthHeaders() {
+    const token = getAuthToken();
+    return {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`
+    };
+}
+
+// Initialize on page load
+document.addEventListener('DOMContentLoaded', async () => {
+    await loadList();
+    setupEventListeners();
+});
+
+// ==========================================================
+// FUNCIÓN: Poblar Filtro de Fuente (NUEVA LÓGICA)
+// ==========================================================
+async function populateSourceFilter() {
+    const select = document.getElementById('source-filter');
+    if (!select) return;
+
+    // Opciones base
+    select.innerHTML = `
+        <option value="all">All Sources</option>
+        <option value="anilist">AniList</option>
+        <option value="local">Local</option>
+    `;
+
+    try {
+        const response = await fetch(`${API_BASE}/extensions`);
+        if (response.ok) {
+            const data = await response.json();
+            const extensions = data.extensions || [];
+
+            // Añadir cada nombre de extensión como una opción
+            extensions.forEach(extName => {
+                // Evitar duplicar 'anilist' o 'local'
+                if (extName.toLowerCase() !== 'anilist' && extName.toLowerCase() !== 'local') {
+                    const option = document.createElement('option');
+                    option.value = extName;
+                    // Capitalizar el nombre
+                    option.textContent = extName.charAt(0).toUpperCase() + extName.slice(1);
+                    select.appendChild(option);
+                }
+            });
+        }
+    } catch (error) {
+        console.error('Error loading extensions:', error);
+    }
+}
+
+
+// Setup all event listeners
+function setupEventListeners() {
+    // View toggle
+    document.querySelectorAll('.view-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+            document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            const view = btn.dataset.view;
+            const container = document.getElementById('list-container');
+            if (view === 'list') {
+                container.classList.add('list-view');
+            } else {
+                container.classList.remove('list-view');
+            }
+        });
+    });
+
+    // Filters
+    document.getElementById('status-filter').addEventListener('change', applyFilters);
+    document.getElementById('source-filter').addEventListener('change', applyFilters);
+    document.getElementById('type-filter').addEventListener('change', applyFilters);
+    document.getElementById('sort-filter').addEventListener('change', applyFilters);
+
+    // Search
+    document.querySelector('.search-input').addEventListener('input', (e) => {
+        const query = e.target.value.toLowerCase();
+        if (query) {
+            filteredList = currentList.filter(item =>
+                item.title?.toLowerCase().includes(query)
+            );
+        } else {
+            filteredList = [...currentList];
+        }
+        applyFilters();
+    });
+}
+
+// Load list from API (MODIFICADO para incluir populateSourceFilter)
+async function loadList() {
+    const loadingState = document.getElementById('loading-state');
+    const emptyState = document.getElementById('empty-state');
+    const container = document.getElementById('list-container');
+
+    // Ejecutar la carga de extensiones antes de la lista principal
+    await populateSourceFilter();
+
+    try {
+        loadingState.style.display = 'flex';
+        emptyState.style.display = 'none';
+        container.innerHTML = '';
+
+        const response = await fetch(`${API_BASE}/list`, {
+            headers: getAuthHeaders()
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to load list');
+        }
+
+        const data = await response.json();
+        currentList = data.results || [];
+        filteredList = [...currentList];
+
+        loadingState.style.display = 'none';
+
+        if (currentList.length === 0) {
+            emptyState.style.display = 'flex';
+        } else {
+            updateStats();
+            applyFilters();
+        }
+    } catch (error) {
+        console.error('Error loading list:', error);
+        loadingState.style.display = 'none';
+        alert('Failed to load your list. Please try again.');
+    }
+}
+
+// Update statistics
+function updateStats() {
+    const total = currentList.length;
+    const watching = currentList.filter(item => item.status === 'WATCHING').length;
+    const completed = currentList.filter(item => item.status === 'COMPLETED').length;
+    const planning = currentList.filter(item => item.status === 'PLANNING').length;
+
+    document.getElementById('total-count').textContent = total;
+    document.getElementById('watching-count').textContent = watching;
+    document.getElementById('completed-count').textContent = completed;
+    document.getElementById('planned-count').textContent = planning;
+}
+
+// Apply filters and sorting
+function applyFilters() {
+    const statusFilter = document.getElementById('status-filter').value;
+    const sourceFilter = document.getElementById('source-filter').value;
+    const typeFilter = document.getElementById('type-filter').value;
+    const sortFilter = document.getElementById('sort-filter').value;
+
+    // Filter
+    let filtered = [...filteredList];
+
+    if (statusFilter !== 'all') {
+        filtered = filtered.filter(item => item.status === statusFilter);
+    }
+
+    if (sourceFilter !== 'all') {
+        filtered = filtered.filter(item => item.source === sourceFilter);
+    }
+
+    // Filtrado por tipo
+    if (typeFilter !== 'all') {
+        filtered = filtered.filter(item => (item.entry_type || 'ANIME') === typeFilter);
+    }
+
+    // Sort
+    switch (sortFilter) {
+        case 'title':
+            filtered.sort((a, b) => (a.title || '').localeCompare(b.title || ''));
+            break;
+        case 'score':
+            filtered.sort((a, b) => (b.score || 0) - (a.score || 0));
+            break;
+        case 'progress':
+            filtered.sort((a, b) => (b.progress || 0) - (a.progress || 0));
+            break;
+        case 'updated':
+        default:
+            filtered.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
+            break;
+    }
+
+    renderList(filtered);
+}
+
+// Render list items
+function renderList(items) {
+    const container = document.getElementById('list-container');
+    container.innerHTML = '';
+
+    if (items.length === 0) {
+        container.innerHTML = '<div class="empty-state"><p>No entries match your filters</p></div>';
+        return;
+    }
+
+    items.forEach(item => {
+        const element = createListItem(item);
+        container.appendChild(element);
+    });
+}
+
+// Create individual list item (ACTUALIZADO para MANGA/NOVEL)
+function createListItem(item) {
+    const div = document.createElement('div');
+    div.className = 'list-item';
+    div.onclick = () => openEditModal(item);
+
+    const posterUrl = item.poster || '/public/assets/placeholder.png';
+    const progress = item.progress || 0;
+
+    // Determinar total de unidades basado en el tipo
+    const totalUnits = item.entry_type === 'ANIME' ?
+        item.total_episodes || 0 :
+        item.total_chapters || 0;
+
+    const progressPercent = totalUnits > 0 ? (progress / totalUnits) * 100 : 0;
+    const score = item.score ? item.score.toFixed(1) : null;
+
+    // Determinar la etiqueta de unidad (Episodes, Chapters, Volumes, etc.)
+    const entryType = (item.entry_type || 'ANIME').toUpperCase();
+    let unitLabel = 'units';
+    if (entryType === 'ANIME') {
+        unitLabel = 'episodes';
+    } else if (entryType === 'MANGA') {
+        unitLabel = 'chapters';
+    } else if (entryType === 'NOVEL') {
+        unitLabel = 'chapters/volumes';
+    }
+
+    // Ajustar etiquetas de estado según el tipo (Watching/Reading)
+    const statusLabels = {
+        'WATCHING': entryType === 'ANIME' ? 'Watching' : 'Reading',
+        'COMPLETED': 'Completed',
+        'PLANNING': entryType === 'ANIME' ? 'Plan to Watch' : 'Plan to Read',
+        'PAUSED': 'Paused',
+        'DROPPED': 'Dropped'
+    };
+
+    div.innerHTML = `
+        <img src="${posterUrl}" alt="${item.title || 'Entry'}" class="item-poster" onerror="this.src='/public/assets/placeholder.png'">
+        <div class="item-content">
+            <h3 class="item-title">${item.title || 'Unknown Title'}</h3>
+            <div class="item-meta">
+                <span class="meta-pill status-pill">${statusLabels[item.status] || item.status}</span>
+                <span class="meta-pill type-pill">${entryType}</span> 
+                <span class="meta-pill source-pill">${item.source.toUpperCase()}</span>
+            </div>
+            <div class="progress-bar-container">
+                <div class="progress-bar" style="width: ${progressPercent}%"></div>
+            </div>
+            <div class="progress-text">
+                <span>${progress}${totalUnits > 0 ? ` / ${totalUnits}` : ''} ${unitLabel}</span> ${score ? `<span class="score-badge">⭐ ${score}</span>` : ''}
+            </div>
+        </div>
+    `;
+
+    return div;
+}
+
+// Open edit modal (ACTUALIZADO para MANGA/NOVEL)
+function openEditModal(item) {
+    currentEditingEntry = item;
+
+    document.getElementById('edit-status').value = item.status;
+    document.getElementById('edit-progress').value = item.progress || 0;
+    document.getElementById('edit-score').value = item.score || '';
+
+    // Ajusta el texto del campo de progreso en el modal
+    const entryType = (item.entry_type || 'ANIME').toUpperCase();
+    const progressLabel = document.querySelector('label[for="edit-progress"]');
+    if (progressLabel) {
+        if (entryType === 'MANGA') {
+            progressLabel.textContent = 'Chapters Read';
+        } else if (entryType === 'NOVEL') {
+            progressLabel.textContent = 'Chapters/Volumes Read';
+        } else {
+            progressLabel.textContent = 'Episodes Watched';
+        }
+    }
+
+    // Establecer el max del progreso
+    const totalUnits = item.entry_type === 'ANIME' ?
+        item.total_episodes || 999 :
+        item.total_chapters || 999;
+    document.getElementById('edit-progress').max = totalUnits;
+
+
+    document.getElementById('edit-modal').style.display = 'flex';
+}
+
+// Close edit modal
+function closeEditModal() {
+    currentEditingEntry = null;
+    document.getElementById('edit-modal').style.display = 'none';
+}
+
+// Save entry changes
+async function saveEntry() {
+    if (!currentEditingEntry) return;
+
+    const status = document.getElementById('edit-status').value;
+    const progress = parseInt(document.getElementById('edit-progress').value) || 0;
+    const score = parseFloat(document.getElementById('edit-score').value) || null;
+
+    try {
+        const response = await fetch(`${API_BASE}/list/entry`, {
+            method: 'POST',
+            headers: getAuthHeaders(),
+            body: JSON.stringify({
+                entry_id: currentEditingEntry.entry_id,
+                source: currentEditingEntry.source,
+                entry_type: currentEditingEntry.entry_type || 'ANIME',
+                status: status,
+                progress: progress,
+                score: score
+            })
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to update entry');
+        }
+
+        closeEditModal();
+        await loadList();
+        showNotification('Entry updated successfully!', 'success');
+    } catch (error) {
+        console.error('Error updating entry:', error);
+        showNotification('Failed to update entry', 'error');
+    }
+}
+
+// Delete entry
+async function deleteEntry() {
+    if (!currentEditingEntry) return;
+
+    if (!confirm('Are you sure you want to remove this entry from your list?')) {
+        return;
+    }
+
+    try {
+        const response = await fetch(`${API_BASE}/list/entry/${currentEditingEntry.entry_id}`, {
+            method: 'DELETE',
+            headers: getAuthHeaders()
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to delete entry');
+        }
+
+        closeEditModal();
+        await loadList();
+        showNotification('Entry removed from list', 'success');
+    } catch (error) {
+        console.error('Error deleting entry:', error);
+        showNotification('Failed to remove entry', 'error');
+    }
+}
+
+// Show notification (unchanged)
+function showNotification(message, type = 'info') {
+    const notification = document.createElement('div');
+    notification.style.cssText = `
+        position: fixed;
+        top: 100px;
+        right: 20px;
+        background: ${type === 'success' ? '#22c55e' : type === 'error' ? '#ef4444' : '#8b5cf6'};
+        color: white;
+        padding: 1rem 1.5rem;
+        border-radius: 12px;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+        z-index: 9999;
+        font-weight: 600;
+        animation: slideInRight 0.3s ease;
+    `;
+    notification.textContent = message;
+    document.body.appendChild(notification);
+
+    setTimeout(() => {
+        notification.style.animation = 'slideOutRight 0.3s ease';
+        setTimeout(() => notification.remove(), 300);
+    }, 3000);
+}
+
+// Add keyframe animations (unchanged)
+const style = document.createElement('style');
+style.textContent = `
+    @keyframes slideInRight {
+        from {
+            transform: translateX(400px);
+            opacity: 0;
+        }
+        to {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+    @keyframes slideOutRight {
+        from {
+            transform: translateX(0);
+            opacity: 1;
+        }
+        to {
+            transform: translateX(400px);
+            opacity: 0;
+        }
+    }
+`;
+document.head.appendChild(style);
+
+// Close modal on outside click (unchanged)
+document.getElementById('edit-modal').addEventListener('click', (e) => {
+    if (e.target.id === 'edit-modal') {
+        closeEditModal();
+    }
+});
\ No newline at end of file
diff --git a/src/scripts/users.js b/src/scripts/users.js
index 35dc599..82d93f5 100644
--- a/src/scripts/users.js
+++ b/src/scripts/users.js
@@ -588,9 +588,6 @@ async function redirectToAniListLogin() {
 
         const data = await res.json();
         localStorage.setItem('token', data.token);
-        token = data.token;
-
-        localStorage.setItem('anilist_link_user', currentUserId);
 
         const clientId = 32898;
         const redirectUri = encodeURIComponent(
diff --git a/src/shared/database.js b/src/shared/database.js
index 8bc28a0..4f4c7e7 100644
--- a/src/shared/database.js
+++ b/src/shared/database.js
@@ -51,14 +51,14 @@ async function ensureUserDataDB(dbPath) {
             CREATE TABLE IF NOT EXISTS ListEntry (
                 id INTEGER PRIMARY KEY AUTOINCREMENT,
                 user_id INTEGER NOT NULL,
-                anime_id INTEGER NOT NULL,
-                external_id INTEGER,
+                entry_id INTEGER NOT NULL, 
                 source TEXT NOT NULL,
+                entry_type TEXT NOT NULL,
                 status TEXT NOT NULL,
                 progress INTEGER NOT NULL DEFAULT 0,
                 score INTEGER,
                 updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
-                UNIQUE (user_id, anime_id),
+                UNIQUE (user_id, entry_id),
                 FOREIGN KEY (user_id) REFERENCES User(id) ON DELETE CASCADE
             );
         `;
diff --git a/src/views/views.routes.ts b/src/views/views.routes.ts
index 0f470ab..5548636 100644
--- a/src/views/views.routes.ts
+++ b/src/views/views.routes.ts
@@ -13,6 +13,11 @@ async function viewsRoutes(fastify: FastifyInstance) {
         reply.type('text/html').send(stream);
     });
 
+    fastify.get('/my-list', (req: FastifyRequest, reply: FastifyReply) => {
+        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'list.html'));
+        reply.type('text/html').send(stream);
+    });
+
     fastify.get('/books', (req: FastifyRequest, reply: FastifyReply) => {
         const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books', 'books.html'));
         reply.type('text/html').send(stream);
diff --git a/views/anime/anime.html b/views/anime/anime.html
index bef54ba..4a49c33 100644
--- a/views/anime/anime.html
+++ b/views/anime/anime.html
@@ -11,10 +11,11 @@
     <link rel="stylesheet" href="/views/css/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 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>
@@ -22,7 +23,7 @@
     </div>
 </div>
 
-
+<!-- Synopsis Modal -->
 <div class="modal-overlay" id="desc-modal">
     <div class="modal-content">
         <button class="modal-close" onclick="closeModal()">✕</button>
@@ -31,13 +32,48 @@
     </div>
 </div>
 
+<!-- Add to List Modal -->
+<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>
 
-<a href="/" class="back-btn">
+        <div class="modal-body">
+            <div class="form-group">
+                <label>Status</label>
+                <select id="modal-status" class="form-input">
+                    <option value="WATCHING">Watching</option>
+                    <option value="COMPLETED">Completed</option>
+                    <option value="PLANNING">Plan to Watch</option>
+                    <option value="PAUSED">Paused</option>
+                    <option value="DROPPED">Dropped</option>
+                </select>
+            </div>
+
+            <div class="form-group">
+                <label>Episodes Watched</label>
+                <input type="number" id="modal-progress" class="form-input" min="0" placeholder="0">
+            </div>
+
+            <div class="form-group">
+                <label>Your Score (0-10)</label>
+                <input type="number" id="modal-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
+            </div>
+
+            <div class="modal-actions">
+                <button class="btn-modal-secondary" onclick="closeAddToListModal()">Cancel</button>
+                <button class="btn-modal-danger" id="modal-delete-btn" onclick="deleteFromList()" style="display: none;">Remove</button>
+                <button class="btn-modal-primary" onclick="saveToList()">Save</button>
+            </div>
+        </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>
@@ -45,10 +81,7 @@
     <div class="hero-overlay"></div>
 </div>
 
-
 <div class="content-container">
-
-
     <aside class="sidebar">
         <div class="poster-card">
             <img id="poster" src="" alt="">
@@ -80,14 +113,11 @@
         <div class="info-grid">
             <div class="info-item">
                 <h4>Main Characters</h4>
-                <div class="character-list" id="char-list">
-
-                </div>
+                <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>
@@ -104,11 +134,10 @@
                     <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">+ Add to List</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()">
@@ -118,7 +147,6 @@
         </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>
@@ -130,7 +158,6 @@
 
             <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>
@@ -138,17 +165,11 @@
             </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"
-    >
+    <a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">
         Click To Download
     </a>
 </div>
@@ -156,7 +177,6 @@
 <script src="/src/scripts/updateNotifier.js"></script>
 <script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
-<script src="/src/scripts/auth-guard.js"></script>
 <script src="/src/scripts/anime/anime.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/views/anime/animes.html b/views/anime/animes.html
index b4c2be8..07ba60b 100644
--- a/views/anime/animes.html
+++ b/views/anime/animes.html
@@ -35,7 +35,7 @@
         <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">My List</button>
+        <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
         <button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
     </div>
 
diff --git a/views/books/book.html b/views/books/book.html
index cccef88..8237f80 100644
--- a/views/books/book.html
+++ b/views/books/book.html
@@ -23,6 +23,42 @@
     </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 Library</h2>
+
+        <div class="modal-body">
+            <div class="form-group">
+                <label>Status</label>
+                <select id="modal-status" class="form-input">
+                    <option value="WATCHING">Reading</option>
+                    <option value="COMPLETED">Completed</option>
+                    <option value="PLANNING">Plan to Read</option>
+                    <option value="PAUSED">Paused</option>
+                    <option value="DROPPED">Dropped</option>
+                </select>
+            </div>
+
+            <div class="form-group">
+                <label id="modal-progress-label">Chapters Read</label>
+                <input type="number" id="modal-progress" class="form-input" min="0" placeholder="0">
+            </div>
+
+            <div class="form-group">
+                <label>Your Score (0-10)</label>
+                <input type="number" id="modal-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
+            </div>
+
+            <div class="modal-actions">
+                <button class="btn-modal-secondary" onclick="closeAddToListModal()">Cancel</button>
+                <button class="btn-modal-danger" id="modal-delete-btn" onclick="deleteFromList()" style="display: none;">Remove</button>
+                <button class="btn-modal-primary" onclick="saveToList()">Save</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 
 <a href="/books" 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>
@@ -81,9 +117,8 @@
                 <button class="btn-primary" id="read-start-btn">
                     Start Reading
                 </button>
-                <button class="btn-secondary">+ Add to Library</button>
+                <button class="btn-secondary" id="add-to-list-btn" onclick="openAddToListModal()">+ Add to Library</button>
             </div>
-        </div>
 
         <div class="chapters-section">
             <div class="section-title">
diff --git a/views/books/books.html b/views/books/books.html
index e058ab7..38c8978 100644
--- a/views/books/books.html
+++ b/views/books/books.html
@@ -36,7 +36,7 @@
         <button class="nav-button active">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">My List</button>
+        <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
         <button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
     </div>
 
diff --git a/views/css/anime/anime.css b/views/css/anime/anime.css
index 4a014d1..6f7b48a 100644
--- a/views/css/anime/anime.css
+++ b/views/css/anime/anime.css
@@ -9,6 +9,8 @@
     --radius-md: 12px;
     --radius-lg: 24px;
     --radius-full: 9999px;
+    --danger: #ef4444;
+    --success: #22c55e;
 }
 
 body {
@@ -198,9 +200,15 @@ body {
     font-size: 1rem;
     border: 1px solid rgba(255,255,255,0.2);
     cursor: pointer;
-    transition: background 0.2s;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+.btn-secondary:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: scale(1.05);
 }
-.btn-secondary:hover { background: rgba(255, 255, 255, 0.2); }
 
 .description-box {
     margin-top: 3rem;
@@ -263,6 +271,7 @@ body {
     .sidebar { display: none;  }
 }
 
+/* Modal Styles */
 .modal-overlay {
     display: none;
     position: fixed;
@@ -274,6 +283,7 @@ body {
     justify-content: center;
     opacity: 0;
     transition: opacity 0.3s;
+    padding: 2rem;
 }
 .modal-overlay.active {
     display: flex;
@@ -296,6 +306,11 @@ body {
 .modal-overlay.active .modal-content {
     transform: scale(1);
 }
+
+.modal-content.modal-list {
+    max-width: 500px;
+}
+
 .modal-close {
     position: absolute;
     top: 1.5rem;
@@ -318,7 +333,89 @@ body {
     font-size: 1.1rem;
     color: #e4e4e7;
 }
-.modal-title { margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; }
+.modal-title { margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 800; }
+
+.modal-body {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.form-group label {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.form-input {
+    background: var(--bg-base);
+    border: 1px solid rgba(255,255,255,0.1);
+    color: var(--text-primary);
+    padding: 0.8rem 1rem;
+    border-radius: 8px;
+    font-family: inherit;
+    font-size: 1rem;
+    transition: 0.2s;
+}
+
+.form-input:focus {
+    outline: none;
+    border-color: var(--accent);
+    box-shadow: 0 0 10px var(--accent-glow);
+}
+
+.modal-actions {
+    display: flex;
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.btn-modal-primary, .btn-modal-secondary, .btn-modal-danger {
+    padding: 0.8rem 1.5rem;
+    border-radius: 999px;
+    font-weight: 700;
+    font-size: 0.95rem;
+    border: none;
+    cursor: pointer;
+    transition: transform 0.2s, opacity 0.2s;
+    flex: 1;
+}
+
+.btn-modal-primary {
+    background: var(--accent);
+    color: white;
+}
+
+.btn-modal-primary:hover {
+    transform: scale(1.05);
+}
+
+.btn-modal-secondary {
+    background: rgba(255,255,255,0.1);
+    color: white;
+    border: 1px solid rgba(255,255,255,0.2);
+}
+
+.btn-modal-secondary:hover {
+    background: rgba(255,255,255,0.15);
+}
+
+.btn-modal-danger {
+    background: var(--danger);
+    color: white;
+}
+
+.btn-modal-danger:hover {
+    opacity: 0.9;
+}
 
 .read-more-btn {
     background: none;
@@ -406,4 +503,15 @@ body {
     color: #a1a1aa;
     font-size: 0.9rem;
     font-weight: 500;
+}
+
+/* Asegura que por defecto esté oculto si quitaste el style en línea */
+#add-list-modal {
+    display: none;
+}
+
+/* Define cómo se muestra al abrirlo */
+#add-list-modal.active {
+    display: flex;
+    opacity: 1;
 }
\ No newline at end of file
diff --git a/views/css/books/book.css b/views/css/books/book.css
index 4871517..c3c9ca6 100644
--- a/views/css/books/book.css
+++ b/views/css/books/book.css
@@ -216,4 +216,147 @@ body {
     .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; }
+}
+
+/* ==================================== */
+/* MODAL STYLES (Add to Library Modal)  */
+/* ==================================== */
+.modal-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.85);
+    backdrop-filter: blur(8px);
+    z-index: 2000;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.3s;
+    padding: 2rem;
+}
+.modal-overlay.active {
+    display: flex;
+    opacity: 1;
+}
+.modal-content {
+    background: #18181b;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 24px;
+    padding: 2.5rem;
+    max-width: 650px;
+    width: 90%;
+    max-height: 80vh;
+    overflow-y: auto;
+    position: relative;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+    transform: scale(0.95);
+    transition: transform 0.3s;
+}
+.modal-overlay.active .modal-content {
+    transform: scale(1);
+}
+
+.modal-content.modal-list {
+    max-width: 500px;
+}
+
+.modal-close {
+    position: absolute;
+    top: 1.5rem;
+    right: 1.5rem;
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    color: white;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: 0.2s;
+}
+.modal-close:hover { background: rgba(255, 255, 255, 0.2); }
+.modal-title { margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 800; }
+
+.modal-body {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.form-group label {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.form-input {
+    background: var(--bg-base);
+    border: 1px solid rgba(255,255,255,0.1);
+    color: var(--text-primary);
+    padding: 0.8rem 1rem;
+    border-radius: 8px;
+    font-family: inherit;
+    font-size: 1rem;
+    transition: 0.2s;
+}
+
+.form-input:focus {
+    outline: none;
+    border-color: var(--accent);
+    box-shadow: 0 0 10px rgba(139, 92, 246, 0.4); /* Usar el color acento */
+}
+
+.modal-actions {
+    display: flex;
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.btn-modal-primary, .btn-modal-secondary, .btn-modal-danger {
+    padding: 0.8rem 1.5rem;
+    border-radius: 999px;
+    font-weight: 700;
+    font-size: 0.95rem;
+    border: none;
+    cursor: pointer;
+    transition: transform 0.2s, opacity 0.2s;
+    flex: 1;
+}
+
+.btn-modal-primary {
+    background: var(--accent);
+    color: white;
+}
+
+.btn-modal-primary:hover {
+    transform: scale(1.05);
+}
+
+.btn-modal-secondary {
+    background: rgba(255,255,255,0.1);
+    color: white;
+    border: 1px solid rgba(255,255,255,0.2);
+}
+
+.btn-modal-secondary:hover {
+    background: rgba(255,255,255,0.15);
+}
+
+.btn-modal-danger {
+    background: #ef4444; /* Usar el color danger */
+    color: white;
+}
+
+.btn-modal-danger:hover {
+    opacity: 0.9;
 }
\ No newline at end of file
diff --git a/views/css/list.css b/views/css/list.css
new file mode 100644
index 0000000..dd8e57e
--- /dev/null
+++ b/views/css/list.css
@@ -0,0 +1,635 @@
+:root {
+    --bg-base: #09090b;
+    --bg-surface: #121215;
+    --bg-surface-hover: #1e1e22;
+    --accent: #8b5cf6;
+    --accent-glow: rgba(139, 92, 246, 0.4);
+    --text-primary: #ffffff;
+    --text-secondary: #a1a1aa;
+    --radius-md: 12px;
+    --radius-lg: 24px;
+    --nav-height: 80px;
+    --danger: #ef4444;
+    --success: #22c55e;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+    background-color: var(--bg-base);
+    color: var(--text-primary);
+    font-family: 'Inter', system-ui, sans-serif;
+    overflow-x: hidden;
+    padding-top: var(--nav-height);
+}
+
+/* Navbar Styles */
+.navbar {
+    width: 100%;
+    height: var(--nav-height);
+    position: fixed;
+    top: 0;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 3rem;
+    background: rgba(9, 9, 11, 0.85);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid rgba(255,255,255,0.05);
+}
+
+.nav-brand {
+    font-weight: 900;
+    font-size: 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    letter-spacing: -0.5px;
+    color: white;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.brand-icon {
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.brand-icon img {
+    width: 70%;
+    height: 70%;
+    object-fit: contain;
+}
+
+.nav-center {
+    display: flex;
+    gap: 0.5rem;
+    background: rgba(255,255,255,0.03);
+    padding: 0.4rem;
+    border-radius: 999px;
+    border: 1px solid rgba(255,255,255,0.05);
+}
+
+.nav-button {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    padding: 0.6rem 1.5rem;
+    border-radius: 999px;
+    cursor: pointer;
+    font-weight: 600;
+    transition: all 0.3s;
+}
+
+.nav-button:hover { color: white; }
+.nav-button.active {
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    backdrop-filter: blur(8px);
+    border: 1px solid rgba(255,255,255,0.1);
+}
+
+.search-wrapper {
+    position: relative;
+    width: 300px;
+}
+
+.search-input {
+    width: 100%;
+    background: rgba(255,255,255,0.05);
+    border: 1px solid rgba(255,255,255,0.1);
+    padding: 0.7rem 1rem 0.7rem 2.5rem;
+    border-radius: 99px;
+    color: white;
+    font-family: inherit;
+    transition: 0.2s;
+}
+
+.search-input:focus {
+    background: rgba(255,255,255,0.1);
+    border-color: var(--accent);
+    box-shadow: 0 0 15px var(--accent-glow);
+    outline: none;
+}
+
+.search-icon {
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    color: var(--text-secondary);
+}
+
+/* Container */
+.container {
+    max-width: 1600px;
+    margin: 0 auto;
+    padding: 3rem;
+}
+
+/* Header Section */
+.header-section {
+    margin-bottom: 3rem;
+}
+
+.page-title {
+    font-size: 3rem;
+    font-weight: 900;
+    margin-bottom: 2rem;
+    background: linear-gradient(135deg, var(--accent), #a78bfa);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.stats-row {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1.5rem;
+}
+
+.stat-card {
+    background: var(--bg-surface);
+    border: 1px solid rgba(255,255,255,0.05);
+    border-radius: var(--radius-md);
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    transition: transform 0.3s, border-color 0.3s;
+}
+
+.stat-card:hover {
+    transform: translateY(-4px);
+    border-color: var(--accent);
+}
+
+.stat-value {
+    font-size: 2.5rem;
+    font-weight: 900;
+    color: var(--accent);
+}
+
+.stat-label {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    font-weight: 600;
+}
+
+/* Filters Section */
+.filters-section {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 2rem;
+    padding: 1.5rem;
+    background: var(--bg-surface);
+    border-radius: var(--radius-md);
+    border: 1px solid rgba(255,255,255,0.05);
+    flex-wrap: wrap;
+}
+
+.filter-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    flex: 1;
+    min-width: 150px;
+}
+
+.filter-group label {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.filter-select {
+    background: var(--bg-base);
+    border: 1px solid rgba(255,255,255,0.1);
+    color: var(--text-primary);
+    padding: 0.7rem 1rem;
+    border-radius: 8px;
+    font-family: inherit;
+    cursor: pointer;
+    transition: 0.2s;
+}
+
+.filter-select:hover {
+    border-color: var(--accent);
+}
+
+.filter-select:focus {
+    outline: none;
+    border-color: var(--accent);
+    box-shadow: 0 0 10px var(--accent-glow);
+}
+
+.view-toggle {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.view-btn {
+    background: var(--bg-base);
+    border: 1px solid rgba(255,255,255,0.1);
+    color: var(--text-secondary);
+    padding: 0.7rem;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.view-btn:hover {
+    border-color: var(--accent);
+    color: white;
+}
+
+.view-btn.active {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: white;
+}
+
+/* Loading State */
+.loading-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 5rem 0;
+    gap: 1.5rem;
+}
+
+.spinner {
+    width: 50px;
+    height: 50px;
+    border: 4px solid rgba(139, 92, 246, 0.1);
+    border-top-color: var(--accent);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Empty State */
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 5rem 0;
+    gap: 1.5rem;
+    color: var(--text-secondary);
+}
+
+.empty-state svg {
+    opacity: 0.3;
+}
+
+.empty-state h2 {
+    font-size: 1.8rem;
+    color: var(--text-primary);
+}
+
+/* List Grid View */
+.list-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 1.5rem;
+}
+
+.list-grid.list-view {
+    grid-template-columns: 1fr;
+}
+
+.list-item {
+    background: var(--bg-surface);
+    border: 1px solid rgba(255,255,255,0.05);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    cursor: pointer;
+    transition: transform 0.3s, border-color 0.3s;
+}
+
+.list-item:hover {
+    transform: translateY(-8px);
+    border-color: var(--accent);
+}
+
+.list-grid.list-view .list-item {
+    display: flex;
+    flex-direction: row;
+}
+
+.list-grid.list-view .list-item:hover {
+    transform: translateX(8px);
+}
+
+.item-poster {
+    width: 100%;
+    aspect-ratio: 2/3;
+    object-fit: cover;
+    background: #222;
+}
+
+.list-grid.list-view .item-poster {
+    width: 120px;
+    height: 180px;
+    aspect-ratio: auto;
+}
+
+.item-content {
+    padding: 1rem;
+}
+
+.list-grid.list-view .item-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.item-title {
+    font-size: 1rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.list-grid.list-view .item-title {
+    font-size: 1.3rem;
+    white-space: normal;
+}
+
+.item-meta {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 0.8rem;
+    flex-wrap: wrap;
+}
+
+.meta-pill {
+    font-size: 0.75rem;
+    padding: 0.3rem 0.7rem;
+    border-radius: 6px;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.status-pill {
+    background: rgba(139, 92, 246, 0.15);
+    color: var(--accent);
+    border: 1px solid rgba(139, 92, 246, 0.3);
+}
+
+.source-pill {
+    background: rgba(168, 85, 247, 0.15);
+    color: #a855f7;
+    border: 1px solid rgba(168, 85, 247, 0.3);
+}
+
+.progress-bar-container {
+    background: rgba(255,255,255,0.05);
+    border-radius: 999px;
+    height: 6px;
+    overflow: hidden;
+    margin-bottom: 0.5rem;
+}
+
+.progress-bar {
+    height: 100%;
+    background: linear-gradient(90deg, var(--accent), #a78bfa);
+    border-radius: 999px;
+    transition: width 0.3s;
+}
+
+.progress-text {
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    display: flex;
+    justify-content: space-between;
+}
+
+.score-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    font-weight: 700;
+    color: var(--success);
+}
+
+/* Modal */
+.modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.8);
+    backdrop-filter: blur(8px);
+    z-index: 2000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+
+.modal-content {
+    background: var(--bg-surface);
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: var(--radius-lg);
+    max-width: 500px;
+    width: 100%;
+    padding: 2rem;
+    position: relative;
+    animation: modalSlideUp 0.3s ease;
+}
+
+@keyframes modalSlideUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.modal-close {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: rgba(255,255,255,0.05);
+    border: 1px solid rgba(255,255,255,0.1);
+    color: white;
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    transition: 0.2s;
+}
+
+.modal-close:hover {
+    background: var(--danger);
+    border-color: var(--danger);
+}
+
+.modal-title {
+    font-size: 1.8rem;
+    font-weight: 900;
+    margin-bottom: 1.5rem;
+}
+
+.modal-body {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.form-group label {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+}
+
+.form-input {
+    background: var(--bg-base);
+    border: 1px solid rgba(255,255,255,0.1);
+    color: var(--text-primary);
+    padding: 0.8rem 1rem;
+    border-radius: 8px;
+    font-family: inherit;
+    font-size: 1rem;
+    transition: 0.2s;
+}
+
+.form-input:focus {
+    outline: none;
+    border-color: var(--accent);
+    box-shadow: 0 0 10px var(--accent-glow);
+}
+
+.modal-actions {
+    display: flex;
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.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, opacity 0.2s;
+    flex: 1;
+}
+
+.btn-primary {
+    background: var(--accent);
+    color: white;
+}
+
+.btn-primary:hover {
+    transform: scale(1.05);
+}
+
+.btn-secondary {
+    background: rgba(255,255,255,0.1);
+    color: white;
+    border: 1px solid rgba(255,255,255,0.2);
+}
+
+.btn-secondary:hover {
+    background: rgba(255,255,255,0.15);
+}
+
+.btn-danger {
+    background: var(--danger);
+    color: white;
+}
+
+.btn-danger:hover {
+    opacity: 0.9;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .navbar {
+        padding: 0 1.5rem;
+    }
+
+    .container {
+        padding: 2rem 1.5rem;
+    }
+
+    .page-title {
+        font-size: 2rem;
+    }
+
+    .stats-row {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .filters-section {
+        flex-direction: column;
+    }
+
+    .list-grid {
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    }
+}
+
+.meta-pill {
+    padding: 0.3rem 0.6rem;
+    border-radius: 999px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    white-space: nowrap;
+}
+
+/* Estilo para la píldora de tipo (opcional, para diferenciar) */
+.type-pill {
+    background: rgba(255, 165, 0, 0.2); /* Naranja suave */
+    color: #ffb74d;
+    border: 1px solid rgba(255, 165, 0, 0.3);
+}
+
+/* Si usas la convención de colores de tu proyecto (e.g., violeta para extensión), puedes usar eso: */
+.source-pill {
+    background: rgba(139, 92, 246, 0.2);
+    color: #a78bfa;
+    border: 1px solid rgba(139, 92, 246, 0.3);
+}
+
+/* Ejemplo de color para la píldora de estado si no lo tienes */
+.status-pill {
+    background: rgba(34, 197, 94, 0.2); /* Verde de ejemplo */
+    color: #4ade80;
+    border: 1px solid rgba(34, 197, 94, 0.3);
+}
\ No newline at end of file
diff --git a/views/list.html b/views/list.html
new file mode 100644
index 0000000..694cbe2
--- /dev/null
+++ b/views/list.html
@@ -0,0 +1,199 @@
+<!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>My Lists - WaifuBoard</title>
+    <link rel="stylesheet" href="/views/css/list.css">
+    <link rel="stylesheet" href="/views/css/updateNotifier.css">
+    <link rel="stylesheet" href="/views/css/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">
+        <div class="brand-icon">
+            <img src="/public/assets/waifuboards.ico" alt="WF Logo">
+        </div>
+        WaifuBoard
+    </a>
+
+    <div class="nav-center">
+        <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 active">My List</button>
+        <button class="nav-button" onclick="window.location.href='/schedule'">Marketplace</button>
+    </div>
+
+    <div class="search-wrapper" style="visibility: hidden;">
+        <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+        <input type="text" class="search-input" id="search-input" placeholder="Search extensions..." autocomplete="off">
+        <div class="search-results" id="search-results"></div>
+    </div>
+</nav>
+
+<div class="container">
+    <div class="header-section">
+        <h1 class="page-title">My Anime List</h1>
+        <div class="stats-row">
+            <div class="stat-card">
+                <span class="stat-value" id="total-count">0</span>
+                <span class="stat-label">Total Entries</span>
+            </div>
+            <div class="stat-card">
+                <span class="stat-value" id="watching-count">0</span>
+                <span class="stat-label">Watching</span>
+            </div>
+            <div class="stat-card">
+                <span class="stat-value" id="completed-count">0</span>
+                <span class="stat-label">Completed</span>
+            </div>
+            <div class="stat-card">
+                <span class="stat-value" id="planned-count">0</span>
+                <span class="stat-label">Plan to Watch</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="filters-section">
+        <div class="filter-group">
+            <label>Status</label>
+            <select id="status-filter" class="filter-select">
+                <option value="all">All Status</option>
+                <option value="WATCHING">Watching</option>
+                <option value="COMPLETED">Completed</option>
+                <option value="PLANNING">Plan to Watch</option>
+                <option value="PAUSED">Paused</option>
+                <option value="DROPPED">Dropped</option>
+            </select>
+        </div>
+
+        <div class="filter-group">
+            <label>Source</label>
+            <select id="source-filter" class="filter-select">
+                <option value="all">All Sources</option>
+                <option value="anilist">AniList</option>
+            </select>
+        </div>
+
+        <div class="filter-group">
+            <label>Type</label>
+            <select id="type-filter" class="filter-select">
+                <option value="all">All Types</option>
+                <option value="ANIME">Anime</option>
+                <option value="MANGA">Manga</option>
+                <option value="NOVEL">Novel</option>
+            </select>
+        </div>
+        <div class="filter-group">
+            <label>Sort By</label>
+            <select id="sort-filter" class="filter-select">
+                <option value="updated">Last Updated</option>
+                <option value="title">Title (A-Z)</option>
+                <option value="score">Score (High-Low)</option>
+                <option value="progress">Progress</option>
+            </select>
+        </div>
+
+        <div class="filter-group">
+            <label>View</label>
+            <div class="view-toggle">
+                <button class="view-btn active" data-view="grid">
+                    <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+                        <rect x="3" y="3" width="7" height="7" rx="1"/>
+                        <rect x="14" y="3" width="7" height="7" rx="1"/>
+                        <rect x="3" y="14" width="7" height="7" rx="1"/>
+                        <rect x="14" y="14" width="7" height="7" rx="1"/>
+                    </svg>
+                </button>
+                <button class="view-btn" data-view="list">
+                    <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+                        <rect x="3" y="5" width="18" height="2" rx="1"/>
+                        <rect x="3" y="11" width="18" height="2" rx="1"/>
+                        <rect x="3" y="17" width="18" height="2" rx="1"/>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <div id="loading-state" class="loading-state">
+        <div class="spinner"></div>
+        <p>Loading your list...</p>
+    </div>
+
+    <div id="empty-state" class="empty-state" style="display: none;">
+        <svg width="120" height="120" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
+        </svg>
+        <h2>Your list is empty</h2>
+        <p>Start adding anime to track your progress</p>
+        <button class="btn-primary" onclick="window.location.href='/'">Browse Anime</button>
+    </div>
+
+    <div id="list-container" class="list-grid"></div>
+</div>
+
+<div class="modal-overlay" id="edit-modal" style="display: none;">
+    <div class="modal-content">
+        <button class="modal-close" onclick="closeEditModal()">✕</button>
+        <h2 class="modal-title">Edit Entry</h2>
+
+        <div class="modal-body">
+            <div class="form-group">
+                <label>Status</label>
+                <select id="edit-status" class="form-input">
+                    <option value="WATCHING">Watching</option>
+                    <option value="COMPLETED">Completed</option>
+                    <option value="PLANNING">Plan to Watch</option>
+                    <option value="PAUSED">Paused</option>
+                    <option value="DROPPED">Dropped</option>
+                </select>
+            </div>
+
+            <div class="form-group">
+                <label for="edit-progress">Progress</label>
+                <input type="number" id="edit-progress" class="form-input" min="0">
+            </div>
+
+            <div class="form-group">
+                <label>Score (0-10)</label>
+                <input type="number" id="edit-score" class="form-input" min="0" max="10" step="0.1">
+            </div>
+
+            <div class="modal-actions">
+                <button class="btn-secondary" onclick="closeEditModal()">Cancel</button>
+                <button class="btn-danger" onclick="deleteEntry()">Delete</button>
+                <button class="btn-primary" onclick="saveEntry()">Save Changes</button>
+            </div>
+        </div>
+    </div>
+</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/rpc-inapp.js"></script>
+<script src="/src/scripts/auth-guard.js"></script>
+<script src="/src/scripts/list.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/views/marketplace.html b/views/marketplace.html
index d060326..21ee23e 100644
--- a/views/marketplace.html
+++ b/views/marketplace.html
@@ -36,7 +36,7 @@
         <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">My List</button>
+        <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
         <button class="nav-button active">Marketplace</button>
     </div>
 
diff --git a/views/schedule.html b/views/schedule.html
index ebff669..256008a 100644
--- a/views/schedule.html
+++ b/views/schedule.html
@@ -40,7 +40,7 @@
             <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 active">Schedule</button>
-            <button class="nav-button">My List</button>
+            <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
             <button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
         </div>