From c11a1eed354a7b7219c805dcba63e2d925c8d81a Mon Sep 17 00:00:00 2001
From: itsskaiya <itsskaiyagaming@gmail.com>
Date: Wed, 17 Dec 2025 13:00:15 -0500
Subject: [PATCH] Docker server has responsiveness now

---
 docker/views/anime/anime.html                 | 559 +++++++++++-------
 docker/views/css/anime/anime.css              | 232 +++++++-
 docker/views/css/anime/watch.css              | 350 ++++++++---
 docker/views/css/books/book.css               | 515 +++++++++++++---
 docker/views/css/books/reader.css             |  92 ++-
 docker/views/css/components/anilist-modal.css | 123 +++-
 docker/views/css/components/hero.css          | 108 +++-
 docker/views/css/components/navbar.css        | 114 +++-
 docker/views/css/globals.css                  |  98 ++-
 docker/views/css/list.css                     | 186 +++---
 docker/views/css/marketplace.css              | 134 ++++-
 docker/views/css/schedule/schedule.css        |  94 +++
 docker/views/css/users.css                    | 167 +++++-
 docker/views/users.html                       | 440 ++++++++------
 14 files changed, 2465 insertions(+), 747 deletions(-)
diff --git a/docker/views/anime/anime.html b/docker/views/anime/anime.html
index 4d61863..6c7b982 100644
--- a/docker/views/anime/anime.html
+++ b/docker/views/anime/anime.html
@@ -1,224 +1,365 @@
-<!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"
+        />
+        <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>
 
-<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>
-</html>
\ No newline at end of file
+        <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/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>
+        <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>
diff --git a/docker/views/css/anime/anime.css b/docker/views/css/anime/anime.css
index 8fa4f50..b2e469a 100644
--- 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;
@@ -294,4 +357,119 @@
     color: #a1a1aa;
     font-size: 0.9rem;
     font-weight: 500;
-}
\ No newline at end of file
+}
+
+@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;
+    }
+}
diff --git a/docker/views/css/anime/watch.css b/docker/views/css/anime/watch.css
index 27bddfd..d450672 100644
--- 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,101 @@
 }
 
 @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);
     }
-}
\ No newline at end of file
+}
diff --git a/docker/views/css/books/book.css b/docker/views/css/books/book.css
index 3e3c042..d1a30b6 100644
--- 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; }
-}
\ No newline at end of file
+    .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);
+    }
+}
diff --git a/docker/views/css/books/reader.css b/docker/views/css/books/reader.css
index a616a21..15de903 100644
--- 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 {
@@ -544,4 +562,54 @@ input[type="color"] {
     max-width: 50%;
     margin: 0 auto;
     display: block;
-}
\ No newline at end of file
+}
+
+@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;
+    }
+}
diff --git a/docker/views/css/components/anilist-modal.css b/docker/views/css/components/anilist-modal.css
index 5312c7b..25f0020 100644
--- 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);
     }
 }
-
diff --git a/docker/views/css/components/hero.css b/docker/views/css/components/hero.css
index ea120a4..d5e0270 100644
--- 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;
 }
 
@@ -117,4 +132,87 @@
     padding: 0.2rem 0.8rem;
     border-radius: 6px;
     border: 1px solid rgba(34, 197, 94, 0.2);
-}
\ No newline at end of file
+}
+
+@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%
+            );
+    }
+}
diff --git a/docker/views/css/components/navbar.css b/docker/views/css/components/navbar.css
index 048eb64..045981a 100644
--- 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;
@@ -415,4 +421,106 @@
 .search-results::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.2);
     border-radius: 3px;
-}
\ No newline at end of file
+}
+
+@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;
+    }
+}
diff --git a/docker/views/css/globals.css b/docker/views/css/globals.css
index 1daa0e9..7dd98e9 100644
--- 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;
@@ -298,4 +298,96 @@ body {
 .btn-secondary:hover {
     background: rgba(255, 255, 255, 0.2);
     transform: scale(1.05);
-}
\ No newline at end of file
+}
+
+Here is the CSS you need to add to the very bottom of your file.
+
+I have targeted the specific classes you provided (.card, .section, .back-btn) to make them touch-friendly, and I added a specific section to fix the "Who's exploring?" screen from your screenshot.
+1. First: The HTML Tag (Crucial)
+
+Ensure this is in your HTML <head> or the CSS below will not work:
+HTML
+
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+2. The CSS Update
+
+Copy and paste this entire block to the bottom of your CSS file:
+CSS
+
+@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;
+    }
+}
diff --git a/docker/views/css/list.css b/docker/views/css/list.css
index 9ba9228..187b937 100644
--- 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;
-}
\ No newline at end of file
+    .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;
+    }
+}
diff --git a/docker/views/css/marketplace.css b/docker/views/css/marketplace.css
index 02d5f7f..ebc70a5 100644
--- a/docker/views/css/marketplace.css
+++ b/docker/views/css/marketplace.css
@@ -25,7 +25,7 @@
     border-radius: 999px;
     background: var(--color-bg-elevated-hover);
     color: var(--color-text-primary);
