From f130440bd0faaa606891ef3690db6dc819bc9639 Mon Sep 17 00:00:00 2001
From: Joseph Milazzo <joseph.v.milazzo@gmail.com>
Date: Thu, 28 Jul 2022 17:18:35 -0500
Subject: [PATCH] Want to Read List (#1392)

* Implemented a Want To Read list of series for all users, as a way to keep track of what you want to read.

When canceling a bulk action, like Add to Reading list, the selected cards wont de-select.

* Hooked up Remove from Want to Read

* When making bulk selection, allow the user to click on anywhere on the card

* Added no series messaging

* Code cleanup
---
 API/Controllers/AccountController.cs          |    2 +-
 API/Controllers/UsersController.cs            |    2 +
 API/Controllers/WantToReadController.cs       |   90 +
 API/DTOs/CollectionTags/CollectionTagDto.cs   |    3 +
 API/DTOs/WantToRead/UpdateWantToReadDto.cs    |   14 +
 .../20220728193758_WantToReadList.Designer.cs | 1590 +++++++++++++++++
 .../20220728193758_WantToReadList.cs          |   45 +
 .../Migrations/DataContextModelSnapshot.cs    |   11 +
 API/Data/Repositories/SeriesRepository.cs     |   80 +-
 API/Data/Repositories/UserRepository.cs       |    8 +-
 API/Entities/AppUser.cs                       |    4 +
 Kavita.Common/EnvironmentInfo/IOsInfo.cs      |    2 -
 .../app/_services/action-factory.service.ts   |   14 +
 UI/Web/src/app/_services/action.service.ts    |   40 +-
 UI/Web/src/app/_services/member.service.ts    |   10 +-
 UI/Web/src/app/_services/series.service.ts    |   14 +-
 .../app/all-series/all-series.component.ts    |   16 +-
 UI/Web/src/app/app-routing.module.ts          |    4 +
 .../bookmarks/bookmarks.component.html        |    2 +-
 .../src/app/cards/bulk-selection.service.ts   |    2 +-
 .../card-detail-layout.component.html         |   11 +-
 .../card-detail-layout.component.ts           |    1 +
 .../cards/card-item/card-item.component.html  |    4 +-
 .../cards/card-item/card-item.component.ts    |    4 +
 .../series-card/series-card.component.ts      |    3 +
 .../collection-detail.component.html          |    6 -
 .../collection-detail.component.ts            |   18 +-
 .../library-detail.component.html             |    2 +-
 .../library-detail.component.ts               |   18 +-
 .../series-detail/series-detail.component.ts  |   10 +-
 .../sidenav/side-nav/side-nav.component.html  |    5 +-
 .../want-to-read-routing.module.ts            |   22 +
 .../app/want-to-read/want-to-read.module.ts   |   21 +
 .../want-to-read/want-to-read.component.html  |   33 +
 .../want-to-read/want-to-read.component.scss  |    0
 .../want-to-read/want-to-read.component.ts    |  146 ++
 36 files changed, 2209 insertions(+), 48 deletions(-)
 create mode 100644 API/Controllers/WantToReadController.cs
 create mode 100644 API/DTOs/WantToRead/UpdateWantToReadDto.cs
 create mode 100644 API/Data/Migrations/20220728193758_WantToReadList.Designer.cs
 create mode 100644 API/Data/Migrations/20220728193758_WantToReadList.cs
 create mode 100644 UI/Web/src/app/want-to-read/want-to-read-routing.module.ts
 create mode 100644 UI/Web/src/app/want-to-read/want-to-read.module.ts
 create mode 100644 UI/Web/src/app/want-to-read/want-to-read/want-to-read.component.html
 create mode 100644 UI/Web/src/app/want-to-read/want-to-read/want-to-read.component.scss
 create mode 100644 UI/Web/src/app/want-to-read/want-to-read/want-to-read.component.ts

diff --git a/API/Controllers/AccountController.cs b/API/Controllers/AccountController.cs
index 8e1853660..c2a2a3e8f 100644
--- a/API/Controllers/AccountController.cs
+++ b/API/Controllers/AccountController.cs
@@ -178,7 +178,7 @@ namespace API.Controllers
 
             if (!validPassword)
             {
-                return Unauthorized("Your credentials are not correct"); // TODO: Refactor backend to send back the string for i8ln
+                return Unauthorized("Your credentials are not correct");
             }
 
             var result = await _signInManager
diff --git a/API/Controllers/UsersController.cs b/API/Controllers/UsersController.cs
index ce8753157..f74fac133 100644
--- a/API/Controllers/UsersController.cs
+++ b/API/Controllers/UsersController.cs
@@ -4,8 +4,10 @@ using System.Threading.Tasks;
 using API.Data;
 using API.Data.Repositories;
 using API.DTOs;
+using API.DTOs.Filtering;
 using API.Entities.Enums;
 using API.Extensions;
+using API.Helpers;
 using API.SignalR;
 using AutoMapper;
 using Microsoft.AspNetCore.Authorization;
diff --git a/API/Controllers/WantToReadController.cs b/API/Controllers/WantToReadController.cs
new file mode 100644
index 000000000..3f909c406
--- /dev/null
+++ b/API/Controllers/WantToReadController.cs
@@ -0,0 +1,90 @@
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using API.Data;
+using API.Data.Repositories;
+using API.DTOs;
+using API.DTOs.Filtering;
+using API.DTOs.WantToRead;
+using API.Extensions;
+using API.Helpers;
+using Microsoft.AspNetCore.Mvc;
+
+namespace API.Controllers;
+
+/// <summary>
+/// Responsible for all things Want To Read
+/// </summary>
+[Route("api/want-to-read")]
+public class WantToReadController : BaseApiController
+{
+    private readonly IUnitOfWork _unitOfWork;
+
+    public WantToReadController(IUnitOfWork unitOfWork)
+    {
+        _unitOfWork = unitOfWork;
+    }
+
+    /// <summary>
+    /// Return all Series that are in the current logged in user's Want to Read list, filtered
+    /// </summary>
+    /// <param name="userParams"></param>
+    /// <param name="filterDto"></param>
+    /// <returns></returns>
+    [HttpPost]
+    public async Task<ActionResult<PagedList<SeriesDto>>> GetWantToRead([FromQuery] UserParams userParams, FilterDto filterDto)
+    {
+        userParams ??= new UserParams();
+        var user = await _unitOfWork.UserRepository.GetUserByUsernameAsync(User.GetUsername());
+        var pagedList = await _unitOfWork.SeriesRepository.GetWantToReadForUserAsync(user.Id, userParams, filterDto);
+        Response.AddPaginationHeader(pagedList.CurrentPage, pagedList.PageSize, pagedList.TotalCount, pagedList.TotalPages);
+        return Ok(pagedList);
+    }
+
+    /// <summary>
+    /// Given a list of Series Ids, add them to the current logged in user's Want To Read list
+    /// </summary>
+    /// <param name="dto"></param>
+    /// <returns></returns>
+    [HttpPost("add-series")]
+    public async Task<ActionResult> AddSeries(UpdateWantToReadDto dto)
+    {
+        var user = await _unitOfWork.UserRepository.GetUserByUsernameAsync(User.GetUsername(),
+            AppUserIncludes.WantToRead);
+
+        var existingIds = user.WantToRead.Select(s => s.Id).ToList();
+        existingIds.AddRange(dto.SeriesIds);
+
+        var idsToAdd = existingIds.Distinct().ToList();
+
+        var seriesToAdd =  await _unitOfWork.SeriesRepository.GetSeriesByIdsAsync(idsToAdd);
+        foreach (var series in seriesToAdd)
+        {
+            user.WantToRead.Add(series);
+        }
+
+        if (!_unitOfWork.HasChanges()) return Ok();
+        if (await _unitOfWork.CommitAsync()) return Ok();
+
+        return BadRequest("There was an issue updating Read List");
+    }
+
+    /// <summary>
+    /// Given a list of Series Ids, remove them from the current logged in user's Want To Read list
+    /// </summary>
+    /// <param name="dto"></param>
+    /// <returns></returns>
+    [HttpPost("remove-series")]
+    public async Task<ActionResult> RemoveSeries(UpdateWantToReadDto dto)
+    {
+        var user = await _unitOfWork.UserRepository.GetUserByUsernameAsync(User.GetUsername(),
+            AppUserIncludes.WantToRead);
+
+        user.WantToRead = user.WantToRead.Where(s => @dto.SeriesIds.Contains(s.Id)).ToList();
+
+        if (!_unitOfWork.HasChanges()) return Ok();
+        if (await _unitOfWork.CommitAsync()) return Ok();
+
+        return BadRequest("There was an issue updating Read List");
+    }
+}
diff --git a/API/DTOs/CollectionTags/CollectionTagDto.cs b/API/DTOs/CollectionTags/CollectionTagDto.cs
index 4ada27a84..490e7d1ad 100644
--- a/API/DTOs/CollectionTags/CollectionTagDto.cs
+++ b/API/DTOs/CollectionTags/CollectionTagDto.cs
@@ -6,6 +6,9 @@
         public string Title { get; set; }
         public string Summary { get; set; }
         public bool Promoted { get; set; }
+        /// <summary>
+        /// The cover image string. This is used on Frontend to show or hide the Cover Image
+        /// </summary>
         public string CoverImage { get; set; }
         public bool CoverImageLocked { get; set; }
     }
diff --git a/API/DTOs/WantToRead/UpdateWantToReadDto.cs b/API/DTOs/WantToRead/UpdateWantToReadDto.cs
new file mode 100644
index 000000000..14a1a4710
--- /dev/null
+++ b/API/DTOs/WantToRead/UpdateWantToReadDto.cs
@@ -0,0 +1,14 @@
+using System.Collections.Generic;
+
+namespace API.DTOs.WantToRead;
+
+/// <summary>
+/// A list of Series to pass when working with Want To Read APIs
+/// </summary>
+public class UpdateWantToReadDto
+{
+    /// <summary>
+    /// List of Series Ids that will be Added/Removed
+    /// </summary>
+    public IList<int> SeriesIds { get; set; }
+}
diff --git a/API/Data/Migrations/20220728193758_WantToReadList.Designer.cs b/API/Data/Migrations/20220728193758_WantToReadList.Designer.cs
new file mode 100644
index 000000000..989841071
--- /dev/null
+++ b/API/Data/Migrations/20220728193758_WantToReadList.Designer.cs
@@ -0,0 +1,1590 @@
+// <auto-generated />
+using System;
+using API.Data;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+
+#nullable disable
+
+namespace API.Data.Migrations
+{
+    [DbContext(typeof(DataContext))]
+    [Migration("20220728193758_WantToReadList")]
+    partial class WantToReadList
+    {
+        protected override void BuildTargetModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder.HasAnnotation("ProductVersion", "6.0.7");
+
+            modelBuilder.Entity("API.Entities.AppRole", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("ConcurrencyStamp")
+                        .IsConcurrencyToken()
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Name")
+                        .HasMaxLength(256)
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("NormalizedName")
+                        .HasMaxLength(256)
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("NormalizedName")
+                        .IsUnique()
+                        .HasDatabaseName("RoleNameIndex");
+
+                    b.ToTable("AspNetRoles", (string)null);
+                });
+
+            modelBuilder.Entity("API.Entities.AppUser", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("AccessFailedCount")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("ApiKey")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("ConcurrencyStamp")
+                        .IsConcurrencyToken()
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("ConfirmationToken")
+                        .HasColumnType("TEXT");
+
+                    b.Property<DateTime>("Created")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Email")
+                        .HasMaxLength(256)
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("EmailConfirmed")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<DateTime>("LastActive")
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("LockoutEnabled")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<DateTimeOffset?>("LockoutEnd")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("NormalizedEmail")
+                        .HasMaxLength(256)
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("NormalizedUserName")
+                        .HasMaxLength(256)
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("PasswordHash")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("PhoneNumber")
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("PhoneNumberConfirmed")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<uint>("RowVersion")
+                        .IsConcurrencyToken()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("SecurityStamp")
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("TwoFactorEnabled")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("UserName")
+                        .HasMaxLength(256)
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("NormalizedEmail")
+                        .HasDatabaseName("EmailIndex");
+
+                    b.HasIndex("NormalizedUserName")
+                        .IsUnique()
+                        .HasDatabaseName("UserNameIndex");
+
+                    b.ToTable("AspNetUsers", (string)null);
+                });
+
+            modelBuilder.Entity("API.Entities.AppUserBookmark", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("AppUserId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("ChapterId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("FileName")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("Page")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("SeriesId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("VolumeId")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("AppUserId");
+
+                    b.ToTable("AppUserBookmark");
+                });
+
+            modelBuilder.Entity("API.Entities.AppUserPreferences", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("AppUserId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<bool>("AutoCloseMenu")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("BackgroundColor")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("TEXT")
+                        .HasDefaultValue("#000000");
+
+                    b.Property<bool>("BlurUnreadSummaries")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("BookReaderFontFamily")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("BookReaderFontSize")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<bool>("BookReaderImmersiveMode")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("BookReaderLayoutMode")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("BookReaderLineSpacing")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("BookReaderMargin")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("BookReaderReadingDirection")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<bool>("BookReaderTapToPaginate")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("BookThemeName")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("TEXT")
+                        .HasDefaultValue("Dark");
+
+                    b.Property<int>("GlobalPageLayoutMode")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER")
+                        .HasDefaultValue(0);
+
+                    b.Property<int>("LayoutMode")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("PageSplitOption")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<bool>("PromptForDownloadSize")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("ReaderMode")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("ReadingDirection")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("ScalingOption")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<bool>("ShowScreenHints")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int?>("ThemeId")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("AppUserId")
+                        .IsUnique();
+
+                    b.HasIndex("ThemeId");
+
+                    b.ToTable("AppUserPreferences");
+                });
+
+            modelBuilder.Entity("API.Entities.AppUserProgress", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("AppUserId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("BookScrollId")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("ChapterId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<DateTime>("Created")
+                        .HasColumnType("TEXT");
+
+                    b.Property<DateTime>("LastModified")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("PagesRead")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("SeriesId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("VolumeId")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("AppUserId");
+
+                    b.HasIndex("SeriesId");
+
+                    b.ToTable("AppUserProgresses");
+                });
+
+            modelBuilder.Entity("API.Entities.AppUserRating", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("AppUserId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("Rating")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("Review")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("SeriesId")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("AppUserId");
+
+                    b.HasIndex("SeriesId");
+
+                    b.ToTable("AppUserRating");
+                });
+
+            modelBuilder.Entity("API.Entities.AppUserRole", b =>
+                {
+                    b.Property<int>("UserId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("RoleId")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("UserId", "RoleId");
+
+                    b.HasIndex("RoleId");
+
+                    b.ToTable("AspNetUserRoles", (string)null);
+                });
+
+            modelBuilder.Entity("API.Entities.Chapter", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("AgeRating")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("AvgHoursToRead")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("Count")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("CoverImage")
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("CoverImageLocked")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<DateTime>("Created")
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("IsSpecial")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("Language")
+                        .HasColumnType("TEXT");
+
+                    b.Property<DateTime>("LastModified")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("MaxHoursToRead")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("MinHoursToRead")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("Number")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("Pages")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("Range")
+                        .HasColumnType("TEXT");
+
+                    b.Property<DateTime>("ReleaseDate")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Summary")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Title")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("TitleName")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("TotalCount")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("VolumeId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<long>("WordCount")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("VolumeId");
+
+                    b.ToTable("Chapter");
+                });
+
+            modelBuilder.Entity("API.Entities.CollectionTag", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("CoverImage")
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("CoverImageLocked")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("NormalizedTitle")
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("Promoted")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<uint>("RowVersion")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("Summary")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Title")
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("Id", "Promoted")
+                        .IsUnique();
+
+                    b.ToTable("CollectionTag");
+                });
+
+            modelBuilder.Entity("API.Entities.FolderPath", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<DateTime>("LastScanned")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("LibraryId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("Path")
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("LibraryId");
+
+                    b.ToTable("FolderPath");
+                });
+
+            modelBuilder.Entity("API.Entities.Genre", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<bool>("ExternalTag")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("NormalizedTitle")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Title")
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("NormalizedTitle", "ExternalTag")
+                        .IsUnique();
+
+                    b.ToTable("Genre");
+                });
+
+            modelBuilder.Entity("API.Entities.Library", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("CoverImage")
+                        .HasColumnType("TEXT");
+
+                    b.Property<DateTime>("Created")
+                        .HasColumnType("TEXT");
+
+                    b.Property<DateTime>("LastModified")
+                        .HasColumnType("TEXT");
+
+                    b.Property<DateTime>("LastScanned")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Name")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("Type")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("Library");
+                });
+
+            modelBuilder.Entity("API.Entities.MangaFile", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("ChapterId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("FilePath")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("Format")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<DateTime>("LastFileAnalysis")
+                        .HasColumnType("TEXT");
+
+                    b.Property<DateTime>("LastModified")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("Pages")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("ChapterId");
+
+                    b.ToTable("MangaFile");
+                });
+
+            modelBuilder.Entity("API.Entities.Metadata.SeriesMetadata", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("AgeRating")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<bool>("AgeRatingLocked")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<bool>("CharacterLocked")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<bool>("ColoristLocked")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<bool>("CoverArtistLocked")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<bool>("EditorLocked")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<bool>("GenresLocked")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<bool>("InkerLocked")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("Language")
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("LanguageLocked")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<bool>("LettererLocked")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("MaxCount")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<bool>("PencillerLocked")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("PublicationStatus")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<bool>("PublicationStatusLocked")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<bool>("PublisherLocked")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("ReleaseYear")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<uint>("RowVersion")
+                        .IsConcurrencyToken()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("SeriesId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("Summary")
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("SummaryLocked")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<bool>("TagsLocked")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("TotalCount")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<bool>("TranslatorLocked")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<bool>("WriterLocked")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("SeriesId")
+                        .IsUnique();
+
+                    b.HasIndex("Id", "SeriesId")
+                        .IsUnique();
+
+                    b.ToTable("SeriesMetadata");
+                });
+
+            modelBuilder.Entity("API.Entities.Metadata.SeriesRelation", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("RelationKind")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("SeriesId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("TargetSeriesId")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("SeriesId");
+
+                    b.HasIndex("TargetSeriesId");
+
+                    b.ToTable("SeriesRelation");
+                });
+
+            modelBuilder.Entity("API.Entities.Person", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("Name")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("NormalizedName")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("Role")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("Person");
+                });
+
+            modelBuilder.Entity("API.Entities.ReadingList", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("AppUserId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("CoverImage")
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("CoverImageLocked")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<DateTime>("Created")
+                        .HasColumnType("TEXT");
+
+                    b.Property<DateTime>("LastModified")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("NormalizedTitle")
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("Promoted")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("Summary")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Title")
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("AppUserId");
+
+                    b.ToTable("ReadingList");
+                });
+
+            modelBuilder.Entity("API.Entities.ReadingListItem", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("ChapterId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("Order")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("ReadingListId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("SeriesId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("VolumeId")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("ChapterId");
+
+                    b.HasIndex("ReadingListId");
+
+                    b.HasIndex("SeriesId");
+
+                    b.HasIndex("VolumeId");
+
+                    b.ToTable("ReadingListItem");
+                });
+
+            modelBuilder.Entity("API.Entities.Series", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int?>("AppUserId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("AvgHoursToRead")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("CoverImage")
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("CoverImageLocked")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<DateTime>("Created")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("Format")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<DateTime>("LastChapterAdded")
+                        .HasColumnType("TEXT");
+
+                    b.Property<DateTime>("LastModified")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("LibraryId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("LocalizedName")
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("LocalizedNameLocked")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("MaxHoursToRead")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("MinHoursToRead")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("Name")
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("NameLocked")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("NormalizedName")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("OriginalName")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("Pages")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("SortName")
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("SortNameLocked")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<long>("WordCount")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("AppUserId");
+
+                    b.HasIndex("LibraryId");
+
+                    b.ToTable("Series");
+                });
+
+            modelBuilder.Entity("API.Entities.ServerSetting", b =>
+                {
+                    b.Property<int>("Key")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<uint>("RowVersion")
+                        .IsConcurrencyToken()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("Value")
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("Key");
+
+                    b.ToTable("ServerSetting");
+                });
+
+            modelBuilder.Entity("API.Entities.SiteTheme", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<DateTime>("Created")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("FileName")
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("IsDefault")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<DateTime>("LastModified")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Name")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("NormalizedName")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("Provider")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("SiteTheme");
+                });
+
+            modelBuilder.Entity("API.Entities.Tag", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<bool>("ExternalTag")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("NormalizedTitle")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Title")
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("NormalizedTitle", "ExternalTag")
+                        .IsUnique();
+
+                    b.ToTable("Tag");
+                });
+
+            modelBuilder.Entity("API.Entities.Volume", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("AvgHoursToRead")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("CoverImage")
+                        .HasColumnType("TEXT");
+
+                    b.Property<DateTime>("Created")
+                        .HasColumnType("TEXT");
+
+                    b.Property<DateTime>("LastModified")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("MaxHoursToRead")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("MinHoursToRead")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("Name")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("Number")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("Pages")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("SeriesId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<long>("WordCount")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("SeriesId");
+
+                    b.ToTable("Volume");
+                });
+
+            modelBuilder.Entity("AppUserLibrary", b =>
+                {
+                    b.Property<int>("AppUsersId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("LibrariesId")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("AppUsersId", "LibrariesId");
+
+                    b.HasIndex("LibrariesId");
+
+                    b.ToTable("AppUserLibrary");
+                });
+
+            modelBuilder.Entity("ChapterGenre", b =>
+                {
+                    b.Property<int>("ChaptersId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("GenresId")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("ChaptersId", "GenresId");
+
+                    b.HasIndex("GenresId");
+
+                    b.ToTable("ChapterGenre");
+                });
+
+            modelBuilder.Entity("ChapterPerson", b =>
+                {
+                    b.Property<int>("ChapterMetadatasId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("PeopleId")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("ChapterMetadatasId", "PeopleId");
+
+                    b.HasIndex("PeopleId");
+
+                    b.ToTable("ChapterPerson");
+                });
+
+            modelBuilder.Entity("ChapterTag", b =>
+                {
+                    b.Property<int>("ChaptersId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("TagsId")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("ChaptersId", "TagsId");
+
+                    b.HasIndex("TagsId");
+
+                    b.ToTable("ChapterTag");
+                });
+
+            modelBuilder.Entity("CollectionTagSeriesMetadata", b =>
+                {
+                    b.Property<int>("CollectionTagsId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("SeriesMetadatasId")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("CollectionTagsId", "SeriesMetadatasId");
+
+                    b.HasIndex("SeriesMetadatasId");
+
+                    b.ToTable("CollectionTagSeriesMetadata");
+                });
+
+            modelBuilder.Entity("GenreSeriesMetadata", b =>
+                {
+                    b.Property<int>("GenresId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("SeriesMetadatasId")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("GenresId", "SeriesMetadatasId");
+
+                    b.HasIndex("SeriesMetadatasId");
+
+                    b.ToTable("GenreSeriesMetadata");
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRoleClaim<int>", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("ClaimType")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("ClaimValue")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("RoleId")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("RoleId");
+
+                    b.ToTable("AspNetRoleClaims", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserClaim<int>", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("ClaimType")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("ClaimValue")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("UserId")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("UserId");
+
+                    b.ToTable("AspNetUserClaims", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserLogin<int>", b =>
+                {
+                    b.Property<string>("LoginProvider")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("ProviderKey")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("ProviderDisplayName")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("UserId")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("LoginProvider", "ProviderKey");
+
+                    b.HasIndex("UserId");
+
+                    b.ToTable("AspNetUserLogins", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserToken<int>", b =>
+                {
+                    b.Property<int>("UserId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("LoginProvider")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Name")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Value")
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("UserId", "LoginProvider", "Name");
+
+                    b.ToTable("AspNetUserTokens", (string)null);
+                });
+
+            modelBuilder.Entity("PersonSeriesMetadata", b =>
+                {
+                    b.Property<int>("PeopleId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("SeriesMetadatasId")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("PeopleId", "SeriesMetadatasId");
+
+                    b.HasIndex("SeriesMetadatasId");
+
+                    b.ToTable("PersonSeriesMetadata");
+                });
+
+            modelBuilder.Entity("SeriesMetadataTag", b =>
+                {
+                    b.Property<int>("SeriesMetadatasId")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("TagsId")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("SeriesMetadatasId", "TagsId");
+
+                    b.HasIndex("TagsId");
+
+                    b.ToTable("SeriesMetadataTag");
+                });
+
+            modelBuilder.Entity("API.Entities.AppUserBookmark", b =>
+                {
+                    b.HasOne("API.Entities.AppUser", "AppUser")
+                        .WithMany("Bookmarks")
+                        .HasForeignKey("AppUserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("AppUser");
+                });
+
+            modelBuilder.Entity("API.Entities.AppUserPreferences", b =>
+                {
+                    b.HasOne("API.Entities.AppUser", "AppUser")
+                        .WithOne("UserPreferences")
+                        .HasForeignKey("API.Entities.AppUserPreferences", "AppUserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("API.Entities.SiteTheme", "Theme")
+                        .WithMany()
+                        .HasForeignKey("ThemeId");
+
+                    b.Navigation("AppUser");
+
+                    b.Navigation("Theme");
+                });
+
+            modelBuilder.Entity("API.Entities.AppUserProgress", b =>
+                {
+                    b.HasOne("API.Entities.AppUser", "AppUser")
+                        .WithMany("Progresses")
+                        .HasForeignKey("AppUserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("API.Entities.Series", null)
+                        .WithMany("Progress")
+                        .HasForeignKey("SeriesId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("AppUser");
+                });
+
+            modelBuilder.Entity("API.Entities.AppUserRating", b =>
+                {
+                    b.HasOne("API.Entities.AppUser", "AppUser")
+                        .WithMany("Ratings")
+                        .HasForeignKey("AppUserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("API.Entities.Series", null)
+                        .WithMany("Ratings")
+                        .HasForeignKey("SeriesId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("AppUser");
+                });
+
+            modelBuilder.Entity("API.Entities.AppUserRole", b =>
+                {
+                    b.HasOne("API.Entities.AppRole", "Role")
+                        .WithMany("UserRoles")
+                        .HasForeignKey("RoleId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("API.Entities.AppUser", "User")
+                        .WithMany("UserRoles")
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Role");
+
+                    b.Navigation("User");
+                });
+
+            modelBuilder.Entity("API.Entities.Chapter", b =>
+                {
+                    b.HasOne("API.Entities.Volume", "Volume")
+                        .WithMany("Chapters")
+                        .HasForeignKey("VolumeId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Volume");
+                });
+
+            modelBuilder.Entity("API.Entities.FolderPath", b =>
+                {
+                    b.HasOne("API.Entities.Library", "Library")
+                        .WithMany("Folders")
+                        .HasForeignKey("LibraryId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Library");
+                });
+
+            modelBuilder.Entity("API.Entities.MangaFile", b =>
+                {
+                    b.HasOne("API.Entities.Chapter", "Chapter")
+                        .WithMany("Files")
+                        .HasForeignKey("ChapterId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Chapter");
+                });
+
+            modelBuilder.Entity("API.Entities.Metadata.SeriesMetadata", b =>
+                {
+                    b.HasOne("API.Entities.Series", "Series")
+                        .WithOne("Metadata")
+                        .HasForeignKey("API.Entities.Metadata.SeriesMetadata", "SeriesId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Series");
+                });
+
+            modelBuilder.Entity("API.Entities.Metadata.SeriesRelation", b =>
+                {
+                    b.HasOne("API.Entities.Series", "Series")
+                        .WithMany("Relations")
+                        .HasForeignKey("SeriesId")
+                        .OnDelete(DeleteBehavior.ClientCascade)
+                        .IsRequired();
+
+                    b.HasOne("API.Entities.Series", "TargetSeries")
+                        .WithMany("RelationOf")
+                        .HasForeignKey("TargetSeriesId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Series");
+
+                    b.Navigation("TargetSeries");
+                });
+
+            modelBuilder.Entity("API.Entities.ReadingList", b =>
+                {
+                    b.HasOne("API.Entities.AppUser", "AppUser")
+                        .WithMany("ReadingLists")
+                        .HasForeignKey("AppUserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("AppUser");
+                });
+
+            modelBuilder.Entity("API.Entities.ReadingListItem", b =>
+                {
+                    b.HasOne("API.Entities.Chapter", "Chapter")
+                        .WithMany()
+                        .HasForeignKey("ChapterId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("API.Entities.ReadingList", "ReadingList")
+                        .WithMany("Items")
+                        .HasForeignKey("ReadingListId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("API.Entities.Series", "Series")
+                        .WithMany()
+                        .HasForeignKey("SeriesId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("API.Entities.Volume", "Volume")
+                        .WithMany()
+                        .HasForeignKey("VolumeId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Chapter");
+
+                    b.Navigation("ReadingList");
+
+                    b.Navigation("Series");
+
+                    b.Navigation("Volume");
+                });
+
+            modelBuilder.Entity("API.Entities.Series", b =>
+                {
+                    b.HasOne("API.Entities.AppUser", null)
+                        .WithMany("WantToRead")
+                        .HasForeignKey("AppUserId");
+
+                    b.HasOne("API.Entities.Library", "Library")
+                        .WithMany("Series")
+                        .HasForeignKey("LibraryId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Library");
+                });
+
+            modelBuilder.Entity("API.Entities.Volume", b =>
+                {
+                    b.HasOne("API.Entities.Series", "Series")
+                        .WithMany("Volumes")
+                        .HasForeignKey("SeriesId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Series");
+                });
+
+            modelBuilder.Entity("AppUserLibrary", b =>
+                {
+                    b.HasOne("API.Entities.AppUser", null)
+                        .WithMany()
+                        .HasForeignKey("AppUsersId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("API.Entities.Library", null)
+                        .WithMany()
+                        .HasForeignKey("LibrariesId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("ChapterGenre", b =>
+                {
+                    b.HasOne("API.Entities.Chapter", null)
+                        .WithMany()
+                        .HasForeignKey("ChaptersId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("API.Entities.Genre", null)
+                        .WithMany()
+                        .HasForeignKey("GenresId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("ChapterPerson", b =>
+                {
+                    b.HasOne("API.Entities.Chapter", null)
+                        .WithMany()
+                        .HasForeignKey("ChapterMetadatasId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("API.Entities.Person", null)
+                        .WithMany()
+                        .HasForeignKey("PeopleId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("ChapterTag", b =>
+                {
+                    b.HasOne("API.Entities.Chapter", null)
+                        .WithMany()
+                        .HasForeignKey("ChaptersId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("API.Entities.Tag", null)
+                        .WithMany()
+                        .HasForeignKey("TagsId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("CollectionTagSeriesMetadata", b =>
+                {
+                    b.HasOne("API.Entities.CollectionTag", null)
+                        .WithMany()
+                        .HasForeignKey("CollectionTagsId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("API.Entities.Metadata.SeriesMetadata", null)
+                        .WithMany()
+                        .HasForeignKey("SeriesMetadatasId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("GenreSeriesMetadata", b =>
+                {
+                    b.HasOne("API.Entities.Genre", null)
+                        .WithMany()
+                        .HasForeignKey("GenresId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("API.Entities.Metadata.SeriesMetadata", null)
+                        .WithMany()
+                        .HasForeignKey("SeriesMetadatasId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRoleClaim<int>", b =>
+                {
+                    b.HasOne("API.Entities.AppRole", null)
+                        .WithMany()
+                        .HasForeignKey("RoleId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserClaim<int>", b =>
+                {
+                    b.HasOne("API.Entities.AppUser", null)
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserLogin<int>", b =>
+                {
+                    b.HasOne("API.Entities.AppUser", null)
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserToken<int>", b =>
+                {
+                    b.HasOne("API.Entities.AppUser", null)
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("PersonSeriesMetadata", b =>
+                {
+                    b.HasOne("API.Entities.Person", null)
+                        .WithMany()
+                        .HasForeignKey("PeopleId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("API.Entities.Metadata.SeriesMetadata", null)
+                        .WithMany()
+                        .HasForeignKey("SeriesMetadatasId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("SeriesMetadataTag", b =>
+                {
+                    b.HasOne("API.Entities.Metadata.SeriesMetadata", null)
+                        .WithMany()
+                        .HasForeignKey("SeriesMetadatasId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("API.Entities.Tag", null)
+                        .WithMany()
+                        .HasForeignKey("TagsId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("API.Entities.AppRole", b =>
+                {
+                    b.Navigation("UserRoles");
+                });
+
+            modelBuilder.Entity("API.Entities.AppUser", b =>
+                {
+                    b.Navigation("Bookmarks");
+
+                    b.Navigation("Progresses");
+
+                    b.Navigation("Ratings");
+
+                    b.Navigation("ReadingLists");
+
+                    b.Navigation("UserPreferences");
+
+                    b.Navigation("UserRoles");
+
+                    b.Navigation("WantToRead");
+                });
+
+            modelBuilder.Entity("API.Entities.Chapter", b =>
+                {
+                    b.Navigation("Files");
+                });
+
+            modelBuilder.Entity("API.Entities.Library", b =>
+                {
+                    b.Navigation("Folders");
+
+                    b.Navigation("Series");
+                });
+
+            modelBuilder.Entity("API.Entities.ReadingList", b =>
+                {
+                    b.Navigation("Items");
+                });
+
+            modelBuilder.Entity("API.Entities.Series", b =>
+                {
+                    b.Navigation("Metadata");
+
+                    b.Navigation("Progress");
+
+                    b.Navigation("Ratings");
+
+                    b.Navigation("RelationOf");
+
+                    b.Navigation("Relations");
+
+                    b.Navigation("Volumes");
+                });
+
+            modelBuilder.Entity("API.Entities.Volume", b =>
+                {
+                    b.Navigation("Chapters");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}
diff --git a/API/Data/Migrations/20220728193758_WantToReadList.cs b/API/Data/Migrations/20220728193758_WantToReadList.cs
new file mode 100644
index 000000000..6a3688380
--- /dev/null
+++ b/API/Data/Migrations/20220728193758_WantToReadList.cs
@@ -0,0 +1,45 @@
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace API.Data.Migrations
+{
+    public partial class WantToReadList : Migration
+    {
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.AddColumn<int>(
+                name: "AppUserId",
+                table: "Series",
+                type: "INTEGER",
+                nullable: true);
+
+            migrationBuilder.CreateIndex(
+                name: "IX_Series_AppUserId",
+                table: "Series",
+                column: "AppUserId");
+
+            migrationBuilder.AddForeignKey(
+                name: "FK_Series_AspNetUsers_AppUserId",
+                table: "Series",
+                column: "AppUserId",
+                principalTable: "AspNetUsers",
+                principalColumn: "Id");
+        }
+
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropForeignKey(
+                name: "FK_Series_AspNetUsers_AppUserId",
+                table: "Series");
+
+            migrationBuilder.DropIndex(
+                name: "IX_Series_AppUserId",
+                table: "Series");
+
+            migrationBuilder.DropColumn(
+                name: "AppUserId",
+                table: "Series");
+        }
+    }
+}
diff --git a/API/Data/Migrations/DataContextModelSnapshot.cs b/API/Data/Migrations/DataContextModelSnapshot.cs
index 17f4c7cdb..64da8ea4f 100644
--- a/API/Data/Migrations/DataContextModelSnapshot.cs
+++ b/API/Data/Migrations/DataContextModelSnapshot.cs
@@ -758,6 +758,9 @@ namespace API.Data.Migrations
                         .ValueGeneratedOnAdd()
                         .HasColumnType("INTEGER");
 
+                    b.Property<int?>("AppUserId")
+                        .HasColumnType("INTEGER");
+
                     b.Property<int>("AvgHoursToRead")
                         .HasColumnType("INTEGER");
 
@@ -820,6 +823,8 @@ namespace API.Data.Migrations
 
                     b.HasKey("Id");
 
+                    b.HasIndex("AppUserId");
+
                     b.HasIndex("LibraryId");
 
                     b.ToTable("Series");
@@ -1339,6 +1344,10 @@ namespace API.Data.Migrations
 
             modelBuilder.Entity("API.Entities.Series", b =>
                 {
+                    b.HasOne("API.Entities.AppUser", null)
+                        .WithMany("WantToRead")
+                        .HasForeignKey("AppUserId");
+
                     b.HasOne("API.Entities.Library", "Library")
                         .WithMany("Series")
                         .HasForeignKey("LibraryId")
@@ -1533,6 +1542,8 @@ namespace API.Data.Migrations
                     b.Navigation("UserPreferences");
 
                     b.Navigation("UserRoles");
+
+                    b.Navigation("WantToRead");
                 });
 
             modelBuilder.Entity("API.Entities.Chapter", b =>
diff --git a/API/Data/Repositories/SeriesRepository.cs b/API/Data/Repositories/SeriesRepository.cs
index 4d6c60234..c859ed2de 100644
--- a/API/Data/Repositories/SeriesRepository.cs
+++ b/API/Data/Repositories/SeriesRepository.cs
@@ -119,6 +119,7 @@ public interface ISeriesRepository
     Task<PagedList<SeriesDto>> GetRediscover(int userId, int libraryId, UserParams userParams);
     Task<SeriesDto> GetSeriesForMangaFile(int mangaFileId, int userId);
     Task<SeriesDto> GetSeriesForChapter(int chapterId, int userId);
+    Task<PagedList<SeriesDto>> GetWantToReadForUserAsync(int userId, UserParams userParams, FilterDto filter);
 }
 
 public class SeriesRepository : ISeriesRepository
@@ -715,7 +716,6 @@ public class SeriesRepository : ISeriesRepository
         return await PagedList<SeriesDto>.CreateAsync(query, userParams.PageNumber, userParams.PageSize);
     }
 
-
     private async Task<IQueryable<Series>> CreateFilteredSearchQueryable(int userId, int libraryId, FilterDto filter)
     {
         var userLibraries = await GetUserLibraries(libraryId, userId);
@@ -778,6 +778,68 @@ public class SeriesRepository : ISeriesRepository
         return query;
     }
 
+    private async Task<IQueryable<Series>> CreateFilteredSearchQueryable(int userId, int libraryId, FilterDto filter, IQueryable<Series> sQuery)
+    {
+        var userLibraries = await GetUserLibraries(libraryId, userId);
+        var formats = ExtractFilters(libraryId, userId, filter, ref userLibraries,
+            out var allPeopleIds, out var hasPeopleFilter, out var hasGenresFilter,
+            out var hasCollectionTagFilter, out var hasRatingFilter, out var hasProgressFilter,
+            out var seriesIds, out var hasAgeRating, out var hasTagsFilter, out var hasLanguageFilter, out var hasPublicationFilter, out var hasSeriesNameFilter);
+
+        var query = sQuery
+            .Where(s => userLibraries.Contains(s.LibraryId)
+                        && formats.Contains(s.Format)
+                        && (!hasGenresFilter || s.Metadata.Genres.Any(g => filter.Genres.Contains(g.Id)))
+                        && (!hasPeopleFilter || s.Metadata.People.Any(p => allPeopleIds.Contains(p.Id)))
+                        && (!hasCollectionTagFilter ||
+                            s.Metadata.CollectionTags.Any(t => filter.CollectionTags.Contains(t.Id)))
+                        && (!hasRatingFilter || s.Ratings.Any(r => r.Rating >= filter.Rating && r.AppUserId == userId))
+                        && (!hasProgressFilter || seriesIds.Contains(s.Id))
+                        && (!hasAgeRating || filter.AgeRating.Contains(s.Metadata.AgeRating))
+                        && (!hasTagsFilter || s.Metadata.Tags.Any(t => filter.Tags.Contains(t.Id)))
+                        && (!hasLanguageFilter || filter.Languages.Contains(s.Metadata.Language))
+                        && (!hasPublicationFilter || filter.PublicationStatus.Contains(s.Metadata.PublicationStatus)))
+            .Where(s => !hasSeriesNameFilter ||
+                        EF.Functions.Like(s.Name, $"%{filter.SeriesNameQuery}%")
+                                             || EF.Functions.Like(s.OriginalName, $"%{filter.SeriesNameQuery}%")
+                                             || EF.Functions.Like(s.LocalizedName, $"%{filter.SeriesNameQuery}%"))
+            .AsNoTracking();
+
+        // If no sort options, default to using SortName
+        filter.SortOptions ??= new SortOptions()
+        {
+            IsAscending = true,
+            SortField = SortField.SortName
+        };
+
+        if (filter.SortOptions.IsAscending)
+        {
+            query = filter.SortOptions.SortField switch
+            {
+                SortField.SortName => query.OrderBy(s => s.SortName),
+                SortField.CreatedDate => query.OrderBy(s => s.Created),
+                SortField.LastModifiedDate => query.OrderBy(s => s.LastModified),
+                SortField.LastChapterAdded => query.OrderBy(s => s.LastChapterAdded),
+                SortField.TimeToRead => query.OrderBy(s => s.AvgHoursToRead),
+                _ => query
+            };
+        }
+        else
+        {
+            query = filter.SortOptions.SortField switch
+            {
+                SortField.SortName => query.OrderByDescending(s => s.SortName),
+                SortField.CreatedDate => query.OrderByDescending(s => s.Created),
+                SortField.LastModifiedDate => query.OrderByDescending(s => s.LastModified),
+                SortField.LastChapterAdded => query.OrderByDescending(s => s.LastChapterAdded),
+                SortField.TimeToRead => query.OrderByDescending(s => s.AvgHoursToRead),
+                _ => query
+            };
+        }
+
+        return query;
+    }
+
     public async Task<SeriesMetadataDto> GetSeriesMetadata(int seriesId)
     {
         var metadataDto = await _context.SeriesMetadata
@@ -1074,6 +1136,21 @@ public class SeriesRepository : ISeriesRepository
             .SingleOrDefaultAsync();
     }
 
+    public async Task<PagedList<SeriesDto>> GetWantToReadForUserAsync(int userId, UserParams userParams, FilterDto filter)
+    {
+        var libraryIds = GetLibraryIdsForUser(userId);
+        var query = _context.AppUser
+            .Where(user => user.Id == userId)
+            .SelectMany(u => u.WantToRead)
+            .Where(s => libraryIds.Contains(s.LibraryId))
+            .AsSplitQuery()
+            .AsNoTracking();
+
+        var filteredQuery = await CreateFilteredSearchQueryable(userId, 0, filter, query);
+
+        return await PagedList<SeriesDto>.CreateAsync(filteredQuery.ProjectTo<SeriesDto>(_mapper.ConfigurationProvider), userParams.PageNumber, userParams.PageSize);
+    }
+
 
     public async Task<PagedList<SeriesDto>> GetHighlyRated(int userId, int libraryId, UserParams userParams)
     {
@@ -1238,7 +1315,6 @@ public class SeriesRepository : ISeriesRepository
                 VolumeNumber = c.Volume.Number,
                 ChapterTitle = c.Title
             })
-            //.Take(maxRecords)
             .AsSplitQuery()
             .Where(c => c.Created >= withinLastWeek && libraryIds.Contains(c.LibraryId))
             .AsEnumerable();
diff --git a/API/Data/Repositories/UserRepository.cs b/API/Data/Repositories/UserRepository.cs
index 587836eb9..792728431 100644
--- a/API/Data/Repositories/UserRepository.cs
+++ b/API/Data/Repositories/UserRepository.cs
@@ -22,7 +22,8 @@ public enum AppUserIncludes
     Bookmarks = 4,
     ReadingLists = 8,
     Ratings = 16,
-    UserPreferences = 32
+    UserPreferences = 32,
+    WantToRead = 64
 }
 
 public interface IUserRepository
@@ -176,6 +177,11 @@ public class UserRepository : IUserRepository
             query = query.Include(u => u.UserPreferences);
         }
 
+        if (includeFlags.HasFlag(AppUserIncludes.WantToRead))
+        {
+            query = query.Include(u => u.WantToRead);
+        }
+
 
 
         return query;
diff --git a/API/Entities/AppUser.cs b/API/Entities/AppUser.cs
index 1f56c9ace..640860a0f 100644
--- a/API/Entities/AppUser.cs
+++ b/API/Entities/AppUser.cs
@@ -22,6 +22,10 @@ namespace API.Entities
         /// </summary>
         public ICollection<ReadingList> ReadingLists { get; set; }
         /// <summary>
+        /// A list of Series the user want's to read
+        /// </summary>
+        public ICollection<Series> WantToRead { get; set; }
+        /// <summary>
         /// An API Key to interact with external services, like OPDS
         /// </summary>
         public string ApiKey { get; set; }
diff --git a/Kavita.Common/EnvironmentInfo/IOsInfo.cs b/Kavita.Common/EnvironmentInfo/IOsInfo.cs
index c990591fc..cb5a85e09 100644
--- a/Kavita.Common/EnvironmentInfo/IOsInfo.cs
+++ b/Kavita.Common/EnvironmentInfo/IOsInfo.cs
@@ -85,8 +85,6 @@ namespace Kavita.Common.EnvironmentInfo
 
         public OsInfo()
         {
-            OsVersionModel osInfo = null;
-
             Name = Os.ToString();
             FullName = Name;
 
diff --git a/UI/Web/src/app/_services/action-factory.service.ts b/UI/Web/src/app/_services/action-factory.service.ts
index 5d728f80c..ef53a0fdc 100644
--- a/UI/Web/src/app/_services/action-factory.service.ts
+++ b/UI/Web/src/app/_services/action-factory.service.ts
@@ -69,6 +69,14 @@ export enum Action {
    * Open the reader for entity
    */
   Read = 14,
+  /**
+   * Add to user's Want to Read List
+   */
+  AddToWantToReadList = 15,
+  /**
+   * Remove from user's Want to Read List
+   */
+  RemoveFromWantToReadList = 16,
 }
 
 export interface ActionItem<T> {
@@ -276,6 +284,12 @@ export class ActionFactoryService {
         title: 'Add to Reading List',
         callback: this.dummyCallback,
         requiresAdmin: false
+      },
+      {
+        action: Action.AddToWantToReadList,
+        title: 'Add to Want To Read',
+        callback: this.dummyCallback,
+        requiresAdmin: false
       }
     ];
 
diff --git a/UI/Web/src/app/_services/action.service.ts b/UI/Web/src/app/_services/action.service.ts
index 094a7bb30..d863887a4 100644
--- a/UI/Web/src/app/_services/action.service.ts
+++ b/UI/Web/src/app/_services/action.service.ts
@@ -13,6 +13,7 @@ import { ReadingList } from '../_models/reading-list';
 import { Series } from '../_models/series';
 import { Volume } from '../_models/volume';
 import { LibraryService } from './library.service';
+import { MemberService } from './member.service';
 import { ReaderService } from './reader.service';
 import { SeriesService } from './series.service';
 
@@ -33,13 +34,12 @@ export type BooleanActionCallback = (result: boolean) => void;
 export class ActionService implements OnDestroy {
 
   private readonly onDestroy = new Subject<void>();
-  private bookmarkModalRef: NgbModalRef | null = null;
   private readingListModalRef: NgbModalRef | null = null;
   private collectionModalRef: NgbModalRef | null = null;
 
   constructor(private libraryService: LibraryService, private seriesService: SeriesService, 
     private readerService: ReaderService, private toastr: ToastrService, private modalService: NgbModal,
-    private confirmService: ConfirmService) { }
+    private confirmService: ConfirmService, private memberService: MemberService) { }
 
   ngOnDestroy() {
     this.onDestroy.next();
@@ -342,7 +342,7 @@ export class ActionService implements OnDestroy {
     });
   }
 
-  addMultipleToReadingList(seriesId: number, volumes: Array<Volume>, chapters?: Array<Chapter>, callback?: VoidActionCallback) {
+  addMultipleToReadingList(seriesId: number, volumes: Array<Volume>, chapters?: Array<Chapter>, callback?: BooleanActionCallback) {
     if (this.readingListModalRef != null) { return; }
       this.readingListModalRef = this.modalService.open(AddToListModalComponent, { scrollable: true, size: 'md' });
       this.readingListModalRef.componentInstance.seriesId = seriesId;
@@ -355,18 +355,36 @@ export class ActionService implements OnDestroy {
       this.readingListModalRef.closed.pipe(take(1)).subscribe(() => {
         this.readingListModalRef = null;
         if (callback) {
-          callback();
+          callback(true);
         }
       });
       this.readingListModalRef.dismissed.pipe(take(1)).subscribe(() => {
         this.readingListModalRef = null;
         if (callback) {
-          callback();
+          callback(false);
         }
       });
   }
 
-  addMultipleSeriesToReadingList(series: Array<Series>, callback?: VoidActionCallback) {
+  addMultipleSeriesToWantToReadList(seriesIds: Array<number>, callback?: VoidActionCallback) {
+    this.memberService.addSeriesToWantToRead(seriesIds).subscribe(() => {
+      this.toastr.success('Series added to Want to Read list');
+      if (callback) {
+        callback();
+      }
+    });
+  }
+
+  removeMultipleSeriesFromWantToReadList(seriesIds: Array<number>, callback?: VoidActionCallback) {
+    this.memberService.removeSeriesToWantToRead(seriesIds).subscribe(() => {
+      this.toastr.success('Series removed from Want to Read list');
+      if (callback) {
+        callback();
+      }
+    });
+  }
+
+  addMultipleSeriesToReadingList(series: Array<Series>, callback?: BooleanActionCallback) {
     if (this.readingListModalRef != null) { return; }
       this.readingListModalRef = this.modalService.open(AddToListModalComponent, { scrollable: true, size: 'md' });
       this.readingListModalRef.componentInstance.seriesIds = series.map(v => v.id);
@@ -377,13 +395,13 @@ export class ActionService implements OnDestroy {
       this.readingListModalRef.closed.pipe(take(1)).subscribe(() => {
         this.readingListModalRef = null;
         if (callback) {
-          callback();
+          callback(true);
         }
       });
       this.readingListModalRef.dismissed.pipe(take(1)).subscribe(() => {
         this.readingListModalRef = null;
         if (callback) {
-          callback();
+          callback(false);
         }
       });
   }
@@ -394,7 +412,7 @@ export class ActionService implements OnDestroy {
    * @param callback 
    * @returns 
    */
-  addMultipleSeriesToCollectionTag(series: Array<Series>, callback?: VoidActionCallback) {
+  addMultipleSeriesToCollectionTag(series: Array<Series>, callback?: BooleanActionCallback) {
     if (this.collectionModalRef != null) { return; }
       this.collectionModalRef = this.modalService.open(BulkAddToCollectionComponent, { scrollable: true, size: 'md', windowClass: 'collection' });
       this.collectionModalRef.componentInstance.seriesIds = series.map(v => v.id);
@@ -403,13 +421,13 @@ export class ActionService implements OnDestroy {
       this.collectionModalRef.closed.pipe(take(1)).subscribe(() => {
         this.collectionModalRef = null;
         if (callback) {
-          callback();
+          callback(true);
         }
       });
       this.collectionModalRef.dismissed.pipe(take(1)).subscribe(() => {
         this.collectionModalRef = null;
         if (callback) {
-          callback();
+          callback(false);
         }
       });
   }
diff --git a/UI/Web/src/app/_services/member.service.ts b/UI/Web/src/app/_services/member.service.ts
index 2c28db2cc..a187bec1a 100644
--- a/UI/Web/src/app/_services/member.service.ts
+++ b/UI/Web/src/app/_services/member.service.ts
@@ -36,8 +36,16 @@ export class MemberService {
     return this.httpClient.get<boolean>(this.baseUrl + 'users/has-reading-progress?libraryId=' + librayId);
   }
 
-
   getPendingInvites() {
     return this.httpClient.get<Array<Member>>(this.baseUrl + 'users/pending');
   }
+
+  addSeriesToWantToRead(seriesIds: Array<number>) {
+    return this.httpClient.post<Array<Member>>(this.baseUrl + 'want-to-read/add-series', {seriesIds});
+  }
+
+  removeSeriesToWantToRead(seriesIds: Array<number>) {
+    return this.httpClient.post<Array<Member>>(this.baseUrl + 'want-to-read/remove-series', {seriesIds});
+  }
+  
 }
diff --git a/UI/Web/src/app/_services/series.service.ts b/UI/Web/src/app/_services/series.service.ts
index 288e7dd01..2c7cbe71c 100644
--- a/UI/Web/src/app/_services/series.service.ts
+++ b/UI/Web/src/app/_services/series.service.ts
@@ -1,6 +1,6 @@
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { of } from 'rxjs';
+import { Observable, of } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { environment } from 'src/environments/environment';
 import { UtilityService } from '../shared/_services/utility.service';
@@ -124,6 +124,18 @@ export class SeriesService {
     return this.httpClient.post<SeriesGroup[]>(this.baseUrl + 'series/recently-updated-series', {});
   }
 
+  getWantToRead(pageNum?: number, itemsPerPage?: number, filter?: SeriesFilter): Observable<PaginatedResult<Series[]>> {
+    const data = this.createSeriesFilter(filter);
+
+    let params = new HttpParams();
+    params = this.utilityService.addPaginationIfExists(params, pageNum, itemsPerPage);
+
+    return this.httpClient.post<Series[]>(this.baseUrl + 'want-to-read/', data, {observe: 'response', params}).pipe(
+      map(response => {
+        return this.utilityService.createPaginatedResult(response, new PaginatedResult<Series[]>());
+    }));
+  }
+
   getOnDeck(libraryId: number = 0, pageNum?: number, itemsPerPage?: number, filter?: SeriesFilter) {
     const data = this.createSeriesFilter(filter);
 
diff --git a/UI/Web/src/app/all-series/all-series.component.ts b/UI/Web/src/app/all-series/all-series.component.ts
index f46602e13..57ca454cd 100644
--- a/UI/Web/src/app/all-series/all-series.component.ts
+++ b/UI/Web/src/app/all-series/all-series.component.ts
@@ -41,13 +41,23 @@ export class AllSeriesComponent implements OnInit, OnDestroy {
 
     switch (action) {
       case Action.AddToReadingList:
-        this.actionService.addMultipleSeriesToReadingList(selectedSeries, () => {
+        this.actionService.addMultipleSeriesToReadingList(selectedSeries, (success) => {
+          if (success) this.bulkSelectionService.deselectAll();
+        });
+        break;
+      case Action.AddToWantToReadList:
+        this.actionService.addMultipleSeriesToWantToReadList(selectedSeries.map(s => s.id), () => {
+          this.bulkSelectionService.deselectAll();
+        });
+        break;
+      case Action.RemoveFromWantToReadList:
+        this.actionService.removeMultipleSeriesFromWantToReadList(selectedSeries.map(s => s.id), () => {
           this.bulkSelectionService.deselectAll();
         });
         break;
       case Action.AddToCollection:
-        this.actionService.addMultipleSeriesToCollectionTag(selectedSeries, () => {
-          this.bulkSelectionService.deselectAll();
+        this.actionService.addMultipleSeriesToCollectionTag(selectedSeries, (success) => {
+          if (success) this.bulkSelectionService.deselectAll();
         });
         break;
       case Action.MarkAsRead:
diff --git a/UI/Web/src/app/app-routing.module.ts b/UI/Web/src/app/app-routing.module.ts
index a11a842a5..d532757e1 100644
--- a/UI/Web/src/app/app-routing.module.ts
+++ b/UI/Web/src/app/app-routing.module.ts
@@ -45,6 +45,10 @@ const routes: Routes = [
     path: 'libraries',
     loadChildren: () => import('../app/dashboard/dashboard.module').then(m => m.DashboardModule)
   },
+  {
+    path: 'want-to-read',
+    loadChildren: () => import('../app/want-to-read/want-to-read.module').then(m => m.WantToReadModule)
+  },
   {
     path: 'library',
     runGuardsAndResolvers: 'always',
diff --git a/UI/Web/src/app/bookmark/bookmarks/bookmarks.component.html b/UI/Web/src/app/bookmark/bookmarks/bookmarks.component.html
index b29ddccf1..f52e1afc0 100644
--- a/UI/Web/src/app/bookmark/bookmarks/bookmarks.component.html
+++ b/UI/Web/src/app/bookmark/bookmarks/bookmarks.component.html
@@ -2,7 +2,7 @@
     <h2 title>
         Bookmarks
     </h2>
-    <h6 subtitle>{{series?.length}} Series</h6>
+    <h6 subtitle>{{series.length}} Series</h6>
 </app-side-nav-companion-bar>
 <app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
 <app-card-detail-layout 
diff --git a/UI/Web/src/app/cards/bulk-selection.service.ts b/UI/Web/src/app/cards/bulk-selection.service.ts
index 1060832ae..2025517cd 100644
--- a/UI/Web/src/app/cards/bulk-selection.service.ts
+++ b/UI/Web/src/app/cards/bulk-selection.service.ts
@@ -141,7 +141,7 @@ export class BulkSelectionService {
   getActions(callback: (action: Action, data: any) => void) {
     // checks if series is present. If so, returns only series actions
     // else returns volume/chapter items
-    const allowedActions = [Action.AddToReadingList, Action.MarkAsRead, Action.MarkAsUnread, Action.AddToCollection, Action.Delete];
+    const allowedActions = [Action.AddToReadingList, Action.MarkAsRead, Action.MarkAsUnread, Action.AddToCollection, Action.Delete, Action.AddToWantToReadList, Action.RemoveFromWantToReadList];
     if (Object.keys(this.selectedCards).filter(item => item === 'series').length > 0) {
       return this.actionFactory.getSeriesActions(callback).filter(item => allowedActions.includes(item.action));
     }
diff --git a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html
index 369fc8c23..1eb306484 100644
--- a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html
+++ b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html
@@ -16,6 +16,9 @@
 <div class="viewport-container">
     <div class="content-container">
         <div class="card-container mt-2 mb-2">
+            <p *ngIf="items.length === 0 && !isLoading">
+                <ng-container [ngTemplateOutlet]="noDataTemplate"></ng-container>
+            </p>
             <virtual-scroller #scroll [items]="items" [bufferAmount]="1" [parentScroll]="parentScroll">
                 <div class="grid row g-0" #container>
                     <div class="card col-auto mt-2 mb-2" *ngFor="let item of scroll.viewPortItems; trackBy:trackByIdentity; index as i" id="jumpbar-index--{{i}}" [attr.jumpbar-index]="i">
@@ -23,10 +26,6 @@
                     </div>
                 </div>
             </virtual-scroller>
-            
-            <p *ngIf="items.length === 0 && !isLoading">
-                <ng-container [ngTemplateOutlet]="noDataTemplate"></ng-container>
-            </p>
         </div>
     </div>
 
@@ -42,7 +41,9 @@
     </virtual-scroller>
 
     <div class="mx-auto" *ngIf="items.length === 0 && !isLoading" style="width: 200px;">
-        <p><ng-container [ngTemplateOutlet]="noDataTemplate"></ng-container></p>
+        <p>
+            <ng-container [ngTemplateOutlet]="noDataTemplate"></ng-container>
+        </p>
     </div>
 </ng-template>
 
diff --git a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts
index 9cf516bc8..4061d0b50 100644
--- a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts
+++ b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts
@@ -117,6 +117,7 @@ export class CardDetailLayoutComponent implements OnInit, OnDestroy, OnChanges,
     //   }
     //   this.hasResumedJumpKey = true;
     // });
+    console.log(this.noDataTemplate);
   }
 
   ngOnChanges(): void {
diff --git a/UI/Web/src/app/cards/card-item/card-item.component.html b/UI/Web/src/app/cards/card-item/card-item.component.html
index 09d97f48f..9e117b4c3 100644
--- a/UI/Web/src/app/cards/card-item/card-item.component.html
+++ b/UI/Web/src/app/cards/card-item/card-item.component.html
@@ -19,7 +19,7 @@
       
       <div class="not-read-badge" *ngIf="read === 0 && total > 0"></div>
       <div class="bulk-mode {{bulkSelectionService.hasSelections() ? 'always-show' : ''}}" (click)="handleSelection($event)" *ngIf="allowSelection">
-        <input type="checkbox" class="form-check-input" attr.aria-labelledby="{{title}}_{{entity?.id}}" [ngModel]="selected" [ngModelOptions]="{standalone: true}">
+        <input type="checkbox" class="form-check-input" attr.aria-labelledby="{{title}}_{{entity.id}}" [ngModel]="selected" [ngModelOptions]="{standalone: true}">
       </div>
 
       <div class="count" *ngIf="count > 1">
@@ -35,7 +35,7 @@
 
     <div class="card-body" *ngIf="title.length > 0 || actions.length > 0">
       <div>
-        <span class="card-title" placement="top" id="{{title}}_{{entity?.id}}" [ngbTooltip]="tooltipTitle" (click)="handleClick($event)" tabindex="0">
+        <span class="card-title" placement="top" id="{{title}}_{{entity.id}}" [ngbTooltip]="tooltipTitle" (click)="handleClick($event)" tabindex="0">
           <span *ngIf="isPromoted()">
             <i class="fa fa-angle-double-up" aria-hidden="true"></i>
             <span class="visually-hidden">(promoted)</span>
diff --git a/UI/Web/src/app/cards/card-item/card-item.component.ts b/UI/Web/src/app/cards/card-item/card-item.component.ts
index 432f80179..3da1df0d0 100644
--- a/UI/Web/src/app/cards/card-item/card-item.component.ts
+++ b/UI/Web/src/app/cards/card-item/card-item.component.ts
@@ -258,6 +258,10 @@ export class CardItemComponent implements OnInit, OnDestroy {
 
 
   handleClick(event?: any) {
+    if (this.bulkSelectionService.hasSelections()) {
+      this.handleSelection();
+      return;
+    }
     this.clicked.emit(this.title);
   }
 
diff --git a/UI/Web/src/app/cards/series-card/series-card.component.ts b/UI/Web/src/app/cards/series-card/series-card.component.ts
index bfea2f536..67e01ee54 100644
--- a/UI/Web/src/app/cards/series-card/series-card.component.ts
+++ b/UI/Web/src/app/cards/series-card/series-card.component.ts
@@ -97,6 +97,9 @@ export class SeriesCardComponent implements OnInit, OnChanges, OnDestroy {
       case(Action.AddToReadingList):
         this.actionService.addSeriesToReadingList(series);
         break;
+      case Action.AddToWantToReadList:
+        this.actionService.addMultipleSeriesToWantToReadList([series.id]);
+        break;
       case(Action.AddToCollection):
         this.actionService.addMultipleSeriesToCollectionTag([series]);
         break;
diff --git a/UI/Web/src/app/collections/collection-detail/collection-detail.component.html b/UI/Web/src/app/collections/collection-detail/collection-detail.component.html
index 9ef3d02fb..8a0f42c07 100644
--- a/UI/Web/src/app/collections/collection-detail/collection-detail.component.html
+++ b/UI/Web/src/app/collections/collection-detail/collection-detail.component.html
@@ -37,10 +37,4 @@
             ></app-series-card>
         </ng-template>
     </app-card-detail-layout>
-
-    <div class="mx-auto" *ngIf="isLoading" style="width: 200px;">
-        <div class="spinner-border text-secondary loading" role="status">
-            <span class="invisible">Loading...</span>
-        </div>
-    </div>
 </div>
\ No newline at end of file
diff --git a/UI/Web/src/app/collections/collection-detail/collection-detail.component.ts b/UI/Web/src/app/collections/collection-detail/collection-detail.component.ts
index c3debc2d2..b292efccd 100644
--- a/UI/Web/src/app/collections/collection-detail/collection-detail.component.ts
+++ b/UI/Web/src/app/collections/collection-detail/collection-detail.component.ts
@@ -63,14 +63,26 @@ export class CollectionDetailComponent implements OnInit, OnDestroy, AfterConten
 
     switch (action) {
       case Action.AddToReadingList:
-        this.actionService.addMultipleSeriesToReadingList(selectedSeries, () => {
+        this.actionService.addMultipleSeriesToReadingList(selectedSeries, (success) => {
+          if (success) this.bulkSelectionService.deselectAll();
+          this.cdRef.markForCheck();
+        });
+        break;
+      case Action.AddToWantToReadList:
+        this.actionService.addMultipleSeriesToWantToReadList(selectedSeries.map(s => s.id), () => {
+          this.bulkSelectionService.deselectAll();
+          this.cdRef.markForCheck();
+        });
+        break;
+      case Action.RemoveFromWantToReadList:
+        this.actionService.removeMultipleSeriesFromWantToReadList(selectedSeries.map(s => s.id), () => {
           this.bulkSelectionService.deselectAll();
           this.cdRef.markForCheck();
         });
         break;
       case Action.AddToCollection:
-        this.actionService.addMultipleSeriesToCollectionTag(selectedSeries, () => {
-          this.bulkSelectionService.deselectAll();
+        this.actionService.addMultipleSeriesToCollectionTag(selectedSeries, (success) => {
+          if (success) this.bulkSelectionService.deselectAll();
           this.cdRef.markForCheck();
         });
         break;
diff --git a/UI/Web/src/app/library-detail/library-detail.component.html b/UI/Web/src/app/library-detail/library-detail.component.html
index b278228fd..633b18f8c 100644
--- a/UI/Web/src/app/library-detail/library-detail.component.html
+++ b/UI/Web/src/app/library-detail/library-detail.component.html
@@ -3,7 +3,7 @@
         <app-card-actionables [actions]="actions" (actionHandler)="performAction($event)"></app-card-actionables>
         {{libraryName}}
     </h2>
-    <h6 subtitle class="subtitle-with-actionables" *ngIf="active.fragment === ''">{{pagination?.totalItems}} Series</h6>
+    <h6 subtitle class="subtitle-with-actionables" *ngIf="active.fragment === ''">{{pagination.totalItems}} Series</h6>
     <div main>
         <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav nav-pills" style="flex-wrap: nowrap;">
             <li *ngFor="let tab of tabs" [ngbNavItem]="tab">
diff --git a/UI/Web/src/app/library-detail/library-detail.component.ts b/UI/Web/src/app/library-detail/library-detail.component.ts
index 84aa772f1..ab9946b28 100644
--- a/UI/Web/src/app/library-detail/library-detail.component.ts
+++ b/UI/Web/src/app/library-detail/library-detail.component.ts
@@ -57,14 +57,26 @@ export class LibraryDetailComponent implements OnInit, OnDestroy {
 
     switch (action) {
       case Action.AddToReadingList:
-        this.actionService.addMultipleSeriesToReadingList(selectedSeries, () => {
+        this.actionService.addMultipleSeriesToReadingList(selectedSeries, (success) => {
+          if (success) this.bulkSelectionService.deselectAll();
+          this.cdRef.markForCheck();
+        });
+        break;
+      case Action.AddToWantToReadList:
+        this.actionService.addMultipleSeriesToWantToReadList(selectedSeries.map(s => s.id), () => {
+          this.bulkSelectionService.deselectAll();
+          this.cdRef.markForCheck();
+        });
+        break;
+      case Action.RemoveFromWantToReadList:
+        this.actionService.removeMultipleSeriesFromWantToReadList(selectedSeries.map(s => s.id), () => {
           this.bulkSelectionService.deselectAll();
           this.cdRef.markForCheck();
         });
         break;
       case Action.AddToCollection:
-        this.actionService.addMultipleSeriesToCollectionTag(selectedSeries, () => {
-          this.bulkSelectionService.deselectAll();
+        this.actionService.addMultipleSeriesToCollectionTag(selectedSeries, (success) => {
+          if (success) this.bulkSelectionService.deselectAll();
           this.cdRef.markForCheck();
         });
         break;
diff --git a/UI/Web/src/app/series-detail/series-detail.component.ts b/UI/Web/src/app/series-detail/series-detail.component.ts
index 3654f709f..6b00d2d68 100644
--- a/UI/Web/src/app/series-detail/series-detail.component.ts
+++ b/UI/Web/src/app/series-detail/series-detail.component.ts
@@ -180,9 +180,9 @@ export class SeriesDetailComponent implements OnInit, OnDestroy, AfterContentChe
 
     switch (action) {
       case Action.AddToReadingList:
-        this.actionService.addMultipleToReadingList(seriesId, selectedVolumeIds, chapters, () => {
+        this.actionService.addMultipleToReadingList(seriesId, selectedVolumeIds, chapters, (success) => {
           this.actionInProgress = false;
-          this.bulkSelectionService.deselectAll();
+          if (success) this.bulkSelectionService.deselectAll();
           this.changeDetectionRef.markForCheck();
         });
         break;
@@ -379,6 +379,12 @@ export class SeriesDetailComponent implements OnInit, OnDestroy, AfterContentChe
           this.changeDetectionRef.markForCheck();
         });
         break;
+      case Action.AddToWantToReadList:
+        this.actionService.addMultipleSeriesToWantToReadList([series.id], () => {
+          this.actionInProgress = false;
+          this.changeDetectionRef.markForCheck();
+        });
+        break;
       case (Action.Download):
         if (this.downloadInProgress) return;
         this.downloadSeries();
diff --git a/UI/Web/src/app/sidenav/side-nav/side-nav.component.html b/UI/Web/src/app/sidenav/side-nav/side-nav.component.html
index b257080a5..09bd86022 100644
--- a/UI/Web/src/app/sidenav/side-nav/side-nav.component.html
+++ b/UI/Web/src/app/sidenav/side-nav/side-nav.component.html
@@ -1,5 +1,5 @@
 <ng-container>
-    <div class="side-nav" [ngClass]="{'closed' : (navService?.sideNavCollapsed$ | async), 'hidden' :!(navService?.sideNavVisibility$ | async)}"  *ngIf="accountService.currentUser$ | async as user">
+    <div class="side-nav" [ngClass]="{'closed' : (navService.sideNavCollapsed$ | async), 'hidden' :!(navService.sideNavVisibility$ | async)}"  *ngIf="accountService.currentUser$ | async as user">
         <!-- <app-side-nav-item icon="fa-user-circle align-self-center phone-hidden" [title]="user.username | sentenceCase" link="/preferences/">
             <ng-container actions>
                 Todo: This will be customize dashboard/side nav controls
@@ -8,6 +8,7 @@
         </app-side-nav-item> -->
 
         <app-side-nav-item icon="fa-home" title="Home" link="/libraries/"></app-side-nav-item>
+        <app-side-nav-item icon="fa-star" title="Want To Read" link="/want-to-read/"></app-side-nav-item>
         <app-side-nav-item icon="fa-list" title="Collections" link="/collections/"></app-side-nav-item>
         <app-side-nav-item icon="fa-list-ol" title="Reading Lists" link="/lists/"></app-side-nav-item>
         <app-side-nav-item icon="fa-bookmark" title="Bookmarks" link="/bookmarks/"></app-side-nav-item>
@@ -26,5 +27,5 @@
             </ng-container>
         </app-side-nav-item>
     </div>
-    <div class="side-nav-overlay" (click)="toggleNavBar()" [ngClass]="{'closed' : (navService?.sideNavCollapsed$ | async)}"></div>
+    <div class="side-nav-overlay" (click)="toggleNavBar()" [ngClass]="{'closed' : (navService.sideNavCollapsed$ | async)}"></div>
 </ng-container>
\ No newline at end of file
diff --git a/UI/Web/src/app/want-to-read/want-to-read-routing.module.ts b/UI/Web/src/app/want-to-read/want-to-read-routing.module.ts
new file mode 100644
index 000000000..d4a117b8d
--- /dev/null
+++ b/UI/Web/src/app/want-to-read/want-to-read-routing.module.ts
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { AuthGuard } from '../_guards/auth.guard';
+import { WantToReadComponent } from './want-to-read/want-to-read.component';
+
+const routes: Routes = [
+    {path: '**', component: WantToReadComponent, pathMatch: 'full'},
+    {
+      runGuardsAndResolvers: 'always',
+      canActivate: [AuthGuard],
+      children: [
+        {path: '', component: WantToReadComponent, pathMatch: 'full'},
+      ]
+    }
+];
+
+
+@NgModule({
+  imports: [RouterModule.forChild(routes), ],
+  exports: [RouterModule]
+})
+export class WantToReadRoutingModule { }
diff --git a/UI/Web/src/app/want-to-read/want-to-read.module.ts b/UI/Web/src/app/want-to-read/want-to-read.module.ts
new file mode 100644
index 000000000..d3efdffd9
--- /dev/null
+++ b/UI/Web/src/app/want-to-read/want-to-read.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { WantToReadComponent } from './want-to-read/want-to-read.component';
+import { CardsModule } from '../cards/cards.module';
+import { SidenavModule } from '../sidenav/sidenav.module';
+import { WantToReadRoutingModule } from './want-to-read-routing.module';
+
+
+
+@NgModule({
+  declarations: [
+    WantToReadComponent
+  ],
+  imports: [
+    CommonModule,
+    CardsModule,
+    SidenavModule,
+    WantToReadRoutingModule
+  ]
+})
+export class WantToReadModule { }
diff --git a/UI/Web/src/app/want-to-read/want-to-read/want-to-read.component.html b/UI/Web/src/app/want-to-read/want-to-read/want-to-read.component.html
new file mode 100644
index 000000000..8b60ae8ab
--- /dev/null
+++ b/UI/Web/src/app/want-to-read/want-to-read/want-to-read.component.html
@@ -0,0 +1,33 @@
+<div #companionBar>
+    <app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
+        <ng-container title>
+            <h2>
+                Want To Read
+            </h2>
+        </ng-container>
+    </app-side-nav-companion-bar>
+</div>
+
+<div [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid pt-2" #scrollingBlock>
+    <app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
+
+    <app-card-detail-layout
+        [isLoading]="isLoading"
+        [items]="series"
+        [pagination]="seriesPagination"
+        [filterSettings]="filterSettings"
+        [filterOpen]="filterOpen"
+        [parentScroll]="scrollingBlock"
+        [jumpBarKeys]="jumpbarKeys"
+        (applyFilter)="updateFilter($event)">
+        <ng-template #cardItem let-item let-position="idx">
+            <app-series-card [data]="item" [libraryId]="item.libraryId" (reload)="loadPage()"
+            (selection)="bulkSelectionService.handleCardSelection('series', position, series.length, $event)" [selected]="bulkSelectionService.isCardSelected('series', position)" [allowSelection]="true"
+            ></app-series-card>
+        </ng-template>
+
+        <ng-template #noData>
+            No Series match your filter or exist in your list.
+        </ng-template>
+    </app-card-detail-layout>
+</div>
\ No newline at end of file
diff --git a/UI/Web/src/app/want-to-read/want-to-read/want-to-read.component.scss b/UI/Web/src/app/want-to-read/want-to-read/want-to-read.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/UI/Web/src/app/want-to-read/want-to-read/want-to-read.component.ts b/UI/Web/src/app/want-to-read/want-to-read/want-to-read.component.ts
new file mode 100644
index 000000000..e1bdf3608
--- /dev/null
+++ b/UI/Web/src/app/want-to-read/want-to-read/want-to-read.component.ts
@@ -0,0 +1,146 @@
+import { DOCUMENT } from '@angular/common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostListener, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Subject, take, pipe, debounceTime, takeUntil } from 'rxjs';
+import { BulkSelectionService } from 'src/app/cards/bulk-selection.service';
+import { FilterSettings } from 'src/app/metadata-filter/filter-settings';
+import { FilterUtilitiesService } from 'src/app/shared/_services/filter-utilities.service';
+import { UtilityService, KEY_CODES } from 'src/app/shared/_services/utility.service';
+import { JumpKey } from 'src/app/_models/jumpbar/jump-key';
+import { Pagination } from 'src/app/_models/pagination';
+import { Series } from 'src/app/_models/series';
+import { SeriesFilter, FilterEvent } from 'src/app/_models/series-filter';
+import { Action } from 'src/app/_services/action-factory.service';
+import { ActionService } from 'src/app/_services/action.service';
+import { ImageService } from 'src/app/_services/image.service';
+import { MessageHubService, EVENTS } from 'src/app/_services/message-hub.service';
+import { ScrollService } from 'src/app/_services/scroll.service';
+import { SeriesService } from 'src/app/_services/series.service';
+
+
+@Component({
+  selector: 'app-want-to-read',
+  templateUrl: './want-to-read.component.html',
+  styleUrls: ['./want-to-read.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class WantToReadComponent implements OnInit, OnDestroy {
+
+  @ViewChild('scrollingBlock') scrollingBlock: ElementRef<HTMLDivElement> | undefined;
+  @ViewChild('companionBar') companionBar: ElementRef<HTMLDivElement> | undefined;
+
+  isLoading: boolean = true;
+  series: Array<Series> = [];
+  seriesPagination!: Pagination;
+  filter: SeriesFilter | undefined = undefined;
+  filterSettings: FilterSettings = new FilterSettings();
+
+  filterActiveCheck!: SeriesFilter;
+  filterActive: boolean = false;
+
+  jumpbarKeys: Array<JumpKey> = [];
+
+  filterOpen: EventEmitter<boolean> = new EventEmitter();
+ 
+
+  private onDestory: Subject<void> = new Subject<void>();
+
+  bulkActionCallback = (action: Action, data: any) => {
+    const selectedSeriesIndexies = this.bulkSelectionService.getSelectedCardsForSource('series');
+    const selectedSeries = this.series.filter((series, index: number) => selectedSeriesIndexies.includes(index + ''));
+
+    switch (action) {
+      case Action.RemoveFromWantToReadList:
+        this.actionService.removeMultipleSeriesFromWantToReadList(selectedSeries.map(s => s.id), () => {
+          this.bulkSelectionService.deselectAll();
+          this.cdRef.markForCheck();
+        });
+        break;
+    }
+  }
+  collectionTag: any;
+  tagImage: any;
+
+  get ScrollingBlockHeight() {
+    if (this.scrollingBlock === undefined) return 'calc(var(--vh)*100)';
+    const navbar = this.document.querySelector('.navbar') as HTMLElement;
+    if (navbar === null) return 'calc(var(--vh)*100)';
+
+    const companionHeight = this.companionBar!.nativeElement.offsetHeight;
+    const navbarHeight = navbar.offsetHeight;
+    const totalHeight = companionHeight + navbarHeight + 21; //21px to account for padding
+    return 'calc(var(--vh)*100 - ' + totalHeight + 'px)';
+  }
+
+  constructor(public imageService: ImageService, private router: Router, private route: ActivatedRoute, 
+    private seriesService: SeriesService, private titleService: Title, 
+    public bulkSelectionService: BulkSelectionService, private actionService: ActionService, private messageHub: MessageHubService, 
+    private filterUtilityService: FilterUtilitiesService, private utilityService: UtilityService, @Inject(DOCUMENT) private document: Document,
+    private readonly cdRef: ChangeDetectorRef, private scrollService: ScrollService) {
+      this.router.routeReuseStrategy.shouldReuseRoute = () => false;
+      this.titleService.setTitle('Want To Read');
+
+      this.seriesPagination = this.filterUtilityService.pagination(this.route.snapshot);
+      [this.filterSettings.presets, this.filterSettings.openByDefault] = this.filterUtilityService.filterPresetsFromUrl(this.route.snapshot);
+      this.filterActiveCheck = this.seriesService.createSeriesFilter();
+      this.cdRef.markForCheck();
+      
+  }
+
+  ngOnInit(): void {
+    
+    this.messageHub.messages$.pipe(takeUntil(this.onDestory), debounceTime(2000)).subscribe(event => {
+      if (event.event === EVENTS.SeriesRemoved) {
+        this.loadPage();
+      }
+    });
+  }
+
+  ngAfterContentChecked(): void {
+    this.scrollService.setScrollContainer(this.scrollingBlock);
+  }
+
+  ngOnDestroy() {
+    this.onDestory.next();
+    this.onDestory.complete();
+  }
+
+  @HostListener('document:keydown.shift', ['$event'])
+  handleKeypress(event: KeyboardEvent) {
+    if (event.key === KEY_CODES.SHIFT) {
+      this.bulkSelectionService.isShiftDown = true;
+    }
+  }
+
+  @HostListener('document:keyup.shift', ['$event'])
+  handleKeyUp(event: KeyboardEvent) {
+    if (event.key === KEY_CODES.SHIFT) {
+      this.bulkSelectionService.isShiftDown = false;
+    }
+  }
+
+  loadPage() {
+    this.filterActive = !this.utilityService.deepEqual(this.filter, this.filterActiveCheck);
+    this.isLoading = true;
+    this.cdRef.markForCheck();
+    
+    this.seriesService.getWantToRead(undefined, undefined, this.filter).pipe(take(1)).subscribe(paginatedList => {
+      this.series = paginatedList.result;
+      this.seriesPagination = paginatedList.pagination;
+      this.jumpbarKeys = this.utilityService.getJumpKeys(this.series, (series: Series) => series.name);
+      this.isLoading = false;
+      window.scrollTo(0, 0);
+      this.cdRef.markForCheck();
+    });
+  }
+
+  updateFilter(data: FilterEvent) {
+    this.filter = data.filter;
+    
+    if (!data.isFirst) this.filterUtilityService.updateUrlFromFilter(this.seriesPagination, this.filter);
+    this.loadPage();
+  }
+}
+
+