-    border: 1px solid rgba(255,255,255,0.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
     appearance: none;
     font-weight: 600;
 
@@ -51,14 +51,14 @@
 
 .extension-card {
     background: var(--bg-surface);
-    border: 1px solid rgba(255,255,255,0.05);
+    border: 1px solid rgba(255, 255, 255, 0.05);
     border-radius: var(--radius-md);
     padding: 1rem;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     transition: all 0.2s;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
     min-height: 140px;
     position: relative;
     overflow: hidden;
@@ -67,7 +67,7 @@
 .extension-card:hover {
     background: var(--color-bg-elevated-hover);
     transform: translateY(-4px);
-    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
 }
 
 .card-content-wrapper {
@@ -128,7 +128,10 @@
     font-size: 0.9rem;
     border: none;
     cursor: pointer;
-    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
+    transition:
+        background 0.2s,
+        transform 0.2s,
+        box-shadow 0.2s;
     margin-top: auto;
     text-transform: uppercase;
     letter-spacing: 0.5px;
@@ -176,7 +179,7 @@
     border-radius: 8px;
     margin-bottom: 0.75rem;
 
-    border: 2px solid rgba(255,255,255,0.05);
+    border: 2px solid rgba(255, 255, 255, 0.05);
 }
 .skeleton-text.title-skeleton {
     height: 1.1em;
@@ -228,10 +231,14 @@
     border-radius: var(--radius-lg);
     width: 90%;
     max-width: 450px;
-    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8), 0 0 20px var(--color-primary-glow);
-    border: 1px solid rgba(255,255,255,0.1);
+    box-shadow:
+        0 15px 50px rgba(0, 0, 0, 0.8),
+        0 0 20px var(--color-primary-glow);
+    border: 1px solid rgba(255, 255, 255, 0.1);
     transform: translateY(-50px);
-    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease-in-out;
+    transition:
+        transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
+        opacity 0.3s ease-in-out;
     opacity: 0;
 }
 
@@ -245,7 +252,7 @@
     font-weight: 800;
     margin-top: 0;
     color: var(--color-primary);
-    border-bottom: 2px solid rgba(255,255,255,0.05);
+    border-bottom: 2px solid rgba(255, 255, 255, 0.05);
     padding-bottom: 0.75rem;
     margin-bottom: 1.5rem;
 }
@@ -264,14 +271,15 @@
 }
 
 .modal-button {
-
     padding: 0.6rem 1.5rem;
     border-radius: 999px;
     font-weight: 700;
     font-size: 0.9rem;
     border: none;
     cursor: pointer;
-    transition: background 0.2s, transform 0.2s;
+    transition:
+        background 0.2s,
+        transform 0.2s;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
@@ -292,4 +300,104 @@
 .modal-button.btn-uninstall:hover {
     background: #ef4444;
     transform: scale(1.02);
-}
\ No newline at end of file
+}
+
+@media (max-width: 768px) {
+    .section-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+    }
+
+    .filter-controls {
+        width: 100%;
+        overflow-x: auto;
+        white-space: nowrap;
+        padding-bottom: 0.5rem;
+
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+    }
+
+    .filter-controls::-webkit-scrollbar {
+        display: none;
+    }
+
+    .filter-select {
+        flex-shrink: 0;
+        padding: 0.6rem 2.2rem 0.6rem 1rem;
+        font-size: 0.9rem;
+    }
+
+    .marketplace-grid {
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        gap: 0.75rem;
+    }
+
+    .extension-card {
+        padding: 0.75rem;
+        min-height: auto;
+    }
+
+    .extension-icon {
+        width: 40px;
+        height: 40px;
+    }
+
+    .extension-name {
+        font-size: 1rem;
+    }
+
+    .extension-status-badge {
+        font-size: 0.65rem;
+    }
+
+    .extension-card:hover {
+        transform: none;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+    }
+
+    .extension-action-button {
+        padding: 0.5rem;
+        font-size: 0.8rem;
+    }
+
+    .modal-content {
+        width: 95%;
+        max-width: none;
+        padding: 1.5rem;
+
+        position: absolute;
+        bottom: 0;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        transform: translateY(100%);
+        margin-bottom: 0;
+    }
+
+    .modal-overlay:not(.hidden) .modal-content {
+        transform: translateY(0);
+    }
+
+    #modalTitle {
+        font-size: 1.3rem;
+        margin-bottom: 1rem;
+    }
+
+    #modalMessage {
+        font-size: 0.95rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .modal-actions {
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+
+    .modal-button {
+        width: 100%;
+        padding: 0.8rem;
+        justify-content: center;
+        display: flex;
+    }
+}
diff --git a/docker/views/css/schedule/schedule.css b/docker/views/css/schedule/schedule.css
index 23b010f..6eb455a 100644
--- 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;
+    }
+}
diff --git a/docker/views/css/users.css b/docker/views/css/users.css
index ed90504..94f2f0c 100644
--- 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;
     }
-}
\ No newline at end of file
+
+    .form-group input[type="text"],
+    .form-group input[type="password"] {
+        padding: 1.2rem;
+        font-size: 16px;
+    }
+
+    .btn-primary,
+    .btn-secondary {
+        padding: 1.2rem;
+    }
+}
diff --git a/docker/views/users.html b/docker/views/users.html
index da13032..810dcb6 100644
--- a/docker/views/users.html
+++ b/docker/views/users.html
@@ -1,174 +1,280 @@
-<!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>
-
-<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="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>
+    <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"
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <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>
-        <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="page-wrapper">
+            <div class="background-gradient"></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="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>
+
+                <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="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="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>
 
-<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>
\ No newline at end of file
+        <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>
+                        <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>
